/* ========================================================= account.css — personalized account (ABM) pages Loads AFTER ../styles.css. Reuses its tokens & classes. Per-company tint is set on via --brand / --brand-soft / --brand-line. ========================================================= */ body { /* fallbacks so the page is safe even without a per-company tint */ --brand: var(--accent); --brand-soft: var(--accent-soft); --brand-line: var(--accent-line); /* neutral "identified" tone — distinct from any brand hue */ --idle: oklch(0.70 0.04 248); } /* ---- Account nav (slim) ---- */ .acct-nav .nav-mid { flex: 1; display: flex; justify-content: center; } .acct-tag { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: oklch(1 0 0 / 0.02); } .acct-tag img { width: 15px; height: 15px; display: block; } /* ---- Hero ---- */ .acct-hero { position: relative; padding-top: 156px; padding-bottom: 80px; overflow: hidden; } .acct-hero .bg-grid { z-index: 0; } .acct-hero .container { position: relative; z-index: 1; } .acct-hero::before { /* brand wash, very subtle */ content: ""; position: absolute; z-index: 0; top: -160px; right: -120px; width: 720px; height: 720px; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--brand) 26%, transparent), transparent 62%); opacity: 0.5; pointer-events: none; filter: blur(8px); } .acct-hero-grid { display: grid; grid-template-columns: 1.02fr 1.1fr; gap: 56px; align-items: center; } .acct-badge { display: inline-flex; align-items: center; gap: 11px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--brand-line); background: color-mix(in oklch, var(--brand) 9%, transparent); margin-bottom: 26px; } .acct-badge .logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: oklch(0.13 0.006 260 / 0.7); border: 1px solid var(--brand-line); } .acct-badge .logo img { width: 20px; height: 20px; display: block; } .acct-badge .t { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); } .acct-badge .t b { color: var(--text); font-weight: 500; } .acct-hero h1 { margin: 0 0 22px; } .acct-hero h1 .brand-em { color: var(--brand); } .acct-hero .lead { margin-bottom: 34px; } .acct-hero .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ---- Committee constellation map ---- */ .cmap-wrap { position: relative; border: 1px solid var(--hairline); border-radius: var(--r-xl); background: radial-gradient(ellipse at 50% 45%, color-mix(in oklch, var(--brand) 12%, transparent), transparent 60%), linear-gradient(180deg, oklch(0.19 0.010 260 / 0.6), oklch(0.16 0.008 260 / 0.4)); padding: 22px; } .cmap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cmap-head .k { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .cmap-head .v { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--brand); padding: 3px 9px; border-radius: 999px; background: color-mix(in oklch, var(--brand) 14%, transparent); border: 1px solid var(--brand-line); } .cmap { position: relative; width: 100%; aspect-ratio: 1 / 0.82; } .cmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .cmap-svg line { stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; } .cmap-svg line.lit { stroke: var(--brand-line); } .cm-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 38%, oklch(0.20 0.012 260), oklch(0.14 0.008 260)); border: 1px solid var(--brand-line); box-shadow: 0 0 0 6px color-mix(in oklch, var(--brand) 8%, transparent), 0 18px 50px oklch(0 0 0 / 0.5); z-index: 2; } .cm-hub .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); } .cm-hub .nm { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 500; color: var(--text); margin-top: 3px; line-height: 1.1; letter-spacing: -0.01em; } .cm-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; width: 116px; text-align: center; z-index: 2; } .cm-node .dot { width: 16px; height: 16px; border-radius: 50%; background: oklch(0.30 0.012 260); border: 1px solid var(--hairline-2); position: relative; } .cm-node .role { font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.2; color: var(--text-mute); font-weight: 500; } .cm-node.is-engaged .dot { background: var(--brand); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 16%, transparent), 0 0 14px var(--brand); } .cm-node.is-engaged .role { color: var(--text); } .cm-node.is-identified .dot { background: var(--idle); border-color: transparent; box-shadow: 0 0 10px color-mix(in oklch, var(--idle) 60%, transparent); } .cm-node.is-gap .dot { background: transparent; border: 1px dashed var(--hairline-2); } .cm-node.is-gap .role { color: var(--text-dim); } @media (prefers-reduced-motion: no-preference) { .cm-node.is-engaged .dot { animation: cmPulse 2.8s ease-in-out infinite; } } @keyframes cmPulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 16%, transparent), 0 0 10px var(--brand); } 50% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--brand) 6%, transparent), 0 0 20px var(--brand); } } .cmap-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.04em; } .cmap-legend .lg { display: inline-flex; align-items: center; gap: 7px; } .cmap-legend .lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .cmap-legend .lg.engaged i { background: var(--brand); } .cmap-legend .lg.identified i { background: var(--idle); } .cmap-legend .lg.gap i { background: transparent; border: 1px dashed var(--hairline-2); } /* ---- Persona cards ---- */ .persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .persona-card { background: var(--bg-2); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: background .3s ease; } .persona-card:hover { background: var(--surface); } .persona-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .persona-card .pc-role { font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; } .persona-card .pc-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 5px; } .persona-card .pc-score { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--brand); flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklch, var(--brand) 12%, transparent); border: 1px solid var(--brand-line); } .persona-card .pc-weighs { font-size: 13.5px; color: var(--text-mute); line-height: 1.5; flex: 1; } .persona-card .pc-status { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .persona-card .pc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); } .persona-card.is-engaged .pc-status { color: var(--text-mute); } .persona-card.is-engaged .pc-status::before { background: var(--brand); box-shadow: 0 0 8px var(--brand); } .persona-card.is-identified .pc-status::before { background: var(--idle); box-shadow: 0 0 8px color-mix(in oklch, var(--idle) 60%, transparent); } .persona-card.is-gap .pc-status::before { background: transparent; border: 1px dashed var(--hairline-2); } .persona-card.is-gap .pc-score { color: var(--text-dim); background: oklch(1 0 0 / 0.03); border-color: var(--hairline); } /* ---- Metric strip ---- */ .metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; } .metric-strip .metric { background: oklch(0.19 0.010 260 / 0.45); padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; } .metric-strip .metric .num { font-family: 'Inter Tight', sans-serif; font-size: 38px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: var(--text); } .metric-strip .metric .num b { color: var(--brand); font-weight: 500; } .metric-strip .metric .lab { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } .illus-note { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 8px; } .illus-note::before { content: "Illustrative"; color: var(--brand); border: 1px solid var(--brand-line); border-radius: 4px; padding: 2px 7px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; } /* ---- CTA band ---- */ .acct-cta { position: relative; overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--r-xl); background: radial-gradient(ellipse at 50% 0%, color-mix(in oklch, var(--brand) 16%, transparent), transparent 60%), var(--bg-2); padding: 64px 40px; text-align: center; } .acct-cta h2 { margin: 0 auto 16px; max-width: 18ch; } .acct-cta .lead { margin: 0 auto 30px; max-width: 60ch; } /* ---- Slim footer ---- */ .acct-foot { border-top: 1px solid var(--hairline); margin-top: 90px; padding: 34px 0; } .acct-foot .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .acct-foot .row .back { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-mute); text-decoration: none; } .acct-foot .row .back:hover { color: var(--text); } .acct-foot .row .spacer { margin-left: auto; } .acct-foot .disclaimer { margin-top: 14px; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; max-width: 78ch; } /* ---- Section rhythm ---- */ .acct-sec { padding: 60px 0; } .acct-sec .section-head { margin-bottom: 40px; } /* ---- Responsive ---- */ @media (max-width: 1024px) { .acct-hero-grid { grid-template-columns: 1fr; gap: 44px; } .persona-grid { grid-template-columns: repeat(2, 1fr); } .metric-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .persona-grid, .metric-strip { grid-template-columns: 1fr; } .cm-node { width: 92px; } .cm-node .role { font-size: 10.5px; } }