/* site.css — shared stylesheet for the one-pager (bitforgesoftworks.com). Hand-port of design/bitforge-responsive.dc.html: every value below is transcribed from that snapshot (see PLAN.md § Porting notes). Conventions: - Mobile-first. The one breakpoint is 860px (the design's isDesktop test). - The design's `style-hover` attributes become real :hover rules. - Panels use `.is-active` semantics, but are VISIBLE BY DEFAULT until JS adds a `js` class to — so the page is complete without JS (Phase 3 adds it). */ :root { --bg: #04060C; --ink: #ffffff; --text: #e8ecf5; --muted: #8b95ab; --dim: #6b768f; --line: #232c42; --rule: #101725; --dot-off: #2b3450; --blue: #3A66FF; --green: #22DD84; --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); color: var(--text); } a { color: inherit; text-decoration: none; } a:hover { color: #ffffff; } ::selection { background: var(--green); color: var(--bg); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } h1, h2, p { margin: 0; } /* ---------- frame + backdrop ---------- */ .frame { position: relative; width: 100%; height: 100vh; /* fallback: browsers without dvh must not collapse the frame */ height: 100dvh; overflow: hidden; background: var(--bg); } .halo { position: absolute; top: -32vh; left: 50%; transform: translateX(-50%); width: min(1150px, 150vw); height: 70vh; background: radial-gradient(50% 50% at 50% 50%, rgba(58,102,255,.28) 0%, rgba(58,102,255,0) 70%); pointer-events: none; } .line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* ---------- header ---------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(24px, 3.4vw, 34px) clamp(22px, 5vw, 72px); z-index: 6; } .wordmark { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.045em; color: var(--ink); } .wordmark span { color: var(--blue); } .nav-desktop { display: none; align-items: center; gap: 40px; font-size: 15px; color: var(--muted); letter-spacing: -.01em; } .nav-desktop a { transition: color .15s; } .nav-desktop a:hover { color: #fff; } /* ---------- mobile menu (CSS-only, :target) ---------- */ /* The overlay is driven by :target — the burger is a link to #menu and every menu link points elsewhere, so choosing one closes the overlay on its own. No JS, and keyboard-operable. */ .burger { display: flex; flex-direction: column; gap: 5px; padding: 12px; margin: -12px; cursor: pointer; } .burger span { display: block; width: 22px; height: 1.5px; background: #c3cad9; transition: background .15s; } .burger:hover span { background: #fff; } .burger:focus-visible span { background: #fff; } .menu { position: absolute; inset: 0; z-index: 7; background: rgba(4,6,12,.97); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 26px; opacity: 0; visibility: hidden; /* keeps the closed menu out of the tab order */ pointer-events: none; transform: translateY(-10px); transition: opacity .3s ease, visibility .3s, transform .35s cubic-bezier(.22,1,.36,1); } .menu:target { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .menu nav { display: flex; flex-direction: column; gap: 18px; } .menu nav a { font-size: 34px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); } .menu-close { position: absolute; top: 26px; right: 22px; padding: 12px; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; } .menu-close:hover { color: #fff; } .menu-mail { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--dim); } /* ---------- section dots ---------- */ /* Anchors, not buttons: the rail is a working section nav without JS. Phase 3 syncs `.is-active` to the scroll position. */ .dots { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 11px; z-index: 5; } .dot { position: relative; display: block; width: 5px; height: 5px; border-radius: 100px; background: var(--dot-off); transition: all .4s cubic-bezier(.22,1,.36,1); } /* The dot is 5–6px of ink; the hit target has to be much bigger than that. */ .dot::before { content: ''; position: absolute; inset: -9px -12px; } .dot.is-active { width: 16px; } html:not(.js) .dot--0 { width: 16px; } .dot--0.is-active, html:not(.js) .dot--0 { background: var(--text); } .dot--1.is-active { background: #FF8A3D; } .dot--2.is-active { background: var(--green); } .dot--3.is-active { background: var(--text); } /* ---------- scroll container + screens ---------- */ .scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: none; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; z-index: 2; } .scroller::-webkit-scrollbar { display: none; } .screen { height: 100vh; /* fallback for no-dvh browsers */ height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; padding: 0 clamp(22px, 5vw, 72px); } .screen--hero { justify-content: center; } .screen--boostie { justify-content: flex-end; padding-bottom: clamp(110px, 14vh, 130px); } .screen--parcely { justify-content: flex-start; align-items: flex-end; padding-top: clamp(120px, 21vh, 190px); } .screen--work { justify-content: flex-end; padding-bottom: clamp(16px, 2vh, 28px); } /* Panels: visible by default (no-JS / reduced-motion fallback). Once JS marks , only the active panel shows. */ .panel { transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1); } html.js .panel { opacity: 0; transform: translateY(24px); } html.js .panel.is-active { opacity: 1; transform: translateY(0); } .panel--boostie { max-width: 620px; } .panel--parcely { width: 100%; text-align: left; } .panel--work { padding-bottom: 30px; } /* ---------- 01 Hero ---------- */ h1 { font-size: clamp(40px, 7vw, 100px); line-height: .99; font-weight: 700; letter-spacing: -.045em; color: var(--ink); } .grad { background: linear-gradient(90deg, #3A66FF 0%, #A855F7 26%, #FF4D6D 48%, #FF9A2E 70%, #FFD23F 84%, #22DD84 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 36px; } .cta-btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 28px; border: 1px solid var(--line); border-radius: 100px; font-size: 16px; color: var(--text); letter-spacing: -.01em; min-height: 52px; transition: border-color .15s, color .15s; } .cta-btn:hover { border-color: #35415f; color: #fff; } .cta-arrow { color: var(--dim); } .cta-note { font-size: 15px; color: var(--dim); letter-spacing: -.01em; text-align: center; } .follow { display: flex; align-items: center; gap: 12px; margin-top: clamp(56px, 9vh, 104px); font-family: var(--font-mono); font-size: clamp(11px, 1vw, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); cursor: pointer; transition: color .2s; } .follow:hover { color: var(--text); } /* ---------- 02/03 product screens ---------- */ .product-head { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 16px); flex-wrap: wrap; } .product-head--parcely { flex-wrap: nowrap; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; } .tile { display: block; width: clamp(40px, 3.2vw, 46px); height: clamp(40px, 3.2vw, 46px); border-radius: 12px; } /* Parcely ships a bare glyph on transparency with ~14.4% padding per side (it draws at 71.2% of its box), so it needs its own ground — a rounded square on Parcely Ink — and up-sizing inside it. See design/README.md. */ .tile--parcely { flex: none; display: flex; align-items: center; justify-content: center; background: #091828; border-radius: 30%; /* matches boostie-mark.svg's own rx (19/64 ≈ 29.7%) */ } /* 78% of the tile ≈ 1.4 × the 55.5% a full-bleed mark would use, which is what the built-in padding costs — it lands the glyph at Boostie's optical weight. */ .tile--parcely img { width: 78%; height: 78%; } .product-name { font-size: clamp(26px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.035em; color: var(--ink); } .pill { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 100px; white-space: nowrap; } .pill--boostie { color: #FF7A55; border: 1px solid rgba(255,122,85,.3); } .pill--parcely { color: #3DE89B; border: 1px solid rgba(61,232,155,.3); } .screen--boostie h2, .screen--parcely h2 { margin: clamp(22px, 2.6vw, 30px) 0 0; font-size: clamp(32px, 3.9vw, 52px); line-height: 1.07; font-weight: 700; letter-spacing: -.04em; color: var(--ink); text-wrap: pretty; } .screen--boostie p { margin: clamp(16px, 1.8vw, 22px) 0 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--muted); letter-spacing: -.01em; max-width: 520px; text-wrap: pretty; } .parcely-body { margin: 18px 0 0; max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--muted); letter-spacing: -.01em; text-wrap: pretty; } .visit { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(26px, 3vw, 36px); font-size: 16px; color: var(--text); letter-spacing: -.01em; transition: opacity .2s; } .visit:hover { opacity: .7; color: var(--text); } .visit-arrow--boostie { color: #FF8A3D; } .visit-arrow--parcely { color: var(--green); } /* ---------- 04 Work with us ---------- */ .screen--work h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -.042em; color: var(--ink); max-width: 760px; text-wrap: pretty; } .screen--work p { margin: clamp(16px, 1.8vw, 24px) 0 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--muted); letter-spacing: -.01em; max-width: 520px; text-wrap: pretty; } .mail-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; } .mail-btn { display: flex; align-items: center; justify-content: center; padding: 17px 32px; border-radius: 100px; background: #fff; color: var(--bg); font-size: 15px; font-weight: 700; letter-spacing: -.01em; min-height: 54px; overflow-wrap: anywhere; /* last resort below ~300px — never spill the pill */ transition: opacity .2s; } .mail-btn:hover { opacity: .85; color: var(--bg); } /* The address is a fixed ~245px of ink at 15px; under ~344px of viewport it no longer clears the 32px side padding (the frame's overflow:hidden was clipping it rather than scrolling, so it read as fine). Same fix in subpage.css. */ @media (max-width: 359px) { .mail-btn { padding: 17px 16px; font-size: 13.5px; } } .mail-note { font-family: var(--font-mono); font-size: 12px; color: var(--dim); } /* ---------- footer ---------- */ .site-footer { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 0 max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); } .footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; } /* ---------- desktop (the design's isDesktop: window width >= 860px) ---------- */ @media (min-width: 860px) { .nav-desktop { display: flex; } .burger { display: none; } .menu { display: none; } /* Keep the right-aligned Parcely copy clear of the dot rail (and of its invisible hit area): rail inner edge 44 + 22 = 66px, +12px of hit target, which is wider than 5vw until ~1680px. */ .screen { padding-right: max(clamp(22px, 5vw, 72px), 84px); } .dots { right: 44px; gap: 14px; } .dot { width: 6px; height: 6px; } .dot.is-active, html:not(.js) .dot--0 { width: 22px; } .panel--parcely { width: auto; max-width: 620px; text-align: right; } .panel--work { padding-bottom: clamp(28px, 5vh, 60px); } .cta-row { flex-direction: row; align-items: center; gap: 22px; margin-top: 52px; } .cta-btn { justify-content: flex-start; } .cta-note { text-align: left; } .product-head--parcely { flex-direction: row; gap: 16px; } .parcely-body { margin: 22px 0 0 auto; font-size: 18px; } .mail-row { flex-direction: row; align-items: center; gap: 20px; margin-top: 44px; } .mail-btn { font-size: 16px; } .site-footer { flex-direction: row; align-items: center; gap: 0; padding: 20px 0; font-size: 12px; } } /* ---------- reduced motion (PLAN.md A8) ---------- */ @media (prefers-reduced-motion: reduce) { .scroller { scroll-snap-type: none; scroll-behavior: auto; } .panel, html.js .panel, html.js .panel.is-active { opacity: 1; transform: none; transition: none; } .dot, .menu, .cta-btn, .visit, .mail-btn, .follow, .nav-desktop a, .burger span { transition: none; } }