/* ConjuresUp Customer Portal (My Account) */ /* Ensure readable text even if theme forces white text */ .conjuresup-portal{color:#1f2937} .conjuresup-portal p,.conjuresup-portal li,.conjuresup-portal dt,.conjuresup-portal dd{color:inherit} /* Next appointment spotlight */ .conjuresup-next{margin:16px 0} .conjuresup-next .conjuresup-card{padding:16px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:#fff} .conjuresup-next-title{margin:0 0 6px;font-size:1.1em;font-weight:700} .conjuresup-next-meta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 10px} .conjuresup-next-meta .conjuresup-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02);font-size:.92em} .conjuresup-next-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .conjuresup-next-note{margin:10px 0 0;line-height:1.5} .conjuresup-accordion-content{background:#f8fafc;border:1px solid rgba(0,0,0,.06);padding:10px 12px;border-radius:10px} @media (prefers-color-scheme: dark){ .conjuresup-portal{color:rgba(255,255,255,.90)} .conjuresup-next .conjuresup-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)} .conjuresup-next-meta .conjuresup-pill{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)} .conjuresup-accordion-content{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)} } /* * Theme compatibility: ensure the page title (e.g., "My account") doesn't get * squeezed into a narrow column when third-party themes/widgets manipulate * layout around WooCommerce account pages. */ body.woocommerce-account .entry-header, body.woocommerce-account header.entry-header, body.woocommerce-account .entry-title, body.woocommerce-account h1.entry-title { width: 100% !important; max-width: 100% !important; clear: both; } .conjuresup-portal-wrap{margin:1.2em 0} .conjuresup-portal-hero, .conjuresup-card, .conjuresup-faq details, .conjuresup-callout{border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff} .conjuresup-portal-hero{padding:16px 16px;margin:0 0 16px} .conjuresup-portal-hero h2{margin:0 0 6px;font-size:1.35em} .conjuresup-portal-sub{margin:0;color:rgba(0,0,0,.65)} .conjuresup-portal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .conjuresup-portal-actions .button{margin:0} .conjuresup-cards{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:0 0 14px} .conjuresup-card{padding:14px;grid-column:span 12} @media(min-width:900px){ .conjuresup-card{grid-column:span 6} } .conjuresup-card h3{margin:0 0 8px;font-size:1.05em} .conjuresup-meta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0} .conjuresup-meta span{display:inline-flex;align-items:center;gap:6px;color:rgba(0,0,0,.72)} .conjuresup-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px} .conjuresup-tab{padding:6px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.12);text-decoration:none} .conjuresup-tab.is-active{background:rgba(0,0,0,.06)} .conjuresup-muted{color:rgba(0,0,0,.65)} .conjuresup-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.88em;background:rgba(0,0,0,.05)} .conjuresup-badge[data-status="scheduled"]{background:rgba(46,204,113,.14)} .conjuresup-badge[data-status="confirmed"]{background:rgba(46,204,113,.14)} .conjuresup-badge[data-status="completed"]{background:rgba(52,152,219,.14)} .conjuresup-badge[data-status="cancelled"]{background:rgba(231,76,60,.14)} .conjuresup-badge[data-status="blocked"]{background:rgba(155,89,182,.14)} .conjuresup-badge[data-status="reschedule_requested"]{background:rgba(241,196,15,.20)} .conjuresup-callout{padding:14px;margin:0 0 14px;background:rgba(0,0,0,.01)} .conjuresup-callout h3{margin:0 0 6px} .conjuresup-callout p{margin:0 0 10px} .conjuresup-faq{margin-top:18px} .conjuresup-faq details{padding:10px 12px;margin:0 0 10px;background:#fff} .conjuresup-faq summary{cursor:pointer;font-weight:600} .conjuresup-faq details[open] summary{margin-bottom:8px} .conjuresup-orders{display:flex;flex-direction:column;gap:8px} .conjuresup-order-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(0,0,0,.01)} .conjuresup-order-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} /* Dark mode friendly */ @media (prefers-color-scheme: dark){ .conjuresup-portal-hero,.conjuresup-card,.conjuresup-faq details,.conjuresup-callout{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)} .conjuresup-tab{border-color:rgba(255,255,255,.18)} .conjuresup-tab.is-active{background:rgba(255,255,255,.08)} .conjuresup-muted,.conjuresup-portal-sub{color:rgba(255,255,255,.70)} .conjuresup-meta span{color:rgba(255,255,255,.80)} .conjuresup-order-row{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)} } /* Ensure muted text is readable even if theme forces white text */ .conjuresup-portal .conjuresup-muted{color:#222;} @media (prefers-color-scheme: dark){ .conjuresup-portal .conjuresup-muted{color:rgba(255,255,255,.85);} } /* Enchanted portal buttons (no bleed/ghost highlights + consistent text color) */ .conjuresup-portal-actions{isolation:isolate} .conjuresup-portal-actions a.button, .conjuresup-portal-actions a.button:visited, .conjuresup-reco a.button, .conjuresup-reco a.button:visited{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; border-radius:14px; border:1px solid rgba(255, 215, 128, 0.55) !important; background-color:#1a0826 !important; background-image: radial-gradient(circle at top, #3b1d5a, #1a0826) !important; color:#f7e6b8 !important; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none !important; line-height:1; box-shadow: 0 0 12px rgba(191, 123, 255, 0.55), 0 0 24px rgba(255, 215, 128, 0.20), inset 0 0 10px rgba(255, 215, 128, 0.15); overflow:hidden; transform:translateZ(0); will-change:transform, box-shadow, filter; transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background-image .22s ease; } /* Kill theme-added pseudo elements that can create yellow/ghost highlights */ .conjuresup-portal-actions a.button::before, .conjuresup-portal-actions a.button::after{ content:""; position:absolute; inset:0; pointer-events:none; } /* Shimmer sweep (used as ::before) */ .conjuresup-portal-actions a.button::before{ background: linear-gradient(120deg, transparent 30%, rgba(255, 215, 128, 0.28), transparent 70%); opacity:0.45; transform:translateX(-130%); transition:transform .55s ease, opacity .22s ease; } /* Inner aura (used as ::after) — stays inside the button so nothing bleeds left */ .conjuresup-portal-actions a.button::after{ background: radial-gradient(circle at 50% 45%, rgba(255,215,128,0.22), transparent 65%); opacity:0; transition:opacity .22s ease; } /* Hover/focus (NO scaling to avoid flicker) */ .conjuresup-portal-actions a.button:hover, .conjuresup-portal-actions a.button:focus, .conjuresup-reco a.button:hover, .conjuresup-reco a.button:focus{ transform:translateY(-2px); filter:saturate(1.18); z-index:5; background-image: radial-gradient(circle at top, #4b2371, #1a0826) !important; box-shadow: 0 0 18px rgba(191, 123, 255, 0.90), 0 0 32px rgba(255, 215, 128, 0.45), inset 0 0 14px rgba(255, 215, 128, 0.22); outline:none !important; } .conjuresup-portal-actions a.button:hover::before, .conjuresup-portal-actions a.button:focus::before{ transform:translateX(130%); opacity:0.6; } .conjuresup-portal-actions a.button:hover::after, .conjuresup-portal-actions a.button:focus::after{ opacity:1; } /* Active press */ .conjuresup-portal-actions a.button:active, .conjuresup-reco a.button:active{ transform:translateY(0); box-shadow: 0 0 10px rgba(191, 123, 255, 0.70), 0 0 18px rgba(255, 215, 128, 0.35), inset 0 0 12px rgba(255, 215, 128, 0.30); } /* Primary button slightly brighter */ .conjuresup-portal-actions a.button.button-primary{ border-color: rgba(255, 215, 128, 0.75) !important; box-shadow: 0 0 14px rgba(191, 123, 255, 0.75), 0 0 28px rgba(255, 215, 128, 0.28), inset 0 0 12px rgba(255, 215, 128, 0.22); } /* Force Contact Support to same gold text in all states */ .conjuresup-portal-actions a.button, .conjuresup-portal-actions a.button:link, .conjuresup-portal-actions a.button:visited, .conjuresup-portal-actions a.button:hover, .conjuresup-portal-actions a.button:active, .conjuresup-portal-actions a.button:focus{ color:#f7e6b8 !important; } /* My Account layout: Do NOT override WooCommerce / theme account layout globally. We only stabilize our own tool/portal content so the navigation never drops underneath after dynamic renders. */ /* Create a new block formatting context so floated/absolute children can't collapse height */ .woocommerce-account .woocommerce-MyAccount-content .conjuresup-portal-wrap{ display: flow-root; } /* Also stabilize the Tarot results container (AJAX swaps) */ .woocommerce-account .woocommerce-MyAccount-content .conjuresup-tarot-tools #conjuresup-tarot-results{ display: block; } /* Make portal sit left-aligned inside content */ .woocommerce-account .woocommerce-MyAccount-content .conjuresup-portal-wrap{ margin-left:0 !important; margin-right:0 !important; text-align:left; } /* === Portal polish pack: background, cards, and right-side menu styling === */ /* Soft mystical backdrop behind the account area */ .woocommerce-account .woocommerce-MyAccount-content{ background: radial-gradient(800px 220px at 20% 5%, rgba(191,123,255,0.16), transparent 60%), radial-gradient(700px 220px at 80% 20%, rgba(255,215,128,0.10), transparent 60%); padding: 10px 14px; border-radius: 18px; } /* Portal wrap: keep things tidy */ .conjuresup-portal-wrap{ max-width: 980px; } /* Cards: match the enchanted theme */ .conjuresup-card{ border: 1px solid rgba(255, 215, 128, 0.18) !important; background: linear-gradient(180deg, rgba(26,8,38,0.03), rgba(26,8,38,0.00)) !important; border-radius: 16px !important; box-shadow: 0 0 0 1px rgba(191,123,255,0.10) inset, 0 10px 30px rgba(26,8,38,0.06); } .conjuresup-card h3{ letter-spacing: .08em; text-transform: uppercase; } /* Right-side My Account menu: remove bullets and make it feel like part of the design */ .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none !important; margin: 0 !important; padding: 14px !important; border-radius: 16px; background: radial-gradient(circle at top, rgba(59,29,90,0.10), rgba(26,8,38,0.02)); border: 1px solid rgba(255,215,128,0.16); box-shadow: 0 0 16px rgba(191,123,255,0.08), inset 0 0 12px rgba(255,215,128,0.06); } /* Each item */ .woocommerce-account .woocommerce-MyAccount-navigation li{ margin: 0 !important; padding: 0 !important; } /* Links */ .woocommerce-account .woocommerce-MyAccount-navigation a{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 12px; text-decoration: none !important; color: #1f2937; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } /* Hover */ .woocommerce-account .woocommerce-MyAccount-navigation a:hover{ background: rgba(59,29,90,0.06); box-shadow: 0 6px 16px rgba(26,8,38,0.10); transform: translateY(-1px); } /* Active item highlight */ .woocommerce-account .woocommerce-MyAccount-navigation .is-active > a{ background: radial-gradient(circle at top, rgba(75,35,113,0.18), rgba(26,8,38,0.02)); border: 1px solid rgba(255,215,128,0.28); box-shadow: 0 0 14px rgba(191,123,255,0.18), inset 0 0 10px rgba(255,215,128,0.10); color: #1a0826; } /* Tighten spacing around the header image area if the theme is huge */ .woocommerce-account .woocommerce{ align-items:flex-start; } /* Account layout (scoped): keep the Woo menu on the RIGHT for our portal endpoints without disturbing other account pages or theme layouts. */ body.conjuresup-account-tools.woocommerce-account .woocommerce{ display:flex; align-items:flex-start; /* Default to a 2-column layout, but allow shrinking instead of forcing ultra-narrow columns or pushing the page title into odd wrapping. */ flex-wrap:wrap; gap: 32px; width: 100%; box-sizing: border-box; } body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-navigation{ order: 2; /* nav to the right */ flex: 0 0 300px; width: 300px; max-width: 340px; min-width: 260px; } body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content{ order: 1; /* content to the left */ /* Allow the content column to shrink (min-width:0) so the nav can stay on the right in narrower theme content areas. */ flex: 1 1 420px; min-width: 0; } /* On narrower screens, stack for readability */ @media (max-width: 980px){ body.conjuresup-account-tools.woocommerce-account .woocommerce{flex-wrap:wrap;} body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-navigation, body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content{ flex: 1 1 100%; width: 100%; max-width: 100%; } } /* Safety: prevent the theme from squeezing the page title into a narrow column */ body.conjuresup-account-tools.woocommerce-account .entry-title, body.conjuresup-account-tools.woocommerce-account .page-title{ white-space: normal; word-break: normal; } /* Ensure titles/notices span the full content column (prevents weird wrapping) */ body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper, body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-message, body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-error, body.conjuresup-account-tools.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info{ width: 100%; } /* Rune markers for My Account menu (mapped to meaning; Elder Futhark) */ .woocommerce-account .woocommerce-MyAccount-navigation a::before{ content:"ᛟ"; /* default: Othala (home/heritage) */ font-size:14px; line-height:1; opacity:.9; color: rgba(123,47,247,0.88); transform: translateY(-1px); } /* Core Woo endpoints */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard a::before{content:"ᛟ";} /* home */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders a::before{content:"ᚷ";} /* gifts/exchange */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads a::before{content:"ᚹ";} /* joy/abundance */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address a::before, .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--addresses a::before{content:"ᛒ";} /* shelter/home */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--payment-methods a::before{content:"ᚠ";} /* wealth */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account a::before{content:"ᛗ";} /* self/identity */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a::before{content:"ᛏ";} /* boundary/closing */ /* Your plugin endpoint (bookings) - class is based on endpoint slug */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--bookings a::before{content:"ᚱ";} /* journey/path */ /* Common security/2FA endpoint (varies by plugin; cover likely class names) */ .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--wordfence-2fa a::before, .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--wordfence-2fa-setup a::before, .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--two-factor a::before, .woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--2fa a::before{content:"ᛉ";} /* protection */ /* Active item marker in gold */ .woocommerce-account .woocommerce-MyAccount-navigation .is-active > a::before{ color: rgba(255,215,128,0.98); opacity: 1; } /* Session notes editor */ .conjuresup-portal-wrap textarea[name="customer_note"]{ background: rgba(255,255,255,0.9); border: 1px solid rgba(255, 215, 128, 0.28) !important; box-shadow: 0 0 0 1px rgba(191,123,255,0.10) inset; } .conjuresup-portal-wrap textarea[name="customer_note"]:focus{ outline: none !important; box-shadow: 0 0 0 2px rgba(191,123,255,0.18), 0 0 0 1px rgba(255,215,128,0.20) inset; } /* Intake form styling */ .conjuresup-intake-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin: 0 0 12px; } .conjuresup-intake-field{grid-column:span 12} @media(min-width:900px){ .conjuresup-intake-field{grid-column:span 6} .conjuresup-intake-consent{grid-column:span 12} } .conjuresup-intake-field textarea, .conjuresup-intake-field select{ width:100%; max-width:100%; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,215,128,0.25); box-shadow: 0 0 0 1px rgba(191,123,255,0.08) inset; background: rgba(255,255,255,0.92); } /* Subtle spotlight pulse for Next Appointment card when present */ .conjuresup-next .conjuresup-card{ position:relative; } .conjuresup-next .conjuresup-card::after{ content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none; background: radial-gradient(circle at 20% 0%, rgba(255,215,128,0.20), transparent 55%); opacity: .7; } /* Journey + reminder row */ .conjuresup-journey-row{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; margin: 12px 0 18px; } .conjuresup-journey{grid-column: span 12;} .conjuresup-reminder{grid-column: span 12;} @media(min-width: 980px){ .conjuresup-journey{grid-column: span 7;} .conjuresup-reminder{grid-column: span 5;} } .conjuresup-journey-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:8px; } .conjuresup-journey-stats .num{ display:block; font-size: 26px; font-weight: 800; letter-spacing: .02em; color:#1a0826; } .conjuresup-journey-stats .lbl{ display:block; font-size: 12px; opacity:.8; letter-spacing:.06em; text-transform: uppercase; } /* Empty state */ .conjuresup-empty{ margin: 12px 0 0; padding: 16px 16px; border-radius: 14px; border: 1px dashed rgba(255,215,128,0.32); background: radial-gradient(circle at top, rgba(191,123,255,0.12), rgba(26,8,38,0.02)); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.02em; line-height: 1.5; color: rgba(34,19,46,0.92); } .conjuresup-empty::before{ content: "ᛟ"; font-size: 1.15em; opacity: .85; } @media (prefers-color-scheme: dark){ .conjuresup-empty{ color: rgba(255,255,255,.88); border-color: rgba(255,215,128,0.28); background: radial-gradient(circle at top, rgba(191,123,255,0.14), rgba(255,255,255,0.03)); } .conjuresup-empty::before{opacity:.9} } /* Section spacing polish */ .conjuresup-portal h2{ margin: 22px 0 10px; } .conjuresup-portal h2 + .conjuresup-empty, .conjuresup-portal h2 + .conjuresup-card{ margin-top: 0; } /* UX polish: subtle motion + hover + headings */ .conjuresup-portal{opacity:0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease;} .conjuresup-portal.conjuresup-portal-ready{opacity:1; transform:none;} .conjuresup-portal h3{ letter-spacing: .06em; text-transform: uppercase; } .conjuresup-portal h3::before{ content:"ᚠ"; display:inline-block; margin-right:10px; opacity:.55; transform: translateY(-1px); } .conjuresup-card, .conjuresup-panel{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .conjuresup-card:hover, .conjuresup-panel:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(45,12,64,0.10); border-color: rgba(255,215,128,0.30); } .conjuresup-tabs a{ position:relative; padding-bottom:10px; text-decoration:none !important; } .conjuresup-tabs a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background: rgba(191,123,255,0.45); transform: scaleX(0); transform-origin:left; transition: transform .18s ease; } .conjuresup-tabs a:hover::after{transform: scaleX(1);} .conjuresup-tabs a[aria-current="page"]::after, .conjuresup-tabs a.is-active::after{transform: scaleX(1); background: rgba(255,215,128,0.55);} /* Badges */ .conjuresup-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; line-height:1.1; border:1px solid rgba(255,215,128,0.30); background: rgba(191,123,255,0.08); color: rgba(34,19,46,0.92); white-space:nowrap; } .conjuresup-badge.is-ok::before{content:"✓"; opacity:.85;} .conjuresup-badge.is-warn::before{content:"!"; opacity:.85;} /* Pills / chips (crystal correspondences + tags) */ .conjuresup-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; line-height:1.1; border:1px solid rgba(255,215,128,0.22); background: rgba(255,255,255,0.60); color: rgba(34,19,46,0.92); white-space:nowrap; } .conjuresup-pill__icon{opacity:.9;} .conjuresup-pill--chakra{background: rgba(191,123,255,0.08);} .conjuresup-pill--zodiac{background: rgba(255,215,128,0.10);} .conjuresup-pill--element{background: rgba(26,8,38,0.03);} /* Element row accents (subtle left border) */ .conjuresup-crystal-table tr[class^="conjuresup-element-"] td:first-child{ position:relative; } .conjuresup-crystal-table tr[class^="conjuresup-element-"] td:first-child::before{ content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:3px; border-radius:999px; background: rgba(191,123,255,0.30); } .conjuresup-crystal-table tr.conjuresup-element-fire td:first-child::before{background: rgba(231,76,60,0.35);} .conjuresup-crystal-table tr.conjuresup-element-water td:first-child::before{background: rgba(52,152,219,0.35);} .conjuresup-crystal-table tr.conjuresup-element-earth td:first-child::before{background: rgba(46,204,113,0.35);} .conjuresup-crystal-table tr.conjuresup-element-air td:first-child::before{background: rgba(155,89,182,0.28);} .conjuresup-crystal-table tr.conjuresup-element-spirit td:first-child::before, .conjuresup-crystal-table tr.conjuresup-element-ether td:first-child::before, .conjuresup-crystal-table tr.conjuresup-element-aether td:first-child::before{background: rgba(255,215,128,0.40);} @media(max-width:720px){ .conjuresup-reco{justify-content:flex-start} .conjuresup-reco a.button{width:100%; margin-left:0} } /* CTA row (Ready when you are) */ .conjuresup-reco{ margin: 14px 0 0; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255,215,128,0.22); background: radial-gradient(circle at top, rgba(191,123,255,0.10), rgba(26,8,38,0.02)); display: flex; align-items: center; gap: 14px; } .conjuresup-reco-text{ display: flex; flex-direction: column; gap: 6px; min-width: 240px; } .conjuresup-reco-actions{ margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 720px){ .conjuresup-reco{ flex-direction: column; align-items: stretch; } .conjuresup-reco-actions{ margin-left: 0; justify-content: stretch; } .conjuresup-reco-actions a.button{ width: 100%; text-align: center; } } /* WooCommerce My Account (Login/Register) polish */ .woocommerce-account .woocommerce form.woocommerce-form-login, .woocommerce-account .woocommerce form.woocommerce-form-register{ border-radius: 18px; border: 1px solid rgba(255,215,128,0.20); background: rgba(255,255,255,0.75); box-shadow: 0 10px 30px rgba(26,8,38,0.08); } .woocommerce-account .woocommerce form.woocommerce-form-login input[type="text"], .woocommerce-account .woocommerce form.woocommerce-form-login input[type="password"], .woocommerce-account .woocommerce form.woocommerce-form-register input[type="email"], .woocommerce-account .woocommerce form.woocommerce-form-register input[type="text"], .woocommerce-account .woocommerce form.woocommerce-form-register input[type="password"]{ border-radius: 12px; } .woocommerce-account .woocommerce button.button, .woocommerce-account .woocommerce a.button{ border-radius: 12px; } /* Grimoire / Crystal UI */ .conjuresup-grimoire-actions .conjuresup-fav-btn{ border: 1px solid rgba(191,123,255,0.30); background: rgba(191,123,255,0.10); } .conjuresup-note textarea{ border-radius: 12px; border: 1px solid rgba(0,0,0,0.10); background: rgba(255,255,255,0.85); } /* Crystal chart table */ .conjuresup-crystal-table{ width: 100%; border-collapse: collapse; } .conjuresup-crystal-table th, .conjuresup-crystal-table td{ padding: 12px 10px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: top; } .conjuresup-crystal-table th{ font-weight: 700; letter-spacing: .02em; } .conjuresup-crystal-table tr:hover td{ background: rgba(191,123,255,0.06); } /* ========================= Mystical polish — apply sitewide in My Account ========================= */ /* Consistent card look + gentle motion */ .conjuresup-card, .conjuresup-faq details, .woocommerce-account .woocommerce-MyAccount-content > *{ scroll-margin-top: 20px; } @media (prefers-reduced-motion: no-preference){ .conjuresup-card, .conjuresup-faq details, .conjuresup-order-row{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .conjuresup-card:hover, .conjuresup-faq details:hover, .conjuresup-order-row:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.06); border-color: rgba(255, 215, 128, 0.35); } } /* My Account navigation: make the whole menu match the enchanted look */ .woocommerce-account .woocommerce-MyAccount-navigation{ background: linear-gradient(180deg, rgba(90,44,160,.08), rgba(255,215,128,.06)); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 10px; } .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; margin:0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li{ margin:0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:14px; text-decoration:none !important; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.55); color:#111 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{ background: rgba(255,255,255,.85); border-color: rgba(255, 215, 128, 0.40); box-shadow: 0 10px 26px rgba(0,0,0,.06); transform: translateY(-1px); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover{ background: radial-gradient(circle at top, rgba(75,35,113,.18), rgba(255,255,255,.88)); border-color: rgba(191, 123, 255, 0.35); box-shadow: 0 10px 28px rgba(0,0,0,.07); } /* Login / Register: match the portal look */ .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.lost_reset_password{ border:1px solid rgba(0,0,0,.10); border-radius:18px; background: radial-gradient(circle at 10% 0%, rgba(90,44,160,.10), rgba(255,255,255,.92)); padding:18px; box-shadow: 0 8px 22px rgba(0,0,0,.06); } .woocommerce form.woocommerce-form-login input[type="text"], .woocommerce form.woocommerce-form-login input[type="email"], .woocommerce form.woocommerce-form-login input[type="password"], .woocommerce form.woocommerce-form-register input[type="text"], .woocommerce form.woocommerce-form-register input[type="email"], .woocommerce form.woocommerce-form-register input[type="password"], .woocommerce form.lost_reset_password input[type="text"], .woocommerce form.lost_reset_password input[type="email"], .woocommerce form.lost_reset_password input[type="password"], .woocommerce-account .conjuresup-card input[type="text"], .woocommerce-account .conjuresup-card input[type="email"], .woocommerce-account .conjuresup-card input[type="password"], .woocommerce-account .conjuresup-card select{ border-radius:12px; border:1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.92); padding:10px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } .woocommerce form.woocommerce-form-login button.button, .woocommerce form.woocommerce-form-register button.button, .woocommerce form.lost_reset_password button.button{ border-radius:14px; padding:12px 18px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } /* Tables in Crystal Library: improve readability + sticky header on desktop */ .conjuresup-crystal-table{ border-collapse: collapse; width: 100%; } .conjuresup-crystal-table th, .conjuresup-crystal-table td{ border-bottom: 1px solid rgba(0,0,0,.08); padding: 10px 10px; vertical-align: top; } .conjuresup-crystal-table th{ position: sticky; top: 0; /* Softer header that blends into the mystical card background */ background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.30)); backdrop-filter: blur(6px); box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6); z-index: 2; } @media (max-width: 900px){ .woocommerce-account .woocommerce{gap:16px} .woocommerce-account .woocommerce-MyAccount-navigation{width:100%;flex:1 1 100%;order:1} .woocommerce-account .woocommerce-MyAccount-content{order:2} } @media (prefers-color-scheme: dark){ .woocommerce-account .woocommerce-MyAccount-navigation{border-color:rgba(255,255,255,.10)} .woocommerce-account .woocommerce-MyAccount-navigation ul li a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.92)!important} .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{background:rgba(255,255,255,.07)} .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.lost_reset_password{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)} /* Keep Crystal Library header light so it doesn't render as a near-black bar on light themed pages even when the user's OS/browser prefers a dark scheme. */ .conjuresup-crystal-table th{background:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.30)); color: inherit} .conjuresup-crystal-table th, .conjuresup-crystal-table td{border-bottom-color:rgba(255,255,255,.10)} } /* Rune Tools: active state + card layout */ .conjuresup-rune-tools .conjuresup-btn.is-active, .conjuresup-rune-tools button.is-active { background: #111; color: #fff; border-color: #111; } .conjuresup-rune-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; } .conjuresup-rune-card{ background: rgba(255,255,255,0.75); border: 1px solid rgba(120,90,170,0.18); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.10); padding: 14px 14px 12px; } .conjuresup-rune-card__head{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; } .conjuresup-rune-glyph{ width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size: 24px; background: rgba(190,170,230,0.25); border: 1px solid rgba(120,90,170,0.18); } .conjuresup-rune-name{ font-weight: 700; font-size: 16px; line-height: 1.1; } .conjuresup-rune-orientation{ font-size: 12px; opacity: 0.75; margin-top: 2px; } .conjuresup-rune-desc{ font-size: 14px; line-height: 1.45; opacity: 0.9; }