/*!****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/site/proof.css ***! \****************************************************************************************************************************************************************************************************************************************************************/ /* ===================================================================== DaForgeLayer-AI — website rebuild DESIGN PROOF (scratch route /site-proof) Purpose: prove the new visual direction before deleting the rejected site. References: Image 2 (hero composition), Image 4 (black-glass header), Image 6 (logo + palette). All scoped under .pf-site so it cannot leak into /workbench or /. (g-website-marketing-and-route-move, 2026-06-03) ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap"); :root { /* ---- palette: EXACT hex from the brand board (Image 6). Declared on :root (not .pf-site) so portaled overlays — the image lightbox and the mobile-nav drawer, which render on to escape ancestor containing blocks (e.g. the header's backdrop-filter) — still inherit these tokens. ---- */ --pf-molten: #ff7a00; /* MOLTEN */ --pf-molten-2: #ff8f24; --pf-ember: #ffb347; /* EMBER */ --pf-gold: #ffd089; --pf-steel: #1b1f24; /* STEEL */ --pf-slate: #0e1116; /* SLATE */ --pf-ink: #08090c; --pf-ink-2: #0e1116; --pf-text: #e6e6e6; /* FORGE LIGHT */ --pf-text-dim: #a8adb8; --pf-text-mut: #767c89; --pf-line: rgba(255, 255, 255, 0.08); --pf-line-2: rgba(255, 255, 255, 0.14); --pf-ready: #57e08a; --pf-display: "Orbitron", ui-sans-serif, system-ui, sans-serif; --pf-body: "Inter", ui-sans-serif, system-ui, sans-serif; --pf-glass: linear-gradient(160deg, rgba(20, 22, 27, 0.86), rgba(10, 11, 14, 0.92)); --pf-glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 140, 56, 0.12); } .pf-site { font-family: var(--pf-body); color: var(--pf-text); background: var(--pf-ink); -webkit-font-smoothing: antialiased; line-height: 1.6; } .pf-site *, .pf-site *::before, .pf-site *::after { box-sizing: border-box; } .pf-site ::-moz-selection { background: rgba(255, 138, 56, 0.3); color: #fff; } .pf-site ::selection { background: rgba(255, 138, 56, 0.3); color: #fff; } .pf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; } /* ============================= buttons ============================= */ .pf-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pf-body); font-weight: 600; font-size: 14.5px; padding: 12px 20px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: transform .16s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease; } .pf-btn--primary { color: #1a0d04; background: linear-gradient(135deg, var(--pf-ember) 0%, var(--pf-gold) 45%, var(--pf-molten) 100%); box-shadow: 0 10px 30px -10px rgba(255, 122, 46, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .pf-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(255, 122, 46, 0.7); } .pf-btn--ghost { color: var(--pf-text); background: rgba(255, 255, 255, 0.04); border-color: var(--pf-line-2); } .pf-btn--ghost:hover { transform: translateY(-2px); border-color: var(--pf-molten-2); background: rgba(255, 155, 77, 0.12); } /* ============================= header ============================= */ .pf-header { position: sticky; top: 0; z-index: 50; background: rgba(9, 10, 13, 0.6); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--pf-glass-rim); border-bottom: 1px solid var(--pf-line); } /* thin molten rim under the header (Image 4) */ .pf-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 140, 56, 0.35) 30%, rgba(255, 185, 95, 0.5) 50%, rgba(255, 140, 56, 0.35) 70%, transparent); opacity: 0.6; } .pf-nav { display: flex; align-items: center; gap: 26px; height: 68px; } .pf-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .pf-brand__mark { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: linear-gradient(160deg, rgba(28, 30, 36, 0.95), rgba(12, 13, 16, 0.98)); border: 1px solid var(--pf-line-2); box-shadow: 0 0 18px -4px rgba(255, 140, 56, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pf-navlinks { display: flex; align-items: center; gap: 22px; margin-left: 14px; } .pf-navlinks a { color: var(--pf-text-dim); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; padding: 6px 0; transition: color .18s ease; } .pf-navlinks a:hover { color: var(--pf-text); } .pf-navlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pf-molten), var(--pf-gold)); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .pf-navlinks a:hover::after { transform: scaleX(1); } .pf-nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; } .pf-burger { display: none; } /* ============================= hero ============================= */ .pf-hero { position: relative; overflow: hidden; isolation: isolate; } /* forge background = HERO STAGE ONLY (asset-backed, not a full-page wallpaper) */ .pf-hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--pf-ink) url("/site/forge/backgrounds/forge-hero.webp") center 52% / cover no-repeat; } /* left-side scrim — protects hero copy over the vibrant molten hall while still letting the forge glow read (local readability protection, not a wallpaper) */ .pf-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 8, 11, 0.9) 0%, rgba(7, 8, 11, 0.62) 34%, rgba(7, 8, 11, 0.18) 62%, transparent 82%), linear-gradient(180deg, transparent 64%, var(--pf-ink) 100%); } .pf-hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 84px 0 96px; } .pf-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--pf-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; color: var(--pf-ember); background: rgba(255, 155, 77, 0.1); border: 1px solid var(--pf-line-2); } .pf-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-ready); box-shadow: 0 0 10px var(--pf-ready); animation: pf-pulse 2.4s ease-in-out infinite; } @keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .pf-h1 { font-family: var(--pf-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.01em; margin: 22px 0 0; } .pf-h1 .pf-flame { background: linear-gradient(110deg, var(--pf-gold), var(--pf-molten) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pf-sub { margin: 22px 0 0; max-width: 44ch; font-size: 17px; color: var(--pf-text-dim); } .pf-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .pf-phrase { margin-top: 22px; font-family: var(--pf-display); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-text-mut); } /* product shown on a desktop monitor (black glass screen) */ .pf-monitor { display: flex; flex-direction: column; align-items: center; } .pf-monitor__screen { position: relative; width: 100%; border-radius: 14px; padding: 10px; background: var(--pf-glass); border: 1px solid var(--pf-line-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), var(--pf-glass-rim), 0 0 70px -20px rgba(255, 130, 50, 0.45); } .pf-frame__bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 9px; } .pf-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pf-line-2); } .pf-frame__bar i:first-child { background: #ff6a5f; } .pf-frame__bar i:nth-child(2) { background: #ffbf4d; } .pf-frame__bar i:nth-child(3) { background: var(--pf-ready); } .pf-monitor__screen img { display: block; width: 100%; height: auto; border-radius: 9px; border: 1px solid var(--pf-line); /* brightness lift so the product reads vibrant (proof; real recapture in build) */ filter: brightness(1.12) contrast(1.05) saturate(1.06); } .pf-monitor__neck { width: 70px; height: 22px; background: linear-gradient(180deg, #23262d, #14161a); border: 1px solid var(--pf-line); border-top: 0; border-radius: 0 0 6px 6px; } .pf-monitor__base { width: 168px; height: 10px; margin-top: 2px; border-radius: 8px; background: linear-gradient(180deg, #23262d, #101216); border: 1px solid var(--pf-line); box-shadow: 0 18px 30px -16px rgba(0,0,0,.8); } /* under-hero capability tag row */ .pf-tagrow { position: relative; border-top: 1px solid var(--pf-line); background: linear-gradient(180deg, rgba(8,9,12,0.4), var(--pf-ink)); backdrop-filter: blur(6px); } .pf-tagrow__inner { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: center; padding: 16px 28px; } .pf-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--pf-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pf-text-dim); } .pf-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-molten); box-shadow: 0 0 8px var(--pf-molten); flex: none; } /* ===================== section 1: separate dark band ===================== */ /* Explicitly NOT over the forge floor — calm smoked-metal stage, fully readable */ .pf-section { position: relative; background: var(--pf-ink); padding: 92px 0; } /* smoked-metal forge stage with molten ambient pools so the glass cards POP */ .pf-section--cards { position: relative; overflow: hidden; background: radial-gradient(46% 40% at 18% 30%, rgba(255, 122, 0, 0.12), transparent 62%), radial-gradient(42% 38% at 82% 72%, rgba(255, 122, 0, 0.10), transparent 62%), radial-gradient(40% 34% at 55% 12%, rgba(255, 179, 71, 0.07), transparent 60%), linear-gradient(180deg, #0f1217 0%, #0b0d12 55%, #090b0f 100%); border-top: 1px solid var(--pf-line); } /* subtle grain + smoked-metal sheen overlay */ .pf-section--cards::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("/site/tex/grain.webp"); background-size: 240px; opacity: 0.05; mix-blend-mode: overlay; } /* deep vignette to frame the card cluster */ .pf-section--cards::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 85% at 50% 45%, transparent 52%, rgba(5, 6, 9, 0.6) 100%); } .pf-section--cards > .pf-wrap { position: relative; z-index: 1; } .pf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pf-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-ember); } .pf-eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--pf-molten), transparent); } .pf-h2 { font-family: var(--pf-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.01em; margin: 16px 0 0; max-width: 20ch; } .pf-lead { margin: 14px 0 0; max-width: 56ch; color: var(--pf-text-dim); font-size: 16px; } .pf-grid { margin-top: 44px; display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); /* 9 cards => 5 + 4 (per hero mockup) */ } @media (max-width: 1180px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } } .pf-card { position: relative; background: linear-gradient(160deg, rgba(40, 45, 54, 0.55) 0%, rgba(16, 19, 25, 0.42) 100%); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 22px 20px 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 138, 56, 0.1), 0 22px 44px -26px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateY(14px); animation: pf-rise .6s ease forwards; transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; } /* molten top-edge accent so each glass chip catches forge light */ .pf-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 122, 0, 0.55), transparent); opacity: 0.5; transition: opacity .25s ease; } .pf-card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 56, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 28px 56px -26px rgba(0, 0, 0, 0.9), 0 0 40px -16px rgba(255, 122, 0, 0.35); } .pf-card:hover::before { opacity: 1; } .pf-card__n { font-family: var(--pf-display); font-size: 13px; font-weight: 700; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--pf-gold); background: rgba(255, 155, 77, 0.1); border: 1px solid var(--pf-line-2); } .pf-card h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 650; font-family: var(--pf-display); letter-spacing: 0.005em; } .pf-card p { margin: 0; font-size: 14px; color: var(--pf-text-dim); line-height: 1.55; } @keyframes pf-rise { to { opacity: 1; transform: translateY(0); } } /* ============================= responsive ============================= */ @media (max-width: 1024px) { .pf-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 72px; } .pf-grid { grid-template-columns: repeat(2, 1fr); } .pf-navlinks { display: none; } .pf-burger { display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 40px; background: rgba(255,255,255,.04); border: 1px solid var(--pf-line-2); border-radius: 10px; color: var(--pf-text); } .pf-nav__cta .pf-btn--ghost { display: none; } .pf-hero__scrim { background: linear-gradient(180deg, rgba(8,9,12,.55), rgba(8,9,12,.82) 60%, var(--pf-ink)); } } @media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } .pf-wrap { padding: 0 18px; } /* header CTAs don't fit next to logo + burger on small screens; hero keeps them */ .pf-nav__cta .pf-btn--primary { display: none; } .pf-nav { gap: 12px; } } /* ===================== feature rows ===================== */ .pf-feat { background: linear-gradient(180deg, #0b0d11, #0e1116); border-top: 1px solid var(--pf-line); } .pf-feat__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; } .pf-feat__inner--flip .pf-feat__copy { order: 2; } .pf-feat__inner--flip .pf-feat__media { order: 1; } .pf-feat .pf-frame { padding: 10px; } .pf-feat .pf-frame img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--pf-line); filter: brightness(1.12) contrast(1.05) saturate(1.06); } .pf-lanes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .pf-lane { font-family: var(--pf-display); font-size: 11.5px; letter-spacing: 0.04em; font-weight: 500; color: var(--pf-text-dim); padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--pf-line-2); } .pf-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; } .pf-checks li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--pf-text-dim); } .pf-checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 3px; background: linear-gradient(135deg, var(--pf-ember), var(--pf-molten)); box-shadow: 0 0 8px -1px var(--pf-molten); } /* ===================== grids ===================== */ .pf-grid--3 { grid-template-columns: repeat(3, 1fr); } .pf-grid--4 { grid-template-columns: repeat(4, 1fr); margin-top: 18px; } /* ===================== apps + CalFEL ===================== */ .pf-apps { background: linear-gradient(180deg, #0e1116, #0a0c10); border-top: 1px solid var(--pf-line); } .pf-calfel { margin-top: 40px; display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: stretch; background: linear-gradient(160deg, rgba(24,26,32,0.7), rgba(13,14,18,0.85)); border: 1px solid var(--pf-line-2); border-radius: 18px; padding: 34px; box-shadow: var(--pf-glass-rim), 0 40px 80px -40px rgba(0,0,0,0.8); } .pf-calfel h3 { font-family: var(--pf-display); font-size: 24px; margin: 16px 0 10px; } .pf-calfel p { color: var(--pf-text-dim); margin: 0 0 10px; font-size: 15.5px; } .pf-calfel__note { color: var(--pf-ember); font-size: 13px; font-family: var(--pf-display); letter-spacing: 0.04em; } /* left column = copy text + exposure (NATURAL aspect, never cropped). This column's height drives the card, so the phones shrink to match its bottom. */ .pf-calfel__left { min-width: 0; display: flex; flex-direction: column; } .pf-calfel__bannerwrap { margin-top: 18px; } .pf-calfel__banner { display: block; width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; border-radius: 12px; border: 1px solid var(--pf-line-2); box-shadow: 0 20px 44px -24px rgba(0,0,0,0.85); filter: brightness(1.1) saturate(1.05); } /* two phone shots fill the column height (set by the left side) so their BOTTOMS line up with the exposure. The is absolutely positioned so the phones' natural height does NOT drive the row — the left column does. */ .pf-calfel__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } .pf-calfel__phone { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--pf-line-2); box-shadow: 0 20px 44px -24px rgba(0,0,0,0.85); } .pf-calfel__phone img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; filter: brightness(1.1) saturate(1.05); cursor: zoom-in; } /* ===================== forms ===================== */ .pf-forms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .pf-form { display: flex; flex-direction: column; gap: 13px; padding: 30px; background: linear-gradient(160deg, rgba(34,38,46,0.5), rgba(16,19,25,0.42)); backdrop-filter: blur(16px); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: var(--pf-glass-rim); } .pf-form .pf-h2 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 6px; } .pf-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pf-text-dim); font-weight: 500; } .pf-form input[type=text], .pf-form input[type=email], .pf-form textarea { font-family: var(--pf-body); font-size: 14.5px; color: var(--pf-text); background: rgba(8,9,12,0.6); border: 1px solid var(--pf-line-2); border-radius: 10px; padding: 11px 13px; transition: border-color .18s ease, box-shadow .18s ease; } .pf-form input:focus, .pf-form textarea:focus { outline: none; border-color: var(--pf-molten-2); box-shadow: 0 0 0 3px rgba(255,122,0,0.15); } .pf-form textarea { resize: vertical; } .pf-check { flex-direction: row !important; align-items: center; gap: 9px !important; } .pf-check input { width: 16px; height: 16px; accent-color: var(--pf-molten); } .pf-form .pf-btn { margin-top: 6px; justify-content: center; } /* ===================== footer ===================== */ .pf-footer { background: #080a0d; border-top: 1px solid var(--pf-line); padding: 40px 0; } .pf-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pf-footer__line { font-family: var(--pf-display); font-size: 14px; letter-spacing: 0.06em; color: var(--pf-text-dim); margin: 0; } /* ===================== responsive (new sections) ===================== */ @media (max-width: 1024px) { .pf-feat__inner { grid-template-columns: 1fr; gap: 32px; } .pf-feat__inner--flip .pf-feat__copy { order: 1; } .pf-feat__inner--flip .pf-feat__media { order: 2; } .pf-grid--3 { grid-template-columns: repeat(2, 1fr); } .pf-grid--4 { grid-template-columns: repeat(2, 1fr); } .pf-calfel { grid-template-columns: 1fr; gap: 26px; } .pf-calfel__phone { aspect-ratio: 430 / 1179; } .pf-forms__grid { grid-template-columns: 1fr; } .pf-checks { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pf-grid--3, .pf-grid--4 { grid-template-columns: 1fr; } .pf-calfel__shots { gap: 8px; } } /* ===================== form note / status / honeypot ===================== */ .pf-form__note { margin: 2px 0 0; font-size: 11.5px; color: var(--pf-text-mut); font-style: italic; } .pf-req { color: var(--pf-molten); } .pf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pf-form button:disabled { opacity: 0.6; cursor: progress; } .pf-form__status { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; transition: color .2s ease; } .pf-form__status--idle { color: var(--pf-text-mut); } .pf-form__status--sending { color: var(--pf-ember); } .pf-form__status--ok { color: #8ff0b6; font-weight: 500; padding: 9px 12px; border-radius: 9px; background: rgba(87,224,138,0.08); border: 1px solid rgba(87,224,138,0.25); } .pf-form__status--err { color: #ff9b8c; font-weight: 500; padding: 9px 12px; border-radius: 9px; background: rgba(255,90,70,0.08); border: 1px solid rgba(255,90,70,0.3); } /* ===================== lightbox ===================== */ .pf-site img[data-lightbox] { cursor: zoom-in; } .pf-lb { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 2.6vmin; /* subtle glass scrim — NOT a hard black takeover */ background: rgba(6, 7, 11, 0.52); backdrop-filter: blur(8px) saturate(1.04); animation: pf-lb-in .2s ease; } @keyframes pf-lb-in { from { opacity: 0; } to { opacity: 1; } } /* floating BLACK-GLASS panel/window — sizes to the image (JS sizes the image aspect-aware within the viewport; these are generous safety bounds). */ .pf-lb__fig { margin: 0; max-width: 94vw; max-height: 94vh; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: rgba(13, 15, 20, 0.66); backdrop-filter: blur(22px) saturate(1.1); border: 1px solid var(--pf-line-2); border-radius: 16px; box-shadow: 0 44px 120px -34px rgba(0,0,0,0.92), 0 0 80px -30px rgba(255,122,0,0.32); animation: pf-lb-pop .22s ease; } @keyframes pf-lb-pop { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } } /* width/height are set inline by Lightbox (aspect-aware, contain-fit with capped upscale so small wide screenshots like the CalFEL breakdown read larger); the max-* here are fallbacks before that runs. object-fit: contain = never cropped. */ .pf-lb__img { display: block; width: auto; height: auto; max-width: 90vw; max-height: 86vh; -o-object-fit: contain; object-fit: contain; border-radius: 10px; border: 1px solid var(--pf-line); box-shadow: 0 20px 60px -28px rgba(0,0,0,0.85); } .pf-lb__cap { font-family: var(--pf-display); font-size: 12.5px; letter-spacing: 0.04em; color: var(--pf-text-dim); text-align: center; } .pf-lb__close { position: fixed; top: 20px; right: 22px; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; cursor: pointer; color: var(--pf-text); background: rgba(16,17,20,0.85); border: 1px solid var(--pf-line-2); transition: background .18s ease, border-color .18s ease; } .pf-lb__close:hover { background: rgba(255,155,77,0.16); border-color: var(--pf-molten-2); } .pf-lb__close:focus-visible { outline: 2px solid var(--pf-molten); outline-offset: 2px; } /* ===================== mobile nav drawer ===================== */ .pf-mnav { position: fixed; inset: 0; z-index: 2147483000; /* scrim only — NO backdrop-filter here: nesting a blurred parent around the panel (which has its own backdrop-filter) breaks the panel's background paint in several engines. Keep the panel's glass un-nested. */ background: rgba(5, 6, 10, 0.62); display: flex; justify-content: flex-end; animation: pf-lb-in .18s ease; } .pf-mnav__panel { position: relative; width: min(86vw, 360px); height: 100%; margin-left: auto; /* near-opaque solid so the menu is readable even if backdrop-filter is unsupported */ background: rgba(13, 15, 20, 0.96); backdrop-filter: blur(22px) saturate(1.12); border-left: 1px solid var(--pf-line-2); box-shadow: -32px 0 90px -34px rgba(0,0,0,0.92); padding: 64px 22px 26px; display: flex; flex-direction: column; gap: 20px; animation: pf-mnav-slide .22s ease; } @keyframes pf-mnav-slide { from { transform: translateX(20px); opacity: .3; } to { transform: translateX(0); opacity: 1; } } .pf-mnav__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--pf-text); background: rgba(16,17,20,0.85); border: 1px solid var(--pf-line-2); transition: background .18s ease, border-color .18s ease; } .pf-mnav__close:hover { background: rgba(255,155,77,0.16); border-color: var(--pf-molten-2); } .pf-mnav__close:focus-visible { outline: 2px solid var(--pf-molten); outline-offset: 2px; } .pf-mnav__links { display: flex; flex-direction: column; gap: 2px; } .pf-mnav__links a { display: block; padding: 13px 6px; font-family: var(--pf-display); font-size: 16px; color: var(--pf-text); text-decoration: none; letter-spacing: 0.01em; border-bottom: 1px solid rgba(255,255,255,0.07); } .pf-mnav__links a:hover, .pf-mnav__links a:focus-visible { color: var(--pf-molten); } .pf-mnav__cta { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .pf-mnav__cta .pf-btn { width: 100%; justify-content: center; text-align: center; } /* ===================== Phase 6 typography polish ===================== */ /* dial the hero headline back from oversized/chunky to premium technical */ .pf-h1 { font-weight: 700; font-size: clamp(38px, 4.7vw, 58px); letter-spacing: -0.015em; line-height: 1.06; } .pf-h2 { font-weight: 600; letter-spacing: -0.012em; } /* card title breathing room + tighter leading */ .pf-card h3 { margin: 18px 0 7px; line-height: 1.25; letter-spacing: 0.004em; font-weight: 600; } .pf-card p { line-height: 1.6; } /* crisper nav + button type */ .pf-navlinks a { letter-spacing: 0.01em; } .pf-btn { letter-spacing: 0.01em; font-weight: 600; } /* ===================================================================== v7 — FULL-PAGE FIXED FORGE BACKDROP + black-glass UI system (g-website-marketing-and-route-move, 2026-06-04) The whole site lives inside ONE fixed forge chamber (bg_v5_d55); sections are transparent over it with local glass/scrim readability (not a black blanket); panels are true BLACK glass with molten rim, layered over the forge depth. ===================================================================== */ /* --- fixed full-page forge backdrop behind everything --- */ .pf-site { background: #07080b; position: relative; } .pf-site::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #07080b url("/site/forge/backgrounds/forge-hero.webp") center 38% / cover no-repeat; } /* soft global readability veil + top/bottom falloff — NOT a flat black blanket */ .pf-site::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,8,11,0.52) 0%, rgba(7,8,11,0.28) 20%, rgba(7,8,11,0.32) 68%, rgba(6,7,10,0.62) 100%); } /* lift real content above the fixed backdrop */ .pf-site > * { position: relative; z-index: 1; } /* ...but that generic rule must NOT clobber the sticky glass header (it is a direct child of .pf-site, so `.pf-site > *` was overriding its position:sticky/z-index). Higher specificity restores the intended sticky header. */ .pf-site > .pf-header { position: sticky; top: 0; z-index: 50; } /* flyout sits above the molten intro overlay (2147483646) and all glass panels */ .pf-lb, .pf-lb__close { z-index: 2147483647; } /* --- sections transparent so the fixed forge continues behind them --- */ .pf-section, .pf-feat, .pf-apps, .pf-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.05); } .pf-section--cards { background: transparent; } .pf-section--cards::before, .pf-section--cards::after { display: none; } .pf-tagrow { background: linear-gradient(180deg, rgba(7,8,11,0.34), rgba(7,8,11,0.18)); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.06); } .pf-footer { background: linear-gradient(180deg, transparent, rgba(5,6,9,0.72)); } /* --- hero: no separate image (fixed bg covers it); keep local readability scrim --- */ .pf-hero__bg { background: transparent; } .pf-hero__scrim { background: linear-gradient(90deg, rgba(7,8,11,0.84) 0%, rgba(7,8,11,0.5) 34%, rgba(7,8,11,0.12) 62%, transparent 84%); } /* --- BLACK-GLASS panel system (cards / forms / calfel / monitor) --- */ .pf-card, .pf-form, .pf-calfel, .pf-monitor__screen { background: linear-gradient(165deg, rgba(13,15,19,0.64), rgba(8,9,12,0.52)); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(20px) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(255,140,56,0.10), 0 26px 54px -30px rgba(0,0,0,0.92); } .pf-card { padding: 24px 22px 26px; border-radius: 15px; } .pf-card:hover { border-color: rgba(255,138,56,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 30px 60px -28px rgba(0,0,0,0.95), 0 0 46px -16px rgba(255,122,0,0.34); } /* molten top-edge accent a touch stronger so each chip catches forge light */ .pf-card::before { background: linear-gradient(90deg, transparent, rgba(255,122,0,0.7), transparent); opacity: 0.6; } .pf-monitor__screen { box-shadow: 0 44px 96px -30px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 80px -22px rgba(255,130,50,0.45); } /* shared black-glass media frame — mounts feature-row screenshots in a glass case (was floating on the forge). Matches the monitor + CalFEL quality bar. */ .pf-frame { position: relative; border-radius: 16px; padding: 12px; background: linear-gradient(160deg, rgba(13,15,19,0.62), rgba(8,9,12,0.5)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(18px) saturate(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(255,140,56,0.1), 0 30px 64px -32px rgba(0,0,0,0.9), 0 0 60px -26px rgba(255,130,50,0.34); } .pf-feat .pf-frame { padding: 12px; } .pf-frame img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--pf-line); filter: brightness(1.12) contrast(1.05) saturate(1.06); } /* --- premium glass capsule chips/badges --- */ .pf-tag, .pf-lane { background: linear-gradient(160deg, rgba(20,22,27,0.66), rgba(9,10,13,0.56)); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 8px 15px; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px -10px rgba(0,0,0,0.7); } .pf-lane { font-size: 12px; letter-spacing: 0.05em; } .pf-badge { background: linear-gradient(160deg, rgba(20,22,27,0.7), rgba(9,10,13,0.6)); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); padding: 8px 15px; } /* --- header: blacker glass + stronger molten rim --- */ .pf-header { background: rgba(8,9,12,0.5); backdrop-filter: blur(20px) saturate(1.25); } .pf-header[data-scrolled="true"] { background: rgba(7,8,11,0.74); } .pf-header::after { opacity: 0.85; height: 1.5px; } .pf-brand__mark { background: linear-gradient(160deg, rgba(22,24,29,0.95), rgba(9,10,13,0.98)); box-shadow: 0 0 22px -5px rgba(255,140,56,0.55), inset 0 1px 0 rgba(255,255,255,0.1); } /* --- typography hierarchy: less cramped card titles, refined leads --- */ .pf-card h3 { font-size: 15px; line-height: 1.32; margin: 18px 0 8px; font-weight: 600; } .pf-card p { font-size: 13.5px; color: #b3b8c2; } .pf-eyebrow { color: var(--pf-ember); } .pf-lead { color: #b9bec8; } /* --- glass readability PLATES where text floats over the forge --- */ /* section-head plate: hugs eyebrow + h2 + lead so headings read like the CalFEL panel */ .pf-shead { display: inline-block; width: -moz-fit-content; width: fit-content; max-width: 100%; padding: 18px 26px 22px; margin-bottom: 8px; border-radius: 16px; background: linear-gradient(160deg, rgba(13,15,19,0.6), rgba(8,9,12,0.46)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(18px) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(255,140,56,0.1), 0 24px 50px -30px rgba(0,0,0,0.9); } .pf-shead .pf-h2 { margin-top: 12px; } .pf-shead .pf-lead { margin-top: 12px; } /* feature-row copy becomes a black-glass panel (text was floating left over the forge) */ .pf-feat__copy { padding: 30px 32px 34px; border-radius: 18px; background: linear-gradient(160deg, rgba(13,15,19,0.6), rgba(8,9,12,0.46)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(18px) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(255,140,56,0.1), 0 26px 54px -30px rgba(0,0,0,0.9); } /* footer gets a subtle glass plate so it doesn't float on bare forge */ .pf-footer__inner { padding: 22px 28px; border-radius: 14px; background: linear-gradient(160deg, rgba(13,15,19,0.55), rgba(8,9,12,0.42)); border: 1px solid rgba(255,255,255,0.09); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); } /* ===================== how-it-works flow strip ===================== */ .pf-flow { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .pf-flow__step { display: inline-flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 200px; padding: 14px 18px; border-radius: 13px; background: linear-gradient(160deg, rgba(13,15,19,0.6), rgba(8,9,12,0.48)); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(255,140,56,0.1); position: relative; } .pf-flow__n { font-family: var(--pf-display); font-size: 12px; font-weight: 700; color: var(--pf-gold); width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(255,155,77,0.1); border: 1px solid var(--pf-line-2); } .pf-flow__label { font-family: var(--pf-display); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--pf-text); } /* ===================== status pills ===================== */ .pf-pill { display: inline-block; font-family: var(--pf-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px; } .pf-pill--planned { color: var(--pf-text-mut); background: rgba(255,255,255,0.06); border: 1px solid var(--pf-line-2); } .pf-pill--live { color: #0c1a10; background: linear-gradient(135deg, var(--pf-ready), #3fb978); } /* ===================== dogfooding before/after ===================== */ .pf-dogfood { margin-top: 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; background: linear-gradient(160deg, rgba(13,15,19,0.6), rgba(8,9,12,0.48)); border: 1px solid var(--pf-line-2); border-radius: 18px; padding: 34px; backdrop-filter: blur(20px); box-shadow: var(--pf-glass-rim), 0 40px 80px -40px rgba(0,0,0,0.85); } .pf-dogfood__copy p { color: var(--pf-text-dim); margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; } .pf-dogfood__copy strong { color: var(--pf-text); } .pf-dogfood__copy .pf-checks { margin-top: 18px; grid-template-columns: 1fr; } .pf-dogfood__shots { display: flex; flex-direction: column; gap: 18px; } .pf-ba { margin: 0; } .pf-ba figcaption { margin-top: 9px; font-family: var(--pf-display); font-size: 12px; letter-spacing: 0.04em; color: var(--pf-text-dim); } .pf-frame--after { display: flex; flex-direction: column; } .pf-after-note { border-radius: 10px; border: 1px solid var(--pf-line); padding: 30px 24px; min-height: 150px; display: grid; place-items: center; text-align: center; font-family: var(--pf-display); font-size: 14px; line-height: 1.5; color: var(--pf-text); background: radial-gradient(80% 90% at 50% 0%, rgba(255,122,0,0.12), transparent 70%), linear-gradient(160deg, rgba(20,22,27,0.6), rgba(10,11,14,0.7)); } @media (max-width: 1024px) { .pf-dogfood { grid-template-columns: 1fr; gap: 26px; } .pf-flow__step { min-width: 0; flex: 1 1 46%; } } @media (max-width: 560px) { .pf-flow__step { flex: 1 1 100%; } } /* ===================== anchor-nav smooth scroll + header offset ===================== */ html { scroll-behavior: smooth; } .pf-site [id] { scroll-margin-top: 86px; } /* accessibility: respect reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pf-site *, .pf-card { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }