/* ═══════════════════════════════════════════════════════════════════════ TheOFCO — site chrome for the PHP pages ─────────────────────────────────────────────────────────────────────── The header and footer rules below are LIFTED VERBATIM from the live theofco.com build, so this page wears the real chrome rather than a lookalike. They were extracted by taking the header/footer markup off the homepage, collecting the 146 classes it uses, and keeping only the matching rules out of the two Tailwind bundles. Why a copy rather than linking the site's own stylesheet: those bundles are content-hashed (/_next/static/css/.css), so the filename changes on every rebuild and the chrome here would silently lose its styling. A copy is stale at worst; a dead link is broken. Two things were deliberately left out of the extraction: • Tailwind's preflight — the universal and element selectors would reset this page out from under site.css. • @font-face — the fonts are already loaded from Google in the page head, so the variables are simply pointed at those families below. To refresh after a redesign, re-run the extraction against the current homepage. Everything below the OFI banner is hand-written and is not part of that. ═══════════════════════════════════════════════════════════════════════ */ /* next/font normally defines these on ; this page loads the same two families from Google instead, so the variables are bridged by hand. */ :root{ --font-space-grotesk:'Space Grotesk'; --font-jakarta:'Space Grotesk'; --font-inter:'Inter'; } :host, :root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-md:12px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-ink:#050505;--color-ink-2:#0a0a0b;--color-ink-3:#101012;--color-ink-4:#17171a;--color-line:#ffffff12;--color-line-2:#ffffff1f;--color-gold:#d4af63;--color-gold-lit:#e8c98a;--color-gold-deep:#a8873f;--color-glow:#d4af634d;--color-bone:#fff;--color-silver:#b8b8b8;--color-ash:#6e6e73;--font-display:var(--font-space-grotesk),ui-sans-serif,system-ui,sans-serif;--font-body:var(--font-inter),ui-sans-serif,system-ui,sans-serif;--text-mega:clamp(2.25rem,min(7vw,10.2vh),6.5rem);--text-mega--line-height:.9;--text-mega--letter-spacing:-.04em;--text-display:clamp(2.25rem,min(5.6vw,9.5vh),5rem);--text-display--line-height:.98;--text-display--letter-spacing:-.032em;--text-title:clamp(2rem,4.4vw,3.75rem);--text-title--line-height:1.04;--text-title--letter-spacing:-.03em;--text-lede:clamp(1.0625rem,1.5vw,1.375rem);--text-lede--line-height:1.65;--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quint:cubic-bezier(.22,1,.36,1);--ease-swift:cubic-bezier(.4,0,.2,1);--spacing-gutter:clamp(1.25rem,5vw,4.5rem)} :host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent} @layer components; .invisible{visibility:hidden} .absolute{position:absolute} .fixed{position:fixed} .relative{position:relative} .inset-0{inset:0} .inset-x-0{inset-inline:0} .inset-x-4{inset-inline:calc(var(--spacing) * 4)} .top-0{top:0} .top-\[0\.62em\]{top:.62em} .bottom-1{bottom:var(--spacing)} .left-0{left:0} .z-\[110\]{z-index:110} .z-\[120\]{z-index:120} .mt-7{margin-top:calc(var(--spacing) * 7)} .mt-10{margin-top:calc(var(--spacing) * 10)} .mt-14{margin-top:calc(var(--spacing) * 14)} .mt-16{margin-top:calc(var(--spacing) * 16)} .mb-2{margin-bottom:calc(var(--spacing) * 2)} .mb-5{margin-bottom:calc(var(--spacing) * 5)} .-ml-3{margin-left:calc(var(--spacing) * -3)} .block{display:block} .flex{display:flex} .grid{display:grid} .hidden{display:none} .size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)} .size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)} .size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)} .h-\[4\.5rem\]{height:4.5rem} .h-full{height:100%} .h-px{height:1px} .w-0{width:0} .w-5{width:calc(var(--spacing) * 5)} .w-40{width:calc(var(--spacing) * 40)} .w-fit{width:fit-content} .w-full{width:100%} .origin-left{transform-origin:0} .scale-x-0{--tw-scale-x:0%;scale:var(--tw-scale-x) var(--tw-scale-y)} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .items-baseline{align-items:baseline} .items-center{align-items:center} .items-start{align-items:flex-start} .justify-between{justify-content:space-between} .justify-center{justify-content:center} .gap-1{gap:var(--spacing)} .gap-1\.5{gap:calc(var(--spacing) * 1.5)} .gap-2{gap:calc(var(--spacing) * 2)} .gap-2\.5{gap:calc(var(--spacing) * 2.5)} .gap-3{gap:calc(var(--spacing) * 3)} .gap-5{gap:calc(var(--spacing) * 5)} .gap-6{gap:calc(var(--spacing) * 6)} .gap-7{gap:calc(var(--spacing) * 7)} .gap-\[5px\]{gap:5px} .gap-x-8{column-gap:calc(var(--spacing) * 8)} .gap-x-12{column-gap:calc(var(--spacing) * 12)} .gap-y-3{row-gap:calc(var(--spacing) * 3)} .gap-y-14{row-gap:calc(var(--spacing) * 14)} .overflow-hidden{overflow:hidden} .rounded-full{border-radius:3.40282e+38px} .border{border-style:var(--tw-border-style);border-width:1px} .border-t{border-top-style:var(--tw-border-style);border-top-width:1px} .border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px} .border-line{border-color:var(--color-line)} .border-line-2{border-color:var(--color-line-2)} .border-transparent{border-color:#0000} .bg-bone{background-color:var(--color-bone)} .bg-gold{background-color:var(--color-gold)} .bg-ink-2{background-color:var(--color-ink-2)} .bg-ink\/97{background-color:#050505f7} @supports (color:color-mix(in lab,red,red)){ .bg-ink\/97{background-color:color-mix(in oklab,var(--color-ink) 97%,transparent)} } .bg-transparent{background-color:#0000} .px-4{padding-inline:calc(var(--spacing) * 4)} .px-5{padding-inline:calc(var(--spacing) * 5)} .py-2{padding-block:calc(var(--spacing) * 2)} .py-2\.5{padding-block:calc(var(--spacing) * 2.5)} .py-5{padding-block:calc(var(--spacing) * 5)} .py-20{padding-block:calc(var(--spacing) * 20)} .pt-7{padding-top:calc(var(--spacing) * 7)} .pt-20{padding-top:calc(var(--spacing) * 20)} .text-center{text-align:center} .text-left{text-align:left} .font-body{font-family:var(--font-body)} .font-display{font-family:var(--font-display)} .text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))} .text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))} .text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))} .text-\[0\.75rem\]{font-size:.75rem} .text-\[0\.875rem\]{font-size:.875rem} .text-\[0\.8125rem\]{font-size:.8125rem} .text-\[0\.9375rem\]{font-size:.9375rem} .text-\[clamp\(3rem\,13vw\,10\.5rem\)\]{font-size:clamp(3rem,13vw,10.5rem)} .leading-\[0\.72\]{--tw-leading:.72;line-height:.72} .leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5} .font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)} .font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)} .font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)} .tracking-\[-0\.045em\]{--tw-tracking:-.045em;letter-spacing:-.045em} .tracking-\[0\.22em\]{--tw-tracking:.22em;letter-spacing:.22em} .text-balance{text-wrap:balance} .whitespace-nowrap{white-space:nowrap} .text-ash{color:var(--color-ash)} .text-bone{color:var(--color-bone)} .text-bone\/\[0\.05\]{color:#ffffff0d} @supports (color:color-mix(in lab,red,red)){ .text-bone\/\[0\.05\]{color:color-mix(in oklab,var(--color-bone) 5%,transparent)} } .text-gold{color:var(--color-gold)} .text-gold\/60{color:#d4af6399} @supports (color:color-mix(in lab,red,red)){ .text-gold\/60{color:color-mix(in oklab,var(--color-gold) 60%,transparent)} } .text-silver{color:var(--color-silver)} .opacity-0{opacity:0} .backdrop-blur-2xl{--tw-backdrop-blur:blur(var(--blur-2xl))} .backdrop-blur-2xl{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)} .transition-\[color\,padding\]{transition-property:color,padding;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-\[opacity\,visibility\]{transition-property:opacity,visibility;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-\[transform\,background-color\,border-color\,backdrop-filter\]{transition-property:transform,background-color,border-color,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-\[transform\,opacity\]{transition-property:transform,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))} .duration-400{--tw-duration:.4s;transition-duration:.4s} .duration-500{--tw-duration:.5s;transition-duration:.5s} .duration-600{--tw-duration:.6s;transition-duration:.6s} .duration-700{--tw-duration:.7s;transition-duration:.7s} .ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\]{--tw-ease:cubic-bezier(.16,1,.3,1);transition-timing-function:cubic-bezier(.16,1,.3,1)} .ease-\[cubic-bezier\(0\.76\,0\,0\.24\,1\)\]{--tw-ease:cubic-bezier(.76,0,.24,1);transition-timing-function:cubic-bezier(.76,0,.24,1)} .select-none{-webkit-user-select:none;user-select:none} @media (hover:hover){ .group-hover\:w-3:is(:where(.group):hover *){width:calc(var(--spacing) * 3)} .group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)} .group-hover\:-translate-y-0\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)} .group-hover\:-translate-y-1:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)} .group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)} .group-hover\:scale-x-100:is(:where(.group):hover *){--tw-scale-x:100%;scale:var(--tw-scale-x) var(--tw-scale-y)} .group-hover\:text-gold:is(:where(.group):hover *){color:var(--color-gold)} } @media (hover:hover){ .hover\:border-gold\/55:hover{border-color:#d4af638c} @supports (color:color-mix(in lab,red,red)){ .hover\:border-gold\/55:hover{border-color:color-mix(in oklab,var(--color-gold) 55%,transparent)} } .hover\:pl-4:hover{padding-left:calc(var(--spacing) * 4)} .hover\:text-bone:hover{color:var(--color-bone)} .hover\:text-gold:hover{color:var(--color-gold)} } @media (min-width:40rem){ .sm\:block{display:block} .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .sm\:flex-row{flex-direction:row} .sm\:items-center{align-items:center} .sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))} } @media (min-width:64rem){ .lg\:flex{display:flex} .lg\:hidden{display:none} .lg\:grid-cols-\[1\.7fr_1fr_0\.95fr_1\.15fr_1fr\]{grid-template-columns:1.7fr 1fr .95fr 1.15fr 1fr} .lg\:py-24{padding-block:calc(var(--spacing) * 24)} } .shell{width:100%;max-width:90rem;padding-inline:var(--spacing-gutter);margin-inline:auto} .grain:after{content:"";pointer-events:none;opacity:.032;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0} .mask-x{-webkit-mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000);mask-image:linear-gradient(90deg,#0000,#000 9% 91%,#0000)} .eyebrow{font-family:var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--color-ash);font-size:.6875rem;font-weight:500} @property --tw-translate-x{syntax:"*";inherits:false;initial-value:0} @property --tw-translate-y{syntax:"*";inherits:false;initial-value:0} @property --tw-translate-z{syntax:"*";inherits:false;initial-value:0} @property --tw-scale-x{syntax:"*";inherits:false;initial-value:1} @property --tw-scale-y{syntax:"*";inherits:false;initial-value:1} @property --tw-scale-z{syntax:"*";inherits:false;initial-value:1} @property --tw-rotate-x{syntax:"*";inherits:false} @property --tw-rotate-y{syntax:"*";inherits:false} @property --tw-rotate-z{syntax:"*";inherits:false} @property --tw-skew-x{syntax:"*";inherits:false} @property --tw-skew-y{syntax:"*";inherits:false} @property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity} @property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0} @property --tw-border-style{syntax:"*";inherits:false;initial-value:solid} @property --tw-gradient-position{syntax:"*";inherits:false} @property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000} @property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000} @property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000} @property --tw-gradient-stops{syntax:"*";inherits:false} @property --tw-gradient-via-stops{syntax:"*";inherits:false} @property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0} @property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%} @property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%} @property --tw-leading{syntax:"*";inherits:false} @property --tw-font-weight{syntax:"*";inherits:false} @property --tw-tracking{syntax:"*";inherits:false} @property --tw-ordinal{syntax:"*";inherits:false} @property --tw-slashed-zero{syntax:"*";inherits:false} @property --tw-numeric-figure{syntax:"*";inherits:false} @property --tw-numeric-spacing{syntax:"*";inherits:false} @property --tw-numeric-fraction{syntax:"*";inherits:false} @property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000} @property --tw-shadow-color{syntax:"*";inherits:false} @property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%} @property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000} @property --tw-inset-shadow-color{syntax:"*";inherits:false} @property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%} @property --tw-ring-color{syntax:"*";inherits:false} @property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000} @property --tw-inset-ring-color{syntax:"*";inherits:false} @property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000} @property --tw-ring-inset{syntax:"*";inherits:false} @property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0} @property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff} @property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000} @property --tw-blur{syntax:"*";inherits:false} @property --tw-brightness{syntax:"*";inherits:false} @property --tw-contrast{syntax:"*";inherits:false} @property --tw-grayscale{syntax:"*";inherits:false} @property --tw-hue-rotate{syntax:"*";inherits:false} @property --tw-invert{syntax:"*";inherits:false} @property --tw-opacity{syntax:"*";inherits:false} @property --tw-saturate{syntax:"*";inherits:false} @property --tw-sepia{syntax:"*";inherits:false} @property --tw-drop-shadow{syntax:"*";inherits:false} @property --tw-drop-shadow-color{syntax:"*";inherits:false} @property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%} @property --tw-drop-shadow-size{syntax:"*";inherits:false} @property --tw-backdrop-blur{syntax:"*";inherits:false} @property --tw-backdrop-brightness{syntax:"*";inherits:false} @property --tw-backdrop-contrast{syntax:"*";inherits:false} @property --tw-backdrop-grayscale{syntax:"*";inherits:false} @property --tw-backdrop-hue-rotate{syntax:"*";inherits:false} @property --tw-backdrop-invert{syntax:"*";inherits:false} @property --tw-backdrop-opacity{syntax:"*";inherits:false} @property --tw-backdrop-saturate{syntax:"*";inherits:false} @property --tw-backdrop-sepia{syntax:"*";inherits:false} @property --tw-duration{syntax:"*";inherits:false} @property --tw-ease{syntax:"*";inherits:false} /* ── Fitting the chrome to a page it did not grow up on ────────────── The live site sets these on through Tailwind; here site.css owns the body, so the few inherited values the chrome depends on are stated explicitly rather than left to whatever the legacy sheet happens to say. */ #t-nav, #t-sheet, .t-chrome{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; } #t-nav *, #t-sheet *, .t-chrome *{ box-sizing:border-box; } #t-nav a, #t-sheet a, .t-chrome a{ text-decoration:none; } #t-nav button, #t-sheet button, .t-chrome button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } .t-chrome ul{ list-style:none; margin:0; padding:0; } .t-chrome img{ display:block; max-width:100%; } /* The header is fixed and starts transparent over the hero on the live homepage. Here it sits above ordinary page content from the first pixel, so it needs its surface immediately. */ #t-nav{ background:color-mix(in oklab, var(--color-ink) 72%, transparent); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); border-bottom-color:var(--color-line); } /* ══ OFI — mascot ═════════════════════════════════════════════════════ Cursor tracking is done with two custom properties (--mx, --my, both −1…1) written by a mousemove listener; CSS transitions do the smoothing. No rAF loop and no animation library. The DIFFERENT durations below are the point: eyes arrive first, the head follows, the ring lags. That offset is follow-through, and it is what separates "alive" from "a picture that moves". ═══════════════════════════════════════════════════════════════════════ */ .ms{--mx:0;--my:0;overflow:visible;pointer-events:none;user-select:none;} /* The compact variant crops to the head with a tighter viewBox, but `overflow:visible` above would let the body and arms paint outside it anyway. A cropped frame has to actually crop. */ .ms-clip{overflow:hidden;} /* Rotations need an explicit origin; SVG's default is the viewBox corner. */ .ms-head{transform-origin:100px 110px;} .ms-body{transform-origin:100px 170px;} .ms-ring{transform-origin:100px 40px;} .ms-arm{transform-origin:130px 156px;} .ms-tassel{transform-origin:131px 38px;} .ms-eyes{transform:translate(calc(var(--mx)*4.5px),calc(var(--my)*3px)); transition:transform .22s cubic-bezier(.22,1,.36,1);} .ms-head{transform:translate(calc(var(--mx)*7px),calc(var(--my)*5px)) rotate(calc(var(--mx)*7deg)); transition:transform .55s var(--t-ease);} .ms-body{transform:translate(calc(var(--mx)*2.5px),0) rotate(calc(var(--mx)*2deg)); transition:transform .75s var(--t-ease);} .ms-ring{transform:translate(calc(var(--mx)*9px),calc(var(--my)*3px)) rotate(calc(var(--mx)*-6deg)); transition:transform .95s var(--t-ease);} .ms-shadow{transform:translateX(calc(var(--mx)*-5px));transition:transform .75s var(--t-ease);} .ms-float{animation:ms-float 5s ease-in-out infinite;} .ms-core{animation:ms-core 3.2s ease-in-out infinite;transform-origin:100px 166px;} .ms-tassel{animation:ms-tassel 4.4s ease-in-out infinite;} .ms-eye{animation:ms-blink 7s infinite;transform-origin:88.5px 92px;} .ms-eye-r{transform-origin:111.5px 92px;} .ms-arm{animation:ms-idle-wave 9s ease-in-out infinite;} @keyframes ms-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} @keyframes ms-core{0%,100%{transform:scale(.88);opacity:.6;}50%{transform:scale(1.1);opacity:1;}} @keyframes ms-tassel{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(6deg);}} /* Two blinks close together, then a long pause — the irregular rhythm is what reads as a living thing rather than a metronome. */ @keyframes ms-blink{0%,6%,9%,13%,52%,56%,100%{transform:scaleY(1);}7.5%,11%,54%{transform:scaleY(.1);}} /* An occasional unprompted wave, so it has life before anyone hovers. */ @keyframes ms-idle-wave{0%,82%,100%{transform:rotate(0);}86%,94%{transform:rotate(-26deg);}90%,98%{transform:rotate(-6deg);}} @keyframes ms-wave{0%,100%{transform:rotate(-34deg);}25%{transform:rotate(-52deg);}75%{transform:rotate(-16deg);}} @media(prefers-reduced-motion:reduce){ .ms-float,.ms-core,.ms-tassel,.ms-eye,.ms-arm{animation:none;} .ms-eyes,.ms-head,.ms-body,.ms-ring,.ms-shadow{transform:none;} } /* ══ OFI — dock ═══════════════════════════════════════════════════════ */ .ofi{position:fixed;right:1.5rem;bottom:1.5rem;z-index:150; display:flex;flex-direction:column;align-items:flex-end;gap:.75rem; transition:opacity .5s,transform .5s;} @media(min-width:640px){ .ofi{right:2.5rem;bottom:2.5rem;} } /* Faded rather than removed: unmounting would replay the entrance animation every time the footer scrolled past. */ .ofi.ofi-away{pointer-events:none;opacity:0;transform:translateY(12px);} .ofi-launcher{position:relative;display:flex;align-items:center;justify-content:center; width:4rem;height:4rem;border-radius:9999px;border:1px solid rgba(212,175,99,.35); background:var(--t-ink2);box-shadow:0 18px 44px -18px rgba(0,0,0,.9); animation:ofi-in .7s var(--t-ease) both; transition:border-color .5s,transform .5s;} .ofi-launcher:hover{transform:scale(1.05);border-color:rgba(212,175,99,.6);} .ofi-launcher .ofi-halo{position:absolute;inset:0;border-radius:9999px;pointer-events:none; background:radial-gradient(circle at 50% 35%,rgba(212,175,99,.16),transparent 70%);} .ofi-launcher .ms{width:3rem;height:3rem;} @keyframes ofi-in{from{opacity:0;transform:translateY(18px) scale(.85);}to{opacity:1;transform:translateY(0) scale(1);}} /* A soft halo while OFI has something to say. Slow and low-contrast on purpose: a fast flash on a dark page reads as an advert. */ .ofi-calling::after{content:"";position:absolute;inset:-6px;border-radius:9999px; border:1px solid rgba(212,175,99,.5);pointer-events:none; animation:ofi-calling 2.6s cubic-bezier(.22,1,.36,1) infinite;} @keyframes ofi-calling{0%{transform:scale(.94);opacity:.75;}70%,100%{transform:scale(1.22);opacity:0;}} .ofi-waving .ms-arm{animation:ms-wave .7s cubic-bezier(.4,0,.2,1) 2;} /* ══ OFI — nudge bubble ═══════════════════════════════════════════════ */ .ofi-nudge{position:relative;max-width:18.5rem;border-radius:1rem .5rem; border-bottom-right-radius:.125rem;border:1px solid rgba(212,175,99,.45); background:var(--t-ink2);padding:.875rem 1rem; box-shadow:0 24px 60px -20px rgba(0,0,0,.95),0 0 0 1px rgba(212,175,99,.1); animation:ofi-nudge .6s var(--t-ease) both;} @keyframes ofi-nudge{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} /* A tail pointing at OFI, so the bubble reads as speech from the figure rather than as a floating notification. */ .ofi-tail{position:absolute;bottom:-7px;right:1.25rem;width:.75rem;height:.75rem; transform:rotate(45deg);border-right:1px solid rgba(212,175,99,.45); border-bottom:1px solid rgba(212,175,99,.45);background:var(--t-ink2);} .ofi-nudge-btns{position:absolute;top:-.625rem;right:-.5rem;display:flex;gap:.375rem;} .ofi-mini{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem; border-radius:9999px;border:1px solid var(--t-line2);background:var(--t-ink); color:var(--t-ash);transition:color .3s;} .ofi-mini:hover{color:var(--t-gold);} .ofi-mini svg{width:.75rem;height:.75rem;} .ofi-speak{display:block;text-align:left;background:none;border:0;padding:0;width:100%;} .ofi-tag{display:flex;align-items:center;gap:.375rem;margin-bottom:.375rem;} .ofi-dot{width:.375rem;height:.375rem;border-radius:9999px;background:var(--t-gold);} /* Each new hint fades in, so a swap reads as OFI saying something rather than the text silently mutating. */ .ofi-hint{font-family:var(--t-body);font-size:.9375rem;line-height:1.4;color:var(--t-bone); animation:ofi-hint .45s var(--t-ease) both;} @keyframes ofi-hint{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}} .ofi-more{display:block;margin-top:.5rem;font-family:var(--t-body);font-size:.75rem;color:var(--t-ash);} /* ══ OFI — panel ══════════════════════════════════════════════════════ */ .ofi-panel{display:flex;flex-direction:column;overflow:hidden; height:min(34rem,72vh);width:min(94vw,23rem);border-radius:1.5rem; border:1px solid var(--t-line2);background:var(--t-ink2); box-shadow:0 40px 110px -40px rgba(0,0,0,.95); animation:ofi-panel .45s var(--t-ease) both;transform-origin:bottom right;} @keyframes ofi-panel{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}} .ofi-head{display:flex;flex:none;align-items:center;gap:.75rem; border-bottom:1px solid var(--t-line);padding:1rem;} .ofi-avatar{display:flex;flex:none;align-items:center;justify-content:center; width:2.5rem;height:2.5rem;border-radius:9999px; border:1px solid rgba(212,175,99,.3);background:rgba(212,175,99,.1);} .ofi-avatar .ms{width:2rem;height:2rem;} .ofi-who{min-width:0;flex:1;} .ofi-who b{display:block;font-family:var(--t-disp);font-size:.9375rem;font-weight:500;color:var(--t-bone);} .ofi-who small{font-family:var(--t-body);font-size:.75rem;color:var(--t-ash);} .ofi-x{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem; border-radius:9999px;border:1px solid var(--t-line2);background:none;color:var(--t-silver); transition:color .3s,border-color .3s;} .ofi-x:hover{border-color:rgba(212,175,99,.4);color:var(--t-gold);} .ofi-x svg{width:1rem;height:1rem;} /* `overscroll-contain` stops the scroll chaining on to the page once this list reaches its end — without it, reaching the bottom of the chat scrolls the document underneath. */ .ofi-feed{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem; display:flex;flex-direction:column;gap:1rem;} .ofi-row{display:flex;} .ofi-row.you{justify-content:flex-end;} .ofi-bubble{max-width:85%;border-radius:1rem;padding:.625rem .875rem; font-family:var(--t-body);font-size:.875rem;line-height:1.65;white-space:pre-line;} .ofi-row.ofi .ofi-bubble{border-bottom-left-radius:.125rem;border:1px solid var(--t-line); background:var(--t-ink);color:var(--t-silver);} .ofi-row.you .ofi-bubble{border-bottom-right-radius:.125rem; background:rgba(212,175,99,.15);color:var(--t-bone);} .ofi-bubble a{display:block;margin-top:.75rem;font-size:.8125rem;color:var(--t-gold); text-underline-offset:4px;} .ofi-bubble a:hover{text-decoration:underline;} .ofi-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.25rem;} .ofi-chip{border-radius:9999px;border:1px solid rgba(212,175,99,.35);background:none; padding:.375rem .75rem;font-family:var(--t-body);font-size:.75rem;color:var(--t-gold); transition:background-color .4s,color .4s; min-height:2.75rem;display:inline-flex;align-items:center;} .ofi-chip:hover{background:var(--t-gold);color:var(--t-ink);} .ofi-form{display:flex;flex:none;align-items:center;gap:.5rem; border-top:1px solid var(--t-line);padding:.75rem;} .ofi-form input{min-width:0;flex:1;border-radius:9999px;border:1px solid var(--t-line2); background:var(--t-ink);padding:.625rem 1rem;font-family:var(--t-body);font-size:.875rem; font-weight:300;color:var(--t-bone);} .ofi-form input::placeholder{color:var(--t-ash);} .ofi-form input:focus{outline:none;border-color:rgba(212,175,99,.5);} .ofi-send{display:flex;flex:none;align-items:center;justify-content:center; width:2.5rem;height:2.5rem;border-radius:9999px;border:0;background:var(--t-gold); color:var(--t-ink);transition:opacity .3s;} .ofi-send:hover{opacity:.9;} .ofi-send svg{width:1rem;height:1rem;} .ofi-note{flex:none;border-top:1px solid var(--t-line);padding:.625rem 1rem; font-family:var(--t-body);font-size:.6875rem;line-height:1.6;color:var(--t-ash);} /* ══ Quote form ═══════════════════════════════════════════════════════ Genuinely modal, unlike the assistant: it locks page scroll and traps Tab, because a form you can scroll away from mid-entry is worse than one that holds your attention until you finish or dismiss it. ═══════════════════════════════════════════════════════════════════════ */ .tq{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end; justify-content:center;padding:0;} @media(min-width:640px){ .tq{align-items:center;padding:1.5rem;} } .tq-back{position:absolute;inset:0;border:0;cursor:default; background:rgba(5,5,5,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); animation:tq-fade .35s ease both;} @keyframes tq-fade{from{opacity:0;}to{opacity:1;}} .tq-panel{position:relative;display:flex;flex-direction:column; max-height:92vh;width:100%;max-width:34rem;overflow:hidden; border-radius:1.5rem 1.5rem 0 0;border:1px solid var(--t-line2);background:var(--t-ink2); box-shadow:0 40px 120px -40px rgba(0,0,0,.95); animation:ofi-panel .45s var(--t-ease) both;transform-origin:bottom center;} @media(min-width:640px){ .tq-panel{border-radius:1.5rem;} } .tq-head{display:flex;flex:none;align-items:flex-start;justify-content:space-between; gap:1rem;border-bottom:1px solid var(--t-line);padding:1.5rem;} .tq-head h2{font-family:var(--t-disp);font-size:1.375rem;font-weight:500; line-height:1.2;color:var(--t-bone);margin-top:.375rem;} .tq-head p{margin-top:.5rem;font-family:var(--t-body);font-size:.875rem; font-weight:300;line-height:1.7;color:var(--t-silver);} .tq-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.5rem;} .tq-grid{display:grid;gap:1rem;} @media(min-width:640px){ .tq-grid{grid-template-columns:repeat(2,1fr);} .tq-wide{grid-column:1/-1;} } .tq-field label{display:block;margin-bottom:.4375rem;font-family:var(--t-disp); font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-ash);} .tq-field input,.tq-field select,.tq-field textarea{width:100%;border-radius:.625rem; border:1px solid var(--t-line2);background:var(--t-ink);padding:.6875rem .875rem; font-family:var(--t-body);font-size:.875rem;font-weight:300;color:var(--t-bone);} .tq-field textarea{resize:vertical;min-height:5.5rem;} .tq-field input::placeholder,.tq-field textarea::placeholder{color:var(--t-ash);} .tq-field input:focus,.tq-field select:focus,.tq-field textarea:focus{ outline:none;border-color:rgba(212,175,99,.5);} /* Off-screen rather than display:none — a bot reading the DOM sees a normal field, while nobody using the page ever reaches it. */ .tq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .tq-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; width:100%;margin-top:1.25rem;border:0;border-radius:9999px;background:var(--t-gold); padding:.875rem 1.5rem;font-family:var(--t-body);font-size:.9375rem;color:var(--t-ink); transition:opacity .3s;} .tq-submit:hover{opacity:.9;} .tq-submit[disabled]{opacity:.55;cursor:not-allowed;} .tq-msg{margin-top:.875rem;font-family:var(--t-body);font-size:.8125rem;line-height:1.6;} .tq-msg.bad{color:#f0a8a8;} .tq-msg.good{color:var(--t-gold);} .tq-done{padding:3rem 1.5rem;text-align:center;} .tq-done svg{width:3rem;height:3rem;color:var(--t-gold);margin:0 auto 1.25rem;} .tq-done h3{font-family:var(--t-disp);font-size:1.25rem;font-weight:500;color:var(--t-bone);} .tq-done p{margin-top:.625rem;font-family:var(--t-body);font-size:.875rem; font-weight:300;line-height:1.7;color:var(--t-silver);}