/* ---------- The neighborhood ---------- A cup in the dock that pours out the 88x31 buttons of other people's sites, plus a blogroll and jeni's own button for others to take. Every axis of the design is a class on , written once at boot by js/neighborhood.js from config/settings: nb--layout-pour | nb--layout-cork nb--art-glossy | nb--art-pixel nb--ent-spring | nb--ent-drift | nb--ent-perk nb--dress-tape | nb--dress-pins | nb--dress-washi nb--frame-none | nb--frame-hairline | nb--frame-inset | nb--frame-glow nb--chip-ghost | nb--chip-red | nb--chip-rose | … nb--heart (optional) nb-open (while the thing is open) The classes live on the root element rather than on a wrapper because the cork overlay must escape the dock: .vertical-dock has a backdrop-filter, which makes it a containing block for position:fixed children, so the overlay is a sibling of the dock and both need to see the same config. The three entrances are four custom properties each, and BOTH layouts read the same four. That is the whole trick: any entrance works with any layout for free, because the pour column animates .nb-b88 and the board animates .nb-pin from one set of variables. */ /* ---------- entrance tempos ---------- */ .nb--ent-spring { --nb-dur: 420ms; --nb-fade: 200ms; --nb-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --nb-d0: 40ms; --nb-step: 70ms; --nb-sway: 0px; } .nb--ent-drift { --nb-dur: 700ms; --nb-fade: 340ms; --nb-ease: cubic-bezier(0.22, 0.9, 0.3, 1); --nb-d0: 60ms; --nb-step: 130ms; --nb-sway: 3px; } .nb--ent-perk { --nb-dur: 340ms; --nb-fade: 160ms; --nb-ease: cubic-bezier(0.2, 1.8, 0.45, 1); --nb-d0: 120ms; --nb-step: 55ms; --nb-sway: 0px; } /* ---------- the cup in the dock ---------- .dock-nb also carries .dock-item, so the 36px box, the hover spring, the tilt, the glow ring and the tooltip all come from css/dock.css. Only what is genuinely different lives here. */ /* .dock-item was written for anchors, so it never resets the UA button styling — and this is a