/* ============================================================================ Gradem app shell — the design language for the logged-in app. Layered on top of styles.css, which keeps the brand tokens. Three rules hold it together: 1. Numbers are the hero. Big, mono, precise, never decorated. 2. Light is the material. Panels sit on a near-black field and glow at the edges rather than being drawn with hard borders. 3. Motion happens once. Everything animates in on load, staggered, then goes still. Constant movement reads cheap; calm-after-landing reads expensive. ============================================================================ */ :root{ --rail-w: 68px; --rail-w-open: 232px; /* The orb palette, reused as the console's data colours so the whole app speaks one visual language. */ --aqua:#4DE3EF; --pink:#F472B6; --violet:#C88FE0; --panel:rgba(35,36,38,0.72); --panel-edge:rgba(243,245,238,0.08); --glow-lime:rgba(198,255,61,0.35); --ease-out:cubic-bezier(.16,1,.3,1); } /* ---- Shell ---------------------------------------------------------------- */ body.shell{ background: radial-gradient(1100px 620px at 12% -8%, rgba(77,227,239,0.055), transparent 62%), radial-gradient(900px 520px at 96% 4%, rgba(244,114,182,0.045), transparent 58%), #121315; min-height:100vh; } /* A very faint grid, masked out toward the edges — reads as instrumentation rather than wallpaper, and disappears entirely on small screens. */ body.shell::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(rgba(243,245,238,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(243,245,238,0.022) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(circle at 50% 32%, #000 30%, transparent 78%); mask-image:radial-gradient(circle at 50% 32%, #000 30%, transparent 78%); } @media (max-width:820px){ body.shell::before{display:none;} } /* The rail offset lives on , not on the content wrapper. That way every existing page keeps whatever layout container it already had — .wrap, .wrap-wide — and still sits correctly beside the rail without being restructured. One mechanism, no per-page special cases. */ body.shell{ padding-left:var(--rail-w); transition:padding-left .28s var(--ease-out); } body.shell.rail-open{ padding-left:var(--rail-w-open); } .shell-main{ position:relative;z-index:1; margin:0 auto; padding:30px 30px 90px; max-width:1220px; } body.shell .wrap, body.shell .wrap-wide{ position:relative;z-index:1; } @media (max-width:820px){ body.shell, body.shell.rail-open{ padding-left:0; } body.shell .wrap, body.shell .wrap-wide, body.shell .shell-main{ padding-top:78px; } .shell-main{padding-left:16px;padding-right:16px;} } /* ---- Rail ----------------------------------------------------------------- */ .rail{ position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:40; background:linear-gradient(180deg, rgba(28,29,31,0.97), rgba(20,21,23,0.97)); border-right:1px solid var(--panel-edge); display:flex;flex-direction:column;gap:4px;padding:14px 10px; transition:width .28s var(--ease-out); overflow:hidden; } body.rail-open .rail{ width:var(--rail-w-open); } /* The mark is the toggle — no burger, because this isn't a website. */ .rail-mark{ display:flex;align-items:center;gap:12px;cursor:pointer; padding:8px 8px 14px;margin-bottom:6px;border:none;background:none; border-bottom:1px solid var(--panel-edge);width:100%;text-align:left; } .rail-orb{ width:26px;height:26px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 34% 30%, var(--aqua), transparent 62%), radial-gradient(circle at 66% 68%, var(--pink), transparent 62%), radial-gradient(circle at 50% 50%, var(--violet), transparent 70%); animation:rail-orb-breathe 4.6s ease-in-out infinite; } @keyframes rail-orb-breathe{ 0%,100%{transform:scale(1);opacity:.88;} 50%{transform:scale(1.09);opacity:1;} } .rail-wordmark{ white-space:nowrap;opacity:0;transform:translateX(-6px); transition:opacity .2s ease,transform .2s ease; font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--text); font-family:var(--mono); } body.rail-open .rail-wordmark{opacity:1;transform:none;} .rail-item{ display:flex;align-items:center;gap:14px; padding:10px 11px;border-radius:10px;text-decoration:none; color:var(--text-muted);font-size:13px;white-space:nowrap; position:relative;transition:background .15s,color .15s; background:none;border:none;font-family:var(--sans);cursor:pointer;width:100%; } .rail-item:hover{background:rgba(243,245,238,0.05);color:var(--text);} .rail-item.active{background:rgba(198,255,61,0.10);color:var(--accent);} /* A lit edge rather than a filled block — reads as an instrument panel. */ .rail-item.active::before{ content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent); box-shadow:0 0 10px var(--glow-lime); } .rail-icon{width:20px;flex-shrink:0;text-align:center;font-size:15px;line-height:1;} .rail-label{ opacity:0;transform:translateX(-6px); transition:opacity .2s ease,transform .2s ease; } body.rail-open .rail-label{opacity:1;transform:none;} .rail-lock{margin-left:auto;font-size:10px;opacity:0;transition:opacity .2s ease;} body.rail-open .rail-lock{opacity:.65;} .rail-item.locked{opacity:.5;} .rail-spacer{flex:1;} .rail-foot{border-top:1px solid var(--panel-edge);padding-top:8px;margin-top:4px;} /* Off-canvas on small screens, with a small always-visible tab to pull it out. */ .rail-edge{display:none;} @media (max-width:820px){ .rail{transform:translateX(-100%);width:var(--rail-w-open);transition:transform .28s var(--ease-out);} body.rail-open .rail{transform:none;} .rail-label,.rail-wordmark{opacity:1;transform:none;} .rail-edge{ position:fixed;top:14px;left:14px;z-index:41;width:42px;height:42px;border-radius:12px; background:rgba(28,29,31,0.95);border:1px solid var(--panel-edge); display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0; } } /* ---- Panels --------------------------------------------------------------- */ .panel{ position:relative;background:var(--panel);border:1px solid var(--panel-edge); border-radius:16px;padding:20px;margin-bottom:16px; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } /* A single hairline of light along the top edge — the cheapest way to make a flat panel read as a lit surface. */ .panel::after{ content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:16px 16px 0 0; background:linear-gradient(90deg,transparent,rgba(243,245,238,0.16),transparent); } .panel-title{ font-size:10.5px;text-transform:uppercase;letter-spacing:.14em; color:var(--text-faint);font-family:var(--mono);margin-bottom:14px; } /* ---- Numerics ------------------------------------------------------------- */ .stat-value{ font-family:var(--mono);font-weight:700;font-size:30px;line-height:1; color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-0.02em; } .stat-label{font-size:11px;color:var(--text-muted);margin-top:6px;} .stat-note{font-size:10.5px;color:var(--text-faint);margin-top:3px;font-family:var(--mono);} /* ---- Entry motion --------------------------------------------------------- */ /* Once, on load, staggered — then still. */ .rise{opacity:0;transform:translateY(10px);animation:rise .55s var(--ease-out) forwards;} @keyframes rise{to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .rise{animation:none;opacity:1;transform:none;} .rail-orb{animation:none;} } /* ---- Greeting ------------------------------------------------------------- */ .greet{display:flex;align-items:center;gap:20px;margin-bottom:22px;} /* The big orb — same visual language as the processing screen, here as a presence indicator. It reacts to real state, so it always means something. */ .greet-orb{position:relative;width:72px;height:72px;flex-shrink:0;} .greet-orb i{ position:absolute;border-radius:46% 54% 61% 39% / 43% 46% 54% 57%; filter:blur(11px);mix-blend-mode:screen;display:block; } .greet-orb i:nth-child(1){inset:6%;background:radial-gradient(circle at 35% 30%,var(--aqua),transparent 68%);opacity:.9;animation:g1 7s ease-in-out infinite;} .greet-orb i:nth-child(2){inset:14% 4% 4% 14%;background:radial-gradient(circle at 65% 62%,var(--pink),transparent 68%);opacity:.72;animation:g2 8.5s ease-in-out infinite;} .greet-orb i:nth-child(3){inset:22%;background:radial-gradient(circle at 50% 50%,var(--violet),transparent 72%);opacity:.5;animation:g3 6.5s ease-in-out infinite;} .greet-orb u{ position:absolute;inset:0;border-radius:50%;display:block; background-image:radial-gradient(rgba(255,255,255,0.22) 1px,transparent 1.4px); background-size:5px 5px;mix-blend-mode:screen;opacity:.5; -webkit-mask-image:radial-gradient(circle at center,#000 42%,transparent 72%); mask-image:radial-gradient(circle at center,#000 42%,transparent 72%); animation:gdots 3.2s ease-in-out infinite; } @keyframes g1{0%,100%{transform:translate(0,0) scale(1) rotate(0);}33%{transform:translate(14%,-10%) scale(1.16) rotate(12deg);}66%{transform:translate(-9%,10%) scale(.92) rotate(-9deg);}} @keyframes g2{0%,100%{transform:translate(0,0) scale(1) rotate(0);}33%{transform:translate(-12%,8%) scale(1.2) rotate(-14deg);}66%{transform:translate(9%,-10%) scale(.9) rotate(10deg);}} @keyframes g3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5%,-6%) scale(.87);}} @keyframes gdots{0%,100%{transform:scale(1);opacity:.38;}50%{transform:scale(1.06);opacity:.62;}} /* Working: everything speeds up and the orb tightens — visibly busy. */ .greet-orb.working i{animation-duration:2.2s,2.7s,2s;} .greet-orb.working u{animation-duration:1.1s;} .greet-text h1{font-size:26px;margin:0 0 6px;letter-spacing:-0.01em;} .greet-status{font-size:13px;color:var(--text-muted);line-height:1.6;margin:0;max-width:640px;} .greet-status b{color:var(--accent);font-weight:600;} .greet-status .warn{color:var(--warn);font-weight:600;} @media (max-width:640px){.greet{gap:14px;}.greet-orb{width:54px;height:54px;}.greet-text h1{font-size:21px;}} /* ---- Rings ---------------------------------------------------------------- */ .ring-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:18px;} .ring-card{ position:relative;background:var(--panel);border:1px solid var(--panel-edge); border-radius:16px;padding:18px 16px 20px;text-align:center; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .ring-wrap{position:relative;width:190px;max-width:100%;margin:0 auto;} .ring-svg{width:100%;height:auto;display:block;overflow:visible;} /* The rev: arc sweeps from zero to its value, easing out. */ .ring-fill{animation:ring-sweep 1s var(--ease-out) forwards;} @keyframes ring-sweep{from{stroke-dasharray:0 var(--all);}to{stroke-dasharray:var(--to) var(--all);}} .ring-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;} .ring-value{ font-family:var(--mono);font-weight:700;font-size:34px;line-height:1;color:var(--text); font-variant-numeric:tabular-nums;letter-spacing:-0.03em; } .ring-value span{font-size:17px;color:var(--text-muted);margin-left:1px;} .ring-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);margin-top:7px;font-family:var(--mono);} /* Every line below the ring is height-reserved, and the label inside it never wraps. Without this a longer label ("Attendance rate" against "Pitch rate") takes two lines, which grows the absolutely-centred block and lifts that dial's number above its neighbours — the cards look misaligned even though the grid is perfect. */ .ring-label{white-space:nowrap;} .ring-sub{font-size:12px;color:var(--text-muted);margin-top:10px;min-height:17px;} .ring-note{font-size:11px;color:var(--text-faint);margin-top:5px;min-height:15px;} @media (prefers-reduced-motion:reduce){.ring-fill{animation:none;stroke-dasharray:var(--to) var(--all);}} .trend-svg{width:100%;height:auto;display:block;} /* ---- Date range picker ---------------------------------------------------- */ .dr{position:relative;display:inline-block;} .dr-trigger{ display:inline-flex;align-items:center;gap:9px;padding:9px 14px; background:var(--surface-2);border:1px solid var(--border);border-radius:10px; color:var(--text);font-size:13px;font-family:var(--sans);cursor:pointer; } .dr-trigger:hover,.dr-trigger.open{border-color:var(--accent);} .dr-cal-icon{color:var(--text-faint);font-size:12px;} .dr-caret{color:var(--text-faint);font-size:10px;margin-left:2px;} .dr-pop{ position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:flex; background:rgba(24,25,27,0.98);border:1px solid var(--panel-edge);border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } .dr-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint);font-family:var(--mono);margin-bottom:10px;} .dr-presets{padding:16px 12px;border-right:1px solid var(--panel-edge);min-width:172px;max-height:420px;overflow-y:auto;} .dr-preset{ display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px; background:none;border:none;color:var(--text-muted);font-size:13px; font-family:var(--sans);cursor:pointer; } .dr-preset:hover{background:rgba(198,255,61,0.12);color:var(--accent);} .dr-cal{padding:16px 18px 14px;} .dr-cal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:10px;} .dr-chips{display:flex;align-items:center;gap:8px;} .dr-chip{ padding:6px 12px;border-radius:99px;border:1px solid var(--border); font-size:12px;color:var(--text-muted);cursor:pointer;white-space:nowrap; } .dr-chip.active{border-color:var(--accent);color:var(--accent);} .dr-arrow{color:var(--text-faint);font-size:11px;} .dr-nav{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px;} .dr-nav-btn{ width:26px;height:26px;border-radius:8px;background:var(--surface-2); border:1px solid var(--border);color:var(--text-muted);cursor:pointer; font-size:14px;line-height:1;padding:0; } .dr-nav-btn:hover{border-color:var(--accent);color:var(--accent);} .dr-months{display:flex;gap:26px;} .dr-month-name{font-size:13px;font-weight:600;color:var(--text);text-align:center;margin-bottom:10px;} .dr-dow,.dr-grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px;} .dr-dow span{font-size:10px;color:var(--text-faint);text-align:center;font-family:var(--mono);padding-bottom:4px;} .dr-day{ height:30px;border-radius:50%;background:none;border:none;cursor:pointer; color:var(--text-muted);font-size:12px;font-family:var(--mono);padding:0; } .dr-day:hover:not(:disabled){background:rgba(243,245,238,0.08);color:var(--text);} .dr-day:disabled{color:rgba(107,112,100,0.45);cursor:default;} .dr-day.dr-blank{visibility:hidden;} .dr-day.dr-in{background:rgba(198,255,61,0.13);border-radius:0;color:var(--text);} .dr-day.dr-sel{background:var(--accent);color:#151B0C;font-weight:700;} .dr-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--panel-edge);} .dr-foot .btn{padding:8px 18px;margin:0;} @media (max-width:760px){ .dr-pop{flex-direction:column;left:auto;right:0;max-width:calc(100vw - 32px);} .dr-presets{border-right:none;border-bottom:1px solid var(--panel-edge);max-height:150px;} .dr-months{flex-direction:column;gap:16px;} } /* ---- At a glance ---------------------------------------------------------- */ .glance{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} .glance-card{border-radius:14px;padding:16px 18px;border:1px solid var(--panel-edge);background:var(--panel);} .glance-card.good{border-left:3px solid var(--accent);} .glance-card.work{border-left:3px solid var(--warn);} .glance-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono);margin-bottom:7px;} .glance-card.good .glance-kicker{color:var(--accent);} .glance-card.work .glance-kicker{color:var(--warn);} .glance-head{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;} .glance-body{font-size:12.5px;color:var(--text-muted);line-height:1.55;} /* ---- Radar ---------------------------------------------------------------- */ .radar-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;} .radar-svg{width:100%;max-width:380px;height:auto;overflow:visible;} .radar-poly{transform-origin:center;animation:radar-in .9s var(--ease-out) forwards;} @keyframes radar-in{from{transform:scale(.05);opacity:0;}to{transform:scale(1);opacity:1;}} .radar-key{display:grid;gap:7px;min-width:190px;} .radar-key-row{display:flex;align-items:center;gap:9px;font-size:12px;} .radar-key-name{flex:1;color:var(--text-muted);} .radar-key-val{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;} .radar-key-val.over{color:var(--accent);} .radar-key-val.under{color:var(--warn);} .radar-bar{width:56px;height:4px;border-radius:2px;background:rgba(243,245,238,0.08);position:relative;overflow:hidden;} .radar-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;animation:radar-bar 1s var(--ease-out) forwards;} @keyframes radar-bar{from{width:0;}} @media (prefers-reduced-motion:reduce){ .radar-poly{animation:none;transform:none;opacity:1;} .radar-bar i{animation:none;} } /* Delivery tiles — centred, so the number sits over its own label. */ .tile-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));} .tile{ background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px; padding:15px 12px;text-align:center; } .tile-value{font-family:var(--mono);font-weight:700;font-size:22px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;} .tile-label{font-size:11px;color:var(--text-muted);margin-top:7px;} .tile-note{font-size:10.5px;color:var(--text-faint);margin-top:4px;line-height:1.4;} /* ---- Cash-to-collect target (targets panel) -------------------------------- */ /* Sits under the target inputs and restates the goal in money — the dials show rates, this shows the amount and the gap left. */ .cash-target{margin-top:18px;padding-top:16px;border-top:1px solid var(--panel-edge);} .cash-target-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;} .cash-target-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-family:var(--mono);} .cash-target-goal{font-family:var(--mono);font-weight:700;font-size:20px;color:var(--pink);font-variant-numeric:tabular-nums;} .cash-target-bar{ height:6px;border-radius:99px;margin:11px 0 9px;overflow:hidden; background:rgba(255,255,255,.07); } .cash-target-bar span{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,rgba(244,114,182,.55),var(--pink)); box-shadow:0 0 12px rgba(244,114,182,.45); } .cash-target-foot{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--text-muted);font-family:var(--mono);font-variant-numeric:tabular-nums;} .cash-target-done{color:var(--accent);} /* ---- Locked Pro preview ---------------------------------------------------- */ /* The real layout, filled with sample figures, sealed behind a bottom strip. Selling the shape of the thing beats describing it — the numbers underneath have to actually be readable ("62%", "£74,000") for that to work, so the veil is light. The content is still inert in every sense: unselectable, unclickable and hidden from screen readers, so it can never be mistaken for live data or interacted with by accident. The strip sits along the bottom edge rather than centred, so it never covers the very numbers it's advertising. */ .lock-wrap{position:relative;margin-bottom:16px;} .lock-content{ filter:blur(.7px) saturate(.55); opacity:.82; pointer-events:none; user-select:none; -webkit-user-select:none; } .lock-chip{ position:absolute;top:12px;right:12px;z-index:2; font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--warn);background:rgba(18,19,21,.82);border:1px solid rgba(245,166,35,.35); padding:4px 8px;border-radius:6px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .lock-overlay{ position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center; padding:24px 20px 18px; /* Fades from solid at the bottom to transparent at the top, so it reads as a strip rather than a wall over the content. */ background:linear-gradient(to top, rgba(14,15,17,.95) 0%, rgba(14,15,17,.8) 55%, rgba(14,15,17,0) 100%); border-radius:0 0 16px 16px; } .lock-card{max-width:480px;width:100%;text-align:center;} .lock-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;} .lock-card p{font-size:12.5px;line-height:1.55;color:var(--text-muted);margin:0 0 14px;} @media (max-width:600px){ .lock-chip{top:8px;right:8px;} .lock-overlay{padding:18px 14px 14px;} } /* ---- Shared modal --------------------------------------------------------- */ /* Same pattern used for the live-review and coaching offers: built and appended to on demand, removed on close, rather than a hidden block sitting in the page at all times. */ .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:998;align-items:center;justify-content:center;padding:20px;} .modal-backdrop.open{display:flex;} .modal-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px;max-width:420px;width:100%;text-align:center;max-height:calc(100vh - 40px);overflow-y:auto;} .modal-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-faint);font-size:16px;cursor:pointer;padding:6px;} /* ---- Mid-day log confirmation ---------------------------------------------- */ /* Deliberately interrupts rather than saving quietly: the whole point is to stop a number being doubled or lost without anyone noticing. */ .log-confirm{ border:1px solid rgba(245,166,35,.45);background:rgba(245,166,35,.07); border-radius:12px;padding:15px 17px;margin-bottom:14px; } .log-confirm-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:7px;} .log-confirm p{font-size:12.5px;line-height:1.65;color:var(--text-muted);margin:0 0 12px;} .log-confirm b{color:var(--text);} .log-confirm-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:12px;} .log-confirm-grid label{display:flex;flex-direction:column;font-size:11.5px;color:var(--text-muted);} .log-confirm-grid input{ margin-top:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px; padding:10px 12px;color:var(--text);font-family:inherit;font-size:13px; } .log-confirm-actions{display:flex;gap:8px;flex-wrap:wrap;} .log-confirm-note{font-size:11px;color:var(--text-faint);margin:11px 0 0 !important;} /* ---- Admin view switch ----------------------------------------------------- */ /* Two dashboards behind one page, for the one person who legitimately needs both. */ .view-switch{ display:inline-flex;gap:4px;padding:4px;margin-bottom:18px; background:var(--panel);border:1px solid var(--panel-edge);border-radius:12px; } .view-tab{ padding:8px 15px;border-radius:9px;border:0;cursor:pointer; background:none;color:var(--text-muted);font-family:inherit;font-size:12.5px; transition:background .15s,color .15s; } .view-tab:hover{color:var(--text);} .view-tab.on{background:rgba(198,255,61,.12);color:var(--accent);font-weight:600;} .view-note{ font-size:11.5px;color:var(--text-faint);margin:-8px 0 16px; } .view-note b{color:var(--text-muted);} /* ---- "From GHL" note on a team member's log form --------------------------- */ /* Sits above the inputs so it's read before anything is typed, and is visually a fact being reported rather than a field to fill in. */ .ghl-today{ display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap; margin:0 0 13px;padding:11px 14px;border-radius:10px; background:rgba(77,227,239,.07);border:1px solid rgba(77,227,239,.24); font-size:12.5px;line-height:1.6;color:var(--text-muted); } .ghl-today b{color:var(--text);} .ghl-today-tag{ font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--aqua);background:rgba(77,227,239,.14);padding:3px 7px;border-radius:5px; flex-shrink:0;margin-top:1px; } /* ---- Order bump ------------------------------------------------------------ */ /* Centred rather than left-aligned like the rest of the page. It sits at the very bottom and is the one block asking for a decision, so it reads as a considered offer instead of another row of data. Copy is width-capped so centred lines stay easy to read. */ .bump{text-align:center;} .bump-copy{ font-size:13px;line-height:1.65;color:var(--text-muted); margin:0 auto 16px;max-width:60ch; } /* Bullets and their indent pull centred text off-axis, so this list drops both. */ .bump-list{margin:0 auto 14px;max-width:60ch;padding-left:0;list-style:none;} .bump-list li{font-size:13px;color:var(--text-muted);margin-bottom:5px;} .bump .btn{display:inline-flex;} .bump #bump-checkout{text-align:left;} /* ---- Derived plan readout (inside the targets panel) ----------------------- */ /* Deliberately not styled like the inputs above it — this is calculated, not typed. */ .plan-out{ margin-top:16px;padding:14px 16px;border-radius:12px; background:rgba(198,255,61,.05);border:1px solid rgba(198,255,61,.22); } .plan-out-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-family:var(--mono);margin-bottom:11px;} .plan-out-row{display:flex;gap:22px;flex-wrap:wrap;} .plan-out-fig{display:flex;align-items:baseline;gap:6px;} .plan-out-fig b{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;} .plan-out-fig span{font-size:11.5px;color:var(--text-muted);} /* ---- What to do about it --------------------------------------------------- */ .fix-block{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--panel-edge);} .fix-block:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;} .fix-head{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .fix-gap{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);font-weight:400;} .fix-cause{font-size:13px;line-height:1.65;color:var(--text-muted);margin:9px 0 0;} .fix-sub{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent); font-family:var(--mono);margin:16px 0 10px; } .fix-list{margin:0;padding:0;list-style:none;counter-reset:fix;} .fix-list li{position:relative;padding-left:32px;margin-bottom:14px;counter-increment:fix;} .fix-list li:last-child{margin-bottom:0;} .fix-list li::before{ content:counter(fix);position:absolute;left:0;top:1px; width:21px;height:21px;border-radius:7px;display:grid;place-items:center; font-family:var(--mono);font-size:11px;font-weight:700;color:var(--bg); background:var(--accent); } .fix-do{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.45;} .fix-how{font-size:12.5px;line-height:1.65;color:var(--text-muted);margin-top:4px;} .fix-how em{color:var(--text);font-style:normal;background:rgba(243,245,238,.06);padding:1px 5px;border-radius:4px;} /* position + z-index are load-bearing, not decoration. `.rise` animates a transform, and a transformed element becomes a stacking context — which traps the popover's own z-index inside it, so the calendar painted behind every card further down the page and looked like clicking the trigger did nothing. Lifting the whole bar fixes it at the root. */ .dr-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;position:relative;z-index:70;} .dr-bar .dash-scope{margin-left:auto;font-size:11.5px;color:var(--text-faint);font-family:var(--mono);} /* ---- Page header (every interior page) ------------------------------------ */ /* The same living orb as the dashboard, scaled down, so Gradem reads as awake on every screen rather than only the one. */ .page-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;} .page-orb{position:relative;width:52px;height:52px;flex-shrink:0;} .page-orb i{position:absolute;border-radius:46% 54% 61% 39% / 43% 46% 54% 57%;filter:blur(8px);mix-blend-mode:screen;display:block;} .page-orb i:nth-child(1){inset:6%;background:radial-gradient(circle at 35% 30%,var(--aqua),transparent 68%);opacity:.9;animation:g1 7s ease-in-out infinite;} .page-orb i:nth-child(2){inset:14% 4% 4% 14%;background:radial-gradient(circle at 65% 62%,var(--pink),transparent 68%);opacity:.72;animation:g2 8.5s ease-in-out infinite;} .page-orb i:nth-child(3){inset:22%;background:radial-gradient(circle at 50% 50%,var(--violet),transparent 72%);opacity:.5;animation:g3 6.5s ease-in-out infinite;} .page-orb u{ position:absolute;inset:0;border-radius:50%;display:block; background-image:radial-gradient(rgba(255,255,255,0.22) 1px,transparent 1.4px); background-size:4px 4px;mix-blend-mode:screen;opacity:.45; -webkit-mask-image:radial-gradient(circle at center,#000 42%,transparent 72%); mask-image:radial-gradient(circle at center,#000 42%,transparent 72%); animation:gdots 3.2s ease-in-out infinite; } .page-head h1{margin:0 0 4px;font-size:24px;letter-spacing:-0.01em;} .page-head .sub{margin:0;max-width:660px;} @media (max-width:640px){.page-orb{width:40px;height:40px;}.page-head h1{font-size:20px;}} /* Interior pages inherit the dashboard's surface language: cards become lit panels. */ body.shell .card{ background:var(--panel);border-color:var(--panel-edge);border-radius:16px; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative; } body.shell .card::after{ content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:16px 16px 0 0; background:linear-gradient(90deg,transparent,rgba(243,245,238,0.14),transparent); } body.shell .card-title{ font-size:10.5px;letter-spacing:.14em;color:var(--text-faint);font-family:var(--mono); } body.shell h2{font-size:15px;letter-spacing:.01em;}