/* NovaFitK Members — shared styles (yellow TEST theme) */ :root { --dark: #0A0A0A; --dark2: #141414; --dark3: #1F1F1F; --yellow: #FFD400; --yellow-dim: rgba(255,212,0,0.12); --yellow-border: rgba(255,212,0,0.30); --accent: #FF8C00; --text: #F5F5F5; --text-muted: #888888; --green: #39FF14; --green-dim: rgba(57,255,20,0.12); --nav-bg: rgba(10,10,10,0.92); --input-bg: var(--dark3); --input-border: #333; --divider: #222; --shadow: 0 0 0 transparent; } /* Light theme — applied via or body[data-theme="light"]. Cream/off-white background, dark text, yellow accent stays for buttons/links. All other rules already use var(--*) so they pick this up automatically. */ [data-theme="light"] { --dark: #FAF7F0; /* warm cream page bg */ --dark2: #FFFFFF; /* card bg */ --dark3: #F0EBDF; /* nested/input bg */ --yellow: #C9A300; /* darker yellow for AA contrast on white */ --yellow-dim: rgba(201,163,0,0.10); --yellow-border: rgba(201,163,0,0.30); --text: #1A1A1A; /* near-black text */ --text-muted: #5C5C5C; --nav-bg: rgba(250,247,240,0.94); --input-bg: #FFFFFF; --input-border: #D6D0BF; --divider: #E5DFCE; --shadow: 0 1px 2px rgba(0,0,0,0.06); } *,*::before,*::after { box-sizing: border-box; margin:0; padding:0; } body { font-family: 'Inter', sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; min-height: 100vh; padding-top: 70px; transition: background-color 0.2s ease, color 0.2s ease; } nav { position: fixed; top:0; left:0; right:0; z-index:100; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--yellow-border); height: 70px; display:flex; align-items:center; justify-content: space-between; padding: 0 24px; transition: background-color 0.2s ease; } nav .brand { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px; color: var(--yellow); letter-spacing: 1px; text-decoration: none; } nav .brand .test-tag { font-size: 10px; color: #000; background: var(--yellow); padding: 2px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle; } nav .links a { color: var(--text-muted); text-decoration: none; margin-left: 24px; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav .links a:first-child { margin-left: 24px; } nav .links a:hover { color: var(--yellow); } nav .links a.active { color: var(--yellow); border-bottom-color: var(--yellow); } nav .brand { white-space: nowrap; } nav .utility-bar { display: flex; gap: 16px; padding-left: 24px; border-left: 1px solid var(--yellow-border); } nav .utility-bar button { background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.15s, border-color 0.15s; } nav .utility-bar button:hover { color: var(--yellow); border-color: var(--yellow-border); } nav .utility-bar svg { width: 18px; height: 18px; } .container { max-width: 1100px; margin: 0 auto; padding: 40px 24px; } h1 { font-family: 'Oswald', sans-serif; font-size: 48px; margin-bottom: 8px; letter-spacing: 1px; color: var(--yellow); } h2 { font-family: 'Oswald', sans-serif; font-size: 28px; margin: 32px 0 12px; letter-spacing: 0.5px; color: var(--yellow); } .muted { color: var(--text-muted); } .card { background: var(--dark2); border: 1px solid var(--yellow-border); border-radius: 8px; padding: 24px; margin-bottom: 16px; } .btn { display: inline-block; background: var(--yellow); color: #000; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 1px; padding: 14px 28px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 15px; text-transform: uppercase; transition: all 0.2s; } .btn:hover { background: #ffe24d; transform: translateY(-1px); } .btn.ghost { background: transparent; color: var(--yellow); border: 1px solid var(--yellow); } .btn.ghost:hover { background: var(--yellow-dim); } .btn.green { background: var(--green); color: #000; } .btn.green:hover { background: #5dff47; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } input, select { width: 100%; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 4px; color: var(--text); font-size: 15px; font-family: inherit; transition: background-color 0.2s ease, border-color 0.2s ease; } input:focus { outline: none; border-color: var(--yellow); } label { display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .form-group { margin-bottom: 16px; } .error { background: rgba(255,60,60,0.1); border: 1px solid rgba(255,60,60,0.3); color: #ff8888; padding: 12px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; } .success { background: var(--yellow-dim); border: 1px solid var(--yellow-border); color: var(--yellow); padding: 12px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .video-card { background: var(--dark2); border: 1px solid var(--yellow-border); border-radius: 8px; padding: 16px; transition: all 0.2s; text-decoration: none; color: var(--text); display: block; } .video-card:hover { transform: translateY(-2px); border-color: var(--yellow); } .video-card.locked { opacity: 0.55; cursor: not-allowed; } .video-card .badge { display: inline-block; font-size: 10px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; letter-spacing: 1px; margin-bottom: 8px; } .badge.free { background: #2a2a2a; color: var(--text-muted); } .badge.members { background: rgba(255,212,0,0.15); color: var(--yellow); } .tier-pill { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow-border); } .player-placeholder { background: var(--dark2); border: 1px solid var(--yellow-border); border-radius: 8px; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; } .pricing-card { background: var(--dark2); border: 1px solid var(--yellow-border); border-radius: 8px; padding: 28px; text-align: center; } .pricing-card.featured { border-color: var(--yellow); border-width: 2px; } .pricing-card .price { font-family: 'Oswald', sans-serif; font-size: 48px; color: var(--yellow); margin: 12px 0; } .pricing-card .price small { font-size: 16px; color: var(--text-muted); } .pricing-card ul { list-style: none; text-align: left; margin: 20px 0; } .pricing-card li { padding: 6px 0; border-bottom: 1px solid var(--divider); font-size: 14px; } .pricing-card li::before { content: "✓ "; color: var(--green); font-weight: bold; } @media (max-width: 600px) { h1 { font-size: 36px; } } /* Overflow-driven responsive nav. We don't pick a fixed pixel breakpoint — instead, _shared.js measures the nav and sets nav[data-overflow="true"] when the inline link row doesn't fit. Below: hide the inline row, show the hamburger, and turn the same .links block into a vertical drawer below the nav. */ nav[data-overflow="true"] { padding: 0 16px; } nav .links { min-width: 0; margin-left: auto; padding-right: 16px; } nav[data-overflow="true"] .links { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--yellow-border); padding: 12px 0; gap: 0; } nav[data-overflow="true"] .hamburger { display: flex; } nav[data-overflow="true"].nav-open .links { display: flex; } nav[data-overflow="true"].nav-open .links a { margin: 0; padding: 14px 24px; font-size: 15px; border-bottom: 1px solid var(--divider); } nav[data-overflow="true"].nav-open .links a:last-child { border-bottom: none; } nav[data-overflow="true"].nav-open .links a.active { border-bottom-color: var(--yellow); } nav[data-overflow="true"].nav-open .hamburger .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav[data-overflow="true"].nav-open .hamburger .bar:nth-child(2) { opacity: 0; } nav[data-overflow="true"].nav-open .hamburger .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } nav .hamburger { background: transparent; border: 1px solid var(--yellow-border); border-radius: 4px; width: 40px; height: 40px; padding: 0; cursor: pointer; display: none; /* hidden by default; only shown via nav[data-overflow="true"] */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color 0.15s; } /* When the hamburger lives inside .utility-bar (mobile layout), the generic `nav .utility-bar button { display: flex }` rule has the same specificity (0,2,1) as `nav .hamburger` above but appears EARLIER in the file, so it wins the cascade. Add this same-specificity rule LATER in the file so the hamburger's hide-by-default wins on desktop. */ nav .utility-bar .hamburger { display: none; } nav[data-overflow="true"] .hamburger { display: flex; } nav .hamburger:hover { border-color: var(--yellow); } /* The hamburger is INSIDE .utility-bar (placed to the right of the avatar on mobile). Reset the .utility-bar button chrome so the hamburger's own styles (yellow border, square shape, padding:0) win. */ nav .utility-bar .hamburger { padding: 0; border-color: var(--yellow-border); border-radius: 4px; } nav .utility-bar .hamburger:hover { border-color: var(--yellow); color: var(--text-muted); background: transparent; } nav .hamburger .bar { display: block; width: 20px; height: 2px; background: var(--yellow); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } /* Member-row layout — used by trainer.html list, trainer.html detail, members.html dashboard */ .member-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--divider); gap:16px; flex-wrap:wrap; } .member-row:last-child { border-bottom:none; } .member-row .info { flex:1; } .member-row .name { font-family:'Oswald',sans-serif; font-size:18px; color:var(--yellow); } .member-row .meta { font-size:12px; color:var(--text-muted); margin-top:2px; } .member-row .stats { display:flex; gap:24px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; } .member-row .stats strong { color:var(--text); font-size:16px; display:block; margin-bottom:2px; } .member-row .actions { display:flex; gap:8px; flex-wrap:wrap; } /* Theme toggle — sun/moon button in nav utility area. Hover/focus styles + the two icon variants (show one, hide the other). */ .theme-toggle { background: transparent; border: 1px solid var(--yellow-border); color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .theme-toggle:hover { color: var(--yellow); border-color: var(--yellow); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Card hover/transition for theme swap */ .card, .video-card, .pricing-card, .stat-card, .chart-wrap, .workout-card, .exercise-block { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ===== User-menu (avatar + nickname + dropdown) ===== */ /* The avatar+nickname pill sits inside .links, looks like a nav item. */ .user-menu { position: relative; display: inline-block; } .user-menu-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; font: inherit; font-size: 14px; line-height: 1; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } /* The user-menu button is INSIDE .utility-bar, but we don't want the .utility-bar button chrome (border / hover background) to apply here. */ nav .utility-bar .user-menu-btn { padding: 4px 8px 4px 4px; border-radius: 999px; } nav .utility-bar .user-menu-btn:hover { border-color: var(--yellow-border); } .user-menu-btn:hover { color: var(--yellow); border-color: var(--yellow-border); background: rgba(255,212,0,0.04); } .user-menu-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .user-menu-btn .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: #000; display: inline-flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 15px; overflow: hidden; flex: 0 0 auto; } .user-menu-btn .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-menu-btn .chevron { width: 14px; height: 14px; opacity: 0.7; transition: transform 0.15s; } .user-menu[data-open="true"] .user-menu-btn .chevron { transform: rotate(180deg); } .user-menu[data-open="true"] .user-menu-btn { color: var(--yellow); border-color: var(--yellow-border); background: rgba(255,212,0,0.04); } /* Dropdown panel — anchored under the button. */ .user-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px; background: var(--dark2); border: 1px solid var(--yellow-border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); padding: 6px; z-index: 200; display: flex; flex-direction: column; } .user-menu-panel[hidden] { display: none; } .user-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--divider); } .user-menu-name { font-family: 'Oswald', sans-serif; color: var(--yellow); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } .user-menu-tier { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; background: var(--yellow-dim); color: var(--yellow); border: 1px solid var(--yellow-border); } .user-menu-panel a[role="menuitem"] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; transition: background-color 0.12s, color 0.12s; } .user-menu-panel a[role="menuitem"]:hover { background: var(--dark3); color: var(--yellow); } .user-menu-panel a[role="menuitem"].active { color: var(--yellow); background: var(--yellow-dim); } .user-menu-panel a[role="menuitem"] svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.85; } .user-menu-sep { height: 1px; background: var(--divider); margin: 6px 4px; } /* Mobile (overflow-driven): the .links row becomes a vertical drawer below the nav. The avatar lives in .utility-bar at top-right and keeps its dropdown behavior. */ nav[data-overflow="true"] .user-menu { display: inline-block; } nav[data-overflow="true"] .user-menu-btn .chevron { display: none; } nav[data-overflow="true"] .user-menu-panel { /* Anchor dropdown below the avatar, right-aligned. On narrow screens the 240px min-width still fits because we right-align. */ right: 16px; } nav[data-overflow="true"] .user-menu-panel a[role="menuitem"] { font-size: 14px; } /* -------------------------------------------------------------------------- Week strip — for the Calendar card on the dashboard. 7 cells Mon-Sun with stacked tint dots per event kind. Mirrors the calendar's strength/cardio/photo/measure/doc palette. -------------------------------------------------------------------------- */ .week-strip-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; } .week-strip-cell { background: var(--dark3); border: 1px solid var(--divider); border-radius: 6px; padding: 10px 6px 8px; text-align: center; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; } .week-strip-today { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; } .week-strip-cell .week-strip-daynum { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px; color: var(--text); line-height: 1; } .week-strip-cell.week-strip-today .week-strip-daynum { color: var(--yellow); } .week-strip-cell .week-strip-daylbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); } .week-strip-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 8px; } .week-strip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .week-strip-dot.dot-strength { background: rgba(255, 212, 0, 0.85); } .week-strip-dot.dot-cardio { background: rgba(57, 255, 20, 0.85); } .week-strip-dot.dot-photo { background: rgba(255, 105, 180, 0.85); } .week-strip-dot.dot-measure { background: rgba(140, 130, 255, 0.85); } .week-strip-dot.dot-doc { background: rgba(200, 200, 200, 0.7); } .week-strip-summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; align-items: baseline; } .week-strip-summary .week-strip-num { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--yellow); font-weight: 600; margin-right: 4px; letter-spacing: 0; } .week-strip-stat { display: inline-flex; align-items: baseline; } @media (max-width: 480px) { .week-strip-cell { padding: 6px 2px; min-height: 64px; } .week-strip-cell .week-strip-daynum { font-size: 15px; } .week-strip-cell .week-strip-daylbl { display: none; } .week-strip-summary { gap: 10px; font-size: 11px; } .week-strip-summary .week-strip-num { font-size: 15px; } }