{"id":394,"date":"2026-07-15T17:36:59","date_gmt":"2026-07-15T17:36:59","guid":{"rendered":"http:\/\/192.168.1.188\/?page_id=394"},"modified":"2026-07-15T17:42:57","modified_gmt":"2026-07-15T17:42:57","slug":"smartstart-figure2-popup","status":"publish","type":"page","link":"https:\/\/naturalstructure.com\/index.php\/home\/portfolio\/case-study-smartstart\/smartstart-figure2-popup\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Figure 2 \/ SmartStart Crew Drill Down &#8211; Old Design<\/title>\n<style>\n    .ns-page {\n        --ns-white: #FFFFFF; --ns-gray-bg: #F7F7F7; --ns-gray-bg-2: #F0F0F0;\n        --ns-charcoal-heading: #111111; --ns-charcoal-body: #333333;\n        --ns-blue: #2B82C9; --ns-blue-hover: #246EA8; --ns-blue-light: #EBF4FB;\n        --ns-black: #000000; --ns-border: #E5E5E5;\n        --ns-font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        --ns-max-width: 1440px; --ns-gutter: 56px;\n        font-family: var(--ns-font); color: var(--ns-charcoal-body); background: var(--ns-white);\n        line-height: 1.6; -webkit-font-smoothing: antialiased;\n    }\n    .ns-page, .ns-page *, .ns-page *::before, .ns-page *::after { box-sizing: border-box; }\n    .ns-page h1, .ns-page h2, .ns-page h3, .ns-page h4 { color: var(--ns-charcoal-heading); margin-top: 100px; font-weight: 800; line-height: 1.2; margin: 0; }\n    .ns-page p { margin: 0; color: var(--ns-charcoal-body); line-height: 1.6; }\n    .ns-page img { max-width: 100%; display: block; border-radius: 6px; }\n    .ns-page a { color: var(--ns-charcoal-heading); text-decoration: none; text-underline-offset: 3px; }\n    .ns-page a:hover { color: var(--ns-blue); }\n    .ns-page em { font-style: italic; color: #555; }\n    \n    .ns-header { border-bottom: 1px solid var(--ns-border); }\n    .ns-header__inner { max-width: var(--ns-max-width); margin: 0 auto; padding: 18px var(--ns-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }\n    .ns-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }\n    .ns-logo__mark { width: 216px; height: 60px; flex-shrink: 0; }\n    .ns-nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: flex-end; }\n    .ns-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }\n    .ns-nav__links a { font-size: 15px; font-weight: 500; }\n    .ns-cta-btn { display: inline-block; background: var(--ns-blue); color: var(--ns-white) !important; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.15s ease; }\n    \n    .ns-cs { max-width: var(--ns-max-width); margin: 0 auto; padding: 0 var(--ns-gutter); }\n    .ns-cs-hero { padding: 56px var(--ns-gutter) 8px; }\n    .ns-cs-hero h1 { font-size: 36px; letter-spacing: -0.01em; }\n    .ns-cs-hero p { font-size: 17px; margin-top: 14px; }\n    .ns-cs-figure { margin: 32px auto; }\n    .ns-cs-figure figcaption { font-size: 12px; color: #6B6B6B; margin-top: 16px; margin-bottom: 16px; line-height: 1.5; }\n    .ns-cs-section { padding: 48px 0; }\n    .ns-cs-section h2 { font-size: 26px; margin-bottom: 16px; }\n    .ns-cs-section h3 { font-size: 17px; margin: 32px 0 8px; }\n    .ns-cs-section p + p, .ns-cs-section ul, .ns-cs-section ol { margin-top: 14px; margin-bottom: 14px; }\n    .ns-cs-section li { margin-bottom: 8px; margin-left: 20px;}\n    .ns-cs-section p { font-size: 15.5px; }\n    .ns-cs-section + .ns-cs-section { border-top: 1px solid var(--ns-border); }\n    .ns-cs-twocol-list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 0px; }\n    .ns-cs-twocol-list h3 { font-size: 15px; letter-spacing: 0.04em; margin: 32px 0 10px; }\n    .ns-cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }\n    .ns-cs-threecol { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 32px 0; }\n    .ns-cs-fourcol { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; margin: 16px 0; }\n    \n    .ns-cs-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }\n    .ns-cs-callout { border-left: 3px solid var(--ns-blue); background: var(--ns-gray-bg); border-radius: 4px; padding: 18px 20px; }\n    .ns-cs-callout strong { display: block; font-size: 14.5px; margin-bottom: 4px; }\n    \n    .ns-cs-video { position: relative; margin: 28px 0; border-radius: 6px; overflow: hidden; background: #000; padding-bottom: 56.25%; height: 0; }\n    .ns-cs-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }\n    \n    .ns-footer { padding: 64px var(--ns-gutter) 80px; border-top: 1px solid var(--ns-border); margin-top: 24px; }\n    .ns-footer__inner { max-width: var(--ns-max-width); margin: 0 auto; }\n    \n    \/* Lightbox *\/\n    .lightbox-trigger { cursor: zoom-in; transition: opacity 0.2s ease; border: 0px solid var(--ns-border); }\n    .lightbox-trigger:hover { opacity: 0.9; }\n    .lightbox-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }\n    .lightbox-modal.active { display: flex; opacity: 1; }\n    .lightbox-content { max-width: 90%; max-height: 90vh; border-radius: 4px; transform: scale(0.95); transition: transform 0.3s ease; }\n    .lightbox-modal.active .lightbox-content { transform: scale(1); }\n    .lightbox-close { position: absolute; top: 25px; right: 40px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10000; }\n    \n    \/* Carousel *\/\n    .carousel-container { position: relative; width: 100%; margin: 30px auto 10px auto; border: 0px solid var(--ns-border); background: var(--ns-white-bg); border-radius: 6px; overflow: hidden; }\n    .carousel-track-container { width: 100%; overflow: hidden; }\n    .carousel-track { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.4s ease-in-out; }\n    .carousel-slide { min-width: 100%; box-sizing: border-box; padding: 0px; display: flex; justify-content: center; align-items: center; }\n    .carousel-image { max-width: 100%; height: auto; display: block; border-radius: 4px; }\n    .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--ns-blue); color: white; border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; font-size: 1.2rem; z-index: 10; display: flex; justify-content: center; align-items: center; }\n    .carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n    .prev-btn { left: 15px; } .next-btn { right: 15px; }\n    .carousel-indicator { text-align: center; font-size: 0.95rem; color: #666; margin-bottom: 40px; margin-top: 10px; }\n\n    \/* CONSOLIDATED & INTEGRATED GRID STYLES *\/\n    .ns-cs-report-grid {\n      display: grid;\n      grid-template-columns: 2fr 2fr 1.2fr;\n      gap: 35px 45px;\n      margin: 32px 0;\n    }\n    .ns-cs-report-hero { \n      grid-column: 1 \/ -1; \n    }\n    .ns-cs-report-grid .ns-cs-figure {\n      margin-top: 0; \/* Prevents global figure margins from throwing off grid alignment *\/\n    }\n    .ns-cs-report-block { \n      margin-bottom: 24px; \n    }\n    .ns-cs-report-block h3 { \n      margin-top: 0; \n      margin-bottom: 12px;\n    }\n\n    \/* Grid Responsive Breakpoints *\/\n    @media (max-width: 960px) {\n      .ns-cs-report-grid { \n        grid-template-columns: 1fr 1fr; \n        column-gap: 30px; \n      }\n      .ns-cs-report-col-right { \n        grid-column: 1 \/ -1; \n        max-width: 320px; \n        justify-self: center; \n      }\n    }\n    @media (max-width: 640px) {\n      .ns-cs-report-grid { \n        grid-template-columns: 1fr; \n      }\n    }\n\n    \/* FORCING NON-ITALIC CAPTIONS OVER RULING WORDPRESS THEME DEFAULT *\/\n    .ns-page figcaption, \n    .ns-page .ux-caption {\n        font-style: normal !important;\n    }\n<\/style>\n<div class=\"ns-page\">\n  <figure class=\"ns-cs-figure ns-cs\">\n  <figcaption><strong>Figure 2:<\/strong> Close this tab to return to the previous screen.<\/figcaption>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/smartstart_old_cdd-scaled.webp\" alt=\"Screenshot showing the old design for the Crew Drill Down screen, with clunky information design that forces the user to constantly scroll vertically up and down throughout the entire page as they're trying to reconcile various data points needing attention.\"\/>\n<\/figure>\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Figure 2 \/ SmartStart Crew Drill Down &#8211; Old Design Figure 2: Close this tab to return to the previous screen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":95,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-394","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":3,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions\/399"}],"up":[{"embeddable":true,"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/pages\/95"}],"wp:attachment":[{"href":"https:\/\/naturalstructure.com\/index.php\/wp-json\/wp\/v2\/media?parent=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}