/* VYBE.FIT — the one design system. * * Used by the marketing site (vybe.fit), the club and member portal * (.vybe.fit and app.vybe.fit) and the platform console (mc.vybe.fit). * The public site's own stylesheet, public/assets/vybe.css, is the source of * these tokens; they are repeated here on purpose so the three surfaces can * never drift apart. * * Josh, 2026-09-13: the whole platform follows the www branding, and it has to * look like a full platform, not an admin tool. * * Light theme only. That is a hard rule across everything Josh ships. * * A club supplies a logo, one accent colour and a hero image; those flow into * --accent and the slots that use it. Everything else — layout, type, motion — * is always VYBE.FIT. */ :root { color-scheme: light; --ground: #fffaf6; --card: #ffffff; --ink: #1c1633; --ink2: #5c5773; --ink3: #9a95ad; --line: #f0e7e1; --line-soft: #f7f1ec; --coral: #ff4d6d; --orange: #ff8c42; --sun: #ffc93c; --mint: #1fc8a0; --sky: #3fb6ff; --violet: #7c5cff; --hot: linear-gradient(100deg, var(--coral), var(--orange) 50%, var(--sun)); --cool: linear-gradient(120deg, var(--violet), var(--sky) 55%, var(--mint)); /* A club may replace this one colour. Nothing else. */ --accent: var(--coral); --display: "Unbounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif; --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 26px; --radius-sm: 14px; --shadow: 0 1px 2px rgba(28,22,51,.04), 0 12px 40px -12px rgba(28,22,51,.14); --shadow-lift: 0 2px 4px rgba(28,22,51,.05), 0 24px 60px -20px rgba(28,22,51,.26); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .005em; margin: 0; } h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 14px; color: var(--ink2); } /* ---------------------------------------------------------------- the aura The drifting colour behind everything, exactly as on the public site. It is decoration only, so it never takes a click. */ .aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aura i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: drift 22s ease-in-out infinite alternate; } .aura i:nth-child(1) { width: 44vmax; height: 44vmax; background: #ffd0d9; top: -20vmax; left: -14vmax; } .aura i:nth-child(2) { width: 36vmax; height: 36vmax; background: #ffe3b8; top: 4vmax; right: -16vmax; animation-duration: 26s; animation-delay: -6s; } .aura i:nth-child(3) { width: 32vmax; height: 32vmax; background: #d6f5ec; bottom: -18vmax; left: 16vmax; animation-duration: 30s; animation-delay: -12s; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vmax, 3vmax) scale(1.08); } 100% { transform: translate(-3vmax, 5vmax) scale(.96); } } @media (prefers-reduced-motion: reduce) { .aura i { animation: none; } } /* ------------------------------------------------------------- the top bar */ .app-bar { position: sticky; top: 0; z-index: 30; background: rgba(255,250,246,.78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .app-bar .wrap { display: flex; align-items: center; gap: 18px; height: 68px; } .wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 36px); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.12rem; } .brand .mark { width: 32px; height: 32px; border-radius: 10px; background: var(--hot); display: grid; place-items: center; flex: none; box-shadow: 0 6px 18px -6px rgba(255,77,109,.6); } .brand .mark svg { width: 19px; height: 19px; display: block; } .brand .dot { background: var(--hot); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Which club you are looking at. On the console it says so in words, because an operator working across clubs must never have to guess. */ .club-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-size: .85rem; font-weight: 600; color: var(--ink2); white-space: nowrap; } .club-chip .swatch { width: 16px; height: 16px; border-radius: 6px; background: var(--accent); flex: none; } .club-chip.console { background: var(--ink); color: #fff; box-shadow: none; } .club-chip.console .swatch { background: var(--cool); } .app-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; } .app-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .93rem; color: var(--ink2); transition: background .18s, color .18s; } .app-nav a:hover { background: #fff; color: var(--ink); } .app-nav a.on { background: var(--ink); color: #fff; } .who { display: flex; align-items: center; gap: 9px; padding-left: 8px; } .who .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--cool); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .82rem; letter-spacing: .02em; } .who .name { font-size: .88rem; font-weight: 600; line-height: 1.2; } .who .role { font-size: .74rem; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } /* ------------------------------------------------------------------ layout */ main { padding-block: clamp(26px, 5vw, 46px) 80px; } .page-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .page-head .lead { flex: 1 1 320px; } .page-head p { margin: 6px 0 0; } .page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; } .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* ------------------------------------------------------------------- cards */ .card { background: var(--card); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow); } .card.flush { padding: 0; overflow: hidden; } .card h2 { margin-bottom: 4px; } .card-head { display: flex; align-items: center; gap: 12px; padding: 20px clamp(20px, 3vw, 28px) 14px; } .card-head h2 { flex: 1; } /* A number that matters, shown large. */ .tile { background: var(--card); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow); } .tile .k { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } .tile .v { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin-top: 4px; } .tile .v small { font-size: .9rem; font-weight: 600; color: var(--ink3); font-family: var(--body); } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s; } .btn:hover { transform: translateY(-2px); } .btn-hot { background: var(--hot); color: #fff; box-shadow: 0 10px 28px -10px rgba(255,77,109,.7); } .btn-hot:hover { box-shadow: 0 16px 36px -12px rgba(255,77,109,.8); } .btn-solid { background: var(--ink); color: #fff; } .btn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow); } .btn-danger { background: var(--card); color: #d1002b; box-shadow: inset 0 0 0 1.5px #f3d7de; } .btn-danger:hover { background: #fff1f3; } .btn-sm { padding: 8px 16px; font-size: .86rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* ------------------------------------------------------------------ fields */ .field { margin-bottom: 16px; } .field label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 7px; } .field .hint { font-size: .82rem; color: var(--ink3); margin-top: 6px; } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date], input[type=time], select, textarea { width: 100%; padding: 13px 15px; font: inherit; color: inherit; background: #fffdfb; border: 1.5px solid var(--line); border-radius: var(--radius-sm); transition: border-color .18s, box-shadow .18s; } input:focus, select:focus, textarea:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--accent) 55%, transparent); } /* ------------------------------------------------------------------ tables */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .94rem; } thead th { text-align: left; padding: 12px clamp(14px, 2vw, 20px); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); background: var(--line-soft); white-space: nowrap; } tbody td { padding: 14px clamp(14px, 2vw, 20px); border-top: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:hover td { background: #fffdfb; } td.right, th.right { text-align: right; white-space: nowrap; } td .sub { display: block; font-size: .82rem; color: var(--ink3); } /* ------------------------------------------------------------------ badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .badge-live { background: #e8f9f0; color: #0f7a4f; } .badge-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: #22b260; animation: breathe 1.5s ease-in-out infinite; } @keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } } .badge-soon { background: #eef4ff; color: #2b5bd7; } .badge-draft { background: #fff6e6; color: #9a6100; } .badge-done { background: var(--line-soft); color: var(--ink3); } .badge-off { background: #fff1f3; color: #b4123a; } /* ------------------------------------------------------------- empty state */ .empty { text-align: center; padding: clamp(34px, 7vw, 64px) 20px; } .empty .art { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 22px; background: var(--hot); opacity: .18; } .empty h2 { margin-bottom: 6px; } .empty p { max-width: 38ch; margin-inline: auto; } /* ------------------------------------------------------------- small print */ .muted { color: var(--ink3); font-size: .88rem; } .notice { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .93rem; } .notice-error { background: #fff1f3; color: #b4123a; } .notice-ok { background: #e8f9f0; color: #0f7a4f; } .notice-info { background: #eef4ff; color: #2b5bd7; } /* ------------------------------------------------------- the sign-in scene Two panels: the brand on the left, the form on the right. On a phone the brand panel becomes a short header so the form is reachable without scrolling. */ body.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; } .auth-art { position: relative; overflow: hidden; background: var(--hot); color: #fff; padding: clamp(30px, 5vw, 60px); display: flex; flex-direction: column; justify-content: space-between; } .auth-art::after { content: ""; position: absolute; inset: auto -20% -35% -20%; height: 70%; background: radial-gradient(closest-side, rgba(255,255,255,.3), transparent 70%); } .auth-art .brand { color: #fff; font-size: 1.25rem; position: relative; z-index: 1; } .auth-art .brand .mark { background: rgba(255,255,255,.22); box-shadow: none; } .auth-art .brand .dot { background: none; -webkit-text-fill-color: #fff; color: #fff; } .auth-art .pitch { position: relative; z-index: 1; max-width: 22ch; } .auth-art .pitch h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; color: #fff; } .auth-art .pitch p { color: rgba(255,255,255,.92); font-size: 1.02rem; margin-top: 14px; } .auth-art .foot { position: relative; z-index: 1; font-size: .84rem; color: rgba(255,255,255,.8); } .auth-form { display: grid; place-items: center; padding: clamp(26px, 5vw, 56px) clamp(18px, 4vw, 40px); } .auth-form .inner { width: 100%; max-width: 25rem; } .auth-form h2 { font-size: 1.6rem; margin-bottom: 6px; } @media (max-width: 860px) { body.auth { grid-template-columns: 1fr; } .auth-art { padding: 22px clamp(18px, 5vw, 30px) 26px; } .auth-art .pitch h1 { font-size: 1.6rem; } .auth-art .pitch p, .auth-art .foot { display: none; } } @media (max-width: 720px) { .app-bar .wrap { height: auto; padding-block: 12px; flex-wrap: wrap; gap: 10px; } .app-nav { order: 3; width: 100%; overflow-x: auto; } .who .name, .who .role { display: none; } } /* ------------------------------------------------------- the rest of the kit Small pieces the portal already uses: a tag, a yes/no, a form that sits in a table row, and a bare