/* ═══════════════════════════════════════════════════════════════════ AquaSentinel skin for Bigcapital (books.aquasentinel.pro) Injected via nginx sub_filter — see /opt/bigcapital/skin/README Brand: docs/BRAND.md · thin Poppins + aqua emphasis + pink punctuation 2026-07-11 v3 — KINGPIN LIGHT GLASS. The Kingpin console defaults to light frosted glass; Books now matches it: light aqua/pink wash, translucent white panels, ink text. Requires the companion inline script (in skin/default.conf) that strips Bigcapital's hardcoded bp4-dark class from — Blueprint dark text is unreadable on the light glass. Values mirror kingpin/index.html body.light tokens. ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&family=Open+Sans:wght@300;400;600&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); :root{ --as-aqua:#2ea3f2; --as-aqua-dark:#1a8cd8; --as-aqua-deep:#1279C2; --as-glow:rgba(46,163,242,.35); --as-signal:#FF2D78; --as-ink:#0F1B2D; --as-silver:#3E4E68; --as-mid:#5B6B84; --as-dim:#94a3b8; --as-line:rgba(15,30,60,.10); --as-line2:rgba(15,30,60,.05); --as-panel:rgba(255,255,255,.55); --as-panel-soft:rgba(255,255,255,.45); --as-float:rgba(255,255,255,.84); } /* ── base canvas — the Kingpin light wash, not Blueprint grey/navy ── */ body, .bp4-dark, #root{ background: radial-gradient(1100px 620px at 50% -10%, rgba(46,163,242,.16), transparent 60%), radial-gradient(720px 520px at 94% 2%, rgba(255,45,120,.06), transparent 60%), radial-gradient(900px 640px at 2% 96%, rgba(46,163,242,.09), transparent 62%), linear-gradient(180deg,#F3F7FC,#E6EDF7) !important; background-attachment:fixed !important; font-family:'Open Sans',sans-serif !important; color:var(--as-ink); } h1,h2,h3,h4,.dashboard__title{ font-family:'Poppins',sans-serif !important; font-weight:500; letter-spacing:-.01em; color:var(--as-ink); } /* ── links ── */ a{ color:var(--as-aqua-deep); } a:hover{ color:var(--as-aqua); } /* ── buttons ── */ .bp4-button.bp4-intent-primary{ background:linear-gradient(180deg,var(--as-aqua),var(--as-aqua-dark)) !important; box-shadow:0 4px 14px rgba(46,163,242,.25) !important; border-radius:9px; font-family:'Poppins',sans-serif; font-weight:500; color:#fff !important; transition:transform .15s ease, box-shadow .15s ease; } .bp4-button.bp4-intent-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(46,163,242,.4) !important; } .bp4-button:not([class*='bp4-intent-']){ background:var(--as-panel-soft) !important; border:1px solid var(--as-line); border-radius:9px; background-image:none !important; color:var(--as-ink) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .bp4-button:not([class*='bp4-intent-']):hover{ border-color:var(--as-aqua); color:var(--as-aqua-deep) !important; } /* ── inputs ── */ .bp4-input{ background:var(--as-panel-soft) !important; border:1px solid var(--as-line); border-radius:9px; color:var(--as-ink) !important; box-shadow:none !important; font-family:'Open Sans',sans-serif; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .bp4-input:focus{ border-color:var(--as-aqua); box-shadow:0 0 0 3px rgba(46,163,242,.18) !important; } .bp4-input::placeholder{ color:var(--as-dim); } .bp4-control input:checked ~ .bp4-control-indicator{ background-color:var(--as-aqua) !important; } /* ── auth pages (login / signup / reset) ── */ .authentication{ background:transparent !important; } .authentication .bp4-form-group label.bp4-label{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--as-mid); } .authentication form, .authentication [class*='form']{ border-color:var(--as-line) !important; } /* ── replace the Bigcapital wordmark with the AquaSentinel lockup ── word + pink drop + gradient line — the mark is never the word alone. */ svg[data-icon='bigcapital'], svg[data-icon='bigcapital-alt']{ display:none !important; } .bp4-icon-bigcapital, :is(a,div,span,h1):has(> svg[data-icon='bigcapital-alt']){ position:relative; display:inline-flex !important; align-items:baseline; justify-content:center; width:auto !important; height:auto !important; padding:0 0 12px; background:linear-gradient(90deg,transparent 0%,#2ea3f2 25%,#5bb8f5 50%,#FF2D78 80%,transparent 100%) bottom center/64% 2px no-repeat; filter:drop-shadow(0 0 12px rgba(46,163,242,.18)); } .bp4-icon-bigcapital::before, :is(a,div,span,h1):has(> svg[data-icon='bigcapital-alt'])::before{ content:'aqua' !important; font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; letter-spacing:.14em; text-transform:lowercase; color:var(--as-aqua); line-height:1; padding-right:.58em; background:url("data:image/svg+xml;utf8,") no-repeat right center/.44em .58em; } .bp4-icon-bigcapital::after, :is(a,div,span,h1):has(> svg[data-icon='bigcapital-alt'])::after{ content:'sentinel' !important; font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; letter-spacing:.14em; text-transform:lowercase; color:var(--as-ink); line-height:1; } /* ── sidebar — frosted white glass ── */ .sidebar{ background:rgba(255,255,255,.5) !important; backdrop-filter:blur(22px) saturate(1.15) !important; -webkit-backdrop-filter:blur(22px) saturate(1.15) !important; border-right:1px solid var(--as-line) !important; } .sidebar__head{ background:transparent !important; border-bottom:1px solid var(--as-line2) !important; } .sidebar__head-organization, .sidebar__head .title{ font-family:'Poppins',sans-serif !important; font-weight:600; color:var(--as-ink) !important; } .sidebar__head-organization .bp4-icon, .sidebar__head .bp4-icon{ color:var(--as-mid) !important; } .sidebar-menu .bp4-menu-item{ font-family:'Open Sans',sans-serif; color:var(--as-silver) !important; border-radius:8px; } .sidebar-menu .bp4-menu-item:hover{ background:rgba(46,163,242,.10) !important; color:var(--as-ink) !important; } .sidebar-menu .bp4-menu-item.bp4-active, .sidebar-menu .bp4-menu-item.bp4-intent-primary{ background:rgba(46,163,242,.14) !important; color:var(--as-aqua-deep) !important; box-shadow:inset 2px 0 0 var(--as-aqua); } /* section eyebrows — Space Grotesk, tracked out */ .sidebar-menu .bp4-menu-divider, .sidebar-menu [class*='menu-item-label'], .sidebar .bp4-heading{ font-family:'Space Grotesk',monospace !important; font-size:10px !important; letter-spacing:.22em !important; text-transform:uppercase; color:var(--as-dim) !important; } /* ── topbar — frosted white glass, ink text ── */ .dashboard__topbar{ background:rgba(255,255,255,.55) !important; backdrop-filter:blur(18px) saturate(1.2) !important; -webkit-backdrop-filter:blur(18px) saturate(1.2) !important; border-bottom:1px solid var(--as-line) !important; } .dashboard__title h1, .dashboard__title{ color:var(--as-ink) !important; } .dashboard__breadcrumbs a{ color:var(--as-mid); } .dashboard__topbar .bp4-button, .dashboard__topbar .bp4-icon{ color:var(--as-silver) !important; } /* ── dashboard cards (homepage tiles) — frosted white ── */ .financial-reports__item, .dashboard__insider .bp4-card{ background:var(--as-panel) !important; border:1px solid var(--as-line) !important; border-radius:14px !important; box-shadow:0 1px 2px rgba(13,31,60,.05), 0 12px 34px rgba(13,31,60,.08) !important; backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .financial-reports__item:hover{ border-color:rgba(46,163,242,.45) !important; transform:translateY(-2px); box-shadow:0 14px 38px rgba(13,31,60,.14), 0 0 18px rgba(46,163,242,.10) !important; } .financial-reports__item a{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--as-aqua-deep) !important; } .financial-reports__item p, .dashboard__insider .bp4-card p{ color:var(--as-silver) !important; } .financial-reports__section > h2, .dashboard__insider h2{ font-family:'Poppins',sans-serif !important; font-weight:300 !important; letter-spacing:-.02em; color:var(--as-ink) !important; } /* ── tables / datatables ── */ .bp4-html-table td, [class*='table'] [role='row']{ border-color:var(--as-line2) !important; color:var(--as-ink); } .bp4-html-table th, [class*='table__header']{ font-family:'Space Grotesk',monospace !important; font-size:10.5px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--as-mid) !important; } [class*='table'] [role='row']:hover{ background:rgba(46,163,242,.06) !important; } /* ── menus, popovers, dialogs — Kingpin float glass ── */ .bp4-menu, .bp4-popover2 .bp4-popover2-content, .bp4-popover .bp4-popover-content, .bp4-dialog{ background:var(--as-float) !important; border:1px solid var(--as-line); border-radius:12px; box-shadow:0 18px 50px rgba(13,31,60,.18) !important; color:var(--as-ink) !important; backdrop-filter:blur(26px) saturate(1.2); -webkit-backdrop-filter:blur(26px) saturate(1.2); } .bp4-menu-item{ color:var(--as-ink) !important; } .bp4-menu-item:hover{ background:rgba(46,163,242,.10) !important; } .bp4-dialog-header{ background:transparent !important; box-shadow:none !important; border-bottom:1px solid var(--as-line2); font-family:'Poppins',sans-serif; } .bp4-overlay-backdrop{ background:rgba(5,10,20,.45) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } /* ── tags / intents keep semantics, tuned for light ── */ .bp4-tag.bp4-intent-success{ background:rgba(16,185,129,.14) !important; color:#067a54 !important; } .bp4-tag.bp4-intent-danger{ background:rgba(239,68,68,.12) !important; color:#b91c1c !important; } .bp4-tag.bp4-intent-primary{ background:rgba(46,163,242,.14) !important; color:var(--as-aqua-deep) !important; } /* ── scrollbars ── */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:rgba(15,30,60,.16); border-radius:99px; } ::-webkit-scrollbar-thumb:hover{ background:rgba(46,163,242,.45); } ::-webkit-scrollbar-track{ background:transparent; } /* ── spinner / progress accents ── */ .bp4-spinner .bp4-spinner-head{ stroke:var(--as-aqua) !important; } .bp4-progress-bar .bp4-progress-meter{ background:linear-gradient(90deg,var(--as-aqua),var(--as-aqua-dark)) !important; } /* ── auth wordmark: the /auth/login route has NO big bigcapital-alt logo — only two small .bp4-icon-bigcapital marks (header + footer). The lockup rules above turn them into the full aqua◦sentinel lockup; keep the header one, hide the duplicate footer one (styled-components hash .sc-dkmUuB — build-specific, re-probe after a Bigcapital upgrade). ── */ .sc-dkmUuB .bp4-icon-bigcapital{ display:none !important; } /* ── login card → frosted white glass over the wash ── */ .authentication div:has(> form){ background:var(--as-panel) !important; backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2); border:1px solid var(--as-line); border-radius:16px; box-shadow:0 1px 2px rgba(13,31,60,.05), 0 12px 34px rgba(13,31,60,.10); } /* ═══ FULL-APP GLASS — canvas transparent, chrome strips frosted white ═══ */ [class*='dashboard__insider']{ background:transparent !important; } [class*='dashboard__page']{ background:transparent !important; } .dashboard, .dashboard__content, .dashboard__inside, [class*='dashboard__body']{ background:transparent !important; } .bp4-card, .financial-reports, .financial-reports__section{ background:var(--as-panel) !important; backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); } .financial-reports, .financial-reports__section{ background:transparent !important; } /* actions bar (Table Views / New Invoice / Filter / Print strip) → frosted */ .bp4-navbar, .navbar--dashboard-actions-bar{ background:rgba(255,255,255,.5) !important; backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); box-shadow:none !important; border-bottom:1px solid var(--as-line2); } .bp4-navbar .bp4-button:not([class*='bp4-intent-']){ background:transparent !important; } /* datatables — translucent headers, transparent rows, aqua hover */ .th{ background:rgba(255,255,255,.55) !important; color:var(--as-mid) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .td, .tr, .tbody, .table, [class*='datatable']{ background:transparent !important; color:var(--as-ink); } /* financial report sheets → one frosted card over the wash */ [class*='financial-sheet'], .financial-statement{ background:var(--as-panel) !important; color:var(--as-ink) !important; backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border-radius:14px; } /* drawers (record details) → deep white frost */ .bp4-drawer{ background:rgba(255,255,255,.78) !important; color:var(--as-ink) !important; backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px) saturate(1.2); } /* empty states sit directly on the wash */ [class*='empty-status']{ background:transparent !important; } /* ── topbar user avatar — keep the branded aqua chip, white initials ── */ .dashboard__topbar-user .bp4-button{ background:linear-gradient(180deg,var(--as-aqua),var(--as-aqua-dark)) !important; color:#fff !important; border:none; } .dashboard__topbar-user .bp4-button .bp4-button-text{ color:#fff !important; } /* ── sidebar head title stays ink even where Bigcapital pins white ── */ .sidebar__head .bp4-button-text, .sidebar__head-organization .bp4-button-text{ color:var(--as-ink) !important; } /* Bigcapital's own css pins content:none on the icon's ::before at equal specificity but later in the cascade — re-assert the full lockup on the auth page with higher specificity (this exact selector tested live). */ .authentication .bp4-icon-bigcapital::before{ content:'aqua' !important; font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; letter-spacing:.14em; text-transform:lowercase; color:var(--as-aqua); line-height:1; padding-right:.58em; background:url("data:image/svg+xml;utf8,") no-repeat right center/.44em .58em; } .authentication .bp4-icon-bigcapital::after{ content:'sentinel' !important; font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; letter-spacing:.14em; text-transform:lowercase; color:var(--as-ink); line-height:1; }