/* ============================================================================ BibBot — mockup stylesheet (Phase 4 visual design) Design tokens mirror Anny's booking-app system (docs/design/anny-design-language.md). Headings: Poppins (free geometric look-alike for Gilroy — see QUESTIONS.md, Gilroy licensing is the one open Track-D item). Body: Lato (OFL, what Anny uses). Layouts are ours; palette + type + component styling mirror Anny. ============================================================================ */ @import url('https://fonts.bunny.net/css?family=lato:300,400,700,900|poppins:300,500,600,700,800'); :root { /* brand / primary — rebranded to match the live Anny Nuxt app (was #2b6af8) */ --bb-primary: #396def; --bb-primary-hover: #2d56bd; /* Anny live: body.dark --primary-color-hover */ --bb-primary-dark: #131333; --bb-primary-overlay:rgba(67,116,240,.12); /* CONFIRMED from live Nuxt app CSS */ --bb-primary-shadow: rgba(57,109,239,.5); --bb-accent: #ff9814; /* orange — "tonight's run" emphasis */ --bb-accent-soft: #fff4e6; /* semantic + real overlay tints (CONFIRMED 2026-06-30 from auth.anny.co app CSS) */ --bb-success: #1BC98E; --bb-success-soft: rgba(27,201,142,.25); --bb-warning: #e2a04f; --bb-warning-soft: rgba(226,160,79,.25); --bb-danger: #E64759; --bb-danger-soft: rgba(230,71,89,.25); --bb-info: #00dbcb; --bb-info-soft: rgba(0,219,203,.12); /* neutrals / surfaces / text */ --bb-bg: #f3f4f6; /* app canvas */ --bb-panel: #ffffff; --bb-panel-dark: #e3e5ea; --bb-sidebar: #f3f4f6; --bb-topbar: #f3f3f3; --bb-input-bg: #e3e5ea; --bb-text: #414141; --bb-text-2: #5a5a5a; --bb-text-muted: #9d9d9d; --bb-border: #e2e2e2; --bb-border-dark: #c4c4c4; --bb-table-border: #e1e7e8; /* radius */ --r-sm:.25rem; --r:.5rem; --r-lg:1rem; --r-pill:10rem; /* shadow */ --shadow-min: 0 1px 2px rgba(190,190,190,.5); --shadow-card: 0 3px 6px rgba(190,190,190,.4); --shadow-drop: 0 4px 8px rgba(97,97,97,.25); --shadow-hover: 0 5px 25px rgba(184,184,184,.7); /* type */ --font-head:'Poppins', -apple-system, system-ui, sans-serif; --font-body:'Lato', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* ============================================================================ DARK MODE — mirrors Anny's live Nuxt app theme system. Anny uses 3 modes via a class: light (default), .dark, .system (follows the OS via prefers-color-scheme). Values below are ported verbatim from Anny's `body.dark {…}` token block (docs/recon/raw/anny-nuxt-entry.*.css). We apply the mode class to (not ) so the theme is set before first paint with no flash — modes + names are otherwise identical to Anny. Set by bibbot-theme.js; persisted in localStorage('bb-theme'). ============================================================================ */ /* token overrides shared by explicit-dark and system-dark */ html.dark, html.system.is-dark { /* primary stays Anny blue; alt accent = Anny orange */ --bb-primary: #396def; --bb-primary-hover: #2d56bd; --bb-primary-overlay:rgba(67,116,240,.12); --bb-primary-shadow: rgba(57,109,239,.5); --bb-accent: #ff9814; --bb-accent-soft: rgba(255,152,20,.14); /* semantic (Anny dark values) */ --bb-success: #21a970; --bb-success-soft: rgba(33,169,112,.22); --bb-warning: #ff7438; --bb-warning-soft: rgba(255,116,56,.22); --bb-danger: #d9333d; --bb-danger-soft: rgba(217,51,61,.24); --bb-info: #9747ff; --bb-info-soft: rgba(151,71,255,.22); /* surfaces / text (Anny: primary-bg #1a1a1a canvas, secondary-bg #2a2a2a panels) */ --bb-bg: #1a1a1a; --bb-panel: #2a2a2a; --bb-panel-dark: #363635; --bb-sidebar: #1a1a1a; --bb-topbar: #1f1f1f; --bb-input-bg: #333333; --bb-text: #f1f1f1; --bb-text-2: #c7c7d1; --bb-text-muted: #8f8f9b; --bb-border: #484848; --bb-border-dark: #5a5a5a; --bb-table-border: #3a3a3a; /* shadows become subtle light glows / deep drops on dark (Anny pattern) */ --shadow-min: 0 1px 2px rgba(62,62,62,.5); --shadow-card: 0 1px 4px hsla(0,0%,100%,.10); --shadow-drop: 0 5px 10px rgba(15,15,15,.8); --shadow-hover: 0 8px 28px rgba(0,0,0,.7); } /* fixes for surfaces/text that were hardcoded light and won't follow the tokens */ html.dark .btn-neutral:hover, html.system.is-dark .btn-neutral:hover { background: #414247; } html.dark .nav-item:hover, html.system.is-dark .nav-item:hover { background: rgba(255,255,255,.06); } html.dark .table tr:hover td, html.system.is-dark .table tr:hover td { background: rgba(255,255,255,.04); } html.dark .input[readonly], html.system.is-dark .input[readonly] { background: #262626; } html.dark .chip-warning, html.system.is-dark .chip-warning { color: var(--bb-warning); } html.dark .chip-info, html.system.is-dark .chip-info { color: #b98bff; } html.dark .banner-warn, html.system.is-dark .banner-warn { color: #ffcf9e; border-color: rgba(255,116,56,.35); } html.dark .note, html.system.is-dark .note { background: rgba(255,152,20,.10); border-color: rgba(255,152,20,.3); color: #e8c98a; } html.dark .gcard, html.system.is-dark .gcard { background: var(--bb-panel); } html.dark .runstrip, html.system.is-dark .runstrip { background: linear-gradient(90deg, var(--bb-primary-overlay), var(--bb-panel) 70%); } html.dark .tabbar, html.system.is-dark .tabbar { background: rgba(26,26,26,.9); } html.dark .sidebar, /* mobile fixed bottom bar */ html.system.is-dark .sidebar { background: var(--bb-sidebar); } @media (max-width: 640px) { html.dark .sidebar, html.system.is-dark .sidebar { background: rgba(26,26,26,.96); } } /* Anny's per-element visibility helpers */ .hidden-dark { display: initial; } .hidden-light { display: none; } html.dark .hidden-dark, html.system.is-dark .hidden-dark { display: none; } html.dark .hidden-light, html.system.is-dark .hidden-light { display: initial; } /* smooth cross-fade when switching themes */ body, .panel, .card, .sidebar, .topbar, .input, .chip, .nav-item, .gcard, .m-screen, .tabbar { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* floating Light / System / Dark switch injected by bibbot-theme.js */ .theme-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: inline-flex; gap: .1rem; padding: .25rem; background: var(--bb-panel); border: 1px solid var(--bb-border); border-radius: var(--r-pill); box-shadow: var(--shadow-card); } .theme-fab button { border: none; background: none; cursor: pointer; font: inherit; font-size: .95rem; line-height: 1; padding: .4rem .55rem; border-radius: var(--r-pill); color: var(--bb-text-2); } .theme-fab button.on { background: var(--bb-primary); color: #fff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--bb-text); background: var(--bb-bg); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.3; margin: 0; color: var(--bb-text); } h1 { font-size: 2.25rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } h5 { font-size: .95rem; } a { color: var(--bb-primary); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--bb-text-muted); } .text-2 { color: var(--bb-text-2); } .small { font-size: .75rem; } .wordmark { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; } .wordmark .dot { color: var(--bb-primary); } /* ---- buttons ---- */ .btn { font-family: var(--font-body); font-weight: 700; font-size: .9rem; border: none; border-radius: var(--r-sm); padding: .5rem .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s, box-shadow .15s, transform .1s; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--bb-primary); color: #fff; } .btn-primary:hover { background: var(--bb-primary-hover); } .btn-neutral { background: var(--bb-input-bg); color: var(--bb-text-2); } .btn-neutral:hover { background: #d6d9e0; } .btn-danger { background: var(--bb-danger); color: #fff; } .btn-danger:hover { filter: brightness(1.05); } .btn-link { background: none; color: var(--bb-primary); padding: .5rem .25rem; } .btn-link:hover { text-decoration: underline; } .btn-block { width: 100%; justify-content: center; } .btn-lg { padding: .7rem 1.2rem; font-size: 1rem; } .btn-sm { padding: .3rem .55rem; font-size: .78rem; } /* ---- inputs ---- */ label.field { display: block; margin-bottom: .85rem; } label.field > span { display: block; font-size: .82rem; font-weight: 700; color: var(--bb-text-2); margin-bottom: .3rem; } .input { width: 100%; background: var(--bb-input-bg); border: 1px solid transparent; border-radius: var(--r-sm); padding: .5rem .75rem; font-family: var(--font-body); font-size: .95rem; color: var(--bb-text); display: block; } .input::placeholder { color: var(--bb-text-muted); } .input:focus { outline: none; box-shadow: 0 0 0 3px var(--bb-primary-overlay); border-color: var(--bb-primary); } .input[readonly] { background: #eceef2; color: var(--bb-text-muted); } .input-row { display: flex; gap: .5rem; align-items: center; } /* ---- panels / cards ---- */ .panel { background: var(--bb-panel); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 1rem; margin-bottom: 1rem; } .panel-lg { border-radius: var(--r-lg); padding: 1.5rem; } .panel-head { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-text-muted); margin-bottom: .75rem; } .card { background: var(--bb-panel); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 1rem; margin-bottom: .75rem; transition: box-shadow .15s, transform .15s; } .card.selectable { cursor: pointer; } .card.selectable:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* ---- badges / chips ---- */ .chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; padding: .25em .6em; border-radius: var(--r); line-height: 1; white-space: nowrap; } .chip.pill { border-radius: var(--r-pill); } /* Anny's exact badge pattern: semantic-color text on a same-hue overlay tint */ .chip-success { background: var(--bb-success-soft); color: var(--bb-success); } .chip-warning { background: var(--bb-warning-soft); color: #b9772a; } .chip-danger { background: var(--bb-danger-soft); color: var(--bb-danger); } .chip-info { background: var(--bb-info-soft); color: #048b82; } .chip-primary { background: var(--bb-primary-overlay); color: var(--bb-primary); } .chip-neutral { background: var(--bb-input-bg); color: var(--bb-text-2); } .chip-dot::before { content:"●"; font-size: .7em; } /* ---- weekday / selectable pills ---- */ .daypill { display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; padding:.35rem .6rem; border-radius:var(--r-pill); font-size:.8rem; font-weight:700; background:var(--bb-input-bg); color:var(--bb-text-2); cursor:pointer; user-select:none; } .daypill.on { background: var(--bb-primary); color:#fff; } .daypill.off { opacity:.55; } /* ---- toggle ---- */ .toggle { position: relative; width: 2.4rem; height: 1.35rem; background: var(--bb-border-dark); border-radius: var(--r-pill); display: inline-block; vertical-align: middle; transition: background .15s; } .toggle::after { content:""; position:absolute; top:2px; left:2px; width:1.05rem; height:1.05rem; background:#fff; border-radius:50%; transition:left .15s; box-shadow: var(--shadow-min); } .toggle.on { background: var(--bb-primary); } .toggle.on::after { left: calc(100% - 1.15rem); } /* ---- tables ---- */ .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th { font-family: var(--font-head); font-weight: 600; text-align: left; color: var(--bb-text-2); padding: .6rem .75rem; border-bottom: 2px solid var(--bb-table-border); font-size: .82rem; } .table td { padding: .65rem .75rem; border-bottom: 1px solid var(--bb-table-border); } .table tr:hover td { background: #f7f8fa; } /* ============================================================================ App shell — sidebar + topbar + canvas ============================================================================ */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 224px; background: var(--bb-sidebar); flex-shrink: 0; padding: 1.1rem .8rem; border-right: 1px solid var(--bb-border); display: flex; flex-direction: column; } .sidebar .brand { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; padding: .25rem .6rem 1.4rem; letter-spacing: -.02em; } .sidebar .brand .dot { color: var(--bb-primary); } .nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-text-muted); padding: 1rem .6rem .35rem; } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: var(--r-sm); color: var(--bb-text-2); font-weight: 700; font-size: .92rem; cursor: pointer; margin-bottom: .1rem; } .nav-item:hover { background: rgba(0,0,0,.04); text-decoration: none; } .nav-item.active { background: var(--bb-primary); color: #fff; } .nav-item .ico { width: 1.1rem; text-align: center; opacity: .85; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { background: var(--bb-topbar); height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid var(--bb-border); } .topbar .title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; } .topbar .right { display: flex; align-items: center; gap: 1.1rem; } .topbar .bell { position: relative; font-size: 1.1rem; cursor: pointer; } .topbar .bell .dot { position:absolute; top:-2px; right:-3px; width:.5rem; height:.5rem; background:var(--bb-danger); border-radius:50%; } .topbar .user { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; cursor: pointer; } .avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bb-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: .85rem; } .canvas { flex: 1; padding: 1.5rem; max-width: 1080px; width: 100%; } /* ---- pre-auth centered layout ---- */ .center-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; } /* ---- tabs ---- */ .tabs { display: flex; background: var(--bb-input-bg); border-radius: var(--r-sm); padding: .25rem; margin-bottom: 1.1rem; } .tab { flex: 1; text-align: center; padding: .45rem; border-radius: var(--r-sm); font-weight: 700; font-size: .9rem; color: var(--bb-text-2); cursor: pointer; } .tab.active { background: var(--bb-panel); color: var(--bb-primary); box-shadow: var(--shadow-min); } /* ---- stepper ---- */ .stepper { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 1.2rem; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--bb-text-muted); font-weight: 700; } .step .num { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bb-input-bg); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; } .step.active .num { background: var(--bb-primary); color: #fff; } .step.active { color: var(--bb-text); } .step.done .num { background: var(--bb-success); color: #fff; } .step-line { flex: 1; height: 2px; background: var(--bb-border); min-width: 1rem; } /* ---- countdown strip ---- */ .runstrip { background: linear-gradient(90deg, var(--bb-primary-overlay), #fff 70%); border-left: 4px solid var(--bb-primary); border-radius: var(--r); padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; box-shadow: var(--shadow-min); } .runstrip .cd { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--bb-primary); letter-spacing: .01em; } .runstrip .lbl { font-size: .85rem; color: var(--bb-text-2); } /* ---- QR placeholder ---- */ .qr { width: 168px; height: 168px; border-radius: var(--r); background: repeating-conic-gradient(#1a1a1a 0% 25%, #fff 0% 50%) 50%/ 16px 16px; border: 8px solid #fff; box-shadow: var(--shadow-card); margin: 0 auto; } /* ---- misc layout helpers ---- */ .row { display: flex; gap: 1rem; } .row.wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .items-center { align-items: center; } .grow { flex: 1; } .stack-sm > * + * { margin-top: .5rem; } .gap-sm { gap: .5rem; } .mt { margin-top: 1rem; } .mt-sm { margin-top: .5rem; } .mb0 { margin-bottom: 0; } .divider { height: 1px; background: var(--bb-border); margin: 1rem 0; border: none; } .banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: var(--r); font-size: .9rem; margin-bottom: 1rem; } .banner-warn { background: var(--bb-warning-soft); color: #8a5a18; border: 1px solid #f0d9b5; } .banner-info { background: var(--bb-primary-overlay); color: var(--bb-primary); } .empty { text-align: center; color: var(--bb-text-muted); padding: 2rem 1rem; } /* mockup gallery framing (index.html only) */ .note { background:#fffbe6; border:1px solid #f5e08c; color:#7a6a1f; font-size:.8rem; padding:.5rem .75rem; border-radius:var(--r-sm); } /* ============================================================================ MOBILE — (A) responsive reflow of the desktop screens at phone width, (B) a phone-frame + bottom-tab-bar shell for dedicated mobile mockups. Mirrors Anny's mobile pattern (bottom tab bar, full-bleed hero, stacked cards). ============================================================================ */ /* (A) make the existing sidebar/topbar screens usable on phones */ @media (max-width: 640px) { .shell { flex-direction: column; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; width: auto; height: 62px; flex-direction: row; padding: .25rem; border-right: none; border-top: 1px solid var(--bb-border); background: rgba(243,244,246,.96); backdrop-filter: blur(8px); z-index: 50; } .sidebar .brand, .sidebar .nav-section { display: none; } .sidebar .nav-item { flex: 1; flex-direction: column; gap: 2px; justify-content: center; text-align: center; font-size: .6rem; padding: .3rem 0; margin: 0; } .sidebar .nav-item .ico { font-size: 1.15rem; } .sidebar .nav-item.active { background: none; color: var(--bb-primary); } .topbar { padding: 0 1rem; } .topbar .user { font-size: 0; gap: 0; } .topbar .user .avatar { font-size: .85rem; } /* clear the fixed 62px bottom nav bar: bar height + a comfortable gap + iOS safe area, so the editor's lower fields and the Save/Cancel bar are never hidden behind it. */ .canvas { padding: 1rem; padding-bottom: calc(62px + 1.75rem + env(safe-area-inset-bottom, 0px)); max-width: 100%; } .runstrip { flex-wrap: wrap; gap: .4rem; } .table { display: block; overflow-x: auto; white-space: nowrap; } .center-wrap { padding: 1.5rem 1rem; } } /* (B) phone frame for dedicated mobile preview cards */ .phone { width: 390px; height: 844px; margin: 1.5rem auto; border: 12px solid #111827; border-radius: 44px; background: var(--bb-panel); position: relative; overflow: hidden; box-shadow: var(--shadow-hover); } .phone .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 28px; background: #111827; border-radius: 0 0 18px 18px; z-index: 6; } .m-screen { position: absolute; inset: 0; overflow-y: auto; background: var(--bb-bg); } .m-statusbar { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: .4rem 1.5rem 0; font-size: .78rem; font-weight: 700; } .m-header { display: flex; align-items: center; justify-content: space-between; padding: .3rem 1rem .5rem; } .m-header .h { font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; } .m-body { padding: 0 1rem 90px; } .m-hero { margin: 0 0 1rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--bb-primary), #6e8eff 60%, #8a3aff); color: #fff; box-shadow: var(--shadow-card); } .m-hero .cd { font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; letter-spacing: .01em; } .m-hero .lbl { font-size: .82rem; opacity: .9; } .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--bb-border); z-index: 6; } .tab-i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .62rem; font-weight: 700; color: var(--bb-text-muted); } .tab-i .ic { font-size: 1.2rem; line-height: 1; } .tab-i.active { color: var(--bb-primary); } /* full-bleed hero variant (edge-to-edge, Anny-style greeting) */ .m-hero-bleed { margin: 0 -1rem 1rem; border-radius: 0; }