/* ========================================= Repshift Theme (Clean) Structure: 1) Tokens (dark + optional light) 2) Base / reset-ish 3) Layout (container, grids, header/footer) 4) Components (buttons, cards, forms, tables, progress, modal) 5) Widgets (timer, confetti, avatars) 6) Utilities (margin/padding helpers) 7) Page tweaks (auth, calendar) ========================================= */ /* ========== 1) TOKENS ========== */ :root { /* Brand */ --plum-900:#3a1d4d; --plum-700:#5b2880; --plum-600:#6a2f94; --plum-500:#7b3fa1; --plum-400:#8f56b1; --plum-300:#a977cf; --lilac-200:#c4a3e5; --lilac-100:#e9dcfb; --coral-600:#ff3f46; --coral-500:#ff5a5f; /* Surfaces (dark) */ --bg-900:#0f0f12; --bg-800:#141418; --bg-700:#191a20; --bg-600:#1f2027; --card:#171821; --card-2:#1b1c26; --muted:#232532; /* Text */ --text-100:#ffffff; --text-200:#eeeeee; --text-300:#cfcfe6; --text-400:#a7a8c3; /* Lines/FX */ --line: rgba(255,255,255,0.08); --shadow: 0 10px 30px rgba(0,0,0,0.25); /* Feedback */ --green:#36d399; --yellow:#fbbf24; --red:#ef4444; /* Rounding/space */ --r-lg:16px; --r-md:12px; --r-sm:10px; --gap:16px; /* Focus */ --ring: 0 0 0 3px rgba(255,90,95,0.35); /* Type */ --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* Shell */ --shell-max:1120px; --shell-pad:clamp(12px,2vw,24px); --header-h:86px; } /* Optional light theme: apply .light to */ html.light { --bg-900:#f8f7fb; --bg-800:#ffffff; --bg-700:#ffffff; --bg-600:#ffffff; --card:#ffffff; --card-2:#faf8ff; --muted:#f3effa; --text-100:#0f0f12; --text-200:#1a1a22; --text-300:#2a2a39; --text-400:#4e4f63; --line: rgba(20,20,24,.08); --shadow: 0 8px 24px rgba(35,0,45,.06); } /* ========== 2) BASE ========== */ *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; background: radial-gradient(1200px 600px at 85% -10%, rgba(123,63,161,.18), transparent 55%), radial-gradient(900px 480px at 10% 110%, rgba(255,90,95,.08), transparent 55%), var(--bg-900); color:var(--text-200); font-family:var(--font-ui); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; margin:0; } a{ color:var(--lilac-200); text-decoration:none; } a:hover{ color:var(--text-100); } img,svg,video{ max-width:100%; display:block; } /* ========== 3) LAYOUT ========== */ .container{ max-width:var(--shell-max); margin:0 auto; padding:clamp(16px,4vw,40px) var(--shell-pad); } .grid{ display:grid; gap:var(--gap); } .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:900px){ .grid.cols-3{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr; } } /* Header */ .site-header{ position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(8px); background:linear-gradient(0deg, rgba(20,20,24,.6), rgba(20,20,24,.6)); } .header-inner{ max-width:var(--shell-max); margin-inline:auto; padding-inline:var(--shell-pad); height:100%; display:flex; align-items:center; justify-content:space-between; } .brand{ font-weight:700; letter-spacing:.3px; color:var(--text-100); font-size:24px; } .nav{ display:inline-flex; align-items:center; gap:clamp(8px,1.6vw,14px); } .nav a{ padding:clamp(6px,1.2vw,10px) clamp(10px,2vw,14px); border-radius:999px; color:var(--text-300); } .nav a.active,.nav a:hover{ background:rgba(123,63,161,.18); color:var(--text-100); } .site-footer{ max-width:var(--shell-max); margin:12px auto 24px; padding:0 var(--shell-pad); color:var(--text-400); font-size:12px; opacity:.7; } /* ========== 4) COMPONENTS ========== */ /* Cards */ .card{ background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); color:var(--text-200); } .card-body{ padding:18px; } .card-title{ color:var(--text-100); font-weight:600; margin-bottom:8px; } .card-sub{ color:var(--text-400); font-size:14px; } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:0; font-weight:700; cursor:pointer; transition:transform .06s, box-shadow .15s, background .2s; color:#fff; } .btn:focus-visible{ outline:none; box-shadow:var(--ring); } .btn-primary{ background:linear-gradient(90deg, var(--plum-600), var(--coral-500)); } .btn-primary:hover{ filter:brightness(1.05); box-shadow:0 12px 28px rgba(106,47,148,.35); } .btn-primary:active{ transform:translateY(1px); } .btn-ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text-100); } .btn-ghost:hover{ filter:brightness(1.06); } .btn-ghost:active{ transform:translateY(1px); } .icon-btn{ width:38px; height:38px; border-radius:10px; display:inline-grid; place-items:center; background:var(--muted); color:var(--text-200); border:1px solid var(--line); } .icon-btn:hover{ background:rgba(123,63,161,.18); color:var(--text-100); } /* Forms */ form{ display:grid; gap:14px; } label{ color:var(--text-300); font-size:14px; } input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{ width:100%; padding:12px 14px; border-radius:12px; background:var(--muted); color:var(--text-100); border:1px solid var(--line); transition: box-shadow .15s, border-color .15s, background .2s; } input::placeholder,textarea::placeholder{ color:var(--text-400); } input:focus,select:focus,textarea:focus{ outline:none; box-shadow:var(--ring); border-color:rgba(255,90,95,.45); } /* Pills / Badges */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; font-weight:700; border-radius:999px; border:1px solid var(--line); color:var(--text-200); background:rgba(123,63,161,.16); } .badge.green{ background:rgba(54,211,153,.16); color:#b4ffe3; } .badge.yellow{ background:rgba(251,191,36,.18); color:#ffe7ad; } .badge.red{ background:rgba(239,68,68,.18); color:#ffc6c6; } /* Tables */ .table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); } .table th,.table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); } .table thead th{ background:linear-gradient(180deg, var(--card-2), var(--card)); color:var(--text-100); font-weight:800; font-size:14px; } .table tbody tr:hover{ background:rgba(123,63,161,.08); } /* Progress */ .progress{ height:10px; border-radius:999px; background:#2d2f3a; overflow:hidden; border:1px solid var(--line); } .progress > span{ display:block; height:100%; background:linear-gradient(90deg, var(--plum-400), var(--coral-500)); width:0%; transition:width .5s ease; } /* Alerts */ .alert{ padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--muted); color:var(--text-200); } .alert.error{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.1); color:#ffd6d6; } .alert.success{ border-color:rgba(54,211,153,.35); background:rgba(54,211,153,.12); color:#d4ffee; } /* Modal Base is hidden; add .open to show. (Alternative: drive by ARIA — see commented selectors) */ .modal{ &[aria-hidden="true"]{ display:none; opacity:0; pointer-events:none; } &:not([aria-hidden="true"]){ display:block; opacity:1; pointer-events:auto; } } .modal.open{ display:block; opacity:100; pointer-events:auto; } .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; } .modal-panel{ position:fixed; left:50%; top:10%; transform:translateX(-50%); width:min(900px,96vw); max-height:86vh; overflow:auto; background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); z-index:1000; } .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .modal-title{ color:var(--text-100); font-weight:800; font-size:18px; } .modal-sub{ color:var(--text-400); font-size:12px; } /* Workout modal content blocks (minimal shared styles) */ .wm-body{ display:flex; flex-direction:column; gap:14px; margin-top:10px; } .ex-block{ border:1px solid var(--line); border-radius:12px; padding:12px; } .ex-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .ex-name{ color:var(--text-100); font-weight:800; } .ex-targets{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; } .ex-targets .readonly{ color:var(--text-300); font-size:13px; } .set-grid{ display:flex; flex-direction:column; gap:8px; } .set-row{ display:grid; grid-template-columns:70px 1fr 1fr; gap:8px; align-items:center; } .set-row input{ background:var(--muted); border:1px solid var(--line); color:var(--text-100); padding:10px; border-radius:10px; } /* ========== 5) WIDGETS ========== */ /* Rest timer */ .timer{ display:grid; place-items:center; padding:18px; text-align:center; background:radial-gradient(600px 300px at 50% -50%, rgba(123,63,161,.25), transparent 60%), var(--card); border:1px solid var(--line); border-radius:var(--r-lg); position:relative; overflow:hidden; } .timer .time{ font-size:clamp(28px,6vw,44px); font-weight:800; color:var(--text-100); letter-spacing:.5px; } .timer .label{ color:var(--text-400); font-size:13px; margin-top:6px; } .timer.active::after{ content:""; position:absolute; inset:-40%; background:radial-gradient(circle at center, rgba(123,63,161,.22), transparent 55%); animation:plumPulse 1.8s ease-in-out infinite; } @keyframes plumPulse{ 0%{ transform:scale(.9); opacity:.65; } 50%{ transform:scale(1.05); opacity:1; } 100%{ transform:scale(.9); opacity:.65; } } /* Subtle PR confetti */ .pr-burst{ position:relative; isolation:isolate; } .pr-burst::after{ content:""; position:absolute; inset:-30%; background: radial-gradient(6px 6px at 10% 20%, rgba(255,90,95,.8), transparent 40%), radial-gradient(6px 6px at 80% 30%, rgba(123,63,161,.8), transparent 40%), radial-gradient(5px 5px at 40% 80%, rgba(196,163,229,.9), transparent 40%), radial-gradient(4px 4px at 70% 60%, rgba(255,255,255,.9), transparent 40%); opacity:0; transform:scale(.9); pointer-events:none; animation:prPop .9s ease forwards; } @keyframes prPop{ 20%{opacity:.95; transform:scale(1.02);} 100%{opacity:0; transform:scale(1.15);} } /* Avatar / profile */ .profile{ position:relative; margin-left:clamp(6px,1.8vw,16px); } .avatar-btn,.avatar-link{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--bg-900); cursor:pointer; transition:transform .2s, box-shadow .2s; } .avatar-link:hover,.avatar-btn:hover{ transform:scale(1.05); box-shadow:0 0 8px rgba(123,63,161,.4); } .avatar{ width:100%; height:100%; object-fit:cover; object-position:center; filter:drop-shadow(0 0 4px rgba(123,63,161,.4)); } .avatar-fallback{ color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--plum-600), var(--coral-500)); width:100%; height:100%; } .profile .menu{ position:absolute; right:0; top:calc(100% + 10px); width:min(280px,88vw); background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.45); padding:10px; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s, transform .16s; } .profile .menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .menu-head{ padding:8px 10px 12px; border-bottom:1px solid var(--line); } .menu-name{ color:var(--text-100); font-weight:800; } .menu-sub{ color:var(--text-400); font-size:12px; } .menu-item{ display:block; margin-top:6px; padding:10px 12px; border-radius:10px; color:var(--text-200); } .menu-item:hover{ background:rgba(123,63,161,.18); color:var(--text-100); } /* ========== 6) UTILITIES ========== */ .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} .p-0{padding:0}.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px} .center{ display:grid; place-items:center; } .right{ text-align:right; } .mono{ font-family:var(--font-mono); } /* ========== 7) PAGE TWEAKS ========== */ /* Calendar page: undo auth centering */ .page-calendar main.container{ display:block; min-height:auto; } /* Calendar grid */ .calendar{ width:min(1100px,96vw); margin:0 auto; } .calendar .cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .calendar .cal-title{ color:var(--text-100); font-weight:800; font-size:clamp(18px,2.2vw,22px); } .calendar .cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:6px; } .calendar .cal-weekday{ color:var(--text-400); text-align:center; font-weight:700; font-size:12px; } .calendar .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .calendar .cal-cell{ min-height:110px; background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:12px; padding:10px; position:relative; } .calendar .cal-cell.dim{ opacity:.6; } .calendar .cal-cell.today{ box-shadow:0 0 0 2px rgba(255,90,95,.35) inset, 0 8px 24px rgba(123,63,161,.25); border-color:rgba(255,90,95,.35); } .calendar .cal-date{ position:absolute; top:8px; right:12px; color:var(--text-400); font-size:12px; font-weight:700; } .calendar .cal-pill, .calendar button.cal-pill{ display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(123,63,161,.16); color:var(--text-200); font-size:12px; border:1px solid var(--line); cursor:pointer; } .calendar .cal-pill .pill-dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg, var(--plum-400), var(--coral-500)); } @media (max-width:900px){ .calendar .cal-cell{ min-height:90px; } } @media (max-width:640px){ .calendar .cal-weekdays{ display:none; } .calendar .cal-grid{ gap:6px; } .calendar .cal-cell{ min-height:80px; padding:8px; } .calendar .cal-date{ right:8px; } } /* Auth sizing */ .auth{ width:min(520px,92vw); margin:clamp(16px,6vh,80px) auto; } .auth .card{ padding:clamp(16px,3.2vw,28px); border-radius:16px; background:linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.35); } .auth h2{ font-size:clamp(20px,2.6vw,26px); margin:0 0 10px; color:var(--text-100); } .auth label{ font-size:clamp(12px,1.4vw,14px); } .auth input[type="email"],.auth input[type="password"]{ padding:clamp(10px,1.8vw,13px) clamp(12px,2.2vw,16px); border-radius:12px; } .auth button{ width:100%; height:clamp(40px,6vw,46px); border-radius:12px; font-weight:800; font-size:clamp(14px,1.8vw,16px); background:linear-gradient(90deg, var(--plum-500), var(--coral-500)); box-shadow:0 4px 16px rgba(123,63,161,.4); color:#fff; cursor:pointer; margin-top:16px; transition:transform .2s, box-shadow .2s; } .auth button:hover{ transform:translateY(-2px); box-shadow:0 6px 22px rgba(255,90,95,.4); } .auth small{ display:block; margin-top:14px; color:var(--text-400); font-size:14px; } /* Corner brand badge */ /* ensure the card is a positioning context */ .pb-shell.card { position: relative; } /* brand badge inside the card’s top-right corner */ .pb-shell.card::after{ content: ""; position: absolute; top: 12px; /* align with your header padding */ right: 12px; width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, rgba(123,63,161,.25), rgba(24,20,32,.55)); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); /* show your SVG INSIDE the badge */ -webkit-mask: url("/assets/brand/brand_icon.svg") no-repeat center / 70%; mask: url("/assets/brand/brand_icon.svg") no-repeat center / 70%; background-color: var(--plum-400, #9b4fd9); /* tints the SVG */ opacity: .95; pointer-events: none; /* decorative */ } /* tweak on very small screens */ @media (max-width: 640px){ .pb-shell.card::after{ width:24px;height:24px; top:10px; right:10px; } } font-family: 'Inter', ui-sans-serif, system-ui; letter-spacing: .08em;