/* ========================================================================== DGCHEME Homepage Page-specific stylesheet — 01 Hero Slider Namespace: rshero27 ========================================================================== */ /* * DGCHEME HOMEPAGE SEMANTIC HEADING SCALE * H1: 20px | H2: 18px | H3: 16px | H4: 14px | H5: 12px | H6: 10px * Current migrated sections are scoped below; do not enlarge semantic headings * unless the project owner explicitly requests a different size. */ .dg-home-main, body.dgcheme-page-full-width .dgpm-page-shell, body.dgcheme-page-full-width .dgpm-page-article, body.dgcheme-page-full-width .dgpm-entry-content { width: 100%; max-width: none; margin: 0; padding: 0; } .rshero27, .rshero27 * { box-sizing: border-box; } .rshero27 { --rshero27-gold: #d6a93b; --rshero27-green: #173f2e; --rshero27-deep: #071c14; --rshero27-ease: cubic-bezier(.22, 1, .36, 1); position: relative; display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: hidden; background: var(--rshero27-deep); font-family: inherit; } .rshero27__viewport { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 0; margin: 0; padding: 0; overflow: hidden; isolation: isolate; background: var(--rshero27-deep); touch-action: pan-y; } .rshero27__slide { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.018); transition: opacity 760ms ease, visibility 760ms ease, transform 1100ms var(--rshero27-ease); } .rshero27__slide.is-active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } .rshero27__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; } .rshero27__image { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; object-fit: cover; object-position: center center; user-select: none; pointer-events: none; transform: scale(1); filter: saturate(.94) contrast(1.02) brightness(.96); transition: transform 8s cubic-bezier(.2,.55,.28,1), filter 1000ms ease; } .rshero27__slide.is-active .rshero27__image { transform: scale(1.065); filter: saturate(1) contrast(1.02) brightness(1); } .rshero27__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(5,24,17,.94) 0%, rgba(7,31,22,.83) 26%, rgba(7,31,22,.42) 56%, rgba(7,31,22,.07) 100% ), linear-gradient( 0deg, rgba(3,14,10,.58) 0%, rgba(3,14,10,.04) 45% ); } .rshero27__shade::after { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 76%); mask-image: linear-gradient(to right, #000 0%, transparent 76%); } .rshero27__content { position: absolute; z-index: 5; top: 30%; left: clamp(120px, 9vw, 155px); width: min(650px, calc(100% - 300px)); color: #fff; direction: ltr; text-align: left; transform: translateY(-50%); } .rshero27__eyebrow { display: inline-flex; align-items: center; gap: 11px; min-height: 34px; margin: 0 0 18px; padding: 8px 13px; border: 1px solid rgba(214,169,59,.25); border-radius: 999px; color: #f0c95c; background: rgba(7,31,22,.46); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 2px; opacity: 0; transform: translateY(22px); transition: opacity 580ms ease, transform 720ms var(--rshero27-ease); } .rshero27__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--rshero27-gold); } .rshero27__title { max-width: 680px; margin: 0; padding: 0; color: #fff; font-size: clamp(42px, 4.7vw, 76px); line-height: 1.03; font-weight: 700; letter-spacing: normal; opacity: 0; transform: translateY(30px); transition: opacity 650ms ease, transform 820ms var(--rshero27-ease); } .rshero27__description { max-width: 590px; margin: 24px 0 0; padding: 0; color: rgba(255,255,255,.80); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.82; font-weight: 400; opacity: 0; transform: translateY(30px); transition: opacity 650ms ease, transform 820ms var(--rshero27-ease); } .rshero27__cta { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; margin: 32px 0 0; padding: 13px 23px; border: 1px solid rgba(255,255,255,.27); border-radius: 999px; color: #fff; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14px; line-height: 1; font-weight: 650; text-decoration: none; opacity: 0; transform: translateY(30px); transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, opacity 650ms ease, transform 820ms var(--rshero27-ease); } .rshero27__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--rshero27-ease); } a.rshero27__cta:hover { color: #172018; border-color: var(--rshero27-gold); background: var(--rshero27-gold); box-shadow: 0 14px 34px rgba(0,0,0,.22); transform: translateY(-3px); } a.rshero27__cta:hover svg { transform: translateX(4px); } .rshero27__cta--pending { cursor: default; } .rshero27__slide.is-active .rshero27__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 160ms; } .rshero27__slide.is-active .rshero27__title { opacity: 1; transform: translateY(0); transition-delay: 260ms; } .rshero27__slide.is-active .rshero27__description { opacity: 1; transform: translateY(0); transition-delay: 370ms; } .rshero27__slide.is-active .rshero27__cta { opacity: 1; transform: translateY(0); transition-delay: 480ms; } .rshero27__arrow { position: absolute; z-index: 30; top: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 90px; height: 48px; margin: 0; padding: 0 10px; border: 1px solid rgba(214,169,59,.32); border-radius: 999px; color: rgba(255,255,255,.94); background: rgba(7,31,22,.58); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 12px 30px rgba(0,0,0,.18); cursor: pointer; transform: translateY(-50%); transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease, transform 260ms var(--rshero27-ease); } .rshero27__arrow--prev { left: 22px; } .rshero27__arrow--next { right: 22px; } .rshero27__arrow span { font-size: 7px; line-height: 1; font-weight: 800; letter-spacing: .7px; } .rshero27__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .rshero27__arrow:hover { color: #172018; border-color: var(--rshero27-gold); background: var(--rshero27-gold); transform: translateY(-50%) scale(1.055); } .rshero27__arrow:focus-visible, .rshero27__dot:focus-visible, .rshero27__cta:focus-visible { outline: 2px solid #ffe161; outline-offset: 4px; } .rshero27__bottom { position: absolute; z-index: 32; right: clamp(22px, 4vw, 64px); bottom: 22px; left: clamp(22px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: none; } .rshero27__dots { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 36px; margin: 0; padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(7,31,22,.54); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; } .rshero27__dot { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px; opacity: .62; background: rgba(255,255,255,.76); cursor: pointer; transition: width 300ms var(--rshero27-ease), opacity 240ms ease, background-color 240ms ease; } .rshero27__dot.is-active { width: 28px; opacity: 1; background: var(--rshero27-gold); } .rshero27__counter { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; min-height: 36px; margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #fff; background: rgba(7,31,22,.54); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); direction: ltr; font-variant-numeric: tabular-nums; pointer-events: auto; } .rshero27__current { color: var(--rshero27-gold); font-size: 17px; line-height: 1; font-weight: 750; } .rshero27__counter-line { width: 24px; height: 1px; background: rgba(255,255,255,.36); } .rshero27__total { color: rgba(255,255,255,.66); font-size: 11px; line-height: 1; font-weight: 650; } @media (max-width: 1024px) { .rshero27__viewport { height: 620px; } .rshero27__content { left: 88px; width: min(590px, calc(100% - 176px)); } .rshero27__title { font-size: clamp(39px, 6vw, 60px); } } @media (max-width: 767px) { .rshero27__viewport { height: auto; min-height: 0; aspect-ratio: 9 / 16; } .rshero27__shade { background: linear-gradient( 180deg, rgba(4,19,13,.27) 0%, rgba(4,19,13,.04) 24%, rgba(4,19,13,.10) 52%, rgba(4,19,13,.84) 100% ); } .rshero27__shade::after { display: none; } .rshero27__content { top: auto; right: 23px; bottom: 88px; left: 23px; width: auto; transform: none; } .rshero27__eyebrow { min-height: 30px; margin-bottom: 11px; padding: 7px 10px; font-size: 9px; letter-spacing: 1.3px; } .rshero27__title { font-size: clamp(30px, 9.2vw, 43px); line-height: 1.07; } .rshero27__description { display: -webkit-box; margin-top: 13px; overflow: hidden; font-size: 13px; line-height: 1.62; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .rshero27__cta { min-height: 45px; margin-top: 17px; padding: 11px 17px; font-size: 12px; } .rshero27__arrow { min-width: 48px; height: 42px; padding: 0 8px; gap: 3px; } .rshero27__arrow--prev { left: 10px; } .rshero27__arrow--next { right: 10px; } .rshero27__arrow span { font-size: 6px; } .rshero27__arrow svg { width: 16px; height: 16px; } .rshero27__bottom { right: 15px; bottom: 15px; left: 15px; } .rshero27__dots, .rshero27__counter { min-height: 33px; } .rshero27__dots { gap: 6px; padding: 7px 9px; } .rshero27__counter { padding: 7px 10px; } .rshero27__dot { width: 7px; height: 7px; } .rshero27__dot.is-active { width: 23px; } .rshero27__current { font-size: 15px; } .rshero27__counter-line { width: 18px; } } @media (max-width: 420px) { .rshero27__content { right: 19px; bottom: 82px; left: 19px; } .rshero27__title { font-size: 30px; } .rshero27__description { -webkit-line-clamp: 2; } } @media (prefers-reduced-motion: reduce) { .rshero27__slide, .rshero27__eyebrow, .rshero27__title, .rshero27__description, .rshero27__cta { transition-duration: 1ms; } .rshero27__image { transition: none; } } /* ========================================================= HOMEPAGE / SECTION 02 — INDUSTRIAL PIGMENT INTRO Namespace: rsneo-h Source: approved Rang Sareh RSNEO section, migrated natively. ========================================================= */ /* ========================================================= DGCHEME HOMEPAGE — SECTION 02 / INDUSTRIAL PIGMENT INTRO Migrated from approved RSNEO design Prefix: rsneo-h- SECTION MAP 01 — CORE / BACKGROUND 02 — CONTENT / TYPOGRAPHY 03 — ACTIONS / TRUST 04 — VISUAL / DECORATIONS 05 — INFINITE TEXT RAIL 06 — RESPONSIVE 07 — ACCESSIBILITY / REDUCED MOTION ========================================================= */ .rsneo-h, .rsneo-h * { box-sizing: border-box; } /* ========================================================= [01] CORE / BACKGROUND — START ========================================================= */ /* ========================================================= HERO ========================================================= */ .rsneo-h { --rsneo-bg: #071a13; --rsneo-bg2: #0c2a1e; --rsneo-green: #183f2c; --rsneo-green2: #295436; --rsneo-yellow: #ffe161; --rsneo-white: #f7faf7; --rsneo-muted: #b7c6bc; position: relative; width: 100%; margin: 0; min-height: 760px; overflow: hidden; background: radial-gradient( circle at 76% 28%, rgba(255,97,73,.13), transparent 20% ), radial-gradient( circle at 67% 65%, rgba(79,100,255,.11), transparent 28% ), radial-gradient( circle at 20% 14%, rgba(255,225,97,.07), transparent 25% ), linear-gradient( 120deg, #061710 0%, #0b251a 52%, #061a12 100% ); isolation: isolate; } /* ========================================================= BACKGROUND GRID ========================================================= */ .rsneo-h::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 52px 52px; -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,.72), transparent 90% ); mask-image: linear-gradient( to bottom, rgba(0,0,0,.72), transparent 90% ); pointer-events: none; } /* ========================================================= AURORA ========================================================= */ .rsneo-h__aurora { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; } .rsneo-h__aurora--one { top: -180px; right: 20%; width: 480px; height: 480px; background: rgba(255,225,97,.08); } .rsneo-h__aurora--two { bottom: -220px; left: 25%; width: 520px; height: 520px; background: rgba(65,114,255,.08); } /* ========================================================= NOISE ========================================================= */ .rsneo-h__noise { position: absolute; inset: 0; z-index: 1; opacity: .18; pointer-events: none; background-image: radial-gradient( rgba(255,255,255,.045) .6px, transparent .6px ); background-size: 6px 6px; } /* ========================================================= INNER ========================================================= */ .rsneo-h__inner { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); align-items: center; gap: 72px; width: min( 1380px, calc(100% - 90px) ); min-height: 700px; margin: 0 auto; padding: 75px 0 80px; direction: rtl; } /* ========================================================= [01] CORE / BACKGROUND — END [02] CONTENT / TYPOGRAPHY — START ========================================================= */ /* ========================================================= CONTENT ========================================================= */ .rsneo-h__content { position: relative; z-index: 5; max-width: 660px; direction: rtl; text-align: right; opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.18,.76,.2,1); } .rsneo-h--visible .rsneo-h__content { opacity: 1; transform: translateY(0); } /* ========================================================= EYEBROW ========================================================= */ .rsneo-h__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.045); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #d7e2da; font-size: 12px; line-height: 1; } .rsneo-h__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffe161; box-shadow: 0 0 0 5px rgba(255,225,97,.08); } /* ========================================================= TITLE ========================================================= */ .rsneo-h__title { max-width: 540px; margin: 0 0 2px; padding: 0; color: #f6faf7; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.012em; } .rsneo-h__title-gradient { display: block; max-width: 540px; margin: 0 0 18px; color: transparent; font-size: 16px; font-weight: 700; line-height: 1.4; background: linear-gradient( 90deg, #ffe161 0%, #ff9c56 33%, #f46e82 58%, #80cbe5 82%, #ffe161 100% ); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: rsneoSpectrum 8s linear infinite; } @keyframes rsneoSpectrum { from { background-position: 0% center; } to { background-position: 220% center; } } /* ========================================================= LEAD ========================================================= */ .rsneo-h__lead { max-width: 600px; margin: 0 0 28px; color: var(--rsneo-muted); font-size: 15px; font-weight: 400; line-height: 2; } /* ========================================================= [02] CONTENT / TYPOGRAPHY — END [03] ACTIONS / TRUST — START ========================================================= */ /* ========================================================= ACTIONS ========================================================= */ .rsneo-h__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 34px; } .rsneo-h__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 15px; text-decoration: none; font-size: 13.5px; font-weight: 700; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-color .35s ease, border-color .35s ease; } .rsneo-h__btn--primary { min-width: 164px; background: #ffe161; color: #123625; box-shadow: 0 13px 28px rgba(255,225,97,.12); } .rsneo-h__btn-icon { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(18,54,37,.09); } .rsneo-h__btn-icon svg, .rsneo-h__call-icon svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rsneo-h__btn--ghost { min-width: 156px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.045); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #ecf4ef; } .rsneo-h__call-icon { display: flex; align-items: center; justify-content: center; } /* ========================================================= BUTTON HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .rsneo-h__btn:hover { transform: translateY(-4px); } .rsneo-h__btn--primary:hover { background: #ffe77d; box-shadow: 0 17px 34px rgba(255,225,97,.20); } .rsneo-h__btn--ghost:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); } } /* ========================================================= TRUST ========================================================= */ .rsneo-h__trust { display: flex; flex-wrap: wrap; gap: 18px 23px; } .rsneo-h__trust-item { display: flex; align-items: center; gap: 10px; } .rsneo-h__trust-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 39px; width: 39px; height: 39px; border: 1px solid rgba(255,225,97,.13); border-radius: 12px; background: rgba(255,225,97,.055); } .rsneo-h__trust-icon svg { width: 19px; height: 19px; fill: none; stroke: #ffe161; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rsneo-h__trust-item strong { display: block; margin-bottom: 2px; color: #edf5ef; font-size: 12.5px; font-weight: 700; } .rsneo-h__trust-item small { display: block; color: #82988a; font-size: 10.5px; font-weight: 400; } /* ========================================================= [03] ACTIONS / TRUST — END [04] VISUAL / DECORATIONS — START ========================================================= */ /* ========================================================= VISUAL ========================================================= */ .rsneo-h__visual { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; perspective: 1200px; opacity: 0; transform: translateX(-30px); transition: opacity 1s ease .13s, transform 1s cubic-bezier(.18,.76,.2,1) .13s; } .rsneo-h--visible .rsneo-h__visual { opacity: 1; transform: translateX(0); } /* ========================================================= MAIN VISUAL CARD ========================================================= */ .rsneo-h__visual-card { position: relative; z-index: 4; width: min( 520px, 88% ); aspect-ratio: 1 / 1.08; padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 34px; background: rgba(255,255,255,.045); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 80px rgba(0,0,0,.32); transform-style: preserve-3d; transition: transform .16s ease-out; } .rsneo-h__visual-media { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 27px; background: #122c20; } /* ========================================================= IMAGE AREA ========================================================= */ .rsneo-h__image { position: absolute; inset: 0; background-image: linear-gradient( 145deg, rgba(255,255,255,.02), rgba(0,0,0,.10) ), radial-gradient( circle at 33% 30%, #d5684a, transparent 19% ), radial-gradient( circle at 66% 34%, #e1b632, transparent 19% ), radial-gradient( circle at 72% 68%, #4252a9, transparent 21% ), radial-gradient( circle at 35% 72%, #2e7358, transparent 23% ), #18372a; background-position: center; background-repeat: no-repeat; background-size: cover; } .rsneo-h__visual-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(5,20,14,.02) 28%, rgba(5,20,14,.52) 100% ); pointer-events: none; } /* ========================================================= SPECTRUM DOTS ========================================================= */ .rsneo-h__spectrum { position: absolute; top: 23px; right: 24px; z-index: 5; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(6,20,14,.35); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); } .rsneo-h__spectrum span { display: block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px rgba(255,255,255,.08); } /* Spectrum colors are class based so section HTML contains no inline CSS. */ .rsneo-h__spectrum-color--coral { color: #ff445f; } .rsneo-h__spectrum-color--orange { color: #ff9b3d; } .rsneo-h__spectrum-color--yellow { color: #ffe161; } .rsneo-h__spectrum-color--green { color: #65d494; } .rsneo-h__spectrum-color--cyan { color: #39bddd; } .rsneo-h__spectrum-color--violet { color: #6867e8; } /* ========================================================= GLASS CONTENT ========================================================= */ .rsneo-h__glass-card { position: absolute; right: 25px; bottom: 25px; left: 25px; z-index: 5; padding: 20px 21px 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(6,24,16,.44); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #ffffff; direction: rtl; } .rsneo-h__glass-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: #bcd0c2; font-size: 10.5px; } .rsneo-h__glass-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffe161; box-shadow: 0 0 12px rgba(255,225,97,.65); } .rsneo-h__glass-card strong { display: block; font-size: 22px; font-weight: 750; line-height: 1.65; } .rsneo-h__glass-line { display: flex; align-items: center; gap: 10px; margin-top: 15px; } .rsneo-h__glass-line span { flex: 1; height: 1px; background: rgba(255,255,255,.14); } .rsneo-h__glass-line small { color: #8fa598; font-size: 9px; letter-spacing: .15em; } /* ========================================================= FLOAT CARDS ========================================================= */ .rsneo-h__float { position: absolute; z-index: 15; display: flex; align-items: center; gap: 11px; min-width: 175px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(13,39,27,.76); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 17px 40px rgba(0,0,0,.24); direction: rtl; animation: rsneoFloat 5.5s ease-in-out infinite; } /* کیفیت */ .rsneo-h__float--quality { top: 112px; left: -20px; } /* طیف گسترده عمداً بالا قرار گرفته و دیگر روی Glass Card پایین تصویر نمی‌افتد. */ .rsneo-h__float--palette { top: 30px; right: -24px; bottom: auto; left: auto; min-width: 178px; animation-delay: -2.3s; } @keyframes rsneoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ========================================================= FLOAT ICON ========================================================= */ .rsneo-h__float-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,225,97,.10); } .rsneo-h__float-icon svg { width: 19px; height: 19px; fill: none; stroke: #ffe161; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rsneo-h__float small { display: block; margin-bottom: 3px; color: #8fa397; font-size: 9.5px; } .rsneo-h__float strong { display: block; color: #eff6f1; font-size: 11.5px; font-weight: 700; } /* ========================================================= PALETTE BARS ========================================================= */ .rsneo-h__palette-bars { display: flex; align-items: center; gap: 5px; direction: ltr; } .rsneo-h__mini-color { display: block; flex: 0 0 15px; width: 15px; height: 37px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .rsneo-h__mini-color--1 { background: linear-gradient( 180deg, #ff9b86, #ff7059 ); } .rsneo-h__mini-color--2 { background: linear-gradient( 180deg, #ffe983, #ffd64e ); } .rsneo-h__mini-color--3 { background: linear-gradient( 180deg, #7bc7eb, #4e9fd0 ); } /* ========================================================= PIGMENT BALLS ========================================================= */ .rsneo-h__pigment { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; filter: saturate(1.1); } .rsneo-h__pigment--1 { top: 42px; right: 68px; width: 47px; height: 47px; background: radial-gradient( circle at 32% 28%, #ffcf6f, #df7d35 55%, #774128 ); box-shadow: 0 17px 30px rgba(214,112,46,.24); animation: rsneoBall 7s ease-in-out infinite; } .rsneo-h__pigment--2 { bottom: 41px; left: 80px; width: 34px; height: 34px; background: radial-gradient( circle at 32% 28%, #7bd3c0, #287966 58%, #16493d ); animation: rsneoBall 6s ease-in-out -2s infinite; } .rsneo-h__pigment--3 { top: 48%; right: 12px; width: 25px; height: 25px; background: radial-gradient( circle at 30% 25%, #8f8be8, #4854a5 60%, #282a66 ); animation: rsneoBall 5s ease-in-out -1s infinite; } @keyframes rsneoBall { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-13px,0); } } /* ========================================================= ORBITS ========================================================= */ .rsneo-h__orbit { position: absolute; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; pointer-events: none; } .rsneo-h__orbit--one { width: 520px; height: 520px; animation: rsneoOrbit 25s linear infinite; } .rsneo-h__orbit--two { width: 420px; height: 420px; border-style: dashed; animation: rsneoOrbit 31s linear reverse infinite; } @keyframes rsneoOrbit { to { transform: rotate(360deg); } } /* ========================================================= [04] VISUAL / DECORATIONS — END [05] INFINITE TEXT RAIL — START ========================================================= */ /* ========================================================= TRUE INFINITE RAIL ========================================================= */ .rsneo-h__rail { position: relative; z-index: 25; display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.15); isolation: isolate; } /* ========================================================= EDGE FADE ========================================================= */ .rsneo-h__rail::before, .rsneo-h__rail::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 20; width: 76px; pointer-events: none; } .rsneo-h__rail::before { left: 0; background: linear-gradient( 90deg, #071a13 0%, rgba(7,26,19,.82) 24%, transparent 100% ); } .rsneo-h__rail::after { right: 0; background: linear-gradient( 270deg, #071a13 0%, rgba(7,26,19,.82) 24%, transparent 100% ); } /* ========================================================= RAIL TRACK ========================================================= */ .rsneo-h__rail-track { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; width: max-content; min-width: max-content; max-width: none; gap: 0; margin: 0; margin-left: 0; margin-right: auto; padding: 0; direction: ltr; text-align: left; transform-origin: left center; transform: translate3d(0,0,0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: none; } .rsneo-h__rail-track[data-animated="true"] { animation: rsneoRailSeamless var( --rsneo-rail-duration, 34s ) linear infinite; } /* ========================================================= RAIL GROUP Track = [SOURCE][COPY] خود Group عمداً LTR است تا ترتیب هندسی دو نیمه دقیقاً مثل مکانیزم تست‌شده ازکی‌وب باشد. ========================================================= */ .rsneo-h__rail-group { display: flex; flex: 0 0 auto; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 27px; width: max-content; min-width: max-content; max-width: none; margin: 0; /* * فقط سمت انتهایی Group به اندازه gap پدینگ دارد. * چون Markup با ... تمام می‌شود، * فاصله اتصال انتهای SOURCE به ابتدای COPY دقیقاً * برابر فاصله داخلی آیتم‌ها می‌شود. */ padding: 16px 27px 16px 0; white-space: nowrap; direction: ltr; box-sizing: border-box; } /* ========================================================= RAIL TEXT ========================================================= */ .rsneo-h__rail-group span { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; white-space: nowrap; direction: rtl; color: #91a69a; font-size: 10.5px; font-weight: 500; line-height: 1.4; transition: color .3s ease; } /* ========================================================= RAIL DOT ========================================================= */ .rsneo-h__rail-group i { display: block; flex: 0 0 5px; width: 5px; height: 5px; margin: 0; padding: 0; border-radius: 50%; background: #ffe161; box-shadow: 0 0 9px rgba(255,225,97,.34); opacity: .78; } /* ========================================================= TRUE SEAMLESS LOOP دو نیمه Track کاملاً یکسان‌اند. ========================================================= */ @keyframes rsneoRailSeamless { from { transform: translate3d( 0, 0, 0 ); } to { transform: translate3d( -50%, 0, 0 ); } } /* ========================================================= RAIL HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .rsneo-h__rail:hover .rsneo-h__rail-track[data-animated="true"] { animation-play-state: running; } .rsneo-h__rail-group span:hover { color: #ffe161; } } /* ========================================================= [05] INFINITE TEXT RAIL — END [06] RESPONSIVE — START ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media (max-width:1199px) { .rsneo-h__inner { width: calc(100% - 50px); grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 35px; } .rsneo-h__title { font-size: 20px; } .rsneo-h__visual { min-height: 500px; } .rsneo-h__float--quality { left: 0; top: 100px; } .rsneo-h__float--palette { top: 24px; right: 0; bottom: auto; } .rsneo-h__rail::before, .rsneo-h__rail::after { width: 55px; } .rsneo-h__rail-group { gap: 24px; padding: 15px 24px 15px 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .rsneo-h { min-height: auto; } .rsneo-h__inner { display: flex; flex-direction: column; width: calc(100% - 28px); gap: 40px; min-height: auto; padding: 72px 0 55px; } .rsneo-h__content { width: 100%; text-align: center; } .rsneo-h__eyebrow { margin-bottom: 16px; } .rsneo-h__title { max-width: 460px; margin: 0 auto 2px; font-size: 20px; line-height: 1.45; } .rsneo-h__title-gradient { max-width: 460px; margin: 0 auto 16px; font-size: 16px; } .rsneo-h__lead { max-width: 480px; margin: 0 auto 27px; font-size: 13.8px; line-height: 1.95; } .rsneo-h__actions { justify-content: center; margin-bottom: 31px; } .rsneo-h__btn { min-height: 51px; } .rsneo-h__trust { justify-content: center; gap: 16px 18px; } .rsneo-h__trust-item { text-align: right; } /* VISUAL */ .rsneo-h__visual { width: 100%; min-height: auto; padding: 48px 0 42px; } .rsneo-h__visual-card { width: min( 430px, 91% ); border-radius: 27px; } .rsneo-h__visual-media { border-radius: 21px; } .rsneo-h__glass-card { right: 17px; left: 17px; bottom: 17px; padding: 16px; } .rsneo-h__glass-card strong { font-size: 18px; } /* QUALITY */ .rsneo-h__float--quality { top: 3px; left: 3px; min-width: 150px; padding: 10px 11px; border-radius: 14px; transform-origin: top left; } /* PALETTE */ .rsneo-h__float--palette { top: 3px; right: 3px; bottom: auto; min-width: 151px; padding: 10px 11px; border-radius: 14px; transform-origin: top right; } .rsneo-h__palette-bars { gap: 4px; } .rsneo-h__mini-color { flex-basis: 12px; width: 12px; height: 30px; } .rsneo-h__float small { font-size: 8.8px; } .rsneo-h__float strong { font-size: 10.5px; } /* PIGMENTS */ .rsneo-h__pigment--1 { top: 24px; right: 36px; } .rsneo-h__pigment--2 { bottom: 1px; left: 40px; } /* ORBITS */ .rsneo-h__orbit--one { width: 390px; height: 390px; } .rsneo-h__orbit--two { width: 310px; height: 310px; } /* RAIL */ .rsneo-h__rail::before, .rsneo-h__rail::after { width: 32px; } .rsneo-h__rail-group { gap: 20px; padding: 13px 20px 13px 0; } .rsneo-h__rail-group span { font-size: 10px; } .rsneo-h__rail-group i { flex-basis: 4px; width: 4px; height: 4px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:430px) { .rsneo-h__inner { width: calc(100% - 22px); } .rsneo-h__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rsneo-h__btn { min-width: 0; padding: 0 13px; font-size: 12.5px; } .rsneo-h__trust { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); width: 100%; } .rsneo-h__trust-item { min-width: 0; } .rsneo-h__visual { padding-top: 54px; } .rsneo-h__visual-card { width: 94%; } .rsneo-h__spectrum { top: 16px; right: 16px; } .rsneo-h__spectrum span { width: 8px; height: 8px; } .rsneo-h__float--quality, .rsneo-h__float--palette { min-width: 138px; padding: 9px 9px; } .rsneo-h__float--quality { left: -1px; } .rsneo-h__float--palette { right: -1px; } .rsneo-h__rail-group { gap: 18px; padding: 12px 18px 12px 0; } } /* ========================================================= [06] RESPONSIVE — END [07] ACCESSIBILITY / REDUCED MOTION — START ========================================================= */ /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rsneo-h__content, .rsneo-h__visual { opacity: 1; transform: none; } .rsneo-h__title-gradient, .rsneo-h__float, .rsneo-h__pigment, .rsneo-h__orbit { animation: none; } .rsneo-h__rail-track.rsneo-h__rail-track--running { animation: none; } } /* ========================================================= DGCHEME / SECTION 02 ISOLATED SEAMLESS RAIL ENGINE — v1.6.7 این Rail عمداً Namespace مستقل دارد تا هیچ CSS/JS قدیمی مربوط به rsneo-h__rail-track نتواند در Loop جدید دخالت کند. ========================================================= */ .rsneo-h__rail-track.rsneo-h__rail-track--legacy-hidden { display: none; } .rsneo-loopx { position: relative; display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow: hidden; direction: ltr; text-align: left; } .rsneo-loopx__track { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; width: max-content; min-width: max-content; max-width: none; gap: 0; margin: 0; padding: 0; direction: ltr; transform: translate3d(0,0,0); transform-origin: left center; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: none; } .rsneo-loopx[data-animated="true"] .rsneo-loopx__track { animation: rsneoLoopXSeamless var( --rsneo-loopx-duration, 36s ) linear infinite; } .rsneo-loopx__group { display: flex; flex: 0 0 auto; flex-flow: row nowrap; align-items: center; justify-content: flex-start; width: max-content; min-width: max-content; max-width: none; gap: 27px; margin: 0; padding: 16px 27px 16px 0; white-space: nowrap; direction: ltr; box-sizing: border-box; } .rsneo-loopx__text { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; padding: 0; white-space: nowrap; direction: rtl; color: #91a69a; font-size: 10.5px; font-weight: 500; line-height: 1.4; transition: color .3s ease; } .rsneo-loopx__dot { display: block; flex: 0 0 5px; width: 5px; height: 5px; margin: 0; padding: 0; border-radius: 50%; background: #ffe161; box-shadow: 0 0 9px rgba(255,225,97,.34); opacity: .78; } @keyframes rsneoLoopXSeamless { from { transform: translate3d( 0, 0, 0 ); } to { transform: translate3d( -50%, 0, 0 ); } } @media (hover:hover) and (pointer:fine) { .rsneo-loopx__text:hover { color: #ffe161; } } @media (max-width:1199px) { .rsneo-loopx__group { gap: 24px; padding: 15px 24px 15px 0; } } @media (max-width:767px) { .rsneo-loopx__group { gap: 20px; padding: 13px 20px 13px 0; } .rsneo-loopx__text { font-size: 10px; } .rsneo-loopx__dot { flex-basis: 4px; width: 4px; height: 4px; } } @media (max-width:430px) { .rsneo-loopx__group { gap: 18px; padding: 12px 18px 12px 0; } } @media (prefers-reduced-motion: reduce) { .rsneo-loopx__track { animation: none; transform: none; will-change: auto; } } /* END — ISOLATED SEAMLESS RAIL ENGINE */ /* ========================================================= [07] ACCESSIBILITY / REDUCED MOTION — END DGCHEME HOMEPAGE — SECTION 02 — END ========================================================= */ /* ========================================================= DGCHEME HOMEPAGE TRUSTED PARTNERS / BRAND NETWORK Namespace: rsx-brand ========================================================= */ .rsx-brand, .rsx-brand * { box-sizing: border-box; } .rsx-brand { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0 76px; background: #ffffff; color: #163e2d; } .rsx-brand__grid { position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .42; background-image: linear-gradient( rgba(22,62,45,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(22,62,45,.035) 1px, transparent 1px ); background-size: 44px 44px; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 16%, #000 82%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 16%, #000 82%, transparent ); } .rsx-brand__glow { position: absolute; z-index: -2; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; filter: blur(4px); opacity: .58; } .rsx-brand__glow--one { top: -230px; right: -110px; background: radial-gradient( circle, rgba(255,225,97,.17), rgba(255,225,97,0) 70% ); } .rsx-brand__glow--two { bottom: -260px; left: -120px; background: radial-gradient( circle, rgba(43,103,73,.11), rgba(43,103,73,0) 72% ); } .rsx-brand__inner { position: relative; z-index: 2; width: min( 1240px, calc(100% - 48px) ); margin: 0 auto; } /* ========================================================= HEADING ========================================================= */ .rsx-brand__head { width: min( 760px, 100% ); margin: 0 auto 42px; text-align: center; } .rsx-brand__eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; } .rsx-brand__eyebrow-line { width: 30px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(194,154,48,.92) ); } .rsx-brand__eyebrow-line:last-child { transform: scaleX(-1); } .rsx-brand__eyebrow-text { color: #9b7d31; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .16em; } .rsx-brand__title { margin: 0 0 13px; color: #163e2d; font-size: 18px; font-weight: 800; line-height: 1.7; letter-spacing: -.012em; } .rsx-brand__title span { position: relative; display: inline-block; color: #2b6749; } .rsx-brand__title span::after { content: ""; position: absolute; right: 0; bottom: 2px; width: 100%; height: 1px; border-radius: 999px; background: linear-gradient( 90deg, rgba(194,154,48,.18), rgba(194,154,48,.88), rgba(194,154,48,.18) ); } .rsx-brand__desc { max-width: 700px; margin: 0 auto; color: #63736a; font-size: 12px; font-weight: 400; line-height: 1.9; } /* ========================================================= FRAME ========================================================= */ .rsx-brand__frame { position: relative; overflow: hidden; border: 1px solid rgba(22,62,45,.08); border-radius: 28px; background: linear-gradient( 180deg, rgba(248,250,247,.96), rgba(244,247,243,.9) ); box-shadow: 0 24px 70px rgba(24,58,41,.075), inset 0 1px 0 rgba(255,255,255,.9); } .rsx-brand__frame::before { content: ""; position: absolute; inset: 0 18% auto; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,225,97,.9), transparent ); pointer-events: none; } .rsx-brand__frame-head { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; padding: 14px 22px; border-bottom: 1px solid rgba(22,62,45,.07); background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .rsx-brand__frame-label { display: flex; align-items: center; gap: 11px; min-width: 0; } .rsx-brand__frame-dot { flex: 0 0 9px; width: 9px; height: 9px; border: 2px solid rgba(22,62,45,.16); border-radius: 50%; background: #ffe161; box-shadow: 0 0 0 5px rgba(255,225,97,.13); } .rsx-brand__frame-label div { min-width: 0; } .rsx-brand__frame-label small, .rsx-brand__frame-note { font-family: Arial, sans-serif; } .rsx-brand__frame-label small { display: block; margin-bottom: 3px; color: #8a978f; font-size: 8px; font-weight: 700; letter-spacing: .14em; } .rsx-brand__frame-label strong { display: block; color: #254936; font-size: 12.5px; font-weight: 700; } .rsx-brand__frame-note { display: flex; align-items: center; gap: 9px; color: #77867c; font-size: 9px; font-weight: 600; } .rsx-brand__frame-note i { width: 3px; height: 3px; border-radius: 50%; background: #d9b92e; } /* ========================================================= MASKS ========================================================= */ .rsx-brand__mask { position: absolute; top: 74px; bottom: 0; z-index: 5; width: 86px; pointer-events: none; } .rsx-brand__mask--left { left: 0; background: linear-gradient( 90deg, #f5f8f4 0%, rgba(245,248,244,.93) 24%, rgba(245,248,244,0) 100% ); } .rsx-brand__mask--right { right: 0; background: linear-gradient( 270deg, #f5f8f4 0%, rgba(245,248,244,.93) 24%, rgba(245,248,244,0) 100% ); } /* ========================================================= VIEWPORT / TRACK ========================================================= */ .rsx-brand__viewport { position: relative; width: 100%; overflow: hidden; padding: 20px 0 22px; direction: ltr; } .rsx-brand__track { display: flex; flex-flow: row nowrap; align-items: stretch; width: max-content; min-width: max-content; max-width: none; gap: 0; margin: 0; padding: 0; direction: ltr; transform: translate3d(0,0,0); transform-origin: left center; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: none; } .rsx-brand__track[data-animated="true"] { animation: rsxBrandProfessionalLoop var( --rsx-brand-duration, 42s ) linear infinite; } @keyframes rsxBrandProfessionalLoop { from { transform: translate3d( 0, 0, 0 ); } to { transform: translate3d( -50%, 0, 0 ); } } /* ========================================================= LOOP GROUP Track نهایی: [ SOURCE ][ IDENTICAL COPY ] فاصله داخلی کارت‌ها = 16px نیم‌پدینگ ابتدا و انتهای Group = 8px بنابراین مرز بین SOURCE و COPY نیز دقیقاً 16px است. ========================================================= */ .rsx-brand__group { display: flex; flex: 0 0 auto; flex-flow: row nowrap; align-items: stretch; gap: 16px; width: max-content; min-width: max-content; max-width: none; margin: 0; padding: 0 8px; direction: ltr; box-sizing: border-box; } /* ========================================================= BRAND CARD ========================================================= */ .rsx-brand-card { position: relative; display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; flex: 0 0 auto; width: 302px; min-height: 112px; padding: 15px; overflow: hidden; border: 1px solid rgba(22,62,45,.085); border-radius: 21px; background: rgba(255,255,255,.82); box-shadow: 0 12px 32px rgba(29,63,44,.055); direction: ltr; transition: transform .42s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .42s ease, background-color .35s ease; } .rsx-brand-card::before { content: ""; position: absolute; top: -80%; left: -35%; width: 42%; height: 250%; transform: rotate(20deg) translateX(-180%); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.9), transparent ); opacity: 0; pointer-events: none; transition: transform .75s ease, opacity .3s ease; } .rsx-brand-card__logo { position: relative; display: flex; align-items: center; justify-content: center; width: 78px; height: 76px; padding: 10px; overflow: hidden; border: 1px solid rgba(22,62,45,.07); border-radius: 16px; background: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(29,63,44,.045); } .rsx-brand-card__logo::after { content: ""; position: absolute; inset: auto 13px 7px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(22,62,45,.13), transparent ); } .rsx-brand-card__logo img { display: block; width: 200%; max-width: 90px; height: 52px; object-fit: contain; object-position: center; filter: saturate(.92); transition: transform .4s ease, filter .4s ease; } .rsx-brand-card__copy { min-width: 0; padding: 0 4px 0 8px; text-align: right; direction: rtl; } .rsx-brand-card__label { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #8b968f; font-size: 8.5px; font-weight: 600; } .rsx-brand-card__label::before { content: ""; width: 12px; height: 1px; background: #d7b733; } .rsx-brand-card__copy strong { display: block; overflow: hidden; color: #234936; font-size: 13.5px; font-weight: 800; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .rsx-brand-card__copy small { display: block; margin-top: 6px; color: #9aa39d; font-family: Arial, sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: .12em; direction: ltr; text-align: right; } .rsx-brand-card__status { position: absolute; top: 11px; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: #ffe161; box-shadow: 0 0 0 4px rgba(255,225,97,.14); } @media (hover:hover) and (pointer:fine) { .rsx-brand-card:hover { transform: translateY(-5px); border-color: rgba(43,103,73,.18); background: #ffffff; box-shadow: 0 20px 42px rgba(28,63,43,.11); } .rsx-brand-card:hover::before { opacity: 1; transform: rotate(20deg) translateX(420%); } .rsx-brand-card:hover .rsx-brand-card__logo img { transform: scale(1.045); filter: saturate(1); } .rsx-brand__viewport:hover .rsx-brand__track[data-animated="true"] { animation-play-state: paused; } } /* ========================================================= BOTTOM TRUST INFO ========================================================= */ .rsx-brand__trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; } .rsx-brand__trust-item { display: flex; align-items: center; gap: 9px; color: #53675a; } .rsx-brand__trust-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(22,62,45,.09); border-radius: 11px; background: #f8faf7; } .rsx-brand__trust-icon svg { width: 15px; height: 15px; fill: none; stroke: #2b6749; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rsx-brand__trust-item div { line-height: 1.25; } .rsx-brand__trust-item small { display: block; margin-bottom: 3px; color: #a0aaa3; font-family: Arial, sans-serif; font-size: 7px; font-weight: 700; letter-spacing: .12em; } .rsx-brand__trust-item strong { display: block; color: #53675a; font-size: 10.5px; font-weight: 700; } .rsx-brand__trust-divider { width: 1px; height: 23px; background: rgba(22,62,45,.09); } /* ========================================================= TABLET ========================================================= */ @media (max-width:1199px) { .rsx-brand { padding: 76px 0 66px; } .rsx-brand__inner { width: min( 1120px, calc(100% - 36px) ); } .rsx-brand-card { width: 278px; } .rsx-brand__mask { width: 66px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .rsx-brand { padding: 60px 0 54px; } .rsx-brand__inner { width: calc(100% - 24px); } .rsx-brand__head { margin-bottom: 30px; } .rsx-brand__eyebrow { margin-bottom: 11px; } .rsx-brand__eyebrow-line { width: 22px; } .rsx-brand__eyebrow-text { font-size: 8px; } .rsx-brand__title { margin-bottom: 11px; font-size: 18px; line-height: 1.75; } .rsx-brand__desc { max-width: 500px; font-size: 11.5px; line-height: 1.9; } .rsx-brand__frame { border-radius: 22px; } .rsx-brand__frame-head { min-height: 66px; padding: 12px 15px; } .rsx-brand__frame-note { display: none; } .rsx-brand__frame-label strong { font-size: 11.5px; } .rsx-brand__viewport { padding: 15px 0 17px; } .rsx-brand__mask { top: 66px; width: 30px; } .rsx-brand__group { gap: 12px; /* * Seamless boundary: * 6px + 6px = 12px */ padding: 0 6px; } .rsx-brand-card { grid-template-columns: 74px minmax(0,1fr); width: 242px; min-height: 96px; padding: 12px; border-radius: 18px; } .rsx-brand-card__logo { width: 66px; height: 64px; padding: 8px; border-radius: 14px; } .rsx-brand-card__logo img { max-width: 54px; height: 44px; } .rsx-brand-card__copy { padding-left: 6px; } .rsx-brand-card__copy strong { font-size: 11.8px; } .rsx-brand-card__copy small { margin-top: 4px; font-size: 6.8px; } .rsx-brand-card__status { top: 9px; right: 9px; width: 5px; height: 5px; } .rsx-brand__trust { gap: 12px; margin-top: 17px; } .rsx-brand__trust-divider { display: none; } .rsx-brand__trust-icon { width: 29px; height: 29px; } .rsx-brand__trust-item strong { font-size: 9.5px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:430px) { .rsx-brand__inner { width: calc(100% - 20px); } .rsx-brand__title { font-size: 18px; } .rsx-brand__frame-head { padding: 11px 13px; } .rsx-brand-card { width: 224px; } .rsx-brand__trust { display: grid; grid-template-columns: repeat( 2, auto ); justify-content: center; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .rsx-brand__track[data-animated="true"] { animation: none; transform: none; will-change: auto; } .rsx-brand-card { transition: none; } } /* END — TRUSTED PARTNERS / BRAND NETWORK */ /* ========================================================= DGCHEME HOMEPAGE — ISOLATED PRODUCT RANGE / dgstatx v1.6.15 Native Theme component. No legacy rsx-stat dependency. ========================================================= */ .dgstatx, .dgstatx * { box-sizing: border-box; } .dgstatx { --dgstatx-green-950: #05251b; --dgstatx-green-900: #073024; --dgstatx-green-850: #0b382a; --dgstatx-green-800: #124331; --dgstatx-gold: #ffda52; --dgstatx-gold-2: #f5bd3d; --dgstatx-text: #f2f6f3; --dgstatx-muted: rgba(230, 240, 234, .64); --dgstatx-line: rgba(255, 255, 255, .10); --dgstatx-ease: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; width: 100%; margin: 0; padding: 68px 0 54px; overflow: hidden; direction: rtl; color: var(--dgstatx-text); font-family: var(--dg-font-ui, inherit); background: radial-gradient(circle at 88% 18%, rgba(36, 132, 98, .18), transparent 29%), radial-gradient(circle at 12% 76%, rgba(255, 201, 62, .055), transparent 28%), linear-gradient(132deg, #0b382a 0%, #06291f 54%, #083329 100%); } .dgstatx__grid-bg { position: absolute; inset: 0; z-index: -3; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); } .dgstatx__glow { position: absolute; z-index: -2; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: .14; } .dgstatx__glow--one { top: -230px; right: -90px; background: #3cc08a; } .dgstatx__glow--two { bottom: -280px; left: 4%; background: #f3c94a; opacity: .07; } .dgstatx__glow--three { top: 36%; left: 42%; width: 280px; height: 280px; background: #58cab3; opacity: .055; } .dgstatx__inner { position: relative; z-index: 1; width: min(1220px, calc(100% - 48px)); margin: 0 auto; } .dgstatx__head { width: min(760px, 100%); margin: 0 auto 34px; text-align: center; } .dgstatx__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; color: rgba(244, 213, 108, .86); } .dgstatx__eyebrow-line { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 213, 108, .72)); } .dgstatx__eyebrow-line:last-child { transform: scaleX(-1); } .dgstatx__eyebrow-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .dgstatx__eyebrow-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dgstatx__eyebrow-text { font-family: Arial, sans-serif; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .19em; } .dgstatx__title { margin: 0; color: #f3f7f4; font-family: var(--dg-font-ui, inherit); font-size: 18px; line-height: 1.75; font-weight: 800; } .dgstatx__title span { color: var(--dgstatx-gold); } .dgstatx__intro { width: min(620px, 100%); margin: 9px auto 0; color: var(--dgstatx-muted); font-family: var(--dg-font-ui, inherit); font-size: 12px; line-height: 2; font-weight: 400; } .dgstatx__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .dgstatx-card { --dgstatx-card-accent: #f2c94c; --dgstatx-card-accent-rgb: 242, 201, 76; position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 282px; padding: 20px 20px 17px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .10); border-radius: 24px; background: radial-gradient(circle at 88% 8%, rgba(var(--dgstatx-card-accent-rgb), .065), transparent 28%), linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016) 58%), rgba(21, 67, 51, .76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 18px 42px rgba(0, 0, 0, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 420ms var(--dgstatx-ease), border-color 320ms ease, box-shadow 420ms ease, background-color 320ms ease; } .dgstatx-card::before { content: ""; position: absolute; z-index: 0; top: 0; right: 22px; left: 22px; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(var(--dgstatx-card-accent-rgb), .18), rgba(var(--dgstatx-card-accent-rgb), .78), rgba(var(--dgstatx-card-accent-rgb), .18), transparent ); } .dgstatx-card::after { content: ""; position: absolute; z-index: 0; top: -74px; left: -62px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; background: rgba(var(--dgstatx-card-accent-rgb), .085); filter: blur(30px); } .dgstatx-card--solvent { --dgstatx-card-accent: #ffd34f; --dgstatx-card-accent-rgb: 255, 211, 79; } .dgstatx-card--fluorescent { --dgstatx-card-accent: #d9f36a; --dgstatx-card-accent-rgb: 217, 243, 106; } .dgstatx-card--pearl { --dgstatx-card-accent: #8edfd3; --dgstatx-card-accent-rgb: 142, 223, 211; } .dgstatx-card--glitter { --dgstatx-card-accent: #efc9ff; --dgstatx-card-accent-rgb: 239, 201, 255; } .dgstatx-card__shine { position: absolute; z-index: 1; top: -25%; bottom: -25%; left: -48%; width: 32%; pointer-events: none; opacity: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .04), rgba(255, 255, 255, .14), rgba(255, 255, 255, .04), transparent ); transform: skewX(-15deg) translateX(-160%); transition: transform 850ms var(--dgstatx-ease), opacity 250ms ease; } .dgstatx-card__top, .dgstatx-card__value, .dgstatx-card__title, .dgstatx-card__text, .dgstatx-card__meter { position: relative; z-index: 2; } .dgstatx-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; } .dgstatx-card__number-index { position: relative; display: inline-flex; align-items: center; min-height: 38px; color: rgba(231, 241, 235, .28); font-family: Arial, sans-serif; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .10em; } .dgstatx-card__number-index::after { content: ""; width: 16px; height: 1px; margin-right: 7px; background: rgba(var(--dgstatx-card-accent-rgb), .26); } .dgstatx-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(var(--dgstatx-card-accent-rgb), .24); border-radius: 14px; color: var(--dgstatx-card-accent); background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(var(--dgstatx-card-accent-rgb), .045)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 8px 22px rgba(0, 0, 0, .09); transition: transform 350ms var(--dgstatx-ease), border-color 300ms ease, box-shadow 350ms ease; } .dgstatx-card__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(var(--dgstatx-card-accent-rgb), .10)); } .dgstatx-card__value { display: flex; align-items: flex-start; justify-content: flex-start; gap: 2px; margin: 0 0 10px; direction: ltr; color: var(--dgstatx-gold); font-family: Arial, sans-serif; font-size: clamp(36px, 3vw, 46px); line-height: .95; font-weight: 800; letter-spacing: -.035em; text-shadow: 0 10px 28px rgba(255, 214, 70, .07); } .dgstatx-card__value sup { position: relative; top: -2px; font-size: 15px; line-height: 1; font-weight: 800; letter-spacing: 0; } .dgstatx-card__title { margin: 5px 0 7px; color: #f0f5f2; font-family: var(--dg-font-ui, inherit); font-size: 16px; line-height: 1.75; font-weight: 800; } .dgstatx-card__text { min-height: 52px; margin: 0; color: rgba(228, 238, 232, .62); font-family: var(--dg-font-ui, inherit); font-size: 11.5px; line-height: 1.9; font-weight: 400; } .dgstatx-card__meter { height: 3px; margin-top: auto; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .12); } .dgstatx-card__meter-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, var(--dgstatx-gold), var(--dgstatx-card-accent) ); box-shadow: 0 0 11px rgba(var(--dgstatx-card-accent-rgb), .16); transition: width 1100ms var(--dgstatx-ease); } .dgstatx--visible .dgstatx-card__meter-fill { width: var(--dgstatx-meter, 0%); } .dgstatx__footer { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(720px, 100%); margin: 30px auto 0; color: rgba(222, 234, 227, .52); } .dgstatx__footer-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11)); } .dgstatx__footer-line:last-child { transform: scaleX(-1); } .dgstatx__footer-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-family: var(--dg-font-ui, inherit); font-size: 10px; line-height: 1.7; } .dgstatx__footer-dots { display: inline-flex; direction: ltr; align-items: center; gap: 3px; } .dgstatx__footer-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; } .dgstatx__footer-dots i:nth-child(1) { background: #54c6a7; } .dgstatx__footer-dots i:nth-child(2) { background: #f4d84f; } .dgstatx__footer-dots i:nth-child(3) { background: #ef765d; } /* Progressive enhancement: content stays visible if JS is unavailable. */ .dgstatx.dgstatx--js .dgstatx-card { opacity: 0; transform: translateY(18px); } .dgstatx.dgstatx--js.dgstatx--visible .dgstatx-card { opacity: 1; transform: translateY(0); transition: opacity 560ms ease, transform 720ms var(--dgstatx-ease), border-color 320ms ease, box-shadow 420ms ease, background-color 320ms ease; } .dgstatx.dgstatx--js.dgstatx--visible .dgstatx-card:nth-child(2) { transition-delay: 70ms; } .dgstatx.dgstatx--js.dgstatx--visible .dgstatx-card:nth-child(3) { transition-delay: 140ms; } .dgstatx.dgstatx--js.dgstatx--visible .dgstatx-card:nth-child(4) { transition-delay: 210ms; } @media (hover: hover) and (pointer: fine) { .dgstatx-card:hover { transform: translateY(-6px); border-color: rgba(var(--dgstatx-card-accent-rgb), .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .13), 0 24px 56px rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--dgstatx-card-accent-rgb), .025); } .dgstatx-card:hover .dgstatx-card__shine { opacity: 1; transform: skewX(-15deg) translateX(560%); } .dgstatx-card:hover .dgstatx-card__icon { transform: translateY(-2px) scale(1.025); border-color: rgba(var(--dgstatx-card-accent-rgb), .44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 11px 28px rgba(0, 0, 0, .12), 0 0 20px rgba(var(--dgstatx-card-accent-rgb), .07); } } @media (max-width: 1040px) { .dgstatx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .dgstatx { padding: 52px 0 44px; } .dgstatx__inner { width: min(100% - 28px, 1220px); } .dgstatx__head { margin-bottom: 26px; } .dgstatx__title { font-size: 18px; } .dgstatx__intro { font-size: 11.5px; } .dgstatx__cards { grid-template-columns: 1fr; gap: 14px; } .dgstatx-card { min-height: 264px; padding: 18px 18px 16px; border-radius: 21px; } .dgstatx-card__value { font-size: 38px; } .dgstatx-card__title { font-size: 16px; } .dgstatx__footer { gap: 9px; margin-top: 26px; } .dgstatx__footer-content { white-space: normal; text-align: center; font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .dgstatx-card, .dgstatx-card__shine, .dgstatx-card__icon, .dgstatx-card__meter-fill { transition: none; } .dgstatx.dgstatx--js .dgstatx-card { opacity: 1; transform: none; } .dgstatx-card:hover { transform: none; } } /* END — dgstatx isolated product range */ /* ========================================================= DGCHEME HOMEPAGE — PRODUCT COLLECTION / dgprodx v1.6.16 Native + isolated. Card-focused visual upgrade. ========================================================= */ .dgprodx, .dgprodx * { box-sizing: border-box; } .dgprodx { --dgprodx-green: #0b3b2b; --dgprodx-green-deep: #06291f; --dgprodx-ink: #18372d; --dgprodx-muted: #6d7d77; --dgprodx-gold: #e7bd42; --dgprodx-line: rgba(11, 59, 43, .10); --dgprodx-surface: #f7f8f5; --dgprodx-card: rgba(255, 255, 255, .92); --dgprodx-ease: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; width: 100%; margin: 0; padding: 70px 0 58px; overflow: hidden; direction: rtl; font-family: var(--dg-font-ui, inherit); color: var(--dgprodx-ink); background: var(--dgprodx-surface); } .dgprodx__glow { position: absolute; z-index: -2; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; filter: blur(92px); opacity: .16; } .dgprodx__glow--one { top: -250px; right: -120px; background: rgba(33, 129, 91, .22); } .dgprodx__glow--two { bottom: -300px; left: -120px; background: rgba(228, 184, 58, .16); } .dgprodx__inner { width: min(1220px, calc(100% - 48px)); margin: 0 auto; } .dgprodx__head { width: min(700px, 100%); margin: 0 auto 34px; text-align: center; } .dgprodx__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 11px; color: #b8922d; } .dgprodx__eyebrow-line { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 146, 45, .65)); } .dgprodx__eyebrow-line:last-child { transform: scaleX(-1); } .dgprodx__eyebrow-text { font-family: Arial, sans-serif; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .18em; } .dgprodx__title { margin: 0; color: var(--dgprodx-green); font-family: var(--dg-font-ui, inherit); font-size: 18px; line-height: 1.75; font-weight: 800; } .dgprodx__title span { position: relative; color: #1d7657; } .dgprodx__title span::after { content: ""; position: absolute; right: 0; bottom: -4px; width: 100%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--dgprodx-gold), rgba(231, 189, 66, .22)); } .dgprodx__intro { width: min(610px, 100%); margin: 10px auto 0; color: var(--dgprodx-muted); font-family: var(--dg-font-ui, inherit); font-size: 12px; line-height: 2; font-weight: 400; } .dgprodx__stage { position: relative; } .dgprodx__viewport { width: 100%; overflow: hidden; padding: 8px 3px 18px; } .dgprodx__track { display: flex; gap: 18px; align-items: stretch; width: max-content; direction: rtl; will-change: transform; transition: transform 620ms var(--dgprodx-ease); } .dgprodx__arrow { position: absolute; z-index: 12; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(11, 59, 43, .11); border-radius: 50%; color: var(--dgprodx-green); background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px rgba(22, 57, 45, .10); cursor: pointer; transform: translateY(-50%); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .dgprodx__arrow--prev { right: -18px; } .dgprodx__arrow--next { left: -18px; } .dgprodx__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dgprodx__arrow:disabled { opacity: .34; cursor: default; } @media (hover:hover) and (pointer:fine) { .dgprodx__arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.06); border-color: rgba(231, 189, 66, .48); box-shadow: 0 14px 34px rgba(22, 57, 45, .14); } } /* ========================== PREMIUM PRODUCT CARDS ========================== */ .dgprodx-card { --dgprodx-accent: #ddb339; --dgprodx-accent-rgb: 221, 179, 57; position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 0 0 calc((min(1220px, 100vw - 48px) - 36px) / 3); width: calc((min(1220px, 100vw - 48px) - 36px) / 3); min-width: 0; overflow: hidden; border: 1px solid rgba(10, 62, 44, .10); border-radius: 25px; background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(251,252,249,.97)); box-shadow: 0 18px 45px rgba(17, 54, 41, .085), 0 3px 10px rgba(17, 54, 41, .035), inset 0 1px 0 rgba(255,255,255,.9); transform: translateZ(0); transition: transform 420ms var(--dgprodx-ease), box-shadow 420ms var(--dgprodx-ease), border-color 320ms ease; } .dgprodx-card::before { content: ""; position: absolute; z-index: 4; top: 0; right: 24px; left: 24px; height: 1px; pointer-events: none; background: linear-gradient( 90deg, transparent, rgba(var(--dgprodx-accent-rgb), .28), rgba(var(--dgprodx-accent-rgb), .82), rgba(var(--dgprodx-accent-rgb), .28), transparent ); } .dgprodx-card::after { content: ""; position: absolute; z-index: 0; right: -80px; bottom: -100px; width: 190px; height: 190px; border-radius: 50%; pointer-events: none; background: rgba(var(--dgprodx-accent-rgb), .06); filter: blur(40px); } .dgprodx-card--glitter { --dgprodx-accent: #e7bd42; --dgprodx-accent-rgb: 231, 189, 66; } .dgprodx-card--organic { --dgprodx-accent: #d76b5f; --dgprodx-accent-rgb: 215, 107, 95; } .dgprodx-card--solvent { --dgprodx-accent: #4d9e80; --dgprodx-accent-rgb: 77, 158, 128; } .dgprodx-card--phosphor { --dgprodx-accent: #86b64e; --dgprodx-accent-rgb: 134, 182, 78; } .dgprodx-card--fluorescent { --dgprodx-accent: #d96591; --dgprodx-accent-rgb: 217, 101, 145; } .dgprodx-card--pearl { --dgprodx-accent: #8d85ca; --dgprodx-accent-rgb: 141, 133, 202; } .dgprodx-card--metallic { --dgprodx-accent: #a99372; --dgprodx-accent-rgb: 169, 147, 114; } .dgprodx-card__media { position: relative; isolation: isolate; height: 184px; overflow: hidden; background: #163c31; } .dgprodx-card__visual { position: absolute; inset: 0; z-index: 0; transform: scale(1.02); transition: transform 700ms var(--dgprodx-ease), filter 500ms ease; } .dgprodx-card__visual.has-image { background-position: center; background-size: cover; background-repeat: no-repeat; } .dgprodx-card__visual::before, .dgprodx-card__visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); } /* CSS-native abstract pigment visuals — decorative only */ .dgprodx-card__visual--glitter { background: radial-gradient(circle at 24% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px), radial-gradient(circle at 72% 22%, rgba(255,255,255,.74) 0 1px, transparent 2px), radial-gradient(circle at 59% 69%, rgba(255,244,186,.88) 0 1.5px, transparent 2.5px), radial-gradient(circle at 37% 76%, rgba(255,255,255,.70) 0 1px, transparent 2px), linear-gradient(135deg, #9f7835, #e4bd5a 42%, #6f5124 100%); background-size: 34px 34px, 42px 42px, 30px 30px, 48px 48px, auto; } .dgprodx-card__visual--organic { background: radial-gradient(circle at 25% 35%, #e4a339 0 12%, transparent 13%), radial-gradient(circle at 55% 60%, #b43a32 0 15%, transparent 16%), radial-gradient(circle at 82% 28%, #496e4c 0 12%, transparent 13%), linear-gradient(135deg, #efe4ca, #d9cbb1); } .dgprodx-card__visual--solvent { background: radial-gradient(circle at 32% 40%, rgba(255,207,68,.92), transparent 18%), radial-gradient(circle at 68% 62%, rgba(62,187,146,.82), transparent 24%), linear-gradient(135deg, #173d34, #0c7054 55%, #0d2d27); } .dgprodx-card__visual--phosphor { background: radial-gradient(circle at 52% 50%, rgba(203,255,87,.92), transparent 18%), radial-gradient(circle at 52% 50%, rgba(137,233,72,.28), transparent 38%), linear-gradient(135deg, #102d24, #1e5137 58%, #09231c); } .dgprodx-card__visual--fluorescent { background: radial-gradient(circle at 33% 50%, rgba(255,88,162,.88), transparent 24%), radial-gradient(circle at 72% 37%, rgba(255,222,76,.92), transparent 22%), linear-gradient(135deg, #542252, #a3306d 50%, #5d283d); } .dgprodx-card__visual--pearl { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.95), transparent 17%), radial-gradient(circle at 50% 48%, rgba(146,210,203,.55), transparent 35%), linear-gradient(135deg, #c5b5d2, #eef2e9 45%, #8dbcb8 100%); } .dgprodx-card__visual--metallic { background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.5) 31%, transparent 45%), linear-gradient(135deg, #474a48, #9f9d94 43%, #424642 100%); } .dgprodx-card__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 28, 21, .05), rgba(4, 28, 21, .16)), linear-gradient(90deg, rgba(4,28,21,.10), transparent 35%, transparent 65%, rgba(4,28,21,.08)); } .dgprodx-card__media::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 44%; pointer-events: none; background: linear-gradient(to top, rgba(4, 29, 21, .25), transparent); } .dgprodx-card__index { position: absolute; z-index: 5; top: 15px; right: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 35px; height: 25px; padding: 0 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,255,255,.88); background: rgba(7, 37, 28, .26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: Arial, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .08em; } .dgprodx-card__icon { position: absolute; z-index: 5; left: 16px; bottom: 15px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; color: #fff; background: rgba(7, 37, 28, .27); box-shadow: 0 9px 22px rgba(0,0,0,.10); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); transition: transform .35s var(--dgprodx-ease), background .3s ease; } .dgprodx-card__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .dgprodx-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 224px; padding: 20px 20px 18px; } .dgprodx-card__category { display: inline-flex; align-items: center; align-self: flex-start; min-height: 23px; margin: 0 0 10px; padding: 0 9px; border: 1px solid rgba(var(--dgprodx-accent-rgb), .20); border-radius: 999px; color: rgb(var(--dgprodx-accent-rgb)); background: rgba(var(--dgprodx-accent-rgb), .055); font-family: Arial, sans-serif; font-size: 8.5px; line-height: 1; font-weight: 700; letter-spacing: .04em; } .dgprodx-card__title { margin: 0 0 7px; color: #14382c; font-family: var(--dg-font-ui, inherit); font-size: 16px; line-height: 1.75; font-weight: 800; } .dgprodx-card__text { margin: 0; color: #72817c; font-family: var(--dg-font-ui, inherit); font-size: 11.5px; line-height: 1.95; font-weight: 400; } .dgprodx-card__link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(10, 62, 44, .075); direction: rtl; color: #315c4c; text-decoration: none; font-family: Arial, sans-serif; font-size: 9.5px; line-height: 1.3; font-weight: 700; transition: color .25s ease, border-color .25s ease; } .dgprodx-card__link > span:first-child { direction: ltr; unicode-bidi: isolate; } .dgprodx-card__link span:last-child { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; color: #214d3d; background: rgba(var(--dgprodx-accent-rgb), .12); transition: transform .3s var(--dgprodx-ease), color .25s ease, background .25s ease, box-shadow .25s ease; } @media (hover:hover) and (pointer:fine) { .dgprodx-card:hover { transform: translateY(-8px); border-color: rgba(var(--dgprodx-accent-rgb), .30); box-shadow: 0 28px 62px rgba(17, 54, 41, .14), 0 6px 16px rgba(17, 54, 41, .05), inset 0 1px 0 rgba(255,255,255,.95); } .dgprodx-card:hover .dgprodx-card__visual { transform: scale(1.075); filter: saturate(1.06) contrast(1.03); } .dgprodx-card:hover .dgprodx-card__icon { transform: translateY(-2px) rotate(-2deg); background: rgba(7, 37, 28, .38); } .dgprodx-card:hover .dgprodx-card__link, .dgprodx-card__link:hover, .dgprodx-card__link:focus-visible { color: var(--dgprodx-gold); border-color: rgba(231, 189, 66, .34); } .dgprodx-card:hover .dgprodx-card__link span:last-child, .dgprodx-card__link:hover span:last-child, .dgprodx-card__link:focus-visible span:last-child { transform: translateX(-2px); color: #173d30; background: var(--dgprodx-gold); box-shadow: 0 7px 18px rgba(231, 189, 66, .24); } } .dgprodx-card__link:focus-visible { outline: 2px solid rgba(231, 189, 66, .48); outline-offset: 4px; border-radius: 5px; } .dgprodx__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 21px; } .dgprodx__progress { position: relative; height: 2px; overflow: hidden; border-radius: 999px; background: rgba(11, 59, 43, .09); } .dgprodx__progress-bar { position: absolute; top: 0; right: 0; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9ad31, #287657); transition: width 500ms var(--dgprodx-ease); } .dgprodx__footer-text { display: inline-flex; align-items: center; gap: 7px; color: #7b8883; font-family: var(--dg-font-ui, inherit); font-size: 10px; line-height: 1.7; white-space: nowrap; } .dgprodx__footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9ad31; box-shadow: 0 0 0 4px rgba(217, 173, 49, .09); } @media (max-width: 980px) { .dgprodx-card { flex-basis: calc((100vw - 66px) / 2); width: calc((100vw - 66px) / 2); } } @media (max-width: 680px) { .dgprodx { padding: 52px 0 44px; } .dgprodx__inner { width: min(100% - 28px, 1220px); } .dgprodx__head { margin-bottom: 26px; } .dgprodx__title { font-size: 18px; } .dgprodx__intro { font-size: 11.5px; } .dgprodx__viewport { padding-right: 1px; padding-left: 1px; } .dgprodx__track { gap: 14px; } .dgprodx-card { flex-basis: calc(100vw - 42px); width: calc(100vw - 42px); border-radius: 22px; } .dgprodx-card__media { height: 170px; } .dgprodx-card__body { min-height: 214px; padding: 18px 17px 16px; } .dgprodx-card__title { font-size: 16px; } .dgprodx__arrow { width: 38px; height: 38px; } .dgprodx__arrow--prev { right: -8px; } .dgprodx__arrow--next { left: -8px; } .dgprodx__footer { grid-template-columns: 1fr; gap: 10px; } .dgprodx__footer-text { justify-content: center; white-space: normal; text-align: center; font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .dgprodx__track, .dgprodx-card, .dgprodx-card__visual, .dgprodx-card__icon, .dgprodx-card__link, .dgprodx-card__link span:last-child, .dgprodx__progress-bar { transition: none; } .dgprodx-card:hover { transform: none; } } /* END — dgprodx native product collection */ /* ========================================================= DGCHEME HOMEPAGE — DIFFERENTIATORS / dgdiffx v1.6.20 Native isolated migration of the approved visual design. ========================================================= */ /* ========================================================= START — SECTION 05 RANG SAREH — PREMIUM DIFFERENTIATORS SECTION WordPress-safe namespace: dgdiffx / dgdiffx-card ========================================================= */ .dgdiffx, .dgdiffx * { box-sizing: border-box; } .dgdiffx { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 100px 0 88px; overflow: hidden; background: radial-gradient(circle at 12% 22%, rgba(255,225,97,.10), transparent 22%), radial-gradient(circle at 88% 78%, rgba(46,104,74,.08), transparent 26%), linear-gradient(180deg, #f7f9f6 0%, #edf2ee 100%); isolation: isolate; } .dgdiffx::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(31,74,53,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(31,74,53,.025) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.9) 15%, rgba(0,0,0,.9) 85%, transparent); mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.9) 15%, rgba(0,0,0,.9) 85%, transparent); pointer-events: none; } .dgdiffx__bg-shape { position: absolute; z-index: 0; border-radius: 50%; filter: blur(95px); pointer-events: none; } .dgdiffx__bg-shape--one { top: -170px; left: 9%; width: 380px; height: 380px; background: rgba(255,225,97,.10); } .dgdiffx__bg-shape--two { right: -140px; bottom: -140px; width: 420px; height: 420px; background: rgba(41,84,54,.08); } .dgdiffx__inner { position: relative; z-index: 2; width: min(1320px, calc(100% - 72px)); margin: 0 auto; } /* ========================================================= HEAD ========================================================= */ .dgdiffx__head { max-width: 760px; margin: 0 auto 48px; text-align: center; direction: rtl; } .dgdiffx__eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; direction: ltr; } .dgdiffx__eyebrow-line { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, #c4aa3e); } .dgdiffx__eyebrow-line:last-child { transform: scaleX(-1); } .dgdiffx__eyebrow-text { color: #94896e; font-size: 8.5px; font-weight: 700; letter-spacing: .22em; } .dgdiffx__title { margin: 0 0 14px; color: #163e2d; font-size: 18px; font-weight: 800; line-height: 1.55; letter-spacing: -.025em; } .dgdiffx__title span { position: relative; color: #2a6548; } .dgdiffx__title span::after { content: ""; position: absolute; right: 2%; bottom: 1px; z-index: -1; width: 96%; height: 8px; border-radius: 999px; background: rgba(255,225,97,.40); } .dgdiffx__intro { max-width: 660px; margin: 0 auto; color: #68746d; font-size: 13px; line-height: 1.95; } /* ========================================================= GRID LAYOUT ========================================================= */ .dgdiffx__grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 20px; direction: rtl; } .dgdiffx-card--feature { grid-row: span 2; } .dgdiffx-card--wide { grid-column: span 2; } /* ========================================================= CARD ========================================================= */ .dgdiffx-card { --dgdiffx-x: 50%; --dgdiffx-y: 50%; --dgdiffx-rx: 0deg; --dgdiffx-ry: 0deg; position: relative; min-width: 0; min-height: 260px; margin: 0; padding: 24px 24px 22px; overflow: hidden; border: 1px solid rgba(31,74,53,.14); border-radius: 28px; background: rgba(255,255,255,.60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 35px rgba(31,53,41,.06), inset 0 1px 0 rgba(255,255,255,.55); transform: perspective(1200px) rotateX(var(--dgdiffx-rx)) rotateY(var(--dgdiffx-ry)); transform-style: preserve-3d; transition: transform .18s ease-out, border-color .38s ease, box-shadow .42s ease, background-color .35s ease; isolation: isolate; } .dgdiffx-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient( 280px circle at var(--dgdiffx-x) var(--dgdiffx-y), rgba(255,225,97,.16), transparent 62% ); pointer-events: none; transition: opacity .35s ease; } .dgdiffx-card__glow { position: absolute; right: -20%; bottom: -25%; z-index: 0; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,225,97,.22), transparent 65%); filter: blur(18px); pointer-events: none; } .dgdiffx-card__top, .dgdiffx-card__content { position: relative; z-index: 2; } .dgdiffx-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dgdiffx-card__icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(145deg, #1f4a35, #2f6b4b); color: #ffe161; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 22px rgba(31,74,53,.18); transition: transform .4s cubic-bezier(.2,.8,.2,1); } .dgdiffx-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .dgdiffx-card__badge { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid rgba(31,74,53,.10); border-radius: 999px; background: rgba(255,255,255,.66); color: #8d8268; font-size: 9px; font-weight: 700; letter-spacing: .12em; direction: ltr; } .dgdiffx-card__kicker { display: block; margin-bottom: 5px; color: #988e78; font-size: 8.5px; font-weight: 700; letter-spacing: .10em; direction: ltr; text-align: right; } .dgdiffx-card__title { margin: 0 0 10px; color: #1c4935; font-size: 18px; font-weight: 760; line-height: 1.6; } .dgdiffx-card__text { margin: 0; color: #5f6964; font-size: 12.5px; line-height: 1.95; } .dgdiffx-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .dgdiffx-card__chips span { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid rgba(31,74,53,.10); border-radius: 999px; background: rgba(255,255,255,.72); color: #486151; font-size: 10px; line-height: 1; white-space: nowrap; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .dgdiffx-card:hover { border-color: rgba(31,74,53,.22); background: rgba(255,255,255,.78); box-shadow: 0 22px 48px rgba(31,53,41,.11), inset 0 1px 0 rgba(255,255,255,.65); } .dgdiffx-card:hover::before { opacity: 1; } .dgdiffx-card:hover .dgdiffx-card__icon { transform: translateY(-4px) rotate(-4deg) scale(1.03); } } /* ========================================================= FOOTER ========================================================= */ .dgdiffx__footer { display: flex; align-items: center; gap: 18px; margin-top: 34px; } .dgdiffx__footer-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(31,74,53,.14), transparent); } .dgdiffx__footer-center { display: flex; align-items: center; gap: 9px; color: #7f8a84; direction: rtl; white-space: nowrap; font-size: 10px; } .dgdiffx__footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4b53e; box-shadow: 0 0 0 5px rgba(212,181,62,.12); } /* ========================================================= REVEAL ========================================================= */ .dgdiffx__head, .dgdiffx-card, .dgdiffx__footer { opacity: 0; transform: translateY(28px); } .dgdiffx-card { transform: perspective(1200px) translateY(34px) scale(.985); } .dgdiffx--visible .dgdiffx__head { opacity: 1; transform: translateY(0); transition: opacity .78s ease, transform .82s cubic-bezier(.18,.76,.2,1); } .dgdiffx--visible .dgdiffx-card { opacity: 1; transform: perspective(1200px) rotateX(var(--dgdiffx-rx)) rotateY(var(--dgdiffx-ry)) translateY(0) scale(1); transition: opacity .68s ease, transform .75s cubic-bezier(.18,.76,.2,1), border-color .38s ease, box-shadow .42s ease, background-color .35s ease; } .dgdiffx--visible .dgdiffx-card:nth-child(1) { transition-delay: .08s; } .dgdiffx--visible .dgdiffx-card:nth-child(2) { transition-delay: .16s; } .dgdiffx--visible .dgdiffx-card:nth-child(3) { transition-delay: .24s; } .dgdiffx--visible .dgdiffx-card:nth-child(4) { transition-delay: .32s; } .dgdiffx--visible .dgdiffx__footer { opacity: 1; transform: translateY(0); transition: opacity .75s ease .35s, transform .75s cubic-bezier(.18,.76,.2,1) .35s; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .dgdiffx { padding: 82px 0 74px; } .dgdiffx__inner { width: calc(100% - 46px); } .dgdiffx__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .dgdiffx-card--feature, .dgdiffx-card--wide { grid-row: auto; grid-column: auto; } .dgdiffx-card { min-height: 235px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dgdiffx { padding: 66px 0 60px; } .dgdiffx__inner { width: calc(100% - 22px); } .dgdiffx__head { margin-bottom: 30px; } .dgdiffx__title { font-size: 18px; } .dgdiffx__intro { font-size: 12px; line-height: 1.85; } .dgdiffx__grid { grid-template-columns: 1fr; gap: 12px; } .dgdiffx-card { min-height: 0; padding: 18px 16px 17px; border-radius: 22px; } .dgdiffx-card__top { margin-bottom: 14px; } .dgdiffx-card__icon { width: 50px; height: 50px; border-radius: 16px; } .dgdiffx-card__icon svg { width: 23px; height: 23px; } .dgdiffx-card__title { margin-bottom: 8px; font-size: 16px; } .dgdiffx-card__text { font-size: 11.5px; line-height: 1.85; } .dgdiffx-card__chips { margin-top: 15px; gap: 7px; } .dgdiffx-card__chips span { font-size: 9px; padding: 7px 10px; } .dgdiffx__footer { margin-top: 24px; } .dgdiffx__footer-line { display: none; } .dgdiffx__footer-center { width: 100%; justify-content: center; white-space: normal; text-align: center; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .dgdiffx__head, .dgdiffx-card, .dgdiffx__footer { opacity: 1; transform: none; } .dgdiffx-card, .dgdiffx-card__icon { transition: none; } } /* ========================================================= END — SECTION 05 ========================================================= */ /* END — dgdiffx native differentiators */ /* ========================================================= DGCHEME HOMEPAGE — ABOUT / dgaboutx v1.6.22 Native isolated green premium adaptation. ========================================================= */ .dgaboutx, .dgaboutx * { box-sizing: border-box; } .dgaboutx { --dgaboutx-green-950: #041f18; --dgaboutx-green-900: #06291f; --dgaboutx-green-850: #0a3428; --dgaboutx-green-800: #104331; --dgaboutx-green-700: #1e5a43; --dgaboutx-gold: #ffe161; --dgaboutx-gold-soft: #d8b84a; --dgaboutx-text: #f2f6f3; --dgaboutx-text-soft: rgba(235,244,239,.78); --dgaboutx-muted: rgba(222,236,228,.58); --dgaboutx-line: rgba(255,255,255,.10); --dgaboutx-card: rgba(13,58,43,.70); position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 92px 0 84px; overflow: hidden; isolation: isolate; color: var(--dgaboutx-text); font-family: var(--dg-font-ui, inherit); background: radial-gradient(circle at 12% 18%, rgba(255,225,97,.10), transparent 22%), radial-gradient(circle at 90% 78%, rgba(40,135,93,.16), transparent 28%), linear-gradient(145deg, #0b382a 0%, #06291f 52%, #082f25 100%); } .dgaboutx::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); } .dgaboutx::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.018) 48%, rgba(255,225,97,.025) 72%, transparent 100% ); } .dgaboutx__bg { position: absolute; z-index: 0; border-radius: 50%; filter: blur(100px); pointer-events: none; } .dgaboutx__bg--one { top: -150px; left: 8%; width: 380px; height: 380px; background: rgba(255,225,97,.11); } .dgaboutx__bg--two { right: -140px; bottom: -170px; width: 460px; height: 460px; background: rgba(45,146,103,.14); } .dgaboutx__inner { position: relative; z-index: 2; width: min(1320px, calc(100% - 72px)); margin: 0 auto; display: grid; grid-template-columns: .98fr 1.02fr; gap: 48px; align-items: center; } /* ========================================================= LEFT IMAGE ========================================================= */ .dgaboutx__mediaWrap { position: relative; } .dgaboutx__mediaShell { --dgaboutx-rx: 0deg; --dgaboutx-ry: 0deg; position: relative; transform: perspective(1400px) rotateX(var(--dgaboutx-rx)) rotateY(var(--dgaboutx-ry)); transform-style: preserve-3d; transition: transform .18s ease-out; } .dgaboutx__mediaGlow { position: absolute; z-index: 0; left: -38px; bottom: 14px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,225,97,.34), rgba(255,225,97,0) 70%); filter: blur(10px); } .dgaboutx__imageFrame { position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 34px; background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.035) ); box-shadow: 0 30px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dgaboutx__imageFrame::before { content: ""; position: absolute; inset: 16px; z-index: 3; pointer-events: none; border: 1px solid rgba(255,255,255,.24); border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255,225,97,.025); } .dgaboutx__image { display: block; width: 100%; aspect-ratio: 1.15 / 1; object-fit: cover; object-position: center; position: relative; z-index: 1; overflow: hidden; border-radius: 24px; clip-path: inset(0 round 24px); -webkit-clip-path: inset(0 round 24px); filter: saturate(.90) contrast(1.02) brightness(.86); } .dgaboutx__imageOverlay { position: absolute; inset: 16px; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 24px; background: linear-gradient( 180deg, rgba(4,30,22,.08) 0%, rgba(4,30,22,.42) 100% ), linear-gradient( 90deg, rgba(255,225,97,.035), transparent 40% ); } /* Floating cards */ .dgaboutx__float { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: linear-gradient( 145deg, rgba(15,63,47,.90), rgba(7,42,32,.82) ); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07); } .dgaboutx__float--one { right: -26px; top: 36px; } .dgaboutx__float--two { left: -24px; bottom: 34px; } .dgaboutx__floatIcon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid rgba(255,225,97,.22); border-radius: 14px; color: var(--dgaboutx-gold); background: linear-gradient( 145deg, rgba(255,225,97,.095), rgba(255,255,255,.035) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.16); } .dgaboutx__floatIcon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .dgaboutx__floatText { display: flex; flex-direction: column; gap: 3px; direction: rtl; text-align: right; } .dgaboutx__floatText strong { color: #f7f8f5; font-family: var(--dg-font-ui, inherit); font-size: 14px; font-weight: 800; line-height: 1.3; } .dgaboutx__floatText span { color: rgba(228,239,232,.60); font-family: var(--dg-font-ui, inherit); font-size: 10.5px; line-height: 1.4; } /* ========================================================= CONTENT ========================================================= */ .dgaboutx__content { direction: rtl; text-align: right; } .dgaboutx__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; direction: ltr; } .dgaboutx__eyebrowLine { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,225,97,.72)); } .dgaboutx__eyebrowLine:last-child { transform: scaleX(-1); } .dgaboutx__eyebrowText { color: rgba(255,225,97,.76); font-family: Arial, sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .22em; } .dgaboutx__title { margin: 0 0 14px; color: #f4f7f5; font-family: var(--dg-font-ui, inherit); font-size: 18px; font-weight: 800; line-height: 1.75; letter-spacing: 0; } .dgaboutx__title span { position: relative; color: var(--dgaboutx-gold); } .dgaboutx__title span::after { content: ""; position: absolute; right: 2%; bottom: -3px; z-index: -1; width: 96%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(255,225,97,.95), rgba(255,225,97,.18) ); } .dgaboutx__lead { margin: 0 0 16px; color: rgba(243,248,245,.88); font-family: var(--dg-font-ui, inherit); font-size: 13px; font-weight: 600; line-height: 2; } .dgaboutx__text p { margin: 0 0 14px; color: rgba(224,236,229,.66); font-family: var(--dg-font-ui, inherit); font-size: 12px; line-height: 2; } .dgaboutx__text p:last-child { margin-bottom: 0; } /* ========================================================= FEATURES ========================================================= */ .dgaboutx__features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; margin-top: 23px; } .dgaboutx__feature { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; color: rgba(236,244,239,.78); background: linear-gradient( 145deg, rgba(255,255,255,.052), rgba(255,255,255,.018) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); font-family: var(--dg-font-ui, inherit); font-size: 11.5px; line-height: 1.75; transition: border-color .28s ease, background .28s ease, transform .28s ease; } .dgaboutx__featureDot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--dgaboutx-gold-soft); box-shadow: 0 0 0 5px rgba(216,184,74,.09), 0 0 12px rgba(255,225,97,.10); } /* ========================================================= ACTIONS ========================================================= */ .dgaboutx__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 27px; flex-wrap: wrap; } .dgaboutx__btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 20px; border: 1px solid rgba(255,225,97,.44); border-radius: 15px; text-decoration: none; font-family: var(--dg-font-ui, inherit); font-size: 11.5px; font-weight: 700; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, color .3s ease, background .3s ease, border-color .3s ease; } .dgaboutx__btn--primary { color: #173d2e; background: linear-gradient( 145deg, #ffe76f, #eac44a ); box-shadow: 0 15px 30px rgba(0,0,0,.18), 0 0 24px rgba(255,225,97,.075); } .dgaboutx__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dgaboutx__miniStats { display: flex; align-items: stretch; gap: 12px; } .dgaboutx__miniStat { min-width: 110px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient( 145deg, rgba(255,255,255,.05), rgba(255,255,255,.018) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); text-align: center; } .dgaboutx__miniStat strong { display: block; margin-bottom: 4px; color: var(--dgaboutx-gold); font-family: var(--dg-font-ui, inherit); font-size: 18px; font-weight: 800; line-height: 1.2; } .dgaboutx__miniStat span { display: block; color: rgba(226,237,231,.56); font-family: var(--dg-font-ui, inherit); font-size: 10px; line-height: 1.4; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .dgaboutx__feature:hover { transform: translateY(-2px); border-color: rgba(255,225,97,.18); background: linear-gradient( 145deg, rgba(255,225,97,.052), rgba(255,255,255,.024) ); } .dgaboutx__btn:hover { transform: translateY(-3px); color: #0b3426; border-color: rgba(255,236,139,.76); background: linear-gradient( 145deg, #ffea7d, #f2cf56 ); box-shadow: 0 20px 38px rgba(0,0,0,.22), 0 0 26px rgba(255,225,97,.10); } } /* ========================================================= REVEAL ========================================================= */ .dgaboutx.dgaboutx--js .dgaboutx__mediaWrap, .dgaboutx.dgaboutx--js .dgaboutx__content { opacity: 0; transform: translateY(26px); } .dgaboutx.dgaboutx--js.dgaboutx--visible .dgaboutx__mediaWrap { opacity: 1; transform: translateY(0); transition: opacity .82s ease, transform .88s cubic-bezier(.18,.76,.2,1); } .dgaboutx.dgaboutx--js.dgaboutx--visible .dgaboutx__content { opacity: 1; transform: translateY(0); transition: opacity .82s ease .10s, transform .88s cubic-bezier(.18,.76,.2,1) .10s; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .dgaboutx { padding: 78px 0 72px; } .dgaboutx__inner { width: calc(100% - 46px); grid-template-columns: 1fr; gap: 34px; } .dgaboutx__mediaWrap { order: 1; } .dgaboutx__content { order: 2; } .dgaboutx__image { aspect-ratio: 1.3 / 1; } .dgaboutx__float--one { right: 16px; top: 18px; } .dgaboutx__float--two { left: 16px; bottom: 18px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .dgaboutx { padding: 58px 0 52px; } .dgaboutx__inner { width: calc(100% - 22px); gap: 28px; } .dgaboutx__title { font-size: 18px; } .dgaboutx__lead { font-size: 12.5px; line-height: 1.95; } .dgaboutx__text p { font-size: 11.5px; line-height: 1.9; } .dgaboutx__imageFrame { padding: 10px; border-radius: 25px; } .dgaboutx__imageFrame::before, .dgaboutx__imageOverlay { inset: 10px; border-radius: 18px; } .dgaboutx__image { border-radius: 18px; clip-path: inset(0 round 18px); -webkit-clip-path: inset(0 round 18px); aspect-ratio: 1.14 / 1; } .dgaboutx__float { min-width: 0; gap: 9px; padding: 10px 11px; border-radius: 14px; } .dgaboutx__float--one { top: 12px; right: 10px; } .dgaboutx__float--two { left: 10px; bottom: 12px; } .dgaboutx__floatIcon { width: 36px; height: 36px; border-radius: 12px; flex-basis: 36px; } .dgaboutx__floatIcon svg { width: 18px; height: 18px; } .dgaboutx__floatText strong { font-size: 11.5px; } .dgaboutx__floatText span { font-size: 9px; } .dgaboutx__features { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; } .dgaboutx__feature { min-height: 0; padding: 11px 12px; font-size: 11.5px; } .dgaboutx__actions { gap: 14px; margin-top: 22px; } .dgaboutx__btn { width: 100%; justify-content: center; padding: 13px 18px; } .dgaboutx__miniStats { width: 100%; justify-content: space-between; } .dgaboutx__miniStat { flex: 1 1 0; min-width: 0; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .dgaboutx.dgaboutx--js .dgaboutx__mediaWrap, .dgaboutx.dgaboutx--js .dgaboutx__content { opacity: 1; transform: none; } .dgaboutx__mediaShell, .dgaboutx__btn, .dgaboutx__feature { transition: none; } } /* END — dgaboutx native about section */ /* START — RSX JOURNAL / NATIVE MIGRATION v1.6.23 */ /* ========================================================= START — SECTION 07 RANG SAREH — PREMIUM JOURNAL SMART FILLED SIDE CARDS WordPress-safe namespace: rsx-journal / rsx-journal-card ========================================================= */ .rsx-journal, .rsx-journal * { box-sizing: border-box; } /* ========================================================= SECTION ========================================================= */ .rsx-journal { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 92px 0 82px; overflow: hidden; background: radial-gradient( circle at 10% 20%, rgba(255,225,97,.17), transparent 23% ), radial-gradient( circle at 91% 78%, rgba(44,104,74,.085), transparent 25% ), linear-gradient( 180deg, #f5f0e2 0%, #ede8d8 100% ); isolation: isolate; } /* ========================================================= BACKGROUND GRID ========================================================= */ .rsx-journal::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(31,74,53,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(31,74,53,.022) 1px, transparent 1px ); background-size: 62px 62px; -webkit-mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent ); pointer-events: none; } /* ========================================================= GLOWS ========================================================= */ .rsx-journal__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(110px); pointer-events: none; } .rsx-journal__glow--one { top: -160px; left: 10%; width: 420px; height: 420px; background: rgba(255,211,74,.10); } .rsx-journal__glow--two { right: -120px; bottom: -180px; width: 450px; height: 450px; background: rgba(39,99,70,.09); } /* ========================================================= INNER ========================================================= */ .rsx-journal__inner { position: relative; z-index: 5; width: min( 1340px, calc(100% - 72px) ); margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .rsx-journal__head { max-width: 760px; margin: 0 auto 44px; direction: rtl; text-align: center; opacity: 0; transform: translateY(24px); } /* ========================================================= EYEBROW ========================================================= */ .rsx-journal__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 13px; direction: ltr; } .rsx-journal__eyebrow-line { width: 28px; height: 1px; background: linear-gradient( 90deg, transparent, #bfa43c ); } .rsx-journal__eyebrow-line:last-child { transform: scaleX(-1); } .rsx-journal__eyebrow-mark { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgba(31,74,53,.10); border-radius: 8px; background: rgba(255,255,255,.48); color: #315f47; } .rsx-journal__eyebrow-mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rsx-journal__eyebrow-text { color: #94896f; font-size: 8px; font-weight: 700; letter-spacing: .22em; } /* ========================================================= TITLE ========================================================= */ .rsx-journal__title { margin: 0 0 12px; color: #163e2d; font-size: 18px; font-weight: 800; line-height: 1.55; letter-spacing: -.025em; } .rsx-journal__title span { position: relative; color: #2b6749; } .rsx-journal__title span::after { content: ""; position: absolute; right: 2%; bottom: 1px; z-index: -1; width: 96%; height: 8px; border-radius: 999px; background: rgba(255,225,97,.46); } /* ========================================================= INTRO ========================================================= */ .rsx-journal__intro { max-width: 660px; margin: 0 auto; color: #68736c; font-size: 13px; line-height: 1.95; } /* ========================================================= GRID ========================================================= */ .rsx-journal__grid { display: grid; grid-template-columns: repeat( 12, minmax(0,1fr) ); align-items: stretch; gap: 18px; width: 100%; } /* ردیف اول */ .rsx-journal-card--feature { grid-column: span 6; } .rsx-journal-card:nth-child(2), .rsx-journal-card:nth-child(3) { grid-column: span 3; } /* ردیف دوم */ .rsx-journal-card:nth-child(4), .rsx-journal-card:nth-child(5), .rsx-journal-card:nth-child(6) { grid-column: span 4; } /* ========================================================= CARD ========================================================= */ .rsx-journal-card { --rsx-journal-x: 50%; --rsx-journal-y: 50%; position: relative; display: flex; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(31,74,53,.085); border-radius: 23px; background: rgba(255,255,255,.80); box-shadow: 0 12px 28px rgba(39,58,46,.065); opacity: 0; transform: translateY(28px) scale(.985); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .45s ease; isolation: isolate; } /* ========================================================= POINTER LIGHT ========================================================= */ .rsx-journal-card::before { content: ""; position: absolute; inset: 0; z-index: 20; opacity: 0; background: radial-gradient( 280px circle at var(--rsx-journal-x) var(--rsx-journal-y), rgba(255,225,97,.14), transparent 65% ); pointer-events: none; transition: opacity .35s ease; } /* ========================================================= LINK ========================================================= */ .rsx-journal-card__link { display: flex; flex-direction: column; width: 100%; height: 100%; color: inherit; text-decoration: none; } /* ========================================================= MEDIA ========================================================= */ .rsx-journal-card__media { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #173b2b; } /* مقاله اصلی */ .rsx-journal-card--feature .rsx-journal-card__media { aspect-ratio: 16 / 8.7; } /* کارت دوم و سوم: عکس کمی کوتاه‌تر تا فضای بیشتری برای محتوای واقعی مقاله داشته باشیم */ .rsx-journal-card--tall-copy .rsx-journal-card__media { aspect-ratio: 16 / 8.3; } /* ========================================================= VISUAL ========================================================= */ .rsx-journal-card__visual { position: absolute; inset: 0; overflow: hidden; background: #173b2b; } .rsx-journal-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.001); transition: transform .78s cubic-bezier(.2,.8,.2,1), filter .5s ease; } /* ========================================================= FALLBACK ========================================================= */ .rsx-journal-card__visual--fallback { background: radial-gradient( circle at 24% 30%, #d76c51, transparent 20% ), radial-gradient( circle at 68% 32%, #e0ba43, transparent 21% ), radial-gradient( circle at 66% 73%, #5576a7, transparent 23% ), radial-gradient( circle at 32% 70%, #518263, transparent 23% ), linear-gradient( 145deg, #1d4131, #0e281d ); } /* ========================================================= SHADE ========================================================= */ .rsx-journal-card__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(6,25,17,.01) 34%, rgba(6,25,17,.49) 100% ); pointer-events: none; } /* ========================================================= CATEGORY ========================================================= */ .rsx-journal-card__category { position: absolute; right: 14px; bottom: 13px; z-index: 5; display: inline-flex; align-items: center; max-width: calc(100% - 85px); padding: 7px 11px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(8,31,22,.50); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #f3f7f4; direction: rtl; white-space: nowrap; text-overflow: ellipsis; font-size: 8.5px; font-weight: 600; } /* ========================================================= LATEST BADGE ========================================================= */ .rsx-journal-card__latest { position: absolute; top: 14px; right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,225,97,.28); border-radius: 999px; background: rgba(10,33,24,.58); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); color: #fff6c9; direction: rtl; font-size: 8.5px; } .rsx-journal-card__latest i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #ffe161; box-shadow: 0 0 0 4px rgba(255,225,97,.11); } /* ========================================================= NUMBER ========================================================= */ .rsx-journal-card__number { position: absolute; top: 13px; left: 13px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; background: rgba(7,28,20,.36); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); color: rgba(255,255,255,.80); font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; } /* ========================================================= BODY ========================================================= */ .rsx-journal-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 18px; background: rgba(255,255,255,.92); direction: rtl; text-align: right; } /* feature */ .rsx-journal-card--feature .rsx-journal-card__body { padding: 21px 23px 20px; } /* کارت‌های دوم و سوم تمام ارتفاع باقی‌مانده را برای متن مصرف می‌کنند. */ .rsx-journal-card--tall-copy .rsx-journal-card__body { padding: 17px 16px 16px; } /* ========================================================= META ========================================================= */ .rsx-journal-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; margin-bottom: 10px; color: #879188; font-size: 8.5px; } .rsx-journal-card__date { display: inline-flex; align-items: center; gap: 5px; } .rsx-journal-card__date svg { width: 12px; height: 12px; fill: none; stroke: #65806f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rsx-journal-card__read { display: inline-flex; align-items: center; gap: 5px; color: #708177; } .rsx-journal-card__read-dot { width: 5px; height: 5px; border-radius: 50%; background: #d2b33d; } /* چون کارت دوم و سوم باریک‌ترند */ .rsx-journal-card--tall-copy .rsx-journal-card__read { display: none; } /* ========================================================= TITLE ========================================================= */ .rsx-journal-card__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 0 0 auto; margin: 0 0 8px; color: #193f2e; font-size: 15px; font-weight: 760; line-height: 1.7; } /* feature */ .rsx-journal-card--feature .rsx-journal-card__title { max-width: 650px; font-size: clamp( 20px, 1.8vw, 26px ); line-height: 1.62; } /* کارت دوم و سوم */ .rsx-journal-card--tall-copy .rsx-journal-card__title { font-size: 14px; line-height: 1.7; -webkit-line-clamp: 3; } /* ========================================================= ARTICLE TEXT ========================================================= */ .rsx-journal-card__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 0 0 14px; color: #626d67; font-size: 11px; line-height: 1.85; } /* مقاله اصلی */ .rsx-journal-card--feature .rsx-journal-card__excerpt { max-width: 650px; font-size: 12.5px; line-height: 1.9; -webkit-line-clamp: 3; } /* ========================================================= IMPORTANT: CARD 2 + CARD 3 متن مقاله واقعی فضای کارت را پر می‌کند ========================================================= */ .rsx-journal-card--tall-copy .rsx-journal-card__excerpt { display: -webkit-box; flex: 0 1 auto; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 9; margin: 0 0 15px; color: #59655f; font-size: 11px; font-weight: 400; line-height: 1.95; } /* پاراگراف کارت‌های کناری یک خط ظریف تزئینی در کنار متن دارد */ .rsx-journal-card--tall-copy .rsx-journal-card__excerpt { position: relative; padding-right: 12px; } .rsx-journal-card--tall-copy .rsx-journal-card__excerpt::before { content: ""; position: absolute; top: 4px; right: 0; width: 2px; height: calc(100% - 8px); max-height: 68px; border-radius: 999px; background: linear-gradient( 180deg, #d5b63e, rgba(213,182,62,.08) ); } /* ========================================================= ACTION ========================================================= */ .rsx-journal-card__action { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; flex: 0 0 auto; margin-top: auto; padding-top: 4px; color: #24543b; font-size: 10.5px; font-weight: 700; transition: gap .3s ease, color .3s ease; } .rsx-journal-card__action-icon { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid rgba(36,84,59,.10); border-radius: 9px; background: #fff4b6; color: #25543c; transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease; } .rsx-journal-card__action-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .rsx-journal-card:hover { z-index: 20; transform: translateY(-7px); border-color: rgba(35,91,64,.17); box-shadow: 0 23px 45px rgba(35,58,44,.13); } .rsx-journal-card:hover::before { opacity: 1; } .rsx-journal-card:hover .rsx-journal-card__image { transform: scale(1.055); filter: saturate(1.04) contrast(1.02); } .rsx-journal-card:hover .rsx-journal-card__action { gap: 12px; color: #b28a0b; } .rsx-journal-card:hover .rsx-journal-card__action-icon { transform: translateX(-3px); background: #ffe161; } } /* ========================================================= ALL ARTICLES BUTTON دکمه آرشیو مقالات — پایین سمت چپ ========================================================= */ .rsx-journal__all-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; min-height: 42px; padding: 9px 12px 9px 15px; border: 1px solid rgba(31,74,53,.11); border-radius: 14px; background: rgba(255,255,255,.62); color: #24543b; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(39,58,46,.06); direction: rtl; text-decoration: none; font-size: 10.5px; font-weight: 700; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease; } .rsx-journal__all-link-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: #fff4b6; color: #25543c; transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease; } .rsx-journal__all-link-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover:hover) and (pointer:fine) { .rsx-journal__all-link:hover { transform: translateY(-3px); border-color: rgba(35,91,64,.18); background: rgba(255,255,255,.86); color: #b28a0b; box-shadow: 0 16px 30px rgba(35,58,44,.10); } .rsx-journal__all-link:hover .rsx-journal__all-link-icon { transform: translateX(-2px); background: #ffe161; } } /* ========================================================= BOTTOM ========================================================= */ .rsx-journal__bottom { display: flex; align-items: center; gap: 18px; min-width: 0; margin-top: 33px; opacity: 0; transform: translateY(15px); } .rsx-journal__bottom-line { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(31,74,53,.14), transparent ); } .rsx-journal__bottom-center { display: flex; align-items: center; gap: 9px; color: #7c887f; direction: rtl; white-space: nowrap; font-size: 10px; } .rsx-journal__bottom-dot { width: 6px; height: 6px; border-radius: 50%; background: #d2b33d; box-shadow: 0 0 0 5px rgba(210,179,61,.10); } /* ========================================================= SKELETON ========================================================= */ .rsx-journal-skeleton { grid-column: span 4; overflow: hidden; border: 1px solid rgba(31,74,53,.055); border-radius: 23px; background: rgba(255,255,255,.52); } .rsx-journal-skeleton--feature { grid-column: span 6; } .rsx-journal-skeleton:nth-child(2), .rsx-journal-skeleton:nth-child(3) { grid-column: span 3; } .rsx-journal-skeleton__media { aspect-ratio: 16 / 9; background: linear-gradient( 100deg, rgba(31,74,53,.045) 20%, rgba(255,255,255,.48) 40%, rgba(31,74,53,.045) 60% ); background-size: 220% 100%; animation: rsxJournalSkeleton 1.35s linear infinite; } .rsx-journal-skeleton--feature .rsx-journal-skeleton__media { aspect-ratio: 16 / 8.7; } .rsx-journal-skeleton:nth-child(2) .rsx-journal-skeleton__media, .rsx-journal-skeleton:nth-child(3) .rsx-journal-skeleton__media { aspect-ratio: 16 / 8.3; } .rsx-journal-skeleton__body { padding: 18px; } .rsx-journal-skeleton__body span, .rsx-journal-skeleton__body strong, .rsx-journal-skeleton__body p { display: block; border-radius: 999px; background: linear-gradient( 100deg, rgba(31,74,53,.05) 20%, rgba(255,255,255,.55) 40%, rgba(31,74,53,.05) 60% ); background-size: 220% 100%; animation: rsxJournalSkeleton 1.35s linear infinite; } .rsx-journal-skeleton__body span { width: 28%; height: 7px; margin-bottom: 16px; } .rsx-journal-skeleton__body strong { width: 82%; height: 12px; margin-bottom: 9px; } .rsx-journal-skeleton__body p { width: 100%; height: 7px; margin-top: 13px; } @keyframes rsxJournalSkeleton { from { background-position: 100% 0; } to { background-position: -120% 0; } } /* ========================================================= ERROR ========================================================= */ .rsx-journal__error { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 170px; padding: 24px; border: 1px solid rgba(31,74,53,.09); border-radius: 23px; background: rgba(255,255,255,.64); direction: rtl; } .rsx-journal__error-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #fff2b1; color: #2b5b42; } .rsx-journal__error-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; } .rsx-journal__error strong { display: block; margin-bottom: 4px; color: #244e39; font-size: 14px; } .rsx-journal__error p { margin: 0; color: #7a857e; font-size: 11px; } /* ========================================================= REVEAL ========================================================= */ .rsx-journal--visible .rsx-journal__head { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .82s cubic-bezier(.18,.76,.2,1); } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card { opacity: 1; transform: translateY(0) scale(1); transition: opacity .7s ease, transform .74s cubic-bezier(.18,.76,.2,1), border-color .4s ease, box-shadow .45s ease; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(1) { transition-delay: .05s; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(2) { transition-delay: .11s; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(3) { transition-delay: .17s; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(4) { transition-delay: .23s; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(5) { transition-delay: .29s; } .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:nth-child(6) { transition-delay: .35s; } .rsx-journal--visible .rsx-journal__bottom { opacity: 1; transform: translateY(0); transition: opacity .7s ease .32s, transform .7s cubic-bezier(.18,.76,.2,1) .32s; } @media (hover:hover) and (pointer:fine) { .rsx-journal--loaded.rsx-journal--visible .rsx-journal-card:hover { transition-delay: 0s; transform: translateY(-7px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1199px) { .rsx-journal { padding: 78px 0 70px; } .rsx-journal__inner { width: calc(100% - 44px); } .rsx-journal__grid { grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 16px; } .rsx-journal-card, .rsx-journal-card--feature, .rsx-journal-card:nth-child(2), .rsx-journal-card:nth-child(3), .rsx-journal-card:nth-child(4), .rsx-journal-card:nth-child(5), .rsx-journal-card:nth-child(6), .rsx-journal-skeleton, .rsx-journal-skeleton--feature, .rsx-journal-skeleton:nth-child(2), .rsx-journal-skeleton:nth-child(3) { grid-column: auto; } /* مقاله اصلی فول واید */ .rsx-journal-card--feature, .rsx-journal-skeleton--feature { grid-column: 1 / -1; } /* دیگر در تبلت نیاز به متن خیلی بلند نداریم */ .rsx-journal-card--tall-copy .rsx-journal-card__excerpt { -webkit-line-clamp: 5; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .rsx-journal { padding: 62px 0 56px; } .rsx-journal__inner { width: calc(100% - 22px); } .rsx-journal__head { margin-bottom: 29px; } .rsx-journal__title { font-size: 18px; } .rsx-journal__intro { font-size: 12px; line-height: 1.85; } .rsx-journal__grid { grid-template-columns: 1fr; gap: 13px; } .rsx-journal-card, .rsx-journal-card--feature, .rsx-journal-card:nth-child(2), .rsx-journal-card:nth-child(3), .rsx-journal-card:nth-child(4), .rsx-journal-card:nth-child(5), .rsx-journal-card:nth-child(6), .rsx-journal-skeleton, .rsx-journal-skeleton--feature, .rsx-journal-skeleton:nth-child(2), .rsx-journal-skeleton:nth-child(3) { grid-column: auto; } .rsx-journal-card { border-radius: 19px; } /* همه تصاویر موبایل یکدست */ .rsx-journal-card__media, .rsx-journal-card--feature .rsx-journal-card__media, .rsx-journal-card--tall-copy .rsx-journal-card__media { aspect-ratio: 16 / 8.2; } /* موبایل دیگر متن بلند نمایش نمی‌دهد تا کارت کشیده نشود */ .rsx-journal-card--tall-copy .rsx-journal-card__excerpt { -webkit-line-clamp: 3; padding-right: 0; } .rsx-journal-card--tall-copy .rsx-journal-card__excerpt::before { display: none; } .rsx-journal-card__body, .rsx-journal-card--feature .rsx-journal-card__body, .rsx-journal-card--tall-copy .rsx-journal-card__body { min-height: 0; padding: 16px 15px; } .rsx-journal-card__meta { margin-bottom: 8px; font-size: 8px; } .rsx-journal-card__title, .rsx-journal-card--feature .rsx-journal-card__title, .rsx-journal-card--tall-copy .rsx-journal-card__title { margin-bottom: 6px; font-size: 15px; line-height: 1.65; } .rsx-journal-card__excerpt, .rsx-journal-card--feature .rsx-journal-card__excerpt, .rsx-journal-card--tall-copy .rsx-journal-card__excerpt { margin-bottom: 11px; font-size: 11px; line-height: 1.78; } .rsx-journal-card__category { right: 11px; bottom: 10px; padding: 6px 9px; font-size: 8px; } .rsx-journal-card__number { top: 10px; left: 10px; width: 32px; height: 32px; } .rsx-journal-card__latest { top: 10px; right: 10px; } .rsx-journal__bottom { flex-direction: column-reverse; align-items: stretch; gap: 13px; margin-top: 23px; } .rsx-journal__all-link { align-self: center; min-width: 170px; } .rsx-journal__bottom-line { display: none; } .rsx-journal__bottom-center { width: 100%; justify-content: center; white-space: normal; text-align: center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px) { .rsx-journal__inner { width: calc(100% - 18px); } .rsx-journal-card__read { display: none; } .rsx-journal-card__media, .rsx-journal-card--feature .rsx-journal-card__media, .rsx-journal-card--tall-copy .rsx-journal-card__media { aspect-ratio: 16 / 7.9; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .rsx-journal__head, .rsx-journal-card, .rsx-journal__bottom { opacity: 1; transform: none; } .rsx-journal-card, .rsx-journal-card__image, .rsx-journal-card__action-icon, .rsx-journal__all-link, .rsx-journal__all-link-icon { transition: none; } .rsx-journal-skeleton__media, .rsx-journal-skeleton__body span, .rsx-journal-skeleton__body strong, .rsx-journal-skeleton__body p { animation: none; } } /* ========================================================= END — SECTION 07 ========================================================= */ /* END — RSX JOURNAL / NATIVE MIGRATION v1.6.23 */ /* START — RSX VOICE / NATIVE MIGRATION v1.6.25 */ /* ========================================================= START — SECTION 08 RANG SAREH — PREMIUM CUSTOMER EXPERIENCE WordPress-safe namespace: rsx-voice / rsx-voice-card ========================================================= */ .rsx-voice, .rsx-voice * { box-sizing: border-box; } /* ========================================================= SVG DEFINITIONS ========================================================= */ .rsx-voice__svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================= SECTION ========================================================= */ .rsx-voice { --rsx-voice-card-width: 360px; --rsx-voice-gap: 18px; position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 96px 0 84px; overflow: hidden; background: radial-gradient( circle at 14% 20%, rgba(255,225,97,.075), transparent 22% ), radial-gradient( circle at 88% 76%, rgba(75,127,198,.07), transparent 25% ), linear-gradient( 125deg, #09271b 0%, #123d2b 47%, #082419 100% ); isolation: isolate; } /* ========================================================= PREMIUM TOP/BOTTOM LINES ========================================================= */ .rsx-voice::before, .rsx-voice::after { content: ""; position: absolute; right: 50%; width: min( 1000px, 80% ); height: 1px; transform: translateX(50%); pointer-events: none; } .rsx-voice::before { top: 0; background: linear-gradient( 90deg, transparent, rgba(255,225,97,.08), rgba(255,225,97,.38), rgba(255,225,97,.08), transparent ); } .rsx-voice::after { bottom: 0; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.05), rgba(255,225,97,.14), rgba(255,255,255,.05), transparent ); } /* ========================================================= MESH ========================================================= */ .rsx-voice__mesh { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.022) 1px, transparent 1px ); background-size: 58px 58px; -webkit-mask-image: radial-gradient( ellipse at center, #000 5%, transparent 78% ); mask-image: radial-gradient( ellipse at center, #000 5%, transparent 78% ); pointer-events: none; } /* ========================================================= AURORAS ========================================================= */ .rsx-voice__aurora { position: absolute; z-index: 0; border-radius: 50%; filter: blur(110px); pointer-events: none; } .rsx-voice__aurora--one { top: -200px; left: 17%; width: 430px; height: 430px; background: rgba(255,225,97,.075); } .rsx-voice__aurora--two { right: 4%; bottom: -210px; width: 450px; height: 450px; background: rgba(77,110,204,.07); } /* ========================================================= INNER ========================================================= */ .rsx-voice__inner { position: relative; z-index: 5; width: min( 1320px, calc(100% - 70px) ); margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .rsx-voice__head { max-width: 780px; margin: 0 auto 47px; direction: rtl; text-align: center; opacity: 0; transform: translateY(25px); } /* ========================================================= EYEBROW ========================================================= */ .rsx-voice__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; direction: ltr; } .rsx-voice__eyebrow-line { width: 29px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,225,97,.55) ); } .rsx-voice__eyebrow-line:last-child { transform: scaleX(-1); } .rsx-voice__eyebrow-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255,225,97,.16); border-radius: 9px; background: rgba(255,225,97,.055); color: #ffe161; } .rsx-voice__eyebrow-icon svg { width: 15px; height: 15px; fill: currentColor; } .rsx-voice__eyebrow-text { color: #89a092; font-size: 8px; font-weight: 700; letter-spacing: .22em; } /* ========================================================= TITLE ========================================================= */ .rsx-voice__title { margin: 0 0 13px; color: #f2f7f4; font-size: 18px; font-weight: 800; line-height: 1.55; letter-spacing: -.025em; } .rsx-voice__title span { color: #ffe161; } /* ========================================================= INTRO ========================================================= */ .rsx-voice__intro { max-width: 670px; margin: 0 auto; color: #9db0a4; font-size: 13px; font-weight: 400; line-height: 1.95; } /* ========================================================= STAGE ========================================================= */ .rsx-voice__stage { position: relative; opacity: 0; transform: translateY(34px); } /* ========================================================= VIEWPORT ========================================================= */ .rsx-voice__viewport { width: 100%; overflow: hidden; padding: 15px 0 26px; direction: ltr; touch-action: pan-y; cursor: grab; } .rsx-voice__viewport:active { cursor: grabbing; } /* ========================================================= TRACK ========================================================= */ .rsx-voice__track { display: flex; flex-direction: row-reverse; align-items: stretch; flex-wrap: nowrap; gap: var(--rsx-voice-gap); width: max-content; min-width: max-content; direction: ltr; transform: translate3d(0,0,0); transition: transform .88s cubic-bezier(.22,.72,.22,1); will-change: transform; backface-visibility: hidden; } .rsx-voice__track--instant, .rsx-voice__track--dragging { transition: none; } /* ========================================================= CARD ========================================================= */ .rsx-voice-card { --rsx-voice-x: 50%; --rsx-voice-y: 50%; position: relative; display: flex; flex-direction: column; margin: 0; flex: 0 0 var(--rsx-voice-card-width); width: var(--rsx-voice-card-width); min-width: var(--rsx-voice-card-width); min-height: 325px; padding: 23px 22px 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.60); border-radius: 26px; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(239,244,240,.93) ); box-shadow: 0 16px 38px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8); direction: rtl; text-align: right; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; isolation: isolate; } /* ========================================================= MOUSE LIGHT ========================================================= */ .rsx-voice-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient( 280px circle at var(--rsx-voice-x) var(--rsx-voice-y), rgba(255,225,97,.20), transparent 65% ); transition: opacity .35s ease; pointer-events: none; } /* ========================================================= COLORED BOTTOM HALO ========================================================= */ .rsx-voice-card::after { content: ""; position: absolute; right: 12%; bottom: -105px; z-index: 0; width: 76%; height: 135px; border-radius: 50%; background: rgba(46,104,74,.11); filter: blur(40px); pointer-events: none; } /* ========================================================= TOP ========================================================= */ .rsx-voice-card__top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; direction: ltr; margin-bottom: 17px; } /* ========================================================= STARS ========================================================= */ .rsx-voice-card__stars { display: flex; align-items: center; gap: 3px; } .rsx-voice-card__stars svg { display: block; width: 17px; height: 17px; fill: #f2c744; stroke: #dcae27; stroke-width: .45; filter: drop-shadow( 0 3px 5px rgba(189,145,19,.12) ); } /* ========================================================= SCORE ========================================================= */ .rsx-voice-card__score { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 27px; padding: 0 9px; border: 1px solid rgba(34,78,56,.08); border-radius: 999px; background: rgba(35,79,57,.055); color: #345b45; font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; } /* ========================================================= QUOTE ========================================================= */ .rsx-voice-card__quote { position: absolute; top: 48px; left: 17px; z-index: 0; opacity: .055; color: #1e5339; pointer-events: none; transform: rotate(180deg); } .rsx-voice-card__quote svg { width: 78px; height: 78px; fill: currentColor; } /* ========================================================= REVIEW TEXT ========================================================= */ .rsx-voice-card__text { position: relative; z-index: 3; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; flex: 1 1 auto; margin: 0 0 23px; color: #365345; font-size: 13px; font-weight: 450; line-height: 2; } /* ========================================================= FOOTER ========================================================= */ .rsx-voice-card__footer { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding-top: 17px; border-top: 1px solid rgba(34,78,56,.08); } /* ========================================================= AVATAR ========================================================= */ .rsx-voice-card__avatar { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 14px; background: linear-gradient( 145deg, #1e4934, #367152 ); color: #ffe161; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 16px rgba(30,73,52,.15); } .rsx-voice-card__avatar span { font-size: 15px; font-weight: 800; } /* ========================================================= PERSON ========================================================= */ .rsx-voice-card__person { min-width: 0; } .rsx-voice-card__person strong { display: block; margin-bottom: 4px; color: #1f4c36; font-size: 12px; font-weight: 750; line-height: 1.4; } .rsx-voice-card__person span { display: block; overflow: hidden; color: #7a8b81; font-size: 9.5px; font-weight: 400; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= VERIFIED ========================================================= */ .rsx-voice-card__verified { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border: 1px solid rgba(38,97,66,.10); border-radius: 10px; background: #f2ebbb; color: #32694a; } .rsx-voice-card__verified svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= CARD HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .rsx-voice-card:hover { z-index: 10; transform: translateY(-8px); border-color: rgba(255,225,97,.35); box-shadow: 0 28px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9); } .rsx-voice-card:hover::before { opacity: 1; } .rsx-voice-card:hover .rsx-voice-card__avatar { transform: translateY(-2px); } } /* ========================================================= ARROWS ========================================================= */ .rsx-voice__arrow { position: absolute; top: 50%; z-index: 40; display: flex; align-items: center; justify-content: center; width: 53px; height: 53px; padding: 0; border: 1px solid rgba(255,225,97,.28); border-radius: 50%; background: rgba(10,36,25,.91); color: #ffe161; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; box-shadow: 0 14px 27px rgba(0,0,0,.20); transform: translateY(-50%); transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease, opacity .3s ease; } .rsx-voice__arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rsx-voice__arrow--prev { right: -26px; } .rsx-voice__arrow--next { left: -26px; } .rsx-voice__arrow.is-disabled { opacity: .25; pointer-events: none; } @media (hover:hover) and (pointer:fine) { .rsx-voice__arrow:hover { transform: translateY(-50%) scale(1.09); background: #174b34; } } /* ========================================================= BOTTOM ========================================================= */ .rsx-voice__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; opacity: 0; transform: translateY(15px); } /* ========================================================= PROGRESS ========================================================= */ .rsx-voice__progress { position: relative; width: min( 350px, 42% ); height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); } .rsx-voice__progress-fill { position: absolute; top: 0; left: 0; width: 22%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #ffe161, #f4a44b, #ffe161 ); box-shadow: 0 0 12px rgba(255,225,97,.24); transition: width .65s cubic-bezier(.2,.7,.2,1); } /* ========================================================= TRUST ========================================================= */ .rsx-voice__trust { display: flex; align-items: center; gap: 8px; color: #8fa498; direction: rtl; font-size: 10px; } .rsx-voice__trust-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255,225,97,.12); border-radius: 9px; background: rgba(255,225,97,.045); color: #ffe161; } .rsx-voice__trust-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= REVEAL ========================================================= */ .rsx-voice--visible .rsx-voice__head { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .82s cubic-bezier(.18,.76,.2,1); } .rsx-voice--visible .rsx-voice__stage { opacity: 1; transform: translateY(0); transition: opacity .85s ease .12s, transform .85s cubic-bezier(.18,.76,.2,1) .12s; } .rsx-voice--visible .rsx-voice__bottom { opacity: 1; transform: translateY(0); transition: opacity .7s ease .28s, transform .7s cubic-bezier(.18,.76,.2,1) .28s; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1199px) { .rsx-voice { padding: 80px 0 72px; } .rsx-voice__inner { width: calc(100% - 44px); } .rsx-voice-card { min-height: 310px; } .rsx-voice__arrow--prev { right: -19px; } .rsx-voice__arrow--next { left: -19px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .rsx-voice { padding: 64px 0 58px; } .rsx-voice__inner { width: calc(100% - 22px); } .rsx-voice__head { margin-bottom: 30px; } .rsx-voice__title { font-size: 18px; } .rsx-voice__intro { max-width: 440px; font-size: 12px; line-height: 1.85; } .rsx-voice__viewport { padding: 10px 0 18px; } /* کارت موبایل کوتاه و جمع‌وجور */ .rsx-voice-card { min-height: 292px; padding: 19px 17px 17px; border-radius: 21px; } .rsx-voice-card__top { margin-bottom: 14px; } .rsx-voice-card__stars { gap: 2px; } .rsx-voice-card__stars svg { width: 15px; height: 15px; } .rsx-voice-card__quote { top: 44px; left: 12px; } .rsx-voice-card__quote svg { width: 65px; height: 65px; } .rsx-voice-card__text { margin-bottom: 18px; font-size: 11.7px; line-height: 1.9; -webkit-line-clamp: 6; } .rsx-voice-card__footer { gap: 9px; padding-top: 14px; } .rsx-voice-card__avatar { width: 39px; height: 39px; border-radius: 12px; } .rsx-voice-card__person strong { font-size: 11px; } .rsx-voice-card__person span { font-size: 8.8px; } .rsx-voice__arrow { width: 43px; height: 43px; } .rsx-voice__arrow svg { width: 16px; height: 16px; } .rsx-voice__arrow--prev { right: -6px; } .rsx-voice__arrow--next { left: -6px; } .rsx-voice__bottom { display: block; margin-top: 10px; } .rsx-voice__progress { width: 120px; margin: 0 auto 14px; } .rsx-voice__trust { justify-content: center; text-align: center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:420px) { .rsx-voice__inner { width: calc(100% - 18px); } .rsx-voice-card { min-height: 280px; padding: 17px 15px 16px; } .rsx-voice-card__text { font-size: 11.2px; line-height: 1.85; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .rsx-voice__head, .rsx-voice__stage, .rsx-voice__bottom { opacity: 1; transform: none; } .rsx-voice-card, .rsx-voice__track, .rsx-voice__arrow { transition: none; } } /* ========================================================= END — SECTION 08 ========================================================= */ /* END — RSX VOICE / NATIVE MIGRATION v1.6.25 */ /* START — RSX USE / NATIVE MIGRATION v1.6.26 */ /* ========================================================= START — SECTION 09 RANG SAREH — PREMIUM APPLICATIONS WordPress-safe namespace: rsx-use / rsx-use-card ========================================================= */ .rsx-use, .rsx-use * { box-sizing: border-box; } /* ========================================================= SECTION ========================================================= */ .rsx-use { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 98px 0 86px; overflow: hidden; background: radial-gradient( circle at 9% 20%, rgba(255,225,97,.12), transparent 22% ), radial-gradient( circle at 91% 79%, rgba(42,101,72,.08), transparent 26% ), linear-gradient( 180deg, #f7f9f5 0%, #edf2ed 100% ); isolation: isolate; } /* ========================================================= PATTERN ========================================================= */ .rsx-use__pattern { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(28,71,50,.024) 1px, transparent 1px ), linear-gradient( 90deg, rgba(28,71,50,.024) 1px, transparent 1px ); background-size: 62px 62px; -webkit-mask-image: radial-gradient( ellipse at center, black 10%, transparent 80% ); mask-image: radial-gradient( ellipse at center, black 10%, transparent 80% ); pointer-events: none; } /* ========================================================= GLOW ========================================================= */ .rsx-use__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(105px); pointer-events: none; } .rsx-use__glow--one { top: -170px; left: 12%; width: 400px; height: 400px; background: rgba(255,225,97,.09); } .rsx-use__glow--two { right: -130px; bottom: -180px; width: 440px; height: 440px; background: rgba(44,105,74,.09); } /* ========================================================= INNER ========================================================= */ .rsx-use__inner { position: relative; z-index: 3; width: min( 1320px, calc(100% - 70px) ); margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .rsx-use__head { max-width: 770px; margin: 0 auto 48px; direction: rtl; text-align: center; opacity: 0; transform: translateY(24px); } /* ========================================================= EYEBROW ========================================================= */ .rsx-use__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 13px; direction: ltr; } .rsx-use__eyebrow-line { width: 30px; height: 1px; background: linear-gradient( 90deg, transparent, #c2a53b ); } .rsx-use__eyebrow-line:last-child { transform: scaleX(-1); } .rsx-use__eyebrow-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid rgba(30,77,55,.10); border-radius: 9px; background: rgba(255,255,255,.55); color: #315f47; } .rsx-use__eyebrow-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rsx-use__eyebrow-text { color: #958b71; font-size: 8px; font-weight: 700; letter-spacing: .22em; } /* ========================================================= TITLE ========================================================= */ .rsx-use__title { margin: 0 0 13px; color: #153d2c; direction: rtl; font-size: 18px; font-weight: 800; line-height: 1.55; letter-spacing: -.025em; } .rsx-use__title span { position: relative; color: #2c684a; } .rsx-use__title span::after { content: ""; position: absolute; right: 2%; bottom: 1px; z-index: -1; width: 96%; height: 8px; border-radius: 999px; background: rgba(255,225,97,.44); } /* ========================================================= INTRO ========================================================= */ .rsx-use__intro { max-width: 670px; margin: 0 auto; color: #68756d; font-size: 13px; line-height: 1.95; } /* ========================================================= GRID DESKTOP = 4 × 2 ========================================================= */ .rsx-use__grid { display: grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 18px; direction: rtl; } /* ========================================================= CARD ========================================================= */ .rsx-use-card { --rsx-use-x: 50%; --rsx-use-y: 50%; position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(30,76,54,.09); border-radius: 24px; background: rgba(255,255,255,.80); box-shadow: 0 13px 30px rgba(38,59,46,.065); opacity: 0; transform: translateY(30px) scale(.985); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .4s ease; isolation: isolate; } /* ========================================================= POINTER LIGHT ========================================================= */ .rsx-use-card::before { content: ""; position: absolute; inset: 0; z-index: 20; opacity: 0; background: radial-gradient( 280px circle at var(--rsx-use-x) var(--rsx-use-y), rgba(255,225,97,.17), transparent 65% ); pointer-events: none; transition: opacity .35s ease; } /* ========================================================= MEDIA ========================================================= */ .rsx-use-card__media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #1b3f30; } /* ========================================================= VISUAL ========================================================= */ .rsx-use-card__visual { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.001); transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .5s ease; } .rsx-use-card__visual.has-image { background-position: center; background-size: cover; } /* ========================================================= FALLBACK VISUALS ========================================================= */ .rsx-use-card__visual--industrial { background: linear-gradient( 135deg, rgba(21,61,44,.15), rgba(21,61,44,.40) ), linear-gradient( 120deg, #83958d, #315441 55%, #172f25 ); } .rsx-use-card__visual--decorative { background: radial-gradient( circle at 30% 30%, #dba467, transparent 27% ), radial-gradient( circle at 70% 70%, #869fbe, transparent 30% ), linear-gradient( 135deg, #b8aa93, #395646 ); } .rsx-use-card__visual--plastic { background: radial-gradient( circle at 25% 36%, #d8554b 0 16%, transparent 17% ), radial-gradient( circle at 52% 28%, #e0bd43 0 17%, transparent 18% ), radial-gradient( circle at 75% 63%, #4b76a7 0 18%, transparent 19% ), linear-gradient( 135deg, #2e493b, #172e24 ); } .rsx-use-card__visual--printing { background: linear-gradient( 135deg, rgba(13,37,26,.15), rgba(13,37,26,.45) ), repeating-linear-gradient( 90deg, #d45a4c 0 15px, #e7b441 15px 30px, #4377a1 30px 45px, #355f48 45px 60px ); } .rsx-use-card__visual--textile { background: linear-gradient( 125deg, #b04754 0 25%, #d4a240 25% 50%, #4972a0 50% 75%, #436f58 75% ); } .rsx-use-card__visual--auto { background: radial-gradient( ellipse at 50% 70%, #6b90ac, transparent 35% ), linear-gradient( 145deg, #243a33, #566d67 45%, #14251e ); } .rsx-use-card__visual--cosmetic { background: radial-gradient( circle at 25% 35%, #e9a3ae, transparent 22% ), radial-gradient( circle at 66% 30%, #d9c66b, transparent 23% ), radial-gradient( circle at 65% 72%, #ac91cf, transparent 25% ), linear-gradient( 135deg, #ddd1c8, #756b70 ); } .rsx-use-card__visual--ceramic { background: radial-gradient( circle at 30% 32%, #6b94aa, transparent 27% ), radial-gradient( circle at 69% 65%, #dfc27b, transparent 27% ), linear-gradient( 135deg, #d7d1c4, #536861 ); } /* ========================================================= SHADE ========================================================= */ .rsx-use-card__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(6,26,18,.01) 30%, rgba(6,26,18,.42) 100% ); pointer-events: none; } /* ========================================================= NUMBER ========================================================= */ .rsx-use-card__number { position: absolute; top: 13px; left: 13px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(7,28,20,.36); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); color: rgba(255,255,255,.84); font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; } /* ========================================================= ICON ========================================================= */ .rsx-use-card__icon { position: absolute; right: 17px; bottom: 14px; z-index: 7; display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; border: 3px solid rgba(255,255,255,.55); border-radius: 50%; background: #ffe161; color: #215039; box-shadow: 0 10px 22px rgba(103,80,10,.22); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .rsx-use-card__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= BODY ========================================================= */ .rsx-use-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 205px; padding: 21px 19px 19px; background: rgba(255,255,255,.93); direction: rtl; text-align: right; } /* ========================================================= ENGLISH LABEL ========================================================= */ .rsx-use-card__en { display: block; margin-bottom: 5px; color: #9b9177; direction: ltr; text-align: right; font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .10em; } /* ========================================================= CARD TITLE ========================================================= */ .rsx-use-card__title { min-height: 34px; margin: 0 0 8px; color: #1d4a35; font-size: 16px; font-weight: 750; line-height: 1.6; } /* ========================================================= DESCRIPTION ========================================================= */ .rsx-use-card__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; flex: 1 1 auto; min-height: 86px; margin: 0; color: #616d66; font-size: 11.5px; line-height: 1.9; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { .rsx-use-card:hover { z-index: 20; transform: translateY(-9px); border-color: rgba(37,91,64,.19); box-shadow: 0 26px 48px rgba(34,57,43,.14); } .rsx-use-card:hover::before { opacity: 1; } .rsx-use-card:hover .rsx-use-card__visual { transform: scale(1.065); filter: saturate(1.05) contrast(1.02); } .rsx-use-card:hover .rsx-use-card__icon { transform: translateY(-4px) rotate(-5deg) scale(1.05); box-shadow: 0 15px 27px rgba(103,80,10,.27); } } /* ========================================================= FOOTER ========================================================= */ .rsx-use__footer { display: flex; align-items: center; gap: 18px; margin-top: 36px; opacity: 0; transform: translateY(15px); } .rsx-use__footer-line { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(31,74,53,.14), transparent ); } .rsx-use__footer-center { display: flex; align-items: center; gap: 10px; color: #7c8981; direction: rtl; white-space: nowrap; font-size: 10px; } /* ========================================================= FOOTER COLORS ========================================================= */ .rsx-use__footer-colors { display: flex; align-items: center; gap: 3px; } .rsx-use__footer-colors i { display: block; width: 6px; height: 16px; border-radius: 999px; } .rsx-use__footer-colors i:nth-child(1) { background: #f16955; } .rsx-use__footer-colors i:nth-child(2) { background: #e8bd42; } .rsx-use__footer-colors i:nth-child(3) { background: #55a078; } .rsx-use__footer-colors i:nth-child(4) { background: #5488b0; } /* ========================================================= REVEAL ========================================================= */ .rsx-use--visible .rsx-use__head { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .82s cubic-bezier(.18,.76,.2,1); } .rsx-use--visible .rsx-use-card { opacity: 1; transform: translateY(0) scale(1); transition: opacity .7s ease, transform .74s cubic-bezier(.18,.76,.2,1), box-shadow .45s ease, border-color .4s ease; } .rsx-use--visible .rsx-use-card:nth-child(1) { transition-delay: .05s; } .rsx-use--visible .rsx-use-card:nth-child(2) { transition-delay: .10s; } .rsx-use--visible .rsx-use-card:nth-child(3) { transition-delay: .15s; } .rsx-use--visible .rsx-use-card:nth-child(4) { transition-delay: .20s; } .rsx-use--visible .rsx-use-card:nth-child(5) { transition-delay: .25s; } .rsx-use--visible .rsx-use-card:nth-child(6) { transition-delay: .30s; } .rsx-use--visible .rsx-use-card:nth-child(7) { transition-delay: .35s; } .rsx-use--visible .rsx-use-card:nth-child(8) { transition-delay: .40s; } .rsx-use--visible .rsx-use__footer { opacity: 1; transform: translateY(0); transition: opacity .7s ease .42s, transform .7s cubic-bezier(.18,.76,.2,1) .42s; } @media (hover:hover) and (pointer:fine) { .rsx-use--visible .rsx-use-card:hover { transition-delay: 0s; transform: translateY(-9px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1199px) { .rsx-use { padding: 80px 0 72px; } .rsx-use__inner { width: calc(100% - 44px); } .rsx-use__grid { grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 16px; } .rsx-use-card__media { aspect-ratio: 16 / 8.7; } .rsx-use-card__body { min-height: 185px; } } /* ========================================================= MOBILE 2 columns intentionally ========================================================= */ @media (max-width:767px) { .rsx-use { padding: 63px 0 57px; } .rsx-use__inner { width: calc(100% - 20px); } .rsx-use__head { margin-bottom: 29px; } .rsx-use__title { font-size: 18px; } .rsx-use__intro { max-width: 450px; font-size: 12px; line-height: 1.85; } /* دو ستون موبایل برای جلوگیری از کارت‌های بلند */ .rsx-use__grid { grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 9px; } .rsx-use-card { border-radius: 17px; } .rsx-use-card__media { aspect-ratio: 4 / 3; } .rsx-use-card__number { top: 8px; left: 8px; width: 27px; height: 27px; border-radius: 9px; font-size: 7px; } .rsx-use-card__icon { right: 9px; bottom: 8px; width: 37px; height: 37px; border-width: 2px; } .rsx-use-card__icon svg { width: 18px; height: 18px; } .rsx-use-card__body { min-height: 163px; padding: 13px 11px 12px; } .rsx-use-card__en { margin-bottom: 3px; font-size: 6.5px; letter-spacing: .06em; } .rsx-use-card__title { min-height: 36px; margin-bottom: 5px; font-size: 12px; line-height: 1.55; } .rsx-use-card__text { min-height: 0; font-size: 9.5px; line-height: 1.65; -webkit-line-clamp: 4; } .rsx-use__footer { margin-top: 24px; } .rsx-use__footer-line { display: none; } .rsx-use__footer-center { width: 100%; justify-content: center; white-space: normal; text-align: center; font-size: 9px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:380px) { .rsx-use__inner { width: calc(100% - 14px); } .rsx-use__grid { gap: 7px; } .rsx-use-card__body { min-height: 155px; padding: 11px 9px; } .rsx-use-card__title { font-size: 11px; } .rsx-use-card__text { font-size: 8.8px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce) { .rsx-use__head, .rsx-use-card, .rsx-use__footer { opacity: 1; transform: none; } .rsx-use-card, .rsx-use-card__visual, .rsx-use-card__icon { transition: none; } } /* ========================================================= END — SECTION 09 ========================================================= */ /* END — RSX USE / NATIVE MIGRATION v1.6.26 */ /* START — RSX NEWS / NATIVE MIGRATION v1.6.27 */ /* ========================================================= START — SECTION 10 RANG SAREH — PREMIUM NEWSLETTER WordPress-safe namespace: rsx-news ========================================================= */ .rsx-news, .rsx-news * { box-sizing: border-box; } /* ========================================================= SECTION ========================================================= */ .rsx-news { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 92px 0; overflow: hidden; background: radial-gradient( circle at 9% 22%, rgba(255,225,97,.12), transparent 22% ), radial-gradient( circle at 91% 80%, rgba(40,96,67,.08), transparent 25% ), linear-gradient( 180deg, #f5f7f3 0%, #edf2ed 100% ); isolation: isolate; } /* ========================================================= OUTER GLOWS ========================================================= */ .rsx-news__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(100px); pointer-events: none; } .rsx-news__glow--one { top: -170px; left: 14%; width: 390px; height: 390px; background: rgba(255,225,97,.10); } .rsx-news__glow--two { right: -120px; bottom: -180px; width: 430px; height: 430px; background: rgba(42,100,72,.09); } /* ========================================================= INNER ========================================================= */ .rsx-news__inner { position: relative; z-index: 3; width: min( 1320px, calc(100% - 70px) ); margin: 0 auto; } /* ========================================================= MAIN PANEL ========================================================= */ .rsx-news__panel { position: relative; overflow: hidden; padding: 59px 59px 28px; border: 1px solid rgba(255,255,255,.09); border-radius: 35px; background: radial-gradient( circle at 12% 30%, rgba(255,225,97,.07), transparent 25% ), radial-gradient( circle at 88% 75%, rgba(85,132,206,.065), transparent 26% ), linear-gradient( 125deg, #082419 0%, #123c2a 50%, #09271b 100% ); box-shadow: 0 30px 70px rgba(31,52,40,.18); isolation: isolate; opacity: 0; transform: translateY(30px); } /* grid lines */ .rsx-news__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 55px 55px; -webkit-mask-image: radial-gradient( ellipse at center, #000 8%, transparent 82% ); mask-image: radial-gradient( ellipse at center, #000 8%, transparent 82% ); pointer-events: none; } /* premium top line */ .rsx-news__panel::after { content: ""; position: absolute; top: 0; left: 50%; width: 70%; height: 1px; transform: translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(255,225,97,.38), transparent ); pointer-events: none; } /* ========================================================= COLOR ORBS ========================================================= */ .rsx-news__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(45px); opacity: .19; pointer-events: none; } .rsx-news__orb--yellow { top: -50px; right: 23%; width: 160px; height: 160px; background: #ffe161; } .rsx-news__orb--blue { left: 7%; bottom: -70px; width: 180px; height: 180px; background: #4e83be; } .rsx-news__orb--red { left: 41%; top: -85px; width: 155px; height: 155px; background: #dc694f; } /* ========================================================= GRID ========================================================= */ .rsx-news__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 62px; direction: rtl; } /* ========================================================= CONTENT ========================================================= */ .rsx-news__content { direction: rtl; text-align: right; } /* ========================================================= EYEBROW ========================================================= */ .rsx-news__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; direction: ltr; color: #91aa9b; font-size: 8px; font-weight: 700; letter-spacing: .20em; } .rsx-news__eyebrow-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255,225,97,.14); border-radius: 9px; background: rgba(255,225,97,.05); color: #ffe161; } .rsx-news__eyebrow-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .rsx-news__title { max-width: 610px; margin: 0 0 15px; color: #f4f8f5; font-size: 18px; font-weight: 800; line-height: 1.55; letter-spacing: -.025em; } .rsx-news__title span { color: #ffe161; } /* ========================================================= TEXT ========================================================= */ .rsx-news__text { max-width: 570px; margin: 0 0 25px; color: #a4b6ab; font-size: 13px; line-height: 2; } /* ========================================================= BENEFITS ========================================================= */ .rsx-news__benefits { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .rsx-news__benefit { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.035); color: #a8bbb0; font-size: 9.5px; line-height: 1.5; } .rsx-news__benefit-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; background: rgba(255,225,97,.08); color: #ffe161; } .rsx-news__benefit-icon svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= SUBSCRIBE BOX ========================================================= */ .rsx-news__subscribe { position: relative; padding: 27px; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: linear-gradient( 145deg, rgba(255,255,255,.085), rgba(255,255,255,.035) ); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.11); } /* ========================================================= SUBSCRIBE TOP ========================================================= */ .rsx-news__subscribe-top { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; direction: rtl; } .rsx-news__subscribe-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,225,97,.18); border-radius: 14px; background: rgba(255,225,97,.08); color: #ffe161; line-height: 0; } .rsx-news__subscribe-icon svg { display: block; width: 21px; height: 21px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rsx-news__subscribe-top strong { display: block; margin-bottom: 3px; color: #f5f8f6; font-size: 14px; font-weight: 750; line-height: 1.4; } .rsx-news__subscribe-top span { display: block; color: #8ea398; font-size: 9.5px; line-height: 1.5; } /* ========================================================= FORM ========================================================= */ .rsx-news__form { width: 100%; margin: 0; } /* مهم: input و button دقیقاً در یک خط */ .rsx-news__form-row { display: flex; align-items: stretch; width: 100%; gap: 8px; direction: rtl; } /* ========================================================= FIELD ========================================================= */ .rsx-news__field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 58px; margin: 0; padding: 0 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.94); direction: rtl; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; } .rsx-news__field:focus-within { border-color: rgba(255,225,97,.72); background: #ffffff; box-shadow: 0 0 0 4px rgba(255,225,97,.08); } /* ========================================================= MAIL ICON ========================================================= */ .rsx-news__mail { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin-left: 9px; color: #668072; } .rsx-news__mail svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= INPUT ========================================================= */ .rsx-news__field input { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: #264a37; direction: rtl; text-align: right; font-size: 12px; line-height: 1; appearance: none; -webkit-appearance: none; } .rsx-news__field input::placeholder { color: #96a39b; opacity: 1; } /* ========================================================= BUTTON ========================================================= */ .rsx-news__button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 9px; height: 58px; margin: 0; padding: 0 18px; border: 1px solid rgba(255,225,97,.40); border-radius: 16px; background: linear-gradient( 145deg, #ffe161, #efc849 ); color: #173f2e; cursor: pointer; box-shadow: 0 13px 25px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.45); white-space: nowrap; font-family: inherit; font-size: 11px; font-weight: 750; line-height: 1; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease; } .rsx-news__button-arrow { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(23,63,46,.09); } .rsx-news__button-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover:hover) and (pointer:fine) { .rsx-news__button:hover { transform: translateY(-3px); filter: brightness(1.025); box-shadow: 0 17px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.50); } } /* ========================================================= MESSAGE ========================================================= */ .rsx-news__message { min-height: 19px; margin-top: 8px; padding-right: 4px; direction: rtl; text-align: right; font-size: 9.5px; line-height: 1.6; } .rsx-news__message.is-error { color: #ffc0b5; } .rsx-news__message.is-success { color: #bce3c8; } /* ========================================================= PRIVACY ========================================================= */ .rsx-news__privacy { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #82988c; direction: rtl; font-size: 8.5px; line-height: 1.6; } .rsx-news__privacy-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; color: #9fb2a7; } .rsx-news__privacy-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= BOTTOM ========================================================= */ .rsx-news__bottom { position: relative; z-index: 3; display: flex; align-items: center; gap: 15px; margin-top: 39px; } .rsx-news__bottom-line { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent ); } .rsx-news__bottom-center { display: flex; align-items: center; gap: 9px; color: #738b7e; direction: ltr; white-space: nowrap; font-family: Arial, sans-serif; font-size: 7px; font-weight: 700; letter-spacing: .14em; } /* ========================================================= PALETTE ========================================================= */ .rsx-news__palette { display: flex; align-items: center; gap: 3px; } .rsx-news__palette i { display: block; width: 5px; height: 14px; border-radius: 999px; } .rsx-news__palette i:nth-child(1) { background: #ec6956; } .rsx-news__palette i:nth-child(2) { background: #ffe161; } .rsx-news__palette i:nth-child(3) { background: #58a37a; } .rsx-news__palette i:nth-child(4) { background: #5b89ba; } /* ========================================================= REVEAL ========================================================= */ .rsx-news--visible .rsx-news__panel { opacity: 1; transform: translateY(0); transition: opacity .85s ease, transform .9s cubic-bezier(.18,.76,.2,1); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .rsx-news { padding: 78px 0; } .rsx-news__inner { width: calc(100% - 44px); } .rsx-news__panel { padding: 45px 38px 26px; } .rsx-news__grid { grid-template-columns: 1fr; gap: 35px; } .rsx-news__content { text-align: center; } .rsx-news__title, .rsx-news__text { margin-left: auto; margin-right: auto; } .rsx-news__benefits { justify-content: center; } .rsx-news__eyebrow { justify-content: center; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .rsx-news { padding: 60px 0; } .rsx-news__inner { width: calc(100% - 20px); } .rsx-news__panel { padding: 34px 18px 22px; border-radius: 25px; } .rsx-news__grid { gap: 27px; } .rsx-news__title { font-size: 18px; } .rsx-news__text { font-size: 11.5px; line-height: 1.9; } .rsx-news__benefits { gap: 7px; } .rsx-news__benefit { padding: 7px 8px; font-size: 8.5px; } .rsx-news__subscribe { padding: 20px 15px; border-radius: 20px; } /* موبایل: فرم زیر هم می‌آید چون عرض محدود است. دسکتاپ/تبلت همچنان دقیقاً یک خط است. */ .rsx-news__form-row { display: grid; grid-template-columns: 1fr; gap: 8px; } .rsx-news__field, .rsx-news__button { width: 100%; height: 54px; } .rsx-news__button { justify-content: center; } .rsx-news__bottom { margin-top: 28px; } .rsx-news__bottom-line { display: none; } .rsx-news__bottom-center { width: 100%; justify-content: center; white-space: normal; text-align: center; flex-wrap: wrap; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .rsx-news__inner { width: calc(100% - 16px); } .rsx-news__panel { padding: 30px 14px 20px; } .rsx-news__subscribe { padding: 17px 12px; } .rsx-news__benefit { font-size: 8px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rsx-news__panel { opacity: 1; transform: none; transition: none; } .rsx-news__button { transition: none; } } /* ========================================================= END — SECTION 10 ========================================================= */ /* END — RSX NEWS / NATIVE MIGRATION v1.6.27 */ /* START — RSX CONTACT / NATIVE MIGRATION v1.6.28 */ /* ========================================================= START — SECTION 11 RANG SAREH — PREMIUM CONTACT SECTION WordPress-safe namespace: rsx-contact / rsx-contact-field ========================================================= */ .rsx-contact, .rsx-contact * { box-sizing: border-box; } /* ========================================================= SECTION ========================================================= */ .rsx-contact { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 96px 0 105px; overflow: hidden; background: radial-gradient( circle at 12% 15%, rgba(255,225,97,.12), transparent 22% ), radial-gradient( circle at 91% 82%, rgba(43,101,72,.09), transparent 25% ), linear-gradient( 180deg, #f6f8f4 0%, #edf2ed 100% ); isolation: isolate; } /* ========================================================= BACKGROUND TEXTURE ========================================================= */ .rsx-contact::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient( rgba(30,73,51,.05) .65px, transparent .65px ); background-size: 8px 8px; opacity: .30; pointer-events: none; } /* ========================================================= GLOWS ========================================================= */ .rsx-contact__glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(105px); pointer-events: none; } .rsx-contact__glow--one { top: -190px; left: 15%; width: 420px; height: 420px; background: rgba(255,225,97,.09); } .rsx-contact__glow--two { right: -130px; bottom: -180px; width: 470px; height: 470px; background: rgba(39,98,69,.09); } /* ========================================================= INNER ========================================================= */ .rsx-contact__inner { position: relative; z-index: 4; width: min( 1320px, calc(100% - 70px) ); margin: 0 auto; } /* ========================================================= SHELL ========================================================= */ .rsx-contact__shell { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 650px; overflow: hidden; border: 1px solid rgba(23,63,46,.10); border-radius: 36px; background: #fff; box-shadow: 0 28px 70px rgba(33,53,41,.14); opacity: 0; transform: translateY(34px); } /* ========================================================= INFO PANEL ========================================================= */ .rsx-contact__info { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: 51px 46px 29px; background: radial-gradient( circle at 20% 18%, rgba(255,225,97,.08), transparent 25% ), linear-gradient( 140deg, #082419 0%, #113a29 55%, #09271b 100% ); isolation: isolate; } /* ========================================================= GRID BACKGROUND ========================================================= */ .rsx-contact__info-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 52px 52px; -webkit-mask-image: radial-gradient( ellipse at center, #000 5%, transparent 80% ); mask-image: radial-gradient( ellipse at center, #000 5%, transparent 80% ); pointer-events: none; } /* ========================================================= ORBS ========================================================= */ .rsx-contact__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(45px); opacity: .16; pointer-events: none; } .rsx-contact__orb--yellow { top: -60px; right: 12%; width: 150px; height: 150px; background: #ffe161; } .rsx-contact__orb--blue { left: -40px; bottom: 10%; width: 180px; height: 180px; background: #4e83be; } .rsx-contact__orb--red { right: 10%; bottom: -80px; width: 160px; height: 160px; background: #dd6651; } /* ========================================================= INFO CONTENT ========================================================= */ .rsx-contact__info-content { position: relative; z-index: 4; direction: rtl; text-align: right; } /* ========================================================= EYEBROW ========================================================= */ .rsx-contact__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; direction: ltr; color: #90a79a; font-size: 8px; font-weight: 700; letter-spacing: .20em; } .rsx-contact__eyebrow-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255,225,97,.16); border-radius: 9px; background: rgba(255,225,97,.05); color: #ffe161; } .rsx-contact__eyebrow-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .rsx-contact__title { max-width: 500px; margin: 0 0 17px; color: #f5f8f6; font-size: 18px; font-weight: 800; line-height: 1.52; letter-spacing: -.025em; } .rsx-contact__title span { color: #ffe161; } /* ========================================================= INTRO ========================================================= */ .rsx-contact__intro { max-width: 510px; margin: 0 0 30px; color: #a5b6ac; font-size: 13px; line-height: 2; } /* ========================================================= METHODS ========================================================= */ .rsx-contact__methods { display: grid; gap: 9px; } .rsx-contact-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 69px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(255,255,255,.035); color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background-color .35s ease; } .rsx-contact-method__icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(255,225,97,.13); border-radius: 13px; background: rgba(255,225,97,.06); color: #ffe161; } .rsx-contact-method__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rsx-contact-method__text { min-width: 0; } .rsx-contact-method__text small { display: block; margin-bottom: 3px; color: #758e80; font-size: 8.5px; } .rsx-contact-method__text strong { display: block; color: #e8f0eb; font-size: 11px; font-weight: 650; line-height: 1.5; } .rsx-contact-method__arrow { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(255,255,255,.045); color: #91a99b; transition: transform .3s ease, background-color .3s ease, color .3s ease; } .rsx-contact-method__arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover:hover) and (pointer:fine) { .rsx-contact-method:hover { transform: translateX(-5px); border-color: rgba(255,225,97,.16); background: rgba(255,255,255,.055); } .rsx-contact-method:hover .rsx-contact-method__arrow { transform: translateX(-2px); background: #ffe161; color: #173f2e; } } /* ========================================================= TRUST ========================================================= */ .rsx-contact__trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .rsx-contact__trust-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.025); color: #80998a; } .rsx-contact__trust-item > span { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: #ffe161; } .rsx-contact__trust-item svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .rsx-contact__trust-item small { font-size: 8px; line-height: 1; } /* ========================================================= SIGNATURE ========================================================= */ .rsx-contact__signature { position: relative; z-index: 4; display: flex; align-items: center; gap: 8px; margin-top: 35px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.06); color: #657f70; direction: ltr; font-family: Arial, sans-serif; font-size: 6.5px; font-weight: 700; letter-spacing: .14em; } .rsx-contact__palette { display: flex; gap: 2px; } .rsx-contact__palette i { display: block; width: 5px; height: 13px; border-radius: 999px; } .rsx-contact__palette i:nth-child(1) { background: #ef6d59; } .rsx-contact__palette i:nth-child(2) { background: #ffe161; } .rsx-contact__palette i:nth-child(3) { background: #5aa27a; } .rsx-contact__palette i:nth-child(4) { background: #5689b7; } /* ========================================================= FORM PANEL ========================================================= */ .rsx-contact__form-panel { --rsx-contact-x: 50%; --rsx-contact-y: 50%; position: relative; min-width: 0; padding: 50px 48px 45px; background: linear-gradient( 145deg, #ffffff, #f5f7f4 ); direction: rtl; isolation: isolate; } .rsx-contact__form-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient( 350px circle at var(--rsx-contact-x) var(--rsx-contact-y), rgba(255,225,97,.12), transparent 70% ); pointer-events: none; transition: opacity .35s ease; } @media (hover:hover) and (pointer:fine) { .rsx-contact__form-panel:hover::before { opacity: 1; } } /* ========================================================= FORM HEAD ========================================================= */ .rsx-contact__form-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 15px; margin-bottom: 31px; } .rsx-contact__form-index { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(33,75,54,.10); border-radius: 14px; background: #f2f4ee; color: #909b94; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; } .rsx-contact__form-kicker { display: block; margin-bottom: 5px; color: #9c9278; direction: ltr; text-align: right; font-family: Arial, sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: .13em; } .rsx-contact__form-head h3 { margin: 0 0 7px; color: #183f2e; font-size: 16px; font-weight: 800; line-height: 1.5; } .rsx-contact__form-head p { max-width: 520px; margin: 0; color: #737f78; font-size: 11.5px; line-height: 1.85; } /* ========================================================= FORM ========================================================= */ .rsx-contact__form { position: relative; z-index: 2; margin: 0; } /* ========================================================= TWO-COLUMN FIELDS ========================================================= */ .rsx-contact__fields { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 13px; margin-bottom: 14px; } /* ========================================================= FIELD ========================================================= */ .rsx-contact-field { display: block; margin: 0; } .rsx-contact-field__label { display: block; margin: 0 4px 7px; color: #4d6256; font-size: 9.5px; font-weight: 650; } .rsx-contact-field__control { position: relative; display: flex; align-items: center; width: 100%; min-height: 55px; overflow: hidden; border: 1px solid rgba(29,71,50,.10); border-radius: 15px; background: rgba(255,255,255,.82); transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; } .rsx-contact-field__control:focus-within { border-color: rgba(45,104,74,.40); background: #ffffff; box-shadow: 0 0 0 4px rgba(45,104,74,.06); } .rsx-contact-field__control > svg { flex: 0 0 19px; width: 19px; height: 19px; margin: 0 14px 0 8px; fill: none; stroke: #789085; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= INPUT / SELECT ========================================================= */ .rsx-contact-field input, .rsx-contact-field select, .rsx-contact-field textarea { display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: #2b4c39; font-family: inherit; font-size: 11px; } .rsx-contact-field input, .rsx-contact-field select { height: 53px; padding: 0 4px 0 13px; } .rsx-contact-field input::placeholder, .rsx-contact-field textarea::placeholder { color: #a0aaa4; opacity: 1; } .rsx-contact-field select { appearance: none; -webkit-appearance: none; cursor: pointer; } /* ========================================================= MESSAGE ========================================================= */ .rsx-contact-field--message { margin-top: 2px; } .rsx-contact-field--message .rsx-contact-field__control { align-items: flex-start; min-height: 138px; } .rsx-contact-field--message .rsx-contact-field__control > svg { margin-top: 16px; } .rsx-contact-field textarea { min-height: 136px; padding: 15px 4px 15px 13px; resize: vertical; line-height: 1.8; } /* ========================================================= SUBMIT ROW ========================================================= */ .rsx-contact__submit-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 19px; } /* ========================================================= BUTTON ========================================================= */ .rsx-contact__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 175px; height: 55px; margin: 0; padding: 0 18px; border: 0; border-radius: 15px; background: linear-gradient( 145deg, #1c4a34, #2f6b4b ); color: #fff7cb; cursor: pointer; box-shadow: 0 15px 26px rgba(30,74,52,.19); font-family: inherit; font-size: 11px; font-weight: 750; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .rsx-contact__submit-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,225,97,.12); color: #ffe161; } .rsx-contact__submit-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (hover:hover) and (pointer:fine) { .rsx-contact__submit:hover { transform: translateY(-4px); box-shadow: 0 20px 34px rgba(30,74,52,.25); } } /* ========================================================= SECURE ========================================================= */ .rsx-contact__secure { display: inline-flex; align-items: center; gap: 7px; color: #89948e; } .rsx-contact__secure > span { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(38,81,59,.05); color: #6e8879; } .rsx-contact__secure svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .rsx-contact__secure small { font-size: 8px; } /* ========================================================= FORM MESSAGE ========================================================= */ .rsx-contact__message { min-height: 20px; margin-top: 9px; color: #6e7d74; font-size: 9.5px; line-height: 1.6; } .rsx-contact__message.is-error { color: #bf5443; } .rsx-contact__message.is-success { color: #318052; } /* ========================================================= REVEAL ========================================================= */ .rsx-contact--visible .rsx-contact__shell { opacity: 1; transform: translateY(0); transition: opacity .85s ease, transform .9s cubic-bezier(.18,.76,.2,1); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { .rsx-contact { padding: 78px 0 86px; } .rsx-contact__inner { width: calc(100% - 44px); } .rsx-contact__shell { grid-template-columns: 1fr; min-height: 0; } .rsx-contact__info { padding: 44px 38px 27px; } .rsx-contact__form-panel { padding: 42px 38px 39px; } .rsx-contact__methods { grid-template-columns: repeat( 3, minmax(0,1fr) ); } .rsx-contact-method { grid-template-columns: auto 1fr; min-height: 78px; } .rsx-contact-method__arrow { display: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .rsx-contact { padding: 60px 0 68px; } .rsx-contact__inner { width: calc(100% - 20px); } .rsx-contact__shell { border-radius: 25px; } .rsx-contact__info { padding: 35px 19px 23px; } .rsx-contact__title { font-size: 18px; } .rsx-contact__intro { margin-bottom: 23px; font-size: 11.5px; line-height: 1.9; } .rsx-contact__methods { grid-template-columns: 1fr; gap: 8px; } .rsx-contact-method { min-height: 65px; } .rsx-contact-method__arrow { display: flex; } .rsx-contact__trust { margin-top: 20px; } .rsx-contact__signature { flex-wrap: wrap; margin-top: 25px; } /* FORM */ .rsx-contact__form-panel { padding: 31px 17px 28px; } .rsx-contact__form-head { gap: 11px; margin-bottom: 25px; } .rsx-contact__form-index { width: 38px; height: 38px; border-radius: 12px; } .rsx-contact__form-head h3 { font-size: 16px; } .rsx-contact__form-head p { font-size: 10.5px; } /* Mobile: inputs single column */ .rsx-contact__fields { grid-template-columns: 1fr; gap: 11px; margin-bottom: 11px; } .rsx-contact-field__control { min-height: 53px; border-radius: 14px; } .rsx-contact-field input, .rsx-contact-field select { height: 51px; } .rsx-contact-field--message .rsx-contact-field__control { min-height: 125px; } .rsx-contact-field textarea { min-height: 123px; } .rsx-contact__submit-row { display: block; margin-top: 16px; } .rsx-contact__submit { width: 100%; min-width: 0; height: 54px; } .rsx-contact__secure { justify-content: center; width: 100%; margin-top: 12px; } .rsx-contact__message { text-align: center; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .rsx-contact__inner { width: calc(100% - 16px); } .rsx-contact__info { padding: 31px 15px 21px; } .rsx-contact__form-panel { padding: 27px 13px 25px; } .rsx-contact-method__text strong { font-size: 10.5px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .rsx-contact__shell { opacity: 1; transform: none; transition: none; } .rsx-contact-method, .rsx-contact__submit { transition: none; } } /* ========================================================= END — SECTION 11 ========================================================= */ /* END — RSX CONTACT / NATIVE MIGRATION v1.6.28 */ /* ========================================================= RSX CONTACT — PROFESSIONAL SUBJECT DROPDOWN v1.6.29 ========================================================= */ .rsx-contact-field__control--select { overflow: visible; z-index: 30; } .rsx-contact-field--select-open { position: relative; z-index: 80; } .rsx-contact-native-select { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } .rsx-contact-select { position: relative; flex: 1 1 auto; min-width: 0; height: 53px; margin-left: 8px; } .rsx-contact-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 53px; padding: 0 4px 0 10px; border: 0; outline: 0; background: transparent; color: #2b4c39; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; text-align: right; cursor: pointer; } .rsx-contact-select__label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rsx-contact-select__trigger.is-placeholder .rsx-contact-select__label { color: #829189; } .rsx-contact-select__chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid rgba(39,91,65,.10); border-radius: 9px; color: #557466; background: rgba(45,104,74,.045); transition: transform .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease; } .rsx-contact-select__chevron svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rsx-contact-select.is-open .rsx-contact-select__chevron { transform: rotate(180deg); color: #244f3a; border-color: rgba(198,164,55,.28); background: rgba(255,225,97,.16); } .rsx-contact-select__menu { position: absolute; top: calc(100% + 8px); right: -46px; left: -8px; z-index: 100; padding: 7px; border: 1px solid rgba(27,73,51,.11); border-radius: 15px; background: linear-gradient( 180deg, rgba(255,255,255,.99), rgba(248,250,247,.99) ); box-shadow: 0 18px 42px rgba(26,54,39,.16), 0 4px 12px rgba(26,54,39,.07), inset 0 1px 0 rgba(255,255,255,.95); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.985); transform-origin: top center; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .18s ease; } .rsx-contact-select.is-open .rsx-contact-select__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .rsx-contact-select__option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 39px; margin: 0; padding: 8px 11px 8px 9px; border: 0; border-radius: 10px; background: transparent; color: #385847; font-family: inherit; font-size: 10.5px; font-weight: 500; line-height: 1.65; text-align: right; cursor: pointer; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .rsx-contact-select__option::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(54,106,78,.18); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } .rsx-contact-select__option[aria-selected="true"] { color: #214b36; font-weight: 700; background: linear-gradient( 90deg, rgba(255,225,97,.13), rgba(48,111,76,.07) ); } .rsx-contact-select__option[aria-selected="true"]::before { background: #d7b33a; box-shadow: 0 0 0 4px rgba(215,179,58,.12); } .rsx-contact-select__option:focus-visible { outline: 0; color: #214b36; background: rgba(45,104,74,.08); } @media (hover:hover) and (pointer:fine) { .rsx-contact-select__trigger:hover .rsx-contact-select__chevron { color: #244f3a; border-color: rgba(45,104,74,.18); background: rgba(45,104,74,.075); } .rsx-contact-select__option:hover { color: #214b36; background: rgba(45,104,74,.07); transform: translateX(-2px); } .rsx-contact-select__option:hover::before { background: #d7b33a; } } @media (max-width: 767px) { .rsx-contact-select { height: 51px; } .rsx-contact-select__trigger { height: 51px; font-size: 10.5px; } .rsx-contact-select__menu { right: -44px; left: -6px; padding: 6px; border-radius: 14px; } .rsx-contact-select__option { min-height: 38px; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .rsx-contact-select__chevron, .rsx-contact-select__menu, .rsx-contact-select__option { transition: none; } } /* END — RSX CONTACT PROFESSIONAL SUBJECT DROPDOWN */ /* ========================================================= RSX NEWS — EMAIL ICON VERTICAL CENTER FIX v1.6.30 ========================================================= */ .rsx-news__field { position: relative; } .rsx-news__mail { position: absolute; top: 50%; right: 15px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; transform: translateY(-50%); line-height: 0; pointer-events: none; } .rsx-news__mail svg { display: block; flex: 0 0 auto; } .rsx-news__field input { padding-right: 33px; } /* END — RSX NEWS EMAIL ICON VERTICAL CENTER FIX */ /* ========================================================= RSX NEWS — SUBSCRIBE HEADER ICON TRUE CENTER FIX v1.6.31 ========================================================= */ .rsx-news__subscribe-top > .rsx-news__subscribe-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; margin: 0; padding: 0; line-height: 0; } .rsx-news__subscribe-top > .rsx-news__subscribe-icon svg { display: block; width: 21px; height: 21px; margin: 0; flex: 0 0 21px; } /* END — RSX NEWS SUBSCRIBE HEADER ICON TRUE CENTER FIX */ /* ========================================================= RSX BRAND — PERSIAN FRAME NOTE FONT LOCK v1.6.32 ========================================================= */ .rsx-brand__frame-note, .rsx-brand__frame-note > span { font-family: var(--dg-font-ui, Tahoma, sans-serif); } /* END — RSX BRAND PERSIAN FRAME NOTE FONT LOCK */ /* ========================================================= DGCHEME HOMEPAGE — ROOT HORIZONTAL OVERFLOW FIX v1.6.33 These sections were already inside a true full-width Homepage shell. Legacy 100vw + negative viewport margins caused a few pixels of document overflow on desktop because 100vw can include scrollbar width. ========================================================= */ .dgdiffx, .dgaboutx, .rsx-journal, .rsx-voice, .rsx-use, .rsx-news, .rsx-contact { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* END — DGCHEME HOMEPAGE ROOT HORIZONTAL OVERFLOW FIX */ /* ========================================================= DGCHEME — GLOBAL VERTICAL SCROLLBAR v1.6.34 ========================================================= */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #c7a83e #08271f; } /* Chrome / Edge / Safari */ html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: linear-gradient( 180deg, #061f18 0%, #0a3025 50%, #061f18 100% ); } html::-webkit-scrollbar-thumb { min-height: 54px; border: 2px solid #08271f; border-radius: 999px; background: linear-gradient( 180deg, #e1c34d 0%, #b9962f 100% ); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } html::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, #f2d65e 0%, #c9a83a 100% ); } html::-webkit-scrollbar-thumb:active { background: linear-gradient( 180deg, #d4b43f 0%, #a98728 100% ); } /* Remove native arrow buttons for a cleaner premium rail */ html::-webkit-scrollbar-button { width: 0; height: 0; display: none; } /* Keep the lower/right corner consistent */ html::-webkit-scrollbar-corner { background: #08271f; } /* END — DGCHEME GLOBAL VERTICAL SCROLLBAR */