/* ========================================================================= TLA — Web design & AI automation studio Buttermax-scale replication, re-skinned in TLA's deep blue-black system. Palette: saturated blue + blue-black + off-white (NO cream/muted; blue is the only accent). Type: Fraunces (display/script) × Space Grotesk (grotesk). PART 1 of 2 — tokens, globals, preloader, cursor, nav, dots. (Section layouts live in sections.css.) ========================================================================= */ :root { /* One deep saturated blue, blended into blue-black, used like Buttermax's yellow. */ --blue: #2246d6; /* primary saturated blue */ --blue-deep: #0d1c54; /* deep navy for hovers/edges */ --blue-bright: #6f8dff; /* bright accent for text on dark */ --black: #06070d; /* blue-black, not pure #000 */ --off: #f2efe8; /* off-white (used sparingly, one light section) */ /* Legacy aliases redefined onto the blue system so no warm hue can survive. */ --brand: var(--blue); --brand-deep: var(--blue-deep); --paper: var(--off); --ink: var(--black); --ink-soft: #5b5b5b; --oxblood: var(--blue-bright); --oxblood-2: var(--blue-bright); /* Per-row work-grid blob family — blue family, still loud. */ --clay: #3f6bff; --plum: #12235f; --olive: #4f7bff; /* Deep-blue radial gradients — dark scene backdrop + panel backdrop. */ --grad-dark: radial-gradient(135% 115% at 70% 30%, #274aa0 0%, #16265f 28%, #0a1231 52%, #06070d 84%); --grad-panel: radial-gradient(120% 130% at 22% 18%, #1b2e73 0%, #101d4c 34%, #080c1e 66%, #06070d 100%); /* Subtle fractal-noise overlay for the hero gradient. */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --edge: rgba(10, 10, 10, 0.16); --edge-light: rgba(120, 150, 255, 0.20); --display: "Fraunces", Georgia, serif; --grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --gutter: clamp(1.25rem, 4vw, 4.5rem); --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--ink); color: var(--ink); font-family: var(--grotesk); font-size: 16px; line-height: 1.5; /* `clip` (not `hidden`) stops horizontal scroll WITHOUT forcing overflow-y to `auto` — `hidden` would make the scroll container and break Lenis (which drives window/). Keeps the document as the scroller. */ overflow-x: clip; } /* ========================================================================= LENIS SMOOTH SCROLL — applied to the document by main.js. These are the library's required base styles (self-hosted vendor build, v1.1.14). ========================================================================= */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* Hide the OS cursor everywhere; the goo blob replaces it. Pointer devices only. */ @media (hover: hover) and (pointer: fine) { body, a, button, [data-hover] { cursor: none; } } em { font-style: italic; } a { color: inherit; text-decoration: none; } ::selection { background: var(--oxblood); color: var(--paper); } /* ========================================================================= PRELOADER ========================================================================= */ .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--black); /* solid black, per spec §3 */ } .preloader__stage { position: absolute; width: min(60vw, 460px); height: auto; } .preloader__mark { position: relative; font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 12vw, 8rem); letter-spacing: -0.04em; color: var(--off); opacity: 0; transform: translateY(0.3em); } .preloader__count { position: absolute; bottom: var(--gutter); right: var(--gutter); font-family: var(--grotesk); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--brand); } .preloader__count::after { content: "%"; opacity: 0.6; } /* ========================================================================= CURSOR — 4-shape metaball (spec §5). Four blobs lag on independent lerp easings and are fused into one organic shape by #cursor-goo. The filter is applied to a SMALL (400px) box that FOLLOWS the cursor — filtering the whole viewport freezes the renderer, so the goo box is deliberately bounded. The layer is difference-blended, so the white blobs invert against whatever's beneath and the black label "punches through". Over a project card it swells and reveals "View". JS (initCursor) drives all transforms via a rAF lerp. ========================================================================= */ .cursor { position: fixed; inset: 0; pointer-events: none; z-index: 90; mix-blend-mode: difference; opacity: 0; /* shown on first mouse move by initCursor */ transition: opacity 0.3s var(--ease); } /* small goo box that tracks the cursor (JS sets transform: translate(x,y)); margins center it on that translate point. Bounded so the filter is cheap. */ .cursor__metaballs { position: fixed; top: 0; left: 0; width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; filter: url(#cursor-goo); will-change: transform; } /* blobs live inside the goo box; margins center each on its translate point, JS positions them in box-local coords via transform: translate(). */ .cursor__blob { position: absolute; top: 0; left: 0; border-radius: 50%; background: var(--off); /* CSS `scale` is independent of the JS transform (translate), so they compose */ scale: 1; transition: scale 0.4s var(--ease); will-change: transform; } .cursor__blob--1 { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .cursor__blob--2 { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .cursor__blob--3 { width: 24px; height: 24px; margin: -12px 0 0 -12px; } .cursor__blob--4 { width: 18px; height: 18px; margin: -9px 0 0 -9px; } /* scale-up over any clickable element */ .cursor.is-hover .cursor__blob { scale: 2; } /* over a project card: coalesce into one bigger disc for the label */ .cursor.is-view .cursor__blob { scale: 2.9; } .cursor.is-view .cursor__blob--2, .cursor.is-view .cursor__blob--3, .cursor.is-view .cursor__blob--4 { scale: 2.4; /* pull the trailing blobs in tight so it reads as one shape */ } /* the "View" label — JS owns the wrapper's translate (follows the cursor); the inner span owns centering + the reveal (scale/opacity), so they never fight. It sits OUTSIDE the goo box, so it stays crisp. */ .cursor__label { position: fixed; top: 0; left: 0; will-change: transform; } .cursor__label span { display: block; transform: translate(-50%, -50%) scale(0.6); font-family: var(--grotesk); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #000; /* under difference blend this punches through to the backdrop */ opacity: 0; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); } .cursor.is-view .cursor__label span { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ========================================================================= NAV ========================================================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 2.5vw, 1.6rem) var(--gutter); mix-blend-mode: difference; color: var(--paper); } .nav__logo { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; } .nav__logo-dot { color: var(--oxblood-2); } .nav__links { display: flex; gap: 0.5rem; align-items: center; } .pill { font-family: var(--grotesk); font-size: 0.82rem; letter-spacing: 0.01em; padding: 0.5em 1.1em; border: 1px solid currentColor; border-radius: 999px; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .pill:hover { transform: translateY(-2px); } .pill--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); } .pill--ghost { border-color: var(--ink); color: var(--ink); mix-blend-mode: normal; } .pill--ghost:hover { background: var(--ink); color: var(--paper); } @media (max-width: 620px) { .nav__links .pill:not(.pill--solid) { display: none; } } /* ========================================================================= SCROLL PROGRESS DOTS ========================================================================= */ .dots { position: fixed; right: clamp(0.9rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 0.9rem; mix-blend-mode: difference; } .dots__dot { width: 22px; height: 22px; display: grid; place-items: center; position: relative; } .dots__dot span { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--paper); transition: all 0.4s var(--ease); } .dots__dot.is-active span { background: var(--paper); transform: scale(1.4); } .dots__dot::after { content: attr(data-label); position: absolute; right: 150%; top: 50%; transform: translateY(-50%) translateX(6px); font-family: var(--grotesk); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); white-space: nowrap; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } .dots__dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 620px) { .dots { display: none; } } /* ========================================================================= 3D TILT — perspective on the frame, rotateX/Y on the inner (set by GSAP). Global (used by the hero graphic and every work thumbnail). ========================================================================= */ .tilt { perspective: 800px; } .tilt__inner { transform-style: preserve-3d; will-change: transform; transition: transform 0.4s var(--ease); /* smooths the settle if JS is off */ } /* ========================================================================= REVEAL STATE (JS-driven) + REDUCED MOTION + FOCUS ========================================================================= */ [data-reveal] { opacity: 0; transform: translateY(24px); } .is-ready [data-reveal] { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .tilt__inner { transform: none !important; } .cursor { display: none; } @media (hover: hover) and (pointer: fine) { body, a, [data-hover] { cursor: auto; } } } /* Visible keyboard focus */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .section[data-theme="ink"] :focus-visible, .section[data-theme="brand"] :focus-visible, .section[data-theme="oxblood"] :focus-visible { outline-color: var(--off); }