/* ===================================================================== PAT - Premium buttons Everything for the upgraded buttons lives in this one file. TO ROLL BACK: remove the line from index.html and pat.html. The pages fall straight back to the original flat buttons. Nothing else depends on this file. ===================================================================== */ :root{ --btn-hi:#D81B67; --btn-lo:#A8124C; /* magenta to berry */ --btn-ring:rgb(226 184 74 / .55); /* seal gold, inner ring */ --btn-glow:194 24 91; /* magenta glow (rgb) */ --btn-ivory:#FFFDF8; --btn-ivory-2:#FBF4E8; /* stationery fill */ --btn-hair:#E2CFA4; /* gold hairline border */ --btn-hair-hover:#C9A65A; --btn-ease:cubic-bezier(.2,.8,.2,1); } :root[data-theme="dark"]{ --btn-hi:#F48FB1; --btn-lo:#E04C80; --btn-ring:rgb(255 225 150 / .5); --btn-glow:240 98 146; --btn-ivory:#2C2035; --btn-ivory-2:#241A2C; --btn-hair:#6A5531; --btn-hair-hover:#9C7E3F; } /* ---------- Shared shape and type ---------- */ .primary,.secondary,.mode{ border-radius:999px; letter-spacing:.015em; -webkit-tap-highlight-color:transparent; transition:transform .18s var(--btn-ease),box-shadow .18s var(--btn-ease), background-color .18s,border-color .18s,filter .18s; } .primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px} /* ---------- Main button: lit-from-within magenta ---------- */ .primary{ position:relative;overflow:hidden;isolation:isolate; font-weight:700; background:linear-gradient(180deg,var(--btn-hi) 0%,var(--btn-lo) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), /* top-edge highlight */ inset 0 0 0 1px var(--btn-ring), /* thin gold ring */ 0 1px 2px rgb(var(--btn-glow) / .25), 0 6px 16px -4px rgb(var(--btn-glow) / .45); /* colored glow */ } .primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 0 0 1px var(--btn-ring), 0 2px 4px rgb(var(--btn-glow) / .25), 0 10px 22px -6px rgb(var(--btn-glow) / .55); } .primary:active:not(:disabled){ transform:translateY(1px) scale(.985); filter:brightness(.96); box-shadow: inset 0 2px 6px rgb(0 0 0 / .22), inset 0 0 0 1px var(--btn-ring), 0 1px 2px rgb(var(--btn-glow) / .3); } .primary:disabled{filter:saturate(.6)} /* Slow sheen on the big calls to action */ #send::after,.actions a.primary::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .22) 50%,transparent 65%); transform:translateX(-120%); animation:btn-sheen 6.5s var(--btn-ease) 1.2s infinite; } @keyframes btn-sheen{0%{transform:translateX(-120%)}18%,100%{transform:translateX(120%)}} /* ---------- Secondary: ivory stationery with a gold hairline ---------- */ .secondary{ background:linear-gradient(180deg,var(--btn-ivory) 0%,var(--btn-ivory-2) 100%); border:1px solid var(--btn-hair); font-weight:600; box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 1px 2px rgb(42 24 56 / .06),0 3px 8px -4px rgb(42 24 56 / .12); } :root[data-theme="dark"] .secondary{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 3px 8px -4px rgb(0 0 0 / .5)} .secondary:hover:not(:disabled){ transform:translateY(-1px);border-color:var(--btn-hair-hover); box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 2px 4px rgb(42 24 56 / .08),0 8px 16px -8px rgb(42 24 56 / .2); } .secondary:active:not(:disabled){ transform:translateY(1px) scale(.985); box-shadow:inset 0 2px 5px rgb(42 24 56 / .12); } /* ---------- Shout them out / Send privately switch ---------- */ .mode{border-color:var(--btn-hair);background:linear-gradient(180deg,var(--btn-ivory),var(--btn-ivory-2))} .mode[aria-pressed="true"]{ border-color:transparent; background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo)); box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 0 0 1px var(--btn-ring),0 4px 12px -4px rgb(var(--btn-glow) / .45); } .mode:active{transform:scale(.98)} /* ---------- Small card buttons: just the tactile press ---------- */ .sharebtn,.heart,.themebtn{transition:transform .15s var(--btn-ease),background-color .15s,border-color .15s} .sharebtn:active,.heart:active,.themebtn:active{transform:scale(.95)} /* ---------- Icons (drawn with CSS so this file stays self-contained) ---------- */ #send::before,#sent-share::before,#share::before, .actions a.primary::before,.actions a.secondary::before{ content:"";width:18px;height:18px;flex:none;background:currentColor; -webkit-mask:var(--btn-icon) center/contain no-repeat;mask:var(--btn-icon) center/contain no-repeat; } /* paper plane */ #send,.actions a.primary{--btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.5 13.5'/%3E%3Cpath d='M21.5 2.5 14.5 21.5l-4-8-8-4z'/%3E%3C/svg%3E")} /* share arrow */ #sent-share,#share{--btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E")} /* heart (wall link) */ .actions a.secondary{--btn-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.2-4.5-9.6-9.2C.8 8.4 2.9 4.5 6.6 4.5c2.1 0 3.6 1.2 5.4 3.1 1.8-1.9 3.3-3.1 5.4-3.1 3.7 0 5.8 3.9 4.2 7.3C19.2 16.5 12 21 12 21z'/%3E%3C/svg%3E")} .actions a.secondary::before{background:var(--accent)} /* ---------- Respect "reduce motion" ---------- */ @media (prefers-reduced-motion:reduce){ .primary,.secondary,.mode,.sharebtn,.heart,.themebtn{transition:none} .primary:hover,.secondary:hover,.primary:active,.secondary:active{transform:none} #send::after,.actions a.primary::after{animation:none;display:none} }