/* ============================================================ Atom logos — drawn accurately to electron configuration. ------------------------------------------------------------ Variants (all on .atom.atom--): .atom--carbon C = [He] 2s² 2p² matte black .atom--silicon Si = [Ne] 3s² 3p² silver .atom--cesium Cs = [Xe] 6s¹ silver .atom--rubidium Rb = [Kr] 5s¹ silver Sizes: default 1.6em (header / hero) .atom--sm 1.15em (inline next to CV titles) Motion paths + metallic gradient 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.5em; /* header / hero — sits next to the name */ height: 2.5em; 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. Sized to match the header carbon visually. */ .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: polished metallic disc (gradient per material) --- */ .atom .nucleus { fill: url(#atom-metal-silver); } .atom--carbon .nucleus { fill: url(#atom-metal-carbon); } .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)); } /* ============================================================ Carbon variant — matte black, no neon glow ============================================================ */ .atom--carbon { /* nucleus gradient is swapped via the fill rule above; these vars still drive orbit-stroke colour + electron colour. */ --atom-orbit: var(--carbon-orbit); --atom-nucleus: var(--carbon-nucleus); } /* Carbon label always light — dark nucleus needs light text in both themes */ .atom--carbon .nucleus-label { fill: #e8e8e8; } /* Carbon doesn't glow */ :root[data-theme="dark"] .atom--carbon .electron { filter: none; } :root[data-theme="dark"] .atom--carbon .nucleus { filter: none; } /* Reduced motion: js/theme.js calls svg.pauseAnimations() so SMIL freezes */