/* ========================================================================== Beacon Capital - Floating Dock V3 refinement layer Loaded immediately AFTER bc-floating-dock.css. Every rule stays namespaced under #bc-dock, so the component's zero-geometry contract is unchanged. Nothing here alters structure, order, spacing rhythm, sizing or behaviour. COLOUR POLICY (revised) Each platform now carries its own recognisable brand colour AT REST, but the colour lives in the GLYPH only. The rail, the plates, the borders and the label panels stay in the Beacon dark/gold system, so the dock still reads as one premium object rather than a strip of coloured stickers. Hover and keyboard focus then add a restrained brand-tinted wash, a brand hairline and a soft brand glow - a highlight, never a saturated colour block. CONTRAST Brand hexes are tuned, not copied. Several official values (Facebook #1877F2, LinkedIn #0A66C2, Pinterest #E60023, X #000, TikTok #000) are too dark to read on the near-black rail, so each is lifted to the lightest value that is still unmistakably that platform. Every glyph below clears 4.5:1 against the rail gradient. GRADIENTS Instagram and TikTok are gradient marks by identity. They are painted from two definitions emitted once by bc-floating-dock.php (#bc-dock-ig, #bc-dock-tt). Both fills declare a solid fallback colour after the url(), so a missing paint server can never leave a glyph unpainted. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PER-PLATFORM BRAND TOKENS --bc-brand glyph colour --bc-brand-rgb same colour as raw channels, for the tinted hover states -------------------------------------------------------------------------- */ #bc-dock .bc-dock__item--social, #bc-dock .bc-dock__item--wa, #bc-dock .bc-dock__item--doc { --bc-brand: var(--bc-gold); --bc-brand-rgb: 209,170,109; } /* WhatsApp - official #25D366, already legible on dark. */ #bc-dock .bc-dock__item--wa { --bc-brand:#25D366; --bc-brand-rgb:37,211,102; } /* Facebook - #1877F2 lifted to hold contrast on the rail. */ #bc-dock .bc-dock__item--social[data-social="facebook"] { --bc-brand:#5A8DFF; --bc-brand-rgb:90,141,255; } /* Instagram - amber -> pink -> violet gradient, fallback pink. */ #bc-dock .bc-dock__item--social[data-social="instagram"] { --bc-brand:#E1306C; --bc-brand-rgb:225,48,108; } /* LinkedIn - #0A66C2 lifted; kept deeper than Facebook so the two blues read apart. */ #bc-dock .bc-dock__item--social[data-social="linkedin"] { --bc-brand:#2F86D8; --bc-brand-rgb:47,134,216; } /* X - the mark is black on light and white on dark. The rail is dark. */ #bc-dock .bc-dock__item--social[data-social="x"] { --bc-brand:#FFFFFF; --bc-brand-rgb:255,255,255; } /* Pinterest - #E60023 lifted; kept crimson so it reads apart from YouTube red. */ #bc-dock .bc-dock__item--social[data-social="pinterest"] { --bc-brand:#F03A52; --bc-brand-rgb:240,58,82; } /* TikTok - white mark with the cyan/magenta offset accent, as a gradient. */ #bc-dock .bc-dock__item--social[data-social="tiktok"] { --bc-brand:#FFFFFF; --bc-brand-rgb:255,255,255; } /* YouTube - #FF0000 softened a shade; pure red vibrates against near-black. */ #bc-dock .bc-dock__item--social[data-social="youtube"] { --bc-brand:#FF4B45; --bc-brand-rgb:255,75,69; } /* Snapchat - #FFFC00 pulled back from fluorescent so it stays premium. */ #bc-dock .bc-dock__item--social[data-social="snapchat"] { --bc-brand:#F2EC4B; --bc-brand-rgb:242,236,75; } /* Telegram - #229ED9 opened up to its recognisable light blue. */ #bc-dock .bc-dock__item--social[data-social="telegram"] { --bc-brand:#4FC0F0; --bc-brand-rgb:79,192,240; } /* Catalogue + Company Profile - Beacon gold, the house accent. */ #bc-dock .bc-dock__item--doc { --bc-brand:var(--bc-gold); --bc-brand-rgb:209,170,109; } /* -------------------------------------------------------------------------- 2. RESTING GLYPH The colour is applied to .bc-dock__icon, NOT to the item. Two reasons: - the mobile tray label inherits its colour from the item, so colouring the item would tint ten labels in ten different colours; - a declaration on the icon beats the item's inherited colour outright, including the softened `.is-unconfigured` ivory, with no specificity war. A light desaturation at rest is deliberate: the dock reads as one object first and a colour set second. Hover restores full saturation. -------------------------------------------------------------------------- */ #bc-dock .bc-dock__item--social .bc-dock__icon, #bc-dock .bc-dock__item--wa .bc-dock__icon, #bc-dock .bc-dock__item--doc .bc-dock__icon { color: var(--bc-brand); filter: saturate(.9); transition: color var(--bc-dur) var(--bc-ease), filter var(--bc-dur) var(--bc-ease); } /* Gradient marks. The trailing colour is the CSS fallback. */ #bc-dock .bc-dock__item--social[data-social="instagram"] .bc-dock__icon svg path { fill: url(#bc-dock-ig) #E1306C; } #bc-dock .bc-dock__item--social[data-social="tiktok"] .bc-dock__icon svg path { fill: url(#bc-dock-tt) #FFFFFF; } /* -------------------------------------------------------------------------- 3. HOVER / FOCUS / ACTIVE Replaces the shared gold fill for these items with a brand-tinted wash at 14%, a brand hairline and a soft brand glow. The glyph goes fully saturated and a touch brighter, which is the "more vivid on hover" behaviour. `color` is pinned to ivory rather than the inherited obsidian so the mobile tray label stays legible against the dark wash. -------------------------------------------------------------------------- */ #bc-dock .bc-dock__item--social:hover, #bc-dock .bc-dock__item--social:focus, #bc-dock .bc-dock__item--social:focus-visible, #bc-dock .bc-dock__item--wa:hover, #bc-dock .bc-dock__item--wa:focus, #bc-dock .bc-dock__item--wa:focus-visible, #bc-dock .bc-dock__item--doc:hover, #bc-dock .bc-dock__item--doc:focus, #bc-dock .bc-dock__item--doc:focus-visible { background-color: rgba(var(--bc-brand-rgb), .14); border-color: rgba(var(--bc-brand-rgb), .48); color: var(--bc-white); box-shadow: 0 0 0 1px rgba(var(--bc-brand-rgb), .16), 0 8px 20px rgba(var(--bc-brand-rgb), .20); } /* The unconfigured social buttons carry a higher-specificity hover rule in the base sheet. Restated here so the brand treatment applies to them too - the complete coloured dock is reviewable before the URLs are supplied, and the "Link coming soon" note plus aria-disabled still carry the unconfigured state, so nothing promises a live destination. */ #bc-dock .bc-dock__item--social.is-unconfigured:hover, #bc-dock .bc-dock__item--social.is-unconfigured:focus, #bc-dock .bc-dock__item--social.is-unconfigured:focus-visible { background-color: rgba(var(--bc-brand-rgb), .14); border-color: rgba(var(--bc-brand-rgb), .48); color: var(--bc-white); box-shadow: 0 0 0 1px rgba(var(--bc-brand-rgb), .16), 0 8px 20px rgba(var(--bc-brand-rgb), .20); } #bc-dock .bc-dock__item--social:hover .bc-dock__icon, #bc-dock .bc-dock__item--social:focus .bc-dock__icon, #bc-dock .bc-dock__item--social:focus-visible .bc-dock__icon, #bc-dock .bc-dock__item--wa:hover .bc-dock__icon, #bc-dock .bc-dock__item--wa:focus .bc-dock__icon, #bc-dock .bc-dock__item--wa:focus-visible .bc-dock__icon, #bc-dock .bc-dock__item--doc:hover .bc-dock__icon, #bc-dock .bc-dock__item--doc:focus .bc-dock__icon, #bc-dock .bc-dock__item--doc:focus-visible .bc-dock__icon { filter: saturate(1.18) brightness(1.08); } /* Pressed feedback - matters most on touch, where there is no hover. */ #bc-dock .bc-dock__item--social:active, #bc-dock .bc-dock__item--wa:active, #bc-dock .bc-dock__item--doc:active { background-color: rgba(var(--bc-brand-rgb), .22); border-color: rgba(var(--bc-brand-rgb), .62); } /* X and TikTok resolve to white. Their wash is near-invisible, so the hairline is strengthened to keep the hovered item clearly delineated. */ #bc-dock .bc-dock__item--social[data-social="x"]:hover, #bc-dock .bc-dock__item--social[data-social="x"]:focus-visible, #bc-dock .bc-dock__item--social[data-social="tiktok"]:hover, #bc-dock .bc-dock__item--social[data-social="tiktok"]:focus-visible { border-color: rgba(252,250,246,.58); } /* -------------------------------------------------------------------------- 4. RESTING POLISH -------------------------------------------------------------------------- */ #bc-dock .bc-dock__item { transition: background-color var(--bc-dur) var(--bc-ease), border-color var(--bc-dur) var(--bc-ease), color var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), transform var(--bc-dur) var(--bc-ease); } /* Glyph lift on hover. Restated at .is-unconfigured specificity so the coloured social buttons animate identically whether or not a URL is configured. */ #bc-dock .bc-dock__item--social:hover .bc-dock__icon svg, #bc-dock .bc-dock__item--social:focus-visible .bc-dock__icon svg, #bc-dock .bc-dock__item--social.is-unconfigured:hover .bc-dock__icon svg, #bc-dock .bc-dock__item--social.is-unconfigured:focus-visible .bc-dock__icon svg { transform: scale(1.1); } /* The X mark is a thin geometric wordmark and reads smaller than the enclosed brand glyphs beside it. A small optical bump evens the rail. */ #bc-dock .bc-dock__item--social[data-social="x"] .bc-dock__icon svg { transform: scale(.92); } #bc-dock .bc-dock__item--social[data-social="x"]:hover .bc-dock__icon svg, #bc-dock .bc-dock__item--social[data-social="x"]:focus-visible .bc-dock__icon svg { transform: scale(1.02); } /* The gold "Link coming soon" note sits under a now-coloured glyph. Held at gold so it reads as a Beacon system note, not as part of the platform mark. */ #bc-dock .bc-dock__soon { color: var(--bc-gold); } /* The zero-size sprite must never be able to take up space or be hit. */ #bc-dock-paint { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #bc-dock .bc-dock__item, #bc-dock .bc-dock__icon, #bc-dock .bc-dock__icon svg { transition-duration: .01ms !important; } }