/* ============================================================ CoreGrid — PRODUCT PAGES Per-offering deep dives. Reuses system.css tokens & components (nav, footer, btn, tag, captures, reveal, custom cursor). ============================================================ */ /* per-page accent is set inline on ; default cobalt. --acc / --acc-soft / --acc-line are overridden per offering below. */ :root { --acc: var(--cobalt-400); --acc-soft: rgba(76,123,255,0.14); --acc-line: rgba(76,123,255,0.45); --acc-glow: var(--cobalt-glow); --acc-300: var(--cobalt-300); } body[data-accent="revenue"] { --acc: #e8b563; --acc-soft: rgba(232,181,99,0.14); --acc-line: rgba(232,181,99,0.45); --acc-glow: rgba(232,181,99,0.5); --acc-300: #f0c87f; } body[data-accent="dual"] { --acc: #cda6f0; --acc-soft: rgba(186,150,240,0.13); --acc-line: rgba(186,150,240,0.42); --acc-glow: rgba(160,130,235,0.5); --acc-300: #d7b9f4; } body[data-accent="cost"] { --acc: #5384ff; --acc-soft: rgba(83,132,255,0.16); --acc-line: rgba(83,132,255,0.5); --acc-glow: rgba(76,123,255,0.55); --acc-300: #79a0ff; } /* product pages have no left rail — reset the shell padding */ .shell--prod { padding-left: 0; } /* breadcrumb / back row under the nav */ .pcrumb { padding: clamp(96px, 12vh, 128px) var(--pad) 0; max-width: var(--maxw); margin: 0 auto; } .pcrumb__row { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); } .pcrumb__row a { color: var(--ink-mute); transition: color .25s; display: inline-flex; align-items: center; gap: 7px; } .pcrumb__row a:hover { color: var(--acc-300); } .pcrumb__sep { opacity: .5; } .pcrumb__here { color: var(--ink-soft); } /* ---------------- PRODUCT HERO ---------------- */ .phero { position: relative; padding: clamp(34px, 5vh, 56px) 0 clamp(60px, 8vw, 104px); overflow: hidden; } .phero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 80px); align-items: center; } .phero__eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .phero__codename { font-family: var(--mono); font-size: 13px; color: var(--acc-300); } .phero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 22px; max-width: 15ch; } .phero__lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; margin-bottom: 32px; text-wrap: pretty; } .phero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } .phero__metrics { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 52px); padding-top: 28px; border-top: 1px solid var(--hair); } .pmetric .n { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; color: var(--acc-300); } .pmetric .l { font-size: 13px; color: var(--ink-mute); max-width: 22ch; margin-top: 4px; line-height: 1.4; } /* hero diagram panel */ .pheel { position: relative; border: 1px solid var(--hair-2); border-radius: var(--r-lg); background: linear-gradient(170deg, rgba(20,40,110,0.14), var(--elev)); padding: clamp(28px, 3vw, 40px); overflow: hidden; min-height: 360px; display: flex; flex-direction: column; justify-content: center; } .pheel__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 75% 8%, var(--acc-soft), transparent 60%); } .pheel__cap { position: relative; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .pheel__cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc-glow); } /* flow node diagram (reused & evolved) */ .flow { position: relative; display: flex; flex-direction: column; gap: 9px; } .flow__node { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--hair-2); border-radius: 12px; background: rgba(255,255,255,0.02); font-size: 14px; color: var(--ink-soft); transition: border-color .4s, background .4s, transform .4s; } .flow__node .fdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); } .flow__node .fmeta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.04em; } .flow__node.is-live { border-color: var(--acc-line); background: var(--acc-soft); } .flow__arrow { height: 13px; width: 1px; background: var(--hair-2); margin-left: 24px; } .flow__arrow::after { content: '▾'; position: absolute; margin: 7px 0 0 -5px; color: var(--ink-dim); font-size: 9px; } /* module grid (vertical os / company os) */ .modgrid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mod { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; border: 1px solid var(--hair-2); border-radius: 12px; background: rgba(255,255,255,0.02); transition: border-color .4s, transform .4s; } .mod__t { font-size: 13.5px; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 9px; } .mod__t .fdot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .mod__s { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.03em; } .mod--core { grid-column: 1 / -1; border-color: var(--acc-line); background: var(--acc-soft); } /* stack diagram (company os) */ .stack { position: relative; display: flex; flex-direction: column; gap: 8px; } .stack__layer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hair-2); border-radius: 11px; font-size: 13.5px; color: var(--ink-soft); } .stack__layer .fdot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .stack__layer .fmeta { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-dim); } .stack__layer--top { background: var(--acc-soft); border-color: var(--acc-line); } .stack__layer--base { background: rgba(255,255,255,0.015); color: var(--ink-mute); } /* ---------------- PROBLEM BAND ---------------- */ .pproblem { position: relative; padding-block: clamp(60px, 8vw, 110px); border-top: 1px solid var(--hair); } .pproblem__inner { max-width: 70ch; } .pproblem h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 22px; } .pproblem h2 b { color: var(--ink-mute); font-weight: 600; } .pproblem p { color: var(--ink-soft); font-size: 1.08rem; max-width: 60ch; } /* ---------------- HOW IT WORKS ---------------- */ .psteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; } .pstep { position: relative; padding: 28px 24px 30px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--elev); overflow: hidden; transition: border-color .35s, transform .35s; } .pstep:hover { transform: translateY(-3px); border-color: var(--hair-3); } .pstep__spot { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; background: radial-gradient(300px circle at var(--mx,50%) var(--my,0%), var(--acc-soft), transparent 60%); } .pstep:hover .pstep__spot { opacity: 1; } .pstep__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--acc-300); margin-bottom: 16px; position: relative; } .pstep h3 { font-size: 1.18rem; margin-bottom: 9px; position: relative; } .pstep p { font-size: 14px; color: var(--ink-mute); position: relative; } /* ---------------- VALUE / PROOF ---------------- */ .pvalue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; } .pcard { position: relative; padding: 30px 28px 34px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--elev); overflow: hidden; transition: border-color .35s, transform .35s; } .pcard:hover { transform: translateY(-3px); border-color: var(--acc-line); } .pcard__spot { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; background: radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--acc-soft), transparent 60%); } .pcard:hover .pcard__spot { opacity: 1; } .pcard__icon { width: 34px; height: 34px; color: var(--acc-300); margin-bottom: 18px; position: relative; } .pcard h3 { font-size: 1.18rem; margin-bottom: 10px; position: relative; } .pcard p { font-size: 14.5px; color: var(--ink-mute); position: relative; } /* ---------------- WHO IT'S FOR (chips) ---------------- */ .pwho { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 14.5px; color: var(--ink-soft); background: rgba(255,255,255,0.015); transition: border-color .3s, color .3s, transform .3s; } .chip:hover { border-color: var(--acc-line); color: var(--ink); transform: translateY(-2px); } .chip .fdot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; } /* ---------------- OTHER OFFERINGS (ladder cross-link) ---------------- */ .pnext { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; } .pnext--two { grid-template-columns: repeat(3, 1fr); } .nextcard { position: relative; display: flex; flex-direction: column; padding: 26px 26px 28px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--elev); overflow: hidden; transition: border-color .35s, transform .35s, background .35s; } .nextcard:hover { transform: translateY(-4px); border-color: var(--hair-3); background: var(--surface); } .nextcard__spot { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; } .nextcard:hover .nextcard__spot { opacity: 1; } .nextcard__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 16px; position: relative; } .nextcard__name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; position: relative; } .nextcard__name h3 { font-size: 1.3rem; } .nextcard__name span { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); } .nextcard p { font-size: 14px; color: var(--ink-mute); position: relative; flex: 1; } .nextcard__link { position: relative; margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; transition: gap .25s, color .25s; } .nextcard:hover .nextcard__link { color: var(--acc-300); gap: 12px; } /* tints for the three engine families on cross-link cards */ .nextcard--rev .nextcard__spot { background: radial-gradient(70% 60% at 50% 0%, rgba(232,181,99,0.10), transparent 60%); } .nextcard--rev:hover { border-color: var(--revenue-line); } .nextcard--dual .nextcard__spot { background: radial-gradient(70% 60% at 50% 0%, rgba(186,150,240,0.10), transparent 60%); } .nextcard--cost .nextcard__spot { background: radial-gradient(70% 60% at 50% 0%, rgba(83,132,255,0.12), transparent 60%); } .nextcard--cost:hover { border-color: var(--cost-line); } /* product CTA reuse closing band but accent-tinted */ .pcta .cta-band__glow { background: radial-gradient(60% 120% at 12% 8%, var(--acc-soft), transparent 52%), radial-gradient(55% 120% at 92% 95%, rgba(232,181,99,0.10), transparent 52%); } /* ---------------- responsive ---------------- */ @media (max-width: 980px) { .phero__grid { grid-template-columns: 1fr; gap: 32px; } .pheel { order: 2; min-height: 0; } .psteps { grid-template-columns: repeat(2, 1fr); } .pvalue { grid-template-columns: 1fr; } .pnext, .pnext--two { grid-template-columns: 1fr; } } @media (max-width: 560px) { .psteps { grid-template-columns: 1fr; } .phero__metrics { gap: 22px; } .modgrid { grid-template-columns: 1fr; } }