/* Auth-gated nav items — server-side flag on eliminates the flash of public links before the JS auth check runs. */ body[data-authed='1'] .nav-link-public, body[data-authed='1'] .mobile-nav-public { display: none; } /* Theme layer - colors, backgrounds, shadows only */ @layer theme { nav.navbar { background: light-dark(oklch(98% 0.005 250 / 0.7), oklch(12% 0.01 260 / 0.7)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-block-end: 1px solid transparent; transition: all 0.3s ease; &.scrolled { border-block-end-color: light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.07)); box-shadow: 0 1px 3px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.15)); } .nav-brand-text { font-family: 'Orbitron', 'Outfit', system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .nav-brand-sub { display: block; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: none; } .nav-logo { height: 56px; width: auto; } html[data-theme='light'] & .nav-logo { filter: invert(1); } .nav-links a { color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; transition: color 0.2s; &:hover { color: var(--text-primary); } &::after { background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm)); box-shadow: 0 0 8px oklch(from var(--accent-primary) l c h / 0.4); transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease-out; } } .nav-cta { padding: 8px 20px; border-radius: 100px; font-size: 0.85rem; font-weight: 600; background: linear-gradient( 135deg, light-dark(oklch(52% 0.26 20), oklch(62% 0.24 20)), light-dark(oklch(46% 0.28 5), oklch(56% 0.26 5)) ); color: white; transition: all 0.25s ease; border: none; &:hover { transform: translateY(-1px); box-shadow: 0 4px 16px light-dark(oklch(52% 0.26 20/0.3), oklch(60% 0.24 20/0.35)); } } .nav-actions .theme-toggle-btn { border-color: oklch(from var(--glass-tint) l c h / 0.08); background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04)); color: var(--text-primary); &:hover { border-color: light-dark( oklch(from var(--accent-primary) l c h / 0.3), oklch(from var(--accent-primary) l c h / 0.4) ); background: light-dark( oklch(from var(--accent-primary) l c h / 0.06), oklch(from var(--accent-primary) l c h / 0.1) ); color: var(--accent-primary); } } .profile-button .profile-avatar { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; box-shadow: 0 2px 10px light-dark( oklch(from var(--accent-primary) l c h / 0.2), oklch(from var(--accent-primary) l c h / 0.3) ); } #profile-menu { background: light-dark(oklch(100% 0 0 / 0.95), oklch(15% 0.02 270 / 0.95)); border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08)); backdrop-filter: blur(20px); box-shadow: 0 12px 40px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.5)); .profile-menu-header { border-block-end-color: oklch(from var(--glass-tint) l c h / 0.06); } .profile-menu-name { color: light-dark(oklch(15% 0 0), oklch(95% 0 0)); } .profile-menu-email { color: light-dark(oklch(45% 0 0), oklch(65% 0 0)); } .profile-menu-item { color: light-dark(oklch(35% 0 0), oklch(75% 0 0)); &:hover { background: light-dark( oklch(from var(--accent-primary) l c h / 0.06), oklch(from var(--accent-primary) l c h / 0.1) ); color: light-dark(oklch(15% 0 0), oklch(95% 0 0)); } &:focus-visible { outline-color: var(--accent-primary); } } .profile-menu-reset { background: none; border: none; font: inherit; cursor: pointer; text-align: start; inline-size: 100%; &:hover { background: light-dark( oklch(from var(--accent-warm) l c h / 0.06), oklch(from var(--accent-warm) l c h / 0.1) ); color: light-dark(oklch(55% 0.2 25), var(--accent-warm)); } } /* Flat theme-toggle menu item: reset the native button chrome (its structural layout lives in @layer components). Mirrors .profile-menu-reset above. */ .profile-menu-theme { background: none; border: none; } .profile-menu-logout:hover { background: light-dark( oklch(from var(--accent-warm) l c h / 0.06), oklch(from var(--accent-warm) l c h / 0.1) ); color: light-dark(oklch(55% 0.2 25), var(--accent-warm)); } } } nav.navbar { .hamburger { border-color: oklch(100% 0 0 / 0.08); color: var(--text-primary); &:hover { border-color: oklch(from var(--accent-primary) l c h / 0.4); background: oklch(from var(--accent-primary) l c h / 0.1); } span { background-color: var(--text-primary); } } #nav-menu { background: var(--surface-elevated); border-color: var(--border-color); box-shadow: var(--shadow-lg); .close-button { color: var(--text-primary); } a { color: var(--text-secondary); &:hover { background: var(--surface-base); color: var(--text-primary); } } } .mobile-profile-info { .mobile-profile-email { color: var(--text-secondary); } } .cta-button.mobile-reset { display: flex; inline-size: fit-content; margin-inline: auto; margin-block-end: var(--space-xs); background: light-dark( oklch(from var(--accent-warm) l c h / 0.1), oklch(from var(--accent-warm) l c h / 0.15) ); color: light-dark(oklch(55% 0.2 25), var(--accent-warm)); border: none; cursor: pointer; font: inherit; } .cta-button.mobile-logout { display: flex; inline-size: fit-content; margin-inline: auto; } } } /* Components layer - layout, sizing, spacing only */ @layer components { nav.navbar { display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(1rem, 5vw, 4rem); position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .nav-links { display: flex; justify-content: space-evenly; align-items: center; gap: var(--space-2xl); #landing-links { display: contents; } a { position: relative; padding: var(--space-xs) var(--space-sm); letter-spacing: 0.02em; transition: all 0.2s ease-out; &::after { content: ''; position: absolute; inset-block-end: -2px; inset-inline-start: 0; inline-size: 100%; block-size: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: left; } &:hover::after { transform: scaleX(1); } } } .nav-actions { display: flex; align-items: center; gap: var(--space-md); .theme-toggle-btn { padding: var(--space-xs) var(--space-md); border: 1px solid; border-radius: 100px; font-weight: var(--fw-medium); transition: all 0.25s ease-out; } } .profile-button { display: flex; align-items: center; gap: var(--space-xs); padding: 0; background: transparent; border: none; color: inherit; cursor: pointer; anchor-name: --profile-btn; &:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .profile-avatar { display: flex; align-items: center; justify-content: center; inline-size: var(--space-2xl); block-size: var(--space-2xl); border-radius: 50%; font-size: var(--fs-small); font-weight: var(--fw-semibold); } .profile-name { max-inline-size: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); } .profile-chevron { transition: transform var(--time-fast) var(--ease-standard); } &:has(+ #profile-menu:popover-open) .profile-chevron { transform: rotate(180deg); } } #profile-menu { position-anchor: --profile-btn; position: fixed; inset: unset; inset-block-start: anchor(bottom); inset-inline-end: anchor(right); margin-block-start: var(--space-sm); padding: var(--space-md); border-radius: 12px; min-inline-size: 220px; /* Animation */ opacity: 0; scale: 0.95; transform-origin: top right; transition: opacity var(--time-fast) var(--ease-out), scale var(--time-fast) var(--ease-out), display var(--time-fast) allow-discrete; &:popover-open { opacity: 1; scale: 1; @starting-style { opacity: 0; scale: 0.95; } } .profile-menu-header { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-sm) var(--space-md); border-block-end: 1px solid; } .profile-menu-name { font-weight: var(--fw-semibold); } .profile-menu-email { font-size: var(--fs-small); } .profile-menu-item { display: block; padding: var(--space-sm) var(--space-md); margin-block-start: var(--space-xs); border-radius: 8px; text-decoration: none; transition: all 0.2s ease-out; &:focus-visible { outline: 2px solid; outline-offset: -2px; } } } .mobile-profile-info { display: flex; flex-direction: column; gap: var(--space-3xs); text-align: center; margin-block-end: var(--space-md); .mobile-profile-name { font-weight: var(--fw-semibold); } .mobile-profile-email { font-size: var(--fs-small); } } .nav-logo { object-fit: contain; } .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xs); padding: var(--space-xs); background: transparent; border: 1px solid; border-radius: 10px; cursor: pointer; anchor-name: --hamburger; inline-size: var(--space-3xl); block-size: var(--space-3xl); span { display: block; inline-size: var(--space-2xl); block-size: var(--space-2xs); transition: transform var(--time-fast) var(--ease-standard), opacity var(--time-fast) var(--ease-standard); transform-origin: center; } } /* Animate hamburger to X when popover is open */ &:has(#nav-menu:popover-open) .hamburger { span:nth-child(1) { transform: translateY(calc(var(--space-xs) + var(--space-2xs))) rotate(45deg); } span:nth-child(2) { opacity: 0; } span:nth-child(3) { transform: translateY(calc(-1 * (var(--space-xs) + var(--space-2xs)))) rotate(-45deg); } } #nav-menu { position-anchor: --hamburger; position: fixed; inset: unset; inset-block-start: 0; inset-inline-end: 0; margin: 0; padding: var(--wire-gap); border: var(--wire-border); border-radius: 0; block-size: 100cqb; inline-size: 70cqi; /* Slide animation */ translate: 100% 0; opacity: 0; transition: translate var(--time-medium) var(--ease-out), opacity var(--time-medium) var(--ease-out), display var(--time-medium) allow-discrete; .close-button { position: absolute; inset-block-start: var(--space-2xl); inset-inline-end: var(--wire-gap); display: flex; justify-content: center; align-items: center; background: transparent; border: var(--wire-border); border-radius: var(--wire-radius); cursor: pointer; inline-size: var(--space-3xl); block-size: var(--space-3xl); font-size: var(--fs-large); line-height: 1; } .popover-nav-links { display: flex; flex-direction: column; gap: var(--wire-gap); align-items: center; padding-block-start: calc(var(--space-3xl) + var(--space-2xl)); .theme-toggle-btn { margin-block: var(--space-md); } a { padding: var(--space-md) var(--space-lg); border-radius: var(--wire-radius); } } &:popover-open { display: flex; flex-direction: column; translate: 0 0; opacity: 1; @starting-style { translate: 100% 0; opacity: 0; } } } /* Wide container: show nav links, hide hamburger */ @container root (inline-size > 600px) { .nav-links, .nav-actions { display: flex; } .hamburger, #nav-menu { display: none; } } /* Section labels, link icons, and the profile role exist for the sidebar rail only */ .nav-section-label, .nav-links .nav-ico, .profile-button .profile-role { display: none; } /* Theme toggle as a profile-menu entry (used in rail mode; the standalone button stays for the public top bar). Explicitly flat: a plain menu item, never the circular top-bar button. */ #profile-menu .profile-menu-theme { display: block; border-radius: 8px; padding: var(--space-sm) var(--space-md); font: inherit; cursor: pointer; text-align: start; inline-size: 100%; white-space: nowrap; } /* Narrow container: hide nav links, show hamburger */ @container root (inline-size <= 600px) { .nav-links, .nav-actions { display: none; } /* !important overrides the inline display:flex that checkAuth sets on #workspace-switcher when revealing it — inline styles outrank layered rules, so a plain display:none would lose and the switcher would still show on mobile. */ .nav-workspace { display: none !important; } .hamburger { display: flex; } } } } /* ============================================================ App sidebar — on authenticated app pages the same navbar markup becomes a fixed left rail. Scoped with :has(.page) so marketing routes (landing, contact, privacy, how-evaluation- works) keep the top bar even for signed-in users — their hero sections budget for a 72px top bar, not a rail. Narrow viewports keep the hamburger flow. ============================================================ */ @layer components { @container root (inline-size > 600px) { body[data-authed='1']:has(#main-content > .page) nav.navbar { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: var(--space-lg); inset-block: 0; inset-inline: 0 auto; inline-size: 232px; padding: var(--space-md) var(--space-sm); overflow-y: auto; .nav-brand { padding-inline: var(--space-xs); } .nav-links { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: var(--space-3xs); a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--wire-radius); transition: background 0.2s, color 0.2s; /* The top bar's animated underline doesn't fit a rail */ &::after { display: none; } } .nav-ico { display: inline-block; flex-shrink: 0; } } .nav-actions { flex-direction: column; align-items: stretch; margin-block-start: auto; padding-block-start: var(--space-sm); gap: var(--space-sm); } /* Profile anchor: avatar + (name over role) + chevron */ .nav-actions > .profile-button { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'avatar name chevron' 'avatar role chevron'; column-gap: var(--space-sm); align-items: center; text-align: start; .profile-avatar { grid-area: avatar; } .profile-name { grid-area: name; /* min-inline-size:0 lets the grid item shrink so the inherited ellipsis truncation applies instead of a long name overflowing the 232px rail. */ min-inline-size: 0; max-inline-size: none; } .profile-role { grid-area: role; display: block; font-size: var(--fs-xsmall); line-height: 1.3; } .profile-chevron { grid-area: chevron; } } /* Section labels group the rail's links */ .nav-section-label { display: block; margin-block-start: var(--space-md); padding: 0 var(--space-sm) var(--space-3xs); font-size: var(--fs-xsmall); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; } /* Workspace switcher: boxed control under the brand, scoping everything below it */ .nav-workspace { margin-block-start: var(--space-sm); .profile-button { inline-size: 100%; justify-content: space-between; padding: var(--space-xs) var(--space-sm); border: 1px solid; border-radius: var(--wire-radius); } } /* The profile button sits at the rail's bottom edge, so open its menu upward and align it to the rail instead of the viewport's right edge. Sized to stay INSIDE the rail (232px rail − 12px anchor inset − 12px breathing room), with tighter spacing than the top-bar version. */ #profile-menu { inset-block-start: auto; inset-block-end: anchor(top); inset-inline-end: auto; inset-inline-start: anchor(left); margin-block-start: 0; margin-block-end: var(--space-sm); transform-origin: bottom left; min-inline-size: 0; inline-size: 208px; padding: var(--space-sm); .profile-menu-header { padding: var(--space-xs) var(--space-sm) var(--space-sm); } .profile-menu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-menu-item { padding: var(--space-xs) var(--space-sm); margin-block-start: var(--space-3xs); font-size: var(--fs-small); } } /* The workspace menu opens downward (its trigger is at the top now) but aligns to the rail's left edge, not the viewport's right, and also stays inside the rail. Higher specificity than workspaces.css's bare #ws-menu. */ #ws-menu { inset-block-start: anchor(bottom); inset-block-end: auto; inset-inline-end: auto; inset-inline-start: anchor(left); margin-block-start: var(--space-2xs); transform-origin: top left; min-inline-size: 0; inline-size: 208px; .profile-menu-item { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } body[data-authed='1']:has(#main-content > .page) #main-content { margin-inline-start: 232px; padding-block-start: var(--space-lg); } } } @layer theme { @container root (inline-size > 600px) { body[data-authed='1']:has(#main-content > .page) nav.navbar { border-block-end: none; border-inline-end: 1px solid light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.07)); &.scrolled { border-block-end-color: transparent; box-shadow: none; } .nav-links a { &:hover { background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05)); } &[aria-current='page'] { background: light-dark( oklch(from var(--accent-primary) l c h / 0.1), oklch(from var(--accent-primary) l c h / 0.16) ); color: var(--text-primary); /* Accent bar on the leading edge — box-shadow rather than a border so active/inactive items keep identical box sizes */ box-shadow: inset 3px 0 0 0 var(--accent-primary); } } .nav-section-label { color: var(--text-secondary); } .nav-links .nav-ico { color: var(--text-secondary); } .nav-links a[aria-current='page'] .nav-ico { color: var(--accent-primary); } .nav-actions > .profile-button .profile-role { color: var(--text-secondary); } /* The rail's theme toggle lives in the profile menu instead. This hide MUST be in the theme layer: shared base.css sets `display: flex` on .theme-toggle-btn in @layer theme, which outranks any components-layer `display: none`. */ .nav-actions > .theme-toggle-btn { display: none; } .nav-workspace .profile-button { border-color: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.12)); background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04)); } /* Separator above the bottom-pinned profile area */ .nav-actions { border-block-start: 1px solid light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.07)); } } } }