Content Workflow

@import url(‘https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap’);

.stx-workflow-container {
font-family: ‘Outfit’, sans-serif !important;
color: #e2e8f0 !important;
background: #0f172a !important;
padding: 40px !important;
border-radius: 20px !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
line-height: 1.8 !important;
}

.stx-workflow-header {
text-align: center !important;
margin-bottom: 50px !important;
}

.stx-workflow-header h2 {
font-size: 3.2rem !important;
background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin-bottom: 15px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
}

.stx-workflow-header p {
font-size: 1.45rem !important;
color: #94a3b8 !important;
max-width: 800px !important;
margin: 0 auto !important;
line-height: 1.6 !important;
}

/* Flowchart CSS */
.stx-flowchart {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
margin: 60px 0 !important;
position: relative !important;
}

.stx-flow-node {
background: rgba(30, 41, 59, 0.7) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
width: 100% !important;
max-width: 650px !important;
border-radius: 16px !important;
padding: 30px !important;
margin-bottom: 40px !important;
position: relative !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
z-index: 2 !important;
}

.stx-flow-node:hover {
transform: translateY(-5px) scale(1.02) !important;
box-shadow: 0 15px 40px rgba(56, 189, 248, 0.2) !important;
border-color: rgba(56, 189, 248, 0.4) !important;
}

.stx-flow-node::after {
content: ” !important;
position: absolute !important;
bottom: -40px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 4px !important;
height: 40px !important;
background: linear-gradient(to bottom, #38bdf8, #818cf8) !important;
z-index: 1 !important;
}

.stx-flow-node:last-child::after {
display: none !important;
}

.stx-flow-icon {
position: absolute !important;
top: -20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: #1e293b !important;
border: 2px solid #38bdf8 !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.5) !important;
}

.stx-flow-title {
font-size: 2.2rem !important;
color: #f8fafc !important;
margin-bottom: 10px !important;
text-align: center !important;
margin-top: 10px !important;
font-weight: 900 !important;
line-height: 1.3 !important;
}

.stx-flow-desc {
color: #cbd5e1 !important;
font-size: 1.35rem !important;
text-align: center !important;
line-height: 1.6 !important;
}

/* Article Content */
.stx-article-content {
font-size: 1.45rem !important;
color: #cbd5e1 !important;
line-height: 1.8 !important;
}

.stx-article-content p {
margin-bottom: 25px !important;
text-align: justify !important;
font-size: 1.45rem !important;
line-height: 1.8 !important;
}

.stx-highlight {
color: #38bdf8 !important;
font-weight: 800 !important;
}

.stx-help-cta {
margin-top: 60px !important;
text-align: center !important;
font-size: 5.4rem !important;
padding: 30px !important;
background: rgba(31, 41, 55, 0.8) !important;
border-radius: 12px !important;
box-shadow: inset 0 2px 10px rgba(0,0,0,0.3) !important;
color: #e2e8f0 !important;
line-height: 1.2 !important;
}

.stx-help-link {
font-weight: 900 !important;
text-decoration: underline !important;
color: #38bdf8 !important;
transition: color 0.3s !important;
font-size: inherit !important;
}

.stx-help-link:hover {
color: #818cf8 !important;
}

/* Animation */
.stx-fade-in {
opacity: 0;
transform: translateY(20px);
animation: stx-fade 0.6s forwards;
}

@keyframes stx-fade {
to {
opacity: 1;
transform: translateY(0);
}
}

The ARRLSTX Content Engine

A behind-the-scenes look at how our platform is held together and seamlessly produced by the generous volunteer work of our entire team.

Our website doesn’t just run on code; it runs on the passion and dedication of our volunteers. To manage the immense volume of content we produce, we’ve engineered a highly customized, lean, and utterly efficient workflow system directly into our dashboard. This system ensures that our content pipeline flows effortlessly from initial inspiration to public publication.

All along the way, the website uses custom-built applets and widgets that read directly from our live database. This guarantees that each user only sees tasks assigned to their specific job description. For example, our Graphic Design team will only ever see tasks that have been explicitly routed for artwork, and once a designer claims a task, it instantly vanishes from the view of all other designers. This eliminates redundant effort, preventing any possibility of two volunteers accidentally repeating the same task. It is the definition of “Uber efficient”.

💡

1. Contributors

The lifeblood of our pipeline. Contributors scour the web and submit URLs of interesting articles and news pieces using the Submit Inspiration module, taking mere seconds to feed the system.

✍️

2. Authors

Authors review the pool of submitted inspiration links. They claim an idea, draft a comprehensive and engaging article in the WordPress editor, and click Mark as Completed to instantly route the draft to the art department.

🎨

3. Graphic Designers

Designers see the pending drafts in their Artwork Needed pool. They accept a task, generate a beautiful Featured Image and up to two supplemental graphics, and upload them via their custom dashboard portal.

🚀

4. Publishers

Once artwork is attached, the complete package lands in the Publisher pool. Publishers proofread the copy, position the images perfectly, assign appropriate tags and categories, and finally publish the content live to the world!

This automated, highly-structured pipeline guarantees that our platform remains active, vibrant, and packed with high-quality content without burning out our incredible volunteers. Everyone has a distinct, manageable role, and the system handles all of the routing logistics automatically.

If you would like to join our team, we could use the help. Check out our Help page.

// Subtle hover interactions
document.querySelectorAll(‘.stx-flow-node’).forEach(node => {
node.addEventListener(‘mouseenter’, () => {
node.querySelector(‘.stx-flow-icon’).style.transform = ‘translateX(-50%) scale(1.1)’;
});
node.addEventListener(‘mouseleave’, () => {
node.querySelector(‘.stx-flow-icon’).style.transform = ‘translateX(-50%) scale(1)’;
});
});