/* Shared Copper Trader site chrome — base type/colors, scrollbars, nav chips. One source instead of a copy pasted into every page's . url() paths resolve relative to THIS file, so they work from any depth. */ * { box-sizing: border-box; } html, body { margin: 0; overscroll-behavior-y: none; } body { zoom: 0.9; background-color:#05060a; image-rendering:pixelated; color:#e6cd8f; font-family:'IM Fell English', Georgia, serif; letter-spacing:.2px; } a { color:#d8b24a; text-decoration:none; } a:hover { color:#f4dd9e; text-shadow:0 0 8px rgba(226,185,74,.55); } ::selection { background:#6b5a2a; color:#f7ecc8; } ::-webkit-scrollbar { width:14px; height:14px; } ::-webkit-scrollbar-track { background:#14110a; box-shadow:inset 0 0 5px rgba(0,0,0,.8); } ::-webkit-scrollbar-thumb { background:linear-gradient(#6a6238, #332f18); border:1px solid rgba(0,0,0,.7); box-shadow:inset 0 1px 1px rgba(210,190,120,.4); } ::-webkit-scrollbar-thumb:hover { background:linear-gradient(#847a44, #443f22); } .nav-chip { padding:6px 16px; border:1px solid rgba(190,168,96,.55); background:linear-gradient(rgba(30,26,12,.55), rgba(10,9,4,.78)), url("textures/stone-brick.jpg") center / 150px; color:#f0d89a; font-family:'IM Fell English SC', Georgia, serif; font-size:13px; letter-spacing:1.5px; text-shadow:0 1px 1px #000; box-shadow:inset 0 1px 1px rgba(200,180,110,.28), 0 2px 5px rgba(0,0,0,.5); } .nav-chip:hover { border-color:rgba(226,185,74,.9); color:#fff2c9; text-shadow:0 0 8px rgba(226,185,74,.6); } .nav-chip--back { border-color: rgba(150,70,50,.6); background:linear-gradient(rgba(40,16,10,.6), rgba(14,6,3,.8)), url("textures/stone-brick.jpg") center / 150px; color:#e6a488; box-shadow:inset 0 1px 1px rgba(210,150,120,.28), 0 2px 5px rgba(0,0,0,.5); } .nav-chip--back:hover { border-color:rgba(226,120,90,.9); color:#ffd8c4; text-shadow:0 0 8px rgba(226,120,90,.6); } /* Post-list horizontal card (dev-blog.html + every card the Post Creator publishes): a fixed 160px thumbnail plus the row's own padding/gap left only ~80px for the title/date/excerpt on a phone -- barely wider than one word per line. Stacked below 560px. */ .blog-card { display:flex; gap:14px; align-items:center; } .blog-thumb { flex:0 0 160px; } @media (max-width: 560px) { .blog-card { flex-direction:column; align-items:stretch; } .blog-thumb { flex:0 0 auto; width:100%; } }