/* Digital10x foundation — scoped reset + reveal safety. Loaded AFTER d10x-source.css. */ /* Scoped reset: restores what Tailwind preflight would normalize, but ONLY inside .d10x-chrome wrappers, so Elementor + admin are untouched. IMPORTANT: wrapped in :where() so these rules carry ZERO specificity (exactly like Tailwind's own preflight). Otherwise `.d10x-chrome a { color: inherit }` (0,1,1) beats utilities like `.text-ink` (0,1,0) and breaks button/link text colors. */ :where(.d10x-chrome), :where(.d10x-chrome) *, :where(.d10x-chrome) *::before, :where(.d10x-chrome) *::after { box-sizing: border-box; } :where(.d10x-chrome) ul, :where(.d10x-chrome) ol { list-style: none; margin: 0; padding: 0; } :where(.d10x-chrome) li { margin: 0; } :where(.d10x-chrome) a { text-decoration: none; color: inherit; } :where(.d10x-chrome) button { margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; line-height: inherit; } :where(.d10x-chrome) img, :where(.d10x-chrome) svg, :where(.d10x-chrome) canvas { display: block; max-width: 100%; } :where(.d10x-chrome) address { font-style: normal; } :where(.d10x-chrome) h1, :where(.d10x-chrome) h2, :where(.d10x-chrome) h3, :where(.d10x-chrome) h4, :where(.d10x-chrome) p, :where(.d10x-chrome) figure, :where(.d10x-chrome) blockquote { margin: 0; } :where(.d10x-chrome) svg { max-width: none; } /* Dark canvas everywhere (matches source body). */ body { background: #0C0B0A; } /* Base text color for reproduced content — mirrors the source `body { color:#F5F0E8 }`. Without this, elements with no explicit text class inherit Elementor's default text color (#333366) instead of cream (e.g. the ghost "See the work" button). */ .d10x-chrome { color: #F5F0E8; } /* Reveal SAFETY: source CSS sets .reveal{opacity:0}; this guarantees they end visible once our unscoped observer (d10x-foundation.js) marks them seen. */ .reveal.d10x-seen { opacity: 1 !important; transform: none !important; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* WP admin-bar offset for the fixed header (lesson L-009). */ body.admin-bar .d10x-site-nav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .d10x-site-nav { top: 46px; } } /* --------------------------------------------------------------------------- Neutralize Hello Elementor parent reset.css defaults. Its reset styles every UNSTYLED link as #c36 (raspberry pink) with #336 (blue) hover, and native buttons/submits with #c36 border+text / #c36 hover bg. These are NOT brand colors and leak onto any link/button without an explicit Tailwind class (blog post body links, native form controls, ghost buttons that carry only a border + no text class like "See the work", etc.). The SOURCE sets `a {}` empty and `body { color:#F5F0E8 }`, so unstyled links INHERIT the cream body text — they are never a fixed colour. We reproduce that with `color: inherit` at element specificity (0,0,1), loaded after the parent reset, so it beats #c36/#336 but still loses to Tailwind utilities (.text-accent etc., 0,1,0) and custom button classes (.magnet/.submit-btn/.slot-btn), leaving every deliberately styled control untouched. NOTE: an earlier pass hard-coded green here, which wrongly tinted cream ghost-button labels green — keep this as `inherit`. */ a { color: inherit; } a:active, a:hover { color: inherit; } [type=button], [type=reset], [type=submit], button { border-color: #2A2620; color: inherit; } /* Hello's reset paints EVERY native button #c36 bg + #fff text on hover/focus. We must override it, but a fixed colour (green/ink) LEAKS: it wins (0,1,1) over any custom button whose own :hover doesn't re-declare bg/colour (.slot-btn, .cal-nav-btn, .filter-pill, .opt-toggle…), repainting them — and .cal-nav-btn (green text, no hover bg) became green-on-green = invisible. So we reset to NEUTRAL (transparent bg + inherited text): each custom button's own .class / .class:hover rules then govern (they out-specify 0,1,1 only for the props they set; for the rest the neutral value ≈ the page-dark / transparent base they already use). Buttons whose bg genuinely flips to a LIGHT colour on hover get dark text re-asserted explicitly below. */ [type=button]:hover, [type=reset]:hover, [type=submit]:hover, button:hover, [type=button]:focus, [type=reset]:focus, [type=submit]:focus, button:focus { background-color: transparent; color: inherit; } /* HOVER VISIBILITY FIX — dark text on buttons whose background flips to a LIGHT colour on hover, so the label never goes light-on-light (invisible): • filled primaries bg → cream (#F5F0E8) • the contact submit