/* ============================================================ WARM INDUSTRIAL — Design System v1.0 · Industrial-chic: structural grids, warm grays, editorial type, technical readout accents. Drop this file into any project: Then add class "wi" to (or "wi-root" to a wrapper). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Playfair+Display:ital@0;1&display=swap'); /* ---------- TOKENS ---------- */ :root{ /* color */ --wi-bg:#EBEBE8; /* warm industrial canvas — keep everywhere */ --wi-surface:#F4F4F5; /* raised band / marquee */ --wi-fg:#18181B; /* foreground ink (zinc-900) */ --wi-accent:#BC8A2E; /* warm amber/ochre accent (category labels, ticks) */ --wi-accent-blue:#0066FF; /* alt accent from original text spec */ --wi-border:#D4D4D8; /* hairline (zinc-300) */ --wi-muted:#71717A; /* secondary text (zinc-500) */ --wi-green:#22C55E; /* live / operational */ --wi-grid-line:rgba(24,24,27,0.09); /* type */ --wi-font-sans:'Inter',system-ui,-apple-system,sans-serif; --wi-font-serif:'Playfair Display',Georgia,serif; --wi-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* motion */ --wi-ease:cubic-bezier(0.16,1,0.3,1); --wi-dur:0.6s; /* shape — sharp by default; radius ONLY on buttons & badges */ --wi-radius-btn:8px; --wi-radius-pill:999px; /* layout — 4px grid */ --wi-step:4px; --wi-maxw:1600px; } /* ---------- BASE ---------- */ .wi, .wi-root{ background:var(--wi-bg); color:var(--wi-fg); font-family:var(--wi-font-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wi *,.wi-root *{box-sizing:border-box;} .wi ::selection,.wi-root ::selection{background:var(--wi-accent);color:var(--wi-bg);} /* ---------- LAYOUT HELPERS ---------- */ .wi-container{max-width:var(--wi-maxw);margin:0 auto;padding:0 40px;} .wi-12{display:grid;grid-template-columns:repeat(12,1fr);} .wi-divider{border:0;border-top:1px solid var(--wi-border);margin:0;} .wi-dark{background:var(--wi-fg);color:var(--wi-bg);} .wi-dark .wi-stroke{-webkit-text-stroke-color:var(--wi-bg);} /* 12-column structural grid background (fixed, behind content) */ .wi-grid-bg{position:fixed;inset:0;z-index:0;display:flex;justify-content:center;pointer-events:none;} .wi-grid-bg__inner{width:100%;max-width:var(--wi-maxw);height:100%;display:flex;border-right:1px solid var(--wi-grid-line);} .wi-grid-bg__col{flex:1;border-left:1px solid var(--wi-grid-line);} /* analog fractal-noise overlay — subtle, never dirty */ .wi-noise{ position:fixed;inset:0;z-index:50;pointer-events:none; opacity:0.045;mix-blend-mode:multiply;background-size:220px 220px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- TYPOGRAPHY ---------- */ .wi-display{font-weight:900;font-size:clamp(56px,8.6vw,150px);line-height:0.92;letter-spacing:-0.05em;margin:0;} .wi-h1{font-weight:900;font-size:clamp(40px,5.4vw,84px);line-height:0.98;letter-spacing:-0.04em;margin:0;} .wi-h2{font-weight:900;font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-0.03em;margin:0;} .wi-h3{font-weight:700;font-size:clamp(20px,2.4vw,34px);line-height:1.05;letter-spacing:-0.025em;margin:0;} .wi-body{font-size:16px;line-height:1.5;} .wi-serif{font-family:var(--wi-font-serif);font-style:italic;font-weight:400;} .wi-mono{font-family:var(--wi-font-mono);} /* 10px bold uppercase tracking — for ALL labels & small UI */ .wi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.25em;} .wi-label--wide{letter-spacing:0.3em;} .wi-label--accent{color:var(--wi-accent);} .wi-label--muted{color:var(--wi-muted);} .wi-readout{font-family:var(--wi-font-mono);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--wi-muted);} /* stroke text — outline-only display type for visual lightness */ .wi-stroke{-webkit-text-stroke:1.5px var(--wi-fg);color:transparent;} .wi-stroke--thin{-webkit-text-stroke:1px var(--wi-fg);color:transparent;} /* ---------- BUTTONS ---------- */ .wi-btn{ display:inline-flex;align-items:center;gap:28px; background:var(--wi-fg);border:1px solid var(--wi-fg);color:var(--wi-bg); padding:22px 30px;border-radius:var(--wi-radius-btn); font-family:inherit;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.25em; text-decoration:none;cursor:pointer; transition:background .45s var(--wi-ease),border-color .45s var(--wi-ease),transform .2s var(--wi-ease); } .wi-btn:hover{background:var(--wi-accent);border-color:var(--wi-accent);} .wi-btn:active{transform:translateY(1px);} .wi-btn__arrow{font-size:20px;line-height:1;transition:transform var(--wi-dur) var(--wi-ease);} .wi-btn:hover .wi-btn__arrow{transform:rotate(45deg);} .wi-btn--ghost{background:transparent;color:var(--wi-fg);} .wi-btn--ghost:hover{background:var(--wi-fg);border-color:var(--wi-fg);color:var(--wi-bg);} /* rounded-full pill — nav CTA only */ .wi-pill{ display:inline-flex;align-items:center;gap:10px; border:1px solid var(--wi-fg);border-radius:var(--wi-radius-pill); padding:11px 22px;background:transparent;color:var(--wi-fg); font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.22em; text-decoration:none;cursor:pointer; transition:background .45s var(--wi-ease),color .45s var(--wi-ease),border-color .45s var(--wi-ease); } .wi-pill:hover{background:var(--wi-fg);color:var(--wi-bg);} /* ---------- BADGES & STATUS ---------- */ .wi-badge{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--wi-border);border-radius:var(--wi-radius-pill); padding:5px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.2em; } .wi-badge--accent{border-color:var(--wi-accent);color:var(--wi-accent);} .wi-status{display:inline-flex;align-items:center;gap:11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.25em;} .wi-pulse{width:7px;height:7px;border-radius:999px;background:var(--wi-green);display:inline-block;animation:wi-pulse 2s infinite;} @keyframes wi-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} /* ---------- CARDS (sharp, no radius) ---------- */ .wi-card{background:var(--wi-bg);border:1px solid var(--wi-border);padding:28px;} .wi-card--glass{background:rgba(235,235,232,0.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.55);} /* ---------- MARQUEE ---------- */ .wi-marquee{overflow:hidden;background:var(--wi-surface);border-top:1px solid var(--wi-border);border-bottom:1px solid var(--wi-border);display:flex;align-items:center;height:120px;} .wi-marquee__track{display:flex;flex-shrink:0;white-space:nowrap;animation:wi-marquee 28s linear infinite;} @keyframes wi-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- CLIP-PATH REVEAL (image reveal on row hover) ---------- */ .wi-reveal-row{position:relative;overflow:hidden;} .wi-reveal-row .wi-reveal{clip-path:inset(0 0 0 100%);transition:clip-path var(--wi-dur) var(--wi-ease);filter:grayscale(1);} .wi-reveal-row:hover .wi-reveal{clip-path:inset(0 0 0 0);} /* dark "View" disc — sits on the revealed image, pinned right (NOT a cursor follower) */ .wi-view-disc{ width:78px;height:78px;border-radius:999px;background:var(--wi-fg); border:1px solid rgba(235,235,232,0.22);color:var(--wi-bg); display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1; } /* ---------- PROJECT ROW (index/year — CATEGORY · serif title · tags · desc) ---------- */ .wi-proj{position:relative;border-top:1px solid var(--wi-border);padding:46px 40px;min-height:230px;overflow:hidden;cursor:pointer;} .wi-proj__meta{display:flex;align-items:center;gap:14px;font-family:var(--wi-font-mono);font-size:10px;font-weight:700;letter-spacing:0.2em;color:#a1a1a6;margin-bottom:18px;} .wi-proj__cat{color:var(--wi-accent);letter-spacing:0.24em;} .wi-proj__title{margin:0 0 22px;font-family:var(--wi-font-serif);font-style:italic;font-weight:400;font-size:clamp(34px,4.6vw,62px);letter-spacing:-0.01em;line-height:1;color:#b6b6b1;transition:color .5s var(--wi-ease);} .wi-proj:hover .wi-proj__title{color:var(--wi-fg);} .wi-tag{display:inline-flex;align-items:center;border:1px solid var(--wi-border);border-radius:999px;padding:5px 12px;font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--wi-muted);} /* ---------- SCROLL-IN REVEAL (fade + rise on enter) ---------- */ /* Add class wi-fade to any element; toggle is-in via IntersectionObserver (see snippet in README). */ .wi-fade{opacity:0;transform:translateY(30px);transition:opacity .9s var(--wi-ease),transform .9s var(--wi-ease);} .wi-fade.is-in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.wi-fade{opacity:1;transform:none;transition:none;}} /* ---------- STICKY HEADER ---------- */ .wi-header{ position:sticky;top:0;z-index:40;height:80px; background:rgba(235,235,232,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--wi-border); } /* ---------- LOGO ---------- */ .wi-logo{display:inline-flex;align-items:baseline;gap:5px;} .wi-logo__serif{font-family:var(--wi-font-serif);font-style:italic;font-weight:400;font-size:24px;letter-spacing:-0.01em;} .wi-logo__sans{font-weight:900;font-size:17px;letter-spacing:0.08em;} /* ---------- DOC-ONLY (reference page) ---------- */ .wi-code{background:var(--wi-fg);color:var(--wi-bg);font-family:var(--wi-font-mono);font-size:12px;line-height:1.7;padding:18px 20px;overflow:auto;margin:0;} .wi-code .c{color:var(--wi-accent);} .wi-swatch{height:96px;border:1px solid var(--wi-border);}