/* ============================================================ FOUNDRY — Avakode landing redesign (2026) Premium editorial dark-glass. Bold, not loud. Scoped under body.foundry so the original theme is untouched. Layers on top of forge.css; relies on palette vars injected by inc/palette.php (--accent, --bg-dark, --accent-light, ...). ============================================================ */ /* ---- 1. Tokens -------------------------------------------- */ /* NOTE: do NOT set overflow-x: clip/hidden on html or body here — it silently breaks position:sticky (which the scroll scenes now use to hold smoothly). The layout is verified to have no real horizontal overflow, so no clip is needed; if a stray element ever overflows, clip THAT element, not the root. */ body.foundry { /* Force the immersive dark editorial canvas regardless of the site-wide light/dark toggle — the homepage is one dark stage. */ --fdry-bg: #06080F; /* deepest base */ --fdry-bg-2: #0A1024; /* navy lift */ --fdry-ink: #ECEEF7; /* primary text on dark */ --fdry-ink-soft: #A7AEC8; /* secondary text */ --fdry-ink-faint: #6B7299; /* muted / captions */ --fdry-violet: #7C5CFC; /* suite light source */ --fdry-violet-lt: #A78BFA; /* Product accents (fixed brand colors) */ --fdry-teal: #0EC49E; /* LangForge */ --fdry-orange: #FF6B35; /* SEOForge */ --fdry-blue: #3B82F6; /* FormForge */ --fdry-rose: #F43F5E; /* FieldForge */ /* Glass system */ --fdry-glass: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.018)); --fdry-glass-strong: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); --fdry-glass-border: rgba(255,255,255,.10); --fdry-glass-edge: rgba(255,255,255,.22); /* top highlight */ --fdry-blur: 16px; /* Depth shadows */ --fdry-shadow: 0 24px 70px rgba(0,0,0,.45); --fdry-shadow-lg: 0 40px 120px rgba(0,0,0,.55); /* Geometry + motion */ --fdry-r: 20px; --fdry-r-lg: 28px; --fdry-ease: cubic-bezier(.16,1,.3,1); --fdry-ease-out: cubic-bezier(.22,.61,.36,1); --fdry-maxw: 1240px; background: var(--fdry-bg); color: var(--fdry-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* The base theme sets body{overflow-x:hidden} which breaks position:sticky (hidden makes body a scroll container). Override to visible on Foundry pages — the layout has no real horizontal overflow. */ overflow-x: visible; } /* Ambient canvas: a single soft violet light source + faint grid. One fixed layer (cheap) instead of three animated blobs. */ body.foundry::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(135% 85% at 60% -6%, color-mix(in srgb, var(--fdry-violet) 24%, transparent), transparent 62%), radial-gradient(95% 65% at 6% 2%, rgba(59,130,246,.12), transparent 58%), linear-gradient(180deg, var(--fdry-bg) 0%, var(--fdry-bg-2) 38%, var(--fdry-bg) 100%); } /* Fine technical grid — the "blueprint" of a forge/atelier. */ body.foundry::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 35%, transparent 78%); mask-image: radial-gradient(110% 80% at 50% 0%, #000 35%, transparent 78%); } /* Content sits above the z-index:-1 background pseudo-elements naturally; we must NOT lift every child with z-index here, or it would clobber position:fixed overlays appended to (search palette, chat, progress). */ /* ---- 2. Typography ---------------------------------------- */ .foundry .fdry-display, .foundry .fdry h1, .foundry .fdry h2 { font-family: 'Space Grotesk', 'Inter', sans-serif; } .foundry .fdry-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: .875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--fdry-violet-lt); } .foundry .fdry-kicker::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--fdry-violet), transparent); } .foundry .fdry-kicker--accent { color: var(--fdry-acc, var(--fdry-violet-lt)); } .foundry .fdry-kicker--accent::before { background: linear-gradient(90deg, var(--fdry-acc, var(--fdry-violet)), transparent); } .foundry .fdry-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1.95rem, 3.9vw, 3.5rem); line-height: .96; letter-spacing: -.03em; color: #fff; text-wrap: balance; } .foundry .fdry-h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; color: #fff; text-wrap: balance; } .foundry .fdry-h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; } .foundry .fdry-lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--fdry-ink-soft); max-width: 46ch; } .foundry .fdry-grad { background: linear-gradient(92deg, var(--fdry-violet-lt), #fff 60%, var(--fdry-violet-lt)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- 3. Layout shell + section rhythm --------------------- */ .foundry .fdry-shell { width: 100%; max-width: var(--fdry-maxw); margin: 0 auto; padding: 0 28px; } .foundry .fdry-sec { padding: clamp(76px, 11vw, 150px) 0; position: relative; } .foundry .fdry-sec--tight { padding: clamp(48px, 7vw, 96px) 0; } /* Pinned scroll scenes (lf-morph / se-climb / ff-flow / gf-schema): when pinned at top:top, the fixed nav (~110px when scrolled) overlaps the section top. A FIXED 130px section top clears the nav at every width (the responsive clamp would dip below it on narrow desktops); each stage then adds only a small 16px top (see its own rule) ⇒ content lands ~36px below the nav. Each product has only its own class, so the others are inert. */ .foundry .lf-morph, .foundry .se-climb, .foundry .ff-flow, .foundry .gf-schema { padding-top: 130px; } /* Scroll scenes hold via CSS position:sticky (NOT ScrollTrigger pin) — sticky is buttery-smooth and never "jumps" on engagement or fights pin-spacers, so adjacent scenes can't overlap. The section is made tall (min-height) to give the sticky stage room to hold while the JS scrubs the animation by scroll progress. The stage fills the viewport and centres its content (clear of the fixed nav). FormForge ff-flow handles its own (tall-content) sticky. */ @media (min-width: 1024px) { .foundry .lf-morph, .foundry .se-climb, .foundry .gf-schema { padding-top: 0; padding-bottom: 0; } /* The DIRECT parent of a sticky element must be the tall one — make the shell 200vh so the sticky stage has room to hold for ~1 viewport of scroll. */ .foundry .lf-morph > .fdry-shell, .foundry .se-climb > .fdry-shell, .foundry .gf-schema > .fdry-shell { min-height: 170vh; display: block; } .foundry .lf-morph__stage, .foundry .se-climb__stage, .foundry .gf-schema__stage { position: sticky; top: 0; min-height: 100vh; justify-content: center; padding-top: 110px; padding-bottom: 48px; } } .foundry .fdry-sechead { max-width: 760px; margin: 0 0 clamp(40px, 6vw, 72px); } .foundry .fdry-sechead--center { margin-inline: auto; text-align: center; } .foundry .fdry-sechead--center .fdry-kicker::before { display: none; } .foundry .fdry-sechead .fdry-lead { margin-top: 20px; max-width: 60ch; } .foundry .fdry-sechead .fdry-kicker { margin-bottom: 22px; } /* Mobile: compact section rhythm — the desktop clamp min (76px) is too tall on phones and left ~150px gaps between sections. */ @media (max-width: 760px) { .foundry .fdry-sec { padding: 38px 0; } .foundry .fdry-sec--tight { padding: 24px 0; } .foundry .fdry-sechead { margin-bottom: 22px; } } /* hairline divider used between major movements */ .foundry .fdry-rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); } /* ---- 4. Glass primitives ---------------------------------- */ .foundry .fdry-glass { position: relative; background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); box-shadow: var(--fdry-shadow); overflow: hidden; } /* top edge light — the "refraction" highlight */ .foundry .fdry-glass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fdry-glass-edge), transparent); } .foundry .fdry-glass--blur { -webkit-backdrop-filter: blur(var(--fdry-blur)) saturate(150%); backdrop-filter: blur(var(--fdry-blur)) saturate(150%); } /* ---- 5. Buttons (harmonise nav + hero) -------------------- */ .foundry .forge-btn, .foundry .fdry-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 12px; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; cursor: pointer; border: 1px solid transparent; transition: transform .35s var(--fdry-ease), box-shadow .35s var(--fdry-ease), background .3s ease, border-color .3s ease; will-change: transform; } .foundry .forge-btn svg, .foundry .fdry-btn svg { width: 18px; height: 18px; transition: transform .35s var(--fdry-ease); } .foundry .forge-btn--primary, .foundry .fdry-btn--primary { background: linear-gradient(180deg, var(--fdry-violet-lt), var(--fdry-violet)); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--fdry-violet) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.4); } .foundry .forge-btn--primary:hover, .foundry .fdry-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px color-mix(in srgb, var(--fdry-violet) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.5); } .foundry .forge-btn--primary:hover svg { transform: translateX(3px); } .foundry .forge-btn--secondary, .foundry .forge-btn--ghost, .foundry .fdry-btn--ghost { background: rgba(255,255,255,.05); border-color: var(--fdry-glass-border); color: var(--fdry-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .foundry .forge-btn--secondary:hover, .foundry .forge-btn--ghost:hover, .foundry .fdry-btn--ghost:hover { transform: translateY(-2px); border-color: var(--fdry-glass-edge); background: rgba(255,255,255,.09); } .foundry .forge-btn--lg, .foundry .fdry-btn--lg { padding: 17px 32px; font-size: 1.02rem; } /* ---- 6. Nav (glass) --------------------------------------- */ .foundry .forge-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; border-bottom: 1px solid transparent; } .foundry .forge-nav.is-stuck { background: rgba(8,11,22,.66); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--fdry-glass-border); } .foundry .forge-nav__inner { max-width: var(--fdry-maxw); margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .foundry .forge-nav__logo-img { height: 52px; width: auto; } .foundry .forge-nav__links { display: flex; gap: 28px; } .foundry .forge-nav__links a { color: var(--fdry-ink-soft); font-size: .94rem; font-weight: 500; position: relative; padding: 4px 0; transition: color .25s ease; } .foundry .forge-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--fdry-violet-lt); transition: right .3s var(--fdry-ease); } .foundry .forge-nav__links a:hover { color: #fff; } .foundry .forge-nav__links a:hover::after { right: 0; } .foundry .forge-nav__actions { display: flex; align-items: center; gap: 10px; } .foundry .forge-nav__icon-btn { color: var(--fdry-ink-soft); background: transparent; border: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px; border-radius: 9px; } .foundry .forge-nav__icon-btn:hover { color: #fff; background: rgba(255,255,255,.06); } /* Search button — sized to match the Log in / Sign up buttons (pill), not a tiny icon. */ .foundry .forge-nav__actions #navSearchBtn { padding: 0 16px; min-height: 48px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--fdry-glass-border); color: var(--fdry-ink-soft); gap: 9px; } .foundry .forge-nav__actions #navSearchBtn:hover { background: rgba(255,255,255,.09); border-color: var(--fdry-glass-edge); color: #fff; } .foundry .forge-nav__actions #navSearchBtn svg { width: 17px; height: 17px; } .foundry .forge-nav__kbd { font-family: 'JetBrains Mono', monospace; font-size: .875rem; padding: 2px 6px; border: 1px solid var(--fdry-glass-border); border-radius: 6px; color: var(--fdry-ink-faint); } /* The Foundry homepage is an immersive dark canvas — hide the light/dark theme toggle here so it can't flip the page into a broken half-light state. */ .foundry #navThemeToggle, .foundry #navThemeToggleMobile, .foundry .forge-nav__mobile-theme { display: none !important; } /* Resources dropdown — base forge.css renders it cramped on the dark nav and the nav-link underline pseudo leaks onto the items. Give it real glass + padding. */ .foundry .forge-nav__dropdown-menu { background: linear-gradient(160deg, #141a30, #0c1022); border: 1px solid var(--fdry-glass-border); border-radius: 14px; padding: 8px; box-shadow: 0 26px 64px rgba(0,0,0,.5); min-width: 224px; } .foundry .forge-nav__dropdown-menu a { display: block; padding: 11px 16px; border-radius: 9px; color: var(--fdry-ink-soft); font-size: .95rem; font-weight: 500; transition: background .2s ease, color .2s ease; } .foundry .forge-nav__dropdown-menu a::after { display: none; } .foundry .forge-nav__dropdown-menu a:hover { background: rgba(255,255,255,.07); color: #fff; } /* ---- Inner-page consistency ------------------------------- Inner pages render with `foundry forge-dark` (see inc/enqueue.php). forge-dark restyles components, but templates also use inline var(--text-*) colours that stay at their LIGHT values; flip those tokens (inner pages only, so the home — which has no forge-dark class — is untouched) so all text reads on the canvas. */ body.foundry.forge-dark { --text-primary: var(--fdry-ink); --text-secondary: var(--fdry-ink-soft); --text-muted: var(--fdry-ink-faint); } /* Inner pages have no scroll-pinned hero, so the glass nav can be permanent. */ .foundry.forge-dark .forge-nav { background: rgba(8,11,22,.66); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--fdry-glass-border); } /* Search command palette (forge-cmdk) — dark glass styling on the Foundry homepage. forge.css defaults the panel to a light --surface and its dark overrides are scoped to body.forge-dark, which this page is not. */ .foundry .forge-cmdk { background: linear-gradient(160deg, #141a34, #0c1024); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.6); } .foundry .forge-cmdk__header { border-bottom-color: rgba(255,255,255,.08); } .foundry .forge-cmdk__icon { color: var(--fdry-violet-lt); } .foundry .forge-cmdk__input { color: #fff; } .foundry .forge-cmdk__input::placeholder { color: var(--fdry-ink-faint); } .foundry .forge-cmdk__kbd { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--fdry-ink-soft); } .foundry .forge-cmdk__item { color: var(--fdry-ink); border-color: rgba(255,255,255,.06); } .foundry .forge-cmdk__item:hover, .foundry .forge-cmdk__item--active { background: rgba(255,255,255,.06); } .foundry .forge-cmdk__hint, .foundry .forge-cmdk__empty, .foundry .forge-cmdk__section, .foundry .forge-cmdk__arrow { color: var(--fdry-ink-faint); } /* ---- 7. Reveal utility — FAIL-SAFE ------------------------- Content is visible by default. We only hide-then-reveal when JS has confirmed GSAP is present AND reduced-motion is off (body.fdry-anim). So if JS/GSAP fails to load, nothing is ever stuck invisible. */ .foundry.fdry-anim [data-fdry-reveal] { opacity: 0; transform: translateY(48px) scale(.955); filter: blur(9px); } /* .is-in no longer drives opacity/transform/filter — GSAP animates these with a stagger (foundry.js). The class still drives the heading + hero line wipes below. */ /* ============================================================ 8. HERO — editorial split + product slab stack ============================================================ */ .foundry .fdry-hero { position: relative; padding: clamp(94px, 8vw, 124px) 0 clamp(56px, 7vw, 96px); } .foundry .fdry-hero__grid { max-width: var(--fdry-maxw); margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .foundry .fdry-hero__copy { max-width: 620px; } .foundry .fdry-hero__title { margin: 22px 0 26px; } .foundry .fdry-hero__title .ln { display: block; } .foundry .fdry-hero__sub { margin-bottom: 34px; font-size: clamp(1.05rem,1.5vw,1.32rem); } .foundry .fdry-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .foundry .fdry-hero__meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); } .foundry .fdry-hero__meta div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.12); } .foundry .fdry-hero__meta b { font-family: 'Space Grotesk',sans-serif; color:#fff; font-size: 1.6rem; font-weight: 600; display: block; line-height: 1; margin-bottom: 5px; } .foundry .fdry-hero__meta span { font-size: .875rem; line-height: 1.35; color: var(--fdry-ink-soft); letter-spacing: .01em; display: block; } /* Slab stack — the 4 products as layered glass plates */ .foundry .fdry-stack { position: relative; perspective: 1400px; } .foundry .fdry-stack__halo { position: absolute; inset: -8% -4% -12% 6%; background: radial-gradient(60% 60% at 60% 30%, color-mix(in srgb, var(--fdry-violet) 45%, transparent), transparent 70%); filter: blur(40px); z-index: 0; pointer-events: none; } .foundry .fdry-slab { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 16px; background: var(--fdry-glass-strong); border: 1px solid var(--fdry-glass-border); border-radius: 16px; box-shadow: var(--fdry-shadow); -webkit-backdrop-filter: blur(var(--fdry-blur)) saturate(160%); backdrop-filter: blur(var(--fdry-blur)) saturate(160%); transform: translateX(var(--x,0)) translateZ(0); transition: transform .5s var(--fdry-ease), border-color .4s ease, box-shadow .4s ease; will-change: transform; } .foundry .fdry-slab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--slab-acc, var(--fdry-violet)); box-shadow: 0 0 14px color-mix(in srgb, var(--slab-acc, var(--fdry-violet)) 60%, transparent); } .foundry .fdry-slab::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--slab-acc, var(--fdry-violet)) 18%, transparent), transparent 60%); opacity: .8; pointer-events: none; } /* slabs flush-aligned — depth comes from accent glow + GSAP pointer parallax (no static zigzag) */ .foundry .fdry-slab { --x: 0; } .foundry .fdry-slab:hover { transform: translateX(0) translateY(-3px); border-color: var(--slab-acc); box-shadow: var(--fdry-shadow-lg); } .foundry .fdry-slab__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--slab-acc,var(--fdry-violet)) 16%, #0b1024); border: 1px solid color-mix(in srgb, var(--slab-acc,var(--fdry-violet)) 40%, transparent); } .foundry .fdry-slab__icon img, .foundry .fdry-slab__icon svg { width: 24px; height: 24px; } .foundry .fdry-slab__txt { min-width: 0; } .foundry .fdry-slab__name { font-family: 'Space Grotesk',sans-serif; font-weight: 600; color: #fff; font-size: 1.02rem; } .foundry .fdry-slab__tag { font-size: .875rem; color: var(--fdry-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foundry .fdry-slab__plus { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-family: 'JetBrains Mono',monospace; font-size: 1.1rem; line-height: 1; color: var(--slab-acc, var(--fdry-violet-lt)); background: color-mix(in srgb, var(--slab-acc, var(--fdry-violet)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--slab-acc, var(--fdry-violet)) 28%, transparent); transition: background .3s ease, transform .35s var(--fdry-ease); } .foundry .fdry-slab:hover .fdry-slab__plus { transform: rotate(90deg); background: color-mix(in srgb, var(--slab-acc, var(--fdry-violet)) 22%, transparent); } /* ============================================================ 9. TRUST / marquee strip ============================================================ */ .foundry .fdry-strip { border-block: 1px solid rgba(255,255,255,.07); padding: 26px 0; overflow: hidden; } .foundry .fdry-strip__track { display: flex; gap: 56px; align-items: center; width: max-content; animation: fdry-marquee 38s linear infinite; } .foundry .fdry-strip__track:hover { animation-play-state: paused; } .foundry .fdry-strip__item { font-family: 'JetBrains Mono',monospace; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fdry-ink-faint); white-space: nowrap; } .foundry .fdry-strip__item::before { content: "◆"; margin-right: 18px; color: var(--fdry-violet); opacity: .6; } @keyframes fdry-marquee { to { transform: translateX(-50%); } } /* ============================================================ 10. STATS — editorial counters ============================================================ */ .foundry .fdry-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: var(--fdry-r-lg); overflow: hidden; } .foundry .fdry-stat { padding: clamp(28px,4vw,46px) 30px; background: var(--fdry-bg-2); } .foundry .fdry-stat__num { font-family: 'Space Grotesk',sans-serif; font-weight: 600; font-size: clamp(2.4rem,4.4vw,3.6rem); line-height: 1; letter-spacing: -.03em; background: linear-gradient(180deg,#fff,var(--fdry-violet-lt)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .foundry .fdry-stat__label { margin-top: 12px; color: var(--fdry-ink-soft); font-size: .94rem; } /* ---- Horizontal suite rail (native scroll fallback; GSAP pins it) ---- */ .foundry .fdry-rail { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 0 20px; } .foundry .fdry-rail::-webkit-scrollbar { display: none; } .foundry .fdry-rail__track { display: flex; gap: 20px; padding-inline: 28px; width: max-content; } .foundry .fdry-rail__card { position: relative; width: clamp(238px, 30vw, 320px); flex: 0 0 auto; padding: 28px; border-radius: var(--fdry-r-lg); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); overflow: hidden; transition: transform .4s var(--fdry-ease), border-color .3s ease; } .foundry .fdry-rail__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fdry-acc) 55%, transparent); } .foundry .fdry-rail__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fdry-acc); box-shadow: 0 0 24px var(--fdry-acc); } .foundry .fdry-rail__card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--fdry-acc) 16%, transparent), transparent 60%); pointer-events: none; } .foundry .fdry-rail__n { position: relative; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: .875rem; color: var(--fdry-acc); letter-spacing: .12em; } .foundry .fdry-rail__card .fdry-slab__icon { position: relative; z-index: 1; margin: 16px 0 14px; width: 48px; height: 48px; background: color-mix(in srgb, var(--fdry-acc) 16%, #0b1024); border-color: color-mix(in srgb, var(--fdry-acc) 40%, transparent); } .foundry .fdry-rail__card h3 { position: relative; z-index: 1; margin-bottom: 8px; } .foundry .fdry-rail__card p { position: relative; z-index: 1; color: var(--fdry-ink-soft); font-size: .95rem; line-height: 1.5; } /* GSAP pin mode: stop native scroll, let the timeline translate the track. */ .foundry .fdry-rail.is-pinned { overflow: hidden; } .foundry .fdry-rail.is-pinned .fdry-rail__track { padding-inline: max(28px, calc((100vw - var(--fdry-maxw)) / 2 + 28px)); } /* ============================================================ 11. PRODUCT SHOWCASE — pinned moments ============================================================ */ .foundry .fdry-show { position: relative; } /* Stacking cards: each product sticks under the nav and the next card stacks over it; GSAP scales/dims the covered cards for depth (foundry.js). Cards are near-opaque so they cleanly cover the one beneath. */ .foundry .fdry-show__item { position: sticky; top: 92px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,72px); align-items: center; min-height: 58vh; padding: clamp(30px,4vw,56px); margin-bottom: 32px; border-radius: var(--fdry-r-lg); border: 1px solid var(--fdry-glass-border); background: linear-gradient(158deg, #141b38 0%, #0a0f24 70%); box-shadow: var(--fdry-shadow-lg); overflow: hidden; transform-origin: 50% 0%; will-change: transform; } .foundry .fdry-show__item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--fdry-acc), transparent); } .foundry .fdry-show__item::after { content: ""; position: absolute; inset: -40% -25% auto auto; width: 70%; height: 90%; background: radial-gradient(circle at 75% 0%, color-mix(in srgb, var(--fdry-acc) 20%, transparent), transparent 62%); pointer-events: none; } .foundry .fdry-show__item:last-child { margin-bottom: 0; } .foundry .fdry-show__item:nth-child(even) .fdry-show__media { order: -1; } .foundry .fdry-show__body, .foundry .fdry-show__media { position: relative; z-index: 1; } .foundry .fdry-show__body { max-width: 520px; } .foundry .fdry-show__title { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; } .foundry .fdry-show__badge { font-family: 'JetBrains Mono',monospace; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; color: var(--fdry-acc); background: color-mix(in srgb, var(--fdry-acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fdry-acc) 32%, transparent); } .foundry .fdry-show__desc { color: var(--fdry-ink-soft); font-size: 1.06rem; line-height: 1.65; margin-bottom: 26px; } .foundry .fdry-show__list { display: grid; gap: 13px; margin-bottom: 30px; } .foundry .fdry-show__feat { display: flex; gap: 11px; align-items: flex-start; color: var(--fdry-ink); font-size: .98rem; } .foundry .fdry-show__feat svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--fdry-acc); margin-top: 1px; } .foundry .fdry-show__media { position: relative; } .foundry .fdry-show__glow { position: absolute; inset: 8% -6% -8% 4%; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb,var(--fdry-acc) 55%, transparent), transparent 70%); filter: blur(46px); z-index: 0; } .foundry .fdry-show__frame { position: relative; z-index: 1; border-radius: var(--fdry-r-lg); overflow: hidden; border: 1px solid var(--fdry-glass-border); box-shadow: var(--fdry-shadow-lg); background: var(--fdry-glass); } .foundry .fdry-show__frame::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg,transparent,var(--fdry-glass-edge),transparent); z-index: 2; } .foundry .fdry-show__frame img { width: 100%; height: auto; display: block; } .foundry .fdry-show__bar { display: flex; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.06); } .foundry .fdry-show__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); } .foundry .fdry-show__skel { padding: 26px; display: grid; gap: 13px; } .foundry .fdry-show__skel i { height: 12px; border-radius: 6px; background: rgba(255,255,255,.07); display: block; } .foundry .fdry-show__skel i.acc { background: linear-gradient(90deg,var(--fdry-acc),transparent); width: 46%; opacity: .55; } /* ============================================================ 12. WHY (features) — asymmetric editorial grid ============================================================ */ .foundry .fdry-feat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .foundry .fdry-feat__card { grid-column: span 2; padding: clamp(26px,3vw,38px); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); position: relative; overflow: hidden; transition: transform .5s var(--fdry-ease), border-color .4s ease; } .foundry .fdry-feat__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg,transparent,var(--fdry-glass-edge),transparent); } .foundry .fdry-feat__card:hover { transform: translateY(-4px); border-color: var(--fdry-glass-edge); } .foundry .fdry-feat__card--wide { grid-column: span 3; } .foundry .fdry-feat__card--tall { grid-column: span 3; } .foundry .fdry-feat__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; color: var(--fdry-violet-lt); background: color-mix(in srgb, var(--fdry-violet) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fdry-violet) 30%, transparent); } .foundry .fdry-feat__ico svg { width: 24px; height: 24px; } .foundry .fdry-feat__card h3 { font-family:'Space Grotesk',sans-serif; font-size: 1.22rem; font-weight: 600; color: #fff; margin-bottom: 10px; } .foundry .fdry-feat__card p { color: var(--fdry-ink-soft); font-size: .97rem; line-height: 1.6; } /* ============================================================ 13. STEPS — how it works ============================================================ */ .foundry .fdry-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; counter-reset: step; } .foundry .fdry-step { padding: clamp(26px,3vw,38px); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); position: relative; } .foundry .fdry-step__n { font-family:'Space Grotesk',sans-serif; font-size: 1rem; font-weight: 600; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--fdry-violet-lt); background: color-mix(in srgb, var(--fdry-violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--fdry-violet) 30%, transparent); margin-bottom: 20px; } .foundry .fdry-step h3 { font-family:'Space Grotesk',sans-serif; font-size: 1.18rem; color:#fff; margin-bottom: 9px; } .foundry .fdry-step p { color: var(--fdry-ink-soft); font-size: .96rem; line-height: 1.6; } /* ============================================================ 14. INTEGRATIONS — mono chips marquee ============================================================ */ .foundry .fdry-int { display: flex; flex-wrap: wrap; gap: 12px; } .foundry .fdry-int__item { font-family:'JetBrains Mono',monospace; font-size: .875rem; color: var(--fdry-ink-soft); padding: 11px 18px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid var(--fdry-glass-border); transition: color .25s ease, border-color .25s ease, transform .25s ease; } .foundry .fdry-int__item:hover { color: #fff; border-color: var(--fdry-violet); transform: translateY(-2px); } /* ============================================================ 15. TESTIMONIALS — editorial pull-quotes ============================================================ */ .foundry .fdry-quotes { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 20px; } .foundry .fdry-quote { padding: clamp(28px,3vw,40px); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); position: relative; } .foundry .fdry-quote__mark { font-family:'Space Grotesk',sans-serif; font-size: 3.4rem; line-height: .5; color: var(--fdry-violet); opacity: .5; } .foundry .fdry-quote__text { font-size: 1.12rem; line-height: 1.6; color: var(--fdry-ink); margin: 14px 0 24px; font-family: 'Space Grotesk', sans-serif; font-weight: 400; letter-spacing: -.01em; } .foundry .fdry-quote__who { display: flex; align-items: center; gap: 12px; } .foundry .fdry-quote__av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family:'JetBrains Mono',monospace; font-size: .875rem; color:#fff; background: linear-gradient(135deg,var(--fdry-violet),var(--fdry-blue)); } .foundry .fdry-quote__name { color:#fff; font-weight: 600; font-size: .95rem; } .foundry .fdry-quote__role { color: var(--fdry-ink-faint); font-size: .875rem; } /* ============================================================ 16. PRICING — glass tiers ============================================================ */ .foundry .fdry-price { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 20px; align-items: stretch; } .foundry .fdry-plan { display: flex; flex-direction: column; padding: clamp(28px,3vw,40px); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r-lg); position: relative; overflow: hidden; } .foundry .fdry-plan::before { content:""; position:absolute; inset: 0 0 auto 0; height:1px; background: linear-gradient(90deg,transparent,var(--fdry-glass-edge),transparent); } .foundry .fdry-plan--feat { border-color: color-mix(in srgb,var(--fdry-violet) 55%, transparent); background: var(--fdry-glass-strong); box-shadow: 0 30px 80px color-mix(in srgb, var(--fdry-violet) 22%, transparent); } .foundry .fdry-plan__pop { position: absolute; top: 16px; right: 16px; font-family:'JetBrains Mono',monospace; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; color:#fff; background: linear-gradient(180deg,var(--fdry-violet-lt),var(--fdry-violet)); } .foundry .fdry-plan__name { font-family:'Space Grotesk',sans-serif; font-size: 1.2rem; font-weight: 600; color:#fff; } .foundry .fdry-plan__desc { color: var(--fdry-ink-faint); font-size: .9rem; margin: 6px 0 20px; } .foundry .fdry-plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .foundry .fdry-plan__amt { font-family:'Space Grotesk',sans-serif; font-size: clamp(2.2rem,4vw,3rem); font-weight: 600; color:#fff; line-height: 1; } .foundry .fdry-plan__per { color: var(--fdry-ink-faint); font-size: .9rem; } .foundry .fdry-plan__sites { color: var(--fdry-ink-soft); font-size: .875rem; margin-bottom: 22px; } .foundry .fdry-plan__list { display: grid; gap: 11px; margin-bottom: 26px; } .foundry .fdry-plan__feat { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--fdry-ink-soft); } .foundry .fdry-plan__feat svg { width: 17px; height: 17px; color: var(--fdry-violet-lt); flex: 0 0 auto; margin-top: 2px; } .foundry .fdry-plan .forge-btn { margin-top: auto; width: 100%; } .foundry .fdry-plan__toggle { background: none; border: 0; color: var(--fdry-violet-lt); font-family:'JetBrains Mono',monospace; font-size: .875rem; cursor: pointer; padding: 6px 0 16px; text-align: left; } /* ============================================================ 16b. The Forge suite — cross-sell cards (per-card accent via --card-acc) ============================================================ */ .foundry .fdry-suite__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); } .foundry .fdry-suite__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 34px); border-radius: var(--fdry-r); background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); overflow: hidden; text-decoration: none; transition: transform .5s var(--fdry-ease), border-color .4s ease, box-shadow .4s ease; } .foundry .fdry-suite__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--card-acc); opacity: .85; } .foundry .fdry-suite__card::after { content: ""; position: absolute; inset: -45% -25% auto auto; width: 65%; height: 85%; background: radial-gradient(60% 60% at 80% 0%, color-mix(in srgb, var(--card-acc) 32%, transparent), transparent 70%); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .foundry .fdry-suite__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-acc) 55%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--card-acc) 22%, transparent); } .foundry .fdry-suite__card:hover::after { opacity: 1; } .foundry .fdry-suite__mark { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 6px 18px color-mix(in srgb, var(--card-acc) 32%, transparent); } .foundry .fdry-suite__mark img { width: 100%; height: 100%; display: block; object-fit: cover; } .foundry .fdry-suite__name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.15rem; color: #fff; } .foundry .fdry-suite__tag { flex: 1; color: var(--fdry-ink-soft); font-size: .95rem; line-height: 1.5; } .foundry .fdry-suite__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--card-acc); font-weight: 600; font-size: .95rem; } .foundry .fdry-suite__go svg { width: 16px; height: 16px; transition: transform .3s var(--fdry-ease); } .foundry .fdry-suite__card:hover .fdry-suite__go svg { transform: translateX(4px); } /* ============================================================ 17. FAQ — glass accordion ============================================================ */ .foundry .fdry-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .foundry .fdry-faq__item { background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: 14px; overflow: hidden; } .foundry .fdry-faq__q { width: 100%; text-align: left; cursor: pointer; background: none; border: 0; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight: 500; font-size: 1.05rem; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .foundry .fdry-faq__ico { flex: 0 0 auto; width: 20px; height: 20px; position: relative; } .foundry .fdry-faq__ico::before, .foundry .fdry-faq__ico::after { content:""; position: absolute; background: var(--fdry-violet-lt); transition: transform .35s var(--fdry-ease); } .foundry .fdry-faq__ico::before { top: 9px; left: 0; right: 0; height: 2px; } .foundry .fdry-faq__ico::after { left: 9px; top: 0; bottom: 0; width: 2px; } .foundry .fdry-faq__item.is-open .fdry-faq__ico::after { transform: scaleY(0); } .foundry .fdry-faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--fdry-ease); } .foundry .fdry-faq__a-in { padding: 0 24px 22px; color: var(--fdry-ink-soft); line-height: 1.7; } /* ============================================================ 18. CTA — glass slab + light ============================================================ */ .foundry .fdry-cta { position: relative; text-align: center; padding: clamp(58px,7vw,96px) 32px; border-radius: var(--fdry-r-lg); overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--fdry-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--fdry-violet) 8%, transparent); } .foundry .fdry-cta::before { content:""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); z-index: 2; } .foundry .fdry-cta::after { content:""; position: absolute; inset: -55% -10% auto -10%; height: 95%; background: radial-gradient(55% 80% at 50% 0%, color-mix(in srgb, var(--fdry-violet) 55%, transparent), color-mix(in srgb, var(--fdry-violet) 12%, transparent) 45%, transparent 72%); pointer-events: none; } .foundry .fdry-cta .fdry-h2 { max-width: 18ch; margin-inline: auto; } .foundry .fdry-cta__in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } .foundry .fdry-cta p { color: var(--fdry-ink-soft); font-size: 1.12rem; margin: 18px 0 32px; } .foundry .fdry-cta .fdry-hero__cta, .foundry .fdry-cta__actions { justify-content: center; display: flex; gap: 14px; flex-wrap: wrap; } /* ============================================================ 19. Footer touch-ups ============================================================ */ .foundry .forge-footer { background: var(--fdry-bg); border-top: 1px solid rgba(255,255,255,.07); } /* ---- Nav burger (mobile) ---- */ .foundry .forge-nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: 0; cursor: pointer; } .foundry .forge-nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--fdry-ink); } /* ---- Nav mobile drawer — foundry-styled for the ACTUAL markup: .forge-nav__mobile holds a close button, bare links, a hidden theme row (.forge-nav__mobile-actions) and a CTA .forge-btn. The base forge.css styles assume .forge-nav__mobile-links/-utils/-auth wrappers that this markup doesn't use, so the menu rendered unstyled — these rules fix it. ---- */ .foundry .forge-nav__mobile { background: rgba(8,11,22,.92); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); padding: 96px 22px 36px; } .foundry .forge-nav__mobile-close { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--fdry-glass-border); color: var(--fdry-ink); font-size: 1.5rem; line-height: 1; } .foundry .forge-nav__mobile-close:hover { background: rgba(255,255,255,.12); color: #fff; } /* Primary links — clean tappable rows with hairline dividers + hover slide */ .foundry .forge-nav__mobile > a:not(.forge-btn) { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--fdry-ink); border-bottom: 1px solid var(--fdry-glass-border); transition: color .2s ease, padding-left .25s var(--fdry-ease); } .foundry .forge-nav__mobile > a:not(.forge-btn):first-of-type { border-top: 1px solid var(--fdry-glass-border); } .foundry .forge-nav__mobile > a:not(.forge-btn):hover, .foundry .forge-nav__mobile > a:not(.forge-btn):active { color: #fff; padding-left: 12px; } /* Hidden utility row (only holds the suppressed theme toggle) — drop the gap */ .foundry .forge-nav__mobile-actions { display: none; } /* CTA button(s) — full-width, sane size, spaced below the links */ .foundry .forge-nav__mobile > a.forge-btn { margin-top: 30px; justify-content: center; width: 100%; font-size: 1.02rem; padding: 16px 24px; } .foundry .forge-nav__mobile > a.forge-btn + a.forge-btn { margin-top: 12px; } /* Products ship a newer drawer markup (.forge-nav__mobile-links nav + -utils + -auth wrappers) instead of bare children — style it to match the drawer above. */ .foundry .forge-nav__mobile-links { display: flex; flex-direction: column; } .foundry .forge-nav__mobile-links a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--fdry-ink); border-bottom: 1px solid var(--fdry-glass-border); transition: color .2s ease, padding-left .25s var(--fdry-ease); } .foundry .forge-nav__mobile-links a:first-child { border-top: 1px solid var(--fdry-glass-border); } .foundry .forge-nav__mobile-links a:hover, .foundry .forge-nav__mobile-links a:active { color: #fff; padding-left: 12px; } /* Utility row (search / language; the theme toggle stays hidden on foundry) */ .foundry .forge-nav__mobile-utils { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; } .foundry .forge-nav__mobile-util { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 1rem; color: var(--fdry-ink-soft); text-align: left; } .foundry .forge-nav__mobile-util:hover { color: #fff; } .foundry .forge-nav__mobile-util svg { width: 18px; height: 18px; flex-shrink: 0; } /* Auth / CTA buttons (Download / Log in) */ .foundry .forge-nav__mobile-auth { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; } .foundry .forge-nav__mobile-auth .forge-btn { width: 100%; justify-content: center; font-size: 1.02rem; padding: 16px 24px; } /* ============================================================ 19b. INTRO PROSE — dark editorial treatment for page-body content (narrative + comparison table + stat cards). Forces the light forge.css blocks (.forge-table, .forge-list-cards) onto the dark glass canvas. ============================================================ */ .foundry .fdry-prose { color: var(--fdry-ink-soft); } .foundry .fdry-prose h2, .foundry .fdry-prose h3 { font-family: 'Space Grotesk', sans-serif; color: #fff; font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.14; margin: 2em 0 .55em; } .foundry .fdry-prose > h3:first-child, .foundry .fdry-prose > h2:first-child { margin-top: 0; } .foundry .fdry-prose p { margin: 0 0 1.1em; color: var(--fdry-ink-soft); } .foundry .fdry-prose strong { color: #fff; font-weight: 600; } .foundry .fdry-prose a { color: var(--fdry-violet-lt); } .foundry .fdry-prose > ul:not(.forge-list-cards) { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; } .foundry .fdry-prose > ul:not(.forge-list-cards) > li { list-style: none; padding-left: 26px; position: relative; } .foundry .fdry-prose > ul:not(.forge-list-cards) > li::before { content: "→"; position: absolute; left: 0; color: var(--fdry-violet-lt); } /* stat cards */ .foundry .fdry-prose .forge-list-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; padding: 0; margin: .4em 0 1.4em; } .foundry .fdry-prose .forge-list-cards li { list-style: none; padding: 22px; background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r); color: var(--fdry-ink-soft); font-size: .9rem; line-height: 1.4; } .foundry .fdry-prose .forge-list-cards li strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; color: #fff; margin-bottom: 4px; } /* comparison table */ /* Single glass container (the -wrap stays transparent so there's no double border/seam); the table fills it edge-to-edge and overflow:hidden clips the highlighted column to the rounded corners. */ .foundry .fdry-prose .forge-table-wrap { margin: .4em 0 1.4em; } .foundry .fdry-prose .forge-table-card { background: var(--fdry-glass); border: 1px solid var(--fdry-glass-border); border-radius: var(--fdry-r-lg); overflow: hidden; box-shadow: var(--fdry-shadow); } .foundry .fdry-prose .forge-table-scroll { overflow-x: auto; } .foundry .fdry-prose .forge-table { width: 100%; border-collapse: collapse; color: var(--fdry-ink); font-size: .95rem; min-width: 480px; } .foundry .fdry-prose .forge-table th, .foundry .fdry-prose .forge-table td { padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; vertical-align: middle; opacity: 1 !important; } .foundry .fdry-prose .forge-table tr:last-child th, .foundry .fdry-prose .forge-table tr:last-child td { border-bottom: 0; } .foundry .fdry-prose .forge-table thead th { color: var(--fdry-ink-soft); font-family: 'JetBrains Mono', monospace; font-size: .875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .foundry .fdry-prose .forge-table tbody th { color: #fff; font-weight: 500; font-family: 'Space Grotesk', sans-serif; } .foundry .fdry-prose .forge-table tbody td { color: var(--fdry-ink); } /* highlighted "us" column — uniform & full-bleed; the card's overflow:hidden + radius clip it cleanly (no asymmetric top bar) */ .foundry .fdry-prose .forge-table .is-us { background: color-mix(in srgb, var(--fdry-violet) 20%, transparent); color: #fff !important; font-weight: 600; } .foundry .fdry-prose .forge-table thead th.is-us { color: #fff; } /* Hard overrides — forge.css styles .forge-content tables in its LIGHT theme (white header bg, white hover, light "us" tint, dark first-column text, a gradient ::after top bar). Neutralise all of it for the dark Foundry table. */ .foundry .fdry-prose .forge-table-card { background: rgba(255,255,255,.035) !important; border: 1px solid var(--fdry-glass-border) !important; box-shadow: var(--fdry-shadow) !important; } .foundry .fdry-prose .forge-table thead th { background: transparent !important; } .foundry .fdry-prose .forge-table-scroll { background: transparent !important; } .foundry .fdry-prose .forge-table td, .foundry .fdry-prose .forge-table th { border-color: rgba(255,255,255,.07) !important; } .foundry .fdry-prose .forge-table td:first-child { color: #fff !important; } .foundry .fdry-prose .forge-table tbody tr:hover { background: rgba(255,255,255,.03) !important; } .foundry .fdry-prose .forge-table tbody tr:hover .is-us { background: color-mix(in srgb, var(--fdry-violet) 26%, transparent) !important; } .foundry .fdry-prose .forge-table th.is-us::after { display: none !important; } .foundry .fdry-prose .forge-table .is-us { background: color-mix(in srgb, var(--fdry-violet) 22%, transparent) !important; } .foundry .fdry-prose .forge-cta-row { margin: 1.1em 0 .2em; } /* ============================================================ 19c. Premium scroll-motion layer (armed by body.fdry-anim, driven by foundry.js). All of this is inert without JS/GSAP and is neutralised under prefers-reduced-motion (section 21). ============================================================ */ /* Scroll progress bar */ .foundry .fdry-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--fdry-violet), var(--fdry-violet-lt)); box-shadow: 0 0 12px color-mix(in srgb, var(--fdry-violet) 60%, transparent); z-index: 200; pointer-events: none; } /* (reveal initial hidden state + blur are set in section 7; GSAP batch in foundry.js animates opacity/transform/filter with a stagger as they enter) */ /* Hero headline lines wipe up on load (JS adds .is-in to the title) */ .foundry.fdry-anim .fdry-hero__title .ln { clip-path: inset(0 0 112% 0); transform: translateY(.4em); } .foundry.fdry-anim .fdry-hero__title.is-in .ln { clip-path: inset(0 0 -14% 0); transform: none; transition: clip-path .85s var(--fdry-ease), transform .85s var(--fdry-ease); } .foundry.fdry-anim .fdry-hero__title.is-in .ln:nth-child(2) { transition-delay: .07s; } .foundry.fdry-anim .fdry-hero__title.is-in .ln:nth-child(3) { transition-delay: .14s; } .foundry.fdry-anim .fdry-hero__title.is-in .ln:nth-child(4) { transition-delay: .21s; } .foundry.fdry-anim .fdry-hero__title.is-in .ln:nth-child(5) { transition-delay: .28s; } /* (showcase image depth handled by the GSAP scrub parallax + the item's scrub reveal) */ /* ============================================================ 20. Responsive ============================================================ */ @media (max-width: 1024px) { .foundry .fdry-hero__grid { grid-template-columns: 1fr; } .foundry .fdry-stack { min-height: 0; max-width: 560px; margin-top: 10px; } .foundry .fdry-feat__card, .foundry .fdry-feat__card--wide, .foundry .fdry-feat__card--tall { grid-column: span 3; } .foundry .fdry-steps { grid-template-columns: 1fr; } .foundry .fdry-stats { grid-template-columns: repeat(2, 1fr); } /* stacking cards are desktop-only — flow normally on tablet/mobile */ .foundry .fdry-show__item { position: static; min-height: 0; margin-bottom: 20px; } } @media (max-width: 760px) { .foundry .fdry-shell, .foundry .fdry-hero__grid, .foundry .forge-nav__inner { padding-inline: 20px; } /* Mobile header bar = logo + burger only. Everything else lives in the drawer. */ .foundry .forge-nav__links, .foundry .forge-nav__actions { display: none; } .foundry .forge-nav__burger { display: flex; } .foundry .forge-nav__logo-img { height: 46px; } .foundry .fdry-show__item { grid-template-columns: 1fr; gap: 30px; } .foundry .fdry-show__item:nth-child(even) .fdry-show__media { order: 0; } .foundry .fdry-feat { grid-template-columns: 1fr; } .foundry .fdry-feat__card, .foundry .fdry-feat__card--wide, .foundry .fdry-feat__card--tall { grid-column: 1; } .foundry .fdry-slab:nth-child(odd), .foundry .fdry-slab:nth-child(even) { --x: 0; } .foundry .fdry-hero__meta { flex-direction: column; align-items: flex-start; gap: 16px; } } @media (max-width: 480px) { .foundry .fdry-hero { padding-top: 116px; } .foundry .fdry-stat { text-align: center; } } /* ============================================================ 21. Reduced motion — kill all transforms/animation ============================================================ */ @media (prefers-reduced-motion: reduce) { .foundry * , .foundry *::before, .foundry *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .foundry [data-fdry-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } .foundry .fdry-sechead .fdry-h2, .foundry .fdry-hero__title .ln { clip-path: none !important; transform: none !important; } .foundry .fdry-show__frame { transform: none !important; } .foundry .fdry-slab { transform: none !important; } .foundry .fdry-strip__track { animation: none !important; } .foundry .fdry-progress { display: none !important; } }