/* ═══════════════════════════════════════════════════ SYSTEM — Design Language by Gualo Hawes Version 0.1 — April 2026 Apply to any product. Import this file. Set data-theme="light" (default) or "dark" on . ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:wght@400&display=swap'); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ─── LIGHT MODE (NEON SILVER — DEFAULT) ─── */ :root, [data-theme="light"] { --bg: #C7CCD1; --surface: #BFC4CA; --elevated: #B5BAC1; --muted: #A0A6AE; --tertiary: #7D838C; --secondary: #555B64; --primary: #3A3F47; --heading: #1A1D23; --contrast: #0A0C10; --card-bg: rgba(0,0,0,0.03); --gif-opacity: 0.08; --gif-blend: multiply; --noise-opacity: 0.04; } /* ─── DARK MODE ─── */ [data-theme="dark"] { --bg: #0A0A0C; --surface: #111115; --elevated: #1A1A20; --muted: #28282F; --tertiary: #45454F; --secondary: #7A7A8C; --primary: #B0B0C4; --heading: #DCDCE8; --contrast: #F0F0F8; --card-bg: rgba(255,255,255,0.02); --gif-opacity: 0.05; --gif-blend: screen; --noise-opacity: 0.03; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--primary); font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 1.5; overflow-x: hidden; min-height: 100vh; transition: background 500ms ease, color 500ms ease; } /* ─── NOISE GRAIN ─── */ body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--noise-opacity); mix-blend-mode: overlay; 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.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 512px 512px; } /* ─── TYPOGRAPHY ─── */ .mono { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tertiary); } .bracket { color: var(--secondary); } .display { font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; color: var(--contrast); line-height: 0.82; } .heading { font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: var(--contrast); } .body-text { font-size: 15px; color: var(--secondary); letter-spacing: 0.02em; } /* ─── GIF LAYERS ─── */ .gif-strip { position: relative; width: 100%; height: 120px; overflow: hidden; } .gif-strip img { position: absolute; top: 50%; left: 0; width: 100%; height: 200%; object-fit: cover; transform: translateY(-50%); filter: grayscale(1) contrast(1.2); opacity: var(--gif-opacity); mix-blend-mode: var(--gif-blend); transition: opacity 500ms ease; } .gif-strip-tall { height: 240px; } .gif-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .gif-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: var(--gif-opacity); mix-blend-mode: var(--gif-blend); transition: opacity 500ms ease; } /* ─── META BAR ─── */ .sys-meta-bar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 28px 48px; border-bottom: 1px solid var(--muted); } .sys-meta-bar .meta-left, .sys-meta-bar .meta-right { display: flex; gap: 20px; align-items: center; } .dotted-rule { flex: 1; border-bottom: 1px dotted var(--muted); margin: 0 20px; min-width: 40px; } /* ─── RULED METADATA LINES ─── */ .ruled-line { display: flex; align-items: center; margin-bottom: 5px; } .ruled-line .key { color: var(--secondary); min-width: 100px; } .ruled-line .dots { flex: 1; border-bottom: 1px dotted var(--muted); margin: 0 12px; } .ruled-line .value { color: var(--secondary); } /* ─── BUTTONS ─── */ .sys-btn { display: inline-block; font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 40px; cursor: pointer; background: transparent; transition: all 350ms ease; } .sys-btn-primary { border: 1px solid var(--contrast); color: var(--contrast); } .sys-btn-primary:hover { background: var(--contrast); color: var(--bg); } .sys-btn-secondary { border: 1px solid var(--muted); color: var(--primary); } .sys-btn-secondary:hover { color: var(--contrast); border-color: var(--secondary); } .sys-btn-ghost { border: none; color: var(--tertiary); } .sys-btn-ghost:hover { color: var(--primary); } .sys-btn-small { font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; background: transparent; border: 1px solid var(--muted); color: var(--secondary); cursor: pointer; transition: all 400ms ease; } .sys-btn-small:hover { color: var(--contrast); border-color: var(--secondary); } /* ─── INPUTS ─── */ .sys-input { background: transparent; border: none; border-bottom: 1px solid var(--muted); color: var(--primary); font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; padding: 12px 0; outline: none; transition: border-color 300ms ease; } .sys-input::placeholder { color: var(--tertiary); } .sys-input:focus { border-bottom-color: var(--contrast); } /* ─── CARDS ─── */ .sys-card { background: var(--card-bg); border: 1px solid var(--muted); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; transition: all 400ms ease; cursor: pointer; } .sys-card:hover { background: var(--elevated); border-color: var(--secondary); } /* ─── DIVIDERS ─── */ .sys-divider { width: 100%; height: 1px; background: var(--muted); } /* ─── FOOTER ─── */ .sys-footer { position: relative; padding: 48px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--muted); z-index: 2; } /* ─── ANIMATIONS ─── */ .fade-in { opacity: 0; animation: sysIn 600ms ease-out forwards; } .d1 { animation-delay: 100ms; } .d2 { animation-delay: 350ms; } .d3 { animation-delay: 600ms; } .d4 { animation-delay: 850ms; } @keyframes sysIn { from { opacity: 0; } to { opacity: 1; } }