{"id":5809,"date":"2026-08-20T00:42:25","date_gmt":"2026-08-19T23:42:25","guid":{"rendered":"https:\/\/www.streettherapyinteractive.com\/?page_id=5809"},"modified":"2026-08-20T00:50:53","modified_gmt":"2026-08-19T23:50:53","slug":"esources-portals-pricing","status":"publish","type":"page","link":"https:\/\/www.streettherapyinteractive.com\/index.php\/esources-portals-pricing\/","title":{"rendered":"ESOURCES, PORTALS & PRICING"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n
<\/div>\n \n
\n
\n
\n \n \t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Portal Previews - Responsive Tab Matrix<\/title>\r\n <style>\r\n \/* --- CSS STYLING --- *\/\r\n :root {\r\n \/* Note: Background deep is now transparent to show the image *\/\r\n --bg-deep: transparent; \r\n --bg-card: rgba(20, 20, 20, 0.85); \/* Slightly transparent cards *\/\r\n --primary-red: #ff1e1e;\r\n --dark-red: #8b0000;\r\n --glow-red: rgba(255, 30, 30, 0.3);\r\n --text-main: #f0f0f0;\r\n --text-muted: #a0a0a0;\r\n --border-color: #333333; \/* Slightly lighter border for contrast *\/\r\n }\r\n\r\n .portal-matrix-wrapper {\r\n \/* Background Image Settings *\/\r\n background-image: url('https:\/\/www.streettherapyinteractive.com\/wp-content\/uploads\/2026\/08\/01F7AB6D-B192-43AF-B0DA-CDF1FFDF9898.png');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-attachment: scroll; \/* Or fixed, depending on effect desired *\/\r\n \r\n color: var(--text-main);\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n padding: 60px 20px; \/* Increased padding *\/\r\n border-radius: 12px;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);\r\n border: 1px solid var(--border-color);\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Dark Overlay to ensure text readability *\/\r\n .portal-matrix-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.75); \/* Adjust darkness here (0 to 1) *\/\r\n border-radius: 12px;\r\n z-index: -1;\r\n }\r\n\r\n .matrix-header {\r\n text-align: center;\r\n margin-bottom: 40px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .matrix-header h2 {\r\n font-size: 2.5rem;\r\n color: #ffffff;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n border-bottom: 3px solid var(--primary-red);\r\n display: inline-block;\r\n padding-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n }\r\n\r\n \/* Tabs Navigation *\/\r\n .matrix-tabs {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n margin-bottom: 30px;\r\n flex-wrap: wrap;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .tab-btn {\r\n background-color: var(--bg-card);\r\n color: var(--text-muted);\r\n border: 1px solid var(--border-color);\r\n padding: 12px 24px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.2);\r\n backdrop-filter: blur(5px); \/* Frosted glass effect *\/\r\n }\r\n\r\n .tab-btn:hover {\r\n color: #ffffff;\r\n border-color: var(--primary-red);\r\n transform: translateY(-2px);\r\n background-color: rgba(255, 30, 30, 0.1);\r\n }\r\n\r\n .tab-btn.active {\r\n background: linear-gradient(135deg, var(--primary-red), var(--dark-red));\r\n color: #ffffff;\r\n border-color: var(--primary-red);\r\n box-shadow: 0 0 15px var(--glow-red);\r\n }\r\n\r\n \/* Tab Content Panels *\/\r\n .matrix-content-container {\r\n background-color: var(--bg-card);\r\n border: 1px solid var(--border-color);\r\n border-radius: 8px;\r\n padding: 30px;\r\n min-height: 220px;\r\n position: relative;\r\n box-shadow: inset 0 0 15px rgba(0,0,0,0.5);\r\n backdrop-filter: blur(5px); \/* Frosted glass effect *\/\r\n z-index: 2;\r\n }\r\n\r\n .tab-panel {\r\n display: none;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.4s ease, transform 0.4s ease;\r\n }\r\n\r\n .tab-panel.active {\r\n display: block;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .tab-panel h3 {\r\n color: var(--primary-red);\r\n font-size: 1.75rem;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\r\n }\r\n\r\n \/* Bullet Points Styling *\/\r\n .portal-bullets {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 15px;\r\n }\r\n\r\n @media(min-width: 768px) {\r\n .portal-bullets {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n .portal-bullets li {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-left: 4px solid var(--primary-red);\r\n padding: 15px;\r\n border-radius: 0 6px 6px 0;\r\n font-size: 1rem;\r\n color: var(--text-main);\r\n transition: background 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .portal-bullets li:hover {\r\n background: rgba(255, 30, 30, 0.15);\r\n transform: translateX(5px);\r\n }\r\n\r\n \/* Responsive Breakpoints *\/\r\n @media (max-width: 600px) {\r\n .matrix-tabs {\r\n flex-direction: column;\r\n }\r\n .tab-btn {\r\n width: 100%;\r\n text-align: center;\r\n }\r\n .matrix-header h2 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Wrapper now holds the background image and dark overlay -->\r\n <div class=\"portal-matrix-wrapper\">\r\n <div class=\"matrix-header\">\r\n <h2>Portal Previews<\/h2>\r\n <\/div>\r\n\r\n <!-- Tab Buttons Matrix -->\r\n <div class=\"matrix-tabs\">\r\n <button class=\"tab-btn active\" onclick=\"openTab(event, 'tab-1')\">Educator & Admin<\/button>\r\n <button class=\"tab-btn\" onclick=\"openTab(event, 'tab-2')\">Student Portal<\/button>\r\n <button class=\"tab-btn\" onclick=\"openTab(event, 'tab-3')\">Professional Dev<\/button>\r\n <\/div>\r\n\r\n <!-- Content Panels -->\r\n <div class=\"matrix-content-container\">\r\n \r\n <!-- Tab 1 -->\r\n <div id=\"tab-1\" class=\"tab-panel active\">\r\n <h3>Educator & Administrator Dashboard<\/h3>\r\n <ul class=\"portal-bullets\">\r\n <li>Cloud-hosted curriculum access<\/li>\r\n <li>Downloadable PDF guides<\/li>\r\n <li>Trauma-informed intervention scripts<\/li>\r\n <li>Real-time behavioral milestone analytics tracking<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Tab 2 -->\r\n <div id=\"tab-2\" class=\"tab-panel\">\r\n <h3>Student Interactive Portal<\/h3>\r\n <ul class=\"portal-bullets\">\r\n <li>Gamified learning modules<\/li>\r\n <li>Accessible digital badges for personal milestone achievements<\/li>\r\n <li>Responsive self-reflection journals<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Tab 3 -->\r\n <div id=\"tab-3\" class=\"tab-panel\">\r\n <h3>Professional Development Hub<\/h3>\r\n <ul class=\"portal-bullets\">\r\n <li>On-demand Tier 1\/2\/3 behavioral tier integration training webinars<\/li>\r\n <li>Integrated booking schedules for 1-on-1 strategic specialist implementation support<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/* --- JAVASCRIPT LOGIC --- *\/\r\n function openTab(evt, tabId) {\r\n \/\/ Get all elements with class=\"tab-panel\" and hide them\r\n const panels = document.getElementsByClassName(\"tab-panel\");\r\n for (let i = 0; i < panels.length; i++) {\r\n panels[i].classList.remove(\"active\");\r\n }\r\n\r\n \/\/ Get all elements with class=\"tab-btn\" and remove the \"active\" class\r\n const buttons = document.getElementsByClassName(\"tab-btn\");\r\n for (let i = 0; i < buttons.length; i++) {\r\n buttons[i].classList.remove(\"active\");\r\n }\r\n\r\n \/\/ Show the current tab, and add an \"active\" class to the button clicked\r\n document.getElementById(tabId).classList.add(\"active\");\r\n evt.currentTarget.classList.add(\"active\");\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t <\/div>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"elementor-section elementor-top-section elementor-element elementor-element-f580a0d elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-row-max-none\" data-id=\"f580a0d\" data-element_type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n \n <div class=\"elementor-container elementor-column-gap-no \">\n <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-89d0131\" data-id=\"89d0131\" data-element_type=\"column\">\n <div class=\"elementor-widget-wrap elementor-element-populated\">\n \n \t\t<div class=\"elementor-element elementor-element-a902d42 elementor-widget elementor-widget-html\" data-id=\"a902d42\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Pricing Architecture<\/title>\r\n <style>\r\n \/* --- CSS STYLING --- *\/\r\n :root {\r\n --bg-deep: #0a0a0a;\r\n --bg-card: #141414;\r\n --bg-card-highlight: #1a0808;\r\n --primary-red: #ff1e1e;\r\n --dark-red: #8b0000;\r\n --glow-red: rgba(255, 30, 30, 0.4);\r\n --text-main: #f0f0f0;\r\n --text-muted: #a0a0a0;\r\n --border-color: #262626;\r\n --highlight-border: #ff3838;\r\n }\r\n\r\n .pricing-section-wrapper {\r\n background-color: var(--bg-deep);\r\n color: var(--text-main);\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n padding: 60px 20px;\r\n border-radius: 16px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n .pricing-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .pricing-header h2 {\r\n font-size: 2.5rem;\r\n color: #ffffff;\r\n margin-bottom: 15px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n border-bottom: 2px solid var(--primary-red);\r\n display: inline-block;\r\n padding-bottom: 8px;\r\n }\r\n\r\n .pricing-header p {\r\n color: var(--text-muted);\r\n font-size: 1.1rem;\r\n }\r\n\r\n \/* Pricing Grid Layout *\/\r\n .pricing-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n align-items: stretch;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .pricing-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n }\r\n\r\n \/* Pricing Card *\/\r\n .pricing-card {\r\n background-color: var(--bg-card);\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n padding: 35px 25px;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n }\r\n\r\n .pricing-card:hover {\r\n transform: translateY(-8px);\r\n border-color: var(--primary-red);\r\n box-shadow: 0 12px 30px var(--glow-red);\r\n }\r\n\r\n \/* Highlighted Institutional Card *\/\r\n .pricing-card.highlighted {\r\n background: linear-gradient(145deg, var(--bg-card), var(--bg-card-highlight));\r\n border: 2px solid var(--highlight-border);\r\n box-shadow: 0 0 25px rgba(255, 30, 30, 0.25);\r\n transform: scale(1.03);\r\n }\r\n\r\n .pricing-card.highlighted:hover {\r\n transform: scale(1.03) translateY(-8px);\r\n box-shadow: 0 15px 35px var(--glow-red);\r\n }\r\n\r\n .popular-badge {\r\n position: absolute;\r\n top: -15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: linear-gradient(135deg, var(--primary-red), var(--dark-red));\r\n color: #ffffff;\r\n padding: 5px 15px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n border-radius: 20px;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.4);\r\n }\r\n\r\n \/* Card Elements *\/\r\n .card-tier-title {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #ffffff;\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .card-audience {\r\n color: var(--text-muted);\r\n font-size: 0.9rem;\r\n min-height: 40px;\r\n margin-bottom: 25px;\r\n border-bottom: 1px solid var(--border-color);\r\n padding-bottom: 15px;\r\n }\r\n\r\n .card-features {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0 0 30px 0;\r\n flex-grow: 1;\r\n }\r\n\r\n .card-features li {\r\n position: relative;\r\n padding-left: 24px;\r\n margin-bottom: 12px;\r\n font-size: 0.95rem;\r\n color: var(--text-main);\r\n line-height: 1.4;\r\n }\r\n\r\n .card-features li::before {\r\n content: \"\u2714\";\r\n position: absolute;\r\n left: 0;\r\n color: var(--primary-red);\r\n font-weight: bold;\r\n font-size: 0.85rem;\r\n }\r\n\r\n \/* Cost & Button Section *\/\r\n .card-pricing-footer {\r\n margin-top: auto;\r\n border-top: 1px solid var(--border-color);\r\n padding-top: 20px;\r\n text-align: center;\r\n }\r\n\r\n .card-cost {\r\n font-size: 1.6rem;\r\n font-weight: 800;\r\n color: #ffffff;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .card-cost span {\r\n font-size: 0.85rem;\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n }\r\n\r\n .pricing-action-btn {\r\n display: inline-block;\r\n width: 100%;\r\n background-color: var(--bg-deep);\r\n color: #ffffff;\r\n border: 1px solid var(--primary-red);\r\n padding: 12px 20px;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n font-size: 0.9rem;\r\n letter-spacing: 1px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n box-sizing: border-box;\r\n }\r\n\r\n .pricing-action-btn:hover {\r\n background-color: var(--primary-red);\r\n color: #ffffff;\r\n box-shadow: 0 0 15px var(--glow-red);\r\n }\r\n\r\n .pricing-card.highlighted .pricing-action-btn {\r\n background: linear-gradient(135deg, var(--primary-red), var(--dark-red));\r\n border-color: var(--primary-red);\r\n }\r\n\r\n .pricing-card.highlighted .pricing-action-btn:hover {\r\n background: var(--primary-red);\r\n box-shadow: 0 0 20px var(--glow-red);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"pricing-section-wrapper\">\r\n <div class=\"pricing-header\">\r\n <h2>Pricing Architecture<\/h2>\r\n <p>Flexible licensing options built for classrooms, schools, and entire districts.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pricing-grid\">\r\n \r\n <!-- Tier 1: Individual License -->\r\n <div class=\"pricing-card\">\r\n <div class=\"card-tier-title\">\ud83d\udd34 Individual License<\/div>\r\n <div class=\"card-audience\">Single Classrooms \/ Independent Practitioners<\/div>\r\n <ul class=\"card-features\">\r\n <li>Full cloud curriculum access<\/li>\r\n <li>Printable master assets<\/li>\r\n <li>1 user license<\/li>\r\n <\/ul>\r\n <div class=\"card-pricing-footer\">\r\n <div class=\"card-cost\">$299 <span>\/ year<\/span><\/div>\r\n <a href=\"#select-individual\" class=\"pricing-action-btn\">Get Started<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tier 2: Institutional Site License (Highlighted) -->\r\n <div class=\"pricing-card highlighted\">\r\n <div class=\"popular-badge\">Most Popular<\/div>\r\n <div class=\"card-tier-title\">\ud83d\udd35 Institutional Site License<\/div>\r\n <div class=\"card-audience\">Single School Buildings \/ Youth Centers<\/div>\r\n <ul class=\"card-features\">\r\n <li>All classroom materials included<\/li>\r\n <li>Educator Dashboard access<\/li>\r\n <li>Student tracking portals<\/li>\r\n <li>25 staff seats<\/li>\r\n <\/ul>\r\n <div class=\"card-pricing-footer\">\r\n <div class=\"card-cost\">$2,499 <span>\/ year<\/span><\/div>\r\n <a href=\"#select-institutional\" class=\"pricing-action-btn\">Choose Institutional<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tier 3: Enterprise \/ District -->\r\n <div class=\"pricing-card\">\r\n <div class=\"card-tier-title\">\ud83d\udfe0 Enterprise \/ District<\/div>\r\n <div class=\"card-audience\">School Districts, Networks & Global Systems<\/div>\r\n <ul class=\"card-features\">\r\n <li>Custom implementation onboarding<\/li>\r\n <li>Unlimited licenses<\/li>\r\n <li>Live virtual staff training<\/li>\r\n <li>Dedicated regional account specialist<\/li>\r\n <\/ul>\r\n <div class=\"card-pricing-footer\">\r\n <div class=\"card-cost\" style=\"font-size: 1.3rem;\">Contact Quote<\/div>\r\n <a href=\"#contact-enterprise\" class=\"pricing-action-btn\">Contact Us<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t <\/div>\n <\/div>\n <\/div>\n <\/section>\n \t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portal Previews – Responsive Tab Matrix Portal Previews Educator & Admin Student Portal Professional Dev Educator & Administrator Dashboard Cloud-hosted curriculum access Downloadable PDF guides Trauma-informed intervention scripts Real-time behavioral milestone analytics tracking Student Interactive Portal Gamified learning modules Accessible digital badges for personal milestone achievements Responsive self-reflection journals Professional Development Hub On-demand Tier 1\/2\/3 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5809","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/pages\/5809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/comments?post=5809"}],"version-history":[{"count":10,"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/pages\/5809\/revisions"}],"predecessor-version":[{"id":5848,"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/pages\/5809\/revisions\/5848"}],"wp:attachment":[{"href":"https:\/\/www.streettherapyinteractive.com\/index.php\/wp-json\/wp\/v2\/media?parent=5809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}