elements in #mainContainer. Each holds an SVG of text rendered in Libre Barcode 128 (machine-readable Code-128; visually unreadable as text). Hidden message for visitors who decode the barcode. syncBarcodeDividers (albumSiteBootstrap.js) owns all geometry at runtime: - .barcodeInner width = section.sectionContainer.width + 2*(standoff + braceOutset), so the bars align to the OUTER brace verticals (the same X positions the L-bracket frames around each section sit at). - SVG viewBox is set per divider so all dividers render at the SAME visible-bar height (= shorter barcode's natural ink height; taller barcodes are symmetric-cropped top + bottom). - Divider margin-top + margin-bottom absorb the prev/next section's natural trailing/leading empty space so the visible gap between the last/first visible content of those sections and the bar edges equals 1 bar-height on each side. Padding-top = padding-bottom = 0. Architectural rule for future renovators (read before adding visual decorations to sections): decorative pseudo-elements (::before, ::after) inside any #mainContainer

must NOT visually paint below section.bottom or above section.top. Today's section braces (drawn as pseudo-elements with --braceTop / --braceHeight) stay strictly inside the layout box. The divider's descendant walk uses querySelectorAll('*') which can't reach pseudo-elements; the bound on pseudo-element extent is what lets the section's layout rect serve as a safe outer enclosure. Violating this rule allows a pseudo to visually overlap the divider. */ .barcodeDivider { display: block; width: 100%; background: var(--backgroundBlack); text-align: center; /* Hide until JS sizing pass runs. syncBarcodeDividers sets visibility to 'visible' after viewBox + margin are set. Prevents a one-frame flash where the SVG would render at its intrinsic 300x150. */ visibility: hidden; /* JS owns vertical spacing entirely via margin-top / margin-bottom. Padding is zeroed so the SVG's display top/bottom == the divider's content-box edge, simplifying the gap-equals-bar-height invariant. */ padding-top: 0; padding-bottom: 0; } /* Inner wrapper that holds the SVG. Width is set in JS to the brace span (= sectionContainer.width + 2*(standoff + braceOutset)). margin: 0 auto centers horizontally inside the divider's full-width outer box. */ .barcodeDivider .barcodeInner { margin: 0 auto; /* Fallback width pre-JS so layout is sane if syncBarcodeDividers fails to run. JS overrides this with the measured brace-span width. */ width: 100%; } .barcodeDivider .barcodeSvg { display: block; width: 100%; height: auto; /* overflow:hidden is REQUIRED — the SVG viewBox is set to a CROPPED ink window for each barcode (Pass C in syncBarcodeDividers), and we rely on the SVG to clip the parts of the text bars that fall outside that window. overflow:visible would let those clipped slices paint. */ overflow: hidden; opacity: 0.10; } .barcodeDivider .barcodeText { font-family: 'Libre Barcode 128', monospace; /* Numeric font-size so the SVG measurement at first paint gives a meaningful bbox in user units. Display size comes from the viewBox set by syncBarcodeDividers — this value is just the measurement reference. */ font-size: 100px; /* Matches the visible color of the music-video workshop button border (--musicVideoButtonBorderBright in desktop.css). That override paints the frame via gradient background-image, NOT via the base --preSaveBorder token — so we hard-code the same #A6DBFE here for visual consistency rather than reaching into the workshop-local var. */ fill: #A6DBFE; dominant-baseline: hanging; } /* === Social icon brand colors =========================================== Each social link wears its platform's brand colour by default. Layout sizing + the gold default + hover transition all live in desktop.css / mobile.css — these rules only override the colour per platform via the aria-label attribute selector. Order matters: any global hover rule (e.g. desktop .socialIcon:hover → white) still wins on hover so the interactive feedback stays consistent across all five icons. X (formerly Twitter) is monochrome in its current brand book; on this site's black background, white is its visible equivalent. */ .socialIcon[aria-label="Spotify"] { color: #1DB954; } .socialIcon[aria-label="X"] { color: #FFFFFF; } .socialIcon[aria-label="Facebook"] { color: #1877F2; } .socialIcon[aria-label="YouTube"] { color: #FF0000; } /* Instagram's brand IS the canonical orange→pink→purple→blue gradient. Applied to the inner with background-clip:text so the gradient fills the icon glyph itself. The hover/active rule resets the gradient so the default white-hover behaviour applies cleanly. */ .socialIcon[aria-label="Instagram"] .fa-instagram { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 70%, #515BD4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .socialIcon[aria-label="Instagram"]:hover .fa-instagram, .socialIcon[aria-label="Instagram"]:active .fa-instagram { background: none; -webkit-text-fill-color: #ffffff; color: #ffffff; }