/* assets/css/pages/welcome-hub.css * /my — Member Welcome Hub. Theme-aware: respects [data-theme="dark"|"light"] * on . Default theme is dark (matches the rest of the portal). Light * mode is a "banishing blue" gradient — deep navy fading through sky into * near-white, inspired by icreateyoursite.com/ai. * * Scoped under .wh-* + .gv-dock-* so it coexists with the existing pages. */ /* ── Theme tokens (also referenced by theme-tokens.css for global use) ── */ :root, html[data-theme="dark"] { --wh-bg-page: #0b1426; --wh-bg-card: rgba(20, 28, 48, .72); --wh-bg-card-2: rgba(15, 23, 42, .55); --wh-border: rgba(255, 255, 255, .12); --wh-text: #f0f6fb; --wh-text-soft: rgba(240, 246, 251, .82); --wh-text-mute: rgba(240, 246, 251, .58); --wh-accent: #ffb84d; --wh-accent-2: #f97316; --wh-blue: #38bdf8; --wh-shadow: 0 24px 56px rgba(0, 0, 0, .42); --wh-glow: radial-gradient(80% 60% at 30% 0%, rgba(124, 92, 255, .18), transparent 60%), radial-gradient(70% 50% at 90% 20%, rgba(255, 156, 0, .14), transparent 65%); --wh-hero-bg: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .92)); --wh-name-color: #c9b378; /* warm gold — the Olivia-Williams cue */ } html[data-theme="light"] { /* "Banishing blue" — deep blue at top fading to near-white at the bottom. * Surfaces stay near-white with a subtle blue tint; orange remains accent * so the brand identity is preserved across themes. */ --wh-bg-page: #f8fafc; --wh-bg-card: #ffffff; --wh-bg-card-2: #f1f5fb; --wh-border: rgba(15, 23, 42, .10); --wh-text: #0f172a; --wh-text-soft: #334155; --wh-text-mute: #64748b; --wh-accent: #ea580c; --wh-accent-2: #f97316; --wh-blue: #1d4ed8; --wh-shadow: 0 18px 40px rgba(15, 23, 42, .10); --wh-glow: radial-gradient(80% 60% at 30% 0%, rgba(56, 189, 248, .18), transparent 60%), radial-gradient(70% 50% at 90% 20%, rgba(234, 88, 12, .10), transparent 65%); --wh-hero-bg: linear-gradient(180deg, #dbeafe 0%, #eff6ff 35%, #f8fafc 70%, #ffffff 100%); --wh-name-color: #1e3a8a; } /* Apply a page-wide banishing-blue background ONLY when in light theme, * so the rest of the portal (which is built dark-first) still works. */ html[data-theme="light"] body { background: linear-gradient(180deg, #0b1f3a 0%, #1d3a8a 12%, #4f87d8 30%, #c7dffb 55%, #f0f6ff 80%, #ffffff 100%) fixed; background-attachment: fixed; color: var(--wh-text); } html[data-theme="light"] .topbar, html[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .88); border-color: var(--wh-border); backdrop-filter: blur(12px); color: var(--wh-text); } html[data-theme="light"] .sidebar a, html[data-theme="light"] .sidebar__group, html[data-theme="light"] .topbar a { color: var(--wh-text-soft); } html[data-theme="light"] .sidebar a:hover { color: var(--wh-accent); } /* ── Shell ───────────────────────────────────────────────────────── */ .wh-shell { display: flex; flex-direction: column; gap: 18px; max-width: 1180px; margin: 0 auto; padding-bottom: 60px; } /* ── Hero (elegant greeting card — Olivia Williams aesthetic) ─────── */ .wh-hero { position: relative; padding: 56px 40px 60px; background: var(--wh-hero-bg); border: 1px solid var(--wh-border); border-radius: 22px; overflow: hidden; box-shadow: var(--wh-shadow); } .wh-hero__glow { position: absolute; inset: 0; background: var(--wh-glow); pointer-events: none; } .wh-hero__body { position: relative; text-align: center; max-width: 720px; margin: 0 auto; } .wh-hero__kicker { margin: 0 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--wh-text-mute); } .wh-hero__welcome { font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif; font-size: clamp(38px, 6vw, 64px); font-weight: 400; margin: 0; color: var(--wh-text); letter-spacing: .01em; line-height: 1; } .wh-hero__name { font-family: 'Cormorant Garamond', 'Playfair Display', 'Georgia', serif; font-size: clamp(46px, 7.5vw, 80px); font-weight: 400; font-style: italic; margin: 8px 0 28px; color: var(--wh-name-color); letter-spacing: .005em; line-height: 1; } .wh-hero__lede { margin: 0 auto; max-width: 600px; font-size: 15px; line-height: 1.55; color: var(--wh-text-soft); } .wh-hero__note { margin: 18px auto 0; max-width: 600px; padding: 12px 16px; border-radius: 10px; background: rgba(255, 156, 0, .14); border: 1px solid rgba(255, 156, 0, .35); color: var(--wh-text); font-size: 13px; } /* ── At-a-glance strip ────────────────────────────────────────────── */ .wh-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .wh-glance__cell { padding: 14px 16px; background: var(--wh-bg-card); border: 1px solid var(--wh-border); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; } .wh-glance__cell--key { border-color: rgba(255, 156, 0, .45); background: linear-gradient(180deg, rgba(255,156,0,.10), transparent 70%), var(--wh-bg-card); } .wh-glance__cell--bell { border-color: rgba(56, 189, 248, .45); background: linear-gradient(180deg, rgba(56,189,248,.10), transparent 70%), var(--wh-bg-card); } .wh-glance__cell--health-current { border-color: rgba(60, 200, 140, .50); } .wh-glance__cell--health-watch { border-color: rgba(255, 156, 0, .55); } .wh-glance__cell--health-delinquent { border-color: rgba(220, 80, 80, .55); } .wh-glance__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-text-mute); } .wh-glance__val { font-size: 22px; font-weight: 800; color: var(--wh-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .wh-glance__val--small { font-size: 14px; letter-spacing: .05em; } .wh-glance__hint { font-size: 11.5px; color: var(--wh-text-mute); line-height: 1.4; } /* ── Section heads + tiles ────────────────────────────────────────── */ .wh-grid { display: flex; flex-direction: column; gap: 12px; } .wh-grid__head { margin: 14px 0 4px; font-size: 16px; font-weight: 700; color: var(--wh-text); display: flex; align-items: baseline; gap: 12px; } .wh-grid__head small { font-weight: 500; font-size: 12px; color: var(--wh-text-mute); } .wh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .wh-tile { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--wh-bg-card); border: 1px solid var(--wh-border); border-radius: 14px; text-decoration: none; color: var(--wh-text); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; box-shadow: var(--wh-shadow); } .wh-tile:hover { transform: translateY(-2px); border-color: rgba(255, 156, 0, .55); box-shadow: 0 24px 48px rgba(0, 0, 0, .3); } .wh-tile--pulse { border-color: rgba(255, 156, 0, .50); background: linear-gradient(135deg, rgba(255, 156, 0, .14), rgba(255, 255, 255, .02) 70%), var(--wh-bg-card); } .wh-tile__icon { font-size: 28px; line-height: 1; flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--wh-bg-card-2); border-radius: 12px; } .wh-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wh-tile__title { font-size: 15px; font-weight: 700; color: var(--wh-text); } .wh-tile__desc { font-size: 12px; color: var(--wh-text-mute); line-height: 1.45; } .wh-tile__cta { font-size: 22px; color: var(--wh-accent); flex: none; } .wh-tiles--ghost .wh-tile { background: var(--wh-bg-card-2); } /* ── Upcoming-3 table ────────────────────────────────────────────── */ .wh-upcoming { padding: 16px 18px; background: var(--wh-bg-card); border: 1px solid var(--wh-border); border-radius: 14px; } .wh-upcoming h3 { margin: 0 0 10px; color: var(--wh-text); font-size: 14px; } .wh-upcoming__table { width: 100%; font-size: 13px; color: var(--wh-text); } .wh-upcoming__table th { text-align: left; padding: 6px 8px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--wh-text-mute); border-bottom: 1px solid var(--wh-border); } .wh-upcoming__table td { padding: 7px 8px; border-bottom: 1px solid var(--wh-border); } .wh-upcoming__table .num { text-align: right; } .wh-upcoming__table .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-variant-numeric: tabular-nums; } .wh-foot { margin-top: 16px; font-size: 12px; color: var(--wh-text-mute); text-align: center; line-height: 1.5; } /* ─────────────────────────────────────────────────────────────────── */ /* ── Good Vibes mini-player dock (slide-out from right edge) ───── */ /* ─────────────────────────────────────────────────────────────────── */ .gv-dock { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 250; /* OPAQUE surfaces for everything inside the dock (panel, tooltip, rows, mini-cinema). The hub-card rgba() values are intentional for cards that sit ON the hero, but these float OVER arbitrary page content — the translucent versions let the dashboard bleed through and kill readability. Solid equivalents of the same hues: */ --wh-bg-card: #141c30; /* was rgba(20, 28, 48, .72) */ --wh-bg-card-2: #0f172a; /* was rgba(15, 23, 42, .55) */ } html[data-theme="light"] .gv-dock { /* light theme is already opaque — restore its own surface colors, since the scoped override above would otherwise beat the theme values */ --wh-bg-card: #ffffff; --wh-bg-card-2: #f1f5fb; } .gv-dock__toggle { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; /* ~30% smaller footprint (was 12px 8px pad / 22px icon / 12px label). In vertical-rl the label LINE adds to the tab WIDTH, so line-height is pinned too — without it the emoji line inflates the tab. */ padding: 7px 5px; background: linear-gradient(135deg, var(--wh-accent), var(--wh-accent-2)); color: #fff; border: 0; border-radius: 10px 0 0 10px; cursor: pointer; box-shadow: -10px 0 26px rgba(0, 0, 0, .35); writing-mode: vertical-rl; text-orientation: mixed; font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; transition: transform .18s ease, box-shadow .18s ease; } .gv-dock__toggle:hover { transform: translateX(-3px); box-shadow: -14px 0 32px rgba(0, 0, 0, .45); } /* Now-playing pulse — the toggle gently breathes while audio is on, so the * user knows music continues after the panel auto-minimizes on track pick. */ .gv-dock__toggle.is-playing { animation: gv-pulse 2.4s ease-in-out infinite; box-shadow: -14px 0 32px rgba(255, 156, 0, .55), 0 0 0 0 rgba(255, 156, 0, .55); } /* Glow-only pulse — no transform: a click target that keeps moving is hard to hit (and never settles for automation). The breathing glow alone is the now-playing cue. */ @keyframes gv-pulse { 0%, 100% { box-shadow: -14px 0 32px rgba(255, 156, 0, .35), 0 0 0 0 rgba(255, 156, 0, .55); } 50% { box-shadow: -18px 0 40px rgba(255, 156, 0, .70), 0 0 0 10px rgba(255, 156, 0, 0); } } /* Respect reduced-motion preference. */ @media (prefers-reduced-motion: reduce) { .gv-dock__toggle.is-playing { animation: none; } } .gv-dock__icon { writing-mode: horizontal-tb; font-size: 14px; line-height: 1.1; } .gv-dock__toggle::after { content: attr(data-tip-en); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(8px); width: 230px; padding: 8px 10px; background: var(--wh-bg-card); color: var(--wh-text); border: 1px solid var(--wh-border); border-radius: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; writing-mode: horizontal-tb; text-align: left; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: var(--wh-shadow); } .gv-dock__toggle:hover::after, .gv-dock__toggle:focus::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* The [hidden] HTML5 attribute must win over our flex layout. Without * this override, `display: flex` on the panel below makes the dock * visible on first load (HTML5 hidden = display:none normally, but * any explicit display rule in CSS clobbers it). */ .gv-dock__panel[hidden] { display: none !important; } .gv-dock__panel { position: absolute; right: calc(100% - 1px); top: 50%; transform: translateY(-50%); width: min(360px, calc(100vw - 24px)); max-height: 80vh; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--wh-bg-card); border: 1px solid var(--wh-border); border-radius: 14px 0 0 14px; box-shadow: var(--wh-shadow); animation: gv-slide .25s ease-out; } @keyframes gv-slide { from { opacity: 0; transform: translate(20px, -50%); } to { opacity: 1; transform: translateY(-50%); } } .gv-dock__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--wh-border); color: var(--wh-text); font-size: 13px; } .gv-dock__close { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--wh-text-mute); font-size: 18px; cursor: pointer; } .gv-dock__close:hover { background: var(--wh-bg-card-2); color: var(--wh-text); } .gv-dock__cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gv-dock__cat { padding: 5px 10px; background: var(--wh-bg-card-2); border: 1px solid var(--wh-border); border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--wh-text-soft); cursor: pointer; } .gv-dock__cat.is-active { background: var(--wh-accent); color: #fff; border-color: var(--wh-accent); } .gv-dock__now { padding: 10px 12px; background: var(--wh-bg-card-2); border: 1px solid var(--wh-border); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; } .gv-dock__nowtitle { font-size: 12.5px; font-weight: 700; color: var(--wh-text); } .gv-dock__nowartist { font-size: 11px; color: var(--wh-text-mute); } /* The single shared media element. In the dock slot it renders as a slim controls bar (audio mode); inside the cinema it becomes a 16:9 video. */ #gvMedia { display: block; width: 100%; height: 40px; background: #000; border-radius: 8px; } /* ── Karaoke mini-cinema (floating, survives panel auto-minimize) ───── */ .gv-cinema[hidden] { display: none !important; } .gv-cinema { position: fixed; right: 16px; bottom: 16px; z-index: 240; /* under the dock panel (250) so the playlist wins overlaps */ width: min(460px, calc(100vw - 24px)); background: var(--wh-bg-card); border: 1px solid var(--wh-border); border-radius: 14px; box-shadow: var(--wh-shadow); overflow: hidden; animation: gv-rise .25s ease-out; } @keyframes gv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gv-cinema { animation: none; } } .gv-cinema__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; color: var(--wh-text); font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--wh-border); } .gv-cinema__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-cinema__btns { display: flex; gap: 6px; } .gv-cinema__btn { min-width: 30px; height: 28px; border: 1px solid var(--wh-border); border-radius: 6px; background: var(--wh-bg-card-2); color: var(--wh-text); font-size: 13px; cursor: pointer; } .gv-cinema__btn:hover { border-color: var(--wh-accent); color: var(--wh-accent); } .gv-cinema__body #gvMedia { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 60vh; border-radius: 0; } .gv-dock__controls { display: flex; align-items: center; gap: 6px; } .gv-dock__btn { padding: 6px 10px; background: var(--wh-bg-card-2); border: 1px solid var(--wh-border); border-radius: 8px; color: var(--wh-text); font-size: 12px; cursor: pointer; } .gv-dock__btn:hover { border-color: var(--wh-accent); color: var(--wh-accent); } .gv-dock__count { margin-left: auto; font-size: 11px; color: var(--wh-text-mute); } .gv-dock__search { padding: 7px 10px; background: var(--wh-bg-card-2); border: 1px solid var(--wh-border); border-radius: 8px; color: var(--wh-text); font-size: 12px; } .gv-dock__search::placeholder { color: var(--wh-text-mute); } .gv-dock__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 240px; border: 1px solid var(--wh-border); border-radius: 8px; background: var(--wh-bg-card-2); } .gv-dock__row { padding: 7px 10px; font-size: 12px; color: var(--wh-text-soft); cursor: pointer; border-bottom: 1px solid var(--wh-border); display: flex; flex-direction: column; gap: 1px; } .gv-dock__row:last-child { border-bottom: 0; } .gv-dock__row:hover { background: var(--wh-bg-card); color: var(--wh-text); } .gv-dock__row.is-playing { background: rgba(255, 156, 0, .14); color: var(--wh-accent); } .gv-dock__row-title { font-weight: 600; } .gv-dock__row-artist { color: var(--wh-text-mute); font-size: 10.5px; } .gv-dock__foot { margin: 0; font-size: 10.5px; color: var(--wh-text-mute); line-height: 1.4; } @media (max-width: 720px) { .wh-hero { padding: 36px 22px 40px; } .wh-hero__welcome { font-size: 36px; } .wh-hero__name { font-size: 44px; } .gv-dock { top: auto; bottom: 14px; right: 12px; transform: none; } .gv-dock__toggle { writing-mode: horizontal-tb; flex-direction: row; padding: 7px 10px; border-radius: 10px; } .gv-dock__toggle::after { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: translateY(8px); } .gv-dock__toggle:hover::after, .gv-dock__toggle:focus::after { transform: translateY(0); } .gv-dock__panel { right: 0; top: auto; bottom: calc(100% + 8px); transform: none; border-radius: 14px; } /* keep the mini-cinema clear of the bottom-docked toggle + my-tabbar */ .gv-cinema { right: 12px; bottom: 76px; } }