/* * Hover states and nav submenus. * * Framer drove both from React variant swaps in its runtime bundle, so neither * the hover styles nor the submenu markup survive in the exported HTML - the * submenu items were pulled from CMS collections at render time and simply are * not in the DOM. Both are rebuilt here from the site's own design tokens. */ /* --- nav link hover ------------------------------------------------------ * The links ship with an inline `background-color: rgba(0,0,0,0)` and a pill * radius, which is the resting half of a variant that filled on hover. */ nav a[data-highlight="true"], nav button[data-highlight="true"] { transition: background-color 0.22s ease, color 0.22s ease, opacity 0.22s ease; border-radius: 36px; } nav a[data-highlight="true"]:hover, nav button[data-highlight="true"]:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* The current page already renders in amber; keep that lit on hover. */ nav a[data-framer-page-link-current="true"]:hover { background-color: rgba(253, 176, 34, 0.14) !important; } /* Chevron nudges down while its menu is open. */ [data-cff-menu] > * > button [data-framer-name="Plus"], [data-cff-menu] button [data-framer-name="Plus"] { transition: transform 0.22s ease; } [data-cff-menu][data-open="true"] button [data-framer-name="Plus"] { transform: rotate(180deg); } /* --- submenu panel -------------------------------------------------------- */ /* Rendered on and fixed-position: the header bar is ~80px tall with overflow:hidden and its ancestors open their own stacking contexts, so a panel left inside the nav is both clipped and painted over by the hero. Coordinates come from the trigger's bounding box in JS. */ .cff-submenu { position: fixed; transform: translateX(-50%) translateY(-6px); min-width: 236px; padding: 8px; border-radius: 14px; /* Opaque, with a fallback ahead of the token: a semi-transparent surface let the hero headline read straight through the menu. */ background: rgb(11, 12, 14); background: var(--token-3864de58-9c2a-419c-b7af-a93f76ca6f06, rgb(11, 12, 14)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 2147483000; } .cff-submenu[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Bridges the gap between trigger and panel so the pointer can travel down without the menu closing underneath it. */ .cff-submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .cff-submenu a { display: block; padding: 9px 13px; border-radius: 9px; white-space: nowrap; font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-size: 14.5px; line-height: 1.35; color: var(--token-371ff3fb-d951-43d7-ab2c-8ec8f2a5b1d0, rgb(247, 247, 247)); text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .cff-submenu a:hover { background-color: rgba(255, 255, 255, 0.09); color: var(--token-03693ef2-3d2f-41ed-af01-d716f9eee632, #fdb022); } .cff-submenu a[aria-current="page"] { color: var(--token-03693ef2-3d2f-41ed-af01-d716f9eee632, #fdb022); } /* The menu trigger needs to be a positioning context for the panel. */ [data-cff-menu] { position: relative; } /* --- contact form status --------------------------------------------------- */ .cff-form-status { margin: 14px 0 0; font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-size: 15px; line-height: 1.4; color: var(--token-03693ef2-3d2f-41ed-af01-d716f9eee632, #c91f2e); } [type="submit"][data-sending] { opacity: 0.65; pointer-events: none; } /* --- burger ripple -------------------------------------------------------- * A press ripple on the burger, plus the circular reveal the panel opens with. * Both are driven from interactions.js, which sets the origin to wherever the * press actually landed. */ [data-cff-ripple] { position: relative; overflow: hidden; } .cff-ripple { position: absolute; border-radius: 50%; transform: scale(0); opacity: 0.55; background: rgba(255, 255, 255, 0.55); pointer-events: none; animation: cff-ripple 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes cff-ripple { to { transform: scale(2.6); opacity: 0; } } /* The panel wipes open as a circle growing out of the burger. */ [data-framer-name="Links"][data-open="true"] { animation: cff-menu-reveal 0.52s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes cff-menu-reveal { from { clip-path: circle(0% at var(--cff-origin-x, 90%) var(--cff-origin-y, 5%)); } to { clip-path: circle(150% at var(--cff-origin-x, 90%) var(--cff-origin-y, 5%)); } } /* Menu items rise in behind the wipe. */ [data-framer-name="Links"][data-open="true"] > * { animation: cff-menu-item 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } @keyframes cff-menu-item { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { .cff-ripple, [data-framer-name="Links"][data-open="true"], [data-framer-name="Links"][data-open="true"] > * { animation: none !important; } } /* --- Framer hover variants ----------------------------------------------- * public/interactions.js re-adds the `.hover` class Framer's runtime used to * toggle, which switches the card's image layers from an absolute stack into * ordered flow - the deck fanning out. * * Framer sprang that transition from JS. `order`, `display` and `position` * cannot be transitioned in CSS, so those switch instantly; smoothing is * applied to the properties that can carry it, plus a lift on the card itself * so the change reads as motion rather than a jump. */ [class*="framer-v-"] { transition: box-shadow 0.28s ease, transform 0.28s ease, border-radius 0.28s ease; } a[class*="framer-v-"]:hover, a[class*="framer-v-"].hover { z-index: 3; } .hover [class*="framer-"] { transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, opacity 0.28s ease; } @media (prefers-reduced-motion: reduce) { [class*="framer-v-"], .hover [class*="framer-"] { transition: none !important; } } /* --- buttons and cards ---------------------------------------------------- */ a[data-framer-name="Button Primary"], [data-framer-name="Button Primary"] a { transition: transform 0.2s ease, filter 0.2s ease; } a[data-framer-name="Button Primary"]:hover, [data-framer-name="Button Primary"] a:hover { transform: translateY(-2px); filter: brightness(1.07); } /* On coarse pointers the submenu is driven by tap, so suppress hover styling that would otherwise stick after a touch. */ @media (hover: none) { nav a[data-highlight="true"]:hover, nav button[data-highlight="true"]:hover { background-color: rgba(0, 0, 0, 0) !important; } }