/* ═══════════════════════════════════════════════════════════════════ Steady Hand — additions to lap-final-theme Los Angeles Paralegals · losangelesparalegals.org MUST load AFTER style.css. Several rules here intentionally override the theme (the light-first section rhythm in particular), so loading it first will silently undo the design. Palette (the only values that should appear): Ink #241E1A Paper #FBF6EE Paper raised #FFF9F0 Sand #F1E4D3 Terracotta #B4472C Gold #C9932F Bronze #8A5A33 Rule #E6DACA Body #5C5049 Muted #6E6259 / #8A7B6C Two colours are deliberately NOT in that list and must not be "corrected": Yelp red #FF1A1A and WhatsApp green #25D366 are third-party brand marks. No image paths appear in this file — all imagery is referenced from markup in partials/. If the images go to the Media Library rather than the theme folder, only those partials need editing. ═══════════════════════════════════════════════════════════════════ */ /* ── City Hall band — four-frame crossfade ───────────────────────── Pure CSS, no JS, no library. The stack works bottom-up: b4 is the permanent base, and b1-b3 sit above it fading OUT in turn to reveal what is beneath. That means there is never a frame where nothing is painted, so no flash on load and no gap at the loop point. 36s cycle, 9s per frame, ~1s dissolves. Deliberately slow: this is atmosphere, not a slideshow demanding attention. */ .city-band{ position:relative; margin-top:72px; background:#241E1A; line-height:0; overflow:hidden; height:340px; } .city-band img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 42%; animation:36s linear infinite; } .city-band .b1{ z-index:4; animation-name:band-1; } .city-band .b2{ z-index:3; animation-name:band-2; } .city-band .b3{ z-index:2; animation-name:band-3; } .city-band .b4{ z-index:1; animation:none; opacity:1; } @keyframes band-1{ 0%,22%{opacity:1} 25%,97%{opacity:0} 100%{opacity:1} } @keyframes band-2{ 0%,47%{opacity:1} 50%,97%{opacity:0} 100%{opacity:1} } @keyframes band-3{ 0%,72%{opacity:1} 75%,97%{opacity:0} 100%{opacity:1} } /* Anyone who has asked their system to reduce motion gets a single still frame rather than a paused blank. */ @media(prefers-reduced-motion:reduce){ .city-band img{ animation:none; } .city-band .b1{ opacity:1; } .city-band .b2,.city-band .b3{ opacity:0; } } @media(max-width:980px){ .city-band{ height:210px; } } @media(max-width:520px){ .city-band{ height:180px; } } /* ── pleading rail — sand, numbered ──────────────────────────────── Sand #E3CFAE rather than gold: gold sits too close to terracotta on the closing band, where warm-on-warm narrows the contrast. Sand holds against ink, paper and terracotta alike. Numerals restart at 28, the way California pleading paper does — that repetition is what makes it read as legal paper rather than a ruler. The rail sits in the outer margin, beneath the fixed nav. */ body{ position:relative; } #rail{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:6; overflow:hidden; color:#E3CFAE; } #rail .rule{ position:absolute; top:0; bottom:0; width:2px; background:currentColor; } #rail .rule.r1{ left:4.15%; opacity:.82; } #rail .rule.r2{ left:4.95%; opacity:.50; } #rail .rule.r3{ left:95.4%; opacity:.34; } #rail .num{ position:absolute; left:0; width:3.5%; text-align:right; padding-right:14px; font-family:'Playfair Display',Georgia,serif; font-size:.78rem; line-height:1; opacity:.72; color:currentColor; } /* Below 980px the numerals cost width a phone cannot spare, so the rail thins to two hairlines hugging the edge at no cost to content. */ @media(max-width:980px){ #rail .rule{ width:1px; } #rail .rule.r1{ left:10px; opacity:.58; } #rail .rule.r2{ left:15px; opacity:.34; } #rail .rule.r3{ display:none; } #rail .num{ display:none; } } /* ═══════════════════════════════════════════════════════════════════ LIGHT-FIRST — Steady Hand section rhythm The live theme painted eight surfaces navy, so remapping navy to ink produced a page that was mostly black. Steady Hand is cream carrying ONE black band and ONE red band. This sheet restores that rhythm. header cream services white band cream process BLACK ← the one dark band hero cream pricing cream trust bar RED testimonials white faq cream contact RED ← the closing band footer black ═══════════════════════════════════════════════════════════════════ */ /* ── header: cream ──────────────────────────────────────────────── The logotype must go ink here. White Pacifico on cream is invisible; this is the one place the approved lockup has to adapt. */ #site-nav{ background:#FBF6EE !important; border-bottom:1px solid #E6DACA; box-shadow:0 1px 0 rgba(36,30,26,.04), 0 4px 18px rgba(36,30,26,.05); } .site-logo .logo-name{ color:#241E1A; } .site-logo .logo-name span{ color:#8A5A33; } .nav-menu a{ color:#241E1A; } .nav-menu a:hover{ color:#B4472C; } .nav-menu .nav-cta{ background:#B4472C; color:#FFF7EE !important; white-space:nowrap; flex-shrink:0; } .nav-menu .nav-cta:hover{ background:#8A5A33; color:#FFF7EE !important; } .nav-toggle span{ background:#241E1A; } .nav-menu.open{ background:#FBF6EE !important; border-bottom:1px solid #E6DACA; } .nav-menu.open a{ color:var(--navy) !important; } .nav-menu.open a:hover{ color:var(--brass-deep) !important; } /* ── band: cream, frames fade to #FBF6EE at both edges ───────────── */ .city-band{ background:#FBF6EE; } /* ── hero: cream ─────────────────────────────────────────────────── */ #hero{ background:#FBF6EE !important; padding-top:44px; } #hero h1, #hero .section-title{ color:#241E1A; } .hero-tag{ background:rgba(180,71,44,.09); border:1px solid rgba(180,71,44,.26); color:#8A5A33; } .hero-tag::before{ background:#B4472C; } .hero-sub{ color:#5C5049; } .hero-card{ background:#FFF9F0; border:1px solid #E6DACA; backdrop-filter:none; box-shadow:0 10px 34px rgba(36,30,26,.06); } .hero-card-title{ color:#241E1A; border-bottom-color:#E6DACA; } .stat-num{ color:#B4472C; } .stat-desc strong{ color:#241E1A; } .stat-desc span{ color:#8A7B6C; } /* ── trust bar: the first red ────────────────────────────────────── */ .trust-item{ color:#FFF7EE; border-right-color:rgba(255,247,238,.24); } .trust-item svg{ fill:#FFF7EE; } /* ── services: white, sand card heads ────────────────────────────── */ .service-card-top{ background:#F1E4D3; } .service-card-top h3{ color:#241E1A; } .service-card-top::after{ background:rgba(180,71,44,.10); } .service-icon-wrap svg{ fill:#8A5A33; } /* ── process: the one black band, kept ───────────────────────────── */ .step-circle{ border-color:#B4472C; } /* ── pricing panel ───────────────────────────────────────────────── */ .price-panel-header{ background:#B4472C; } .price-panel-header h3{ color:#FFF7EE; } .price-panel-header p{ color:rgba(255,247,238,.80); } /* ── contact: red closing band, was black ────────────────────────── */ #contact{ background:#B4472C !important; } #contact .section-title{ color:#FFF7EE; } #contact .section-lead{ color:rgba(255,247,238,.76); } #contact .eyebrow{ color:#F1E4D3; } #contact .eyebrow::before{ background:#F1E4D3; } .contact-info-icon{ background:rgba(255,247,238,.14); border:1px solid rgba(255,247,238,.30); } .contact-info-icon svg{ fill:#FFF7EE; } .contact-info-text strong{ color:#FFF7EE; } .contact-info-text span{ color:rgba(255,247,238,.70); } /* ── rail: sand holds on cream, ink and red alike ────────────────── */ #rail{ color:#B49A78; } #rail .rule.r1{ opacity:.55; } #rail .rule.r2{ opacity:.34; } #rail .rule.r3{ opacity:.24; } #rail .num{ opacity:.55; } /* ══ service card photos ═══════════════════════════════════════════ Sources are 150x150 and 425x282, so 72px display is a downscale for all three and they stay sharp. Anything larger would upscale the two 150px files and go soft. */ .service-icon-wrap{ width:72px; height:72px; padding:0; border-radius:10px; overflow:hidden; border:1px solid rgba(36,30,26,.12); background:#FFF9F0; box-shadow:0 4px 14px rgba(36,30,26,.10); display:block; } .service-icon-wrap img{ display:block; width:100%; height:100%; object-fit:cover; } /* ══ band: 3s a frame ══════════════════════════════════════════════ 12s round trip across four frames. Dissolves widened to 5% (~0.6s) so the faster cadence still reads as a fade rather than a cut. */ .city-band img{ animation-duration:12s; } @keyframes band-1{ 0%,20%{opacity:1} 25%,95%{opacity:0} 100%{opacity:1} } @keyframes band-2{ 0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1} } @keyframes band-3{ 0%,70%{opacity:1} 75%,95%{opacity:0} 100%{opacity:1} } /* ══ footer ════════════════════════════════════════════════════════