/* Theme Name: StormOps Theme URI: https://stormops.io Author: StormOps Author URI: https://stormops.io Description: Custom block theme for stormops.io. Edit pages under Pages, and the header, footer, colors and fonts under Appearance > Editor. Version: 2.38.2 Requires at least: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: stormops */ :root { --so-edge: max(24px, calc((100% - 1280px) / 2)); --so-read: 800px; --so-rule: #1B2842; --so-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1FF10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); --so-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); --so-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cpolygon points='13,0 0,26 10,26 5,46 24,16 14,16 21,0' fill='%23FFFFFF'/%3E%3C/svg%3E"); } body { -webkit-font-smoothing: antialiased; } body .wp-site-blocks > * { margin-block-start: 0; } body .so-main > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; } h1, h2, h3, p { margin-top: 0; } a { text-decoration: none; } /* ---------- Header ---------- */ .so-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 88px; padding: 0 var(--so-edge); border-bottom: 1px solid var(--so-rule); } .so-header > *, .so-header-right > * { margin: 0 !important; } .so-logo img { height: 34px; width: auto; display: block; } .so-header-right { display: flex; align-items: center; gap: 40px; } .so-nav { gap: 40px; font-size: 16px; font-weight: 500; } .so-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); padding: 12px 0; } .so-nav .wp-block-navigation-item__content:hover, .so-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); } .so-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); padding: 32px 24px; } .so-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 22px; } .so-header-cta .wp-block-button__link { padding: 14px 24px; font-size: 16px; } /* ---------- Buttons ---------- */ .wp-block-buttons { gap: 16px; } .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid #3A4A6B; padding: 17px 29px; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--contrast); } .so-btn-dark > .wp-block-button__link, .so-btn-dark > .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } .so-btn-play > .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; } .so-btn-play > .wp-block-button__link::before { content: ""; width: 14px; height: 14px; background: currentColor; flex-shrink: 0; -webkit-mask: var(--so-play) center / contain no-repeat; mask: var(--so-play) center / contain no-repeat; } /* ---------- Sections ---------- */ .so-section { padding: 120px var(--so-edge); } .so-section > * { max-width: 1280px; } .so-surface { background: var(--wp--preset--color--surface); border-top: 1px solid var(--so-rule); border-bottom: 1px solid var(--so-rule); } .so-center { text-align: center; } .so-center > * { margin-left: auto; margin-right: auto; } .so-center .wp-block-buttons { justify-content: center; } .so-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--accent); } .so-lead { font-size: 21px; line-height: 1.55; color: var(--wp--preset--color--soft); max-width: 640px; } .so-body { font-size: 19px; line-height: 1.65; color: var(--wp--preset--color--soft); } .so-label { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8A8F96; margin: 0; } .so-pill, .so-card .so-pill { display: inline-block; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; line-height: 1; white-space: nowrap; flex-shrink: 0; } .so-two-cols.wp-block-columns { gap: 80px; } /* Hero */ .so-hero { padding-top: 112px; } .so-hero-cols.wp-block-columns { gap: 80px; align-items: center; } .so-hero h1 { margin-bottom: 0; } /* Sample contract card */ .so-contract { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 36px; } .so-contract > * + * { margin-top: 24px !important; } .so-contract-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .so-contract-top > *, .so-contract-top > * > * { margin: 0 !important; } .so-contract-top > .wp-block-group > * + * { margin-top: 6px !important; } .so-contract-title { font-size: 22px; font-weight: 600; line-height: 1.25; } .so-rows { border-top: 1px solid var(--wp--preset--color--line); } .so-rows > * { margin: 0 !important; } .so-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--line); font-size: 16px; } .so-row > * { margin: 0 !important; } .so-row > *:last-child { white-space: nowrap; } .so-row.so-sub { color: var(--wp--preset--color--soft); } .so-row.so-total { border-bottom: 0; padding-top: 20px; padding-bottom: 0; font-size: 24px; font-weight: 600; } .so-jobber { display: flex; align-items: center; gap: 12px; background: var(--wp--preset--color--base); border-radius: 8px; padding: 16px 18px; font-size: 15px; line-height: 1.4; color: var(--wp--preset--color--soft); } .so-jobber::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--so-check) center / contain no-repeat; } /* Demo video */ .so-demo { padding-top: 0; } .so-demo h2 { margin-bottom: 36px; scroll-margin-top: 24px; } .so-video { aspect-ratio: 16 / 9; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; } .so-video::before { content: ""; width: 104px; height: 104px; border-radius: 50%; background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4v16l13-8z' fill='%230B1426'/%3E%3C/svg%3E") center / 40px no-repeat; } .so-video-note { color: var(--wp--preset--color--muted); font-size: 16px; text-align: center; max-width: 520px; margin: 0 !important; } .so-demo .wp-block-embed { margin: 0; } .so-demo .wp-block-embed iframe { border-radius: 16px; } /* How it works */ .so-how { padding-top: 100px; padding-bottom: 100px; } .so-how h2 { margin-bottom: 56px; scroll-margin-top: 24px; } .so-steps.wp-block-columns { gap: 24px; } .so-step { border-top: 3px solid var(--wp--preset--color--accent); padding-top: 24px; } .so-step > * { margin: 0 0 14px !important; } .so-step-num { font-family: var(--wp--preset--font-family--display); font-size: 28px; color: var(--wp--preset--color--accent); line-height: 1; } .so-step h3 { font-size: 20px; } .so-step p:last-child { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); } /* Cards */ .so-features { padding-top: 0; } .so-cards.wp-block-columns { gap: 24px; margin-bottom: 24px; } .so-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 44px; height: 100%; box-sizing: border-box; } .so-card h3 { font-size: 26px; margin-bottom: 16px; } .so-card p { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--muted); } /* Lime band */ body .so-main > .wp-block-post-content > .so-lime, .so-lime { margin: 0 var(--so-edge) 120px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-radius: 16px; padding: 88px 80px; } .so-lime a:not(.wp-block-button__link) { color: var(--wp--preset--color--base); } .so-lime-cols.wp-block-columns { gap: 64px; align-items: center; margin: 0; } .so-lime h2 { margin: 0; } .so-lime-right > * + * { margin-top: 28px !important; } .so-lime-right p { font-size: 19px; line-height: 1.6; margin: 0; } .so-bolt { position: relative; overflow: hidden; isolation: isolate; } .so-bolt::before { content: ""; position: absolute; z-index: -1; pointer-events: none; right: 40px; top: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 24 / 46; opacity: 0.35; background: var(--so-bolt) center / contain no-repeat; } /* Final CTA */ .so-cta { text-align: center; padding-top: 140px; padding-bottom: 140px; } .so-cta > * { margin-left: auto !important; margin-right: auto !important; } .so-cta h2 { font-size: clamp(40px, 4.6vw, 64px); } .so-cta .wp-block-buttons { justify-content: center; } /* Page heroes */ .so-page-hero { padding-bottom: 100px; } .so-page-hero h1 { max-width: 900px; } /* Pricing */ .so-pricing { padding-top: 0; } .so-plans.wp-block-columns { gap: 24px; max-width: 1040px; margin: 0 auto; align-items: stretch; } .so-plan { display: flex; flex-direction: column; } .so-plan > * { margin: 0 !important; } .so-plan h3 { font-size: 22px; margin-bottom: 20px !important; } .so-plan.so-featured { border: 2px solid var(--wp--preset--color--accent); padding: 43px; } .so-badge { align-self: flex-start; margin-bottom: 18px !important; } .so-price, .so-card .so-price { font-family: var(--wp--preset--font-family--display); font-size: 64px; line-height: 1; letter-spacing: -1px; color: var(--wp--preset--color--contrast) !important; } .so-per, .so-card .so-per { font-size: 16px; margin-top: 12px !important; color: var(--wp--preset--color--muted); } .so-checklist { list-style: none; padding: 28px 0 0; margin: 28px 0 32px !important; border-top: 1px solid var(--wp--preset--color--line); font-size: 17px; } .so-checklist li { position: relative; padding-left: 32px; margin: 0 0 14px; } .so-checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: var(--so-check) center / contain no-repeat; } .so-plan .wp-block-buttons { margin-top: auto !important; } .so-plan .wp-block-button { width: 100%; } .so-plan .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; } /* About story */ .so-story-cols.wp-block-columns { gap: 96px; align-items: stretch; } .wp-block-column.so-photo-col { flex: 0 0 480px; display: flex; flex-direction: column; gap: 20px; } .so-photo-col > * { margin: 0 !important; } .so-founder-photo { flex: 1 1 auto; min-height: 480px; } .so-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 16px; display: block; } .so-founder-caption > * { margin: 0 !important; } .so-founder-name { font-size: 20px; font-weight: 600; } .so-founder-title { font-size: 16px; color: var(--wp--preset--color--muted); } .so-story-text h2 { margin-bottom: 32px; } .so-story-text > * + * { margin-top: 22px !important; } .so-stat { font-family: var(--wp--preset--font-family--display); font-size: 32px; line-height: 1.2; color: var(--wp--preset--color--accent); } .so-turn, .so-story-text .so-turn { font-size: 19px; font-weight: 600; color: var(--wp--preset--color--accent); } /* Values */ .so-values h2 { margin-bottom: 56px; } .so-beliefs.wp-block-columns { gap: 24px; } .so-belief { border-top: 3px solid var(--wp--preset--color--accent); padding-top: 28px; } .so-belief h3 { margin-bottom: 16px; } .so-belief p { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--muted); } /* Contact */ .so-contact { padding-top: 112px; } .so-contact-cols.wp-block-columns { gap: 96px; align-items: flex-start; } .so-contact-details { border-top: 1px solid var(--wp--preset--color--line); padding-top: 32px; margin-top: 40px !important; } .so-contact-details > * { margin: 0 0 4px !important; } .so-contact-value { font-size: 20px; } .so-form-slot { background: var(--wp--preset--color--surface); border: 1px dashed #2C3D5E; border-radius: 14px; padding: 44px; } .so-form-note { color: var(--wp--preset--color--muted); } /* Generic pages */ /* ---------- Footer ---------- */ .so-footer { padding: 72px var(--so-edge) 40px; border-top: 1px solid var(--so-rule); } .so-footer > * { margin: 0 !important; } .so-footer-cols.wp-block-columns { gap: 48px; margin-bottom: 56px !important; } .wp-block-column.so-footer-brand { flex: 0 0 38%; } .so-footer-cols .wp-block-column > * { margin: 0 0 16px !important; } .so-footer-logo img { height: 28px; width: auto; display: block; } .so-footer-about { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); max-width: 360px; margin-top: 20px !important; } .so-footer-email a { color: var(--wp--preset--color--contrast); font-weight: 500; } .so-footer-heading { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8A8F96; } .so-footer-list { list-style: none; padding: 0; margin: 0; font-size: 16px; } .so-footer-list li { margin: 0 0 12px; } .so-footer-list a { color: var(--wp--preset--color--muted); } .so-footer-list a:hover, .so-footer-email a:hover { color: var(--wp--preset--color--accent); } .so-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; border-top: 1px solid var(--so-rule); padding-top: 28px; } .so-footer-bottom > * { margin: 0 !important; } .so-footer-small { font-size: 13px; color: #7A7F86; } .so-footer .wp-block-social-links { gap: 14px; margin-top: 8px !important; } /* ---------- Legal pages ---------- */ .so-legal > * { max-width: var(--so-read); margin-left: auto !important; margin-right: auto !important; } .so-legal h1 { font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 8px; } .so-legal h2 { font-size: 26px; margin-top: 48px !important; margin-bottom: 12px; } .so-legal p, .so-legal li { font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--soft); } .so-legal a { color: var(--wp--preset--color--accent); } .so-legal-date { color: var(--wp--preset--color--muted) !important; font-size: 15px !important; margin-bottom: 32px !important; } .so-draft-note { background: #3A2A00; color: #FFD166 !important; border-radius: 8px; padding: 14px 18px; font-size: 15px !important; } /* ---------- Tablet & phone ---------- */ @media (max-width: 1024px) { .wp-block-column.so-photo-col { flex-basis: 380px; } .so-story-cols.wp-block-columns, .so-two-cols.wp-block-columns, .so-hero-cols.wp-block-columns { gap: 48px; } .so-steps.wp-block-columns { flex-wrap: wrap !important; } .so-steps .so-step { flex-basis: calc(50% - 12px) !important; } } @media (max-width: 781px) { .so-section { padding-top: 72px; padding-bottom: 72px; } .so-hero { padding-top: 56px; } .so-header { min-height: 72px; } .so-header-cta { display: none !important; } body .so-main > .wp-block-post-content > .so-lime, .so-lime { padding: 48px 28px; margin-bottom: 72px; } .so-bolt::before { right: 12px; opacity: 0.3; } .so-contract, .so-card, .so-form-slot { padding: 28px; } .so-plan.so-featured { padding: 27px; } .so-price, .so-card .so-price { font-size: 52px; } .so-steps .so-step { flex-basis: 100% !important; } .wp-block-column.so-photo-col { flex-basis: 100% !important; } .so-founder-photo { min-height: 420px; } .so-cta { padding-top: 88px; padding-bottom: 88px; } .wp-block-column.so-footer-brand { flex-basis: 100% !important; } .so-footer-cols.wp-block-columns { gap: 28px; } } /* ---------- Phones ---------- */ @media (max-width: 600px) { :root { --so-edge: 20px; } body { font-size: 17px; } h1 { font-size: 38px !important; letter-spacing: -0.5px !important; } h2 { font-size: 30px !important; } .so-section { padding-top: 56px; padding-bottom: 56px; } .so-hero { padding-top: 40px; } .so-lead { font-size: 18px; } .so-body, .so-lime-right p { font-size: 17px; } /* Buttons: full width, stacked, easy to tap */ .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; } .wp-block-buttons > .wp-block-button { width: 100%; } .wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; padding: 17px 20px; } .wp-block-button.is-style-outline > .wp-block-button__link { padding: 16px 20px; } /* Sample contract */ .so-contract { padding: 22px; } .so-contract-title { font-size: 19px; } .so-row { font-size: 15px; padding: 13px 0; } .so-row.so-total { font-size: 19px; padding-top: 16px; } .so-jobber { font-size: 14px; padding: 14px; } /* Demo video box */ .so-video { aspect-ratio: auto; min-height: 240px; } .so-video::before { width: 72px; height: 72px; background-size: 28px; } .so-video-note { font-size: 15px; } /* Cards, pricing, story */ .so-card { padding: 24px; } .so-card h3 { font-size: 22px; } .so-plan.so-featured { padding: 23px; } .so-price, .so-card .so-price { font-size: 46px; } .so-stat { font-size: 26px; } .so-founder-photo { min-height: 360px; } .so-how h2, .so-values h2 { margin-bottom: 32px; } .so-cta { padding-top: 64px; padding-bottom: 64px; } /* Lime band */ body .so-main > .wp-block-post-content > .so-lime, .so-lime { padding: 40px 22px; margin-bottom: 56px; border-radius: 14px; } .so-lime-cols.wp-block-columns { gap: 24px; } /* Footer */ .so-footer { padding-top: 48px; padding-bottom: 32px; } .so-footer-bottom { flex-direction: column; } } /* ---------- How it works ---------- */ .so-steps-page { padding-top: 0; } .so-step-row.wp-block-columns { gap: 80px; align-items: center; margin: 0 0 120px !important; } .so-step-row.wp-block-columns:last-child { margin-bottom: 0 !important; } .so-step-row.so-reverse { flex-direction: row-reverse; } .so-step-text > * + * { margin-top: 20px !important; } .so-step-text .so-step-num { font-family: var(--wp--preset--font-family--display); font-size: 40px; line-height: 1; color: var(--wp--preset--color--accent); } .so-step-img { margin: 0; } .so-step-img img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--wp--preset--color--line); } /* ---------- Pricing note ---------- */ .so-pay-note { text-align: center; font-size: 15px; color: var(--wp--preset--color--muted); margin-top: 32px !important; } /* ---------- FAQ ---------- */ .so-faq > * { max-width: var(--so-read); margin-left: auto !important; margin-right: auto !important; } .so-faq { padding-top: 0; } .so-faq-item { border-top: 1px solid var(--wp--preset--color--line); padding: 28px 0; margin: 0 !important; } .so-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--line); } .so-faq-item h3 { font-size: 21px; margin-bottom: 10px; } .so-faq-item p { font-size: 17px; line-height: 1.65; color: var(--wp--preset--color--soft); margin: 0; } /* ---------- Jobber page ---------- */ .so-jobber-details > * { max-width: var(--so-read); margin-left: auto !important; margin-right: auto !important; } .so-checklist-plain { border-top: 0; padding-top: 8px; } .so-fine-print { font-size: 14px; color: var(--wp--preset--color--muted); } /* ---------- Resources index ---------- */ .so-blog { padding-top: 0; } .so-post-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 0; } .so-post-card { height: 100%; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; } .so-post-card:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-3px); } .so-post-card > * { margin: 0 !important; } .so-post-thumb img { width: 100%; aspect-ratio: 1200 / 630; height: auto; object-fit: cover; display: block; } .so-post-body { padding: 24px 28px 28px; } .so-post-body > * { margin: 0 0 10px !important; } .so-post-card h3 { font-size: 21px; line-height: 1.3; } .so-post-card h3 a { color: var(--wp--preset--color--contrast); } .so-post-card h3 a:hover { color: var(--wp--preset--color--accent); } .so-post-card .wp-block-post-excerpt__excerpt { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 0; } .so-post-card .wp-block-post-excerpt__more-text { display: none; } .so-post-date { font-size: 14px; color: var(--wp--preset--color--muted); } /* ---------- Single article ---------- */ .so-article-head { padding-bottom: 0; } .so-article-head > * { box-sizing: border-box; max-width: var(--so-read); margin-left: auto !important; margin-right: auto !important; } .so-article-head > * + * { margin-top: 16px !important; } .so-article-head h1 { font-size: clamp(36px, 4.4vw, 58px); } .so-back a { color: var(--wp--preset--color--accent); } .so-article-hero-img { max-width: var(--so-read) !important; margin-top: 40px !important; } .so-article-hero-img img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--wp--preset--color--line); display: block; } .so-article { padding-top: 64px; } .so-article .wp-block-post-content > * { box-sizing: border-box; max-width: var(--so-read); margin-left: auto !important; margin-right: auto !important; margin-top: 0; margin-bottom: 0; } .so-article .wp-block-post-content > * + * { margin-top: 24px !important; } .so-article .wp-block-post-content p, .so-article .wp-block-post-content li { font-size: 19px; line-height: 1.75; color: var(--wp--preset--color--soft); } .so-article .wp-block-post-content a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; } .so-article .wp-block-post-content h2 { font-size: 30px; line-height: 1.15; margin-top: 56px !important; display: flex; gap: 16px; align-items: baseline; } .so-h-num { font-size: 22px; color: var(--wp--preset--color--accent); flex-shrink: 0; } .so-article-lead { font-size: 23px !important; line-height: 1.6 !important; color: var(--wp--preset--color--contrast) !important; } .so-callout { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-left: 4px solid var(--wp--preset--color--accent); border-radius: 14px; padding: 28px 32px; margin-top: 36px !important; } .so-callout > * { margin: 0 !important; } .so-callout-label, .so-tip-label { font-size: 13px !important; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--accent) !important; margin-bottom: 14px !important; } .so-article .so-callout-list { border-top: 0; padding-top: 0; margin: 0 !important; } .so-article .so-callout-list li { font-size: 17px; margin-bottom: 10px; } .so-tip { background: #15223C; border-radius: 14px; padding: 24px 28px; margin-top: 36px !important; margin-bottom: 12px !important; } .so-tip > * { margin: 0 !important; } .so-tip p:last-child { font-size: 18px; color: var(--wp--preset--color--contrast); } .so-pullquote { font-family: var(--wp--preset--font-family--display); font-size: 30px !important; line-height: 1.25 !important; color: var(--wp--preset--color--contrast) !important; border-left: 4px solid var(--wp--preset--color--accent); padding: 8px 0 8px 28px; margin-top: 44px !important; margin-bottom: 20px !important; } .so-article .wp-block-post-content .so-article-img { max-width: var(--so-read); margin-top: 44px !important; margin-bottom: 20px !important; } .so-article-img img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--wp--preset--color--line); display: block; } .so-article-img figcaption { font-size: 14px; color: var(--wp--preset--color--muted); text-align: center; margin-top: 12px; } .so-article .so-checklist { border-top: 0; padding-top: 4px; } .so-article .so-checklist li { margin-bottom: 10px; } .so-article-cta { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-radius: 18px; padding: 44px; margin-top: 64px !important; } .so-article-cta > * + * { margin-top: 16px !important; } .so-article-cta h3 { font-family: var(--wp--preset--font-family--display); font-size: 30px; font-weight: 400; } .so-article .wp-block-post-content .so-article-cta p { color: var(--wp--preset--color--base); font-size: 18px; } .so-article-cta.so-bolt::before { right: 32px; } .so-article .so-draft-note { max-width: var(--so-read); } /* ---------- Welcome ---------- */ .so-welcome { min-height: 50vh; } .so-welcome > * + * { margin-top: 24px !important; } @media (max-width: 1024px) { .so-post-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 781px) { .so-step-row.wp-block-columns, .so-step-row.so-reverse { flex-direction: column; gap: 28px; margin-bottom: 72px !important; } .so-post-grid .wp-block-post-template { grid-template-columns: 1fr; } .so-article .wp-block-post-content p, .so-article .wp-block-post-content li { font-size: 17px; } .so-article-lead { font-size: 19px !important; } .so-pullquote { font-size: 23px !important; padding-left: 18px; } .so-article .wp-block-post-content h2 { font-size: 25px; margin-top: 44px !important; } .so-callout, .so-tip { padding: 22px; } .so-article-cta { padding: 28px 22px; } .so-article { padding-top: 40px; } } .so-setup, .so-card .so-setup { font-size: 15px; font-weight: 600; color: var(--wp--preset--color--accent); margin-top: 6px !important; } .so-article .wp-block-post-content .wp-block-button__link { text-decoration: none; } .so-article .wp-block-post-content .so-btn-dark > .wp-block-button__link { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); } .so-brand { font-weight: 700; color: inherit; } /* ================================================================== * LIGHT THEME (v2.0) * Page content sits on a light background; the header, footer, and a * few feature sections stay navy to break the page up. * ================================================================== */ .so-header, .so-footer { background: #0B1426; } .so-footer { border-top: 0; } /* Light color set for everything inside the page content */ .so-main { --wp--preset--color--contrast: #0B1426; --wp--preset--color--soft: #3A4556; --wp--preset--color--muted: #5B6472; --wp--preset--color--surface: #FFFFFF; --wp--preset--color--line: #E1E4EA; --so-rule: #E1E4EA; --so-ink-accent: #0B1426; --so-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1426' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background: #F4F5F2; color: #0B1426; } /* Navy sections and cards inside the light page */ .so-main .so-how, .so-main .so-featured, .so-main .so-navy { --wp--preset--color--contrast: #F4F4F1; --wp--preset--color--soft: #C4C7CC; --wp--preset--color--muted: #A3A7AD; --wp--preset--color--surface: #111D33; --wp--preset--color--line: #22314F; --so-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1FF10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background: #0B1426; color: #F4F4F1; } .so-main .so-how { border: 0; } .so-main .so-how .so-step-num { color: var(--wp--preset--color--accent); } /* No more alternating white bands: one continuous light background */ .so-main .so-story, .so-main .so-surface:not(.so-how) { background: transparent; border: 0; } /* Lime text becomes a darker green so it's readable on light backgrounds */ .so-main .so-eyebrow, .so-main .so-step-num, .so-main .so-step-text .so-step-num, .so-main .so-setup, .so-main .so-card .so-setup, .so-main .so-h-num, .so-main .so-callout-label, .so-main .so-tip-label, .so-main .so-back a { color: var(--so-ink-accent) !important; } .so-main .so-legal a, .so-main .so-article .wp-block-post-content a:not(.wp-block-button__link) { color: var(--so-ink-accent); } .so-main .so-post-card h3 a:hover, .so-main .so-footer-list a:hover { color: var(--so-ink-accent); } /* Highlighter-style lime for the standout lines on the About page */ .so-main .so-stat, .so-main .so-turn, .so-main .so-story-text .so-stat, .so-main .so-story-text .so-turn { color: #0B1426; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 0.35em; text-underline-offset: -0.12em; text-decoration-skip-ink: none; } /* Buttons */ .so-main .wp-block-button.is-style-outline > .wp-block-button__link { color: #0B1426; border-color: #C9CED8; } .so-main .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #0B1426; } .so-main .so-featured .wp-block-button.is-style-outline > .wp-block-button__link { color: #F4F4F1; border-color: #3A4A6B; } .so-main .so-btn-dark > .wp-block-button__link, .so-main .so-btn-dark > .wp-block-button__link:hover, .so-article .wp-block-post-content .so-btn-dark > .wp-block-button__link { background: #0B1426; color: #F4F4F1; } /* Cards and boxes on light */ .so-main .so-card, .so-main .so-contract, .so-main .so-callout, .so-main .so-post-card { box-shadow: 0 1px 2px rgba(11, 20, 38, 0.04); } .so-main .so-jobber { background: #F4F5F2; } .so-main .so-form-slot { border-color: #C9CED8; } .so-main .so-tip { background: #F6FADF; border: 1px solid #E4EFB5; } .so-main .so-tip p:last-child { color: #0B1426; } .so-main .so-plan.so-featured { border-color: var(--wp--preset--color--accent); } .so-main .so-plan.so-featured .so-setup { color: var(--wp--preset--color--accent) !important; } .so-main .so-draft-note { background: #FFF4D6; color: #7A5200 !important; } /* Screenshots: the navy visuals are their own frame, so no border or shadow */ .so-main .so-step-img img, .so-main .so-article-img img, .so-main .so-article-hero-img img, .so-main .so-post-thumb img { border: 0; } .so-main .so-belief { border-top-color: #0B1426; } .so-main .so-callout { border-left-color: #0B1426; } /* ---------- v2.1: spacing before the footer ---------- */ .so-main { display: flow-root; } body .so-main > .wp-block-post-content > .so-lime:last-child { margin-bottom: 140px; } /* ---------- v2.1: How it works as a connected timeline ---------- */ .so-main .so-steps-page { padding-top: 0; padding-bottom: 0; } .so-main .so-step-row.wp-block-columns { position: relative; margin: 0 !important; padding: 72px 0; } .so-main .so-step-row.wp-block-columns:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -44px; width: 2px; height: 88px; transform: translateX(-1px); background: repeating-linear-gradient(to bottom, #0B1426 0 6px, transparent 6px 14px); } .so-main .so-step-row.wp-block-columns:not(:last-child)::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; transform: translateX(-8px); border-radius: 50%; background: #D1FF10; border: 3px solid #0B1426; box-sizing: border-box; z-index: 1; } .so-main .so-steps-page + .so-lime, body .so-main > .wp-block-post-content > .so-steps-page + .so-lime { margin-top: 96px; } /* ---------- v2.1: section openers ---------- */ .so-main .so-story h2::before, .so-main .so-values h2::before, .so-main .so-problem h2::before, .so-main .so-demo h2::before { content: ""; display: block; width: 56px; height: 6px; border-radius: 3px; background: #D1FF10; margin-bottom: 24px; box-shadow: 64px 0 0 #0B1426; } @media (max-width: 781px) { .so-main .so-step-row.wp-block-columns { padding: 48px 0; } .so-main .so-step-row.wp-block-columns:not(:last-child)::after { left: 32px; height: 64px; bottom: -32px; } .so-main .so-step-row.wp-block-columns:not(:last-child)::before { left: 32px; } body .so-main > .wp-block-post-content > .so-lime:last-child { margin-bottom: 72px; } body .so-main > .wp-block-post-content > .so-steps-page + .so-lime { margin-top: 56px; } } /* ---------- v2.2: neon lime numbers in the navy CALL. ESTIMATE. SIGN. DISPATCH. band ---------- */ .so-main .so-how .so-step-num { color: var(--wp--preset--color--accent) !important; } /* ---------- v2.3: lime sections with only a button line it up to the right ---------- */ .so-lime-right:has(> .wp-block-buttons:only-child) { display: flex; justify-content: flex-end; } /* ---------- v2.4: no more dark green; navy on light backgrounds ---------- */ .so-main .so-legal a, .so-main .so-article .wp-block-post-content a:not(.wp-block-button__link), .so-main .so-back a { color: #0B1426; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 4px; } .so-main .so-eyebrow { color: #0B1426 !important; } /* ---------- v2.4: navy sample contract card on the Home page ---------- */ .so-main .so-contract { --wp--preset--color--contrast: #F4F4F1; --wp--preset--color--soft: #C4C7CC; --wp--preset--color--muted: #A3A7AD; --wp--preset--color--surface: #111D33; --wp--preset--color--line: #22314F; --so-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D1FF10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background: #0B1426; color: #F4F4F1; border-color: #0B1426; box-shadow: 0 24px 60px rgba(11, 20, 38, 0.18); } .so-main .so-contract .so-jobber { background: #111D33; color: #C4C7CC; } .so-main .so-contract .so-label { color: #8A8F96; } .so-main .so-contract p { color: inherit; } .so-main .so-contract .so-row.so-sub { color: #C4C7CC; } /* ---------- v2.5: "01. The call comes in" on one line ---------- */ .so-main .so-step-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; } .so-main .so-step-text > * { margin-top: 0 !important; } .so-main .so-step-text > .so-step-num { flex: 0 0 auto; margin: 0 !important; color: #0B1426 !important; line-height: 1.05; font-size: clamp(32px, 3.6vw, 52px) !important; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; } .so-main .so-step-text > .so-step-num::after { content: "."; } .so-main .so-step-text > h2 { flex: 1 1 0; min-width: 0; margin: 0 !important; } .so-main .so-step-text > .so-body { flex: 0 0 100%; margin-top: 24px !important; } /* ---------- v2.5: About header with a "By the numbers" card ---------- */ .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); column-gap: 80px; align-items: center; padding-bottom: 72px; } .so-main .so-about-hero > *:not(.so-hero-stats), .so-main .so-page-hero:has(> .so-hero-stats) > *:not(.so-hero-stats) { grid-column: 1; } .so-main .so-hero-stats { grid-column: 2; grid-row: 1 / span 3; background: #0B1426; color: #F4F4F1; border-radius: 18px; padding: 36px 40px; margin: 0 !important; box-shadow: 0 24px 60px rgba(11, 20, 38, 0.18); } .so-main .so-hero-stats > * { margin: 0 !important; } .so-main .so-hero-stats .so-label { color: #8A8F96; margin-bottom: 8px !important; } .so-main .so-stat-item { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid #22314F; } .so-main .so-stat-item:last-child { border-bottom: 0; padding-bottom: 0; } .so-main .so-stat-item > * { margin: 0 !important; } .so-main .so-stat-num { font-family: var(--wp--preset--font-family--display); font-size: 40px; line-height: 1; color: #D1FF10; min-width: 128px; } .so-main .so-stat-label { font-size: 17px; color: #C4C7CC; } .so-main .so-about-hero + .so-story { padding-top: 72px; } @media (max-width: 900px) { .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats) { display: block; } .so-main .so-hero-stats { margin-top: 40px !important; padding: 28px; } .so-main .so-stat-num { font-size: 32px; min-width: 104px; } } .so-main .so-stat-num { min-width: 190px; white-space: nowrap; } @media (max-width: 900px) { .so-main .so-stat-num { min-width: 140px; } } /* ---------- v2.7: "Proven in real storms" card ---------- */ .so-main .so-hero-stats { padding: 40px 44px; } .so-main .so-stat-big { font-family: var(--wp--preset--font-family--display); font-size: clamp(40px, 4vw, 60px); line-height: 1; color: #D1FF10; white-space: nowrap; letter-spacing: -1px; margin-top: 18px !important; } .so-main .so-stat-big-label { font-size: 18px; line-height: 1.5; color: #C4C7CC; margin-top: 12px !important; max-width: 360px; } .so-main .so-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px !important; padding-top: 24px !important; border-top: 1px solid #22314F; } .so-main .so-stat-row > * { margin: 0 !important; } .so-main .so-stat-row .so-stat-item { display: block; padding: 0; border: 0; } .so-main .so-stat-row .so-stat-num { font-size: 30px; min-width: 0; white-space: nowrap; } .so-main .so-stat-row .so-stat-label { font-size: 15px; line-height: 1.45; margin-top: 8px !important; } @media (max-width: 900px) { .so-main .so-hero-stats { padding: 28px; } .so-main .so-stat-row .so-stat-num { font-size: 26px; } } /* ---------- v2.8: "they need you NOW" line ---------- */ .so-main .so-stat-now { margin-top: 24px !important; padding-top: 22px !important; border-top: 1px solid #22314F; font-size: 19px; line-height: 1.45; font-weight: 600; color: #F4F4F1; } .so-main .so-stat-now strong { color: #D1FF10; font-family: var(--wp--preset--font-family--display); font-weight: 400; letter-spacing: 0.5px; } .so-main .so-stat-now { font-size: 17px; font-weight: 500; color: #C4C7CC; } .so-main .so-stat-now strong { display: block; margin-top: 10px; color: #D1FF10; font-family: inherit; font-weight: 700; font-size: 19px; letter-spacing: 0; } /* keep the About header text together while the card sits beside it */ .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats) { grid-template-rows: 1fr repeat(5, auto) 1fr; row-gap: 0; } .so-main .so-about-hero > :nth-child(1) { grid-row: 2; } .so-main .so-about-hero > :nth-child(2) { grid-row: 3; margin-top: 16px !important; } .so-main .so-about-hero > :nth-child(3) { grid-row: 4; margin-top: 28px !important; } .so-main .so-about-hero > :nth-child(4) { grid-row: 5; margin-top: 18px !important; } .so-main .so-about-hero > :nth-child(5) { grid-row: 6; margin-top: 18px !important; } .so-main .so-about-hero > .so-hero-stats { grid-row: 1 / 8; } /* ---------- v2.9: rewritten About header ---------- */ .so-main .so-about-hero h1 { font-size: clamp(38px, 4.2vw, 62px); } .so-main .so-about-hero .so-lead { max-width: 620px; } .so-main .so-about-hero .so-body { font-size: 18px; max-width: 620px; } .so-main .so-hero-closer { font-weight: 700; color: #0B1426 !important; } .so-main .so-stat-caps { text-transform: uppercase; letter-spacing: 2px; font-size: 14px !important; font-weight: 600; color: #F4F4F1 !important; margin-top: 14px !important; } .so-main .so-stat-note { font-size: 15px; color: #A3A7AD; margin-top: 6px !important; } .so-main .so-stat-tagline { margin-top: 26px !important; padding-top: 22px !important; border-top: 1px solid #22314F; font-family: var(--wp--preset--font-family--display); font-size: clamp(15px, 1.45vw, 20px); letter-spacing: 0.5px; color: #D1FF10; white-space: normal; } @media (max-width: 600px) { .so-main .so-stat-tagline { font-size: 16px; white-space: normal; } } /* ---------- v2.9.1: About header, headline spans the full width ---------- */ .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats) { grid-template-rows: auto auto auto auto 1fr; column-gap: 72px; align-items: start; } .so-main .so-about-hero > :nth-child(1) { grid-column: 1 / -1 !important; grid-row: 1; } .so-main .so-about-hero > :nth-child(2) { grid-column: 1 / -1 !important; grid-row: 2; margin-top: 16px !important; text-wrap: balance; } .so-main .so-about-hero > :nth-child(3) { grid-column: 1 !important; grid-row: 3; margin-top: 44px !important; } .so-main .so-about-hero > :nth-child(4) { grid-column: 1 !important; grid-row: 4; margin-top: 18px !important; } .so-main .so-about-hero > :nth-child(5) { grid-column: 1 !important; grid-row: 5; margin-top: 18px !important; } .so-main .so-about-hero > .so-hero-stats { grid-column: 2 !important; grid-row: 3 / 6 !important; margin-top: 44px !important; } .so-main .so-about-hero h1 { font-size: clamp(38px, 4.6vw, 68px); max-width: none; } /* ---------- v2.11: About header on navy, text left, proof card right ---------- */ .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats){display:grid !important;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);column-gap:72px;grid-template-rows:1fr auto auto auto auto auto 1fr;align-items:start;padding-bottom:96px} .so-main .so-about-hero > :nth-child(1){grid-column:1 !important;grid-row:2 !important;margin-top:0 !important} .so-main .so-about-hero > :nth-child(2){grid-column:1 !important;grid-row:3 !important;margin-top:16px !important;font-size:clamp(34px,3.3vw,48px) !important;max-width:none} .so-main .so-about-hero > :nth-child(3){grid-column:1 !important;grid-row:4 !important;margin-top:28px !important;font-size:19px} .so-main .so-about-hero > :nth-child(4){grid-column:1 !important;grid-row:5 !important;margin-top:14px !important} .so-main .so-about-hero > :nth-child(5){grid-column:1 !important;grid-row:6 !important;margin-top:14px !important} .so-main .so-about-hero > .so-hero-stats{grid-column:2 !important;grid-row:1 / 8 !important;align-self:center;display:block !important;margin-top:0 !important;padding:40px !important} .so-main .so-hero-stats > .so-label{margin:0 !important} .so-main .so-hero-stats > .so-stat-big{margin-top:18px !important;font-size:clamp(48px,4.6vw,66px)} .so-main .so-hero-stats > .so-stat-row{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:26px !important;padding:24px 0 0 !important;border-left:0;border-top:1px solid #22314F} .so-main .so-hero-stats .so-stat-row .so-stat-num{font-size:30px} .so-main .so-hero-stats .so-stat-row .so-stat-label{font-size:15px} .so-main .so-hero-stats > .so-stat-tagline{text-align:left;margin-top:24px !important;padding-top:20px !important;border-top:1px solid #22314F;font-size:17px} .so-main .so-about-hero { background: #0B1426; color: #F4F4F1; box-shadow: 0 0 0 100vmax #0B1426; clip-path: inset(0 -100vmax); padding-top: 120px; } .so-main .so-about-hero h1 { color: #F4F4F1; } .so-main .so-about-hero .so-eyebrow, .so-main .so-about-hero .so-eyebrow .so-brand { color: #D1FF10 !important; } .so-main .so-about-hero .so-lead, .so-main .so-about-hero .so-body { color: #C4C7CC; } .so-main .so-about-hero .so-brand { color: #F4F4F1; } .so-main .so-about-hero .so-hero-closer { color: #D1FF10 !important; } .so-main .so-about-hero > .so-hero-stats { background: #111D33; border: 1px solid #22314F; border-top: 4px solid #D1FF10; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); } .so-main .so-about-hero + .so-story { padding-top: 120px; } @media (max-width: 900px) { .so-main .so-about-hero, .so-main .so-page-hero:has(> .so-hero-stats) { display: block !important; padding-top: 72px; padding-bottom: 72px; } .so-main .so-about-hero > .so-hero-stats { margin-top: 40px !important; padding: 28px !important; } .so-main .so-about-hero + .so-story { padding-top: 72px; } } /* ---------- v2.12: light gray proof card on the navy About header ---------- */ .so-main .so-about-hero > .so-hero-stats { background: #F4F5F2; color: #0B1426; border: 0; border-top: 8px solid #D1FF10; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); } .so-main .so-about-hero .so-hero-stats .so-label { color: #5B6472 !important; } .so-main .so-about-hero .so-hero-stats .so-stat-big, .so-main .so-about-hero .so-hero-stats .so-stat-num, .so-main .so-about-hero .so-hero-stats .so-stat-caps, .so-main .so-about-hero .so-hero-stats .so-stat-tagline, .so-main .so-about-hero .so-hero-stats .so-brand { color: #0B1426 !important; } .so-main .so-about-hero .so-hero-stats .so-stat-note, .so-main .so-about-hero .so-hero-stats .so-stat-label { color: #3A4556 !important; } .so-main .so-about-hero .so-hero-stats .so-stat-row, .so-main .so-about-hero .so-hero-stats .so-stat-tagline { border-color: #DADDE3 !important; } /* ---------- v2.13: slate proof card on the navy About header ---------- */ .so-main .so-about-hero > .so-hero-stats { background: #1F2A3D; color: #F4F4F1; border: 1px solid #2E3A50; border-top: 8px solid #D1FF10; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); } .so-main .so-about-hero .so-hero-stats .so-label { color: #B8BDC6 !important; } .so-main .so-about-hero .so-hero-stats .so-stat-big, .so-main .so-about-hero .so-hero-stats .so-stat-num, .so-main .so-about-hero .so-hero-stats .so-stat-tagline { color: #D1FF10 !important; } .so-main .so-about-hero .so-hero-stats .so-stat-caps, .so-main .so-about-hero .so-hero-stats .so-brand { color: #FFFFFF !important; } .so-main .so-about-hero .so-hero-stats .so-stat-note, .so-main .so-about-hero .so-hero-stats .so-stat-label { color: #D5D8DE !important; } .so-main .so-about-hero .so-hero-stats .so-stat-row, .so-main .so-about-hero .so-hero-stats .so-stat-tagline { border-color: rgba(255, 255, 255, 0.14) !important; } /* ---------- v2.14: How it works header card + tidier step titles ---------- */ .so-main .so-hero-steps { list-style: none; counter-reset: so-step; margin: 18px 0 0 !important; padding: 0; } .so-main .so-hero-steps li { counter-increment: so-step; display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 17px; font-weight: 600; color: #F4F4F1; margin: 0; } .so-main .so-hero-steps li::before { content: counter(so-step, decimal-leading-zero); font-family: var(--wp--preset--font-family--display); font-size: 16px; color: #D1FF10; min-width: 28px; } .so-main .so-hero-steps li:last-child { border-bottom: 0; } .so-main .so-hero-stats .so-hero-steps + .so-stat-tagline { margin-top: 12px !important; } /* step rows: number and title stay together, no stretched gaps */ .so-main .so-step-text { align-content: flex-start; align-self: center; flex-wrap: nowrap; flex-direction: column; } .so-main .so-step-text > .so-step-num { display: none !important; } .so-main .so-step-text > h2 { font-size: clamp(28px, 2.7vw, 40px) !important; line-height: 1.12; text-wrap: balance; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; } .so-main .so-steps-page { counter-reset: so-row; } .so-main .so-step-row { counter-increment: so-row; } .so-main .so-step-text > h2::before { content: counter(so-row, decimal-leading-zero) "."; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; } .so-main .so-step-text > .so-body { margin-top: 20px !important; } /* ---------- v2.16: Home hero buttons ---------- */ .so-main .so-hero .so-btn-play > .wp-block-button__link { background: #0B1426; color: #D1FF10; } .so-main .so-hero .so-btn-play > .wp-block-button__link:hover { background: #1F2A3D; color: #D1FF10; } .so-main .so-contract .so-pill, .so-main .so-contract p.so-pill { background: #D1FF10; color: #0B1426 !important; } /* ---------- v2.17: How it works header stays light, with a navy steps card ---------- */ .so-main .so-about-hero.so-hiw-hero { background: transparent; color: #0B1426; box-shadow: none; clip-path: none; padding-top: 112px; } .so-main .so-hiw-hero h1 { color: #0B1426; } .so-main .so-hiw-hero .so-eyebrow { color: #0B1426 !important; } .so-main .so-hiw-hero .so-lead, .so-main .so-hiw-hero .so-body { color: #3A4556; } .so-main .so-hiw-hero .so-lead .so-brand, .so-main .so-hiw-hero .so-body .so-brand { color: #0B1426; } .so-main .so-hiw-hero .so-hero-closer { color: #0B1426 !important; } .so-main .so-hiw-hero > .so-hero-stats { background: #0B1426; border: 0; border-top: 8px solid #D1FF10; } /* ---------- v2.18: About header light like the other pages, navy proof card ---------- */ .so-main .so-about-hero { background: transparent; color: #0B1426; box-shadow: none; clip-path: none; padding-top: 112px; } .so-main .so-about-hero h1 { color: #0B1426; } .so-main .so-about-hero .so-eyebrow, .so-main .so-about-hero .so-eyebrow .so-brand { color: #0B1426 !important; } .so-main .so-about-hero .so-lead, .so-main .so-about-hero .so-body { color: #3A4556; } .so-main .so-about-hero > :not(.so-hero-stats) .so-brand { color: #0B1426; } .so-main .so-about-hero .so-hero-closer { color: #0B1426 !important; } .so-main .so-about-hero > .so-hero-stats { background: #0B1426; border: 0; border-top: 8px solid #D1FF10; } /* ---------- v2.19: animated 62% stat ---------- */ .so-main .so-stat-big.so-count { display: inline-block; font-variant-numeric: tabular-nums; } .so-main .so-stat-big.so-count-done { animation: so-pop 0.6s ease-out; } @keyframes so-pop { 0% { transform: scale(1); text-shadow: 0 0 0 rgba(209, 255, 16, 0); } 40% { transform: scale(1.08); text-shadow: 0 0 28px rgba(209, 255, 16, 0.55); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(209, 255, 16, 0); } } .so-main .so-count-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); margin: 16px 0 4px !important; overflow: hidden; } .so-main .so-count-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #9CC800, #D1FF10); box-shadow: 0 0 14px rgba(209, 255, 16, 0.6); } .so-main .so-count-bar.so-count-done span { animation: so-bar-glow 1.2s ease-out; } @keyframes so-bar-glow { 0% { box-shadow: 0 0 24px rgba(209, 255, 16, 0.9); } 100% { box-shadow: 0 0 14px rgba(209, 255, 16, 0.6); } } @media (prefers-reduced-motion: reduce) { .so-main .so-stat-big.so-count-done, .so-main .so-count-bar.so-count-done span { animation: none; } } /* ---------- v2.21: demo video ---------- */ .so-main .so-demo-lead { max-width: 760px; } .so-main .so-video-player { max-width: none; margin: 40px 0 0 !important; } .so-main .so-video-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #0B1426; box-shadow: 0 30px 70px rgba(11, 20, 38, 0.25); } /* ---------- v2.22: readable links on the legal pages ---------- */ .so-legal a, .so-main .so-legal a { color: #0B1426 !important; font-weight: 600; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 4px; } .so-legal a:hover { text-decoration-color: #0B1426; } /* ---------- v2.22: contact form ---------- */ .so-form-card { background: #FFFFFF; border: 1px solid #DADDE3; border-top: 8px solid #D1FF10; border-radius: 18px; padding: 36px; box-shadow: 0 24px 60px rgba(11, 20, 38, 0.10); } .so-form-title { font-family: var(--wp--preset--font-family--display); font-size: 28px; line-height: 1.15; color: #0B1426; margin: 0 0 6px; } .so-form-sub { color: #3A4556; font-size: 16px; margin: 0 0 24px; } .so-form { display: grid; gap: 16px; } .so-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .so-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #0B1426; } .so-form input, .so-form select, .so-form textarea { font: inherit; font-weight: 400; font-size: 16px; color: #0B1426; background: #F4F5F2; border: 1px solid #CBD0D8; border-radius: 10px; padding: 12px 14px; width: 100%; box-sizing: border-box; } .so-form textarea { resize: vertical; min-height: 120px; } .so-form input:focus, .so-form select:focus, .so-form textarea:focus { outline: none; border-color: #0B1426; box-shadow: 0 0 0 3px rgba(209, 255, 16, 0.6); background: #FFFFFF; } .so-form-submit { justify-self: start; background: #D1FF10; color: #0B1426; border: 0; border-radius: 10px; padding: 16px 30px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; } .so-form-submit:hover { background: #0B1426; color: #D1FF10; } .so-form-fine { font-size: 13px; color: #5B6472; margin: 0; } .so-form-fine a { color: #0B1426; text-decoration: underline; } .so-form-error { background: #FDECEC; color: #8A1C1C; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-weight: 600; } .so-form-success-title { font-family: var(--wp--preset--font-family--display); font-size: 28px; color: #0B1426; margin: 0 0 8px; } .so-form-success a { color: #0B1426; font-weight: 600; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; } .so-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 700px) { .so-form-card { padding: 24px; } .so-form-row { grid-template-columns: 1fr; } .so-form-submit { width: 100%; justify-self: stretch; } } .so-contact-value a { color: #0B1426; font-weight: 600; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 4px; } /* ---------- v2.23: every link on light backgrounds is navy ---------- */ .so-main a:not(.wp-block-button__link):not(.so-form-submit) { color: #0B1426; } .so-main p a:not(.wp-block-button__link), .so-main li a:not(.wp-block-button__link) { text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 4px; } .so-main p a:not(.wp-block-button__link):hover, .so-main li a:not(.wp-block-button__link):hover { text-decoration-color: #0B1426; } .so-main .so-post-card h3 a, .so-main .so-post-card a { text-decoration: none; } /* ---------- v2.23: free trial ---------- */ .so-main .so-trial { display: block; width: fit-content; margin-top: 12px !important; background: #D1FF10; color: #0B1426 !important; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; border-radius: 999px; padding: 6px 14px; } /* ---------- v2.23: login portal ---------- */ .so-main .so-login-hero { max-width: none; text-align: left; } .so-main .so-login-hero > * { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } .so-main .so-login-hero h1 { font-size: clamp(34px, 4vw, 54px); white-space: nowrap; } @media (max-width: 700px) { .so-main .so-login-hero h1 { white-space: normal; font-size: 36px; } } .so-main .so-login-card { margin-top: 32px !important; } .so-main .so-login-go { display: inline-block; text-decoration: none !important; } .so-main a.so-form-submit { color: #0B1426; } .so-main a.so-form-submit:hover { color: #D1FF10; } /* ---------- v2.23: phone vs laptop demo video ---------- */ .so-main .so-video-player .so-video-mobile { display: none; } @media (max-width: 700px) { .so-main .so-video-player .so-video-desktop { display: none; } .so-main .so-video-player .so-video-mobile { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: #0B1426; box-shadow: 0 24px 60px rgba(11, 20, 38, 0.25); } .so-main .so-video-player { margin-left: -8px !important; margin-right: -8px !important; } } /* ---------- v2.24: free trial bar above the menu ---------- */ .so-trial-bar { background: #D1FF10; color: #0B1426; text-align: center; font-family: var(--wp--preset--font-family--body); } .so-trial-bar p { margin: 0; padding: 10px 20px; font-size: 15px; line-height: 1.4; } .so-trial-bar a { color: #0B1426; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; white-space: nowrap; } .so-trial-bar a:hover { text-decoration-thickness: 2px; } .so-trial-bar-short { display: none; } @media (max-width: 700px) { .so-trial-bar p { font-size: 14px; padding: 9px 14px; } .so-trial-bar-long { display: none; } .so-trial-bar-short { display: inline; } } .so-btn-trial.is-style-outline > .wp-block-button__link { background: transparent; } /* ---------- v2.26: header Log in with person icon ---------- */ .so-header-actions { display: flex; align-items: center; gap: 22px; } .so-header-actions > .wp-block-buttons { margin: 0; } .so-header-login { display: inline-flex; align-items: center; gap: 8px; color: #F4F4F1 !important; font-weight: 600; font-size: 16px; text-decoration: none !important; white-space: nowrap; } .so-header-login svg { color: #D1FF10; flex: none; } .so-header-login:hover { color: #D1FF10 !important; } @media (max-width: 900px) { .so-header-actions { gap: 0; } .so-header-actions .so-header-cta { display: none !important; } .so-header-login span { display: none; } .so-header-login { padding: 8px; } .so-header-login svg { width: 26px; height: 26px; } } .so-login-card .so-form-fine { margin-top: 18px; } .so-login-tips { margin: 0 0 18px; padding-left: 20px; color: #3A4556; font-size: 16px; line-height: 1.6; } .so-login-tips li { margin: 6px 0; } .so-login-tips a { color: #0B1426; font-weight: 600; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 4px; } /* ---------- v2.32: sign-up + customer portal ---------- */ .so-main .so-login-hero > .so-portal { max-width: 1000px !important; } .so-plan-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .so-plan-pick legend { font-size: 14px; font-weight: 600; color: #0B1426; margin-bottom: 8px; } .so-plan-opt { display: flex !important; align-items: center; gap: 10px !important; border: 2px solid #DADDE3; border-radius: 12px; padding: 14px 16px; cursor: pointer; font-weight: 400 !important; } .so-plan-opt input { width: auto !important; accent-color: #0B1426; } .so-plan-opt:has(input:checked) { border-color: #0B1426; background: #F7FBE4; box-shadow: inset 0 0 0 1px #0B1426; } .so-plan-opt em { display: inline-block; margin-left: 6px; background: #D1FF10; color: #0B1426; font-style: normal; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; } .so-check { display: flex !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; } .so-check input { width: auto !important; margin-top: 4px; accent-color: #0B1426; } .so-form-submit[disabled] { opacity: 0.45; cursor: not-allowed; } #so-login-form p { margin: 0 0 14px; } #so-login-form label { display: block; font-size: 14px; font-weight: 600; color: #0B1426; margin-bottom: 6px; } #so-login-form input[type=text], #so-login-form input[type=password] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; background: #F4F5F2; border: 1px solid #CBD0D8; border-radius: 10px; padding: 12px 14px; } #so-login-form .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 400; } #so-login-form input[type=submit] { background: #D1FF10; color: #0B1426; border: 0; border-radius: 10px; padding: 14px 30px; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; } .so-portal-banner { background: #D1FF10; color: #0B1426; border-radius: 14px; padding: 16px 20px; font-weight: 600; margin-bottom: 24px; } .so-portal-banner.so-warn { background: #FFF1D6; } .so-portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; } .so-portal-head h2 { margin: 6px 0 4px; font-size: 34px; } .so-portal-who { color: #3A4556; margin: 0; } .so-status { border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; white-space: nowrap; background: #E6E9EE; color: #0B1426; } .so-status-trialing { background: #D1FF10; } .so-status-active { background: #0B1426; color: #D1FF10; } .so-status-past_due, .so-status-unpaid { background: #FDECEC; color: #8A1C1C; } .so-portal-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; } .so-portal-card { background: #FFFFFF; border: 1px solid #DADDE3; border-radius: 18px; padding: 28px; } .so-portal-app { border-top: 8px solid #D1FF10; } .so-portal-card .so-label { color: #5B6472; margin: 0 0 8px; } .so-portal-big { font-family: var(--wp--preset--font-family--display); font-size: 24px; line-height: 1.2; color: #0B1426; margin: 0 0 12px; } .so-portal-card p { color: #3A4556; } .so-btn-outline { display: inline-block; border: 2px solid #0B1426; color: #0B1426 !important; border-radius: 10px; padding: 12px 22px; font-weight: 700; text-decoration: none !important; margin-top: 6px; } .so-btn-outline:hover { background: #0B1426; color: #D1FF10 !important; } .so-warn-text { color: #8A1C1C !important; font-weight: 600; } .so-portal-foot { margin-top: 24px; color: #5B6472; } @media (max-width: 800px) { .so-portal-grid, .so-plan-pick { grid-template-columns: 1fr; } .so-portal-head { flex-direction: column; } } .so-main .so-login-hero:has(.so-portal) > * { max-width: 1000px !important; } .so-portal-card .so-portal-big { color: #0B1426; } .so-check a { color: #0B1426; font-weight: 600; text-decoration: underline; text-decoration-color: #D1FF10; text-decoration-thickness: 3px; text-underline-offset: 3px; } /* v2.33: portal polish */ .so-portal-banner { background: #0B1426; color: #D1FF10; } .so-portal-banner strong { color: #D1FF10; } .so-portal-banner.so-warn { background: #0B1426; color: #FFD27A; } .so-portal-app .so-login-go { margin-bottom: 18px; } .so-portal-app .so-form-fine { margin-top: 0; line-height: 1.6; } .so-portal-banner .so-brand { color: #D1FF10; } .so-trial-bar .so-brand { color: #0B1426; } /* v2.34: StormOps™ is bold only in regular paragraph text, not in headings, titles, or labels */ h1 .so-brand, h2 .so-brand, h3 .so-brand, h4 .so-brand, h5 .so-brand, h6 .so-brand, .so-portal-big .so-brand, .so-form-title .so-brand, .so-form-success-title .so-brand, .so-label .so-brand, .so-eyebrow .so-brand, .so-contract-title .so-brand, .so-stat-caps .so-brand, .so-stat-tagline .so-brand { font-weight: inherit; } /* v2.34: welcome banner: white card, navy text, lime accent */ .so-portal-banner { background: #FFFFFF; color: #0B1426; border: 1px solid #DADDE3; border-left: 8px solid #D1FF10; box-shadow: 0 12px 30px rgba(11, 20, 38, 0.06); } .so-portal-banner .so-brand, .so-portal-banner strong { color: #0B1426; } .so-portal-banner.so-warn { background: #FFFFFF; color: #0B1426; border-left-color: #F2A900; } /* ---------- v2.35: Jobber page, animated contract to Jobber ---------- */ .so-main .so-jf-section { padding-top: 40px; } .so-main .so-jf-intro { max-width: 760px; margin-bottom: 36px !important; } .so-jf { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: stretch; gap: 0; background: #0B1426; border-radius: 22px; padding: 40px; overflow: hidden; } .so-jf-card { border-radius: 16px; padding: 24px 24px 20px; font-size: 15px; } .so-jf-src { background: #111D33; color: #F4F4F1; border: 1px solid #22314F; } .so-jf-dst { background: #FFFFFF; color: #0B1426; border-top: 6px solid #D1FF10; } .so-jf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .so-jf-label { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: #8A8F96; } .so-jf-title { margin: 4px 0 0; font-weight: 700; font-size: 17px; } .so-jf-pill { border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .3s, color .3s, transform .3s; } .so-jf-signed { background: #22314F; color: #8A8F96; } .so-jf.is-signed .so-jf-signed { background: #D1FF10; color: #0B1426; transform: scale(1.08); } .so-jf-status { background: #E6E9EE; color: #3A4556; } .so-jf.is-done .so-jf-status { background: #0B1426; color: #D1FF10; } .so-jf-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-bottom: 1px solid rgba(128, 138, 150, 0.2); border-radius: 8px; transition: background .25s; } .so-jf-row strong { white-space: nowrap; } .so-jf-src .so-jf-row.is-hl { background: rgba(209, 255, 16, 0.14); } .so-jf-total { border-bottom: 0; font-size: 17px; margin-top: 4px; } .so-jf-slot { opacity: 0; transform: translateX(-14px); transition: opacity .35s, transform .35s; } .so-jf-slot.is-in { opacity: 1; transform: none; } .so-jf-sign { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #22314F; display: flex; flex-direction: column; } .so-jf-sig { font-family: "Dancing Script", "Brush Script MT", cursive; font-size: 26px; color: #D1FF10; clip-path: inset(0 100% 0 0); transition: clip-path 1s ease; } .so-jf.is-signed .so-jf-sig { clip-path: inset(0 0 0 0); } .so-jf-sigline { font-size: 12px; color: #8A8F96; } .so-jf-job { margin-top: 14px; display: flex; gap: 10px; align-items: center; background: #F4F5F2; border-radius: 10px; padding: 12px 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; } .so-jf.is-done .so-jf-job { opacity: 1; transform: none; } .so-jf-check { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #D1FF10; color: #0B1426; align-items: center; justify-content: center; font-weight: 900; flex: none; } .so-jf-pipe { position: relative; display: flex; align-items: center; justify-content: center; } .so-jf-pipe::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #D1FF10 0 10px, transparent 10px 20px); opacity: .5; animation: so-jf-dash 1s linear infinite; } @keyframes so-jf-dash { to { background-position: 20px 0; } } .so-jf-pipe span { display: none; } .so-jf-bolt { position: relative; z-index: 1; font-style: normal; font-size: 22px; width: 52px; height: 52px; border-radius: 50%; background: #0B1426; border: 2px solid #D1FF10; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 24px rgba(209, 255, 16, .35); } .so-jf-chip { position: absolute; z-index: 3; background: #D1FF10; color: #0B1426; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 6px 12px; box-shadow: 0 6px 18px rgba(209, 255, 16, .45); transition: transform .65s cubic-bezier(.5, 0, .3, 1), opacity .65s; pointer-events: none; } .so-jf { transition: opacity .6s; } .so-jf.is-reset { opacity: .35; } @media (max-width: 900px) { .so-jf { grid-template-columns: 1fr; padding: 20px; gap: 0; } .so-jf-pipe { height: 70px; } .so-jf-pipe::before { left: 50%; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; margin: 0 0 0 -2px; background: repeating-linear-gradient(180deg, #D1FF10 0 10px, transparent 10px 20px); } .so-jf-card { font-size: 14px; padding: 18px; } } @media (prefers-reduced-motion: reduce) { .so-jf-pipe::before { animation: none; } } /* screenshots */ .so-main .so-shot img { border-radius: 14px; border: 1px solid #DADDE3; box-shadow: 0 20px 50px rgba(11, 20, 38, 0.12); } .so-main .so-shot figcaption { color: #5B6472; font-size: 15px; margin-top: 12px; text-align: left; } .so-main .so-narrow { max-width: 820px; margin-left: auto !important; margin-right: auto !important; } .so-main .so-fine-section { padding-top: 0; } @font-face { font-family: "Dancing Script"; src: url("assets/fonts/DancingScript.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } .so-main .so-shot { margin: 0; max-width: 100%; } .so-main .so-shot img { display: block; width: 100%; max-width: 100%; height: auto; } .so-main .so-cols > .wp-block-column { min-width: 0; } .so-main .so-shots-section .so-cols { align-items: flex-start; } /* ---------- v2.36: Jobber story animation, scenes 2–4 ---------- */ .so-jf { display: block; padding: 32px 40px 40px; } .so-jf-steps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .so-jf-steps li { display: flex; align-items: center; gap: 8px; color: #8A8F96; font-weight: 700; font-size: 14px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid #22314F; transition: all .3s; } .so-jf-steps li span { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #22314F; color: #8A8F96; align-items: center; justify-content: center; font-size: 12px; } .so-jf-steps li.is-on { color: #F4F4F1; border-color: #3A4A66; } .so-jf-steps li.is-on span { background: #D1FF10; color: #0B1426; } .so-jf-steps li.is-now { border-color: #D1FF10; box-shadow: 0 0 0 1px #D1FF10 inset; } .so-jf-stage { display: grid; } .so-jf-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .5s, transform .5s, visibility 0s .5s; } .so-jf-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .5s, visibility 0s; } .so-jf-a { display: grid; grid-template-columns: 1fr 110px 1fr; align-items: stretch; } .so-jf.is-fade .so-jf-stage { opacity: .3; transition: opacity .6s; } /* scene 2 */ .so-jf-b { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; } .so-jf-jobcard { background: #111D33; color: #F4F4F1; border: 1px solid #22314F; } .so-jf-muted { color: #A3A7AD; margin: 6px 0 16px; font-size: 15px; } .so-jf-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #22314F; } .so-jf-kv span { color: #A3A7AD; } .so-jf-sched-pill { background: #22314F; color: #F4F4F1; border-radius: 999px; padding: 3px 10px; font-size: 13px; transition: background .3s, color .3s; } .so-jf.is-saved .so-jf-sched-pill { background: #D1FF10; color: #0B1426; } .so-jf-note { margin: 16px 0 0; color: #D1FF10; font-weight: 700; } .so-jf-field { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #CBD0D8; border-radius: 10px; padding: 11px 14px; margin-top: 10px; background: #F4F5F2; } .so-jf-field span { color: #5B6472; font-size: 14px; } .so-jf-field b { min-height: 1.2em; font-weight: 700; } .so-jf-field b::after { content: "|"; font-weight: 300; animation: so-jf-caret 1s steps(1) infinite; margin-left: 1px; } @keyframes so-jf-caret { 50% { opacity: 0; } } .so-jf-mt { margin-top: 18px !important; } .so-jf-person { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; transition: background .3s; } .so-jf-person strong { display: block; font-size: 15px; } .so-jf-person em { font-style: normal; color: #5B6472; font-size: 13px; } .so-jf-box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #CBD0D8; flex: none; position: relative; transition: all .25s; } .so-jf-person.is-in { background: #F7FBE4; } .so-jf-person.is-in .so-jf-box { background: #0B1426; border-color: #0B1426; } .so-jf-person.is-in .so-jf-box::after { content: "✓"; position: absolute; inset: 0; color: #D1FF10; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .so-jf-avatar { width: 34px; height: 34px; border-radius: 50%; background: #0B1426; color: #D1FF10; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; } .so-jf-save { margin-top: 16px; width: 100%; border: 0; border-radius: 10px; padding: 13px; font: inherit; font-weight: 800; background: #D1FF10; color: #0B1426; transition: transform .15s, background .3s, color .3s; } .so-jf.is-saving .so-jf-save { transform: scale(.96); } .so-jf.is-saved .so-jf-save { background: #0B1426; color: #D1FF10; } .so-jf.is-saved .so-jf-save::before { content: "✓ "; } /* scene 3 */ .so-jf-c { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; justify-content: center; padding: 0 20px; } .so-jf-phone { position: relative; width: 260px; height: 520px; border-radius: 42px; background: #05090F; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 2px #2A3447; justify-self: center; } .so-jf-notch { position: absolute; top: 18px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: #05090F; border-radius: 20px; z-index: 3; } .so-jf-screen { position: absolute; inset: 12px; border-radius: 32px; overflow: hidden; transition: opacity .5s; } .so-jf-lock { background: linear-gradient(160deg, #1F2A3D, #0B1426 60%); color: #F4F4F1; text-align: center; padding-top: 64px; } .so-jf-time { font-size: 58px; font-weight: 300; margin: 0; letter-spacing: -1px; } .so-jf-date { margin: 0; font-size: 14px; color: #C4C7CC; } .so-jf-notif { position: absolute; left: 10px; right: 10px; top: 190px; text-align: left; background: rgba(244,244,241,.95); color: #0B1426; border-radius: 18px; padding: 12px 14px; transform: translateY(-30px); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s; } .so-jf.is-notif .so-jf-notif { transform: none; opacity: 1; } .so-jf-notif-app { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: #5B6472; display: flex; align-items: center; gap: 6px; } .so-jf-notif-app span { width: 18px; height: 18px; border-radius: 5px; background: #0B1426; color: #D1FF10; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .so-jf-notif-title { margin: 0 0 4px; font-weight: 800; font-size: 14px; line-height: 1.25; } .so-jf-notif-body { margin: 0; font-size: 12.5px; color: #3A4556; line-height: 1.35; } .so-jf-tap { position: absolute; left: 50%; top: 235px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; border: 3px solid #D1FF10; opacity: 0; transform: scale(.4); } .so-jf.is-tap .so-jf-tap { animation: so-jf-tap .6s ease-out; } @keyframes so-jf-tap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } } .so-jf-map { opacity: 0; background: #E9EDE4; } .so-jf.is-map .so-jf-map { opacity: 1; } .so-jf.is-map .so-jf-lock { opacity: 0; } .so-jf-mapsvg { width: 100%; height: 100%; display: block; } .so-jf-route { animation: so-jf-dash 1s linear infinite; } .so-jf-eta { position: absolute; left: 12px; right: 12px; bottom: 14px; background: #0B1426; color: #F4F4F1; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; } .so-jf-eta strong { color: #D1FF10; font-size: 22px; } .so-jf-eta span { font-size: 12.5px; color: #C4C7CC; } .so-jf-c-copy { color: #F4F4F1; max-width: 420px; } .so-jf-big { font-family: var(--wp--preset--font-family--display); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 8px 0 12px; } .so-jf-muted2 { color: #C4C7CC; font-size: 17px; line-height: 1.55; margin: 0; } .so-jf-arrived { margin-top: 18px; display: inline-block; background: #D1FF10; color: #0B1426; font-weight: 800; border-radius: 999px; padding: 8px 16px; opacity: 0; transform: translateY(8px); transition: all .4s; } .so-jf.is-map .so-jf-arrived { opacity: 1; transform: none; } @media (max-width: 900px) { .so-jf { padding: 18px; } .so-jf-steps li { font-size: 12px; padding: 5px 10px 5px 6px; } .so-jf-a, .so-jf-b, .so-jf-c { grid-template-columns: 1fr; gap: 18px; } .so-jf-c { padding: 0; } .so-jf-c-copy { text-align: center; margin: 0 auto; } } /* ---------- v2.37: Jobber story, signing scene, one-sweep sync, iPhone lock screen, closing slide ---------- */ /* 1 · signing in StormOps */ .so-jf-s { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .so-jf-sigpage { background: #FFFFFF; border-radius: 16px; overflow: hidden; color: #0B1426; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .so-jf-sigbar { background: #0B1426; border-bottom: 4px solid #D1FF10; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; color: #A3A7AD; font-size: 13px; font-weight: 600; } .so-jf-sigbar-logo { height: 18px; width: auto; } .so-jf-sigbody { padding: 18px 20px 20px; } .so-jf-dark { color: #0B1426 !important; } .so-jf-muted3 { color: #5B6472; font-size: 13.5px; margin: 4px 0 12px; } .so-jf-tag { display: inline-block; background: #FFD23F; color: #0B1426; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 3px 7px; margin-right: 10px; } .so-jf-initials, .so-jf-sigbox { border: 2px dashed #9CC3E6; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; min-height: 48px; background: #F4F9FE; } .so-jf-ini, .so-jf-sig2 { font-family: "Dancing Script", "Brush Script MT", cursive; font-weight: 600; color: #14224A; clip-path: inset(0 100% 0 0); transition: clip-path .5s ease; } .so-jf-ini { font-size: 24px; } .so-jf-sig2 { font-size: 28px; transition-duration: .9s; } .so-jf.is-initialed .so-jf-ini, .so-jf.is-sigwrite .so-jf-sig2 { clip-path: inset(0 0 0 0); } .so-jf-agree { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: #3A4556; margin: 9px 0; } .so-jf-agree .so-jf-box { width: 18px; height: 18px; } .so-jf-agree.is-in .so-jf-box { background: #2A8FCF; border-color: #2A8FCF; } .so-jf-agree.is-in .so-jf-box::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .so-jf-sigbox { margin-top: 12px; } .so-jf-submit { margin-top: 14px; width: 100%; border: 0; border-radius: 10px; padding: 12px; font: inherit; font-weight: 800; font-size: 14px; background: #9FC6E0; color: #fff; transition: all .25s; } .so-jf.is-sigwrite .so-jf-submit { background: #2A8FCF; } .so-jf.is-submit .so-jf-submit { transform: scale(.96); } .so-jf.is-signed .so-jf-submit { background: #0B1426; color: #D1FF10; transform: none; } .so-jf.is-signed .so-jf-submit::before { content: "✓ "; } .so-jf-s-copy { color: #F4F4F1; } .so-jf-signed-tag { opacity: 0; } .so-jf.is-signed .so-jf-signed-tag { opacity: 1; transform: none; } .so-jf.is-map .so-jf-signed-tag { opacity: 1; } /* 2 · one sweep from StormOps to Jobber */ .so-jf-from, .so-jf-to { display: inline-block; background: #D1FF10; color: #0B1426; border-radius: 4px; padding: 1px 6px; margin-right: 4px; letter-spacing: 1px; } .so-jf-ghost { position: absolute; z-index: 4; background: rgba(209, 255, 16, .16); border: 2px solid #D1FF10; border-radius: 12px; padding: 2px; color: #F4F4F1; font-size: 15px; box-shadow: 0 16px 50px rgba(209, 255, 16, .35); transition: transform .9s cubic-bezier(.6, 0, .25, 1), width .9s, opacity .35s; pointer-events: none; } .so-jf-ghost .so-jf-row { border-bottom-color: rgba(209, 255, 16, .25); } .so-jf-ghost.is-landed { opacity: 0; } .so-jf-slot { transition: opacity .25s, transform .25s; } .so-jf-pipe { flex-direction: column; gap: 10px; } .so-jf-sync { position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: #D1FF10; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transition: opacity .3s; } .so-jf.is-syncing .so-jf-sync { opacity: 1; } .so-jf.is-syncing .so-jf-bolt { animation: so-jf-pulse .5s ease-in-out infinite alternate; } @keyframes so-jf-pulse { to { transform: scale(1.15); box-shadow: 0 0 40px rgba(209, 255, 16, .7); } } .so-jf.is-syncing .so-jf-pipe::before { opacity: 1; animation-duration: .35s; } /* 4 · iPhone lock screen: date above the time, notification lower, torch + camera */ .so-jf-lock { padding-top: 58px; } .so-jf-lock .so-jf-date { font-size: 15px; font-weight: 600; color: #E6E9EE; margin: 0; } .so-jf-lock .so-jf-time { font-size: 72px; font-weight: 600; line-height: 1; margin: 2px 0 0; letter-spacing: -2px; } .so-jf-notif { top: auto; bottom: 110px; transform: translateY(30px); } .so-jf.is-notif .so-jf-notif { transform: none; } .so-jf-tap { top: auto; bottom: 140px; } .so-jf-lockbtn { position: absolute; bottom: 30px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .so-jf-torch { left: 26px; } .so-jf-cam { right: 26px; } .so-jf-homebar { position: absolute; bottom: 10px; left: 50%; width: 110px; height: 5px; margin-left: -55px; border-radius: 3px; background: rgba(255,255,255,.85); } /* closing slide */ .so-jf-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 420px; } .so-jf-endlogo { width: min(520px, 80%); height: auto; } .so-jf-endtag { color: #D1FF10; font-family: var(--wp--preset--font-family--display); font-size: clamp(18px, 2.2vw, 26px); letter-spacing: 1px; margin: 22px 0 8px; } .so-jf-endline { color: #F4F4F1; font-size: clamp(17px, 1.8vw, 21px); margin: 0 0 18px; } .so-jf-works { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #3A4A66; color: #F4F4F1; border-radius: 999px; padding: 8px 18px; font-weight: 700; margin: 0 0 26px; } .so-jf-works-dot { width: 10px; height: 10px; border-radius: 50%; background: #D1FF10; box-shadow: 0 0 10px #D1FF10; } .so-jf-endbtns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .so-jf-endbtns .so-form-submit { text-decoration: none !important; } .so-jf-replay { background: transparent; color: #F4F4F1; border: 2px solid #3A4A66; border-radius: 10px; padding: 14px 22px; font: inherit; font-weight: 700; cursor: pointer; } .so-jf-replay:hover { border-color: #D1FF10; color: #D1FF10; } .so-jf.is-end .so-jf-steps { opacity: .5; } @media (max-width: 900px) { .so-jf-s { grid-template-columns: 1fr; gap: 18px; } .so-jf-s-copy { text-align: center; } .so-jf-end { min-height: 360px; } } /* ---------- v2.38: full-width navy section for the Jobber story + on-screen captions ---------- */ .so-main .so-jf-section { background: #0B1426; box-shadow: 0 0 0 100vmax #0B1426; clip-path: inset(0 -100vmax); padding-top: 96px; padding-bottom: 96px; margin-top: 40px !important; } .so-main .so-jf-section .so-eyebrow { color: #D1FF10 !important; } .so-main .so-jf-section h2 { color: #F4F4F1; } .so-main .so-jf-section .so-body { color: #C4C7CC; } .so-jf { background: transparent; border-radius: 0; padding: 0; overflow: visible; } .so-jf-caption { margin: 28px auto 0; max-width: 900px; text-align: center; color: #F4F4F1; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; line-height: 1.45; min-height: 3em; border-top: 1px solid #22314F; padding-top: 22px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; } .so-jf-caption.is-in { opacity: 1; transform: none; } .so-jf.is-end .so-jf-caption { border-top-color: transparent; } /* v2.38.2: lime band buttons, two only, outline in navy so it reads on lime */ .so-lime .so-lime-buttons { gap: 14px; } .so-lime .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #0B1426 !important; border: 2px solid #0B1426; padding: 16px 28px; } .so-lime .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #0B1426; color: #D1FF10 !important; }