/** * Loving Obituary Assistant — launcher and panel. * * Quiet on purpose. This sits on a page somebody reached on the worst week of * their life, so nothing pulses, bounces or demands attention. * * Two layout rules are load-bearing rather than cosmetic. The launcher sits * above the safe-area inset on phones, so it never lands under a home * indicator; and it carries a generous bottom offset so it clears a sticky * "Add to Cart" bar or a cookie notice rather than covering one. Both were * requirements, not preferences, and both are unchanged. * * The colours are the house palette, the same tokens the Partner Portal and the * funeral-partner pages use: navy, gold, cream. They are declared locally * rather than imported so this plugin keeps working with the portal switched * off, and they are scoped to .ldoa- so nothing here can bleed into a theme. * * Contrast was measured, not eyeballed. Cream on navy is 15.1:1 and the gold * pen on navy is 8.5:1, both far past AA. The focus ring is deliberately two * rings -- gold against the navy pill, navy against the page -- because a * gold-only ring is 2.4:1 on a white background and would have failed the 3:1 * that WCAG 2.2 asks of a focus indicator. */ .ldoa-launcher { /* Repeated here, not inherited: the launcher is a direct child of . */ --ldoa-navy: #0b1f3a; --ldoa-navy-2: #102a4c; --ldoa-gold: #c9a227; --ldoa-gold-2: #d9b73f; --ldoa-cream: #f7f5ef; position: fixed; right: 16px; bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ); z-index: 99990; display: inline-flex; align-items: center; gap: 9px; max-width: calc( 100vw - 32px ); padding: 11px 20px 11px 17px; border: 0; border-radius: 999px; background: linear-gradient( 160deg, var( --ldoa-navy-2 ) 0%, var( --ldoa-navy ) 100% ); color: var( --ldoa-cream ); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; /* * The hairline is the whole difference between this and a generic dark * chatbot bubble: a thread of gold around the navy, the same edge the * portal puts on its cards. */ box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .45 ), 0 10px 28px rgba( 11, 31, 58, .28 ), 0 2px 6px rgba( 11, 31, 58, .18 ); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease; /* Plays once on arrival, and never again. Nothing here loops. */ /* * backwards, not both, and the difference is load-bearing. A filled * animation outranks ordinary declarations for as long as it is filling, * so `both` would hold opacity at 1 for the life of the page and quietly * defeat the [aria-expanded="true"] rule below. backwards covers the delay * and then gets out of the way. */ animation: ldoa-launcher-in .45s cubic-bezier( .22, .8, .3, 1 ) .35s backwards; } .ldoa-launcher__icon { display: inline-flex; align-items: center; justify-content: center; color: var( --ldoa-gold-2 ); } .ldoa-launcher__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ldoa-launcher:hover { background: linear-gradient( 160deg, #16365e 0%, var( --ldoa-navy-2 ) 100% ); transform: translateY( -1px ); box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .7 ), 0 14px 34px rgba( 11, 31, 58, .32 ), 0 2px 6px rgba( 11, 31, 58, .2 ); } .ldoa-launcher:active { transform: translateY( 0 ) scale( .985 ); box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .7 ), 0 6px 16px rgba( 11, 31, 58, .3 ); } /* * Two rings, so the indicator survives whatever the theme puts behind it: gold * against the pill, navy against the page. Measured at 8.5:1 and 16.5:1. */ .ldoa-launcher:focus-visible { outline: 3px solid var( --ldoa-navy ); outline-offset: 3px; box-shadow: 0 0 0 3px var( --ldoa-gold-2 ), 0 10px 28px rgba( 11, 31, 58, .28 ); } /* Older browsers, which have :focus but not :focus-visible. */ .ldoa-launcher:focus:not( :focus-visible ) { outline: none; } /* * Opening the panel hands the corner over to it. The launcher settles back * rather than sitting lit under the backdrop, and the dialog grows out of the * same corner, so the two read as one movement. Driven entirely by the * aria-expanded the button already keeps honest -- no class, no extra script. */ .ldoa-launcher[aria-expanded="true"] { opacity: 0; transform: scale( .92 ); pointer-events: none; } @keyframes ldoa-launcher-in { from { opacity: 0; transform: translateY( 10px ) scale( .96 ); } to { opacity: 1; transform: none; } } @keyframes ldoa-dialog-in { from { opacity: 0; transform: translateY( 12px ) scale( .98 ); } to { opacity: 1; transform: none; } } /* * Phones. The pill grows into a proper 48x48 target -- the floor the WCAG 2.2 * target-size rule asks for, and the floor a thumb asks for on a moving bus -- * and it keeps its words, because an unlabelled icon in the corner of a funeral * home's website is a riddle nobody grieving should have to solve. */ @media ( max-width: 600px ) { .ldoa-launcher { right: 14px; min-height: 48px; min-width: 48px; padding: 12px 20px 12px 16px; font-size: 15.5px; box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .5 ), 0 12px 30px rgba( 11, 31, 58, .34 ), 0 2px 6px rgba( 11, 31, 58, .2 ); } } /* The panel ------------------------------------------------------------- */ .ldoa-panel { position: fixed; inset: 0; z-index: 99991; display: flex; align-items: center; justify-content: center; padding: 20px; } .ldoa-panel[hidden] { display: none; } .ldoa-panel__backdrop { position: absolute; inset: 0; background: rgba( 22, 26, 30, .55 ); } .ldoa-panel__dialog { position: relative; width: 100%; max-width: 620px; transform-origin: bottom right; animation: ldoa-dialog-in .26s cubic-bezier( .22, .8, .3, 1 ) backwards; max-height: calc( 100vh - 40px ); overflow-y: auto; padding: 24px; border-radius: 12px; background: #fff; color: #1d2327; box-shadow: 0 18px 50px rgba( 0, 0, 0, .3 ); } .ldoa-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ldoa-panel__title { margin: 0; font-size: 21px; line-height: 1.3; } .ldoa-panel__close { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f2f3; font-size: 22px; line-height: 1; cursor: pointer; } .ldoa-panel__close:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; } .ldoa-panel__intro { margin: 10px 0 18px; color: #4a5560; font-size: 15px; } .ldoa-panel__foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e6e8ea; color: #6b7680; font-size: 13px; } /* Steps and fields ------------------------------------------------------ */ .ldoa-steps { margin: 0; padding: 0; list-style: none; } .ldoa-step__title { margin: 0 0 4px; font-size: 17px; } .ldoa-step__intro { margin: 0 0 16px; color: #5a6570; font-size: 14px; } .ldoa-field { margin: 0 0 16px; } .ldoa-field__label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 15px; } .ldoa-field__hint { margin: 0 0 6px; color: #6b7680; font-size: 13px; } .ldoa-req { font-weight: 400; color: #6b7680; font-size: 13px; } .ldoa-field input[type="text"], .ldoa-field textarea, .ldoa-field select, .ldoa-refine input[type="text"], .ldoa-draft { width: 100%; padding: 10px 12px; border: 1px solid #c3c7cb; border-radius: 6px; background: #fff; color: inherit; font: inherit; font-size: 15px; box-sizing: border-box; } .ldoa-field input:focus-visible, .ldoa-field textarea:focus-visible, .ldoa-field select:focus-visible, .ldoa-refine input:focus-visible, .ldoa-draft:focus-visible { outline: 3px solid #c9a227; outline-offset: 1px; border-color: #8a8f94; } .ldoa-field [aria-invalid="true"] { border-color: #8c3b2f; } .ldoa-field__error { margin: 6px 0 0; color: #8c3b2f; font-size: 13px; } .ldoa-field__error[hidden] { display: none; } /* The honeypot. Removed from the page for anyone who can perceive it. */ .ldoa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Navigation and buttons ------------------------------------------------ */ .ldoa-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e6e8ea; } .ldoa-progress { margin-left: auto; color: #6b7680; font-size: 13px; } .ldoa-btn { padding: 10px 18px; border: 1px solid #2f3a44; border-radius: 6px; background: #fff; color: #2f3a44; font: inherit; font-size: 15px; cursor: pointer; } .ldoa-btn:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; } .ldoa-btn:disabled { opacity: .55; cursor: default; } /* * Written as a compound class, and the colour marked important. * * This panel is injected into whatever theme a site happens to run, and on * staging the theme won: the dark background applied and the white text did * not, leaving "Write my draft" in near-black on near-black. A single class is * 0-1-0, which any theme rule of equal weight beats simply by loading later -- * a block theme's generated .wp-element-button does exactly that. * * Repeating the class raises this to 0-2-0, which beats equal-weight and most * descendant rules. !important on the colour ALONE covers the rest, including * an id-scoped theme rule, and is deliberately not applied to anything else * here: the risk being bought off is a button a grieving family cannot read. * * It cannot be scoped under .ldoa-panel for specificity instead -- the resume * page uses these same classes outside the panel, and one of them is an * rather than a