/* * Fresh Connects — Design v2 shared styles * * Applies the Session 80 design language across all dashboards and * child pages. Intentionally scoped to .main-content so the global * sidebar (injected by nav-manager.js) is NOT restyled — that * preserves every nav tweak that's already shipped. * * To apply this style to a new page: * 1. Add * 2. Add a body class for role accent: * body.v2-role-admin (slate-blue) * body.v2-role-seller (harvest gold) * body.v2-role-shop (coral) * body.v2-role-crews (teal) * 3. Optionally add a ticker tape inside .main-content: *
*
...items + ✽ separators...
*
* 4. Load Google Fonts (Newsreader + Instrument Sans) in . * * Zero changes to existing DOM IDs, event handlers, or data-fetch * targets anywhere. Every button/tab/nav link continues to work. */ :root { --v2-paper: #faf7f2; --v2-paper-warm: #f2ede2; --v2-ink: #1a2b24; --v2-ink-soft: #34443d; --v2-muted: #7d8680; --v2-rule: #d2dbd2; --v2-brand: #2d6a4f; --v2-brand-deep: #1b4332; --v2-brand-soft: rgba(45, 106, 79, 0.12); --v2-err: #9a3628; --v2-warn: #d97706; /* Default role accent is the brand — roles override below. */ --v2-role-accent: var(--v2-brand); } /* Mobile horizontal-scroll safety net. Applies only to narrow viewports so we don't clip legit horizontal scroll containers on desktop (tables, carousels). */ @media (max-width: 768px) { html, body { overflow-x: clip; } .main-content { max-width: 100vw; min-width: 0; } } /* Role-specific accent (used sparingly — one small visual moment per role) */ body.v2-role-admin { --v2-role-accent: #3a6b8c; } /* slate blue */ body.v2-role-seller { --v2-role-accent: #b8860b; } /* harvest gold */ body.v2-role-shop { --v2-role-accent: #d96f4a; } /* coral (deals only) */ body.v2-role-crews { --v2-role-accent: #3e8e8a; } /* teal */ /* ============================================================ * Ticker tape — distinctive "scrolling capability strip" header * ============================================================ */ .v2-ticker { position: sticky; top: 0; z-index: 6; background: var(--v2-ink); color: #faf7f2; height: 2.4rem; display: flex; align-items: center; overflow: hidden; font-family: "Instrument Sans", sans-serif; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; border-bottom: 1px solid rgba(250, 247, 242, 0.15); } .v2-ticker::before { content: attr(data-badge); padding: 0 1rem; background: var(--v2-brand); color: #faf7f2; height: 100%; display: inline-flex; align-items: center; font-weight: 600; letter-spacing: 0.3em; flex-shrink: 0; } .v2-ticker::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4rem; background: linear-gradient(to right, transparent, var(--v2-ink) 60%); pointer-events: none; } .v2-ticker-track { display: flex; white-space: nowrap; animation: v2TickerScroll 45s linear infinite; } .v2-ticker:hover .v2-ticker-track { animation-play-state: paused; } .v2-ticker-track .item { padding: 0 1.2rem; color: rgba(250, 247, 242, 0.88); } .v2-ticker-track .item strong { color: #faf7f2; font-weight: 600; } .v2-ticker-track .item .drop { color: var(--v2-role-accent); font-weight: 600; } .v2-ticker-track .sep { color: var(--v2-brand); font-size: 0.6rem; align-self: center; } @keyframes v2TickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ * Dashboard header — editorial restyle of existing .dashboard-header * Scoped to .main-content so sidebar headers are untouched. * ============================================================ */ .main-content .dashboard-header { padding-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--v2-ink); position: relative; } .main-content .dashboard-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--v2-ink); } .main-content .dashboard-header h1 { font-family: "Newsreader", serif; font-weight: 500; font-style: italic; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--v2-ink); margin: 0.35rem 0 0.25rem; } .main-content .dashboard-header h1::before { content: "Today · "; color: var(--v2-brand); font-style: normal; font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; display: block; margin-bottom: 0.35rem; } .main-content .dashboard-header .business-name, .main-content .dashboard-header .date { font-family: "Newsreader", serif; font-size: 1rem; color: var(--v2-muted); margin: 0; } .main-content .dashboard-header .business-name { color: var(--v2-ink); font-style: italic; } .main-content .dashboard-header .admin-badge { font-family: "Newsreader", serif; font-style: italic; font-size: 0.95rem; color: var(--v2-role-accent); } /* ============================================================ * Section headings (editorial italic serif) * ============================================================ */ .main-content .section-header h2, .main-content > h2 { font-family: "Newsreader", serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; } /* ============================================================ * Brand-green action buttons + view-all links * ============================================================ */ .main-content .action-btn.primary, .main-content .btn-primary, .main-content .fc-btn-primary { background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; } .main-content .action-btn.primary:hover, .main-content .btn-primary:hover, .main-content .fc-btn-primary:hover { background: var(--v2-brand-deep) !important; border-color: var(--v2-brand-deep) !important; } .main-content .view-all { color: var(--v2-brand); } .main-content .view-all:hover { color: var(--v2-brand-deep); } .main-content .value.success, .main-content .metric-value { color: var(--v2-brand); } /* Retailer-only: deal badges get the role accent (coral) */ body.v2-role-shop .main-content .badge-deal, body.v2-role-shop .main-content .hot-deal-badge, body.v2-role-shop .main-content .price-drop { color: var(--v2-role-accent) !important; } /* Services-only: in-progress badge gets the role accent (teal) */ body.v2-role-crews .main-content .status-badge.in-progress { background: rgba(62, 142, 138, 0.12); color: var(--v2-role-accent); } /* ============================================================ * Auth pages — signup / legacy .login-container pages * (forgot-password + reset-password already use their own * consistent .login-card pattern; these rules extend that to * signup.html + any other "centered form card" page.) * ============================================================ */ body.v2-auth { background: var(--v2-paper); font-family: "Instrument Sans", system-ui, sans-serif; color: var(--v2-ink); } body.v2-auth .login-container { background: var(--v2-paper); } body.v2-auth .login-header h1 { font-family: "Newsreader", serif; font-style: italic; font-weight: 600; color: var(--v2-ink); letter-spacing: -0.01em; } body.v2-auth .login-header h2 { font-family: "Newsreader", serif; font-style: italic; font-weight: 500; color: var(--v2-ink); letter-spacing: -0.01em; } body.v2-auth .login-header p, body.v2-auth .login-header .subtitle { font-family: "Newsreader", serif; color: var(--v2-muted); } body.v2-auth .form-section h3 { font-family: "Newsreader", serif; font-style: italic; font-weight: 500; color: var(--v2-ink); } body.v2-auth .btn-primary, body.v2-auth .btn.btn-primary { background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: var(--v2-paper) !important; } body.v2-auth .btn-primary:hover, body.v2-auth .btn.btn-primary:hover { background: var(--v2-brand-deep) !important; border-color: var(--v2-brand-deep) !important; } body.v2-auth a { color: var(--v2-brand); } body.v2-auth a:hover { color: var(--v2-brand-deep); } body.v2-auth .account-type-option input[type="radio"]:checked ~ .option-card { border-color: var(--v2-brand); background: var(--v2-brand-soft); } body.v2-auth .success-message .success-icon { color: var(--v2-brand); } body.v2-auth .success-message h2 { font-family: "Newsreader", serif; font-style: italic; color: var(--v2-ink); } body.v2-auth .pending-info { background: var(--v2-brand-soft); border-left: 3px solid var(--v2-brand); } /* ============================================================ * Responsive + accessibility * ============================================================ */ @media (max-width: 640px) { .v2-ticker { height: 2.1rem; font-size: 0.62rem; letter-spacing: 0.18em; } .v2-ticker::before { padding: 0 0.75rem; } } @media (prefers-reduced-motion: reduce) { .v2-ticker-track { animation: none; } }