Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252@import url("/iosekeley/font.css");@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap");@import "tailwindcss";@import "./ezio.css";@import "tw-animate-css";@import "shadcn/tailwind.css";
@theme inline { --radius: 0.5rem; --font-sans: "Atkinson Hyperlegible Next", system-ui, sans-serif; --font-mono: "IoskeleyMono", monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6);}
@layer base { *, *::before, *::after { box-sizing: border-box; @apply border-border outline-ring/50; } html { scroll-behavior: smooth; overflow-x: hidden; @apply font-sans; } body { margin: 0; line-height: 1.6; @apply bg-background text-foreground; }}
/* ── brand tokens ───────────────────────────────── */:root { --sp-amber: hsl(32 85% 55%); --sp-amber-hover: hsl(32 90% 62%); --sp-max: 1300px; --sp-px: clamp(1.25rem, 5vw, 3.5rem);}
/* ── grain overlay (layout-level, fixed) ────────── */.sp-grain { position: fixed; inset: -100%; width: 300%; height: 300%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; opacity: 0.038; pointer-events: none; z-index: 9998; animation: grain-shift 10s steps(10) infinite;}
@keyframes grain-shift { 0% { transform: translate(0, 0); } 10% { transform: translate(-2%, -3%); } 20% { transform: translate(3%, 1%); } 30% { transform: translate(-1%, 4%); } 40% { transform: translate(2%, -2%); } 50% { transform: translate(-3%, 3%); } 60% { transform: translate(1%, -1%); } 70% { transform: translate(-2%, 2%); } 80% { transform: translate(3%, -3%); } 90% { transform: translate(-1%, 1%); } 100% { transform: translate(0, 0); }}
/* ── shared section tag ─────────────────────────── */.sp-section-tag { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.75rem;}.sp-num { font-family: "0xProto", monospace; font-size: 0.65rem; color: var(--muted-foreground); letter-spacing: 0.08em; flex-shrink: 0;}.sp-rule-line { display: block; flex-shrink: 0; width: clamp(2rem, 4vw, 3.5rem); height: 1px; background: var(--border);}.sp-tag-text { font-family: "0xProto", monospace; font-size: 0.65rem; color: var(--muted-foreground); letter-spacing: 0.06em;}
/* ── reveal animation ───────────────────────────── */.sp-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);}.sp-reveal.visible { opacity: 1; transform: translateY(0);}
/* ── shared section wrapper ─────────────────────── */.sp-section-inner { max-width: var(--sp-max); margin: 0 auto; padding-left: var(--sp-px); padding-right: var(--sp-px); position: relative; z-index: 1;}
/* ── buttons ────────────────────────────────────── */.sp-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.25rem; background: var(--sp-amber); color: hsl(32 40% 12%); font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; border-radius: 4px; border: none; cursor: pointer; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; transition: background 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;}.sp-cta-btn:hover { background: var(--sp-amber-hover); transform: translateY(-1px); box-shadow: 0 4px 18px hsl(32 85% 55% / 0.3);}.sp-cta-btn.lg { padding: 0.8rem 1.75rem; font-size: 0.95rem;}
.sp-ghost-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.75rem; background: transparent; color: var(--foreground); font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 0.95rem; font-weight: 500; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease;}.sp-ghost-btn:hover { background: var(--secondary); border-color: var(--muted-foreground); transform: translateY(-1px);}
/* ── Strichpunkt Sans width axis ─────────────────── *//* font-weight utilities (font-thin → font-black) control wght axis natively */@utility sp-normal-width { font-variation-settings: "wdth" 100;}@utility sp-wide { font-variation-settings: "wdth" 133;}@utility sp-expanded { font-variation-settings: "wdth" 166;}@utility sp-ultrawide { font-variation-settings: "wdth" 200;}