/* SiMa.ai — Palette Neat — supplementary component & animation CSS. * Load in the WordPress AFTER software-main.css. * Hand-written styles not expressible as Tailwind utilities * (liquid-glass button, form fields, modal transitions, scroll reveal, glow pulse). */ /* Site container — mirrored from theme (themeCss is not loaded on this single). */ .sima-container-smaller { width: 1260px; max-width: calc(100% - 120px); margin: auto; } @media only screen and (max-width: 767px) { .sima-container-smaller { max-width: 100vw !important; padding: 0 30px; } } /* Headline accent */ .text-gradient { color: #5998DD; } /* Scroll reveal */ .sr { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .sr.is-visible { opacity: 1; transform: translateY(0); } /* Liquid-glass button */ .glass-button { position: relative; isolation: isolate; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.45), inset 0 -1px 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.35); color: #fafafa; transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; cursor: pointer; } .glass-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .glass-button:hover { background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 100%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.55), inset 0 -1px 1px 0 rgba(255,255,255,0.1), 0 12px 44px rgba(0,0,0,0.45); } .glass-button:active { transform: scale(0.97); } .glass-button--shine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.22) 49%, rgba(255,255,255,0.22) 51%, transparent 62%); background-size: 250% 100%; background-position: 170% 0; pointer-events: none; z-index: 2; animation: glass-shine 6.5s ease-in-out infinite; } @keyframes glass-shine { 0% { background-position: 170% 0; } 55%, 100% { background-position: -70% 0; } } /* CTA glow pulse */ .cta-glow { animation: cta-glow 3.6s ease-in-out infinite; } @keyframes cta-glow { 0%,100% { opacity: 0.15; } 50% { opacity: 0.32; } } /* Modal */ .modal-overlay { opacity: 0; transition: opacity 0.25s ease; } .modal-overlay.is-open { opacity: 1; } .modal-card { opacity: 0; transform: translateY(20px) scale(0.95); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1); } .modal-overlay.is-open .modal-card { opacity: 1; transform: translateY(0) scale(1); } /* Form fields — static handoff fallback (unused when Ninja Forms shortcode is set) */ .field { width: 100%; height: 3rem; padding: 0 1rem; font-size: 1rem; color: rgba(250,250,250,0.92); background: rgba(20,20,24,0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.75rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field::placeholder { color: rgba(250,250,250,0.4); } .field:focus { border-color: #5998DD; box-shadow: 0 0 0 2px rgba(89,152,221,0.4); } select.field { appearance: none; -webkit-appearance: none; } @media (prefers-reduced-motion: reduce) { .glass-button--shine::after, .cta-glow { animation: none; } .sr { opacity: 1; transform: none; transition: none; } } /* Fallback if a plugin injects toolbar markup on isolated singles */ #wpadminbar, #query-monitor-main, #query-monitor-main[data-theme] { display: none !important; } html { margin-top: 0 !important; } body.admin-bar { padding-top: 0 !important; } /* Ninja Forms — dark modal (white paper + technical paper singles) */ .sima-forms--papers .nf-form-wrap { background: transparent; border-radius: 0; box-shadow: none; padding: 0; max-width: none; width: 100%; } .sima-forms--papers .nf-before-form, .sima-forms--papers .nf-after-form, .sima-forms--papers .nf-response-msg, .sima-forms--papers .nf-debug-msg, .sima-forms--papers .nf-form-hp, .sima-forms--papers .nf-form-errors, .sima-forms--papers .nf-before-form-content, .sima-forms--papers .nf-after-form-content, .sima-forms--papers .nf-input-limit, .sima-forms--papers .nf-form-title, .sima-forms--papers .nf-form-fields-required { display: none !important; } /* Layout — single column; grid items are custom elements inside */ .sima-forms--papers nf-fields-wrap, .sima-forms--papers .nf-fields-wrap { display: grid !important; grid-template-columns: 1fr; row-gap: 0; } .sima-forms--papers nf-fields-wrap > nf-field { display: block; width: 100%; min-width: 0; } /* Hidden / divider NF fields — remove from layout entirely */ .sima-forms--papers nf-fields-wrap > nf-field:has(.hidden-container), .sima-forms--papers nf-fields-wrap > nf-field:has(.hr-container), .sima-forms--papers .nf-field-container.hidden-container, .sima-forms--papers .nf-field-container.hr-container { display: none !important; margin: 0 !important; } .sima-forms--papers nf-fields-wrap > nf-field:not(:has(.hidden-container)):not(:has(.hr-container)):not(:has(.submit-container)) { margin-bottom: 0.75rem; } /* Last visible field before submit (skips hidden fields in between) */ .sima-forms--papers nf-fields-wrap > nf-field:not(:has(.hidden-container)):not(:has(.hr-container)):not(:has(.submit-container)):not(:has(~ nf-field:not(:has(.hidden-container)):not(:has(.hr-container)):not(:has(.submit-container)))) { margin-bottom: 0; } .sima-forms--papers nf-fields-wrap > nf-field:has(.submit-container) { margin-top: 20px; } .sima-forms--papers .nf-field-container { margin: 0 !important; width: 100% !important; min-width: 0; box-sizing: border-box; float: none !important; } /* Reset NF float column widths */ .sima-forms--papers .nf-form-cont .one-half, .sima-forms--papers .nf-form-cont .one-third, .sima-forms--papers .nf-form-cont .two-thirds, .sima-forms--papers .nf-form-cont .one-fourth, .sima-forms--papers .nf-form-cont .three-fourths, .sima-forms--papers .nf-form-cont .one-sixth, .sima-forms--papers .nf-form-cont .five-sixths, .sima-forms--papers .nf-form-cont .four-sixths, .sima-forms--papers .nf-form-cont .three-sixths, .sima-forms--papers .nf-form-cont .two-sixths, .sima-forms--papers .nf-form-cont .two-fourths { float: none !important; width: 100% !important; margin-left: 0 !important; clear: none !important; } .sima-forms--papers .nf-form-cont .first { clear: none !important; margin-left: 0 !important; } .sima-forms--papers .submit-container { margin: 0 !important; width: 100% !important; } /* Placeholder-style fields — hide NF labels when using in-field placeholders */ .sima-forms--papers .nf-field-label { display: none !important; } .sima-forms--papers .nf-field-label label { display: none; } .sima-forms--papers .ninja-forms-req-symbol { color: rgba(250, 250, 250, 0.45); } .sima-forms--papers .nf-field-element { width: 100%; } .sima-forms--papers .ninja-forms-field.nf-element:not([type="submit"]), .sima-forms--papers select.ninja-forms-field.nf-element { width: 100%; height: 3rem; padding: 0 1rem; font-size: 1rem; color: rgba(250, 250, 250, 0.92); background: rgba(20, 20, 24, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.75rem; outline: none; box-sizing: border-box; appearance: none; -webkit-appearance: none; } /* Dropdown placeholder — match .field::placeholder muted grey */ .sima-forms--papers select.ninja-forms-field.nf-element { color: rgba(250, 250, 250, 0.4); } .sima-forms--papers select.ninja-forms-field.nf-element.has-value { color: rgba(250, 250, 250, 0.92); } .sima-forms--papers select.ninja-forms-field.nf-element:focus { color: rgba(250, 250, 250, 0.92); } .sima-forms--papers select.ninja-forms-field.nf-element option { color: rgba(250, 250, 250, 0.92); background: #141418; } .sima-forms--papers select.ninja-forms-field.nf-element option[disabled], .sima-forms--papers select.ninja-forms-field.nf-element option[value=""] { color: rgba(250, 250, 250, 0.4); } .sima-forms--papers .ninja-forms-field.nf-element:not([type="submit"])::placeholder { color: rgba(250, 250, 250, 0.4); } .sima-forms--papers .ninja-forms-field.nf-element:not([type="submit"]):focus, .sima-forms--papers select.ninja-forms-field.nf-element:focus { border-color: #5998dd; box-shadow: 0 0 0 2px rgba(89, 152, 221, 0.4); } .sima-forms--papers .submit-container .nf-field-element { position: relative; isolation: isolate; display: block; width: 100%; margin-top: 0 !important; border-radius: 9999px; } .sima-forms--papers .submit-container .nf-field-element::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 0; } .sima-forms--papers .submit-container .nf-field-element::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 115deg, transparent 38%, rgba(255, 255, 255, 0.22) 49%, rgba(255, 255, 255, 0.22) 51%, transparent 62% ); background-size: 250% 100%; background-position: 170% 0; pointer-events: none; z-index: 2; animation: glass-shine 6.5s ease-in-out infinite; } .sima-forms--papers .ninja-forms-field[type="submit"] { position: relative; z-index: 1; width: 100%; height: 3rem; margin: 0; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 9999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); color: #fafafa; font-size: 1rem; font-weight: 500; font-family: inherit; line-height: 1.2; cursor: pointer; box-sizing: border-box; appearance: none; -webkit-appearance: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.35); transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; } .sima-forms--papers .submit-container .nf-field-element:hover .ninja-forms-field[type="submit"]:not(:disabled), .sima-forms--papers .ninja-forms-field[type="submit"]:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 100%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.1), 0 12px 44px rgba(0, 0, 0, 0.45); } .sima-forms--papers .ninja-forms-field[type="submit"]:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .sima-forms--papers .submit-container .nf-field-element::after { animation: none; } } .sima-forms--papers .nf-error-wrap.nf-error:not(:empty) { color: #f87171; font-size: 0.8125rem; margin-top: 0.25rem; } .sima-paper-thankyou-message p { margin: 0; } .sima-paper-thankyou-message p + p { margin-top: 0.75rem; } .sima-paper-thankyou-message a { color: rgba(250, 250, 250, 0.92); text-decoration: underline; text-underline-offset: 2px; } .sima-paper-thankyou-download { margin-top: 1.75rem; }