/* ============================================================ 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; } /* ── FOUNDING HOOK CARD ── */ /* Added 2026-09-09. Sits ABOVE the $397 card on /pricing and above the $397 line on the homepage. THE REASON, so it is not "tidied" back below later: $397 as the first number a contractor meets is a FILTER — he has no reason to keep reading — while founding at $99 is a HOOK. ⚠️ IT LIVES IN THE SHARED STYLESHEET ON PURPOSE. Both pages link worximate.css, so this is ONE definition with TWO consumers rather than two copies that drift apart. That is the same "one value, two places" class CURRENT_STATE item 154 tracks — avoided here rather than added to. ⚠️ DELIBERATELY NOT SHAPED LIKE A PRICE CARD, and the contrast is the whole design: the $397 card is 460px on --steel with a full orange hairline border and a 2px rule across the TOP, built around a large numeral. This is WIDER and SHORTER, on --panel, with NO full border and a 2px rule down the LEFT, at prose type scale. Different silhouette, rule on a different edge — so it reads as an OFFER attached to the price, not a second price competing with it. (The left-rule callout is not a new invention: it is the idiom the deleted Beta Pricing block used, returning here with its one surviving user.) ⛔ NO PER-NUMBER EMPHASIS, AND THIS IS LOAD-BEARING RATHER THAN TASTE. $99 and $397 are the same weight and the same colour. Colouring $99 alone would make founding read as the headline price, which is exactly what the copy exists to prevent: $397 must stay the stated list price so that it never lands as a price INCREASE the day the ten spots are gone. */ /* ⚠️ NOT CENTRED, AND THAT IS THE CONVENTION RATHER THAN AN OVERSIGHT (changed 2026-09-10). It was `margin: 0 auto 2.25rem` until the visual check: on both pages the section label and heading are LEFT-aligned, so an auto-centred card hung 220px to their right and read as unfinished. Centring on this site is a TERMINAL-CTA idiom — #footer-cta on /pricing and #cta on the homepage, both "you have read it all, here is the button" — and this card is not that. ⚠️ THIS RULE SERVES BOTH PUBLIC PAGES. The bottom margin is unchanged; only the horizontal auto went, so nothing about vertical rhythm moved. 📎 CURRENT_STATE item 162. */ .fh-hook { max-width: 640px; margin: 0 0 2.25rem; padding: 1.35rem 1.6rem; background: var(--panel); border-left: 2px solid var(--orange); border-radius: 0 4px 4px 0; } /* The scarcity label, added 2026-09-10. The hook STATED a limit and never showed one: "ten" was a spelled-out quantity buried mid-sentence in prose type, so the constraint was asserted and never seen. 📎 CURRENT_STATE item 163. ⚠️ THIS IS A VARIANT OF THE LABEL IDIOM, NOT .section-label REUSED, AND THE DIFFERENCE IS ONE PROPERTY: .section-label carries a ::before 24px amber dash, which is the SECTION-level marker. Reusing it here would put a second dashed amber label ~46px below the section's own dashed amber label — two competing labels, which is exactly the failure this card must avoid. The typography is otherwise identical: Share Tech Mono, uppercase, 0.18em tracking, --orange. ▶ THE SIZE FOLLOWS THE PAGE'S *CARD*-LABEL PRECEDENT rather than its section-label one: .tier-badge inside the $397 card is 0.57rem and amber when featured. A card label is a different thing from a section label and this site already draws that distinction. ▶ margin-bottom is 0.7rem, NOT .tier-badge's 1rem: the hook is a tighter card (1.35rem padding against 2.5rem) whose internal gaps are 0.55rem and 0.95rem, so 1rem would make the topmost element's gap the loosest space in a compact card. ⚠️ IT LIVES HERE, WITH ITS .fh-* SIBLINGS, BECAUSE THE HOOK RENDERS ON BOTH PUBLIC PAGES — one definition, two consumers, same reason the rest of the family is here. */ .fh-label { font-family: 'Share Tech Mono', monospace; font-size: 0.57rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin: 0 0 0.7rem; } .fh-lead { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(1.15rem, 2.6vw, 1.4rem); letter-spacing: 0.02em; line-height: 1.25; color: var(--white); margin: 0 0 0.55rem; } .fh-offer { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 0.92rem; line-height: 1.65; color: var(--bone); margin: 0 0 0.95rem; } .fh-link { display: inline-block; font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); text-decoration: none; border-bottom: 1px solid var(--orangeborder); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } .fh-link:hover { color: var(--orangehi); border-bottom-color: var(--orange); } /* Nothing here is fixed-width: at 380px the card fills its gutter and every line wraps, so it cannot produce a horizontal scrollbar. Only the padding tightens. */ @media (max-width: 640px) { .fh-hook { padding: 1.15rem 1.2rem; } } /* ── RESPONSIVE NAV ── */ @media (max-width: 768px) { .wx-nav { padding: 0 1.5rem; } /* `.wx-nav-links { display: none }` lived here and is gone. It was ungated by `js-nav`, so it hid every nav destination below 768px whether or not the disclosure script ran — verified live: at 375px with JS off there was no toggle AND no links. Removing it is what makes the fail-open claim in nav-toggle.js true. Collapsing is now the shared disclosure at 900px. */ }