/* ============================================================ WORXIMATE — Shared Design System Single source of truth for all colors, typography, and shared components. Link this file in every page. Usage: ============================================================ */ /* ── COLOR PALETTE ── */ :root { /* Backgrounds */ --navy: #0d1117; /* page background */ --dark: #111820; /* alternate section background */ --panel: #161f2b; /* card / panel background */ --steel: #1e2c3a; /* featured card / hover */ --iron: #2a3a4e; /* borders, subtle elements */ --slate: #3d5468; /* muted borders */ --mist: #6a8aa8; /* secondary text, labels */ --smoke: #94afc8; /* body text */ --bone: #c8dde8; /* primary body text */ --white: #e8f2f8; /* headings, high contrast */ /* Brand — Amber Gold (single source of truth) */ --orange: #f5a623; /* primary brand color */ --orangehi: #ffb94a; /* hover / highlight */ --orange2: #e8920a; /* pressed / active */ --orangedim: #7a4e0a; /* very subtle orange tint */ --orangeglow: rgba(245, 166, 35, 0.10); /* glow backgrounds */ --orangeborder:rgba(245, 166, 35, 0.22); /* orange borders */ /* Borders */ --border: rgba(255, 255, 255, 0.06); --border2: rgba(255, 255, 255, 0.10); /* Status */ --success: #2a9d5c; --danger: #c03030; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE ── */ html { scroll-behavior: smooth; } body { background: var(--navy); color: var(--bone); font-family: 'Barlow', sans-serif; font-weight: 300; line-height: 1.7; overflow-x: hidden; } /* ── GRID TEXTURE ── */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; z-index: 0; } /* ── TYPOGRAPHY ── */ /* Requires Google Fonts in page : Barlow Condensed 700/800/900 Barlow 300/400/500/600 Share Tech Mono */ .font-display { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } .font-mono { font-family: 'Share Tech Mono', monospace; } /* ── SHARED NAV ── */ .wx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 64px; background: rgba(13, 17, 23, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .wx-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.45rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); text-decoration: none; } .wx-logo span { color: var(--orange); } .wx-nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .wx-nav-links a { font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color 0.2s; } .wx-nav-links a:hover { color: var(--white); } .wx-nav-auth { display: flex; align-items: center; gap: 0.8rem; } .wx-nav-divider { width: 1px; height: 20px; background: var(--border2); } /* ── BUTTONS ── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: var(--orange); text-decoration: none; padding: 0.85rem 2rem; border-radius: 3px; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; } .btn-primary:hover { background: var(--orangehi); transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); text-decoration: none; padding: 0.85rem 2rem; border-radius: 3px; border: 1px solid var(--iron); background: transparent; cursor: pointer; transition: all 0.2s; } .btn-secondary:hover { border-color: var(--slate); background: rgba(255,255,255,0.04); } .btn-nav-login { font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); text-decoration: none; padding: 0.45rem 1rem; border: 1px solid var(--iron); border-radius: 3px; transition: all 0.2s; } .btn-nav-login:hover { color: var(--white); border-color: var(--slate); background: rgba(255,255,255,0.04); } .btn-nav-register { font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); text-decoration: none; padding: 0.45rem 1.1rem; background: var(--orange); border-radius: 3px; font-weight: 600; transition: background 0.2s; } .btn-nav-register:hover { background: var(--orangehi); } /* ── SECTION LABELS ── */ .section-label { font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; } .section-label::before { content: ''; width: 24px; height: 1px; background: var(--orange); display: inline-block; } .section-headline { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); } /* ── CARDS ── */ .wx-card { background: var(--panel); border: 1px solid var(--border2); border-radius: 6px; position: relative; overflow: hidden; } .wx-card-top-line::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--orange), transparent); } /* ── FORM ELEMENTS ── */ .wx-form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; } .wx-label { font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); } .wx-input { background: var(--navy); border: 1px solid var(--iron); border-radius: 3px; color: var(--white); font-family: 'Barlow', sans-serif; font-size: 0.95rem; padding: 0.75rem 1rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; width: 100%; } .wx-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.12); } .wx-input::placeholder { color: var(--slate); } /* ── BADGE ── */ .wx-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); padding: 0.4rem 0.8rem; border: 1px solid var(--orangeborder); border-radius: 2px; background: var(--orangeglow); } .wx-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: wx-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes wx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── FOOTER ── */ .wx-footer { background: var(--navy); border-top: 1px solid var(--border); padding: 2.5rem; position: relative; z-index: 1; } .wx-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .wx-footer-links { display: flex; gap: 2rem; list-style: none; } .wx-footer-links a { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); text-decoration: none; transition: color 0.2s; } .wx-footer-links a:hover { color: var(--bone); } .wx-footer-badge { font-family: 'Share Tech Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--iron); } .wx-footer-badge a { color: var(--slate); text-decoration: none; transition: color 0.2s; } .wx-footer-badge a:hover { color: var(--bone); } .wx-footer-copy { font-family: 'Share Tech Mono', monospace; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--iron); } /* ── DIVIDER ── */ .wx-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--slate); font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } .wx-divider::before, .wx-divider::after { content: ''; flex: 1; height: 1px; background: var(--border2); } /* ── UTILITY ── */ .wx-link { color: var(--orange); text-decoration: none; transition: color 0.2s; } .wx-link:hover { color: var(--orangehi); } .wx-text-muted { color: var(--mist); font-size: 0.88rem; } .wx-mono-label { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); } /* ── ANIMATIONS ── */ .fade-up { opacity: 1; transform: translateY(0); transition: opacity 0.65s ease, transform 0.65s ease; } /* ── GOOGLE BUTTON ── */ .btn-google { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.8rem 1.5rem; background: var(--panel); border: 1px solid var(--border2); border-radius: 3px; color: var(--bone); font-family: 'Barlow', sans-serif; font-size: 0.92rem; font-weight: 400; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .btn-google:hover { background: var(--steel); border-color: var(--slate); } /* ── FORGED BY BRANDING ── */ .forged-by { font-family: 'Share Tech Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: #F5A623; display: block; text-align: center; margin-top: 4px; } /* ── RESPONSIVE NAV ── */ @media (max-width: 768px) { .wx-nav { padding: 0 1.5rem; } .wx-nav-links { display: none; } }