/* CSG Marketing — the client-portal design system. One system, three skins, driven by : (none) = CSG owner console — cream + deep forest green, Fraunces/Outfit forward-realty = Forward Rlty — paper + ink + champagne, Cormorant Garamond/Inter the-lending-pros = The Lending Pros — near-black + white, Inter/Mulish Every legacy class + variable name is preserved; themes only swap token values. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ── tokens ─────────────────────────────────────────────────── */ :root{ /* CSG owner console (default) */ --bg:#F6F3EC; --bg2:#FBF9F4; --surface:#FFFFFF; --surface2:#F0EDE4; --border:rgba(28,58,43,0.10); --border2:rgba(28,58,43,0.18); --accent:#2A4A38; --accent-ink:#F5EFE2; --accent-glow:rgba(42,74,56,0.10); --green:#2A4A38; --green-mid:#34543F; --green-glow:rgba(42,74,56,0.10); --sage:#4A8062; --ink:#22302A; --muted:#9C927E; --muted2:#6E675A; --ok:#3A7E58; --amber:#A5771F; --red:#A84A38; --blue:#3A5A9C; --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --display-style:normal; --display-weight:600; --display-track:-0.02em; --btn-bg:#2A4A38; --btn-fg:#F5EFE2; --btn-bg-hover:#34543F; --hairline:rgba(28,58,43,0.14); --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:16px; --shadow:0 18px 40px -20px rgba(28,42,35,0.28); --card-shadow:0 1px 2px rgba(28,58,43,.04); --nav-bg:rgba(246,243,236,0.88); } /* Forward Rlty — editorial paper & champagne */ [data-portal="forward-realty"]{ --bg:#F8F6F1; --bg2:#F4F1EA; --surface:#FFFFFF; --surface2:#F4F1EA; --border:rgba(10,10,10,0.10); --border2:rgba(10,10,10,0.18); --accent:#B8956A; --accent-ink:#FFFFFF; --accent-glow:rgba(184,149,106,0.14); --green:#B8956A; --green-mid:#a9855c; --green-glow:rgba(184,149,106,0.14); --sage:#B8956A; --ink:#0A0A0A; --muted:#8A8378; --muted2:#5D5850; --ok:#4A6B52; --amber:#A5771F; --red:#9a4432; --blue:#44576e; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --display-style:normal; --display-weight:500; --display-track:-0.01em; --btn-bg:#0A0A0A; --btn-fg:#F8F6F1; --btn-bg-hover:#1F1F1F; --hairline:rgba(10,10,10,0.16); --shadow:0 18px 40px -20px rgba(0,0,0,.18); --card-shadow:none; --nav-bg:rgba(248,246,241,0.9); } /* The Lending Pros — after dark */ [data-portal="the-lending-pros"]{ --bg:#0A0B0D; --bg2:#101216; --surface:#14161A; --surface2:#1C1F24; --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.18); --accent:#FFFFFF; --accent-ink:#0A0B0D; --accent-glow:rgba(255,255,255,0.10); --green:#E8E8E6; --green-mid:#cfcfcc; --green-glow:rgba(255,255,255,0.10); --sage:#E8E8E6; --ink:#F4F4F3; --muted:#8C8F94; --muted2:#B4B7BC; --ok:#7FBF9A; --amber:#D9B36A; --red:#E08A78; --blue:#8FA8D9; --serif:'Inter',system-ui,sans-serif; --sans:'Mulish',system-ui,sans-serif; --display-style:normal; --display-weight:800; --display-track:-0.02em; --btn-bg:#FFFFFF; --btn-fg:#0A0B0D; --btn-bg-hover:#E4E4E2; --hairline:rgba(255,255,255,0.16); --shadow:0 24px 60px -24px rgba(0,0,0,.8); --card-shadow:none; --nav-bg:rgba(10,11,13,0.86); } /* ── TLP signature treatment (from their materials: spotlight, grain, pill, heavy caps) ── */ [data-portal="the-lending-pros"]{ --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:14px; } [data-portal="the-lending-pros"] body{ background: radial-gradient(110% 72% at 50% -12%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 38%, transparent 62%), #0A0B0D; background-attachment:fixed; } [data-portal="the-lending-pros"] body::after{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.09; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-portal="the-lending-pros"] h1{ text-transform:uppercase; color:rgba(255,255,255,.88); } [data-portal="the-lending-pros"] h1 em{ color:#fff; } [data-portal="the-lending-pros"] .eyebrow{ display:inline-flex; align-items:center; gap:9px; border:2px solid rgba(255,255,255,.9); border-radius:100px; padding:8px 17px; color:#fff; font-weight:800; letter-spacing:.15em; margin-bottom:12px; } [data-portal="the-lending-pros"] .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; flex:0 0 auto; } [data-portal="the-lending-pros"] .btn{ text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:12px; font-family:'Inter',system-ui,sans-serif; } [data-portal="the-lending-pros"] .btn:not(.btn-primary):not(.btn-red):not(.btn-ok):not(.btn-amber){ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; } [data-portal="the-lending-pros"] .selbar .btn{ background:var(--btn-fg) !important; color:var(--btn-bg) !important; border-color:var(--btn-fg) !important; } [data-portal="the-lending-pros"] .nav-link.active::after{ height:3px; background:#fff; } [data-portal="the-lending-pros"] .mat-card:hover, [data-portal="the-lending-pros"] .gal-card:hover{ border-color:rgba(255,255,255,.35); } [data-portal="the-lending-pros"] .chip{ border-width:2px; font-weight:800; } [data-portal="the-lending-pros"] .chip.active{ border-color:#fff; } /* ── base ───────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0;} html,body{background:var(--bg);} body{font-family:var(--sans);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;} a{color:var(--ink);text-decoration:none;} h1,h2,h3,.serif{font-family:var(--serif);font-weight:var(--display-weight);font-style:var(--display-style);letter-spacing:var(--display-track);text-wrap:balance;} h1 em,h2 em{font-style:italic;color:var(--accent);font-weight:inherit;} ::selection{background:var(--accent-glow);} /* layout */ .wrap{max-width:1120px;margin:0 auto;padding:0 28px;} .center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;} .stack{display:flex;flex-direction:column;} .row{display:flex;align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .grow{flex:1;} .muted{color:var(--muted);} .muted2{color:var(--muted2);} .hidden{display:none !important;} /* ── nav ────────────────────────────────────────────────────── */ nav.topbar{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(18px); border-bottom:1px solid var(--hairline);height:66px;display:flex;align-items:center;} .brand-chip{display:inline-flex;align-items:center;gap:9px;background:var(--btn-bg);color:var(--btn-fg); padding:8px 15px;border-radius:var(--r);font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-0.01em;} .nav-links{display:flex;gap:26px;margin-left:36px;} .nav-link{position:relative;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--muted2);padding:6px 2px;transition:color .15s;} .nav-link:hover{color:var(--ink);background:none;} .nav-link.active{color:var(--ink);background:none;} .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;} .nav-who{font-size:13px;color:var(--muted2);} /* ── cards & panels ─────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;box-shadow:var(--card-shadow);} .card.pad-lg{padding:36px;} .card-title{font-family:var(--serif);font-size:19px;font-weight:600;} .card-sub{font-size:13px;color:var(--muted);margin-top:4px;} .panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;} .card.accent{position:relative;overflow:hidden;} .card.accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;} /* ── forms ──────────────────────────────────────────────────── */ label.lbl{font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px;} .field{width:100%;padding:13px 15px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r); font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;} .field::placeholder{color:var(--muted);} .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);} textarea.field{resize:vertical;min-height:84px;} .field-row{display:flex;flex-direction:column;gap:0;margin-bottom:16px;} /* ── buttons ────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r); font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0.04em;cursor:pointer;border:1px solid var(--border2); background:var(--surface);color:var(--ink);transition:all .15s;} .btn:hover{border-color:var(--muted);} .btn:disabled{opacity:.5;cursor:not-allowed;} .btn-primary{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);box-shadow:var(--shadow);} .btn-primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);} .btn-ghost{background:none;border-color:transparent;} .btn-sm{padding:8px 14px;font-size:12.5px;} .btn-ok{background:var(--ok);color:#fff;border:none;} .btn-amber{background:var(--amber);color:#fff;border:none;} .btn-red{background:none;color:var(--red);border:1px solid color-mix(in srgb, var(--red) 35%, transparent);} .btn-red:hover{background:color-mix(in srgb, var(--red) 8%, transparent);} /* ── pills ──────────────────────────────────────────────────── */ .pill{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;} .pill-pending{background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .pill-generating{background:color-mix(in srgb, var(--blue) 12%, transparent);color:var(--blue);border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);} .pill-awaiting{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);} .pill-approved{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 32%, transparent);} .pill-denied{background:color-mix(in srgb, var(--red) 12%, transparent);color:var(--red);border:1px solid color-mix(in srgb, var(--red) 30%, transparent);} .pill-changes{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);} .pill-hold{background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .pill-delivered{background:color-mix(in srgb, var(--accent) 15%, transparent);color:color-mix(in srgb, var(--accent) 80%, var(--ink));border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);} /* ── misc ───────────────────────────────────────────────────── */ .avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--surface2);border:1px solid var(--border2); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--muted2);} .divider{height:1px;background:var(--border);margin:20px 0;} .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--btn-bg);color:var(--btn-fg); padding:13px 22px;border-radius:var(--r);font-size:14px;box-shadow:var(--shadow);z-index:900;opacity:0;transition:opacity .2s;} .toast.show{opacity:1;} .toast.err{background:var(--red);color:#fff;} .spinner{width:18px;height:18px;border:2px solid color-mix(in srgb, currentColor 35%, transparent);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;} @keyframes spin{to{transform:rotate(360deg);}} #emu-banner{position:sticky;top:0;z-index:200;display:none;align-items:center;justify-content:center;gap:16px; padding:10px 16px;background:var(--btn-bg);color:var(--btn-fg);font-size:13px;font-weight:500;} #emu-banner .x{padding:5px 14px;background:var(--btn-fg);color:var(--btn-bg);border:none;border-radius:7px;font-weight:700;font-size:12.5px;cursor:pointer;} /* ── page scaffolding ───────────────────────────────────────── */ main.wrap{padding:44px 28px 110px;} .page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:30px;} .page-head h1{font-size:34px;line-height:1.05;} .page-head .sub{font-size:14px;color:var(--muted2);margin-top:8px;max-width:56ch;} .page-head .grow{flex:1;} .eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);} .empty{text-align:center;padding:56px 24px;color:var(--muted);font-size:14px;} .empty .big{font-family:var(--serif);font-size:18px;color:var(--muted2);margin-bottom:6px;} /* nav account menu */ .acct-btn{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border:1px solid var(--border2);border-radius:100px; background:var(--surface);cursor:pointer;transition:border-color .15s;font-family:var(--sans);} .acct-btn:hover{border-color:var(--muted);} .acct-btn .av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--btn-bg);color:var(--btn-fg); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:12px;} .acct-btn .nm{font-size:13px;font-weight:500;color:var(--ink);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .acct-btn .chev{color:var(--muted);font-size:10px;} .menu{position:absolute;right:0;top:48px;min-width:225px;background:var(--surface);border:1px solid var(--border2); border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:300;display:none;} .menu.open{display:block;} .menu .mhead{padding:10px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;} .menu .mhead .mn{font-weight:600;font-size:14px;} .menu .mhead .mr{font-size:11.5px;color:var(--muted);margin-top:2px;} .menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border:none;background:none; border-radius:8px;font-family:var(--sans);font-size:13.5px;color:var(--ink);cursor:pointer;} .menu-item:hover{background:var(--surface2);} .menu-item svg{width:16px;height:16px;stroke:var(--muted2);fill:none;stroke-width:1.8;} .menu-item.danger{color:var(--red);} .menu-item.danger svg{stroke:var(--red);} /* tables */ .tbl{width:100%;border-collapse:collapse;} .tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); padding:0 12px 12px;border-bottom:1px solid var(--border);} .tbl td{padding:14px 12px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;} .tbl tr:last-child td{border-bottom:none;} .tbl .who{display:flex;align-items:center;gap:12px;} .role-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--surface2);color:var(--muted2);border:1px solid var(--border2);} .role-badge.master{background:var(--accent-glow);color:var(--ink);border-color:color-mix(in srgb, var(--accent) 40%, transparent);} .role-select{padding:7px 10px;border:1px solid var(--border2);border-radius:8px;font-family:var(--sans);font-size:13px;background:var(--surface);color:var(--ink);} /* modal */ .overlay{position:fixed;inset:0;z-index:700;background:rgba(12,14,12,.5);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;padding:24px;} .overlay.open{display:flex;} .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:28px;width:100%;max-width:460px; max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);} .modal-title{font-family:var(--serif);font-size:20px;font-weight:600;} .modal-close{float:right;width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--muted2);cursor:pointer;font-size:15px;} /* toggle switch */ .switch{position:relative;width:40px;height:23px;flex-shrink:0;} .switch input{opacity:0;width:0;height:0;} .switch .track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;transition:.18s;cursor:pointer;} .switch .track::before{content:'';position:absolute;height:17px;width:17px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2);} .switch input:checked + .track{background:var(--accent);border-color:var(--accent);} .switch input:checked + .track::before{transform:translateX(17px);} .perm-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);} .perm-row:last-child{border-bottom:none;} .perm-row .lbl2{font-size:14px;color:var(--ink);} .perm-row .hint{font-size:12px;color:var(--muted);} /* ── material picker (request page) ─────────────────────────── */ .chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px;} .chip{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:9px 16px;border-radius:999px;border:1px solid var(--border2);background:var(--surface);color:var(--muted2);cursor:pointer;transition:all .15s;} .chip:hover{color:var(--ink);} .chip.active{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);} .mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;} .mat-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;} .mat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);} .mat-card .thumb{height:196px;background:var(--surface2);overflow:hidden;display:flex;align-items:center;justify-content:center;} .mat-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s;} .mat-card:hover .thumb img{transform:scale(1.035);} .mat-card .meta{padding:13px 15px 15px;} .mat-card .nm{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.2;} .mat-card .ct{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px;} .mat-card .tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%; background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center; font-size:13px;color:transparent;transition:all .15s;} .mat-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);} .mat-card.sel .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);} .selbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:400; display:flex;align-items:center;gap:18px;background:var(--btn-bg);color:var(--btn-fg); padding:13px 15px 13px 24px;border-radius:999px;box-shadow:var(--shadow);transition:transform .25s ease;} .selbar.show{transform:translateX(-50%) translateY(0);} .selbar .ct{font-size:13.5px;font-weight:600;letter-spacing:.02em;} .selbar .btn{background:var(--btn-fg);color:var(--btn-bg);border:none;border-radius:999px;padding:10px 20px;} /* ── full-screen material viewer ────────────────────────────── */ .lightbox{position:fixed;inset:0;z-index:800;background:rgba(8,9,10,.86);backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center;padding:34px;cursor:zoom-out;animation:lbIn .18s ease;} .lightbox img{max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8);cursor:default;} .lightbox .lb-close{position:fixed;top:20px;right:22px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(6px);} @keyframes lbIn{from{opacity:0;}to{opacity:1;}} /* ── material gallery (my materials) ────────────────────────── */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;} .gal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;} .gal-card .thumb{aspect-ratio:4/4.4;background:var(--surface2);overflow:hidden;} .gal-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;} .gal-card .meta{padding:14px 16px 16px;} .gal-card .nm{font-family:var(--serif);font-size:16px;font-weight:600;} .gal-card .row2{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap;} /* ── mobile (iOS-first) ─────────────────────────────────────── */ html{-webkit-text-size-adjust:100%;} button,a,.btn,.chip,.mat-card,.menu-item{-webkit-tap-highlight-color:transparent;touch-action:manipulation;} @supports (padding:env(safe-area-inset-left)){ nav.topbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);} } @media (max-width:760px){ .wrap{padding:0 18px;} main.wrap{padding:26px 18px 130px !important;} /* topbar: brand + account on row 1, links become a swipeable row 2 */ nav.topbar{height:auto;padding-top:calc(9px + env(safe-area-inset-top,0px));padding-bottom:0;} nav.topbar > .wrap{flex-wrap:wrap;row-gap:2px;} .nav-links{order:3;flex-basis:100%;margin-left:0;gap:22px;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:8px 2px 12px;} .nav-links::-webkit-scrollbar{display:none;} .nav-link{white-space:nowrap;flex:0 0 auto;} .acct-btn .nm{max-width:96px;} .nav-who{display:none;} .menu{position:fixed;left:14px;right:14px;top:auto;margin-top:8px;min-width:0;} /* type + surfaces */ .page-head{flex-wrap:wrap;margin-bottom:22px;} .page-head h1{font-size:clamp(25px,7.4vw,34px);} .card{padding:20px 18px;} .card.pad-lg{padding:26px 20px;} .panel{padding:16px;} /* forms: 16px stops iOS auto-zoom on focus */ .field,.role-select{font-size:16px;} /* inline two-column grids stack (request/account/accounts pages) */ main [style*="grid-template-columns"]{grid-template-columns:1fr !important;} main .row{flex-wrap:wrap;} /* grids */ .mat-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .mat-card .thumb{height:148px;} .mat-card .meta{padding:11px 12px 12px;} .mat-card .nm{font-size:14px;} .mat-card .ct{font-size:9px;} .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px;} .gal-card .meta{padding:12px;} .gal-card .nm{font-size:14px;} .gal-card .row2 .btn-sm{padding:7px 11px;font-size:11.5px;} .chips{gap:7px;margin-bottom:18px;} .chip{padding:8px 13px;} /* fixed elements respect the home-indicator */ .selbar{bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px); gap:12px;padding:11px 12px 11px 18px;} .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px); width:max-content;text-align:center;} /* tables scroll sideways inside their card, never the page */ .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} .tbl th,.tbl td{white-space:nowrap;} /* overlays */ .overlay{padding:12px;} .modal{padding:22px 18px;max-height:calc(100dvh - 24px);} .lightbox{padding:14px;} .lightbox img{max-width:96vw;max-height:82dvh;} .lightbox .lb-close{top:calc(14px + env(safe-area-inset-top,0px));right:14px;} #emu-banner{font-size:12px;padding:8px 12px;gap:10px;flex-wrap:wrap;text-align:center;} } @media (max-width:360px){ .mat-grid,.gal-grid{grid-template-columns:1fr;} .mat-card .thumb{height:210px;} } /* ── CSG HQ — the owner control plane (html[data-theme="hq"], console host only) ── */ html[data-theme="hq"]{ --bg:#0B0F0C; --bg2:#0F1410; --surface:#131A15; --surface2:#1A231C; --border:rgba(160,190,170,.10); --border2:rgba(160,190,170,.19); --accent:#7CB394; --accent-ink:#14231B; --accent-glow:rgba(124,179,148,.14); --green:#7CB394; --green-mid:#6AA083; --green-glow:rgba(124,179,148,.14); --sage:#7CB394; --ink:#E7EFE9; --muted:#5F6E65; --muted2:#93A69A; --ok:#5BEAA0; --amber:#EFC15C; --red:#F0796A; --blue:#6FA8E8; --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --btn-bg:#2E5240; --btn-fg:#F5EFE2; --btn-bg-hover:#38624D; --hairline:rgba(160,190,170,.15); --nav-bg:rgba(8,11,10,.82); --shadow:0 24px 60px -24px rgba(0,0,0,.85); --card-shadow:0 1px 0 rgba(122,240,175,.05) inset; } html[data-theme="hq"] body{ background: radial-gradient(120% 60% at 50% -14%, rgba(124,179,148,.08) 0%, rgba(124,179,148,.02) 40%, transparent 65%), linear-gradient(rgba(160,190,170,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(160,190,170,.03) 1px, transparent 1px), #0B0F0C; background-size:auto, 44px 44px, 44px 44px, auto; background-attachment:fixed; } html[data-theme="hq"] ::selection{background:rgba(124,179,148,.3);} /* ── HQ nav ── */ .hq-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(18px); border-bottom:1px solid var(--hairline);} .hq-nav .in{max-width:1280px;margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;gap:26px;} .hq-mark{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;} .hq-mark .sig{font-family:var(--sans);font-size:10px;font-weight:700;color:#F5EFE2;background:#2E5240;border:1px solid rgba(160,190,170,.2); border-radius:6px;padding:3px 8px;letter-spacing:.16em;} .hq-links{display:flex;gap:4px;margin-left:8px;} .hq-link{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:none;cursor:pointer; color:var(--muted2);padding:7px 12px;border-radius:8px;transition:all .15s;white-space:nowrap;} .hq-link:hover{color:var(--ink);background:var(--surface);} .hq-link.active{color:var(--accent);background:var(--accent-glow);} .hq-right{margin-left:auto;display:flex;align-items:center;gap:12px;} .hq-clock{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;} /* ── page scaffold ── */ .hq-wrap{max-width:1280px;margin:0 auto;padding:38px 28px 120px;} .hq-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:30px;flex-wrap:wrap;} .hq-head h1{font-size:36px;line-height:1.02;color:var(--ink);} .hq-head h1 em{color:var(--accent);} .hq-head .sub{font-size:14px;color:var(--muted2);margin-top:9px;max-width:64ch;} .hq-eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);} .sect{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted2); display:flex;align-items:center;gap:14px;margin:36px 0 14px;} .sect::after{content:'';flex:1;height:1px;background:var(--hairline);} .sect .n{color:var(--accent);} /* ── LEDs, chips, mono data ── */ .led{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent); display:inline-block;animation:ledpulse 2.2s ease-in-out infinite;flex:0 0 auto;} .led.amber{background:var(--amber);box-shadow:0 0 10px var(--amber);} .led.off{background:var(--muted);box-shadow:none;animation:none;} @keyframes ledpulse{0%,100%{opacity:1;}50%{opacity:.45;}} .mono{font-family:var(--mono);} .big-n{font-family:var(--mono);font-weight:600;font-size:30px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;} .big-n small{font-size:13px;color:var(--muted2);font-weight:500;} .stat-l{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:7px;} .chip-st{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border2);color:var(--muted2);background:var(--surface);} .chip-st.on{color:var(--accent);border-color:rgba(124,179,148,.4);background:var(--accent-glow);} .chip-st.amber{color:var(--amber);border-color:rgba(239,193,92,.35);background:rgba(239,193,92,.1);} .chip-st.red{color:var(--red);border-color:rgba(240,121,106,.35);background:rgba(240,121,106,.1);} .chip-st.blue{color:var(--blue);border-color:rgba(111,168,232,.35);background:rgba(111,168,232,.1);} /* ── glowing progress ── */ .prog{height:7px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;position:relative;} .prog > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4A8062,var(--accent)); box-shadow:0 0 12px rgba(124,179,148,.5);transition:width .5s ease;} .prog.amber > i{background:linear-gradient(90deg,#8f6d2f,var(--amber));box-shadow:0 0 12px rgba(239,193,92,.5);} .prog-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted2); letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase;} .prog-lbl b{color:var(--accent);font-weight:600;} /* ── portal + pipeline cards ── */ .hq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;} .hq-card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);border-radius:16px; padding:22px 22px 20px;box-shadow:var(--card-shadow);position:relative;overflow:hidden;transition:border-color .18s,transform .18s;} a.hq-card{display:block;color:var(--ink);} .hq-card:hover{border-color:var(--border2);transform:translateY(-2px);} .hq-card .top{display:flex;align-items:center;gap:12px;margin-bottom:16px;} .hq-card .logo{height:30px;width:auto;max-width:150px;object-fit:contain;display:block;} .hq-card .ttl{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);} .hq-card .stats3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--hairline);padding-top:15px;} .hq-card .stats3 > div{padding:0 14px;border-right:1px solid var(--hairline);} .hq-card .stats3 > div:first-child{padding-left:0;} .hq-card .stats3 > div:last-child{border-right:0;} .hq-card .foot{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;} .hq-card .next{font-family:var(--mono);font-size:11px;color:var(--muted2);margin-top:14px;display:flex;gap:8px;align-items:center;} .hq-card .next b{color:var(--ink);font-weight:500;} .pipe-card{cursor:pointer;} .pipe-card .stage-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;} .pipe-card .who{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);} .pipe-card .meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.04em;} /* new client CTA card */ .newcta{border:1.5px dashed var(--border2);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;min-height:170px;color:var(--muted2);cursor:pointer;transition:all .18s;background:transparent;font-family:var(--sans);} .newcta:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);} .newcta .plus{font-family:var(--mono);font-size:30px;line-height:1;color:var(--accent);} .newcta .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;} /* ── wizard ── */ .wiz{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;} .wiz-rail{position:sticky;top:86px;} .wiz-steps{display:flex;flex-direction:column;gap:2px;} .wstep{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-family:var(--sans); font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);cursor:pointer;border:1px solid transparent;} .wstep .k{width:24px;height:24px;border-radius:7px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:600;flex:0 0 auto;} .wstep.done{color:var(--muted2);} .wstep.done .k{background:var(--accent-glow);border-color:rgba(91,234,160,.4);color:var(--accent);} .wstep.active{color:var(--ink);background:var(--surface);border-color:var(--border);} .wstep.active .k{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} .wstep.locked{opacity:.42;cursor:not-allowed;} .wiz-progress{margin-bottom:18px;} .wiz-panel{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);border-radius:18px;padding:30px;} .wiz-panel h2{font-size:24px;color:var(--ink);margin-bottom:6px;} .wiz-panel .lead{font-size:13.5px;color:var(--muted2);margin-bottom:24px;max-width:60ch;} .wiz-foot{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline);} .wiz-foot .save{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;} /* package pick */ .pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .pkg{border:1.5px solid var(--border);border-radius:16px;padding:24px;cursor:pointer;transition:all .18s;background:var(--bg2);} .pkg:hover{border-color:var(--border2);} .pkg.sel{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 0 1px var(--accent);} .pkg .ic{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.24em;text-transform:uppercase;font-weight:600;} .pkg h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:10px 0 8px;} .pkg p{font-size:13px;color:var(--muted2);line-height:1.55;} /* dropzone + files */ .drop{border:1.5px dashed var(--border2);border-radius:14px;padding:30px 20px;text-align:center;color:var(--muted2); font-size:13px;cursor:pointer;transition:all .15s;background:var(--bg2);} .drop:hover,.drop.over{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);} .drop .big{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:block;margin-bottom:6px;} .filerow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px; font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--surface);margin-top:8px;} .filerow .sz{color:var(--muted);margin-left:auto;font-size:11px;} .filerow .rm{color:var(--red);cursor:pointer;background:none;border:none;font-size:14px;font-family:inherit;} /* checklist board (client detail) */ .ck-item{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--border);} .ck-item:last-child{border-bottom:none;} .ck-item .st{margin-top:2px;} .ck-item .lbl3{font-size:14px;color:var(--ink);font-weight:500;} .ck-item .hint{font-size:12px;color:var(--muted);margin-top:3px;} .ck-item .val{font-family:var(--mono);font-size:12px;color:var(--accent);margin-top:6px;word-break:break-word;} .ck-item .acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto;} /* work order timeline */ .wo{border:1px solid var(--border);border-radius:14px;padding:18px 20px;background:var(--bg2);margin-top:10px;} .wo .t{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .wo .t .name{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--ink);} .wo-track{display:flex;align-items:center;gap:0;margin-top:16px;} .wo-node{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;position:relative;} .wo-node::before{content:'';position:absolute;top:6px;left:-50%;right:50%;height:1.5px;background:var(--border2);} .wo-node:first-child::before{display:none;} .wo-node .dotn{width:13px;height:13px;border-radius:50%;border:2px solid var(--border2);background:var(--bg2);z-index:1;} .wo-node.done .dotn{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(124,179,148,.6);} .wo-node.done::before{background:var(--accent);} .wo-node.now .dotn{border-color:var(--accent);animation:ledpulse 1.6s infinite;} .wo-node .nl{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;} .wo-node.done .nl,.wo-node.now .nl{color:var(--muted2);} .wo .lg{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;line-height:1.8;} .wo .lg b{color:var(--muted2);font-weight:500;} /* lifecycle dots (shared visual language) */ .sdots{display:inline-flex;gap:5px;align-items:center;} .sdots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border2);background:transparent;display:block;} .sdots i.done{background:var(--accent);border-color:var(--accent);} .sdots i.now{border-color:var(--accent);box-shadow:0 0 8px rgba(124,179,148,.7);animation:ledpulse 2s infinite;} /* the attention feed — the one list of things that need a human */ .att{border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--surface),var(--bg2));overflow:hidden;} .att .arow{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);} .att .arow:last-child{border-bottom:none;} .att .arow .t{font-size:14px;color:var(--ink);} .att .arow .t b{font-weight:600;} .att .arow .who2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .att .arow .act{margin-left:auto;flex:0 0 auto;} .att .clear{padding:22px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .next-line{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline); font-family:var(--mono);font-size:11.5px;color:var(--muted2);} .next-line .k2{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;} .next-line b{color:var(--accent);font-weight:500;} /* terminal hint block */ .term{background:#060907;border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-family:var(--mono); font-size:12.5px;color:var(--muted2);line-height:1.7;overflow-x:auto;} .term .p{color:var(--accent);} .term b{color:var(--ink);font-weight:500;} /* HQ buttons inherit .btn from app.css; mono variant */ html[data-theme="hq"] .btn{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;} html[data-theme="hq"] .btn-primary{box-shadow:0 0 22px rgba(124,179,148,.22);border-color:rgba(160,190,170,.25);} html[data-theme="hq"] .field{background:var(--bg2);} html[data-theme="hq"] label.lbl{color:var(--muted2);font-family:var(--mono);} html[data-theme="hq"] .card{background:linear-gradient(180deg,var(--surface),var(--bg2));} /* color swatch input row */ .swrow{display:flex;align-items:center;gap:10px;} .swrow input[type=color]{width:42px;height:42px;border-radius:10px;border:1px solid var(--border2);background:var(--bg2);padding:3px;cursor:pointer;} /* ── mobile ── */ @media (max-width:900px){ .wiz{grid-template-columns:1fr;} .wiz-rail{position:static;} .wiz-steps{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;} .wiz-steps::-webkit-scrollbar{display:none;} .wstep{flex:0 0 auto;} .pkg-grid{grid-template-columns:1fr;} } @media (max-width:760px){ .hq-nav .in{height:auto;flex-wrap:wrap;padding:10px 18px;row-gap:2px;} .hq-links{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin-left:-6px;padding:6px 0 8px;} .hq-links::-webkit-scrollbar{display:none;} .hq-clock{display:none;} .hq-wrap{padding:26px 18px 120px;} .hq-head h1{font-size:clamp(26px,7.4vw,36px);} .hq-grid{grid-template-columns:1fr;} .wiz-panel{padding:22px 18px;} .wo-track{flex-wrap:wrap;row-gap:14px;} .wo-node{flex:1 0 33%;} .wo-node::before{display:none;} }