\documentclass[11pt, a4paper]{article}

% --- UNIVERSAL PREAMBLE BLOCK ---
\usepackage[a4paper, top=2.5cm, bottom=2.5cm, left=2.5cm, right=2.5cm]{geometry}
\usepackage{fontspec}

\usepackage[english, bidi=basic, provide=*]{babel}

\babelprovide[import, onchar=ids fonts]{english}

% Set default/Latin font to Sans Serif in the main (rm) slot
\babelfont{rm}{Noto Sans}

% Color and styling packages
\usepackage{xcolor}
\usepackage{enumitem}
\usepackage{titlesec}
\usepackage{parskip}

% Define Umu Caffè Brand Colors
\definecolor{umubg}{HTML}{FAF6F0}       % Soft Crema (Page Background)
\definecolor{umuclay}{HTML}{E8DED1}     % Rich Oat/Latte (Clay Elements)
\definecolor{umufg}{HTML}{2B1C17}       % Deep Espresso (Text/Dark Elements)
\definecolor{umuaccent}{HTML}{A64B2A}   % Burnt Terracotta

% Custom section formatting
\titleformat{\section}
  {\Large\bfseries\color{umuaccent}}
  {\thesection}{1em}{}[{\color{umuclay}\titlerule[1pt]}]
\titleformat{\subsection}
  {\large\bfseries\color{umufg}}
  {\thesubsection}{1em}{}

% Adjust spacing
\setlength{\parindent}{0pt}
\setlength{\parskip}{0.8em}
\setlist{nosep}
\setlist[itemize]{itemsep=0.5em, topsep=0.5em}

\begin{document}

% Apply Brand Colors to Page and Text
\pagecolor{umubg}
\color{umufg}

% --- TITLE PAGE ---
\begin{titlepage}
    \centering
    \vspace*{4cm}
    
    {\Huge \bfseries \textcolor{umuaccent}{Umu Caffè} }\\[1cm]
    {\LARGE Digital Experience \& Architecture Report}\\[0.5cm]
    {\large A Technical Breakdown of a Premium Standard Web Application}\\[3cm]
    
    {\large \textbf{Prepared for:}}\\[0.2cm]
    {\large The Umu Caffè Team}\\[2cm]
    
    {\large \textbf{Created by:}}\\[0.2cm]
    {\large ROCK \& BLU LTD}\\[2cm]
    
    \vfill
    
    {\large March 2026}\\[1cm]
\end{titlepage}

% --- MAIN CONTENT ---

% --- SECTION 1 ---
\section{Executive Summary}
The Umu Caffè website is a meticulously crafted digital experience engineered to position the brand not just as a coffee shop, but as a premium sanctuary of aspiration and craft. Moving away from standard, template-based hospitality designs, this platform acts as a bespoke digital flagship. It employs hardware-accelerated typography animations, buttery smooth scrolling, and a carefully curated tactile aesthetic to captivate users and translate physical warmth into a digital interface.

% --- SECTION 2 ---
\section{The ``Premium Standard'' Aesthetic}
The website achieves its luxurious feel through a strict adherence to modern design principles, utilizing custom CSS techniques and a highly controlled, organic color palette.

