firebase-os 1.1.4 → 1.1.5

package/dist/firebase-os.es.js

@@ -89363,62 +89363,62 @@ function vUn({ config: e }) {
 //#endregion
 //#region src/pages/DynamicPage.tsx
 function yUn() {
-	let e = Se(), { user: t } = $e(), [n, r] = x(null), [i, a] = x(!0);
+	let e = Se(), { user: t } = $e(), n = Ze(), [r, i] = x(null), [a, o] = x(!0);
 	m(() => {
 		(async () => {
-			a(!0);
+			o(!0);
 			try {
-				let [t, n] = await Promise.all([ee(C(W, "sys_pages")), ee(C(W, "sys_tabs"))]), i = null, a = null, o = (t, n) => {
+				let [t, n] = await Promise.all([ee(C(W, "sys_pages")), ee(C(W, "sys_tabs"))]), r = null, a = null, o = (t, n) => {
 					t.forEach((t) => {
-						let r = t.data(), o = r.route;
+						let i = t.data(), o = i.route;
 						o && !o.startsWith("/") && (o = "/" + o);
 						let s = "/" + t.id === e.pathname;
-						(o === e.pathname || s) && (i = {
-							...r,
+						(o === e.pathname || s) && (r = {
+							...i,
 							isPrivate: n,
-							isAdmin: r.pageType === "admin",
-							isShared: r.pageType === "shared"
+							isAdmin: i.pageType === "admin",
+							isShared: i.pageType === "shared"
 						}, a = t.id);
 					});
 				};
-				if (o(t, !1), i || o(n, !0), i || (e.pathname === "/contact" ? (i = {
+				if (o(t, !1), r || o(n, !0), r || (e.pathname === "/contact" ? (r = {
 					route: "/contact",
 					template: "popup_form",
 					form: "contact"
-				}, a = "contact") : e.pathname === "/support" && (i = {
+				}, a = "contact") : e.pathname === "/support" && (r = {
 					route: "/support",
 					template: "popup_form",
 					form: "support"
-				}, a = "support")), i) {
-					if ((a === "contact" || a === "support") && !i.form && (i.form = a), i.pageId = a, i.form) {
-						let e = await E(T(W, "sys_forms", i.form));
-						if (e.exists()) i.formConfigOverride = {
+				}, a = "support")), r) {
+					if ((a === "contact" || a === "support") && !r.form && (r.form = a), r.pageId = a, r.form) {
+						let e = await E(T(W, "sys_forms", r.form));
+						if (e.exists()) r.formConfigOverride = {
 							...e.data(),
 							id: e.id
 						};
-						else if (i.form === "contact") {
+						else if (r.form === "contact") {
 							let { contactFormConfig: e } = await import("./contactForm.config-DLeI_ZEj.js");
-							i.formConfigOverride = e;
-						} else if (i.form === "support") {
+							r.formConfigOverride = e;
+						} else if (r.form === "support") {
 							let { supportFormConfig: e } = await import("./supportForm.config-74T-eSSH.js");
-							i.formConfigOverride = e;
+							r.formConfigOverride = e;
 						}
 					}
-					let e = i.pageName || i.tabName || i.title;
-					e && (document.title = e), r(i);
-				} else r("not-found");
+					let e = r.pageName || r.tabName || r.title;
+					e && (document.title = e), i(r);
+				} else i("not-found");
 			} catch {
-				r("not-found");
+				i("not-found");
 			} finally {
-				a(!1);
+				o(!1);
 			}
 		})();
 	}, [e.pathname]);
-	let [o, s] = x(!1);
+	let [s, c] = x(!1);
 	if (m(() => {
 		let e;
-		return i ? e = setTimeout(() => s(!0), 150) : s(!1), () => clearTimeout(e);
-	}, [i]), i) return o ? t ? /* @__PURE__ */ V("main", {
+		return a ? e = setTimeout(() => c(!0), 150) : c(!1), () => clearTimeout(e);
+	}, [a]), a) return s ? t ? /* @__PURE__ */ V("main", {
 		className: "flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col",
 		children: [/* @__PURE__ */ V("div", {
 			className: "mb-6",
@@ -89434,7 +89434,7 @@ function yUn() {
 		className: "flex-1 flex items-center justify-center min-h-[60vh] z-10",
 		children: /* @__PURE__ */ B(K, { className: "w-6 h-6 animate-spin text-accent" })
 	}) : null;
-	if (n === "not-found") return /* @__PURE__ */ B("main", {
+	if (r === "not-found") return /* @__PURE__ */ B("main", {
 		className: "flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen",
 		children: /* @__PURE__ */ V("div", {
 			className: "flex flex-col items-center justify-center flex-1 text-center",
@@ -89481,53 +89481,53 @@ function yUn() {
 			]
 		})
 	});
-	if ((n.pageId === "support" || n.isPrivate) && !t) return /* @__PURE__ */ B(be, {
+	if ((r.pageId === "support" || r.isPrivate) && !t) return /* @__PURE__ */ B(be, {
 		to: "/login",
 		state: { from: e }
 	});
-	let c = n.pageName?.toLowerCase().replace(/\s+/g, "_") || n.pageId || "custom_page", l = `pub_${c}`;
-	if (n.template === "none") return n.isAdmin ? /* @__PURE__ */ B(_Un, { config: n }) : n.isShared ? /* @__PURE__ */ B(vUn, { config: n }) : n.isPrivate ? /* @__PURE__ */ B(gUn, { config: n }) : /* @__PURE__ */ B(hUn, { config: n });
-	if (n.template === "board") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B(JVn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Board",
-			subtitle: n.route,
+	let l = r.pageName?.toLowerCase().replace(/\s+/g, "_") || r.pageId || "custom_page", u = `pub_${l}`;
+	if (r.template === "none") return r.isAdmin ? /* @__PURE__ */ B(_Un, { config: r }) : r.isShared ? /* @__PURE__ */ B(vUn, { config: r }) : r.isPrivate ? /* @__PURE__ */ B(gUn, { config: r }) : /* @__PURE__ */ B(hUn, { config: r });
+	if (r.template === "board") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateBoard || JVn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Board",
+			subtitle: r.route,
 			tasksCollection: `${e}_tasks`,
 			categoriesCollection: `${e}_categories`,
-			config: n
+			config: r
 		});
 	}
-	if (n.template === "table") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B($Hn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Table",
-			subtitle: n.route,
+	if (r.template === "table") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateTable || $Hn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Table",
+			subtitle: r.route,
 			tableCollection: `${e}_table`,
-			config: n
+			config: r
 		});
 	}
-	if (n.template === "calendar") {
-		let e = n.isAdmin ? `admin_${n.pageId || c}` : n.isShared ? `mem_${n.pageId || c}` : n.isPrivate ? `user_${n.pageId || c}` : l;
-		return /* @__PURE__ */ B(tUn, {
-			title: n.tabTitle || n.tabName || n.title || n.pageName || "Calendar",
-			subtitle: n.route,
+	if (r.template === "calendar") {
+		let e = r.isAdmin ? `admin_${r.pageId || l}` : r.isShared ? `mem_${r.pageId || l}` : r.isPrivate ? `user_${r.pageId || l}` : u;
+		return /* @__PURE__ */ B(n.components?.TemplateCalendar || tUn, {
+			title: r.tabTitle || r.tabName || r.title || r.pageName || "Calendar",
+			subtitle: r.route,
 			eventsCollection: `${e}_events`,
-			defaultTimeFormat: n.defaultTimeFormat || n.defaulttimeformat || "12h",
-			config: n
+			defaultTimeFormat: r.defaultTimeFormat || r.defaulttimeformat || "12h",
+			config: r
 		});
 	}
-	return n.template === "inline_form" ? /* @__PURE__ */ B("div", {
+	return r.template === "inline_form" ? /* @__PURE__ */ B("div", {
 		className: "flex-1 flex flex-col items-center justify-start mt-8 relative z-10 w-full min-h-[60vh]",
 		children: /* @__PURE__ */ B(Es, {
 			isInline: !0,
-			formId: n.form,
-			formConfig: n.formConfigOverride
+			formId: r.form,
+			formConfig: r.formConfigOverride
 		})
 	}) : /* @__PURE__ */ B("div", {
 		className: "flex-1 flex flex-col items-center justify-center relative z-10 w-full min-h-[60vh]",
 		children: /* @__PURE__ */ B(Es, {
-			formId: n.form,
-			formConfig: n.formConfigOverride,
+			formId: r.form,
+			formConfig: r.formConfigOverride,
 			onClose: () => window.history.back()
 		})
 	});
@@ -90265,6 +90265,7 @@ function PUn() {
 	});
 }
 function FUn() {
+	let e = Ze().components?.Home || fce;
 	return /* @__PURE__ */ B(eee, { children: /* @__PURE__ */ V("div", {
 		className: "min-h-screen relative flex flex-col overflow-x-hidden",
 		children: [
@@ -90272,7 +90273,7 @@ function FUn() {
 			/* @__PURE__ */ V(xe, { children: [
 				/* @__PURE__ */ B(U, {
 					path: "/",
-					element: /* @__PURE__ */ B(Q9, { children: /* @__PURE__ */ B(fce, {}) })
+					element: /* @__PURE__ */ B(Q9, { children: /* @__PURE__ */ B(e, {}) })
 				}),
 				/* @__PURE__ */ B(U, {
 					path: "/register",
@@ -90397,30 +90398,18 @@ function RUn(e) {
 			firebaseConfig: e.firebaseConfig,
 			adminEmails: e.adminEmails,
 			basename: e.basename,
-			onAuthChange: e.onAuthChange
+			onAuthChange: e.onAuthChange,
+			themeConfig: e.themeConfig,
+			components: e.components
 		},
 		children: /* @__PURE__ */ B(qe, {
 			scopeSelector: ".firebase-os",
-			children: /* @__PURE__ */ V("div", {
-				className: "firebase-os",
-				style: {
-					position: "fixed",
-					inset: 0,
-					width: "100vw",
-					height: "100vh",
-					zIndex: 9999,
-					overflowY: "auto",
-					overflowX: "hidden",
-					textAlign: "left",
-					margin: 0,
-					padding: 0,
-					background: "var(--bg-gradient)",
-					color: "var(--fg-color)"
-				},
-				children: [/* @__PURE__ */ B("style", { children: "\n            /* Defensive Typography Reset: Specificity 0,0,0 */\n            /* This ensures we provide base styles without overriding ANY utility classes */\n            :where(.firebase-os) :where(h1, h2, h3, h4, h5, h6, p, span, li, label, a, td, th) {\n              color: var(--fg-color);\n              font-family: var(--font-family, 'Inter', system-ui, sans-serif);\n            }\n            :where(.firebase-os) :where(h1, h2, h3, h4, h5, h6, p) {\n              margin: 0;\n            }\n            :where(.firebase-os) :where(code, pre) {\n              font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !important;\n              background: transparent;\n              border: none;\n            }\n          " }), /* @__PURE__ */ B(IUn, {})]
+			children: /* @__PURE__ */ B("div", {
+				className: "firebase-os flex-1 flex flex-col min-h-screen",
+				children: /* @__PURE__ */ B(IUn, {})
 			})
 		})
 	});
 }
 //#endregion
-export { RUn as FirebaseOS, $e as useAuth, Ze as useConfig, Je as useTheme };
+export { Es as ContactPopup, RUn as FirebaseOS, Ie as auth, W as db, Ns as defaultHomeConfig, Le as storage, $e as useAuth, Ze as useConfig, Je as useTheme };

package/dist/index.d.ts

@@ -4,3 +4,6 @@ export { useAuth } from './lib/AuthContext';
 export { useTheme } from './lib/ThemeContext';
 export { useConfig } from './lib/ConfigContext';
 export type { FirebaseOSConfig } from './lib/ConfigContext';
+export { db, auth, storage } from './lib/firebase';
+export { ContactPopup } from './components/ContactPopup';
+export { defaultHomeConfig } from './configs/pages/home.config';

package/dist/lib/ConfigContext.d.ts

@@ -11,6 +11,18 @@ export interface FirebaseOSConfig {
     adminEmails?: string[];
     basename?: string;
     onAuthChange?: (user: any) => void;
+    themeConfig?: any;
+    components?: {
+        Home?: React.ComponentType<any>;
+        TemplateBoard?: React.ComponentType<any>;
+        TemplateTable?: React.ComponentType<any>;
+        TemplateCalendar?: React.ComponentType<any>;
+        TemplatePopupForm?: React.ComponentType<any>;
+        TemplateInlineForm?: React.ComponentType<any>;
+        TemplatePages?: React.ComponentType<any>;
+        TemplateStorage?: React.ComponentType<any>;
+        TemplateNone?: React.ComponentType<any>;
+    };
 }
 export declare function ConfigProvider({ config, children }: {
     config: FirebaseOSConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebase-os",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/firebase-os.cjs.js",
@@ -21,7 +21,8 @@
   },
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "src"
   ],
   "scripts": {
     "dev": "vite",

package/scripts/postinstall.js

@@ -81,22 +81,54 @@ createRoot(document.getElementById('root')!).render(
   }
 }
 
-// ── 3. Reveal the CSS by copying it to the consumer's src directory ──────────
-const sourceCssPath = path.join(__dirname, '..', 'dist', 'firebase-os.css');
-const targetCssPath = path.join(srcDir, 'firebase-os.css');
+// ── 3. Hybrid Architecture: Create local overrides directory ─────────────
+const fbosDir = path.join(srcDir, 'firebase-os');
+if (!fs.existsSync(fbosDir)) fs.mkdirSync(fbosDir, { recursive: true });
+
+// Copy raw index.css to give user full control over Tailwind and variables
+const sourceCssPath = path.join(__dirname, '..', 'src', 'index.css');
 if (fs.existsSync(sourceCssPath)) {
-  fs.copyFileSync(sourceCssPath, targetCssPath);
-  console.log('  ✓ Copied firebase-os.css to your src directory');
+  fs.copyFileSync(sourceCssPath, path.join(fbosDir, 'theme.css'));
+  console.log('  ✓ Copied theme.css to your src/firebase-os directory');
+}
+
+// Copy configurations
+const configsDir = path.join(fbosDir, 'configs');
+if (!fs.existsSync(configsDir)) fs.mkdirSync(configsDir, { recursive: true });
+
+const copyConfig = (srcPath, destName) => {
+  const fullSrc = path.join(__dirname, '..', 'src', 'configs', srcPath);
+  if (fs.existsSync(fullSrc)) {
+    fs.copyFileSync(fullSrc, path.join(configsDir, destName));
+  }
+};
+copyConfig('theme.config.ts', 'theme.config.ts');
+copyConfig('pages/home.config.ts', 'home.config.ts');
+copyConfig('forms/contactForm.config.ts', 'contactForm.config.ts');
+copyConfig('forms/supportForm.config.ts', 'supportForm.config.ts');
+console.log('  ✓ Copied configuration files to your src/firebase-os/configs directory');
+
+// Read and rewrite Home.tsx
+const sourceHomePath = path.join(__dirname, '..', 'src', 'pages', 'Home.tsx');
+if (fs.existsSync(sourceHomePath)) {
+  let homeContent = fs.readFileSync(sourceHomePath, 'utf8');
+  homeContent = homeContent.replace(/from '\.\.\/components\/ContactPopup'/g, "from 'firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/lib\/firebase'/g, "from 'firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/configs\/pages\/home\.config'/g, "from './configs/home.config'");
+  fs.writeFileSync(path.join(fbosDir, 'Home.tsx'), homeContent);
+  console.log('  ✓ Created local Home.tsx template override');
 }
 
-// ── 4. Write App.tsx with FirebaseOS already wired up ───────────────────────
+// ── 4. Write App.tsx with Hybrid Overrides Wired Up ───────────────────────
 const appPath = path.join(srcDir, 'App.tsx');
 const appContent = `import { FirebaseOS } from 'firebase-os';
-import './firebase-os.css';
+import './firebase-os/theme.css';
+
+// Local Hybrid Overrides
+import { Home } from './firebase-os/Home';
+import { themeConfig } from './firebase-os/configs/theme.config';
 
 // Vite injects these from your .env file at dev/build time.
-// The library can't read them directly since it's pre-built,
-// so we pass them as props.
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
@@ -116,21 +148,57 @@ export default function App() {
     <FirebaseOS
       firebaseConfig={firebaseConfig}
       adminEmails={adminEmails}
+      themeConfig={themeConfig}
+      components={{
+        Home: Home
+      }}
     />
   );
 }
 `;
 
-// Only write if the file doesn't already import FirebaseOS
 const existingApp = fs.existsSync(appPath) ? fs.readFileSync(appPath, 'utf8') : '';
 if (!existingApp.includes('firebase-os')) {
   fs.writeFileSync(appPath, appContent);
-  console.log('  ✓ Wrote App.tsx with <FirebaseOS /> ready to go');
+  console.log('  ✓ Wrote App.tsx with <FirebaseOS /> hybrid architecture ready to go');
 } else {
   console.log('  ℹ App.tsx already uses firebase-os — skipped');
 }
 
-// ── 4. Create .env file with placeholders ──────────────────────────────────
+// ── 5. Setup Tailwind V4 in host app ───────────────────────────────────────
+// We'll update the user's package.json to include tailwindcss dependencies
+const pkgPath = path.join(consumerRoot, 'package.json');
+if (fs.existsSync(pkgPath)) {
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  let pkgModified = false;
+  pkg.devDependencies = pkg.devDependencies || {};
+  
+  if (!pkg.devDependencies['tailwindcss']) {
+    pkg.devDependencies['tailwindcss'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (!pkg.devDependencies['@tailwindcss/vite']) {
+    pkg.devDependencies['@tailwindcss/vite'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (pkgModified) {
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    console.log('  ✓ Added tailwindcss and @tailwindcss/vite to your package.json');
+  }
+}
+
+const viteConfigPath = path.join(consumerRoot, 'vite.config.ts');
+if (fs.existsSync(viteConfigPath)) {
+  let viteConfig = fs.readFileSync(viteConfigPath, 'utf8');
+  if (!viteConfig.includes('@tailwindcss/vite')) {
+    viteConfig = "import tailwindcss from '@tailwindcss/vite';\\n" + viteConfig;
+    viteConfig = viteConfig.replace('plugins: [', 'plugins: [\\n    tailwindcss(),');
+    fs.writeFileSync(viteConfigPath, viteConfig);
+    console.log('  ✓ Patched vite.config.ts to enable Tailwind CSS v4');
+  }
+}
+
+// ── 6. Create .env file with placeholders ──────────────────────────────────
 const envPath = path.join(consumerRoot, '.env');
 if (!fs.existsSync(envPath)) {
   const envContent = `# 🔥 Firebase OS Configuration
@@ -145,10 +213,13 @@ VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
 VITE_FIREBASE_APP_ID=your_app_id
 
 # Comma-separated list of admin emails
-VITE_ADMIN_EMAILS=your_email@example.com
+VITE_ADMIN_EMAILS=admin@example.com
 `;
   fs.writeFileSync(envPath, envContent);
-  console.log('  ✓ Created .env file with configuration placeholders');
+  console.log('  ✓ Created .env template');
 }
 
-console.log('\n[firebase-os] Setup complete! Run `npm run dev` to start.\n');
+console.log('\n[firebase-os] 🎉 Hybrid Setup complete! You now have full control over styling and configs.\n');
+console.log('🚨 IMPORTANT NEXT STEPS:');
+console.log('1. Run `npm install` again to install the required Tailwind CSS dependencies.');
+console.log('2. Run `npm run dev` to start your app.\n');

package/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}