/* ═══════════════════════════════════════════════════════════════════ AquaSentinel Kingpin skin for Twenty CRM Injected by Caddy (replace-response) as the last stylesheet in . Twenty v2.7.x themes entirely via --t-* custom properties on :root, so this file re-maps those tokens to the Kingpin palette: dark navy #0a1628 · aqua #2EA3F2 · signal pink #FF2D78 Poppins (headings) · Open Sans (body) · Space Grotesk (mono) !important is deliberate — Twenty's emotion styles are appended to at runtime, after this file. 2026-07-11 glass alignment: production Twenty emits MINIFIED emotion hashes (s1oglphl…), so [class*="Modal"]-style selectors never match. Blur is attached to the build's real hashes below — re-probe them after any Twenty upgrade (large divs with a background, + the scrim). ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap'); /* ── Type — both themes ── */ :root{ --t-font-family:'Open Sans',sans-serif !important; --t-code-font-family:'Space Grotesk',monospace !important; } /* Twenty hardcodes Inter on the theme roots (body/.light/.dark) instead of consuming --t-font-family — override at the same roots. */ html.light, html.dark, body, button, input, textarea, select{font-family:'Open Sans',sans-serif !important} h1,h2,h3{font-family:'Poppins',sans-serif !important;letter-spacing:-.01em} code,pre,kbd{font-family:'Space Grotesk',monospace !important} ::selection{background:rgba(255,45,120,.22)} /* ── Accent: Twenty blue → AquaSentinel aqua (light) ── */ html.light{ --t-accent-accent1:#f5fafe !important; --t-accent-accent2:#ebf5fd !important; --t-accent-accent3:#ddeefb !important; --t-accent-accent4:#c6e4f9 !important; --t-accent-accent5:#a8d7f6 !important; --t-accent-accent6:#86c8f3 !important; --t-accent-accent7:#5bb8f5 !important; --t-accent-accent8:#2ea3f2 !important; --t-accent-accent9:#2ea3f2 !important; --t-accent-accent10:#1e8fd8 !important; --t-accent-accent11:#1878b8 !important; --t-accent-accent12:#0d3a5c !important; --t-accent-accent3570:#5bb8f5 !important; --t-accent-accent4060:#5bb8f5 !important; --t-accent-primary:#a8d7f6 !important; --t-accent-secondary:#a8d7f6 !important; --t-accent-tertiary:#ddeefb !important; --t-accent-quaternary:#ebf5fd !important; --t-buttons-secondary-text-color:#1878b8 !important; --t-border-color-blue:#86c8f3 !important; --t-background-transparent-blue:#2ea3f218 !important; --t-snack-bar-info-color:#1878b8 !important; --t-snack-bar-info-background-color:#2ea3f218 !important; /* Kingpin light: frosted bluish-white surfaces, ink text. Alphas are tuned for STACKING — Twenty layers 2-3 of these over the wash, so each layer must stay well under .5 or they compound opaque. */ --t-background-secondary:rgba(224,237,250,.42) !important; --t-background-tertiary:rgba(213,229,246,.48) !important; --t-background-quaternary:rgba(198,219,240,.54) !important; --t-border-color-light:rgba(15,30,60,.05) !important; --t-border-color-medium:rgba(15,30,60,.10) !important; --t-border-color-strong:rgba(15,30,60,.18) !important; --t-font-color-primary:#0d1b2a !important; --t-font-color-secondary:#33475e !important; --t-font-color-tertiary:#64748b !important; --t-font-color-light:#9fb0c3 !important; --t-font-color-extra-light:#c3cfdd !important; --t-gray-scale-gray2:rgba(249,251,253,.5) !important; --t-gray-scale-gray3:rgba(246,249,252,.5) !important; --t-gray-scale-gray4:rgba(238,242,248,.55) !important; --t-gray-scale-gray5:rgba(226,232,240,.6) !important; --t-gray-scale-gray6:rgba(213,222,234,.65) !important; --t-gray-scale-gray7:#c3cfdd !important; --t-gray-scale-gray8:#9fb0c3 !important; --t-gray-scale-gray9:#64748b !important; --t-gray-scale-gray10:#55637a !important; --t-gray-scale-gray11:#33475e !important; --t-gray-scale-gray12:#0d1b2a !important; } /* ── Dark: Twenty neutral gray → Kingpin deep navy ── */ html.dark{ --t-accent-accent1:#0b1d33 !important; --t-accent-accent2:#0d2440 !important; --t-accent-accent3:#103054 !important; --t-accent-accent4:#143c68 !important; --t-accent-accent5:#1a4a80 !important; --t-accent-accent6:#1f5c9e !important; --t-accent-accent7:#2478c4 !important; --t-accent-accent8:#2ea3f2 !important; --t-accent-accent9:#2ea3f2 !important; --t-accent-accent10:#5bb8f5 !important; --t-accent-accent11:#86c8f3 !important; --t-accent-accent12:#ddeefb !important; --t-accent-accent3570:#2478c4 !important; --t-accent-accent4060:#2478c4 !important; --t-accent-primary:#1a4a80 !important; --t-accent-secondary:#1a4a80 !important; --t-accent-tertiary:#103054 !important; --t-accent-quaternary:#0d2440 !important; --t-buttons-secondary-text-color:#5bb8f5 !important; --t-border-color-blue:#1f5c9e !important; --t-background-transparent-blue:#2ea3f224 !important; --t-snack-bar-info-color:#5bb8f5 !important; --t-snack-bar-info-background-color:#2ea3f224 !important; /* navy surface ramp */ --t-background-primary:#0e1e38 !important; --t-background-secondary:#0c1b31 !important; --t-background-tertiary:#0a1628 !important; --t-background-quaternary:#16294a !important; --t-background-primary-inverted:#e8eef6 !important; --t-background-primary-inverted-hover:#b6c5d8 !important; --t-background-inverted-primary:#e8eef6 !important; --t-background-inverted-secondary:#b6c5d8 !important; --t-background-transparent-lighter:rgba(160,180,204,.04) !important; --t-background-transparent-light:rgba(160,180,204,.07) !important; --t-background-transparent-medium:rgba(160,180,204,.12) !important; --t-background-transparent-strong:rgba(160,180,204,.2) !important; --t-background-transparent-primary:rgba(14,30,56,.5) !important; --t-background-transparent-secondary:rgba(14,30,56,.4) !important; --t-border-color-light:rgba(160,180,204,.09) !important; --t-border-color-medium:rgba(160,180,204,.15) !important; --t-border-color-strong:rgba(160,180,204,.28) !important; --t-border-color-transparent-strong:rgba(160,180,204,.15) !important; --t-border-color-inverted:#e8eef6 !important; --t-border-color-secondary-inverted:#8fa3bd !important; --t-font-color-primary:#e8eef6 !important; --t-font-color-secondary:#b6c5d8 !important; --t-font-color-tertiary:#8fa3bd !important; --t-font-color-light:#5c718c !important; --t-font-color-extra-light:#3d5270 !important; --t-font-color-inverted:#0a1628 !important; --t-gray-scale-gray1:#0a1628 !important; --t-gray-scale-gray2:#0c1b31 !important; --t-gray-scale-gray3:#0e1e38 !important; --t-gray-scale-gray4:#122442 !important; --t-gray-scale-gray5:#16294a !important; --t-gray-scale-gray6:#1d3255 !important; --t-gray-scale-gray7:#2a4067 !important; --t-gray-scale-gray8:#3d5270 !important; --t-gray-scale-gray9:#5c718c !important; --t-gray-scale-gray10:#8fa3bd !important; --t-gray-scale-gray11:#b6c5d8 !important; --t-gray-scale-gray12:#e8eef6 !important; --t-box-shadow-color:rgba(0,0,0,.35) !important; } /* ── Kingpin scrollbars ── */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:rgba(143,163,189,.35);border-radius:8px} *::-webkit-scrollbar-thumb:hover{background:#2ea3f2} html.dark *::-webkit-scrollbar-track{background:transparent} /* ═══════════════════════════════════════════════════════════════════ TRANSLUCENCY — frosted panels floating over a fixed brand wash, the same treatment as the Kingpin console. ═══════════════════════════════════════════════════════════════════ */ /* Fixed brand canvas behind the whole app — dark */ html.dark, html.dark body, html.dark #root{ background: radial-gradient(1100px 600px at 50% -8%, rgba(46,163,242,.16), transparent 60%), radial-gradient(680px 500px at 92% 6%, rgba(255,45,120,.05), transparent 60%), #081222 !important; background-attachment:fixed !important; } /* dark surface tokens → translucent so the wash shows through */ html.dark{ --t-background-primary:rgba(12,27,49,.50) !important; --t-background-secondary:rgba(9,20,38,.38) !important; --t-background-tertiary:rgba(14,30,56,.55) !important; --t-background-quaternary:rgba(22,41,74,.48) !important; --t-background-transparent-primary:rgba(14,30,56,.42) !important; --t-background-transparent-secondary:rgba(14,30,56,.30) !important; } /* Fixed brand canvas — light (Kingpin console default look) */ html.light, html.light body, html.light #root{ background: radial-gradient(1100px 620px at 50% -10%, rgba(46,163,242,.28), transparent 60%), radial-gradient(720px 520px at 94% 2%, rgba(255,45,120,.10), transparent 60%), radial-gradient(900px 640px at 2% 96%, rgba(46,163,242,.16), transparent 62%), linear-gradient(180deg,#DCEAF8,#C6DBF0) !important; background-attachment:fixed !important; } /* light surface tokens → translucent bluish-white so the wash reads as Kingpin glass, not plain white (deepened 2026-07-11 — was near-white). */ html.light{ --t-background-primary:rgba(240,247,253,.30) !important; --t-background-transparent-primary:rgba(236,244,252,.30) !important; --t-background-transparent-secondary:rgba(236,244,252,.20) !important; --t-box-shadow-color:rgba(13,31,60,.14) !important; } /* ── BLUR — build-specific emotion hashes (probed live 2026-07-11): .s1oglphl = outer page container (goes transparent: kills stacking) .s1uoyws2 = main content pane (the frosted panel) .s17gs6x9 = secondary pane .sacab3x = modal scrim Legacy [class*=…] selectors kept for dev builds where names survive. ── */ html.light .s1oglphl, html.dark .s1oglphl{ background:transparent !important; } .s1uoyws2, .s17gs6x9, nav, aside, [class*="MainPanel"], [class*="RightDrawer"], [class*="Dropdown"], [class*="DropdownMenu"], [class*="Modal"], [class*="Dialog"], [class*="CommandMenu"], [class*="Popover"]{ backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); } /* modal scrim → Kingpin scrim */ .sacab3x{ background:rgba(5,10,20,.55) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } /* ═══════════════════════════════════════════════════════════════════ AUTH / WELCOME surface (2026-07-11 pm2) — the sign-in page renders a full-screen MOCK app behind a modal; with the stock 3px scrim it read as unbranded Twenty. Frost it hard with the Kingpin wash so the first thing anyone sees is unmistakably AquaSentinel. Build hashes: .sacab3x scrim · .s17gs6x9 auth modal · .s1pmufn7 main btn ═══════════════════════════════════════════════════════════════════ */ html.light .sacab3x{ background: radial-gradient(900px 520px at 50% -10%, rgba(46,163,242,.30), transparent 60%), radial-gradient(700px 480px at 92% 4%, rgba(255,45,120,.14), transparent 60%), rgba(238,245,252,.55) !important; backdrop-filter:blur(18px) saturate(1.2) !important; -webkit-backdrop-filter:blur(18px) saturate(1.2) !important; } html.dark .sacab3x{ background: radial-gradient(900px 520px at 50% -10%, rgba(46,163,242,.20), transparent 60%), radial-gradient(700px 480px at 92% 4%, rgba(255,45,120,.08), transparent 60%), rgba(5,10,20,.62) !important; backdrop-filter:blur(18px) saturate(1.15) !important; -webkit-backdrop-filter:blur(18px) saturate(1.15) !important; } /* auth modal card — Poppins + deep frost */ .s17gs6x9{ font-family:'Poppins',sans-serif !important; border-radius:16px !important; box-shadow:0 24px 70px rgba(13,31,60,.25) !important; } html.light .s17gs6x9{ background:rgba(255,255,255,.78) !important; } html.dark .s17gs6x9{ background:rgba(14,32,56,.72) !important; } /* Twenty's dark-grey MainButton → the Kingpin aqua primary */ .s1pmufn7{ background:linear-gradient(180deg,#2ea3f2,#1a8cd8) !important; color:#fff !important; font-family:'Poppins',sans-serif !important; font-weight:600 !important; border-radius:10px !important; border:none !important; box-shadow:0 6px 18px rgba(46,163,242,.35) !important; } .s1pmufn7:hover{ box-shadow:0 8px 24px rgba(46,163,242,.5) !important; }