/* * join.css — panel/saas/join.php public signup page * Dark-terminal theme (concept B) with light mode variant. * Default = light (logo has dark text). Toggle adds .j-dark on . * Scoped under .j-* classes. */ /* ---------- theme tokens ---------- */ .j-page { /* dark palette (default) */ --j-bg: #0b0f14; --j-panel: #11161d; --j-panel-2: #161d26; --j-line: #232c38; --j-line-hover: #334155; --j-text: #e6edf3; --j-dim: #8b98a9; --j-label: #b9c4d4; --j-placeholder: #55637a; --j-accent: #a3e635; --j-accent-text: #0b0f14; --j-accent-soft-bg: rgba(163, 230, 53, .07); --j-accent-soft-border: rgba(163, 230, 53, .18); --j-focus-ring: rgba(163, 230, 53, .12); } .j-page.j-light { /* light palette */ --j-bg: #f4f7f4; --j-panel: #ffffff; --j-panel-2: #eef3ee; --j-line: #dbe3da; --j-line-hover: #b7c5b5; --j-text: #17211a; --j-dim: #52645a; --j-label: #1f2d24; --j-placeholder: #93a394; --j-accent: #4c8c1c; --j-accent-text: #ffffff; --j-accent-soft-bg: rgba(76, 140, 28, .08); --j-accent-soft-border: rgba(76, 140, 28, .25); --j-focus-ring: rgba(76, 140, 28, .14); } .j-page { margin: 0; font-family: 'Space Grotesk', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: radial-gradient(800px 400px at 85% -10%, var(--j-accent-soft-bg), transparent), var(--j-bg); color: var(--j-text); min-height: 100vh; transition: background .25s ease, color .25s ease; } /* ---------- top bar ---------- */ .j-topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 40px; border-bottom: 1px solid var(--j-line); transition: border-color .25s ease; } .j-logo { height: 44px; } .j-status { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--j-dim); } .j-status b { color: var(--j-accent); font-weight: 500; } /* theme toggle */ .j-theme-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 22px; font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--j-dim); background: transparent; border: 1px solid var(--j-line); border-radius: 6px; padding: 6px 11px; cursor: pointer; transition: all .15s; } .j-theme-toggle:hover { border-color: var(--j-accent); color: var(--j-accent); } .j-theme-toggle:focus-visible { outline: 2px solid var(--j-accent); outline-offset: 2px; } /* ---------- layout ---------- */ .j-wrap { max-width: 1100px; margin: 56px auto; padding: 0 24px; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; } /* ---------- hero ---------- */ .j-tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--j-accent); border: 1px solid var(--j-accent-soft-border); border-radius: 4px; padding: 4px 10px; margin-bottom: 22px; } .j-hero h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 18px; } .j-hero h1 em { font-style: normal; color: var(--j-accent); } .j-hero p { color: var(--j-dim); font-size: .95rem; margin-bottom: 36px; } .j-metrics { border-top: 1px solid var(--j-line); } .j-metric { padding: 14px 0; border-bottom: 1px solid var(--j-line); display: flex; align-items: baseline; gap: 14px; } .j-metric b { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 500; min-width: 90px; } .j-metric span { color: var(--j-dim); font-size: .85rem; } /* ---------- form panel ---------- */ .j-panel { background: var(--j-panel); border: 1px solid var(--j-line); border-radius: 14px; padding: 40px 38px; transition: background .25s ease, border-color .25s ease; } .j-panel h2 { font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; } .j-sub { color: var(--j-dim); font-size: .88rem; margin-bottom: 28px; } .j-note { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--j-accent); background: var(--j-accent-soft-bg); border: 1px solid var(--j-accent-soft-border); border-radius: 6px; padding: 9px 13px; margin-bottom: 26px; } /* fields (dfe-rendered + native) — compact, consistent */ .j-panel .form-group { margin-bottom: 15px; } .j-panel label { display: block; font-size: .8rem; font-weight: 500; color: var(--j-label); margin-bottom: 5px !important; } .j-panel label small.red { font-size: .68rem; color: var(--j-dim) !important; font-weight: 400; } /* neutralize bootstrap input-sm/input-group inflation from dfe() */ .j-panel .input-group, .j-panel .input-group-prepend, .j-panel .input-group-text { background: transparent; border: none; padding: 0; width: auto; display: contents; } .j-panel input:not([type="radio"]):not([type="checkbox"]), .j-panel textarea, .j-panel select.j-channel { width: 100%; background: var(--j-bg); border: 1px solid var(--j-line); border-radius: 7px; padding: 7px 11px; color: var(--j-text); font-family: inherit; font-size: .88rem; line-height: 1.4; height: auto; min-height: 0; box-shadow: none; transition: border-color .15s, box-shadow .15s, background .25s ease; } .j-panel textarea { min-height: 64px; resize: vertical; } .j-panel ::placeholder { color: var(--j-placeholder); } .j-panel input:hover, .j-panel textarea:hover { border-color: var(--j-line-hover); } .j-panel input:focus, .j-panel textarea:focus, .j-panel select.j-channel:focus { outline: none; border-color: var(--j-accent); box-shadow: 0 0 0 2px var(--j-focus-ring); } /* contact channel row: dropdown + id field side by side */ .j-contact-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; } .j-contact-row .form-group { margin-bottom: 15px; } select.j-channel { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b98a9' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* plan chips */ .j-chips .radio, .j-chips .form-check { position: relative; display: inline-flex; margin: 0 8px 8px 0; } .j-chips input[type="radio"], .j-chips input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; } .j-chips label { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: .75rem; padding: 6px 13px; border: 1px solid var(--j-line); border-radius: 6px; color: var(--j-dim); background: var(--j-panel-2); cursor: pointer; transition: all .14s; min-height: 0; height: auto; line-height: 1.5; margin: 0 !important; } .j-chips .form-group { margin-bottom: 15px; } .j-chips label:hover { border-color: var(--j-accent); color: var(--j-accent); } .j-chips input:checked + label { background: var(--j-accent); border-color: var(--j-accent); color: var(--j-accent-text); font-weight: 500; } .j-chips input:focus-visible + label { outline: 2px solid var(--j-accent); outline-offset: 2px; } /* two-column rows (bootstrap cols present in markup) */ .j-panel .row { margin-left: -8px; margin-right: -8px; } .j-panel .row > div { padding-left: 8px; padding-right: 8px; } /* submit */ .j-submit { width: 100%; margin-top: 4px; background: var(--j-accent); color: var(--j-accent-text); border: none; font-family: inherit; font-weight: 700; font-size: .9rem; padding: 10px 18px; border-radius: 7px; cursor: pointer; transition: filter .15s, transform .1s; } .j-submit:hover { filter: brightness(1.08); } .j-submit:active { transform: scale(.99); } .j-submit:focus-visible { outline: 3px solid var(--j-accent); outline-offset: 3px; } .j-formstatus { margin-top: 14px; } .j-formstatus .alert { background: var(--j-panel-2); border-color: var(--j-line); color: var(--j-text); } /* ---------- contacts ---------- */ .j-contact { margin-top: 22px; border-top: 1px solid var(--j-line); padding-top: 20px; text-align: center; } .j-contact h6 { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--j-dim); margin-bottom: 12px; font-weight: 400; } .j-contact-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; } .j-contact-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--j-label); text-decoration: none; font-size: .85rem; padding: 6px 10px; border-radius: 8px; transition: all .15s; } .j-contact-links a:hover { color: var(--j-accent); background: var(--j-accent-soft-bg); } /* ---------- responsive ---------- */ @media (max-width: 900px) { .j-wrap { grid-template-columns: 1fr; gap: 24px; margin: 24px auto 44px; padding: 0 16px; } .j-topbar { padding: 12px 16px; flex-wrap: wrap; } .j-status { display: none; } .j-logo { height: 34px; } .j-theme-toggle { margin-right: 0; padding: 5px 9px; } .j-tag { display: none; } .j-hero h1 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 8px; } .j-hero h1 br { display: none; } .j-hero p { font-size: .84rem; margin-bottom: 0; } .j-metrics { display: none; } .j-panel { padding: 22px 18px 24px; border-radius: 12px; } .j-panel h2 { font-size: 1.15rem; } .j-sub { font-size: .8rem; margin-bottom: 16px; } .j-note { font-size: .68rem; padding: 8px 11px; margin-bottom: 18px; } .j-panel .form-group { margin-bottom: 14px; } .j-panel label { font-size: .78rem; margin-bottom: 5px; } .j-panel input:not([type="radio"]):not([type="checkbox"]), .j-panel textarea, select.j-channel { font-size: 16px; /* prevents iOS zoom-on-focus */ } /* contact row stacks on small screens */ .j-contact-row { grid-template-columns: 1fr; gap: 0; } .j-chips label { padding: 10px 16px; font-size: .8rem; min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; } } /* ---------- wizard steps (step 1: company · step 2: you) ---------- */ .j-stepsbar { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; } .j-stepseg { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .08em; color: var(--j-dim); transition: color .25s ease; } .j-stepseg b { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--j-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: .72rem; transition: all .25s ease; } .j-stepseg.j-on { color: var(--j-text); } .j-stepseg.j-on b { border-color: var(--j-accent); color: var(--j-accent); background: var(--j-accent-soft-bg); } .j-stepsline { flex: 1; height: 1px; background: var(--j-line); position: relative; overflow: hidden; } .j-stepsline i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--j-accent); transition: width .35s ease; } .j-stepsline i.j-on { width: 100%; } /* step enter animation */ .j-step.ng-hide-remove { animation: j-stepin .28s ease; } @keyframes j-stepin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* step 2 nav row: back + submit */ .j-stepnav { display: flex; align-items: stretch; gap: 10px; margin-top: 4px; } .j-stepnav .j-submit { flex: 1; } .j-back { background: transparent; border: 1px solid var(--j-line); color: var(--j-dim); font-family: inherit; font-size: .8rem; font-weight: 500; padding: 13px 20px; border-radius: 10px; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .j-back:hover { border-color: var(--j-line-hover); color: var(--j-text); } .j-back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--j-focus-ring); } @media (max-width: 640px) { .j-stepseg span { display: none; } }