commit e48582fa2b379c3ee31890bbcf217f15d07ea0e3 Author: syntaxbullet Date: Fri Jun 12 17:44:52 2026 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/Flower.png b/Flower.png new file mode 100644 index 0000000..f04c834 Binary files /dev/null and b/Flower.png differ diff --git a/IMAGE_PROMPTS.md b/IMAGE_PROMPTS.md new file mode 100644 index 0000000..601d7a5 --- /dev/null +++ b/IMAGE_PROMPTS.md @@ -0,0 +1,42 @@ +# Teppelin Labs Image Direction + +Use a consistent photographic language: monochrome or near-monochrome, hard flash or directional studio light, visible digital texture, black and off-white environments, and one controlled Teppelin orange element. Avoid generic stock-office scenes, handshakes, neon cyberpunk, floating UI screens, and obvious humanoid robots. + +## 1. Homepage Hero: Distributed Builders + +**Placement:** Replace or sit behind the orange hero circle on the homepage. Wide 16:9 crop with important content kept away from the left-side headline. + +**Prompt:** + +> Editorial photograph of a distributed digital builder collective, four diverse young adult technologists working independently across modular desks in a dark architectural studio, laptops, circuit prototypes, sketchbooks and small 3D printed objects visible, candid concentration rather than posing, dramatic high-contrast black and white photography, one saturated vermilion-orange translucent acrylic panel crossing the composition, precise Swiss modernist art direction, subtle halftone grain, premium technology magazine, wide landscape composition, no logos, no text, no cyberpunk neon, no corporate office stock photography + +## 2. Collective Page: Discord Community Energy + +**Placement:** Discord section, portrait 4:5 or square crop. + +**Prompt:** + +> Abstract editorial visualization of an online creative technology community, many small workspaces and technical artifacts connected through a geometric communication network, screens showing code, 3D forms, motion studies and diagrams without readable text, strict black, off-white, graphite and vivid vermilion-orange palette only, real photographic textures combined with crisp Swiss grid geometry, intelligent and precise, highly detailed, contemporary design publication, no people, no logos, no fake chat UI, no floating holograms, no blue, no purple + +## 3. Lab Page: Experimental Technology Macro + +**Placement:** First lab feature or full-width transition image. Wide 3:2 crop. + +**Prompt:** + +> Extreme macro editorial photograph of experimental computing hardware and tactile prototypes on a workbench, exposed circuit traces, machined aluminum, translucent resin, optical glass and braided cables, evidence of active making, stark directional lighting, monochrome with a single vermilion-orange component, deep blacks, clean negative space, Swiss industrial design photography, subtle print grain, realistic materials, no brand names, no text, no neon cyberpunk + +## 4. Membership Page: Builder Artifact Series + +**Placement:** A future member-story or process section. Generate 4 images with the same setup, portrait 4:5. + +**Prompt:** + +> Editorial still life of a digital builder's active workspace with no person visible, each image centered on one different artifact of craft such as an interface prototype, circuit experiment, 3D form, annotated sketchbook, motion study, or custom tool, dark graphite work surface, hard side lighting and subtle flash, monochrome photography with one vermilion-orange object, generous negative space for editorial layout, authentic technical process, premium independent magazine, no people, no body parts, no visible brand logos, no readable text, no blue, no purple + +## Export Notes + +- Generate at the largest available size. +- Export website versions as WebP at roughly 1600-2200 px on the long edge. +- Keep each file below approximately 500 KB where visual quality allows. +- Suggested names: `hero-builders.webp`, `discord-collective.webp`, `lab-hardware.webp`, `artifact-01.webp` through `artifact-04.webp`. diff --git a/Logomark.png b/Logomark.png new file mode 100644 index 0000000..4f00f6f Binary files /dev/null and b/Logomark.png differ diff --git a/Simplified_Logomark.png b/Simplified_Logomark.png new file mode 100644 index 0000000..6d72d2f Binary files /dev/null and b/Simplified_Logomark.png differ diff --git a/assets/hero-builders.webp b/assets/hero-builders.webp new file mode 100644 index 0000000..8705cac Binary files /dev/null and b/assets/hero-builders.webp differ diff --git a/assets/lab-hardware.webp b/assets/lab-hardware.webp new file mode 100644 index 0000000..6afc82e Binary files /dev/null and b/assets/lab-hardware.webp differ diff --git a/assets/process-artifacts.webp b/assets/process-artifacts.webp new file mode 100644 index 0000000..b450f46 Binary files /dev/null and b/assets/process-artifacts.webp differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..195e3f1 --- /dev/null +++ b/contact.html @@ -0,0 +1,23 @@ + + + + Collaborate - Teppelin Labs + + + + +
+ +
+

Visitor path / Collaborate

For organizations, researchers, communities, and builders who want to explore a technology problem with the collective.

04Bringthe rightquestion.

+

Collaboration brief

Tell us what could exist.

We are open to experimental product work, technical research, community partnerships, workshops, events, and ideas that benefit from a multidisciplinary group of builders.

+
+

+
Community

Discord / Global / Online

+
+
+ + + + + diff --git a/fe51893fd9f487a048a5c911b2c60154.png b/fe51893fd9f487a048a5c911b2c60154.png new file mode 100644 index 0000000..02c2132 Binary files /dev/null and b/fe51893fd9f487a048a5c911b2c60154.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b099422 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + + Teppelin Labs - Digital Builders, One Collective + + + + + + +
+ + + +
+ +
+
+

Online collective / Built on Discord

Teppelin Labs is an organized group of digital builders pushing the boundaries of today's technology.

+

Digital
builders.
One collective.

+
Global / Online / Always building

Independent minds. Shared momentum.

We bring developers, designers, researchers, and technical creators together to learn faster and build beyond the obvious.

Meet the collective
+
+ + + +
+

Choose your path

+
+ For visitors and collaborators

See what
we build.

Explore our disciplines, experiments, and the kinds of ambitious digital problems the collective takes on.

 + For prospective members

Build with
the collective.

Learn how the Discord community operates, who thrives here, and how to apply for membership.

 +
+
+ +
+

Different skills.
Shared curiosity.

Teppelin is a structured environment for people who learn by making.

Members trade knowledge, start projects, critique work, test new tools, and form small teams around ideas worth pursuing. The collective creates the context; builders create the momentum.

+
+

Engineers

Frontend, backend, mobile, infrastructure, creative code, and emerging platforms.

+

Designers

Product, brand, motion, 3D, interaction, systems, and visual experimentation.

+

AI Builders

Agents, applied models, automation, research, evaluation, and new interfaces.

+

Technical Creators

People combining disciplines to invent tools, experiences, and new ways of working.

+
+
+ +
+

The community layer

The lab lives
on Discord.

Discord is our shared workshop: a place for active project rooms, technical deep dives, critique, calls, opportunities, and the everyday conversations that turn isolated builders into a real collective.

How membership worksApply to join
+
  • introductions
  • build-in-public
  • project-labs
  • ai-systems
  • design-critique
  • opportunities
+
+ +
+

A collective
you can see.

The strongest technology communities are visible through their people, process, and artifacts.

Our visual language focuses on concentrated builders, tactile prototypes, and the human texture behind ambitious digital work.

+
+
A group of digital builders working together in a technology studio01 / Build sessions

People in the middle of real work, not posed profiles.

+
Close-up of experimental computing hardware and prototypes02 / Prototype detail

The physical texture of experiments, tools, and unfinished ideas.

+
A builder's workbench with sketches, electronic prototypes, tools, and material studies03 / Process artifacts

Craft made visible through sketches, tools, tests, and working prototypes.

+
+
+ +

The future is built by people willing to learn in public, collaborate deeply, and keep shipping.

+
+ + + + + diff --git a/join.html b/join.html new file mode 100644 index 0000000..6432448 --- /dev/null +++ b/join.html @@ -0,0 +1,53 @@ + + + + Apply for Membership - Teppelin Labs + + + + +
+ +
+

Member acquisition / Application

Membership is for active digital builders who want to contribute to a focused peer community, not simply observe one.

05Applyto buildtogether.

+ +
+ + +
+
+
+
+
+
+
+
+ + Primary craft +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +

Submitting this prototype stores nothing yet. Connect the form to Formspree, Tally, Airtable, or your own endpoint before publishing publicly.

+

+
+
+ +

What happens
next.

A simple human review, followed by an invitation when the fit is clear.

