/* ============================================================ Samify AI Portal - theme bridge Loads AFTER portal-base.css + portal.css so it wins the cascade. Brings the design system (4 themes x 6 fonts) to the portal by: 1. defining the tokens (:root + [data-theme] + [data-font]) 2. remapping the portal's legacy --color-*/--font-* names onto them so the entire existing portal CSS recolors automatically. ============================================================ */ /* ---------- base tokens = Light Blue Cool (default) ---------- */ :root{ --blue:#2E5FB0; --orange:#FB6B3A; --accent:var(--blue); --accent-2:var(--orange); --paper:#F5F8FC; --paper-2:#E9F0F9; --card:#ffffff; --ink:#14202f; --ink-soft:#41526a; --ink-faint:#7d8da3; --line:#dde6f1; --shadow:0 24px 60px rgba(22,40,70,.12); --shadow-sm:0 8px 26px rgba(22,40,70,.08); --r-lg:20px; --r-md:14px; --r-sm:11px; --panel-bg:var(--ink); --panel-fg:#fff; --panel-fg-soft:rgba(255,255,255,.72); --panel-line:rgba(255,255,255,.12); --font-display:'Fraunces',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } /* ---------- font pairings ---------- */ [data-font="editorial"]{ --font-display:'Fraunces',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } [data-font="classic"]{ --font-display:'Montserrat',sans-serif; --font-body:'Montserrat',sans-serif; --font-mono:'Roboto Mono',monospace; } [data-font="modern"]{ --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } [data-font="elegant"]{ --font-display:'Playfair Display',serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } [data-font="geometric"]{ --font-display:'Sora',sans-serif; --font-body:'Sora',sans-serif; --font-mono:'JetBrains Mono',monospace; } [data-font="friendly"]{ --font-display:'Bricolage Grotesque',sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',monospace; } /* ---------- themes ---------- Tokens are defined here with LITERAL values (not via :root) so they resolve through the [data-theme] attribute selector on , which is robust across browsers/cascades. The page always carries a data-theme. */ [data-theme="light-blue-cool"]{ --blue:#2E5FB0; --orange:#FB6B3A; --accent:#2E5FB0; --accent-2:#FB6B3A; --paper:#F5F8FC; --paper-2:#E9F0F9; --card:#ffffff; --ink:#14202f; --ink-soft:#41526a; --ink-faint:#7d8da3; --line:#dde6f1; --shadow:0 24px 60px rgba(22,40,70,.12); --shadow-sm:0 8px 26px rgba(22,40,70,.08); --r-lg:20px; --r-md:14px; --r-sm:11px; --panel-bg:#14202f; --panel-line:rgba(255,255,255,.12); } [data-theme="light-orange-cool"]{ --blue:#2E5FB0; --orange:#FB6B3A; --accent:#FB6B3A; --accent-2:#2E5FB0; --paper:#F5F8FC; --paper-2:#E9F0F9; --card:#ffffff; --ink:#14202f; --ink-soft:#41526a; --ink-faint:#7d8da3; --line:#dde6f1; --shadow:0 24px 60px rgba(22,40,70,.12); --shadow-sm:0 8px 26px rgba(22,40,70,.08); --r-lg:20px; --r-md:14px; --r-sm:11px; --panel-bg:#14202f; --panel-line:rgba(255,255,255,.12); } [data-theme="dark-blue-cool"]{ --blue:#2E5FB0; --orange:#FB6B3A; --accent:#2E5FB0; --accent-2:#FB6B3A; --paper:#0e1116; --paper-2:#161b22; --card:#171d26; --ink:#f2f5f9; --ink-soft:#a9b4c2; --ink-faint:#6b7686; --line:rgba(255,255,255,.10); --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 8px 26px rgba(0,0,0,.4); --r-lg:20px; --r-md:14px; --r-sm:11px; --panel-bg:#1c2533; --panel-line:rgba(255,255,255,.10); } [data-theme="dark-orange-cool"]{ --blue:#2E5FB0; --orange:#FB6B3A; --accent:#FB6B3A; --accent-2:#2E5FB0; --paper:#0e1116; --paper-2:#161b22; --card:#171d26; --ink:#f2f5f9; --ink-soft:#a9b4c2; --ink-faint:#6b7686; --line:rgba(255,255,255,.10); --shadow:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 8px 26px rgba(0,0,0,.4); --r-lg:20px; --r-md:14px; --r-sm:11px; --panel-bg:#1c2533; --panel-line:rgba(255,255,255,.10); } /* ---------- Legacy bridge: portal's old tokens -> tokens ---------- Mapped on [data-theme] (attribute selector on ) rather than :root, so it applies reliably for every theme. They resolve at use-time and follow whichever theme/font is active. */ [data-theme]{ --color-bg-primary:var(--paper); --color-bg-panel:var(--paper-2); --color-accent-blue:var(--accent); --color-accent-orange:var(--accent-2); --color-success:#10b981; --color-text-primary:var(--ink-soft); --color-text-heading:var(--ink); --color-text-secondary:var(--ink-soft); --color-border:var(--line); --color-slate:var(--ink-faint); --font-primary:var(--font-body); --font-mono:var(--font-mono); --glass-bg:var(--card); --glow-blue:0 0 20px color-mix(in srgb, var(--accent) 38%, transparent); --glow-blue-strong:0 0 30px color-mix(in srgb, var(--accent) 55%, transparent); --glow-orange:0 0 20px color-mix(in srgb, var(--accent-2) 38%, transparent); --glow-orange-strong:0 0 30px color-mix(in srgb, var(--accent-2) 55%, transparent); --radius-card:var(--r-md); --radius-sm:var(--r-sm); } /* ---------- Editorial headings (display font on portal titles) ---------- */ .portal-body h1,.portal-body h2,.portal-body h3,.portal-login-card h1{font-family:var(--font-display)} .sidebar-header span{ font-family:var(--font-display);font-weight:800;letter-spacing:.02em; background:linear-gradient(105deg,var(--accent),var(--accent-2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } /* ============================================================ Picker component (theme + font) - ported from the marketing site, icon-only in every view. ============================================================ */ .portal-pickers{display:inline-flex;align-items:center;gap:10px} .login-pickers{position:fixed;top:22px;right:24px;z-index:60} /* dashboard header: keep title left, pickers right */ .portal-header{display:flex;align-items:center;gap:14px} .portal-header .portal-pickers{margin-left:auto} .picker{position:relative} .picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:999px;width:42px;height:42px;padding:0;cursor:pointer;transition:.25s} .picker-trigger:hover{border-color:var(--accent)} .picker-trigger .swatch{display:inline-flex;gap:3px} .picker-trigger .swatch i{width:11px;height:11px;border-radius:50%} .picker-trigger .s1{background:var(--accent)} .picker-trigger .s2{background:var(--accent-2)} .picker-trigger .chev{transition:transform .25s;color:var(--ink-faint)} .picker.open .chev{transform:rotate(180deg)} .picker-menu{position:absolute;top:calc(100% + 10px);right:0;width:230px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s;z-index:210} .picker.open .picker-menu{opacity:1;visibility:visible;transform:none} .picker-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:10px 11px;cursor:pointer;font-family:var(--font-body);font-size:.86rem;font-weight:500;color:var(--ink-soft);transition:.18s} .picker-opt:hover{background:var(--paper-2)} .picker-opt.on{color:var(--ink);font-weight:600} .picker-opt .dots{display:inline-flex;gap:4px;flex-shrink:0} .picker-opt .dots i{width:13px;height:13px;border-radius:50%;border:1px solid var(--line)} .picker-opt .check{margin-left:auto;color:var(--accent);opacity:0;transition:.18s;flex-shrink:0} .picker-opt.on .check{opacity:1} .picker-trigger .aa{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1;color:var(--ink)} .picker[data-target="font"] .picker-menu{width:250px} .picker-opt .fopt{flex:1;min-width:0} .picker-opt .fname{font-size:1.02rem;font-weight:600;color:var(--ink);display:block;line-height:1.15} .picker-opt .fdesc{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:500;color:var(--ink-faint);margin-top:1px} .picker-label,.picker-trigger .chev{display:none} /* ============================================================ Login card - match the homepage contact-form + button language. Uses the .glass-panel.portal-login-card compound so these win over the portal's dark-first base AND the light overrides. ============================================================ */ :is([data-theme="light-blue-cool"],[data-theme="light-orange-cool"]) .portal-login-wrap{background:var(--paper-2)} .glass-panel.portal-login-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); backdrop-filter:none;-webkit-backdrop-filter:none; padding:44px 40px; max-width:440px; } .glass-panel.portal-login-card h1{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:-.01em} .glass-panel.portal-login-card .login-subtitle{color:var(--ink-soft);font-size:.95rem} .glass-panel.portal-login-card .form-group label{font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:8px} .glass-panel.portal-login-card .form-group input{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r-md); padding:13px 15px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); transition:border-color .2s,box-shadow .2s; } .glass-panel.portal-login-card .form-group input::placeholder{color:var(--ink-faint)} .glass-panel.portal-login-card .form-group input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); } .glass-panel.portal-login-card .password-toggle{color:var(--ink-faint)} .glass-panel.portal-login-card .password-toggle:hover{color:var(--accent)} /* primary button = homepage .btn-primary (solid accent pill) */ .glass-panel.portal-login-card .login-btn{ width:100%; margin-top:10px; background:var(--accent); color:#fff; font-family:var(--font-body); font-weight:600; font-size:.95rem; border:0; border-radius:999px; padding:14px 22px; box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 36%,transparent); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s; } .glass-panel.portal-login-card .login-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px color-mix(in srgb,var(--accent) 46%,transparent)} .glass-panel.portal-login-card .login-links a{color:var(--accent)} .glass-panel.portal-login-card .login-links a:hover{color:var(--ink)} /* status messages use fixed semantic colors, never the theme accent */ .glass-panel.portal-login-card .form-status.error{background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.30);color:#dc2626} .glass-panel.portal-login-card .form-status.success{background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.30);color:#10b981} /* ============================================================ Portal-wide semantic status colors. These convey meaning (success/error/info), so they must stay fixed and NEVER follow the theme accent (which would flip blue<->orange in the orange themes). Active/selected states still follow the accent. ============================================================ */ /* toasts (!important to beat the per-theme background overrides) */ .toast.error{background:rgba(220,38,38,.12) !important;border-color:rgba(220,38,38,.30) !important;color:#dc2626 !important} .toast.info{background:rgba(46,95,176,.12) !important;border-color:rgba(46,95,176,.30) !important;color:#2E5FB0 !important} /* form status (any form outside the login card) */ .form-status.error{color:#dc2626} .form-status.success{color:#10b981} /* status badges */ .badge-pending,.badge-pending_setup{background:rgba(46,95,176,.12);color:#2E5FB0} .badge-cancelled,.badge-failed{background:rgba(220,38,38,.12);color:#dc2626}