/* ============================================================ Atom logos — drawn accurately to electron configuration. ------------------------------------------------------------ Variants (all on .atom.atom--): .atom--cesium Cs = [Xe] 6s¹ silver .atom--rubidium Rb = [Kr] 5s¹ silver Sizes: default 2.85em (header / hero) .atom--sm 1.15em (inline next to CV titles) Motion paths are defined ONCE in a hidden ; every atom references them via and . All animation is SMIL — driven by SVG user coordinates so it stays correct at any rendered size. ============================================================ */ .atom { width: 2.85em; /* header / hero — sits next to the name */ height: 2.85em; flex-shrink: 0; color: var(--atom-orbit); vertical-align: middle; overflow: visible; } /* Feature atom: lives in its own column inside a CV entry / thesis card. */ .atom--feature { width: 100%; height: 100%; } /* --- orbital shapes (no filter: they should NOT glow) --- */ .atom .shell { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.55; } .atom .p-orbital .lobe { fill: currentColor; opacity: 0.22; } .atom .p-orbital--empty .lobe { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.35; } /* --- nucleus: flat palette fill --- */ .atom .nucleus { fill: var(--atom-nucleus); } .atom .nucleus-label { font: 600 11px/1 var(--font-sans); fill: var(--bg); user-select: none; } /* --- electrons --- */ .atom .electron { fill: var(--atom-nucleus); } /* --- dark-mode glow on the moving parts only --- */ :root[data-theme="dark"] .atom .electron { filter: drop-shadow(0 0 1.6px var(--atom-glow)); } :root[data-theme="dark"] .atom .nucleus { filter: drop-shadow(0 0 2.5px rgba(232, 237, 244, 0.55)); } .atom.atom-modal__visual { width: min(70vw, 24rem); height: min(70vw, 24rem); } /* Reduced motion: js/theme.js calls svg.pauseAnimations() so SMIL freezes */