/*! * Mission:Told site stylesheet * AI-native digital agency for social enterprises and nonprofits. * * Design system uses a light/dark theme via the [data-theme] attribute on . * Brand colors stay constant; semantic tokens (--page-bg, --page-text, --card-bg, etc.) * flip between modes. See the :root and [data-theme="dark"] blocks below. */ :root, [data-theme="light"] { --cream: #f4ede2; --cream-warm: #ebe0cd; --forest: #1d3326; --forest-deep: #0f1f15; --moss: #4a6b4f; --amber: #e8743b; --amber-bright: #f08a47; --gold: #d4a437; --ink: #1a1a17; --paper: #faf6ef; --rust: #8b3a1d; /* Semantic tokens (these flip in dark mode) */ --page-bg: var(--cream); --page-bg-warm: var(--cream-warm); --page-text: var(--forest); --page-text-soft: var(--moss); --card-bg: var(--paper); --card-border: rgba(29, 51, 38, 0.08); --card-divider: rgba(29, 51, 38, 0.12); --card-shadow: 0 24px 60px -20px rgba(29, 51, 38, 0.18); --nav-bg: rgba(244, 237, 226, 0.85); --nav-border: rgba(29, 51, 38, 0.08); /* Inverted sections (.shift, .why, footer, etc.) stay dark in light mode */ --inv-bg: var(--forest); --inv-bg-deep: var(--forest-deep); --inv-text: var(--cream); --inv-card-bg: rgba(244, 237, 226, 0.05); --inv-card-border: rgba(244, 237, 226, 0.12); /* Button (forest pill on light bg, contrast button) */ --btn-dark-bg: var(--forest); --btn-dark-text: var(--cream); --serif: 'Fraunces', Georgia, serif; --display: 'Instrument Serif', Georgia, serif; --sans: 'Inter Tight', -apple-system, sans-serif; } [data-theme="dark"] { /* Page surfaces flip to warm dark values (not pure black, keeps editorial mood) */ --page-bg: #14201a; --page-bg-warm: #1c2a23; --page-text: #f0e5d4; --page-text-soft: #9aaea0; --card-bg: #1f2e26; --card-border: rgba(244, 237, 226, 0.08); --card-divider: rgba(244, 237, 226, 0.1); --card-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); --nav-bg: rgba(20, 32, 26, 0.88); --nav-border: rgba(244, 237, 226, 0.08); /* Inverted sections become slightly elevated in dark mode (subtle differentiation) */ --inv-bg: #1f2e26; --inv-bg-deep: #0a1410; --inv-text: #f4ede2; --inv-card-bg: rgba(244, 237, 226, 0.04); --inv-card-border: rgba(244, 237, 226, 0.1); /* Buttons in dark mode: the dark-pill button becomes amber-outlined or amber-filled to stand out */ --btn-dark-bg: var(--amber); --btn-dark-text: #14201a; /* Soft text (was --moss, kept readable in dark mode) */ --moss: #9aaea0; } /* Smooth transitions */ html, body, nav, section, footer, .modal, .service-card, .step, .why-card, .obj-item, .founder-card, .talent-card, .nav-cta, .btn, .form-input, .form-textarea, .credential-tag, .founder-link, .step-number, .marquee, .problem-result, .testimonial-strip, .modal-close, .obj-toggle, .theme-toggle { transition: background-color 0.35s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--page-bg); color: var(--page-text); font-family: var(--sans); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* ========== NAV ========== */ nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--nav-border); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .nav-row { display: flex; align-items: center; max-width: 1216px; margin: 0 auto; } .nav-row-top { justify-content: space-between; padding: 16px 0 14px; gap: 16px; } .nav-row-bottom { padding: 12px 0 14px; border-top: 1px solid var(--nav-border); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-row-bottom::-webkit-scrollbar { display: none; } .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo { font-family: var(--display); font-size: 26px; font-style: italic; color: var(--page-text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; } .logo-mark { width: 44px; height: 18px; position: relative; flex-shrink: 0; display: flex; align-items: center; } .logo-mark::before { /* Left dot: small, forest with cream center (the "mission") */ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: var(--page-bg); border: 2px solid var(--page-text); border-radius: 50%; box-sizing: border-box; z-index: 2; } .logo-mark::after { /* Right dot: larger, amber (the "told") */ content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--amber); border-radius: 50%; z-index: 2; } .logo-mark .connector { /* Tapered connecting line */ position: absolute; left: 12px; right: 16px; top: 50%; transform: translateY(-50%); height: 3px; background: var(--gold); border-radius: 2px; z-index: 1; } .logo-text { line-height: 1; } .logo-text .punct { color: var(--amber); font-style: italic; font-weight: 500; } /* Bottom row nav links: caps, letter-spaced, underline-on-hover */ .nav-links { display: flex; gap: 32px; list-style: none; align-items: center; width: 100%; } .nav-links a { color: var(--page-text); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.2s ease, opacity 0.2s ease; white-space: nowrap; position: relative; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .nav-links a:hover { color: var(--amber); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links .ext-arrow { font-size: 11px; opacity: 0.6; transition: transform 0.2s ease; } .nav-links a:hover .ext-arrow { transform: translate(2px, -2px); opacity: 1; } /* Theme toggle button */ .theme-toggle { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--card-border); background: transparent; color: var(--page-text); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: all 0.25s ease; } .theme-toggle:hover { background: var(--card-bg); border-color: var(--page-text); color: var(--amber); transform: rotate(-12deg); } .theme-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .theme-toggle svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Show moon in light mode, sun in dark mode */ [data-theme="light"] .theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .nav-cta { background: var(--btn-dark-bg); color: var(--btn-dark-text) !important; padding: 10px 22px; border-radius: 10px; transition: all 0.3s ease !important; cursor: pointer; border: none; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; } .nav-cta:hover { background: var(--amber) !important; color: var(--cream) !important; opacity: 1 !important; transform: translateY(-1px); } /* ========== HERO ========== */ .hero { padding: 60px 0 140px; position: relative; overflow: hidden; } .hero-content { max-width: 980px; margin: 0 auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--moss); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 32px; } .eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--moss); } .hero h1 { font-family: var(--display); font-size: clamp(48px, 8vw, 88px); line-height: 0.98; letter-spacing: -0.025em; color: var(--page-text); margin-bottom: 36px; font-weight: 400; } .hero h1 em { font-style: italic; color: var(--amber); position: relative; display: inline-block; font-size: clamp(32px, 8vw, 48px); } .hero h1 em::after { content: ''; position: absolute; bottom: 0.08em; left: -2%; width: 104%; height: 0.12em; background: var(--gold); opacity: 0.35; z-index: -1; border-radius: 4px; } .hero-sub { font-size: 19px; line-height: 1.6; color: var(--page-text); opacity: 0.78; margin: 0 auto 44px; max-width: 720px; } .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; border-radius: 100px; font-family: var(--sans); font-size: 15px; font-weight: 500; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); letter-spacing: 0.01em; } .btn-primary { background: var(--amber); color: var(--paper); box-shadow: 0 4px 0 var(--rust), 0 12px 24px -8px rgba(139, 58, 29, 0.4); } .btn-primary:hover { background: var(--amber-bright); transform: translateY(-2px); box-shadow: 0 6px 0 var(--rust), 0 18px 32px -8px rgba(139, 58, 29, 0.5); } .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rust), 0 6px 12px -4px rgba(139, 58, 29, 0.4); } .btn-secondary { background: transparent; color: var(--page-text); border: 1.5px solid var(--page-text); } .btn-secondary:hover { background: var(--page-text); color: var(--page-bg); } .btn .arrow { transition: transform 0.3s ease; } .btn:hover .arrow { transform: translateX(4px); } .hero-supporting { margin-top: 44px; font-family: var(--display); font-style: italic; font-size: 19px; color: var(--moss); } /* Decorative hero ornaments */ .hero::before { content: '✦'; position: absolute; top: 120px; left: 8%; font-family: var(--display); color: var(--amber); opacity: 0.3; font-size: 60px; transform: rotate(-15deg); } .hero::after { content: '✦'; position: absolute; bottom: 180px; right: 10%; font-family: var(--display); color: var(--gold); opacity: 0.4; font-size: 44px; transform: rotate(20deg); } /* ========== MARQUEE ========== */ .marquee { background: var(--inv-bg); color: var(--inv-text); padding: 28px 0; overflow: hidden; border-top: 1px solid var(--inv-bg-deep); border-bottom: 1px solid var(--inv-bg-deep); } .marquee-track { display: flex; gap: 64px; white-space: nowrap; animation: scroll 40s linear infinite; font-family: var(--display); font-style: italic; font-size: 28px; } .marquee-track span { display: inline-flex; align-items: center; gap: 64px; } .marquee-track .dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; flex-shrink: 0; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========== SECTION ========== */ section { padding: 130px 0; position: relative; } .section-label { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--amber); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 24px; } .section-label::before { content: '✦'; font-size: 14px; } .section-headline { font-family: var(--display); font-size: clamp(40px, 5.5vw, 68px); line-height: 1.02; letter-spacing: -0.02em; color: var(--page-text); font-weight: 400; max-width: 880px; } .section-headline em { font-style: italic; color: var(--amber); } /* ========== PROBLEM ========== */ .problem { background: var(--page-bg-warm); } .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; margin-top: 60px; align-items: start; } .problem-lead { font-family: var(--display); font-size: 28px; font-style: italic; line-height: 1.3; color: var(--page-text); border-left: 3px solid var(--amber); padding-left: 28px; } .problem-list { list-style: none; } .problem-list li { padding: 24px 0; border-bottom: 1px solid var(--card-divider); font-size: 17px; color: var(--page-text); display: flex; align-items: flex-start; gap: 16px; } .problem-list li:last-child { border-bottom: none; } .problem-list .num { font-family: var(--display); font-style: italic; color: var(--amber); font-size: 22px; flex-shrink: 0; line-height: 1; padding-top: 2px; } .problem-result { margin-top: 60px; padding: 36px; background: var(--inv-bg); color: var(--inv-text); border-radius: 24px; font-family: var(--display); font-size: 26px; font-style: italic; line-height: 1.4; grid-column: 1 / -1; text-align: center; } .problem-result em { color: var(--amber); font-style: normal; font-weight: 400; } /* ========== SHIFT ========== */ .shift { background: var(--inv-bg); color: var(--inv-text); overflow: hidden; position: relative; } .shift::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(232, 116, 59, 0.08) 0%, transparent 60%); pointer-events: none; } .shift .section-label { color: var(--amber); } .shift .section-headline { color: var(--cream); } .shift .section-headline em { color: var(--amber); } .shift-content { margin-top: 64px; max-width: 760px; position: relative; z-index: 1; } .shift-text p { font-size: 21px; line-height: 1.65; margin-bottom: 28px; opacity: 0.85; } .shift-text p strong { color: var(--cream); font-weight: 600; opacity: 1; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 26px; } .shift-list { list-style: none; margin-top: 36px; margin-bottom: 40px; } .shift-list li { padding: 22px 0; font-size: 19px; border-bottom: 1px solid rgba(244, 237, 226, 0.15); display: flex; align-items: center; gap: 20px; } .shift-list .arrow-icon { color: var(--amber); font-family: var(--display); font-style: italic; font-size: 32px; line-height: 1; } .shift-conclusion { margin-top: 48px; font-family: var(--display); font-size: 40px; font-style: italic; color: var(--amber); line-height: 1.1; } /* ========== SERVICES ========== */ .services { background: var(--page-bg); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 80px; } .service-card { background: var(--card-bg); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 80px 1fr 1fr; gap: 48px; align-items: start; border: 1px solid var(--card-border); transition: all 0.4s ease; position: relative; overflow: hidden; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); border-color: var(--amber); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 4px; background: var(--amber); transition: width 0.5s ease; } .service-card:hover::before { width: 100%; } .service-num { font-family: var(--display); font-style: italic; font-size: 64px; color: var(--amber); line-height: 0.9; } .service-title-block h3 { font-family: var(--display); font-size: 36px; line-height: 1.05; color: var(--page-text); margin-bottom: 14px; font-weight: 400; } .service-tagline { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--amber); margin-bottom: 24px; } .service-description { font-size: 16px; color: var(--page-text); opacity: 0.78; line-height: 1.6; margin-bottom: 24px; } .service-features { list-style: none; } .service-features li { padding: 8px 0; font-size: 15px; color: var(--page-text); display: flex; align-items: flex-start; gap: 12px; } .service-features li::before { content: '→'; color: var(--amber); font-weight: 500; flex-shrink: 0; } .service-outcome { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--card-divider); font-size: 14px; color: var(--moss); font-weight: 500; } .service-outcome strong { color: var(--page-text); font-family: var(--display); font-style: italic; font-weight: 400; font-size: 16px; } /* ========== HOW ========== */ .how { background: var(--page-bg-warm); position: relative; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 80px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 70px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--amber) 0, var(--amber) 8px, transparent 8px, transparent 16px); z-index: 0; } .step { background: var(--card-bg); border-radius: 24px; padding: 48px 36px; position: relative; z-index: 1; border: 1px solid var(--card-border); transition: transform 0.3s ease; text-align: center; } .step:hover { transform: translateY(-6px); } .step-number { width: 64px; height: 64px; background: var(--forest); color: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-size: 32px; margin: 0 auto 28px; border: 4px solid var(--cream-warm); } .step h4 { font-family: var(--display); font-size: 28px; color: var(--page-text); margin-bottom: 14px; font-weight: 400; line-height: 1.15; } .step p { font-size: 15px; line-height: 1.55; color: var(--page-text); opacity: 0.75; } /* ========== OUTCOMES ========== */ .outcomes { background: var(--page-bg); } .outcomes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 70px; border-top: 1px solid var(--card-divider); } .outcome-item { padding: 36px 0; border-bottom: 1px solid var(--card-divider); display: flex; gap: 24px; align-items: flex-start; } .outcome-item:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--card-divider); } .outcome-item:nth-child(even) { padding-left: 40px; } .outcome-mark { font-family: var(--display); font-style: italic; color: var(--amber); font-size: 32px; line-height: 1; flex-shrink: 0; } .outcome-item p { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--page-text); } /* ========== WHY ========== */ .why { background: var(--inv-bg); color: var(--inv-text); } .why .section-label { color: var(--amber); } .why .section-headline { color: var(--cream); } .why .section-headline em { color: var(--amber); } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 70px; } .why-card { padding: 32px 28px; background: rgba(244, 237, 226, 0.05); border: 1px solid rgba(244, 237, 226, 0.12); border-radius: 20px; transition: all 0.3s ease; } .why-card:hover { background: rgba(232, 116, 59, 0.08); border-color: var(--amber); transform: translateY(-4px); } .why-card .icon { width: 48px; height: 48px; background: var(--amber); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-family: var(--display); font-style: italic; font-size: 24px; color: var(--page-text); } .why-card h4 { font-family: var(--display); font-size: 22px; margin-bottom: 12px; line-height: 1.2; font-weight: 400; } .why-card p { font-size: 14px; opacity: 0.75; line-height: 1.55; } .why-conclusion { margin-top: 80px; text-align: center; font-family: var(--display); font-style: italic; font-size: 36px; line-height: 1.3; color: var(--cream); } .why-conclusion em { color: var(--amber); font-style: normal; font-weight: 400; } /* ========== OBJECTIONS ========== */ .objections { background: var(--page-bg-warm); } .obj-grid { margin-top: 70px; display: grid; gap: 16px; } .obj-item { background: var(--card-bg); border-radius: 20px; padding: 32px 36px; cursor: pointer; transition: all 0.3s ease; border: 1px solid var(--card-border); } .obj-item:hover { border-color: var(--amber); transform: translateX(6px); } .obj-question { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .obj-question h4 { font-family: var(--display); font-style: italic; font-size: 26px; color: var(--page-text); font-weight: 400; } .obj-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--cream-warm); color: var(--page-text); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: all 0.3s ease; } .obj-item:hover .obj-toggle, .obj-item.active .obj-toggle { background: var(--amber); color: var(--paper); transform: rotate(45deg); } .obj-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.4s ease; color: var(--page-text); opacity: 0.8; font-size: 16px; line-height: 1.6; } .obj-item.active .obj-answer { max-height: 200px; margin-top: 18px; } /* ========== ABOUT ========== */ .about { background: var(--page-bg); } .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; margin-top: 80px; align-items: center; } .founder-card { background: var(--card-bg); border-radius: 32px; padding: 48px 40px; border: 1px solid var(--card-border); text-align: center; position: relative; overflow: hidden; } .founder-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--amber), var(--gold)); } .founder-avatar { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--forest), var(--moss)); margin: 0 auto 28px; position: relative; display: flex; align-items: center; justify-content: center; border: 4px solid var(--cream-warm); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); overflow: hidden; } .founder-initials { font-family: var(--display); font-style: italic; font-size: 56px; color: var(--amber); } .founder-card h3 { font-family: var(--display); font-size: 32px; color: var(--page-text); margin-bottom: 6px; line-height: 1.1; font-weight: 400; } .founder-role { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--amber); margin-bottom: 28px; } .founder-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; padding: 24px 0; border-top: 1px solid var(--card-divider); border-bottom: 1px solid var(--card-divider); } .stat-block { text-align: center; } .stat-block .stat-num { font-family: var(--display); font-style: italic; font-size: 32px; color: var(--page-text); line-height: 1; margin-bottom: 4px; } .stat-block .stat-label { font-size: 11px; color: var(--moss); text-transform: uppercase; letter-spacing: 0.12em; } .founder-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .founder-link { padding: 8px 16px; background: var(--cream-warm); border-radius: 100px; font-size: 13px; color: var(--page-text); text-decoration: none; transition: all 0.2s ease; font-weight: 500; } .founder-link:hover { background: var(--amber); color: var(--paper); } .about-content h2 { font-family: var(--display); font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; color: var(--page-text); margin-bottom: 32px; font-weight: 400; letter-spacing: -0.02em; } .about-content h2 em { font-style: italic; color: var(--amber); } .about-content p { font-size: 17px; line-height: 1.65; color: var(--page-text); opacity: 0.85; margin-bottom: 22px; } .about-content p strong { color: var(--page-text); font-weight: 600; opacity: 1; } .credentials { margin-top: 32px; padding: 28px; background: var(--cream-warm); border-radius: 20px; border-left: 3px solid var(--amber); } .credentials-label { font-size: 12px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; font-weight: 600; } .credentials-list { display: flex; flex-wrap: wrap; gap: 8px; } .credential-tag { padding: 6px 14px; background: var(--paper); border-radius: 100px; font-size: 13px; color: var(--page-text); border: 1px solid var(--card-border); } .testimonial-strip { margin-top: 60px; padding: 40px; background: var(--inv-bg); color: var(--inv-text); border-radius: 24px; text-align: center; position: relative; } .testimonial-strip::before { content: '"'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 80px; color: var(--amber); background: var(--page-bg); width: 60px; height: 60px; border-radius: 50%; line-height: 90px; text-align: center; } .testimonial-strip blockquote { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.4; margin-bottom: 18px; max-width: 800px; margin-left: auto; margin-right: auto; } .testimonial-attr { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--amber); } /* ========== ORBYTT ========== */ .orbytt { background: linear-gradient(135deg, var(--inv-bg-deep) 0%, var(--inv-bg) 100%); color: var(--inv-text); position: relative; overflow: hidden; } .orbytt::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232, 116, 59, 0.15) 0%, transparent 70%); pointer-events: none; } .orbytt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .orbytt .section-label { color: var(--amber); } .orbytt h2 { font-family: var(--display); font-size: clamp(40px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 28px; font-weight: 400; } .orbytt h2 em { color: var(--amber); font-style: italic; } .orbytt p { font-size: 17px; line-height: 1.65; opacity: 0.82; margin-bottom: 32px; } .orbytt-features { list-style: none; margin-bottom: 36px; } .orbytt-features li { padding: 14px 0; font-size: 16px; border-bottom: 1px solid rgba(244, 237, 226, 0.1); display: flex; align-items: center; gap: 14px; } .orbytt-features .check { width: 24px; height: 24px; background: var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--forest); font-size: 14px; flex-shrink: 0; font-weight: 700; } .talent-card-stack { position: relative; aspect-ratio: 1; max-width: 480px; margin: 0 auto; } .talent-card { position: absolute; background: var(--paper); color: var(--forest); border-radius: 20px; padding: 24px; width: 240px; box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5); transition: transform 0.4s ease; } .talent-card:hover { transform: translateY(-8px) rotate(0deg) !important; } .talent-1 { top: 0; left: 0; transform: rotate(-5deg); } .talent-2 { top: 30%; right: 0; transform: rotate(4deg); background: var(--amber); color: var(--paper); } .talent-3 { bottom: 0; left: 20%; transform: rotate(-2deg); background: var(--gold); color: var(--forest-deep); } .talent-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--forest); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; color: var(--amber); font-size: 20px; margin-bottom: 14px; } .talent-2 .talent-avatar { background: var(--paper); color: var(--amber); } .talent-3 .talent-avatar { background: var(--forest); color: var(--gold); } .talent-role { font-family: var(--display); font-size: 18px; font-weight: 400; margin-bottom: 4px; line-height: 1.2; } .talent-2 .talent-role { color: var(--paper); } .talent-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; } /* ========== LEAD MAGNET ========== */ .lead-magnet { padding: 100px 0; background: var(--gold); } .lead-magnet-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; } .lead-magnet h3 { font-family: var(--display); font-size: clamp(36px, 4.5vw, 52px); line-height: 1.05; color: var(--forest-deep); margin-bottom: 20px; font-weight: 400; } .lead-magnet p { font-size: 18px; color: var(--forest-deep); margin-bottom: 32px; opacity: 0.85; max-width: 540px; } .magnet-visual { position: relative; height: 280px; } .playbook-cover { position: absolute; width: 200px; aspect-ratio: 3/4; background: var(--forest); border-radius: 8px; padding: 24px; color: var(--cream); box-shadow: 0 30px 60px -20px rgba(15, 31, 21, 0.5); transform: rotate(-6deg); right: 80px; top: 0; transition: transform 0.4s ease; } .playbook-cover:hover { transform: rotate(0deg) scale(1.05); } .playbook-cover .cover-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .playbook-cover .cover-title { font-family: var(--display); font-size: 28px; line-height: 1; margin-bottom: 24px; } .playbook-cover .cover-title em { color: var(--amber); font-style: italic; } .playbook-cover .cover-art { width: 60px; height: 60px; background: var(--amber); border-radius: 50%; margin-top: auto; position: absolute; bottom: 24px; left: 24px; } .playbook-cover .cover-art::after { content: ''; position: absolute; width: 30px; height: 30px; background: var(--forest); border-radius: 50%; top: 15px; left: 15px; } .playbook-cover-2 { position: absolute; width: 180px; aspect-ratio: 3/4; background: var(--paper); border-radius: 8px; transform: rotate(8deg); right: 0; top: 30px; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3); } /* ========== FINAL CTA ========== */ .final-cta { background: var(--page-bg); padding: 140px 0; position: relative; overflow: hidden; } .final-cta-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .final-cta h2 { font-family: var(--display); font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.025em; color: var(--page-text); margin-bottom: 32px; font-weight: 400; } .final-cta h2 em { font-style: italic; color: var(--amber); } .final-cta p { font-size: 20px; color: var(--page-text); opacity: 0.78; margin-bottom: 44px; max-width: 600px; margin-left: auto; margin-right: auto; } .final-supporting { margin-top: 28px; font-family: var(--display); font-style: italic; font-size: 17px; color: var(--moss); } .final-cta::before { content: '✦'; position: absolute; top: 80px; left: 12%; font-family: var(--display); color: var(--amber); opacity: 0.25; font-size: 80px; transform: rotate(-15deg); } .final-cta::after { content: '✦'; position: absolute; bottom: 100px; right: 14%; font-family: var(--display); color: var(--gold); opacity: 0.3; font-size: 60px; transform: rotate(20deg); } /* ========== FOOTER ========== */ footer { background: var(--inv-bg-deep); color: var(--inv-text); padding: 80px 0 32px; text-align: center; } .footer-brand { margin-bottom: 60px; } .footer-brand .logo { justify-content: center; font-size: 34px; margin-bottom: 20px; color: var(--cream); } .footer-brand .logo .punct { color: var(--amber); } .footer-brand .logo-mark::before { /* Left dot inverts on dark footer: amber outline + forest fill */ background: var(--forest-deep); border-color: var(--amber); } .footer-brand .logo-mark::after { /* Right dot stays amber */ background: var(--amber); } .footer-brand .logo-mark .connector { background: var(--gold); } .footer-brand p { font-size: 16px; opacity: 0.7; max-width: 480px; margin: 0 auto; line-height: 1.6; } .footer-bottom { padding-top: 32px; border-top: 1px solid rgba(244, 237, 226, 0.1); font-size: 13px; opacity: 0.6; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } /* ========== MODAL ========== */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 31, 21, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--card-bg); border-radius: 28px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 48px 44px; position: relative; transform: translateY(20px) scale(0.96); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 40px 100px -20px rgba(15, 31, 21, 0.5); } .modal-overlay.active .modal { transform: translateY(0) scale(1); } .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--amber), var(--gold)); border-radius: 28px 28px 0 0; } .modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream-warm); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; /* color: var(--page-text); */ transition: all 0.2s ease; z-index: 1; } .modal-close:hover { background: var(--amber); color: var(--paper); transform: rotate(90deg); } .modal-eyebrow { font-size: 12px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; margin-bottom: 12px; } .modal h3 { font-family: var(--display); font-size: 36px; color: var(--page-text); line-height: 1.05; margin-bottom: 12px; font-weight: 400; letter-spacing: -0.01em; } .modal h3 em { font-style: italic; color: var(--amber); } .modal-sub { font-size: 15px; color: var(--page-text); opacity: 0.75; margin-bottom: 32px; line-height: 1.55; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--page-text); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; } .form-input, .form-textarea { width: 100%; padding: 14px 18px; border: 1.5px solid var(--card-divider); border-radius: 12px; background: var(--page-bg); font-family: var(--sans); font-size: 15px; color: var(--page-text); transition: all 0.2s ease; -webkit-appearance: none; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--amber); background: var(--card-bg); box-shadow: 0 0 0 3px rgba(232, 116, 59, 0.15); } .form-textarea { min-height: 120px; resize: vertical; font-family: var(--sans); } .form-submit { width: 100%; padding: 18px; background: var(--amber); color: var(--paper); border: none; border-radius: 100px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 0 var(--rust); display: flex; align-items: center; justify-content: center; gap: 10px; } .form-submit:hover { background: var(--amber-bright); transform: translateY(-2px); box-shadow: 0 6px 0 var(--rust); } .form-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rust); } .form-submit:disabled { opacity: 0.7; cursor: not-allowed; } .form-status { margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.5; display: none; } .form-status.success { display: block; background: rgba(74, 107, 79, 0.12); color: var(--moss); border: 1px solid rgba(74, 107, 79, 0.25); } .form-status.error { display: block; background: rgba(139, 58, 29, 0.1); color: var(--rust); border: 1px solid rgba(139, 58, 29, 0.25); } [data-theme="dark"] .form-status.error { background: rgba(255, 120, 100, 0.14); color: #fce8e4; border: 1px solid rgba(255, 170, 150, 0.35); } .form-fineprint { margin-top: 20px; font-size: 12px; color: var(--moss); text-align: center; opacity: 0.8; } /* Success strip after native Web3Forms POST + redirect */ .form-sent-banner { position: sticky; top: 0; z-index: 10001; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--forest); color: var(--cream); font-family: var(--sans); font-size: 15px; line-height: 1.45; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } .form-sent-banner-text { flex: 1; min-width: 0; } .form-sent-banner-close { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(244, 237, 226, 0.12); color: var(--cream); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .form-sent-banner-close:hover { background: rgba(244, 237, 226, 0.22); } /* ========== ANIMATIONS ========== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reveal.delay-1 { animation-delay: 0.15s; } .reveal.delay-2 { animation-delay: 0.3s; } .reveal.delay-3 { animation-delay: 0.45s; } .reveal.delay-4 { animation-delay: 0.6s; } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .orbytt-grid, .lead-magnet-inner, .problem-grid, .about-grid { grid-template-columns: 1fr; gap: 60px; } .why-grid { grid-template-columns: repeat(2, 1fr); } .service-card { grid-template-columns: 1fr; gap: 24px; padding: 40px; } .service-num { font-size: 48px; } .steps-grid { grid-template-columns: 1fr; gap: 24px; } .steps-grid::before { display: none; } } @media (max-width: 640px) { .container { padding: 0 20px; } section { padding: 80px 0; } /* Two-row nav: links scroll horizontally on mobile */ .nav-inner { padding: 0 20px; } .nav-row-top { padding: 14px 0 12px; gap: 12px; } .nav-row-bottom { padding: 10px 0 12px; } .logo { font-size: 22px; gap: 12px; } .logo-text { font-size: 22px; } .nav-links { gap: 24px; } .nav-links a { font-size: 12px; letter-spacing: 0.12em; } .nav-cta { padding: 9px 18px; font-size: 13px; } .theme-toggle { width: 36px; height: 36px; } .outcomes-grid { grid-template-columns: 1fr; } .outcome-item:nth-child(odd) { padding-right: 0; border-right: none; } .outcome-item:nth-child(even) { padding-left: 0; } .why-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 12px; } .marquee-track { font-size: 22px; gap: 40px; } .modal { padding: 36px 28px; } .modal h3 { font-size: 28px; } .founder-stats { grid-template-columns: 1fr 1fr; } } /* ========================================================================== Shared component refinements Rules below were previously inline