We review the work and answers, look for evidence of active craft and collaborative intent, and may ask one short follow-up. Accepted applicants receive onboarding details and a private Discord invite.

+
+ + + + + diff --git a/methodology.html b/methodology.html new file mode 100644 index 0000000..2e5e781 --- /dev/null +++ b/methodology.html @@ -0,0 +1,34 @@ + + + + The Collective - Teppelin Labs + + + + +
+ +
+

Member path / The collective

Teppelin is not a content feed or a giant open server. It is a deliberately organized network for capable builders who want real peers, active projects, and higher-signal conversation.

02Onlinedoes not meanalone.

+ +

Our shared workspace

Organized
on Discord.

The server is structured around craft, active labs, and useful exchange. Members can move from a quick question to a focused project room without losing the human context that makes collaboration work.

Apply for membership
  • member-lobby
  • what-are-you-building
  • engineering
  • design-and-motion
  • ai-and-agents
  • project-rooms
  • calls-and-sessions
+ +

Structure makes
community useful.

The point is not constant activity. It is having the right people and spaces available when momentum appears.

Members are expected to be generous with context, serious about craft, respectful of others' time, and willing to contribute before asking for attention.

+

Enter

New members introduce their work, interests, and current questions so the community can connect them with relevant people and channels.

+

Participate

Share progress, join critique, contribute expertise, attend calls, and build a reputation through consistent useful participation.

+

Collaborate

Form small project groups around experiments, products, open-source work, research, or creative technology.

+

Compound

Document what worked, teach what you learned, and create more surface area for the next member or project to succeed.

+
+ +

Community standards

What keeps
the signal high.

Skill matters. So do curiosity, generosity, follow-through, and the ability to work well with people unlike you.

+
01 / Make

Show the work

Ideas become more useful when they are visible. Share prototypes, notes, failures, decisions, and what you are learning.

+
02 / Give

Contribute context

Strong communities are built by members who answer thoughtfully, make introductions, and help others move.

+
03 / Respect

Protect the room

No spam, posturing, extraction, or performative noise. Be direct, kind, and conscious of other people's attention.

+
04 / Finish

Follow through

Ambition is welcome, but reliability builds trust. Communicate clearly and finish the commitments you make.

+
+
+ + + + + diff --git a/ref1.png b/ref1.png new file mode 100644 index 0000000..ee47875 Binary files /dev/null and b/ref1.png differ diff --git a/ref2.png b/ref2.png new file mode 100644 index 0000000..eb0519d Binary files /dev/null and b/ref2.png differ diff --git a/reff.jpg b/reff.jpg new file mode 100644 index 0000000..ae7503c Binary files /dev/null and b/reff.jpg differ diff --git a/refff.jpg b/refff.jpg new file mode 100644 index 0000000..56719f5 Binary files /dev/null and b/refff.jpg differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..975607e --- /dev/null +++ b/script.js @@ -0,0 +1,125 @@ +const body = document.body; +const menuToggle = document.querySelector('.menu-toggle'); +const navLinks = document.querySelectorAll('.site-nav a'); +const progress = document.querySelector('.scroll-progress span'); + +if (menuToggle) { + menuToggle.addEventListener('click', () => { + const isOpen = body.classList.toggle('menu-open'); + menuToggle.setAttribute('aria-expanded', String(isOpen)); + }); +} + +navLinks.forEach((link) => { + link.addEventListener('click', () => { + body.classList.remove('menu-open'); + menuToggle?.setAttribute('aria-expanded', 'false'); + }); +}); + +const updateProgress = () => { + if (!progress) return; + const max = document.documentElement.scrollHeight - window.innerHeight; + const value = max > 0 ? window.scrollY / max : 0; + progress.style.transform = `scaleX(${value})`; +}; + +window.addEventListener('scroll', updateProgress, { passive: true }); +updateProgress(); + +const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + revealObserver.unobserve(entry.target); + } + }); +}, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' }); + +document.querySelectorAll('.reveal').forEach((element) => revealObserver.observe(element)); + +const currentPage = body.dataset.page; +document.querySelectorAll(`[data-nav="${currentPage}"]`).forEach((link) => { + link.setAttribute('aria-current', 'page'); +}); + +const dot = document.querySelector('.cursor-dot'); +const ring = document.querySelector('.cursor-ring'); + +if (dot && ring && window.matchMedia('(pointer: fine)').matches) { + let mouseX = 0; + let mouseY = 0; + let ringX = 0; + let ringY = 0; + + window.addEventListener('mousemove', (event) => { + mouseX = event.clientX; + mouseY = event.clientY; + dot.classList.add('is-active'); + ring.classList.add('is-active'); + dot.style.left = `${mouseX}px`; + dot.style.top = `${mouseY}px`; + }); + + const animateRing = () => { + ringX += (mouseX - ringX) * 0.16; + ringY += (mouseY - ringY) * 0.16; + ring.style.left = `${ringX}px`; + ring.style.top = `${ringY}px`; + requestAnimationFrame(animateRing); + }; + + animateRing(); + + document.querySelectorAll('a, button, input, textarea, select').forEach((target) => { + target.addEventListener('mouseenter', () => ring.classList.add('is-hovering')); + target.addEventListener('mouseleave', () => ring.classList.remove('is-hovering')); + }); +} + +document.querySelectorAll('[data-count]').forEach((element) => { + const target = Number(element.dataset.count); + const suffix = element.dataset.suffix || ''; + const counterObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + const start = performance.now(); + const duration = 1300; + const tick = (time) => { + const progressValue = Math.min((time - start) / duration, 1); + const eased = 1 - Math.pow(1 - progressValue, 4); + element.textContent = `${Math.round(target * eased)}${suffix}`; + if (progressValue < 1) requestAnimationFrame(tick); + }; + requestAnimationFrame(tick); + counterObserver.disconnect(); + }); + }, { threshold: 0.5 }); + counterObserver.observe(element); +}); + +const contactForm = document.querySelector('[data-contact-form]'); +if (contactForm) { + contactForm.addEventListener('submit', (event) => { + event.preventDefault(); + const status = contactForm.querySelector('.form-status'); + const name = new FormData(contactForm).get('name') || 'there'; + status.textContent = `Thank you, ${name}. Your collaboration brief is ready for review.`; + contactForm.reset(); + }); +} + +const applicationForm = document.querySelector('[data-application-form]'); +if (applicationForm) { + applicationForm.addEventListener('submit', (event) => { + event.preventDefault(); + const status = applicationForm.querySelector('.form-status'); + const name = new FormData(applicationForm).get('name') || 'builder'; + status.textContent = `Application received, ${name}. Connect this form to a submission service before launch.`; + applicationForm.reset(); + }); +} + +document.querySelectorAll('[data-year]').forEach((node) => { + node.textContent = new Date().getFullYear(); +}); diff --git a/solutions.html b/solutions.html new file mode 100644 index 0000000..8235d98 --- /dev/null +++ b/solutions.html @@ -0,0 +1,36 @@ + + + + + + What We Build - Teppelin Labs + + + + +
+ +
+

Visitor path / What we build

The collective works where software, design, artificial intelligence, and internet culture meet. We build to discover what technology can become next.

01Buildpast theexpected.

+ +
+
01 / Software

Digital
products

Useful, ambitious software shaped by strong engineering and deliberate interaction design.

  • Web applications
  • Mobile products
  • Developer tools
  • Platforms and APIs
+
02 / Intelligence

AI
systems

Applied experiments that move models out of demos and into thoughtful, testable workflows.

  • Agents and automation
  • Model interfaces
  • Evaluations
  • Applied research
+
03 / Experience

Creative
technology

New forms of expression built through code, motion, real-time graphics, and emerging media.

  • Interactive experiences
  • Creative coding
  • 3D and spatial
  • Experimental interfaces
+
+ +

Projects begin
with a spark.

A member shares an idea. Others sharpen it, test it, and decide whether to form a build team.

Some projects are weekend experiments. Others become open-source tools, serious products, collaborations, or new ventures. Teppelin gives each idea access to a wider range of technical and creative perspectives.

+ +

How the collective contributes

+
A

Start a lab

Bring a clear idea, technical question, or creative provocation to the community.

↗
+
B

Join a build

Contribute your craft to an active member-led experiment or collaborative product.

↗
+
C

Share knowledge

Run a session, publish a breakdown, critique work, or help another builder move forward.

↗
+
+ +

