/* Theme Name: Hello Elementor Child Theme URI: https://studiokanvas.com/ Description: Child theme for Hello Elementor — site-specific overrides for africa-diaspora. Use this theme for CSS tweaks, template overrides (including Directories Pro templates), and functions.php hooks. Author: Studio Kanvas Author URI: https://studiokanvas.com Template: hello-elementor Version: 0.1.0 Text Domain: hello-elementor-child */ /* ============================================================ Directories Pro — Plan selection radios styled as cards. The plugin renders the description as a SIBLING of the radio option (not a child), so we style both halves and merge their borders to create one visual card. Scoped to input[name="plan"] via :has() so other radios stay untouched. ============================================================ */ /* Top half: title + radio button */ .drts-form-field-radio-option:has(input[name="plan"]) { background: #fff; border: 1px solid #d9dde3; border-bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 1.1em 1.5em 0.65em 2.75em; margin: 0 !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } /* Bottom half: description sibling */ .drts-form-field-radio-option:has(input[name="plan"]) + .drts-form-field-radio-option-description { background: #fff; border: 1px solid #d9dde3; border-top: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 0 1.5em 1.1em 2.75em; margin: 0 0 1.25em 0; color: #4b5563; font-size: 0.95em; line-height: 1.6; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } /* Shrink the bottom margin on the LAST plan's description so the Next button doesn't float so far away */ .drts-form-field-radio-option-description:not(:has(~ .drts-form-field-radio-option)) { margin-bottom: 0.25em !important; } /* Hover — both halves track together */ .drts-form-field-radio-option:has(input[name="plan"]):hover, .drts-form-field-radio-option:has(input[name="plan"]:hover) + .drts-form-field-radio-option-description { border-color: #8ea0b5; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06); } /* Selected — orange accent matching site palette */ .drts-form-field-radio-option:has(input[name="plan"]:checked), .drts-form-field-radio-option:has(input[name="plan"]:checked) + .drts-form-field-radio-option-description { border-color: #c77a3a; background-color: #fdf5ec; box-shadow: 0 2px 10px rgba(199, 122, 58, 0.12); } .drts-form-field-radio-option:has(input[name="plan"]) > label { font-weight: 600; font-size: 1.05em; line-height: 1.4; color: #1a1a1a; cursor: pointer; margin: 0; } /* Pull the Next button closer to the list */ .drts-form-field:has(input[name="plan"]) { margin-bottom: 0.5em !important; } /* ============================================================ Frontend member navbar — rendered at top of via wp_body_open for logged-in users. Mirrors the brand palette. ============================================================ */ .ad-user-navbar { background: #1a1a1a; color: #fff; font-size: 0.9em; line-height: 1.2; padding: 0.55em 0; } .ad-user-navbar a { color: inherit; text-decoration: none; } .ad-user-navbar__inner { max-width: 1400px; margin: 0 auto; padding: 0 1.5em; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6em 1.25em; } .ad-user-navbar__identity { display: inline-flex; align-items: center; gap: 0.6em; } .ad-user-navbar__username { font-weight: 600; } .ad-user-navbar__status { display: inline-block; padding: 0.18em 0.7em; border-radius: 999px; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #4b5563; color: #fff; line-height: 1.4; } .ad-user-navbar__status--yearly { background: #c77a3a; } .ad-user-navbar__status--monthly { background: #2f7fe0; } .ad-user-navbar__status--free { background: #4b5563; } .ad-user-navbar__links { display: inline-flex; gap: 1.25em; } .ad-user-navbar__link { opacity: 0.85; transition: opacity .15s ease; } .ad-user-navbar__link:hover, .ad-user-navbar__link:focus { opacity: 1; text-decoration: underline; }