chore: organize site files

references/modern-one-step-solutions/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.

references/modern-one-step-solutions/code.html

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+
+<html class="scroll-smooth" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Teppelin Labs</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              "colors": {
+                      "on-surface": "#1a1c1c",
+                      "on-secondary-fixed": "#1c1b1b",
+                      "on-secondary": "#ffffff",
+                      "on-primary-fixed": "#3b0900",
+                      "surface-container": "#eeeeee",
+                      "primary-fixed": "#ffdbd1",
+                      "tertiary-fixed-dim": "#c8c6c6",
+                      "primary": "#ad2b00",
+                      "on-primary-container": "#fffbff",
+                      "secondary-container": "#e2dfde",
+                      "outline": "#8e7068",
+                      "surface-tint": "#b22d00",
+                      "secondary-fixed-dim": "#c8c6c5",
+                      "surface-container-highest": "#e2e2e2",
+                      "on-tertiary-fixed-variant": "#474747",
+                      "surface-container-lowest": "#ffffff",
+                      "primary-container": "#d24115",
+                      "inverse-surface": "#2f3131",
+                      "secondary": "#5f5e5e",
+                      "error": "#ba1a1a",
+                      "on-tertiary": "#ffffff",
+                      "tertiary-container": "#757474",
+                      "surface-bright": "#f9f9f9",
+                      "on-error": "#ffffff",
+                      "inverse-on-surface": "#f1f1f1",
+                      "error-container": "#ffdad6",
+                      "background": "#f9f9f9",
+                      "on-background": "#1a1c1c",
+                      "inverse-primary": "#ffb5a1",
+                      "surface-variant": "#e2e2e2",
+                      "surface-container-high": "#e8e8e8",
+                      "on-primary": "#ffffff",
+                      "on-error-container": "#93000a",
+                      "on-secondary-container": "#636262",
+                      "surface-dim": "#dadada",
+                      "on-surface-variant": "#5a413a",
+                      "tertiary-fixed": "#e4e2e2",
+                      "outline-variant": "#e3bfb5",
+                      "tertiary": "#5c5c5c",
+                      "on-secondary-fixed-variant": "#474746",
+                      "secondary-fixed": "#e5e2e1",
+                      "surface": "#f9f9f9",
+                      "primary-fixed-dim": "#ffb5a1",
+                      "on-primary-fixed-variant": "#882000",
+                      "surface-container-low": "#f4f3f3",
+                      "on-tertiary-fixed": "#1b1c1c",
+                      "on-tertiary-container": "#fefcfb"
+              },
+              "borderRadius": {
+                      "DEFAULT": "0.25rem",
+                      "lg": "0.5rem",
+                      "xl": "0.75rem",
+                      "full": "9999px"
+              },
+              "spacing": {
+                      "margin-mobile": "20px",
+                      "stack-md": "32px",
+                      "stack-sm": "16px",
+                      "margin-desktop": "64px",
+                      "gutter": "24px",
+                      "stack-lg": "80px",
+                      "grid-unit": "8px"
+              },
+              "fontFamily": {
+                      "display": [
+                              "Inter"
+                      ],
+                      "body-md": [
+                              "Inter"
+                      ],
+                      "headline-md": [
+                              "Inter"
+                      ],
+                      "headline-lg": [
+                              "Inter"
+                      ],
+                      "label-caps": [
+                              "Inter"
+                      ],
+                      "headline-lg-mobile": [
+                              "Inter"
+                      ],
+                      "body-lg": [
+                              "Inter"
+                      ]
+              },
+              "fontSize": {
+                      "display": [
+                              "120px",
+                              {
+                                      "lineHeight": "110px",
+                                      "letterSpacing": "-0.04em",
+                                      "fontWeight": "800"
+                              }
+                      ],
+                      "body-md": [
+                              "16px",
+                              {
+                                      "lineHeight": "24px",
+                                      "fontWeight": "400"
+                              }
+                      ],
+                      "headline-md": [
+                              "32px",
+                              {
+                                      "lineHeight": "40px",
+                                      "letterSpacing": "-0.01em",
+                                      "fontWeight": "600"
+                              }
+                      ],
+                      "headline-lg": [
+                              "64px",
+                              {
+                                      "lineHeight": "72px",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "label-caps": [
+                              "12px",
+                              {
+                                      "lineHeight": "16px",
+                                      "letterSpacing": "0.1em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "headline-lg-mobile": [
+                              "40px",
+                              {
+                                      "lineHeight": "44px",
+                                      "letterSpacing": "-0.02em",
+                                      "fontWeight": "700"
+                              }
+                      ],
+                      "body-lg": [
+                              "20px",
+                              {
+                                      "lineHeight": "30px",
+                                      "fontWeight": "400"
+                              }
+                      ]
+              }
+      },
+          },
+        }
+    </script>
+<style>
+        /* Grid Lines Background for Swiss Design Aesthetic */
+        .bg-grid {
+            background-size: 25% 25%;
+            background-image: 
+                linear-gradient(to right, rgba(222, 222, 222, 0.5) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(222, 222, 222, 0.5) 1px, transparent 1px);
+        }
+        
+        /* Reveal Animation */
+        .reveal {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
+        }
+        .reveal.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body class="bg-surface text-on-surface font-body-md antialiased relative overflow-x-hidden min-h-screen flex flex-col">
+<!-- Persistent WebGL Background -->
+<div class="fixed inset-0 z-[-1] pointer-events-none opacity-20">
+
+</div>
+<!-- Grid Overlay -->
+<div class="fixed inset-0 z-[-1] bg-grid pointer-events-none"></div>
+<!-- TopNavBar (Shared Component) -->
+<nav class="sticky top-0 w-full z-50 bg-surface border-b border-outline-variant flex justify-between items-center px-margin-mobile md:px-margin-desktop h-20 max-w-full">
+<div class="font-display text-headline-md tracking-tighter text-primary uppercase">
+            Teppelin Labs
+        </div>
+<!-- Mobile Menu Toggle (Decorative for Mobile Only view) -->
+<button class="md:hidden text-primary">
+<span class="material-symbols-outlined">menu</span>
+</button>
+<!-- Desktop Links (Hidden on mobile) -->
+<div class="hidden md:flex gap-gutter items-center">
+<a class="text-primary border-b-2 border-primary pb-1 font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Solutions</a>
+<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Methodology</a>
+<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Archive</a>
+<a class="text-on-surface font-label-caps uppercase transition-colors duration-0 hover:bg-primary hover:text-on-primary px-2" href="#">Contact</a>
+<button class="bg-primary text-on-primary font-label-caps uppercase px-6 py-3 ml-4 hover:bg-inverse-surface hover:text-on-secondary transition-colors duration-0">
+                GET STARTED
+            </button>
+</div>
+</nav>
+<main class="flex-grow flex flex-col w-full">
+<!-- Hero Section -->
+<section class="w-full px-margin-mobile pt-stack-lg pb-stack-md flex flex-col gap-stack-md border-b border-outline-variant reveal">
+<div class="flex flex-col gap-4">
+<h1 class="font-display text-headline-lg-mobile tracking-tighter uppercase leading-none">
+                    Truth In<br/>
+<span class="text-primary">Design</span>
+</h1>
+<p class="font-body-md text-on-surface-variant max-w-sm mt-4 border-l-2 border-primary pl-4">
+                    Good design does not lie — it reveals. It respects the viewer, guides the eye, and lets the content speak for itself.
+                </p>
+</div>
+<div class="mt-stack-sm w-full h-[40vh] relative border-2 border-on-surface overflow-hidden">
+<!-- Mobile-optimized macro photography placeholder -->
+<img alt="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." class="w-full h-full object-cover filter grayscale contrast-125 mix-blend-multiply" data-alt="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." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdUg0tBXzQr8gEuqco1fYePIh3ZoALWotkJhZ8K0RzvnEoJw8Bu-pxoUDDmasr01Klr3s6mqNTaqYI_9MwMwe6OeGODVexeu_z6EKjCPXsRkP3sFBYtavFuCHQOhO4p-4BJ80T3E6_zf4V1UyONVYCgnfZmZeINzZGlOXGCgxC3Gvj43_YohdaBkQ8_hIjK6O-Wv0mvGPetwjVYOxFg6H7MQljm61mDKL6oMbdRcWvlztOLLl7ywmL3qM1cJq6TlE2-y0RjJJqrVk"/>
+<!-- Brand Anchor Overlay -->
+<div class="absolute bottom-4 right-4 w-16 h-16 bg-primary rounded-full flex items-center justify-center mix-blend-screen">
+<img alt="Teppelin Labs Logo" class="w-8 h-8 invert brightness-0" src="https://lh3.googleusercontent.com/aida/AP1WRLs-7Bso6MuiDmXCvtlN6oYH0fLKqzyy4LfYFwGrm2cwednZRqtPcpWlFW4Ln0AySTuzEHQf0PoR3-kFOEhWX_ViLmlnZMnDB_FOnWQXObiEGLOTSjnPvUpC0r0ZIQh9k-r5L92hy0Wj9oKFvGTI88htXbuFu73Ld0ZNVWabwqxXFB7ospwuYuh_1dIoDxFfMZkwhI8VEVKjKBtjn7JmHygirTVDVkNtJNTy8_KMt6T30hzcu4aUCrc8Tvo"/>
+</div>
+</div>
+</section>
+<!-- Core Competencies List -->
+<section class="w-full px-margin-mobile py-stack-md flex flex-col gap-0 border-b border-outline-variant reveal">
+<h2 class="font-headline-md text-primary uppercase mb-stack-sm border-b-2 border-primary pb-2 inline-block self-start">
+                Capabilities
+            </h2>
+<!-- List Item 01 -->
+<div class="flex flex-row py-6 border-b border-outline-variant group">
+<div class="font-label-caps text-secondary mr-6 pt-1">01</div>
+<div class="flex flex-col">
+<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Digital Systems</h3>
+<p class="font-body-md text-on-surface-variant mt-2">Architecture built for scale and uncompromised performance.</p>
+</div>
+</div>
+<!-- List Item 02 -->
+<div class="flex flex-row py-6 border-b border-outline-variant group">
+<div class="font-label-caps text-secondary mr-6 pt-1">02</div>
+<div class="flex flex-col">
+<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Robust Architecture</h3>
+<p class="font-body-md text-on-surface-variant mt-2">Foundational structures designed with mathematical rigor.</p>
+</div>
+</div>
+<!-- List Item 03 -->
+<div class="flex flex-row py-6 group">
+<div class="font-label-caps text-secondary mr-6 pt-1">03</div>
+<div class="flex flex-col">
+<h3 class="font-headline-md text-on-surface group-hover:text-primary transition-colors duration-0 uppercase">Engineering Tools</h3>
+<p class="font-body-md text-on-surface-variant mt-2">Precision instruments for the modern digital craftsperson.</p>
+</div>
+</div>
+</section>
+<!-- Statement Section -->
+<section class="w-full px-margin-mobile py-stack-lg bg-inverse-surface text-on-secondary flex flex-col gap-stack-sm reveal">
+<div class="w-12 h-12 bg-primary flex items-center justify-center mb-4">
+<span class="material-symbols-outlined text-on-primary">architecture</span>
+</div>
+<h2 class="font-headline-lg-mobile tracking-tighter uppercase leading-tight">
+                Precision is not an accident.
+            </h2>
+<p class="font-body-md text-surface-variant max-w-sm mt-4">
+                It is the result of deliberate choices, mathematical rigor, and an unwavering commitment to structural integrity over superficial decoration.
+            </p>
+<button class="mt-8 bg-transparent border-2 border-primary text-primary font-label-caps uppercase px-6 py-3 self-start hover:bg-primary hover:text-on-primary transition-colors duration-0">
+                Read Methodology
+            </button>
+</section>
+</main>
+<!-- Footer (Shared Component) -->
+<footer class="w-full py-stack-lg bg-inverse-surface text-on-secondary grid grid-cols-1 md:grid-cols-12 px-margin-mobile md:px-margin-desktop gap-gutter items-end border-t-2 border-primary mt-auto">
+<div class="col-span-1 md:col-span-4 flex flex-col gap-4">
+<div class="font-display text-headline-lg-mobile text-primary opacity-20 uppercase">
+                Teppelin Labs
+            </div>
+<div class="font-label-caps text-surface-variant opacity-80 uppercase mt-4">
+                ©2024 ONE-STEP SOLUTIONS. ALL RIGHTS RESERVED.
+            </div>
+</div>
+<div class="col-span-1 md:col-span-8 flex flex-col md:flex-row gap-gutter md:justify-end mt-stack-md md:mt-0">
+<a class="font-label-caps text-primary font-bold uppercase hover:text-primary transition-colors" href="#">Privacy Policy</a>
+<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Terms of Service</a>
+<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Grid Systems</a>
+<a class="font-label-caps text-surface-variant opacity-80 uppercase hover:text-primary transition-colors" href="#">Accessibility</a>
+</div>
+</footer>
+<script>
+        // Intersection Observer for Reveal Animations
+        document.addEventListener('DOMContentLoaded', () => {
+            const observerOptions = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
+            };
+
+            const observer = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('active');
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, observerOptions);
+
+            document.querySelectorAll('.reveal').forEach((element) => {
+                observer.observe(element);
+            });
+        });
+    </script>
+</body></html>