/* Theme Name: Schwimmflugel Forge Theme URI: https://schwimmflugel.com/ Author: Schwimmflugel Designs Description: Custom block theme for Schwimmflugel Designs - services, portfolio, blog/projects, and future store. Warm editorial dark engineering hub. Version: 1.23.4 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: Proprietary Text Domain: schwimmflugel-forge */ /* ═══ STYLE LAYOUT — Schwimmflugel Forge 1.4.1 ════════════════════ * * Remaining systems, in source order: * * 1. Theme header (above) + Google Fonts import * 2. Reset, base, scrollbar, focus * 3. Skip-to-content, body, atmospheric background * 4. Header / nav / mega menu / mobile nav * 5. WordPress content compat + block color slugs * 6. Footer * 7. Responsive (980px, 620px, 480px) — baseline + mobile toggle fix * 8. .sfd-rich-page system — used by home page only * 9. :root forge tokens + .sfd-dynamic-page wrapper * 10. content-shell :has() workaround for default page.html * 11. Teal/Blue Accents override layer * 12. SFD validation teal pushes * 13. Local QA mobile fixes * 14. Staging build-out (.forge-page + page-* styles) * 15. About page animations + stat counters + skill badge * * Removed in 1.4.0 dedup pass: * - System 3 inner classes (sfd-hero-dynamic, sfd-stat-card, sfd-depth-card, * sfd-project-tile, sfd-step, sfd-kicker-card, sfd-btn-dynamic, sfd-stat-number, * sfd-stat-grid, sfd-card-grid, sfd-proof-band, sfd-final-cta, sfd-portfolio-mosaic, * sfd-tile-overlay, sfd-visual-panel, sfd-feature-split, sfd-diagonal, etc.) * - System 5 (SFD validation visual corrections) — re-overrides of the above * - Reason: no active page uses these class names. Their visual rules were * duplicated or overridden before reaching the rendered output. * * ═══════════════════════════════════════════════════════════════════ */ /* ─── Custom scrollbar ─────────────────────────────────────── */::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #100f0d; } ::-webkit-scrollbar-thumb { background: rgba(224, 123, 57, .4); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(224, 123, 57, .7); } /* ─── Text selection ───────────────────────────────────────── */::selection { background: rgba(224, 123, 57, .35); color: #f4eee6; } /* ─── Focus visible ───────────────────────────────────────── */:focus-visible { outline: 2px solid #e07b39; outline-offset: 3px; border-radius: 3px; } /* ─── Reset & Base ───────────────────────────────────────────── */* { box-sizing: border-box; cursor: default; } a, button { cursor: pointer; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mega, .mega-scrim { transition: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Skip to content ────────────────────────────────────────── */.skip-to-content { position: absolute; top: -999px; left: 16px; z-index: 9999; padding: 10px 18px; background: #e07b39; color: #fff; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .2s;} .skip-to-content:focus { top: 0; } body { margin: 0; background: #100f0d; color: #f4eee6; font-family: 'Source Sans 3', system-ui, sans-serif; overflow-x: hidden;} a { text-decoration: none; color: inherit; } /* ─── Atmospheric background ────────────────────────────────── */body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 80% 10%, rgba(224, 123, 57, .22), transparent 28%), radial-gradient(circle at 10% 22%, rgba(60, 146, 176, .13), transparent 32%), #100f0d;} /* ─── Header / Navigation ──────────────────────────────────── */.site-header { position: sticky; top: 0; z-index: 40; background: rgba(16, 15, 13, .88); border-bottom: 1px solid rgba(244, 238, 230, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: box-shadow .3s;} .site-header.scrolled { box-shadow: 0 4px 32px rgba(0, 0, 0, .45);} .site-header .inner { display: flex; align-items: center; justify-content: space-between; height: 96px; padding: 0 clamp(22px, 5vw, 76px);} .site-header .brand { display: flex; align-items: center; gap: 0; line-height: 1;} .brand-monogram { display: none; height: 36px; width: auto; flex-shrink: 0;} .brand-name { display: none;} .brand-logo-wrap { display: flex; flex-direction: column; align-items: center;} .brand-logo { height: 62px; width: auto; display: block;} .brand-subline { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #b8afa4; white-space: nowrap;} .site-header nav { display: flex; align-items: stretch; justify-content: flex-end; gap: 28px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700;} .site-header nav a,.site-header nav .pill,.site-header nav .cta { display: inline-flex; align-items: center; opacity: .76; transition: opacity .2s, color .2s; vertical-align: middle;} .site-header nav .pill,.site-header nav .cta { opacity: 1;} .site-header nav a:hover { opacity: 1; color: #ffad72;} .site-header nav a.active { opacity: 1; color: #e07b39; border-bottom: 1px solid currentColor; padding-bottom: 2px;} .site-header nav .cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: #e07b39; color: #fff; font-size: 16px; font-weight: 700; opacity: 1; transition: background .2s, transform .1s;} .site-header nav .cta:hover { background: #c96a2d; color: #fff; transform: translateY(-1px);} /* ─── Pill (Explore) ─────────────────────────────────────────── */.pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(244, 238, 230, .14); background: rgba(244, 238, 230, .045); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s;} .pill:hover { background: rgba(244, 238, 230, .1); border-color: rgba(244, 238, 230, .25); transform: translateY(-1px); color: #ffad72;} /* ─── Mega menu (Explore dropdown) ───────────────────────────── */.mega-scrim { display: none; position: fixed; inset: 96px 0 0; background: rgba(8, 7, 6, .58); z-index: 30; opacity: 0; transition: opacity .25s ease;} .mega { display: block; position: fixed; top: 104px; left: clamp(18px, 5vw, 76px); right: clamp(18px, 5vw, 76px); z-index: 35; border-radius: 30px; background: #15130f; border: 1px solid rgba(244, 238, 230, .14); box-shadow: 0 38px 120px rgba(0, 0, 0, .55); padding: 24px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;} .mega.is-open { opacity: 1; transform: translateY(0); pointer-events: auto;} .mega-scrim.is-open { opacity: 1; pointer-events: auto;} .mega-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px;} .mega-label { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #b8afa4;} .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;} .mega-card { background: #1d1a15; border: 1px solid rgba(244, 238, 230, .1); border-radius: 22px; padding: 22px; min-height: 160px; display: flex; flex-direction: column; gap: 10px; transition: background .2s, border-color .2s;} .mega-card:hover { background: #242019; border-color: rgba(244, 238, 230, .2);} .mega-card small { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #e6a06d;} .mega-card p { margin: 0; font-size: 15px; color: #b8afa4; line-height: 1.55;} /* ─── Mobile menu toggle ──────────────────────────────────────── */.mobile-toggle { display: none; } /* ─── Main content area ────────────────────────────────────── */.site-main { min-height: 60vh;} /* ─── WordPress content compatibility ──────────────────────── */.wp-site-blocks { min-height: 100vh; background: #100f0d; color: #f4eee6;} .wp-block-post-title,.wp-block-query-title { font-family: 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -.04em;} .content-shell { max-width: 980px; margin: 0 auto; padding: 72px clamp(22px, 5vw, 76px);} .content-shell :where(p, li) { font-size: 18px; line-height: 1.7; color: #c7bfb4;} .content-shell :where(h1, h2, h3) { margin-top: 1.2em; margin-bottom: .45em;} .content-shell a { color: #ffad72; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;} .post-list { display: grid; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 72px clamp(22px, 5vw, 76px);} .post-list article { background: #191713; border: 1px solid rgba(244, 238, 230, .11); border-radius: 24px; padding: 28px;} .screen-reader-text { position: absolute; left: -9999px;} /* ─── Footer ───────────────────────────────────────────────── */.site-footer { border-top: 1px solid rgba(244, 238, 230, .1); padding: 32px clamp(22px, 5vw, 76px);} .site-footer .inner { display: flex; flex-direction: column; align-items: center; gap: 14px;} .footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%;} .footer-left { justify-self: start; display: flex; flex-direction: column; gap: 4px; } .footer-center { justify-self: center; } .footer-right { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .footer-version { font-size: 13px; opacity: .75; } .footer-meta { font-size: 13px; } .footer-social { display: flex; align-items: center; gap: 16px;} .footer-social a { color: #b8afa4; transition: color .2s; display: flex; align-items: center;} .footer-social a:hover { color: #f4eee6;} .site-footer p { margin: 0; font-size: 15px; color: #b8afa4; white-space: nowrap;} .site-footer a { font-size: 15px; color: #b8afa4; transition: color .2s;} .site-footer a:hover { color: #f4eee6;} /* ─── Responsive ───────────────────────────────────────────── */@media (max-width: 980px) { .site-header nav a:not(.cta):not(.pill) { display: none; } .mega-grid { grid-template-columns: 1fr 1fr; } .brand-logo { height: 50px; } } @media (max-width: 620px) { .site-header .inner { height: 76px; padding: 0 18px; } .brand-logo-wrap { display: flex; } .brand-logo { height: 40px; } .brand-subline { font-size: 0.65rem; } .brand-monogram { display: none; } .site-header nav { gap: 10px; } .site-header nav .cta { display: none; } .mega { top: 76px; left: 14px; right: 14px; padding: 16px; padding-bottom: 24px; /* extra bottom padding so last card isn't flush with screen edge */ max-height: calc(100vh - 76px - 24px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .mega-head .cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #e07b39; color: #fff; font-size: 13px; font-weight: 700; opacity: 1; } .mega-scrim { inset: 76px 0 0; } .mega-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .mega-label { font-size: 11px; margin: 0; } .mega-grid { grid-template-columns: 1fr; gap: 12px; } .mega-card { padding: 16px 18px; min-height: unset; border-radius: 18px; } .mega-card small { font-size: 11px; } .mega-card p { font-size: 15px; line-height: 1.5; } } @media (max-width: 480px) { .site-header .inner { height: 70px; padding: 0 16px; } .site-header .brand { min-width: 0; overflow: hidden; } .site-header .brand-logo-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: calc(100vw - 120px); /* leave room for Explore pill + gap */ } .site-header .brand-logo { display: block; height: 34px; width: auto; max-width: 100%; } .brand-subline { display: none; } .site-header nav .pill { padding: 9px 14px; font-size: 14px; flex-shrink: 0; } .site-footer { padding: 32px 22px; } .site-footer .inner { gap: 12px; } .footer-row { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; } .footer-left, .footer-center, .footer-right { justify-self: unset; } .footer-social { display: flex; flex-direction: row; align-items: center; gap: 20px; } .site-footer p { font-size: 14px; text-align: center; } .site-footer .inner > .footer-row > a { font-size: 14px; } } /* ─── Block Color Palette (WordPress color slugs) ────────────── */.has-carbon-background-color { background-color: #1a1917; } .has-graphite-background-color { background-color: #1d1b18; } .has-panel-background-color { background-color: #242119; } .has-ink-background-color { background-color: #100f0d; } .has-orange-background-color { background-color: #e07b39; } .has-carbon-color { color: #1a1917; } .has-graphite-color { color: #1d1b18; } .has-panel-color { color: #242119; } .has-ink-color { color: #100f0d; } .has-orange-color { color: #e07b39; } .has-cream-color { color: #f4eee6; } .has-silver-color { color: #b8afa4; } .has-muted-color { color: #8a8478; } .has-platinum-color { color: #d4cfc8; } .has-white-color { color: #ffffff; } /* ─── Block Button Styles ────────────────────────────────────── */.wp-block-button.is-style-sf-primary .wp-block-button__link { background-color: #e07b39; color: #ffffff; border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 0.95rem; font-family: 'IBM Plex Sans', system-ui, sans-serif;} .wp-block-button.is-style-sf-outline .wp-block-button__link { background-color: transparent; color: #f4eee6; border-radius: 999px; padding: 12px 24px; font-weight: 600; font-size: 0.95rem; font-family: 'IBM Plex Sans', system-ui, sans-serif; border: 1px solid rgba(244,238,230,0.2);} .wp-block-button.is-style-sf-outline .wp-block-button__link:hover { border-color: rgba(244,238,230,0.4); background-color: rgba(244,238,230,0.05);} /* ─── Full-bleed wrapper ──────────────────────────────────────── */.sfdv { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: hidden;} /* ─── Hero Section ───────────────────────────────────────────── */.hero-section { background-color: #100f0d;} .hero-image img { border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);} /* ─── Route Cards ─────────────────────────────────────────────── */.route-card-inner { border: 1px solid rgba(244,238,230,0.08); height: 100%; transition: border-color 0.2s, background-color 0.2s;} .route-card-inner:hover { border-color: rgba(244,238,230,0.18); background-color: #242119;} .route-card .wp-block-buttons { margin-top: auto;} /* ─── Capability Cards ───────────────────────────────────────── */.cap-card { border: 1px solid rgba(244,238,230,0.06); height: 100%; transition: border-color 0.2s, transform 0.2s;} .cap-card:hover { border-color: rgba(224,123,57,0.3); transform: translateY(-2px);} .engagement-list { list-style: none; padding: 0; margin: 0;} .engagement-list li { padding-left: 1.25rem; position: relative; margin-bottom: 0.25rem;} .engagement-list li::before { content: '→'; position: absolute; left: 0; color: #e07b39; font-size: 0.85rem;} /* ─── Project Cards ──────────────────────────────────────────── */.project-card { border: 1px solid rgba(244,238,230,0.06); overflow: hidden; transition: transform 0.2s, border-color 0.2s;} .project-card:hover { transform: translateY(-3px); border-color: rgba(244,238,230,0.15);} /* ─── LED Feature ────────────────────────────────────────────── */.led-feature { border: 1px solid rgba(244,238,230,0.08);} /* ─── Process Steps ─────────────────────────────────────────── */.process-step { border: 1px solid rgba(244,238,230,0.1) !important; transition: border-color 0.2s, transform 0.2s;} .process-step:hover { border-color: rgba(224,123,57,0.35) !important; transform: translateY(-2px);} /* ─── Page canvas ────────────────────────────────────────────── */.page-canvas { background-color: #100f0d;} /* ─── Block Typography base ──────────────────────────────────── */.wp-block-heading { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; line-height: 1.2;} .wp-block-paragraph { font-family: 'IBM Plex Sans', system-ui, sans-serif; line-height: 1.7;} .has-text-align-center { text-align: center;} .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto;} /* ─── Label tag ──────────────────────────────────────────────── */.label-tag { margin-bottom: 1.25rem;} /* ─── Image size constraints ────────────────────────────────── *//* Hero image — contained within its 45% column, capped height */.hero-image img { width: 100%; height: auto; max-height: 480px; object-fit: cover;} /* Project card images — fixed max-height so cards are uniform */.project-card img { width: 100%; height: 200px; object-fit: cover; display: block;} /* HELLO LED feature image — contained within its 40% column */.led-feature .wp-block-image img { width: 100%; height: auto; max-height: 380px; object-fit: cover;} /* General wp-block-image guard — prevent any inline oversized img */.wp-block-image img { max-width: 100%; height: auto;} /* ─── Rich Variant B restoration (local wp-env review) ───────── */:root { --sfd-ink:#0a0a0a; --sfd-carbon:#1a1a1a; --sfd-graphite:#2a2a2a; --sfd-steel:#3a3a3a; --sfd-iron:#5a5a5a; --sfd-silver:#9a9a9a; --sfd-chrome:#cacaca; --sfd-platinum:#e8e8e8; --sfd-white:#f5f5f5; --sfd-orange:#ff6b35; --sfd-cyan:#00d4ff; --sfd-space-1:0.5rem; --sfd-space-2:1rem; --sfd-space-3:1.5rem; --sfd-space-4:2rem; --sfd-space-6:3rem; --sfd-space-8:4rem; --sfd-space-12:6rem; --sfd-space-16:8rem; --sfd-max-w:1200px; --sfd-mono:'JetBrains Mono',monospace; --sfd-display:'Inter','IBM Plex Sans',system-ui,sans-serif;} .sfd-rich-page, .sfd-rich-page * { box-sizing:border-box; } .sfd-rich-page { background: radial-gradient(circle at 82% 7%, rgba(255,107,53,0.18), transparent 30rem), radial-gradient(circle at 12% 38%, rgba(255,107,53,0.10), transparent 26rem), radial-gradient(circle at 78% 70%, rgba(255,107,53,0.08), transparent 28rem), var(--sfd-ink); color:var(--sfd-platinum); font-family:var(--sfd-display); overflow:hidden;} .sfd-rich-page a { color:var(--sfd-cyan); text-decoration:none; } .sfd-rich-page a:hover { color:var(--sfd-orange); } .sfd-rich-page img { max-width:100%; height:auto; display:block; } .sfd-hero { position:relative; min-height:85vh; height:720px; overflow:hidden; margin-top:0; } .sfd-hero-bg { position:absolute; inset:0; background-image:url('assets/processed-images/sfd-hero-hello-led.jpg'); background-size:cover; background-position:center center; transform:scale(1.02); } .sfd-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,10,10,0.92) 0%,rgba(10,10,10,0.66) 48%,rgba(10,10,10,0.36) 100%); } .sfd-hero::after { content:''; position:absolute; inset:auto 0 0 0; height:180px; background:linear-gradient(transparent,var(--sfd-ink)); z-index:1; pointer-events:none; } .sfd-hero-content { position:relative; z-index:2; max-width:var(--sfd-max-w); margin:0 auto; padding:var(--sfd-space-16) var(--sfd-space-3) var(--sfd-space-12); height:100%; display:flex; flex-direction:column; justify-content:flex-end; } .sfd-eyebrow, .sfd-hero-eyebrow { font-family:var(--sfd-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--sfd-cyan); margin:0 0 var(--sfd-space-2); } .sfd-hero h1 { font-size:clamp(2.6rem,5.8vw,5.4rem); font-weight:900; line-height:1.0; letter-spacing:-0.04em; color:var(--sfd-white); max-width:14ch; margin:0 0 var(--sfd-space-3); } .sfd-hero h1 span { color:var(--sfd-orange); text-shadow:0 0 28px rgba(255,107,53,0.25); } .sfd-hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sfd-space-4); flex-wrap:wrap; } .sfd-hero-sub { font-size:1.05rem; color:var(--sfd-silver); line-height:1.65; max-width:52ch; margin:0 0 var(--sfd-space-4); } .sfd-actions { display:flex; gap:var(--sfd-space-2); flex-wrap:wrap; align-items:center; } .sfd-btn { font-family:var(--sfd-mono); font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:0.9rem 1.55rem; border:1px solid transparent; border-radius:999px; cursor:pointer; transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; line-height:1; min-height:46px; box-shadow:0 10px 28px rgba(0,0,0,0.28); white-space:nowrap;} .sfd-btn:hover { transform:translateY(-2px); } .sfd-btn-primary { background:var(--sfd-orange); color:var(--sfd-ink)!important; border-color:rgba(255,107,53,0.9); } .sfd-btn-primary:hover { background:var(--sfd-cyan); border-color:var(--sfd-cyan); color:var(--sfd-ink)!important; box-shadow:0 0 28px rgba(0,212,255,0.35), 0 18px 42px rgba(0,0,0,0.34); } .sfd-btn-outline { background:rgba(10,10,10,0.34); color:var(--sfd-chrome)!important; border-color:rgba(202,202,202,0.34); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 28px rgba(0,0,0,0.22); } .sfd-btn-outline:hover { background:rgba(58,58,58,0.82); border-color:var(--sfd-cyan); color:var(--sfd-white)!important; box-shadow:0 0 22px rgba(0,212,255,0.16), 0 18px 42px rgba(0,0,0,0.34); } .sfd-btn-secondary { background:var(--sfd-cyan); color:var(--sfd-ink)!important; border-color:var(--sfd-cyan); } .sfd-btn-secondary:hover { background:var(--sfd-orange); border-color:var(--sfd-orange); color:var(--sfd-ink)!important; box-shadow:0 0 28px rgba(255,107,53,0.26), 0 18px 42px rgba(0,0,0,0.34); } .sfd-scroll-hint { font-family:var(--sfd-mono); font-size:0.65rem; color:var(--sfd-iron); letter-spacing:0.1em; text-transform:uppercase; display:flex; align-items:center; gap:0.5rem; } .sfd-scroll-line { width:40px; height:1px; background:var(--sfd-iron); } .sfd-capabilities { padding:var(--sfd-space-12) var(--sfd-space-3); max-width:var(--sfd-max-w); margin:0 auto; } .sfd-cap-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sfd-space-6); flex-wrap:wrap; gap:var(--sfd-space-3); } .sfd-cap-header h2, .sfd-section-title { font-size:clamp(1.6rem,2.7vw,2.6rem); font-weight:900; letter-spacing:-0.02em; color:var(--sfd-white); margin:0; } .sfd-cap-header p { color:var(--sfd-silver); max-width:44ch; font-size:0.95rem; line-height:1.5; margin:0.6rem 0 0; } .sfd-cap-header a, .sfd-about-content a { font-family:var(--sfd-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--sfd-cyan); } .sfd-cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sfd-space-3); } .sfd-cap-card { background:linear-gradient(180deg,rgba(42,42,42,0.9),rgba(26,26,26,0.96)); border:1px solid var(--sfd-steel); padding:var(--sfd-space-4); transition:all 0.25s; position:relative; overflow:hidden; min-height:210px; } .sfd-cap-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--sfd-orange); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; } .sfd-cap-card::after { content:''; position:absolute; width:120px; height:120px; right:-60px; bottom:-60px; border-radius:50%; background:radial-gradient(circle,rgba(0,212,255,0.12),transparent 65%); opacity:0; transition:opacity 0.25s; } .sfd-cap-card:hover { border-color:var(--sfd-orange); transform:translateY(-4px); box-shadow:0 18px 42px rgba(0,0,0,0.35); } .sfd-cap-card:hover::before { transform:scaleX(1); } .sfd-cap-card:hover::after { opacity:1; } .sfd-cap-icon { font-size:1.9rem; margin-bottom:var(--sfd-space-2); } .sfd-cap-card h3 { font-size:1rem; font-weight:800; color:var(--sfd-white); margin:0 0 var(--sfd-space-1); } .sfd-cap-card p { font-size:0.86rem; color:var(--sfd-silver); line-height:1.55; margin:0; } .sfd-marquee-strip { background:var(--sfd-graphite); border-top:1px solid var(--sfd-steel); border-bottom:1px solid var(--sfd-steel); padding:var(--sfd-space-3) 0; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); box-shadow:0 0 35px rgba(255,107,53,0.05) inset; } .sfd-marquee-track { display:flex!important; gap:var(--sfd-space-6); width:max-content; white-space:nowrap; animation:sfdMarquee 30s linear infinite!important; will-change:transform; } .sfd-marquee-item { font-family:var(--sfd-mono); font-size:1.08rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sfd-iron); flex-shrink:0; } .sfd-marquee-item span { color:var(--sfd-orange); margin-left:var(--sfd-space-6); } @keyframes sfdMarquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .sfd-featured { padding:var(--sfd-space-12) 0; background: radial-gradient(circle at 15% 18%, rgba(255,107,53,0.08), transparent 28rem), var(--sfd-carbon); width:100vw; margin-left:calc(50% - 50vw);} .sfd-featured-inner { max-width:var(--sfd-max-w); margin:0 auto; padding:0 var(--sfd-space-3); } .sfd-section-header { margin-bottom:var(--sfd-space-8); } .sfd-featured-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:260px 260px; gap:var(--sfd-space-3); } .sfd-featured-item { position:relative; overflow:hidden; border:1px solid var(--sfd-steel); transition:border-color 0.25s, transform 0.25s; background:var(--sfd-ink); min-height:240px; } .sfd-featured-item:first-child { grid-row:1/3; } .sfd-featured-item:hover { border-color:var(--sfd-cyan); transform:translateY(-2px); } .sfd-featured-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.45s, filter 0.45s; filter:saturate(0.88) contrast(1.05); } .sfd-featured-item:hover img { transform:scale(1.05); filter:saturate(1.05) contrast(1.1); } .sfd-featured-overlay { position:absolute; bottom:0; left:0; right:0; padding:var(--sfd-space-3); background:linear-gradient(transparent,rgba(10,10,10,0.94)); z-index:2; } .sfd-featured-overlay h4 { font-size:1rem; font-weight:800; color:var(--sfd-white); margin:0.2rem 0 0; } .sfd-featured-overlay .sfd-cat { font-family:var(--sfd-mono); font-size:0.65rem; color:var(--sfd-orange); letter-spacing:0.08em; text-transform:uppercase; margin:0; } .sfd-featured-cta { text-align:center; margin-top:var(--sfd-space-6); } .sfd-led { padding:var(--sfd-space-6) var(--sfd-space-3); max-width:var(--sfd-max-w); margin:0 auto; } .sfd-led-card { position:relative; overflow:hidden; min-height:250px; border:1px solid var(--sfd-steel); background:linear-gradient(135deg,rgba(42,42,42,0.86),rgba(10,10,10,0.96)); display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sfd-space-4); align-items:center; padding:var(--sfd-space-4); box-shadow:0 22px 56px rgba(0,0,0,0.26); } .sfd-led-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 82% 30%,rgba(0,212,255,0.18),transparent 28%),radial-gradient(circle at 18% 70%,rgba(255,107,53,0.15),transparent 32%); pointer-events:none; } .sfd-led-content, .sfd-led-visual { position:relative; z-index:1; } .sfd-led-content h2 { font-size:clamp(1.6rem,2.7vw,2.5rem); font-weight:900; color:var(--sfd-white); letter-spacing:-0.02em; margin:0 0 var(--sfd-space-2); } .sfd-led-content p { color:var(--sfd-silver); line-height:1.65; margin:0; max-width:54ch; } .sfd-led-visual { min-height:150px; border:1px solid rgba(202,202,202,0.18); background:repeating-linear-gradient(90deg,rgba(0,212,255,0.13) 0 2px,transparent 2px 18px),linear-gradient(135deg,rgba(255,107,53,0.16),rgba(0,212,255,0.08)); display:flex; align-items:center; justify-content:center; font-family:var(--sfd-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sfd-chrome); overflow:hidden; } .sfd-led-visual img, .sfd-led-visual .sfd-led-image img, .sfd-led-visual .wp-block-post-featured-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.9) contrast(1.05) brightness(0.72); } .sfd-led-visual .sfd-led-image, .sfd-led-visual .wp-block-post-featured-image { position:absolute; inset:0; margin:0; } .sfd-led-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,10,10,0.18),rgba(10,10,10,0.62)); } .sfd-led-visual span { position:relative; z-index:2; border:1px solid rgba(202,202,202,0.24); background:rgba(10,10,10,0.54); padding:0.85rem 1.1rem; } .sfd-about { padding:var(--sfd-space-12) var(--sfd-space-3); max-width:var(--sfd-max-w); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--sfd-space-8); align-items:center; } .sfd-about img { border:1px solid var(--sfd-steel); width:100%; height:340px; object-fit:cover; box-shadow:0 24px 60px rgba(0,0,0,0.35); } .sfd-about-content h2 { font-size:clamp(1.6rem,2.7vw,2.4rem); font-weight:900; letter-spacing:-0.02em; color:var(--sfd-white); margin:0 0 var(--sfd-space-3); } .sfd-about-content p { color:var(--sfd-silver); line-height:1.7; margin:0 0 var(--sfd-space-2); font-size:0.96rem; } .sfd-cta { background:var(--sfd-graphite); border-top:1px solid var(--sfd-steel); padding:var(--sfd-space-12) var(--sfd-space-3); width:100vw; margin-left:calc(50% - 50vw); position:relative; overflow:hidden; } .sfd-cta::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:560px; height:560px; background:radial-gradient(circle,rgba(255,107,53,0.12),transparent 68%); border-radius:50%; filter:blur(35px); pointer-events:none; } .sfd-cta-inner { max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:1; } .sfd-cta-inner h2 { font-size:clamp(1.9rem,3.7vw,3.2rem); font-weight:900; color:var(--sfd-white); margin:0 0 var(--sfd-space-2); } .sfd-cta-inner p { color:var(--sfd-silver); max-width:52ch; margin:0 auto var(--sfd-space-4); line-height:1.65; } @media(max-width:900px){ .sfd-hero{height:auto;min-height:620px} .sfd-hero-bottom{flex-direction:column;align-items:flex-start} .sfd-cap-grid{grid-template-columns:1fr} .sfd-featured-grid{grid-template-columns:1fr;grid-template-rows:auto} .sfd-featured-item:first-child{grid-row:auto} .sfd-featured-item{height:320px} .sfd-led{padding:var(--sfd-space-4) var(--sfd-space-2)} .sfd-led-card{grid-template-columns:1fr;padding:var(--sfd-space-3);min-height:0;gap:var(--sfd-space-3)} .sfd-led-visual{min-height:96px} .sfd-led-content h2{font-size:1.45rem} .sfd-led-content p{font-size:0.92rem;line-height:1.55} .sfd-about{grid-template-columns:1fr} .sfd-scroll-hint{display:none} } /* ─── Dynamic page rebuild — local wp-env review v1.4 concept ───────── */:root { --forge-deep:#0b0a08; --forge-ink:#100f0d; --forge-panel:#191713; --forge-panel-2:#242119; --forge-cream:#f4eee6; --forge-muted:#b8afa4; --forge-dim:#8a8478; --forge-orange:#e07b39; --forge-blue:#3c92b0; --forge-cyan:#7fd3e8; --forge-glow: rgba(224,123,57,.26);} .dynamic-site-main { overflow:hidden; background:#0b0a08; } .sfd-dynamic-page { width:100vw; margin-left:calc(50% - 50vw); background: radial-gradient(circle at 82% 8%, rgba(224,123,57,.24), transparent 34rem), radial-gradient(circle at 8% 22%, rgba(60,146,176,.16), transparent 30rem), radial-gradient(circle at 72% 72%, rgba(224,123,57,.10), transparent 36rem), #0b0a08; color:var(--forge-cream); font-family:'IBM Plex Sans',system-ui,sans-serif; } .sfd-dynamic-page * { box-sizing:border-box; } .sfd-dynamic-page a { color:inherit; } /* Local dynamic pages may render through the default page.html template; make that wrapper full-bleed and hide duplicate WP titles. */main.content-shell:has(.sfd-dynamic-page) { max-width:none; padding:0; } main.content-shell:has(.sfd-dynamic-page) > .wp-block-post-title { display:none; } /* ─── Design Corrections: Teal/Blue Accents ─────────────────────────────── *//* Teal accent border utility */.sfd-teal-border { border-color: rgba(60,146,176,.40) !important; } .sfd-teal-glow { box-shadow: 0 0 22px rgba(60,146,176,.22), 0 0 44px rgba(60,146,176,.10) !important; } /* Teal/cyan section eyebrow */.sfd-eyebrow-teal { color: var(--forge-cyan) !important; } .sfd-eyebrow-teal::before { background: linear-gradient(90deg, var(--forge-blue), transparent) !important; } /* ─── Instrumentation-Style Stat Cards ────────────────────────────────────── */.sfd-stat-card { /* Enhance with instrument-panel depth */ background: linear-gradient(160deg, rgba(36,33,25,.96), rgba(16,15,13,.94)), radial-gradient(circle at 30% 70%, rgba(60,146,176,.08), transparent 60%) !important; border-color: rgba(60,146,176,.22) !important; box-shadow: 0 18px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(127,211,232,.08), inset 0 -1px 0 rgba(0,0,0,.3) !important; transition: transform .24s, box-shadow .24s, border-color .24s;} .sfd-stat-card:hover { border-color: rgba(127,211,232,.50) !important; box-shadow: 0 22px 64px rgba(0,0,0,.32), 0 0 32px rgba(60,146,176,.28), 0 0 64px rgba(60,146,176,.12), inset 0 1px 0 rgba(127,211,232,.15) !important; transform: translateY(-4px);} /* Instrument panel backlit glow behind number */.sfd-stat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 40%, rgba(60,146,176,.18), transparent 65%); pointer-events: none; z-index: 0;} .sfd-stat-card > * { position: relative; z-index: 1; } /* LED number display — teal glow behind the stat number */.sfd-stat-number { position: relative; display: inline-block; color: var(--forge-cyan) !important; text-shadow: 0 0 12px rgba(127,211,232,.70), 0 0 28px rgba(127,211,232,.40), 0 0 56px rgba(60,146,176,.25) !important;} /* Small LED dot indicator on stat card */.sfd-stat-card .sfd-led { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--forge-cyan); box-shadow: 0 0 8px rgba(127,211,232,.80), 0 0 16px rgba(127,211,232,.40); margin-bottom: .6rem; animation: sfd-led-pulse 2.4s ease-in-out infinite alternate;} @keyframes sfd-led-pulse { from { opacity: .6; box-shadow: 0 0 6px rgba(127,211,232,.60); } to { opacity: 1; box-shadow: 0 0 12px rgba(127,211,232,.90), 0 0 24px rgba(127,211,232,.50); } } /* Teal radial in stat card ::after (keep orange as secondary accent) */.sfd-stat-card::after { background: radial-gradient(circle, rgba(60,146,176,.22), transparent 68%) !important;} /* ─── Section Contrast& Alternation ─────────────────────────────────────── *//* Lighten alternating sections for rhythm */.sfd-page-section-alt { background: linear-gradient(180deg, rgba(25,23,19,.96), rgba(16,15,13,.98)) !important;} /* Teal-accented section divider */.sfd-teal-divider { border-top: 1px solid rgba(60,146,176,.30); box-shadow: 0 1px 0 rgba(127,211,232,.08);} /* Section with teal ambient glow */.sfd-section-glow-teal { background: radial-gradient(circle at 50% 0%, rgba(60,146,176,.14), transparent 55%), radial-gradient(circle at 15% 80%, rgba(60,146,176,.08), transparent 40%), linear-gradient(180deg, rgba(16,15,13,.98), rgba(11,10,8,1)) !important;} /* Teal proof band variant */.sfd-proof-band-teal { background: linear-gradient(90deg,rgba(60,146,176,.14),rgba(127,211,232,.08),rgba(16,15,13,.88)) !important; border-block: 1px solid rgba(60,146,176,.28) !important;} /* ─── Portfolio Visual Tiles & Artifact Placeholders ─────────────────────── *//* Mosaic tile with teal hover accent */.sfd-project-tile { border-color: rgba(60,146,176,.20) !important; transition: transform .26s, border-color .26s, box-shadow .26s !important;} .sfd-project-tile:hover { border-color: rgba(127,211,232,.55) !important; box-shadow: 0 26px 90px rgba(0,0,0,.34), 0 0 28px rgba(60,146,176,.20) !important;} /* Teal tile overlay accent line */.sfd-tile-overlay small { color: var(--forge-cyan) !important; } /* Placeholder pattern when no image — subtle grid artifact */.sfd-tile-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 40px, rgba(60,146,176,.04) 40px 41px), repeating-linear-gradient(90deg, transparent 0 40px, rgba(60,146,176,.04) 40px 41px), linear-gradient(160deg, rgba(36,33,25,.96), rgba(16,15,13,.94)); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;} .sfd-tile-placeholder-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(60,146,176,.14); border: 1px solid rgba(60,146,176,.30); display: grid; place-items: center; font-size: 1.4rem; box-shadow: 0 0 24px rgba(60,146,176,.18);} .sfd-tile-placeholder-label { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(127,211,232,.60);} /* ─── Asymmetry / Diagonal Rhythm ────────────────────────────────────────── *//* Stronger diagonal clip with teal accent edge */.sfd-diagonal-teal { clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); border-top: 2px solid rgba(60,146,176,.35); box-shadow: inset 0 2px 0 rgba(127,211,232,.10);} /* Diagonal transition strip between sections */.sfd-diagonal-strip { height: 60px; background: linear-gradient(135deg, rgba(60,146,176,.12), transparent 60%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%); margin-block: -30px; position: relative; z-index: 2;} /* ─── Mobile Responsive Enhancements ─────────────────────────────────────── */@media (max-width: 900px) { .sfd-stat-card:hover { transform: translateY(-2px); } .sfd-stat-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .sfd-stat-grid { grid-template-columns: 1fr !important; } .sfd-stat-card { min-height: 120px; } } /* Local QA fixes: mobile header/nav overflow prevention. */.mobile-toggle { display: none; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border: 1px solid rgba(244, 238, 230, 0.18); border-radius: 999px; background: rgba(244, 238, 230, 0.06); color: #f4eee6; font: 700 0.78rem/1 'IBM Plex Sans', sans-serif; letter-spacing: 0.06em; text-transform: uppercase;} @media (max-width: 980px) { .site-header nav a:not(.cta):not(.pill) { display: none !important; } } @media (max-width: 620px) { .site-header .inner { position: relative; overflow: visible; } .site-header .brand { flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 112px); } .site-header .brand-logo-wrap { min-width: 0; max-width: 100%; } .site-header .brand-logo { display: block; width: auto !important; max-width: 100% !important; min-width: 1px; height: 34px; object-fit: contain; } .mobile-toggle { display: inline-flex; flex: 0 0 auto; } .site-header nav { position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; z-index: 1001; display: none !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; width: auto; max-width: calc(100vw - 32px); padding: 14px; border: 1px solid rgba(244, 238, 230, 0.12); border-radius: 20px; background: rgba(16, 15, 13, 0.98); box-shadow: 0 24px 60px rgba(0,0,0,.35); } .site-header.is-mobile-open nav { display: flex !important; } .site-header.is-mobile-open nav a, .site-header.is-mobile-open nav a:not(.cta):not(.pill) { display: inline-flex !important; justify-content: center; width: 100%; } .site-header.is-mobile-open nav .cta { display: inline-flex !important; } } /* Staging safety: hide duplicated shell fragments if DB page content contains template parts. */.dynamic-site-main .skip-to-content,.dynamic-site-main .site-header,.dynamic-site-main .mega-scrim,.dynamic-site-main .mega,.dynamic-site-main .site-footer { display: none !important;} /* Fix: WordPress global block spacing was pushing the site header 24px below the viewport. */.wp-site-blocks > .skip-to-content,.wp-site-blocks > .site-header,.wp-site-blocks > .mega-scrim,.wp-site-blocks > .mega { margin-block-start: 0;} /* ─── Staging build-out: Services, Field Notes, and single posts ───────── */.forge-page { color: #f4eee6; background: #100f0d;} .page-hero { padding: clamp(4rem, 8vw, 7rem) clamp(22px, 5vw, 76px) clamp(2rem, 4vw, 3rem); max-width: 1180px; margin: 0 auto;} .page-hero h1 { max-width: 980px; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .95; letter-spacing: -.055em; margin: 0 0 1.2rem;} .page-hero .lede, .field-note-post .lede, .post-body-forge .lede { max-width: 760px; color: #d8cfc4; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.55;} .section-label,.section-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #e07b39; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; margin-bottom: 1rem;} .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .service-grid-section,.two-column-panel,.page-cta-panel { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(22px, 5vw, 76px);} .service-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;} .service-card,.forge-post-card,.page-cta-panel,.two-column-panel { background: linear-gradient(145deg, rgba(25,23,19,.96), rgba(16,15,13,.92)); border: 1px solid rgba(244,238,230,.11); border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.24);} .service-card { padding: 24px; min-height: 240px; } .service-card h2 { font-size: 1.28rem; margin: 12px 0 10px; } .service-card p { color: #cfc6ba; line-height: 1.58; } .card-index { font-family: 'JetBrains Mono', monospace; color: #e07b39; font-size: .76rem; } .process-band { max-width: 1180px; margin: 24px auto; padding: 18px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: rgba(244,238,230,.09); border: 1px solid rgba(244,238,230,.12); border-radius: 18px; overflow: hidden;} .process-band > * { background: #191713; padding: 18px; display: grid; gap: 6px; list-style: none; } .process-band strong { color: #e07b39; font-family: 'JetBrains Mono', monospace; } .process-band span { color: #f4eee6; font-weight: 700; } .two-column-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); } .two-column-panel h2, .page-cta-panel h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; margin: 0; } .two-column-panel p, .two-column-panel li, .page-cta-panel p { color: #d8cfc4; line-height: 1.65; } /* Restore the orange section-kicker inside two-column-panels and the page CTA panel. * Without this, the muted-cream color cascade on the parent panel's

