/* =========================================================
BENGAL AI HUB — base design system
Extracted & extended from the original index.html theme.
========================================================= */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--void: #08090c;
--void-soft: #0d0f14;
--panel: #12151b;
--panel-line: #22262f;
--ember: #ff7a33;
--ember-deep: #c2410c;
--circuit: #6e8cff;
--paper: #ede6d6;
--paper-dim: #c9c2b2;
--mute: #878c96;
--good: #5fd88f;
--warn: #ffcc5c;
--bad: #ff6b6b;
--radius: 2px;
}
html {
scroll-behavior: smooth;
/* Hard safety net against horizontal overflow/scroll — body already
carries the same rule, but on some browsers the actual scrolling
box is , not , so a rule on body alone doesn't always
stop it. Whatever pushes width past the viewport (a fixed-px
element, an errant negative margin, etc.) gets clipped here instead
of ever producing a sideways scrollbar or shifting content off the
visible edge. */
overflow-x: hidden;
max-width: 100%;
}
img,
video {
/* No image/video is ever allowed to force the page wider than its
container, on any screen — the single most common source of mobile
horizontal overflow (one raw without object-fit
sizing, sitting inside a container that's narrower than the
media's own natural width). Deliberately NOT including svg here —
several diagrams/icons on the site size their deliberately
(explicit width/height attributes, or rely on a parent transform)
and a blanket max-width:100% on every svg risked squashing those
rather than fixing anything, since svg icons were never the actual
source of the overflow bug this rule targets. */
max-width: 100%;
}
/* AJAX ("pjax") navigation — see pjax.js. A slim top-of-page progress bar
during the fetch, and a quick crossfade on so swapping the page
content never reads as an abrupt flash-cut. */
#pjax-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, #ff7a33, #ffb37a);
box-shadow: 0 0 12px -1px rgba(255, 122, 51, 0.8);
z-index: 9999;
opacity: 0;
pointer-events: none;
}
#pjax-main {
transition: opacity 0.18s ease;
}
#pjax-main.pjax-leaving,
#pjax-main.pjax-entering {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
#pjax-main {
transition: none;
}
#pjax-main.pjax-leaving,
#pjax-main.pjax-entering {
opacity: 1;
}
}
html.is-shutter-jumping {
scroll-behavior: auto !important;
}
body {
background: var(--void);
color: var(--paper);
font-family: "Inter", sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
position: relative;
}
a,
button {
/* Same reasoning as the .nav-caret-btn-specific rule further down —
several mobile browsers draw their own oversized tap/focus blob on
tap in the page's accent color, which is what actually produced the
ring overlapping "More" in the nav. Applied broadly here since any
link or button on the site could show the same artifact, not just
that one. Keyboard focus still gets a real, deliberate ring (see
:focus-visible rules throughout) — this only removes the touch one. */
-webkit-tap-highlight-color: transparent;
}
::selection {
background: var(--ember);
color: var(--void);
}
a {
color: inherit;
text-decoration: none;
}
img,
video {
display: block;
max-width: 100%;
}
ul {
list-style: none;
}
button {
font: inherit;
}
/* ----- utilities ----- */
.eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ember);
display: flex;
align-items: center;
gap: 10px;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.eyebrow::before {
content: "";
width: 18px;
height: 1px;
background: var(--ember);
display: inline-block;
flex-shrink: 0;
}
/* AI Readiness Assessment CTA — bigger, bolder, glowing heading + button
to match the rest of the site's premium headings. */
#ai-assessment h2 {
font-family: "Big Shoulders Display", sans-serif;
font-weight: 800;
text-transform: none;
font-size: clamp(32px, 4.2vw, 54px);
color: #ffffff;
text-shadow:
0 0 26px rgba(255, 122, 51, 0.45),
0 0 60px rgba(255, 122, 51, 0.3),
0 0 110px rgba(255, 122, 51, 0.18);
animation: aiAssessmentGlow 4s ease-in-out infinite;
}
@keyframes aiAssessmentGlow {
0%, 100% {
text-shadow:
0 0 26px rgba(255, 122, 51, 0.45),
0 0 60px rgba(255, 122, 51, 0.3),
0 0 110px rgba(255, 122, 51, 0.18);
}
50% {
text-shadow:
0 0 38px rgba(255, 122, 51, 0.6),
0 0 82px rgba(255, 122, 51, 0.42),
0 0 140px rgba(255, 122, 51, 0.26);
}
}
#ai-assessment .btn.solid {
padding: 14px 32px;
font-size: 13px;
border-radius: 8px;
box-shadow:
0 10px 30px -8px rgba(255, 122, 51, 0.55),
0 0 40px -10px rgba(255, 122, 51, 0.5);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background 0.2s;
}
#ai-assessment .btn.solid:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 16px 40px -8px rgba(255, 122, 51, 0.7),
0 0 55px -6px rgba(255, 122, 51, 0.65);
}
@media (prefers-reduced-motion: reduce) {
#ai-assessment h2 {
animation: none;
}
#ai-assessment .btn.solid:hover {
transform: none;
}
}
.display {
font-family: "Big Shoulders Display", sans-serif;
font-weight: 800;
text-transform: uppercase;
line-height: 0.92;
letter-spacing: -0.01em;
}
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 40rem) {
.wrap {
padding: 0 20px;
}
}
section {
position: relative;
z-index: 1;
}
.mono {
font-family: "JetBrains Mono", monospace;
}
/* ----- ambient three.js background ----- */
#bg-canvas {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.55;
}
/* ----- page transition wipe (3D shutter, see shutter3d.js) -----
An orange "BENGAL AI HUB" rectangle appears first. Black grooved shutter
panels then slide in from top/bottom and close ALL THE WAY — meeting in
the centre and completely overlapping/hiding the rectangle underneath
(no gap is left). The rectangle never reappears: by the time the panels
retract again the destination page has already loaded behind them, so
opening just reveals the new content directly. */
#transition-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
isolation: isolate;
overflow: hidden;
--shutter-panel: #0b0c10;
--shutter-cover: var(--ember);
--title-card-height: clamp(90px, 14vh, 170px);
--shutter-duration: 720ms;
--shutter-fade: 260ms;
}
/* Flat instant fallback for the "already closed, arriving on a fresh page"
case only — a plain black field standing in for the closed panels until
the WebGL module finishes loading and draws the real grooved geometry. It
must never appear on the page that is CLOSING (is-transitioning), since
the grooves have to visibly travel over that page's real content. */
#transition-overlay::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: var(--shutter-panel);
opacity: 0;
}
html.transition-covered #transition-overlay::before,
body.transition-covered #transition-overlay::before {
opacity: 1;
}
body.is-revealing #transition-overlay::before {
opacity: 0;
transition: opacity var(--shutter-fade) ease;
}
#transition-overlay .t-seam {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: var(--title-card-height);
z-index: 1;
opacity: 0;
transform: translateY(-50%);
background: var(--shutter-cover);
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.22),
transparent 30%,
rgba(0, 0, 0, 0.14)
);
}
#transition-overlay .t-title {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
opacity: 0;
transform: translate(-50%, -50%);
color: #08090c;
font-family: "Big Shoulders Display", sans-serif;
font-size: clamp(26px, calc(var(--title-card-height) * 0.34), 68px);
font-weight: 900;
line-height: 1;
letter-spacing: 0.035em;
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
#shutter-canvas {
position: absolute;
inset: 0;
/* Above the rectangle: the panels close ALL THE WAY, so they must
visibly overlap and bury it, not hide underneath it. Only the mesh's
own opaque pixels draw here — everywhere else the canvas is fully
transparent, which is what lets the rectangle (and, before the panels
arrive, the live page) show through untouched. */
z-index: 2;
width: 100%;
height: 100%;
display: block;
}
/* The rectangle appears the instant the transition starts, before the
panels have travelled in at all — "before the grooved divs appear".
Nothing hides it again explicitly: the closing panels physically bury it
(they render above, z-index 2), and on the destination page this class
is simply never present, so the card never comes back on reveal. */
body.is-transitioning #transition-overlay .t-seam,
body.is-transitioning #transition-overlay .t-title {
opacity: 1;
transition: opacity 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
#transition-overlay .t-seam,
#transition-overlay .t-title,
#transition-overlay::before {
transition: none !important;
}
}
/* ----- stripes (bengal motif) ----- */
.stripes {
height: 14px;
width: 100%;
background: repeating-linear-gradient(
-35deg,
var(--ember) 0 10px,
transparent 10px 22px
);
opacity: 0.85;
position: relative;
z-index: 2;
}
.stripes.thin {
height: 4px;
opacity: 0.5;
}
/* ----- header / nav ----- */
:root {
--header-h: 92px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 0;
}
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
/* The header carries a lot more than page-content sections do (full nav
+ search + admin + CTA) — give it more room than the standard 1240px
.wrap so items aren't forced to crowd each other. This is only a cap
for ultra-wide monitors; it must stay comfortably above what the
"spacious" tier below actually needs, or it becomes the thing that
squeezes the right-hand margin away — actual fitting is handled by
the desktop and mobile breakpoints below, keyed off real viewport width. */
max-width: 115rem;
padding-top: 26px;
padding-bottom: 26px;
transition: padding 0.35s ease;
position: relative;
z-index: 1;
}
header::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(6, 7, 10, 0.9),
rgba(6, 7, 10, 0.5) 65%,
rgba(6, 7, 10, 0)
);
transition:
opacity 0.35s ease,
background-color 0.35s ease;
pointer-events: none;
z-index: 0;
}
header.scrolled::before {
background: rgba(6, 7, 10, 0.82);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 122, 51, 0.16);
}
header.scrolled .header-row {
padding-top: 16px;
padding-bottom: 16px;
}
/* ----- announcement bar ----- */
.announce-bar {
position: relative;
z-index: 2;
overflow: hidden;
max-height: 40px;
background:
linear-gradient(90deg, rgba(255, 122, 51, 0.14), rgba(110, 140, 255, 0.08) 55%, rgba(255, 122, 51, 0.14)),
var(--void-soft);
background-size: 200% 100%;
animation: announceSheen 10s linear infinite;
border-bottom: 1px solid rgba(255, 122, 51, 0.22);
transition:
max-height 0.35s cubic-bezier(0.76, 0, 0.24, 1),
opacity 0.3s ease;
}
.announce-bar.is-hidden {
max-height: 0;
opacity: 0;
pointer-events: none;
}
@keyframes announceSheen {
0% {
background-position: 0% 0;
}
100% {
background-position: 200% 0;
}
}
.announce-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 9px 46px 9px 16px;
position: relative;
min-height: 40px;
}
.announce-link {
display: flex;
align-items: center;
gap: 10px;
color: var(--paper-dim);
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
}
.announce-link:hover {
color: var(--paper);
}
.announce-link:hover .announce-text {
text-decoration: underline;
text-decoration-color: var(--ember);
text-underline-offset: 3px;
}
.announce-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
color: var(--ember);
background: rgba(255, 122, 51, 0.14);
box-shadow: 0 0 0 1px rgba(255, 122, 51, 0.3);
animation: emberPulse 2.6s ease-in-out infinite;
}
.announce-text {
line-height: 1.4;
color: var(--paper);
}
.announce-arrow {
color: var(--ember);
transition: transform 0.2s ease;
}
.announce-link:hover .announce-arrow {
transform: translateX(3px);
}
.announce-close {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--panel-line);
background: rgba(255, 255, 255, 0.02);
color: var(--paper-dim);
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
}
.announce-close:hover {
background: var(--panel);
color: var(--paper);
border-color: var(--paper-dim);
}
@media (prefers-reduced-motion: reduce) {
.announce-bar {
animation: none;
}
}
@media (max-width: 640px) {
.announce-text {
font-size: 10.5px;
}
.announce-inner {
padding-left: 14px;
padding-right: 40px;
}
}
/* Floating announcement — extra attention layer on top of the bar above.
Same visual family (ember glow, JetBrains Mono) as the rest of the
announce-* rules, just relocated to a persistent corner element instead
of a dismissible top strip. */
.announce-float {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 40;
}
.announce-float-btn {
height: 52px;
padding: 0 22px 0 16px;
border-radius: 999px;
position: relative;
border: 1px solid rgba(255, 122, 51, 0.6);
background: linear-gradient(155deg, rgba(255, 122, 51, 0.28), rgba(255, 122, 51, 0.08));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #ffb37a;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
overflow: hidden;
box-shadow:
0 10px 28px -6px rgba(0, 0, 0, 0.55),
0 0 22px -4px rgba(255, 122, 51, 0.7);
animation:
announceFloatPulse 2.2s ease-in-out infinite,
announceFloatFlash 5s ease-in-out infinite,
announceFloatBob 2.2s ease-in-out infinite;
transition:
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.25s ease;
}
.announce-float-btn::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
padding: 2px;
background: conic-gradient(from 0deg, #ff7a33, #ffd8a8, #ff7a33, #6e8cff, #ff7a33);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: announceFloatRingSpin 3s linear infinite;
pointer-events: none;
}
.announce-float-btn svg {
flex-shrink: 0;
position: relative;
z-index: 1;
animation: announceFloatSparkPop 2.2s ease-in-out infinite;
}
.announce-float-btn-label {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--paper);
white-space: nowrap;
position: relative;
z-index: 1;
text-shadow: 0 0 12px rgba(255, 122, 51, 0.7);
}
.announce-float-btn:hover {
transform: scale(1.06) translateY(-3px);
background: linear-gradient(155deg, rgba(255, 122, 51, 0.4), rgba(255, 122, 51, 0.14));
}
.announce-float.is-open .announce-float-btn {
border-radius: 16px;
}
@keyframes announceFloatRingSpin {
to {
transform: rotate(360deg);
}
}
@keyframes announceFloatBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@keyframes announceFloatSparkPop {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.25) rotate(-12deg); }
}
@media (max-width: 640px) {
.announce-float-btn-label {
display: none;
}
.announce-float-btn {
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
justify-content: center;
}
.announce-float.is-open .announce-float-btn {
border-radius: 50%;
}
}
@keyframes announceFloatPulse {
0%,
100% {
box-shadow:
0 10px 28px -6px rgba(0, 0, 0, 0.5),
0 0 0 0 rgba(255, 122, 51, 0.5);
}
50% {
box-shadow:
0 10px 28px -6px rgba(0, 0, 0, 0.5),
0 0 0 12px rgba(255, 122, 51, 0);
}
}
@keyframes announceFloatFlash {
0%,
88%,
100% {
filter: brightness(1);
}
91%,
97% {
filter: brightness(1.35);
}
}
.announce-float-panel {
position: absolute;
right: 0;
bottom: 72px;
width: 300px;
padding: 22px;
border-radius: 16px;
border: 1px solid rgba(255, 122, 51, 0.3);
background: linear-gradient(155deg, rgba(22, 24, 30, 0.96), rgba(10, 11, 15, 0.98));
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow:
0 24px 60px -16px rgba(0, 0, 0, 0.65),
0 0 40px -12px rgba(255, 122, 51, 0.35);
opacity: 0;
transform: translateY(14px) scale(0.95);
pointer-events: none;
transition:
opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
overflow: hidden;
}
.announce-float-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #ff7a33, #ffb37a, #ff7a33);
background-size: 300% 100%;
animation: entityCardShimmer 4s linear infinite;
}
.announce-float.is-open .announce-float-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.announce-float.is-open .announce-float-btn {
animation: none;
}
.announce-float-icon {
width: 32px;
height: 32px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #ffb37a;
background: linear-gradient(155deg, rgba(255, 122, 51, 0.28), rgba(255, 122, 51, 0.08));
box-shadow: 0 0 16px -4px rgba(255, 122, 51, 0.6);
margin-bottom: 14px;
}
.announce-float-text {
font-size: 14.5px;
font-weight: 700;
line-height: 1.55;
color: var(--paper);
margin-bottom: 16px;
}
.announce-float-close {
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
border: 1px solid var(--panel-line);
background: rgba(255, 255, 255, 0.03);
color: var(--paper-dim);
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.announce-float-close:hover {
background: rgba(255, 122, 51, 0.15);
color: var(--paper);
transform: rotate(90deg);
}
.announce-float-panel .btn.solid {
box-shadow: 0 8px 22px -6px rgba(255, 122, 51, 0.55);
}
.announce-float.is-dismissed {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.announce-float-btn,
.announce-float-btn::before,
.announce-float-btn svg,
.announce-float-panel::before {
animation: none;
}
}
@media (max-width: 640px) {
.announce-float {
right: 14px;
bottom: 14px;
}
.announce-float-panel {
width: calc(100vw - 48px);
right: -8px;
}
}
.logo {
font-family: "JetBrains Mono", monospace;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.06em;
display: flex;
align-items: center;
gap: 9px;
position: relative;
z-index: 1;
}
.header-row > .logo {
flex: 0 0 auto;
margin-inline-end: clamp(1.25rem, 2vw, 2.75rem);
}
.logo .mark {
width: 9px;
height: 9px;
background: var(--ember);
display: inline-block;
transform: rotate(45deg);
animation: emberPulse 3.4s ease-in-out infinite;
flex-shrink: 0;
}
/* Admin-controlled logo mark (Admin → Settings → Company → "Logo mark") —
video or image, looping if it's a video. Defaults to the bundled
placeholder video when nothing's been uploaded. */
.logo-media {
width: 48px;
height: 48px;
/* Small radius, not a pill/circle — enough to soften the corners
without meaningfully cropping a logo that fills the box (paired with
object-fit: contain below, which keeps the whole logo visible
regardless of its own aspect ratio). */
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12),
0 0 16px 2px rgba(255, 255, 255, 0.35),
0 0 32px 4px rgba(255, 255, 255, 0.2);
animation: logoMediaGlowPulse 3.2s ease-in-out infinite;
}
.logo-media video,
.logo-media img {
width: 100%;
height: 100%;
/* contain, not cover — the uploaded logo is shown in full, never
cropped, whatever its own aspect ratio is. */
object-fit: contain;
display: block;
}
@keyframes logoMediaGlowPulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12),
0 0 16px 2px rgba(255, 255, 255, 0.32),
0 0 30px 4px rgba(255, 255, 255, 0.18);
}
50% {
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.2),
0 0 22px 4px rgba(255, 255, 255, 0.5),
0 0 42px 8px rgba(255, 255, 255, 0.28);
}
}
@media (prefers-reduced-motion: reduce) {
.logo-media {
animation: none;
}
}
nav.links {
display: flex;
gap: 2px;
align-items: center;
position: relative;
z-index: 1;
/* flex-shrink: 1 (not 0) as a last-resort safety margin above the
1700px breakpoint — normally there's enough room there that this
never actually compresses anything, but it means nav.links CAN give
up space rather than the row overflowing outright if some
unanticipated combination of an ultra-wide monitor's zoom and this
row's own content width ever gets tight. min-width: 0 is required
for that shrink to actually take effect — flex items default to a
min-width based on their content otherwise and ignore flex-shrink. */
flex: 1 1 auto;
justify-content: flex-start;
min-width: 0;
}
.nav-item {
position: relative;
}
.nav-item.has-dropdown {
/* Two independently-clickable controls, styled as one unit: the label
always navigates (a real link, never intercepted); the caret button
only ever opens/closes the panel. */
display: flex;
align-items: center;
}
.nav-trigger,
a.nav-trigger {
display: flex;
align-items: center;
font-size: 12.5px;
font-weight: 500;
color: var(--paper-dim);
letter-spacing: 0.01em;
padding: 10px 11px;
position: relative;
white-space: nowrap;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.nav-item.has-dropdown .nav-trigger {
padding-right: 2px;
}
.nav-caret-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 11px 10px 5px;
background: none;
border: none;
cursor: pointer;
color: var(--mute);
/* Several mobile browsers (Samsung Internet in particular) draw their
own default focus/tap ring on in the page's accent color
the instant it's tapped — an oversized blob that doesn't respect
this button's own box at all, which is what actually produced the
circle overlapping "More". A tap is not a reason to lose the focus
ring for keyboard users, so this replaces it with one shaped to the
actual button instead of removing it outright. */
-webkit-tap-highlight-color: transparent;
/* Explicit outline:none on the plain (non-:focus-visible) state — some
Chromium builds still draw their own default focus ring on a
after a mouse click, not just keyboard focus, and it can
render as a large ring well outside the button's own box rather
than tracing its shape (exactly the circle that kept overlapping
"More"). The :focus-visible rule directly below still gives
keyboard users a real, deliberate ring — this only strips the
browser's own default one. */
outline: none;
}
.nav-trigger:focus-visible,
.nav-caret-btn:focus-visible {
outline: 2px solid var(--ember);
outline-offset: 2px;
border-radius: 4px;
}
.nav-caret-btn:hover {
color: var(--ember);
}
.nav-caret-btn .caret {
transition: transform 0.2s ease;
flex-shrink: 0;
}
.nav-item.is-open .nav-caret-btn {
color: var(--ember);
}
.nav-item.is-open .nav-caret-btn .caret {
transform: rotate(180deg);
}
.nav-trigger::after {
display: none;
}
.nav-trigger {
border: 1px solid transparent;
gap: 6px;
transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.nav-trigger-spark {
flex-shrink: 0;
opacity: 0.85;
}
.nav-trigger:hover,
.nav-trigger.active,
.nav-item.is-open .nav-trigger {
border-radius: 999px;
color: #ffe0bd;
border-color: rgba(255, 122, 51, 0.65);
background: linear-gradient(120deg, rgba(255, 122, 51, 0.26), rgba(255, 122, 51, 0.06));
box-shadow: 0 0 16px 0 rgba(255, 122, 51, 0.65);
}
/* "AI & Knowledge" — the site's core differentiator gets a real glowing
pill/badge treatment (icon + gradient border + ambient glow) instead of
blending in as plain text like the other nav items. Solid color + a
text-shadow pulse for the label — not background-clip:text, which a
Chromium bug can render fully invisible once combined with `filter`
and an animated background-position on this element (that's what broke
it the first time this was attempted). */
.nav-trigger-ai {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: #ffcda0;
padding: 6px 12px 6px 10px !important;
border-radius: 999px;
border: 1px solid rgba(255, 122, 51, 0.4);
background: linear-gradient(120deg, rgba(255, 122, 51, 0.16), rgba(255, 122, 51, 0.03));
box-shadow: 0 0 0 0 rgba(255, 122, 51, 0.45);
animation: navAiGlowPulse 2.6s ease-in-out infinite;
}
.nav-trigger-ai-spark {
flex-shrink: 0;
animation: navAiSparkSpin 5s linear infinite;
}
.nav-trigger-ai::after {
display: none;
}
.nav-trigger-ai:hover,
.nav-trigger-ai.active,
.nav-item.is-open .nav-trigger-ai {
color: #ffe0bd;
border-color: rgba(255, 122, 51, 0.65);
background: linear-gradient(120deg, rgba(255, 122, 51, 0.26), rgba(255, 122, 51, 0.06));
}
@keyframes navAiGlowPulse {
0%,
100% {
box-shadow: 0 0 8px -2px rgba(255, 122, 51, 0.35);
}
50% {
box-shadow: 0 0 16px 0 rgba(255, 122, 51, 0.65);
}
}
@keyframes navAiSparkSpin {
0%,
85%,
100% {
transform: rotate(0deg) scale(1);
}
92% {
transform: rotate(180deg) scale(1.2);
}
}
@media (prefers-reduced-motion: reduce) {
.nav-trigger-ai-spark {
animation: none;
}
.nav-trigger-ai {
animation: none;
}
}
/* ----- nav dropdowns ----- */
.dropdown-panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translate(-50%, 8px);
min-width: 300px;
background: rgba(13, 15, 20, 0.98);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid var(--panel-line);
box-shadow:
0 24px 48px -12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 122, 51, 0.05);
padding: 16px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s;
z-index: 40;
}
.dropdown-panel.dropdown-wide {
min-width: 460px;
}
/* The last couple of items sit close to the right edge — anchor those
panels from the right instead of centering, so they can't clip off the
viewport on narrower desktop widths. */
.dropdown-panel.dropdown-align-right {
left: auto;
right: 0;
transform: translateY(8px);
}
.nav-item.is-open .dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.nav-item.is-open .dropdown-panel.dropdown-align-right {
transform: translateY(0);
}
/* "More" (custom admin-menu items): the trigger is a single combined
label+caret button rather than the usual separate label-link + caret-btn
pair, since there's no page for the label to point at. Restate the
normal .nav-trigger box model here at higher specificity so it doesn't
inherit .nav-caret-btn's tighter icon-button padding/color/gap. */
.nav-item.nav-more .nav-trigger {
padding: 10px 11px;
gap: 6px;
color: var(--paper-dim);
}
.nav-item.nav-more.is-open .nav-trigger,
.nav-item.nav-more .nav-trigger:hover {
color: var(--ember);
}
.dropdown-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
max-height: min(60vh, 460px);
overflow-y: auto;
}
.dropdown-grid.cols-2 {
grid-template-columns: 1fr 1fr;
gap: 2px 10px;
}
.dropdown-link {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 10px;
color: var(--paper-dim);
border-radius: 3px;
transition:
background 0.15s,
color 0.15s;
}
.dropdown-link:hover {
background: rgba(255, 122, 51, 0.08);
color: var(--paper);
}
.dropdown-link.compact {
align-items: center;
padding: 7px 10px;
}
/* ----- nested submenu, e.g. inside "More" for a custom menu item that has
its own children — an inline accordion reveal directly under its toggle
(not a side flyout, which fought the compact grid's column layout).
Toggled by its own JS in main.js, independent of the top-level
.nav-item.has-dropdown open/close logic so opening a submenu never
closes its parent panel. ----- */
.dropdown-link-group {
grid-column: 1 / -1;
}
.dropdown-link-toggle {
width: 100%;
justify-content: space-between;
background: none;
border: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.dropdown-link-toggle .submenu-caret {
flex-shrink: 0;
color: var(--mute);
transition: transform 0.2s ease;
transform: rotate(-90deg);
}
.dropdown-link-group.is-open .dropdown-link-toggle .submenu-caret {
color: var(--ember);
transform: rotate(0deg);
}
.dropdown-submenu {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 0.18s ease,
opacity 0.18s ease;
}
.dropdown-link-group.is-open .dropdown-submenu {
grid-template-rows: 1fr;
opacity: 1;
}
.dropdown-submenu > div {
overflow: hidden;
padding-left: 20px;
border-left: 1px solid var(--panel-line);
margin: 2px 0 2px 19px;
}
.dd-mark {
width: 5px;
height: 5px;
margin-top: 6px;
background: var(--ember);
transform: rotate(45deg);
flex-shrink: 0;
opacity: 0.7;
}
.dropdown-link.compact .dd-mark {
margin-top: 0;
}
.dropdown-link:hover .dd-mark {
opacity: 1;
}
.dd-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dd-title {
font-size: 13px;
font-weight: 500;
color: inherit;
white-space: normal;
}
.dropdown-link.compact .dd-title {
font-size: 12.5px;
}
.dd-desc {
font-size: 11.5px;
color: var(--mute);
line-height: 1.4;
}
.dropdown-viewall {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--panel-line);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ember);
}
.dropdown-viewall:hover {
color: var(--paper);
}
.dropdown-empty {
color: var(--mute);
font-size: 12.5px;
padding: 9px 10px;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: var(--paper-dim);
border: 1px solid var(--panel-line);
border-radius: 50%;
transition:
color 0.2s,
border-color 0.2s,
background 0.2s;
flex-shrink: 0;
}
.icon-btn:hover {
color: var(--ember);
border-color: var(--ember);
background: rgba(255, 122, 51, 0.08);
}
.nav-cta {
display: flex;
align-items: center;
gap: 0.875rem;
margin-inline-start: clamp(1.25rem, 1.6vw, 2.5rem);
position: relative;
z-index: 1;
flex-shrink: 0;
}
.nav-cta > * {
flex-shrink: 0;
}
/* Base state: hidden. The mobile drawer block further down turns
this on inside the mobile drawer — it MUST stay defined here, before
that block, not after it: two same-specificity rules for the same
selector resolve by source order, so a later plain rule would beat an
earlier @media one every time the query matches, permanently hiding
this regardless of viewport (the bug that shipped once already). */
nav.links > .mobile-admin-link {
display: none;
}
.burger {
display: none;
width: 36px;
height: 36px;
border: 1px solid var(--panel-line);
background: rgba(255, 255, 255, 0.03);
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
content: "";
display: block;
width: 16px;
height: 1px;
background: var(--paper);
position: relative;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.burger span::before {
position: absolute;
top: -5px;
}
.burger span::after {
position: absolute;
top: 5px;
}
.burger.open span {
background: transparent;
}
.burger.open span::before {
transform: translateY(5px) rotate(45deg);
}
.burger.open span::after {
transform: translateY(-5px) rotate(-45deg);
}
.btn {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 11px 20px;
border: 1px solid var(--ember);
color: var(--paper);
background: transparent;
cursor: pointer;
white-space: nowrap;
transition:
background 0.2s,
color 0.2s,
transform 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover {
background: var(--ember);
color: var(--void);
}
.header-project-link .cta-short {
display: none;
}
.btn.solid {
background: var(--ember);
color: var(--void);
border-color: var(--ember);
}
.btn.solid:hover {
background: var(--ember-deep);
border-color: var(--ember-deep);
}
.btn.ghost {
position: relative;
border-color: var(--panel-line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow: hidden;
transition:
background 0.3s ease,
color 0.2s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
/* Diagonal shine sweep on hover — a premium micro-interaction rather than
a flat color swap. */
.btn.ghost::before {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.14), transparent);
transform: skewX(-20deg);
transition: left 0.55s ease;
pointer-events: none;
}
.btn.ghost:hover::before {
left: 130%;
}
.btn.ghost:hover {
background: rgba(255, 122, 51, 0.08);
color: var(--paper);
border-color: var(--ember);
transform: translateY(-2px);
box-shadow:
0 10px 30px -10px rgba(255, 122, 51, 0.4),
0 0 0 1px rgba(255, 122, 51, 0.15);
}
@media (prefers-reduced-motion: reduce) {
.btn.ghost {
transition: none;
}
.btn.ghost:hover {
transform: none;
}
.btn.ghost::before {
display: none;
}
}
.btn.small {
padding: 8px 14px;
font-size: 11px;
}
/* Renamed from .btn.block (was colliding with the unrelated .sidebar
.block panel-section class — a button carrying both class names inside
a sidebar picked up the panel's background/padding instead of its own,
since the two rules end up at equal specificity and pages.css loads
after style.css). Keep this name distinct from any bare "block" class
anywhere else in the CSS. */
.btn.btn-block {
width: 100%;
justify-content: center;
}
.btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* Between the mobile-drawer breakpoint (1280px, below) and a wide desktop,
the full nine-item horizontal nav + search + admin + CTA needs every
spare pixel it can get to avoid overflowing off the right edge again —
tighter than the "spacious" default, but still readable. white-space:
nowrap on .btn (always on) means shrinking button padding here is always
safe — text still can't wrap.
Threshold set well above 1440 on purpose: a 1440-1600px-wide window
previously fell into the "spacious" tier with almost no slack left for
a right-hand margin — this range needs the tightened numbers too.
(The search icon used to be dropped in this range as "least essential" —
but that's most real-world laptop widths, so it made search effectively
unreachable most of the time. It's a 2.125rem circle; kept visible instead.) */
@media (min-width: 64.0625rem) and (max-width: 120rem) {
.header-row {
gap: 0.625rem;
}
nav.links {
gap: 0;
}
.nav-trigger,
a.nav-trigger {
padding: 0.5rem 0.5rem;
font-size: 0.75rem;
}
/* Nine top-level items each carrying a decorative spark icon adds up to
~170px of extra width across the row — at laptop/small-desktop
widths that was enough to push "More" past the search/admin/CTA
cluster instead of stopping short of it, overlapping them. The icon
is purely decorative (nav-trigger-ai's own spark stays, it's load-
bearing for that item's identity), so drop it here to reclaim the
room. */
.nav-trigger-spark {
display: none;
}
.nav-cta {
gap: 0.5rem;
}
.btn {
padding: 0.625rem 0.875rem;
}
.btn.small {
padding: 0.4375rem 0.625rem;
}
}
@media (min-width: 64.0625rem) and (max-width: 90.625rem) {
.header-row {
gap: 0.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.header-row > .logo {
margin-inline-end: 1.5rem;
}
.logo-media {
width: 2.75rem;
height: 2.75rem;
}
.nav-trigger,
a.nav-trigger {
padding: 0.4375rem 0.3125rem;
font-size: 0.6875rem;
}
.nav-item.has-dropdown .nav-trigger {
padding-right: 0.0625rem;
}
.nav-caret-btn {
padding: 0.4375rem 0.25rem 0.4375rem 0.125rem;
}
.nav-trigger-ai {
gap: 0.25rem;
padding: 0.3125rem 0.5rem 0.3125rem 0.4375rem !important;
}
.nav-cta {
gap: 0.375rem;
}
.nav-cta > a.btn {
padding: 0.5625rem 0.6875rem;
font-size: 0.6875rem;
}
.icon-btn {
width: 2rem;
height: 2rem;
}
}
@media (min-width: 64.0625rem) and (max-width: 80rem) {
.nav-cta .admin-link {
display: none;
}
/* Even with the admin link hidden and paddings already squeezed above,
the row still ran ~15-50px over just above the drawer breakpoint
(1025-1075px) — "More" landing under the search icon. A little extra
off .nav-trigger's own padding closes that out without touching the
squeeze tiers used at wider widths. */
.nav-trigger,
a.nav-trigger {
padding-inline: 0.25rem;
}
}
@media (min-width: 64.0625rem) and (max-width: 68rem) {
/* Narrowest sliver of the squeeze range (right above the drawer
breakpoint) needed a bit more than the padding trim above alone. */
.nav-cta {
gap: 0.25rem;
}
.nav-cta > a.btn {
padding-inline: 0.5rem;
}
}
/* Nine top-level items (each with its own dropdown) plus search, admin and
the primary CTA is genuinely more than a horizontal bar can hold once a
screen drops below roughly laptop width — rather than keep chasing
padding to squeeze it in and risk something clipping off-screen again,
the drawer takes over earlier than the site's other stack-to-mobile
breakpoints (which stay at 980px in pages.css — this is nav-specific).
This is now set to the SAME 1700px as the squeeze-padding tier just
above on purpose — the two used to be 1440px/1700px, leaving a gap
where nav.links was still rendered inline (just with tighter padding)
but had nowhere left to actually shrink into, since nav.links carries
flex-shrink: 0. Any width or zoom level landing in that gap pushed
"Start a Project" (last in flex order) straight off the visible edge —
body's overflow-x:hidden clips it instead of scrolling to it, so it
silently vanished rather than wrapping or becoming reachable. Merging
the thresholds removes that gap entirely: nav.links is either at full
desktop width with room to spare, or it's already the off-canvas
drawer — there's no width where it's rendered inline without enough
room for itself. */
@media (max-width: 64rem) {
.header-row > .logo {
margin-inline-end: 0;
}
.nav-cta {
margin-inline-start: auto;
}
nav.links {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(84vw, 380px);
background: rgba(6, 7, 10, 0.97);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-left: 1px solid var(--panel-line);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: calc(var(--header-h) + 16px) 28px 32px;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.3, 1);
overflow-y: auto;
}
nav.links.open {
transform: translateX(0);
}
nav.links > .nav-single {
display: flex;
width: 100%;
padding: 14px 0;
border-bottom: 1px solid var(--panel-line);
font-size: 15.5px;
}
/* On desktop .nav-item.has-dropdown is a simple flex row wrapping two
inline controls (the label and the caret button — see the base rule
above). On mobile it needs to hold a THIRD thing, the accordion panel,
laid out as its own full-width row underneath both. A CSS grid with
explicit placement (rather than a flex-wrap/flex-basis trick) makes
that unambiguous: row 1 is [label | caret], row 2 is the panel
spanning both columns, full stop — nothing for the label/caret's own
sizing to accidentally squeeze the panel into. */
.nav-item.has-dropdown {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: stretch;
width: 100%;
border-bottom: 1px solid var(--panel-line);
}
.nav-item.has-dropdown .nav-trigger {
grid-column: 1;
grid-row: 1;
padding: 14px 0;
font-size: 15.5px;
}
.nav-caret-btn {
grid-column: 2;
grid-row: 1;
padding: 14px 4px 14px 14px;
}
.nav-item.has-dropdown .dropdown-panel {
grid-column: 1 / -1;
grid-row: 2;
}
/* "More": one combined button carries both label and caret (see the
desktop rule above), so it needs the full row instead of just the
label's column — otherwise the caret it contains gets squeezed into
column 1's width alongside the text. */
.nav-item.nav-more .nav-trigger {
grid-column: 1 / -1;
justify-content: space-between;
}
.nav-trigger::after {
display: none;
}
.nav-item .caret {
width: 11px;
height: 7px;
}
/* Dropdowns become inline accordions, not floating panels. Plain
display: none/block instead of an animated max-height — simpler, and
nothing to get wrong with content that can vary a lot in height. */
.dropdown-panel {
position: static;
left: auto;
right: auto;
transform: none;
min-width: 0;
width: 100%;
max-width: 100%;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
display: none;
}
.nav-item.is-open .dropdown-panel {
display: block;
/* The base (desktop) rule for this exact selector sets
transform: translate(-50%, 0) to re-center an absolutely
positioned floating panel — same specificity as this rule, so
without repeating it here that transform would still win on
mobile too and shove the whole accordion panel half its own
width off to the left, outside the visible drawer. */
transform: none;
padding: 4px 0 14px;
}
/* Same specificity leak, same fix, for the "Company"/"Tools" variant
(higher specificity again on desktop: .dropdown-align-right adds a
4th class to the selector, so it must be matched here too). */
.nav-item.is-open .dropdown-panel.dropdown-align-right {
transform: none;
}
.dropdown-grid,
.dropdown-grid.cols-2 {
grid-template-columns: 1fr;
max-height: none;
overflow: visible;
width: 100%;
}
.dropdown-link {
width: 100%;
max-width: 100%;
padding: 11px 4px;
overflow-wrap: anywhere;
}
/* Descriptions read fine in a floating desktop panel but just add height
and wrapping risk to an already-tall mobile accordion — titles only. */
.dd-desc {
display: none;
}
.dropdown-viewall {
margin: 6px 0 4px;
border-top: none;
padding-top: 0;
}
.burger {
display: flex;
}
/* Keep the mobile header row to logo + search + primary CTA + burger —
no room there for the admin link too — but it's not just left for the
footer to cover: .mobile-admin-link below puts a real entry for it
inside the drawer itself. */
.nav-cta .admin-link {
display: none;
}
nav.links > .mobile-admin-link {
display: block;
margin-top: 8px;
border-top: 1px solid var(--panel-line);
padding-top: 18px;
}
}
/* Real phone widths (320–480px) are tight enough that logo + full
"BENGAL AI HUB" wordmark + search icon + "Start a Project" + the
burger simply don't fit even after the 1440px tier's drawer takeover —
the combined width still overflowed past the right edge, and because
html/body use overflow-x:hidden (deliberately, to avoid a sideways
scrollbar) the overflowing items were just invisible instead: the
burger AND the search icon, being last in source order, disappeared
off-screen entirely with nothing to show they were ever there. Below
this width the wordmark drops (icon alone still reads as the brand)
and "Start a Project" shrinks to an icon+short-label pill, freeing
enough room that search + burger are always on-screen. */
/* Content-aware fallback for desktop widths: main.js adds this state when
the measured logo + nav + search/CTA controls no longer fit inline
(for example browser zoom or extra CMS items under "More"). It mirrors
the 1700px drawer rules above so those controls never overlap. */
#siteHeader.nav-collapsed nav.links {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(84vw, 380px);
background: rgba(6, 7, 10, 0.97);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-left: 1px solid var(--panel-line);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: calc(var(--header-h) + 16px) 28px 32px;
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition:
transform 0.4s cubic-bezier(0.16, 0.8, 0.3, 1),
visibility 0s linear 0.4s;
overflow-y: auto;
}
#siteHeader.nav-collapsed nav.links.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition:
transform 0.4s cubic-bezier(0.16, 0.8, 0.3, 1),
visibility 0s linear 0s;
}
#siteHeader.nav-collapsed nav.links > .nav-single {
display: flex;
width: 100%;
padding: 14px 0;
border-bottom: 1px solid var(--panel-line);
font-size: 15.5px;
}
#siteHeader.nav-collapsed .nav-item.has-dropdown {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: stretch;
width: 100%;
border-bottom: 1px solid var(--panel-line);
}
#siteHeader.nav-collapsed .nav-item.has-dropdown .nav-trigger {
grid-column: 1;
grid-row: 1;
padding: 14px 0;
font-size: 15.5px;
}
#siteHeader.nav-collapsed .nav-caret-btn {
grid-column: 2;
grid-row: 1;
padding: 14px 4px 14px 14px;
}
/* "More"'s contents render a second time right after it, flattened into
individual top-level rows (see header.blade.php) — only one of the two
should ever be visible: the collapsed "More" dropdown on desktop where
space is tight, or the flattened rows in the drawer where it isn't.
Selectors here are qualified as specifically as the base rules they're
overriding (.nav-item.has-dropdown, a.nav-trigger) — a bare .drawer-only
loses that specificity fight and stays visible on desktop instead. */
.nav-item.has-dropdown.drawer-only,
a.nav-trigger.nav-single.drawer-only {
display: none;
}
#siteHeader.nav-collapsed .nav-item.nav-more {
display: none;
}
#siteHeader.nav-collapsed .nav-item.has-dropdown.drawer-only {
display: grid;
}
#siteHeader.nav-collapsed a.nav-trigger.nav-single.drawer-only {
display: flex;
}
#siteHeader.nav-collapsed .nav-item.has-dropdown .dropdown-panel {
grid-column: 1 / -1;
grid-row: 2;
}
#siteHeader.nav-collapsed .nav-item.nav-more .nav-trigger {
grid-column: 1 / -1;
justify-content: space-between;
}
#siteHeader.nav-collapsed .nav-trigger::after {
display: none;
}
/* Left-aligned, square-edged at rest — the pill/capsule (inset + radius)
only appears once a row is actually hovered/active/open, not as a
default rounded look for every row. No outer glow either (the
box-shadow blur reads as a stray ring at this scale/width, not a
badge). */
#siteHeader.nav-collapsed .nav-trigger:hover,
#siteHeader.nav-collapsed .nav-trigger.active,
#siteHeader.nav-collapsed .nav-item.is-open .nav-trigger {
/* Pill filled the row's full height (14px top/bottom padding, no
vertical inset), so its rounded top/bottom edge landed right on the
row's own boundary — flush against whatever sits in the next row,
cut off rather than looking like a contained badge. Trade some of
that padding for a matching margin so the pill sits inset from the
row edges on every side. */
justify-content: center;
padding: 10px 12px;
margin-block: 4px;
margin-inline: -12px;
border-radius: 999px;
border-color: transparent;
box-shadow: none;
}
#siteHeader.nav-collapsed .nav-trigger-ai {
justify-content: center;
padding: 10px 12px !important;
margin-block: 4px;
margin-inline: -12px;
border-radius: 999px;
box-shadow: none;
animation: none;
}
#siteHeader.nav-collapsed .nav-item .caret {
width: 11px;
height: 7px;
}
#siteHeader.nav-collapsed .dropdown-panel {
position: static;
left: auto;
right: auto;
transform: none;
min-width: 0;
width: 100%;
max-width: 100%;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
display: none;
}
#siteHeader.nav-collapsed .nav-item.is-open .dropdown-panel {
display: block;
transform: none;
padding: 4px 0 14px;
}
#siteHeader.nav-collapsed .nav-item.is-open .dropdown-panel.dropdown-align-right {
transform: none;
}
#siteHeader.nav-collapsed .dropdown-grid,
#siteHeader.nav-collapsed .dropdown-grid.cols-2 {
grid-template-columns: 1fr;
max-height: none;
overflow: visible;
width: 100%;
}
#siteHeader.nav-collapsed .dropdown-link {
width: 100%;
max-width: 100%;
padding: 11px 4px;
overflow-wrap: anywhere;
}
#siteHeader.nav-collapsed .dd-desc {
display: none;
}
#siteHeader.nav-collapsed .dropdown-viewall {
margin: 6px 0 4px;
border-top: none;
padding-top: 0;
}
#siteHeader.nav-collapsed .burger {
display: flex;
}
#siteHeader.nav-collapsed .nav-cta .admin-link {
display: none;
}
#siteHeader.nav-collapsed .mobile-admin-link {
display: block;
margin-top: 8px;
border-top: 1px solid var(--panel-line);
padding-top: 18px;
}
@media (max-width: 40rem) {
.logo-text-inline {
display: none;
}
.header-row {
gap: 0.5rem;
justify-content: space-between;
}
.logo {
min-width: 0;
flex: 0 1 auto;
}
.logo-media {
width: 2.5rem;
height: 2.5rem;
}
.nav-cta {
gap: 0.375rem;
margin-left: auto;
max-width: calc(100vw - 4.5rem);
min-width: 0;
flex: 0 0 auto;
}
.nav-cta > a.btn {
min-width: 0;
padding: 0.5rem 0.5625rem;
font-size: 0.6875rem;
white-space: nowrap;
}
.header-project-link .cta-full {
display: none;
}
.header-project-link .cta-short {
display: inline;
}
.icon-btn {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.burger {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
}
@media (max-width: 22.5rem) {
.header-row {
gap: 0.375rem;
}
.logo-media {
width: 2.25rem;
height: 2.25rem;
}
.nav-cta {
gap: 0.3125rem;
}
.nav-cta > a.btn {
padding: 0.4375rem 0.5rem;
font-size: 0.65625rem;
}
.icon-btn,
.burger {
width: 1.875rem;
height: 1.875rem;
}
}
/* ----- hero ----- */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--void);
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
/* Visible the instant the hero paints — before the video has decoded
even a single frame — so a slow/late video load never reads as a
blank hole, just a calm ambient backdrop that the video fades over. */
background: radial-gradient(120% 90% at 30% 20%, #171a22, var(--void) 70%);
}
.hero-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
/* Eases in over the placeholder gradient once playback actually
starts (.is-ready, toggled in main.js on the 'playing' event)
instead of snapping in abruptly whenever the video finishes
buffering — the "late reload" felt jarring specifically because of
that hard pop-in, not just the load time itself. */
transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
/* Punchier color grading for a crisper, "HD" read — contrast is the
cheapest filter to push further (a straight per-pixel curve, no
sampling neighbourhood like blur), so most of the extra clarity comes
from there rather than saturation, which flatters footage less as it
climbs. No blur here — that's what caused the lag before; this is a
single color-matrix pass per frame, not a convolution. */
filter: saturate(1.4) contrast(1.32) brightness(1.22);
/* Forces its own GPU compositor layer instead of being repainted as part
of the page on every video frame — the single biggest lever for
keeping playback smooth once the double-decode/live-blur issue (the
actual cause of the earlier lag) is gone. Promoted from the very
first frame, not just once ready, so there's no re-layering hitch
right as playback starts. */
transform: translateZ(0);
will-change: transform, opacity;
backface-visibility: hidden;
}
.hero-media video.is-ready {
opacity: 0.92;
}
.hero-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
105deg,
rgba(4, 5, 8, 0.94) 0%,
rgba(4, 5, 8, 0.82) 24%,
rgba(4, 5, 8, 0.5) 42%,
rgba(4, 5, 8, 0.18) 58%,
transparent 74%
),
linear-gradient(
to top,
var(--void) 0%,
rgba(8, 9, 12, 0.55) 28%,
rgba(8, 9, 12, 0.18) 55%,
transparent 80%
);
}
.glow {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
}
.glow span {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.62;
/* A static gradient blurred once and then only opacity/scale-animated —
the browser composites the cached blurred layer on every frame rather
than reprocessing pixels, unlike blurring the live video would. Safe
to push further than the video's own filter for that reason. */
animation: breathe 9s ease-in-out infinite;
}
.glow span.g1 {
width: 44vw;
height: 44vw;
top: -6%;
left: 8%;
background: radial-gradient(circle, var(--circuit), transparent 70%);
animation-delay: 0s;
}
.glow span.g2 {
width: 38vw;
height: 38vw;
bottom: -10%;
right: 6%;
background: radial-gradient(circle, var(--ember), transparent 70%);
animation-delay: 3s;
}
@keyframes breathe {
0%,
100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 0.65;
transform: scale(1.12);
}
}
@media (prefers-reduced-motion: reduce) {
.glow span {
animation: none;
}
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
padding-top: calc(var(--header-h) + 58px);
padding-bottom: 88px;
transition: padding-top 0.35s ease;
}
@media (max-width: 640px) {
.hero-content {
padding-top: calc(var(--header-h) + 18px);
padding-bottom: 56px;
}
}
.hero-content .wrap {
max-width: none;
padding-left: clamp(24px, 4vw, 64px);
padding-right: clamp(24px, 4vw, 64px);
}
.hero-textbox {
max-width: 760px;
animation: panelIn 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}
@keyframes panelIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-textbox .eyebrow {
animation: fadeUp 0.7s ease-out 0.1s both;
}
.hero-textbox .hero-title {
animation: fadeUp 0.8s ease-out 0.22s both;
}
.hero-textbox .hero-sub {
animation: fadeUp 0.8s ease-out 0.38s both;
}
.hero-textbox .hero-cta {
animation: fadeUp 0.8s ease-out 0.5s both;
}
.hero-textbox .hero-foot {
animation: fadeUp 0.8s ease-out 0.62s both;
}
@media (prefers-reduced-motion: reduce) {
.hero-textbox,
.hero-textbox * {
animation: none !important;
}
}
.ink {
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.95),
0 2px 10px rgba(0, 0, 0, 0.9),
0 6px 28px rgba(0, 0, 0, 0.75);
}
.hero-title {
font-size: clamp(52px, 8.6vw, 128px);
max-width: 15ch;
color: var(--paper);
text-shadow:
0 2px 24px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.9);
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@media (max-width: 40rem) {
.hero-title {
display: block;
max-width: 100%;
font-size: clamp(2.35rem, 11.6vw, 3.05rem);
line-height: 0.96;
}
}
.hero-title em {
font-style: normal;
color: var(--ember);
text-shadow:
0 0 34px rgba(255, 122, 51, 0.55),
0 2px 24px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.9);
animation: emberPulse 3.4s ease-in-out infinite;
}
@keyframes emberPulse {
0%,
100% {
text-shadow:
0 0 24px rgba(255, 122, 51, 0.4),
0 2px 24px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.9);
}
50% {
text-shadow:
0 0 46px rgba(255, 122, 51, 0.85),
0 2px 24px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.9);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-title em {
animation: none;
}
}
.hero-sub {
margin-top: 26px;
max-width: 520px;
font-size: 17px;
line-height: 1.6;
color: var(--paper-dim);
font-weight: 400;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}
.hero-cta {
margin-top: 38px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-foot {
margin-top: 64px;
display: flex;
gap: 48px;
flex-wrap: wrap;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--mute);
letter-spacing: 0.04em;
text-transform: uppercase;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
.hero-foot span {
color: var(--paper-dim);
display: inline-block;
font-family: "Inter", sans-serif;
font-size: 13px;
text-transform: none;
margin-top: 4px;
letter-spacing: 0;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
/* ----- inner page hero (smaller, no video) ----- */
.page-hero {
position: relative;
padding: calc(var(--header-h) + 46px) 0 76px;
background: var(--void);
overflow: hidden;
border-bottom: 1px solid var(--panel-line);
transition: padding-top 0.35s ease;
}
.page-hero .glow {
opacity: 0.7;
}
.page-hero .wrap {
position: relative;
z-index: 2;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 22px;
flex-wrap: wrap;
}
.breadcrumb a:hover {
color: var(--ember);
}
.breadcrumb .sep {
opacity: 0.5;
}
.page-hero h1 {
font-size: clamp(38px, 6vw, 72px);
color: var(--paper);
max-width: 18ch;
}
.page-hero-icon-row {
display: flex;
align-items: center;
gap: 20px;
}
.page-hero-icon {
width: 64px;
height: 64px;
border-radius: 16px;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}
.page-hero-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.page-hero-icon {
width: 48px;
height: 48px;
border-radius: 12px;
}
}
.page-hero .lede {
margin-top: 20px;
max-width: 620px;
font-size: 16px;
line-height: 1.7;
color: var(--paper-dim);
}
.page-hero-meta {
margin-top: 34px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Full-bleed hero background image, sharp (not blurred), covering the
entire section — dark gradient overlay on top keeps the heading/text
readable over whatever the image contains. */
.page-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
}
.page-hero-image-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(105deg, rgba(4, 5, 8, 0.92) 0%, rgba(4, 5, 8, 0.72) 30%, rgba(4, 5, 8, 0.4) 60%, rgba(4, 5, 8, 0.22) 100%),
linear-gradient(to top, var(--void) 0%, rgba(8, 9, 12, 0.4) 30%, transparent 65%);
}
/* ----- marquee (pixel transition) ----- */
.marquee {
position: relative;
background: var(--void);
border-top: 1px solid var(--panel-line);
border-bottom: 1px solid var(--panel-line);
padding: 40px 0;
overflow: hidden;
}
.marquee::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, rgba(255, 122, 51, 0.05) 1px, transparent 1px),
linear-gradient(rgba(110, 140, 255, 0.05) 1px, transparent 1px);
background-size: 8px 8px;
pointer-events: none;
}
.marquee-track {
display: flex;
width: max-content;
animation: marqueeScroll 9s linear infinite;
}
.marquee.reverse .marquee-track {
animation-direction: reverse;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
/* A hard stop here leaves items cut off mid-word at the container's
edges (this row was never designed as a static layout) — a slow,
gentle scroll is the standard accessible marquee treatment instead
of "reduced motion" meaning "visibly broken". */
animation-duration: 90s;
}
}
.marquee-set {
display: flex;
align-items: center;
flex-shrink: 0;
}
.marquee-item {
display: flex;
align-items: center;
gap: 16px;
font-family: "Big Shoulders Display", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 35px;
letter-spacing: 0.02em;
color: var(--paper-dim);
padding: 0 22px;
white-space: nowrap;
}
.marquee-item.accent {
color: var(--ember);
}
.marquee-px {
width: 7px;
height: 20px;
background: var(--panel-line);
flex-shrink: 0;
image-rendering: pixelated;
}
.marquee-item.accent + .marquee-px,
.marquee-item + .marquee-px {
background: var(--ember);
opacity: 0.6;
}
@keyframes marqueeScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ----- about (what is bengal ai hub) ----- */
.about {
background: var(--void-soft);
padding: 120px 0;
}
.about .wrap {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 70px;
}
.about h2 {
position: relative;
font-size: clamp(46px, 6.5vw, 78px);
line-height: 1.02;
/* No max-width here anymore — the line break between "What is" and
"Bengal AI Hub" is now forced explicitly in home.blade.php (a