\begin{itemize}[label=\textcolor{umuaccent}{\textbullet}]
    \item \textbf{Tactile Claymorphism:} The platform utilizes advanced CSS box-shadow layering to create ``Claymorphism.'' Elements like the menu cards and navigation buttons appear as soft, extruded physical objects floating above the page. This provides a soft, organic 3D feel that contrasts beautifully with stark, flat modern web design.
    \item \textbf{Curated Organic Palette:} The design relies on a deeply resonant palette: Soft Crema (\#FAF6F0) for the canvas, Rich Oat (\#E8DED1) for the clay elements, Deep Espresso (\#2B1C17) for high-contrast typography, and a Burnt Terracotta (\#A64B2A) accent to guide the user's eye.
    \item \textbf{Ambient Depth \& Texture:} To prevent the site from feeling sterile, a subtle SVG noise texture is overlaid globally at 4\% opacity. Beneath the content, large, blurred geometric blobs float in an infinite CSS animation loop, creating an ambient, breathing background that adds immense perceived depth.
    \item \textbf{Custom Intelligent Cursor:} On desktop devices, the native cursor is replaced by a dual-element custom follower (a terracotta dot and a reactive outer ring) that smoothly interpolates its position using JavaScript math. It reacts intelligently to hover states, inverting colors to highlight interactive elements.
\end{itemize}

% --- SECTION 3 ---
\section{Core Architectural Features}
The site relies on a highly optimized, custom vanilla technology stack (HTML5, Tailwind CSS, JavaScript), intentionally avoiding bulky frontend frameworks to ensure lightning-fast load times while delivering complex visual behavior.

\subsection{Cinematic Preloader \& Hero Sequence}
Before the main site renders, users are greeted by a moody, absolute-black loading sequence. A precise percentage counter ticks to 100\%, followed by a sophisticated GSAP-powered curved wipe animation (utilizing \texttt{border-radius} manipulation). This seamlessly reveals the Umu logo and triggers a synchronized, staggered ``split-text'' reveal of the hero typography.

\subsection{Fluid Smooth Scrolling (Lenis Integration)}
To guarantee the animations feel premium, the native browser scroll is hijacked and replaced with \textbf{Lenis Smooth Scroll}. This provides a buttery, momentum-based scrolling experience that perfectly complements the soft visual aesthetic, ensuring GSAP \texttt{ScrollTrigger} animations fire flawlessly without jitter.

\subsection{Interleaved Visual Galleries}
The menu section features custom-built horizontal scrolling galleries. To ensure a premium feel, these tracks bypass standard scrollbars in favor of a custom JavaScript-driven ``grab and drag'' physics engine. Images lazy-load beautifully, utilizing custom skeleton-loader gradients to prevent layout shifts and maintain the illusion of speed even on slower connections.

% --- SECTION 4 ---
\section{Infrastructure, UX \& Responsiveness}
A premium frontend experience requires robust UX logic and flawless responsiveness across all viewports.

\begin{itemize}[label=\textcolor{umuaccent}{\textbullet}]
    \item \textbf{Intelligent Touch Detection:} Using modern CSS media queries (\texttt{@media (hover: none) and (pointer: coarse)}) and native JS touch APIs, the site accurately detects mobile and tablet devices. It automatically disables the custom cursor and complex hover states on touch screens, preserving battery life and preventing ``sticky'' mobile hover bugs.
    \item \textbf{Sticky Architecture:} The desktop experience utilizes \texttt{position: sticky} to keep menu category navigation in view as users scroll through the extensive offerings, drastically reducing friction and cognitive load.
    \item \textbf{High-Fidelity Modals:} Clicking any gallery image halts the Lenis smooth scroll and triggers a frosted-glass (\texttt{backdrop-filter}) modal overlay, presenting high-resolution imagery in an elegant, distraction-free environment.
\end{itemize}

% --- SECTION 5 ---
\section{Project Effort \& Timeline Breakdown}
Creating a digital experience of this caliber requires specialized expertise in frontend physics, typography choreography, and UI/UX psychology. Below is an estimated breakdown of the time and effort required to architect this platform from scratch:

\begin{enumerate}[label=\textcolor{umuaccent}{\textbf{\arabic*.}}]
    \item \textbf{UX/UI Concepting \& Asset Preparation (10 Hours)}
    \begin{itemize}[label=\textcolor{umufg}{\textbullet}]
        \item Palette selection, typography pairing (Cormorant Garamond \& Inter), and mobile-first wireframing.
        \item Designing the Claymorphism CSS variables and depth hierarchies.
    \end{itemize}
    
    \item \textbf{Core Architecture \& Responsive Layout (15 Hours)}
    \begin{itemize}[label=\textcolor{umufg}{\textbullet}]
        \item Building the HTML structure, Tailwind grid layouts, and the sticky navigation logic.
        \item Structuring the complex, multi-tiered menu architecture.
    \end{itemize}
    
    \item \textbf{GSAP Animation \& Smooth Scrolling (15 Hours)}
    \begin{itemize}[label=\textcolor{umufg}{\textbullet}]
        \item Integrating Lenis smooth scroll and syncing it with GSAP's ticker.
        \item Scripting the preloader sequence, split-text typography reveals, and scroll-triggered fade-ups.
    \end{itemize}
    
    \item \textbf{Interactive Components \& Physics (10 Hours)}
    \begin{itemize}[label=\textcolor{umufg}{\textbullet}]
        \item Engineering the custom magnetic cursor logic.
        \item Building the draggable gallery tracks and the frosted-glass modal overlay systems.
    \end{itemize}
    
    \item \textbf{Optimization, QA Polish \& Deployment (10 Hours)}
    \begin{itemize}[label=\textcolor{umufg}{\textbullet}]
        \item Implementing touch-device detection to disable heavy interactions on mobile.
        \item Ensuring 60fps performance across devices and cross-browser testing.
    \end{itemize}
\end{enumerate}

\vspace{0.5cm}
\textbf{Total Estimated Effort: $\sim$60 Working Hours (1.5 Weeks)}

% --- SECTION 6 ---
\section{About the Creators}
This report and the underlying digital experience were crafted by \textbf{ROCK \& BLU LTD}. We specialize in architecting resilient software and fluid digital experiences. Our focus is on delivering robust, visually stunning, and highly performant solutions tailored for modern, ambitious brands.

% --- SECTION 7 ---
\section{Conclusion}
The Umu Caffè website is a meticulously hand-crafted digital product. By leveraging native browser APIs, GSAP physics, and a strictly controlled, soft-contrast visual design, the site establishes immediate authority. The intense focus put into micro-interactions, fluid typography, and intelligent mobile detection guarantees that the website serves as a true digital sanctuary, perfectly mirroring the exceptional quality of Umu Caffè's physical offerings.

\end{document}