@@ -1317,8 +2170,24 @@ watch(signupStep, async (step) => {
Create an L484 private membership profile, accept the covenant, and receive a
generated membership card.
-
-
Membership includes a locally stored card, encrypted export file, and a signed acknowledgement.
+
+
Membership contribution
+
+ $350
+ per month
+
+
+ {{ membershipBtcText }}
+ at BTC {{ bitcoinUsdText }}
+
+
+
+
+
+
+
+ Complete signup here, then come to the center to pick up your physical member card and pay in person.
+
@@ -1409,7 +2278,7 @@ watch(signupStep, async (step) => {

-
Active
+
{{ cardStatusLabel(createdMember) }}
{{ formatCardNumber(createdMember.membershipId) }}
@@ -1469,25 +2338,23 @@ watch(signupStep, async (step) => {
Back
-
+
+
+
+
diff --git a/src/services/signer.js b/src/services/signer.js
index 81f47be..5bd152f 100644
--- a/src/services/signer.js
+++ b/src/services/signer.js
@@ -15,6 +15,11 @@ export const clearSigner = () => {
localStorage.removeItem(SIGNER_SESSION_KEY)
}
+export const getActiveSignerPublicKey = async () => {
+ if (!activeSigner) return ''
+ return activeSigner.getPublicKey()
+}
+
export const loginWithExtension = async () => {
if (!window.nostr?.getPublicKey) {
throw new Error('No NIP-07 extension found. Try Alby, nos2x, or Primal extension.')
diff --git a/src/style.css b/src/style.css
index ffe603a..87c6326 100644
--- a/src/style.css
+++ b/src/style.css
@@ -12,6 +12,13 @@ body {
background: #000;
}
+.hero-bg-layer {
+ position: absolute;
+ inset: -5rem 0;
+ transform: translate3d(0, var(--hero-bg-y, 0px), 0) scale(1.03);
+ will-change: transform;
+}
+
.hero-fold {
min-height: 100svh;
}
@@ -34,72 +41,29 @@ body {
.intro-header {
animation: rise-in 900ms cubic-bezier(0.19, 1, 0.22, 1) 700ms both;
-}
-
-.animated-header-logo {
- position: relative;
- display: inline-grid;
- place-items: center;
- width: max-content;
- isolation: isolate;
-}
-
-.animated-header-logo img {
- grid-area: 1 / 1;
- transform-origin: 50% 50%;
- animation: header-logo-fill 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
-}
-
-.animated-header-logo::after {
- content: "";
- grid-area: 1 / 1;
- width: 100%;
- height: 145%;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
pointer-events: none;
- background: linear-gradient(
- 105deg,
- transparent 0%,
- transparent 38%,
- rgba(250, 250, 250, 0.72) 48%,
- rgba(242, 169, 0, 0.58) 52%,
- transparent 64%,
- transparent 100%
- );
- filter: blur(0.18rem);
- mix-blend-mode: screen;
- opacity: 0;
- transform: translateX(-135%) skewX(-14deg);
- animation: header-logo-sweep 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
- z-index: 3;
}
-.header-logo-outline {
- grid-area: 1 / 1;
- width: auto;
- height: 1rem;
- overflow: visible;
- fill: none;
- stroke: #fafafa;
- stroke-dasharray: 1;
- stroke-dashoffset: 1;
- stroke-linejoin: round;
- stroke-width: 34;
- filter:
- drop-shadow(0 0 0.18rem rgba(250, 250, 250, 0.62))
- drop-shadow(0 0 0.55rem rgba(242, 169, 0, 0.28));
- opacity: 0;
- animation: header-logo-outline 10s cubic-bezier(0.19, 1, 0.22, 1) infinite;
- z-index: 2;
+.intro-header > div {
+ pointer-events: auto;
}
-@media (min-width: 640px) {
- .header-logo-outline {
- height: 1.25rem;
- }
+.header-logo-button {
+ display: inline-flex;
+ align-items: center;
+ border: 0;
+ background: transparent;
+ padding: 0;
+ color: inherit;
+ cursor: pointer;
}
.intro-copy {
max-width: 100%;
+ opacity: var(--hero-copy-fade, 1);
+ transform: translate3d(0, var(--hero-copy-y, 0px), 0);
+ will-change: transform, opacity;
}
.hero-title {
@@ -122,6 +86,460 @@ body {
animation: cinematic-word-in 1250ms cubic-bezier(0.19, 1, 0.22, 1) 1420ms both;
}
+.benefits-cue {
+ display: inline-flex;
+ width: max-content;
+ align-items: center;
+ align-self: center;
+ gap: 0.78rem;
+ padding-bottom: 0.2rem;
+ color: rgba(250, 250, 250, 0.72);
+ font-size: 0.68rem;
+ font-weight: 900;
+ letter-spacing: 0.22em;
+ text-decoration: none;
+ text-transform: uppercase;
+ animation: benefits-cue-in 900ms cubic-bezier(0.19, 1, 0.22, 1) 1900ms both;
+}
+
+.mobile-swipe-cue {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.8rem;
+ height: 3.25rem;
+}
+
+.hand-icon {
+ width: 2.45rem;
+ height: auto;
+ fill: #fafafa;
+ filter: drop-shadow(0 0 0.55rem rgba(250, 250, 250, 0.18));
+ animation: swipe-up-cue 2s ease-in-out infinite;
+}
+
+.desktop-scroll-cue {
+ display: none;
+ width: 1.1rem;
+ height: 1.72rem;
+ justify-content: center;
+ border: 1px solid rgba(250, 250, 250, 0.42);
+ border-radius: 999px;
+}
+
+.desktop-scroll-cue span {
+ margin-top: 0.34rem;
+ width: 0.2rem;
+ height: 0.42rem;
+ border-radius: 999px;
+ background: #f2a900;
+ animation: mouse-wheel-cue 1500ms ease-in-out infinite;
+}
+
+@media (min-width: 768px) {
+ .mobile-swipe-cue {
+ display: none;
+ }
+
+ .desktop-scroll-cue {
+ display: flex;
+ }
+}
+
+.members-get-section {
+ position: relative;
+ display: grid;
+ min-height: 100svh;
+ align-items: center;
+ overflow: hidden;
+ background:
+ radial-gradient(circle at 16% 50%, rgba(242, 169, 0, 0.08), transparent 24rem),
+ #050505;
+}
+
+.members-get-section::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.6) 72%, rgba(0, 0, 0, 0.95) 100%),
+ linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 22%, transparent 72%, rgba(0, 0, 0, 0.92));
+}
+
+.members-get-section::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+ background-image:
+ linear-gradient(rgba(250, 250, 250, 0.022) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(250, 250, 250, 0.022) 1px, transparent 1px);
+ background-size: 6rem 6rem;
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.46), transparent 70%);
+}
+
+.members-pattern-layer {
+ position: absolute;
+ inset: -11rem 34% -11rem -7rem;
+ z-index: 0;
+ display: grid;
+ grid-template-columns: repeat(12, minmax(1.25rem, 1fr));
+ gap: clamp(0.55rem, 1.2vw, 1rem);
+ align-items: center;
+ justify-items: center;
+ opacity: 0.24;
+ pointer-events: none;
+ transform: translate3d(0, var(--members-pattern-y, 0px), 0) rotate(-24deg) scale(1.06);
+ mask-image:
+ radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.9), transparent 72%),
+ linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.85) 76%, transparent 100%);
+ will-change: transform;
+}
+
+.members-pattern-mark {
+ display: grid;
+ width: clamp(1rem, 2.62vw, 2.1rem);
+ aspect-ratio: 1;
+ place-items: center;
+ opacity: 0.36;
+ transform: rotate(var(--members-pattern-rotate, 0deg)) scale(1);
+ transform-origin: center;
+ will-change: transform;
+}
+
+.members-pattern-mark:nth-child(3n) {
+ opacity: 0.28;
+}
+
+.members-pattern-mark:nth-child(4n) {
+ opacity: 0.24;
+}
+
+.members-pattern-mark img {
+ width: 100%;
+ height: auto;
+ filter: brightness(1.4) saturate(0) drop-shadow(0 0 1.1rem rgba(242, 169, 0, 0.12));
+}
+
+.members-get-inner {
+ position: relative;
+ z-index: 2;
+ display: grid;
+ width: min(100%, 78rem);
+ margin-inline: auto;
+ gap: clamp(1.8rem, 6vw, 5.5rem);
+ padding: clamp(3rem, 7vw, 5.5rem) 1rem;
+}
+
+.members-get-title {
+ max-width: 12ch;
+ font-size: clamp(3rem, 9vw, 6.8rem);
+ font-weight: 950;
+ letter-spacing: 0;
+ line-height: 0.84;
+ text-transform: uppercase;
+}
+
+.members-get-pricing {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem;
+ align-items: center;
+ margin-top: 1.1rem;
+}
+
+.members-get-price {
+ width: fit-content;
+ border: 1px solid rgba(242, 169, 0, 0.34);
+ border-radius: 999px;
+ background: rgba(242, 169, 0, 0.08);
+ padding: 0.58rem 0.82rem;
+ color: rgba(242, 169, 0, 0.95);
+ font-size: 0.78rem;
+ font-weight: 950;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+}
+
+.btc-price-pill {
+ display: inline-flex;
+ width: fit-content;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid rgba(247, 147, 26, 0.55);
+ border-radius: 999px;
+ background: rgba(247, 147, 26, 0.16);
+ padding: 0.58rem 0.82rem;
+ color: #f7931a;
+ font-size: 0.78rem;
+ font-weight: 950;
+ letter-spacing: 0.12em;
+ line-height: 1;
+ text-transform: uppercase;
+ box-shadow:
+ inset 0 1px rgba(255, 213, 139, 0.18),
+ 0 0 1.6rem rgba(247, 147, 26, 0.08);
+}
+
+.members-get-list {
+ display: grid;
+ gap: 0;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.members-get-item {
+ display: grid;
+ grid-template-columns: auto auto 1fr;
+ gap: 1rem;
+ align-items: start;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+ background: transparent;
+ padding: clamp(0.92rem, 2.2vw, 1.28rem) 0;
+}
+
+.members-get-item > span {
+ display: grid;
+ min-width: 2.4rem;
+ color: rgba(242, 169, 0, 0.92);
+ font-size: 0.72rem;
+ font-weight: 900;
+ line-height: 1.9;
+}
+
+.list-icon {
+ display: grid;
+ width: 1.35rem;
+ min-width: 1.35rem;
+ aspect-ratio: 1;
+ place-items: center;
+ margin-top: 0.1rem;
+}
+
+.list-icon svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ fill: none;
+ stroke: #fafafa;
+ stroke-width: 1.8;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
+.members-get-item h3 {
+ margin: 0;
+ color: #fafafa;
+ font-size: clamp(1rem, 2.4vw, 1.35rem);
+ font-weight: 900;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+}
+
+.members-get-item p {
+ margin: 0.42rem 0 0;
+ color: rgba(250, 250, 250, 0.58);
+ font-size: 0.94rem;
+ line-height: 1.62;
+}
+
+@media (min-width: 900px) {
+ .members-get-inner {
+ grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 0.74fr);
+ align-items: center;
+ padding-inline: 3rem;
+ }
+}
+
+@media (max-width: 700px) {
+ .members-get-section {
+ min-height: 100svh;
+ align-items: center;
+ }
+
+ .members-get-inner {
+ padding-block: 5.5rem 3rem;
+ }
+
+ .members-pattern-layer {
+ inset: -7rem 8% -7rem -5rem;
+ grid-template-columns: repeat(6, minmax(2.1rem, 1fr));
+ gap: 0.78rem;
+ opacity: 0.18;
+ }
+
+ .members-pattern-mark {
+ width: 2.1rem;
+ }
+}
+
+.facilities-section {
+ position: relative;
+ display: grid;
+ min-height: 100svh;
+ align-items: center;
+ overflow: hidden;
+ background:
+ radial-gradient(circle at 84% 46%, rgba(247, 147, 26, 0.1), transparent 24rem),
+ linear-gradient(180deg, #050505, #080808 44%, #030303);
+}
+
+.facilities-bg-layer {
+ position: absolute;
+ inset: -5rem 0;
+ z-index: 0;
+ overflow: hidden;
+ transform: translate3d(0, var(--facilities-bg-y, 0px), 0);
+ will-change: transform;
+}
+
+.facilities-bg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0;
+ filter: saturate(0.78) contrast(1.18) brightness(0.55) blur(10px);
+ transform: scale(1.12);
+ will-change: opacity, filter, transform;
+}
+
+.facilities-bg.is-active {
+ animation: bg-cinema 7600ms cubic-bezier(0.19, 1, 0.22, 1) both;
+}
+
+.facilities-section::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background:
+ linear-gradient(rgba(250, 250, 250, 0.018) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(250, 250, 250, 0.018) 1px, transparent 1px);
+ background-size: 5rem 5rem;
+ mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.72), transparent 72%);
+}
+
+.facilities-section::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 50% 50%, rgba(247, 147, 26, 0.12), transparent 34%),
+ linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.56) 52%, rgba(0, 0, 0, 0.84)),
+ radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0, 0, 0, 0.72) 100%),
+ linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 18%, transparent 80%, rgba(0, 0, 0, 0.9));
+}
+
+.facilities-inner {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ width: min(100%, 78rem);
+ margin-inline: auto;
+ gap: clamp(2rem, 7vw, 6rem);
+ padding: clamp(4rem, 8vw, 6rem) 1rem;
+}
+
+.facilities-title {
+ margin: 0;
+ color: #fafafa;
+ font-size: clamp(3.3rem, 10vw, 8rem);
+ font-weight: 950;
+ letter-spacing: 0;
+ line-height: 0.82;
+ text-align: left;
+ text-transform: uppercase;
+}
+
+.facilities-list {
+ display: grid;
+ gap: 0;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.facilities-item {
+ display: grid;
+ grid-template-columns: auto auto 1fr;
+ gap: 1rem;
+ align-items: start;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+ background: transparent;
+ padding: clamp(0.92rem, 2.2vw, 1.28rem) 0;
+}
+
+.facilities-item span {
+ display: grid;
+ min-width: 2.4rem;
+ color: #f7931a;
+ font-size: 0.72rem;
+ font-weight: 900;
+ line-height: 1.9;
+}
+
+.facilities-item h3 {
+ margin: 0;
+ color: #fafafa;
+ font-size: clamp(1rem, 2.4vw, 1.35rem);
+ font-weight: 900;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+}
+
+.facilities-item p {
+ margin: 0.42rem 0 0;
+ color: rgba(250, 250, 250, 0.58);
+ font-size: 0.94rem;
+ font-weight: 400;
+ line-height: 1.62;
+}
+
+.facilities-copy {
+ transform: translate3d(0, var(--facilities-copy-y, 0px), 0);
+ will-change: transform;
+}
+
+.facilities-list {
+ transform: translate3d(0, var(--facilities-list-y, 0px), 0);
+ will-change: transform;
+}
+
+@media (min-width: 900px) {
+ .facilities-inner {
+ grid-template-columns: minmax(26rem, 0.78fr) minmax(0, 0.92fr);
+ align-items: center;
+ padding-inline: 3rem;
+ }
+
+ .facilities-copy {
+ display: grid;
+ justify-items: end;
+ }
+
+ .facilities-title {
+ text-align: right;
+ }
+}
+
+@media (max-width: 899px) {
+ .facilities-copy {
+ order: -1;
+ }
+}
+
+@media (max-width: 700px) {
+ .facilities-section {
+ min-height: 100svh;
+ }
+
+ .facilities-inner {
+ padding-block: 5.5rem 3rem;
+ }
+}
+
.film-grain {
background-image:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 46%, transparent 54%),
@@ -337,25 +755,21 @@ body {
padding-inline: 0.8rem;
}
-.modal-footer-actions {
- display: grid;
- min-width: 0;
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
- gap: 0.75rem;
-}
-
.modal-footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0.75rem;
}
-.modal-footer > button,
-.modal-footer-actions > button {
+.modal-footer > button {
width: 100%;
min-width: 0;
}
+.modal-footer > button:only-child {
+ grid-column: 1 / -1;
+}
+
.validation-message {
margin-top: 1rem;
}
@@ -368,9 +782,17 @@ body {
}
.admin-area {
+ --admin-page-x: clamp(1rem, 4vw, 3rem);
+ --admin-content-gap: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
+.admin-shell {
+ width: 100%;
+ min-height: 100svh;
+ padding: 0 var(--admin-page-x) 2rem;
+}
+
.admin-login-area {
min-height: 100svh;
background:
@@ -444,6 +866,7 @@ body {
.l484-card {
position: relative;
+ container-type: inline-size;
aspect-ratio: 1.586 / 1;
width: min(100%, 31rem);
overflow: hidden;
@@ -567,13 +990,28 @@ body {
0 -1px rgba(35, 14, 5, 0.34);
}
+.card-status.is-pending {
+ border-color: rgba(55, 32, 12, 0.28);
+ color: rgba(63, 35, 10, 0.82);
+}
+
+.card-status.is-active {
+ border-color: rgba(26, 77, 42, 0.28);
+ color: rgba(18, 66, 34, 0.84);
+}
+
+.card-status.is-suspended {
+ border-color: rgba(96, 28, 24, 0.28);
+ color: rgba(82, 24, 18, 0.84);
+}
+
.card-number {
margin: 0;
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- font-size: clamp(1.45rem, 5vw, 2.35rem);
+ font-size: clamp(1.35rem, 6.4cqw, 2.35rem);
font-weight: 800;
- letter-spacing: clamp(0.015em, 0.45vw, 0.055em);
+ letter-spacing: clamp(0.008em, 0.12cqw, 0.045em);
line-height: 1;
text-align: center;
white-space: nowrap;
@@ -618,19 +1056,37 @@ body {
mix-blend-mode: multiply;
}
+.admin-hero {
+ margin-bottom: 1.5rem;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 2rem;
+ align-items: end;
+}
+
.admin-stat {
min-width: 6rem;
- padding: 0.8rem 0.9rem;
+ border: 1px solid rgba(255, 255, 255, 0.09);
+ border-radius: 6px;
+ background: rgba(255, 255, 255, 0.035);
+ padding: 0.78rem 0.9rem;
}
.admin-header {
- position: relative;
- z-index: 20;
- margin-bottom: 3rem;
- display: flex;
+ position: sticky;
+ top: 0;
+ z-index: 120;
+ margin-right: calc(var(--admin-page-x) * -1);
+ margin-bottom: var(--admin-content-gap);
+ margin-left: calc(var(--admin-page-x) * -1);
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
- justify-content: space-between;
gap: 1rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(5, 5, 5, 0.88);
+ padding: 0.65rem var(--admin-page-x);
+ backdrop-filter: blur(20px);
}
.admin-profile {
@@ -734,6 +1190,683 @@ body {
text-transform: uppercase;
}
+.admin-tabbar {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 0.5rem;
+ min-width: 0;
+}
+
+.mobile-admin-tabbar {
+ display: none;
+}
+
+.admin-tab {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 0.55rem;
+ min-width: 0;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ background: transparent;
+ padding: 0.72rem 0.78rem;
+ color: rgba(255, 255, 255, 0.56);
+ font-size: 0.7rem;
+ font-weight: 900;
+ letter-spacing: 0.13em;
+ text-align: left;
+ text-transform: uppercase;
+ transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
+}
+
+.desktop-admin-tabbar .admin-tab {
+ gap: 0.42rem;
+ padding: 0.64rem 0.5rem;
+ font-size: 0.62rem;
+ letter-spacing: 0.1em;
+}
+
+.admin-tab svg {
+ width: 1rem;
+ height: 1rem;
+ fill: none;
+ stroke: currentColor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1.8;
+}
+
+.admin-tab span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.admin-tab strong {
+ display: grid;
+ min-width: 1.45rem;
+ height: 1.45rem;
+ place-items: center;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.08);
+ color: rgba(255, 255, 255, 0.72);
+ font-size: 0.62rem;
+ letter-spacing: 0;
+}
+
+.admin-tab:hover,
+.admin-tab.active {
+ border-color: rgba(242, 169, 0, 0.35);
+ background: rgba(242, 169, 0, 0.12);
+ color: #fafafa;
+}
+
+.admin-tab.active strong {
+ background: #f2a900;
+ color: #050505;
+}
+
+.admin-panel-surface,
+.admin-member-list,
+.admin-member-grid,
+.admin-payments-dashboard,
+.admin-shell > .empty-admin {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.025);
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+}
+
+.admin-payments-dashboard {
+ display: grid;
+ gap: 1rem;
+ border-color: transparent;
+ background: transparent;
+ box-shadow: none;
+}
+
+.payment-metric-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.8rem;
+}
+
+.payment-metric,
+.payment-chart-panel {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ background:
+ radial-gradient(circle at 10% 0%, rgba(242, 169, 0, 0.1), transparent 16rem),
+ rgba(255, 255, 255, 0.025);
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
+}
+
+.payment-metric {
+ padding: 1rem;
+}
+
+.payment-metric span,
+.payment-method-list span {
+ color: rgba(242, 169, 0, 0.82);
+ font-size: 0.64rem;
+ font-weight: 950;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.payment-metric strong {
+ display: block;
+ margin-top: 0.55rem;
+ color: #fafafa;
+ font-size: clamp(1.35rem, 3vw, 2.2rem);
+ font-weight: 950;
+ line-height: 1;
+}
+
+.payment-metric p {
+ margin-top: 0.45rem;
+ color: rgba(255, 255, 255, 0.48);
+ font-size: 0.78rem;
+}
+
+.payment-dashboard-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
+ gap: 1rem;
+}
+
+.payment-chart-panel {
+ padding: 1rem;
+}
+
+.payment-panel-heading {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-bottom: 1.1rem;
+}
+
+.payment-panel-heading h3 {
+ margin: 0;
+ color: #fafafa;
+ font-size: 1rem;
+ font-weight: 950;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
+.payment-bar-chart {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ align-items: end;
+ gap: 0.65rem;
+ min-height: 15rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ padding-top: 1rem;
+}
+
+.payment-day-bar {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ gap: 0.55rem;
+ height: 100%;
+ min-height: 14rem;
+}
+
+.payment-day-bar span {
+ align-self: end;
+ min-height: 0.4rem;
+ border: 1px solid rgba(242, 169, 0, 0.28);
+ border-radius: 6px 6px 2px 2px;
+ background:
+ linear-gradient(180deg, #f2a900, rgba(242, 169, 0, 0.24)),
+ rgba(242, 169, 0, 0.1);
+ box-shadow: 0 12px 42px rgba(242, 169, 0, 0.18);
+}
+
+.payment-day-bar small,
+.payment-method-list small,
+.payment-table small {
+ color: rgba(255, 255, 255, 0.45);
+ font-size: 0.68rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.payment-method-list {
+ display: grid;
+ gap: 1rem;
+}
+
+.payment-method-list article {
+ display: grid;
+ gap: 0.55rem;
+}
+
+.payment-method-list article > div:first-child {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.payment-method-list strong {
+ color: #fafafa;
+ font-size: 1.1rem;
+ font-weight: 950;
+}
+
+.payment-method-track {
+ height: 0.65rem;
+ overflow: hidden;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.08);
+}
+
+.payment-method-track i {
+ display: block;
+ height: 100%;
+ border-radius: inherit;
+ background: #f2a900;
+}
+
+.payment-table {
+ display: grid;
+ border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.payment-table article {
+ display: grid;
+ grid-template-columns: 8rem 1fr auto 6rem;
+ gap: 1rem;
+ align-items: center;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+ padding: 0.9rem 0;
+}
+
+.payment-table span {
+ color: rgba(242, 169, 0, 0.86);
+ font-size: 0.72rem;
+ font-weight: 950;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.payment-table p {
+ margin: 0;
+ color: rgba(255, 255, 255, 0.68);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.78rem;
+}
+
+.payment-table strong {
+ color: #fafafa;
+ font-size: 0.9rem;
+ font-weight: 950;
+}
+
+.payment-choice-modal {
+ width: min(100%, 30rem);
+}
+
+.payment-choice-card {
+ display: grid;
+ width: 100%;
+ gap: 0.35rem;
+ border: 1px solid rgba(250, 250, 250, 0.18);
+ border-radius: 8px;
+ background: rgba(250, 250, 250, 0.055);
+ padding: 1rem;
+ color: #fafafa;
+ text-align: left;
+ transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
+}
+
+.payment-choice-card:hover:not(:disabled) {
+ border-color: rgba(250, 250, 250, 0.42);
+ background: rgba(250, 250, 250, 0.09);
+ transform: translateY(-1px);
+}
+
+.payment-choice-card.bitcoin {
+ border-color: rgba(242, 169, 0, 0.38);
+ background: rgba(242, 169, 0, 0.1);
+}
+
+.payment-choice-card:disabled {
+ cursor: not-allowed;
+ opacity: 0.48;
+}
+
+.payment-choice-card span,
+.bitcoin-invoice-panel .section-kicker {
+ color: #f2a900;
+ font-size: 0.64rem;
+ font-weight: 950;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.payment-choice-card strong,
+.bitcoin-invoice-panel h3 {
+ color: #fafafa;
+ font-size: 1.25rem;
+ font-weight: 950;
+ line-height: 1.05;
+ text-transform: uppercase;
+}
+
+.payment-choice-card small,
+.bitcoin-invoice-panel p {
+ color: rgba(255, 255, 255, 0.56);
+ font-size: 0.86rem;
+ line-height: 1.55;
+}
+
+.bitcoin-invoice-panel {
+ display: grid;
+ justify-items: center;
+ gap: 0.75rem;
+ border: 1px solid rgba(242, 169, 0, 0.26);
+ border-radius: 8px;
+ background:
+ radial-gradient(circle at 50% 0%, rgba(242, 169, 0, 0.18), transparent 16rem),
+ rgba(242, 169, 0, 0.08);
+ padding: 0.85rem;
+}
+
+.invoice-status-row,
+.invoice-actions {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: center;
+ gap: 0.75rem;
+}
+
+.invoice-status-row {
+ justify-content: space-between;
+}
+
+.invoice-status-pill {
+ border: 1px solid rgba(96, 165, 250, 0.34);
+ border-radius: 999px;
+ background: rgba(96, 165, 250, 0.12);
+ padding: 0.42rem 0.62rem;
+ color: rgb(191, 219, 254);
+ font-size: 0.62rem;
+ font-weight: 950;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.invoice-status-pill.processing {
+ border-color: rgba(250, 204, 21, 0.36);
+ background: rgba(250, 204, 21, 0.12);
+ color: rgb(254, 240, 138);
+}
+
+.invoice-status-pill.settled {
+ border-color: rgba(52, 211, 153, 0.36);
+ background: rgba(52, 211, 153, 0.12);
+ color: rgb(167, 243, 208);
+}
+
+.invoice-status-pill.expired {
+ border-color: rgba(248, 113, 113, 0.36);
+ background: rgba(248, 113, 113, 0.12);
+ color: rgb(254, 202, 202);
+}
+
+.invoice-qr-wrap {
+ display: grid;
+ width: min(100%, 13.5rem);
+ aspect-ratio: 1;
+ place-items: center;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ border-radius: 8px;
+ background: #fafafa;
+ padding: 0.55rem;
+}
+
+.invoice-awaiting,
+.invoice-success {
+ display: grid;
+ justify-items: center;
+ gap: 0.45rem;
+ text-align: center;
+}
+
+.invoice-awaiting {
+ grid-template-columns: auto auto;
+ align-items: center;
+}
+
+.invoice-awaiting span {
+ width: 0.58rem;
+ height: 0.58rem;
+ border-radius: 999px;
+ background: #f2a900;
+ box-shadow: 0 0 0 0 rgba(242, 169, 0, 0.5);
+ animation: invoice-pulse 1500ms ease-out infinite;
+}
+
+.invoice-awaiting strong,
+.invoice-success strong {
+ color: #fafafa;
+ font-size: 1rem;
+ font-weight: 950;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.invoice-success {
+ border: 1px solid rgba(52, 211, 153, 0.32);
+ border-radius: 8px;
+ background: rgba(52, 211, 153, 0.09);
+ padding: 1rem;
+}
+
+.invoice-success p {
+ color: rgba(255, 255, 255, 0.62);
+ font-size: 0.82rem;
+ line-height: 1.5;
+}
+
+.invoice-method-tabs {
+ display: grid;
+ width: 100%;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.35rem;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 8px;
+ background: rgba(0, 0, 0, 0.22);
+ padding: 0.3rem;
+}
+
+.invoice-method-tabs button {
+ border: 1px solid transparent;
+ border-radius: 6px;
+ background: transparent;
+ padding: 0.62rem 0.5rem;
+ color: rgba(255, 255, 255, 0.58);
+ font-size: 0.68rem;
+ font-weight: 950;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.invoice-method-tabs button.active {
+ border-color: rgba(242, 169, 0, 0.38);
+ background: rgba(242, 169, 0, 0.14);
+ color: #fafafa;
+}
+
+.invoice-qr-wrap img {
+ width: 100%;
+ height: 100%;
+ image-rendering: pixelated;
+}
+
+.invoice-qr-empty {
+ color: #111;
+ font-size: 0.8rem;
+ font-weight: 900;
+ text-transform: uppercase;
+}
+
+.invoice-data-box {
+ display: grid;
+ width: 100%;
+ gap: 0.35rem;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 8px;
+ background: rgba(0, 0, 0, 0.24);
+ padding: 0.75rem;
+}
+
+.invoice-data-box span {
+ color: rgba(242, 169, 0, 0.82);
+ font-size: 0.62rem;
+ font-weight: 950;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.invoice-data-box code {
+ max-height: 6rem;
+ overflow: auto;
+ overflow-wrap: anywhere;
+ color: rgba(255, 255, 255, 0.76);
+ font-size: 0.72rem;
+ line-height: 1.45;
+}
+
+.invoice-actions {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.5rem;
+}
+
+.invoice-actions > * {
+ display: inline-flex;
+ width: 100%;
+ min-width: 0;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.invoice-help {
+ color: rgba(255, 255, 255, 0.52);
+ font-size: 0.72rem;
+ line-height: 1.55;
+ text-align: center;
+}
+
+.admin-toast {
+ position: fixed;
+ top: 5.2rem;
+ right: var(--admin-page-x);
+ z-index: 260;
+ max-width: min(24rem, calc(100vw - 2rem));
+ border: 1px solid rgba(52, 211, 153, 0.32);
+ border-radius: 8px;
+ background:
+ linear-gradient(135deg, rgba(52, 211, 153, 0.14), transparent 60%),
+ rgba(8, 16, 12, 0.96);
+ padding: 0.85rem 1rem;
+ color: rgb(209, 250, 229);
+ font-size: 0.84rem;
+ font-weight: 800;
+ line-height: 1.4;
+ box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
+ backdrop-filter: blur(18px);
+}
+
+.admin-toast.error {
+ border-color: rgba(248, 113, 113, 0.4);
+ background:
+ linear-gradient(135deg, rgba(248, 113, 113, 0.15), transparent 60%),
+ rgba(20, 8, 8, 0.96);
+ color: rgb(254, 202, 202);
+}
+
+.admin-section-heading {
+ display: flex;
+ align-items: end;
+ justify-content: space-between;
+ gap: 1rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+ padding: 1.2rem;
+}
+
+.admin-section-heading h3 {
+ margin: 0;
+ font-size: 1.2rem;
+ font-weight: 950;
+ line-height: 1;
+ text-transform: uppercase;
+}
+
+.admin-member-list {
+ display: grid;
+}
+
+.admin-member-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 1.1rem;
+ justify-content: stretch;
+ border-color: transparent;
+ background: transparent;
+ box-shadow: none;
+}
+
+.admin-member-tile {
+ position: relative;
+ display: grid;
+ gap: 0.85rem;
+ align-content: start;
+ width: 100%;
+ min-width: 0;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.025);
+ padding: 0.9rem;
+}
+
+.admin-tile-actions {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.55rem;
+ width: 100%;
+}
+
+.admin-tile-actions > button {
+ width: 100%;
+ min-width: 0;
+ min-height: 3.15rem;
+ border-color: rgba(250, 250, 250, 0.36);
+ background: transparent;
+ color: #fafafa;
+ padding: 0.78rem 0.9rem;
+}
+
+.admin-tile-actions > button:only-child {
+ grid-column: 1 / -1;
+}
+
+.admin-tile-actions > .primary-action {
+ border-color: rgba(242, 169, 0, 0.78);
+ background: #f2a900;
+ color: #080808;
+}
+
+.admin-tile-actions > .secondary-action:hover {
+ border-color: rgba(250, 250, 250, 0.62);
+ background: rgba(250, 250, 250, 0.08);
+ color: #fafafa;
+ transform: translateY(-1px);
+}
+
+.admin-scan-field {
+ grid-column: 1 / -1;
+}
+
+.admin-scan-field input {
+ width: 100%;
+ border: 1px solid rgba(255, 255, 255, 0.14);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.06);
+ padding: 0.78rem 0.9rem;
+ color: white;
+ font-size: 0.9rem;
+ outline: none;
+}
+
+.admin-scan-field input:focus {
+ border-color: rgba(242, 169, 0, 0.76);
+}
+
+.admin-member-row {
+ position: relative;
+ display: grid;
+ grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr) auto;
+ gap: 1.2rem;
+ align-items: start;
+ padding: 1.2rem;
+}
+
+.admin-member-row + .admin-member-row {
+ border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+
.admin-card-item {
display: flex;
flex-direction: column;
@@ -741,7 +1874,7 @@ body {
}
.admin-wood-card {
- width: min(100%, 24rem);
+ width: 100%;
box-shadow:
0 18px 54px rgba(0, 0, 0, 0.36),
inset 0 1px rgba(255, 242, 210, 0.34),
@@ -749,8 +1882,8 @@ body {
}
.admin-wood-card .card-number {
- font-size: clamp(0.9rem, 2vw, 1.16rem);
- letter-spacing: 0.015em;
+ font-size: clamp(0.95rem, 5.35cqw, 1.8rem);
+ letter-spacing: clamp(0.004em, 0.08cqw, 0.028em);
}
.admin-wood-card .card-label {
@@ -780,14 +1913,214 @@ body {
font-size: 0.86rem;
}
+.admin-member-details {
+ display: grid;
+ gap: 0.85rem;
+ min-width: 0;
+}
+
+.admin-member-title {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.admin-member-title p {
+ margin: 0;
+ color: #fafafa;
+ font-size: 1rem;
+ font-weight: 900;
+ line-height: 1.1;
+ text-transform: uppercase;
+}
+
+.admin-member-title span {
+ display: block;
+ margin-top: 0.22rem;
+ color: rgba(255, 255, 255, 0.42);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.72rem;
+}
+
+.admin-member-title strong {
+ border: 1px solid rgba(242, 169, 0, 0.26);
+ border-radius: 999px;
+ background: rgba(242, 169, 0, 0.1);
+ padding: 0.34rem 0.55rem;
+ color: rgba(242, 169, 0, 0.92);
+ font-size: 0.62rem;
+ font-weight: 950;
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+.admin-member-meta {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.35rem 1rem;
+ color: rgba(255, 255, 255, 0.54);
+ font-size: 0.82rem;
+}
+
+.admin-member-meta p {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.admin-actions {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.55rem;
+}
+
+.admin-actions.two-actions {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.admin-actions > button {
+ width: 100%;
+ min-width: 0;
+}
+
+.admin-card-issue {
+ display: grid;
+ gap: 0.7rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ padding-top: 0.85rem;
+}
+
+.admin-ops-panel {
+ display: grid;
+ gap: 0.8rem;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.035);
+ padding: 0.9rem;
+}
+
+.admin-ops-actions {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ gap: 0.5rem;
+}
+
+.admin-ops-actions > button {
+ width: 100%;
+ min-width: 0;
+}
+
+.access-log-list {
+ display: grid;
+ gap: 0;
+}
+
+.access-log-row {
+ display: grid;
+ grid-template-columns: 5rem 1fr auto;
+ gap: 1rem;
+ align-items: center;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+ padding: 0.95rem 1.1rem;
+}
+
+.access-log-row span {
+ font-size: 0.72rem;
+ font-weight: 950;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.access-log-row p,
+.access-log-row small {
+ margin: 0;
+ color: rgba(255, 255, 255, 0.58);
+}
+
+.access-log-row p {
+ padding-inline: 0.25rem;
+}
+
+.empty-admin {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.035);
+ padding: 2.2rem;
+ color: rgba(255, 255, 255, 0.55);
+ font-size: 0.95rem;
+ font-weight: 800;
+ text-align: center;
+}
+
+.icon-danger-action {
+ display: grid;
+ min-height: 3.2rem;
+ place-items: center;
+ border: 1px solid rgba(255, 154, 154, 0.36);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.045);
+ color: rgb(255, 176, 176);
+ transition:
+ border-color 180ms ease,
+ background 180ms ease,
+ color 180ms ease,
+ transform 180ms ease;
+}
+
+.icon-danger-action:hover {
+ border-color: rgba(255, 154, 154, 0.64);
+ background: rgba(255, 81, 81, 0.1);
+ color: rgb(255, 205, 205);
+ transform: translateY(-1px);
+}
+
+.icon-danger-action svg {
+ width: 1.15rem;
+ height: 1.15rem;
+ fill: none;
+ stroke: currentColor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1.8;
+}
+
+@media (max-width: 1180px) {
+ .admin-member-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 900px) {
+ .admin-member-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 720px) {
+ .admin-member-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
.admin-card-meta .delete-member {
opacity: 0;
pointer-events: none;
transform: translateY(-2px);
}
+.admin-member-row > .delete-member {
+ opacity: 0;
+ pointer-events: none;
+ transform: translateY(-2px);
+}
+
.admin-card-item:hover .delete-member,
-.admin-card-item:focus-within .delete-member {
+.admin-card-item:focus-within .delete-member,
+.admin-member-row:hover > .delete-member,
+.admin-member-row:focus-within > .delete-member {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
@@ -796,7 +2129,7 @@ body {
.modal-backdrop {
position: fixed;
inset: 0;
- z-index: 50;
+ z-index: 500;
display: flex;
align-items: center;
justify-content: center;
@@ -806,6 +2139,10 @@ body {
}
.signup-modal {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
width: min(100%, 44rem);
max-height: calc(100svh - 2rem);
overflow: hidden;
@@ -847,11 +2184,13 @@ body {
}
.signup-modal.card-modal .card-number {
- font-size: clamp(1rem, 2.1vw, 1.35rem);
- letter-spacing: 0.015em;
+ font-size: clamp(1.35rem, 7.4cqw, 1.55rem);
+ letter-spacing: 0.02em;
}
.backup-modal {
+ position: relative;
+ z-index: 1;
width: min(100%, 34rem);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
@@ -861,6 +2200,8 @@ body {
}
.agreement-modal {
+ position: relative;
+ z-index: 1;
width: min(100%, 40rem);
max-height: calc(100svh - 3rem);
overflow: hidden;
@@ -928,13 +2269,15 @@ body {
}
}
-@media (max-width: 640px) {
+@media (max-width: 820px) {
.agreement-info {
grid-template-columns: 1fr;
}
}
.modal-body {
+ flex: 1 1 auto;
+ min-height: 0;
max-height: min(34rem, calc(100svh - 16rem));
overflow-y: auto;
padding: 1.25rem;
@@ -1008,6 +2351,103 @@ body {
padding: 1rem;
}
+.membership-price-panel {
+ border: 1px solid rgba(242, 169, 0, 0.28);
+ border-radius: 8px;
+ background:
+ linear-gradient(135deg, rgba(242, 169, 0, 0.11), transparent 38%),
+ rgba(255, 255, 255, 0.055);
+ padding: 1rem;
+}
+
+.membership-price-row {
+ display: flex;
+ align-items: baseline;
+ gap: 0.65rem;
+ margin-top: 0.65rem;
+}
+
+.membership-price-row strong {
+ color: #fafafa;
+ font-size: clamp(2.25rem, 11vw, 3.8rem);
+ font-weight: 950;
+ line-height: 0.9;
+}
+
+.membership-price-row span {
+ color: rgba(255, 255, 255, 0.58);
+ font-size: 0.82rem;
+ font-weight: 900;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.membership-btc-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.45rem 0.75rem;
+ margin-top: 0.8rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding-top: 0.8rem;
+}
+
+.membership-btc-row small {
+ color: rgba(255, 255, 255, 0.5);
+ font-size: 0.74rem;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.membership-pickup-card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.9rem;
+ align-items: center;
+ border: 1px solid rgba(247, 147, 26, 0.42);
+ border-radius: 8px;
+ background:
+ radial-gradient(circle at 0% 50%, rgba(247, 147, 26, 0.22), transparent 52%),
+ linear-gradient(135deg, rgba(247, 147, 26, 0.15), rgba(247, 147, 26, 0.055));
+ padding: 1rem;
+ box-shadow:
+ inset 0 1px rgba(255, 213, 139, 0.16),
+ 0 1.4rem 3rem rgba(0, 0, 0, 0.22);
+}
+
+.membership-pickup-card p {
+ margin: 0;
+ color: rgba(255, 244, 226, 0.9);
+ font-size: 1rem;
+ font-weight: 750;
+ line-height: 1.55;
+}
+
+.membership-pickup-icon {
+ display: grid;
+ width: 3rem;
+ aspect-ratio: 1;
+ place-items: center;
+ border: 1px solid rgba(247, 147, 26, 0.42);
+ border-radius: 8px;
+ background: rgba(247, 147, 26, 0.16);
+}
+
+.membership-pickup-icon img {
+ width: 1.55rem;
+ height: 1.9rem;
+ object-fit: contain;
+ filter:
+ invert(63%)
+ sepia(96%)
+ saturate(1188%)
+ hue-rotate(348deg)
+ brightness(104%)
+ contrast(94%)
+ drop-shadow(0 0 0.75rem rgba(247, 147, 26, 0.28));
+}
+
.signature-box {
overflow: hidden;
border: 1px solid rgba(242, 169, 0, 0.28);
@@ -1063,7 +2503,26 @@ body {
line-height: 1.65;
}
-@media (max-width: 640px) {
+@media (max-width: 820px) {
+ .modal-backdrop {
+ padding: 0.5rem;
+ }
+
+ .signup-modal,
+ .backup-modal,
+ .agreement-modal {
+ max-height: calc(100svh - 1rem);
+ }
+
+ .modal-footer {
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ padding: 0.75rem;
+ }
+
+ .modal-body {
+ max-height: calc(100svh - 13rem);
+ }
+
.member-button {
padding: 0.62rem 0.7rem;
font-size: 0.62rem;
@@ -1074,6 +2533,12 @@ body {
padding: 1rem;
}
+ .signup-modal.card-modal .card-midline {
+ left: 0.95rem;
+ right: 0.95rem;
+ transform: translateY(-44%);
+ }
+
.card-number {
letter-spacing: 0.03em;
}
@@ -1083,6 +2548,173 @@ body {
padding: 0.65rem 0.4rem;
}
+ .admin-shell {
+ --admin-page-x: 0.75rem;
+ padding: 0 var(--admin-page-x) 6.25rem;
+ }
+
+ .admin-header {
+ position: relative;
+ z-index: 20;
+ grid-template-columns: auto auto;
+ justify-content: space-between;
+ margin-bottom: 1.25rem;
+ margin-inline: calc(var(--admin-page-x) * -1);
+ padding: 0.8rem 0.75rem;
+ }
+
+ .admin-profile-text {
+ display: none;
+ }
+
+ .desktop-admin-tabbar {
+ display: none;
+ }
+
+ .mobile-admin-tabbar {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 240;
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 4px;
+ border-top: 1px solid rgba(255, 255, 255, 0.13);
+ background: rgba(5, 5, 5, 0.96);
+ padding: 0.45rem 0.35rem calc(0.45rem + env(safe-area-inset-bottom));
+ box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.62);
+ backdrop-filter: blur(22px);
+ }
+
+ .mobile-admin-tab {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+ min-height: 3.65rem;
+ border-radius: 8px;
+ padding: 0.5rem 0.15rem;
+ font-size: 0.46rem;
+ letter-spacing: 0.055em;
+ text-align: center;
+ }
+
+ .mobile-admin-tab svg {
+ width: 1.12rem;
+ height: 1.12rem;
+ }
+
+ .mobile-admin-tab span {
+ max-width: 100%;
+ font-size: 0.5rem;
+ }
+
+ .mobile-admin-tab strong {
+ position: absolute;
+ top: 0.25rem;
+ right: 0.45rem;
+ min-width: 1rem;
+ height: 1rem;
+ font-size: 0.5rem;
+ }
+
+ .admin-panel-surface,
+ .admin-member-list,
+ .admin-member-grid,
+ .admin-shell > .empty-admin {
+ width: 100%;
+ }
+
+ .admin-toast {
+ inset: auto 0.75rem calc(5.25rem + env(safe-area-inset-bottom));
+ max-width: none;
+ }
+
+ .payment-metric-grid,
+ .payment-dashboard-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .payment-metric {
+ padding: 0.9rem;
+ }
+
+ .payment-metric strong {
+ font-size: 1.6rem;
+ }
+
+ .payment-chart-panel {
+ padding: 0.85rem;
+ }
+
+ .payment-panel-heading {
+ display: grid;
+ gap: 0.25rem;
+ margin-bottom: 0.85rem;
+ }
+
+ .payment-bar-chart {
+ gap: 0.42rem;
+ min-height: 9rem;
+ padding-top: 0.75rem;
+ }
+
+ .payment-day-bar {
+ min-height: 8rem;
+ gap: 0.4rem;
+ }
+
+ .payment-day-bar small {
+ font-size: 0.56rem;
+ letter-spacing: 0.03em;
+ }
+
+ .payment-table article {
+ grid-template-columns: 1fr auto;
+ gap: 0.35rem 0.8rem;
+ padding: 0.85rem 0.1rem;
+ }
+
+ .payment-table article p {
+ grid-column: 1 / -1;
+ order: 3;
+ overflow-wrap: anywhere;
+ }
+
+ .payment-table article small {
+ justify-self: end;
+ }
+
+ .invoice-actions {
+ grid-template-columns: 1fr;
+ }
+
+ .admin-member-row {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ padding: 0.85rem;
+ }
+
+ .admin-member-row > .delete-member {
+ position: static;
+ opacity: 1;
+ pointer-events: auto;
+ transform: none;
+ }
+
+ .admin-member-meta,
+ .admin-actions,
+ .admin-actions.two-actions {
+ grid-template-columns: 1fr;
+ }
+
+ .access-log-row {
+ grid-template-columns: 1fr;
+ gap: 0.25rem;
+ padding: 0.9rem;
+ }
+
.modal-footer-actions {
display: grid;
width: 100%;
@@ -1117,6 +2749,16 @@ body {
}
}
+@keyframes invoice-pulse {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(242, 169, 0, 0.48);
+ }
+
+ 100% {
+ box-shadow: 0 0 0 0.75rem rgba(242, 169, 0, 0);
+ }
+}
+
@keyframes copy-in {
0% {
opacity: 0;
@@ -1150,81 +2792,44 @@ body {
}
}
-@keyframes header-logo-outline {
- 0%,
- 68%,
+@keyframes benefits-cue-in {
+ 0% {
+ opacity: 0;
+ transform: translate3d(0, 0.7rem, 0);
+ }
+
100% {
- opacity: 0;
- stroke-dashoffset: 1;
- }
-
- 72% {
- opacity: 0;
- stroke-dashoffset: 1;
- }
-
- 76% {
opacity: 1;
- stroke-dashoffset: 0.98;
- }
-
- 87% {
- opacity: 1;
- stroke-dashoffset: 0;
- }
-
- 93% {
- opacity: 0;
- stroke-dashoffset: 0;
+ transform: translate3d(0, 0, 0);
}
}
-@keyframes header-logo-fill {
+@keyframes swipe-up-cue {
0%,
- 68%,
100% {
opacity: 1;
- filter: none;
- transform: translateZ(0) scale(1);
+ transform: translateY(0);
}
- 72% {
- opacity: 0.48;
- filter: brightness(0.72) blur(0.01rem);
- transform: translateZ(0) scale(0.992);
- }
-
- 86% {
- opacity: 0.28;
- filter: brightness(0.9) blur(0.015rem);
- transform: translateZ(0) scale(0.992);
- }
-
- 94% {
- opacity: 1;
- filter:
- brightness(1.18)
- drop-shadow(0 0 0.45rem rgba(250, 250, 250, 0.42))
- drop-shadow(0 0 0.9rem rgba(242, 169, 0, 0.32));
- transform: translateZ(0) scale(1.012);
+ 50% {
+ opacity: 0.5;
+ transform: translateY(-1.25rem);
}
}
-@keyframes header-logo-sweep {
- 0%,
- 83%,
+@keyframes mouse-wheel-cue {
+ 0% {
+ opacity: 0;
+ transform: translateY(0);
+ }
+
+ 38% {
+ opacity: 1;
+ }
+
100% {
opacity: 0;
- transform: translateX(-135%) skewX(-14deg);
- }
-
- 88% {
- opacity: 0.85;
- }
-
- 94% {
- opacity: 0;
- transform: translateX(135%) skewX(-14deg);
+ transform: translateY(0.62rem);
}
}