/* ============ Self-hosted font fallback (D-3) ============ */ /* SITE-1 loads these from Google Fonts in . These local @font-face rules are the offline/blocked fallback (latin subset, ~236KB). */ @font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bebasneue-400.woff2') format('woff2')} @font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dmmono-400.woff2') format('woff2')} @font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dmmono-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-700.woff2') format('woff2')} /* ============ SITE-3 Design Tokens ============ */ :root{ --bg:#1a1a1e; --bg-2:#202026; --bg-3:#26262e; --border:#ffffff10; --border-mid:#ffffff1a; --text:#f0f0f4; --text-mid:#c0c0cc; --text-dim:#606070; --accent:#8B5CF6; --accent-dim:#8B5CF618; --accent-border:#8B5CF645; --green:#22c55e; --sans:'Inter',system-ui,sans-serif; --mono:'DM Mono',monospace; --display:'Bebas Neue',sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--text); font-family:var(--sans);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} .accent{color:var(--accent)} /* ============ Buttons ============ */ .btn{ display:inline-block;font:600 13px/1 var(--sans); padding:10px 16px;border-radius:4px;border:1px solid transparent; transition:all 150ms ease;cursor:pointer;white-space:nowrap; } .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:#7c4ddc} .btn-ghost{background:transparent;color:var(--text-mid);border-color:var(--border-mid)} .btn-ghost:hover{color:var(--text);border-color:var(--accent-border)} .btn-lg{padding:14px 22px;font-size:14px} [aria-disabled="true"]{opacity:.45;pointer-events:none} /* ============ SITE-4 Nav ============ */ .nav{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid var(--border)} .nav-brand{ height:56px;display:flex;align-items:center;justify-content:space-between; padding:0 24px;border-bottom:1px solid var(--border); } .brand{display:flex;align-items:center;gap:10px} .wordmark{font-family:var(--display);font-size:22px;letter-spacing:2px} .nav-actions{display:flex;gap:10px;align-items:center} .nav-tabs{height:44px;display:flex;align-items:stretch;padding:0 24px;gap:4px} .nav-tab{position:relative;display:flex;align-items:center} .nav-tab>a{ display:flex;align-items:center;height:100%;padding:0 14px; font-size:13px;color:var(--text-mid);text-transform:uppercase; letter-spacing:.04em;border-bottom:2px solid transparent;transition:all 150ms ease; } .nav-tab>a:hover,.nav-tab.active>a{color:var(--text);border-bottom-color:var(--accent)} /* dropdowns */ .dropdown{ position:absolute;top:100%;left:0; background:var(--bg-2);border-top:2px solid var(--accent); min-width:560px;padding:24px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:all 150ms ease;box-shadow:0 20px 40px #0008; } .nav-tab.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)} .dd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px} .dd-head{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:14px} .dd-prod{display:block;padding:10px 0;border-bottom:1px solid var(--border)} .dd-prod.is-soon{opacity:.5;pointer-events:none} .dd-name{display:block;font-weight:600;font-size:14px} .dd-desc{display:block;font-size:12px;color:var(--text-dim);margin:3px 0} .dd-price{font-size:12px;color:var(--text-mid)} .dd-price.tag-free{color:var(--green)} .dd-link{display:block;padding:8px 0;font-size:13px;color:var(--text-mid)} .dd-link:hover{color:var(--accent)} .dd-list{display:flex;flex-direction:column} .dd-row{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px} .dd-row:hover{color:var(--accent)} .dd-rd{color:var(--text-dim);font-size:12px;text-align:right} /* ============ SITE-5 Hero ============ */ /* Wider 60/40 split so the single-line headline has room to breathe (user: "don't be afraid to take up space"). */ .hero{display:grid;grid-template-columns:60% 40%;min-height:560px;border-bottom:1px solid var(--border)} /* Hero content: - left/right padding floor 56px (>= the 48px minimum), no left clipping - vertically centred in the hero height; generous top/bottom padding - children span the column (no narrow cap) so the wide single-line headline and the body align to the same generous measure */ .hero-content{ padding:72px clamp(56px,5vw,80px); display:flex;flex-direction:column;justify-content:center;align-items:flex-start; min-width:0; /* allow shrink so children never overflow-clip */ } .hero-content>*{width:100%} /* .eyebrow removed per REV-7 (eyebrow line + accent rule deleted) */ /* Single line: nowrap + a clamp tuned so it never overflows the 60% column down to ~960px, scaling up to take space on wide screens. */ .headline{ font-family:var(--display);font-size:clamp(40px,4.6vw,76px); line-height:1;letter-spacing:1px;white-space:nowrap; } /* Hero body widened to match the single-line headline's measure so it doesn't read as a narrow column under a wide title. */ .hero-body{font-size:16px;color:var(--text-mid);line-height:1.8;max-width:560px;margin:22px 0 30px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap} .hero-note{margin-top:18px;font:11px var(--mono);color:var(--text-dim)} /* Hero visual — panel bg is exactly #0a0a0c. Hero image (formsCADhero2) recolored so its own background is also #0a0a0c → zero seam. No frame: the inset border/shadow were removed so the drawing fills the panel. */ .hero-visual{ position:relative;background:#0a0a0c; display:flex;align-items:stretch;justify-content:stretch; padding:48px;overflow:hidden; } /* .hero-grid-overlay removed — orphaned after the framed box was dropped in §12 (was the drafting-board backing for the old frame). Near-invisible on #0a0a0c and serving no purpose; deleted with its HTML element. */ /* Inset border/shadow/padding removed (user) — the drawing fills the panel cleanly. Image bg already matches the panel (#0a0a0c) so there is no frame and no visible seam. */ .hero-visual picture{ position:relative;display:flex;flex:1; align-items:center;justify-content:center; background:#0a0a0c; } .hero-visual img{ display:block;width:100%;height:auto;max-height:100%; object-fit:contain;border:0;border-radius:2px; } /* ============ SITE-6 Ticker ============ */ .ticker{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap} /* Seamless infinite loop: two identical item sets, animate 0 -> -50%. Spacing is per-item (padding-right) NOT flex `gap`, so the boundary between the duplicate sets is identical to every internal gap — no jump/seam at wrap. translateZ(0) keeps it GPU-smooth. */ .ticker-track{ display:inline-flex;padding:14px 0; animation:ticker 38s linear infinite; will-change:transform;transform:translateZ(0); } .ticker-track span{font-size:13px;color:var(--text-mid);letter-spacing:.04em;padding-right:48px;flex:none} .ticker-track b{color:var(--accent);margin-right:6px} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ Sections ============ */ .section{padding:80px 48px;max-width:1280px;margin:0 auto} .section-alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);max-width:none} .section-alt>.two-col,.section-alt>.support-grid,.section-alt>.big-title{max-width:1200px;margin-left:auto;margin-right:auto} .section-narrow{max-width:800px} .sec-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:48px} .sec-no{font-size:13px;color:var(--text-dim)} .sec-title{font-family:var(--display);font-size:36px;letter-spacing:2px;flex:1} .sec-link{font-size:13px;color:var(--text-mid)} .sec-link:hover{color:var(--accent)} .sec-label{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:14px} .sec-label.center{text-align:center} .big-title{font-family:var(--display);font-size:36px;letter-spacing:2px;line-height:1;margin-bottom:24px} .big-title.center{text-align:center} .prose{font-size:13px;color:var(--text-mid);line-height:1.9;max-width:480px;margin-bottom:18px} .prose.center{margin:0 auto 32px;text-align:center} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} /* ============ SITE-7 Products ============ */ .prod-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border)} .prod-card{background:var(--bg);padding:36px;border-top:2px solid transparent;transition:border-color 150ms ease} .prod-card:hover{border-top-color:var(--accent)} .prod-card.is-soon{opacity:.5} .prod-icon{width:40px;height:40px;background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden} .prod-icon img{width:100%;height:100%} .tag{display:inline-block;font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-mid);margin-bottom:12px} .tag-free{color:var(--green)} .prod-name{font-size:17px;font-weight:600;margin-bottom:10px} .prod-desc{font-size:12px;color:var(--text-mid);line-height:1.7;margin-bottom:24px} .prod-price{font-family:var(--display);font-size:36px} .prod-note{font:10px var(--mono);text-transform:uppercase;color:var(--text-dim);margin-top:4px} /* ============ SITE-8 Community steps ============ */ .steps{display:flex;flex-direction:column;gap:1px;background:var(--border)} .step{background:var(--bg-2);display:flex;gap:18px;padding:22px} .step-no{font-family:var(--display);font-size:28px;color:var(--accent);line-height:1} .step-title{font-size:13px;font-weight:600;margin-bottom:5px} .step-body{font-size:12px;color:var(--text-mid);line-height:1.6} /* ============ SITE-9 Comparison ============ */ .compare-headline{font-family:var(--display);font-size:clamp(36px,4vw,56px);letter-spacing:2px;line-height:.95;margin-bottom:40px} .table-wrap{overflow-x:auto} .compare{width:100%;border-collapse:collapse;min-width:640px} .compare th{font:400 10px var(--mono);text-transform:uppercase;color:var(--text-dim);padding:14px 12px;text-align:center;border-bottom:1px solid var(--border-mid)} .compare th:first-child,.compare td:first-child{text-align:left} .compare td{padding:14px 12px;text-align:center;font-size:13px;border-bottom:1px solid var(--border)} .compare tbody tr:hover{background:#ffffff03} .compare .yes{color:var(--green)} .compare .no{color:var(--text-dim)} .compare .price-them{font-family:var(--display);font-size:16px;color:var(--text-dim)} .compare .price-us{font-family:var(--display);font-size:16px;color:var(--accent)} /* ============ SITE-14 Pricing ============ */ .price-rows{margin-top:36px} .price-row{display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--border)} .price-row.is-soon{opacity:.5} .pr-name{font-family:var(--display);font-size:20px;letter-spacing:1px} .pr-note{font-size:12px;color:var(--text-dim);text-align:center} /* ============ SITE-10 Support ============ */ .support-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);margin-top:40px} .support-card{background:var(--bg);padding:36px;border-left:3px solid var(--accent)} .support-card h3{font-size:15px;font-weight:600;margin-bottom:12px} .support-card p{font-size:12px;color:var(--text-mid);line-height:1.7;margin-bottom:14px} .support-card a{display:block;font:12px var(--mono);color:var(--accent);margin-top:4px} /* ============ SITE-11 Philosophy ============ */ .quote{font-family:var(--display);font-size:clamp(28px,3vw,42px);letter-spacing:1px;line-height:1.1;margin-bottom:24px} .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)} .stat{background:var(--bg);padding:36px} .stat-num{font-family:var(--display);font-size:44px;line-height:1} .stat-label{font:10px var(--mono);text-transform:uppercase;color:var(--text-dim);margin-top:8px} /* ============ SITE-12 Footer ============ */ .footer{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--border);padding:40px 48px} .foot-brand{font-family:var(--display);font-size:18px;letter-spacing:2px;color:var(--text-dim)} .foot-links{display:flex;gap:18px;flex-wrap:wrap} .foot-links a{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em} .foot-links a:hover{color:var(--text-mid)} .foot-tag{font:10px var(--mono);color:var(--text-dim)} /* ============ SITE-13.6 Mobile (<=768px) ============ */ @media (max-width:768px){ .nav-brand{padding:0 16px} .nav-tabs{padding:0 8px;overflow-x:auto} .dropdown{position:fixed;left:0;right:0;min-width:0;width:100%;box-shadow:none} .dd-grid{grid-template-columns:1fr;gap:20px} .hero{grid-template-columns:1fr} /* keep the >=48px left-padding floor even on mobile (task: any width) */ .hero-content{padding:48px;order:1} .hero-visual{order:2;padding:24px} .section{padding:56px 24px} .section-alt{padding:56px 24px} .two-col{grid-template-columns:1fr;gap:40px} .prod-grid{grid-template-columns:1fr} .support-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .price-row{grid-template-columns:1fr;gap:8px;text-align:left} .pr-note{text-align:left} .footer{padding:32px 24px;flex-direction:column;align-items:flex-start} .compare{min-width:560px} }