/* =========================================================================== * DigiDollar - front-page hero «سالن معامله», FAQ accordion & how-to restyle. * Loads AFTER dd-widgets.css and reuses its tokens (--dd-gold, --dd-card, ...). * Light = default - Dark = html[data-dracula-scheme="dark"] * ======================================================================== */ /* ---------- hero shell (full-bleed like the other dd sections) ---------- */ /* NOTE: element-qualified because the dd-coin-box CTA banner also puts a `dd-hero` FLAG CLASS on (it hides the theme title wrapper there). A bare .dd-hero would style the body itself - overflow:hidden on body kills page scrolling. Keep every bare hero selector section-qualified. */ section.dd-hero { position: relative; box-sizing: border-box; width: calc(100vw - var(--dd-sbw, 0px)) !important; max-width: calc(100vw - var(--dd-sbw, 0px)) !important; margin-left: calc(50% - (100vw - var(--dd-sbw, 0px)) / 2) !important; margin-right: calc(50% - (100vw - var(--dd-sbw, 0px)) / 2) !important; padding: clamp(14px, 2.2vw, 32px) clamp(16px, 4vw, 40px) clamp(38px, 5vw, 80px); color: var(--dd-ink); overflow: hidden; isolation: isolate; } /* The theme stacks 80px top margins on .epcl-page-wrapper.content and #single.content (desktop widths). The hero carries its own spacing, so collapse both on the front page - same fix the fullwidth pages needed. */ body.home div.epcl-page-wrapper.content, body.home div#single.content { margin-top: 0 !important; } /* Mobile: the theme's #header reserves only 58px of flow (the glass capsule inside .grid-container visually extends ~40px further down, overflowing it), pulls content another 20px up via margin-bottom:-20px, and its critical CSS zeroes the hero's padding (`div.text > :first-child`) - so the eyebrow slid under the capsule on phones. Undo the pull and pad the hero enough to clear the capsule's overflow (+~24px breathing room). !important so it survives the critical-CSS reset. */ @media (max-width: 767px) { body.home #header { margin-bottom: 0 !important; } /* :first-child because this clearance is only needed when the hero is the opening section. It now renders BELOW [dd_home_map], which carries its own clearance - an unconditional 44px here would just be a gap between the two sections. */ body.home section.dd-hero:first-child { padding-top: 44px !important; } } .dd-hero__inner { position: relative; z-index: 2; max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(26px, 4vw, 56px); align-items: center; } /* ---------- ambient layers ---------------------------------------------- */ .dd-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Perf: isolate the animated layers so they never trigger layout/paint outside this box (the section's overflow:hidden clips the same area). */ contain: layout paint style; } /* Perf: no `filter: blur()` here - the glow is baked into already-soft radial gradients, so the infinite breathe animation stays compositor-only (transform/opacity) instead of re-blurring a huge layer every frame. */ .dd-hero__aurora { position: absolute; top: -34%; right: -12%; width: 62%; height: 88%; background: radial-gradient(closest-side, rgba(253, 184, 55, 0.30), rgba(253, 184, 55, 0.14) 42%, rgba(253, 184, 55, 0.04) 66%, transparent 78%), radial-gradient(closest-side at 38% 64%, rgba(224, 190, 0, 0.16), rgba(224, 190, 0, 0.05) 55%, transparent 76%); border-radius: 50%; will-change: transform, opacity; animation: dd-hero-breathe 11s ease-in-out infinite; } .dd-hero__aurora--b { top: auto; right: auto; bottom: -46%; left: -14%; width: 56%; height: 80%; opacity: 0.6; animation-delay: -5.5s; } @keyframes dd-hero-breathe { 0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; } 50% { transform: scale(1.12) translateY(3%); opacity: 1; } } /* fine gold mesh, masked to the top so it fades away */ .dd-hero__mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(224, 190, 0, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 190, 0, 0.10) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 0%, #000 0%, transparent 74%); mask-image: radial-gradient(ellipse 90% 78% at 50% 0%, #000 0%, transparent 74%); opacity: 0.55; } /* ---------- copy column -------------------------------------------------- */ .dd-hero__copy { position: relative; text-align: center; } /* Brand-mark medallion sitting behind the CTA/proof-chips area, under the lead paragraph. The image (WebP + PNG fallback, printed as an inline background-image by dd_home_hero_mark() so it is discoverable without waiting on this file) already has its rotation and radial edge-fade baked in offline, so this only ever needs plain opacity compositing - no live CSS mask/rotate/filter on the raster, which is what caused jagged edges. The width below is what sizes the exported files: bump one, re-export the other. z-index:-1 keeps it behind the column's own (normal-flow) text/button content while staying above the hero's further-back aurora/mesh layers. */ .dd-hero__mark { position: absolute; z-index: -1; top: 58%; left: 50%; width: clamp(280px, 30vw, 460px); aspect-ratio: 1 / 1; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.24; pointer-events: none; } html[data-dracula-scheme="dark"] .dd-hero__mark { opacity: 0.26; } @media (max-width: 767px) { .dd-hero__mark { top: 79%; left: 50%; transform: translateX(-50%); width: clamp(200px, 55vw, 300px); opacity: 0.18; } html[data-dracula-scheme="dark"] .dd-hero__mark { opacity: 0.22; } } .dd-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px; color: var(--dd-gold-deep); background: linear-gradient(120deg, rgba(253, 184, 55, 0.14), rgba(224, 190, 0, 0.08)); border: 1px solid var(--dd-hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } html[data-dracula-scheme="dark"] .dd-hero__eyebrow { color: var(--dd-gold-2); box-shadow: none; } /* The green pulsing "live" pip and its sonar ring were removed on 2026-08-27: a coloured status dot is one of the tells the owner reads as a generated page. Nothing consumed .dd-hero__livedot any more either. */ .dd-hero__h1 { margin: 18px 0 14px !important; font-size: clamp(1.72rem, 4.3vw, 3.05rem) !important; line-height: 1.28 !important; font-weight: 800 !important; letter-spacing: -0.4px; color: var(--dd-ink); } .dd-hero__h1 em { font-style: normal; background: var(--dd-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; white-space: nowrap; } /* hand-drawn gold underline under the brand word */ .dd-hero__h1 em::after { content: ""; position: absolute; right: 2%; left: 2%; bottom: -0.14em; height: 0.34em; background: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100%; pointer-events: none; } .dd-hero__lead { max-width: 34em; margin-inline: auto; } .dd-hero__lead p { margin: 0 0 10px; font-size: clamp(0.98rem, 1.4vw, 1.1rem); line-height: 2; color: var(--dd-muted); } .dd-hero__lead a { color: var(--dd-gold-deep); text-decoration: underline; text-decoration-color: var(--dd-hair); text-underline-offset: 3px; } html[data-dracula-scheme="dark"] .dd-hero__lead a { color: var(--dd-gold-2); } /* CTA row */ .dd-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; margin: 22px 0 6px; } .dd-hero__go { position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: "txt arrow" "sub arrow"; align-items: center; column-gap: 12px; padding: 13px 22px; border-radius: 16px; background: var(--dd-grad); color: #241c00 !important; text-decoration: none !important; box-shadow: 0 16px 38px -14px rgba(224, 190, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .dd-hero__go:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -16px rgba(224, 190, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .dd-hero__go:active { transform: translateY(0) scale(0.985); } .dd-hero__go-txt { grid-area: txt; font-size: 1.04rem; font-weight: 800; line-height: 1.35; } .dd-hero__go-sub { grid-area: sub; font-size: 0.74rem; font-weight: 600; opacity: 0.78; } .dd-hero__go-arrow { grid-area: arrow; transition: transform 0.25s ease; } .dd-hero__go:hover .dd-hero__go-arrow { transform: translateX(-4px); } /* Perf: the sheen sweeps via transform (compositor-only) - animating `left` forced a layout pass every frame for the life of the page. */ .dd-hero__go-sheen { position: absolute; top: -40%; bottom: -40%; width: 34%; left: -50%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: translateX(0) skewX(-18deg); will-change: transform; animation: dd-go-sheen 4.6s ease-in-out infinite; pointer-events: none; } @keyframes dd-go-sheen { 0%, 62% { transform: translateX(0) skewX(-18deg); } 86%, 100% { transform: translateX(530%) skewX(-18deg); } } .dd-hero__ghost { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 16px; font-size: 0.95rem; font-weight: 700; color: var(--dd-ink) !important; text-decoration: none !important; background: var(--dd-card); border: 1px solid var(--dd-card-brd); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .dd-hero__ghost:hover { border-color: var(--dd-hair); transform: translateY(-2px); box-shadow: var(--dd-shadow); } .dd-hero__ghost svg { color: var(--dd-gold-deep); } html[data-dracula-scheme="dark"] .dd-hero__ghost svg { color: var(--dd-gold-2); } /* proof chips - fixed 2×2 grid */ .dd-hero__proof { list-style: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; max-width: 30em; margin: 20px 0 0 !important; padding: 0 !important; } /* Higher-specificity selector needed here: the Customizer's Additional CSS carries a legacy `html[dir=rtl] body div.text ul { margin: 0 !important; }` rule (2 classes/attrs + 4 type selectors) that otherwise beats the plain .dd-hero__proof rule above on the class-specificity tier and kills the centering margin. */ .dd-hero .dd-hero__inner .dd-hero__proof { margin: 20px auto 0 !important; } .dd-hero__proof li { margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; } .dd-hero__proof li::marker { content: none; } .dd-hero__proof li::before { content: none !important; } .dd-hero__proof a { display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--dd-ink) !important; text-decoration: none !important; background: var(--dd-tile); border: 1px solid var(--dd-card-brd); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .dd-hero__proof a:hover { border-color: var(--dd-hair); background: linear-gradient(120deg, rgba(253, 184, 55, 0.12), rgba(224, 190, 0, 0.06)); transform: translateY(-1px); } .dd-hero__proof-ic { display: grid; place-items: center; color: var(--dd-gold-deep); } html[data-dracula-scheme="dark"] .dd-hero__proof-ic { color: var(--dd-gold-2); } /* ---------- console column ----------------------------------------------- */ .dd-hero__panel { display: grid; gap: 14px; min-width: 0; } .dd-conv { position: relative; border-radius: var(--dd-radius-lg); padding: clamp(18px, 2.4vw, 26px); background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 235, 0.78)) padding-box, linear-gradient(160deg, rgba(253, 184, 55, 0.85), rgba(224, 190, 0, 0.25) 45%, rgba(253, 184, 55, 0.7)) border-box; border: 1.6px solid transparent; box-shadow: var(--dd-shadow), var(--dd-glow); /* Perf: no backdrop-filter here - the card background is ~92% opaque so the frosted effect was invisible, but blurring the animated aurora behind this big surface cost GPU time on every single frame. */ } html[data-dracula-scheme="dark"] .dd-conv { background: linear-gradient(165deg, rgba(34, 33, 26, 0.92), rgba(22, 22, 18, 0.86)) padding-box, linear-gradient(160deg, rgba(253, 184, 55, 0.65), rgba(224, 190, 0, 0.16) 45%, rgba(253, 184, 55, 0.5)) border-box; } .dd-conv__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; } .dd-conv__title { display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 800; color: var(--dd-ink); } .dd-conv__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #241c00; background: var(--dd-grad); box-shadow: 0 8px 18px -8px rgba(224, 190, 0, 0.8); } /* coin-picker trigger inside the head title */ .dd-conv__coinbtn { appearance: none; display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 2px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--dd-hair); background: linear-gradient(120deg, rgba(253, 184, 55, 0.16), rgba(224, 190, 0, 0.08)); font-family: inherit; font-size: 0.92rem; font-weight: 800; color: var(--dd-gold-deep); cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; } .dd-conv__coinbtn:hover { border-color: var(--dd-gold-2); } .dd-conv__coinbtn:active { transform: scale(0.97); } .dd-conv__coinbtn b { font-weight: 800; } .dd-conv__coinbtn svg { flex: none; opacity: 0.7; } html[data-dracula-scheme="dark"] .dd-conv__coinbtn { color: var(--dd-gold-2); } /* coin units double as picker triggers */ .dd-conv__unit--gold { cursor: pointer; } /* dropdown panel - SOLID background (the tokens are translucent glass and the converter fields showed through the open list) */ .dd-conv__pick { position: absolute; top: 64px; right: clamp(14px, 2vw, 22px); left: clamp(14px, 2vw, 22px); z-index: 30; padding: 10px; border-radius: 16px; background: #fffdf7; border: 1px solid var(--dd-hair); box-shadow: 0 24px 54px -18px rgba(90, 70, 0, 0.4); } html[data-dracula-scheme="dark"] .dd-conv__pick { background: #201f1a; box-shadow: 0 24px 54px -18px rgba(0, 0, 0, 0.75); } .dd-conv__pick-in { width: 100%; box-sizing: border-box; appearance: none; border: 1px solid var(--dd-card-brd) !important; border-radius: 11px; padding: 10px 14px !important; margin: 0 0 8px !important; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--dd-ink); background: var(--dd-tile) !important; outline: none !important; box-shadow: none !important; } .dd-conv__pick-in:focus { border-color: var(--dd-gold-2) !important; box-shadow: 0 0 0 3px rgba(253, 184, 55, 0.18) !important; } .dd-conv__pick-list { max-height: 262px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; } .dd-conv__pick-row { appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 9px 11px; border-radius: 10px; font-family: inherit; font-size: 0.88rem; text-align: right; color: var(--dd-ink); cursor: pointer; transition: background 0.15s ease; } .dd-conv__pick-row:hover { background: linear-gradient(120deg, rgba(253, 184, 55, 0.14), rgba(224, 190, 0, 0.06)); } .dd-conv__pick-row b { font-weight: 700; } .dd-conv__pick-row span { flex: none; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px; color: var(--dd-gold-deep); padding: 2px 8px; border-radius: 999px; background: linear-gradient(120deg, rgba(253, 184, 55, 0.16), rgba(224, 190, 0, 0.08)); border: 1px solid var(--dd-hair); } html[data-dracula-scheme="dark"] .dd-conv__pick-row span { color: var(--dd-gold-2); } .dd-conv__pick-row i { margin-inline-start: auto; font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--dd-muted); direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; } .dd-conv__pick-row.is-voucher b::after { content: "ووچر"; /* Atomic inline: without it Chrome shapes the pill's leading و into the same cursive run as the name, so «پرفکت مانی» lost its final ی. */ display: inline-block; margin-inline-start: 7px; font-size: 0.66rem; font-weight: 800; color: #0c6b3d; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; } html[data-dracula-scheme="dark"] .dd-conv__pick-row.is-voucher b::after { color: #6ee7b7; background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.32); } .dd-conv__pick-empty { margin: 8px 4px !important; font-size: 0.84rem; color: var(--dd-muted); text-align: center; } /* The rate note beside the title. Was a green pulsing dot in a badge: the owner reads a coloured "live" pip as the signature of a generated page (2026-08-27), and it said nothing the rate line under the fields does not already say. Quiet muted micro-type, no dot, no capsule, no colour. */ .dd-conv__live { display: inline-flex; align-items: center; flex: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2px; color: var(--dd-muted); } /* buy / sell tabs. A segmented control: a recessed track with a raised pill on the selected half. The track has to be a shade DEEPER than the panel or the pill has nothing to stand out against - --dd-tile is 62% white on a 92% white panel, which is why the gold gradient was doing this job before. */ .dd-conv__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(28, 24, 10, 0.055); border: 1px solid var(--dd-card-brd); margin-bottom: 16px; } html[data-dracula-scheme="dark"] .dd-conv__tabs { background: rgba(0, 0, 0, 0.28); } .dd-conv__tab { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; padding: 9px 6px; border-radius: 11px; font-family: inherit; font-size: 0.92rem; font-weight: 800; color: var(--dd-muted); cursor: pointer; transition: color 0.2s ease; } .dd-conv__tab.is-on { color: var(--dd-ink); } /* The selected side is a plain raised surface, NOT the gold gradient. One gold object per console - the CTA - so the eye lands on the thing that moves the visitor forward instead of on a toggle they have already answered. */ .dd-conv__tabglow { position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc(50% - 4px); border-radius: 11px; /* Solid, not var(--dd-card): the track (--dd-tile) and the card token are both ~70% white on a near-white panel, so the selected half was indistinguishable from the unselected one. */ background: #ffffff; border: 1px solid var(--dd-card-brd); box-shadow: 0 2px 6px -3px rgba(28, 20, 8, 0.22); transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.1); pointer-events: none; } .dd-conv--sell .dd-conv__tabglow { transform: translateX(calc(-100% - 0px)); } html[data-dracula-scheme="dark"] .dd-conv__tab.is-on { color: var(--dd-ink); } html[data-dracula-scheme="dark"] .dd-conv__tabglow { background: rgba(255, 247, 230, 0.12); border-color: rgba(232, 184, 75, 0.22); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.6); } /* fields */ .dd-conv__field { display: block; } .dd-conv__lbl { display: block; font-size: 0.76rem; font-weight: 700; color: var(--dd-muted); margin: 0 4px 7px; } .dd-conv__box { display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-radius: 14px; background: var(--dd-tile); border: 1px solid var(--dd-card-brd); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dd-conv__box:focus-within { border-color: var(--dd-gold-2); box-shadow: 0 0 0 3px rgba(253, 184, 55, 0.18); } .dd-conv__in, .dd-conv__out { flex: 1; min-width: 0; appearance: none; border: 0 !important; outline: none !important; background: transparent !important; font-family: inherit; font-size: 1.22rem; font-weight: 800; color: var(--dd-ink); padding: 9px 0 !important; margin: 0 !important; box-shadow: none !important; text-align: right; direction: rtl; } .dd-conv__out { display: block; } .dd-conv__box--out { background: linear-gradient(120deg, rgba(253, 184, 55, 0.10), rgba(224, 190, 0, 0.05)); } .dd-conv__unit { flex: none; font-size: 0.78rem; font-weight: 800; color: var(--dd-muted); padding: 5px 11px; border-radius: 999px; background: var(--dd-card); border: 1px solid var(--dd-card-brd); white-space: nowrap; } .dd-conv__unit--gold { color: var(--dd-gold-deep); border-color: var(--dd-hair); background: linear-gradient(120deg, rgba(253, 184, 55, 0.16), rgba(224, 190, 0, 0.08)); } html[data-dracula-scheme="dark"] .dd-conv__unit--gold { color: var(--dd-gold-2); } /* swap button between the fields */ .dd-conv__swap { appearance: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 9px auto; border-radius: 50%; border: 1px solid var(--dd-card-brd); background: var(--dd-tile); color: var(--dd-muted); cursor: pointer; box-shadow: none; transition: transform 0.35s cubic-bezier(0.3, 0.9, 0.3, 1.2), color 0.2s ease, border-color 0.2s ease; } .dd-conv__swap:hover { color: var(--dd-ink); border-color: var(--dd-hair); } .dd-conv__swap.is-spun { transform: rotate(180deg); } html[data-dracula-scheme="dark"] .dd-conv__swap { color: var(--dd-muted); } html[data-dracula-scheme="dark"] .dd-conv__swap:hover { color: var(--dd-ink); } .dd-conv__rate { margin: 14px 4px 14px !important; font-size: 0.84rem; color: var(--dd-muted); } .dd-conv__rate b { color: var(--dd-ink); font-weight: 800; } /* console CTA */ .dd-conv__cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 18px; border-radius: 15px; font-size: 1rem; font-weight: 800; color: #241c00 !important; text-decoration: none !important; background: var(--dd-grad); box-shadow: 0 14px 32px -12px rgba(224, 190, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; } .dd-conv__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -14px rgba(224, 190, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .dd-conv__cta svg { transition: transform 0.25s ease; } .dd-conv__cta:hover svg { transform: translateX(-4px); } .dd-conv__foot { list-style: none !important; display: flex; justify-content: center; flex-wrap: wrap; gap: 7px 8px; margin: 22px 0 0 !important; padding: 0 !important; } .dd-conv__foot li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 6px 12px !important; list-style: none !important; background: var(--dd-tile) !important; border: 1px solid var(--dd-card-brd); border-radius: 999px; font-size: 0.74rem; font-weight: 700; line-height: 1; color: var(--dd-ink); white-space: nowrap; } .dd-conv__foot li::marker { content: none; } .dd-conv__foot li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--dd-grad); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* quick money-page links under the console */ .dd-hero__quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .dd-hero__quick a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 14px; font-size: 0.78rem; font-weight: 700; text-align: center; color: var(--dd-ink) !important; text-decoration: none !important; background: var(--dd-card); border: 1px solid var(--dd-card-brd); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .dd-hero__quick a:hover { border-color: var(--dd-hair); transform: translateY(-2px); box-shadow: var(--dd-shadow); } .dd-hero__quick b { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; color: var(--dd-gold-deep); padding: 2px 9px; border-radius: 999px; background: linear-gradient(120deg, rgba(253, 184, 55, 0.16), rgba(224, 190, 0, 0.08)); border: 1px solid var(--dd-hair); } html[data-dracula-scheme="dark"] .dd-hero__quick b { color: var(--dd-gold-2); } /* ---------- entrance ------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .dd-hero__copy > *:not(.dd-hero__mark), .dd-hero__panel > * { opacity: 0; transform: translateY(16px); animation: dd-hero-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } .dd-hero__copy > :nth-child(1) { animation-delay: 0.05s; } .dd-hero__copy > :nth-child(2) { animation-delay: 0.14s; } .dd-hero__copy > :nth-child(3) { animation-delay: 0.23s; } .dd-hero__copy > :nth-child(4) { animation-delay: 0.32s; } .dd-hero__copy > :nth-child(5) { animation-delay: 0.41s; } .dd-hero__panel > :nth-child(1) { animation-delay: 0.28s; } .dd-hero__panel > :nth-child(2) { animation-delay: 0.44s; } @keyframes dd-hero-in { to { opacity: 1; transform: translateY(0); } } } /* The infinite ambience is decoration - switch it all off for users (and low-power devices) that ask for reduced motion. */ @media (prefers-reduced-motion: reduce) { .dd-hero__aurora, .dd-hero__go-sheen { animation: none !important; } } /* ---------- anchor target for the ghost CTA ------------------------------ */ #dd-prices { scroll-margin-top: 92px; } /* ---------- how-to steps restyle (Yoast block markup stays intact) ------- */ body.home .schema-how-to { max-width: 860px; margin: 8px auto clamp(28px, 4vw, 46px); } body.home .schema-how-to-total-time { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--dd-gold-deep); background: linear-gradient(120deg, rgba(253, 184, 55, 0.14), rgba(224, 190, 0, 0.07)); border: 1px solid var(--dd-hair); border-radius: 999px; padding: 6px 14px; margin: 0 0 10px; } html[data-dracula-scheme="dark"] body.home .schema-how-to-total-time { color: var(--dd-gold-2); } body.home .schema-how-to-description { font-size: 1rem; color: var(--dd-muted); margin: 0 0 22px; } /* NOTE: `#single` + !important on the contested properties is deliberate - the Customizer's Additional CSS carries several older generations of .schema-how-to-step styling (with !important, incl. `right:-35px` on the chip and a `...div.text ol li { padding-right:5px !important }` mobile rule) that would otherwise win the cascade. */ body.home #single .schema-how-to-steps { list-style: none !important; counter-reset: dd-step; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; } body.home #single .schema-how-to-step { counter-increment: dd-step; position: relative; margin: 0 !important; padding: 16px 74px 16px 18px !important; min-height: 0 !important; border-radius: var(--dd-radius) !important; background: var(--dd-card) !important; border: 1px solid var(--dd-card-brd) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.home #single .schema-how-to-step:hover { border-color: var(--dd-hair) !important; transform: translateY(-2px); box-shadow: var(--dd-shadow); } /* numbered gold medallion */ body.home #single .schema-how-to-step::before { content: counter(dd-step); position: absolute; top: 16px !important; right: 16px !important; left: auto !important; inset-inline-end: auto !important; transform: none !important; width: 40px !important; height: 40px !important; display: grid; place-items: center; border-radius: 13px !important; font-size: 1.05rem !important; font-weight: 800; color: #241c00 !important; background: var(--dd-grad) !important; box-shadow: 0 10px 22px -10px rgba(224, 190, 0, 0.85) !important; } /* connector between the step cards */ body.home #single .schema-how-to-step:not(:last-child)::after { content: ""; position: absolute; right: 35px !important; left: auto !important; bottom: -13px; width: 2px !important; height: 13px !important; background: linear-gradient(180deg, var(--dd-gold-2), transparent) !important; } body.home #single .schema-how-to-step-name { display: block; font-size: 1rem !important; font-weight: 800; color: var(--dd-ink) !important; margin: 2px 0 5px !important; } body.home #single .schema-how-to-step-text { margin: 0 !important; font-size: 0.9rem !important; line-height: 1.95; color: var(--dd-muted) !important; } body.home #single .schema-how-to-step-text span { font-family: inherit !important; font-size: inherit !important; } /* the h2 above the block, centred like other section heads */ body.home h2#h-نحوه-خرید-ارز-دیجیتال { text-align: center; font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: clamp(28px, 4vw, 50px) auto 14px; } /* ---------- FAQ accordion -------------------------------------------------- */ .dd-homefaq__list { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; } .dd-homefaq__item { border-radius: var(--dd-radius); background: var(--dd-card); border: 1px solid var(--dd-card-brd); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .dd-homefaq__item[open] { border-color: var(--dd-hair); box-shadow: var(--dd-shadow); } .dd-homefaq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; user-select: none; } .dd-homefaq__item summary::-webkit-details-marker { display: none; } .dd-homefaq__q { font-size: 0.98rem; font-weight: 800; color: var(--dd-ink); line-height: 1.7; } .dd-homefaq__plus { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--dd-gold-deep); background: linear-gradient(120deg, rgba(253, 184, 55, 0.16), rgba(224, 190, 0, 0.08)); border: 1px solid var(--dd-hair); transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.1), background 0.2s ease, color 0.2s ease; } html[data-dracula-scheme="dark"] .dd-homefaq__plus { color: var(--dd-gold-2); } .dd-homefaq__item[open] .dd-homefaq__plus { transform: rotate(225deg); color: #241c00; background: var(--dd-grad); } .dd-homefaq__a { padding: 0 20px 19px; } .dd-homefaq__a p { margin: 0 !important; font-size: 0.9rem; line-height: 2.05; color: var(--dd-muted); } .dd-homefaq__a a { color: var(--dd-gold-deep); font-weight: 700; text-decoration: underline; text-decoration-color: var(--dd-hair); text-underline-offset: 3px; } html[data-dracula-scheme="dark"] .dd-homefaq__a a { color: var(--dd-gold-2); } @media (prefers-reduced-motion: no-preference) { .dd-homefaq__a { animation: dd-faq-open 0.35s ease; } @keyframes dd-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } } /* ---------- responsive ----------------------------------------------------- */ @media (max-width: 980px) { .dd-hero__inner { grid-template-columns: 1fr; gap: 30px; } .dd-hero__panel { max-width: 560px; width: 100%; margin-inline: auto; } } @media (max-width: 560px) { .dd-hero__go, .dd-hero__ghost { width: 100%; justify-content: center; } .dd-hero__go { grid-template-columns: 1fr auto; text-align: right; } .dd-hero__quick { grid-template-columns: repeat(2, 1fr); } .dd-conv__in, .dd-conv__out { font-size: 1.08rem; } body.home #single .schema-how-to-step { padding: 14px 62px 14px 14px !important; } body.home #single .schema-how-to-step::before { width: 36px !important; height: 36px !important; top: 14px !important; right: 14px !important; } body.home #single .schema-how-to-step:not(:last-child)::after { right: 31px !important; } } /* --------------------------------------------------------------------------- * Home page: don't lay out the whole 18,000px document to paint the first * screen. * * The LCP element is the orbit hub's coin mark, at the very top. Chrome had it * downloaded and waiting (Lighthouse: Load Delay 0ms, Load Time 0ms) but could * not paint it for ~2.9s, because every section below it - eight of them, and * a 101-card coin grid - had to be styled and laid out first. That is the * "render delay" that made up 83% of the home page's LCP. * * content-visibility:auto lets Chrome defer style, layout and paint for each * section until it is scrolled near. Every section here starts below the fold * (the first, .dd-hero, begins ~889px down on a 412x823 phone). * * contain-intrinsic-size holds the scrollbar steady: the length is the height * each section actually measured, and `auto` tells Chrome to replace that guess * with the real value once it has rendered the section once. * * NOTE: content-visibility implies paint containment, which CLIPS overflow. Any * section whose decoration deliberately bleeds outside its own box must not be * listed here - verify with a full-page screenshot diff after changing this. * .dd-map is deliberately absent: it holds the LCP and is above the fold. * ------------------------------------------------------------------------ */ body.home .dd-stats{content-visibility:auto;contain-intrinsic-size:auto 1003px;} body.home .ddblh{content-visibility:auto;contain-intrinsic-size:auto 1291px;} body.home .dd-vouchers{content-visibility:auto;contain-intrinsic-size:auto 1740px;} body.home .dd-coins{content-visibility:auto;contain-intrinsic-size:auto 2403px;} body.home .dd-trust{content-visibility:auto;contain-intrinsic-size:auto 1140px;} body.home .dd-homefaq{content-visibility:auto;contain-intrinsic-size:auto 1233px;} /* See the note in dd-giftcard-page.css: print and full-page capture never scroll, so nothing may stay skipped when the page is being printed. */ @media print { body.home .dd-stats, body.home .ddblh, body.home .dd-vouchers, body.home .dd-coins, body.home .dd-trust, body.home .dd-homefaq { content-visibility: visible; } }