jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Videos: font swap from JL's list + lightbox QoL fixes

Browse Source 
Fonts (display/heading only — body untouched):
- Cringe Pit: Bebas Neue → Protest Revolution
- Renegade: Bebas Neue → Ribeye Marrow, Barlow Condensed → Faculty Glyphic (headings), Rambla (body)
- Nomad Soul: Bebas Neue → Trade Winds, Rye → Babylonica
- Hub: Bebas Neue → Workbench

Lightbox fixes (3 collection pages):
- window.onload → DOMContentLoaded (fires before iframes load, fixes slow mobile)
- lightbox-content: max-height 90vh + overflow-y auto (fixes off-screen on small viewports)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-27 15:44:17 +02:00
parent 608077131a
commit 2f5c06fee8
6 changed files with 346 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Videos/JL-design-reference/DESIGN.md Normal file
View File

@@ -0,0 +1,84 @@
# Design System Strategy: Neon-Solar Synthesis
## 1. Overview & Creative North Star: "Electric Eden"
This design system rejects the clinical, rounded aesthetic of modern "friendly" tech. Our Creative North Star is **Electric Eden**: a high-fidelity collision between the decaying neon of a cyberpunk metropolis and the vibrant, untamed vitality of a solar-powered jungle.
We break the "template" look through **aggressive geometry** and **chromatic saturation**. By pairing razor-sharp 0px corners with lush, organic imagery and digital glitch textures, we create a UI that feels both hyper-synthetic and intensely alive. Layouts should favor intentional asymmetry—heavy typographic blocks balanced by expansive negative space—to evoke a high-end editorial feel rather than a standard dashboard.
---
## 2. Colors & Surface Logic
The palette is a high-contrast battle between deep shadows and radioactive highlights.
### The "No-Line" Rule
**Prohibit 1px solid borders for sectioning.** Structure must be defined through background shifts or light-emitting gradients. Use `surface_container_low` against `surface` to define regions. If a boundary feels "lost," do not reach for a stroke; reach for a tonal shift.
### Surface Hierarchy & Nesting
Treat the UI as a series of monolithic slabs.
- **Base Layer:** `surface` (#130827) provides the "midnight" foundation.
- **Primary Content Blocks:** Use `surface_container` (#1f1238) for main modules.
- **Interactive Insets:** Use `surface_container_high` (#261740) for nested elements like input fields or secondary cards.
- **Deep Insets:** Use `surface_container_lowest` (#000000) for "black hole" code blocks or media galleries to create a sense of infinite depth.
### The "Glass & Gradient" Rule
To bridge the gap between "Digital Glitch" and "Solarpunk," utilize semi-transparent layers.
- **Solar Flares:** Apply a linear gradient from `primary` (#ff7cf5) to `secondary` (#00f1fd) at 15% opacity over `surface` to create "light leak" effects.
- **Cyber-Glass:** Use `surface_variant` (#2d1d49) at 92% opacity for floating navigation or overlays. Depth is achieved through tonal contrast, not blur — a slightly lighter background against the void reads as "lifted" without any filter.
---
## 3. Typography: Retro-Future Editorial
Our type system juxtaposes the mechanical with the classical, creating an "archaeology of the future."
* **The Powerhouse (Display & Headlines):** `Space Grotesk` weight 600. Use 3.5rem for hero statements to command the grid.
* **The Human Element (Labels):** `Space Grotesk` weight 300 + letter-spacing 0.12em. Light weight with open tracking reads as the serif "breath" this role needs — editorial without a second typeface.
* **The Utility (Body & Title):** `Space Grotesk` weight 400. Clean and high-legibility. Noto Emoji for any iconographic characters inline.
* **One font, three weights.** The mechanical contrast comes from scale and tracking, not typeface switching.
---
## 4. Elevation & Depth: Tonal Layering
Traditional shadows are too "soft" for this aesthetic. We use light and tone to simulate height.
* **The Layering Principle:** Avoid elevation 1–5. Instead, use the **Stacking Rule**:
- `surface_container_low` = Ground.
- `surface_container` = Raised Platform.
- `surface_container_highest` = Topmost focus.
* **Ambient Shadows:** If a floating element requires a shadow, it must be tinted. Use `surface_tint` (#ff7cf5) at 10% opacity with a blur of 8px and 0px spread. This creates a tight glow rather than a shadow, making the element look like it’s emitting light. Keep blur at or below 8px — the sharpness is the point.
* **The "Ghost Border" Fallback:** If accessibility requires a container boundary, use `outline_variant` (#4e4264) at **15% opacity**. Never use a 100% opaque border.
---
## 5. Components
### Buttons
- **Primary:** Background `primary` (#ff7cf5), Text `on_primary` (#580058). Shape: Strict 0px corners. Hover state: Shift background to `primary_fixed_dim` (#ff1cfe) with a subtle `secondary` (#00f1fd) outer glow.
- **Secondary:** Background `transparent`, Border `outline` (#7d6f94) at 40%, Text `primary`.
- **Tertiary:** Text `tertiary` (#e9ffba), no background. Use for low-priority actions.
### Input Fields
- **Container:** `surface_container_high` (#261740).
- **Bottom Indicator:** Instead of a full border, use a 2px bottom-only stroke in `secondary` (#00f1fd) that expands on focus.
- **Error State:** Use `error` (#ff6e84) for text and a "digital glitch" animation (slight X-axis jitter) on the label.
### Cards & Lists
- **The Divider Ban:** Never use horizontal rules. Use `spacing.6` (2rem) of vertical whitespace to separate list items.
- **Selection:** Use a background of `surface_bright` (#342353) to indicate active states.
### Chips
- **Aesthetic:** `surface_container_highest` background with `on_surface_variant` text. Sharp edges are non-negotiable.
---
## 6. Do’s and Don'ts
### Do:
* **Embrace Asymmetry:** Offset your headline from your body text using the `spacing.10` or `spacing.12` tokens.
* **Mix Textures:** Place a high-resolution photo of lush ferns behind a UI panel with a "scanline" or "noise" overlay.
* **Use Harsh Cuts:** Use `0px` for all containers, buttons, and selection states.
### Don't:
* **Never use Rounded Corners:** Even a 2px radius destroys the "Blade Runner" precision.
* **Avoid Muted Tones:** If the screen looks "dusty," you aren't using enough `secondary` (#00f1fd) or `tertiary` (#e9ffba) highlights.
* **No Standard Drop Shadows:** Do not use black or grey shadows. Only use tinted glows or tonal shifts.
* **Don't Over-Animate:** Use "instant" or "glitch" transitions (0.1s duration). Avoid "bouncy" or "organic" easing; the motion should feel like a high-speed data transfer.

236
Videos/JL-design-reference/code.html Normal file
View File

@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&amp;family=Manrope:wght@200;300;400;500;600;700;800&amp;family=Newsreader:ital,wght@0,200..800;1,200..800&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"background": "#130827",
"error": "#ff6e84",
"tertiary": "#e9ffba",
"primary-fixed-dim": "#ff1cfe",
"on-surface": "#ede0ff",
"secondary-container": "#00696f",
"outline": "#7d6f94",
"inverse-on-surface": "#5c4f72",
"surface-container-high": "#261740",
"on-primary-fixed-variant": "#540054",
"on-secondary-fixed": "#004145",
"surface-tint": "#ff7cf5",
"error-dim": "#d73357",
"secondary": "#00f1fd",
"on-secondary-container": "#e1fdff",
"primary-dim": "#ff51fa",
"on-error-container": "#ffb2b9",
"surface-container-low": "#180c2f",
"tertiary-dim": "#afee00",
"inverse-surface": "#fef7ff",
"on-secondary": "#00565a",
"secondary-fixed-dim": "#00e2ed",
"on-background": "#ede0ff",
"tertiary-fixed-dim": "#afee00",
"primary-fixed": "#ff5af9",
"primary": "#ff7cf5",
"error-container": "#a70138",
"surface-bright": "#342353",
"surface-container-lowest": "#000000",
"on-error": "#490013",
"on-primary": "#580058",
"on-tertiary": "#4a6600",
"on-tertiary-container": "#435d00",
"primary-container": "#ff5af9",
"on-tertiary-fixed": "#344a00",
"on-secondary-fixed-variant": "#006065",
"on-primary-fixed": "#000000",
"on-surface-variant": "#b4a4cc",
"on-tertiary-fixed-variant": "#4b6800",
"surface-container": "#1f1238",
"tertiary-fixed": "#bafd00",
"surface": "#130827",
"surface-variant": "#2d1d49",
"outline-variant": "#4e4264",
"secondary-dim": "#00e2ed",
"tertiary-container": "#bafd00",
"secondary-fixed": "#00f1fd",
"on-primary-container": "#440044",
"surface-dim": "#130827",
"surface-container-highest": "#2d1d49",
"inverse-primary": "#aa00aa"
},
fontFamily: {
"headline": ["Space Grotesk"],
"body": ["Manrope"],
"label": ["Newsreader"]
},
borderRadius: {"DEFAULT": "0px", "lg": "0px", "xl": "0px", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.glitch-overlay {
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
pointer-events: none;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary min-h-screen pb-24">
<!-- TopAppBar -->
<header class="fixed top-0 z-50 w-full bg-[#130827] flex justify-between items-center px-6 py-4 rounded-none border-b-2 border-[#00f1fd]/30">
<div class="flex items-center gap-4">
<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
<span class="material-symbols-outlined" data-icon="menu">menu</span>
</button>
<h1 class="text-2xl font-black italic text-[#ff7cf5] drop-shadow-[0_0_10px_rgba(255,124,245,0.5)] font-['Space_Grotesk'] uppercase tracking-tighter">NEON SOLAR</h1>
</div>
<button class="text-[#ff7cf5] hover:bg-[#261740] hover:text-[#00f1fd] transition-all duration-100 p-1">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
</header>
<!-- Main Canvas -->
<main class="pt-24 px-4 space-y-8 relative overflow-hidden">
<!-- Aesthetic Solar Flare Background -->
<div class="absolute top-0 right-0 w-96 h-96 bg-primary/10 blur-[100px] -z-10 translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-1/4 left-0 w-80 h-80 bg-secondary/10 blur-[80px] -z-10 -translate-x-1/2"></div>
<!-- Featured Section -->
<section class="relative">
<div class="flex items-baseline justify-between mb-4">
<h2 class="font-headline font-bold text-3xl uppercase tracking-tighter text-secondary">LIVE_NOW</h2>
<span class="font-label italic text-tertiary text-lg">Solar Cycle 042</span>
</div>
<div class="relative bg-surface-container aspect-video overflow-hidden border-l-4 border-primary">
<img alt="Cyberpunk sunset" class="w-full h-full object-cover mix-blend-screen opacity-80" data-alt="Hyper-saturated vaporwave sunset with digital scanlines, silhouetted palm trees against a neon pink and cyan sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhcdJEpHv0or4scsO5clCDViEnq9k8gyhINhbczm3UpHHF0ZD44nrINE2dCpKPCvF8ch00p5iS7-zBua_yTdg0Kh6MPzlt6MCwa-kQILOkQZhfJW2NxmdMeW2W2Qr7LgkP9OEg8ahobg6rxsIRq1IkkD_oLJIuptKSRJ7QCyXNpAWwKh12Xzw5rgW0L-dGiO6jlhaA30T2EO_wgpaT6zdrKj0vO2tCWtWZfMnhWuSzcC5pBDgVa30nC5JVbBqDa9wJgoAlYv1zRIc"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
<div class="glitch-overlay absolute inset-0"></div>
<!-- Play Button -->
<button class="absolute inset-0 m-auto w-20 h-20 bg-primary flex items-center justify-center hover:scale-110 active:scale-95 transition-all duration-100 shadow-[0_0_30px_rgba(255,124,245,0.6)]">
<span class="material-symbols-outlined text-on-primary text-5xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<div class="absolute bottom-4 left-4 right-4">
<div class="bg-surface-container-highest/80 backdrop-blur-md p-4 border-t-2 border-secondary/50">
<p class="font-headline font-bold text-xl text-on-surface uppercase tracking-tight">SOLAR_PUNK_INITIATIVE: VOL 01</p>
<p class="font-label text-tertiary text-sm italic">24,892 VIEWERS TUNED IN</p>
</div>
</div>
</div>
</section>
<!-- Video Grid -->
<section class="space-y-6">
<div class="flex items-center gap-4">
<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
<h3 class="font-headline font-medium text-xs tracking-[0.3em] uppercase text-on-surface-variant">ARCHIVE_DEEP_DIVE</h3>
<div class="h-[2px] flex-grow bg-gradient-to-r from-transparent via-outline-variant/30 to-transparent"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Video Card 1 -->
<div class="group relative space-y-3">
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-tertiary">
<img alt="Digital flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Macro shot of bioluminescent tropical leaves with glowing cyan veins in a dark jungle setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4fD2fhqpwAV-Galw5QYrqZl9x-OlV_2JV7Nt87bqiOYIfexNMdfhfkFgESGbYyLE9v8HkLfS3c8N07W4aEqZz9VRAZj3EAwbYi_zFjA8yb_y9wdDSc_6iY-uzeTg_Gtmz7WMWhixSFBb_qiHgvBmaeM2G9LsGnX5KDl7ZJU4cZ36tKaVkmIwSD5CDv6re2QxMgP6hTzf1b349Q7ZSjqaXgqEtDzEAcVNGC8zJikBc1nIS5gj6JBb8pCodU9OVL4fL69n_scV7d1A"/>
<div class="absolute inset-0 bg-secondary/10 mix-blend-overlay"></div>
<button class="absolute inset-0 m-auto w-12 h-12 bg-secondary text-on-secondary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-secondary border border-secondary/30">
04:20
</div>
</div>
<div>
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">GLITCH_JUNGLE_WALKTHROUGH</h4>
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #00FF1D</p>
</div>
</div>
<!-- Video Card 2 -->
<div class="group relative space-y-3">
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
<img alt="Neon rave" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Atmospheric low angle shot of neon lights reflecting on wet pavement with palm tree shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_GeleYh_RHYJA5fioJh4UtqqzFtWo4oZlOtmNTOIDix29-_K-iYPd7xWnW7-4fPkqEZmkdTlGTbjqDXB4vmOUFrOc8_QEFTQXilW5PJt8SacD_nGYrwO3xANClkG-fv2CdTtg9o1iVSKeklkdjRMY290Rs9INH3n5nKvU1NUMB7isKpKHLPumdO-gGSpSIyd91m_8kYt3akx5cdQJlh_x7gmRKjqGs6Qk3VZfbsEkVrT_6BfsQKLWPDRZ2Qzm2grTGUPs8BdQ9Pg"/>
<div class="absolute inset-0 bg-primary/10 mix-blend-overlay"></div>
<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
12:55
</div>
</div>
<div>
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">NEON_BEACH_MEMORIES</h4>
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #FF00F5</p>
</div>
</div>
<!-- Video Card 3 -->
<div class="group relative space-y-3">
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-secondary">
<img alt="Crystal flora" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Digital rendering of crystalline tropical plants reflecting pink and purple laser light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAbkXx1Q1B3j_0mZTiWl77No3wfmL2E7MWWfizSwQUTgBrZLITB1UhwAO1qeShFFECNksh6_T9fKrzCBGBKWk-kzUGRRc-Owu_Rlubuy_Kbazrz3uhXa6m_0TTPey9-3d8OSVVuhxwMCfJG1vjbLOssjRPEVv7rrS5SbP5SpPT8RzxZcS3uu4kxFSR6LPLqPJZWKkwviR6V7KiVY20LOuT0tuaoSXZe63uPO1hzK0Ru_q5c8_JEdnDk3gr856VUbQynEOGIJzCPUc"/>
<div class="absolute inset-0 bg-tertiary/10 mix-blend-overlay"></div>
<button class="absolute inset-0 m-auto w-12 h-12 bg-tertiary text-on-tertiary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-tertiary border border-tertiary/30">
08:12
</div>
</div>
<div>
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-primary transition-colors">BOTANICAL_UPGRADE_V3</h4>
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #E9FFBA</p>
</div>
</div>
<!-- Video Card 4 -->
<div class="group relative space-y-3">
<div class="relative aspect-video bg-surface-container-high overflow-hidden border-b-4 border-primary">
<img alt="Digital sky" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" data-alt="Fast-moving clouds in a hyper-real sky with digital distortion and pixelated artifacts" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEe9Ag_nfP4pjNboSq_yVC-9SXgCRyH0py8lbeb62gsw7yTBO6FGxYnNccVs1ikADIt13vPKf1T11wZ3rISr2xluE7I86TGWRf6wkOe9uHEJZ4ImJE7yTty8U08tELmigbpPkez15yy6Bnsqqix64waUNxkSRtX2O1MUdK6ve2p9D05mk4e071gaMUxzR9F_prGemprPofGnEqcO7FcAfRjcpZcoPYIinAueC9WIyKbctl9xGvBdp1c-VUaV5DtVY4Gbif87WBDss"/>
<button class="absolute inset-0 m-auto w-12 h-12 bg-primary text-on-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-100">
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<div class="absolute top-2 right-2 bg-background/80 px-2 py-1 text-[10px] font-headline font-bold text-primary border border-primary/30">
01:30
</div>
</div>
<div>
<h4 class="font-headline font-bold text-lg uppercase leading-tight group-hover:text-secondary transition-colors">ATMOSPHERIC_DATA_STREAM</h4>
<p class="font-label italic text-sm text-on-surface-variant">Data Segment: #AABBCC</p>
</div>
</div>
</div>
</section>
<!-- Decorative Palm Leaf Overlay (Floating) -->
<div class="fixed bottom-24 -right-12 w-64 h-64 pointer-events-none opacity-20 rotate-12 mix-blend-color-dodge">
<img alt="Palm leaf" class="w-full h-full object-contain filter invert hue-rotate-180" data-alt="Detailed silhouette of a monstera leaf with high contrast highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhwE0zBVGUBSNIgT84a75aq3GGc7HNrI_PK77D5u7CHlzd2fIjK-Ma-VaRNww9cREL4tadifqF4zi2dDMdYtxz1oqwpRi4OjvMqFYEZH5Qo8oaEKdjtBbYRNH0z_y9ZHoSa-pQbMvr-FEOUN-O1axfkZSRpTx1Imo8QNBhCSpV3quOg7JpUL2mcf_MMcvE_Iutkg9vW5JoBC0VBb9xa8I-CwQ00XMUhO5Dzca4Tvgh0POcj4AyJZ60d6cfOEJvzAnlDAAKGt_TuCw"/>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center h-20 px-4 bg-[#1f1238]/90 backdrop-blur-xl z-50 rounded-none border-t-2 border-[#ff7cf5]/20 shadow-[0_-4px_20px_rgba(255,124,245,0.15)]">
<a class="flex flex-col items-center justify-center bg-[#ff7cf5] text-[#130827] rounded-none px-6 py-2 scale-105 transition-all duration-100" href="#">
<span class="material-symbols-outlined" data-icon="grid_view" style="font-variation-settings: 'FILL' 1;">grid_view</span>
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Gallery</span>
</a>
<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
<span class="material-symbols-outlined" data-icon="search">search</span>
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Search</span>
</a>
<a class="flex flex-col items-center justify-center text-[#7d6f94] px-6 py-2 hover:text-[#ff7cf5] hover:bg-[#2d1d49] transition-all duration-100" href="#">
<span class="material-symbols-outlined" data-icon="person">person</span>
<span class="font-['Space_Grotesk'] font-medium text-[10px] uppercase tracking-widest mt-1">Profile</span>
</a>
</nav>
</body></html>

14
Videos/cringe-pit.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE CRINGE PIT // Singular Particular</title> <title>THE CRINGE PIT // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: #04060b; --background: #04060b;
@@ -52,7 +52,7 @@
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Protest Revolution', sans-serif;
font-weight: 400; font-weight: 400;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -134,7 +134,7 @@
} }
.video-title { .video-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Protest Revolution', sans-serif;
font-size: 1.7rem; font-size: 1.7rem;
letter-spacing: 0.06em; letter-spacing: 0.06em;
margin-bottom: var(--space-2); margin-bottom: var(--space-2);
@@ -165,6 +165,8 @@
max-width: 600px; max-width: 600px;
background-color: var(--surface-container-high); background-color: var(--surface-container-high);
padding: var(--space-8); padding: var(--space-8);
max-height: 90vh;
overflow-y: auto;
position: relative; position: relative;
border-left: 3px solid var(--primary); border-left: 3px solid var(--primary);
box-shadow: 0 0 60px rgba(255, 26, 224, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5); box-shadow: 0 0 60px rgba(255, 26, 224, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5);
@@ -192,7 +194,7 @@
color: var(--on-primary); color: var(--on-primary);
border: none; border: none;
padding: var(--space-2) var(--space-6); padding: var(--space-2) var(--space-6);
font-family: 'Bebas Neue', sans-serif; font-family: 'Protest Revolution', sans-serif;
font-size: 1.2rem; font-size: 1.2rem;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; text-transform: uppercase;
@@ -343,11 +345,11 @@
localStorage.setItem('cringe_pit_visited', 'true'); localStorage.setItem('cringe_pit_visited', 'true');
} }
window.onload = () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('cringe_pit_visited')) { if (!localStorage.getItem('cringe_pit_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
} }
}; });
</script> </script>
</body> </body>
</html> </html>

6
Videos/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Videos // Singular Particular</title> <title>Videos // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Workbench&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg: #04060b; --bg: #04060b;
@@ -47,7 +47,7 @@
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Workbench', sans-serif;
font-size: clamp(3.5rem, 12vw, 6rem); font-size: clamp(3.5rem, 12vw, 6rem);
line-height: 0.85; line-height: 0.85;
color: var(--on-surface); color: var(--on-surface);
@@ -127,7 +127,7 @@
} }
.card-title { .card-title {
font-family: 'Bebas Neue', sans-serif; font-family: 'Workbench', sans-serif;
font-size: clamp(1.8rem, 5vw, 2.8rem); font-size: clamp(1.8rem, 5vw, 2.8rem);
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--on-surface); color: var(--on-surface);

12
Videos/nomad-soul.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOUR NOMAD SOUL // Singular Particular</title> <title>YOUR NOMAD SOUL // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rye&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Trade+Winds&family=Babylonica&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: #0a0704; --background: #0a0704;
@@ -60,7 +60,7 @@
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Trade Winds', sans-serif;
font-weight: 400; font-weight: 400;
font-size: clamp(5rem, 20vw, 11rem); font-size: clamp(5rem, 20vw, 11rem);
color: var(--primary); color: var(--primary);
@@ -99,7 +99,7 @@
} }
.entry-title { .entry-title {
font-family: 'Rye', serif; font-family: 'Babylonica', serif;
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 400; font-weight: 400;
margin-bottom: var(--space-8); margin-bottom: var(--space-8);
@@ -212,7 +212,7 @@
} }
.lightbox-quote { .lightbox-quote {
font-family: 'Rye', serif; font-family: 'Babylonica', serif;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.35; line-height: 1.35;
margin-bottom: var(--space-12); margin-bottom: var(--space-12);
@@ -405,11 +405,11 @@
localStorage.setItem('nomad_visited', 'true'); localStorage.setItem('nomad_visited', 'true');
} }
window.onload = () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('nomad_visited')) { if (!localStorage.getItem('nomad_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
} }
}; });
</script> </script>
</body> </body>
</html> </html>

18
Videos/renegade-storyteller.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>THE RENEGADE STORYTELLER // Singular Particular</title> <title>THE RENEGADE STORYTELLER // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow&family=Faculty+Glyphic&family=Rambla:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--background: #04060b; --background: #04060b;
@@ -41,14 +41,14 @@
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--on-surface); color: var(--on-surface);
font-family: 'Barlow Condensed', sans-serif; font-family: 'Rambla', sans-serif;
line-height: 1.5; line-height: 1.5;
overflow-x: hidden; overflow-x: hidden;
min-height: 100vh; min-height: 100vh;
} }
.font-mechanical { .font-mechanical {
font-family: 'Bebas Neue', sans-serif; font-family: 'Ribeye Marrow', sans-serif;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -62,7 +62,7 @@
} }
h1 { h1 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Ribeye Marrow', sans-serif;
font-weight: 400; font-weight: 400;
font-size: clamp(4rem, 16vw, 8rem); font-size: clamp(4rem, 16vw, 8rem);
line-height: 0.8; line-height: 0.8;
@@ -136,7 +136,7 @@
} }
.video-card h2 { .video-card h2 {
font-family: 'Barlow Condensed', sans-serif; font-family: 'Faculty Glyphic', sans-serif;
font-weight: 700; font-weight: 700;
font-size: 1.6rem; font-size: 1.6rem;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -172,7 +172,7 @@
} }
.lightbox-content h3 { .lightbox-content h3 {
font-family: 'Bebas Neue', sans-serif; font-family: 'Ribeye Marrow', sans-serif;
font-size: 1.8rem; font-size: 1.8rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--primary); color: var(--primary);
@@ -180,7 +180,7 @@
} }
.lightbox-quote { .lightbox-quote {
font-family: 'Barlow Condensed', sans-serif; font-family: 'Rambla', sans-serif;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
@@ -395,11 +395,11 @@
localStorage.setItem('renegade_visited', 'true'); localStorage.setItem('renegade_visited', 'true');
} }
window.onload = () => { document.addEventListener('DOMContentLoaded', () => {
if (!localStorage.getItem('renegade_visited')) { if (!localStorage.getItem('renegade_visited')) {
document.getElementById('welcome-gate').classList.add('active'); document.getElementById('welcome-gate').classList.add('active');
} }
}; });
</script> </script>
</body> </body>
</html> </html>