/* ============================================================ Dashboard v2 shell (sidebar redesign, 2026-07). EVERY rule is scoped under body.dash-v2 (or targets v2-only elements that stay [hidden] until enableV2Shell() runs), so flag-less clients render the old dashboard byte-identically. Tokens map to styles.css custom properties where they exist. ============================================================ */ /* The [hidden] attribute is the ONLY gate left on the shell, so it has to win. Until 3372c479 (2026-07-27) the real gate was the dash-v2 class itself, which enableV2Shell() added in the same breath as clearing `hidden` — both released together. Making static removed that gate, and the UA [hidden] rule loses to any author `display:`, which every rule below sets. So the sidebar painted and was fully clickable ~1s before its JS existed: a real customer clicked the dead nav 3x and got "showTab is not defined" each time (2026-08-05). !important is required because those rules carry an id. JS only ever reveals via `el.hidden = false`, never an inline display, so this releases cleanly the moment enableV2Shell() runs. */ body.dash-v2 [hidden] { display: none !important; } /* ---------- Boot skeleton ---------- Covers first paint until enableV2Shell() reveals the real chrome. Mirrors the sidebar's exact width, gradient and brand block so the swap is a content fill rather than a layout jump. Reuses the skeleton-shimmer keyframe from styles.css, which dashboard.html already loads. */ body.dash-v2 #bootSkeleton { position: fixed; inset: 0; z-index: 200; display: flex; background: #f6f7f9; } body.dash-v2 #bootSkeleton .bs-side { width: 250px; flex-shrink: 0; background: linear-gradient(180deg, var(--primary, #233985) 0%, var(--primary-dark, #14203b) 100%); } body.dash-v2 #bootSkeleton .bs-brand { padding: 22px 20px 16px; display: flex; align-items: center; gap: 11px; } body.dash-v2 #bootSkeleton .bs-brand-mark { width: 36px; height: 36px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.18); flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 19px; color: var(--primary, #233985); line-height: 1; } body.dash-v2 #bootSkeleton .bs-brand-word { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 3px; color: #fff; } body.dash-v2 #bootSkeleton .bs-nav { margin-top: 20px; padding: 0 12px; } body.dash-v2 #bootSkeleton .bs-nav span { display: block; height: 20px; margin: 12px 8px; border-radius: 6px; background: rgba(255,255,255,.10); } body.dash-v2 #bootSkeleton .bs-main { flex: 1; min-width: 0; } body.dash-v2 #bootSkeleton .bs-head { height: 83px; border-bottom: 1px solid #e9ebf0; padding: 20px 40px; display: flex; flex-direction: column; justify-content: center; gap: 9px; } body.dash-v2 #bootSkeleton .bs-body { padding: 26px 40px; } body.dash-v2 #bootSkeleton .bs-sh { display: block; border-radius: 6px; background: linear-gradient(90deg, #ececef 25%, #e2e2e6 50%, #ececef 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; } body.dash-v2 #bootSkeleton .bs-sh-title { width: 210px; height: 22px; } body.dash-v2 #bootSkeleton .bs-sh-sub { width: 320px; height: 12px; } body.dash-v2 #bootSkeleton .bs-card { height: 130px; border-radius: 12px; margin-bottom: 18px; } body.dash-v2 #bootSkeleton .bs-card-sm { height: 86px; } @media (max-width: 979px) { body.dash-v2 #bootSkeleton .bs-side { display: none; } body.dash-v2 #bootSkeleton .bs-head { height: 58px; padding: 0 16px; } body.dash-v2 #bootSkeleton .bs-sh-sub { display: none; } body.dash-v2 #bootSkeleton .bs-body { padding: 18px 16px; } } /* Users who ask for less motion get the shape without the shimmer. */ @media (prefers-reduced-motion: reduce) { body.dash-v2 #bootSkeleton .bs-sh { animation: none; } } body.dash-v2 { background: #f6f7f9; padding-left: 250px; } /* ---------- Sidebar (desktop) ---------- */ body.dash-v2 #v2Sidebar { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 250px; background: linear-gradient(180deg, var(--primary, #233985) 0%, var(--primary-dark, #14203b) 100%); color: #fff; border-right: 1px solid rgba(255,255,255,0.10); z-index: 100; } body.dash-v2 .v2-brand { padding: 22px 20px 16px; display: flex; align-items: center; gap: 11px; } body.dash-v2 .v2-brand-mark { width: 36px; height: 36px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.18); flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 19px; color: var(--primary, #233985); line-height: 1; } body.dash-v2 .v2-brand-stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: flex; border-radius: 0 0 8px 8px; overflow: hidden; } body.dash-v2 .v2-brand-stripe i { flex: 1; } body.dash-v2 .v2-brand-stripe i:nth-child(1) { background: #000; } body.dash-v2 .v2-brand-stripe i:nth-child(2) { background: #dd0000; } body.dash-v2 .v2-brand-stripe i:nth-child(3) { background: #ffcc00; } body.dash-v2 .v2-brand-word { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 3px; color: #fff; } body.dash-v2 .v2-nav { flex: 1; margin-top: 8px; overflow-y: auto; } body.dash-v2 .v2-nav-label { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 6px 24px 8px; } body.dash-v2 .v2-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 20px; margin: 2px 12px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.55); text-decoration: none; cursor: pointer; position: relative; transition: background 160ms, color 160ms; } body.dash-v2 .v2-nav a:hover { color: #fff; } body.dash-v2 .v2-nav a.active { color: #fff; background: rgba(255,255,255,.10); } body.dash-v2 .v2-nav a.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold, #8a6d3b); } body.dash-v2 .v2-nav a svg { width: 20px; height: 20px; flex-shrink: 0; } body.dash-v2 .v2-nav a .v2-nav-text { flex: 1; } body.dash-v2 .v2-badge { background: var(--gold, #8a6d3b); color: #fff; font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 999px; display: none; align-items: center; justify-content: center; padding: 0 5px; } body.dash-v2 .v2-side-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.10); } body.dash-v2 .v2-identity { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.08); } body.dash-v2 .v2-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold, #8a6d3b); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; flex-shrink: 0; } body.dash-v2 .v2-identity-name { font-size: 12.5px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.dash-v2 .v2-identity-no { font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,.5); } body.dash-v2 .v2-side-links { display: flex; gap: 14px; padding: 10px 12px 2px; } body.dash-v2 .v2-side-links a { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.55); cursor: pointer; text-decoration: none; } body.dash-v2 .v2-side-links a:hover { color: #fff; } /* ---------- Page header (main column) ---------- */ body.dash-v2 #v2Header { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 60; background: rgba(246,247,249,0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #e9ebf0; padding: 16px 40px; } body.dash-v2 .v2-page-title { font-family: 'Marcellus', serif; font-size: 23px; color: var(--primary, #233985); line-height: 1.1; } body.dash-v2 .v2-page-sub { font-size: 12.5px; color: #7a7a7a; margin-top: 3px; } body.dash-v2 .v2-chip { display: none; align-items: center; gap: 9px; background: #fff; border: 1px solid #e9ebf0; border-radius: 8px; padding: 8px 13px; } body.dash-v2 .v2-chip .v2-chip-label { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #9aa0ab; } body.dash-v2 .v2-chip .v2-chip-value { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--body-text, #262626); } body.dash-v2 .v2-chip.reg { background: #eef2fb; border-color: #d5def5; } body.dash-v2 .v2-chip.reg .v2-chip-value { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--primary, #233985); } body.dash-v2 .v2-chip.setup { background: rgba(138,109,59,.12); border-color: rgba(138,109,59,.3); } body.dash-v2 .v2-chip.setup .v2-chip-value { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--gold, #8a6d3b); } body.dash-v2 .v2-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #233985); animation: v2pulse 1.8s ease-in-out infinite; } @keyframes v2pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} } body.dash-v2 .dash-content { max-width: 1180px; } /* ---------- Phase 2: v2 Home replaces the old overview blocks ---------- The old overview widgets themselves were deleted 2026-07-27 (legacy-shell removal); only the paused Dauerfrist containers remain to hide. */ body.dash-v2 #dauerfristSection, body.dash-v2 #dauerfristCtaCard, body.dash-v2 #dauerfristReconsider { display: none; } body.dash-v2 #v2Home { display: block; } /* status/type pill system (chips) */ .v2p { display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .v2p.sq { border-radius: 6px; } .v2p.blue { background: #eaefff; color: #233985; } .v2p.green { background: #dcfce7; color: #166534; } .v2p.amber { background: #fef3c7; color: #92400e; } .v2p.orange { background: #ffedd5; color: #9a3412; } .v2p.red { background: #fee2e2; color: #b91c1c; } .v2p.grey { background: #eef1f5; color: #6b7280; } .v2p.purple { background: #f3e8ff; color: #6b21a8; } .v2p.indigo { background: #e0e7ff; color: #3730a3; } /* greeting */ .v2h-greet { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 4px 0 26px; } .v2h-greet h1 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 30px; color: var(--primary, #233985); margin: 0; } .v2h-greet p { font-size: 13.5px; color: #7a7a7a; margin: 6px 0 0; max-width: 640px; line-height: 1.55; } .v2h-deadline-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 8px 15px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #9a3412; } .v2h-deadline-pill i { width: 8px; height: 8px; border-radius: 50%; background: #c2410c; animation: v2pulse 1.8s ease-in-out infinite; } .v2h-label { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold, #8a6d3b); margin: 0 0 12px; } .v2h-label.muted { color: #9aa0ab; } /* generic card */ .v2h-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.06); } /* subscription banner (past_due / cancelling) */ .v2h-banner { display: flex; align-items: center; gap: 15px; background: #fff; border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,.06); padding: 16px 20px; margin-bottom: 22px; } .v2h-banner.red { border-left: 4px solid #b91c1c; } .v2h-banner.amber { border-left: 4px solid #b45309; } .v2h-banner .ic { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2h-banner.red .ic { background: #fee2e2; color: #b91c1c; } .v2h-banner.amber .ic { background: #fef3c7; color: #b45309; } .v2h-banner .t { font-size: 14.5px; font-weight: 500; color: #262626; } .v2h-banner .s { font-size: 13px; color: #5a6172; margin-top: 2px; } .v2h-banner .b { flex: 1; min-width: 0; } .v2h-banner a.cta { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 11px 18px; border-radius: 8px; white-space: nowrap; cursor: pointer; text-decoration: none; } .v2h-banner.red a.cta { background: #b91c1c; color: #fff; } .v2h-banner.amber a.cta { background: #fff; color: #b45309; border: 1px solid #f0c987; } /* hero card */ .v2h-hero { display: flex; align-items: center; gap: 22px; padding: 22px 26px; margin-bottom: 16px; border-left: 4px solid transparent; } .v2h-hero.orange { border-left-color: #c2410c; } .v2h-hero.red { border-left-color: #b91c1c; } .v2h-hero.gold { border-left-color: var(--gold, #8a6d3b); } .v2h-hero.green { border-left-color: #16a34a; } .v2h-hero .ic { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2h-hero.orange .ic { background: #fff2e8; color: #c2410c; } .v2h-hero.red .ic { background: #fee2e2; color: #b91c1c; } .v2h-hero.gold .ic { background: rgba(138,109,59,.12); color: var(--gold, #8a6d3b); } .v2h-hero.green .ic { background: #dcfce7; color: #166534; } .v2h-hero .body { flex: 1; min-width: 0; } .v2h-hero .chips { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; } .v2h-hero .due { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #c2410c; } .v2h-hero .due.red { color: #b91c1c; } .v2h-hero h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 20px; color: var(--primary, #233985); margin: 0; } .v2h-hero .sub { font-size: 13.5px; color: #7a7a7a; margin-top: 3px; max-width: 560px; } .v2h-hero .warn { font-size: 12.5px; color: #9a3412; margin-top: 7px; } .v2h-days { text-align: center; padding: 0 6px; } .v2h-days .n { font-family: 'Roboto Mono', monospace; font-size: 30px; font-weight: 600; color: #c2410c; line-height: 1; } .v2h-days.red .n { color: #b91c1c; } .v2h-days .l { font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #9a3412; margin-top: 3px; } .v2h-cta { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 13px 22px; border-radius: 8px; background: var(--primary, #233985); color: #fff !important; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px rgba(20,32,59,.14); transition: transform 120ms ease; } .v2h-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,32,59,.2); } .v2h-cta.red { background: #b91c1c; } /* registration tracker */ .v2h-tracker { padding: 24px 28px 12px; margin-bottom: 16px; } .v2h-tracker h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 20px; color: var(--primary, #233985); margin: 0 0 2px; } .v2h-tracker .lead { font-size: 13px; color: #7a7a7a; margin-bottom: 20px; } .v2h-step { display: flex; gap: 15px; } .v2h-step .rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .v2h-step .dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; background: #f1f3f7; color: #9aa0ab; } .v2h-step.done .dot { background: var(--primary, #233985); color: #fff; } .v2h-step.now .dot { background: #fff; color: var(--gold, #8a6d3b); border: 2px solid var(--gold, #8a6d3b); box-shadow: 0 0 0 4px rgba(138,109,59,.13); } .v2h-step .line { width: 2px; flex: 1; min-height: 22px; background: #e3e7ee; margin: 2px 0; } .v2h-step.done .line { background: var(--primary, #233985); } .v2h-step .body { padding-bottom: 18px; flex: 1; } .v2h-step .label { font-size: 14.5px; font-weight: 500; color: #9aa0ab; margin-top: 4px; } .v2h-step.done .label, .v2h-step.now .label { color: #262626; } .v2h-step.now .label { font-weight: 600; } .v2h-step .stepsub { font-size: 13px; color: #7a7a7a; margin-top: 5px; line-height: 1.55; max-width: 520px; } .v2h-step.now .stepsub { color: #41496b; background: #f0f4ff; border-radius: 8px; padding: 10px 12px; } /* obligations board */ .v2h-obl { padding: 6px 24px; margin-bottom: 34px; } .v2h-obl-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f2f5; } .v2h-obl-row:last-child { border-bottom: none; } .v2h-obl-row .ic { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2h-obl-row .t { font-size: 14.5px; font-weight: 500; color: #262626; } .v2h-obl-row .s { font-size: 12.5px; color: #7a7a7a; } .v2h-obl-row .b { flex: 1; min-width: 0; } /* secondary cards + msg/plan grid */ .v2h-cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 34px; } .v2h-mini { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .v2h-mini .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v2h-mini .when { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #9a3412; } .v2h-mini .when.grey { color: #9aa0ab; } .v2h-mini h4 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 17px; color: var(--primary, #233985); margin: 0; } .v2h-mini .sub { font-size: 13px; color: #7a7a7a; margin-top: 3px; } .v2h-mini .grow { flex: 1; } .v2h-mini-cta { align-self: flex-start; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--primary, #233985); border: 1px solid #d7dbe3; cursor: pointer; text-decoration: none; } .v2h-mini-cta:hover { border-color: var(--primary, #233985); } .v2h-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: start; margin-bottom: 22px; } .v2h-panel { padding: 20px 22px; } .v2h-panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .v2h-panel .head h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 17px; color: var(--primary, #233985); margin: 0; } .v2h-panel .head a { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--primary, #233985); cursor: pointer; } .v2h-msg { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid #f0f2f5; cursor: pointer; } .v2h-msg:last-child { border-bottom: none; } .v2h-msg .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: #d7dbe3; } .v2h-msg.unread .dot { background: #dd0000; } .v2h-msg .who { font-size: 13px; font-weight: 500; color: #262626; } .v2h-msg .who span { color: #7a7a7a; font-weight: 400; } .v2h-msg .prev { font-size: 12.5px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2h-msg .mb { min-width: 0; } .v2h-plan { background: linear-gradient(150deg, var(--primary, #233985) 0%, var(--primary-dark, #14203b) 100%); border-radius: 12px; box-shadow: 0 4px 24px rgba(20,32,59,.16); padding: 20px 22px; color: #fff; } .v2h-plan .kick { font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light, #d4bfa3); margin-bottom: 9px; } .v2h-plan .name { font-family: 'Marcellus', serif; font-size: 19px; } .v2h-plan .price { font-family: 'Roboto Mono', monospace; font-size: 15px; margin-top: 2px; } .v2h-plan .price span { font-size: 12px; color: rgba(255,255,255,.6); } .v2h-plan .desc { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 10px; line-height: 1.55; } .v2h-plan a.manage { display: inline-block; margin-top: 13px; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; cursor: pointer; } /* recent filings */ .v2h-recent { padding: 20px 24px 8px; margin-bottom: 22px; } .v2h-recent .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .v2h-recent .head h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 17px; color: var(--primary, #233985); margin: 0; } .v2h-recent .head a { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--primary, #233985); cursor: pointer; } .v2h-frow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f0f2f5; } .v2h-frow:last-child { border-bottom: none; } .v2h-frow .fb { flex: 1; min-width: 0; overflow: hidden; } .v2h-frow .fp { font-size: 14px; font-weight: 500; color: #262626; white-space: nowrap; } .v2h-frow .fs { font-size: 12px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2h-frow .amt { font-family: 'Roboto Mono', monospace; font-size: 13px; color: #262626; white-space: nowrap; } .v2h-frow .amt.await { font-family: 'Roboto', sans-serif; font-size: 12px; font-style: italic; color: #9aa0ab; } /* while-you-wait tiles */ .v2h-wyw { padding: 22px 24px; margin-bottom: 22px; } .v2h-wyw h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 17px; color: var(--primary, #233985); margin: 0 0 4px; } .v2h-wyw .lead { font-size: 13px; color: #7a7a7a; margin-bottom: 14px; } .v2h-wyw .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .v2h-wyw .tile { background: #f8f9fb; border-radius: 10px; padding: 15px 16px; } .v2h-wyw .tile .k { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--gold, #8a6d3b); margin-bottom: 6px; } .v2h-wyw .tile .v { font-size: 13px; color: #5a6172; line-height: 1.55; } @media (max-width: 700px) { .v2h-hero { flex-wrap: wrap; } .v2h-days { order: -1; margin-left: auto; } } /* ---------- Phase 3: v2 Filings ---------- */ /* !important: the old head carries an inline display:flex */ body.dash-v2 #v2Filings { display: block; } .v2f-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; } .v2f-views { display: inline-flex; gap: 4px; background: #eaecf1; border-radius: 10px; padding: 4px; } .v2f-views button { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 9px 18px; border-radius: 8px; cursor: pointer; border: none; background: transparent; color: #7a7a7a; } .v2f-views button.active { background: #fff; color: var(--primary, #233985); box-shadow: 0 1px 3px rgba(20,32,59,.12); } .v2f-pills { display: flex; gap: 8px; flex-wrap: wrap; } .v2f-pills button { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; cursor: pointer; border: 1px solid #dfe3ea; background: #fff; color: #5a6172; } .v2f-pills button.active { border-color: var(--primary, #233985); background: var(--primary, #233985); color: #fff; } .v2f-row-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,32,59,.06); margin-bottom: 10px; overflow: hidden; } .v2f-row { display: flex; align-items: center; gap: 15px; padding: 15px 18px; } .v2f-row.muted { opacity: .62; } .v2f-date { width: 96px; flex-shrink: 0; } .v2f-date .k { font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #9aa0ab; } .v2f-date .v { font-family: 'Roboto Mono', monospace; font-size: 12.5px; color: #262626; } .v2f-main { flex: 1; min-width: 0; overflow: hidden; } .v2f-main .t { font-size: 14.5px; font-weight: 500; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2f-main .t span { color: #9aa0ab; font-weight: 400; } .v2f-main .s { font-size: 12.5px; color: #7a7a7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2f-amt { font-family: 'Roboto Mono', monospace; font-size: 13.5px; color: #262626; white-space: nowrap; flex-shrink: 0; } .v2f-amt.await { font-family: 'Roboto', sans-serif; font-size: 12px; font-style: italic; color: #9aa0ab; } .v2f-pay { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--primary, #233985); cursor: pointer; white-space: nowrap; flex-shrink: 0; } .v2f-action { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 9px 15px; border-radius: 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0; text-decoration: none; border: 1px solid var(--primary, #233985); background: #fff; color: var(--primary, #233985) !important; } .v2f-action.primary { background: var(--primary, #233985); color: #fff !important; border: none; } .v2f-action.danger { background: #b91c1c; color: #fff !important; border: none; } .v2f-action.ghost { border-color: #dfe3ea; } .v2f-chev { cursor: pointer; color: #9aa0ab; display: flex; flex-shrink: 0; transition: transform 150ms; } .v2f-chev.open { transform: rotate(180deg); } .v2f-history { border-top: 1px solid #f0f2f5; background: #fafbfe; padding: 4px 18px 14px 129px; } .v2f-history .hk { font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: #9aa0ab; margin: 12px 0 8px; } .v2f-vrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef0f4; } .v2f-vrow:last-child { border-bottom: none; } .v2f-vrow .meta { flex: 1; font-size: 12.5px; color: #7a7a7a; } .v2f-vrow .amt { font-family: 'Roboto Mono', monospace; font-size: 13px; color: #262626; } .v2f-group { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.06); overflow: hidden; margin-bottom: 22px; } .v2f-group-head { display: flex; align-items: center; gap: 11px; padding: 15px 22px; border-bottom: 1px solid #f0f2f5; } .v2f-group-head h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 16px; color: var(--primary, #233985); margin: 0; } .v2f-group-head .note { margin-left: auto; font-size: 12px; color: #9aa0ab; } .v2f-group .v2f-row { border-bottom: 1px solid #f5f6f8; } .v2f-group .v2f-row:last-child { border-bottom: none; } .v2f-intro { padding: 13px 22px; font-size: 12.5px; color: #5a6172; background: #fbfaf7; border-bottom: 1px solid #f0f2f5; line-height: 1.55; } .v2f-older { padding: 12px 22px; } .v2f-older > a { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--primary, #233985); cursor: pointer; } .v2f-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .v2f-cal-cell { background: #fff; border-radius: 11px; padding: 13px 14px; min-height: 92px; box-shadow: 0 1px 2px rgba(20,32,59,.06); } .v2f-cal-cell.done { opacity: .82; } .v2f-cal-cell.current { box-shadow: 0 0 0 2px var(--primary, #233985), 0 4px 16px rgba(20,32,59,.12); } .v2f-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 6px; } .v2f-cal-head .m { font-family: 'Marcellus', serif; font-size: 15px; color: var(--primary, #233985); } .v2f-cal-chips { display: flex; flex-wrap: wrap; gap: 5px; } .v2f-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12.5px; color: #7a7a7a; } .v2f-legend span { display: inline-flex; align-items: center; gap: 7px; } .v2f-empty { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.06); padding: 48px 32px; text-align: center; } .v2f-empty .ic { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; background: #eaefff; color: var(--primary, #233985); } .v2f-empty .ic.grey { background: #eef1f5; color: #9aa0ab; } .v2f-empty h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 20px; color: var(--primary, #233985); margin: 0 0 6px; } .v2f-empty p { font-size: 13.5px; color: #7a7a7a; max-width: 440px; margin: 0 auto; line-height: 1.6; } .v2f-empty .v2h-cta { margin-top: 18px; } @media (max-width: 700px) { .v2f-row { flex-wrap: wrap; row-gap: 8px; } .v2f-date { width: auto; order: 3; } .v2f-history { padding-left: 18px; } } /* ---------- Phase 4: v2 Settings (sub-nav rail + one panel at a time) ---------- */ /* .active scope is load-bearing: an unscoped #tab-account display rule out-specifies the .tab-content hide and leaks Settings into every tab. */ body.dash-v2 #tab-account.active { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 0 24px; align-items: start; } body.dash-v2 #tab-account > * { grid-column: 2; min-width: 0; } body.dash-v2 #v2SettingsNav { display: block; grid-column: 1; grid-row: 1 / span 20; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(20,32,59,.06); padding: 8px; position: sticky; top: 84px; } body.dash-v2 #v2SettingsNav a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 8px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; color: #6a7180; text-decoration: none; border-left: 3px solid transparent; } body.dash-v2 #v2SettingsNav a.active { color: var(--primary, #233985); background: #eef2fb; border-left-color: var(--gold, #8a6d3b); } body.dash-v2 #v2SettingsNav a.danger { color: #991b1b; } body.dash-v2 #tab-account [data-v2panel].v2-panel-hidden { display: none !important; } body.dash-v2 #v2DangerPanel[data-v2panel] { display: block; } @media (max-width: 979px) { body.dash-v2 #tab-account { display: block; } body.dash-v2 #v2SettingsNav { position: static; display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding: 6px; } body.dash-v2 #v2SettingsNav a { flex-shrink: 0; border-left: none; border-radius: 999px; padding: 9px 14px; } } /* ---------- Phase 4/5 polish: harmonize the remaining old-styled surfaces (Messages, Documents, Settings panels, Help) with the v2 card language. Generic and scoped: every .dash-card under the flag gets the v2 look. ---------- */ body.dash-v2 .dash-card { background: #fff; border-radius: 12px; border: none; box-shadow: 0 4px 24px rgba(0,0,0,.06); } body.dash-v2 .dash-card-header { border-bottom: 1px solid #f0f2f5; padding: 16px 22px 14px; } body.dash-v2 .dash-card-header h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 16px; color: var(--primary, #233985); text-transform: none; letter-spacing: 0; } body.dash-v2 .dash-card-body { padding: 16px 22px 20px; } /* The thread-detail view renders its title as an h2.section-title inside #tab-inbox; the v2 header carries the page title, so it stays hidden. */ body.dash-v2 #tab-inbox .section-title { display: none; } /* Inbox: thread cards in the v2 row language */ body.dash-v2 .inbox-thread-card, body.dash-v2 [id^="inbox"] .thread-card { border-radius: 10px; box-shadow: 0 1px 2px rgba(20,32,59,.06); border: none; } body.dash-v2 #tab-inbox h2 { font-family: 'Marcellus', serif; font-weight: 400; color: var(--primary, #233985); } /* Help: reader typography nudge */ body.dash-v2 .faq-docs { border-radius: 12px; } /* ---------- Mobile top bar + drawer ---------- */ body.dash-v2 #v2TopBar { display: none; } body.dash-v2 #v2Drawer { display: none; } @media (max-width: 979px) { body.dash-v2 { padding-left: 0; padding-top: 58px; } body.dash-v2 #v2Sidebar { display: none; } body.dash-v2 #v2TopBar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; top: 0; height: 58px; z-index: 110; background: #fff; border-bottom: 1px solid #e9ebf0; padding: 0 16px; } body.dash-v2 .v2-topbar-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--primary, #233985); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; color: #fff; } body.dash-v2 .v2-topbar-title { flex: 1; font-family: 'Marcellus', serif; font-size: 18px; color: var(--primary, #233985); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.dash-v2 .v2-menu-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #e9ebf0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--primary, #233985); position: relative; } body.dash-v2 .v2-menu-dot { display: none; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #dd0000; border: 1.5px solid #fff; } body.dash-v2 #v2Header { padding: 14px 16px; top: 58px; } body.dash-v2 #v2Drawer.open { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(20,32,59,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.dash-v2 .v2-drawer-panel { width: 270px; height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--primary, #233985) 0%, var(--primary-dark, #14203b) 100%); } body.dash-v2 .v2-drawer-panel .v2-nav { padding: 6px 0; } body.dash-v2 .v2-drawer-panel .v2-nav a { font-size: 13px; padding: 13px 16px; } } /* ---------- Improvement batch 2026-07-10b ---------- */ /* Messages: thread cards in the v2 language (inline border overridden) */ body.dash-v2 .thread-card { border: 1px solid transparent !important; box-shadow: 0 1px 2px rgba(20,32,59,.06); transition: box-shadow 150ms ease !important; } body.dash-v2 .thread-card:hover { box-shadow: 0 4px 16px rgba(20,32,59,.12); } body.dash-v2 #tab-inbox button, body.dash-v2 #tab-inbox .btn-submit { border-radius: 8px; } /* Documents: rows + actions in the v2 language */ body.dash-v2 .doc-item { padding: 13px 0; } body.dash-v2 .doc-icon { border-radius: 9px; background: #f1f4f9; color: var(--primary, #233985); } body.dash-v2 .doc-action { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; border: 1px solid #dfe3ea; background: #fff; color: var(--primary, #233985); } body.dash-v2 .doc-action:hover { border-color: var(--primary, #233985); } body.dash-v2 .doc-action.disabled-muted { border: none; background: transparent; color: #9aa0ab; } /* Help: sidebar + reader in the v2 language */ body.dash-v2 .faq-docs { background: transparent; } body.dash-v2 .faq-docs [role="tab"], body.dash-v2 .faq-docs .faq-nav button { border-radius: 7px; font-size: 13px; } body.dash-v2 .faq-body h1, body.dash-v2 .faq-body h2 { font-family: 'Marcellus', serif; font-weight: 400; color: var(--primary, #233985); } /* Mobile filings: two-line cards (design) instead of ad-hoc wrap */ @media (max-width: 700px) { .v2f-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; grid-template-areas: "chip main pill" "date amt action"; gap: 8px 10px; } .v2f-row > .v2p.sq { grid-area: chip; } .v2f-row > .v2f-main { grid-area: main; } .v2f-row > .v2p:not(.sq) { grid-area: pill; justify-self: end; } .v2f-row > .v2f-date { grid-area: date; display: flex; gap: 6px; align-items: baseline; } .v2f-row > .v2f-date .k::after { content: ':'; } .v2f-row > .v2f-amt { grid-area: amt; justify-self: start; } .v2f-row > .v2f-pay { grid-area: amt; justify-self: end; margin-right: 8px; } .v2f-row > .v2f-action { grid-area: action; justify-self: end; } .v2f-row > .v2f-chev { display: none; } } /* Keyboard focus visibility across the v2 chrome */ body.dash-v2 .v2-nav a:focus-visible, body.dash-v2 #v2SettingsNav a:focus-visible, body.dash-v2 .v2f-action:focus-visible, body.dash-v2 .v2h-cta:focus-visible, body.dash-v2 .v2-menu-btn:focus-visible { outline: 2px solid var(--gold, #8a6d3b); outline-offset: 2px; } /* One-time redesign intro card */ .v2h-intro { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 22px; border-left: 4px solid var(--gold, #8a6d3b); } .v2h-intro .b { flex: 1; min-width: 0; } .v2h-intro .t { font-family: 'Marcellus', serif; font-size: 16px; color: var(--primary, #233985); } .v2h-intro .s { font-size: 13px; color: #5a6172; margin-top: 3px; line-height: 1.55; } .v2h-intro button { font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 9px 16px; border-radius: 8px; background: #fff; color: var(--primary, #233985); border: 1px solid #d7dbe3; cursor: pointer; white-space: nowrap; } .v2h-intro button:hover { border-color: var(--primary, #233985); } /* 'Your year so far' trust strip */ .v2y-strip { display: flex; flex-wrap: wrap; gap: 14px; padding: 20px 24px; margin-bottom: 22px; } .v2y-cell { flex: 1 1 160px; } .v2y-cell .n { font-family: 'Marcellus', serif; font-size: 24px; color: var(--primary, #233985); line-height: 1; } .v2y-cell .l { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #9aa0ab; margin-top: 6px; }