| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Phantom Digital — Blueprint Style Guide</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| :root { |
| |
| --color-midnight-ink: #05060f; |
| --color-graphite-plate: #2f343e; |
| --color-steel-border: #3f4959; |
| --color-fog: #81899b; |
| --color-pebble: #9da7ba; |
| --color-moonlight: #c7d3ea; |
| --color-ice: #d1e4fa; |
| --color-glacier: #d8ecf8; |
| --color-frost-link: #b6d9fc; |
| --color-electric-iris: #663af3; |
| --color-ember: #e46d4c; |
| --color-azure: #027dea; |
| --color-cipher-mint: #269684; |
| --color-blueprint-glow: #bacff7; |
| --gradient-blueprint-glow: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%); |
| |
| |
| --font-untitled-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| --font-aeonikpro: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| --font-dotdigital: 'JetBrains Mono', ui-monospace, monospace; |
| |
| |
| --text-caption: 12px; |
| --leading-caption: 1.5; |
| --tracking-caption: -0.01px; |
| --text-body-sm: 14px; |
| --leading-body-sm: 1.43; |
| --tracking-body-sm: -0.01px; |
| --text-body: 16px; |
| --leading-body: 1.5; |
| --tracking-body: -0.01px; |
| --text-subheading: 18px; |
| --leading-subheading: 1.33; |
| --tracking-subheading: -0.01px; |
| --text-heading-sm: 24px; |
| --leading-heading-sm: 1.2; |
| --tracking-heading-sm: -0.01px; |
| --text-heading: 28px; |
| --leading-heading: 1.17; |
| --text-display: 48px; |
| --leading-display: 1.14; |
| |
| |
| --spacing-unit: 4px; |
| --spacing-4: 4px; |
| --spacing-8: 8px; |
| --spacing-12: 12px; |
| --spacing-16: 16px; |
| --spacing-20: 20px; |
| --spacing-24: 24px; |
| --spacing-32: 32px; |
| --spacing-36: 36px; |
| --spacing-40: 40px; |
| --spacing-48: 48px; |
| --spacing-56: 56px; |
| --spacing-100: 100px; |
| --spacing-120: 120px; |
| --spacing-200: 200px; |
| |
| |
| --radius-sm: 2px; |
| --radius-md: 6px; |
| --radius-lg: 10px; |
| --radius-2xl: 16px; |
| --radius-3xl: 24px; |
| --radius-3xl-2: 28px; |
| --radius-3xl-3: 44px; |
| --radius-full: 999px; |
| |
| |
| --shadow-sm: rgba(186, 207, 247, 0.32) 0 0 6px 0; |
| --shadow-md: rgba(238, 186, 247, 0.24) 0 0 12px 0; |
| --shadow-subtle: rgba(186, 215, 247, 0.12) 0 0 0 1px inset; |
| } |
| |
| * { box-sizing: border-box; } |
| |
| html { scroll-behavior: smooth; } |
| |
| body { |
| background-color: var(--color-midnight-ink); |
| color: var(--color-moonlight); |
| font-family: var(--font-untitled-sans); |
| font-size: var(--text-body); |
| line-height: var(--leading-body); |
| letter-spacing: var(--tracking-body); |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| overflow-x: hidden; |
| } |
| |
| |
| .blueprint-grid { |
| background-image: |
| linear-gradient(rgba(186, 207, 247, 0.04) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(186, 207, 247, 0.04) 1px, transparent 1px); |
| background-size: 40px 40px; |
| background-position: -1px -1px; |
| } |
| |
| .blueprint-grid-fine { |
| background-image: |
| linear-gradient(rgba(186, 207, 247, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(186, 207, 247, 0.03) 1px, transparent 1px); |
| background-size: 16px 16px; |
| } |
| |
| |
| .font-display { font-family: var(--font-aeonikpro); } |
| .font-mono { font-family: var(--font-dotdigital); } |
| |
| .text-caption { |
| font-size: var(--text-caption); |
| line-height: var(--leading-caption); |
| letter-spacing: var(--tracking-caption); |
| } |
| .text-body-sm { |
| font-size: var(--text-body-sm); |
| line-height: var(--leading-body-sm); |
| letter-spacing: var(--tracking-body-sm); |
| } |
| .text-subheading { |
| font-size: var(--text-subheading); |
| line-height: var(--leading-subheading); |
| letter-spacing: var(--tracking-subheading); |
| } |
| .text-heading-sm { |
| font-size: var(--text-heading-sm); |
| line-height: var(--leading-heading-sm); |
| letter-spacing: var(--tracking-heading-sm); |
| } |
| .text-heading { |
| font-size: var(--text-heading); |
| line-height: var(--leading-heading); |
| } |
| .text-display { |
| font-size: var(--text-display); |
| line-height: var(--leading-display); |
| } |
| .text-label { |
| font-family: var(--font-dotdigital); |
| font-size: 15px; |
| line-height: 1.2; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
| |
| |
| .bg-ink { background-color: var(--color-midnight-ink); } |
| .bg-graphite { background-color: var(--color-graphite-plate); } |
| .bg-iris { background-color: var(--color-electric-iris); } |
| .text-fog { color: var(--color-fog); } |
| .text-pebble { color: var(--color-pebble); } |
| .text-moonlight { color: var(--color-moonlight); } |
| .text-ice { color: var(--color-ice); } |
| .text-glacier { color: var(--color-glacier); } |
| .text-frost { color: var(--color-frost-link); } |
| .text-iris { color: var(--color-electric-iris); } |
| .text-ember { color: var(--color-ember); } |
| .text-azure { color: var(--color-azure); } |
| .text-mint { color: var(--color-cipher-mint); } |
| |
| |
| .border-steel { border-color: var(--color-steel-border); } |
| .border-subtle { border-color: rgba(186, 215, 247, 0.12); } |
| |
| |
| .surface-card { |
| background-color: var(--color-graphite-plate); |
| border-radius: var(--radius-2xl); |
| box-shadow: var(--shadow-subtle); |
| position: relative; |
| } |
| |
| .surface-iris { |
| background: linear-gradient(135deg, rgba(102, 58, 243, 0.15), rgba(102, 58, 243, 0.04)); |
| border: 1px solid rgba(102, 58, 243, 0.3); |
| border-radius: var(--radius-2xl); |
| } |
| |
| |
| .btn { |
| font-family: var(--font-untitled-sans); |
| font-weight: 600; |
| font-size: var(--text-body-sm); |
| padding: 12px 20px; |
| border-radius: var(--radius-sm); |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| transition: all 0.2s ease; |
| cursor: pointer; |
| border: 1px solid transparent; |
| } |
| .btn-primary { |
| background-color: var(--color-electric-iris); |
| color: var(--color-ice); |
| box-shadow: var(--shadow-md); |
| } |
| .btn-primary:hover { |
| background-color: #7a52ff; |
| box-shadow: rgba(102, 58, 243, 0.4) 0 0 18px 0; |
| transform: translateY(-1px); |
| } |
| .btn-secondary { |
| background-color: transparent; |
| color: var(--color-moonlight); |
| border-color: var(--color-steel-border); |
| } |
| .btn-secondary:hover { |
| border-color: var(--color-frost-link); |
| color: var(--color-frost-link); |
| box-shadow: var(--shadow-sm); |
| } |
| .btn-ghost { |
| background-color: transparent; |
| color: var(--color-fog); |
| } |
| .btn-ghost:hover { color: var(--color-moonlight); } |
| |
| .btn-ember { |
| background-color: transparent; |
| color: var(--color-ember); |
| border-color: rgba(228, 109, 76, 0.4); |
| } |
| .btn-ember:hover { |
| background-color: rgba(228, 109, 76, 0.1); |
| border-color: var(--color-ember); |
| } |
| |
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 10px; |
| border-radius: var(--radius-md); |
| font-size: var(--text-caption); |
| font-weight: 500; |
| letter-spacing: var(--tracking-caption); |
| border: 1px solid transparent; |
| } |
| .badge-iris { |
| background-color: rgba(102, 58, 243, 0.12); |
| color: #a98cff; |
| border-color: rgba(102, 58, 243, 0.3); |
| } |
| .badge-mint { |
| background-color: rgba(38, 150, 132, 0.12); |
| color: #5fceb9; |
| border-color: rgba(38, 150, 132, 0.3); |
| } |
| .badge-azure { |
| background-color: rgba(2, 125, 234, 0.12); |
| color: #6cb4fc; |
| border-color: rgba(2, 125, 234, 0.3); |
| } |
| .badge-ember { |
| background-color: rgba(228, 109, 76, 0.12); |
| color: #f7a88e; |
| border-color: rgba(228, 109, 76, 0.3); |
| } |
| .badge-neutral { |
| background-color: rgba(129, 137, 155, 0.1); |
| color: var(--color-pebble); |
| border-color: rgba(129, 137, 155, 0.2); |
| } |
| |
| |
| .pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 14px; |
| border-radius: var(--radius-full); |
| font-size: var(--text-body-sm); |
| border: 1px solid var(--color-steel-border); |
| color: var(--color-pebble); |
| background-color: rgba(47, 52, 62, 0.5); |
| } |
| |
| |
| .input-field { |
| width: 100%; |
| background-color: rgba(5, 6, 15, 0.6); |
| border: 1px solid var(--color-steel-border); |
| border-radius: var(--radius-sm); |
| padding: 12px 16px; |
| color: var(--color-moonlight); |
| font-family: var(--font-untitled-sans); |
| font-size: var(--text-body-sm); |
| transition: all 0.2s ease; |
| } |
| .input-field::placeholder { color: var(--color-fog); } |
| .input-field:focus { |
| outline: none; |
| border-color: var(--color-electric-iris); |
| box-shadow: 0 0 0 3px rgba(102, 58, 243, 0.2); |
| } |
| |
| |
| .glow-sm { box-shadow: var(--shadow-sm); } |
| .glow-md { box-shadow: var(--shadow-md); } |
| .inset-hairline { box-shadow: var(--shadow-subtle); } |
| |
| |
| .gradient-text { |
| background: var(--gradient-blueprint-glow); |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .iris-glow { |
| text-shadow: 0 0 20px rgba(102, 58, 243, 0.5); |
| } |
| |
| |
| @keyframes pulse-glow { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 1; } |
| } |
| .pulse-dot { |
| animation: pulse-glow 2s ease-in-out infinite; |
| } |
| |
| @keyframes scan-line { |
| 0% { transform: translateY(-100%); opacity: 0; } |
| 50% { opacity: 1; } |
| 100% { transform: translateY(100vh); opacity: 0; } |
| } |
| .scan-line { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--color-blueprint-glow), transparent); |
| animation: scan-line 8s linear infinite; |
| pointer-events: none; |
| z-index: 1; |
| opacity: 0.3; |
| } |
| |
| |
| .nav-blur { |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| background-color: rgba(5, 6, 15, 0.7); |
| border-bottom: 1px solid rgba(186, 215, 247, 0.08); |
| } |
| |
| |
| .section-divider { |
| height: 1px; |
| background: linear-gradient(90deg, transparent, rgba(186, 215, 247, 0.15), transparent); |
| } |
| |
| |
| .color-swatch { |
| position: relative; |
| aspect-ratio: 1; |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| .color-swatch:hover { |
| transform: translateY(-3px); |
| } |
| .color-swatch::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-subtle); |
| pointer-events: none; |
| } |
| |
| |
| .reveal { |
| opacity: 0; |
| transform: translateY(24px); |
| transition: opacity 0.7s ease, transform 0.7s ease; |
| } |
| .reveal.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| ::-webkit-scrollbar { width: 8px; } |
| ::-webkit-scrollbar-track { background: var(--color-midnight-ink); } |
| ::-webkit-scrollbar-thumb { |
| background: var(--color-graphite-plate); |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { background: var(--color-steel-border); } |
| |
| |
| .toast { |
| position: fixed; |
| bottom: 24px; |
| left: 50%; |
| transform: translateX(-50%) translateY(120%); |
| background-color: var(--color-graphite-plate); |
| border: 1px solid var(--color-steel-border); |
| border-radius: var(--radius-md); |
| padding: 12px 20px; |
| color: var(--color-ice); |
| font-size: var(--text-body-sm); |
| z-index: 100; |
| transition: transform 0.3s ease; |
| box-shadow: var(--shadow-md); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| .toast.show { transform: translateX(-50%) translateY(0); } |
| |
| |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease; |
| } |
| .mobile-menu.open { max-height: 400px; } |
| |
| @media (max-width: 768px) { |
| .text-display { font-size: 36px; } |
| .text-heading { font-size: 24px; } |
| } |
| </style> |
| </head> |
| <body class="blueprint-grid"> |
|
|
| |
| <div class="scan-line"></div> |
|
|
| |
| <nav class="nav-blur fixed top-0 left-0 right-0 z-50"> |
| <div class="max-w-[1200px] mx-auto px-6 py-4 flex items-center justify-between"> |
| <a href="#top" class="flex items-center gap-3"> |
| <div class="w-9 h-9 rounded-[6px] bg-iris flex items-center justify-center glow-md"> |
| <i data-lucide="hexagon" class="w-5 h-5 text-ice"></i> |
| </div> |
| <span class="font-display font-bold text-glacier text-[18px] tracking-tight">Phantom</span> |
| <span class="text-label text-fog hidden sm:inline">DIGITAL</span> |
| </a> |
|
|
| <div class="hidden md:flex items-center gap-8"> |
| <a href="#colors" class="text-body-sm text-pebble hover:text-frost transition-colors">Colors</a> |
| <a href="#typography" class="text-body-sm text-pebble hover:text-frost transition-colors">Typography</a> |
| <a href="#components" class="text-body-sm text-pebble hover:text-frost transition-colors">Components</a> |
| <a href="#elevation" class="text-body-sm text-pebble hover:text-frost transition-colors">Elevation</a> |
| <button class="btn btn-primary" onclick="showToast('Blueprint exported successfully')"> |
| <i data-lucide="download" class="w-4 h-4"></i> |
| Export |
| </button> |
| </div> |
|
|
| <button id="menuToggle" class="md:hidden text-moonlight" aria-label="Menu"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="mobileMenu" class="mobile-menu md:hidden"> |
| <div class="px-6 pb-4 flex flex-col gap-4"> |
| <a href="#colors" class="text-body-sm text-pebble py-2">Colors</a> |
| <a href="#typography" class="text-body-sm text-pebble py-2">Typography</a> |
| <a href="#components" class="text-body-sm text-pebble py-2">Components</a> |
| <a href="motion-studio.html" class="text-body-sm text-pebble py-2">Motion Studio</a> |
| <a href="#elevation" class="text-body-sm text-pebble py-2">Elevation</a> |
| <button class="btn btn-primary w-full justify-center" onclick="showToast('Blueprint exported successfully')"> |
| <i data-lucide="download" class="w-4 h-4"></i> |
| Export |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <header id="top" class="relative pt-32 pb-20 px-6 overflow-hidden"> |
| <div class="max-w-[1200px] mx-auto relative z-10"> |
| <div class="flex items-center gap-3 mb-8 reveal"> |
| <span class="w-2 h-2 rounded-full bg-iris pulse-dot glow-md"></span> |
| <span class="text-label text-fog">Style Guide · v1.0 · 2024</span> |
| </div> |
|
|
| <h1 class="font-display text-display text-glacier font-bold mb-6 reveal leading-[1.14]"> |
| A midnight blueprint<br /> |
| <span class="gradient-text">drawn in light.</span> |
| </h1> |
|
|
| <p class="text-body max-w-2xl text-pebble mb-10 reveal"> |
| Phantom Digital's visual identity is a technical, precise, and quietly luminous system — |
| designed around a near-black canvas with cool blue-gray typography and a single |
| electric iris violet accent. |
| </p> |
|
|
| <div class="flex flex-wrap items-center gap-4 mb-16 reveal"> |
| <button class="btn btn-primary" onclick="document.getElementById('colors').scrollIntoView({behavior:'smooth'})"> |
| <i data-lucide="palette" class="w-4 h-4"></i> |
| Explore Tokens |
| </button> |
| <button class="btn btn-secondary" onclick="copyCSS()"> |
| <i data-lucide="copy" class="w-4 h-4"></i> |
| Copy CSS Variables |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 reveal"> |
| <div class="surface-card p-6"> |
| <div class="text-label text-fog mb-2">Colors</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">13</div> |
| <div class="text-caption text-fog mt-1">Token palette</div> |
| </div> |
| <div class="surface-card p-6"> |
| <div class="text-label text-fog mb-2">Type Scale</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">8</div> |
| <div class="text-caption text-fog mt-1">Typographic roles</div> |
| </div> |
| <div class="surface-card p-6"> |
| <div class="text-label text-fog mb-2">Spacing</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">4px</div> |
| <div class="text-caption text-fog mt-1">Base unit</div> |
| </div> |
| <div class="surface-card p-6"> |
| <div class="text-label text-fog mb-2">Max Width</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">1200px</div> |
| <div class="text-caption text-fog mt-1">Page container</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="absolute top-1/2 right-0 w-[500px] h-[500px] rounded-full opacity-20 pointer-events-none" |
| style="background: radial-gradient(circle, var(--color-electric-iris), transparent 70%);"></div> |
| </header> |
|
|
| <div class="section-divider max-w-[1200px] mx-auto"></div> |
|
|
| |
| <section id="colors" class="py-[120px] px-6"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="mb-16 reveal"> |
| <div class="text-label text-iris mb-4">§ 02 — Palette</div> |
| <h2 class="font-display text-heading text-glacier font-bold mb-4">Color Tokens</h2> |
| <p class="text-body text-pebble max-w-2xl"> |
| A restrained, monochromatic system anchored on Midnight Ink. The single violet |
| accent — Electric Iris — carries every primary call to action. |
| </p> |
| </div> |
|
|
| |
| <div class="mb-16"> |
| <div class="text-label text-fog mb-6">Primary Surfaces & Accents</div> |
| <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 reveal"> |
| <div class="reveal"> |
| <div class="color-swatch" style="background: #05060f; border: 1px solid var(--color-steel-border);"> |
| <div class="absolute bottom-3 left-3 right-3"> |
| <div class="text-caption text-ice font-medium">Midnight Ink</div> |
| <div class="font-mono text-caption text-fog">#05060f</div> |
| </div> |
| </div> |
| </div> |
| <div class="reveal"> |
| <div class="color-swatch" style="background: #2f343e;"> |
| <div class="absolute bottom-3 left-3 right-3"> |
| <div class="text-caption text-ice font-medium">Graphite Plate</div> |
| <div class="font-mono text-caption text-fog">#2f343e</div> |
| </div> |
| </div> |
| </div> |
| <div class="reveal"> |
| <div class="color-swatch" style="background: #663af3;" class="glow-md"> |
| <div class="absolute bottom-3 left-3 right-3"> |
| <div class="text-caption text-ice font-medium">Electric Iris</div> |
| <div class="font-mono text-caption text-ice opacity-80">#663af3</div> |
| </div> |
| </div> |
| </div> |
| <div class="reveal"> |
| <div class="color-swatch" style="background: #d8ecf8;"> |
| <div class="absolute bottom-3 left-3 right-3"> |
| <div class="text-caption text-ink font-medium" style="color:#05060f">Glacier</div> |
| <div class="font-mono text-caption" style="color:#3f4959">#d8ecf8</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-16"> |
| <div class="text-label text-fog mb-6">Text & Typography</div> |
| <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 reveal"> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#81899b"></div> |
| <div class="text-caption text-ice font-medium">Fog</div> |
| <div class="font-mono text-caption text-fog">#81899b</div> |
| </div> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#9da7ba"></div> |
| <div class="text-caption text-ice font-medium">Pebble</div> |
| <div class="font-mono text-caption text-fog">#9da7ba</div> |
| </div> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#c7d3ea"></div> |
| <div class="text-caption text-ice font-medium">Moonlight</div> |
| <div class="font-mono text-caption text-fog">#c7d3ea</div> |
| </div> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#d1e4fa"></div> |
| <div class="text-caption text-ice font-medium">Ice</div> |
| <div class="font-mono text-caption text-fog">#d1e4fa</div> |
| </div> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#d8ecf8"></div> |
| <div class="text-caption text-ice font-medium">Glacier</div> |
| <div class="font-mono text-caption text-fog">#d8ecf8</div> |
| </div> |
| <div class="surface-card p-4 text-center"> |
| <div class="w-full h-8 rounded-md mb-3" style="background:#b6d9fc"></div> |
| <div class="text-caption text-ice font-medium">Frost Link</div> |
| <div class="font-mono text-caption text-fog">#b6d9fc</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <div class="text-label text-fog mb-6">Secondary Accents — Never Primary CTA</div> |
| <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 reveal"> |
| <div class="surface-card p-5 flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-lg flex-shrink-0" style="background:#e46d4c; box-shadow: rgba(228,109,76,0.3) 0 0 12px 0;"></div> |
| <div> |
| <div class="text-body-sm text-ice font-medium">Ember</div> |
| <div class="font-mono text-caption text-fog">#e46d4c · Warm secondary</div> |
| </div> |
| </div> |
| <div class="surface-card p-5 flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-lg flex-shrink-0" style="background:#027dea; box-shadow: rgba(2,125,234,0.3) 0 0 12px 0;"></div> |
| <div> |
| <div class="text-body-sm text-ice font-medium">Azure</div> |
| <div class="font-mono text-caption text-fog">#027dea · Blue support</div> |
| </div> |
| </div> |
| <div class="surface-card p-5 flex items-center gap-4"> |
| <div class="w-12 h-12 rounded-lg flex-shrink-0" style="background:#269684; box-shadow: rgba(38,150,132,0.3) 0 0 12px 0;"></div> |
| <div> |
| <div class="text-body-sm text-ice font-medium">Cipher Mint</div> |
| <div class="font-mono text-caption text-fog">#269684 · Teal support</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider max-w-[1200px] mx-auto"></div> |
|
|
| |
| <section id="typography" class="py-[120px] px-6"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="mb-16 reveal"> |
| <div class="text-label text-iris mb-4">§ 03 — Typography</div> |
| <h2 class="font-display text-heading text-glacier font-bold mb-4">Type System</h2> |
| <p class="text-body text-pebble max-w-2xl"> |
| Three families govern hierarchy: Aeonik Pro for display, Untitled Sans for body, |
| and Dot Digital for structural labels. |
| </p> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-16"> |
| <div class="surface-card p-6 reveal"> |
| <div class="text-label text-fog mb-4">Display</div> |
| <div class="font-display text-heading-sm text-glacier font-bold mb-2">Aeonik Pro</div> |
| <div class="text-caption text-fog">Hero & section headlines</div> |
| <div class="mt-4 font-display text-heading text-glacier">Ag</div> |
| </div> |
| <div class="surface-card p-6 reveal"> |
| <div class="text-label text-fog mb-4">Workhorse</div> |
| <div class="text-heading-sm text-glacier font-bold mb-2">Untitled Sans</div> |
| <div class="text-caption text-fog">Body copy, captions, small text</div> |
| <div class="mt-4 text-heading text-glacier">Ag</div> |
| </div> |
| <div class="surface-card p-6 reveal"> |
| <div class="text-label text-fog mb-4">Label</div> |
| <div class="font-mono text-heading-sm text-glacier font-bold mb-2">Dot Digital</div> |
| <div class="text-caption text-fog">Structural eyebrow labels</div> |
| <div class="mt-4 font-mono text-heading text-glacier">Ag</div> |
| </div> |
| </div> |
|
|
| |
| <div class="surface-card p-8 reveal"> |
| <div class="text-label text-fog mb-8">Type Scale Reference</div> |
|
|
| <div class="space-y-6"> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="font-display text-display text-glacier font-bold leading-[1.14]">Display 48px</div> |
| <div class="font-mono text-caption text-fog">48px · 1.14 · normal</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="font-display text-heading text-glacier font-bold leading-[1.17]">Heading 28px</div> |
| <div class="font-mono text-caption text-fog">28px · 1.17 · normal</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="text-heading-sm text-glacier font-bold leading-[1.2]" style="letter-spacing:-0.01px">Heading Small 24px</div> |
| <div class="font-mono text-caption text-fog">24px · 1.2 · -0.01px</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="text-subheading text-moonlight leading-[1.33]" style="letter-spacing:-0.01px">Subheading 18px</div> |
| <div class="font-mono text-caption text-fog">18px · 1.33 · -0.01px</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="text-body text-moonlight leading-[1.5]" style="letter-spacing:-0.01px">Body 16px — The quick brown fox jumps over the luminous wireframe.</div> |
| <div class="font-mono text-caption text-fog whitespace-nowrap">16px · 1.5</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="text-body-sm text-pebble leading-[1.43]" style="letter-spacing:-0.01px">Body Small 14px — Designed around a near-black canvas with cool blue-gray typography.</div> |
| <div class="font-mono text-caption text-fog whitespace-nowrap">14px · 1.43</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 pb-6 border-b border-subtle border"> |
| <div class="text-caption text-fog leading-[1.5]" style="letter-spacing:-0.01px">Caption 12px — Quietly luminous user interface drawn in light on dark glass.</div> |
| <div class="font-mono text-caption text-fog whitespace-nowrap">12px · 1.5</div> |
| </div> |
| <div class="flex flex-col md:flex-row md:items-baseline md:justify-between gap-2"> |
| <div class="text-label text-frost">Label · Eyebrow</div> |
| <div class="font-mono text-caption text-fog">15px · 1.2 · 0.1em</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8"> |
| <div class="surface-card p-5 text-center reveal"> |
| <div class="text-label text-fog mb-2">Regular</div> |
| <div class="text-heading-sm text-glacier" style="font-weight:400">Aa</div> |
| <div class="text-caption text-fog mt-2">400</div> |
| </div> |
| <div class="surface-card p-5 text-center reveal"> |
| <div class="text-label text-fog mb-2">Medium</div> |
| <div class="text-heading-sm text-glacier" style="font-weight:500">Aa</div> |
| <div class="text-caption text-fog mt-2">500</div> |
| </div> |
| <div class="surface-card p-5 text-center reveal"> |
| <div class="text-label text-fog mb-2">Semi-bold</div> |
| <div class="text-heading-sm text-glacier" style="font-weight:600">Aa</div> |
| <div class="text-caption text-fog mt-2">600</div> |
| </div> |
| <div class="surface-card p-5 text-center reveal"> |
| <div class="text-label text-fog mb-2">Bold</div> |
| <div class="text-heading-sm text-glacier" style="font-weight:700">Aa</div> |
| <div class="text-caption text-fog mt-2">700</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider max-w-[1200px] mx-auto"></div> |
|
|
| |
| <section id="components" class="py-[120px] px-6"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="mb-16 reveal"> |
| <div class="text-label text-iris mb-4">§ 04 — Components</div> |
| <h2 class="font-display text-heading text-glacier font-bold mb-4">UI Components</h2> |
| <p class="text-body text-pebble max-w-2xl"> |
| Interactive elements use a 2px radius. Informational surfaces use 10–16px. |
| Only Electric Iris appears on primary calls to action. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| |
| <div class="surface-card p-8 reveal"> |
| <div class="text-label text-fog mb-6">Buttons</div> |
| <div class="flex flex-wrap gap-3 mb-6"> |
| <button class="btn btn-primary" onclick="showToast('Primary action triggered')"> |
| <i data-lucide="zap" class="w-4 h-4"></i> |
| Primary |
| </button> |
| <button class="btn btn-secondary" onclick="showToast('Secondary action triggered')"> |
| Secondary |
| </button> |
| <button class="btn btn-ember" onclick="showToast('Ember action triggered')"> |
| <i data-lucide="flame" class="w-4 h-4"></i> |
| Ember |
| </button> |
| <button class="btn btn-ghost" onclick="showToast('Ghost action triggered')"> |
| Ghost |
| </button> |
| </div> |
| <div class="text-caption text-fog border-t border-subtle border pt-4"> |
| Radius: 2px · Weight: 600 · Padding: 12px 20px |
| </div> |
| </div> |
|
|
| |
| <div class="surface-card p-8 reveal"> |
| <div class="text-label text-fog mb-6">Badges & Pills</div> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="badge badge-iris"><i data-lucide="zap" class="w-3 h-3"></i> Iris</span> |
| <span class="badge badge-mint"><i data-lucide="check" class="w-3 h-3"></i> Mint</span> |
| <span class="badge badge-azure"><i data-lucide="info" class="w-3 h-3"></i> Azure</span> |
| <span class="badge badge-ember"><i data-lucide="flame" class="w-3 h-3"></i> Ember</span> |
| <span class="badge badge-neutral">Neutral</span> |
| </div> |
| <div class="flex flex-wrap gap-3 mb-4"> |
| <span class="pill"><i data-lucide="circle" class="w-3 h-3 text-mint"></i> Active</span> |
| <span class="pill"><i data-lucide="clock" class="w-3 h-3 text-fog"></i> Pending</span> |
| <span class="pill"><i data-lucide="lock" class="w-3 h-3 text-fog"></i> Locked</span> |
| </div> |
| <div class="text-caption text-fog border-t border-subtle border pt-4"> |
| Badge: 6px · Pill: 999px · Caption weight: 500 |
| </div> |
| </div> |
|
|
| |
| <div class="surface-card p-8 reveal"> |
| <div class="text-label text-fog mb-6">Form Inputs</div> |
| <div class="space-y-4"> |
| <div> |
| <label class="text-body-sm text-pebble block mb-2">Identifier</label> |
| <input type="text" class="input-field" placeholder="Enter blueprint ID" /> |
| </div> |
| <div> |
| <label class="text-body-sm text-pebble block mb-2">Access Code</label> |
| <input type="password" class="input-field" placeholder="••••••••••••" /> |
| </div> |
| <div class="flex items-center gap-3"> |
| <button class="btn btn-primary w-full justify-center" onclick="showToast('Form submitted')"> |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| Submit |
| </button> |
| <button class="btn btn-secondary">Reset</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="surface-card p-8 reveal"> |
| <div class="text-label text-fog mb-6">Surface Cards</div> |
| <div class="surface-iris p-5 mb-4"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg bg-iris flex items-center justify-center glow-md"> |
| <i data-lucide="sparkles" class="w-5 h-5 text-ice"></i> |
| </div> |
| <div> |
| <div class="text-body-sm text-ice font-medium">Iris Surface</div> |
| <div class="text-caption text-fog">Gradient tinted accent card</div> |
| </div> |
| </div> |
| <p class="text-body-sm text-pebble">For highlighting featured or interactive content blocks.</p> |
| </div> |
| <div class="bg-graphite p-5 rounded-[10px] inset-hairline"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background: rgba(129,137,155,0.15)"> |
| <i data-lucide="layers" class="w-5 h-5 text-pebble"></i> |
| </div> |
| <div> |
| <div class="text-body-sm text-ice font-medium">Graphite Card</div> |
| <div class="text-caption text-fog">Standard matte panel</div> |
| </div> |
| </div> |
| <p class="text-body-sm text-pebble">Default elevated surface with inset hairline.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-12"> |
| <div class="text-label text-fog mb-6">Spacing & Layout</div> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="surface-card p-6 reveal text-center"> |
| <div class="text-label text-fog mb-3">Base Unit</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">4px</div> |
| <div class="text-caption text-fog mt-2">Foundation multiplier</div> |
| </div> |
| <div class="surface-card p-6 reveal text-center"> |
| <div class="text-label text-fog mb-3">Card Padding</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">24px</div> |
| <div class="text-caption text-fog mt-2">Interior content gap</div> |
| </div> |
| <div class="surface-card p-6 reveal text-center"> |
| <div class="text-label text-fog mb-3">Section Gap</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">120px</div> |
| <div class="text-caption text-fog mt-2">Vertical rhythm</div> |
| </div> |
| <div class="surface-card p-6 reveal text-center"> |
| <div class="text-label text-fog mb-3">Max Width</div> |
| <div class="font-display text-heading-sm text-glacier font-bold">1200px</div> |
| <div class="text-caption text-fog mt-2">Page container</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8"> |
| <div class="text-label text-fog mb-6">Border Radius</div> |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> |
| <div class="surface-card p-6 reveal flex flex-col items-center"> |
| <div class="w-16 h-16 bg-graphite mb-3" style="border-radius:2px; border:1px solid var(--color-steel-border)"></div> |
| <div class="text-body-sm text-ice font-medium">2px</div> |
| <div class="text-caption text-fog">Buttons / Inputs</div> |
| </div> |
| <div class="surface-card p-6 reveal flex flex-col items-center"> |
| <div class="w-16 h-16 bg-graphite mb-3" style="border-radius:6px; border:1px solid var(--color-steel-border)"></div> |
| <div class="text-body-sm text-ice font-medium">6px</div> |
| <div class="text-caption text-fog">Badges</div> |
| </div> |
| <div class="surface-card p-6 reveal flex flex-col items-center"> |
| <div class="w-16 h-16 bg-graphite mb-3" style="border-radius:10px; border:1px solid var(--color-steel-border)"></div> |
| <div class="text-body-sm text-ice font-medium">10px</div> |
| <div class="text-caption text-fog">Cards (sm)</div> |
| </div> |
| <div class="surface-card p-6 reveal flex flex-col items-center"> |
| <div class="w-16 h-16 bg-graphite mb-3" style="border-radius:16px; border:1px solid var(--color-steel-border)"></div> |
| <div class="text-body-sm text-ice font-medium">16px</div> |
| <div class="text-caption text-fog">Cards (lg)</div> |
| </div> |
| <div class="surface-card p-6 reveal flex flex-col items-center"> |
| <div class="w-16 h-16 bg-graphite mb-3" style="border-radius:999px; border:1px solid var(--color-steel-border)"></div> |
| <div class="text-body-sm text-ice font-medium">999px</div> |
| <div class="text-caption text-fog">Pills</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider max-w-[1200px] mx-auto"></div> |
|
|
| |
| <section id="elevation" class="py-[120px] px-6"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="mb-16 reveal"> |
| <div class="text-label text-iris mb-4">§ 05 — Elevation</div> |
| <h2 class="font-display text-heading text-glacier font-bold mb-4">Shadows & Glows</h2> |
| <p class="text-body text-pebble max-w-2xl"> |
| Depth is conveyed through soft blue glows and inset hairlines — never drop shadows. |
| Elevation reads as light, not as weight. |
| </p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="surface-card p-8 reveal flex flex-col items-center text-center"> |
| <div class="w-24 h-24 rounded-[16px] mb-6 flex items-center justify-center" |
| style="background: var(--color-graphite-plate); box-shadow: var(--shadow-sm);"> |
| <i data-lucide="sun" class="w-8 h-8 text-frost"></i> |
| </div> |
| <div class="text-label text-fog mb-2">Shadow SM</div> |
| <div class="text-body-sm text-ice font-medium mb-2">Subtle Glow</div> |
| <div class="font-mono text-caption text-fog">rgba(186,207,247,0.32)<br/>0 0 6px 0</div> |
| </div> |
| <div class="surface-card p-8 reveal flex flex-col items-center text-center"> |
| <div class="w-24 h-24 rounded-[16px] mb-6 flex items-center justify-center" |
| style="background: var(--color-graphite-plate); box-shadow: var(--shadow-md);"> |
| <i data-lucide="sparkles" class="w-8 h-8 text-iris"></i> |
| </div> |
| <div class="text-label text-fog mb-2">Shadow MD</div> |
| <div class="text-body-sm text-ice font-medium mb-2">Soft Ambient Glow</div> |
| <div class="font-mono text-caption text-fog">rgba(238,186,247,0.24)<br/>0 0 12px 0</div> |
| </div> |
| <div class="surface-card p-8 reveal flex flex-col items-center text-center"> |
| <div class="w-24 h-24 rounded-[16px] mb-6 flex items-center justify-center" |
| style="background: var(--color-graphite-plate); box-shadow: var(--shadow-subtle);"> |
| <i data-lucide="square" class="w-8 h-8 text-pebble"></i> |
| </div> |
| <div class="text-label text-fog mb-2">Inset Hairline</div> |
| <div class="text-body-sm text-ice font-medium mb-2">Surface Definition</div> |
| <div class="font-mono text-caption text-fog">rgba(186,215,247,0.12)<br/>inset 0 0 0 1px</div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-16 reveal"> |
| <div class="flex items-center justify-between mb-6"> |
| <div class="text-label text-fog">CSS Variables Reference</div> |
| <button class="btn btn-secondary" onclick="copyCSS()"> |
| <i data-lucide="copy" class="w-4 h-4"></i> |
| Copy |
| </button> |
| </div> |
| <div class="surface-card p-6 overflow-x-auto"> |
| <pre class="font-mono text-caption text-pebble leading-[1.6]"><code id="cssVars">:root { |
| /* Colors */ |
| --color-midnight-ink: #05060f; |
| --color-graphite-plate: #2f343e; |
| --color-steel-border: #3f4959; |
| --color-fog: #81899b; |
| --color-pebble: #9da7ba; |
| --color-moonlight: #c7d3ea; |
| --color-ice: #d1e4fa; |
| --color-glacier: #d8ecf8; |
| --color-frost-link: #b6d9fc; |
| --color-electric-iris: #663af3; |
| --color-ember: #e46d4c; |
| --color-azure: #027dea; |
| --color-cipher-mint: #269684; |
|
|
| /* Typography */ |
| --font-untitled-sans: 'Untitled Sans', sans-serif; |
| --font-aeonikpro: 'Aeonik Pro', sans-serif; |
| --font-dotdigital: 'Dot Digital', monospace; |
|
|
| /* Spacing */ |
| --spacing-unit: 4px; |
| --spacing-120: 120px; |
|
|
| /* Radius */ |
| --radius-sm: 2px; |
| --radius-md: 6px; |
| --radius-lg: 10px; |
| --radius-2xl: 16px; |
| --radius-full: 999px; |
|
|
| /* Shadows */ |
| --shadow-sm: rgba(186, 207, 247, 0.32) 0 0 6px 0; |
| --shadow-md: rgba(238, 186, 247, 0.24) 0 0 12px 0; |
| --shadow-subtle: rgba(186, 215, 247, 0.12) 0 0 0 1px inset; |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider max-w-[1200px] mx-auto"></div> |
|
|
| |
| <section class="py-[120px] px-6"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="mb-16 reveal"> |
| <div class="text-label text-iris mb-4">§ 06 — Guidelines</div> |
| <h2 class="font-display text-heading text-glacier font-bold mb-4">Usage Principles</h2> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="surface-card p-8 reveal"> |
| <div class="w-12 h-12 rounded-lg bg-iris flex items-center justify-center glow-md mb-4"> |
| <i data-lucide="zap" class="w-6 h-6 text-ice"></i> |
| </div> |
| <h3 class="text-heading-sm text-glacier font-bold mb-3">Saturated Restraint</h3> |
| <p class="text-body-sm text-pebble"> |
| Use only Electric Iris as the primary accent. Ember, Azure, and Cipher Mint |
| serve as secondary accents but never for primary CTAs. |
| </p> |
| </div> |
| <div class="surface-card p-8 reveal"> |
| <div class="w-12 h-12 rounded-lg bg-graphite flex items-center justify-center inset-hairline mb-4"> |
| <i data-lucide="type" class="w-6 h-6 text-frost"></i> |
| </div> |
| <h3 class="text-heading-sm text-glacier font-bold mb-3">Typographic Discipline</h3> |
| <p class="text-body-sm text-pebble"> |
| Display font for headers above 28px. Workhorse font for body and caption. |
| Label font reserved for structural eyebrows only. |
| </p> |
| </div> |
| <div class="surface-card p-8 reveal"> |
| <div class="w-12 h-12 rounded-lg bg-graphite flex items-center justify-center inset-hairline mb-4"> |
| <i data-lucide="ruler" class="w-6 h-6 text-frost"></i> |
| </div> |
| <h3 class="text-heading-sm text-glacier font-bold mb-3">Consistent Geometry</h3> |
| <p class="text-body-sm text-pebble"> |
| Apply border radius and shadows uniformly. Interactive elements at 2px, |
| informational surfaces at 10–16px. No drop shadows — only glows. |
| </p> |
| </div> |
| <div class="surface-card p-8 reveal"> |
| <div class="w-12 h-12 rounded-lg bg-graphite flex items-center justify-center inset-hairline mb-4"> |
| <i data-lucide="align-center" class="w-6 h-6 text-frost"></i> |
| </div> |
| <h3 class="text-heading-sm text-glacier font-bold mb-3">Centered Rhythm</h3> |
| <p class="text-body-sm text-pebble"> |
| Layout remains centered, clean, and vertically rhythmic with a 1200px max width |
| and 120px section gaps. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="py-16 px-6 border-t border-subtle border"> |
| <div class="max-w-[1200px] mx-auto"> |
| <div class="flex flex-col md:flex-row md:items-center justify-between gap-8"> |
| <div class="flex items-center gap-3"> |
| <div class="w-9 h-9 rounded-[6px] bg-iris flex items-center justify-center glow-md"> |
| <i data-lucide="hexagon" class="w-5 h-5 text-ice"></i> |
| </div> |
| <div> |
| <div class="font-display font-bold text-glacier text-[18px]">Phantom Digital</div> |
| <div class="text-caption text-fog">Blueprint Style Guide · v1.0 · 2024-06</div> |
| </div> |
| </div> |
| <div class="flex flex-col md:items-end gap-2"> |
| <div class="text-caption text-fog">Prepared for Phantom Digital</div> |
| <a href="mailto:design@phantomdigital.com" class="text-body-sm text-frost hover:text-ice transition-colors flex items-center gap-2"> |
| <i data-lucide="mail" class="w-4 h-4"></i> |
| design@phantomdigital.com |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 pt-8 border-t border-subtle border flex flex-col md:flex-row justify-between gap-4"> |
| <div class="text-caption text-fog">© 2024 Phantom Digital. Drawn in light on dark glass.</div> |
| <div class="flex gap-6"> |
| <a href="#colors" class="text-caption text-fog hover:text-frost transition-colors">Colors</a> |
| <a href="#typography" class="text-caption text-fog hover:text-frost transition-colors">Typography</a> |
| <a href="#components" class="text-caption text-fog hover:text-frost transition-colors">Components</a> |
| <a href="motion-studio.html" class="text-caption text-fog hover:text-frost transition-colors">Motion Studio</a> |
| <a href="#elevation" class="text-caption text-fog hover:text-frost transition-colors">Elevation</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="toast" class="toast"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-mint"></i> |
| <span id="toastMessage">Action completed</span> |
| </div> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| const menuToggle = document.getElementById('menuToggle'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| menuToggle.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| const isOpen = mobileMenu.classList.contains('open'); |
| menuToggle.innerHTML = isOpen |
| ? '<i data-lucide="x" class="w-6 h-6"></i>' |
| : '<i data-lucide="menu" class="w-6 h-6"></i>'; |
| lucide.createIcons(); |
| }); |
| |
| |
| mobileMenu.querySelectorAll('a').forEach(link => { |
| link.addEventListener('click', () => { |
| mobileMenu.classList.remove('open'); |
| menuToggle.innerHTML = '<i data-lucide="menu" class="w-6 h-6"></i>'; |
| lucide.createIcons(); |
| }); |
| }); |
| |
| |
| const revealObserver = new IntersectionObserver((entries) => { |
| entries.forEach((entry, index) => { |
| if (entry.isIntersecting) { |
| setTimeout(() => { |
| entry.target.classList.add('visible'); |
| }, index * 50); |
| revealObserver.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); |
| |
| document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el)); |
| |
| |
| let toastTimeout; |
| function showToast(message) { |
| const toast = document.getElementById('toast'); |
| const toastMsg = document.getElementById('toastMessage'); |
| toastMsg.textContent = message; |
| toast.classList.add('show'); |
| clearTimeout(toastTimeout); |
| toastTimeout = setTimeout(() => { |
| toast.classList.remove('show'); |
| }, 3000); |
| } |
| |
| |
| function copyCSS() { |
| const cssText = document.getElementById('cssVars').textContent; |
| navigator.clipboard.writeText(cssText).then(() => { |
| showToast('CSS variables copied to clipboard'); |
| }).catch(() => { |
| showToast('Copy failed — select manually'); |
| }); |
| } |
| |
| |
| document.querySelectorAll('.color-swatch').forEach(swatch => { |
| swatch.addEventListener('click', (e) => { |
| const hexEl = swatch.querySelector('.font-mono'); |
| if (hexEl) { |
| const hex = hexEl.textContent.trim(); |
| navigator.clipboard.writeText(hex).then(() => { |
| showToast(`Copied ${hex}`); |
| }); |
| } |
| }); |
| }); |
| |
| |
| const navLinks = document.querySelectorAll('nav a[href^="#"]'); |
| const sections = document.querySelectorAll('section[id]'); |
| const navObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const id = entry.target.id; |
| navLinks.forEach(link => { |
| if (link.getAttribute('href') === `#${id}`) { |
| link.classList.add('text-frost'); |
| link.classList.remove('text-pebble'); |
| } else { |
| link.classList.remove('text-frost'); |
| link.classList.add('text-pebble'); |
| } |
| }); |
| } |
| }); |
| }, { threshold: 0.3 }); |
| sections.forEach(sec => navObserver.observe(sec)); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