We are less interested in predicting the future than in making enough things to discover it.

+
+ + + + + diff --git a/stitch_modern_one_step_solutions (3)/DESIGN.md b/stitch_modern_one_step_solutions (3)/DESIGN.md new file mode 100644 index 0000000..afdf0f4 --- /dev/null +++ b/stitch_modern_one_step_solutions (3)/DESIGN.md @@ -0,0 +1,178 @@ +--- +name: International Precision +colors: + surface: '#f9f9f9' + surface-dim: '#dadada' + surface-bright: '#f9f9f9' + surface-container-lowest: '#ffffff' + surface-container-low: '#f4f3f3' + surface-container: '#eeeeee' + surface-container-high: '#e8e8e8' + surface-container-highest: '#e2e2e2' + on-surface: '#1a1c1c' + on-surface-variant: '#5a413a' + inverse-surface: '#2f3131' + inverse-on-surface: '#f1f1f1' + outline: '#8e7068' + outline-variant: '#e3bfb5' + surface-tint: '#b22d00' + primary: '#ad2b00' + on-primary: '#ffffff' + primary-container: '#d24115' + on-primary-container: '#fffbff' + inverse-primary: '#ffb5a1' + secondary: '#5f5e5e' + on-secondary: '#ffffff' + secondary-container: '#e2dfde' + on-secondary-container: '#636262' + tertiary: '#5c5c5c' + on-tertiary: '#ffffff' + tertiary-container: '#757474' + on-tertiary-container: '#fefcfb' + error: '#ba1a1a' + on-error: '#ffffff' + error-container: '#ffdad6' + on-error-container: '#93000a' + primary-fixed: '#ffdbd1' + primary-fixed-dim: '#ffb5a1' + on-primary-fixed: '#3b0900' + on-primary-fixed-variant: '#882000' + secondary-fixed: '#e5e2e1' + secondary-fixed-dim: '#c8c6c5' + on-secondary-fixed: '#1c1b1b' + on-secondary-fixed-variant: '#474746' + tertiary-fixed: '#e4e2e2' + tertiary-fixed-dim: '#c8c6c6' + on-tertiary-fixed: '#1b1c1c' + on-tertiary-fixed-variant: '#474747' + background: '#f9f9f9' + on-background: '#1a1c1c' + surface-variant: '#e2e2e2' +typography: + display: + fontFamily: Inter + fontSize: 120px + fontWeight: '800' + lineHeight: 110px + letterSpacing: -0.04em + headline-lg: + fontFamily: Inter + fontSize: 64px + fontWeight: '700' + lineHeight: 72px + letterSpacing: -0.02em + headline-lg-mobile: + fontFamily: Inter + fontSize: 40px + fontWeight: '700' + lineHeight: 44px + letterSpacing: -0.02em + headline-md: + fontFamily: Inter + fontSize: 32px + fontWeight: '600' + lineHeight: 40px + letterSpacing: -0.01em + body-lg: + fontFamily: Inter + fontSize: 20px + fontWeight: '400' + lineHeight: 30px + body-md: + fontFamily: Inter + fontSize: 16px + fontWeight: '400' + lineHeight: 24px + label-caps: + fontFamily: Inter + fontSize: 12px + fontWeight: '700' + lineHeight: 16px + letterSpacing: 0.1em +spacing: + grid-unit: 8px + gutter: 24px + margin-desktop: 64px + margin-mobile: 20px + stack-sm: 16px + stack-md: 32px + stack-lg: 80px +--- + +## Brand & Style + +This design system is built on the core tenets of **Swiss Design (International Typographic Style)**. It conveys a brand personality that is objective, authoritative, and ruthlessly efficient. The target audience is professionals seeking "one-step solutions" who value clarity and industrial-grade reliability. + +The visual style is characterized by: +- **Mathematical Order:** A rigid adherence to a modular grid system that dictates the placement of every element. +- **Asymmetric Balance:** Dynamism is achieved through the tension between large-scale typography and functional whitespace. +- **Objectivity:** Removing unnecessary decoration to let the content and typography communicate the message directly. +- **Structural Integrity:** Bold blocks of color and sharp, geometric containers that emphasize the "one-step" structural nature of the business. + +## Colors + +The palette is rooted in a high-contrast, modernist tradition. + +- **Primary Orange (#F2572B):** Used as a functional signal for actions and as a massive background fill for hero moments to command immediate attention. +- **Dark Gray (#171717):** The anchor color for primary typography and deep structural containers. +- **Medium Gray (#4D4D4D):** Used for secondary information and supporting grid lines. +- **Light Gray (#DEDEDE):** Provides a subtle, architectural alternative to pure white for backgrounds and surface divisions. + +The color application should be "all-or-nothing"—use large flood fills of color rather than small accents to maintain the bold, modern aesthetic. + +## Typography + +The typography system utilizes **Inter** to achieve a neutral, neo-grotesque look that prioritizes legibility and structural alignment. + +Key principles: +- **Extreme Scale:** High contrast between massive display type (120px+) and functional body text. +- **Tight Leading:** Headlines utilize tight line-heights to create "blocks" of text that feel like solid geometric shapes. +- **Alignment:** Every text block must align strictly to the vertical and horizontal grid lines. Left-alignment is the default; center-alignment should be avoided. +- **Caps for Labels:** Small, all-caps labels are used for metadata and categorization to provide a technical, architectural feel. + +## Layout & Spacing + +This design system employs a **12-column fixed grid** on desktop and a **4-column fluid grid** on mobile. + +- **The Grid as Design:** In specific marketing layouts, the grid lines (1px width in #DEDEDE) may be visible to emphasize the Swiss Design aesthetic. +- **Whitespace as Content:** Large "voids" in the grid are intentional. Content should not be spread thin to fill space; rather, it should be grouped tightly to leave expansive areas of negative space. +- **Reflow:** On mobile, large headline blocks reflow to `headline-lg-mobile` and stack vertically, but they must maintain their sharp alignment to the left margin. + +## Elevation & Depth + +To maintain the flat, modernist aesthetic of Swiss Design, this system rejects shadows and physical depth. + +- **Flat Layering:** Hierarchy is created through color blocking and scale, not Z-axis elevation. +- **Tonal Tiers:** Dark Gray (#171717) is the base for depth. Light Gray (#DEDEDE) acts as a secondary surface. +- **Sharp Borders:** Use 1px or 2px solid borders in high-contrast colors (e.g., Orange on Black) to define sections without using shadows. +- **Zero Blur:** There are no blurs or gradients in this system. All transitions between colors and surfaces are "hard" and immediate. + +## Shapes + +The shape language is strictly **Geometric and Sharp**. + +- **0px Radii:** All buttons, cards, input fields, and containers must have 0px corner radii. This reinforces the industrial, precise nature of the brand. +- **The Circle Exception:** Only the orange "Signal Circle" (as seen in the reference images) is permitted as a rounded element, used sparingly as a background graphic or an abstract focal point. +- **Vector Icons:** Icons should be stroke-based, using 2px weights and 0px joins/caps where possible to match the sharp UI. + +## Components + +### Logo & Identity +- **Wordmark:** The script wordmark is used for high-level brand presence (header, footer). It must always be high-contrast (White on Orange or Orange on Black). +- **Logomark:** The flower logomark is treated as a "seal of quality." Use it as a small anchor in the corner of cards or as a massive, low-opacity watermark in the background of sections. + +### Buttons +- **Primary:** Sharp-edged blocks filled with Primary Orange. Text is White or Black, Inter Bold, All-Caps. +- **Secondary:** Transparent background with a 2px Dark Gray border. +- **Hover States:** Instead of shadows, use a "Color Inversion" effect. A primary orange button becomes dark gray on hover. + +### Cards +- Cards do not have shadows. They are defined by 1px borders or solid background fills of Light Gray or Dark Gray. +- Padding inside cards should be generous (min. 32px) to allow the typography to breathe. + +### Input Fields +- Underline-only or full-border sharp rectangles. +- Error states are indicated by the Primary Orange color replacing the border/underline color. + +### Visual Blocks +- Use "The Power of the Grid" to create blocks where images and text are locked into specific column spans (e.g., Image spans 8 columns, text spans 4 columns). No centered text within blocks. \ No newline at end of file diff --git a/stitch_modern_one_step_solutions (3)/code.html b/stitch_modern_one_step_solutions (3)/code.html new file mode 100644 index 0000000..a03631c --- /dev/null +++ b/stitch_modern_one_step_solutions (3)/code.html @@ -0,0 +1,318 @@ + + + + + +Teppelin Labs + + + + + + + + + +
+ +
+ +
+ + +
+ +
+
+

