/* ZBPLUGZ — zbplugz.uk
Amber Prism: the zlatko.hu theme, ported whole. Same palette, same faceted
tessellation, same fixed banner-strip + masthead lockup, same h1 rule-bars,
same square amber controls, same two-step give-way at 960px.
Three things that were ZBPLUGZ's own and are now gone, so nobody puts them
back by accident:
· the mono typeface — this theme labels everything in Arial, and hierarchy
comes from scale, letterspacing and case, not from a second family;
· the green (#AFDD5B) and the magenta reagent — there is ONE hue here.
"Released" and "in development" are the far ends of the amber ramp
(filled and hot vs dashed and dim), not two different colours;
· the millimetre grid and the giant logo wash — the facet tessellation on
is this theme's only texture, and two textures fight.
The logo art is still the green PNG on disk. It is never drawn as an
here: every appearance of the zb and the plugz is an element MASKED by the
PNG's alpha and filled with amber, so the recolour is exact, keeps every
antialiased edge, and is one custom property away from being undone. */
:root {
--ink: #1a1510; /* page */
--ink-2: #231a0e; /* the lighter middle of the masthead gradient */
--panel: #1d1710; /* dropdowns, and anything laid over the page */
--amber: #d4870a; /* the hue. everything below is this, moved */
--amber-hi: #f2b84b; /* hover, focus, live */
--amber-lit: #e4b860; /* headings and control labels */
--link: #c87d00;
--bone: #d4c89a; /* body text */
--bone-2: #b8a882; /* secondary */
--bone-3: #8e825f; /* captions, descriptions */
--hair: rgba(212,135,10,0.14); /* list rules */
--edge: rgba(212,135,10,0.38); /* control borders */
--edge-hot: rgba(212,135,10,0.75); /* armed control borders */
--wash: rgba(212,135,10,0.10); /* control fill */
--wash-2: rgba(212,135,10,0.22); /* control fill, hover */
--wash-3: rgba(212,135,10,0.28); /* control fill, armed */
/* the culture dish in the banner strip. It is laid over the gap logo.svg
leaves at 49,94 — change one and you must change the other. */
--dish: 112px;
--dish-x: 49px;
--dish-y: 94px;
/* the mark glyph, recoloured out of the green source art by masking */
--glyph: var(--amber-hi);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background-color: var(--ink);
/* triangular facet tessellation */
background-image:
linear-gradient(60deg, rgba(212,135,10,0.07) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.07) 75%),
linear-gradient(-60deg, rgba(212,135,10,0.07) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.07) 75%),
linear-gradient(60deg, rgba(212,135,10,0.04) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.04) 75%),
linear-gradient(-60deg, rgba(212,135,10,0.04) 25%, transparent 25%, transparent 75%, rgba(212,135,10,0.04) 75%);
background-size: 80px 138px, 80px 138px, 40px 69px, 40px 69px;
background-position: 0 0, 0 0, 40px 69px, 40px 69px;
background-attachment: fixed;
font-family: "Avenir Next", "Avenir", "Trebuchet MS", "Segoe UI", sans-serif;
font-size: 10.5pt;
color: var(--bone);
margin: 235px 0 100px;
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
color: var(--amber-hi);
text-decoration: none;
}
img { max-width: 100%; }
h1 {
background: rgba(212,135,10,0.13);
border-left: 3px solid var(--edge-hot);
width: 100%;
font-size: 10.5pt;
font-weight: normal;
padding: 4px 4px 4px 8px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--amber-lit);
}
/* the count that rides along in a heading — a section's rule-bar, the register
frame's title, or one of the group headings inside it */
.h1n {
color: var(--bone-3);
letter-spacing: 1.2px;
}
#main {
margin-left: 282px;
margin-right: 100px;
}
/* Anchors are in-page here, unlike zlatko.hu where every nav target is its own
file. The masthead is FIXED, so a jump would otherwise land the h1 underneath
it; this is the height of that header plus a little air. */
#main section, #main .key, #main .hit, #main .plugz > li { scroll-margin-top: 250px; }
/* ---------- the banner strip ---------- */
#logo {
position: absolute;
top: 0px;
left: 0px;
width: 210px;
height: 560px;
overflow: hidden;
background: url("logo.svg") no-repeat 0 0;
background-size: 210px 560px;
z-index: 25;
}
html * > #logo { position: fixed; }
/* ---------- the culture dish: the zb, with the plugz swarming it ----------
The one thing this site keeps that zlatko.hu has no equivalent of, because it
IS the ZBPLUGZ mark. It sits in the gap the banner leaves for it. The flies
orbit out past the ring, so nothing around it may clip. */
.culture {
position: absolute;
left: var(--dish-x);
top: var(--dish-y);
width: var(--dish);
height: var(--dish);
display: block;
z-index: 4;
overflow: visible;
}
.culture::before { /* the dish */
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--edge);
background: radial-gradient(circle at 42% 36%,
rgba(212,135,10,0.16), rgba(212,135,10,0.04) 55%, transparent 72%);
}
/* zb.png and plugz.png are green artwork with the glyph in the alpha channel.
Masked rather than drawn, so what lands on the page is amber with the art's
own antialiasing intact — a hue-rotate or a "remove black" key would fringe. */
.culture-zb {
position: absolute;
left: 50%;
top: 50%;
width: 44%;
height: calc(44% * 171 / 180); /* zb.png is 180x171 */
transform: translate(-50%, -50%);
z-index: 2;
background-color: var(--glyph);
background-image: url("assets/zb.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
-webkit-mask-image: url("assets/zb.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url("assets/zb.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
filter: drop-shadow(0 0 9px rgba(212,135,10,0.55));
}
/* app.js sets width, height and transform per fly; the transform self-centres,
so the sprite needs no margin correction whatever size it is given. */
.fly {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
will-change: transform;
pointer-events: none;
background-color: var(--amber);
background-image: url("assets/plugz.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
-webkit-mask-image: url("assets/plugz.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url("assets/plugz.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
filter: drop-shadow(0 0 4px rgba(212,135,10,0.6));
}
/* ---------- the masthead ---------- */
#head {
color: var(--bone);
position: absolute;
top: 0px;
left: 210px;
/* right rather than width:100% — with width the box runs 210px past the
viewport, which puts the tail of the gradient and of the nav off-screen */
right: 0;
height: 230px;
border-bottom: 1px solid rgba(212,135,10,0.45);
box-shadow: 0 2px 24px rgba(212,135,10,0.18);
/* visible so the nav dropdowns are not clipped by the header box */
overflow: visible;
z-index: 20;
/* layered: ambient glow + main dark gradient */
background:
linear-gradient(160deg, rgba(212,135,10,0.28) 0%, rgba(212,135,10,0.06) 28%, transparent 55%),
linear-gradient(to right, #1a1510 0%, #231a0e 38%, #1a1510 100%);
}
html * > #head { position: fixed; }
/* thin light-ray shafts */
#head::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(158deg, rgba(242,184,75,0.20) 0%, transparent 14%),
linear-gradient(164deg, rgba(242,184,75,0.10) 0%, transparent 18%),
linear-gradient(149deg, rgba(242,184,75,0.06) 0%, transparent 24%);
pointer-events: none;
}
/* glowing bottom hairline sweep */
#head::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 55%; height: 2px;
background: linear-gradient(to right, rgba(242,184,75,0.7), transparent);
pointer-events: none;
}
/* the one line of type in the masthead's upper half, where zlatko.hu leaves the
rays to do the talking — a shop has to say what it sells above the fold */
#headline {
position: absolute;
top: 92px;
left: 82px;
right: 24px;
z-index: 2;
margin: 0;
font-size: 9pt;
letter-spacing: 3.4px;
text-transform: uppercase;
color: var(--amber-lit);
text-shadow: 0 0 18px rgba(212,135,10,0.5), 1px 1px 3px rgba(0,0,0,0.9);
}
#headline .sep { color: rgba(212,135,10,0.55); padding: 0 4px; }
#navbar {
position: absolute;
top: 175px;
left: 80px;
/* a definite width instead of shrink-to-fit: if the tabs ever do outgrow the
bar they wrap and stay clickable rather than running off the edge of a
fixed header nothing can scroll */
right: 16px;
font-size: 19pt;
color: var(--bone);
text-shadow: 0 0 22px rgba(212,135,10,0.65), 1px 1px 4px rgba(0,0,0,0.9);
}
html * > #navbar { top: 157px; }
#head a { color: #c0a870; }
#head a:hover {
color: var(--amber-hi);
text-decoration: none;
}
/* ---------- primary navigation with dropdowns ---------- */
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
display: flex;
/* Keep the navigation as one stable row. The masthead may become narrower,
but the menu itself should not reflow into a different arrangement. */
flex-wrap: nowrap;
align-items: baseline;
gap: 10px;
white-space: nowrap;
}
#nav > li {
position: relative;
display: flex;
align-items: baseline;
}
/* the old " | " separators, now drawn by CSS */
#nav > li + li::before {
content: none;
}
#nav > li > a {
white-space: nowrap;
display: inline-flex;
align-items: center;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid rgba(212,135,10,0.28);
background: linear-gradient(to bottom, rgba(212,135,10,0.14), rgba(212,135,10,0.06));
box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset, 0 8px 18px rgba(0,0,0,0.18);
color: var(--amber-lit);
letter-spacing: 2px;
text-transform: uppercase;
}
#nav > li > a:hover,
#nav > li > a:focus-visible {
background: linear-gradient(to bottom, rgba(242,184,75,0.20), rgba(212,135,10,0.11));
border-color: rgba(242,184,75,0.55);
}
/* caret button that opens a submenu — kept narrow so the tabs still fit on one
line, with an invisible 30px hit area for touch */
.sub-toggle {
position: relative;
font: inherit;
font-size: 10pt;
line-height: 1;
background: rgba(212,135,10,0.10);
border: 1px solid rgba(212,135,10,0.24);
border-radius: 999px;
margin: 0;
padding: 5px 8px;
color: rgba(192,168,112,0.88);
cursor: pointer;
text-shadow: none;
box-shadow: 0 8px 18px rgba(0,0,0,0.14);
}
.sub-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
}
.sub-toggle:hover,
#nav > li[data-open] > .sub-toggle {
color: var(--amber-hi);
background: rgba(212,135,10,0.18);
border-color: rgba(242,184,75,0.55);
}
.sub-toggle:focus-visible,
#nav a:focus-visible {
outline: 1px dotted var(--amber-hi);
outline-offset: 3px;
}
.sub-caret {
display: inline-block;
transition: transform 0.15s ease;
}
#nav > li[data-open] > .sub-toggle .sub-caret { transform: rotate(180deg); }
/* ---------- the dropdown panel ---------- */
#nav .sub {
display: none;
position: absolute;
top: 100%;
left: -10px;
min-width: 230px;
margin-top: 12px;
padding: 8px 0;
background: linear-gradient(to bottom, rgba(29,23,16,0.98), rgba(22,18,13,0.96));
border: 1px solid rgba(212,135,10,0.30);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,0.72), 0 0 26px rgba(212,135,10,0.12);
backdrop-filter: blur(8px);
font-size: 9.5pt;
letter-spacing: 1.2px;
text-transform: uppercase;
text-shadow: none;
z-index: 50;
/* the catalogue menus are as long as the catalogue — 27 effects will not fit
on any screen, so they scroll inside the panel like the compact bar's do */
max-height: 62vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* invisible bridge so the pointer can cross the gap without closing */
#nav .sub::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
#nav > li[data-open] > .sub { display: block; }
/* no-JS fallback: hover and keyboard focus alone open the menu */
html:not(.js) #nav > li:hover > .sub,
html:not(.js) #nav > li:focus-within > .sub { display: block; }
html:not(.js) .sub-toggle { cursor: default; }
#nav .sub li { display: block; }
#nav .sub a {
display: block;
padding: 9px 15px;
color: var(--bone-2);
text-decoration: none;
}
#nav .sub a:hover,
#nav .sub a:focus {
background: rgba(212,135,10,0.15);
color: var(--amber-hi);
}
#nav .sub a.ittvagyunk { text-shadow: none; }
#nav .sub .ext { color: rgba(192,168,112,0.6); }
/* the catalogue menus carry the plugin's category alongside its name */
#nav .sub .subcat {
float: right;
margin-left: 12px;
color: rgba(192,168,112,0.5);
font-size: 8.5pt;
}
@media (prefers-reduced-motion: reduce) {
.sub-caret { transition: none; }
}
/* ---------- the narrow-viewport bar ---------- */
/* Up to two menus — the section, then the place inside it — that app.js builds
from the markup already present in the page. Hidden until the masthead gives
way to it in the phone block at the end of this file.
The section menu is only built when the masthead has more than one tab, which
it usually does not: with one tab its panel would hold one entry, so app.js
drops it and the place menu takes the whole bar. Nothing here needs to know
which case it is — both menus are .navmob-menu and they share the width.
They are not