/* =================================================================== SignalForge · Engagement card · stripped specular hover =================================================================== Operator-grade version of the Claude design-gallery iridescent card: - 2-degree perspective tilt that follows the cursor - Amber specular highlight that tracks cursor position - Subtle grain layer - Single accent · no rainbow · no iridescence Pair with engagement-card.js. The .sf-card element exposes --mx and --my (0-100 scalars, percent of card) as the pointer moves. CSS does the rest. Safari notes (revised 2026-05-08 after preview bug): - Tilt math uses unitless scalars multiplied by 1deg / 1px at use site. Older Safari can't divide angles to extract a unitless number, which silently invalidated the entire transform declaration. Don't go back to "calc(2deg / 1deg)". - Grain layer uses background-image (SVG data URL with proper URL- encoding). mask-image of an inline SVG is fragile in Safari. - Radial-gradient size lives in the stop position, not the size token. ALL TWEAKS LIVE IN :root --sf-card-* TOKENS BELOW. =================================================================== */ :root{ /* Geometry · scalars (no units) Values locked 2026-05-08 from preview slider tuning. */ --sf-card-radius: 0px; --sf-card-tilt: 2.0; /* degrees */ --sf-card-lift: 6; /* px on hover */ --sf-card-perspective: 1200px; /* Specular highlight · amber wash that follows the cursor */ --sf-card-glow-r: 212; --sf-card-glow-g: 148; --sf-card-glow-b: 68; --sf-card-glow-strength: 0.09; /* center alpha */ --sf-card-glow-radius: 54; /* % of card · stop position */ /* Edge / inner-stroke that picks up amber at hover */ --sf-card-edge-base: #1c1c1c; --sf-card-edge-hover-alpha: 1.00; /* full amber border on hover */ /* Grain layer · dialed back 2026-05-08 from 0.045 to 0.015 after Keith reported the texture reading as too much across cards. */ --sf-card-grain-opacity: 0.015; /* Motion */ --sf-card-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sf-card-duration-tilt: 180ms; --sf-card-duration-lift: 240ms; } @media (prefers-reduced-motion: reduce){ :root{ --sf-card-tilt: 0; --sf-card-lift: 0; --sf-card-duration-tilt: 0ms; --sf-card-duration-lift: 0ms; } } /* ----- Grid container · 4-up tier layout ------------------------- */ .sf-card-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: var(--sf-card-perspective); } @media (max-width: 980px){ .sf-card-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .sf-card-grid{ grid-template-columns: 1fr; } } /* ----- The card itself ------------------------------------------ */ .sf-card, .sf-card::before, .sf-card::after{ box-sizing: border-box; } .sf-card{ /* JS writes these (0–100 scalars) on pointermove. */ --mx: 50; --my: 50; position: relative; display: flex; flex-direction: column; background: #0d0d0d; border: 1px solid var(--sf-card-edge-base); border-radius: var(--sf-card-radius); padding: 28px 26px 24px; min-height: 280px; color: #eaeaea; font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; isolation: isolate; transform: translateZ(0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform var(--sf-card-duration-tilt) var(--sf-card-ease), border-color var(--sf-card-duration-lift) var(--sf-card-ease), background var(--sf-card-duration-lift) var(--sf-card-ease); will-change: transform; } /* Hover · tilt + lift. Math stays in unitless calc to avoid Safari quirks. */ .sf-card:hover{ background: #0f0f0f; border-color: rgba(var(--sf-card-glow-r), var(--sf-card-glow-g), var(--sf-card-glow-b), var(--sf-card-edge-hover-alpha)); transform: translateY(calc(var(--sf-card-lift) * -1px)) rotateX(calc((50 - var(--my)) * var(--sf-card-tilt) * 1deg / 50)) rotateY(calc((var(--mx) - 50) * var(--sf-card-tilt) * 1deg / 50)); } /* ----- Specular highlight that tracks cursor -------------------- */ .sf-card::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; /* radius lives in the stop position so Safari parses cleanly */ background: radial-gradient( circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(var(--sf-card-glow-r), var(--sf-card-glow-g), var(--sf-card-glow-b), var(--sf-card-glow-strength)) 0%, rgba(var(--sf-card-glow-r), var(--sf-card-glow-g), var(--sf-card-glow-b), 0) calc(var(--sf-card-glow-radius) * 1%) ); transition: opacity var(--sf-card-duration-lift) var(--sf-card-ease); } .sf-card:hover::before{ opacity: 1; } /* ----- Grain layer ---------------------------------------------- Opt-in via .has-grain modifier (added 2026-05-08 after Keith asked to scope grain to engagement-tier cards only). Apply .has-grain to the four engagement cards. Other surfaces (proof cards, pillar cards, anywhere else) get the same hover treatment without grain. ---------------------------------------------------------------- */ .sf-card.has-grain::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: var(--sf-card-grain-opacity); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%201%200%200%200%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); background-size: 200px 200px; background-repeat: repeat; } /* ----- Card content (above glow + grain) ----------------------- */ .sf-card > *{ position: relative; z-index: 2; } /* Tier header */ .sf-card .tier-row{ display: flex; justify-content: space-between; align-items: baseline; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: #9a9a9a; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 18px; } .sf-card .tier-row .tier{ color: #eaeaea; } .sf-card .tier-row .duration{ color: #6a6a6a; } .sf-card h3{ font-weight: 500; font-size: 22px; letter-spacing: -0.5px; line-height: 1.18; margin: 0 0 14px; color: #eaeaea; } .sf-card p{ font-size: 14.5px; line-height: 1.55; color: #9a9a9a; margin: 0 0 18px; } .sf-card .price{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #d49444; letter-spacing: 1.6px; text-transform: uppercase; border-top: 1px solid #1c1c1c; padding-top: 14px; margin-top: auto; display: flex; justify-content: space-between; } .sf-card .price .arrow{ color: #6a6a6a; transition: transform 200ms var(--sf-card-ease), color 200ms var(--sf-card-ease); } .sf-card:hover .price .arrow{ color: #d49444; transform: translateX(4px); } /* ----- Featured tier (Tier 02) gets a subtle amber bleed at rest - The :hover rule above must beat this on border-color, so we re- declare the featured card's hover border with the same amber-alpha pattern. Without this Safari resolves border-color via specificity tie-break and the featured card stays gray on hover. ---------------------------------------------------------------- */ .sf-card.is-featured{ background: linear-gradient(135deg, rgba(212,148,68,0.06), #0d0d0d 70%); border-color: #262626; } .sf-card.is-featured .tier{ color: #d49444; } .sf-card.is-featured:hover{ background: linear-gradient(135deg, rgba(212,148,68,0.10), #0f0f0f 70%); border-color: rgba(var(--sf-card-glow-r), var(--sf-card-glow-g), var(--sf-card-glow-b), var(--sf-card-edge-hover-alpha)); }