/* ====================================================================== AquariumLesson Member Experience System Phase 4A: Low-risk baseline migration Visual direction: - living premium ecosystem operating system - calm biological depth - signal surfaces for member cards and tabs - utility surfaces for forms, settings, account management Scope intentionally excludes Tank Hub, dashboard, profile/public profile, header/search/cart/auth, saved bookmark buttons, modals, and sheets. ====================================================================== */ #alMemberArea { --almx-organic-white: #fbfdfb; --almx-organic-surface: #f6faf7; --almx-signal-surface: color-mix(in srgb, var(--almx-color-surface) 84%, var(--almx-color-moss-light) 16%); --almx-signal-border: color-mix(in srgb, var(--almx-color-moss) 15%, var(--almx-color-border)); --almx-signal-shadow: 0 12px 32px rgba(15, 23, 42, .07); --almx-immersive-bg: radial-gradient(circle at 10% 0%, rgba(92, 168, 146, .18), transparent 32%), radial-gradient(circle at 92% 12%, rgba(44, 107, 74, .12), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,247,.94)); --almx-utility-bg: color-mix(in srgb, var(--almx-organic-white) 92%, var(--almx-color-surface-muted)); --almx-coral: #e06b5f; --almx-amber-soft: #d79231; } #alMemberArea:not(.al-tanks) .woocommerce-MyAccount-content > *, #alMemberArea.alpp-shell--settings #alSettingsPane .al-card, #alMemberArea.alpp-shell--settings #alSettingsPane .al-pane-card, #alMemberArea:not(.al-tanks) .al-account-pane .al-card, #alMemberArea:not(.al-tanks) .al-security-pane .al-card, #alMemberArea:not(.al-tanks) .al-orders-pane .al-card, #alMemberArea:not(.al-tanks) .al-saved-card { border-color: var(--almx-signal-border) !important; background: radial-gradient(circle at 0 0, rgba(92,168,146,.08), transparent 38%), linear-gradient(180deg, var(--almx-organic-white) 0%, var(--almx-organic-white) 72%, var(--almx-organic-surface) 100%) !important; box-shadow: var(--almx-signal-shadow) !important; } #alMemberArea.alpp-shell--settings .alpp-hero--settings { border-color: color-mix(in srgb, var(--almx-color-moss) 18%, var(--almx-color-border)) !important; background: var(--almx-immersive-bg) !important; box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 24px 60px rgba(15,23,42,.10) !important; } #alMemberArea.alpp-shell--settings .alpp-hero--settings::before { background: radial-gradient(circle at 0% 0%, rgba(92,168,146,.16), transparent 30%), radial-gradient(circle at 100% 100%, rgba(44,107,74,.10), transparent 28%) !important; } #alMemberArea.alpp-shell--settings .alpp-hero--settings .alpp-name, #alMemberArea:not(.al-tanks) .al-pane__title:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-pagehead__title:not(:where(#alProfile *)):not(:where(#alDash *)) { color: var(--almx-color-deep-slate) !important; letter-spacing: 0 !important; text-wrap: balance; } #alMemberArea.alpp-shell--settings .alpp-hero--settings .al-view, #alMemberArea:not(.al-tanks) .al-pane__sub:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-card-sub:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-pagehead__sub:not(:where(#alProfile *)):not(:where(#alDash *)) { color: color-mix(in srgb, var(--almx-color-text-muted) 88%, var(--almx-color-moss)) !important; } #alMemberArea:not(.al-tanks) .al-card-head:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea.alpp-shell--settings #alSettingsPane .al-card-head { background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.36)) !important; border-bottom-color: color-mix(in srgb, var(--almx-color-border) 76%, var(--almx-color-moss-light)) !important; } #alMemberArea:not(.al-tanks) .al-card-title:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-row-label:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-field-label:not(:where(#alProfile *)):not(:where(#alDash *)) { color: var(--almx-color-deep-slate) !important; font-weight: 750 !important; letter-spacing: 0 !important; } #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav, #alMemberArea #alSavedTabs.al-context-nav { gap: var(--almx-space-4) !important; border-bottom: 1px solid color-mix(in srgb, var(--almx-color-border) 78%, var(--almx-color-moss-light)) !important; padding-bottom: var(--almx-space-1) !important; } #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item, #alMemberArea #alSavedTabs.al-context-nav [role="tab"] { color: color-mix(in srgb, var(--almx-color-text-muted) 82%, var(--almx-color-deep-slate)) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; } #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item::after, #alMemberArea #alSavedTabs.al-context-nav [role="tab"]::after { height: 3px !important; background: linear-gradient(90deg, var(--almx-color-moss), var(--almx-color-aqua)) !important; } #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item.is-active, #alMemberArea #alSavedTabs.al-context-nav [role="tab"][aria-selected="true"] { color: var(--almx-color-moss) !important; font-weight: 750 !important; } #alMemberArea:not(.al-tanks) .al-saved-topbar, #alMemberArea:not(.al-tanks) .al-saved-controls, #alMemberArea:not(.al-tanks) .al-orders-controls, #alMemberArea:not(.al-tanks) .al-sec-form { color: var(--almx-color-text) !important; } #alMemberArea:not(.al-tanks) #alSavedSearch, #alMemberArea:not(.al-tanks) .al-orders-controls select, #alMemberArea:not(.al-tanks) .al-field-with-addon input { border-color: color-mix(in srgb, var(--almx-color-border) 80%, var(--almx-color-moss-light)) !important; background: var(--almx-utility-bg) !important; } #alMemberArea:not(.al-tanks) #alSavedSearch:focus, #alMemberArea:not(.al-tanks) .al-orders-controls select:focus, #alMemberArea:not(.al-tanks) .al-field-with-addon input:focus { border-color: color-mix(in srgb, var(--almx-color-aqua) 48%, var(--almx-color-border)) !important; box-shadow: var(--almx-glow-water) !important; } #alMemberArea:not(.al-tanks) .al-account-chip:not(:where(#alProfile *)):not(:where(#alDash *)), #alMemberArea:not(.al-tanks) .al-card-tag:not(:where(#alProfile *)):not(:where(#alDash *)) { border-color: color-mix(in srgb, var(--almx-color-moss) 24%, var(--almx-color-border)) !important; background: color-mix(in srgb, var(--almx-color-moss) 8%, #fff) !important; color: var(--almx-color-moss) !important; } #alMemberArea:not(.al-tanks) .al-pane-card--danger:not(:where(#alProfile *)):not(:where(#alDash *)) { border-color: color-mix(in srgb, var(--almx-coral) 28%, var(--almx-color-border)) !important; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--almx-coral) 8%, transparent), transparent 36%), linear-gradient(180deg, var(--almx-organic-white), color-mix(in srgb, var(--almx-coral) 4%, #fff)) !important; } #alMemberArea:not(.al-tanks) .al-btn--danger:not(:where(#alProfile *)):not(:where(#alDash *)) { border-color: color-mix(in srgb, var(--almx-coral) 72%, #7f1d1d) !important; background: linear-gradient(180deg, var(--almx-coral), #c95b50) !important; } #alMemberArea:not(.al-tanks) .al-saved-card .al-loading-hint, #alMemberArea:not(.al-tanks) .al-orders-pane .al-loading-hint { border-color: color-mix(in srgb, var(--almx-color-border) 78%, var(--almx-color-aqua)) !important; background: color-mix(in srgb, var(--almx-color-aqua) 5%, #fff) !important; color: var(--almx-color-text-muted) !important; } @media (hover:hover) { #alMemberArea.alpp-shell--settings #alSettingsPane .al-card:hover, #alMemberArea:not(.al-tanks) .al-account-pane .al-card:hover, #alMemberArea:not(.al-tanks) .al-security-pane .al-card:hover, #alMemberArea:not(.al-tanks) .al-orders-pane .al-card:hover, #alMemberArea:not(.al-tanks) .al-saved-card:hover { border-color: color-mix(in srgb, var(--almx-color-moss) 16%, var(--almx-color-border)) !important; box-shadow: 0 16px 40px rgba(15,23,42,.085) !important; } } @media (max-width: 640px) { #alMemberArea.alpp-shell--settings .alpp-hero--settings { border-radius: var(--almx-radius-xl) !important; } #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav, #alMemberArea #alSavedTabs.al-context-nav { gap: var(--almx-space-3) !important; } } @media (prefers-reduced-motion: reduce) { #alMemberArea.alpp-shell--settings #alSettingsPane .al-card, #alMemberArea:not(.al-tanks) .al-account-pane .al-card, #alMemberArea:not(.al-tanks) .al-security-pane .al-card, #alMemberArea:not(.al-tanks) .al-orders-pane .al-card, #alMemberArea:not(.al-tanks) .al-saved-card { transition: none !important; } } /* ====================================================================== Phase 4F: Member shell / rail / content spacing alignment Scope: - Shared logged-in member shell and rail. - Desktop/tablet horizontal rhythm for migrated non-Tank member pages. - No Tank Hub, header, auth, search, cart, modal, or JS behavior changes. ====================================================================== */ body.account-area { --almx-rail-left: 16px; --almx-rail-w: 260px; --almx-shell-gap-desktop: 28px; --almx-shell-gap-tablet: 22px; --almx-shell-gap: var(--almx-shell-gap-desktop); --almx-shell-content-inset: 0px; --almx-rail-top: calc(var(--al-fixed-top, 64px) + 14px); --almx-rail-bg: radial-gradient(circle at 20% 0%, rgba(92, 168, 146, .10), transparent 34%), linear-gradient(180deg, rgba(253, 255, 253, .98), rgba(247, 251, 248, .96)); --almx-rail-border: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 14%, rgba(15,23,42,.08)); --almx-rail-shadow: 0 18px 44px rgba(20, 34, 27, .085), 0 2px 10px rgba(20, 34, 27, .035), inset 0 1px 0 rgba(255,255,255,.78); --al-rail-left: var(--almx-rail-left); --al-rail-w: var(--almx-rail-w); --al-rail-gap: var(--almx-shell-gap); } #alMemberArea { --almx-shell-gap-desktop: 28px; --almx-shell-gap-tablet: 22px; --almx-shell-gap: var(--almx-shell-gap-desktop); --almx-shell-content-inset: 0px; } @media (min-width: 1024px) and (max-width: 1279px) { body.account-area, body.account-area #alMemberArea { --almx-shell-gap: var(--almx-shell-gap-tablet); } } @media (min-width: 1280px) { body.account-area, body.account-area #alMemberArea { --almx-shell-gap: var(--almx-shell-gap-desktop); } } @media (min-width: 1024px) { body.account-area .e-con.e-parent:has(#alMemberArea) .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile { flex-basis: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important; width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important; min-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important; max-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important; } body.account-area #alMemberArea:not(.al-tanks) { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-inline: 0 !important; } #alMemberArea:has(#alDash.al-dash--premium), #alMemberArea:not(.al-tanks) .alpp-shell--owner, #alMemberArea:not(.al-tanks) #alAchievements.al-achievements, #alMemberArea:not(.al-tanks) #alAccount, #alMemberArea:not(.al-tanks) .woocommerce-MyAccount-content:not(:has(#alDash)):not(:has(#alProfile)):not(:has(#alAchievements)):not(:has(#alAccount)) { padding-inline: var(--almx-shell-content-inset) !important; box-sizing: border-box !important; } #alMemberArea.al-tanks .al-container.al-tanks__container.al-tanks-shell, #alMemberArea.al-tanks .al-tanks-shell { padding-left: var(--tank-canvas-pad-desktop, 20px) !important; padding-right: var(--tank-canvas-pad-desktop, 20px) !important; box-sizing: border-box !important; } #alMemberArea:not(.al-tanks) #alAccount { padding-top: 2.25rem !important; padding-bottom: 3rem !important; } html body.account-area #alRail.al-rail, html body.account-area aside.al-sidebar.al-rail { left: var(--almx-rail-left) !important; top: var(--almx-rail-top) !important; width: var(--almx-rail-w) !important; max-width: var(--almx-rail-w) !important; max-height: calc(100dvh - var(--almx-rail-top) - 16px) !important; padding: 14px !important; border: 1px solid var(--almx-rail-border) !important; border-radius: var(--almx-radius-xl, 24px) !important; background: var(--almx-rail-bg) !important; box-shadow: var(--almx-rail-shadow) !important; color: var(--almx-color-text, #0f172a) !important; backdrop-filter: blur(12px) saturate(1.02) !important; -webkit-backdrop-filter: blur(12px) saturate(1.02) !important; } html body.account-area #alRail.al-rail::before, html body.account-area #alRail.al-rail::after, html body.account-area aside.al-sidebar.al-rail::before, html body.account-area aside.al-sidebar.al-rail::after { content: none !important; display: none !important; } html body.account-area #alRail.al-rail .al-rail-user, html body.account-area aside.al-sidebar.al-rail .al-rail-user { border-bottom-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 12%, rgba(15,23,42,.08)) !important; } html body.account-area #alRail.al-rail .al-rail-user__avatar, html body.account-area aside.al-sidebar.al-rail .al-rail-user__avatar { background: radial-gradient(circle at 30% 18%, rgba(92,168,146,.22), transparent 48%), linear-gradient(135deg, rgba(44,107,74,.12), rgba(255,255,255,.86)) !important; color: var(--almx-color-brand-strong, #24543c) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 3px rgba(44,107,74,.12), 0 8px 18px rgba(20,34,27,.08) !important; } html body.account-area #alRail.al-rail .al-rail-user__name, html body.account-area aside.al-sidebar.al-rail .al-rail-user__name { color: var(--almx-color-text, #0f172a) !important; font-weight: 750 !important; } html body.account-area #alRail.al-rail .al-rail-user__sub, html body.account-area aside.al-sidebar.al-rail .al-rail-user__sub { color: color-mix(in srgb, var(--almx-color-text-muted, #64748b) 86%, var(--almx-color-moss, #2c6b4a)) !important; } html body.account-area #alRail.al-rail .al-divider, html body.account-area aside.al-sidebar.al-rail .al-divider { background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 10%, rgba(15,23,42,.08)) !important; } html body.account-area #alRail.al-rail .al-side-link, html body.account-area aside.al-sidebar.al-rail .al-side-link { min-height: 46px !important; color: color-mix(in srgb, var(--almx-color-text, #0f172a) 86%, var(--almx-color-text-muted, #64748b)) !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; } html body.account-area #alRail.al-rail .al-side-link:hover, html body.account-area #alRail.al-rail .al-side-link:focus-visible, html body.account-area aside.al-sidebar.al-rail .al-side-link:hover, html body.account-area aside.al-sidebar.al-rail .al-side-link:focus-visible { color: var(--almx-color-brand-strong, #24543c) !important; border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 16%, transparent) !important; background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 7%, #fff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important; } html body.account-area #alRail.al-rail .al-side-link.is-active, html body.account-area #alRail.al-rail .al-side-link[aria-current="page"], html body.account-area aside.al-sidebar.al-rail .al-side-link.is-active, html body.account-area aside.al-sidebar.al-rail .al-side-link[aria-current="page"] { color: var(--almx-color-brand-strong, #24543c) !important; border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 22%, transparent) !important; background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--almx-color-aqua, #5ca892) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 10%, #fff), rgba(255,255,255,.78)) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--almx-color-aqua, #5ca892) 72%, var(--almx-color-moss, #2c6b4a)), inset 0 1px 0 rgba(255,255,255,.76) !important; } }