/* TechSplit — Apple-inspired design language Typography-led, generous whitespace, alternating light/dark full-bleed sections, restrained palette with a single green accent. */ :root { /* Apple-style neutrals */ --black: #1d1d1f; /* Dark full-bleed sections: deep brand green rather than pure black */ --dark-section: #0d2620; --white: #ffffff; --gray-bg: #f5f5f7; --gray-text: #6e6e73; --gray-text-on-dark: #a1a1a6; --hairline: #d2d2d7; --hairline-dark: rgba(255, 255, 255, 0.14); /* TechSplit accent (kept) */ --accent: #1f6f5c; --accent-hover: #175647; --accent-on-dark: #45c99a; --radius-lg: 28px; --radius-md: 18px; --radius-pill: 980px; --content: 980px; --content-wide: 1240px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--black); background: var(--white); line-height: 1.47059; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3 { margin: 0 0 0.4em; font-weight: 600; } .wrap { max-width: var(--content); margin: 0 auto; padding: 0 22px; } .wrap-wide { max-width: var(--content-wide); margin: 0 auto; padding: 0 22px; } /* ---------------- Scroll reveal ---------------- Default is fully visible. JS adds .reveal-on to , which opts in to the hidden-then-animate behavior — so crawlers and no-JS visitors always see content. */ @media (prefers-reduced-motion: no-preference) { .reveal-on .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .reveal-on .reveal.is-visible { opacity: 1; transform: none; } } /* ---------------- Navigation ---------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: 60px; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; } /* Nav adapts over dark full-bleed sections (set by script.js) */ .site-header.is-over-dark { background: rgba(13, 38, 32, 0.88); border-bottom-color: rgba(255, 255, 255, 0.12); color: var(--white); } .site-header.is-over-dark .nav-links a { color: var(--gray-text-on-dark); } .site-header.is-over-dark .nav-links a:hover { color: var(--white); } .site-header.is-over-dark .logo span { color: var(--accent-on-dark); } .site-header.is-over-dark .nav-cta { color: var(--accent-on-dark); } .header-inner { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--content-wide); margin: 0 auto; padding: 0 22px; } .logo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .logo span { color: var(--accent); } .nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; } .nav-links a { color: var(--gray-text); } .nav-links a:hover { color: var(--black); } .nav-cta { font-size: 15px; color: var(--accent); font-weight: 600; white-space: nowrap; } .nav-cta:hover { color: var(--accent-hover); text-decoration: underline; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 25px; border-radius: var(--radius-pill); font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: -0.022em; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-secondary:hover { background: rgba(31, 111, 92, 0.06); } .link-chevron { font-size: 17px; color: var(--accent); letter-spacing: -0.022em; } .link-chevron:hover { text-decoration: underline; } .link-chevron::after { content: " \203A"; } /* On dark sections */ .section-dark .btn-primary { background: var(--accent-on-dark); color: #04231a; } .section-dark .btn-primary:hover { background: #6ad9b3; } .section-dark .link-chevron { color: var(--accent-on-dark); } /* ---------------- Sections ---------------- */ .section { padding: 120px 0; text-align: center; } .section-light { background: var(--white); } .section-gray { background: var(--gray-bg); } .section-dark { background: var(--dark-section); color: var(--white); } .eyebrow { font-size: 21px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; margin: 0 0 8px; } .section-dark .eyebrow { color: var(--accent-on-dark); } .headline { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.0625; letter-spacing: -0.015em; font-weight: 600; max-width: 16ch; margin-left: auto; margin-right: auto; } .subhead { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.4; letter-spacing: -0.01em; color: var(--gray-text); max-width: 44ch; margin: 22px auto 0; font-weight: 400; } .section-dark .subhead { color: var(--gray-text-on-dark); } .cta-row { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 34px; } .fine-print { font-size: 14px; color: var(--gray-text); margin-top: 22px; letter-spacing: -0.01em; } .section-dark .fine-print { color: var(--gray-text-on-dark); } /* ---------------- Hero ---------------- */ .hero { padding: 96px 0 0; text-align: center; background: var(--white); } .hero h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; max-width: 14ch; margin: 0 auto; } .hero .subhead { max-width: 40ch; } .hero-visual { margin: 64px auto 0; max-width: 1000px; padding: 0 22px 120px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; } .mock { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 24px 68px rgba(0, 0, 0, 0.10); padding: 30px; text-align: left; min-width: 0; } .mock-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gray-text); margin-bottom: 18px; } .mock-row { display: flex; gap: 9px; margin-bottom: 11px; } .mock-row span { height: 11px; border-radius: 5px; background: var(--gray-bg); flex: 1; } .mock-row.short span:last-child { flex: 0.35; } .mock-scribble { height: 40px; margin-top: 18px; border-radius: 10px; background: repeating-linear-gradient(102deg, rgba(220, 70, 90, 0.28) 0 3px, transparent 3px 10px); } .mock-caption { margin-top: 22px; font-size: 14px; color: var(--gray-text); letter-spacing: -0.01em; } .mock-table { width: 100%; border-collapse: collapse; font-size: 15px; } .mock-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-text); padding-bottom: 11px; border-bottom: 1px solid var(--hairline); } .mock-table td { padding: 12px 0; border-bottom: 1px solid var(--gray-bg); color: var(--black); letter-spacing: -0.01em; } .mock-table th:last-child, .mock-table td:last-child { text-align: right; } .mock-table td:last-child { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .mock-arrow { font-size: 26px; color: var(--hairline); line-height: 1; } /* ---------------- Quotes (dark section) ---------------- */ .quote-stack { display: grid; gap: 28px; margin-top: 64px; text-align: left; } .quote { margin: 0; border-top: 1px solid var(--hairline-dark); padding-top: 28px; } .quote p { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; margin-bottom: 14px; } .quote footer { font-size: 15px; color: var(--gray-text-on-dark); letter-spacing: -0.01em; } .closing-line { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; margin: 72px auto 0; font-weight: 500; } /* ---------------- Steps ---------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 72px; text-align: left; } .step { background: var(--white); border-radius: var(--radius-lg); padding: 40px 34px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06); } .section-gray .step { background: var(--white); } .step-num { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); margin-bottom: 18px; } .step h3 { font-size: 24px; line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 10px; } .step p { font-size: 17px; line-height: 1.47; color: var(--gray-text); margin: 0; letter-spacing: -0.01em; } /* Pricing tiers reuse .step — this softens the "/month" suffix beside the figure */ .price-unit { font-size: 17px; font-weight: 400; color: var(--gray-text); letter-spacing: -0.01em; } /* ---------------- Verticals ---------------- */ .verticals { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 56px; } .verticals li { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 12px 26px; font-size: 17px; letter-spacing: -0.01em; } /* ---------------- FAQ ---------------- */ .faq { max-width: 760px; margin: 64px auto 0; text-align: left; } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-item summary { cursor: pointer; list-style: none; padding: 28px 0; font-size: clamp(18px, 2vw, 21px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex: 0 0 auto; font-size: 26px; font-weight: 300; line-height: 1; color: var(--accent); transition: transform 0.25s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { font-size: 17px; line-height: 1.5; color: var(--gray-text); padding: 0 44px 30px 0; margin: 0; letter-spacing: -0.01em; } /* ---------------- Waitlist ---------------- */ .waitlist-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 42px auto 0; } .waitlist-form input { padding: 15px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 17px; font-family: inherit; letter-spacing: -0.01em; } .waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.42); } .waitlist-form input:focus { outline: none; border-color: var(--accent-on-dark); background: rgba(255, 255, 255, 0.12); } .waitlist-form .btn { margin-top: 6px; } .form-status { font-size: 15px; font-weight: 500; color: var(--accent-on-dark); margin: 20px 0 0; letter-spacing: -0.01em; } .form-status.error { color: #ff8a9b; } /* ---------------- Footer ---------------- */ .site-footer { background: var(--gray-bg); padding: 34px 0; font-size: 12px; line-height: 1.5; color: var(--gray-text); letter-spacing: -0.01em; } .footer-inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .site-footer p { margin: 0; } /* ---------------- Article / Guides ---------------- */ .article-nav-back { display: block; margin-bottom: 28px; font-size: 15px; color: var(--gray-text); } .article-nav-back:hover { color: var(--accent); } .article-meta { font-size: 14px; color: var(--gray-text); letter-spacing: -0.01em; margin-bottom: 16px; } .article-body { max-width: 700px; margin: 0 auto; padding: 0 22px; text-align: left; } .article-body h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; margin-top: 56px; margin-bottom: 14px; } .article-body h2:first-child { margin-top: 0; } .article-body h3 { font-size: 20px; letter-spacing: -0.015em; margin-top: 32px; margin-bottom: 10px; } .article-body p, .article-body li { font-size: 18px; line-height: 1.6; color: var(--black); letter-spacing: -0.012em; } .article-body p { margin-bottom: 18px; } .article-body strong { font-weight: 600; } .article-list { margin-bottom: 18px; } .article-list li { position: relative; padding-left: 22px; margin-bottom: 10px; } .article-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .worked-box { background: var(--gray-bg); border-radius: var(--radius-md); padding: 22px 26px; margin: 22px 0 28px; font-size: 16px; line-height: 1.7; } .worked-box .wb-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .worked-box .wb-result { color: var(--accent); font-weight: 600; } .callout { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 26px 0; font-size: 17px; line-height: 1.55; color: var(--black); } .callout strong { display: block; margin-bottom: 4px; } .article-endcap { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hairline); } /* ---------------- Responsive ---------------- */ @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .nav-links { display: none; } } @media (max-width: 734px) { .section { padding: 84px 0; } .hero { padding: 64px 0 0; } .hero-visual { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; padding-bottom: 84px; } .mock-arrow { transform: rotate(90deg); justify-self: center; } .quote-stack { margin-top: 48px; } .faq { margin-top: 48px; } .cta-row { gap: 20px; } }