/* ============================================================
Circloud app header — matches NEST / nest-business exactly.
STRUCTURE (use this exact markup on every page):
The `.cr-brand` styles live in assets/brand.css — the same file
the nest/nest-business pages use (gui-common/css + assets/brand.css).
That means the brand block (logo + Circloud + SPIDERMIND) is
visually identical across all Circloud projects.
This file owns only the outer shell (height, padding,
background) and the right-hand nav pills.
============================================================ */
/* SINGLE SOURCE OF TRUTH for the spidermind header.
Mirrors Nest Business Admin's `.header` line-for-line:
height 52px, padding 1px 10px, dark glass bg, blur 20px.
Font stack matches Nest body (`'Segoe UI', system-ui, ...`) so
"Circloud", "SPIDERMIND", the page tag and nav links all render
at exactly the same visual size as the Nest header at the same
px/weight values. Do NOT add 'Inter' first here — Inter renders
~10-15% larger than Segoe UI at the same font-size, which
silently knocks every header element out of sync with Nest.
If you need Inter elsewhere, set it locally on the element, not
on .ch. */
.ch,
header.ch {
box-sizing: border-box;
height: 52px;
padding: 1px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(12, 15, 34, 0.86);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Default: sticky. Studio and Admin use fixed-height layouts where
sticky pins the header to the top of their grid-row container,
which is exactly what we want. The market page overrides this to
position:fixed because its scrolling container behaved badly with
sticky (header would slide off-screen past the hero). */
position: sticky;
top: 0;
z-index: 1000;
/* Allow descendants (Save dropdown panel, progress bar under the
Blueprint PDF button) to escape below the header. The original
overflow:hidden clipped these; the profile dropdown handled the
clip via position:fixed, but the in-header menubar's dropdowns
and the PDF progress bar need them too. */
overflow: visible;
font-family: var(--ui-font-family);
color: #fff;
}
.ch-brand-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
flex: 0 0 auto;
height: 100%;
}
/* Sublabel rendered to the right of the brand block, e.g. "| Admin"
or "| Store". Mirrors the Nest Business Admin header line-for-
line: 1px×24px divider, 8px gap on each side, label at 14px in
the muted text colour. */
.ch-tag-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.10);
margin: 0 8px;
flex: 0 0 auto;
}
.ch-page-tag {
font-family: inherit;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
color: rgba(167, 176, 209, 0.85);
white-space: nowrap;
flex: 0 0 auto;
}
.ch-page-tag-ver {
margin-left: 4px;
font-size: 11px;
font-weight: 400;
color: rgba(167, 176, 209, 0.5);
letter-spacing: 0;
}
.ch-nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1 1 auto;
justify-content: flex-end;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.ch-nav::-webkit-scrollbar { display: none; }
/* Mirror gui-common's `.header-nav .nav-link` exactly (the
canonical Circloud header button used by Nest / business pages).
Any drift here makes the spidermind header look subtly off vs
the rest of the suite. Values from circloud/gui-common/css/base.css
lines 221-246. */
/* All sizes in px (NOT rem). Spidermind sets `html { font-size:
14px }` while Nest uses the browser's 16px default — so any rem
value here would render ~12.5% smaller than the same rule on
Nest's header. Pixel values guarantee parity regardless of the
project's root font size.
No `min-height` — Nest's gui-common nav-link has min-height
29px but the user reported the hover area on our buttons reads
visibly taller than Nest's, so we let the natural padding +
font height (~25px) drive the box. The .ch flex parent's
align-items: center keeps everything vertically aligned in the
52px header. */
.ch-link {
color: var(--text-secondary, #a7b0d1);
text-decoration: none;
padding: 4px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.2s ease;
background: transparent;
border: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
/* `display: inline-flex` above otherwise overrides the UA stylesheet's
`[hidden] { display: none }` (same specificity, author rule wins).
Without this, any `.ch-link[hidden]` button stays visible — which
leaked the login button into the logged-in header. Mirrors the
existing `.nav-link[hidden]` rule. */
.ch-link[hidden] { display: none !important; }
.ch-link:hover {
color: var(--text, #ffffff);
background: rgba(255, 255, 255, 0.1);
}
.ch-link.is-active,
.ch-link[aria-current="page"],
.ch-link.active {
color: var(--text, #ffffff);
background: rgba(139, 156, 255, 0.2);
box-shadow: none;
}
.ch-link svg,
.ch-link .ch-icon {
width: 13px;
height: 13px;
fill: currentColor;
flex: 0 0 auto;
}
@media (max-width: 540px) {
.ch { padding: 0 8px; gap: 6px; }
.ch-link span { display: none; }
.ch-link { padding: 8px; min-width: 29px; min-height: 29px; }
/* Free up horizontal room for the nav buttons:
- Hide the "Circloud / SPIDERMIND" text block; just keep the logo.
- Shrink the logo so it doesn't dominate the bar.
- Drop the page-tag divider too (the page-tag itself is fine). */
header.ch .cr-brand[data-size="sm"] .cr-brand-box { display: none; }
header.ch .cr-brand[data-size="sm"] .cr-brand-logo {
height: 22px;
width: auto;
}
.ch-tag-divider { display: none; }
.ch-page-tag { font-size: 12px; }
.ch-page-tag-ver { display: none; }
}
/* ============================================================
Spidermind-specific PAGE HEADER overrides + supporting bits.
Moved here so EVERY rule that styles the top-bar page header
lives in this one file — no need to hunt across
`css/components/headers.css` (panel/board chrome) when
tweaking the page header.
============================================================ */
/* ── Brand block, pixel-locked to match Nest header exactly ──
Spidermind's `html { font-size: 14px }` warps every rem on the
shared brand.css rules; we restate the dimensions in absolute
pixels HERE so the header renders identically to Nest no
matter the project's root size. */
/* Logo: identical CSS to Nest's brand.css sm rule (height 42px,
width auto). Renders 42×61 in spidermind because our PNG is
1.452:1 vs Nest's 1.500:1 — both PNGs are full-bleed (no
transparent padding), the 2px width difference is purely the
image's aspect ratio, not a CSS issue. No width override here
so the image is never stretched. */
header.ch .cr-brand[data-size="sm"] .cr-brand-logo {
width: auto;
height: 30px;
}
/* "Circloud" wordmark — pixel value matching Nest's 1.05rem at
16px root (= 16.8px). */
header.ch .cr-brand[data-size="sm"] .cr-brand-name {
font-size: 16.8px;
}
/* SPIDERMIND row — at the shared 0.7rem (= 9.8px in spidermind,
11.2px in Nest) the 10-letter row's intrinsic width can exceed
"Circloud", which makes the brand-box stretch wider than the
wordmark and pushes SPIDERMIND past CIRCLOUD visually. Lock
the sub to 9px (and a slight negative letter-spacing) so its
intrinsic width stays narrower than CIRCLOUD; `space-between`
then stretches it across the box's wordmark-driven width. */
header.ch .cr-brand[data-size="sm"] .cr-brand-sub {
font-size: 9px;
letter-spacing: -0.02em;
}
/* User profile chip in the right side of the header (avatar +
name + dropdown trigger). The smaller `.header-avatar` /
`.header-user-name` rules further down win via cascade — the
first definitions are kept for backward compat with any pod
that might rely on the larger size. */
.header-profile {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
position: relative;
}
.header-profile[hidden] {
display: none !important;
}
/* Profile dropdown menu (Sign out, etc.) — used by both market and
studio. Uses `position: fixed` because ancestor `header.ch` has
`overflow: hidden` and `.ch-nav` has `overflow-x: auto` (which
clips the y-axis too). The owner JS positions this each time the
badge is clicked using the badge's bounding rect. */
.market-user-menu {
position: fixed;
top: 0;
left: 0;
min-width: 140px;
background: rgba(20, 24, 36, 0.95);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
padding: 4px;
z-index: 9999;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.market-user-menu[hidden] { display: none; }
.market-user-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
border: none;
border-radius: 6px;
background: none;
color: #e2e8f0;
font-size: 0.78rem;
font-weight: 500;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.market-user-menu-icon {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
}
.market-user-menu-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.header-avatar {
width: 30px;
height: 30px;
border-radius: 8px;
object-fit: cover;
}
.header-user-name {
font-size: 0.78rem;
font-weight: 500;
color: #a7b0d1;
}
.header-notifications {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link[hidden] { display: none !important; }
button.nav-link { cursor: pointer; background: none; border: none; font-family: inherit; }
/* ── App menubar relocated INTO the header ──
Studio merges the action menubar (#appMenubar with New / Open /
My Library / Pin# / Grid / etc.) into to save
a full row of vertical space. The menubar is ABSOLUTELY positioned
so its left/right edges line up exactly with the diagram-box (the
central column inside .content-grid). Brand + page-tag flow
naturally on the left of the header; the .ch-nav (Store, badge,
profile) flows on the right; the menubar floats above the diagram
between them, vertically centred via top:50% + translateY(-50%).
The math:
left = content-grid padding-left (12)
+ input-column width (--panel-width)
+ panel resizer (--splitter-width)
right = output-column padding-right (12)
+ side-panel-stack width (--shape-panel-width)
+ shape-panel resizer (--splitter-width)
Changing those CSS variables anywhere reshapes the menubar in
lockstep with the diagram box. */
.ch > .app-menubar {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(12px + var(--panel-width) + var(--splitter-width));
right: calc(12px + var(--shape-panel-width) + var(--splitter-width));
width: auto;
min-width: 0;
height: 24px;
border-top: 0;
border-bottom: 0;
background: transparent;
box-shadow: none;
padding: 0;
overflow: visible;
}
.ch > .app-menubar.window-menubar {
width: auto;
min-width: 0;
}
/* Legacy compat — pages that still use the bare `` (no
`.ch` class) get the same shell treatment. Most spidermind
pages have moved to ``; this keeps any
leftover ones from drifting. */
header:not(.app-header) {
padding: 1px 10px;
background: rgba(12, 15, 34, 0.86);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
height: 52px;
}
.header-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.header-user {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
/* ── Premium tag (subscription badge) ──
Mirrors the Subscribe button shape exactly: same padding,
min-height, border-radius, font weight + size, uppercase
transform, and a leading icon (crown) on the left like the
subscribe button has its star. They render as siblings. */
.header-token-badge[hidden] { display: none !important; }
.header-token-badge {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0 8px;
padding: 4px 14px;
min-height: 24px;
box-sizing: border-box;
/* Smaller radius than Subscribe (6px) because the Premium badge
is narrower (shorter text) — the same 6px corner sweep took up
a larger fraction of its width and read as "more rounded".
3px keeps the corners visibly soft but the sides obviously
straight, matching Subscribe's perceived shape. */
border-radius: 3px;
font-family: var(--ui-font-family);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fef3c7;
background: linear-gradient(165deg, rgba(68, 34, 10, 0.95), rgba(161, 98, 7, 0.88));
border: 1px solid rgba(251, 191, 36, 0.55);
box-shadow: inset 0 0 6px rgba(249, 115, 22, 0.28);
white-space: nowrap;
cursor: pointer;
transition: all 0.15s ease;
}
/* Crown icon in front of the label — same currentColor mask pattern
used by the subscribe button's star. */
.header-token-badge::before {
content: '';
width: 12px;
height: 12px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.header-token-badge:hover {
filter: brightness(1.1);
}
/* ── Subscribe button: glossy purple+indigo metal with sheen + glow ── */
.header-subscribe-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
/* Side gap so the button doesn't crowd adjacent header items */
margin: 0 8px;
padding: 4px 14px;
min-height: 24px;
border-radius: 6px;
font-family: var(--ui-font-family);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
background:
linear-gradient(135deg,
#f0abfc 0%,
#c026d3 20%,
#f0abfc 42%,
#7c3aed 62%,
#d8b4fe 82%,
#4c1d95 100%);
background-size: 220% 220%;
border: 1px solid rgba(232, 121, 249, 0.55);
cursor: pointer;
white-space: nowrap;
text-shadow:
0 1px 1px rgba(40, 5, 50, 0.95),
0 0 6px rgba(40, 5, 50, 0.55),
0 0 1px rgba(40, 5, 50, 0.9);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 1px rgba(30, 27, 75, 0.45),
0 0 0 1px rgba(99, 102, 241, 0.35),
0 0 14px rgba(139, 92, 246, 0.55),
0 2px 6px rgba(0, 0, 0, 0.35);
overflow: hidden;
isolation: isolate;
animation: subscribe-shine 9s linear infinite, subscribe-glow 6s ease-in-out infinite;
transition: transform 0.15s ease, filter 0.15s ease;
}
.header-subscribe-btn::before {
content: '';
width: 12px;
height: 12px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.header-subscribe-btn::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 45%;
height: 200%;
background: linear-gradient(
100deg,
rgba(244, 114, 182, 0) 0%,
rgba(244, 114, 182, 0.18) 45%,
rgba(253, 224, 247, 0.32) 50%,
rgba(244, 114, 182, 0.18) 55%,
rgba(244, 114, 182, 0) 100%
);
transform: skewX(-20deg);
pointer-events: none;
z-index: 0;
animation: subscribe-sheen 9s ease-in-out infinite;
mix-blend-mode: screen;
opacity: 0.85;
}
.header-subscribe-btn > * {
position: relative;
z-index: 1;
}
.header-subscribe-btn:hover {
filter: brightness(1.08) saturate(1.05);
}
.header-subscribe-btn:active {
transform: translateY(1px);
filter: brightness(0.95);
}
@keyframes subscribe-shine {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes subscribe-glow {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 1px rgba(40, 5, 50, 0.45),
0 0 0 1px rgba(192, 38, 211, 0.30),
0 0 10px rgba(192, 38, 211, 0.40),
0 2px 6px rgba(0, 0, 0, 0.35);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 1px rgba(40, 5, 50, 0.5),
0 0 0 1px rgba(232, 121, 249, 0.50),
0 0 22px rgba(217, 70, 239, 0.80),
0 2px 10px rgba(124, 58, 237, 0.55);
}
}
@keyframes subscribe-sheen {
0% { left: -60%; }
60% { left: 130%; }
100% { left: 130%; }
}
/* Subscription badge tier variants (driven by JS class swap on
`.header-token-badge` — `is-trial`, `is-one-week`,
`is-one-month`, `is-one-year`). */
.header-token-badge.is-trial {
color: #bfdbfe;
background: linear-gradient(165deg, rgba(30, 64, 175, 0.34), rgba(29, 78, 216, 0.42));
border-color: rgba(147, 197, 253, 0.55);
box-shadow: inset 0 0 6px rgba(30, 64, 175, 0.25);
}
.header-token-badge.is-one-week,
.header-token-badge.is-one-month,
.header-token-badge.is-one-year {
color: #e7c46a;
background: linear-gradient(135deg, rgba(44, 26, 6, 0.98), rgba(138, 86, 16, 0.98), rgba(64, 38, 8, 0.98));
background-size: 160% 160%;
animation: gold-shine 3.6s ease-in-out infinite alternate;
border-color: rgba(172, 118, 30, 0.9);
box-shadow: inset 0 0 6px rgba(36, 22, 6, 0.45), 0 0 8px rgba(140, 92, 18, 0.25);
}
@keyframes gold-shine {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* Smaller compact avatar/name variant — currently overrides the
30px round above via cascade for studio's tighter header. */
.header-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(15, 23, 42, 0.7);
}
.header-user-name {
font-size: 0.54rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #e2e8f0;
}
