/* ========================================= Still Frame — Members Router File: /assets/css/pages/members.css Purpose: - Private landing page for authenticated users - Shows ONLY the products/services the user owns - No upsells, no locked items Expected HTML hooks (used by the CSS below): - - .members-container - .members-hero, .members-hero-left, .members-hero-right, .members-kicker - .members-title, .members-subtitle - .members-status, .members-status-card, .members-status-label, .members-status-value, .members-status-meta - .members-owned, .members-section-title - .members-grid, .members-card, .members-card-icon, .members-card-body, .members-card-title, .members-card-desc, .members-card-cta - .members-empty, .members-empty-title, .members-empty-sub, .members-empty-actions - .members-debug, .members-debug-details, .members-debug-text, .members-debug-actions Notes: - This file styles content only. Header/footer injected components remain controlled by /style.css. ========================================= */ :root{ --m-bg: #070707; --m-bg-2: #0e0e0e; --m-panel: rgba(255,255,255,0.06); --m-panel-2: rgba(255,255,255,0.04); --m-stroke: rgba(255,255,255,0.10); --m-stroke-2: rgba(255,255,255,0.16); --m-text: rgba(255,255,255,0.92); --m-muted: rgba(255,255,255,0.66); --m-dim: rgba(255,255,255,0.46); --m-glow: 0 0 0 1px rgba(255,255,255,0.08), 0 18px 60px rgba(0,0,0,0.62); --m-glow-soft: 0 0 0 1px rgba(255,255,255,0.07), 0 12px 38px rgba(0,0,0,0.56); --m-radius-lg: 14px; --m-radius-md: 12px; --m-radius-sm: 10px; --m-font-display: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --m-font-body: "Times New Roman", Times, serif; --m-max: 1120px; } /* ============================ Page Canvas ============================ */ body.members-page{ background: var(--m-bg); color: var(--m-text); } /* Ensure all core text inside Members content stays light (do NOT touch header/footer) */ body.members-page .site-main h1, body.members-page .site-main h2, body.members-page .site-main h3, body.members-page .site-main h4, body.members-page .site-main h5, body.members-page .site-main h6, body.members-page .site-main p, body.members-page .site-main span, body.members-page .site-main li, body.members-page .site-main small, body.members-page .site-main strong, body.members-page .site-main a{ color: var(--m-text); } /* Links inherit unless explicitly styled */ body.members-page a{ text-decoration-color: rgba(255,255,255,0.35); } body.members-page a:hover{ text-decoration-color: rgba(255,255,255,0.65); } /* ========================= HEADER NAV (MENU TEXT ONLY) - Members page only - Menu text black; hover stays red - Does NOT touch social icons because it only targets .nav-menu ========================= */ body.members-page .nav-menu a, body.members-page .nav-menu a:visited{ color: #000 !important; } body.members-page .nav-menu a:hover, body.members-page .nav-menu a:focus-visible{ color: #d21f1f !important; } /* Subtle vignette + film grain (lightweight, CSS-only) */ body.members-page::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1100px 650px at 50% 0%, rgba(255,255,255,0.08), rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.82) 100%), radial-gradient(900px 700px at 0% 40%, rgba(255,255,255,0.04), rgba(0,0,0,0.78) 70%), radial-gradient(900px 700px at 100% 55%, rgba(255,255,255,0.03), rgba(0,0,0,0.78) 70%); opacity: 1; } body.members-page::after{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.020) 0px, rgba(255,255,255,0.020) 1px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 4px), repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0px, rgba(255,255,255,0.010) 1px, rgba(0,0,0,0.00) 2px, rgba(0,0,0,0.00) 6px); opacity: 0.11; filter: contrast(115%) saturate(90%); } /* Shell wrapper sits above overlays */ body.members-page .members-container{ position: relative; z-index: 2; max-width: var(--m-max); margin: 0 auto; padding: 44px 28px 70px; box-sizing: border-box; } /* Make hero copy centered like the mock; keep actions top-right */ /* HERO (Mock): centered headline block (topbar owns horizontal alignment) */ body.members-page .members-hero{ position: relative; display: block; padding-top: 18px; margin: 26px 0 22px; text-align: center; /* centers MEMBERS / Your Access / subtitle as a block */ } body.members-page .members-hero-left{ width: 100%; margin: 0 auto; text-align: center; } body.members-page .members-hero-right{ position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 12px; } @media (max-width: 767px){ body.members-page .members-hero-right{ position: static; margin-top: 14px; justify-content: center; width: 100%; flex-wrap: wrap; } } /* If your site uses the 100px fixed sidebar layout on desktop */ @media (min-width: 981px){ body.members-page .members-container{ margin-left: 100px; max-width: calc(var(--m-max) + 100px); padding-left: 28px; } } /* ============================ Top Bar ============================ */ body.members-page .members-kicker{ font-family: var(--m-font-display); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.95rem; color: var(--m-muted); } /* ========================================= MEMBERS TOP BAR — ACTION BUTTONS (Mock) Targets ONLY the topbar buttons: .members-topbar .members-meta a Does NOT touch social icons. ========================================= */ body.members-page .members-topbar{ display: flex; align-items: center; justify-content: space-between; gap: 18px; } body.members-page .members-meta{ display: flex; align-items: center; gap: 12px; } body.members-page .members-topbar .members-meta a, body.members-page .members-topbar .members-meta a:visited{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 6px; font-family: var(--m-font-display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.90); text-decoration: none; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 28px rgba(0,0,0,0.45); transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } body.members-page .members-topbar .members-meta a:hover, body.members-page .members-topbar .members-meta a:focus-visible{ background: #ffffff; color: #000000; border-color: #ffffff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(0,0,0,0.10), 0 14px 34px rgba(0,0,0,0.45); } /* Optional: keep keyboard focus clean */ body.members-page .members-topbar .members-meta a:focus-visible{ outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; } /* Members top bar brand */ body.members-page .members-brand{ font-family: var(--m-font-display); letter-spacing: 0.18em; text-transform: uppercase; font-size: 1.8rem; color: var(--m-muted); margin-left: 24px; } /* ========================= Members Divider (Mock) Sits between topbar and hero ========================= */ body.members-page .members-divider{ border: none; height: 1px; margin: 18px 0 28px; background: rgba(255,255,255,0.14); } /* ============================ Header Copy ============================ */ body.members-page .members-title{ font-family: var(--m-font-display); font-size: clamp(2.6rem, 5.2vw, 4.2rem); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.02; margin: 6px auto 10px; color: var(--m-text); text-shadow: 0 18px 70px rgba(0,0,0,0.85); width: 100%; text-align: center; /* animation */ animation: sfFadeInUp 0.9s ease-out both; } body.members-page .members-subtitle{ font-family: var(--m-font-display); font-size: 1.35rem; line-height: 1.65; margin: 0 auto 26px; max-width: 70ch; color: var(--m-muted); text-align: center; } /* Removed: gray divider above the status boxes (not in mock) */ body.members-page .members-hairline{ display: none !important; } /* ========================= Status Row ========================= */ body.members-page .members-status{ display: grid; /* Reduce box width vs full container, and keep them centered */ grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: 18px; margin: 0 auto 26px; max-width: 820px; } body.members-page .members-status-card{ border-radius: var(--m-radius-lg); border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); box-shadow: var(--m-glow-soft); padding: 18px 18px; } body.members-page .members-status-label{ font-family: var(--m-font-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.90rem; color: rgba(255,255,255,0.78); margin-bottom: 10px; } body.members-page .members-status-value{ font-family: var(--m-font-display); font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,0.92); margin-bottom: 6px; } body.members-page .members-status-meta{ font-family: var(--m-font-display); font-size: 0.98rem; line-height: 1.55; color: var(--m-muted); } @media (max-width: 980px){ body.members-page .members-status{ grid-template-columns: 1fr; justify-content: center; max-width: 560px; } } /* ========================= Owned Section Header ========================= */ body.members-page .members-owned{ margin-top: 8px; max-width: 820px; /* match your .members-status max-width */ margin-left: auto; margin-right: auto; padding-left: 60px; /* small nudge; keep subtle */ } body.members-page .members-section-title{ font-family: var(--m-font-display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 1.55rem; color: rgba(255,255,255,0.72); margin: 0 0 14px; } body.members-page .members-section-title::after{ content: ""; display: block; height: 1px; margin-top: 10px; /* Shorten the divider so it doesn’t run too far to the right */ width: min(720px, 92%); margin-left: 0; margin-right: auto; background: rgba(255,255,255,0.10); } /* ============================ Owned Items Grid ============================ */ body.members-page .members-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* Card (anchor or article) */ body.members-page .members-card{ border-radius: var(--m-radius-lg); border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04)); box-shadow: var(--m-glow-soft); overflow: hidden; padding: 18px 18px; text-decoration: none; color: var(--m-text); display: grid; gap: 10px; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } body.members-page .members-card{ grid-template-columns: 1fr; text-align: center; } body.members-page .members-card-icon{ display: grid; place-items: center; height: 70px; } body.members-page .members-card-icon i{ font-size: 2.4rem; color: rgba(255,255,255,0.88); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55)); } body.members-page .members-card-body{ display: grid; gap: 8px; justify-items: center; } body.members-page .members-card-title{ margin: 0; } body.members-page .members-card-desc{ margin: 0; } body.members-page .members-card-cta{ margin: 14px auto 0; } body.members-page .members-card:hover{ border-color: rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05)); transform: translateY(-1px); box-shadow: var(--m-glow); } body.members-page .members-card-kicker{ font-family: var(--m-font-display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.80rem; color: rgba(255,255,255,0.62); } body.members-page .members-card-title{ font-family: var(--m-font-display); letter-spacing: 0.10em; text-transform: uppercase; font-size: 1.35rem; color: var(--m-text); } body.members-page .members-card-desc{ font-family: var(--m-font-display); font-size: 1.05rem; line-height: 1.6; color: var(--m-muted); max-width: 72ch; } /* CTA row inside card */ body.members-page .members-card-cta{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; width: fit-content; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.24); font-family: var(--m-font-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.80rem; color: rgba(255,255,255,0.82); } body.members-page .members-card-cta::after{ content: "›"; opacity: 0.9; transform: translateY(-1px); } /* ========================= Empty State ========================= */ body.members-page .members-empty{ margin-top: 18px; border-radius: var(--m-radius-lg); border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.22); padding: 18px; } body.members-page .members-empty-title{ font-family: var(--m-font-display); letter-spacing: 0.10em; text-transform: uppercase; margin: 0 0 8px; } body.members-page .members-empty-sub{ font-family: var(--m-font-display); color: var(--m-muted); margin: 0 0 14px; } body.members-page .members-empty-actions{ display: flex; flex-wrap: wrap; gap: 12px; } body.members-page .members-empty-actions{ display: none; } /* ========================================= MEMBERS — EMPTY STATE BUTTONS Targets ONLY buttons inside: .members-empty-actions ========================================= */ body.members-page .members-empty-actions .members-btn, body.members-page .members-empty-actions .members-btn:visited{ font-family: var(--m-font-display); /* Oswald */ letter-spacing: 0.01em; text-transform: uppercase; font-weight: 600; } /* ========================= Debug Controls (temporary) ========================= */ body.members-page .members-debug{ margin-top: 18px; } body.members-page .members-debug-details{ border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18); padding: 12px 14px; } body.members-page .members-debug-details summary{ cursor: pointer; font-family: var(--m-font-display); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.80); } body.members-page .members-debug-text{ margin: 12px 0 10px; color: var(--m-muted); font-family: var(--m-font-body); line-height: 1.6; } body.members-page .members-debug-actions{ display: flex; flex-wrap: wrap; gap: 10px; } /* ============================ Footer / Exit Paths ============================ */ body.members-page .members-footer{ font-family: var(--m-font-display); margin-top: 40px; display: flex; justify-content: center; gap: 14px; align-items: center; } body.members-page .members-footer a{ color: rgba(255,255,255,0.78); text-decoration: none; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.22); transition: border-color 140ms ease, background 140ms ease; } body.members-page .members-footer a:hover{ border-color: rgba(255,255,255,0.20); background: rgba(0,0,0,0.32); } /* ============================ Responsive ============================ */ @media (max-width: 980px){ body.members-page .members-grid{ grid-template-columns: 1fr; } } @media (max-width: 767px){ body.members-page .members-container{ padding: 28px 16px 52px; } body.members-page .members-hero-right{ width: 100%; justify-content: flex-start; flex-wrap: wrap; } } /* Motion preferences */ @media (prefers-reduced-motion: reduce){ body.members-page *{ transition: none !important; } } @keyframes sfFadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }