/* RGMS contact form and send dialog. Loaded at the end of by the Worker on every page. CSS only on the form: the page is React-rendered, so markup is left alone. */ /* Hide BUILT's footer credit. */ p:has(> a[href^="https://builtfortrades.co.uk"]) { display: none !important; } main form:has([name="message"]) { --rc-ink: var(--color-text-primary, hsl(215 25% 12%)); --rc-line: hsl(215 16% 86%); --rc-green: var(--color-primary, #4d900e); --rc-green-dark: var(--color-primary-dark, #40780c); position: relative; padding: clamp(20px, 4vw, 36px); border: 1px solid hsl(215 16% 90%); border-radius: 18px; background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--rc-green) 7%, transparent), transparent 60%), #fff; box-shadow: 0 1px 2px hsl(215 25% 12% / .04), 0 18px 40px -18px hsl(215 25% 12% / .18); } main form:has([name="message"]) > * + * { margin-top: 22px !important; } main form:has([name="message"]) > [aria-hidden="true"] + * { margin-top: 0 !important; } main form:has([name="message"]) label { margin-bottom: 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--rc-ink) !important; letter-spacing: .005em; } main form:has([name="message"]) label[for="name"]::after, main form:has([name="message"]) label[for="email"]::after { content: " *"; color: var(--rc-green); } main form:has([name="message"]) :is(input:not([type="hidden"]), select, textarea) { width: 100%; min-height: 54px; padding: 14px 16px !important; border: 1.5px solid var(--rc-line) !important; border-radius: 12px !important; background-color: hsl(210 20% 99%) !important; color: var(--rc-ink) !important; font-size: 16px !important; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } main form:has([name="message"]) :is(input, select, textarea):hover { border-color: hsl(215 14% 72%) !important; } main form:has([name="message"]) :is(input, select, textarea):focus { border-color: var(--rc-green) !important; background-color: #fff !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc-green) 18%, transparent) !important; outline: none; } main form:has([name="message"]) ::placeholder { color: hsl(215 8% 58%); } main form:has([name="message"]) textarea { min-height: 150px; resize: vertical; line-height: 1.55; } main form:has([name="message"]) select { appearance: none; cursor: pointer; padding-right: 48px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234d900e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } main form:has([name="message"]) button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 26px !important; padding: 16px 28px !important; border: 0; border-radius: 12px !important; background: var(--rc-green) !important; color: #fff !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--rc-green) 90%, transparent); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } main form:has([name="message"]) button[type="submit"]::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .18s ease; } main form:has([name="message"]) button[type="submit"]:hover { background: var(--rc-green-dark) !important; transform: translateY(-1px); } main form:has([name="message"]) button[type="submit"]:hover::after { transform: translateX(3px); } main form:has([name="message"]) button[type="submit"]:focus-visible { outline: 3px solid var(--rc-ink); outline-offset: 3px; } main form:has([name="message"])::after { content: "Goes straight to Charlie by WhatsApp or email. Nothing is stored on this site."; display: block; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: hsl(215 10% 42%); text-align: center; } /* Send dialog */ .rc-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; width: 100%; max-width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: #fff; color: hsl(215 25% 12%); box-shadow: 0 30px 70px -20px hsl(215 25% 12% / .45); font: 16px/1.5 var(--font-body, system-ui, sans-serif); } .rc-dialog[open] { animation: rc-in .22s ease-out; } .rc-dialog::backdrop { background: hsl(215 25% 12% / .5); backdrop-filter: blur(2px); } @keyframes rc-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } @media (prefers-reduced-motion: reduce) { .rc-dialog[open] { animation: none; } } .rc-in { position: relative; padding: 28px 24px 24px; } .rc-dialog h2 { margin: 0 0 4px; padding-right: 40px; font: 700 22px/1.25 var(--font-heading, inherit); letter-spacing: -.01em; text-transform: none; } .rc-sub { margin: 0 0 18px; color: hsl(215 10% 42%); font-size: 15px; } .rc-preview { margin: 0 0 18px; padding: 12px 14px; max-height: 132px; overflow: auto; border-radius: 12px; background: hsl(210 20% 97%); font-size: 13.5px; line-height: 1.5; color: hsl(215 15% 30%); white-space: pre-wrap; } .rc-grid { display: grid; gap: 10px; } .rc-dialog .rc-btn { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0; padding: 12px 16px; border: 1.5px solid hsl(215 16% 86%); border-radius: 14px; background: #fff; color: hsl(215 25% 12%); font: 600 16px/1.2 var(--font-body, inherit); text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .rc-dialog .rc-btn:hover { border-color: #4d900e; background: color-mix(in srgb, #4d900e 6%, #fff); } .rc-dialog .rc-btn svg { flex: none; width: 22px; height: 22px; } .rc-dialog .rc-btn small { margin-left: auto; font-size: 13px; font-weight: 500; color: hsl(215 10% 48%); } .rc-dialog .rc-wa { background: #4d900e; border-color: #4d900e; color: #fff; } .rc-dialog .rc-wa:hover { background: #40780c; border-color: #40780c; } .rc-dialog .rc-wa small { color: hsl(0 0% 100% / .8); } .rc-btn:focus-visible, .rc-x:focus-visible { outline: 3px solid #1f5fbf; outline-offset: 2px; } .rc-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: hsl(215 10% 42%); font-size: 26px; line-height: 1; cursor: pointer; } .rc-x:hover { background: hsl(210 20% 95%); } .rc-note { margin: 16px 0 0; font-size: 13px; color: hsl(215 10% 42%); text-align: center; } .rc-note a { color: hsl(215 25% 12%); font-weight: 600; }