/* ═══════════════════════════════════════════════════════════════════ ChinPost — Button Forge (tactile / skeuomorphic upgrade layer) Design language: physical hardware buttons. Strict top-left light (135deg), layered inset bevels + stacked outer shadows, machined metal sheen, spring-eased press physics (scale + shadow tighten). SAFETY: visual properties ONLY — no width/height/padding/margin changes, so layout & responsiveness are untouched. ═══════════════════════════════════════════════════════════════════ */ :root { --cpb-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cpb-ease: cubic-bezier(0.22, 1, 0.36, 1); --cpb-gold-hi: #ffe9a8; --cpb-gold: #f3cd6b; --cpb-gold-deep: #d4af37; --cpb-gold-edge: #8a6d1f; } /* ——— Shared press physics for every upgraded control ——— */ .cp-hero-ctas a, .cp-journey-btn, .cp-luxe-contact-btn, .cp-read-more-btn, #cp-cta-whatsapp, .cp-wa-btn { transition: transform .22s var(--cpb-spring), box-shadow .22s var(--cpb-ease), background .25s var(--cpb-ease), filter .25s var(--cpb-ease); -webkit-tap-highlight-color: transparent; } .cp-hero-ctas a:active, .cp-journey-btn:active, .cp-luxe-contact-btn:active, .cp-read-more-btn:active, #cp-cta-whatsapp:active, .cp-wa-btn:active { transform: translateY(2px) scale(0.97) !important; } /* ── Universal tactile baseline: every button-like element, site-wide ── */ a[class*="btn" i], button[class*="btn" i], input[type="submit"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 0 rgba(0,0,0,0.16), 0 10px 22px rgba(2,6,23,0.16); } a[class*="btn" i]:active, button[class*="btn" i]:active, input[type="submit"]:active { transform: translateY(2px) scale(0.98); } /* ——— GOLD primary buttons: domed metal, lit from top-left ——— */ .cp-hero-ctas a:first-child, .cp-journey-btn { position: relative; background: linear-gradient(160deg, var(--cpb-gold-hi) 0%, var(--cpb-gold) 34%, var(--cpb-gold-deep) 72%, #b8912a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -3px 6px rgba(122, 84, 10, 0.45), inset 1px 0 2px rgba(255,255,255,0.25), 0 2px 0 var(--cpb-gold-edge), 0 12px 26px rgba(212,175,55,0.38), 0 3px 8px rgba(0,0,0,0.35); text-shadow: 0 1px 0 rgba(255,244,214,0.55); } @media (hover: hover) and (pointer: fine) { .cp-hero-ctas a:first-child:hover, .cp-journey-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -3px 6px rgba(122, 84, 10, 0.4), inset 1px 0 2px rgba(255,255,255,0.3), 0 2px 0 var(--cpb-gold-edge), 0 18px 34px rgba(212,175,55,0.5), 0 5px 12px rgba(0,0,0,0.35); } } .cp-hero-ctas a:first-child:active, .cp-journey-btn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 3px rgba(122, 84, 10, 0.5), inset 0 3px 8px rgba(122, 84, 10, 0.35), 0 0 0 var(--cpb-gold-edge), 0 4px 10px rgba(212,175,55,0.3), 0 1px 3px rgba(0,0,0,0.4); } /* LED status dot on the gold primaries — lit hardware feel */ .cp-journey-btn::before { content: ""; position: absolute; inset-inline-start: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d1fae5, #34d399 55%, #047857); box-shadow: 0 0 8px 2px rgba(52,211,153,0.55), inset 0 -1px 2px rgba(0,0,0,0.35); } /* ——— NAVY secondary buttons (hero ghost / dark actions) ——— */ .cp-hero-ctas a:not(:first-child) { background: linear-gradient(165deg, #26314d 0%, #141c30 55%, #0b1120 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -3px 6px rgba(0,0,0,0.55), 0 2px 0 #04070f, 0 12px 24px rgba(2,6,17,0.5); } @media (hover: hover) and (pointer: fine) { .cp-hero-ctas a:not(:first-child):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 6px rgba(0,0,0,0.5), 0 2px 0 #04070f, 0 18px 32px rgba(2,6,17,0.6); } } .cp-hero-ctas a:not(:first-child):active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 3px 8px rgba(0,0,0,0.6), 0 0 0 #04070f, 0 4px 10px rgba(2,6,17,0.5); } /* ——— WhatsApp CTA (calculator): emerald hardware button ——— */ #cp-cta-whatsapp, .cp-wa-btn { background: linear-gradient(160deg, #6ee7b7 0%, #34d399 38%, #0e9f6e 78%, #0b7a56 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 6px rgba(4, 78, 52, 0.5), 0 2px 0 #065f46, 0 12px 24px rgba(16,185,129,0.35), 0 3px 8px rgba(0,0,0,0.3); } #cp-cta-whatsapp:active, .cp-wa-btn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 3px 8px rgba(4, 78, 52, 0.45), 0 0 0 #065f46, 0 4px 10px rgba(16,185,129,0.3); } /* ——— Final-CTA contact cards: raised ivory keys ——— */ .cp-luxe-contact-btn { background: linear-gradient(165deg, #ffffff 0%, #f4f1e8 70%, #e9e2cf 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 4px rgba(120, 100, 40, 0.18), 0 2px 0 #cfc39e, 0 10px 22px rgba(31, 41, 55, 0.14), 0 2px 6px rgba(31, 41, 55, 0.1); } @media (hover: hover) and (pointer: fine) { .cp-luxe-contact-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 4px rgba(120, 100, 40, 0.15), 0 2px 0 #cfc39e, 0 16px 30px rgba(31, 41, 55, 0.18), 0 4px 10px rgba(31, 41, 55, 0.12); } } .cp-luxe-contact-btn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 3px 7px rgba(120, 100, 40, 0.25), 0 0 0 #cfc39e, 0 4px 10px rgba(31, 41, 55, 0.14); } /* the round icon chip on the contact cards becomes a small dome */ .cp-luxe-contact-btn .cp-btn-icon { background: radial-gradient(circle at 32% 28%, #ffe9a8, #d4af37 58%, #9a7b24); box-shadow: inset 0 1px 2px rgba(255,255,255,0.65), inset 0 -2px 4px rgba(90, 64, 6, 0.55), 0 3px 7px rgba(0,0,0,0.28); border-radius: 50%; } /* ——— Blog read-more: light metal key ——— */ .cp-read-more-btn { background: linear-gradient(165deg, #ffffff, #eef1f6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 3px rgba(15, 23, 42, 0.12), 0 1px 0 #c3cad6, 0 6px 14px rgba(15, 23, 42, 0.1); } .cp-read-more-btn:active { box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.18), 0 0 0 #c3cad6, 0 2px 6px rgba(15, 23, 42, 0.12); } /* ——— Chat bubble: knurled metal dome (matches the prompt's knob) ——— */ #chinpost-chatbox .cp-toggle { background: repeating-conic-gradient(rgba(255,255,255,0.05) 0deg 6deg, rgba(0,0,0,0.05) 6deg 12deg), radial-gradient(circle at 32% 28%, #5b729e, #22314f 55%, #0d1526); background-size: 4px 4px, 100% 100%; box-shadow: inset 0 2px 3px rgba(255,255,255,0.35), inset 0 -4px 8px rgba(0,0,0,0.6), 0 10px 24px rgba(2,6,17,0.5), 0 3px 8px rgba(0,0,0,0.4); } @media (prefers-reduced-motion: reduce) { .cp-hero-ctas a, .cp-journey-btn, .cp-luxe-contact-btn, .cp-read-more-btn, #cp-cta-whatsapp, .cp-wa-btn { transition: none !important; } }