/* ========================================================================== True Path Injury Law — homepage Design direction: "Editorial Advocacy" · Navy is the canvas. Gold is the accent, used like foil-stamping. Red is reserved for action only — never decoration. · Newsreader (editorial serif) for voice, Instrument Sans for interface. · One 4px-based spacing scale. No eyeballed numbers. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root{ /* Brand — taken from the firm's logo */ --navy-900:#00152A; --navy-800:#001C38; --navy:#002549; --navy-700:#00335F; --navy-600:#0B4478; --red:#D00E19; --red-400:#E8323C; --red-600:#B00C15; --red-700:#8E0A11; --gold:#DDA92E; --gold-300:#F2D089; --gold-400:#EBBE57; --gold-600:#BE8C1D; /* Neutrals — warm, so the navy reads richer than on a cold grey */ --cream:#FAF7F2; --cream-200:#F1ECE3; --paper:#FFFFFF; --ink:#0F1A27; --body:#4E5866; /* Long-form reading only. --body is tuned for UI text and short blocks; over 1,800 words of serif it reads washed out, so articles use this. 9.2:1 on cream, against 6.8:1 for --body. */ --body-strong:#3A4452; --muted:#7A8494; --hairline:rgba(0,37,73,.10); --hairline-light:rgba(255,255,255,.14); /* Gradients — depth, never decoration for its own sake */ --grad-navy:linear-gradient(158deg,#00335F 0%,#002549 42%,#00152A 100%); --grad-navy-soft:linear-gradient(180deg,#002549 0%,#001C38 100%); --grad-red:linear-gradient(135deg,#E8323C 0%,#D00E19 46%,#A80B14 100%); --grad-gold:linear-gradient(135deg,#F2D089 0%,#DDA92E 48%,#BE8C1D 100%); --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#FAF7F2 55%,#F1ECE3 100%); --rule-gold:linear-gradient(90deg,var(--gold),rgba(221,169,46,0)); /* Type */ --serif:'Newsreader', Georgia, 'Times New Roman', serif; --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-display:clamp(2.6rem,1.55rem + 4.1vw,4.6rem); --fs-h2:clamp(2rem,1.45rem + 2.2vw,3.1rem); --fs-h3:clamp(1.3rem,1.18rem + .5vw,1.6rem); --fs-h4:1.15rem; --fs-lead:clamp(1.05rem,1rem + .3vw,1.25rem); --fs-body:1.0625rem; /* 17px — the original 15px was too tight to read */ --fs-sm:.9375rem; --fs-xs:.8125rem; /* Spacing — 4px base, used everywhere */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:2.5rem; --s8:3rem; --s9:4rem; --s10:5rem; --s11:6.5rem; --s12:8rem; --section-y:clamp(4.5rem,3rem + 6vw,8rem); --container:1300px; --gutter:clamp(1.25rem,4vw,2.5rem); --radius:14px; --radius-lg:22px; --radius-pill:100px; --shadow-sm:0 2px 8px rgba(0,21,42,.06); --shadow-md:0 12px 32px -12px rgba(0,21,42,.18); --shadow-lg:0 32px 70px -28px rgba(0,21,42,.42); --shadow-glow:0 18px 44px -20px rgba(208,14,25,.55); --ease:cubic-bezier(.22,.68,.36,1); --header-h:76px; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* An author `display` (e.g. the modal's grid) beats the UA stylesheet's [hidden]{display:none}, which leaves invisible overlays eating clicks. */ [hidden]{display:none !important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--cream); color:var(--body); font-family:var(--sans); font-size:var(--fs-body); line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} figure{margin:0} dl,dd{margin:0} h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:0; text-wrap:balance; } h1 em,h2 em,h3 em{font-style:italic;font-weight:500} p{margin:0 0 var(--s4)} p:last-child{margin-bottom:0} ::selection{background:var(--gold);color:var(--navy-900)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y);position:relative} .skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;padding:var(--s3) var(--s5)} .skip-link:focus{left:0} /* -------------------------------------------------------------------------- 3. SHARED PIECES -------------------------------------------------------------------------- */ /* Eyebrow — the small-caps label that opens every section */ .eyebrow{ font-family:var(--sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 var(--s4); display:flex;align-items:center;gap:var(--s3); } .eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--rule-gold)} .section-head--center .eyebrow, .cta .eyebrow{justify-content:center} .section-head--center .eyebrow::before, .cta .eyebrow::before{content:"";flex:0 0 44px;height:1px;background:linear-gradient(270deg,var(--gold),rgba(221,169,46,0))} .eyebrow--gold{color:var(--gold)} .eyebrow--red{color:var(--red)} .eyebrow--navy{color:var(--navy)} .eyebrow--navy::after,.eyebrow--navy::before{background-image:linear-gradient(90deg,var(--navy),rgba(0,37,73,0))} .section-head{max-width:56ch;margin-bottom:var(--s9)} .section-head--center{margin-inline:auto;text-align:center} .section-title{font-size:var(--fs-h2);margin-bottom:var(--s4)} .section-lead{font-size:var(--fs-lead);color:var(--muted);margin:0} .lead{font-size:var(--fs-lead)} /* Buttons — flat brand fills. Depth comes from a restrained shadow and the hover shift, not from a gradient inside the pill. */ .btn{ --btn-bg:var(--red); --btn-bg-hover:var(--red-600); display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1; padding:var(--s4) var(--s6); border:0;border-radius:var(--radius-pill); background:var(--btn-bg); color:#fff; cursor:pointer; transition:transform .24s var(--ease), background-color .24s var(--ease), box-shadow .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease); } .btn:hover{background:var(--btn-bg-hover);transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn__arrow{transition:transform .24s var(--ease)} .btn:hover .btn__arrow{transform:translateX(4px)} .btn__ic{width:17px;height:17px;flex:0 0 17px} .btn--red{box-shadow:0 6px 18px -8px rgba(208,14,25,.5)} .btn--red:hover{box-shadow:0 10px 24px -10px rgba(208,14,25,.55)} .btn--gold{ --btn-bg:var(--gold);--btn-bg-hover:var(--gold-600); color:var(--navy-900); box-shadow:0 6px 18px -8px rgba(221,169,46,.55); } .btn--gold:hover{color:var(--navy-900)} .btn--ghost{ --btn-bg:transparent;--btn-bg-hover:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45); color:#fff; } .btn--ghost:hover{border-color:rgba(255,255,255,.75)} .btn--ghost-dark{ --btn-bg:transparent;--btn-bg-hover:var(--navy); border:1px solid var(--hairline); color:var(--navy); } .btn--ghost-dark:hover{color:#fff;border-color:var(--navy)} .btn--sm{padding:var(--s3) var(--s5);font-size:var(--fs-sm)} .btn--block{display:flex;width:100%} /* Reveal on scroll. Gated behind .js-reveal (set by JS) so content is never invisible if the script fails, is blocked, or the browser lacks IntersectionObserver. */ .js-reveal .reveal{ opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s); } .js-reveal .reveal.is-in{opacity:1;transform:none} /* Video embeds */ .video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy-900)} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* -------------------------------------------------------------------------- 4. HEADER -------------------------------------------------------------------------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:900; /* Frosted glass in the logo's own navy (#002549) rather than a near-black — it sits warmer against the footage. Deepens once past the hero. */ background:rgba(0,37,73,.55); backdrop-filter:blur(18px) saturate(100%); -webkit-backdrop-filter:blur(18px) saturate(100%); border-bottom:1px solid rgba(255,255,255,.1); transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease); } @supports not (backdrop-filter:blur(1px)){ .site-header{background:rgba(0,37,73,.9)} } .site-header::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,rgba(221,169,46,0),rgba(221,169,46,.55),rgba(221,169,46,0)); opacity:0;transition:opacity .4s var(--ease); } .site-header.is-scrolled{ background:rgba(0,37,73,.92); backdrop-filter:blur(18px) saturate(120%); box-shadow:0 10px 36px -16px rgba(0,21,42,.6); } .site-header.is-scrolled::after{opacity:1} .header-inner{ max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter); min-height:var(--header-h); display:flex;align-items:center;gap:var(--s7); } /* The tinted bar does most of the work; a hairline shadow covers the brightest frames of the video behind it. */ .site-header:not(.is-scrolled) .nav__link, .site-header:not(.is-scrolled) .lang__opt, .site-header:not(.is-scrolled) .brand__name, .site-header:not(.is-scrolled) .brand__sub{ text-shadow:0 1px 3px rgba(0,21,42,.45); } .brand{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto} .brand__mark{width:40px;height:auto} .brand__mark--dark{display:none} /* kept for a light-header variant */ .brand__word{display:flex;flex-direction:column;line-height:1} .brand__name{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:#fff;letter-spacing:-.01em} .brand__sub{font-size:.625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px} /* Desktop nav */ .nav{flex:1 1 auto} .nav__list{display:flex;align-items:center;gap:var(--s6)} /* the dropdown cards anchor to their own item, not the whole header */ .nav__item{position:relative} .nav__link{ position:relative; display:inline-flex;align-items:center;gap:var(--s2); font-family:var(--sans);font-size:var(--fs-sm);font-weight:500; color:rgba(255,255,255,.9); background:none;border:0;padding:var(--s6) 0;cursor:pointer; transition:color .25s var(--ease); } .nav__link::after{ content:"";position:absolute;left:0;right:0;bottom:calc(var(--s6) - 10px);height:2px; background:var(--gold);border-radius:2px; transform:scaleX(0);transform-origin:left; transition:transform .32s var(--ease); } .nav__link:hover,.nav__item.is-open .nav__link{color:#fff} .nav__link:hover::after,.nav__item.is-open .nav__link::after{transform:scaleX(1)} .nav__caret{ width:0;height:0; border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4.5px solid currentColor; opacity:.65;transition:transform .28s var(--ease); } .nav__item.is-open .nav__caret{transform:rotate(180deg)} /* Mega panels — floating cards anchored under their nav item, centred on it so they stay clear of both viewport edges at any nav position. */ .mega{ position:absolute;top:calc(100% + 10px);left:0; max-width:calc(100vw - 32px); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:0 28px 64px -22px rgba(0,21,42,.42),0 2px 8px rgba(0,21,42,.07); animation:megaIn .28s var(--ease) both; } /* keeps the hover chain alive across the gap between item and card */ .mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* `left` is set in JS — centred on the nav item, then clamped to the viewport. Only translateY is animated so it can't fight that positioning. */ @keyframes megaIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } /* Width is set in JS — all three share the header's logo→CTA shelf. */ .mega__inner{padding:var(--s5);display:grid;gap:var(--s3)} .mega__inner--team{grid-template-columns:repeat(2,1fr);gap:var(--s5)} .mega__inner--practice{grid-template-columns:repeat(3,1fr);gap:var(--s2) var(--s4)} .mega__inner--blog{grid-template-columns:repeat(2,1fr);gap:var(--s4)} /* Four short links do not need the full header width the practice-area panel spans. 500px is the point where the longest description, "La ley de lesiones, explicada", still sits on one line in a two-up grid. */ .mega--narrow{width:min(500px,calc(100vw - 32px))} /* Team cards in the mega menu */ .team-card{ display:flex;gap:var(--s4);align-items:stretch; background:var(--cream);border:1px solid var(--hairline); border-radius:var(--radius);padding:var(--s3); transition:box-shadow .3s var(--ease); } .team-card:hover{box-shadow:var(--shadow-md)} .team-card__photo{ flex:0 0 180px;min-height:222px;border-radius:10px; background:var(--cream-200) center/cover no-repeat; } .team-card__photo--giselle{background-image:url('../img/team/giselle.png')} .team-card__photo--robert{background-image:url('../img/team/robert.webp')} .team-card__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--s2) var(--s3) var(--s2) 0} .team-card__body .eyebrow{margin-bottom:var(--s2);font-size:.6875rem} .team-card__body .eyebrow::after{flex-basis:26px} .team-card__name{font-size:1.4rem;margin-bottom:var(--s3)} .team-card__text{font-size:var(--fs-sm);color:var(--body);margin-bottom:var(--s4)} /* Practice mini rows */ .pa-mini{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3);border-radius:var(--radius);transition:background .25s var(--ease)} .pa-mini:hover{background:var(--cream)} .pa-mini__icon{ flex:0 0 78px;height:78px;border-radius:18px; background:var(--cream);border:1px solid var(--hairline); display:grid;place-items:center; transition:background .25s var(--ease),border-color .25s var(--ease); } .pa-mini:hover .pa-mini__icon{background:var(--paper);border-color:rgba(221,169,46,.5)} .pa-mini__icon img{width:64px;height:64px;object-fit:contain} .pa-mini__title{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:3px} .pa-mini__text{display:block;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)} .blog-link{display:flex;flex-direction:column;gap:2px;padding:var(--s4);border-radius:var(--radius);transition:background .25s var(--ease)} .blog-link:hover{background:var(--cream)} .blog-link__title{font-family:var(--serif);font-size:1.0625rem;font-weight:600;color:var(--ink)} .blog-link__meta{font-size:var(--fs-xs);color:var(--muted)} /* Header right */ .header-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--s4)} .lang{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em} .lang__opt{color:rgba(255,255,255,.6);transition:color .25s var(--ease)} .lang__opt:hover{color:#fff} .lang__opt.is-active{color:var(--gold)} .lang__sep{width:1px;height:12px;background:rgba(255,255,255,.28)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:var(--s2);cursor:pointer} .burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* -------------------------------------------------------------------------- 5. MOBILE DRAWER -------------------------------------------------------------------------- */ .drawer{position:fixed;inset:0;z-index:1000} .drawer::before{content:"";position:absolute;inset:0;background:rgba(0,21,42,.6);backdrop-filter:blur(3px);animation:fadeIn .3s var(--ease) both} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .drawer__panel{ position:absolute;top:0;right:0;bottom:0;width:min(90vw,400px); background:var(--grad-navy); display:flex;flex-direction:column; overflow-y:auto;padding:var(--s5) var(--s6) var(--s8); animation:slideIn .36s var(--ease) both; } @keyframes slideIn{from{transform:translateX(100%)}to{transform:none}} .drawer__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--hairline-light)} .drawer__logo{width:38px} .drawer__close{background:none;border:0;color:#fff;cursor:pointer;padding:var(--s2);display:grid;place-items:center} .drawer__close svg{width:24px;height:24px} .drawer__nav{display:flex;flex-direction:column;padding-block:var(--s3)} .drawer__link,.acc__head{ width:100%;display:flex;align-items:center;justify-content:space-between; background:none;border:0;border-bottom:1px solid var(--hairline-light); padding:var(--s4) 0;cursor:pointer; font-family:var(--serif);font-size:1.2rem;font-weight:500;color:#fff;text-align:left; } .acc__ic{position:relative;width:12px;height:12px;flex:0 0 12px} .acc__ic::before,.acc__ic::after{ content:"";position:absolute;top:50%;left:0;width:12px;height:1.5px; background:var(--gold);border-radius:2px;transform:translateY(-50%); transition:transform .3s var(--ease); } .acc__ic::after{transform:translateY(-50%) rotate(90deg)} .acc.is-open .acc__ic::after{transform:translateY(-50%) rotate(0)} .acc__body{display:none;padding:var(--s2) 0 var(--s4)} .acc.is-open .acc__body{display:block} .acc__body a{display:block;padding:var(--s3) 0;font-size:var(--fs-sm);color:rgba(255,255,255,.72)} .acc__body a:hover{color:var(--gold)} .drawer__foot{margin-top:auto;padding-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3)} .drawer__note{font-size:var(--fs-xs);color:rgba(255,255,255,.55);text-align:center;margin:var(--s2) 0 0} /* -------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ .hero{ position:relative; min-height:90vh; display:flex;align-items:center; padding-block:calc(var(--header-h) + var(--s10)) var(--s11); background:var(--navy-900); overflow:hidden; } /* Scaled up slightly to crop the "Veo" AI watermark baked into the bottom-right of the source video. Replace the .mp4 and this can go. */ .hero__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; transform:scale(1.08);transform-origin:center top; } /* No overlay at all — the footage runs clean. All hero legibility is carried by the text-shadow on the copy itself (see below). */ /* Full-width container so the hero's left edge lines up with the header logo. */ .hero__content{position:relative;z-index:3;text-align:left} /* Frosted panel holding the hero copy. Deliberately narrow so it clears the subject's face on the right of the footage. */ .hero__card{ max-width:600px; padding:var(--s7); border-radius:var(--radius-lg); /* Tinted with the logo navy (#002549), not a near-black — it sits warmer against the footage. Opacity has to stay fairly high: thinner than this and the blue mixing with the yellow grass behind it reads teal, not navy. */ background:rgba(0,37,73,.66); backdrop-filter:blur(24px) saturate(100%); -webkit-backdrop-filter:blur(24px) saturate(100%); border:1px solid rgba(255,255,255,.18); box-shadow:0 40px 90px -44px rgba(0,21,42,.85); } /* Fallback where backdrop-filter isn't supported */ @supports not (backdrop-filter:blur(1px)){ .hero__card{background:rgba(0,37,73,.86)} } /* Stepped down from --fs-display so the headline sits comfortably in the narrower card instead of forcing it wide across the subject. */ .hero__title{ font-size:clamp(2.05rem,1.35rem + 2.4vw,3.15rem); color:#fff;margin-bottom:var(--s4);letter-spacing:-.022em; } .hero__title em{color:var(--gold-300)} .hero__sub{font-size:var(--fs-sm);color:rgba(255,255,255,.88);margin-bottom:var(--s6)} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s6)} .hero__card .btn{font-size:var(--fs-sm);padding:var(--s4) var(--s5)} .hero__trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s6)} .hero__trust li{ position:relative;padding-left:var(--s5); font-weight:600;letter-spacing:.04em; color:rgba(255,255,255,.82);text-transform:uppercase;font-size:.6875rem; } .hero__trust li::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:6px;height:6px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 3px rgba(221,169,46,.22); } /* Spanish — pill in the hero that opens a dialog */ .es-trigger{ display:inline-flex;align-items:center;gap:var(--s3); background:rgba(255,255,255,.1); border:1px solid rgba(221,169,46,.5); color:#fff; font-family:var(--sans);font-size:var(--fs-sm);font-weight:600; padding:var(--s3) var(--s5);border-radius:var(--radius-pill);cursor:pointer; transition:background .28s var(--ease),border-color .28s var(--ease); } .es-trigger:hover{background:rgba(221,169,46,.24);border-color:var(--gold)} .es-trigger__flag{width:20px;height:14px;border-radius:2px;overflow:hidden;flex:0 0 20px} .es-trigger__flag svg{width:100%;height:100%;display:block} .es-trigger__arrow{color:var(--gold);transition:transform .28s var(--ease)} .es-trigger:hover .es-trigger__arrow{transform:translateX(4px)} .es-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:var(--s5)} .es-modal__backdrop{ position:absolute;inset:0; background:rgba(0,21,42,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:fadeIn .28s var(--ease) both; } .es-modal__panel{ position:relative; width:min(660px,100%);max-height:88vh;overflow-y:auto; background:var(--paper); border-radius:var(--radius-lg); padding:var(--s8); box-shadow:0 50px 100px -30px rgba(0,21,42,.6); animation:esIn .34s var(--ease) both; } @keyframes esIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} .es-modal__close{ position:absolute;top:var(--s5);right:var(--s5); display:grid;place-items:center;width:38px;height:38px; background:var(--cream);border:1px solid var(--hairline);border-radius:50%; color:var(--navy);cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease); } .es-modal__close:hover{background:var(--navy);color:#fff} .es-modal__close svg{width:18px;height:18px} .es-modal__title{font-size:1.6rem;color:var(--red);margin-bottom:var(--s5);padding-right:var(--s8)} .es-modal__panel p{font-size:var(--fs-sm);color:var(--body)} .es-modal__call{margin-top:var(--s3)} /* the "site is available in Spanish" hand-off, directly under the phone number */ .es-modal__translate{ margin-top:var(--s6);padding-top:var(--s5); border-top:1px solid var(--hairline); display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4); justify-content:space-between; } .es-modal__translate-note{ margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--navy); } /* -------------------------------------------------------------------------- 7. ABOUT -------------------------------------------------------------------------- */ .about{background:var(--grad-navy);color:rgba(255,255,255,.82);overflow:hidden} .about::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 460px at 12% 8%,rgba(11,68,120,.55),transparent 70%), radial-gradient(620px 420px at 88% 92%,rgba(208,14,25,.18),transparent 72%); } .about__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s10);align-items:center} .about__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s6)} .about__title em{color:var(--gold-300)} .about__body .lead{color:rgba(255,255,255,.9);margin-bottom:var(--s7)} .about__body strong{color:#fff;font-weight:600} .about__points{display:grid;gap:var(--s5);margin-bottom:var(--s7)} .about__point{padding-left:var(--s5);border-left:2px solid rgba(221,169,46,.5)} .about__point dt{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--gold);margin-bottom:var(--s2)} .about__point dd{font-size:var(--fs-sm);color:rgba(255,255,255,.76)} .about__media{position:relative} .about__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} .about__badge{ position:absolute;left:calc(var(--s6) * -1);bottom:var(--s7); background:var(--grad-gold);color:var(--navy-900); padding:var(--s4) var(--s5);border-radius:var(--radius); box-shadow:var(--shadow-lg);max-width:230px; } .about__badge-k{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px} .about__badge-v{display:block;font-size:var(--fs-xs);line-height:1.45;opacity:.82} /* -------------------------------------------------------------------------- 8. PRACTICE AREAS -------------------------------------------------------------------------- */ .practice{background:var(--grad-cream)} .pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .pa-card{ position:relative; display:flex;flex-direction:column; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:var(--s7); overflow:hidden; transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease); } .pa-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:var(--grad-red); transform:scaleX(0);transform-origin:left; transition:transform .38s var(--ease); } .pa-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .pa-card:hover::before{transform:scaleX(1)} /* Sized so the folk-art detail in the icons actually reads */ .pa-card__icon{ width:116px;height:116px;border-radius:26px;margin-bottom:var(--s5); background:var(--cream);border:1px solid var(--hairline); display:grid;place-items:center; transition:transform .34s var(--ease); } .pa-card:hover .pa-card__icon{transform:scale(1.05) rotate(-3deg)} .pa-card__icon img{width:94px;height:94px;object-fit:contain} .pa-card h3{font-size:var(--fs-h3);margin-bottom:var(--s3)} .pa-card p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s5)} .pa-card__cta{ margin-top:auto; font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--red); display:inline-flex;align-items:center;gap:var(--s2); } .pa-card__cta span{transition:transform .28s var(--ease)} .pa-card:hover .pa-card__cta span{transform:translateX(5px)} /* -------------------------------------------------------------------------- 9. TESTIMONIALS -------------------------------------------------------------------------- */ .testi{background:var(--grad-gold);overflow:hidden} .testi::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 420px at 80% 0%,rgba(255,255,255,.42),transparent 68%); } .testi .section-title{color:var(--navy-900)} .testi__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start} .testi__quotes{display:grid;gap:var(--s5)} .quote{ position:relative; background:rgba(255,255,255,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.9); border-radius:var(--radius-lg); padding:var(--s7) var(--s7) var(--s6); } .quote::before{ content:"\201C"; position:absolute;top:var(--s3);left:var(--s5); font-family:var(--serif);font-size:4.5rem;line-height:1; color:rgba(0,37,73,.16); } .quote blockquote{margin:0 0 var(--s4);position:relative;font-size:var(--fs-sm);line-height:1.7;color:var(--navy)} .quote figcaption{ font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-700); display:flex;align-items:center;gap:var(--s3); } .quote figcaption::before{content:"";width:22px;height:1px;background:var(--navy-700);opacity:.5} .testi__card{background:var(--paper);border-radius:var(--radius-lg);padding:var(--s3);box-shadow:var(--shadow-lg)} .testi__caption{padding:var(--s4) var(--s4) var(--s3);font-size:var(--fs-sm);color:var(--body);text-align:center} .testi__caption span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-top:var(--s1)} /* -------------------------------------------------------------------------- 10. HOW IT WORKS -------------------------------------------------------------------------- */ .how{background:var(--grad-navy);overflow:hidden} .how::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(720px 420px at 50% -10%,rgba(208,14,25,.34),transparent 70%), radial-gradient(620px 400px at 10% 100%,rgba(11,68,120,.5),transparent 72%); } .how .section-title{color:#fff} .how .section-title em{color:var(--gold-300)} .how .section-lead{color:rgba(255,255,255,.66)} .how__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);counter-reset:step} .step{position:relative;text-align:center} /* connector line between steps */ .step:not(:last-child)::after{ content:"";position:absolute;top:96px;right:calc(var(--s7) / -2); width:var(--s7);height:1px; background:linear-gradient(90deg,rgba(221,169,46,.5),rgba(221,169,46,.1)); } .step__num{ display:block; font-family:var(--serif);font-size:var(--fs-xs);font-weight:700; letter-spacing:.24em;color:var(--gold);margin-bottom:var(--s4); } /* Cream disc holding the transparent folk-art icon — same treatment as the practice-card plates, so the two sets read as one system. */ .step__media{ display:grid;place-items:center; width:196px;height:196px;margin:0 auto var(--s5); padding:var(--s6); border-radius:50%; background:var(--cream); border:1px solid rgba(221,169,46,.5); box-shadow:0 24px 56px -26px rgba(0,0,0,.8); transition:transform .4s var(--ease),border-color .4s var(--ease); } .step:hover .step__media{transform:translateY(-6px);border-color:var(--gold)} .step__media img{width:100%;height:100%;object-fit:contain} .step h3{font-size:var(--fs-h3);color:#fff;margin-bottom:var(--s3)} .step p{font-size:var(--fs-sm);color:rgba(255,255,255,.72)} .how__cta{text-align:center;margin-top:var(--s9)} /* -------------------------------------------------------------------------- 11. VIDEO GUIDES -------------------------------------------------------------------------- */ .guides{background:var(--cream)} .guides__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)} .guide{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--s3);transition:box-shadow .3s var(--ease)} .guide:hover{box-shadow:var(--shadow-md)} .guide figcaption{ display:flex;align-items:center;gap:var(--s3); padding:var(--s4) var(--s4) var(--s3); font-family:var(--serif);font-size:1.0625rem;font-weight:600;color:var(--ink); } .guide__tag{ font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--red);background:rgba(208,14,25,.09); padding:4px var(--s3);border-radius:var(--radius-pill); } /* -------------------------------------------------------------------------- 12. OFFICE LOCATIONS -------------------------------------------------------------------------- */ .offices{background:var(--grad-cream)} .offices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .office-card{ background:var(--grad-navy);color:rgba(255,255,255,.76); border-radius:var(--radius-lg);padding:var(--s7); box-shadow:var(--shadow-md); transition:transform .34s var(--ease),box-shadow .34s var(--ease); } .office-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .office-card__ic{ display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s5); border-radius:12px;background:rgba(221,169,46,.14);color:var(--gold); } .office-card__ic svg{width:24px;height:24px} .office-card h3{font-size:1.3rem;color:#fff;margin-bottom:var(--s2)} .office-card p{font-size:var(--fs-sm);margin:0} /* -------------------------------------------------------------------------- 13. CTA -------------------------------------------------------------------------- */ .cta{position:relative;padding-block:var(--section-y);overflow:hidden;background:var(--navy-900)} .cta__media{ position:absolute;inset:0; background:url('../img/cta-bg.png') center/cover no-repeat; opacity:.34; } .cta::after{ content:"";position:absolute;inset:0; background: radial-gradient(760px 460px at 50% 50%,rgba(0,21,42,.55),rgba(0,21,42,.9) 75%), linear-gradient(180deg,rgba(0,21,42,.7),rgba(0,21,42,.94)); } .cta__inner{position:relative;z-index:2;text-align:center;max-width:660px} .cta__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s4)} .cta__lead{font-size:var(--fs-lead);color:rgba(255,255,255,.78);margin-bottom:var(--s7)} .cta__actions{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center} /* -------------------------------------------------------------------------- 14. FOOTER -------------------------------------------------------------------------- */ .site-footer{background:var(--navy-900);color:rgba(255,255,255,.66);position:relative} .site-footer::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,rgba(221,169,46,0),rgba(221,169,46,.6),rgba(221,169,46,0)); } .footer-grid{ display:grid;grid-template-columns:1.1fr 1.5fr .8fr;gap:var(--s9); padding-block:var(--s10) var(--s9); } .footer-brand__logo{width:56px;margin-bottom:var(--s5)} .footer-brand__tag{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:#fff;margin-bottom:var(--s5);max-width:26ch} .footer-contact{display:grid;gap:var(--s2);margin-bottom:var(--s6);font-size:var(--fs-sm)} .footer-contact a{color:var(--gold);transition:color .25s var(--ease)} .footer-contact a:hover{color:var(--gold-300)} .footer-h{ font-family:var(--sans);font-size:var(--fs-xs);font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--gold); margin-bottom:var(--s5); } .footer-links{display:grid;gap:var(--s3);font-size:var(--fs-sm)} /* columns rather than a 2-col grid: a wrapping item shouldn't push a gap into the neighbouring column's row */ .footer-col--wide .footer-links{display:block;columns:2;column-gap:var(--s6)} .footer-col--wide .footer-links li{break-inside:avoid;margin-bottom:var(--s3)} .footer-links a{color:rgba(255,255,255,.66);transition:color .25s var(--ease),padding-left .25s var(--ease)} .footer-links a:hover{color:#fff;padding-left:4px} .footer-legal{border-top:1px solid var(--hairline-light);padding-block:var(--s5)} .footer-legal p{font-size:var(--fs-xs);line-height:1.6;color:rgba(255,255,255,.42);margin:0;max-width:96ch} .footer-copy{border-top:1px solid var(--hairline-light);padding-block:var(--s5)} .footer-copy__inner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between} .footer-copy p{font-size:var(--fs-xs);color:rgba(255,255,255,.5);margin:0} .footer-copy a{color:var(--gold)} .footer-copy a:hover{text-decoration:underline} /* -------------------------------------------------------------------------- 15. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width:1080px){ .nav,.header-actions .lang,.header-actions .header-cta{display:none} .burger{display:flex} .header-inner{justify-content:space-between;gap:var(--s4)} .about__grid{grid-template-columns:1fr;gap:var(--s8)} .about__badge{left:auto;right:var(--s5);bottom:calc(var(--s6) * -1)} .pa-grid{grid-template-columns:repeat(2,1fr)} .testi__grid{grid-template-columns:1fr;gap:var(--s7)} .how__grid{grid-template-columns:1fr;gap:var(--s9);max-width:520px;margin-inline:auto} .step:not(:last-child)::after{display:none} .offices__grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8)} } @media (max-width:720px){ .hero{min-height:90vh;padding-block:calc(var(--header-h) + var(--s6)) var(--s8)} .hero__card{padding:var(--s6) var(--s5);max-width:none} .hero__actions .btn{width:100%} .hero__trust{gap:var(--s2) var(--s5)} .es-trigger{width:100%;justify-content:flex-start} .es-modal{padding:var(--s4)} .es-modal__panel{padding:var(--s6) var(--s5)} .es-modal__title{font-size:1.3rem;padding-right:var(--s7)} .es-modal__translate{flex-direction:column;align-items:stretch} .es-modal__translate .btn{width:100%} /* the hairline reads as a stray dash once the label wraps */ .eyebrow{flex-wrap:wrap;gap:var(--s2)} .eyebrow::after,.eyebrow::before{display:none} .section-head{margin-bottom:var(--s7)} .pa-grid,.guides__grid{grid-template-columns:1fr} .pa-card{padding:var(--s6)} .quote{padding:var(--s6)} .about__badge{position:static;max-width:none;margin-top:var(--s4)} .footer-grid{grid-template-columns:1fr;gap:var(--s7);padding-block:var(--s8) var(--s7)} .footer-col--wide .footer-links{grid-template-columns:1fr} .footer-copy__inner{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ========================================================================== 16. PRACTICE-AREA PAGES Same design system as the homepage; these are the pieces only the inner pages use. Appended so the homepage block above stays readable. ========================================================================== */ .page-practice{background:var(--cream)} /* --- hero --- */ .pa-hero{ position:relative; padding-block:calc(var(--header-h) + var(--s9)) var(--s9); background:var(--grad-navy); color:rgba(255,255,255,.82); overflow:hidden; } .pa-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 460px at 15% 0%,rgba(11,68,120,.6),transparent 70%), radial-gradient(620px 420px at 90% 100%,rgba(208,14,25,.16),transparent 72%); } .pa-hero .container{position:relative} .crumbs{margin-bottom:var(--s6)} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-xs)} .crumbs li{display:flex;align-items:center;gap:var(--s2);color:rgba(255,255,255,.55)} .crumbs li+li::before{content:"/";color:rgba(255,255,255,.3)} .crumbs a{color:rgba(255,255,255,.75);transition:color .2s var(--ease)} .crumbs a:hover{color:var(--gold)} .crumbs [aria-current]{color:var(--gold)} .pa-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s8);align-items:center} .pa-hero__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s5)} .pa-hero__lede{font-size:var(--fs-lead);color:rgba(255,255,255,.84);max-width:62ch;margin-bottom:var(--s7)} .pa-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4)} .pa-hero__icon{ flex:0 0 auto;width:190px;height:190px;border-radius:32px; background:rgba(255,255,255,.94); border:1px solid rgba(221,169,46,.5); display:grid;place-items:center;padding:var(--s6); box-shadow:0 30px 70px -30px rgba(0,0,0,.75); } .pa-hero__icon img{width:100%;height:100%;object-fit:contain} /* --- article + sidebar --- */ .pa-body{padding-block:var(--section-y)} .pa-body__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);align-items:start} .prose__block{margin-bottom:var(--s8)} .prose__block:last-child{margin-bottom:0} .prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);color:var(--ink);margin-bottom:var(--s4)} .prose p{font-size:var(--fs-body);color:var(--body);margin-bottom:var(--s4);max-width:72ch} .prose__list{display:grid;gap:var(--s3);margin:var(--s5) 0 0;max-width:72ch} .prose__list li{ position:relative;padding-left:var(--s6); font-size:var(--fs-sm);color:var(--body);line-height:1.6; } .prose__list li::before{ content:"";position:absolute;left:0;top:.6em; width:7px;height:7px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 3px rgba(221,169,46,.2); } /* --- FAQs --- */ .faqs{display:grid;gap:var(--s3);max-width:72ch} .faq{ background:var(--paper);border:1px solid var(--hairline); border-radius:var(--radius);overflow:hidden; transition:box-shadow .25s var(--ease),border-color .25s var(--ease); } .faq[open]{box-shadow:var(--shadow-md);border-color:rgba(221,169,46,.4)} .faq__q{ display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s5);cursor:pointer;list-style:none; font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--ink); } .faq__q::-webkit-details-marker{display:none} .faq__ic{position:relative;width:13px;height:13px;flex:0 0 13px} .faq__ic::before,.faq__ic::after{ content:"";position:absolute;top:50%;left:0;width:13px;height:2px; background:var(--gold-600);border-radius:2px;transform:translateY(-50%); transition:transform .28s var(--ease); } .faq__ic::after{transform:translateY(-50%) rotate(90deg)} .faq[open] .faq__ic::after{transform:translateY(-50%) rotate(0)} .faq__a{padding:0 var(--s5) var(--s5)} .faq__a p{font-size:var(--fs-sm);margin:0} /* --- sticky sidebar --- */ .pa-side{position:sticky;top:calc(var(--header-h) + var(--s5))} .side-card{ background:var(--grad-navy);color:rgba(255,255,255,.8); border-radius:var(--radius-lg);padding:var(--s7); box-shadow:var(--shadow-lg); } .side-card__title{font-size:1.5rem;color:#fff;margin-bottom:var(--s3)} .side-card__text{font-size:var(--fs-sm);margin-bottom:var(--s5)} .side-card .btn{margin-bottom:var(--s3)} .side-card .btn--ghost-dark{border-color:rgba(255,255,255,.35);color:#fff} .side-card .btn--ghost-dark:hover{background:#fff;color:var(--navy);border-color:#fff} .side-card__points{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-light);display:grid;gap:var(--s2)} .side-card__points li{ position:relative;padding-left:var(--s5); font-size:var(--fs-xs);color:rgba(255,255,255,.72); } .side-card__points li::before{ content:"";position:absolute;left:0;top:.5em; width:6px;height:6px;border-radius:50%;background:var(--gold); } /* --- related --- */ .pa-related{background:var(--grad-cream);padding-block:var(--section-y)} .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)} .rel-card{ display:flex;align-items:center;gap:var(--s4); background:var(--paper);border:1px solid var(--hairline); border-radius:var(--radius-lg);padding:var(--s5); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .rel-card__icon{ flex:0 0 68px;height:68px;border-radius:18px; background:var(--cream);border:1px solid var(--hairline); display:grid;place-items:center; } .rel-card__icon img{width:54px;height:54px;object-fit:contain} .rel-card__title{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:var(--s1)} .rel-card__cta{ display:inline-flex;align-items:center;gap:var(--s2); font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red); } .rel-card__cta span{transition:transform .25s var(--ease)} .rel-card:hover .rel-card__cta span{transform:translateX(4px)} @media (max-width:1080px){ .pa-hero__grid{grid-template-columns:1fr} .pa-hero__icon{display:none} .pa-body__grid{grid-template-columns:1fr;gap:var(--s8)} .pa-side{position:static} .rel-grid{grid-template-columns:1fr} } @media (max-width:720px){ .pa-hero{padding-block:calc(var(--header-h) + var(--s6)) var(--s8)} .faq__q{font-size:1rem;padding:var(--s4)} .faq__a{padding:0 var(--s4) var(--s4)} .side-card{padding:var(--s6)} } /* inline links inside article copy */ .prose a,.faq__a a{ color:var(--red);font-weight:500; text-decoration:underline;text-decoration-color:rgba(208,14,25,.35); text-underline-offset:3px; transition:text-decoration-color .2s var(--ease); } .prose a:hover,.faq__a a:hover{text-decoration-color:var(--red)} .prose em{font-style:italic} /* ========================================================================== 17. BIOS, FAQ, CONTACT, BLOG ========================================================================== */ /* --- attorney bio --- */ .bio-hero{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s8);align-items:center} .bio-hero__photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(221,169,46,.35)} .bio-hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover} .bio-facts{display:grid;gap:var(--s4);margin-bottom:var(--s6)} .bio-facts__row dt{ font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);margin-bottom:var(--s1); } .bio-facts__row dd{margin:0;font-size:var(--fs-sm);color:rgba(255,255,255,.8);line-height:1.55} .prose--single{max-width:76ch;margin-inline:auto} .prose code{font-size:.9em;background:var(--cream-200);padding:2px 6px;border-radius:4px} /* --- FAQ page --- */ .faqs--wide{max-width:90ch;margin-inline:auto} .guides__grid--three{grid-template-columns:repeat(3,1fr)} .guide__text{padding:0 var(--s4) var(--s4);font-size:var(--fs-sm);color:var(--muted);margin:0} /* --- contact --- */ .contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);align-items:start} .contact__h{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);margin-bottom:var(--s6)} .contact__form-wrap{ background:var(--paper);border:1px solid var(--hairline); border-radius:var(--radius-lg);padding:var(--s8);box-shadow:var(--shadow-md); } .cform{display:grid;gap:var(--s5)} .cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} .cform__field{display:grid;gap:var(--s2)} .cform label,.cform legend{font-size:var(--fs-sm);font-weight:600;color:var(--ink)} .cform input[type="text"],.cform input[type="tel"],.cform input[type="email"], .cform input[type="date"],.cform select,.cform textarea{ font-family:var(--sans);font-size:var(--fs-body);color:var(--ink); background:var(--cream);border:1px solid var(--hairline); border-radius:var(--radius);padding:var(--s4);width:100%; transition:border-color .2s var(--ease),background .2s var(--ease); } .cform input:focus,.cform select:focus,.cform textarea:focus{ background:var(--paper);border-color:var(--gold);outline:none; box-shadow:0 0 0 3px rgba(221,169,46,.2); } .cform textarea{resize:vertical;min-height:150px;line-height:1.6} .cform__hint{font-size:var(--fs-xs);color:var(--muted)} .cform__radios{border:0;padding:0;margin:0} .cform__radios legend{margin-bottom:var(--s2)} .cform__radios label{display:inline-flex;align-items:center;gap:var(--s2);font-weight:400;margin-right:var(--s5)} .cform__consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-xs);color:var(--muted);font-weight:400;line-height:1.55} .cform__consent input{margin-top:3px;flex:0 0 auto} .cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cform__status{margin:0;font-size:var(--fs-sm);min-height:1.2em} .cform__status.is-error{color:var(--red);font-weight:500} .cform__status.is-ok{color:#1c7c4a;font-weight:500} /* Only flag invalid fields after a submit attempt — these inputs have no placeholder, so :not(:placeholder-shown) would match every empty required field on load and greet visitors with a wall of red. */ .cform.is-submitted :invalid{border-color:rgba(208,14,25,.55)} .contact__side{display:grid;gap:var(--s5)} .contact__info{ background:var(--paper);border:1px solid var(--hairline); border-radius:var(--radius-lg);padding:var(--s6); } .contact__info h3{ font-family:var(--sans);font-size:var(--fs-xs);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:var(--s2); } .contact__info h3+*{margin-bottom:var(--s5)} .contact__info address{font-style:normal;font-size:var(--fs-sm);color:var(--body);line-height:1.7} .contact__info p{font-size:var(--fs-sm);color:var(--body);margin:0} /* --- blog listings --- */ .blog-switch{display:inline-flex;gap:var(--s2);background:rgba(255,255,255,.08);border:1px solid var(--hairline-light);border-radius:var(--radius-pill);padding:4px} .blog-switch__btn{ padding:var(--s2) var(--s5);border-radius:var(--radius-pill); font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.7); transition:background .25s var(--ease),color .25s var(--ease); } .blog-switch__btn:hover{color:#fff} .blog-switch__btn.is-active{background:var(--gold);color:var(--navy-900)} .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s6)} .post-card{ background:var(--paper);border:1px solid var(--hairline); border-radius:var(--radius-lg);overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .post-card .video-embed{border-radius:0} .post-card__body{padding:var(--s6)} .post-card__body time{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600)} .post-card__body h2{font-size:1.3rem;margin:var(--s3) 0} .post-card__body p{font-size:var(--fs-sm);color:var(--muted);margin:0} .post-empty{ text-align:center;max-width:52ch;margin-inline:auto; font-size:var(--fs-lead);color:var(--muted); padding:var(--s10) var(--s5); background:var(--paper);border:1px dashed var(--hairline);border-radius:var(--radius-lg); } @media (max-width:1080px){ .bio-hero{grid-template-columns:1fr;gap:var(--s6)} .bio-hero__photo{max-width:280px} .contact__grid{grid-template-columns:1fr;gap:var(--s8)} .guides__grid--three{grid-template-columns:1fr} } @media (max-width:720px){ .contact__form-wrap{padding:var(--s6) var(--s5)} .cform__row{grid-template-columns:1fr} .post-grid{grid-template-columns:1fr} } /* --- About page stats + policy pages --- */ .pa-hero--tall{padding-block:calc(var(--header-h) + var(--s10)) var(--s10);min-height:70vh;display:flex;align-items:center} .pa-hero__note{margin-top:var(--s6);font-size:var(--fs-sm);color:rgba(255,255,255,.6);max-width:60ch} .pa-hero__note a{color:var(--gold)} .stat-row{ position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5); margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--hairline-light); } .stat__k{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--gold);line-height:1.1} .stat__v{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.7);margin-top:var(--s2);line-height:1.5} .prose__updated{font-size:var(--fs-sm);color:var(--muted);padding-top:var(--s5);border-top:1px solid var(--hairline)} .rel-grid--two{grid-template-columns:repeat(2,1fr)} .rel-grid--two .team-card{background:var(--paper)} .rel-grid--two .team-card .rel-card__cta{margin-top:var(--s2)} @media (max-width:1080px){ .stat-row{grid-template-columns:repeat(2,1fr)} .rel-grid--two{grid-template-columns:1fr} } @media (max-width:600px){ .stat-row{grid-template-columns:1fr;gap:var(--s4)} } /* ── 18. Site map page ────────────────────────────────────────────────── A human index of every public page. Reuses .rel-grid for the columns so it inherits the same breakpoints as the rest of the site. */ .sitemap-col{margin-bottom:var(--s8)} .sitemap-col__h{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink); padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:2px solid var(--gold)} .sitemap-links{list-style:none;display:grid;gap:var(--s2);margin:0;padding:0} .sitemap-links a{color:var(--body);font-size:var(--fs-sm);text-decoration:none; border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)} .sitemap-links a:hover{color:var(--red);border-bottom-color:var(--red)} .sitemap-links li small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px} @media (max-width:900px){.sitemap-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.sitemap-grid{grid-template-columns:1fr}} /* -------------------------------------------------------------------------- ASK — header AI search The header is translucent navy over the hero footage, so this is a glass pill, not the white one it is modelled on. It stays quiet until focused: collapsed it reads as an icon and a word, focused it opens to give the question room. The answer card is the paper card used by the mega menu, so a visitor meets a surface they have already seen. -------------------------------------------------------------------------- */ /* The pill sits at the end of the nav, beside Contact, not over with the phone button. The nav stops stretching and the pill takes the slack, which keeps it anchored to the menu instead of drifting with the viewport. */ .site-header .nav{flex:0 0 auto} .site-header .ask{margin-right:auto} .ask{position:relative;flex:0 0 auto} .ask__form{ display:flex;align-items:center;gap:var(--s2); height:36px;padding:0 var(--s3); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:var(--radius-pill); transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } .ask__form:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)} .ask:focus-within .ask__form{ background:rgba(255,255,255,.18); border-color:var(--gold); box-shadow:0 0 0 3px rgba(221,169,46,.18); } /* The sparkle magnifier is a flat single-colour PNG with an alpha edge, so it is painted as a MASK rather than dropped in as an . A mask takes currentColor exactly, which means one gold token drives it and it can never drift from the rest of the header, where a filter chain guessing its way to gold would. @supports keeps the original artwork for anything that cannot mask, instead of showing a gold rectangle. */ .ask__ic{ width:18px;height:18px;flex:0 0 auto; background:url("../img/ai-search.png") center/contain no-repeat; } @supports (mask-image:url("")) or (-webkit-mask-image:url("")){ .ask__ic{ background:var(--gold-300); -webkit-mask:url("../img/ai-search.png") center/contain no-repeat; mask:url("../img/ai-search.png") center/contain no-repeat; } } .ask:focus-within .ask__ic{background:var(--gold)} .ask__input{ width:58px;min-width:0;border:0;background:none;outline:none; font-family:var(--sans);font-size:var(--fs-sm);color:#fff; transition:width .32s var(--ease); } .ask__input::placeholder{color:rgba(255,255,255,.62)} .ask__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .ask:focus-within .ask__input{width:210px} /* "Preguntar" is half again as long as "Ask", and the collapsed pill is sized to its placeholder, so the Spanish pages need a little more room or the word is clipped to "Pregun". */ html[lang^="es"] .ask__input{width:86px} /* Spanish labels are simply longer: "Preguntas Frecuentes" and "Áreas de Práctica" against "FAQ" and "Practice Areas". With the Ask pill added, the Spanish header ran 41px over at 1280px. Tightening the two gaps recovers it without shrinking type or dropping anything from the bar. */ html[lang^="es"] .header-inner{gap:var(--s5)} html[lang^="es"] .nav__list{gap:var(--s5)} @media(max-width:1150px){.ask:focus-within .ask__input{width:150px}} /* Thinking: a single gold arc, no bouncing dots. */ .ask__spin{display:none;width:13px;height:13px;flex:0 0 auto;border-radius:50%; border:2px solid rgba(221,169,46,.25);border-top-color:var(--gold); animation:askSpin .7s linear infinite} .ask.is-busy .ask__spin{display:block} @keyframes askSpin{to{transform:rotate(360deg)}} .ask__panel{ position:absolute;top:calc(100% + 12px);right:0; width:min(430px,calc(100vw - 32px)); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:0 28px 64px -22px rgba(0,21,42,.42),0 2px 8px rgba(0,21,42,.07); padding:var(--s5) var(--s5) var(--s4); text-align:left;z-index:950; animation:askIn .26s var(--ease) both; } @keyframes askIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .ask__eyebrow{ display:flex;align-items:center;gap:var(--s2); font-family:var(--sans);font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600); margin-bottom:var(--s3); } .ask__eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-gold)} /* Serif, because the answer is the firm speaking, and the firm speaks in Newsreader everywhere else on the site. */ .ask__a{font-family:var(--serif);font-size:1rem;line-height:1.62;color:var(--ink)} .ask__link{ display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4); font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--red); } .ask__link:hover{text-decoration:underline} /* Call and message, always reachable from the answer. The call button carries the brand red because it is the action the firm actually wants; message is a quiet outline so the two do not compete. */ .ask__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} .ask__btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:var(--radius-pill); font-family:var(--sans);font-size:var(--fs-xs);font-weight:600; border:1px solid var(--hairline);color:var(--navy); transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); } .ask__btn:hover{background:var(--cream-200);text-decoration:none} .ask__btn svg{width:14px;height:14px} .ask__btn--call{background:var(--red);border-color:var(--red);color:#fff} .ask__btn--call:hover{background:var(--red-600);border-color:var(--red-600);color:#fff} .ask__note{ margin-top:var(--s4);padding-top:var(--s3); border-top:1px solid var(--hairline); font-family:var(--sans);font-size:11px;line-height:1.5; color:color-mix(in srgb,var(--ink) 45%,transparent); } /* In the mobile drawer it is a normal block, not a floating pill. */ .drawer .ask{width:100%} .drawer .ask__form{height:44px;background:rgba(255,255,255,.08)} .drawer .ask__input, .drawer .ask:focus-within .ask__input{width:100%} .drawer .ask__panel{position:static;width:auto;margin-top:var(--s3);box-shadow:none;animation:none} /* 1080px is the site's own header breakpoint: nav, language switch and phone CTA all hide there and the burger appears. The pill hands off to the drawer at exactly the same moment, so the header never sits in a half state. */ @media(max-width:1080px){ .site-header .ask{display:none} } /* -------------------------------------------------------------------------- VIDEO LIBRARY (/es/videos/) Cards are facades: a thumbnail and a play button until clicked. Sixteen real iframes would cost several megabytes and set YouTube cookies on load, which is a poor trade for a page most people scroll before they press anything. -------------------------------------------------------------------------- */ .vid-group + .vid-group{margin-top:var(--s9)} .vid-group__title{font-size:1.6rem;margin:0 0 var(--s2)} .vid-group__lead{color:var(--muted);margin:0 0 var(--s6);max-width:60ch} .vid-grid{ list-style:none;margin:0;padding:0; display:grid;gap:var(--s6); grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .vid{display:flex;flex-direction:column;gap:var(--s3)} .vid__play{ position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer; aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden; background:var(--navy-900); box-shadow:var(--shadow-sm); transition:box-shadow .25s var(--ease),transform .25s var(--ease); } .vid__play:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .vid__thumb{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; /* YouTube's hqdefault is 4:3 with black bars; cropping to the 16:9 middle removes them without a second request for a maxres frame that many of these uploads do not have. */ transition:transform .35s var(--ease),opacity .25s var(--ease); } .vid__play:hover .vid__thumb{transform:scale(1.03)} /* Play badge, in the firm's red rather than YouTube's. */ .vid__badge{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:56px;height:56px;border-radius:50%; background:var(--red);box-shadow:0 10px 30px -8px rgba(0,21,42,.7); transition:transform .25s var(--ease),background .25s var(--ease); } .vid__badge::after{ content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; } .vid__play:hover .vid__badge{transform:translate(-50%,-50%) scale(1.08);background:var(--red-400)} .vid__play:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .vid__title{ font-family:var(--sans);font-size:var(--fs-sm);font-weight:600; line-height:1.45;color:var(--ink);margin:0; } /* Once playing, the button is replaced by the real player. */ .vid__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000} .vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* -------------------------------------------------------------------------- ARTICLE READING (.prose--article) Long-form only. The practice pages share .prose and are deliberately left alone: they are scannable sales pages, these are 2,000-word reads. -------------------------------------------------------------------------- */ /* The video was butting straight into the first paragraph. */ .prose--article > .video-embed{margin-bottom:var(--s7)} .prose--article p{ color:var(--body-strong); line-height:1.78; /* 1.68 is a UI rhythm, not a reading one */ margin-bottom:var(--s5); } /* Headings had a bottom margin and no top margin at all, so every one of them sat on the paragraph above it. The space belongs above a heading, where it separates sections; that asymmetry is what makes the rhythm read. */ .prose--article h2{ margin-top:var(--s8); margin-bottom:var(--s4); line-height:1.25; letter-spacing:-.01em; } .prose--article h3{ font-family:var(--serif); font-size:1.22rem;font-weight:600;color:var(--ink); margin-top:var(--s6);margin-bottom:var(--s3); line-height:1.35; } /* Nothing should be pushed down at the very top of the article. */ .prose--article > :first-child, .prose--article .prose__block > :first-child{margin-top:0} /* The generated articles use plain