/* ============================================================ Goddard Withings — branded image frame "Dirty cyberpunk PCB" picture frame around every illustration. Two-layer effect: 1. The frame itself is a textured circuit-board surface with gold rim, faint trace lines, scattered solder dots, and HUD corner brackets. 2. A single warm-red LED in the bottom-right corner blinks at an irregular interval. Subtle outer bloom + slow breathe so it feels alive but not busy. ============================================================ */ .img-frame { display: inline-block; position: relative; padding: 14px; margin: 0.5em 0; border-radius: 18px; vertical-align: top; max-width: 100%; isolation: isolate; /* PCB texture — layered radial dots (solder vias) + diagonal trace lines + a worn copper-olive base. */ background: /* Solder via dots in inner corners */ radial-gradient(circle at 6% 9%, rgba(230, 182, 110, 0.55) 1.2px, transparent 2px), radial-gradient(circle at 94% 9%, rgba(230, 182, 110, 0.55) 1.2px, transparent 2px), radial-gradient(circle at 94% 91%, rgba(230, 182, 110, 0.55) 1.2px, transparent 2px), radial-gradient(circle at 6% 91%, rgba(230, 182, 110, 0.55) 1.2px, transparent 2px), /* Mid-edge solder points */ radial-gradient(circle at 50% 5%, rgba(230, 182, 110, 0.35) 1px, transparent 1.6px), radial-gradient(circle at 50% 95%, rgba(230, 182, 110, 0.35) 1px, transparent 1.6px), radial-gradient(circle at 4% 50%, rgba(95, 179, 200, 0.35) 1px, transparent 1.6px), radial-gradient(circle at 96% 50%, rgba(95, 179, 200, 0.35) 1px, transparent 1.6px), /* Diagonal copper traces — faint */ repeating-linear-gradient( 35deg, transparent 0px, transparent 9px, rgba(230, 182, 110, 0.08) 9px, rgba(230, 182, 110, 0.08) 10px, transparent 10px, transparent 22px), repeating-linear-gradient( -35deg, transparent 0px, transparent 13px, rgba(95, 179, 200, 0.05) 13px, rgba(95, 179, 200, 0.05) 14px, transparent 14px, transparent 28px), /* Random grime / wear blotches */ radial-gradient(ellipse 30% 18% at 22% 70%, rgba(0,0,0,0.25), transparent 60%), radial-gradient(ellipse 22% 14% at 78% 30%, rgba(0,0,0,0.22), transparent 60%), /* Base PCB substrate — dirty olive-copper with a slight gradient sheen */ linear-gradient(135deg, #1a1812 0%, #2a2218 35%, #221a10 70%, #15110b 100%); /* Frame's structural edges */ box-shadow: inset 0 0 0 1px rgba(230, 182, 110, 0.55), /* outer hairline gold */ inset 0 0 0 2px rgba(0, 0, 0, 0.72), /* dark gap */ inset 0 0 0 3px rgba(230, 182, 110, 0.22), /* inner thin gold */ inset 0 0 24px -4px rgba(0, 0, 0, 0.55), /* PCB vignette */ 0 12px 28px -8px rgba(0, 0, 0, 0.7), /* depth */ 0 0 22px -4px rgba(230, 182, 110, 0.18); /* warm ambient bloom */ animation: pcb-breathe 9s ease-in-out infinite; transition: transform 0.4s ease; } @keyframes pcb-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(230, 182, 110, 0.50), inset 0 0 0 2px rgba(0, 0, 0, 0.72), inset 0 0 0 3px rgba(230, 182, 110, 0.20), inset 0 0 24px -4px rgba(0, 0, 0, 0.55), 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 0 22px -4px rgba(230, 182, 110, 0.18); } 50% { box-shadow: inset 0 0 0 1px rgba(230, 182, 110, 0.68), inset 0 0 0 2px rgba(0, 0, 0, 0.72), inset 0 0 0 3px rgba(230, 182, 110, 0.30), inset 0 0 24px -4px rgba(0, 0, 0, 0.55), 0 12px 28px -8px rgba(0, 0, 0, 0.7), 0 0 32px -4px rgba(230, 182, 110, 0.32); } } /* HUD corner bracket — top-left */ .img-frame::before { content: ""; position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-top: 2px solid rgba(230, 182, 110, 0.85); border-left: 2px solid rgba(230, 182, 110, 0.85); border-top-left-radius: 10px; pointer-events: none; filter: drop-shadow(0 0 4px rgba(230, 182, 110, 0.5)); z-index: 2; } /* HUD corner bracket — bottom-right, with the LED */ .img-frame::after { content: ""; position: absolute; bottom: 5px; right: 5px; width: 22px; height: 22px; border-bottom: 2px solid rgba(230, 182, 110, 0.85); border-right: 2px solid rgba(230, 182, 110, 0.85); border-bottom-right-radius: 10px; pointer-events: none; filter: drop-shadow(0 0 4px rgba(230, 182, 110, 0.5)); z-index: 2; } /* Solitary red LED — sits at one PCB corner, blinks irregularly */ .img-frame > .img-frame__led, .img-frame::after { /* The LED itself is drawn via background on ::after */ } .img-frame > img { display: block; width: 100% !important; height: auto; border-radius: 8px; position: relative; z-index: 1; /* Image sits inside an inset well */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(230, 182, 110, 0.40), 0 0 0 2px rgba(0, 0, 0, 0.55), 0 4px 14px -2px rgba(0, 0, 0, 0.6); transition: filter 0.35s ease, transform 0.35s ease; } /* Hover: image gently lifts and brightens, frame brightens slightly */ .img-frame:hover { transform: translateY(-2px); } .img-frame:hover > img { filter: brightness(1.05) saturate(1.06); } /* The red LED — drawn as a small element injected by the JS, fixed at the bottom-left inner corner of the frame so it doesn't conflict with the corner bracket. */ .img-frame__led { position: absolute; bottom: 9px; left: 9px; width: 7px; height: 7px; border-radius: 50%; background: rgba(178, 35, 64, 0.85); box-shadow: 0 0 6px 1px rgba(178, 35, 64, 0.7), inset 0 0 1px rgba(255, 200, 200, 0.6); z-index: 3; pointer-events: none; animation: led-blink 4.2s steps(1, start) infinite; } @keyframes led-blink { 0%, 90%, 100% { opacity: 1; } 92% { opacity: 0.1; } 94% { opacity: 1; } 96% { opacity: 0.2; } 98% { opacity: 1; } } /* Companion small green "status" LED on the opposite corner */ .img-frame__led--green { bottom: auto; top: 9px; left: auto; right: 9px; background: rgba(95, 200, 130, 0.85); box-shadow: 0 0 6px 1px rgba(95, 200, 130, 0.6), inset 0 0 1px rgba(220, 255, 220, 0.6); animation: led-pulse 3.6s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Exemptions */ .brand__mark, .hero__bg img, .no-frame { box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .img-frame, .img-frame__led, .img-frame__led--green { animation: none !important; } .img-frame > img, .img-frame:hover { transition: none; transform: none; } }