/* ============================================================================ Summer Privileges — member-facing styles The two dashboards share one layout; everything that differs between Gold and Platinum is a custom property set on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-script: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive; /* Gold leaf — used for hexagons and rules on BOTH tiers */ --gold-1: #fff4d0; --gold-2: #f3cf72; --gold-3: #d19f33; --gold-4: #8a5f16; --gold-line: linear-gradient(90deg, transparent, #d4a33c 15%, #ffe9a8 50%, #d4a33c 85%, transparent); --gold-metal: linear-gradient(180deg, #fff6d5 0%, #f6d98a 20%, #c9922f 46%, #7d5410 56%, #e9c874 74%, #fff6dc 100%); --radius: 14px; --maxw: 1080px; } /* --- Gold tier: black + amber glow --------------------------------------- */ body[data-tier="gold"] { --bg-base: #050403; --bg-deep: #0b0805; --accent: #f0b23f; --accent-soft: rgba(240, 178, 63, 0.14); --heading: #f7b93f; --glow-1: radial-gradient(120% 80% at 5% 18%, rgba(255, 176, 48, 0.30) 0%, transparent 55%); --glow-2: radial-gradient(90% 60% at 95% 62%, rgba(255, 150, 20, 0.18) 0%, transparent 60%); --glow-3: radial-gradient(70% 50% at 50% 105%, rgba(255, 190, 70, 0.12) 0%, transparent 60%); } /* --- Platinum tier: deep navy + electric blue ---------------------------- */ body[data-tier="platinum"] { --bg-base: #01040f; --bg-deep: #04102f; --accent: #f0b23f; --accent-soft: rgba(90, 150, 255, 0.16); --heading: #f5c04a; --glow-1: radial-gradient(120% 80% at 8% 16%, rgba(40, 110, 255, 0.38) 0%, transparent 58%); --glow-2: radial-gradient(95% 65% at 92% 55%, rgba(20, 70, 220, 0.30) 0%, transparent 62%); --glow-3: radial-gradient(80% 55% at 45% 102%, rgba(60, 130, 255, 0.20) 0%, transparent 60%); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: #f2eee6; background-color: var(--bg-base, #060606); background-image: var(--glow-1), var(--glow-2), var(--glow-3); background-attachment: fixed; background-repeat: no-repeat; -webkit-font-smoothing: antialiased; line-height: 1.6; } img { max-width: 100%; display: block; } a { color: var(--accent); } .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } /* ---------------------------------------------------------------- topbar The nav must stay on one line at every width. If it is allowed to wrap, the buttons stack and the bar grows wider than the phone viewport, which pushes the whole page into horizontal overflow. So: the brand shrinks (and its text ellipses, then disappears), and the nav never wraps. */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .topbar .brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; /* lets the label truncate instead of forcing width */ flex: 1 1 auto; } .topbar .brand img { width: 42px; flex: none; } .topbar .brand span { font-weight: 600; letter-spacing: 0.08em; font-size: 0.82rem; text-transform: uppercase; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar nav { display: flex; align-items: center; gap: 0.5rem; flex: none; /* the buttons keep their size; the brand gives way */ flex-wrap: nowrap; } .topbar nav .btn { white-space: nowrap; } /* ------------------------------------------------------------------- hero */ .hero { text-align: center; padding: 3.5rem 0 2rem; } .hero .script { font-family: var(--font-script); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } .hero .tier-word { font-size: clamp(3rem, 12vw, 7.5rem); font-weight: 800; letter-spacing: 0.06em; line-height: 1; margin: 0.25rem 0 0; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75)); } .hero .member-word { font-family: var(--font-script); font-size: clamp(1.6rem, 4.5vw, 2.8rem); line-height: 1; margin: -0.35em 0 0; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .tagline { font-style: italic; color: #d9d3c8; margin: 1.5rem 0 0.75rem; letter-spacing: 0.02em; } .welcome-line { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; font-weight: 700; letter-spacing: 0.05em; } .welcome-line .name-pill { display: inline-block; padding: 0.35rem 1.4rem; border: 1px solid var(--accent); border-radius: 999px; font-weight: 500; letter-spacing: 0.03em; background: rgba(0, 0, 0, 0.35); } .hero .member-code { margin-top: 0.6rem; font-size: 1.15rem; letter-spacing: 0.06em; color: #efe7d6; } .hero .member-code strong { font-weight: 600; } .hero .welcome-note { max-width: 34rem; margin: 1.75rem auto 0; color: #cfc9be; font-size: 0.95rem; } .status-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent-soft); border: 1px solid rgba(255, 255, 255, 0.14); } .status-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #38d17a; box-shadow: 0 0 8px #38d17a; } /* --------------------------------------------------------------- sections */ .section { padding: 3rem 0; } .section-title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; color: var(--heading); margin: 0 0 2rem; line-height: 1.15; } .section-title.center { text-align: center; } .rule { height: 2px; border: 0; background: var(--gold-line); margin: 2.5rem 0; } .rule.diamond { position: relative; overflow: visible; } .rule.diamond::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); } /* --------------------------------------------- privileges (hex zigzag) --- */ .privileges { position: relative; display: flex; flex-direction: column; gap: 1.1rem; } /* The vertical gold rod the hexagons are threaded onto */ .privileges::before { content: ''; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 50%; width: 7px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(180deg, var(--gold-4), var(--gold-2) 30%, var(--gold-1) 50%, var(--gold-2) 70%, var(--gold-4)); box-shadow: 0 0 14px rgba(240, 178, 63, 0.45); } .privilege { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.9rem; z-index: 1; } .hexagon { width: 74px; height: 82px; display: grid; place-items: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(150deg, var(--gold-4) 0%, var(--gold-2) 28%, var(--gold-1) 45%, var(--gold-3) 62%, var(--gold-4) 100%); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7); } .hexagon span { display: grid; place-items: center; width: 58px; height: 64px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: #0a0806; color: #fff; font-weight: 700; font-size: 1.05rem; } .privilege .label { padding: 0.85rem 1.25rem; border: 1px solid rgba(240, 178, 63, 0.55); border-radius: 999px; background: rgba(10, 8, 6, 0.72); backdrop-filter: blur(2px); font-size: 0.95rem; line-height: 1.35; max-width: 22rem; /* hug the rod instead of stretching across the column */ } .privilege .label .desc { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: #b9b2a6; } /* Odd items sit left of the rod, even items right of it. justify-self pulls each pill up against the hexagon, the way the printed artwork stacks them. */ .privilege:nth-child(odd) .label { grid-column: 1; text-align: right; justify-self: end; } .privilege:nth-child(even) .label { grid-column: 3; text-align: left; justify-self: start; } .privilege .hexagon { grid-column: 2; } @media (max-width: 640px) { /* On a phone the zigzag becomes a single column with the rod on the left. */ .privileges::before { left: 37px; } .privilege { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; } .privilege .hexagon { grid-column: 1; grid-row: 1; } .privilege:nth-child(odd) .label, .privilege:nth-child(even) .label { grid-column: 2; grid-row: 1; text-align: left; justify-self: stretch; max-width: none; } } /* ------------------------------------------------------------ prose block */ .prose { color: #ccc6ba; max-width: 46rem; } .prose p { margin: 0 0 1rem; } .panel { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius); background: rgba(255, 255, 255, 0.035); padding: 1.75rem; } .invite-list { list-style: none; margin: 1rem 0 0; padding: 0; } .invite-list li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: #ded8cc; } .invite-list li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 7px; height: 7px; transform: rotate(45deg); background: var(--accent); } /* --------------------------------------------------------- announcements */ .announcements { display: grid; gap: 1rem; } .announcement { border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(255, 255, 255, 0.04); padding: 1.1rem 1.35rem; } .announcement h3 { margin: 0 0 0.35rem; font-size: 1.02rem; } .announcement .when { font-size: 0.75rem; color: #9b9488; letter-spacing: 0.05em; } .announcement p { margin: 0.4rem 0 0; color: #c6c0b5; font-size: 0.92rem; white-space: pre-line; } /* ------------------------------------------------------------- card panel */ .card-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; } @media (max-width: 720px) { .card-cta { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: #f4efe4; font: inherit; font-weight: 500; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.1); } .btn-gold { background: linear-gradient(140deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1) 55%, var(--gold-3)); color: #2a1c02; font-weight: 600; border-color: transparent; box-shadow: 0 8px 22px rgba(210, 160, 60, 0.28); } .btn-gold:hover { box-shadow: 0 10px 28px rgba(210, 160, 60, 0.42); } .btn-block { width: 100%; } /* ----------------------------------------------------------------- footer */ .site-footer { text-align: center; padding: 3.5rem 0 2.5rem; color: #8e887d; font-size: 0.85rem; } .site-footer .closing { color: var(--accent); font-size: 0.95rem; margin-bottom: 0.75rem; } /* ============================================================ login page */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; --glow-1: radial-gradient(110% 70% at 12% 10%, rgba(255, 176, 48, 0.22) 0%, transparent 55%); --glow-2: radial-gradient(90% 60% at 90% 80%, rgba(255, 150, 20, 0.14) 0%, transparent 60%); --accent: #f0b23f; --heading: #f7b93f; background-color: #050403; } .login-card { width: min(100%, 27rem); text-align: center; border: 1px solid rgba(240, 178, 63, 0.28); border-radius: 20px; background: rgba(12, 10, 7, 0.86); padding: 2.5rem 2rem; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); } .login-card .logo { width: 130px; margin: 0 auto 1.5rem; } .login-card h1 { font-size: 1.35rem; margin: 0 0 0.4rem; } .login-card .script { font-family: var(--font-script); font-size: 2rem; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; } /* ------------------------------------------------------------------ forms */ label { display: block; text-align: left; margin-bottom: 1rem; font-size: 0.85rem; color: #cfc9be; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], input[type="tel"], select, textarea { width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #f4efe4; font: inherit; font-size: 0.92rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent, #f0b23f); box-shadow: 0 0 0 3px rgba(240, 178, 63, 0.16); } textarea { resize: vertical; min-height: 6rem; } select option { background: #14100a; } .pin-input { letter-spacing: 0.75em; text-align: center; font-size: 1.5rem !important; padding-left: 0.75em !important; } /* ----------------------------------------------------------------- alerts */ .alert { border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.9rem; text-align: left; } .alert ul { margin: 0; padding-left: 1.2rem; } .alert-error { background: rgba(220, 60, 60, 0.14); border: 1px solid rgba(220, 60, 60, 0.5); color: #ffc9c9; } .alert-ok { background: rgba(60, 190, 110, 0.13); border: 1px solid rgba(60, 190, 110, 0.45); color: #bff5d6; } .alert-warn { background: rgba(240, 178, 63, 0.13); border: 1px solid rgba(240, 178, 63, 0.45); color: #ffe2ab; } .alert-info { background: rgba(90, 150, 255, 0.13); border: 1px solid rgba(90, 150, 255, 0.4); color: #cfe0ff; } .muted { color: #948d81; font-size: 0.82rem; } /* --------------------------------------------------------- install page */ .install-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; background-color: #050403; --accent: #f0b23f; } .install-card { width: min(100%, 34rem); border: 1px solid rgba(240, 178, 63, 0.25); border-radius: 20px; background: rgba(12, 10, 7, 0.9); padding: 2.5rem; } .install-logo { width: 110px; margin: 0 auto 1.5rem; } .install-card h1 { text-align: center; font-size: 1.3rem; margin: 0 0 1.5rem; } .install-card code { background: rgba(255, 255, 255, 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.85em; } /* ============================================================ phone layout */ /* Nothing may push the page sideways on a phone — a horizontal scroll clips the hero and the nav, which is exactly what a wrapping topbar used to cause. */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 560px) { .wrap { width: min(100% - 1.75rem, var(--maxw)); } .topbar { gap: 0.6rem; padding: 0.8rem 0; } .topbar .brand { gap: 0.5rem; } .topbar .brand img { width: 32px; } .topbar .brand span { font-size: 0.66rem; letter-spacing: 0.05em; } .topbar nav { gap: 0.35rem; } .topbar nav .btn { padding: 0.45rem 0.8rem; font-size: 0.75rem; } .hero { padding: 2.25rem 0 1.5rem; } .hero .welcome-note { font-size: 0.88rem; } .welcome-line { gap: 0.5rem; } .welcome-line .name-pill { max-width: 100%; padding: 0.35rem 1rem; } .section { padding: 2rem 0; } .panel { padding: 1.25rem; } .card-cta { gap: 1.25rem; } .card-cta .btn { width: 100%; } } /* Very narrow phones: drop the brand wordmark and keep just the logo, so the two nav buttons always sit side by side. */ @media (max-width: 400px) { .topbar .brand span { display: none; } } @media print { .no-print { display: none !important; } }