/* ============================================================ THE TRAVEL LAW ADVOCATE — shared design system Brand: coral #FF5757 · cream #F5EFCD · slate #6F6D79 Type: Cormorant Garamond (display + body) · Parisienne (script) Fonts are loaded via in each page's (not @import, which would block this whole sheet from applying until fonts load). ============================================================ */ :root{ /* palette */ --coral: #FF8068; --coral-deep: #F2674C; --coral-soft: #FFB3A0; --cream: #F6F0CE; /* type on coral */ --ivory: #FBF4EC; /* light page bg */ --ivory-2: #F3ECD7; /* panel bg */ --slate: #6F6D79; /* logo gray */ --slate-deep: #23415C; /* navy-leaning body copy */ --teal: #0B7C91; /* teal-cyan accent */ --teal-deep: #086076; --ink: #26252C; /* near-black text on light */ --line: rgba(38,37,44,.14); /* type */ --display: 'Cormorant Garamond', Georgia, serif; --script: 'Parisienne', cursive; --body: 'Cormorant Garamond', Georgia, serif; --navy: #23415C; /* primary text + nav bar */ /* rhythm */ --maxw: 1240px; --pad: clamp(20px, 5vw, 64px); --r: 14px; --header-h: 120px; /* height of the sticky header backdrop band */ } @media (max-width:880px){ :root{ --header-h: 84px; } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--body); color:var(--navy); background:var(--ivory); font-size:19px; font-weight:500; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.02; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); } .script{ font-family:var(--script); font-weight:400; } .serif{ font-family:var(--display); } .eyebrow{ font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:13px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.02em; padding:15px 28px; border-radius:100px; border:1.5px solid transparent; cursor:pointer; transition:.25s ease; white-space:nowrap; } .btn .arrow{ transition:transform .25s ease; } .btn:hover .arrow{ transform:translateX(4px); } .btn-coral{ background:var(--coral); color:var(--cream); } .btn-coral:hover{ background:var(--coral-deep); } .btn-cream{ background:var(--cream); color:var(--navy); } .btn-cream:hover{ background:#fff; } .btn-ghost{ background:transparent; border-color:currentColor; } .btn-ghost:hover{ background:rgba(255,255,255,.1); } .btn-ink{ background:var(--ink); color:var(--cream); } .btn-ink:hover{ background:#000; } /* ---------- top nav ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px var(--pad); transition:background .3s, box-shadow .3s; } .nav--coral{ background:transparent; border-bottom:none; } /* On light sections the header becomes a clean solid bar (logo + links flip to navy). */ .nav--coral.is-solid{ background:rgba(251,244,236,.94); -webkit-backdrop-filter:saturate(1.1) blur(8px); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid rgba(35,65,92,.10); box-shadow:0 6px 26px rgba(35,65,92,.07); } /* ---------- sticky header backdrop ("blocker") trick ---------- A navy band sits behind the fixed header but in front of the hero content, so the headline tucks cleanly behind it on scroll instead of colliding with the nav. It releases at the bottom of the hero. */ .hero-blocker{ position:sticky; top:0; height:var(--header-h); z-index:3; pointer-events:none; background:var(--navy); } .nav--coral.is-solid .nav__links{ color:var(--navy); } .nav--coral.is-solid .nav__burger{ color:var(--navy); } .nav--coral.is-solid .btn-cream{ background:#23415C; color:var(--ivory); } .nav--coral.is-solid .btn-cream:hover{ background:#192F44; } .nav--ivory{ background:rgba(251,248,236,.9); border-bottom:1px solid var(--line); } .nav__brand{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:17px; letter-spacing:.04em; white-space:nowrap; } .nav__brand b{ font-weight:600; } .nav--coral .nav__brand{ color:var(--cream); } .nav--ivory .nav__brand{ color:var(--ink); } .nav__mark{ width:34px; height:34px; flex:none; } .nav__badge{ display:inline-flex; align-items:center; background:var(--ink); border-radius:13px; padding:8px 15px; transition:background .25s; } .nav__brand:hover .nav__badge{ background:#000; } .nav__logo{ height:60px; width:auto; display:block; } .nav__logo--dark{ display:none; } .nav--coral.is-solid .nav__logo--light{ display:none; } .nav--coral.is-solid .nav__logo--dark{ display:block; } @media (max-width:880px){ .nav__logo{ height:84px !important; } } @media (max-width:560px){ .nav__logo{ height:60px !important; } } .nav__links{ display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500; } .nav__links a{ position:relative; padding:4px 0; opacity:.85; transition:opacity .2s; } .nav__links a:hover, .nav__links a[aria-current]{ opacity:1; } .nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:currentColor; transition:right .25s ease; } .nav__links a:hover::after, .nav__links a[aria-current]::after{ right:0; } .nav--coral .nav__links{ color:var(--cream); } .nav__cta{ margin-left:6px; } .nav__burger{ display:none; background:none; border:0; cursor:pointer; padding:10px; min-width:44px; min-height:44px; } .nav__burger span{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:.25s; } @media (max-width:880px){ .nav__links{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px); z-index:1005; flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:40px; background:var(--coral); color:var(--cream); transform:translateX(100%); transition:transform .35s ease; font-size:22px; } .nav--ivory .nav__links{ background:var(--ink); color:var(--cream); } .nav--coral .nav__links{ background:#23415C; } .nav__links.open{ transform:translateX(0); } .nav__burger{ display:block; z-index:1010; } .nav--coral .nav__burger{ color:var(--cream); } } /* ---------- footer ---------- */ .foot{ background:#23415C; color:var(--cream); padding:72px var(--pad) 36px; } .foot__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; } .foot__lede{ font-family:var(--display); font-size:clamp(26px,3.2vw,40px); line-height:1.1; max-width:14ch; } .foot__logo{ width:min(230px,62vw); height:auto; display:block; margin-bottom:4px; } .foot h4{ font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:12px; opacity:.6; margin-bottom:18px; } .foot a{ display:block; opacity:.85; padding:5px 0; transition:opacity .2s; } .foot a:hover{ opacity:1; } .foot__social{ display:flex; gap:14px; margin-top:8px; } .foot__social a{ width:40px; height:40px; border:1px solid rgba(246,240,206,.3); border-radius:50%; display:grid; place-items:center; } .foot__social a:hover{ background:var(--coral); border-color:var(--coral); } .foot__bar{ max-width:var(--maxw); margin:48px auto 0; padding-top:24px; border-top:1px solid rgba(246,240,206,.16); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; opacity:.6; } .foot__disc{ flex-basis:100%; order:5; margin-top:8px; line-height:1.55; } @media (max-width:760px){ .foot__grid{ grid-template-columns:1fr; gap:32px; } } /* ---------- rotating witty headline ---------- */ .rotator{ display:inline-block; position:relative; } .rotator__line{ position:absolute; left:0; top:0; opacity:0; transform:translateY(.4em); transition:opacity .7s, transform .7s; white-space:nowrap; } .rotator__line.is-active{ position:relative; opacity:1; transform:none; } .rotator__line em{ font-style:italic; color:#FF8068; } /* dashed flight path helper */ .dash{ stroke-dasharray:6 9; stroke-linecap:round; fill:none; } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:none; } /* utility */ .center{ text-align:center; } .muted{ color:var(--slate); } /* visually-hidden but available to screen readers & search engines */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .tag{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:#FF8068; background:rgba(255,128,104,.12); padding:7px 14px; border-radius:100px; } .section{ padding:clamp(72px,10vw,140px) 0; } /* ---------- mobile polish ---------- */ @media (max-width:880px){ /* comfortable tap targets in the slide-out menu */ .nav__links a{ padding:6px 0; } .nav__links .btn{ padding:14px 26px; } } @media (max-width:560px){ body{ font-size:18px; } .rotator__line{ white-space:normal; } .nav{ padding:8px var(--pad); } .foot__bar{ font-size:12px; gap:8px; } .foot__lede{ font-size:clamp(24px,7vw,32px); } .section{ padding:clamp(56px,12vw,90px) 0; } }