318 lines
16 KiB
HTML
318 lines
16 KiB
HTML
<!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&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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> |