/* =========================================================================== * DigiDollar - front-page «منظومه» hub ([dd_home_map]). * Loads AFTER dd-widgets.css and reuses its tokens (--dd-gold, --dd-card, ...). * Light = default - Dark = html[data-dracula-scheme="dark"] * * MOBILE FIRST. The base rules below are the phone layout; the single * `min-width: 860px` block near the end widens the orbit into its landscape * form. There is no second layout - only the ellipse ratios change. * * --------------------------------------------------------------------------- * How the constellation is laid out * --------------------------------------------------------------------------- * One length drives everything: --dd-stage. Every other measurement in the * orbit is a multiple of it, so the whole figure scales as one object. * * node position = centre + (rx·cos θ, ry·sin θ) * * PHP emits --cos/--sin per node and --lm/--ld (centre-to-node distance as a * fraction of the stage) and --am/--ad (that ray's bearing) per wire. CSS * multiplies them by --dd-stage. Switching breakpoint swaps --dd-rx/--dd-ry * and which pair of wire variables is live - nothing else moves. * * Consequences worth keeping: no JS touches layout, nothing recalculates on * rotate or resize, and the figure cannot desynchronise from its wires because * both are derived from the same numbers. * * --------------------------------------------------------------------------- * House rules observed here * --------------------------------------------------------------------------- * - No eyebrow pill anywhere. This section carries no heading at all: the page * H1 belongs to [dd_home_hero], which renders directly below it. * - No coloured accent bar or rail anywhere. Borders are 1px hairlines in * --dd-card-brd / --dd-hair; emphasis comes from the icon disc, the --dd-tile * tint and type weight. * - The wires ARE the drawing, not decoration on a card: they live in their own * sibling layer (.dd-map__wires), never as a ::before on a panel, and they * encode which node is selected. * ======================================================================== */ /* ---------- section shell (full-bleed, matching the other dd sections) ---- */ /* Element-qualified on purpose: the dd-coin-box CTA banner puts a `dd-hero` FLAG CLASS on , and this file follows the same discipline so a bare class selector can never leak onto the body element. */ section.dd-map { position: relative; box-sizing: border-box; /* Scrollbar-safe: 100vw counts the classic scrollbar, so a plain 100vw breakout hangs ~5px past both edges and gives the page a horizontal scrollbar. --dd-sbw is measured once in the (dd_print_scrollbar_width_probe in inc/digidollar-enhancements.php, which explains why CSS cannot do this alone); the 0px fallback keeps the old behaviour where it is unavailable. */ 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, 30px) clamp(16px, 4vw, 40px) clamp(34px, 4.4vw, 68px); color: var(--dd-ink); overflow: hidden; isolation: isolate; } /* ---------- material tokens (section-scoped) ----------------------------- */ /* dd-widgets.css ships ONE flat hairline for the whole site (--dd-card-brd: rgba(255,255,255,.09) in dark) and it dissolves here. Measured on the live page: over this section's near-black ground that edge is about two levels of luminance, so the four crypto cards read as text floating on the page with no card under them, and the console's own edge only survives where the aurora happens to sit behind it. The rest of the site is fine with that token - its cards sit on lighter grounds - so these are LOCAL and nothing outside section.dd-map sees them. The vocabulary is unchanged and still the approved one: a 1px hairline, a background tint, an icon tile, type weight. What is added is MATERIAL - the top-lit fill and the 1px inner highlight that make an edge read as glass rather than as a drawn outline. No coloured rail, no accent bar, no single emphasised edge: the highlight is white/neutral and runs the full perimeter of the shape, the way light does. Gold appears in exactly two places and both are state: --m-brd-lit on hover or focus, and the lit arc/wire that points at the open panel. */ section.dd-map { --m-brd: rgba(28, 22, 4, 0.12); --m-brd-lit: rgba(186, 143, 0, 0.45); --m-tile: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.66)); --m-tile-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(253, 184, 55, 0.16)); --m-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --m-lift: 0 8px 20px -14px rgba(58, 44, 0, 0.38); --m-lift-up: 0 16px 30px -16px rgba(58, 44, 0, 0.48); --m-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)); --m-spill: rgba(253, 184, 55, 0.16); --m-orbit: rgba(150, 112, 0, 0.16); --m-wire: rgba(150, 112, 0, 0.26); --m-arc: rgba(214, 158, 0, 0.85); --m-arc-glow: rgba(253, 184, 55, 0.4); /* A vignette, not a wash: the corners of a full-bleed section are where it stops looking like a stage and starts looking like a rectangle. */ --m-ground: radial-gradient(128% 100% at 50% 36%, rgba(255, 255, 255, 0) 50%, rgba(120, 96, 20, 0.06) 100%); /* Where the coin actually is, as a background position on the full-bleed box. Two things read it - the ground's warm pool in dark mode and, at >=1024, the console's spill - so the section is lit from wherever the constellation happens to be at that breakpoint, and both move together when the layout does. Stacked layouts: above the console, centred. */ --m-lamp: 50% 28%; } /* The theme stacks 80px top margins on .epcl-page-wrapper.content and #single.content at desktop widths. This section carries its own spacing. */ body.home div.epcl-page-wrapper.content, body.home div#single.content { margin-top: 0 !important; } /* Mobile: the theme pulls content up 20px with a negative margin on #header. Undo the pull; the padding that clears the capsule itself is the block below. */ @media (max-width: 767px) { body.home #header { margin-bottom: 0 !important; } } /* ---------- header clearance -------------------------------------------- */ /* The theme's glass capsule overlays the top of the page, and it overhangs its own #header box by ~18px (measured: #header ends at 126, the capsule's deepest child at 144). This section opens with the orbit - no heading to absorb the collision - so the top node ran straight under the capsule. These two rules cover every width; the 768-859 band previously had no rule at all and collided. `html` + `!important` is load-bearing: the site's Additional CSS ships `div.text>:first-child:not(blockquote){padding-top:35px!important}`, which this section matches at specificity (0,2,2) - a TIE with `body.home section.dd-map` - and Additional CSS prints after the enqueued stylesheets, so it wins on source order. `html body.home section.dd-map` is (0,2,3) and settles it. */ /* The measured numbers, phone (390px viewport, 2026-08-13): the section's own border box opens at y=46 and the header's menu-wrapper box closes at y=144, with the last VISIBLE pixel of the auth buttons at ~124. So ~98px of the padding is header clearance and everything above that is air. On a phone that air is expensive - it is subtracted from the one screen the orbit and the console have to share - so it is spent down to the last few px of breathing room. 88px now, not the original 92: the orbit and its console have to close above the fold together (see the console's height in the phone block) and this was the cheapest four of the pixels that bought it. Do not spend more here without re-measuring against the header - the capsule's own box ends at 126 but its auth buttons paint to ~124, and the top node has no heading above it to absorb a collision. */ @media (max-width: 767px) { html body.home section.dd-map { padding-top: 88px !important; padding-bottom: 22px !important; } } @media (min-width: 768px) { html body.home section.dd-map { padding-top: 118px !important; } } .dd-map__inner { position: relative; z-index: 2; max-width: 1180px; margin-inline: auto; /* --dd-stage lives HERE, on the common parent, not on .dd-map__stage. The console is the stage's SIBLING and needs the same number to match its height; declared on the stage it simply does not exist on the console, `calc(var(--dd-stage) * .93)` is invalid there, and the height silently falls back to auto. Same class of bug as the wire variables - a custom property is only visible to the element that declares it and its descendants. */ --dd-stage: min(330px, calc(100vw - 34px)); } /* ---------- theme reset -------------------------------------------------- */ /* The theme styles this column as editorial prose: an inline