/* ============================================================================= ARCO ONE — "Emerald Glass" design system (P11) Approved theme (light + dark). Mobile-first responsive: - >=1180px : fixed glass sidebar - 720..1179: sidebar hidden -> hamburger drawer - <720px : drawer + bottom navigation, stacked cards Dark mode via , persisted by shell.js. ========================================================================== */ :root { --ink: #123332; --muted: #5d7a75; --faint: #94b0a9; --accent: #0d9488; --accent-2: #065f46; --deep: #115e59; --gold: #d97706; --gold-soft: #fbbf24; --ok: #047857; --bad: #dc2626; --card: rgba(255, 255, 255, 0.72); --card-solid: #ffffff; --border: rgba(17, 94, 89, 0.12); --border-soft: rgba(17, 94, 89, 0.06); --side-bg: rgba(255, 255, 255, 0.55); --body-bg: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 30%, #fefce8 100%); --hero-bg: linear-gradient(120deg, #0f766e, #115e59 55%, #134e4a); /* strengthened 2026-08-22: the whole menu now reads in this one ink */ --nav-link: #142e2b; --nav-icon: #7d9a93; --shadow-card: 0 10px 30px -18px rgba(17, 94, 89, 0.25); --shadow-pop: 0 8px 18px -6px rgba(13, 148, 136, 0.5); --chip-accent-bg: rgba(13, 148, 136, 0.12); --radius: 20px; } [data-theme="dark"] { --ink: #e5f4f1; --muted: #9dbcb5; --faint: #6b8d86; --accent: #2dd4bf; --accent-2: #0d9488; --deep: #99f6e4; --ok: #34d399; --bad: #f87171; --card: rgba(19, 38, 36, 0.72); --card-solid: #10201e; --border: rgba(45, 212, 191, 0.14); --border-soft: rgba(45, 212, 191, 0.07); --side-bg: rgba(10, 24, 22, 0.66); --body-bg: linear-gradient(160deg, #071512 0%, #0a1e1a 45%, #16130a 100%); --hero-bg: linear-gradient(120deg, #134e4a, #0f3d39 55%, #0a2926); --nav-link: #dcebe7; --nav-icon: #6b8d86; --shadow-card: 0 10px 30px -18px rgba(0, 0, 0, 0.6); --shadow-pop: 0 8px 18px -6px rgba(13, 148, 136, 0.35); --chip-accent-bg: rgba(45, 212, 191, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } body.one { font-family: "Manrope", "Segoe UI", Tahoma, sans-serif; color: var(--ink); font-size: 14px; background: var(--body-bg); background-attachment: fixed; display: flex; min-height: 100vh; } svg { display: block; } a { color: var(--accent); } /* ---------------------------------------------------------- sidebar */ .one-side { width: 252px; flex: none; padding: 22px 14px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-right: 1px solid var(--border); z-index: 40; scrollbar-width: thin; } .one-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; text-decoration: none; color: inherit; } .one-logo .mark { width: 36px; height: 36px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: var(--shadow-pop); } .one-logo b { font-size: 16.5px; letter-spacing: -0.02em; } .one-logo small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; } .one-co { display: flex; gap: 6px; padding: 0 8px 12px; } .one-co button { flex: 1; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 10px; padding: 6px 0; font-weight: 800; font-size: 11.5px; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; } .one-co button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; } /* ------------------------------------------------------- the page header ONE header per page, never two. The pages every signed-in person holds (their profile, what waits on their signature, raising a request) are not a department's work, so they ride the header instead of taking a section in a department's sidebar — and the company being viewed is chosen there too, because it changes what every page below shows. The /one pages already carry a .one-topbar; the header pieces are placed INSIDE it. Old pages have no header of their own, so .one-topstrip below builds one that looks the same. */ .one-headgrp { display: flex; align-items: center; gap: 4px; flex: none; } .one-headgrp a { display: flex; align-items: center; gap: 7px; flex: none; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 12.5px; position: relative; } .one-headgrp a svg { width: 16px; height: 16px; stroke: var(--nav-icon); flex: none; } .one-headgrp a:hover { background: rgba(13, 148, 136, 0.09); } .one-headgrp a.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .one-headgrp a.on svg { stroke: #fff; } .one-headgrp .nav-badge { position: static; margin-left: 1px; } /* the label is a hint, not a control: it goes first when there is room */ .one-cosel { display: flex; align-items: center; gap: 6px; flex: none; } .one-cosel-lbl { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; } /* The selector holds a company master of eight and counting, so it is a dropdown, not a row of buttons. It carries the accent so it reads as the one control that changes what every page below shows. */ .one-cosel-box { display: flex; align-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -10px rgba(13, 148, 136, 0.9); } .one-cosel select { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; background: transparent; color: #fff; font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: .02em; padding: 7px 30px 7px 12px; max-width: 220px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 13px; } .one-cosel select:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } /* the list itself is drawn by the browser, so it needs readable colours */ .one-cosel select option { background: var(--card-solid); color: var(--ink); } /* the free room in a header: keeps the theme switch and the avatar against the right edge on pages that bring no search box of their own */ .one-headfill { flex: 1; min-width: 8px; } /* Old pages get the same header built for them, pinned across the top. */ .one-topstrip { position: fixed; top: 0; left: 252px; right: 0; height: 62px; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--side-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow-x: auto; scrollbar-width: none; } .one-topstrip::-webkit-scrollbar { display: none; } .one-strip-burger { display: none; flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-solid); color: var(--ink); cursor: pointer; place-items: center; } .one-strip-burger svg { width: 18px; height: 18px; stroke: currentColor; } /* Room for the built header, in both layouts, without cutting the sidebar. */ body.one-strip { padding-top: 62px; } body.one-legacy.one-strip .one-side { top: 62px; height: calc(100vh - 62px); } /* The built header replaces the floating burger it would have covered. */ body.one-strip .one-fab { display: none !important; } @media (max-width: 1179px) { .one-topstrip { left: 0; } body.one-legacy.one-strip .one-side { top: 0; height: 100vh; } .one-strip-burger { display: grid; } .one-cosel-lbl { display: none; } } @media (max-width: 980px) { /* Labels are the first thing to give way, so the search box and the company switcher keep their room. Each link carries a title, so the icon alone is still explainable on hover and to a screen reader. */ .one-headgrp a span { display: none; } } @media (max-width: 719px) { /* Let the header wrap onto a second line rather than overflow the page. */ .one-topbar { flex-wrap: wrap; } } .one-sec { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; padding: 14px 12px 6px; } /* One voice for the whole menu (owner 2026-08-22): every top-level entry — link or group — shares the same ink, weight, icon tone, hover and pressed state. The old black-vs-grey "new system" split read as a bug. The only intentional exception is the Trash section (nav-green below). */ .one-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 13px; color: var(--nav-link); text-decoration: none; font-weight: 650; transition: background .15s, color .15s, transform .1s; font-size: 13.5px; } .one-nav a svg { width: 17px; height: 17px; stroke: var(--nav-icon); flex: none; transition: stroke .15s; } .one-nav a:hover { background: rgba(13, 148, 136, 0.09); color: var(--accent); } .one-nav a:hover svg { stroke: var(--accent); } .one-nav a:active { background: rgba(13, 148, 136, 0.16); transform: scale(.985); } .one-nav a:focus-visible, .one-nav-parent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* nav-black retired (owner 2026-08-22): the black-vs-grey split looked like a styling bug, so new-system entries now dress like everything else. */ /* green — new-system pages parked in the trash (owner 2026-08-22): the colour says "this is ONE's page, not an old-ERP leftover" while it waits for the keep-or-delete verdict. */ .one-nav .nav-green, .one-nav a.nav-green, .one-nav .one-nav-parent.nav-green, .one-nav .one-subnav a.nav-green { color: #059669; font-weight: 750; } .one-nav .nav-green svg { stroke: #059669; } .one-nav .one-subnav a.nav-green .one-subdot { background: #059669; } [data-theme="dark"] .one-nav .nav-green, [data-theme="dark"] .one-nav a.nav-green, [data-theme="dark"] .one-nav .one-subnav a.nav-green { color: #34d399; } [data-theme="dark"] .one-nav .nav-green svg { stroke: #34d399; } [data-theme="dark"] .one-nav .one-subnav a.nav-green .one-subdot { background: #34d399; } .one-nav a.on { background: linear-gradient(135deg, #0d9488, #0f766e); color: #fff; box-shadow: 0 8px 18px -8px rgba(13, 148, 136, 0.6); } .one-nav a.on svg { stroke: #fff; } .one-nav-group { display: block; } .one-nav-parent { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 0; border-radius: 13px; color: var(--nav-link); background: transparent; font: inherit; font-size: 13.5px; font-weight: 650; text-align: left; cursor: pointer; transition: background .15s, color .15s, transform .1s; } .one-nav-parent:hover, .one-nav-parent.tree-on { background: rgba(13,148,136,.09); color: var(--accent); } .one-nav-parent:active { background: rgba(13,148,136,.16); transform: scale(.985); } .one-nav-parent > svg:not(.one-nav-chevron) { width: 17px; height: 17px; stroke: var(--nav-icon); flex: none; transition: stroke .15s; } .one-nav-parent:hover > svg:not(.one-nav-chevron), .one-nav-parent.tree-on > svg:not(.one-nav-chevron) { stroke: var(--accent); } .one-nav-label { min-width: 0; flex: 1; } .one-nav-chevron { width: 14px !important; height: 14px !important; margin-left: 2px; stroke: var(--faint) !important; transition: transform .18s ease; flex: none; } .one-nav-group.open .one-nav-chevron { transform: rotate(90deg); } .one-subnav { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .24s ease, opacity .16s ease; } /* Tall enough for the longest group (Payroll: ten pages at ~33px each) — a short cap silently clipped the last entries off the bottom. */ .one-nav-group.open .one-subnav { max-height: 560px; opacity: 1; } .one-subnav a { min-height: 0; margin: 1px 5px 1px 24px; padding: 7px 9px; border-radius: 9px; gap: 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; } .one-subnav a.on { color: #fff; background: linear-gradient(135deg,#0d9488,#0f766e); box-shadow: 0 5px 12px -8px rgba(13,148,136,.7); } .one-subdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; flex: none; } .one-nav a .pill { margin-left: auto; background: var(--chip-accent-bg); color: var(--accent); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; flex: none; } .one-nav a.on .pill { background: rgba(255, 255, 255, 0.25); color: #fff; } .one-nav a .pill.soon { background: rgba(217, 119, 6, 0.14); color: var(--gold); } /* config-driven NEW badge (house rule: every new menu item ships with it until the owner removes the flag) — display-only, black like the new-system label it accompanies */ .one-nav a .pill.new { background: #0a0f1a; color: #f8fafc; letter-spacing: .06em; } [data-theme="dark"] .one-nav a .pill.new { background: #f8fafc; color: #0a0f1a; } .one-nav a.on .pill.new { background: rgba(255, 255, 255, 0.92); color: #0a0f1a; } .one-nav a .nav-badge { margin-left: auto; background: #dc2626; color: #fff; min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 10.5px; font-weight: 800; padding: 0 5px; border-radius: 99px; flex: none; } .one-nav a.on .nav-badge { background: #fff; color: #dc2626; } .one-nav-parent .nav-badge { margin-left: auto; background: #dc2626; color: #fff; min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 10.5px; font-weight: 800; padding: 0 5px; border-radius: 99px; flex: none; } .one-side .spacer { flex: 1; } .one-theme-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 13px; color: var(--nav-link); text-decoration: none; font-weight: 700; font-size: 12.5px; } .one-theme-row svg { width: 16px; height: 16px; stroke: var(--nav-icon); flex: none; } .one-theme-row:hover { background: rgba(13, 148, 136, 0.09); } .one-who { padding: 10px 12px 2px; color: var(--muted); font-size: 12px; font-weight: 700; } .one-logout { padding: 6px 12px 2px; font-size: 12px; font-weight: 800; color: var(--bad); text-decoration: none; } /* ---------------------------------------------------------- main / topbar */ .one-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .one-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 28px; } .one-burger { display: none; border: 1px solid var(--border); background: var(--card); color: var(--ink); border-radius: 12px; width: 40px; height: 40px; cursor: pointer; place-items: center; } .one-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 9px 14px; color: var(--muted); backdrop-filter: blur(10px); } .one-search input { border: none; outline: none; background: transparent; color: var(--ink); font: inherit; width: 100%; font-weight: 600; } .tb-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 13px; color: var(--nav-link); cursor: pointer; backdrop-filter: blur(10px); text-decoration: none; font-family: inherit; } .tb-btn.ai { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; box-shadow: var(--shadow-pop); } .one-avatar { width: 36px; height: 36px; border-radius: 99px; flex: none; background: linear-gradient(135deg, var(--gold), #dc2626); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; } .one-content { padding: 8px 28px 40px; max-width: 1280px; width: 100%; } /* ---------------------------------------------------------- components */ .hero { background: var(--hero-bg); border-radius: 24px; padding: 24px 28px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 18px; box-shadow: 0 20px 40px -20px rgba(17, 94, 89, 0.5); position: relative; overflow: hidden; margin-bottom: 18px; flex-wrap: wrap; } .hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 99px; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%); pointer-events: none; /* decorative only — must never swallow button clicks */ } .hero h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; } .hero p { opacity: 0.75; margin-top: 5px; font-weight: 500; } .hero .big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; } .hero .big small { font-size: 13px; font-weight: 600; opacity: 0.7; } .btn-hero { background: #fff; color: #115e59; border: none; border-radius: 13px; padding: 11px 20px; font-weight: 800; font-size: 13.5px; cursor: pointer; display: flex; gap: 8px; align-items: center; z-index: 1; font-family: inherit; text-decoration: none; white-space: nowrap; } /* two hero buttons side by side (Purchase Desk + New Request) — without this they stacked glued on top of each other (owner report 2026-08-06) */ .hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kpi { background: var(--card); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; box-shadow: var(--shadow-card); } .kpi .row { display: flex; justify-content: space-between; align-items: center; } .kpi .chip { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--chip-accent-bg); } .kpi .chip svg { width: 19px; height: 19px; } .kpi .delta { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; } .up { color: var(--ok); background: rgba(4, 120, 87, 0.12); } .down { color: var(--bad); background: rgba(220, 38, 38, 0.1); } .kpi h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 13px 0 4px; } .kpi .val { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .kpi .sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; font-weight: 500; } .grid2 { display: grid; grid-template-columns: 1.9fr 1fr; gap: 14px; margin-top: 14px; } .panel { background: var(--card); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); min-width: 0; } .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; } .panel-head h2 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; } .panel-head .link { color: var(--accent); font-weight: 800; font-size: 12.5px; text-decoration: none; } .tbl-wrap { overflow-x: auto; } table.one { width: 100%; border-collapse: collapse; font-size: 13px; } table.one th { text-align: left; color: var(--faint); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.one td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); } table.one tr:last-child td { border-bottom: none; } .tag { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; } .t-ok { background: rgba(4, 120, 87, 0.12); color: var(--ok); } .t-wait { background: rgba(217, 119, 6, 0.14); color: var(--gold); } .t-pdc { background: var(--chip-accent-bg); color: var(--accent); } .t-plan { background: rgba(148, 176, 169, 0.18); color: var(--muted); } .doc { font-weight: 700; } .doc small { display: block; color: var(--faint); font-weight: 600; } .money { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ai-card { background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(217, 119, 6, 0.08)); border: 1px solid rgba(13, 148, 136, 0.25); border-radius: var(--radius); padding: 17px; margin-top: 14px; display: flex; gap: 13px; align-items: flex-start; } .ai-card .chip { background: linear-gradient(135deg, #0d9488, #065f46); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; } .ai-card b { font-size: 13.5px; } .ai-card p { color: var(--nav-link); font-size: 12.5px; margin-top: 4px; line-height: 1.65; font-weight: 500; } .footer-note { text-align: center; color: var(--faint); font-size: 12px; padding: 20px; font-weight: 600; } /* report-center cards */ .rep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } .rep-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; transition: 0.15s; } .rep-card:hover { transform: translateY(-2px); border-color: var(--accent); } .rep-card .rc-head { display: flex; align-items: center; gap: 10px; } .rep-card .chip { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--chip-accent-bg); flex: none; } .rep-card b { font-size: 13.5px; } .rep-card p { color: var(--muted); font-size: 12px; line-height: 1.55; font-weight: 500; } .rep-card .rc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; } .rep-card .src { font-size: 10.5px; color: var(--faint); font-weight: 700; } /* ---------------------------------------------------------- drawer + bottom nav */ /* Layering (mobile drawer open): content < bottom nav (50) < scrim (60) < drawer (70) < burger/fab (75). The drawer MUST sit above the scrim or the blurred overlay washes it out and swallows the first tap on menu links. */ .one-scrim { display: none; position: fixed; inset: 0; background: rgba(4, 20, 18, 0.45); z-index: 60; backdrop-filter: blur(2px); } .one-bottom { display: none; } @media (max-width: 1179px) { .one-side { position: fixed; left: 0; top: 0; transform: translateX(-102%); transition: transform 0.22s ease; box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); background: var(--card-solid); z-index: 70; /* above the scrim + bottom nav */ height: 100vh; height: 100dvh; /* dvh: correct under mobile URL bar */ overscroll-behavior: contain; /* don't scroll the page behind it */ } body.one.side-open .one-side { transform: translateX(0); } body.one.side-open .one-scrim { display: block; } body.side-open { overflow: hidden; } /* freeze background while menu open */ .one-burger { display: grid; } .kpis { grid-template-columns: repeat(2, 1fr); } .grid2 { grid-template-columns: 1fr; } .rep-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 719px) { .one-topbar { padding: 10px 14px; } .one-content { padding: 4px 14px 96px; } /* keep the drawer's last rows (theme / logout) clear of the bottom nav and the phone's home-indicator area */ .one-side { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } .kpis { grid-template-columns: 1fr; } .rep-grid { grid-template-columns: 1fr; } .hero { padding: 18px; } .hero .big { font-size: 24px; } .tb-btn span.lbl { display: none; } .one-bottom { display: flex; position: fixed; left: 10px; right: 10px; z-index: 50; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card-solid); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.35); padding: 6px; } /* while the drawer is open, tuck the bottom nav away so its buttons can't be tapped through / clash with the drawer */ body.side-open .one-bottom { opacity: 0; pointer-events: none; transition: opacity 0.15s; } .one-bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 13px; text-decoration: none; color: var(--muted); font-size: 10px; font-weight: 800; } .one-bottom a svg { width: 18px; height: 18px; stroke: currentColor; } .one-bottom a.on { color: #fff; background: linear-gradient(135deg, #0d9488, #0f766e); } }