Dr. Paolo Menegaz — Lawyer Landing Page
A single-file HTML landing page for Dr. Paolo Franciesco Menegaz (OAB/SC 73.050), a lawyer specializing in Civil and Patrimonial Law. The design breaks from the typical blue law-firm aesthetic — opting for a pure black background with warm gold (#d4af6a) for all CTAs and a red accent (#c0392b) that echoes the tone of the hero photo. The full-viewport hero features a CSS mask-image gradient fade over the professional photo, a typewriter cycling through 4 specialty phrases, and IntersectionObserver-driven scroll reveals. An educational content section embeds 6 YouTube videos using the privacy-first nocookie domain, each paired with in-depth editorial text. Zero dependencies, zero build step — delivered as one self-contained HTML file.
Project metrics
4 key metricsCivil law, patrimonial, contracts, and debt recovery
Educational YouTube embeds on legal strategy and contracts (privacy-first nocookie domain)
Self-contained single HTML file — zero dependencies, zero build step
Hero, About, Practice Areas, Educational Content, and Contact
Problem statement
Build a modern, elevated digital presence for a lawyer that stands apart from generic law-firm templates — dark and editorial, with a frictionless WhatsApp-first CTA and a full educational video section. Delivered as a single HTML file with no build toolchain.
Most lawyer websites rely on a predictable blue/grey aesthetic that blends into the background — the client needed visual differentiation
The CTA flow needed to route directly to WhatsApp without friction, replacing a traditional inquiry form as the primary channel
The hero required a full-viewport editorial photo with clean text overlay — challenging to execute well across breakpoints
Six YouTube videos needed to load efficiently and respect user privacy without a third-party cookie banner
The entire site had to be delivered as a single HTML file without any npm install or build process
Constraints
- Zero external dependencies — no npm, no bundlers, no CSS frameworks
- Single-file delivery — the entire site must be one self-contained .html file
- No backend — contact form uses client-side feedback only
Approach & modules
A single-file HTML landing page with a dark editorial identity: pure black (#000) + warm gold (#d4af6a) for all action elements + red accent (#c0392b) echoing the hero photo. Key interactions — typewriter label, IntersectionObserver reveals, CSS marquee, mobile slide-in nav, phone mask, and custom select dropdown — all written in vanilla JavaScript with no libraries.
Hero & Typewriter
Full-viewport photo with CSS mask-image gradient fade from transparent → solid, typewriter cycling 4 specialty phrases via vanilla JS state machine, scroll-reveal on headline and CTA
CSS Marquee Ticker
Pure CSS continuous marquee (40s linear infinite) looping practice keywords separated by red bullet accents — no JavaScript, no libraries
Scroll Reveal System
IntersectionObserver API drives opacity + translateY reveals across all sections with configurable delay classes (.delay-100 through .delay-400) and reduced-motion support
Contact & Phone Mask
Vanilla JS custom select dropdown (CSS chevron + open/close state), Brazilian phone number mask (00) 00000-0000, form success state with auto-dismiss after 5 seconds
System design
Single-file delivery with no build step or external dependencies. HTML structure, CSS custom properties, and vanilla JavaScript all contained in one document — markup, styles, and behavior co-located for maximum portability.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Map content structure: hero, about, 4 practice areas, 6 educational videos, contact
Define editorial identity: pure black + warm gold (#d4af6a) for CTAs + red (#c0392b) accent echoing the hero photo
Full-viewport photo with CSS mask-image gradient, typewriter cycling 4 specialty phrases, sticky header with scroll detection
About with 3 pillars, 4 practice areas with alternating icon layout, 6 YouTube nocookie embeds with editorial text, contact form
IntersectionObserver scroll reveals, CSS marquee ticker, mobile slide-in nav with overlay, phone mask input, custom select dropdown
Single self-contained .html file — no build step, no dependencies, responsive from 320px to 1440px+
Project journey
Key milestones and phases throughout the project lifecycle.
Content Architecture
Mapped legal practice areas, defined CTA hierarchy (WhatsApp as primary channel), scoped video content integration and section flow
Editorial Identity
Established dark palette with gold action color and red accent, Inter typography, fluid spacing system using clamp() for all font sizes and section padding
Core Layout & Hero
Full-viewport hero with CSS mask-image gradient over professional photo, typewriter state machine cycling 4 phrases, sticky header with scroll-triggered border
Content Sections & Interactions
Practice areas with hover icon animation and red glow, 6 YouTube nocookie embeds with lazy loading, IntersectionObserver scroll reveals, CSS marquee ticker
Mobile & Delivery
Responsive breakpoints (320px–1440px+), slide-in mobile nav with overlay, phone mask input, custom select dropdown, single-file export
Content Architecture
Mapped legal practice areas, defined CTA hierarchy (WhatsApp as primary channel), scoped video content integration and section flow
Editorial Identity
Established dark palette with gold action color and red accent, Inter typography, fluid spacing system using clamp() for all font sizes and section padding
Core Layout & Hero
Full-viewport hero with CSS mask-image gradient over professional photo, typewriter state machine cycling 4 phrases, sticky header with scroll-triggered border
Content Sections & Interactions
Practice areas with hover icon animation and red glow, 6 YouTube nocookie embeds with lazy loading, IntersectionObserver scroll reveals, CSS marquee ticker
Mobile & Delivery
Responsive breakpoints (320px–1440px+), slide-in mobile nav with overlay, phone mask input, custom select dropdown, single-file export
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.