/* The M1 Group, unified button system (site-wide). Hover: the resting dot grows into a #304161 flood that fills the button, with white text, the original Webflow "dot takes over the frame" effect. Corners are a modest 12px (less rounded than a pill). Resting base colour flips for contrast so a button never disappears (dark pills on white form cards, white pills on dark sections). Loaded LAST in so it wins the cascade over each page's inline styles and the Webflow button. */ .button.secondary, .q-btn, .c-btn, .ph-btn, .ph-btn.solid, .ph-btn.ghost, .pj-btn, .pj-btn.solid, .pj-btn.ghost{ position:relative !important; isolation:isolate; overflow:hidden !important; display:inline-flex !important; align-items:center; gap:10px; border:0 !important; border-radius:12px !important; padding:16px 28px !important; font-family:'Hanken Grotesk', sans-serif !important; font-size:16px !important; font-weight:600 !important; line-height:1 !important; cursor:pointer; text-decoration:none; box-shadow:none !important; transition:color .3s ease, transform .35s ease !important; } /* the flood, a circle centred on the dot that scales up to cover the button */ .button.secondary::before, .q-btn::before, .c-btn::before, .ph-btn::before, .pj-btn::before{ content:""; position:absolute; z-index:-1; left:33px; top:50%; width:14px; height:14px; border-radius:50%; background:#304161; transform:translate(-50%,-50%) scale(0); transition:transform .5s cubic-bezier(.4,0,.2,1); } .button.secondary:hover::before, .q-btn:hover::before, .c-btn:hover::before, .ph-btn:hover::before, .pj-btn:hover::before{ transform:translate(-50%,-50%) scale(55); } /* dots */ .button.secondary .red-circle, .q-btn .dot, .c-btn .dot, .ph-btn .dot, .pj-btn .dot{ width:10px !important; height:10px !important; border-radius:50% !important; flex:none !important; transition:opacity .25s ease !important; } /* resting dot fades as the flood swallows it */ .button.secondary:hover .red-circle, .q-btn:hover .dot, .c-btn:hover .dot, .ph-btn:hover .dot, .pj-btn:hover .dot{ opacity:0 !important; } /* label sits above the flood */ .button.secondary .button-hover{ position:relative; z-index:1; } /* ── base: dark buttons on WHITE form cards (quote + contact) ── */ .q-btn, .c-btn{ background:#162033 !important; color:#fff !important; } .q-btn .dot, .c-btn .dot{ background:#fff !important; } /* ── base: white buttons on DARK sections (home, photography, projects) ── */ .button.secondary, .ph-btn, .ph-btn.solid, .ph-btn.ghost, .pj-btn, .pj-btn.solid, .pj-btn.ghost{ background:#fff !important; color:#162033 !important; } .button.secondary .button-hover{ color:#162033 !important; transition:color .3s ease; } .button.secondary .red-circle, .ph-btn .dot, .pj-btn .dot{ background:#162033 !important; } /* ── hover: text turns white over the #304161 flood, subtle lift ── */ .button.secondary:hover, .q-btn:hover, .c-btn:hover, .ph-btn:hover, .pj-btn:hover{ color:#fff !important; transform:translateY(-2px) !important; } .button.secondary:hover .button-hover{ color:#fff !important; } /* disabled submit while sending */ .q-btn[disabled], .c-btn[disabled]{ opacity:.6 !important; transform:none !important; } .q-btn[disabled]::before, .c-btn[disabled]::before{ display:none !important; }