/* ========================================================================== MITRAGAN — Idea to Reality Design tokens: pure black/white system, no color accent. Display: Space Grotesk · Body: Inter · Utility/mono: JetBrains Mono ========================================================================== */ /* Fonts loaded via in — see each HTML file */ :root{ --black:#0a0a0a; --near-black:#111111; --charcoal:#1c1c1c; --line-dark: rgba(255,255,255,.14); --line-dark-soft: rgba(255,255,255,.07); --white:#fbfaf7; --paper:#f1efe9; --ink:#0f0f0f; --gray:#6b6b68; --line-light: rgba(0,0,0,.12); --line-light-soft: rgba(0,0,0,.06); --ease: cubic-bezier(.16,.84,.44,1); --ease-soft: cubic-bezier(.22,.61,.36,1); --container: 1280px; --gutter: clamp(20px, 5vw, 64px); --fs-display: clamp(2.6rem, 8vw, 7.2rem); --fs-h1: clamp(2.2rem, 5.5vw, 4.6rem); --fs-h2: clamp(1.7rem, 3.4vw, 2.8rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.5rem); --fs-body: clamp(1rem, 1vw, 1.05rem); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: auto; } html.lenis, html.lenis body{ height: auto; } body{ margin:0; background: var(--black); color: var(--white); font-family: 'Inter', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: default; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } button{ font-family: inherit; cursor:pointer; } ::selection{ background: var(--white); color:var(--black); } .container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .mono{ font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; } .eyebrow{ font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); display: flex; align-items: center; gap: 10px; } .eyebrow::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,.08); } .section-light .eyebrow::before{ box-shadow: 0 0 0 3px rgba(0,0,0,.06); } h1,h2,h3,h4{ font-family: 'Space Grotesk', sans-serif; margin: 0; line-height: 1.02; letter-spacing: -.02em; font-weight: 500; } p{ margin:0; line-height:1.65; color: rgba(255,255,255,.68); } .section-light p{ color: rgba(0,0,0,.62); } /* ---------- Custom cursor ---------- */ .cursor-dot{ position: fixed; top:0; left:0; width: 10px; height: 10px; border-radius: 50%; background: var(--white); pointer-events: none; z-index: 9999; mix-blend-mode: difference; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease); will-change: transform; } .cursor-dot.hover{ width: 44px; height: 44px; } @media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } } /* ---------- Noise / grain overlay ---------- */ .grain{ position: fixed; inset:0; pointer-events: none; z-index: 2000; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Nav ---------- */ .nav{ position: fixed; top:0; left:0; right:0; z-index: 500; padding: 22px var(--gutter); display:flex; align-items:center; justify-content:space-between; transition: background .5s var(--ease), padding .4s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled{ background: rgba(10,10,10,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark-soft); } .nav-brand{ display:flex; align-items:center; gap:12px; } .nav-brand img{ height: 32px; width:auto; } .nav-brand span{ font-family:'Space Grotesk'; font-weight:600; font-size:1.02rem; letter-spacing:.02em; } .nav-links{ display:flex; align-items:center; gap: 40px; list-style:none; margin:0; padding:0; } .nav-links a{ font-family:'JetBrains Mono'; font-size:.78rem; letter-spacing:.08em; text-transform: uppercase; position:relative; padding:4px 0; color: rgba(255,255,255,.72); transition: color .3s var(--ease); } .nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--white); transition: width .35s var(--ease); } .nav-links a:hover, .nav-links a.active{ color: var(--white); } .nav-links a:hover::after, .nav-links a.active::after{ width:100%; } .nav-cta{ border: 1px solid var(--line-dark); padding: 10px 22px; border-radius: 999px; font-family:'JetBrains Mono'; font-size:.74rem; letter-spacing:.08em; text-transform: uppercase; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .nav-cta:hover{ background: var(--white); color: var(--black); border-color: var(--white); } .nav-toggle{ display:none; width: 40px; height: 40px; border:1px solid var(--line-dark); border-radius: 50%; background: none; position: relative; flex-shrink:0; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:11px; right:11px; height:1px; background:var(--white); transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle span{ top:50%; } .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; } .nav-toggle.open span{ background: transparent; } .nav-toggle.open span::before{ transform: translateY(6px) rotate(45deg); } .nav-toggle.open span::after{ transform: translateY(-6px) rotate(-45deg); } .mobile-menu{ position: fixed; inset:0; background: var(--black); z-index: 450; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap: 22px; padding: 0 var(--gutter); transform: translateY(-100%); transition: transform .55s var(--ease); } .mobile-menu.open{ transform: translateY(0); } .mobile-menu a{ font-family:'Space Grotesk'; font-size: 2.4rem; font-weight:500; color: rgba(255,255,255,.85); } .mobile-menu a:hover{ color:#fff; } .mobile-menu .mono{ color: var(--gray); font-size:.8rem; margin-top: 20px; } @media (max-width: 860px){ .nav-links{ display:none; } .nav-cta{ display:none; } .nav-toggle{ display:block; } } /* ---------- Hero ---------- */ .hero{ position:relative; min-height: 100svh; display:flex; flex-direction:column; justify-content:center; padding: 140px var(--gutter) 80px; overflow:hidden; } .hero-canvas{ position:absolute; inset:0; z-index:0; opacity: 0; transition: opacity 1.4s var(--ease); } .hero-canvas.ready{ opacity:1; } .hero-bg-grid{ position:absolute; inset:0; z-index:0; background-image: linear-gradient(var(--line-dark-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark-soft) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 60% at 78% 45%, #000 30%, transparent 78%); } .hero-content{ position:relative; z-index:2; max-width: 1180px; } .hero-eyebrow{ margin-bottom: 26px; } .hero-title{ font-size: var(--fs-display); font-weight: 600; text-wrap: balance; } .hero-title .line{ display:block; overflow:hidden; } .hero-title .line span{ display:inline-block; will-change: transform; } .hero-title em{ font-style: normal; -webkit-text-stroke: 1.5px var(--white); color: transparent; } .hero-sub{ max-width: 520px; margin-top: 30px; font-size: 1.05rem; } .hero-actions{ display:flex; gap:18px; margin-top: 46px; flex-wrap:wrap; } .hero-scroll{ position:absolute; left: var(--gutter); bottom: 34px; display:flex; align-items:center; gap:12px; font-family:'JetBrains Mono'; font-size:.7rem; letter-spacing:.16em; text-transform: uppercase; color: var(--gray); z-index:2; } .hero-scroll .bar{ width:1px; height: 44px; background: var(--line-dark); position:relative; overflow:hidden; } .hero-scroll .bar::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--white); animation: scrollbar 2.2s var(--ease) infinite; } @keyframes scrollbar{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} } @media (max-width: 860px){ .hero{ padding-bottom: 280px; } } .btn{ display:inline-flex; align-items:center; gap:10px; padding: 15px 30px; border-radius: 999px; font-family:'JetBrains Mono'; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); border: 1px solid transparent; white-space: nowrap; } .btn-primary{ background: var(--white); color: var(--black); } .btn-primary:hover{ transform: translateY(-3px); } .btn-ghost{ border-color: var(--line-dark); color: var(--white); } .btn-ghost:hover{ background: rgba(255,255,255,.06); transform: translateY(-3px); } .section-light .btn-ghost{ border-color: var(--line-light); color: var(--ink); } .section-light .btn-ghost:hover{ background: rgba(0,0,0,.05); } .btn-arrow{ transition: transform .4s var(--ease); } .btn:hover .btn-arrow{ transform: translateX(4px); } /* ---------- Sections generic ---------- */ section{ position: relative; } .section-light{ background: var(--white); color: var(--ink); } .section-light p{ color: rgba(0,0,0,.6); } .pad{ padding: clamp(80px, 12vw, 160px) var(--gutter); } .pad-sm{ padding: clamp(50px, 7vw, 90px) var(--gutter); } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 40px; margin-bottom: clamp(48px, 7vw, 90px); flex-wrap: wrap; } .section-head h2{ font-size: var(--fs-h2); } .section-head .desc{ max-width: 360px; } .reveal{ opacity:0; transform: translateY(46px); } /* ---------- Marquee ---------- */ .marquee-wrap{ border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); overflow:hidden; padding: 22px 0; background: var(--black); } .section-light .marquee-wrap{ border-color: var(--line-light); background: var(--white); } .marquee{ display:flex; width:max-content; animation: marquee 26s linear infinite; } .marquee span{ font-family:'Space Grotesk'; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight:500; padding: 0 2.2rem; display:flex; align-items:center; gap: 2.2rem; white-space:nowrap; color: rgba(255,255,255,.85); } .section-light .marquee span{ color: rgba(0,0,0,.8); } .marquee span .node-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; } @keyframes marquee{ to{ transform: translateX(-50%); } } /* ---------- Process ---------- */ .process{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line-dark); border: 1px solid var(--line-dark); } .process-step{ background: var(--black); padding: 40px 30px 44px; position:relative; } .process-step .num{ font-family:'JetBrains Mono'; font-size:.78rem; color: var(--gray); } .process-step h3{ margin-top: 60px; font-size: var(--fs-h3); } .process-step p{ margin-top: 14px; font-size:.92rem; } .process-step .node{ position:absolute; top:38px; right:30px; width:9px; height:9px; border-radius:50%; border: 1px solid var(--line-dark); } .process-step.active .node{ background: var(--white); border-color: var(--white); } @media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .process{ grid-template-columns: 1fr; } } /* ---------- Stats ---------- */ .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line-dark); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); } .stat{ background: var(--black); padding: 50px 30px; text-align:left; } .stat .num{ font-family:'Space Grotesk'; font-size: clamp(2.2rem,4.4vw,3.6rem); font-weight:600; } .stat .lbl{ margin-top:8px; font-size:.82rem; color: var(--gray); font-family:'JetBrains Mono'; letter-spacing:.05em; } @media (max-width: 760px){ .stats{ grid-template-columns: 1fr 1fr; } } /* ---------- Cards: projects ---------- */ .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; } @media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } } .card-project{ position:relative; border: 1px solid var(--line-dark); border-radius: 18px; overflow:hidden; aspect-ratio: 4/5; background: var(--charcoal); } .card-project img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); transform: scale(1.08); transition: transform 1.1s var(--ease), filter .6s var(--ease); } .card-project:hover img{ transform: scale(1); filter: grayscale(0.2) contrast(1.05); } .card-project::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.92) 100%); } .card-project-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px; } .card-project .tag{ font-family:'JetBrains Mono'; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.6); } .card-project h3{ margin-top:10px; font-size: 1.4rem; } .card-project .stack{ margin-top: 14px; display:flex; gap:8px; flex-wrap:wrap; opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .card-project:hover .stack{ opacity:1; transform: translateY(0); } .card-project .stack span{ font-family:'JetBrains Mono'; font-size:.66rem; padding: 5px 10px; border:1px solid var(--line-dark); border-radius:999px; color: rgba(255,255,255,.75); } .filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 46px; } .filter-btn{ padding: 9px 20px; border-radius:999px; border:1px solid var(--line-dark); font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.6); transition: all .3s var(--ease); background:none; } .filter-btn.active, .filter-btn:hover{ background: var(--white); color:var(--black); border-color:var(--white); } /* ---------- Services ---------- */ .services{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-light); border:1px solid var(--line-light); } .service{ background: var(--white); padding: 44px; transition: background .4s var(--ease); } .service:hover{ background: var(--paper); } .service .icon{ width:38px; height:38px; margin-bottom: 28px; } .service h3{ font-size: var(--fs-h3); } .service p{ margin-top: 12px; font-size:.92rem; } @media (max-width:760px){ .services{ grid-template-columns: 1fr; } } /* ---------- Testimonials ---------- */ .t-grid{ columns: 3 320px; column-gap: 24px; } .t-card{ break-inside: avoid; margin-bottom: 24px; border:1px solid var(--line-dark); border-radius: 18px; padding: 34px; background: var(--charcoal); } .t-card .quote-mark{ font-family:'Space Grotesk'; font-size:2.6rem; line-height:1; opacity:.3; } .t-card p.quote{ margin-top:16px; font-size:1.02rem; color: rgba(255,255,255,.85); line-height:1.6; } .t-person{ display:flex; align-items:center; gap:14px; margin-top:26px; } .t-avatar{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:600; font-size:.92rem; flex-shrink:0; } .t-name{ font-weight:600; font-size:.92rem; } .t-role{ font-family:'JetBrains Mono'; font-size:.72rem; color:var(--gray); margin-top:2px; } .featured-quote{ text-align:center; max-width: 900px; margin: 0 auto; } .featured-quote p{ font-family:'Space Grotesk'; font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--white); font-weight:500; letter-spacing:-.01em; line-height:1.25; } .section-light .featured-quote p{ color: var(--ink); } /* ---------- CTA band ---------- */ .cta-band{ text-align:center; position:relative; overflow:hidden; } .cta-band h2{ font-size: clamp(2.2rem, 6vw, 5rem); max-width: 900px; margin: 0 auto; } .cta-band .btn{ margin-top: 42px; } .cta-nodes{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; } /* ---------- Form ---------- */ .join-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:flex-start; } @media (max-width: 900px){ .join-grid{ grid-template-columns:1fr; gap:56px; } } .field{ margin-bottom: 26px; } .field label{ display:block; font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gray); margin-bottom: 10px; } .field input, .field textarea, .field select{ width:100%; background: transparent; border:none; border-bottom: 1px solid var(--line-dark); color: var(--white); font-family:'Inter'; font-size: 1.02rem; padding: 12px 2px; transition: border-color .3s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--white); } .field select option{ background: var(--black); color: var(--white); } .field textarea{ resize: vertical; min-height: 100px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap: 24px; } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } } .role-pick{ display:flex; flex-wrap:wrap; gap:10px; } .role-chip{ padding: 10px 18px; border-radius:999px; border:1px solid var(--line-dark); font-family:'JetBrains Mono'; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color: rgba(255,255,255,.65); background:none; transition: all .3s var(--ease); } .role-chip.active{ background:var(--white); color:var(--black); border-color:var(--white); } .submit-row{ display:flex; align-items:center; gap:20px; margin-top: 10px; } .form-status{ font-family:'JetBrains Mono'; font-size:.78rem; color: var(--gray); } .form-status.ok{ color: var(--white); } .join-list{ list-style:none; margin:0; padding:0; } .join-list li{ padding: 26px 0; border-top: 1px solid var(--line-dark); display:flex; justify-content:space-between; align-items:center; gap:20px; } .join-list li:last-child{ border-bottom:1px solid var(--line-dark); } .join-list .role-title{ font-family:'Space Grotesk'; font-size:1.15rem; } .join-list .role-type{ font-family:'JetBrains Mono'; font-size:.7rem; color: var(--gray); text-transform:uppercase; } /* ---------- Page header (inner pages) ---------- */ .page-header{ padding: 170px var(--gutter) 90px; position:relative; overflow:hidden; } .page-header h1{ font-size: var(--fs-h1); margin-top: 22px; max-width: 900px; } .page-header .sub{ margin-top: 22px; max-width: 480px; } .page-header-canvas{ position:absolute; inset:0; z-index:0; opacity:.55; } /* ---------- Footer ---------- */ footer{ background: var(--black); border-top: 1px solid var(--line-dark); padding: 90px var(--gutter) 34px; } .footer-top{ display:flex; justify-content:space-between; gap: 60px; flex-wrap:wrap; padding-bottom: 70px; } .footer-brand img{ height: 40px; margin-bottom: 20px; } .footer-brand p{ max-width: 320px; } .footer-cols{ display:flex; gap: 80px; flex-wrap:wrap; } .footer-col h4{ font-family:'JetBrains Mono'; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gray); margin-bottom: 20px; font-weight:500; } .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .footer-col a{ color: rgba(255,255,255,.72); font-size:.92rem; transition: color .3s; } .footer-col a:hover{ color:#fff; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 28px; border-top:1px solid var(--line-dark-soft); font-family:'JetBrains Mono'; font-size:.72rem; color: var(--gray); flex-wrap:wrap; gap:14px; } /* ---------- Scroll reveal via JS toggling class ---------- */ .is-visible{ animation: revealUp 1s var(--ease-soft) forwards; } @keyframes revealUp{ to{ opacity:1; transform: translateY(0); } } /* ---------- utils ---------- */ .center{ text-align:center; } .mt-lg{ margin-top: clamp(60px,8vw,110px); } @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }