/* =================================================== CINEMATIC NOIR — Design System Palette: Backgrounds: #000000, #09090b, #18181b, #FFFFFF, #fafafa Foreground: #e5e5e5, #888888, #000000 Highlight: #ef4444 (selection only) Typography: Primary: 'ZTNature', 'Archivo', sans-serif Mono: 'JetBrains Mono', monospace =================================================== */ /* --- Custom Properties --- */ :root { --accent: #ef4444; --accent-muted: rgba(239, 68, 68, 0.15); } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* iOS sideways-drift fix — scoped to mobile only, where can clip safely (the sticky webaverse only exists >=900px, and overflow-x on breaks it). */ @media (max-width: 899px) { html { overflow-x: hidden; } } /* Full-page sections */ .hero, .about, .pricing, .workflow, .reviews, .contact-section { min-height: 100vh; } body { font-family: 'ZTNature', 'Archivo', sans-serif; font-weight: 300; font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.01em; color: #e5e5e5; background: #000000; overflow-x: hidden; } ::selection { background: #ef4444; color: #ffffff; } ::-moz-selection { background: #ef4444; color: #ffffff; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --- SVG Filters --- */ .svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; } /* =================================================== GRAIN OVERLAY =================================================== */ .noise-overlay { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9999; opacity: 0.15; mix-blend-mode: overlay; filter: url(#noiseFilter); } /* =================================================== SHARED SECTION TITLES =================================================== */ .section-title { font-size: 8vw; line-height: 0.95; letter-spacing: -0.03em; color: #000000; } .section-title-light { color: #e5e5e5; } .section-title-bold { font-weight: 900; } .section-title-italic { font-weight: 100; font-style: italic; color: var(--accent); } /* =================================================== NAVBAR =================================================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 2rem 1.5rem; mix-blend-mode: difference; color: #ffffff; } .nav-logo { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; } .nav-links { display: flex; align-items: center; gap: 2.5rem; } .nav-links a { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; transition: opacity 0.3s ease; } .nav-links a:hover { opacity: 0.6; } /* Client login — red filled button, isolated from blend mode */ .nav-login { background: var(--accent); padding: 0.5rem 1.25rem; border-radius: 4px; mix-blend-mode: normal; isolation: isolate; } .nav-login:hover { opacity: 1 !important; background: #dc2626; } .nav-menu-btn { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 0.5rem; } /* --- Mobile Menu Overlay --- */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #000000; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.is-open { opacity: 1; pointer-events: all; } .mobile-menu a { font-size: 2.5rem; font-weight: 500; color: #e5e5e5; letter-spacing: -0.03em; transition: opacity 0.3s ease; } .mobile-menu a:hover { opacity: 0.6; } /* =================================================== HERO =================================================== */ .hero { position: relative; width: 100%; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000000; } .hero-bg { position: absolute; inset: -10%; width: 120%; height: 120%; background: #000000; transform-origin: center center; will-change: transform; transform-style: preserve-3d; } /* layered atmosphere: horizon glow + faint dot matrix */ .hero-glow { position: absolute; inset: 0; background: radial-gradient(95% 60% at 50% 110%, rgba(239, 68, 68, 0.30) 0%, rgba(110, 16, 16, 0.14) 42%, transparent 72%), radial-gradient(70% 45% at 50% -12%, rgba(239, 68, 68, 0.08), transparent 60%); } .hero-glow::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, transparent 32%, #000 92%); mask-image: radial-gradient(75% 75% at 50% 50%, transparent 32%, #000 92%); opacity: 0.55; } /* the webaverse planet rising behind the bottom edge */ .hero-planet { position: absolute; left: 50%; bottom: 0; width: min(150vw, 1900px); transform: translate(-50%, 56%); opacity: 0.55; } .hero-planet svg { width: 100%; height: auto; display: block; overflow: visible; } .hero-planet-sphere { animation: planetSpin 70s linear infinite reverse; transform-origin: 360px 300px; } .hero-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-heading-wrapper { position: relative; display: inline-block; } /* red print-offset echo behind the headline (misregistration motif). Lives on the h1 with font:inherit so it matches EVERY breakpoint size. */ .hero-heading { position: relative; z-index: 1; } .hero-heading::before { content: attr(data-ghost); position: absolute; left: 0.045em; top: 0.045em; font: inherit; color: rgba(239, 68, 68, 0.85); z-index: -1; pointer-events: none; } /* load choreography — the hero assembles on arrival */ @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } .hero-label, .hero-heading-wrapper, .hero-acronym, .hero-actions, .hero-stats, .hero-scrollcue { animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .hero-label { animation-delay: 0.15s; } .hero-heading-wrapper { animation-delay: 0.3s; } .hero-acronym { animation-delay: 0.5s; } .hero-actions { animation-delay: 0.65s; } .hero-stats { animation-delay: 0.8s; } .hero-scrollcue { animation-delay: 1.1s; } @media (prefers-reduced-motion: reduce) { .hero-label, .hero-heading-wrapper, .hero-acronym, .hero-actions, .hero-stats, .hero-scrollcue { animation: none; } } .hero-heading { font-size: 12vw; font-weight: 900; letter-spacing: -0.03em; line-height: 0.9; color: #e5e5e5; will-change: transform; transform-style: preserve-3d; } .hero-heading span { display: inline-block; will-change: font-variation-settings; transition: font-variation-settings 0.08s ease-out; } .hero-label { display: inline-block; margin-bottom: 2rem; padding: 0.85rem 1.75rem; font-size: clamp(1.1rem, 2vw, 1.75rem); font-family: 'JetBrains Mono', monospace; font-weight: 400; color: #c0c0c0; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; will-change: opacity; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .hero-acronym { margin-top: 1.75rem; display: flex; align-items: baseline; justify-content: center; gap: 1rem; flex-wrap: wrap; font-family: 'Archivo', sans-serif; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.78); text-transform: uppercase; } .hero-acronym-word { display: inline-flex; align-items: baseline; } .hero-acronym-letter { color: var(--accent); font-weight: 800; letter-spacing: 0; margin-right: 0.05em; } .hero-acronym-sep { color: rgba(255, 255, 255, 0.2); font-weight: 400; } .hero-description { margin-top: 3rem; max-width: 42rem; font-size: 1.125rem; font-weight: 300; color: rgba(255, 255, 255, 0.7); line-height: 1.6; letter-spacing: -0.01em; padding: 0 1.5rem; } /* Hero manifesto */ /* =================================================== MANIFESTO — terminal-style banner between hero + about =================================================== */ .manifesto { width: 100%; padding: 1rem 2.5rem; background: #000; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; } .manifesto-container { max-width: 100%; text-align: center; } .manifesto-line { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: clamp(0.9rem, 2.1vw, 1.9rem); font-weight: 400; letter-spacing: 0.04em; color: #d4d4d4; text-align: left; white-space: nowrap; margin: 0; } .manifesto-prompt { color: rgba(255, 255, 255, 0.35); margin-right: 0.5em; } .manifesto-keyword { color: var(--accent); font-weight: 500; } .manifesto-punc { color: rgba(255, 255, 255, 0.6); } .manifesto-quote { color: #e5b86a; } .manifesto-typed { color: #e5b86a; } .manifesto-line .tape-word { display: inline-block; white-space: nowrap; } .manifesto-line .tape-char { display: inline-block; opacity: 0; position: relative; } .manifesto-line .tape-char.tape-space { white-space: normal; } .manifesto-line .tape-char.revealed { opacity: 1; } .manifesto-line .tape-char.caret::after { content: '▊'; position: absolute; left: 100%; top: 0; color: var(--accent); animation: manifesto-caret 1s step-end infinite; pointer-events: none; } @keyframes manifesto-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.6rem; } .hero-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2.25rem; font-family: 'Archivo', sans-serif; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; color: #ffffff; background: var(--accent); border-radius: 999px; text-decoration: none; box-shadow: 0 14px 36px rgba(239, 68, 68, 0.28); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hero-cta-ghost { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; font-family: 'Archivo', sans-serif; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; color: #e5e5e5; background: transparent; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; text-decoration: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hero-cta-ghost:hover { border-color: #ffffff; transform: translateY(-2px); } .hero-cta-ghost svg { transition: transform 0.3s ease; } .hero-cta-ghost:hover svg { transform: translate(2px, -2px); } .hero-stats { margin-top: 2.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.38); text-align: center; } .hero-scrollcue { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.35); } .hero-scrollcue-line { width: 1px; height: 34px; background: linear-gradient(rgba(239, 68, 68, 0.85), transparent); transform-origin: top; animation: cueDrop 1.9s ease-in-out infinite; } @keyframes cueDrop { 0% { transform: scaleY(0); opacity: 1; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } .hero-cta:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(239, 68, 68, 0.3); } .hero-cta svg { transition: transform 0.3s ease; } .hero-cta:hover svg { transform: translateY(3px); } /* =================================================== ABOUT SECTION — white bg =================================================== */ .about { background: #ffffff; color: #000000; padding: 7rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .about-container { max-width: 1200px; margin: 0 auto; } .about-header { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); margin-bottom: 0; } /* Main 2-col layout: photo | text */ .about-content { display: grid; grid-template-columns: 380px 1fr; border-bottom: 1px solid rgba(0, 0, 0, 0.12); opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .about-content.is-visible { opacity: 1; transform: translateY(0); } /* Left: photo column */ .about-photo-col { border-right: 1px solid rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } .about-headshot-wrapper { flex: 1; overflow: hidden; } .about-headshot { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center top; display: block; filter: grayscale(15%); transition: filter 0.5s ease, transform 0.5s ease; } .about-headshot:hover { filter: grayscale(0%); transform: scale(1.02); } .about-photo-caption { display: block; padding: 0.875rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #888888; border-top: 1px solid rgba(0, 0, 0, 0.12); } /* Right: text column */ .about-text-col { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; gap: 2rem; } .about-lead-text { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #111111; } .about-lead-text em { font-style: italic; font-weight: 300; } .about-divider { width: 40px; height: 2px; background: var(--accent); } .about-body { display: flex; flex-direction: column; gap: 1.25rem; } .about-body p { font-size: 1rem; font-weight: 300; line-height: 1.75; color: #555555; } /* 3-column highlights */ .about-highlights { display: grid; grid-template-columns: repeat(3, 1fr); opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } .about-highlights.is-visible { opacity: 1; transform: translateY(0); } .about-highlight { padding: 2.5rem 2rem; border-right: 1px solid rgba(0, 0, 0, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.12); border-left: 2px solid transparent; transition: border-color 0.3s ease; } .about-highlight:hover { border-left-color: var(--accent); } .about-highlight:last-child { border-right: none; } .about-highlight-num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 1rem; } .about-highlight h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.625rem; color: #111111; } .about-highlight p { font-size: 0.9rem; font-weight: 300; line-height: 1.65; color: #666666; } /* =================================================== SERVICES — white bg, 3 cards =================================================== */ .services { background: #ffffff; color: #000000; padding: 7rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .services-container { max-width: 1200px; margin: 0 auto; } .services-header { margin-bottom: 4rem; } .services-subtitle { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 300; color: #888888; letter-spacing: -0.01em; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* Service Card */ .service-card { padding: 2.5rem; border: 1px solid rgba(0, 0, 0, 0.08); background: #fafafa; display: flex; flex-direction: column; transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease; opacity: 0; transform: translateY(30px); } .service-card.is-visible { opacity: 1; transform: translateY(0); } .service-card:hover { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); border-top: 2px solid var(--accent); transform: translateY(-4px); } .service-number { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: var(--accent); letter-spacing: 0.05em; margin-bottom: 2rem; } .service-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: #111111; margin-bottom: 1rem; } .service-description { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: #666666; flex: 1; } .service-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); transition: opacity 0.3s ease; } .service-cta:hover { opacity: 0.6; } /* =================================================== PRICING — white bg, 2-tier cards =================================================== */ .pricing { background: #09090b; color: #e5e5e5; padding: 7rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .pricing-container { max-width: 1200px; margin: 0 auto; } .pricing-header { margin-bottom: 4rem; } .pricing-subtitle { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 300; color: #888888; letter-spacing: -0.01em; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } .pricing-grid--2col { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; } /* Two-step pricing explainer */ .pricing-build-note { display: flex; flex-direction: column; gap: 1.75rem; margin-bottom: 3rem; padding: 2.25rem 2.5rem; background: linear-gradient(135deg, rgba(255, 92, 92, 0.06), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid var(--accent); border-radius: 4px; opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease; } .pricing-build-note.is-visible { opacity: 1; transform: translateY(0); } .pricing-build-note-heading { display: flex; flex-direction: column; gap: 0.5rem; } .pricing-build-note-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--accent); } .pricing-build-note-title { font-family: 'Archivo', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; margin: 0; line-height: 1.2; } .pricing-build-note-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; } .pricing-build-note-step { display: flex; gap: 1rem; align-items: flex-start; } .pricing-build-note-step-num { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; font-weight: 600; color: var(--accent); line-height: 1; padding-top: 0.15rem; flex-shrink: 0; } .pricing-build-note-step strong { display: block; font-size: 1rem; font-weight: 700; color: #ffffff; margin-bottom: 0.4rem; letter-spacing: -0.01em; } .pricing-build-note-step p { font-size: 0.9rem; font-weight: 300; line-height: 1.55; color: #aaaaaa; margin: 0; } .pricing-build-note-link { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.85rem 1.5rem; font-size: 0.9rem; font-weight: 600; color: #ffffff; background: var(--accent); border-radius: 3px; text-decoration: none; transition: transform 0.25s ease, opacity 0.25s ease; } .pricing-build-note-link:hover { opacity: 0.9; transform: translateX(4px); } /* Pricing Card */ .pricing-card { position: relative; padding: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 2px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translateY(30px); } .pricing-card.is-visible { opacity: 1; transform: translateY(0); } .pricing-card:hover { border-color: rgba(255, 255, 255, 0.12); transform: translateY(-4px); } /* Featured card */ .pricing-card--featured { border-color: var(--accent); background: rgba(239, 68, 68, 0.04); box-shadow: 0 0 80px rgba(239, 68, 68, 0.08); } .pricing-card--featured:hover { border-color: var(--accent); box-shadow: 0 0 100px rgba(239, 68, 68, 0.12); } .pricing-badge { position: absolute; top: -1px; left: 2rem; right: 2rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; color: #fff; background: var(--accent); padding: 0.4rem 1rem; border-radius: 0 0 4px 4px; } .pricing-card-top { margin-bottom: 2rem; } .pricing-tier { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; color: #888888; } .pricing-card--featured .pricing-tier { color: var(--accent); } .pricing-plan-name { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.75rem; color: #e5e5e5; } .pricing-plan-desc { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 300; color: #888888; line-height: 1.6; } .pricing-price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1.5rem; } .pricing-amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: #e5e5e5; line-height: 1; } .pricing-card--featured .pricing-amount { color: #ffffff; } .pricing-term { font-size: 0.9rem; font-weight: 300; color: #555555; } .pricing-plus { display: block; margin-top: 0.35rem; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.05em; color: #888888; } /* Features list */ .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.06); flex: 1; } .pricing-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 400; color: #e5e5e5; } .pricing-feature svg { flex-shrink: 0; stroke: var(--accent); } .pricing-feature--disabled { color: #444444; } .pricing-feature--disabled svg { stroke: #333333; } /* CTA */ .pricing-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; padding: 0.85rem 1.5rem; font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; text-align: center; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .pricing-cta:hover { background: var(--accent-muted); transform: translateY(-2px); } .pricing-cta--featured { background: var(--accent); color: #ffffff; border-color: var(--accent); } .pricing-cta--featured:hover { background: #dc2626; border-color: #dc2626; box-shadow: 0 8px 30px rgba(239, 68, 68, 0.25); } /* =================================================== WORKFLOW — dark bg, 4 steps =================================================== */ .workflow { position: relative; background: #ffffff; color: #000000; padding: 7rem 1.5rem; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .workflow-container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .workflow-header { margin-bottom: 4rem; } .workflow-steps { display: flex; flex-direction: column; gap: 0; } .workflow-step { display: grid; grid-template-columns: 100px 1fr; gap: 2rem; align-items: start; padding: 2.5rem 0; border-top: 1px solid rgba(0, 0, 0, 0.08); border-left: 2px solid transparent; opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, padding-left 0.3s ease; } .workflow-step:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .workflow-step.is-visible { opacity: 1; transform: translateY(0); } .workflow-step-number { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: var(--accent); letter-spacing: 0.05em; padding-top: 0.25rem; } .workflow-step:hover { border-left: 2px solid var(--accent); padding-left: 1rem; } .workflow-step-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; color: #111111; } .workflow-step-description { font-size: 1rem; font-weight: 300; line-height: 1.6; color: #888888; max-width: 600px; } /* --- Vertical timeline variant --- */ .workflow-subtitle { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: #888; letter-spacing: 0.05em; margin-top: 1rem; max-width: 560px; } .workflow-timeline { position: relative; padding: 1rem 0 0.5rem; margin-top: 1rem; } .workflow-timeline-line { position: absolute; left: 11px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient( to bottom, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.18) 15%, rgba(0,0,0,0.18) 85%, rgba(0,0,0,0.08) 100% ); z-index: 0; } .workflow-tl-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 1.5rem; padding: 1.25rem 0 2rem; opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .workflow-tl-step.is-visible { opacity: 1; transform: translateY(0); } .workflow-tl-dot { position: relative; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2px solid var(--accent); margin-top: 0.4rem; z-index: 1; box-shadow: 0 0 0 4px #ffffff; transition: transform 0.3s ease, background 0.3s ease; } .workflow-tl-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .workflow-tl-step.is-visible .workflow-tl-dot::after { transform: scale(1); } .workflow-tl-step:hover .workflow-tl-dot { transform: scale(1.1); } .workflow-tl-content { padding-top: 0.1rem; } .workflow-tl-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; } .workflow-tl-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: #111; } .workflow-tl-description { font-size: 0.975rem; font-weight: 300; line-height: 1.6; color: #666; max-width: 640px; margin: 0; } @media (max-width: 640px) { .workflow-tl-step { grid-template-columns: 32px 1fr; gap: 1rem; padding-bottom: 1.75rem; } .workflow-tl-title { font-size: 1.15rem; } .workflow-timeline-line { left: 7px; } .workflow-tl-dot { width: 18px; height: 18px; } } /* ---- Scroll-drawn squiggle timeline ---- JS (script.js) replaces the straight rail with an SVG path that weaves through the step dots and draws itself as you scroll; a glowing tip rides the line and the dots light up as it passes them. The straight rail stays as the no-JS / reduced-motion fallback. */ .workflow-squiggle { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; } .workflow-timeline.has-squiggle .workflow-timeline-line { display: none; } .workflow-squiggle-base { fill: none; stroke: rgba(0, 0, 0, 0.10); stroke-width: 2; stroke-linecap: round; } .workflow-squiggle-progress { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.30)); } .workflow-squiggle-tip { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.55)); transition: opacity 0.25s ease; } .workflow-tl-dot.tl-lit { transform: scale(1.12); box-shadow: 0 0 0 4px #ffffff, 0 0 14px rgba(239, 68, 68, 0.35); } .workflow-tl-dot.tl-lit::after { transform: scale(1); } /* =================================================== WORK — recent builds (portfolio) Cards hold a fake-browser cover until real screenshots exist; data-url="" (script.js) controls pending vs live. =================================================== */ .work { background: #ffffff; color: #000; padding: 7rem 1.5rem; } .work-container { max-width: 1200px; margin: 0 auto; } .work-header[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .work-header.is-visible { opacity: 1; transform: translateY(0); } .work-subtitle { font-size: 1rem; font-weight: 300; color: #888; letter-spacing: 0.05em; margin-top: 1rem; max-width: 560px; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .work-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .work-card[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease; } .work-card.is-visible { opacity: 1; transform: translateY(0); } .work-card.is-live { cursor: pointer; } .work-card.is-live:hover, .work-card.is-live:focus-visible { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); outline: none; } /* fake browser chrome */ .work-card-chrome { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: #fafafa; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .work-chrome-dots { display: flex; gap: 5px; } .work-chrome-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.15); } .work-chrome-url { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #999; letter-spacing: 0.02em; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 99px; padding: 0.2rem 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* status chip — LIVE (solid red) vs WIP (dashed), right end of chrome bar */ .work-chrome-status { margin-left: auto; flex: none; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; padding: 0.18rem 0.55rem; border-radius: 99px; } .work-card[data-status="live"] .work-chrome-status { background: var(--accent); color: #ffffff; } .work-card[data-status="wip"] .work-chrome-status { color: #8a8a8a; border: 1px dashed rgba(0, 0, 0, 0.30); background: transparent; } /* placeholder covers (swap for later) */ .work-card-media { overflow: hidden; } .work-card-cover { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; position: relative; overflow: hidden; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .work-card.is-live:hover .work-card-cover { transform: scale(1.04); } .work-card-cover::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(70deg, transparent 45%, #000 95%); mask-image: linear-gradient(70deg, transparent 45%, #000 95%); pointer-events: none; } .work-cover-light::before { background-image: radial-gradient(rgba(0, 0, 0, 0.10) 1px, transparent 1px); } .work-cover-initials { font-size: 4rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; } .work-cover-type { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; } .work-cover-red { background: linear-gradient(118deg, #991b1b 0%, #dc2626 45%, #ef4444 75%, #f87171 100%); color: #fff; } .work-cover-dark { background: linear-gradient(135deg, #0b0b0d 0%, #19191d 55%, #28282e 100%); color: #fff; } .work-cover-dark .work-cover-initials { color: var(--accent); } .work-cover-light { background: linear-gradient(135deg, #ffffff 0%, #efefec 100%); color: #111; } .work-cover-light .work-cover-initials { color: transparent; -webkit-text-stroke: 2px #111; } /* real screenshot slot (used once covers are swapped) */ .work-card-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .work-card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1.2rem; } .work-card-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; color: #111; } .work-card-tag { font-size: 0.8rem; font-weight: 300; color: #888; margin: 0; } .work-card-cta { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; flex: none; padding: 0.45rem 0.85rem; border-radius: 99px; } .work-card.is-pending .work-card-cta { color: #999; border: 1px dashed rgba(0, 0, 0, 0.25); } .work-card.is-live .work-card-cta { color: #fff; background: var(--accent); } .work-card.is-live .work-card-cta::after { content: ' ↗'; } /* WIP builds open as previews — dark pill instead of red */ .work-card.is-live[data-status="wip"] .work-card-cta { background: #141414; } /* the card for this very site */ .work-card.is-self .work-card-cta { color: var(--accent); border: 1.5px solid var(--accent); background: transparent; } @media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; gap: 1.25rem; } .work-cover-initials { font-size: 3.25rem; } } /* ---- Orbit stage (scroll-pinned showcase) ---- Activated by script.js on desktop: the section grows tall, this stage pins for a full viewport, the red wireframe planet sits center, and the work cards orbit/focus as you scroll. Grid remains the fallback. */ .work-stage { display: none; } .work.orbit-on { padding: 0; } .work.orbit-on .work-container { display: none; } .work.orbit-on .work-stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; will-change: background-color; } /* "MY Work" — lives inside the globe during the intro */ .work-globe-title { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 5; text-align: center; white-space: nowrap; font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: 0.95; letter-spacing: -0.03em; pointer-events: none; will-change: opacity, transform; } .work-globe-bold { font-weight: 900; color: #000; } .work-globe-italic { font-weight: 100; font-style: italic; color: var(--accent); } /* chapter title — "LIVE Projects" / "IN Progress", top of the stage */ .work-chapter-title { position: absolute; top: 2.6rem; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 3rem)); z-index: 30; pointer-events: none; font-size: clamp(2.6rem, 6vw, 6.5rem); line-height: 0.95; letter-spacing: -0.03em; opacity: 0; will-change: opacity, transform; } .work-chapter-bold { font-weight: 900; color: #000; transition: color 0.4s ease; } .work-chapter-italic { font-weight: 100; font-style: italic; color: var(--accent); } .work-stage.dark .work-chapter-bold { color: #e5e5e5; } .work-stage.dark .work-stage-count { color: #777; } @media (max-width: 719px) { .work-chapter-title { top: 4.6rem; } .work-globe-title { font-size: 13vw; } } /* header is adopted into the stage in orbit mode */ .work-stage .work-header { position: absolute; top: 3.25rem; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100% - 3rem)); z-index: 30; pointer-events: none; } .work-stage .work-header.is-visible { transform: translateX(-50%); } .work-planet { position: absolute; left: 50%; top: 52%; width: min(52vw, 700px); transform: translate(-50%, -50%); z-index: 1; will-change: transform; } .work-planet svg { width: 100%; height: auto; display: block; overflow: visible; } .work-planet-sphere { animation: planetSpin 48s linear infinite; transform-origin: 360px 300px; } @keyframes planetSpin { to { transform: rotate(360deg); } } .work-orbit { position: absolute; inset: 0; z-index: 10; } /* cards adopted into the stage: JS owns the transform every frame */ .work-card.in-stage { position: absolute; left: 50%; top: 50%; width: min(440px, 86vw); margin: 0; transition: border-color 0.35s ease, box-shadow 0.35s ease; will-change: transform, opacity; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14); } @media (min-width: 900px) { /* bigger base so the focused card (scale 1.0, crisp) reads large + landscape; non-focused cards are shrunk back in JS, so the globe stays unchanged */ .work-card.in-stage { width: min(700px, 54vw); } .work-card.in-stage .work-card-cover, .work-card.in-stage .work-card-shot { aspect-ratio: 16 / 8.6; } .work-card.in-stage.globe-phase .work-card-cover, .work-card.in-stage.globe-phase .work-card-shot { aspect-ratio: 16 / 10; } } .work-stage-count { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; color: #999; z-index: 30; } /* ---- Mobile intro mode (<900px, set by JS) ---- The stage is a normal, NON-sticky one-viewport scene that simply scrolls past — globe + "MY Work" + card clones organizing into a stack — and the real cards follow below as a plain list. Nothing pins, nothing snaps. */ .work.work-intro-mobile { padding: 0 1.5rem 5rem; } .work.work-intro-mobile .work-stage { display: block; position: relative; height: 92svh; min-height: 540px; overflow: hidden; } .work.work-intro-mobile .work-container { display: block; } .work.work-intro-mobile .work-header { display: none; } .work.work-intro-mobile .work-chapter-title, .work.work-intro-mobile .work-stage-count { display: none; } .work.work-intro-mobile .work-grid { margin-top: 0.5rem; } .work-clone { pointer-events: none !important; } /* chapter headers inside the mobile list + the dark flip for In Progress */ .work.work-intro-mobile { transition: background-color 0.6s ease; } .work.work-intro-mobile.list-dark { background-color: #0a0a0c; } .work-list-chapter { font-size: clamp(2.5rem, 11vw, 4rem); line-height: 0.95; letter-spacing: -0.03em; margin: 3.4rem 0 1rem; } .work-list-chapter:first-child { margin-top: 0.5rem; } .wlc-b { font-weight: 900; color: #000; transition: color 0.5s ease; } .wlc-i { font-weight: 100; font-style: italic; color: var(--accent); } .work.work-intro-mobile.list-dark .wlc-b { color: #e5e5e5; } /* ---- WIP disclaimer modal (work-in-progress previews) ---- */ .wip-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .wip-modal-overlay.open { opacity: 1; visibility: visible; } .wip-modal { width: min(460px, 100%); background: #ffffff; color: #000000; padding: 2.2rem 2.2rem 2rem; border-top: 4px solid var(--accent); transform: translateY(14px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); } .wip-modal-overlay.open .wip-modal { transform: translateY(0); } .wip-modal-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.22em; color: var(--accent); font-weight: 700; } .wip-modal-title { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; margin: 0.6rem 0 0.7rem; } .wip-modal-body { font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: #444444; margin: 0 0 1.6rem; } .wip-modal-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } .wip-modal-go { border: none; cursor: pointer; background: var(--accent); color: #ffffff; font-family: 'ZTNature', 'Archivo', sans-serif; font-weight: 700; font-size: 0.92rem; padding: 0.85rem 1.5rem; border-radius: 999px; transition: background 0.25s ease, transform 0.25s ease; } .wip-modal-go:hover { background: #dc2626; transform: translateY(-1px); } .wip-modal-close { border: 1px solid rgba(0, 0, 0, 0.25); background: transparent; cursor: pointer; color: #444444; font-family: 'ZTNature', 'Archivo', sans-serif; font-size: 0.92rem; padding: 0.85rem 1.4rem; border-radius: 999px; transition: border-color 0.25s ease, color 0.25s ease; } .wip-modal-close:hover { border-color: #000000; color: #000000; } /* =================================================== REVIEWS — white bg =================================================== */ .reviews { background: #09090b; color: #e5e5e5; padding: 7rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .reviews-container { max-width: 1200px; margin: 0 auto; } .reviews-header { margin-bottom: 4rem; } .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .review-card { padding: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.06); border-top: 2px solid var(--accent); background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .review-card.is-visible { opacity: 1; transform: translateY(0); } .review-quote { position: relative; } .review-icon { color: var(--accent); margin-bottom: 1rem; } .review-text { font-size: 1.125rem; font-weight: 400; line-height: 1.6; color: #e5e5e5; font-style: italic; } .review-author { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .review-avatar { width: 48px; height: 48px; background: #18181b; color: #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; } .review-avatar-photo { object-fit: cover; object-position: center top; border-radius: 0; } .review-name { font-size: 0.9375rem; font-weight: 600; color: #e5e5e5; display: block; } .review-role { font-size: 0.8125rem; font-weight: 300; color: #888888; display: block; margin-top: 0.125rem; } /* =================================================== CONTACT SECTION — dark bg, form + info =================================================== */ .contact-section { background: #ffffff; color: #000000; padding: 7rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } .contact-container { max-width: 1200px; margin: 0 auto; } .contact-header { margin-bottom: 4rem; } .contact-subtitle { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 300; color: #888888; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } /* Form — project brief style: numbered mono labels, underline fields */ .contact-form { counter-reset: field; display: flex; flex-direction: column; gap: 2.1rem; } /* staggered entrance — the brief assembles as you arrive */ .contact-header[data-animate], .contact-form .form-group[data-animate], .form-submit[data-animate], .contact-info[data-animate] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .contact-header.is-visible, .contact-form .form-group.is-visible, .form-submit.is-visible, .contact-info.is-visible { opacity: 1; transform: translateY(0); } /* brief completion meter — fills as the form gets filled out */ .form-meter { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.2rem; } .form-meter-label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em; color: #999999; white-space: nowrap; transition: color 0.3s ease; } .form-meter-track { flex: 1; height: 2px; background: rgba(0, 0, 0, 0.10); overflow: hidden; } .form-meter-fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .form-group { display: flex; flex-direction: column; gap: 0.55rem; } .form-group > label { font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.14em; color: #777777; transition: color 0.25s ease; } .form-group > label::before { counter-increment: field; content: counter(field, decimal-leading-zero) " — "; color: var(--accent); font-weight: 700; } .form-group:focus-within > label { color: #000000; } .form-group input, .form-group textarea { font-family: 'ZTNature', 'Archivo', sans-serif; font-size: 1.15rem; font-weight: 300; padding: 0.55rem 0 0.7rem; background: transparent; border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.16); border-radius: 0; color: #000000; outline: none; transition: border-color 0.3s ease; } .form-group input::placeholder, .form-group textarea::placeholder { color: #9a9a9a; } /* focus: the red underline SWEEPS in from the left instead of color-swapping */ .form-group input, .form-group textarea { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 2px; background-position: left bottom; transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .form-group input:focus, .form-group textarea:focus { background-size: 100% 2px; } .form-group textarea { resize: vertical; min-height: 84px; } .form-optional { text-transform: none; color: #b5b5b5; font-size: 0.72rem; letter-spacing: 0.04em; } /* features as toggle pills */ .form-checkbox-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.85rem 0 0.25rem; } .form-other-wrap { margin-top: 0.85rem; display: flex; } .form-other-wrap input { flex: 1; } .form-other-wrap[hidden] { display: none; } .form-checkbox { position: relative; display: inline-flex; align-items: center; padding: 0.55rem 1.05rem; border: 1px solid rgba(0, 0, 0, 0.22); border-radius: 999px; font-family: 'ZTNature', 'Archivo', sans-serif; font-size: 0.88rem; font-weight: 400; color: #222222; cursor: pointer; text-transform: none; letter-spacing: 0; user-select: none; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .form-checkbox:hover { border-color: #000000; transform: translateY(-1px); } .form-checkbox input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; } .form-checkbox:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 600; } .form-checkbox:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .form-submit { margin-top: 0.6rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.15rem 2.6rem; background: var(--accent); color: #ffffff; border: none; border-radius: 999px; font-family: 'ZTNature', 'Archivo', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; width: fit-content; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .form-submit:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(239, 68, 68, 0.30); } .form-submit svg { transition: transform 0.3s ease; } .form-submit:hover svg { transform: translate(2px, -2px); } /* Contact Info — dossier card with a hard red offset shadow */ .contact-info { align-self: start; position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 2rem; padding: 2.2rem 2.4rem; border: 1px solid rgba(0, 0, 0, 0.85); background: #ffffff; box-shadow: 10px 10px 0 var(--accent); } .contact-info-block { display: flex; flex-direction: column; gap: 0.4rem; } .contact-info-label { font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .contact-info-value { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: #111111; transition: opacity 0.3s ease; } a.contact-info-value:hover { opacity: 0.6; } @media (max-width: 900px) { .contact-info { position: static; } } /* =================================================== FOOTER — light bg =================================================== */ .footer { background: #09090b; color: #e5e5e5; padding: 5rem 1.5rem; } .footer-container { max-width: 1400px; margin: 0 auto; } .footer-cta { border-bottom: 2px solid var(--accent); padding-bottom: 3rem; margin-bottom: 3rem; scroll-margin-top: 5rem; } .footer-eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 1rem; text-transform: uppercase; } .footer-sub { font-size: 1rem; color: #888; margin-top: 1.25rem; font-weight: 300; } .footer-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3rem; } .footer-contact-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; text-decoration: none; color: inherit; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .footer-contact-item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); transform: translateY(-2px); } .footer-contact-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; color: #888; } .footer-contact-value { font-size: 1.125rem; font-weight: 500; color: #e5e5e5; letter-spacing: -0.01em; } @media (max-width: 640px) { .footer-contact-row { grid-template-columns: 1fr; } } .footer-heading { font-size: clamp(2rem, 8.5vw, 12rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; color: #e5e5e5; white-space: nowrap; } .footer-grid { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; } .footer-col { display: flex; flex-direction: column; gap: 0.75rem; } .footer-link { font-size: 1rem; font-weight: 400; color: #e5e5e5; transition: opacity 0.3s ease; text-decoration: none; position: relative; display: inline-block; width: fit-content; } .footer-link:hover { text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--accent); color: var(--accent); } .footer-col-email { justify-content: center; } .footer-email { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; color: #e5e5e5; transition: opacity 0.3s ease; word-break: break-all; } .footer-email:hover { opacity: 0.6; } .footer-col-rights { text-align: right; justify-content: flex-end; } .footer-col-rights p { font-size: 0.875rem; font-weight: 400; color: #888888; line-height: 1.5; } /* =================================================== ANGLED SECTION DIVIDERS =================================================== */ .section-divider { position: relative; } .section-divider::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; z-index: 2; } /* =================================================== MOBILE-UPGRADE ADDITIONS (each block is self-contained and easy to remove if you want to prune an effect) =================================================== */ /* --- Count-up stats (ANIM D, part 1) --- */ .cu { font-variant-numeric: tabular-nums; } /* --- Decode / scramble labels (ANIM A): flashes red while decoding --- */ [data-decode].decoding { color: var(--accent); } /* --- Red-bar wipe reveal on section titles (ANIM B) --- JS adds .will-wipe on load (only when motion is OK), then .wiped in view. No-JS / reduced-motion → titles stay fully visible (never clipped). */ .section-title { position: relative; } .section-title.will-wipe { clip-path: inset(0 100% 0 0); } .section-title.will-wipe.wiped { clip-path: inset(0 0 0 0); transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1); } .section-title.will-wipe::after { content: ''; position: absolute; top: -0.04em; bottom: -0.04em; left: 0; width: 16%; background: var(--accent); transform: translateX(-130%); opacity: 0; pointer-events: none; } .section-title.will-wipe.wiped::after { animation: titleBar 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes titleBar { 0% { transform: translateX(-130%); opacity: 1; } 55% { opacity: 1; } 100% { transform: translateX(700%); opacity: 0; } } /* --- Marquee services ticker (ANIM C) --- */ .marquee { background: #0a0a0c; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.5rem 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.55rem; } .marquee-row { overflow: hidden; white-space: nowrap; transition: transform 0.2s ease-out; will-change: transform; } .marquee-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marqueeScroll 30s linear infinite; } .marquee-track--rev { animation-direction: reverse; animation-duration: 36s; } .marquee-track span { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.01em; text-transform: uppercase; color: #e5e5e5; } .marquee-track i { color: var(--accent); font-style: normal; margin: 0 1.1rem; font-size: 1.05rem; vertical-align: middle; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* --- Sticky mobile CTA --- */ .sticky-cta { position: fixed; z-index: 60; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translate(-50%, 160%); display: none; align-items: center; gap: 0.45rem; padding: 0.95rem 1.7rem; background: var(--accent); color: #ffffff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.95rem; border-radius: 999px; box-shadow: 0 12px 30px rgba(239, 68, 68, 0.42); text-decoration: none; opacity: 0; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease; } .sticky-cta.visible { transform: translate(-50%, 0); opacity: 1; } @media (max-width: 768px) { .sticky-cta { display: inline-flex; } } /* =================================================== RESPONSIVE — Mobile (< 768px) =================================================== */ @media (max-width: 768px) { .nav-links { display: none; } .nav-menu-btn { display: block; } .section-title { font-size: 12vw; } /* Hero — content sits upper-center, planet rises as a horizon below */ .hero { height: auto; min-height: 100svh; flex-direction: column; justify-content: flex-start; padding-top: 11vh; } .hero-planet { width: 168vw; transform: translate(-50%, 40%); opacity: 0.72; } .hero-heading { font-size: 16vw; } .hero-label { font-size: 0.8rem; letter-spacing: 0.22em; padding: 0.6rem 1rem; margin-bottom: 1.4rem; } .hero-acronym { gap: 0.55rem; letter-spacing: 0.12em; margin-top: 1.2rem; } .hero-actions { margin-top: 2rem; gap: 0.7rem; } .hero-cta, .hero-cta-ghost { padding: 0.95rem 1.7rem; font-size: 0.9rem; } .hero-stats { margin-top: 1.7rem; } .manifesto { padding: 0.85rem 1.25rem; } .manifesto-line { font-size: clamp(0.95rem, 4.4vw, 1.3rem); white-space: normal; text-align: center; line-height: 1.5; } .manifesto-line::before { margin-right: 0.4em; } .hero-description { font-size: 1rem; margin-top: 2rem; } .hero-manifesto-line { font-size: clamp(0.9rem, 4.5vw, 1.3rem); } /* About */ .about { padding: 4rem 1rem; } .about-content { grid-template-columns: 1fr; } .about-photo-col { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.12); } .about-headshot { min-height: 320px; } .about-text-col { padding: 2rem 1rem; } .about-highlights { grid-template-columns: 1fr; } .about-highlight { border-right: none; } .about-highlight:last-child { border-bottom: none; } /* Manifesto */ /* Services */ .services { padding: 4rem 1rem; } .services-grid { grid-template-columns: 1fr; gap: 1rem; } /* Pricing */ .pricing { padding: 4rem 1rem; } .pricing-grid, .pricing-grid--2col { grid-template-columns: 1fr; gap: 1.5rem; } .pricing-amount { font-size: 2.5rem; } .pricing-badge { left: 1.5rem; right: 1.5rem; } .pricing-build-note { padding: 1.75rem 1.5rem; gap: 1.5rem; } .pricing-build-note-title { font-size: 1.3rem; } .pricing-build-note-steps { grid-template-columns: 1fr; gap: 1.25rem; } /* Workflow */ .workflow { padding: 4rem 1rem; } .workflow-step { grid-template-columns: 60px 1fr; gap: 1rem; padding: 2rem 0; } .workflow-step-title { font-size: 1.25rem; } /* Reviews */ .reviews { padding: 4rem 1rem; } .reviews-grid { grid-template-columns: 1fr; gap: 1.5rem; } .pricing-card { padding: 1.9rem 1.6rem; } .review-card { padding: 1.9rem; } .marquee { padding: 1.1rem 0; } .marquee-track span { font-size: 1.3rem; } .marquee-track i { margin: 0 0.8rem; } /* Contact */ .contact-section { padding: 4rem 1rem; } .contact-grid { grid-template-columns: 1fr; gap: 3rem; } .contact-info { padding-left: 0; } /* Footer */ .footer { padding: 3rem 1rem; } .footer-heading { font-size: clamp(2.5rem, 13vw, 5rem); white-space: nowrap; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-col-email { order: -1; } .footer-col-rights { text-align: left; } } /* Small phones (<= 480px) */ @media (max-width: 480px) { .hero { padding-top: 9vh; } .hero-heading { font-size: 17.5vw; } .hero-actions { flex-direction: column; width: 100%; max-width: 320px; } .hero-cta, .hero-cta-ghost { width: 100%; justify-content: center; } .hero-stats { font-size: 0.55rem; letter-spacing: 0.16em; } .section-title { font-size: 13.5vw; } .marquee-track span { font-size: 1.15rem; } } /* Tablet (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .hero-heading { font-size: 11vw; } .hero-label { font-size: 0.65rem; } .hero-actions { gap: 0.7rem; margin-top: 2.2rem; } .hero-cta, .hero-cta-ghost { padding: 0.9rem 1.7rem; font-size: 0.86rem; } .hero-planet { width: 220vw; transform: translate(-50%, 60%); } .hero-stats { letter-spacing: 0.2em; padding: 0 1rem; } .section-title { font-size: 10vw; } .services-grid { grid-template-columns: 1fr; } .pricing-grid, .pricing-grid--2col { grid-template-columns: 1fr; } .about-content { gap: 2.5rem; } } /* =================================================== STATS BAND — black contrast band (About -> How It Works) =================================================== */ .stats-band { background: #000000; padding: 4.75rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .stats-band-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .sb-item { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-align: center; } .sb-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.04em; color: #ffffff; font-variant-numeric: tabular-nums; } .sb-item:nth-child(2) .sb-num { color: var(--accent); } .sb-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8a8a; } @media (max-width: 640px) { .stats-band { padding: 3.25rem 1.5rem; } .stats-band-inner { grid-template-columns: 1fr; gap: 2.25rem; } } /* =================================================== REVIEWS — scroll-fade black -> white + coming-soon =================================================== */ .reviews { justify-content: flex-start; } .reviews-grid { row-gap: clamp(7rem, 26vh, 18rem); } /* smooth color flip as the section crosses into its light half */ .reviews .review-card, .reviews .review-text, .reviews .review-name, .reviews .review-role, .reviews .review-author, .reviews .review-soon-text, .reviews .section-title-bold { transition: background-color 0.55s ease, color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease; } .reviews.is-light .review-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08); } .reviews.is-light .review-text { color: #222222; } .reviews.is-light .review-name { color: #111111; } .reviews.is-light .review-role { color: #777777; } .reviews.is-light .review-author { border-top-color: rgba(0, 0, 0, 0.10); } .reviews.is-light .review-soon-text { color: #666666; } .reviews.is-light .section-title-bold { color: #111111; } /* coming-soon cards */ .review-card--soon { justify-content: flex-start; gap: 1.75rem; } .review-soon { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; } .review-soon-badge { align-self: flex-start; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px dashed rgba(239, 68, 68, 0.55); border-radius: 999px; padding: 0.4rem 0.85rem; } .review-soon-text { margin: 0; font-size: 1.1rem; font-weight: 300; font-style: italic; color: #8a8a8a; } .review-avatar--initials { background: var(--accent); color: #ffffff; border-radius: 50%; font-family: 'Archivo', sans-serif; font-weight: 800; } @media (max-width: 768px) { .reviews-grid { grid-template-columns: 1fr; row-gap: 4rem; } }