/* Forge — marketing site v2. Simplified hero, real nav, less "template" chrome. */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip (not hidden) — `hidden` on the root makes iOS Safari collapse content into a narrow left-hugging column with dead space on the right. `clip` gives the same overflow backstop without the scroll-container squeeze. */ html { scroll-behavior: smooth; overflow-x: clip; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, system-ui, sans-serif; background: #0B1710; color: #1A1814; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: #1E4D35; text-decoration: none; } a:hover { color: #2E6B49; } button, input { font-family: inherit; } .shell { max-width: 480px; margin: 0 auto; padding: 0 24px; } /* reveal-on-scroll */ .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); } .rv.in { opacity: 1; transform: none; } .rv.d1 { transition-delay: 0.1s; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } .h-title span i, .h-kicker, .h-sub, .hero-peek, .cta-line, .tick-track, .m-front { animation: none !important; opacity: 1 !important; transform: none !important; } .route-line, .mark-duo, .cta-line .cta-more { animation: none !important; } .dock { transition: none; } .cta-field { animation: none !important; } } /* ═══════════ fixed top bar ═══════════ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; transition: background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .topbar.scrolled { background: rgba(7,20,13,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(244,242,237,0.08); } .topbar .bar { max-width: 480px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 9px; } .brand .wordmark { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: #F4F2ED; } .menu-btn { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 4px; background: none; border: none; cursor: pointer; color: #F4F2ED; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .menu-btn .lines { display: flex; flex-direction: column; gap: 4px; } .menu-btn .lines span { display: block; width: 20px; height: 2px; background: #F4F2ED; border-radius: 1px; transition: transform 0.3s cubic-bezier(.16,1,.3,1), opacity 0.2s; } /* ═══════════ floating dock nav — app tab-bar, not a TOC ═══════════ */ .dock { position: fixed; left: 50%; bottom: 18px; z-index: 95; transform: translate(-50%, 90px); display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 9999px; background: rgba(11,23,16,0.86); border: 1px solid rgba(244,242,237,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 44px rgba(0,0,0,0.4); transition: transform 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; opacity: 0; } .dock.show { transform: translate(-50%, 0); opacity: 1; } .dock a { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 21px; color: rgba(237,236,234,0.55); font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; transition: background 0.3s ease, color 0.3s ease; white-space: nowrap; } .dock a:hover { color: #F4F2ED; } .dock a span { display: none; } .dock a.active { background: rgba(123,194,149,0.16); color: #9ED4B4; } .dock a.active span { display: inline; } @media (max-width: 359px) { .dock a { padding: 0 12px; } } /* ═══════════ hero — stripped down ═══════════ */ .hero { position: relative; min-height: 100vh; /* fallback for browsers without small-viewport units */ min-height: 100svh; /* small viewport height — survives iOS Safari's collapsing chrome */ background: linear-gradient(168deg, #1C4530 0%, #123322 44%, #0B1F14 78%, #07140D 100%); overflow: hidden; display: flex; flex-direction: column; } /* double mark — rides high beside the headline, richer color, echo readable */ .mark-duo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mark-duo svg { position: absolute; top: 38%; right: -130px; width: 460px; height: 460px; } .m-echo { transform: translate(44px, -44px); } .m-echo path { fill: rgba(244,242,237,0.09); } .m-front { filter: drop-shadow(0 22px 44px rgba(0,0,0,0.45)); animation: markDrift 1.1s cubic-bezier(.16,1,.3,1) 0.5s both; } @keyframes markDrift { from { opacity: 0; transform: translate(60px, 30px); } to { opacity: 1; transform: none; } } .hero-ghost { display: none; } .hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: radial-gradient(90% 60% at 18% 8%, rgba(123,194,149,0.13), transparent 60%), radial-gradient(70% 50% at 90% 92%, rgba(0,0,0,0.5), transparent 65%); } .hero-inner { position: relative; display: flex; flex-direction: column; flex: 1; width: 100%; padding-top: 76px; padding-bottom: 30px; } .hero-main { display: flex; flex-direction: column; justify-content: flex-start; } .h-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; color: #9ED4B4; animation: riseIn 0.6s cubic-bezier(.16,1,.3,1) 0.9s both; } .h-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: #7BC295; animation: pulseDot 2.2s ease-in-out infinite; } @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* Tight base line-height for the punchy display look; the descender-line gap is corrected optically per-line below (uniform line-height would leave the gap after "people." reading tighter than the rest because the p-tail fills it). */ .h-title { margin: 0; font-size: clamp(46px, 12.5vw, 58px); line-height: 1.06; font-weight: 800; letter-spacing: -2px; color: #F4F2ED; } .h-title span { display: block; overflow: hidden; padding: 0 0.12em 0.08em 0; margin-bottom: -0.08em; } /* Optical descender comp: add ~one p-descender depth of extra space after a line that ends in a descender, so cap-top-to-cap-top rhythm reads even. Skip the last line so it adds no trailing gap. Mobile: word = its own block line -> margin-bottom. */ .h-title span.ln-desc:not(:last-child) { margin-bottom: 0.11em; } .h-title span i { display: block; font-style: normal; transform: translateY(110%); animation: maskUp 0.75s cubic-bezier(.16,1,.3,1) both; } .h-title span:nth-child(1) i { animation-delay: 0.12s; } .h-title span:nth-child(2) i { animation-delay: 0.2s; } .h-title span:nth-child(3) i { animation-delay: 0.3s; } .h-title span:nth-child(4) i { animation-delay: 0.38s; } .h-title span:nth-child(5) i { animation-delay: 0.48s; } .h-title span:nth-child(6) i { animation-delay: 0.56s; } .h-title .accent { color: #7BC295; } @keyframes maskUp { to { transform: translateY(0); } } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .h-sub { margin: 18px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(237,236,234,0.68); max-width: 320px; text-wrap: pretty; animation: riseIn 0.7s cubic-bezier(.16,1,.3,1) 0.72s both; } /* single inline email control — anchored to the bottom of the fold */ .cta-line { margin-top: auto; padding-top: 40px; max-width: 400px; animation: riseIn 0.7s cubic-bezier(.16,1,.3,1) 1.05s both; } .final .cta-line { margin-top: 30px; padding-top: 0; } .cta-field { position: relative; display: flex; align-items: center; height: 62px; border-radius: 31px; background: rgba(7,20,13,0.55); border: 1px solid rgba(123,194,149,0.4); box-shadow: 0 0 0 0 rgba(123,194,149,0.0); transition: border-color 0.25s ease; animation: ctaBreathe 3.6s ease-in-out 2s infinite; } @keyframes ctaBreathe { 0%, 100% { box-shadow: 0 0 24px 0 rgba(123,194,149,0.10); } 50% { box-shadow: 0 0 34px 4px rgba(123,194,149,0.26); } } .cta-field:focus-within { border-color: rgba(123,194,149,0.65); } .cta-field input { flex: 1; min-width: 0; height: 100%; background: none; border: none; padding: 0 12px 0 24px; color: #F4F2ED; font-size: 16px; } .cta-field input::placeholder { color: rgba(237,236,234,0.4); } .cta-field input:focus { outline: none; } .cta-field .go { flex: none; margin-right: 6px; height: 50px; padding: 0 20px; border-radius: 25px; border: none; cursor: pointer; background: #F4F2ED; color: #14301F; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.1px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: transform 0.25s cubic-bezier(.16,1,.3,1), background 0.25s ease; } .cta-field .go:hover { background: #FFFFFF; } .cta-field .go:active { transform: scale(0.92); } .cta-hint { margin: 12px 2px 0; font-size: 13px; color: rgba(237,236,234,0.5); } /* — step 2: optional name + city (progressive disclosure) — */ .cta-more { display: none; } .cta-line.step2 .cta-form, .cta-line.step2 .cta-hint { display: none; } .cta-line.step2 .cta-more { display: block; animation: riseIn 0.5s cubic-bezier(.16,1,.3,1) both; } .more-head { margin: 2px 2px 12px; font-size: 14.5px; color: rgba(237,236,234,0.7); } .more-head b { color: #9ED4B4; } .more-row { display: flex; gap: 8px; } .more-input { flex: 1; min-width: 0; height: 52px; border-radius: 26px; padding: 0 20px; background: rgba(7,20,13,0.5); border: 1px solid rgba(244,242,237,0.22); color: #F4F2ED; font-size: 16px; } .more-input::placeholder { color: rgba(237,236,234,0.4); } .more-input:focus { outline: none; border-color: rgba(123,194,149,0.65); } .more-btn { width: 100%; height: 52px; margin-top: 8px; border-radius: 26px; border: none; cursor: pointer; background: #F4F2ED; color: #14301F; font-size: 15.5px; font-weight: 700; } .more-btn:active { transform: scale(0.98); } .more-skip { width: 100%; height: 40px; margin-top: 2px; border: none; background: none; cursor: pointer; color: rgba(237,236,234,0.5); font-size: 13px; font-weight: 500; } .more-skip:hover { color: rgba(237,236,234,0.75); } /* success */ .cta-done { display: none; align-items: center; gap: 12px; padding: 4px 2px; } .cta-done .check-ring { flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg, #4F9472, #1E4D35); display: flex; align-items: center; justify-content: center; } .cta-done .check-ring svg path { stroke-dasharray: 26; stroke-dashoffset: 26; } .cta-line.done .cta-form, .cta-line.done .cta-hint, .cta-line.done .cta-more { display: none; } .cta-line.done .cta-done { display: flex; } .cta-line.done .check-ring svg path { animation: drawCheck 0.4s cubic-bezier(.2,.7,.3,1) 0.15s both; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .cta-done b { display: block; color: #F4F2ED; font-size: 15.5px; font-weight: 700; } .cta-done p { margin: 2px 0 0; color: rgba(237,236,234,0.6); font-size: 13.5px; } /* hero phone peek — unused in v3 (type-led) */ .hero-peek { display: flex; justify-content: center; height: 320px; margin-top: 36px; animation: peekUp 1s cubic-bezier(.16,1,.3,1) 1.2s both; } .hero-peek .phone { flex: none; width: min(330px, 84vw); } @keyframes peekUp { from { opacity: 0; transform: translateY(120px); } to { opacity: 1; transform: none; } } /* ═══════════ ticker ═══════════ */ .ticker { background: #07140D; border-top: 1px solid rgba(123,194,149,0.14); border-bottom: 1px solid rgba(123,194,149,0.14); overflow: hidden; padding: 15px 0; } .tick-track { display: flex; gap: 44px; width: max-content; animation: tick 88s linear infinite; } .tick-track span { display: flex; align-items: center; gap: 44px; font-size: 13px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(158,212,180,0.6); white-space: nowrap; } .tick-track svg { flex: none; opacity: 0.55; } @keyframes tick { to { transform: translateX(-50%); } } /* ═══════════ features — editorial, no chip clutter ═══════════ */ .features { background: #F4F2ED; } /* NB: use vertical longhands so .shell's `padding: 0 24px` (horizontal) survives — a `padding` shorthand here would zero the side padding and clip 01 / the rule. */ .feature { padding-top: 68px; padding-bottom: 26px; } .feature:last-of-type { padding-bottom: 72px; } .f-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .f-rule .n { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #14301F; } .f-rule .l { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: #4F9472; } .f-rule::after { content: ""; flex: 1; height: 1px; background: rgba(20,48,31,0.16); } .f-title { margin: 0; font-size: clamp(30px, 8vw, 38px); font-weight: 800; letter-spacing: -1.3px; line-height: 1.12; color: #14301F; } .f-sub { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: #5A564E; max-width: 340px; text-wrap: pretty; } /* spec-sheet list (replaces check bullets) */ .f-points { list-style: none; margin: 24px 0 0; padding: 0; } .f-points li { padding: 11px 0; border-top: 1px solid rgba(20,48,31,0.12); font-size: 14.5px; line-height: 1.45; color: #3A3A36; display: flex; gap: 12px; } .f-points li::before { content: "—"; color: #4F9472; font-weight: 700; } /* phone frame */ .phone-wrap { display: flex; justify-content: center; padding-top: 34px; } .phone { position: relative; width: min(300px, 78vw); aspect-ratio: 390 / 800; border-radius: 44px; background: #101210; padding: 10px; box-shadow: 0 30px 70px rgba(20,48,31,0.28), 0 4px 14px rgba(0,0,0,0.14); transition: transform 0.9s cubic-bezier(.16,1,.3,1); } .phone::after { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 88px; height: 24px; border-radius: 12px; background: #101210; z-index: 3; } .phone .screen { position: absolute; inset: 10px; border-radius: 35px; overflow: hidden; background: #EAE7E0; } .phone .screen image-slot, .phone .screen .screen-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .phone.tilt-l { transform: rotate(-3deg); } .phone.tilt-r { transform: rotate(3deg); } .rv.in .phone.tilt-l, .rv.in .phone.tilt-r { transform: rotate(0deg); } /* ═══════════ final CTA ═══════════ */ .final { position: relative; overflow: hidden; background: linear-gradient(172deg, #14301F 0%, #0B1F14 60%, #07140D 100%); padding: 84px 0 56px; } .final-title { margin: 0; font-size: clamp(34px, 9vw, 44px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.05; color: #F4F2ED; } .final-sub { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(237,236,234,0.68); max-width: 330px; } .final .cta-line { animation: none; } .menu-btn-removed { display: none; } /* give the last section room above the dock */ .footer { position: relative; margin-top: 72px; padding-top: 26px; border-top: 1px solid rgba(244,242,237,0.12); display: flex; align-items: center; justify-content: space-between; } .footer-legal { display: flex; gap: 20px; padding: 14px 0 76px; } .footer-legal a { font-size: 12.5px; font-weight: 500; color: rgba(237,236,234,0.55); } .footer-legal a:hover { color: #9ED4B4; } .footer .fbrand { display: flex; align-items: center; gap: 9px; color: rgba(237,236,234,0.85); font-size: 14.5px; font-weight: 700; } .footer small { color: rgba(237,236,234,0.4); font-size: 12px; } /* topnav — desktop only */ .topnav { display: none; } /* ── mobile/tablet hero: keep the "Get access" CTA above the fold ── The CTA follows the subline (instead of being pinned to the bottom of the fold, where iOS Safari's toolbar + home indicator hid it). The decorative Forge mark drops below the CTA and may run past the fold — that's intended. Scoped to <1024 so the desktop hero is untouched. */ @media (max-width: 1023px) { .hero-inner { padding-top: 72px; padding-bottom: 28px; } .cta-line { margin-top: 32px; padding-top: 0; } .mark-duo svg { top: 47%; } } /* ── tablet: framed phone ── */ @media (min-width: 720px) and (max-width: 1023px) { body { background: #07140D; } .page { max-width: 520px; margin: 0 auto; box-shadow: 0 0 120px rgba(0,0,0,0.5); } .topbar .bar { max-width: 520px; } } /* ── desktop ── */ @media (min-width: 1024px) { .shell, .topbar .bar { max-width: 1140px; padding-left: 48px; padding-right: 48px; margin-left: auto; margin-right: auto; } /* topbar + hero hug the edges — no centering gutter on the fold */ .topbar .bar { max-width: none; margin-left: 0; } .hero .shell { max-width: none; margin-left: 0; } .topbar .bar { height: 72px; } .topnav { display: flex; gap: 32px; } .topnav a { color: rgba(237,236,234,0.65); font-size: 14px; font-weight: 600; letter-spacing: -0.1px; transition: color 0.25s ease; } .topnav a:hover { color: #F4F2ED; } .dock { display: none; } /* hero: type left, mark right */ .hero-inner { padding-top: 96px; padding-bottom: 64px; } .hero-main { justify-content: center; } .h-title { max-width: 7em; font-size: clamp(64px, 6.2vw, 84px); letter-spacing: -3px; line-height: 0.98; } .h-title span { display: inline-block; padding: 0 0.22em 0.09em 0; margin-bottom: -0.09em; } /* Desktop wraps 2 words per line, so words are inline-block: margin-bottom can't open the line. Grow the descender word's box via padding-bottom to add the same optical gap after "people.". vertical-align:top is required — an overflow:hidden inline-block otherwise takes its baseline from the bottom edge, so padding-bottom would float the glyph up off the baseline. top-align pins the glyph and lets the box grow downward only. */ .h-title span.ln-desc:not(:last-child) { vertical-align: top; padding-bottom: 0.33em; margin-bottom: 0; } /* subline: one line at desktop (drop the mobile wrap width), a touch larger */ .h-sub { max-width: none; font-size: 18px; margin-top: 22px; } .cta-line { margin-top: 46px; max-width: 560px; display: flex; flex-direction: column; } /* desktop: name + city shown upfront, above the email row */ .cta-line .cta-more { display: block; order: -1; margin-bottom: 10px; animation: riseIn 0.7s cubic-bezier(.16,1,.3,1) 1.2s both; } .cta-line .more-head, .cta-line .more-btn, .cta-line .more-skip { display: none; } .cta-line.done .cta-more { display: none; } /* ambient motion: slow mark float */ .mark-duo { animation: markFloat 9s ease-in-out 2s infinite alternate; } @keyframes markFloat { from { transform: translateY(0); } to { transform: translateY(-16px); } } .mark-duo svg { top: 50%; transform: translateY(-52%); right: -140px; width: 620px; height: 620px; } .m-echo { transform: translateY(-52%) translate(56px, -56px); } @keyframes markDrift { from { opacity: 0; transform: translateY(-52%) translate(60px, 30px); } to { opacity: 1; transform: translateY(-52%); } } /* features: two-column, alternating */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 110px 48px 40px; } .feature:last-of-type { padding-bottom: 110px; } .feature:nth-of-type(even) .phone-wrap { order: -1; } .phone-wrap { padding-top: 0; } .phone { width: 330px; } .f-title { font-size: 46px; } .f-sub { font-size: 17px; max-width: 420px; } .f-points { max-width: 440px; } /* final CTA: centered */ .final { padding: 120px 0 64px; } .final .shell { max-width: 760px; } .final-title { text-align: center; font-size: 52px; } .final-sub { text-align: center; margin-left: auto; margin-right: auto; } .final .cta-line { margin-left: auto; margin-right: auto; } .final .hero-ghost { display: none; } .footer { margin-top: 96px; } } /* ── Get Access button (replaces inline email capture) ── */ .cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; height: 62px; border-radius: 31px; background: #F4F2ED; color: #14301F; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; box-shadow: 0 6px 18px rgba(0,0,0,0.3); animation: ctaBreathe 3.6s ease-in-out 2s infinite; transition: transform 0.25s cubic-bezier(.16,1,.3,1), background 0.25s ease; } .cta-btn:hover { background: #FFFFFF; color: #14301F; } .cta-btn:active { transform: scale(0.96); }