/* ============================================================ VIDYA ยท Soft-UI button system Adapted from uiverse.io/adamgiebl/good-mouse-67 (MIT), recolored from #e0e0e0 neumorphism into Ink + Tide tokens. Resting state is softly carved (dual inset), hover lifts it out of the surface (smaller inset + outer pair), active presses it back in. 200ms ease-in-out, like the original. Load order contract: linked at the END of on every page so it wins cascade ties against page-local .btn rules. Join-beta / waitlist CTAs are untouched: dock.css styles them at higher specificity (the dark arrow pill). ============================================================ */ .btn{ border-radius:999px; border:1.5px solid transparent; transition:background .2s ease-in-out,box-shadow .2s ease-in-out, color .2s ease-in-out,transform .2s ease-in-out; } .btn:focus-visible{outline:2px solid var(--tide-500);outline-offset:2px} /* ---- primary: tide surface, soft-raised ------------------- */ .btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:rgba(255,255,255,.55); box-shadow: inset 2px 2px 6px rgba(12,97,112,.26), inset -2px -2px 6px rgba(255,255,255,.85), 3px 3px 8px rgba(12,42,46,.14), -3px -3px 8px rgba(255,255,255,.9); } .btn-primary:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-1px); box-shadow: inset 1px 1px 3px rgba(12,97,112,.20), inset -1px -1px 3px rgba(255,255,255,.9), 4px 4px 12px rgba(12,42,46,.16), -4px -4px 12px rgba(255,255,255,.95), 0 12px 26px -12px rgba(55,190,176,.55); } .btn-primary:active{ transform:none; box-shadow: inset 3px 3px 8px rgba(12,97,112,.32), inset -2px -2px 6px rgba(255,255,255,.7); } /* ---- secondary: paper surface, carved at rest ------------- */ .btn-secondary{ background:var(--ink-50); color:var(--ink-700); border-color:var(--ink-100); box-shadow: inset 3px 3px 8px rgba(21,32,30,.10), inset -3px -3px 8px rgba(255,255,255,.95); } .btn-secondary:hover{ background:var(--ink-50); color:var(--ink-900); box-shadow: inset 1px 1px 3px rgba(21,32,30,.07), inset -1px -1px 3px rgba(255,255,255,1), 3px 3px 8px rgba(21,32,30,.10), -3px -3px 8px rgba(255,255,255,.95); } .btn-secondary:active{ box-shadow: inset 4px 4px 10px rgba(21,32,30,.14), inset -3px -3px 8px rgba(255,255,255,.8); } /* ---- dark-surface variant (brain band, featured card, dark pages): the white outer light would halo on ink, so the light side goes tide and the dark side goes true shadow */ .brainband .btn-primary, .brain-feature .btn-primary, .hero .btn-primary, .cta-band .btn-primary, .cta .btn{ border-color:rgba(255,255,255,.30); box-shadow: inset 2px 2px 6px rgba(6,16,15,.42), inset -2px -2px 6px rgba(255,255,255,.38), 4px 4px 12px rgba(0,0,0,.38), -2px -2px 10px rgba(164,229,224,.14); } .brainband .btn-primary:hover, .brain-feature .btn-primary:hover, .hero .btn-primary:hover, .cta-band .btn-primary:hover, .cta .btn:hover{ transform:translateY(-1px); box-shadow: inset 1px 1px 3px rgba(6,16,15,.32), inset -1px -1px 3px rgba(255,255,255,.45), 5px 5px 14px rgba(0,0,0,.42), -3px -3px 12px rgba(164,229,224,.20), 0 14px 30px -12px rgba(55,190,176,.5); } @media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn-primary:hover,.btn-secondary:hover{transform:none} }