mirror of
https://github.com/we-promise/sure.git
synced 2026-09-09 08:34:26 +00:00
Brandon
fe0d27471d
* feat(bills): the bills pages, calendar feed and in-page AI helpers Second of three chunks carved out of #3083, stacked on the schema and domain core. This is everything a user sees and clicks. The whole surface sits behind the preview flag, so it is unreachable until someone opts in. Pages, all under one nav entry: - the pay run, a month calendar, the full bills table, and the paycheck planner - a detail drawer per bill, with payment history, price changes and cost analytics - create and edit flows for bills, subscriptions, installment plans and income The overview marks pay periods inside the month, so a weekly paycheck no longer reads as one undifferentiated month of bills. Markers appear only when income actually subdivides the month, which means monthly and undeclared income render exactly as before and there is no new setting to configure. Navigation and design system: - one preview-gated nav item shared by the desktop rail and the mobile bar - DS::Sparkline for payment-history charts, replacing raw SVG in views - status badges render through DS::Pill rather than hand-rolled spans - the suggestions panel is a disclosure that remembers being collapsed, per device, the way privacy mode and the sidebar width already do - every surface reflows to phone widths without horizontal scroll Calendar feed: a signed ICS feed per family, served sessionless by token, with a reset that revokes previously shared URLs. In-page AI helpers: smart fill on the bill form and a smart configuration proposal on an existing bill, each reading a bounded slice of charge history. Provider-side prompt assembly sits behind the existing LlmConcept interface, with an implementation for each of the two providers. These belong here rather than with the assistant tools because they are buttons on these pages and lean on the provider suggester, not on the tool registry. Suite 7,776 runs green apart from the pre-existing passkey-session flake, which passes standalone. Rubocop clean, eager loading verified. The hosting guide for the feature ships here rather than with the schema, since its instructions walk pages this PR introduces. * Render the suggested strip through DS::Disclosure The hand-rolled details pair predates the component. The card_inset variant is the same shape, so the strip now inherits the design system chrome, and the persisted-disclosure controller rides along unchanged. * Route the remaining hand-rolled chips through the design system The subscription-state chips, rule-match chips and match-reason chips become DS::Pill, with the state chips extracted to one shared partial so the drawer and the summary tab stop carrying copy-pasted markup. The AI prompt chips become DS::Button and the bills-index filter becomes DS::SearchInput, both of which this PR already uses elsewhere for the same shapes. * Fix erb_lint whitespace offenses in bills views * Address the post-ready review round * Require a writable destination account and gate the feed on preview * Reject an unresolvable declared account out loud
540 lines
14 KiB
CSS
Generated
540 lines
14 KiB
CSS
Generated
/*
|
|
* GENERATED — do not edit by hand.
|
|
* Source: design/tokens/sure.tokens.json
|
|
* Build: npm run tokens:build
|
|
*/
|
|
|
|
@theme {
|
|
--font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--color-white: #ffffff;
|
|
--color-black: #0B0B0B;
|
|
--color-success: var(--color-green-700);
|
|
--color-warning: var(--color-yellow-600);
|
|
--color-destructive: var(--color-red-500);
|
|
--color-info: var(--color-blue-600);
|
|
--color-shadow: --alpha(var(--color-black) / 6%);
|
|
--color-link: var(--color-blue-600);
|
|
--color-focus-ring: var(--color-alpha-black-700);
|
|
--color-tertiary: var(--color-alpha-black-100);
|
|
--color-surface: var(--color-gray-50);
|
|
--color-surface-hover: var(--color-gray-100);
|
|
--color-surface-inset: var(--color-gray-100);
|
|
--color-surface-inset-hover: var(--color-gray-200);
|
|
--color-container: var(--color-white);
|
|
--color-container-hover: var(--color-gray-50);
|
|
--color-container-inset: var(--color-gray-50);
|
|
--color-container-inset-hover: var(--color-gray-100);
|
|
--color-nav-indicator: var(--color-black);
|
|
--color-toggle-track: var(--color-gray-300);
|
|
--color-destructive-subtle: var(--color-red-200);
|
|
--color-gray-25: #FAFAFA;
|
|
--color-gray-50: #F7F7F7;
|
|
--color-gray-100: #F0F0F0;
|
|
--color-gray-200: #E7E7E7;
|
|
--color-gray-300: #CFCFCF;
|
|
--color-gray-400: #9E9E9E;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #5C5C5C;
|
|
--color-gray-700: #363636;
|
|
--color-gray-800: #242424;
|
|
--color-gray-900: #171717;
|
|
--color-gray: var(--color-gray-500);
|
|
--color-gray-tint-5: --alpha(var(--color-gray-500) / 5%);
|
|
--color-gray-tint-10: --alpha(var(--color-gray-500) / 10%);
|
|
--color-alpha-white-25: --alpha(var(--color-white) / 3%);
|
|
--color-alpha-white-50: --alpha(var(--color-white) / 5%);
|
|
--color-alpha-white-100: --alpha(var(--color-white) / 8%);
|
|
--color-alpha-white-200: --alpha(var(--color-white) / 10%);
|
|
--color-alpha-white-300: --alpha(var(--color-white) / 15%);
|
|
--color-alpha-white-400: --alpha(var(--color-white) / 20%);
|
|
--color-alpha-white-500: --alpha(var(--color-white) / 30%);
|
|
--color-alpha-white-600: --alpha(var(--color-white) / 40%);
|
|
--color-alpha-white-700: --alpha(var(--color-white) / 50%);
|
|
--color-alpha-white-800: --alpha(var(--color-white) / 70%);
|
|
--color-alpha-white-900: --alpha(var(--color-white) / 85%);
|
|
--color-alpha-black-25: --alpha(var(--color-black) / 3%);
|
|
--color-alpha-black-50: --alpha(var(--color-black) / 5%);
|
|
--color-alpha-black-100: --alpha(var(--color-black) / 8%);
|
|
--color-alpha-black-200: --alpha(var(--color-black) / 10%);
|
|
--color-alpha-black-300: --alpha(var(--color-black) / 15%);
|
|
--color-alpha-black-400: --alpha(var(--color-black) / 20%);
|
|
--color-alpha-black-500: --alpha(var(--color-black) / 30%);
|
|
--color-alpha-black-600: --alpha(var(--color-black) / 40%);
|
|
--color-alpha-black-700: --alpha(var(--color-black) / 50%);
|
|
--color-alpha-black-800: --alpha(var(--color-black) / 70%);
|
|
--color-alpha-black-900: --alpha(var(--color-black) / 85%);
|
|
--color-red-25: #FFFBFB;
|
|
--color-red-50: #FFF1F0;
|
|
--color-red-100: #FFDEDB;
|
|
--color-red-200: #FEB9B3;
|
|
--color-red-300: #F88C86;
|
|
--color-red-400: #ED4E4E;
|
|
--color-red-500: #F13636;
|
|
--color-red-600: #EC2222;
|
|
--color-red-700: #C91313;
|
|
--color-red-800: #A40E0E;
|
|
--color-red-900: #7E0707;
|
|
--color-red-tint-5: --alpha(var(--color-red-500) / 5%);
|
|
--color-red-tint-10: --alpha(var(--color-red-500) / 10%);
|
|
--color-green-25: #F6FEF9;
|
|
--color-green-50: #ECFDF3;
|
|
--color-green-100: #D1FADF;
|
|
--color-green-200: #A6F4C5;
|
|
--color-green-300: #6CE9A6;
|
|
--color-green-400: #32D583;
|
|
--color-green-500: #12B76A;
|
|
--color-green-600: #10A861;
|
|
--color-green-700: #078C52;
|
|
--color-green-800: #05603A;
|
|
--color-green-900: #054F31;
|
|
--color-green-tint-5: --alpha(var(--color-green-500) / 5%);
|
|
--color-green-tint-10: --alpha(var(--color-green-500) / 10%);
|
|
--color-yellow-25: #FFFCF5;
|
|
--color-yellow-50: #FFFAEB;
|
|
--color-yellow-100: #FEF0C7;
|
|
--color-yellow-200: #FEDF89;
|
|
--color-yellow-300: #FEC84B;
|
|
--color-yellow-400: #FDB022;
|
|
--color-yellow-500: #F79009;
|
|
--color-yellow-600: #DC6803;
|
|
--color-yellow-700: #B54708;
|
|
--color-yellow-800: #93370D;
|
|
--color-yellow-900: #7A2E0E;
|
|
--color-yellow-tint-5: --alpha(var(--color-yellow-500) / 5%);
|
|
--color-yellow-tint-10: --alpha(var(--color-yellow-500) / 10%);
|
|
--color-cyan-25: #F5FEFF;
|
|
--color-cyan-50: #ECFDFF;
|
|
--color-cyan-100: #CFF9FE;
|
|
--color-cyan-200: #A5F0FC;
|
|
--color-cyan-300: #67E3F9;
|
|
--color-cyan-400: #22CCEE;
|
|
--color-cyan-500: #06AED4;
|
|
--color-cyan-600: #088AB2;
|
|
--color-cyan-700: #0E7090;
|
|
--color-cyan-800: #155B75;
|
|
--color-cyan-900: #164E63;
|
|
--color-cyan-tint-5: --alpha(var(--color-cyan-500) / 5%);
|
|
--color-cyan-tint-10: --alpha(var(--color-cyan-500) / 10%);
|
|
--color-blue-25: #F5FAFF;
|
|
--color-blue-50: #EFF8FF;
|
|
--color-blue-100: #D1E9FF;
|
|
--color-blue-200: #B2DDFF;
|
|
--color-blue-300: #84CAFF;
|
|
--color-blue-400: #53B1FD;
|
|
--color-blue-500: #2E90FA;
|
|
--color-blue-600: #1570EF;
|
|
--color-blue-700: #175CD3;
|
|
--color-blue-800: #1849A9;
|
|
--color-blue-900: #194185;
|
|
--color-blue-tint-5: --alpha(var(--color-blue-500) / 5%);
|
|
--color-blue-tint-10: --alpha(var(--color-blue-500) / 10%);
|
|
--color-indigo-25: #F5F8FF;
|
|
--color-indigo-50: #EFF4FF;
|
|
--color-indigo-100: #E0EAFF;
|
|
--color-indigo-200: #C7D7FE;
|
|
--color-indigo-300: #A4BCFD;
|
|
--color-indigo-400: #8098F9;
|
|
--color-indigo-500: #6172F3;
|
|
--color-indigo-600: #444CE7;
|
|
--color-indigo-700: #3538CD;
|
|
--color-indigo-800: #2D31A6;
|
|
--color-indigo-900: #2D3282;
|
|
--color-indigo-tint-5: --alpha(var(--color-indigo-500) / 5%);
|
|
--color-indigo-tint-10: --alpha(var(--color-indigo-500) / 10%);
|
|
--color-violet-25: #FBFAFF;
|
|
--color-violet-50: #F5F3FF;
|
|
--color-violet-100: #ECE9FE;
|
|
--color-violet-200: #DDD6FE;
|
|
--color-violet-300: #C3B5FD;
|
|
--color-violet-400: #A48AFB;
|
|
--color-violet-500: #875BF7;
|
|
--color-violet-600: #7839EE;
|
|
--color-violet-700: #6927DA;
|
|
--color-violet-tint-5: --alpha(var(--color-violet-500) / 5%);
|
|
--color-violet-tint-10: --alpha(var(--color-violet-500) / 10%);
|
|
--color-fuchsia-25: #FEFAFF;
|
|
--color-fuchsia-50: #FDF4FF;
|
|
--color-fuchsia-100: #FBE8FF;
|
|
--color-fuchsia-200: #F6D0FE;
|
|
--color-fuchsia-300: #EEAAFD;
|
|
--color-fuchsia-400: #E478FA;
|
|
--color-fuchsia-500: #D444F1;
|
|
--color-fuchsia-600: #BA24D5;
|
|
--color-fuchsia-700: #9F1AB1;
|
|
--color-fuchsia-800: #821890;
|
|
--color-fuchsia-900: #6F1877;
|
|
--color-fuchsia-tint-5: --alpha(var(--color-fuchsia-500) / 5%);
|
|
--color-fuchsia-tint-10: --alpha(var(--color-fuchsia-500) / 10%);
|
|
--color-pink-25: #FFFAFC;
|
|
--color-pink-50: #FEF0F7;
|
|
--color-pink-100: #FFD1E2;
|
|
--color-pink-200: #FFB1CE;
|
|
--color-pink-300: #FD8FBA;
|
|
--color-pink-400: #F86BA7;
|
|
--color-pink-500: #F23E94;
|
|
--color-pink-600: #D5327F;
|
|
--color-pink-700: #BA256B;
|
|
--color-pink-800: #9E1958;
|
|
--color-pink-900: #840B45;
|
|
--color-pink-tint-5: --alpha(var(--color-pink-500) / 5%);
|
|
--color-pink-tint-10: --alpha(var(--color-pink-500) / 10%);
|
|
--color-orange-25: #FFF9F5;
|
|
--color-orange-50: #FFF4ED;
|
|
--color-orange-100: #FFE6D5;
|
|
--color-orange-200: #FFD6AE;
|
|
--color-orange-300: #FF9C66;
|
|
--color-orange-400: #FF692E;
|
|
--color-orange-500: #FF4405;
|
|
--color-orange-600: #E62E05;
|
|
--color-orange-700: #BC1B06;
|
|
--color-orange-800: #97180C;
|
|
--color-orange-900: #771A0D;
|
|
--color-orange-tint-5: --alpha(var(--color-orange-500) / 5%);
|
|
--color-orange-tint-10: --alpha(var(--color-orange-500) / 10%);
|
|
--budget-unused-fill: var(--color-gray-200);
|
|
--budget-unallocated-fill: var(--color-gray-50);
|
|
--border-radius-md: 8px;
|
|
--border-radius-lg: 10px;
|
|
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-black) / 6%);
|
|
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-black) / 6%);
|
|
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-black) / 6%);
|
|
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-black) / 6%);
|
|
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-black) / 6%);
|
|
--animate-stroke-fill: stroke-fill 3s 300ms forwards;
|
|
|
|
@keyframes stroke-fill {
|
|
0% { stroke-dashoffset: 43.9822971503; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
[data-theme="dark"] {
|
|
--color-success: var(--color-green-400);
|
|
--color-warning: var(--color-yellow-400);
|
|
--color-destructive: var(--color-red-400);
|
|
--color-info: var(--color-blue-500);
|
|
--color-shadow: --alpha(var(--color-white) / 8%);
|
|
--color-link: var(--color-blue-500);
|
|
--color-focus-ring: var(--color-alpha-white-700);
|
|
--color-tertiary: var(--color-alpha-white-200);
|
|
--color-surface: var(--color-black);
|
|
--color-surface-hover: var(--color-gray-800);
|
|
--color-surface-inset: var(--color-gray-800);
|
|
--color-surface-inset-hover: var(--color-gray-800);
|
|
--color-container: var(--color-gray-900);
|
|
--color-container-hover: var(--color-gray-800);
|
|
--color-container-inset: var(--color-gray-800);
|
|
--color-container-inset-hover: var(--color-gray-700);
|
|
--color-nav-indicator: var(--color-white);
|
|
--color-toggle-track: var(--color-gray-700);
|
|
--color-destructive-subtle: var(--color-red-800);
|
|
--budget-unused-fill: var(--color-gray-500);
|
|
--budget-unallocated-fill: var(--color-gray-700);
|
|
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
|
|
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
|
|
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
|
|
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
|
|
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse {
|
|
@apply bg-gray-800;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse-hover {
|
|
@apply bg-gray-700;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-100;
|
|
}
|
|
}
|
|
|
|
@utility bg-subdued {
|
|
@apply bg-gray-400;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-400;
|
|
}
|
|
}
|
|
|
|
@utility bg-overlay {
|
|
background-color: --alpha(var(--color-gray-100) / 50%);
|
|
|
|
@variant theme-dark {
|
|
background-color: var(--color-alpha-black-900);
|
|
}
|
|
}
|
|
|
|
@utility bg-loader {
|
|
@apply bg-surface-inset animate-pulse;
|
|
}
|
|
|
|
@utility text-primary {
|
|
@apply text-gray-900;
|
|
|
|
@variant theme-dark {
|
|
@apply text-white;
|
|
}
|
|
}
|
|
|
|
@utility text-inverse {
|
|
@apply text-white;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-900;
|
|
}
|
|
}
|
|
|
|
@utility text-secondary {
|
|
@apply text-gray-500;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-300;
|
|
}
|
|
}
|
|
|
|
@utility text-subdued {
|
|
@apply text-gray-400;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-400;
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-xs {
|
|
box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-sm {
|
|
box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-md {
|
|
box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-lg {
|
|
box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-xl {
|
|
box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility border-primary {
|
|
@apply border-alpha-black-300;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-500;
|
|
}
|
|
}
|
|
|
|
@utility border-secondary {
|
|
@apply border-alpha-black-200;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-400;
|
|
}
|
|
}
|
|
|
|
@utility border-divider {
|
|
@apply border-tertiary;
|
|
}
|
|
|
|
@utility border-subdued {
|
|
@apply border-alpha-black-50;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-200;
|
|
}
|
|
}
|
|
|
|
@utility border-solid {
|
|
@apply border-black;
|
|
|
|
@variant theme-dark {
|
|
@apply border-white;
|
|
}
|
|
}
|
|
|
|
@utility border-destructive {
|
|
@apply border-red-500;
|
|
|
|
@variant theme-dark {
|
|
@apply border-red-400;
|
|
}
|
|
}
|
|
|
|
@utility border-inverse {
|
|
@apply border-alpha-white-200;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-black-300;
|
|
}
|
|
}
|
|
|
|
@utility divide-subdued {
|
|
@apply divide-alpha-black-50;
|
|
|
|
@variant theme-dark {
|
|
@apply divide-alpha-white-200;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-primary {
|
|
@apply bg-gray-900;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-primary-hover {
|
|
@apply bg-gray-800;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-50;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-600;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-strong {
|
|
@apply bg-gray-200;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-strong-hover {
|
|
@apply bg-gray-300;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-600;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-disabled {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-destructive {
|
|
@apply bg-red-600;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-red-400;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-destructive-hover {
|
|
@apply bg-red-700;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-red-500;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-ghost-hover {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800 text-inverse;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-outline-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-accent {
|
|
@apply bg-blue-tint-5;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-blue-tint-5;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-accent-hover {
|
|
@apply bg-blue-tint-10;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-blue-tint-10;
|
|
}
|
|
}
|
|
|
|
@utility tab-item-active {
|
|
@apply bg-white;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility tab-item-hover {
|
|
@apply bg-gray-200;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility tab-bg-group {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-alpha-black-700;
|
|
}
|
|
}
|