/* DesiSquare Phase-1 — design tokens are law (handoff README §7). Default = "Warm Paper". Four alternate skins (Theme Options 1a–1d) are a pure token swap applied via [data-theme] on — the A/B Lab flips them live, per account. */ :root { --paper: #F6F5F1; --surface: #FFFFFF; --ink: #1D1D1F; --body: #3C3C40; --dim: #575C65; --faint: #656C79; --hairline: #E4E2DB; --wash: #F1EFE9; --teal: #0F766E; --teal-hover: #0B5F58; --teal-tint: #E8F1EF; --saffron: #C05621; --saffron-tint: #F9EDE3; --good: #2F7D4F; --good-tint: #E7F2EA; --bad: #B3452E; --bad-tint: #F8E9E4; --amber: #8A6D1F; --amber-tint: #F7EFDD; --radius-card: 12px; --radius-ctl: 8px; --shadow-pop: 0 8px 28px rgba(29, 29, 31, 0.10); --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Semantic tokens themes can retune independently of the primary brand colour. */ --maven-bg: var(--teal-tint); --maven-fg: var(--teal-hover); --font-display: var(--font); } /* 1a · Midnight Bazaar — dark-first, marigold on charcoal, Georgia display. */ /* 1b · Sandalwood & Ink — heritage ledger, terracotta + peacock, serif voice, radius 10. */ /* 1c · Porcelain Slate — cool fintech-crisp, peacock-blue, densest, radius 6. */ :root[data-theme="porcelain"] { /* Secondary-text greys darkened to clear WCAG 1.4.3 AA (4.5:1). Measured on the live build, --faint ran at 2.43:1 and --dim at 4.11:1 against --wash — 146 failing text nodes across feed/maven/communities. Hue and saturation are unchanged; only lightness moves, and the three-step hierarchy (faint -> dim -> ink) is preserved rather than collapsed, which is why --dim moves further than the 4.5 floor strictly requires. Surfaces, hairlines and the peacock accent are untouched — this is a legibility fix, not a re-palette. Old: --dim #6E7480, --faint #9AA0AB. */ --paper: #F5F6F8; --surface: #FFFFFF; --ink: #16181D; --body: #4A4F58; --dim: #575C65; --faint: #656C79; --hairline: #E3E6EB; --wash: #EEF0F3; --teal: #0C637C; --teal-hover: #094F63; --teal-tint: #E3F0F4; --saffron: #0C637C; --saffron-tint: #E3F0F4; --good: #2D784C; --good-tint: #E3F0EA; --bad: #B3452E; --bad-tint: #F6E4DF; --amber: #8A6D1F; --amber-tint: #F3EDDB; --maven-bg: #E3F0F4; --maven-fg: #0C637C; --radius-card: 6px; --radius-ctl: 5px; } /* 1d · Haldi & Rani — festival warmth, rani pink + haldi, soft radius 16. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--teal); text-decoration: none; } a:hover { color: var(--teal-hover); } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; color: var(--ink); } input::placeholder, textarea::placeholder { color: var(--faint); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } /* ---------- primitives ---------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 16px 18px; } .btn { border-radius: var(--radius-ctl); padding: 8px 16px; font-size: 13px; font-weight: 650; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover { background: var(--teal-hover); } .btn-ghost { background: var(--surface); border-color: var(--hairline); color: var(--ink); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal); } .btn-quiet { background: var(--surface); border-color: var(--hairline); color: var(--dim); } .btn-quiet:hover { border-color: var(--teal); color: var(--teal); } .btn-danger { background: var(--bad); color: #fff; } .btn-danger:hover { filter: brightness(0.92); } .input { border: 1px solid var(--hairline); border-radius: var(--radius-ctl); padding: 9px 12px; font-size: 13px; outline: none; background: var(--surface); transition: border-color .12s ease; } .input:focus { border-color: var(--teal); } .section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; } .avatar { border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; user-select: none; } .badge { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1.5px 7px; white-space: nowrap; } .badge-maven { background: var(--maven-bg); color: var(--maven-fg); } .badge-seeker { background: var(--wash); color: var(--dim); font-weight: 600; } .badge-wa { background: var(--wash); color: var(--dim); font-weight: 600; } .badge-mod { background: var(--saffron-tint); color: var(--saffron); } .badge-verified { background: var(--good-tint); color: var(--good); } .badge-common { background: var(--teal-tint); color: var(--teal-hover); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; } .badge-public { background: var(--wash); color: var(--dim); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; } .badge-private { background: var(--saffron-tint); color: var(--saffron); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; } .chip { border-radius: 999px; padding: 4px 13px; font-size: 12px; font-weight: 600; border: 1px solid var(--hairline); background: var(--surface); color: var(--dim); white-space: nowrap; } .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; } .hairline-v { height: 1px; background: var(--wash); margin: 4px 6px; } .logo-mark { width: 10px; height: 10px; background: var(--saffron); transform: rotate(45deg); display: inline-block; flex: none; } .logo-word { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } /* ---------- landing ---------- */ .landing { min-height: 100vh; display: flex; flex-direction: column; } .landing-top { display: flex; align-items: center; gap: 8px; padding: 16px 28px; } .landing-hero { max-width: 880px; margin: 0 auto; padding: 52px 28px 60px; text-align: center; } .landing-hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.03em; margin: 0; text-wrap: balance; font-weight: 700; font-family: var(--font-display); } .landing-hero h1 em { color: var(--teal); font-style: normal; } .landing-stats { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--dim); align-items: center; } .landing-stats b { color: var(--ink); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); vertical-align: middle; margin-right: 5px; } .landing-foot { font-size: 11.5px; color: var(--faint); margin-top: 26px; } .landing-signin-panel { max-width: 420px; margin: 12px auto 0; text-align: left; padding: 16px 18px; } .demo-accounts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .demo-account { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-ctl); border: 1px solid var(--hairline); background: var(--surface); text-align: left; font-size: 13px; width: 100%; } .demo-account:hover { border-color: var(--teal); } .demo-account .who { flex: 1; min-width: 0; text-align: left; } .demo-account .who b { display: block; font-size: 13px; } .demo-account .who span { font-size: 11.5px; color: var(--dim); line-height: 1.45; display: block; } /* Story 29.32: the control-plane tiers, listed but password-gated. Set apart from the one-click personas above by a rule and a lock rather than by colour — the point is not that they are special, it is that picking one is a different action with a different next step. */ .demo-staff { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 11px; } .demo-staff-head { font-size: 12.5px; font-weight: 700; } .demo-staff-sub { font-size: 11.5px; color: var(--dim); margin: 2px 0 8px; line-height: 1.5; } .demo-staff .demo-account + .demo-account { margin-top: 6px; } .demo-staff-lock { font-size: 13px; opacity: 0.75; } /* ---------- app chrome ---------- */ .topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .topbar-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 20px; } .topbar .brand { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: none; } /* On a phone the bar's fixed-width children (brand 113 + bell 42 + lab 98 + corridor 56 + avatar 32, plus six 10px gaps) came to 401px inside 350px of usable width, and with `flex-wrap: nowrap` the avatar simply hung 22px past the right edge — so every member route scrolled sideways. Tighten the gutters and drop the A/B Lab pill, which is the one item here that is a lab tool rather than a member affordance; it stays available on wider screens. */ @media (max-width: 720px) { .topbar-inner { gap: 8px; padding: 0 12px; } .topbar-inner [data-action="toggle-lab"] { display: none; } } .search { flex: 1; max-width: 380px; background: var(--wash); border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; font-size: 13px; outline: none; } .search:focus { border-color: var(--teal); background: var(--surface); } .topbar-spring { flex: 1; } .pill-btn { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink); flex: none; } .pill-btn:hover { border-color: var(--teal); } .pill-btn .caret { color: var(--dim); font-size: 10px; } .avatar-btn { width: 32px; height: 32px; font-size: 12px; border: none; padding: 0; } .avatar-btn:hover { box-shadow: 0 0 0 2px var(--teal-tint); } .scope-strip { border-top: 1px solid var(--wash); background: var(--paper); } .scope-strip-inner { max-width: 1280px; margin: 0 auto; padding: 5px 20px; font-size: 11.5px; color: var(--dim); } .scope-strip-inner b { color: var(--teal); } .menu { position: absolute; right: 0; top: 40px; z-index: 70; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 6px; width: 230px; } .menu-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-ctl); cursor: pointer; } .menu-head:hover { background: var(--wash); } .menu-item { padding: 8px 10px; border-radius: var(--radius-ctl); font-size: 13px; cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 8px; } .menu-item:hover { background: var(--wash); } .menu-item.danger { color: var(--bad); } .menu-item.danger:hover { background: var(--bad-tint); } .menu-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-ctl); font-size: 13px; cursor: pointer; } .menu-row:hover { background: var(--wash); } .menu-row.on { background: var(--teal-tint); font-weight: 700; color: var(--teal-hover); } .menu-row .count { margin-left: auto; font-size: 11.5px; color: var(--dim); } /* ---------- layout ---------- */ .shell { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 24px; padding: 20px 20px 80px; align-items: start; } .sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } /* Was an inline style on