overwrites * the brand orange kicker that signals "new section starts here" — a site-wide * bug the about page surfaced. */ .two-column-panel .section-kicker, .page-cta-panel .section-kicker { color: var(--forge-orange, #e07b39); } .field-notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px) clamp(4rem, 7vw, 6rem);} .forge-post-card { padding: 24px; } .post-card-title { font-size: 1.25rem; line-height: 1.16; margin: 0 0 12px; } .post-card-title a { color: #f4eee6; text-decoration: none; } .post-card-title a:hover { color: #e07b39; } .post-card-meta,.post-meta-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #b8afa4; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;} .post-card-excerpt { color: #cfc6ba; line-height: 1.55; } .field-note-post { max-width: 820px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) clamp(22px, 5vw, 48px);} .post-title-forge { font-size: clamp(2.25rem, 5.5vw, 4.2rem); line-height: .98; letter-spacing: -.045em; margin: 18px 0 28px;} .post-body-forge { font-size: 1.08rem; line-height: 1.72; color: #e8dfd4;} .post-body-forge h2 { color: #f4eee6; font-size: clamp(1.55rem, 3vw, 2.2rem); margin: 48px 0 16px; padding-top: 18px; border-top: 1px solid rgba(224,123,57,.28);} .post-body-forge h3 { color: #e07b39; margin: 32px 0 12px; } .post-body-forge a { color: #e07b39; text-underline-offset: 3px; } .post-body-forge code { font-family: 'JetBrains Mono', ui-monospace, monospace; background: rgba(224,123,57,.14); color: #e07b39; padding: .1em .35em; border-radius: 4px;} .post-tags-forge { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(244,238,230,.12);} .empty-note { max-width: 1180px; margin: 0 auto 4rem; padding: 0 clamp(22px, 5vw, 76px); color: #b8afa4; } /* Path-specific page identities */.page-employers .page-hero { background: linear-gradient(180deg, rgba(12,18,22,.92), rgba(16,15,13,.72)), radial-gradient(circle at 85% 20%, rgba(127,211,232,.18), transparent 28%); border-bottom: 1px solid rgba(127,211,232,.14);} .employers-metrics { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px) 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(127,211,232,.12); border-top: 1px solid rgba(127,211,232,.2); border-bottom: 1px solid rgba(127,211,232,.2);} .employers-metric { background: linear-gradient(180deg, rgba(17,28,33,.96), rgba(16,15,13,.96)); padding: 24px; display: grid; gap: 8px;} .employers-metric strong { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; color: #7fd3e8;} .employers-metric span { color: #cad4d6; line-height: 1.55; } .employers-timeline { max-width: 1180px; margin: 0 auto; padding: 2rem clamp(22px, 5vw, 76px) 0; display: grid; gap: 18px;} .timeline-row { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid rgba(127,211,232,.16);} .timeline-row:last-child { border-bottom: 1px solid rgba(127,211,232,.16); } .timeline-meta { display: grid; gap: 8px; align-content: start;} .timeline-year,.timeline-role { font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;} .timeline-year { color: #7fd3e8; } .timeline-role { color: #b8afa4; } .timeline-copy h2 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); margin: 0 0 12px;} .timeline-copy p { margin: 0; color: #d2d8da; line-height: 1.65; max-width: 70ch; } .employers-split { background: linear-gradient(145deg, rgba(14,24,29,.88), rgba(16,15,13,.92)); border-color: rgba(127,211,232,.18);} .employers-proof-band { max-width: 1180px; margin: 28px auto; padding: 32px clamp(22px, 5vw, 76px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; border-top: 1px solid rgba(127,211,232,.22); border-bottom: 1px solid rgba(127,211,232,.22); background: linear-gradient(90deg, rgba(60,146,176,.14), rgba(16,15,13,.92));} .employers-proof-band p { color: #d2d8da; line-height: 1.65; margin: 0; } .employers-proof-band h2 { margin: 0; } .page-clients .page-hero { padding-top: clamp(1.5rem, 3vw, 2.75rem); background: linear-gradient(180deg, rgba(54,32,18,.38), rgba(16,15,13,.64)), radial-gradient(circle at 80% 25%, rgba(224,123,57,.18), transparent 30%);} .page-clients .page-hero > .sfd-availability-banner { margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);} .clients-service-grid { gap: 20px; } .clients-service-card:nth-child(odd) { transform: translateY(10px);} .clients-case-strip { max-width: 1180px; margin: 0 auto; padding: 2rem clamp(22px, 5vw, 76px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px;} .clients-case-strip article { border-radius: 24px; padding: 28px; background: linear-gradient(135deg, rgba(24,21,17,.98), rgba(46,28,18,.9)); border: 1px solid rgba(224,123,57,.14);} .clients-case-strip small { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #e6a06d;} .clients-case-strip h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin: 12px 0 10px;} .clients-case-strip p { margin: 0; color: #d7c9bd; line-height: 1.62; } .clients-fit-panel { background: linear-gradient(145deg, rgba(33,23,17,.96), rgba(16,15,13,.94)); border-color: rgba(224,123,57,.14);} .clients-cta-panel { background: linear-gradient(135deg, rgba(224,123,57,.18), rgba(244,238,230,.05));} .page-contact .page-hero { background: linear-gradient(180deg, rgba(37,26,19,.86), rgba(16,15,13,.68)), radial-gradient(circle at 82% 22%, rgba(224,123,57,.22), transparent 32%), radial-gradient(circle at 16% 70%, rgba(60,146,176,.12), transparent 28%); border-bottom: 1px solid rgba(224,123,57,.16);} .contact-section-head { max-width: 780px; margin: 0 0 24px;} .contact-section-head h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.08; letter-spacing: -.025em; margin: 0;} .contact-route-card { min-height: 210px; } .contact-route-card h3 { font-size: 1.18rem; margin: 12px 0 10px;} .contact-form-section { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(22px, 5vw, 76px);} .contact-form-shell { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(24px, 5vw, 56px); align-items: start; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(244,238,230,.12); border-radius: 24px; background: linear-gradient(145deg, rgba(25,23,19,.98), rgba(16,15,13,.94)); box-shadow: 0 28px 78px rgba(0,0,0,.30); position: relative; overflow: hidden;} .contact-form-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 0%, rgba(224,123,57,.16), transparent 34%), radial-gradient(circle at 92% 100%, rgba(60,146,176,.12), transparent 32%);} .contact-form-intro,.contact-entry-form { position: relative; z-index: 1; } .contact-form-intro h2 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 18px;} .contact-form-intro p { color: #d8cfc4; line-height: 1.68; margin: 0 0 22px;} .contact-form-cues { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;} .contact-form-cues li { color: #cfc6ba; line-height: 1.5; padding: 12px 0 12px 20px; border-top: 1px solid rgba(244,238,230,.1); position: relative;} .contact-form-cues li::before { content: '→'; position: absolute; left: 0; color: #e07b39;} .contact-entry-form { display: grid; gap: 18px;} .contact-entry-form label { display: grid; gap: 8px; color: #f4eee6; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;} .contact-entry-form label span em,.contact-form-required span { color: #e07b39; font-style: normal;} .contact-form-required { margin: 0; color: #b8afa4; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;} .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;} .contact-entry-form input,.contact-entry-form select,.contact-entry-form textarea { width: 100%; border: 1px solid rgba(244,238,230,.16); border-radius: 14px; background: rgba(244,238,230,.055); color: #f4eee6; font: 500 1rem/1.4 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; padding: 13px 15px; transition: border-color .18s, background .18s, box-shadow .18s;} .contact-entry-form select { color-scheme: dark; } .contact-entry-form textarea { min-height: 180px; resize: vertical;} .contact-entry-form input::placeholder,.contact-entry-form textarea::placeholder { color: rgba(216,207,196,.52); } .contact-entry-form input:focus,.contact-entry-form select:focus,.contact-entry-form textarea:focus { outline: none; border-color: rgba(224,123,57,.78); background: rgba(244,238,230,.08); box-shadow: 0 0 0 3px rgba(224,123,57,.14);} .contact-form-consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; font-family: 'Source Sans 3', system-ui, sans-serif !important; font-size: .95rem !important; letter-spacing: 0 !important; line-height: 1.45; text-transform: none !important; color: #d8cfc4 !important;} .contact-form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: #e07b39;} .contact-form-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;} .contact-form-submit { justify-self: start; border: 0;} .contact-form-notice { border-radius: 14px; padding: 12px 14px; font-weight: 700; line-height: 1.45;} .contact-form-notice-success { color: #f4eee6; background: rgba(60,146,176,.16); border: 1px solid rgba(127,211,232,.34);} .contact-form-notice-error { color: #fff2e8; background: rgba(224,123,57,.14); border: 1px solid rgba(224,123,57,.42);} .contact-cta-panel { background: linear-gradient(135deg, rgba(244,238,230,.06), rgba(224,123,57,.14));} .page-field-notes .page-hero { max-width: 980px; padding-bottom: 2rem; border-bottom: 1px solid rgba(244,238,230,.1);} .field-notes-feature { max-width: 1180px; margin: 0 auto; padding: 1rem clamp(22px, 5vw, 76px) 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px;} .field-note-featured-entry,.field-note-topics { border-radius: 0; border: 1px solid rgba(244,238,230,.1); background: rgba(20,19,17,.9);} .field-note-featured-entry { padding: 34px;} .field-note-featured-entry small { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #b8afa4;} .field-note-featured-entry h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; margin: 14px 0 12px;} .field-note-featured-entry p { color: #ddd4ca; line-height: 1.72; max-width: 56ch; } .field-note-featured-entry a { font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #f4eee6;} .field-note-topics { padding: 24px; display: flex; flex-wrap: wrap; align-content: start; gap: 10px;} .field-note-topics span { padding: 10px 12px; border-top: 1px solid rgba(244,238,230,.16); width: calc(50% - 5px); color: #cfc6ba; font-family: 'JetBrains Mono', monospace; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;} .field-notes-editorial { max-width: 820px; margin: 0 auto; padding: 3rem clamp(22px, 5vw, 48px) 1rem;} .field-notes-editorial-copy h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.03; margin: 0 0 18px;} .field-notes-editorial-copy p { color: #e3dad1; line-height: 1.78; font-size: 1.06rem; max-width: 64ch;} .field-notes-columns { max-width: 1180px; margin: 0 auto; padding: 1rem clamp(22px, 5vw, 76px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px;} .field-note-column { display: grid; gap: 18px; align-content: start;} .field-note-entry { padding: 26px 0; border-top: 1px solid rgba(244,238,230,.1);} .field-note-entry h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 10px 0;} .field-note-entry p { margin: 0; color: #d8cfc4; line-height: 1.72;} .field-note-column-accent { padding-left: 24px; border-left: 1px solid rgba(244,238,230,.1);} .field-note-quote { background: linear-gradient(180deg, rgba(244,238,230,.04), rgba(244,238,230,.01)); padding: 28px 24px; border-bottom: 1px solid rgba(244,238,230,.1);} .field-note-quote p { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.12; color: #f4eee6;} .field-notes-cta-panel { background: transparent; box-shadow: none; border-width: 1px 0 0; border-radius: 0;} .page-portfolio .page-hero { background: linear-gradient(180deg, rgba(22,21,18,.94), rgba(16,15,13,.72)), radial-gradient(circle at 78% 24%, rgba(224,123,57,.12), transparent 30%);} /* About page hero: cooler / quieter than the warm-orange services hero and the * teal employers hero. A neutral charcoal base with a soft cream radial lets the * about-hero-geo floating shapes read as foreground, not as warm orange competing * with the brand accent. Distinct on its own, consistent with the family. */ .page-about .page-hero { background: linear-gradient(180deg, rgba(20,18,16,.92), rgba(16,15,13,.74)), radial-gradient(circle at 80% 22%, rgba(244,238,230,.10), transparent 32%), radial-gradient(circle at 12% 80%, rgba(60,146,176,.06), transparent 30%); border-bottom: 1px solid rgba(244,238,230,.10);} /* About CTA panel: a softer cream-tinted accent than .clients-cta-panel (warm orange). * The about page signals "personal statement," not "sell a service," so the * finish should feel quieter — closer to the cream tones already used in the * hero, with just enough warmth to mark the page's close. */ .page-cta-panel.about-cta-panel { background: linear-gradient(135deg, rgba(244,238,230,.07), rgba(224,123,57,.06)); border-color: rgba(244,238,230,.14); } /* About page vertical rhythm. The default page-content blocks have no * margin-bottom, so .two-column-panel + .two-column-panel + .page-cta-panel * would stack flush (8px gap = paragraph margin leaking through), making the * boxes look like they overlap. Give each "content section" a top margin * so they breathe. The .process-band already has its own margin: 24px auto so * we exclude it via :not(.process-band) so we don't double it. The .page-hero * is the first child and stays flush. */ .page-about > .service-grid-section, .page-about > .two-column-panel, .page-about > .page-cta-panel { margin-top: clamp(2.5rem, 5vw, 4rem); } .portfolio-route-band { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px) 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;} .portfolio-route-card,.portfolio-evidence-block { border-radius: 22px; padding: 28px; border: 1px solid rgba(244,238,230,.12); background: linear-gradient(145deg, rgba(27,24,20,.98), rgba(16,15,13,.94));} .portfolio-route-card small,.portfolio-evidence-block small { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #b8afa4;} .portfolio-route-card h2,.portfolio-evidence-block h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 12px 0 10px;} .portfolio-route-card p,.portfolio-evidence-block p { margin: 0; color: #d8cfc4; line-height: 1.65;} .portfolio-proof-grid .service-card { min-height: 260px;} .portfolio-proof-card:nth-child(2) { transform: translateY(18px);} .portfolio-evidence-strip { max-width: 1180px; margin: 0 auto; padding: 1rem clamp(22px, 5vw, 76px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px;} .portfolio-reading-panel { background: linear-gradient(145deg, rgba(22,20,17,.96), rgba(16,15,13,.92));} .portfolio-cta-panel { background: linear-gradient(135deg, rgba(244,238,230,.06), rgba(224,123,57,.12));} @media (max-width: 860px) { .service-card-grid, .field-notes-grid, .process-band, .two-column-panel { grid-template-columns: 1fr; } .service-card { min-height: auto; } .employers-metrics, .clients-case-strip, .field-notes-feature, .field-notes-columns, .employers-proof-band, .portfolio-route-band, .portfolio-evidence-strip, .timeline-row, .contact-form-shell { grid-template-columns: 1fr; } .contact-form-grid { grid-template-columns: 1fr; } .contact-form-shell { padding: 24px; } .clients-service-card:nth-child(odd) { transform: none; } .portfolio-proof-card:nth-child(2) { transform: none; } .field-note-topics span { width: 100%; } .field-note-column-accent { padding-left: 0; border-left: 0; } } /* ─── About page: scroll-triggered animations ─── */@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .animate-on-scroll { opacity: 1; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);} /* JS sets on first run. We then hide .animate-on-scroll * and reveal it via IntersectionObserver + .is-visible. The default-state opacity:1 * above is the no-JS fallback so the content is always visible if JS is off or * fails to load. */ html.sfd-has-reveal .animate-on-scroll { opacity: 0; } html.sfd-has-reveal .animate-on-scroll.is-visible { animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* ─── Animated hero geometric shapes ─── */.about-hero { position: relative; overflow: hidden;} .about-hero-geo { position: absolute; inset: 0; pointer-events: none; overflow: hidden;} .about-hero-geo span { position: absolute; border-radius: 4px; opacity: 0.07; animation: geoFloat 18s ease-in-out infinite;} /* Page-scoped: lift the floating shapes' opacity on the about page so they read * as foreground motion against the new path-specific hero gradient, and hide * them on narrow viewports so they don't visually compete with the headline. */ .page-about .about-hero-geo span { opacity: 0.13; } @media (max-width: 860px) { .about-hero-geo { display: none; } } .about-hero-geo span:nth-child(1) { width: 180px; height: 180px; background: #e07b39; top: 8%; right: -5%; transform: rotate(22deg); animation-duration: 22s; animation-delay: 0s;} .about-hero-geo span:nth-child(2) { width: 90px; height: 90px; border: 2px solid #f4eee6; top: 55%; right: 12%; animation-duration: 16s; animation-delay: -5s;} .about-hero-geo span:nth-child(3) { width: 40px; height: 40px; background: #e07b39; top: 30%; right: 22%; transform: rotate(45deg); animation-duration: 13s; animation-delay: -9s;} .about-hero-geo span:nth-child(4) { width: 140px; height: 140px; border: 1.5px solid rgba(244,238,230,0.4); bottom: 5%; left: -3%; animation-duration: 20s; animation-delay: -3s;} .about-hero-geo span:nth-child(5) { width: 60px; height: 60px; background: rgba(224,123,57,0.5); bottom: 18%; left: 8%; transform: rotate(15deg); animation-duration: 17s; animation-delay: -11s;} @keyframes geoFloat { 0%,100% { transform: translateY(0) rotate(var(--r, 22deg)) scale(1); } 33% { transform: translateY(-18px) rotate(calc(var(--r, 22deg) + 8deg)) scale(1.04); } 66% { transform: translateY(10px) rotate(calc(var(--r, 22deg) - 5deg)) scale(0.97); } } /* ─── Stat counters strip ─── */.about-stats { border-top: 1px solid rgba(244,238,230,0.08); border-bottom: 1px solid rgba(244,238,230,0.08); padding: clamp(1.8rem, 3vw, 2.4rem) clamp(22px, 5vw, 76px); display: flex; gap: clamp(2rem, 5vw, 5rem); align-items: center; flex-wrap: wrap;} .about-stats-item { display: flex; flex-direction: column; gap: 4px;} .about-stats-number { font-family: 'IBM Plex Sans', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: #f4eee6; line-height: 1; letter-spacing: -0.03em;} .about-stats-number span { color: #e07b39; } .about-stats-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #b8afa4;} /* ─── Skill badge hover ─── */.skill-badge { transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; cursor: default;} .skill-badge:hover { background: rgba(224,123,57,0.18) !important; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(224,123,57,0.25);} /* ─── Project query blocks (1.5.0 — posts in Project category) ───── */ /* Homepage Selected Work — pulls sticky Project posts in an asymmetric 2-col grid. The post-template