/* Full Screen Overlay Pattern */
.preload {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw; height: 100vh;
z-index: 9999;
}
/* Centered Content 20% Up */
.preload {
justify-content: flex-start;
padding-top: 25vh; /* desktop */
padding-top: 20vh; /* mobile */
}
/* Console Window Standard */
.console-window {
width: 500px; max-width: 90vw;
height: 200px; /* 150px mobile */
border: 1px solid rgba(129, 253, 57, 0.4);
border-radius: 8px;
box-shadow: 0 0 20px rgba(129, 253, 57, 0.2);
}
Qrious Threads – Styling & Ethos Cheat Sheet
Brand Tone & Voice
- Deadpan, poetic, sharp, mythic—never generic, never AI-fluffed.
- Philosophically “quick hits” and layered symbolism, provoking self-inquiry and social/cultural critique.
- Wry, dry, sometimes surreal—delivering depth without coddling or preaching.
- Always favours insight and action over surface aesthetics or empty affirmations.
- Uses UK spelling and clean, proper punctuation.
Audience
- Thoughtful, often overwhelmed 18–55s seeking meaning and honest engagement.
- Drawn to new perspectives on identity, society, and personal growth.
- Likes paradoxes, reflective humour, symbolic and layered design.
Design Ethos & Visual Identity
- “Department” structure: site is a hub for multiple creative/subversive projects, all under the Department of Qrious Threads.
- Default palette: deep black backgrounds, accented with “simulation green” (#81FD39) for text, highlights, and effects.
- Surfaces often use a mix of linear gradients and circuit/pulse/flicker visual cues, evoking cyber-surreal, mythic, and self-hacking themes.
- Typography: monospace or modern, slightly technical font for system/console sections.
- Elements are spaced for strong central focus; content sits around 15–25% above visual centre for cognitive edge.
- Motion: Glitch effects, scan lines, progress bars, and scrolling console logs to suggest systems booting up or reframing inside the “Department.”
- Console Window: Centrally aligned, monochrome styled with circuit and pulse overlays, checkmark icons for affirmation/cognitive checklists.
- Affirmations/live console: Displays concise, idea-rich “reality hacks” and pointers (e.g. “Question your autopilot”), with subtle glitch transitions—not traditional motivational quotes.
Content Structure Patterns
- Home/landing experience is intentionally immersive and covers 100% of the browser, with no home page content visible until loading ends/glitches out.
- Console preloader scrolls through 60–80 sharply-worded “cognitive checks,” moving quickly and glitching off.
- After the load, a rotating affirmation window appears (“affirmation module”), elevated above the main site, not full-screen.
- In articles/FB posts: start with a bold hook, deliver real context and perspective, end with a path to peace, action, or a question (never filler).
Tech/Workflow Notes
- Responsive and works for mobile—affirmation window height at 120–140% vs. desktop.
- Uses Canva, Ideogram, WP/Elementor, and Printful for content and product flow (keep console images and overlays “on brand” for store).
- Animation is purposeful: console appears immediately, scrolling starts without delay, progress is visible, and glitch effect times out loader decisively.
- Prefer batch content and modular links (e.g., Qrious Threads ↔ ADHD Freedoms podcast, T-shirt Therapy, Inner Mythology).
Philosophy
- The entire brand is about “installing” new lenses and debugging personal/cultural systems.
- Never patronising or market-fluffy; always offers a “path to payload” for the mind.
- Shirts, articles, interactions — all are “cognitive tools” to disrupt autopilot living.
TEST – If this spins red, CSS is loading!
Welcome to the Department of Qrious Threads, where reality meets digital consciousness.
This message pulses with Department energy.
System.reality.status = “questionable”;
Scanning for conventional wisdom… none detected.
Important information that needs maximum clarity.
Check out our reality-bending T-shirts for consciousness expansion.
Access the Department Portal now.
Subscribe to our digital transmissions.
Scanning classified data streams…
URGENT: Reality Breach Detected
Visit external reality matrix
Contact: Department Communications
Emergency: Reality Helpline