/* FoundrFlow — shared palette: black, pink, chartreuse (Nebius-style accent) */ :root { /* Fixed header height ≈ 16+40+16px padding + logo row; hero clears this */ --ff-nav-offset: 72px; --ff-black: #000000; --ff-white: #ffffff; --ff-pink: #ff375f; --ff-pink-dark: #e6325a; --ff-pink-deep: #d12851; --ff-lime: #dfff00; --ff-lime-mid: #c8e800; --ff-lime-soft: #e8ff4a; --ff-text-muted: #666666; /* Surfaces — Nebius-like flat panels (no gradient pinstripes) */ --ff-surface: #ffffff; --ff-surface-muted: #f2f2f2; --ff-border: #d9d9d9; --ff-ink: #0a0a0a; } /* ------------------------------------------------------------------------- Site header — one definition for all ff-site pages (matches Home/About). Uses body.ff-site (beats per-file `nav {}`) + px padding so bar height is identical. ------------------------------------------------------------------------- */ body.ff-site nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; padding: 16px 32px; box-sizing: border-box; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); z-index: 100; } body.ff-site .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; } body.ff-site a.logo, body.ff-site .logo { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 700; color: #000000; text-decoration: none; } body.ff-site .logo-icon { width: 40px; height: 40px; background: #000000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.2rem; color: #ffffff !important; flex-shrink: 0; } body.ff-site .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } body.ff-site .nav-links a { color: #000000; text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.5; transition: all 0.3s ease; position: relative; } body.ff-site .nav-links a:hover { color: #ff375f; } body.ff-site .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: #ff375f; transition: width 0.3s ease; } body.ff-site .nav-links a:hover::after { width: 100%; } body.ff-site .nav-links a.active { color: #ff375f; } body.ff-site .nav-links a.active::after { width: 100%; } @media (max-width: 768px) { body.ff-site .nav-links { display: none; } } /* Lime on light backgrounds — marker style (readable, Nebius-adjacent) */ .brand-lime-mark { color: var(--ff-black, #000000); box-shadow: inset 0 -0.38em 0 rgba(223, 255, 0, 0.55); } /* ------------------------------------------------------------------------- Site-wide UI (matches home: ink borders, pink/lime accents, white fields) Add class="ff-site" to on every public page. Use "about-page" on about.html only. ------------------------------------------------------------------------- */ html { font-size: 100%; -webkit-text-size-adjust: 100%; } body.ff-site { background: #ffffff; color: var(--ff-ink); font-size: 1rem; line-height: 1.6; } .section-accent-pink { color: var(--ff-pink, #ff375f); } .contact-accent-pink { color: var(--ff-pink, #ff375f); } .contact-accent-lime { color: var(--ff-lime, #dfff00); } /* Inner pages: hero band (About, Resources, Blog — not the home hero) */ body.ff-site .page-hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 2rem 3.5rem; background: #ffffff; margin-top: var(--ff-nav-offset); border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-sizing: border-box; } body.ff-site .page-hero .hero-content { max-width: 900px; margin: 0 auto; padding: 0 1rem; } /* Page heroes & section titles */ body.ff-site .hero-title { color: var(--ff-ink); letter-spacing: -0.03em; line-height: 1.12; } body.ff-site .page-hero .hero-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: 1.25rem; line-height: 1.1; } body.ff-site .hero-subtitle, body.ff-site .section-intro { color: #3d3d3d; max-width: 34rem; margin-left: auto; margin-right: auto; line-height: 1.65; } body.ff-site .section-intro { font-size: 1.2rem; } body.ff-site .page-hero .hero-subtitle { font-size: 1.2rem; margin-bottom: 0; } body.ff-site section.section h2, body.ff-site .section h2 { color: var(--ff-ink); letter-spacing: -0.03em; line-height: 1.15; } /* Card surfaces — white + black frame */ body.ff-site .blog-card { text-align: left; } body.ff-site .blog-card, body.ff-site .featured-post, body.ff-site .resource-card, body.ff-site .tool-card, body.ff-site .cost-card, body.ff-site .stat-card, body.ff-site .metric-card, body.ff-site .expertise-card, body.ff-site .philosophy-content { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } /* About page project cards (home uses its own .service-card rules in page CSS) */ body.ff-site.about-page .service-card { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } body.ff-site .timeline-item { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } body.ff-site .timeline-item h4 { color: var(--ff-ink); } body.ff-site .blog-card .blog-content p, body.ff-site .resource-card p, body.ff-site .expertise-card p, body.ff-site.about-page .service-card p { color: #3d3d3d; } body.ff-site .blog-date { color: var(--ff-pink, #ff375f); } /* Category chips */ body.ff-site .category-tag { background: #ffffff; color: var(--ff-ink); border: 2px solid var(--ff-ink); } body.ff-site .category-tag.active { background: var(--ff-pink, #ff375f); color: #ffffff; border-color: var(--ff-ink); } /* Resource / CTA links */ body.ff-site .resource-link { display: inline-block; border: 2px solid var(--ff-ink); border-radius: 8px; box-shadow: 0 4px 12px rgba(255, 55, 95, 0.2); } body.ff-site .tool-link { display: inline-block; border: 2px solid var(--ff-ink); } /* Emoji / icon tiles on resource cards */ body.ff-site .resource-card .resource-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: 1rem; background: var(--ff-ink); border: 2px solid var(--ff-ink); border-radius: 10px; } body.ff-site .resources-grid .resource-card:nth-child(3n + 2) .resource-icon { background: var(--ff-pink, #ff375f); border-color: var(--ff-ink); } body.ff-site .resources-grid .resource-card:nth-child(3n + 3) .resource-icon { background: var(--ff-lime, #dfff00); border-color: var(--ff-ink); } /* Long-form: inner content panels (AI tools, roadmap template) */ body.ff-site .container > .section { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } body.ff-site .container > .section h2 { color: var(--ff-ink); letter-spacing: -0.02em; } body.ff-site .container > .section h3 { color: var(--ff-ink); } /* About: stats & philosophy bands */ body.ff-site .stats-section, body.ff-site .philosophy-section { background: #ffffff; } body.ff-site .stat-number { color: var(--ff-pink, #ff375f); } body.ff-site .about-image { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } body.ff-site .about-image p { color: #3d3d3d; } body.ff-site .project-btn { border: 2px solid var(--ff-ink); border-radius: 10px; } body.ff-site .cta-section .btn-white { background: var(--ff-lime, #dfff00); color: var(--ff-ink); border: 2px solid var(--ff-ink); border-radius: 10px; font-weight: 700; } body.ff-site .cta-section .btn-white:hover { background: var(--ff-lime-mid, #c8e800); } /* Blog posts: callouts */ body.ff-site .article-content blockquote, body.ff-site .highlight-box { background: #ffffff; border: 2px solid var(--ff-ink); border-radius: 10px; } body.ff-site .article-content blockquote p { color: #3d3d3d; } body.ff-site .tag { background: #ffffff; border: 2px solid var(--ff-ink); color: var(--ff-pink, #ff375f); } body.ff-site .author-avatar { border: 2px solid var(--ff-ink); } /* * Post templates use