/* * DenaCopy OPC — modern visual refresh, revision 2 * * Add this file to /OPC/ and load it AFTER the existing stylesheets: * * * Keep the original HTML, PHP, JavaScript and stylesheets intact. * No controls, labels, options, positions, dimensions, order IDs, * calculations, checkout links or event handlers are replaced. * Remove the link above to revert this styling. * * Rules intentionally avoid layout, visibility, opacity, transforms, * pointer events, font metrics, and backgrounds on validated fields. * Existing pink validation backgrounds and disabled states remain intact. * Print styles are untouched. */ @media screen { body:has(.pricing-container) { background: radial-gradient(ellipse at 85% 12%, rgba(249, 115, 22, .12), transparent 45%), radial-gradient(ellipse at 12% 90%, rgba(62, 108, 173, .16), transparent 55%), #121c2b !important; } /* The original calculator panel, at its original coordinates. */ .pricing-container .denastyle2 { background: #ffffff !important; border-radius: 20px !important; box-shadow: inset 0 3px 0 #f47a27, 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 64px rgba(0, 8, 24, .28) !important; } .pricing-container .denastyle3 { color: #172538 !important; text-shadow: none !important; } .pricing-container .denastyle12 { color: #596777 !important; } .pricing-container .denastyle13 { color: #a53d07 !important; border-radius: 4px !important; background-color: #ffead8 !important; } .pricing-container .denastyle14 { color: #536272 !important; } /* Existing binding accent strip. */ .pricing-container .denastyle17 { background: linear-gradient(90deg, #ffc58f, #fff1e3) !important; } /* Keep original field borders' widths, padding and box sizing. */ .pricing-container .pricing-body.noprint select, .pricing-container .pricing-body.noprint input[type="number"], .pricing-container .pricing-body.noprint input[type="text"], .pricing-container .denastyle9 { border-color: #cbd4df !important; border-radius: 7px !important; box-shadow: 0 1px 2px rgba(15, 30, 50, .04), inset 0 1px 0 rgba(255, 255, 255, .35); } .pricing-container .pricing-body.noprint select:not(:disabled):hover, .pricing-container .pricing-body.noprint input[type="number"]:not(:disabled):hover, .pricing-container .pricing-body.noprint input[type="text"]:not(:disabled):hover { border-color: #f47a27 !important; box-shadow: 0 0 0 2px rgba(244, 122, 39, .12); } .pricing-container .pricing-body.noprint select:focus-visible, .pricing-container .pricing-body.noprint input:focus-visible, .pricing-container button.noprint:focus-visible, .pricing-container .noprint button:focus-visible, .pricing-container a.noprint:focus-visible, .pricing-container .noprint a:focus-visible { outline: 2px solid #ed6b17 !important; outline-offset: 2px; } .pricing-container .pricing-body.noprint input[type="checkbox"], .pricing-container .pricing-body.noprint input[type="range"] { accent-color: #ed6b17; } .pricing-container .denastyle27 { background: #e7ecf1 !important; color: #3b4b5c !important; border-radius: 4px; } .pricing-container .denastyle28, .pricing-container .denastyle29 { border-color: #cbd3dc !important; border-radius: 5px; } .pricing-container .pricing-body.noprint hr { border-color: #e0e5ea !important; } /* Information/help panels keep their existing visibility behaviour. */ .pricing-container .denastyle6, .pricing-container .tooltips.noprint { color: #ffffff !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(153, 181, 219, .16), 0 20px 48px rgba(0, 8, 24, .25) !important; } .pricing-container .denastyle6 h3, .pricing-container .tooltips.noprint h2, .pricing-container .tooltips.noprint h3 { color: #ffffff !important; text-shadow: none !important; } .pricing-container .denastyle8 { background: #ffffff !important; color: #172538 !important; border-radius: 7px !important; box-shadow: 0 4px 16px rgba(26, 41, 56, .13); } /* Retain express/normal colour distinction and both existing actions. */ .pricing-container .pricing-footer.bg2.noprint { background: linear-gradient(135deg, #b94345, #922c35) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 24px rgba(35, 5, 12, .22) !important; } .pricing-container .pricing-footer.bg3.noprint { background: linear-gradient(135deg, #34705a, #235442) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(3, 30, 20, .22) !important; } .pricing-container #totalprice, .pricing-container #totalprice2, .pricing-container #unitprice, .pricing-container #unitprice2 { text-shadow: none !important; } .pricing-container #pricepopup_x, .pricing-container #pricepopup_n, .pricing-container .resumeorder.noprint { background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 0 0 1px #dfe4e9, 0 24px 56px rgba(0, 8, 24, .25) !important; } .pricing-container button.noprint, .pricing-container .noprint button { border-radius: 8px !important; border-color: rgba(39, 51, 64, .24) !important; box-shadow: 0 2px 5px rgba(27, 38, 51, .09); text-shadow: none !important; } /* Labels outside the white panel remain legible on the navy surface. */ .pricing-container #pricediv > .pricing-footer.bg2 > div:first-child { color: #ffb0ac !important; } .pricing-container #pricediv > .pricing-footer.bg3 > div:first-child { color: #a1dec3 !important; } .pricing-container #pricediv > div.noprint { color: #e7edf7 !important; } .pricing-container .denastyle4 { color: #bac9df !important; } .pricing-container .denastyle6 h3 { color: #ffbc8c !important; } .pricing-container .denastyle6 video, .pricing-container .tooltips.noprint video { border-radius: 10px; } .pricing-container button.noprint:not(:disabled):hover, .pricing-container .noprint button:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px rgba(15, 30, 50, .18); border-color: #ef8d47 !important; } .pricing-container button.noprint:not(:disabled):active, .pricing-container .noprint button:not(:disabled):active { box-shadow: inset 0 2px 4px rgba(15, 30, 50, .14); } }