/* ==========================================================================
fcc-app-shell-v1.css
Phase 1A — App Shell Rebrand (CSS-first, additive layer)
Loaded AFTER styles.css so its rules cascade-override only the specific
surfaces we re-skin. EVERY rule is scoped under body.fcc-app-shell-v1
so removing that class on instantly disables the new shell
without touching anything else.
Touch surfaces (visual only — no DOM removals, no handler changes):
- Tokens (--fcc-* palette, radii, shadows, spacing, z-index)
- Body background (lavender wash)
- Main header (.main-header / .main-header-inner / .header-brand)
- Mobile top bar (.app-bar-mobile)
- Sidebar nav (#mainNav / .sidebar-nav)
- Sidebar sections, section heads, nav links, account card, drawer brand
- Sidebar drawer footer
- Bottom nav (#bottomNav / .bottom-nav-item) -- already in DOM at line 3793
- Page canvas (.main-with-sidebar, .page)
- Sidebar backdrop (mobile drawer)
- Splash screen passthrough (we do not restyle splash here)
DO NOT touch in this file:
- Module-specific content (cards, lists, recipe tiles, calendar cells, etc.)
- Auth/PIN/invite flow visuals beyond inheriting the background
- Existing CSS variables in :root (we declare new tokens under the
.fcc-app-shell-v1 scope only)
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens — scoped to .fcc-app-shell-v1, not :root, to avoid
leaking into public/auth/accept-invite pages.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 {
/* Surface palette — soft lavender/pink premium */
--fcc-color-bg: #F6F4FB;
--fcc-color-bg-gradient: linear-gradient(180deg, #FBF7FF 0%, #F4F0FA 40%, #F6F4FB 100%);
--fcc-color-surface: #FFFFFF;
--fcc-color-surface-elev: #FFFFFF;
--fcc-color-surface-tint: rgba(124, 58, 237, 0.04);
--fcc-color-surface-glass: rgba(255, 255, 255, 0.72);
/* Text */
--fcc-color-text: #1B1230;
--fcc-color-text-muted: #5C4F77;
--fcc-color-text-subtle: #8A7CA6;
--fcc-color-text-on-accent: #FFFFFF;
/* Accents */
--fcc-color-accent: #7C3AED;
--fcc-color-accent-strong: #6D28D9;
--fcc-color-accent-soft: rgba(124, 58, 237, 0.12);
--fcc-color-accent-ring: rgba(124, 58, 237, 0.32);
--fcc-color-pink: #F472B6;
--fcc-color-pink-soft: rgba(244, 114, 182, 0.14);
--fcc-color-accent-gradient: linear-gradient(135deg, #7C3AED 0%, #C084FC 50%, #F472B6 100%);
/* Onix dark surface */
--fcc-color-onix-bg: #1B1230;
--fcc-color-onix-bg-2: #2A1844;
--fcc-color-onix-gradient: linear-gradient(135deg, #1B1230 0%, #2A1844 60%, #3A1E5C 100%);
--fcc-color-onix-text: #F5F0FF;
--fcc-color-onix-text-muted: #B7A8D8;
/* Status */
--fcc-color-success: #22C55E;
--fcc-color-warn: #F59E0B;
--fcc-color-danger: #FB7185;
--fcc-color-info: #6366F1;
/* Borders & dividers */
--fcc-color-border: rgba(124, 58, 237, 0.10);
--fcc-color-border-strong: rgba(124, 58, 237, 0.18);
--fcc-color-divider: rgba(27, 18, 48, 0.06);
/* Radii */
--fcc-radius-xs: 6px;
--fcc-radius-sm: 10px;
--fcc-radius-md: 14px;
--fcc-radius-lg: 20px;
--fcc-radius-xl: 28px;
--fcc-radius-pill: 999px;
/* Shadows */
--fcc-shadow-card: 0 4px 24px rgba(74, 31, 122, 0.06), 0 1px 2px rgba(27, 18, 48, 0.04);
--fcc-shadow-card-hover: 0 12px 36px rgba(74, 31, 122, 0.12), 0 2px 4px rgba(27, 18, 48, 0.06);
--fcc-shadow-overlay: 0 24px 64px rgba(27, 18, 48, 0.18);
--fcc-shadow-bottom-nav: 0 -8px 32px rgba(74, 31, 122, 0.08);
--fcc-shadow-onix: 0 16px 48px rgba(67, 33, 110, 0.32);
/* Spacing scale (4px base) */
--fcc-space-1: 4px;
--fcc-space-2: 8px;
--fcc-space-3: 12px;
--fcc-space-4: 16px;
--fcc-space-5: 20px;
--fcc-space-6: 24px;
--fcc-space-7: 32px;
--fcc-space-8: 48px;
--fcc-space-9: 64px;
/* Typography */
--fcc-font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
--fcc-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
/* Z-index scale */
--fcc-z-page: 1;
--fcc-z-header: 30;
--fcc-z-bottomnav: 40;
--fcc-z-drawer: 50;
--fcc-z-backdrop: 49;
--fcc-z-sheet: 60;
--fcc-z-toast: 70;
--fcc-z-modal: 80;
--fcc-z-onix: 85;
/* Safe-area + layout */
--fcc-safe-top: env(safe-area-inset-top, 0px);
--fcc-safe-bottom: env(safe-area-inset-bottom, 0px);
--fcc-safe-left: env(safe-area-inset-left, 0px);
--fcc-safe-right: env(safe-area-inset-right, 0px);
--fcc-sidebar-width: 264px;
--fcc-sidebar-width-md: 240px;
--fcc-bottomnav-height: 64px;
--fcc-mobile-header-h: 56px;
/* Motion */
--fcc-ease: cubic-bezier(0.22, 1, 0.36, 1);
--fcc-dur-fast: 140ms;
--fcc-dur-base: 200ms;
--fcc-dur-slow: 280ms;
/* Phase 1A spec token aliases (--fcc-app-*) ----------------------------
Provided for consumers that author against the design-system spec
prefix. Each alias maps to the existing canonical token so both
naming systems stay in sync. */
--fcc-app-bg: #f8f5ff;
--fcc-app-surface: rgba(255, 255, 255, 0.86);
--fcc-app-surface-strong: rgba(255, 255, 255, 0.96);
--fcc-app-ink: #11142f;
--fcc-app-muted: #66708b;
--fcc-app-purple: #7c3aed;
--fcc-app-purple-2: #a855f7;
--fcc-app-pink: #ec5ab7;
--fcc-app-blue: #3b82f6;
--fcc-app-green: #22c55e;
--fcc-app-orange: #fb923c;
--fcc-app-red: #fb7185;
--fcc-app-line: rgba(124, 58, 237, 0.12);
--fcc-app-shadow: 0 24px 70px rgba(70, 40, 120, 0.12);
--fcc-app-radius-lg: 22px;
--fcc-app-radius-xl: 30px;
}
/* --------------------------------------------------------------------------
2. Global shell background + base typography (kept narrow on purpose)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 {
background: var(--fcc-color-bg-gradient);
color: var(--fcc-color-text);
font-family: var(--fcc-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
body.fcc-app-shell-v1 *,
body.fcc-app-shell-v1 *::before,
body.fcc-app-shell-v1 *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
3. Main header / desktop top bar
Existing markup:
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .main-header {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: saturate(160%) blur(18px);
-webkit-backdrop-filter: saturate(160%) blur(18px);
border-bottom: 1px solid var(--fcc-color-border);
z-index: var(--fcc-z-header);
}
body.fcc-app-shell-v1 .main-header-inner {
padding: var(--fcc-space-4) var(--fcc-space-6);
gap: var(--fcc-space-5);
}
body.fcc-app-shell-v1 .header-brand .header-logo-wide {
filter: none;
height: 40px;
width: auto;
display: block;
}
/* The new LOGO-WOFCC is a square mark — pair it with a wordmark. */
body.fcc-app-shell-v1 .header-brand {
display: flex;
align-items: center;
gap: var(--fcc-space-3);
flex-shrink: 0;
}
body.fcc-app-shell-v1 .header-brand .fcc-app-shell-logo {
height: 44px;
width: 44px;
object-fit: contain;
}
/* Desktop header layout: logo left | content middle | controls right.
We don't move the actual elements (preserves existing handlers) —
just re-flex the inner row. */
body.fcc-app-shell-v1 .main-header-inner {
display: flex;
align-items: center;
gap: var(--fcc-space-5);
width: min(100%, 1440px);
margin-inline: auto;
}
body.fcc-app-shell-v1 .header-brand {
margin-right: var(--fcc-space-4);
}
body.fcc-app-shell-v1 .header-subtitle {
display: none; /* hide the legacy subtitle in the new header layout */
}
body.fcc-app-shell-v1 #headerControls {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--fcc-space-2);
}
/* Hide legacy desktop logo at very narrow widths where the mobile bar handles it */
@media (max-width: 767px) {
body.fcc-app-shell-v1 .main-header-inner {
display: none;
}
}
body.fcc-app-shell-v1 .header-subtitle {
color: var(--fcc-color-text-muted);
font-size: 13px;
margin: 2px 0 0;
}
body.fcc-app-shell-v1 #headerControls {
display: flex;
align-items: center;
gap: var(--fcc-space-2);
}
/* --------------------------------------------------------------------------
4. Mobile app bar
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .app-bar-mobile {
background: rgba(255, 255, 255, 0.82);
backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px);
border-bottom: 1px solid var(--fcc-color-border);
padding-top: var(--fcc-safe-top);
min-height: calc(var(--fcc-mobile-header-h) + var(--fcc-safe-top));
}
body.fcc-app-shell-v1 .sidebar-toggle {
background: var(--fcc-color-accent-soft);
border-radius: var(--fcc-radius-md);
color: var(--fcc-color-accent);
transition: background var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .sidebar-toggle:hover,
body.fcc-app-shell-v1 .sidebar-toggle:focus-visible {
background: var(--fcc-color-accent-ring);
}
body.fcc-app-shell-v1 .app-bar-brand .app-bar-logo-wide {
height: 32px;
width: 32px;
object-fit: contain;
}
body.fcc-app-shell-v1 .app-bar-profile-btn {
background: var(--fcc-color-surface-glass);
border: 1px solid var(--fcc-color-border);
border-radius: var(--fcc-radius-pill);
box-shadow: 0 1px 2px rgba(27, 18, 48, 0.05);
}
body.fcc-app-shell-v1 .app-bar-profile-name {
color: var(--fcc-color-text);
font-weight: 600;
}
/* --------------------------------------------------------------------------
5. Sidebar nav (#mainNav)
- Account card at top
- Drawer brand block
- Dashboard top items
- 7 .sidebar-section blocks
- Drawer footer at bottom
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .sidebar-nav {
background: linear-gradient(180deg, #FFFFFF 0%, #FBF7FF 100%);
border-right: 1px solid var(--fcc-color-border);
box-shadow: 1px 0 24px rgba(74, 31, 122, 0.04);
color: var(--fcc-color-text);
padding-top: calc(var(--fcc-safe-top) + var(--fcc-space-3));
}
/* Drawer brand block — sits below account card on desktop, top on mobile drawer */
body.fcc-app-shell-v1 .drawer-brand {
display: flex;
align-items: center;
gap: var(--fcc-space-3);
padding: var(--fcc-space-4) var(--fcc-space-5);
margin: 0 var(--fcc-space-3) var(--fcc-space-3);
background: var(--fcc-color-surface-tint);
border-radius: var(--fcc-radius-lg);
}
body.fcc-app-shell-v1 .drawer-brand-logo {
width: 36px;
height: 36px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.18);
}
body.fcc-app-shell-v1 .drawer-brand-title {
font-weight: 700;
font-size: 15px;
color: var(--fcc-color-text);
letter-spacing: -0.01em;
}
body.fcc-app-shell-v1 .drawer-brand-subtitle {
font-size: 12px;
color: var(--fcc-color-text-muted);
}
/* Section heads (group titles) */
body.fcc-app-shell-v1 .sidebar-section {
margin: 0 var(--fcc-space-3) var(--fcc-space-2);
background: transparent;
box-shadow: none;
}
body.fcc-app-shell-v1 .sidebar-section-head {
background: transparent;
border: 0;
width: 100%;
text-align: left;
font-family: var(--fcc-font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fcc-color-text-subtle);
padding: var(--fcc-space-3) var(--fcc-space-4);
border-radius: var(--fcc-radius-sm);
cursor: pointer;
transition: color var(--fcc-dur-fast) var(--fcc-ease), background var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .sidebar-section-head:hover {
color: var(--fcc-color-text);
background: var(--fcc-color-surface-tint);
}
body.fcc-app-shell-v1 .sidebar-section-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
background: transparent;
box-shadow: none;
}
/* Dashboard top list (Home + Manage Widgets) sits before any .sidebar-section */
body.fcc-app-shell-v1 .sidebar-dashboard {
list-style: none;
margin: 0 var(--fcc-space-3) var(--fcc-space-3);
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
background: transparent;
box-shadow: none;
}
body.fcc-app-shell-v1 .drawer-section,
body.fcc-app-shell-v1 .drawer-group {
background: transparent;
box-shadow: none;
}
/* Nav links */
body.fcc-app-shell-v1 .sidebar-nav .nav-link {
display: flex;
align-items: center;
gap: var(--fcc-space-3);
padding: 10px var(--fcc-space-4);
border-radius: var(--fcc-radius-md);
background: rgba(255, 255, 255, 0.52);
border: 1px solid rgba(124, 58, 237, 0.08);
box-shadow: none;
font-family: var(--fcc-font-body);
font-size: 14px;
font-weight: 600;
color: var(--fcc-color-text-muted);
text-decoration: none;
transition: background var(--fcc-dur-fast) var(--fcc-ease),
color var(--fcc-dur-fast) var(--fcc-ease),
transform var(--fcc-dur-fast) var(--fcc-ease);
position: relative;
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link .nav-emoji {
font-size: 16px;
width: 22px;
text-align: center;
filter: saturate(110%);
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link .nav-label-text {
flex: 1 1 auto;
min-width: 0;
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link:not(.active):hover {
background: rgba(255, 255, 255, 0.78);
color: var(--fcc-color-text);
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link.active {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(236, 90, 183, 0.08));
color: var(--fcc-color-accent-strong);
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link.active::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
border-radius: 2px;
background: var(--fcc-color-accent);
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link.nav-link-sub {
font-size: 13px;
font-weight: 500;
color: var(--fcc-color-text-subtle);
padding-left: calc(var(--fcc-space-4) + 22px + var(--fcc-space-3));
}
/* Nav badges (unread counts, etc.) */
body.fcc-app-shell-v1 .sidebar-nav .nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: var(--fcc-radius-pill);
background: var(--fcc-color-accent);
color: var(--fcc-color-text-on-accent);
font-size: 11px;
font-weight: 700;
margin-left: auto;
}
body.fcc-app-shell-v1 .sidebar-nav .nav-badge.muted {
background: var(--fcc-color-divider);
color: var(--fcc-color-text-muted);
}
/* --------------------------------------------------------------------------
6. Sidebar account card (#sidebarAccountCard)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .sidebar-account-card {
margin: var(--fcc-space-3);
padding: var(--fcc-space-3);
background: var(--fcc-color-surface);
border: 1px solid var(--fcc-color-border);
border-radius: var(--fcc-radius-lg);
box-shadow: var(--fcc-shadow-card);
}
body.fcc-app-shell-v1 .account-card-main {
display: flex;
align-items: center;
gap: var(--fcc-space-3);
cursor: pointer;
}
body.fcc-app-shell-v1 .account-avatar {
width: 40px;
height: 40px;
border-radius: var(--fcc-radius-pill);
background: var(--fcc-color-accent-gradient);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
position: relative;
box-shadow: 0 4px 10px rgba(124, 58, 237, 0.24);
}
body.fcc-app-shell-v1 .account-avatar img {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
body.fcc-app-shell-v1 .account-name {
font-weight: 700;
font-size: 14px;
color: var(--fcc-color-text);
line-height: 1.2;
}
body.fcc-app-shell-v1 .account-sub {
font-size: 12px;
color: var(--fcc-color-text-muted);
margin-top: 1px;
}
body.fcc-app-shell-v1 .account-chevron {
margin-left: auto;
color: var(--fcc-color-text-subtle);
font-size: 12px;
transition: transform var(--fcc-dur-base) var(--fcc-ease);
}
/* Chevron rotates when the dropdown is open (multiple flag patterns
in use by existing handlers — support both). */
body.fcc-app-shell-v1 .sidebar-account-card[data-open="true"] .account-chevron,
body.fcc-app-shell-v1 .account-card-main[aria-expanded="true"] .account-chevron,
body.fcc-app-shell-v1 .account-card-main.open .account-chevron {
transform: rotate(180deg);
}
/* Make the trigger row look like a button */
body.fcc-app-shell-v1 .account-card-main {
cursor: pointer;
padding: 4px 4px 4px 0;
border-radius: var(--fcc-radius-md);
transition: background var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .account-card-main:hover {
background: var(--fcc-color-surface-tint);
}
body.fcc-app-shell-v1 .account-dropdown {
margin-top: var(--fcc-space-3);
padding-top: var(--fcc-space-3);
border-top: 1px solid var(--fcc-color-divider);
display: flex;
flex-direction: column;
gap: 2px;
background: transparent;
color: var(--fcc-color-text);
}
/* Honor the [hidden] attribute — display:flex above otherwise wins
over the browser default `[hidden] { display: none }`. */
body.fcc-app-shell-v1 .account-dropdown[hidden] {
display: none !important;
}
/* Account item buttons inside the dropdown must look like soft rows on
the light surface — not dark/blue/danger by default. */
body.fcc-app-shell-v1 .account-dropdown .account-item {
background: transparent;
color: var(--fcc-color-text);
border: 0;
}
body.fcc-app-shell-v1 .account-dropdown .account-item:hover {
background: var(--fcc-color-surface-tint);
color: var(--fcc-color-accent-strong);
}
body.fcc-app-shell-v1 .account-dropdown .account-item.danger {
color: var(--fcc-color-danger);
}
body.fcc-app-shell-v1 .account-dropdown .account-item.danger:hover {
background: rgba(251, 113, 133, 0.10);
}
body.fcc-app-shell-v1 .account-item {
display: flex;
align-items: center;
gap: var(--fcc-space-3);
width: 100%;
padding: 10px var(--fcc-space-3);
background: transparent;
border: 0;
border-radius: var(--fcc-radius-md);
font-family: var(--fcc-font-body);
font-size: 13px;
font-weight: 600;
color: var(--fcc-color-text-muted);
cursor: pointer;
text-align: left;
transition: background var(--fcc-dur-fast) var(--fcc-ease), color var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .account-item:hover {
background: var(--fcc-color-surface-tint);
color: var(--fcc-color-text);
}
body.fcc-app-shell-v1 .account-item.danger {
color: var(--fcc-color-danger);
}
body.fcc-app-shell-v1 .account-item.danger:hover {
background: rgba(251, 113, 133, 0.10);
}
body.fcc-app-shell-v1 .account-divider {
height: 1px;
background: var(--fcc-color-divider);
margin: var(--fcc-space-2) 0;
}
/* --------------------------------------------------------------------------
7. Sidebar drawer footer (mobile drawer auth actions)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .sidebar-drawer-footer {
border-top: 1px solid var(--fcc-color-divider);
padding: var(--fcc-space-4) var(--fcc-space-5);
padding-bottom: calc(var(--fcc-space-5) + var(--fcc-safe-bottom));
background: var(--fcc-color-surface-tint);
}
body.fcc-app-shell-v1 .sidebar-drawer-user {
font-weight: 700;
color: var(--fcc-color-text);
margin-bottom: var(--fcc-space-2);
}
body.fcc-app-shell-v1 .sidebar-drawer-mode-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fcc-color-text-subtle);
display: block;
margin-bottom: var(--fcc-space-2);
}
body.fcc-app-shell-v1 .sidebar-drawer-mode-select {
width: 100%;
padding: 10px var(--fcc-space-3);
border-radius: var(--fcc-radius-md);
border: 1px solid var(--fcc-color-border-strong);
background: var(--fcc-color-surface);
color: var(--fcc-color-text);
font-weight: 600;
font-family: var(--fcc-font-body);
}
body.fcc-app-shell-v1 .sidebar-drawer-link {
display: block;
margin-top: var(--fcc-space-3);
padding: 10px var(--fcc-space-3);
border-radius: var(--fcc-radius-md);
background: var(--fcc-color-surface);
border: 1px solid var(--fcc-color-border);
color: var(--fcc-color-text);
font-weight: 600;
text-decoration: none;
}
body.fcc-app-shell-v1 .sidebar-drawer-auth-actions {
display: flex;
flex-direction: column;
gap: var(--fcc-space-2);
margin-top: var(--fcc-space-3);
}
/* --------------------------------------------------------------------------
8. Sidebar backdrop (mobile drawer scrim)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .sidebar-backdrop {
background: rgba(27, 18, 48, 0.32);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: var(--fcc-z-backdrop);
transition: opacity var(--fcc-dur-base) var(--fcc-ease);
}
/* --------------------------------------------------------------------------
9. Page canvas
... pages ...
-------------------------------------------------------------------------- */
/* Phase 1A spec: every active container wrapper inherits the new app
background. Listed explicitly (per spec) so the lavender wash reaches
every page consistently. */
body.fcc-app-shell-v1 .main-with-sidebar,
body.fcc-app-shell-v1 .main-content,
body.fcc-app-shell-v1 .page,
body.fcc-app-shell-v1 .page.active,
body.fcc-app-shell-v1 .dashboard-page,
body.fcc-app-shell-v1 #dashboard {
background: transparent;
color: var(--fcc-color-text);
}
body.fcc-app-shell-v1 .page {
/* Existing .page { display: none; } from styles.css remains the source of
truth for show/hide. We only adjust spacing + transitions here. */
transition: opacity var(--fcc-dur-base) var(--fcc-ease),
transform var(--fcc-dur-base) var(--fcc-ease);
}
/* Phase 1A fix: clear any legacy hard-coded backgrounds on common
module wrappers so the body gradient shows through every page. */
body.fcc-app-shell-v1 .page > .section-card,
body.fcc-app-shell-v1 .page > .two-col,
body.fcc-app-shell-v1 .page > .container,
body.fcc-app-shell-v1 .page .ios-page-shell,
body.fcc-app-shell-v1 .page.fcc-ios-page {
background-color: transparent;
}
body.fcc-app-shell-v1 .page.active {
opacity: 1;
transform: translateY(0);
animation: fcc-page-in var(--fcc-dur-base) var(--fcc-ease);
}
@keyframes fcc-page-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------------------------------------------------
10. Bottom nav (#bottomNav — already in DOM at app/index.html:3793)
Existing markup uses .bottom-nav, .bottom-nav-item, .bottom-nav-icon,
.bottom-nav-label, .bottom-nav-more. We restyle without renaming.
Visible only on viewports < 768px. Above that, sidebar is the nav.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .bottom-nav {
display: none;
}
@media (max-width: 767px) {
body.fcc-app-shell-v1 .bottom-nav {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--fcc-z-bottomnav);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(160%) blur(22px);
-webkit-backdrop-filter: saturate(160%) blur(22px);
border-top: 1px solid var(--fcc-color-border);
box-shadow: var(--fcc-shadow-bottom-nav);
padding: 8px 4px calc(8px + var(--fcc-safe-bottom));
align-items: stretch;
justify-content: space-around;
gap: 4px;
/* Override the existing aria-hidden visual default */
visibility: visible;
}
body.fcc-app-shell-v1 .bottom-nav-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 4px;
min-height: 52px;
color: var(--fcc-color-text-subtle);
background: transparent;
border: 0;
border-radius: var(--fcc-radius-md);
text-decoration: none;
cursor: pointer;
transition: color var(--fcc-dur-fast) var(--fcc-ease),
background var(--fcc-dur-fast) var(--fcc-ease),
transform var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .bottom-nav-icon {
font-size: 20px;
line-height: 1;
}
body.fcc-app-shell-v1 .bottom-nav-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.fcc-app-shell-v1 .bottom-nav-item:hover,
body.fcc-app-shell-v1 .bottom-nav-item:focus-visible {
color: var(--fcc-color-accent);
background: var(--fcc-color-accent-soft);
}
body.fcc-app-shell-v1 .bottom-nav-item.active {
color: var(--fcc-color-accent-strong);
}
body.fcc-app-shell-v1 .bottom-nav-item.active .bottom-nav-icon {
transform: scale(1.08);
}
/* Page padding so content clears the bottom nav */
body.fcc-app-shell-v1 .main-with-sidebar {
padding-bottom: calc(var(--fcc-bottomnav-height) + var(--fcc-safe-bottom) + var(--fcc-space-4));
}
}
/* --------------------------------------------------------------------------
11. Sidebar / drawer responsive behavior
On desktop the sidebar is part of the .main-with-sidebar grid (its
layout is already handled by styles.css). We only re-skin colors and
borders above; below 768px the existing styles already convert
#mainNav into a fixed drawer toggled via #sidebarToggle.
-------------------------------------------------------------------------- */
/* Desktop sidebar width tuning */
@media (min-width: 768px) {
body.fcc-app-shell-v1 .sidebar-nav {
width: var(--fcc-sidebar-width);
}
}
@media (min-width: 768px) and (max-width: 1099px) {
body.fcc-app-shell-v1 .sidebar-nav {
width: var(--fcc-sidebar-width-md);
}
}
/* Mobile drawer treatment */
@media (max-width: 767px) {
body.fcc-app-shell-v1 .sidebar-nav {
box-shadow: 12px 0 32px rgba(27, 18, 48, 0.12);
border-right: 0;
border-top-right-radius: var(--fcc-radius-xl);
border-bottom-right-radius: var(--fcc-radius-xl);
z-index: var(--fcc-z-drawer);
}
body.fcc-app-shell-v1 .drawer-brand {
margin-top: var(--fcc-space-4);
}
}
/* --------------------------------------------------------------------------
12. Splash screen passthrough
We do NOT restyle the splash — the existing premium splash work
(FCCSplashScreen, fcc-splash-screen) is current. We just ensure the
splash background blends with our new shell background once
fcc-app-shell-v1 is applied.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .app-splash {
/* No override — keep existing splash visuals intact. */
}
/* --------------------------------------------------------------------------
13. Auth-screen passthrough
When body has both `fcc-auth-screen` AND `fcc-app-shell-v1`, the
existing hide rules in styles.css:2154+ still apply (sidebar etc.
are display:none). The new background still shows.
-------------------------------------------------------------------------- */
body.fcc-auth-screen.fcc-app-shell-v1 {
/* Nothing to do — existing fcc-auth-screen hide rules in styles.css
remain authoritative. */
}
/* --------------------------------------------------------------------------
14. Focus-visible polish (accessibility consistency)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 :focus-visible {
outline: 2px solid var(--fcc-color-accent);
outline-offset: 2px;
border-radius: var(--fcc-radius-sm);
}
body.fcc-app-shell-v1 .sidebar-nav .nav-link:focus-visible,
body.fcc-app-shell-v1 .bottom-nav-item:focus-visible {
outline-offset: -2px;
}
/* --------------------------------------------------------------------------
15. Version badge (small build indicator already in DOM)
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .fcc-version-badge {
background: var(--fcc-color-surface-glass);
color: var(--fcc-color-text-subtle);
border: 1px solid var(--fcc-color-border);
border-radius: var(--fcc-radius-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* --------------------------------------------------------------------------
16. Phase 1B desktop layout lock
Scoped final pass for the approved dashboard shell composition.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .drawer-brand {
display: none;
}
@media (min-width: 1024px) {
body.fcc-app-shell-v1 {
--fcc-header-height: 76px;
--fcc-sidebar-width: 260px;
}
body.fcc-app-shell-v1.logged-in .main-header,
body.fcc-app-shell-v1 .main-header {
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: var(--fcc-header-height) !important;
min-height: var(--fcc-header-height) !important;
max-height: var(--fcc-header-height) !important;
padding: 0 24px !important;
background: rgba(255, 255, 255, 0.78) !important;
border-bottom: 1px solid var(--fcc-color-border) !important;
box-shadow: 0 12px 32px rgba(70, 40, 120, 0.08) !important;
backdrop-filter: saturate(160%) blur(18px) !important;
-webkit-backdrop-filter: saturate(160%) blur(18px) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .main-header-inner,
body.fcc-app-shell-v1 .main-header-inner {
display: flex !important;
align-items: center !important;
gap: 24px !important;
width: min(100%, 1440px) !important;
height: 100% !important;
max-width: 1440px !important;
margin-inline: auto !important;
padding: 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .header-brand,
body.fcc-app-shell-v1 .header-brand {
flex: 0 0 260px !important;
width: 260px !important;
max-width: 260px !important;
margin: 0 !important;
justify-content: flex-start !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .header-logo-wide,
body.fcc-app-shell-v1 .header-logo-wide {
width: auto !important;
height: 52px !important;
max-width: 230px !important;
max-height: 52px !important;
object-fit: contain !important;
object-position: left center !important;
}
body.fcc-app-shell-v1.logged-in #headerControls,
body.fcc-app-shell-v1 #headerControls,
body.fcc-app-shell-v1.logged-in .header-controls,
body.fcc-app-shell-v1 .header-controls {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
height: 100% !important;
margin-left: 0 !important;
padding-right: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in #fccCommandAiHeaderEntry,
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry,
body.fcc-app-shell-v1.logged-in .command-ai-entry-host--header,
body.fcc-app-shell-v1 .command-ai-entry-host--header {
order: -1 !important;
flex: 1 1 360px !important;
width: min(520px, 100%) !important;
min-width: 280px !important;
max-width: 520px !important;
height: 52px !important;
max-height: 52px !important;
margin: 0 auto 0 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry .command-ai-entry-wrap,
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry .command-ai-entry-pill,
body.fcc-app-shell-v1 .command-ai-entry-host--header .command-ai-entry-wrap,
body.fcc-app-shell-v1 .command-ai-entry-host--header .command-ai-entry-pill {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
}
body.fcc-app-shell-v1 #headerControls > .fcc-header-approval-wrap {
flex: 0 0 auto !important;
order: 10 !important;
}
body.fcc-app-shell-v1 #headerControls > #mobileProfileBtn {
flex: 0 0 auto !important;
order: 20 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 52px !important;
min-height: 52px !important;
padding: 8px 12px !important;
border-radius: var(--fcc-radius-pill) !important;
background: rgba(255, 255, 255, 0.86) !important;
border: 1px solid var(--fcc-color-border-strong) !important;
box-shadow: 0 12px 28px rgba(70, 40, 120, 0.08) !important;
}
}
@media (max-width: 1023px) {
body.fcc-app-shell-v1.logged-in .main-header-inner,
body.fcc-app-shell-v1 .main-header-inner {
display: none !important;
}
body.fcc-app-shell-v1.logged-in .app-bar-mobile,
body.fcc-app-shell-v1 .app-bar-mobile {
display: flex !important;
}
}
/* --------------------------------------------------------------------------
17. Emergency desktop dashboard/header alignment
Scoped to the v1 shell; moves the existing account card, not a clone.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
body.fcc-app-shell-v1.logged-in .main-header,
body.fcc-app-shell-v1 .main-header {
min-height: 76px !important;
height: 76px !important;
max-height: 76px !important;
display: flex !important;
align-items: center !important;
padding: 10px 28px !important;
background: rgba(255, 255, 255, 0.88) !important;
border-bottom: 1px solid rgba(124, 58, 237, 0.10) !important;
backdrop-filter: blur(22px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
box-shadow: 0 12px 32px rgba(70, 40, 120, 0.07) !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .main-header-inner,
body.fcc-app-shell-v1 .main-header-inner {
width: 100% !important;
max-width: none !important;
height: 100% !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 18px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .header-brand,
body.fcc-app-shell-v1 .header-brand {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in .header-brand img,
body.fcc-app-shell-v1 .header-brand img,
body.fcc-app-shell-v1.logged-in .brand-logo,
body.fcc-app-shell-v1 .brand-logo {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
object-fit: contain !important;
transform: none !important;
}
body.fcc-app-shell-v1.logged-in #headerControls,
body.fcc-app-shell-v1 #headerControls,
body.fcc-app-shell-v1.logged-in .header-controls,
body.fcc-app-shell-v1 .header-controls {
grid-column: 2 !important;
justify-self: stretch !important;
display: grid !important;
grid-template-columns: minmax(280px, 520px) minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1.logged-in #fccCommandAiHeaderEntry,
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry,
body.fcc-app-shell-v1.logged-in .command-ai-entry-host--header,
body.fcc-app-shell-v1 .command-ai-entry-host--header {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
width: clamp(280px, 32vw, 520px) !important;
min-width: 0 !important;
max-width: 520px !important;
height: 52px !important;
max-height: 52px !important;
margin: 0 !important;
overflow: visible !important;
}
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry .command-ai-entry-wrap,
body.fcc-app-shell-v1 #fccCommandAiHeaderEntry .command-ai-entry-pill,
body.fcc-app-shell-v1 .command-ai-entry-host--header .command-ai-entry-wrap,
body.fcc-app-shell-v1 .command-ai-entry-host--header .command-ai-entry-pill {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
}
body.fcc-app-shell-v1 #headerControls > .fcc-header-approval-wrap {
grid-column: 3 !important;
grid-row: 1 !important;
justify-self: end !important;
flex: 0 0 auto !important;
order: initial !important;
}
body.fcc-app-shell-v1 #headerControls > #mobileProfileBtn {
display: none !important;
}
body.fcc-app-shell-v1 #mainNav > .sidebar-account-card {
display: none !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip {
grid-column: 4 !important;
grid-row: 1 !important;
justify-self: end !important;
display: block !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
min-width: 0 !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-card-main {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 48px !important;
max-width: 260px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.90) !important;
border: 1px solid rgba(124, 58, 237, 0.12) !important;
box-shadow: 0 12px 30px rgba(70, 40, 120, 0.08) !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-avatar {
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-info {
min-width: 0 !important;
max-width: 170px !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-name,
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-sub {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-dropdown {
position: absolute !important;
top: calc(100% + 10px) !important;
right: 0 !important;
z-index: 1200 !important;
width: 250px !important;
margin: 0 !important;
padding: 8px !important;
border: 1px solid rgba(124, 58, 237, 0.12) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 22px 50px rgba(70, 40, 120, 0.16) !important;
}
}
@media (min-width: 1280px) {
@supports selector(:has(*)) {
body.fcc-app-shell-v1:has(#dashboard.page.active) .main-with-sidebar {
margin-left: 250px !important;
width: calc(100vw - 250px) !important;
max-width: calc(100vw - 250px) !important;
padding-top: calc(var(--fcc-header-height) + 14px) !important;
padding-left: clamp(14px, 1.2vw, 22px) !important;
padding-right: clamp(18px, 1.6vw, 28px) !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
}
}
/* --------------------------------------------------------------------------
Phase 1B — Auth/Login rebrand (lavender / purple / pink)
Scoped under body.fcc-auth-screen so the new look applies on every
pre-login surface (parent login, kids tab, PIN keypad, signup wizard,
reset password, household picker entry) and reverts the moment the
body class is removed at sign-in time. CSS-only — no form behaviour,
no handlers, no IDs touched.
-------------------------------------------------------------------------- */
/* Page background washes the auth shell in the new brand */
body.fcc-auth-screen .lv-shell {
background:
radial-gradient(circle at 12% 18%, rgba(124, 58, 237, 0.14), transparent 32%),
radial-gradient(circle at 88% 70%, rgba(236, 72, 153, 0.12), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #faf7ff 54%, #fff7fb 100%);
}
body.fcc-auth-screen .lv-shell::before {
background:
radial-gradient(ellipse at 15% 60%, rgba(124, 58, 237, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 85% 25%, rgba(236, 72, 153, 0.10) 0%, transparent 50%);
}
body.fcc-auth-screen .lv-bc1 { background: rgba(124, 58, 237, 0.10); }
body.fcc-auth-screen .lv-bc2 { background: rgba(236, 72, 153, 0.12); }
/* Card chrome */
body.fcc-auth-screen .lv-card {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(124, 58, 237, 0.10);
box-shadow:
0 2px 4px rgba(70, 40, 120, 0.05),
0 12px 30px rgba(70, 40, 120, 0.10),
0 36px 80px rgba(70, 40, 120, 0.14);
}
/* Adult left branding panel: lavender → violet → pink gradient */
body.fcc-auth-screen .lv-left {
background:
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.16), transparent 38%),
linear-gradient(145deg, #7c3aed, #a855f7 48%, #ec4899) !important;
}
body.fcc-auth-screen .lv-card.lv-kid-mode .lv-left {
background:
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.20), transparent 38%),
linear-gradient(145deg, #6d28d9, #9333ea 50%, #db2777) !important;
}
/* Replace the inline blue-shield SVG with the new brand mark */
body.fcc-auth-screen .lv-logo-img-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
border-radius: 22px;
padding: 8px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.fcc-auth-screen .lv-logo-img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 4px 14px rgba(70, 20, 120, 0.32));
}
body.fcc-auth-screen .lv-kid-left .lv-logo-img-wrap {
padding: 4px;
border-radius: 12px;
}
/* Yellow "together" / "Superstar" accent → soft pink-cream for cohesion */
body.fcc-auth-screen .lv-yl {
color: #ffd8ec !important;
text-shadow: 0 2px 16px rgba(236, 72, 153, 0.45);
}
/* Mode toggle pill (Parents / Kids) */
body.fcc-auth-screen .lv-mode-toggle {
background: rgba(0, 0, 0, 0.22);
}
body.fcc-auth-screen .lv-mode-btn.active {
background: #ffffff;
color: #7c3aed;
box-shadow: 0 4px 14px rgba(70, 40, 120, 0.18);
}
/* Right panel (forms) on a clean surface */
body.fcc-auth-screen .lv-right {
background: rgba(255, 255, 255, 0.98);
}
/* Headings + muted helper text */
body.fcc-auth-screen .lv-view-title {
color: #11142f;
}
body.fcc-auth-screen .lv-view-sub,
body.fcc-auth-screen .lv-field-sub {
color: #66708b;
}
body.fcc-auth-screen .lv-field-label {
color: #5b4a86;
}
/* Inputs */
body.fcc-auth-screen .lv-field-input {
background: #faf7ff;
border-color: rgba(124, 58, 237, 0.18);
color: #11142f;
}
body.fcc-auth-screen .lv-field-input::placeholder {
color: rgba(102, 112, 139, 0.78);
}
body.fcc-auth-screen .lv-field-input:focus {
border-color: #7c3aed;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}
/* Forgot password + inline links */
body.fcc-auth-screen .lv-forgot-link,
body.fcc-auth-screen .lv-btn-link {
color: #7c3aed;
}
/* Remember checkbox */
body.fcc-auth-screen .lv-remember-row input[type=checkbox] {
accent-color: #7c3aed;
}
/* Primary CTA — purple/pink gradient */
body.fcc-auth-screen .lv-primary-btn {
background: linear-gradient(135deg, #7c3aed, #a855f7 52%, #ec4899);
box-shadow: 0 18px 36px rgba(124, 58, 237, 0.26);
border: none;
color: #ffffff;
}
body.fcc-auth-screen .lv-primary-btn:hover {
background: linear-gradient(135deg, #6d28d9, #9333ea 52%, #db2777);
box-shadow: 0 22px 44px rgba(124, 58, 237, 0.32);
transform: translateY(-1px);
}
/* Secondary CTA — lavender outlined */
body.fcc-auth-screen .lv-secondary-btn {
background: transparent;
color: #7c3aed;
border: 2px solid rgba(124, 58, 237, 0.22);
}
body.fcc-auth-screen .lv-secondary-btn:hover {
background: rgba(124, 58, 237, 0.08);
border-color: #7c3aed;
}
/* Ghost CTA (Create your family account, Skip) */
body.fcc-auth-screen .lv-ghost-btn,
body.fcc-auth-screen .lv-back-btn {
color: #7c3aed;
}
/* OAuth button keeps Google brand glyph; trim border + add lavender tint */
body.fcc-auth-screen .lv-oauth-btn {
border: 1px solid rgba(124, 58, 237, 0.18);
background: #ffffff;
color: #11142f;
}
body.fcc-auth-screen .lv-oauth-btn:hover {
background: rgba(124, 58, 237, 0.06);
border-color: rgba(124, 58, 237, 0.28);
}
/* Divider chip */
body.fcc-auth-screen .lv-divider span {
background: #ffffff;
color: #66708b;
}
/* PIN dots + keypad — purple highlights */
body.fcc-auth-screen .lv-pin-dot {
border-color: rgba(124, 58, 237, 0.28);
}
body.fcc-auth-screen .lv-pin-dot.filled {
background: #7c3aed;
border-color: #7c3aed;
}
body.fcc-auth-screen .lv-pin-key {
background: #faf7ff;
border-color: rgba(124, 58, 237, 0.18);
color: #11142f;
}
body.fcc-auth-screen .lv-pin-key:hover {
background: rgba(124, 58, 237, 0.12);
border-color: rgba(124, 58, 237, 0.32);
color: #7c3aed;
}
body.fcc-auth-screen .lv-pin-key:active {
background: #7c3aed;
border-color: #7c3aed;
color: #ffffff;
}
/* Quick parent-sign-in avatars */
body.fcc-auth-screen .lv-login-chooser-title,
body.fcc-auth-screen .lv-kid-view-title {
color: #11142f;
}
body.fcc-auth-screen .lv-login-chooser-sub,
body.fcc-auth-screen .lv-kid-view-sub {
color: #66708b;
}
/* Reset password / account-state badges */
body.fcc-auth-screen .las-badge {
border-color: rgba(124, 58, 237, 0.18);
}
body.fcc-auth-screen .las-badge-ok {
background: rgba(34, 197, 94, 0.12);
color: #15803d;
}
body.fcc-auth-screen .las-badge-warn {
background: rgba(124, 58, 237, 0.10);
color: #6d28d9;
}
/* Success overlay — purple/pink */
body.fcc-auth-screen .lv-success-overlay {
background:
radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.18), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.18), transparent 50%),
rgba(255, 255, 255, 0.96);
color: #11142f;
}
/* --------------------------------------------------------------------------
Phase 1B Fix 1 — Splash safety net (status bar removed in HTML; backup
hide rule here so even an old cached fragment cannot show the fake
iOS chrome). Logo visibility also enforced under shell scope to defeat
any stale opacity:0 / background-crop rule.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .fcc-splash-statusbar,
body.fcc-app-shell-v1 .splash-statusbar {
display: none !important;
}
body.fcc-app-shell-v1 .splash-logo.fcc-splash-logo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: transparent;
border-radius: 0;
opacity: 1 !important;
}
body.fcc-app-shell-v1 .fcc-splash-logo-mark {
background: transparent !important;
}
/* --------------------------------------------------------------------------
18. Mobile nav tap fix + profile rebrand (20260531)
Ensures bottom-nav More and mobile profile buttons receive taps on iOS
Safari; decorative pseudo-layers must not intercept pointer events.
-------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .bottom-nav-more,
body.fcc-app-shell-v1 #bottomNavMoreBtn {
pointer-events: auto;
cursor: pointer;
position: relative;
z-index: 1;
min-height: 44px;
}
body.fcc-app-shell-v1 .app-bar-profile-btn,
body.fcc-app-shell-v1 #mobileProfileBtn {
pointer-events: auto;
cursor: pointer;
position: relative;
z-index: 1;
min-height: 44px;
min-width: 44px;
background: var(--fcc-color-accent-soft) !important;
border: 1px solid var(--fcc-color-border) !important;
color: var(--fcc-color-accent-strong) !important;
}
body.fcc-app-shell-v1 .app-bar-profile-btn:hover,
body.fcc-app-shell-v1 .app-bar-profile-btn:focus-visible,
body.fcc-app-shell-v1 #mobileProfileBtn:hover,
body.fcc-app-shell-v1 #mobileProfileBtn:focus-visible {
background: var(--fcc-color-accent-ring) !important;
color: var(--fcc-color-accent-strong) !important;
}
body.fcc-app-shell-v1 .account-card-main {
pointer-events: auto;
cursor: pointer;
position: relative;
z-index: 1;
}
body.fcc-app-shell-v1 .main-header::before,
body.fcc-app-shell-v1 .main-header::after,
body.fcc-app-shell-v1 .app-bar-mobile::before,
body.fcc-app-shell-v1 .app-bar-mobile::after,
body.fcc-app-shell-v1 .bottom-nav::before,
body.fcc-app-shell-v1 .bottom-nav::after {
pointer-events: none;
}
body.fcc-app-shell-v1 .app-bar-mobile,
body.fcc-app-shell-v1 #bottomNav {
pointer-events: auto;
}
/* --------------------------------------------------------------------------
END fcc-app-shell-v1.css
Kill switch: remove `fcc-app-shell-v1` from to fully revert
visual changes introduced by this file.
========================================================================== */