/* ============================================================================ Super 8 Trends — Lead Intelligence Brand theme matched to super8trends.com (Manrope, sand/white, navy, cyan). Palette lifted from the parent site: navy #071827, ink #10252c, cyan #14c8d4, cyan-bright #3be7ea, sand #f6f2ea, white #f8fbfc, coral/orange/lime accents. Light + dark themes via [data-theme] on (set by /static/theme.js). ============================================================================ */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/static/brand/manrope-latin.woff2") format("woff2"); } /* ---- light theme (default) -------------------------------------------------- */ :root { color-scheme: light; --navy: #071827; --navy-2: #0b2533; --teal: #063c43; --ink: #10252c; --muted: #61747a; --sand: #f6f2ea; --white: #f8fbfc; --cyan: #14c8d4; --cyan-bright: #3be7ea; --cyan-dark: #0e8f9c; --coral: #ff5f6d; --orange: #ff7a3d; --lime: #91ef33; --bg: var(--sand); --panel: #ffffff; --panel2: #eef4f5; --border: #10252c26; --text: var(--ink); --dim: var(--muted); --accent: var(--cyan); --accent2: var(--cyan-dark); --linkhover: var(--teal); --green: #26b783; --yellow: #d9a514; --red: #ff5f6d; --green-text: #157a56; --yellow-text: #96700c; --red-text: #c72f3d; --inputbg: #ffffff; --inputborder: #10252c33; --btnbg: #ffffff; --btnborder: #10252c33; --btnhover: #f2fbfc; --thbg: var(--white); --rowline: #10252c12; --hoverrow: #f0f8f9; --track: #e5ebee; --tagbg: #ffffff; --toastbg: #ffffff; --selbg: #14c8d455; --shadow: 0 10px 34px rgba(7, 24, 39, .07); --loginbg: linear-gradient(160deg, var(--sand) 0%, #eef4f5 100%); --b-hot2: #e43a4c; --b-hot: #d95f22; --b-high: #6f8f00; --b-med: var(--cyan-dark); --s-low-bg: #dfe7ea; --s-low-text: var(--muted); } /* ---- dark theme: the parent site's navy sections, extended ------------------- */ [data-theme="dark"] { color-scheme: dark; --bg: #0a1e2c; --panel: #102939; --panel2: #173448; --border: #ffffff26; --text: #e6eff1; --dim: #8fa6ad; --accent2: var(--cyan-bright); --linkhover: #7deef2; --green: #35c98f; --yellow: #d9a514; --red: #ff5f6d; --green-text: #4cd6a4; --yellow-text: #e8c558; --red-text: #ff8b95; --inputbg: #0d2130; --inputborder: #ffffff33; --btnbg: #0d2130; --btnborder: #ffffff33; --btnhover: #173448; --thbg: #102939; --rowline: #ffffff14; --hoverrow: #123145; --track: #1d394c; --tagbg: #0d2130; --toastbg: #102939; --selbg: #14c8d466; --shadow: 0 14px 40px rgba(0, 0, 0, .45); --loginbg: linear-gradient(160deg, #071827 0%, #04131f 100%); --b-hot2: #ff7a84; --b-hot: #ff9a63; --b-high: #b4e356; --b-med: var(--cyan-bright); --s-low-bg: #243a48; --s-low-text: #a9bcc2; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* page shell: footer always reaches the bottom of the viewport on short pages */ body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 14px/1.5 "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } ::selection { background: var(--selbg); } a { color: var(--accent2); text-decoration: none; } a:hover { color: var(--linkhover); text-decoration: underline; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } main { flex: 1 0 auto; max-width: 1500px; width: 100%; margin: 0 auto; padding: 20px 18px; } footer { background: #04131f; color: #779095; text-align: center; padding: 26px 16px 22px; font-size: 12px; margin-top: 34px; } footer a { color: #9fb2b5; } footer a:hover { color: var(--cyan-bright); } /* ---- top navigation: navy bar, white logo top-left --------------------------- */ .topnav { display: flex; gap: 2px; align-items: center; padding: 0 18px; height: 64px; background: var(--navy); border-bottom: 1px solid #ffffff1a; position: sticky; top: 0; z-index: 5; } .topnav .brand { display: flex; align-items: center; gap: 12px; margin-right: 20px; } .topnav .brand img { height: 27px; width: auto; display: block; } .topnav .brand .brand-sub { color: var(--cyan-bright); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border-left: 1px solid #ffffff2e; padding-left: 12px; line-height: 1.3; } .topnav a { color: #9fb2b5; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 12.5px; } .topnav a.active { color: #fff; background: rgba(59, 231, 234, .14); } .topnav a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .07); } .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: #9fb2b5; border: 1px solid #ffffff2e; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .theme-toggle:hover { color: #fff; border-color: #ffffff8c; background: rgba(255, 255, 255, .07); } /* ---- signed-in user menu (avatar + dropdown, injected by server.js) ----------- */ .usermenu { position: relative; margin-left: 8px; } /* sits right after the auto-aligned theme toggle */ .usermenu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 6px 4px 4px; border-radius: 999px; border: 1px solid transparent; } .usermenu summary::-webkit-details-marker { display: none; } .usermenu summary:hover { background: rgba(255, 255, 255, .07); } .usermenu[open] summary { background: rgba(255, 255, 255, .1); border-color: #ffffff2e; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--teal)); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .02em; flex: 0 0 auto; } .usermenu .uname { color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; } .usermenu .urole { color: var(--cyan-bright); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .usermenu .chev { color: #9fb2b5; font-size: 10px; } .umenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; background: var(--navy-2); border: 1px solid #ffffff26; border-radius: 14px; padding: 6px; box-shadow: 0 22px 60px rgba(4, 13, 22, .55); } .umenu .uhead { padding: 8px 10px 10px; border-bottom: 1px solid #ffffff1f; margin-bottom: 6px; } .umenu .uhead strong { display: block; color: #fff; font-size: 13px; } .umenu .uhead span { display: block; margin-top: 2px; word-break: break-all; } .umenu a, .umenu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; color: #c9d8da; font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; cursor: pointer; text-decoration: none; } .umenu a:hover, .umenu button:hover { background: rgba(59, 231, 234, .12); color: #fff; } @media (max-width: 1080px) { .usermenu { margin-left: 0; } .usermenu .uname, .usermenu .urole { display: none; } } @media (max-width: 1080px) { .topnav { height: auto; flex-wrap: wrap; padding: 8px 14px; } .topnav .brand { margin-right: 8px; } .topnav .brand .brand-sub { display: none; } .topnav a { padding: 6px 9px; font-size: 12px; } .theme-toggle { margin-left: 0; } } /* ---- typography ---------------------------------------------------------------- */ .pagehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; } h1 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 4px; } h2 { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--accent2); letter-spacing: -.01em; } h3 { font-size: 12px; margin: 0 0 6px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; } .sub { color: var(--dim); margin: 2px 0 10px; } .mt { margin-top: 18px; } /* ---- forms ------------------------------------------------------------------------ */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } input, select, textarea { background: var(--inputbg); color: var(--text); border: 1px solid var(--inputborder); border-radius: 10px; padding: 6px 10px; font: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(20, 200, 212, .18); } /* ---- buttons: cyan pills like super8trends.com ------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--btnbg); color: var(--text); border: 1px solid var(--btnborder); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; font-weight: 700; transition: transform .15s, background .15s, box-shadow .15s, border-color .15s; } .btn:hover { border-color: var(--cyan); background: var(--btnhover); text-decoration: none; } .btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--navy); font-weight: 800; } .btn.primary:hover { background: var(--cyan-bright); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(20, 200, 212, .35); } .btn.ghost { background: transparent; } .btn.small { padding: 3px 11px; font-size: 12px; } .btn.tiny { padding: 1px 9px; font-size: 11px; } .btn.danger { color: var(--red); } .btn.danger:hover { border-color: var(--red); background: var(--btnhover); } .btn.ok { background: var(--green); border-color: var(--green); color: #06281b; font-weight: 800; } .inline-form { display: inline-flex; gap: 6px; align-items: center; } form.inline { display: inline; } .stack { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .stack label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--dim); } .btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .btnrow form { display: contents; } /* ---- tables -------------------------------------------------------------------------- */ .tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); } table.grid { width: 100%; border-collapse: collapse; min-width: 1400px; } table.grid th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--thbg); z-index: 1; } table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--rowline); vertical-align: top; } table.grid tr:last-child td { border-bottom: none; } tr.rowlink { cursor: pointer; } tr.rowlink:hover td { background: var(--hoverrow); } td.num { text-align: right; font-variant-numeric: tabular-nums; } .center { text-align: center; } .nowrap { white-space: nowrap; } .small { font-size: 12px; } .tiny { font-size: 11px; } .dim { color: var(--dim); } .mono { font-family: ui-monospace, Consolas, monospace; } /* ---- score badges: brand hues, navy text for contrast --------------------------------- */ .score { display: inline-block; min-width: 34px; text-align: center; font-weight: 800; border-radius: 8px; padding: 3px 6px; font-size: 13px; } .s-hot2 { background: var(--coral); color: var(--navy); } .s-hot { background: var(--orange); color: var(--navy); } .s-high { background: var(--lime); color: var(--navy); } .s-med { background: var(--cyan); color: var(--navy); } .s-low { background: var(--s-low-bg); color: var(--s-low-text); } .s-vlow { background: transparent; color: var(--dim); } .cls { display: block; font-size: 10px; margin-top: 2px; white-space: nowrap; font-weight: 800; } .b-hot2 { color: var(--b-hot2); } .b-hot { color: var(--b-hot); } .b-high { color: var(--b-high); } .b-med { color: var(--b-med); } .b-low, .b-vlow { color: var(--dim); } .bar { width: 70px; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; } .bar .fill { height: 100%; border-radius: 3px; } .fill.g { background: var(--red); } /* for weakness-style bars high=bad */ .bar .fill.y { background: #e6c14a; } .bar .fill.r { background: var(--green); } /* default quality bars: high = good */ .kv .bar .fill.g, td .fill.g { background: var(--green); } .tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--tagbg); border: 1px solid #10252c2e; } [data-theme="dark"] .tag { border-color: #ffffff33; } .tag.ok { color: var(--green-text); border-color: var(--green); } .tag.warn { color: var(--yellow-text); border-color: var(--yellow); } .tag.none { color: var(--red-text); border-color: var(--red); } .tag.stage-customer { color: var(--green-text); border-color: var(--green); } .tag.stage-contacted, .tag.stage-responded { color: var(--yellow-text); border-color: var(--yellow); } .tag.stage-lost { opacity: .5; } /* ---- cards ------------------------------------------------------------------------------ */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow); } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1000px) { .cols, .cols2, .cols4 { grid-template-columns: 1fr; } } .detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .bigscore { text-align: right; } .bigscore .opp { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent2); } .bigscore .opp span { font-size: 16px; color: var(--dim); font-weight: 400; } .angle { font-size: 15px; line-height: 1.55; } .evidence { margin: 8px 0 0; padding-left: 18px; color: var(--dim); } .evidence li { margin: 3px 0; } .contact-line { margin: 4px 0; } .contact-line .k { color: var(--dim); font-size: 11px; letter-spacing: .06em; } .contact-list div { margin: 2px 0; } .mid { font-size: 28px; font-weight: 800; } .problem { font-weight: 700; } .tripple { display: flex; justify-content: space-around; font-weight: 800; font-size: 17px; } .findings { list-style: none; margin: 0; padding: 0; } .findings li { padding: 5px 0 5px 14px; border-left: 3px solid var(--border); margin: 4px 0; } .findings li.sev-critical { border-color: var(--red); } .findings li.sev-warning { border-color: var(--yellow); } .findings li.sev-notice, .findings li.sev-info { border-color: var(--border); } table.kv { width: 100%; border-collapse: collapse; } table.kv td { padding: 5px 6px; border-bottom: 1px solid var(--rowline); } .spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 36px; } .spark i { display: inline-block; width: 6px; border-radius: 2px 2px 0 0; } .spark i.g { background: var(--green); } .spark i.y { background: #e6c14a; } .spark i.r { background: var(--red); } .shots { display: flex; gap: 10px; flex-wrap: wrap; } .shots figure { margin: 0; } .shots img { width: 220px; border: 1px solid var(--border); border-radius: 10px; } .shots figcaption { font-size: 11px; color: var(--dim); margin-top: 3px; } .ok-msg { color: var(--green-text); } textarea { width: 100%; resize: vertical; } details summary { list-style: none; cursor: pointer; display: inline-block; } /* ---- outreach copilot ---------------------------------------------------------------- */ .oqueue { display: flex; flex-direction: column; gap: 16px; } .ocard { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 15px 19px; box-shadow: var(--shadow); } .ohead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .oleft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .onum { font-size: 12px; min-width: 28px; color: var(--dim); } .oname { font-size: 17px; font-weight: 800; color: var(--text); } .k { font-size: 11px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; margin-right: 4px; } .oangle { margin: 6px 0 2px; line-height: 1.5; } .owhy { color: var(--dim); } .oevidence { font-size: 11px; color: var(--dim); opacity: .85; margin: 6px 0; } .omsgform textarea { font-size: 15px; line-height: 1.55; background: var(--inputbg); margin-top: 6px; } .orow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .obtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .odraftempty { padding: 16px; border: 1px dashed var(--inputborder); border-radius: 12px; display: flex; gap: 12px; align-items: center; margin: 8px 0; background: var(--panel2); } .olinks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rowline); } .ofu { margin-top: 10px; } .fu, .furow { border-left: 3px solid var(--border); padding: 6px 10px; margin: 8px 0; } .futext { white-space: pre-wrap; margin: 3px 0 6px; } .furow { border-left: none; border-bottom: 1px solid var(--rowline); padding: 10px 0; } .alert { padding: 9px 13px; border-radius: 12px; margin: 8px 0; } .alert.err { background: rgba(255, 95, 109, .1); border: 1px solid var(--red); color: var(--red-text); } .alert.ok { background: rgba(38, 183, 131, .1); border: 1px solid var(--green); color: var(--green-text); } .alert.warn { background: rgba(217, 165, 20, .1); border: 1px solid var(--yellow); color: var(--yellow-text); } .ostatus select { min-width: 200px; } .osubj { display: block; margin-top: 8px; color: var(--dim); font-size: 12px; } .osubj input { width: 60%; color: var(--dim); } /* ---- dynamic updates: progress bar, spinner, toasts ----------------------------------- */ #topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99; background: rgba(20, 200, 212, .15); } #topbar .tb-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)); transition: width .3s ease; } #topbar.ind .tb-fill { width: 35%; animation: tb-slide 1.1s ease-in-out infinite; } @keyframes tb-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } } .spinner { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .85; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } button.busy { opacity: .75; pointer-events: none; } form[data-busy="1"] { pointer-events: none; } .removing { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translateX(14px); } #toastbox { position: fixed; right: 16px; bottom: 16px; z-index: 98; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--toastbg); border: 1px solid var(--green); color: var(--text); border-radius: 14px; padding: 10px 15px; font-size: 13px; max-width: 340px; box-shadow: 0 18px 50px rgba(7, 24, 39, .25); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; } .toast.show { opacity: 1; transform: none; } .toast.err { border-color: var(--red); } /* ---- use-cases marketing page: navy hero like super8trends.com -------------------------- */ .uc-hero { text-align: center; padding: 52px 26px 40px; margin-bottom: 18px; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 60%, var(--teal) 130%); border-radius: 26px; color: #fff; border: 1px solid #ffffff14; box-shadow: var(--shadow); } .uc-hero h1 { font-size: 40px; margin: 0; letter-spacing: -.04em; font-weight: 800; background: linear-gradient(90deg, var(--cyan-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .uc-hero .uc-logo { height: 34px; width: auto; margin-bottom: 18px; } .uc-tag { max-width: 640px; margin: 14px auto 22px; font-size: 17px; line-height: 1.6; color: #c9d8da; } .uc-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } .uc-hero .btn.ghost { background: transparent; color: #fff; border-color: #ffffff8c; } .uc-hero .btn.ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; } .uc-stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } .uc-stat strong { display: block; font-size: 27px; font-weight: 800; color: var(--cyan-bright); font-variant-numeric: tabular-nums; } .uc-stat span { font-size: 11px; color: #94abb0; text-transform: uppercase; letter-spacing: .07em; } .uc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .uc-stepnum { font-size: 24px; font-weight: 800; color: var(--accent2); margin-bottom: 6px; } .uc-step h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; } @media (max-width: 1000px) { .uc-steps { grid-template-columns: 1fr 1fr; } } .uc-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .uc-persona { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); } .uc-phead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .uc-picon { font-size: 20px; } .uc-persona h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 15px; } .uc-pnote { margin: 8px 0 0; font-size: 12px; color: var(--accent2); } @media (max-width: 1000px) { .uc-personas { grid-template-columns: 1fr; } } .uc-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .uc-feat { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); } .uc-feat h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; } @media (max-width: 1000px) { .uc-cols3 { grid-template-columns: 1fr; } } .uc-code { background: var(--navy-2); color: #d4e2e3; border: 1px solid #ffffff1f; border-radius: 12px; padding: 12px 16px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-x: auto; } [data-theme="dark"] .uc-code { background: #071827; border-color: #ffffff2e; } .uc-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; } .uc-price { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow); } .uc-price.hl { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 14px 40px rgba(20, 200, 212, .18); } .uc-price h3 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 16px; } .uc-cost { font-size: 24px; font-weight: 800; color: var(--accent2); margin: 6px 0 10px; letter-spacing: -.02em; } .uc-cost span { font-size: 13px; color: var(--dim); font-weight: 400; } .uc-price ul { margin: 0 0 10px; padding-left: 18px; } .uc-price li { margin: 3px 0; font-size: 13px; } @media (max-width: 1000px) { .uc-pricing { grid-template-columns: 1fr; } } details { margin: 8px 0; } details summary { font-weight: 700; color: var(--text); } details p { margin: 6px 0 10px; } .uc-final { text-align: center; padding: 44px 16px 28px; border-top: 1px solid var(--border); margin-top: 18px; } .uc-final h2 { font-size: 24px; color: var(--text); margin-bottom: 6px; } .uc-final p { color: var(--dim); margin: 0 0 18px; } /* ---- auth: login / setup ------------------------------------------------------------------ */ .login-wrap { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 24px 12px; background: var(--loginbg); } .login-card { width: 400px; max-width: 92vw; padding: 0; overflow: hidden; } .login-hero { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 70%, var(--teal) 140%); padding: 30px 28px 24px; text-align: center; } .login-hero img { height: 30px; width: auto; } .login-hero .brand-sub { display: block; color: var(--cyan-bright); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-top: 10px; } .login-body { padding: 22px 28px 28px; } .login-body h2 { margin-top: 0; } .auth-theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 10; background: var(--btnbg); color: var(--text); border: 1px solid var(--btnborder); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); } .auth-theme-toggle:hover { border-color: var(--cyan); } .login-brand { font-size: 20px; margin-bottom: 14px; } .login-brand strong { color: var(--text); } .login-brand span { color: var(--accent2); } .auth-alt { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; font-weight: 700; } .login-body label input:disabled { opacity: .75; cursor: not-allowed; } /* ---- profile page ---------------------------------------------------------------- */ .profile-grid { align-items: start; } .profile-id { display: flex; gap: 18px; align-items: flex-start; } .profile-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--teal)); color: #fff; font-size: 24px; font-weight: 800; letter-spacing: .02em; } .profile-id h2 { margin-bottom: 4px; } .profile-help p { margin: 4px 0 0; } /* ---- billing page ------------------------------------------------------------------ */ .bill-status { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .bill-plan { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0; } .bill-plan .tag { vertical-align: middle; margin-left: 8px; } .bill-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .bill-plans { margin-top: 8px; } .uc-price { /* reused as plan card; form variant needs room for the button */ gap: 4px; } .plan-actions { margin-top: auto; padding-top: 10px; } .plan-actions .btn { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; }