+ Truth In
+Design +

+

+ Good design does not lie — it reveals. It respects the viewer, guides the eye, and lets the content speak for itself. +

+
+
+ +Macro photography of precision camera lens elements with stark lighting and sharp metallic edges, highlighting industrial design. Subtle orange reflections cast across the glass surfaces. High contrast black and white overall aesthetic. + +
+Teppelin Labs Logo +
+
+
+ +
+

+ Capabilities +

+ +
+
01
+
+

Digital Systems

+

Architecture built for scale and uncompromised performance.

+
+
+ +
+
02
+
+

Robust Architecture

+

Foundational structures designed with mathematical rigor.

+
+
+ +
+
03
+
+

Engineering Tools

+

Precision instruments for the modern digital craftsperson.

+
+
+
+ +
+
+architecture +
+

+ Precision is not an accident. +

+

+ It is the result of deliberate choices, mathematical rigor, and an unwavering commitment to structural integrity over superficial decoration. +

+ +
+
+ + + + \ No newline at end of file diff --git a/stitch_modern_one_step_solutions (3)/screen.png b/stitch_modern_one_step_solutions (3)/screen.png new file mode 100644 index 0000000..9a35787 Binary files /dev/null and b/stitch_modern_one_step_solutions (3)/screen.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1d49e7f --- /dev/null +++ b/styles.css @@ -0,0 +1,2187 @@ +:root { + --orange: #f2562b; + --orange-dark: #c93612; + --ink: #171717; + --graphite: #4d4d4d; + --paper: #f6f5f1; + --white: #ffffff; + --line: rgba(23, 23, 23, 0.18); + --line-light: rgba(255, 255, 255, 0.24); + --pad: clamp(20px, 4.4vw, 72px); + --nav-height: 82px; + --ease: cubic-bezier(0.16, 1, 0.3, 1); +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + background: var(--paper); + overflow-x: clip; +} + +body { + margin: 0; + color: var(--ink); + background: var(--paper); + font-family: Inter, "Helvetica Neue", Arial, sans-serif; + font-size: 16px; + line-height: 1.45; + overflow-x: hidden; +} + +body.menu-open { + overflow: hidden; +} + +::selection { + color: var(--white); + background: var(--orange); +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +textarea, +select { + font: inherit; +} + +button, +a { + -webkit-tap-highlight-color: transparent; +} + +img, +svg { + display: block; + max-width: 100%; +} + +.skip-link { + position: fixed; + z-index: 1000; + top: 12px; + left: 12px; + padding: 12px 16px; + color: var(--white); + background: var(--ink); + transform: translateY(-140%); + transition: transform 0.2s ease; +} + +.skip-link:focus { + transform: translateY(0); +} + +.scroll-progress { + position: fixed; + z-index: 1001; + top: 0; + left: 0; + width: 100%; + height: 3px; + pointer-events: none; +} + +.scroll-progress span { + display: block; + width: 100%; + height: 100%; + background: var(--orange); + transform: scaleX(0); + transform-origin: left center; +} + +.site-header { + position: sticky; + z-index: 100; + top: 0; + display: grid; + grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); + height: var(--nav-height); + border-bottom: 1px solid var(--line); + background: rgba(246, 245, 241, 0.96); + backdrop-filter: blur(12px); +} + +.brand { + display: flex; + align-items: center; + gap: 0; + padding-left: var(--pad); + font-size: clamp(17px, 1.6vw, 23px); + font-weight: 800; + letter-spacing: -0.05em; + text-transform: uppercase; +} + +.brand-logo { + width: clamp(142px, 15vw, 190px); + height: 58px; + object-fit: contain; +} + +.site-nav { + display: flex; + align-items: stretch; + justify-content: flex-end; + border-left: 1px solid var(--line); + padding-right: var(--pad); +} + +.site-nav a { + position: relative; + display: flex; + align-items: center; + padding: 0 clamp(13px, 1.6vw, 26px); + border-left: 1px solid transparent; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.11em; + text-transform: uppercase; + transition: color 0.25s ease, background 0.25s ease; +} + +.nav-divider { + display: flex; + align-items: center; + padding: 0 10px; + color: var(--graphite); + font-size: 9px; + font-weight: 800; + letter-spacing: 0.13em; + text-transform: uppercase; +} + +.site-nav a::after { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 3px; + background: var(--orange); + content: ""; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.35s var(--ease); +} + +.site-nav a:hover, +.site-nav a[aria-current="page"] { + color: var(--orange); +} + +.site-nav a:hover::after, +.site-nav a[aria-current="page"]::after { + transform: scaleX(1); +} + +.site-nav .nav-cta { + align-self: center; + height: 44px; + margin-left: 12px; + color: var(--white); + background: var(--ink); +} + +.audience-split { + display: grid; + grid-template-columns: repeat(2, 1fr); + border-top: 1px solid var(--line); + border-left: 1px solid var(--line); +} + +.audience-card { + position: relative; + min-height: 520px; + padding: clamp(30px, 4vw, 64px); + overflow: hidden; + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); + transition: color 0.45s ease, background 0.45s ease; +} + +.audience-card:nth-child(2) { + color: var(--white); + background: var(--ink); +} + +.audience-card h3 { + max-width: 650px; + margin: 120px 0 26px; + font-size: clamp(43px, 6vw, 96px); + font-weight: 700; + letter-spacing: -0.07em; + line-height: 0.86; + text-transform: uppercase; +} + +.audience-card p { + max-width: 490px; + margin: 0; + color: var(--graphite); + font-size: clamp(17px, 1.5vw, 22px); +} + +.audience-card:nth-child(2) p { + color: rgba(255, 255, 255, 0.66); +} + +.audience-card .arrow { + position: absolute; + right: 38px; + bottom: 34px; + color: var(--orange); + font-size: 40px; + transition: transform 0.35s var(--ease); +} + +.audience-card:hover .arrow { + transform: translate(8px, -8px); +} + +.discord-panel { + display: grid; + grid-template-columns: repeat(12, 1fr); + min-height: 680px; + overflow: hidden; + color: var(--white); + background: var(--ink); +} + +.discord-copy { + grid-column: 1 / span 7; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: clamp(50px, 7vw, 110px) var(--pad); +} + +.discord-copy .section-title { + max-width: 900px; +} + +.discord-copy p { + max-width: 600px; + margin: 32px 0 0; + font-size: clamp(18px, 1.7vw, 26px); + letter-spacing: -0.03em; +} + +.discord-visual { + position: relative; + grid-column: 8 / -1; + overflow: hidden; + border-left: 1px solid rgba(255, 255, 255, 0.35); + background-color: #242424; + background-image: + linear-gradient(rgba(242, 86, 43, 0.28) 1px, transparent 1px), + linear-gradient(90deg, rgba(242, 86, 43, 0.28) 1px, transparent 1px); + background-size: 25% 12.5%; +} + +.discord-visual::before, +.discord-visual::after { + position: absolute; + border: 2px solid var(--orange); + border-radius: 50%; + content: ""; +} + +.discord-visual::before { + top: 15%; + left: 10%; + width: 66%; + aspect-ratio: 1; +} + +.discord-visual::after { + right: -20%; + bottom: -5%; + width: 72%; + aspect-ratio: 1; + background: var(--orange); +} + +.discord-channels { + position: absolute; + z-index: 2; + top: 50%; + left: 12%; + margin: 0; + padding: 0; + list-style: none; + transform: translateY(-50%); +} + +.discord-channels li { + padding: 11px 0; + font-size: clamp(17px, 1.5vw, 24px); + font-weight: 700; + letter-spacing: -0.03em; +} + +.discord-channels li::before { + margin-right: 10px; + color: rgba(255, 255, 255, 0.55); + content: "#"; +} + +.builder-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + border-top: 1px solid var(--line); + border-left: 1px solid var(--line); +} + +.builder-card { + min-height: 380px; + padding: clamp(26px, 3vw, 46px); + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} + +.builder-card:nth-child(even) { + background: #eceae4; +} + +.builder-card h3 { + margin: 105px 0 20px; + font-size: clamp(28px, 3vw, 48px); + letter-spacing: -0.055em; + line-height: 0.95; + text-transform: uppercase; +} + +.builder-card p { + margin: 0; + color: var(--graphite); +} + +.builder-glyph { + display: block; + width: 52px; + height: 52px; + border: 2px solid var(--orange); + transition: transform 0.5s var(--ease), border-radius 0.5s var(--ease); +} + +.builder-card:hover .builder-glyph { + border-radius: 50%; + transform: rotate(45deg); +} + +.media-direction { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1px; + background: var(--line); +} + +.media-card { + position: relative; + min-height: 560px; + padding: 28px; + overflow: hidden; + background: var(--ink); +} + +.media-card img { + position: absolute; + z-index: 0; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + filter: saturate(0.88) contrast(1.04); + transition: transform 1s var(--ease), filter 0.8s ease; +} + +.media-card::after { + position: absolute; + z-index: 1; + inset: 0; + background: linear-gradient(to bottom, rgba(23, 23, 23, 0.2), rgba(23, 23, 23, 0.08) 42%, rgba(23, 23, 23, 0.86)); + content: ""; + pointer-events: none; +} + +.media-card:hover img { + filter: saturate(1) contrast(1.08); + transform: scale(1.035); +} + +.media-card:nth-child(2) { + background: var(--orange); +} + +.media-card:nth-child(3) { + background: #d8d8d3; +} + +.media-card::before { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.17) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px); + background-size: 25% 12.5%; + content: ""; + z-index: 2; + pointer-events: none; +} + +.media-card-label, +.media-card-prompt { + position: relative; + z-index: 3; +} + +.media-card-label { + color: var(--white); +} + +.media-card-prompt { + position: absolute; + right: 28px; + bottom: 28px; + left: 28px; + margin: 0; + color: var(--white); + font-size: clamp(22px, 2.4vw, 38px); + font-weight: 700; + letter-spacing: -0.05em; + line-height: 1; +} + +.application-layout { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +.application-aside { + grid-column: 1 / span 4; + padding-right: clamp(32px, 5vw, 80px); +} + +.application-form { + grid-column: 6 / -1; +} + +.application-points { + margin: 42px 0 0; + padding: 0; + list-style: none; +} + +.application-points li { + padding: 15px 0; + border-top: 1px solid var(--line); + font-size: 12px; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.choice-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin: 12px 0 38px; +} + +.choice { + position: relative; +} + +.choice input { + position: absolute; + opacity: 0; +} + +.choice label { + display: block; + min-height: 58px; + padding: 18px; + border: 1px solid var(--line); + cursor: pointer; + font-size: 11px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + transition: color 0.25s ease, background 0.25s ease, border 0.25s ease; +} + +.choice input:checked + label { + border-color: var(--orange); + color: var(--white); + background: var(--orange); +} + +.form-note { + max-width: 550px; + margin: 20px 0 0; + color: var(--graphite); + font-size: 12px; +} + +.site-nav .nav-cta:hover { + color: var(--white); + background: var(--orange); +} + +.menu-toggle { + display: none; + width: 82px; + border: 0; + border-left: 1px solid var(--line); + color: var(--ink); + background: transparent; + cursor: pointer; +} + +.menu-toggle span, +.menu-toggle::before, +.menu-toggle::after { + display: block; + width: 24px; + height: 2px; + margin: 5px auto; + background: currentColor; + content: ""; + transition: transform 0.35s var(--ease), opacity 0.2s ease; +} + +.menu-open .menu-toggle span { + opacity: 0; +} + +.menu-open .menu-toggle::before { + transform: translateY(7px) rotate(45deg); +} + +.menu-open .menu-toggle::after { + transform: translateY(-7px) rotate(-45deg); +} + +.grid-surface { + position: relative; + isolation: isolate; +} + +.grid-surface::before { + position: absolute; + z-index: -1; + inset: 0 var(--pad); + background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 12)); + content: ""; + pointer-events: none; +} + +.section { + padding: clamp(72px, 10vw, 160px) var(--pad); + border-bottom: 1px solid var(--line); +} + +.section-tight { + padding: clamp(48px, 6.5vw, 104px) var(--pad); +} + +.section-dark { + color: var(--white); + background: var(--ink); +} + +.section-orange { + color: var(--ink); + background: var(--orange); +} + +.eyebrow { + display: flex; + align-items: center; + gap: 10px; + margin: 0 0 22px; + font-size: 11px; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.eyebrow::before { + width: 18px; + height: 18px; + background: var(--orange); + content: ""; +} + +.section-orange .eyebrow::before { + background: var(--ink); +} + +.section-dark .eyebrow::before { + border: 1px solid var(--orange); + background: transparent; +} + +.display, +.page-title, +.section-title, +.card-title { + margin: 0; + font-weight: 800; + letter-spacing: -0.07em; + line-height: 0.86; + text-transform: uppercase; +} + +.display { + max-width: 1500px; + font-size: clamp(68px, 13.4vw, 224px); +} + +.page-title { + max-width: 1500px; + font-size: clamp(62px, 11vw, 190px); +} + +.section-title { + font-size: clamp(48px, 7.2vw, 118px); +} + +.card-title { + font-size: clamp(27px, 3vw, 52px); + line-height: 0.95; +} + +.outline-text { + color: transparent; + -webkit-text-stroke: 1.5px currentColor; +} + +.text-orange { + color: var(--orange); +} + +.text-white { + color: var(--white); +} + +.lede { + max-width: 720px; + margin: 0; + font-size: clamp(20px, 2vw, 32px); + font-weight: 500; + letter-spacing: -0.035em; + line-height: 1.15; +} + +.body-copy { + max-width: 600px; + margin: 0; + color: var(--graphite); + font-size: clamp(16px, 1.3vw, 20px); +} + +.section-dark .body-copy { + color: rgba(255, 255, 255, 0.68); +} + +.meta { + font-size: 10px; + font-weight: 700; + letter-spacing: 0.13em; + text-transform: uppercase; +} + +.button-row { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 34px; +} + +.btn { + display: inline-flex; + min-height: 50px; + align-items: center; + justify-content: space-between; + gap: 26px; + padding: 0 20px; + border: 1px solid var(--ink); + font-size: 11px; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; + transition: color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease); +} + +.btn::after { + content: "\2197"; + font-size: 18px; +} + +.btn:hover { + color: var(--white); + background: var(--ink); + transform: translateY(-3px); +} + +.btn-orange { + border-color: var(--orange); + color: var(--white); + background: var(--orange); +} + +.btn-orange:hover { + border-color: var(--white); + color: var(--ink); + background: var(--white); +} + +.btn-light { + border-color: var(--white); + color: var(--white); +} + +.btn-light:hover { + color: var(--ink); + background: var(--white); +} + +.hero { + min-height: calc(100svh - var(--nav-height)); + padding: clamp(42px, 6vw, 90px) var(--pad) 0; + overflow: hidden; + border-bottom: 1px solid var(--line); +} + +.hero-topline { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 0; + margin-bottom: clamp(48px, 7vw, 112px); +} + +.hero-topline .eyebrow { + grid-column: 1 / span 3; +} + +.hero-intro { + grid-column: 8 / -1; + max-width: 500px; + margin: 0; + font-size: clamp(16px, 1.4vw, 22px); + line-height: 1.3; +} + +.hero-title-row { + position: relative; +} + +.hero .display { + position: relative; + z-index: 2; +} + +.hero-orbit { + position: absolute; + z-index: 1; + top: 52%; + right: 8%; + width: clamp(150px, 28vw, 480px); + aspect-ratio: 1; + border-radius: 50%; + background: var(--orange); + transform: translateY(-50%); + animation: breathe 8s var(--ease) infinite alternate; +} + +@keyframes breathe { + from { transform: translateY(-50%) scale(0.92); } + to { transform: translateY(-50%) scale(1.05); } +} + +.hero-bottom { + display: grid; + grid-template-columns: repeat(12, 1fr); + margin-top: clamp(52px, 7vw, 100px); + border-top: 1px solid var(--line); +} + +.hero-note { + grid-column: 1 / span 3; + padding: 24px 20px 34px 0; + border-right: 1px solid var(--line); +} + +.hero-actions { + grid-column: 7 / -1; + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px 0 34px 24px; +} + +.hero-actions p { + max-width: 340px; + margin: 0; + color: var(--graphite); +} + +.marquee { + overflow: hidden; + border-bottom: 1px solid var(--line); + color: var(--white); + background: var(--ink); +} + +.marquee-track { + display: flex; + width: max-content; + animation: marquee 22s linear infinite; +} + +.marquee span { + display: block; + padding: 20px 26px; + font-size: clamp(20px, 2.4vw, 40px); + font-weight: 700; + letter-spacing: -0.04em; + line-height: 1; + text-transform: uppercase; +} + +.marquee i { + color: var(--orange); + font-style: normal; +} + +@keyframes marquee { + to { transform: translateX(-50%); } +} + +.intro-grid, +.split-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +.intro-grid .section-title { + grid-column: 1 / span 7; +} + +.intro-copy { + grid-column: 9 / -1; + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 28px; +} + +.service-list { + margin-top: clamp(70px, 9vw, 140px); + border-top: 1px solid var(--line); + overflow: hidden; +} + +.service-row { + display: grid; + grid-template-columns: 1fr 5fr 4fr 1fr; + min-height: 150px; + align-items: center; + border-bottom: 1px solid var(--line); + transition: color 0.35s ease, background 0.35s ease; +} + +.service-row > * { + padding: 28px 20px; +} + +.service-row > * + * { + border-left: 1px solid var(--line); +} + +.service-row h3 { + margin: 0; + font-size: clamp(29px, 4vw, 66px); + font-weight: 700; + letter-spacing: -0.06em; + line-height: 0.95; + text-transform: uppercase; +} + +.service-row p { + margin: 0; + color: var(--graphite); +} + +.service-row .arrow { + font-size: 30px; + text-align: right; + transition: transform 0.35s var(--ease); +} + +.service-row:hover { + color: var(--white); + background: var(--orange); +} + +.service-row:hover p { + color: var(--ink); +} + +.service-row:hover .arrow { + transform: translate(5px, -5px); +} + +.feature-collage { + display: grid; + grid-template-columns: repeat(12, 1fr); + min-height: min(900px, 80vw); + padding: clamp(54px, 8vw, 120px) var(--pad); + overflow: hidden; +} + +.collage-image { + position: relative; + grid-column: 1 / span 8; + min-height: 600px; + overflow: hidden; +} + +.image-panel img { + width: 100%; + height: 100%; + object-fit: cover; + filter: grayscale(1) contrast(1.12); + transition: filter 0.8s ease, transform 1s var(--ease); +} + +.collage-image::after, +.project-image::after { + position: absolute; + inset: 0; + border: 1px solid var(--line-light); + content: ""; + pointer-events: none; +} + +.collage-card { + z-index: 2; + grid-column: 7 / -1; + align-self: center; + margin-left: -1px; + padding: clamp(32px, 5vw, 78px); + color: var(--ink); + background: var(--orange); +} + +.collage-card .section-title { + max-width: 700px; +} + +.collage-card p { + max-width: 500px; + margin: 28px 0 0; + font-size: clamp(17px, 1.5vw, 22px); +} + +.visual-system { + position: relative; + isolation: isolate; + color: var(--white); + background-color: #242424; + background-image: + linear-gradient(var(--line-light) 1px, transparent 1px), + linear-gradient(90deg, var(--line-light) 1px, transparent 1px); + background-size: 12.5% 12.5%; +} + +.visual-system::before { + position: absolute; + z-index: -1; + inset: 0; + background: linear-gradient(135deg, transparent 0 48%, rgba(242, 86, 43, 0.18) 48% 66%, transparent 66%); + content: ""; +} + +.visual-index, +.visual-caption { + position: absolute; + z-index: 3; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.13em; + text-transform: uppercase; +} + +.visual-index { + top: 28px; + left: 28px; + color: var(--orange); +} + +.visual-caption { + right: 28px; + bottom: 28px; + max-width: 160px; + text-align: right; +} + +.visual-word { + position: absolute; + z-index: 2; + top: 50%; + left: -0.04em; + font-size: clamp(90px, 15vw, 230px); + font-weight: 800; + letter-spacing: -0.1em; + line-height: 0.75; + transform: translateY(-50%) rotate(-90deg); + transform-origin: center; +} + +.visual-axis { + position: absolute; + z-index: 1; + top: 18%; + right: 12%; + width: 17%; + height: 64%; + background: var(--orange); + transition: width 0.8s var(--ease), transform 0.8s var(--ease); +} + +.visual-orbit { + position: absolute; + z-index: 2; + right: 6%; + bottom: 12%; + width: 42%; + aspect-ratio: 1; + border: 2px solid var(--white); + border-radius: 50%; + mix-blend-mode: difference; + transition: transform 0.9s var(--ease); +} + +.visual-system:hover .visual-axis { + width: 29%; + transform: translateX(-12%); +} + +.visual-system:hover .visual-orbit { + transform: translate(-8%, -7%) scale(0.86); +} + +.visual-system-form { + color: var(--ink); + background-color: var(--paper); + background-image: + linear-gradient(var(--line) 1px, transparent 1px), + linear-gradient(90deg, var(--line) 1px, transparent 1px); +} + +.visual-system-form .visual-word { + top: auto; + bottom: 8%; + left: 5%; + font-size: clamp(80px, 13vw, 200px); + transform: none; +} + +.visual-system-form .visual-axis { + top: 12%; + right: 18%; + width: 31%; + height: 56%; +} + +.visual-system-form .visual-orbit { + top: 16%; + right: 8%; + bottom: auto; + border-color: var(--ink); +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + border-top: 1px solid var(--line-light); + border-left: 1px solid var(--line-light); +} + +.stat { + min-height: 250px; + padding: clamp(24px, 3vw, 48px); + border-right: 1px solid var(--line-light); + border-bottom: 1px solid var(--line-light); +} + +.stat strong { + display: block; + margin-top: 65px; + color: var(--orange); + font-size: clamp(56px, 7vw, 112px); + font-weight: 700; + letter-spacing: -0.08em; + line-height: 0.8; +} + +.stat p { + max-width: 210px; + margin: 20px 0 0; + color: rgba(255, 255, 255, 0.6); +} + +.statement { + position: relative; + padding: clamp(90px, 13vw, 210px) var(--pad); + overflow: hidden; +} + +.statement p { + position: relative; + z-index: 2; + max-width: 1250px; + margin: 0; + font-size: clamp(44px, 7.5vw, 126px); + font-weight: 700; + letter-spacing: -0.07em; + line-height: 0.92; +} + +.statement-mark { + position: absolute; + right: -5vw; + bottom: -30%; + width: min(64vw, 900px); + opacity: 0.13; + mix-blend-mode: multiply; + transform: rotate(-10deg); +} + +.page-hero { + min-height: 72svh; + padding: clamp(50px, 7vw, 105px) var(--pad) clamp(70px, 9vw, 140px); + border-bottom: 1px solid var(--line); +} + +.page-hero-head { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 0; + margin-bottom: clamp(65px, 8vw, 130px); +} + +.page-hero-head .eyebrow { + grid-column: 1 / span 3; +} + +.page-hero-copy { + grid-column: 8 / -1; + max-width: 570px; + margin: 0; + font-size: clamp(18px, 1.7vw, 27px); + letter-spacing: -0.03em; + line-height: 1.2; +} + +.page-hero .page-title span { + display: block; +} + +.page-index { + display: inline-block; + margin-right: 14px; + color: var(--orange); + font-size: 0.16em; + letter-spacing: 0; + vertical-align: top; +} + +.capability-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-top: 1px solid var(--line); + border-left: 1px solid var(--line); +} + +.capability-card { + min-height: 460px; + padding: clamp(28px, 3.5vw, 56px); + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); + background: var(--paper); + transition: color 0.4s ease, background 0.4s ease; +} + +.capability-card:nth-child(2) { + color: var(--white); + background: var(--ink); +} + +.capability-card:nth-child(2) .body-copy { + color: rgba(255, 255, 255, 0.62); +} + +.capability-card:nth-child(3) { + background: var(--orange); +} + +.capability-card .card-title { + margin: 100px 0 30px; +} + +.capability-card ul { + margin: 30px 0 0; + padding: 0; + list-style: none; +} + +.capability-card li { + padding: 9px 0; + border-top: 1px solid currentColor; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.process { + counter-reset: process; +} + +.process-step { + display: grid; + grid-template-columns: 1fr 4fr 4fr; + min-height: 230px; + align-items: start; + padding: clamp(30px, 4vw, 62px) 0; + border-top: 1px solid var(--line-light); + counter-increment: process; +} + +.process-step::before { + color: var(--orange); + content: "0" counter(process); + font-size: 12px; + font-weight: 800; + letter-spacing: 0.12em; +} + +.process-step h3 { + margin: 0; + padding-right: 30px; + font-size: clamp(34px, 4.5vw, 74px); + font-weight: 700; + letter-spacing: -0.06em; + line-height: 0.9; + text-transform: uppercase; +} + +.process-step p { + max-width: 500px; + margin: 0; + color: rgba(255, 255, 255, 0.6); + font-size: clamp(17px, 1.5vw, 21px); +} + +.principles-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 0; +} + +.principles-lead { + grid-column: 1 / span 7; +} + +.principles-aside { + grid-column: 9 / -1; + align-self: end; +} + +.principle-list { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-top: clamp(70px, 9vw, 140px); + border-top: 1px solid var(--line); + border-left: 1px solid var(--line); +} + +.principle { + min-height: 290px; + padding: clamp(30px, 4vw, 58px); + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} + +.principle h3 { + margin: 52px 0 18px; + font-size: clamp(30px, 3vw, 50px); + letter-spacing: -0.05em; + line-height: 0.95; + text-transform: uppercase; +} + +.principle p { + max-width: 460px; + margin: 0; + color: var(--graphite); +} + +.project-list { + display: grid; + gap: clamp(70px, 10vw, 160px); +} + +.project { + display: grid; + grid-template-columns: repeat(12, 1fr); + align-items: stretch; +} + +.project-image { + position: relative; + grid-column: 1 / span 8; + min-height: clamp(440px, 55vw, 800px); + overflow: hidden; + background: var(--ink); +} + +.project-info { + grid-column: 9 / -1; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0 0 0 clamp(24px, 3vw, 50px); +} + +.project:nth-child(even) .project-image { + grid-column: 5 / -1; + grid-row: 1; +} + +.project:nth-child(even) .project-info { + grid-column: 1 / span 4; + grid-row: 1; + padding: 0 clamp(24px, 3vw, 50px) 0 0; +} + +.project-visual { + position: relative; + isolation: isolate; + overflow: hidden; + color: var(--white); + background: var(--ink); + background-image: + linear-gradient(var(--line-light) 1px, transparent 1px), + linear-gradient(90deg, var(--line-light) 1px, transparent 1px); + background-size: 12.5% 12.5%; +} + +.project-visual-code, +.project-visual-note { + position: absolute; + z-index: 4; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.13em; + text-transform: uppercase; +} + +.project-visual-code { + top: 30px; + left: 30px; + color: var(--orange); +} + +.project-visual-note { + right: 30px; + bottom: 30px; + max-width: 180px; + text-align: right; +} + +.project-visual-title { + position: absolute; + z-index: 3; + left: 4%; + bottom: 5%; + font-size: clamp(76px, 12vw, 190px); + font-weight: 800; + letter-spacing: -0.1em; + line-height: 0.72; + text-transform: uppercase; + transition: transform 0.9s var(--ease); +} + +.project-visual-shape { + position: absolute; + z-index: 2; + top: 15%; + right: 8%; + width: 46%; + aspect-ratio: 1; + border-radius: 50%; + background: var(--orange); + transition: border-radius 0.9s var(--ease), transform 0.9s var(--ease); +} + +.project:hover .project-visual-title { + transform: translateX(2%); +} + +.project:hover .project-visual-shape { + border-radius: 0; + transform: rotate(12deg) scale(0.9); +} + +.project-visual-forme { + color: var(--ink); + background-color: var(--paper); + background-image: + linear-gradient(var(--line) 1px, transparent 1px), + linear-gradient(90deg, var(--line) 1px, transparent 1px); +} + +.project-visual-forme .project-visual-title { + top: 8%; + bottom: auto; + font-size: clamp(86px, 14vw, 220px); + color: var(--orange); +} + +.project-visual-forme .project-visual-shape { + top: auto; + right: 20%; + bottom: 8%; + width: 35%; + border: 2px solid var(--ink); + background: transparent; +} + +.project-visual-forme .project-visual-note { + color: var(--ink); +} + +.project-visual-axis { + background-color: var(--orange); + background-image: + linear-gradient(rgba(23, 23, 23, 0.22) 1px, transparent 1px), + linear-gradient(90deg, rgba(23, 23, 23, 0.22) 1px, transparent 1px); +} + +.project-visual-axis .project-visual-code, +.project-visual-axis .project-visual-note { + color: var(--ink); +} + +.project-visual-axis .project-visual-title { + top: 50%; + bottom: auto; + left: 50%; + color: var(--ink); + transform: translate(-50%, -50%) rotate(-90deg); +} + +.project-visual-axis .project-visual-shape { + top: 12%; + right: 8%; + width: 20%; + height: 76%; + border-radius: 0; + background: var(--ink); +} + +.project:hover .project-visual-axis .project-visual-title { + transform: translate(-50%, -50%) rotate(-90deg) scale(1.04); +} + +.project-number { + color: var(--orange); + font-size: 12px; + font-weight: 800; + letter-spacing: 0.1em; +} + +.project-info h2 { + margin: 22px 0; + font-size: clamp(39px, 5vw, 82px); + font-weight: 700; + letter-spacing: -0.065em; + line-height: 0.88; + text-transform: uppercase; +} + +.project-info p { + margin: 0; + color: var(--graphite); +} + +.project-tags { + display: flex; + flex-wrap: wrap; + gap: 7px; + margin-top: 28px; +} + +.project-tags span { + padding: 7px 9px; + border: 1px solid var(--line); + font-size: 9px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.contact-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + min-height: 75svh; +} + +.contact-intro { + grid-column: 1 / span 5; + padding-right: clamp(30px, 5vw, 80px); +} + +.contact-form { + grid-column: 7 / -1; +} + +.field-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0 24px; +} + +.field { + position: relative; + margin-bottom: 35px; +} + +.field-wide { + grid-column: 1 / -1; +} + +.field label { + display: block; + margin-bottom: 8px; + font-size: 10px; + font-weight: 800; + letter-spacing: 0.13em; + text-transform: uppercase; +} + +.field input, +.field textarea, +.field select { + width: 100%; + border: 0; + border-bottom: 1px solid var(--ink); + border-radius: 0; + outline: 0; + padding: 12px 0 16px; + color: var(--ink); + background: transparent; + font-size: clamp(18px, 1.7vw, 26px); + appearance: none; +} + +.field textarea { + min-height: 130px; + resize: vertical; +} + +.field::after { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 2px; + background: var(--orange); + content: ""; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.35s var(--ease); +} + +.field:focus-within::after { + transform: scaleX(1); +} + +.form-status { + min-height: 24px; + margin-top: 18px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.contact-details { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-top: clamp(70px, 9vw, 130px); + border-top: 1px solid var(--line); + border-left: 1px solid var(--line); +} + +.contact-detail { + min-height: 210px; + padding: 28px; + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} + +.contact-detail p, +.contact-detail a { + display: block; + margin: 70px 0 0; + font-size: clamp(17px, 1.6vw, 24px); + font-weight: 600; + letter-spacing: -0.03em; +} + +.site-footer { + color: var(--white); + background: var(--ink); +} + +.footer-cta { + display: grid; + grid-template-columns: repeat(12, 1fr); + padding: clamp(70px, 9vw, 140px) var(--pad); + border-bottom: 1px solid var(--line-light); +} + +.footer-cta h2 { + grid-column: 1 / span 8; + margin: 0; + font-size: clamp(54px, 9vw, 150px); + font-weight: 700; + letter-spacing: -0.075em; + line-height: 0.83; + text-transform: uppercase; +} + +.footer-cta .btn { + grid-column: 10 / -1; + align-self: end; +} + +.footer-bottom { + display: grid; + grid-template-columns: repeat(12, 1fr); + align-items: end; + min-height: 260px; + padding: 50px var(--pad) 32px; +} + +.footer-brand { + grid-column: 1 / span 5; + color: var(--orange); + font-size: clamp(34px, 5vw, 76px); + font-weight: 800; + letter-spacing: -0.07em; + line-height: 0.9; + text-transform: uppercase; +} + +.footer-logo { + width: min(100%, 300px); +} + +.footer-links { + grid-column: 7 / span 4; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px 20px; +} + +.footer-links a, +.footer-meta { + color: rgba(255, 255, 255, 0.62); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.footer-links a:hover { + color: var(--orange); +} + +.footer-meta { + grid-column: 11 / -1; + text-align: right; +} + +.reveal { + opacity: 0; + transform: translateY(45px); + transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +.reveal-delay { + transition-delay: 0.12s; +} + +.cursor-dot, +.cursor-ring { + position: fixed; + z-index: 999; + top: 0; + left: 0; + border-radius: 50%; + opacity: 0; + pointer-events: none; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; +} + +.cursor-dot.is-active, +.cursor-ring.is-active { + opacity: 1; +} + +.cursor-dot { + width: 7px; + height: 7px; + background: var(--orange); +} + +.cursor-ring { + width: 38px; + height: 38px; + border: 1px solid var(--orange); + transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.2s ease; +} + +.cursor-ring.is-hovering { + width: 62px; + height: 62px; + background: rgba(242, 86, 43, 0.15); +} + +@media (max-width: 1024px) { + :root { + --nav-height: 72px; + } + + .site-header { + grid-template-columns: 1fr auto; + } + + .menu-toggle { + display: block; + } + + .site-nav { + position: fixed; + z-index: -1; + top: var(--nav-height); + right: 0; + bottom: 0; + left: 0; + display: none; + flex-direction: column; + justify-content: flex-start; + padding: 22px var(--pad) 50px; + border: 0; + color: var(--white); + background: var(--ink); + opacity: 0; + visibility: hidden; + transform: translateY(-18px); + transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.45s var(--ease); + } + + body.menu-open .site-nav { + display: flex; + z-index: 99; + opacity: 1 !important; + visibility: visible !important; + transform: translateY(0) !important; + } + + .site-nav a { + min-height: auto; + padding: 17px 0; + border-bottom: 1px solid var(--line-light); + color: var(--white); + font-size: clamp(30px, 6vw, 56px); + font-weight: 700; + letter-spacing: -0.05em; + } + + .site-nav a::after { + display: none; + } + + .site-nav .nav-cta { + align-self: stretch; + height: auto; + margin: 18px 0 0; + padding: 18px; + color: var(--ink); + background: var(--orange); + font-size: 16px; + letter-spacing: 0.08em; + } + + .nav-divider { + display: none; + } + + .hero-intro, + .page-hero-copy { + grid-column: 6 / -1; + } + + .intro-grid .section-title, + .principles-lead { + grid-column: 1 / span 8; + } + + .intro-copy, + .principles-aside { + grid-column: 9 / -1; + } + + .service-row { + grid-template-columns: 0.7fr 4fr 4fr 0.8fr; + } + + .feature-collage { + min-height: 720px; + } + + .collage-image { + grid-column: 1 / span 9; + min-height: 560px; + } + + .collage-card { + grid-column: 6 / -1; + } + + .capability-card { + min-height: 410px; + } + + .capability-card .card-title { + margin-top: 60px; + } + + .builder-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 760px) { + :root { + --pad: 20px; + } + + .brand { + padding-left: var(--pad); + } + + .brand-logo { + width: 126px; + height: 50px; + } + + .grid-surface::before { + background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 25%); + } + + .hero { + min-height: auto; + padding-top: 34px; + } + + .hero-topline, + .page-hero-head, + .intro-grid, + .split-grid, + .principles-grid, + .contact-grid { + display: block; + } + + .hero-topline { + margin-bottom: 70px; + } + + .hero-intro, + .page-hero-copy { + max-width: 430px; + margin-top: 34px; + } + + .hero-orbit { + top: 62%; + right: -8%; + width: 50vw; + } + + .hero-bottom { + display: grid; + grid-template-columns: 1fr; + margin-top: 60px; + } + + .hero-note, + .hero-actions { + grid-column: 1; + padding: 22px 0; + border-right: 0; + border-bottom: 1px solid var(--line); + } + + .hero-actions { + display: block; + } + + .hero-actions .btn { + margin-top: 22px; + } + + .intro-copy, + .principles-aside { + margin-top: 40px; + } + + .service-row { + grid-template-columns: 42px minmax(0, 1fr) auto; + min-height: 0; + align-items: start; + } + + .service-row > * { + padding: 24px 12px; + } + + .service-row h3 { + grid-column: 2; + } + + .service-row p { + grid-column: 2 / -1; + grid-row: 2; + padding-top: 0; + border-left: 1px solid var(--line); + } + + .service-row .arrow { + grid-column: 3; + } + + .feature-collage { + display: flex; + min-height: 0; + flex-direction: column; + padding: 0; + } + + .collage-image { + min-height: 470px; + } + + .collage-card { + margin: 0; + padding: 48px var(--pad) 54px; + } + + .stats-grid, + .capability-grid, + .contact-details, + .audience-split, + .builder-grid, + .media-direction { + grid-template-columns: 1fr; + } + + .audience-card { + min-height: 430px; + } + + .audience-card h3 { + margin-top: 85px; + } + + .discord-panel { + display: flex; + min-height: 0; + flex-direction: column; + } + + .discord-copy { + min-height: 570px; + } + + .discord-visual { + min-height: 520px; + border-top: 1px solid rgba(255, 255, 255, 0.35); + border-left: 0; + } + + .media-card { + min-height: 430px; + } + + .application-layout { + display: block; + } + + .application-aside { + padding: 0 0 70px; + } + + .choice-grid { + grid-template-columns: 1fr; + } + + .stat { + min-height: 200px; + } + + .stat strong { + margin-top: 45px; + } + + .page-hero { + min-height: auto; + padding-top: 50px; + } + + .page-hero-head { + margin-bottom: 75px; + } + + .capability-card { + min-height: 390px; + } + + .process-step { + grid-template-columns: 48px 1fr; + min-height: 0; + } + + .process-step h3 { + padding: 0; + } + + .process-step p { + grid-column: 2; + margin-top: 24px; + } + + .principle-list { + grid-template-columns: 1fr; + } + + .principle { + min-height: 260px; + } + + .project { + display: flex; + flex-direction: column; + } + + .project-image { + min-height: 430px; + } + + .project-info, + .project:nth-child(even) .project-info { + padding: 28px 0 0; + } + + .project-info .btn { + margin-top: 30px; + } + + .contact-intro { + padding: 0 0 70px; + } + + .field-grid { + grid-template-columns: 1fr; + } + + .field-wide { + grid-column: auto; + } + + .footer-cta { + display: block; + } + + .footer-cta .btn { + margin-top: 42px; + } + + .footer-bottom { + display: grid; + grid-template-columns: 1fr; + gap: 42px; + min-height: 0; + } + + .footer-brand, + .footer-links, + .footer-meta { + grid-column: 1; + } + + .footer-meta { + text-align: left; + } +} + +@media (pointer: coarse), (max-width: 900px) { + .cursor-dot, + .cursor-ring { + display: none; + } +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } + + .reveal { + opacity: 1; + transform: none; + } +} diff --git a/work.html b/work.html new file mode 100644 index 0000000..b669e95 --- /dev/null +++ b/work.html @@ -0,0 +1,26 @@ + + + + The Lab - Teppelin Labs + + + + +
+ +
+

Visitor path / The lab

The lab is not a polished portfolio of invented outcomes. It is a living set of technical territories where members experiment, collaborate, and publish what they discover.

03Ideasbecomeevidence.

+ +
+
LAB / 01AGENT
STACKSApplied AI / Evaluation / Interfaces
01 / AGENTIC SYSTEMS

From model to useful behavior.

Exploring agents, tool use, memory, evaluation, reliability, and the interface patterns that make autonomous systems understandable.

AIAgentsResearch
Propose a collaboration
+
LAB / 02REAL
TIMEMotion / 3D / Generative systems
02 / CREATIVE TECHNOLOGY

Code as a visual material.

Combining graphics, interaction, motion, sound, and computation to create expressive digital experiences that could not exist in static media.

Creative codeWebGLMotion
Build with us
+
LAB / 03OPENTools / Infrastructure / Knowledge
03 / OPEN TOOLS

Small tools, shared leverage.

Building reusable software, templates, components, and technical knowledge that help other builders move faster and think more clearly.

Open sourceDevtoolsSystems
Bring an idea
+
+ +

Not case studies.
Active questions.

The lab will evolve as members publish real experiments, prototypes, repositories, and write-ups.

Until then, these territories communicate what Teppelin is actively interested in without pretending unfinished or fictional work is a client portfolio.

Inside the collective
+
+ + + + +