/* Tailwind preflight is present in the original app. Recreate the small browser-normalization subset that the PHP shell otherwise loses. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { display: block; } :root { --ink: #0f0f0f; --cream: #e1ddd6; /* The original Next runtime injects these variables on . The WordPress shell has no next/font layer, so keep the same identities here. */ --font-display: "Fraunces"; --font-mono: "IBM Plex Mono"; } html, body { overflow-x: clip; } html { scroll-behavior: smooth; } /* Light/off-white page field — MEASURED #E1DDD6 */ body { background: var(--ink); color: var(--ink); font-family: var(--font-mono), "IBM Plex Mono", monospace; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------------ */ /* The replica intentionally has no full-screen loading scene. Keep the Hero entrance animation independent from the loader. */ /* Rekorder 2.0 Header — evidence-driven reconstruction */ /* ------------------------------------------------------------------ */ .rekorderHeader { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 50px; overflow: visible; pointer-events: none; } .rekorderContactHeader { position: absolute; z-index: 3; top: -2px; left: 0; right: 0; height: 50px; display: flex; flex: none; flex-flow: row; place-content: center flex-end; align-items: center; gap: 20px; padding: 10px 20px 0 10px; overflow: visible; color: var(--ink); pointer-events: none; } .rekorderContactCluster { position: relative; width: min-content; height: 40px; display: flex; flex: none; flex-flow: row; place-content: center; align-items: center; gap: 10px; padding: 0; overflow: visible; transform: translateY(-1px); } .rekorderContactBlock { position: relative; width: min-content; height: 40px; display: flex; flex: none; flex-flow: row; place-content: flex-start; align-items: flex-start; gap: 10px; padding: 0; overflow: visible; pointer-events: auto; } .rekorderContactText { position: relative; width: min-content; height: min-content; display: flex; flex: none; flex-flow: column; place-content: flex-start; align-items: flex-start; gap: 0; padding: 0; overflow: visible; white-space: nowrap; font-family: var(--font-mono), "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-align: left; } .rekorderContactHeading { margin: 0; color: var(--ink); font-size: inherit; font-weight: 500; line-height: 1.4em; } .rekorderContactValue { margin: 0; color: var(--ink); font-size: inherit; font-weight: 400; line-height: 1.2em; text-decoration: none; } .rekorderContactValue:hover { text-decoration: underline; } .rekorderAddressIcon { flex: none; width: 25px; height: 13px; } .rekorderStudioIcon { flex: none; width: 26px; height: 14px; } .rekorderDesktopMenu, .rekorderMobileMenu { position: fixed; z-index: 4; top: 10px; height: 40px; color: var(--cream); pointer-events: auto; will-change: transform; } .rekorderDesktopMenu { left: calc(50% - 180px); width: 360px; display: block; overflow: visible; } .rekorderDesktopMenuToggle { position: absolute; z-index: 2; inset: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; } .rekorderDesktopMenuToggle:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; } .rekorderMobileMenu { left: 8px; right: 8px; display: none; border-radius: 5px; overflow: hidden; cursor: pointer; } .rekorderMobileMenu[data-open="true"] { display: flex; overflow: visible; } .rekorderMobileMenuToggle { position: absolute; z-index: 2; inset: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; touch-action: manipulation; } .rekorderMobileMenuToggle:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; } .rekorderMobileMenu[data-open="true"] .rekorderMobileMenuToggle { display: none; } .rekorderSkipLink { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 8px 12px; border-radius: 6px; color: var(--ink); background: var(--cream); transform: translateY(-150%); } .rekorderSkipLink:focus { transform: translateY(0); } .rekorderMobileTopRegion { position: absolute; top: 0; left: 0; width: 100%; height: 40px; pointer-events: none; will-change: transform; } .rekorderMobileTopRegion[data-open="true"] { height: 104px; } .rekorderBottomPanel { position: absolute; top: 0; left: 0; right: 0; height: 39px; border-radius: 11px; background: var(--ink); overflow: visible; will-change: transform; } .rekorderBottomPanelMobile[data-open="true"] { top: 39px; height: 190px; border-radius: 8px; padding: 10px; } .rekorderBrandPanel { position: absolute; top: 0; height: 40px; border-radius: 10px; background: var(--ink); overflow: hidden; color: var(--cream); will-change: transform; } .rekorderBrandPanelDesktop { left: 0; right: 0; } .rekorderBrandPanelMobile { left: 0; right: 0; border-radius: 8px; overflow: visible; } .rekorderBrandPanelMobile[data-open="true"] { left: 92px; right: auto; width: 49%; height: 44px; overflow: hidden; } .rekorderStableWordmark { position: fixed; z-index: 6; top: 18px; left: calc(50% - 70.5px); width: 137px; height: 23px; display: block; max-width: none; overflow: hidden; user-select: none; pointer-events: none; } .rekorderMobileScrollLabel { position: fixed; z-index: 7; top: 22.8px; left: 50%; display: block; color: var(--cream); font-family: var(--font-mono), "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400; line-height: 14.4px; letter-spacing: -0.02em; text-align: center; text-transform: uppercase; transform: translateX(-50%); opacity: 0; pointer-events: none; } .rekorderMobileScrollLabel.is-visible { opacity: 1; } .rekorderCustomCursor { position: fixed; z-index: 13; top: 0; left: 0; width: 20px; height: 20px; display: none; border: 1px solid var(--ink); border-radius: 4px; background: var(--cream); opacity: 0; pointer-events: none; transform: translate3d(20px, 20px, 0); will-change: transform; contain: layout paint; } .rekorderCustomCursor.is-active { opacity: 1; } .rekorderCustomCursorDot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); } @media (pointer: fine) { .rekorderCustomCursor { display: block; } } @media (max-width: 809px), (pointer: coarse) { .rekorderCustomCursor { display: none; } } @media (max-width: 809px) { .rekorderStableWordmark { top: 17.5px; left: calc(50% - 69.5469px); } .rekorderMobileScrollLabel { top: 22.8px; } } .rekorderBrandDot { position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; aspect-ratio: 1; border-radius: 20px; background: var(--cream); transform: translateY(-50%); } .rekorderBrandPanel[data-open="true"] .rekorderBrandDot { top: 48%; right: -17px; } .rekorderNavigation { position: relative; width: 100%; height: 50px; display: grid; padding: 0; margin: 0; overflow: visible; } .rekorderNavigationDesktop { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; opacity: 0; visibility: hidden; pointer-events: none; } .rekorderNavigationMobile { height: 170px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 50px); gap: 10px; } .rekorderNavItem { position: relative; min-width: 0; height: 50px; display: block; overflow: hidden; border-radius: 10px; color: var(--cream); background: transparent; font-family: var(--font-mono), "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400; line-height: 14.4px; letter-spacing: 0; text-decoration: none; text-transform: uppercase; cursor: pointer; } .rekorderNavItemActive { color: var(--ink); background: var(--cream); } .rekorderNavDot { position: absolute; top: 9px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: currentColor; transform: translateX(-50%); transition: top 350ms cubic-bezier(0.16, 1, 0.3, 1), bottom 350ms cubic-bezier(0.16, 1, 0.3, 1); } .rekorderNavLabelPrimary, .rekorderNavLabelDuplicate { position: absolute; left: 50%; width: auto; height: auto; white-space: pre; transform: translateX(-50%); transition: top 350ms cubic-bezier(0.16, 1, 0.3, 1), bottom 350ms cubic-bezier(0.16, 1, 0.3, 1); } .rekorderNavLabelPrimary { bottom: 11px; } .rekorderNavLabelDuplicate { top: -16px; } .rekorderNavItem:hover .rekorderNavLabelPrimary, .rekorderNavItem:focus-visible .rekorderNavLabelPrimary { bottom: -15px; } .rekorderNavItem:hover .rekorderNavLabelDuplicate, .rekorderNavItem:focus-visible .rekorderNavLabelDuplicate { top: 4px; } .rekorderNavItem:hover .rekorderNavDot, .rekorderNavItem:focus-visible .rekorderNavDot { top: auto; bottom: 8px; } .rekorderNavItem:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; } @media (max-width: 1199px) { .rekorderContactText { font-size: 9px; } .rekorderContactHeading { line-height: 1.4em; } .rekorderContactValue { line-height: 1.2em; } } @media (max-width: 809px) { .rekorderHeader { height: 159px; overflow: hidden; } .rekorderDesktopMenu { display: none; } .rekorderMobileMenu { display: block; } .rekorderContactHeader { height: 159px; flex-direction: column; order: 0; align-content: flex-end; align-items: flex-end; gap: 0; padding: 7px 20px 0 10px; overflow: hidden; } .rekorderContactCluster { flex-direction: column; height: min-content; padding: 62px 0 0; gap: 10px; } .rekorderContactBlock { width: 170px; } } @media (min-width: 810px) { .rekorderMobileMenu { display: none !important; } } /* ------------------------------------------------------------------ */ /* Rekorder 2.0 Hero — fresh current-runtime reconstruction */ /* ------------------------------------------------------------------ */ /* * Current live runtime font identities. * These URLs are referenced directly; no font file is copied into the repo. */ @font-face { font-family: "GT Alpina Light"; src: url("https://framerusercontent.com/assets/1SYvHLGlJ3qmXVUqCNjAz1EI.woff2") format("woff2"); font-style: normal; font-weight: 300 400; font-display: swap; } @font-face { font-family: "GT Alpina Light Italic"; src: url("https://framerusercontent.com/assets/Dy0nTHL3cJxVH1JaWhiMQ6Sr9c.woff2") format("woff2"); font-style: italic; font-weight: 300; font-display: swap; } .rekorderHero { position: relative; z-index: 1; width: 100%; height: 100vh; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: visible; background: var(--cream); color: var(--cream); } /* Current Original media authority: >=810: desktop asset family, top 0, aspect 1.31004 <=809: mobile asset family, top 100px, aspect .579694 */ .rekorderHeroMedia { position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: -116px; overflow: visible; transform-origin: 50% 50%; opacity: 0.001; transform: perspective(1200px) scale(.8) rotateX(20deg) rotateY(10deg); animation: rekorderHeroMediaEnter 1250ms cubic-bezier(.16, 1, .3, 1) 0ms forwards; } .rekorderHeroMediaLayer { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1.31004; display: block; overflow: visible; } .rekorderHeroMediaLayer img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; user-select: none; pointer-events: none; } .rekorderHeroMediaLayerPrimary { opacity: 1; } .rekorderHeroMediaLayerSecondary { opacity: 0; transition: opacity 700ms cubic-bezier(.54, 0, .21, .99); will-change: opacity; } /* Fresh DOM: Introtext is the z=2 100vh centered overlay. */ .rekorderHeroIntroText { position: relative; z-index: 2; width: 100%; height: 100vh; display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px; overflow: hidden; } .rekorderHeroCopy { position: relative; display: flex; flex: none; width: min-content; height: min-content; flex-direction: column; align-items: center; justify-content: center; gap: 0; overflow: hidden; } .rekorderHeroLineWindow { position: relative; display: flex; flex: none; width: min-content; height: 38px; align-items: center; justify-content: center; overflow: hidden; } .rekorderHeroLine { position: relative; display: flex; flex: none; width: max-content; height: 38px; align-items: center; justify-content: center; gap: 6px; overflow: hidden; color: var(--cream); transform-style: preserve-3d; backface-visibility: visible; will-change: transform; } .rekorderHeroLine1, .rekorderHeroLine2, .rekorderHeroLine3 { transform: perspective(1200px) translateY(40px) rotateX(-130deg); animation: rekorderHeroLineEnter 1050ms cubic-bezier(.16, 1, .3, 1) forwards; } .rekorderHeroLine1 { animation-delay: 120ms; } .rekorderHeroLine2 { animation-delay: 230ms; padding-inline: 10px; } .rekorderHeroLine3 { animation-delay: 340ms; } .rekorderHeroRoman, .rekorderHeroItalic { position: relative; flex: none; width: auto; height: auto; white-space: pre; font-size: 40px; line-height: 48px; font-weight: 300; } .rekorderHeroRoman { font-family: "GT Alpina Light", var(--font-display), Georgia, serif; font-style: normal; text-transform: uppercase; letter-spacing: -0.4px; } .rekorderHeroItalic { font-family: "GT Alpina Light Italic", "GT Alpina Light", var(--font-display), Georgia, serif; font-style: italic; text-transform: none; letter-spacing: normal; } .rekorderHeroCharacters { font-weight: 400; } .rekorderHeroCrafted { display: flex; align-items: center; padding: 0 2px 6px 0; } .rekorderHeroAnd { display: flex; align-items: center; padding: 0 2px 5px 0; } .rekorderHeroOf { display: flex; align-items: center; padding: 0 8px 5px 0; } .rekorderHeroActions { position: relative; display: flex; flex: none; width: min-content; height: min-content; align-items: center; justify-content: center; gap: 10px; overflow: hidden; } .rekorderHeroActionMotion { position: relative; flex: none; width: 150px; height: 50px; transform: perspective(1200px) translateY(50px) rotateX(-130deg); will-change: transform; animation: rekorderHeroActionEnter 900ms cubic-bezier(.16, 1, .3, 1) 480ms forwards; } .rekorderHeroButton { position: relative; width: 150px; height: 50px; padding: 0; border: 0; background: transparent; color: var(--cream); cursor: pointer; overflow: hidden; font: inherit; } .rekorderHeroButtonShell { position: absolute; inset: 0; display: block; overflow: hidden; border: 1px solid var(--cream); border-radius: 10px; transition: width 220ms ease, height 220ms ease, inset 220ms ease; } .rekorderHeroButtonPrimary, .rekorderHeroButtonSecondary { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); white-space: pre; font-family: var(--font-mono), "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400; line-height: 14.4px; text-transform: uppercase; color: var(--cream); transition: top 220ms ease, bottom 220ms ease; } .rekorderHeroButtonPrimary { bottom: 11px; } .rekorderHeroButtonSecondary { top: -16px; } .rekorderHeroButtonDot { position: absolute; top: 9px; left: 50%; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 20px; background: var(--cream); transition: top 220ms ease, bottom 220ms ease; } .rekorderHeroButton:hover .rekorderHeroButtonShell, .rekorderHeroButton:focus-visible .rekorderHeroButtonShell { inset: 3px; } .rekorderHeroButton:hover .rekorderHeroButtonPrimary, .rekorderHeroButton:focus-visible .rekorderHeroButtonPrimary { bottom: -15px; } .rekorderHeroButton:hover .rekorderHeroButtonDot, .rekorderHeroButton:focus-visible .rekorderHeroButtonDot { top: auto; bottom: 8px; } .rekorderHeroButton:hover .rekorderHeroButtonSecondary, .rekorderHeroButton:focus-visible .rekorderHeroButtonSecondary { top: 4px; } @keyframes rekorderHeroLineEnter { 0% { transform: perspective(1200px) translateY(40px) rotateX(-130deg); } 100% { transform: perspective(1200px) translateY(0) rotateX(0deg); } } @keyframes rekorderHeroActionEnter { 0% { transform: perspective(1200px) translateY(50px) rotateX(-130deg); } 100% { transform: perspective(1200px) translateY(0) rotateX(0deg); } } @keyframes rekorderHeroMediaEnter { 0% { opacity: .001; transform: perspective(1200px) scale(.8) rotateX(20deg) rotateY(10deg); } 100% { opacity: 1; transform: perspective(1200px) scale(1) rotateX(0deg) rotateY(0deg); } } /* Mobile has no branded loading scene, so first paint must remain legible. */ @keyframes rekorderHeroMediaMobileEnter { 0% { opacity: .55; transform: scale(.97) rotateX(4deg) rotateY(2deg); } 100% { opacity: 1; transform: none; } } @keyframes rekorderHeroLineMobileEnter { 0% { transform: matrix3d( 1, 0, 0, 0, 0, -.642788, -.766044, 0, 0, .766044, -.642788, 0, 0, 40, 0, 1 ); } 50% { transform: matrix3d( 1, 0, 0, 0, 0, .691686, -.722199, .000601832, 0, .722199, .691686, -.000576405, 0, 14.2266, 0, 1 ); } 100% { transform: none; } } @keyframes rekorderHeroActionMobileEnter { 0% { transform: matrix3d( 1, 0, 0, 0, 0, -.642788, -.766044, .00063837, 0, .766044, -.642788, .000535656, 0, 50, 0, 1 ); } 25% { transform: matrix3d( 1, 0, 0, 0, 0, .0723094, -.997382, .000831152, 0, .997382, .0723094, -.0000602579, 0, 33.0205, 0, 1 ); } 50% { transform: matrix3d( 1, 0, 0, 0, 0, .847889, -.530173, .000441811, 0, .530173, .847889, -.000706574, 0, 12.3143, 0, 1 ); } 75% { transform: matrix3d( 1, 0, 0, 0, 0, .985344, -.170579, .000142149, 0, .170579, .985344, -.00082112, 0, 3.7775, 0, 1 ); } 100% { transform: none; } } @media (max-width: 809px) { .rekorderHeroMedia { top: 100px; bottom: -116px; animation: rekorderHeroMediaMobileEnter 700ms cubic-bezier(.16, 1, .3, 1) both; } .rekorderHeroMediaLayer { aspect-ratio: .579694; } .rekorderHeroIntroText { gap: 20px; overflow: visible; } .rekorderHeroLineWindow { height: 22px; } .rekorderHeroLine1, .rekorderHeroLine2 { height: 30px; gap: 2px; } .rekorderHeroLine3 { height: 32px; gap: 6px; } .rekorderHeroLine2 { padding-inline: 0; } .rekorderHeroRoman, .rekorderHeroItalic { font-size: 23px; line-height: 27.6px; } .rekorderHeroRoman { letter-spacing: -0.23px; } .rekorderHeroLine1, .rekorderHeroLine2, .rekorderHeroLine3 { transform: matrix3d( 1, 0, 0, 0, 0, -.642788, -.766044, 0, 0, .766044, -.642788, 0, 0, 40, 0, 1 ); animation-name: rekorderHeroLineMobileEnter; animation-duration: 600ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-delay: 180ms; } .rekorderHeroLine2 { animation-duration: 480ms; animation-delay: 300ms; } .rekorderHeroLine3 { animation-duration: 480ms; animation-delay: 300ms; } .rekorderHeroActionMotion { transform: matrix3d( 1, 0, 0, 0, 0, -.642788, -.766044, .00063837, 0, .766044, -.642788, .000535656, 0, 50, 0, 1 ); animation-name: rekorderHeroActionMobileEnter; animation-duration: 600ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-delay: 300ms; } .rekorderHeroCrafted, .rekorderHeroAnd { padding: 0 2px 2px 0; } .rekorderHeroOf { padding: 0 8px 2px 0; } } @media (max-width: 480px) { .rekorderHeroMedia { top: 160px; } } /* Current live architecture family: compact desktop 810–1199. */ @media (min-width: 810px) and (max-width: 1199px) { .rekorderHero { min-height: 800px; } .rekorderHeroMedia { bottom: -156px; } .rekorderHeroLineWindow { height: 26px; } .rekorderHeroLine { gap: 6px; } .rekorderHeroLine2 { gap: 5px; } .rekorderHeroRoman, .rekorderHeroItalic { font-size: 23px; line-height: 27.6px; } .rekorderHeroRoman { letter-spacing: -0.23px; } .rekorderHeroCrafted, .rekorderHeroAnd { padding-bottom: 2px; } .rekorderHeroOf { padding-bottom: 2px; } } /* 1500px is a current Framer page family boundary, but fresh Hero evidence shows no separate typography or media-family switch there. */ @media (prefers-reduced-motion: reduce) { .rekorderCustomCursor { display: none !important; } .rekorderHeroMedia, .rekorderHeroMediaLayerSecondary, .rekorderHeroLine1, .rekorderHeroLine2, .rekorderHeroLine3, .rekorderHeroActionMotion { animation: none !important; } .rekorderHeroMedia { opacity: 1; transform: none; } .rekorderHeroMediaLayerSecondary { transition: none; } .rekorderHeroLine1, .rekorderHeroLine2, .rekorderHeroLine3, .rekorderHeroActionMotion { transform: none; } } /* ------------------------------------------------------------------ */