/* ═══════════════════════════════════════════════════════════ SHARIF LAW — website mockup v4 Type: Jost (display) · Poppins (body) · Montserrat (labels) Colour: warm ivory ground · navy + brass from the logo ═══════════════════════════════════════════════════════════ */ :root{ --ivory:#F7F4EF; --ivory-2:#EFEAE1; --ivory-3:#E4DCCF; --white:#fff; --navy:#1B3A5C; --navy-deep:#12283F; --navy-ink:#0D1F32; --steel:#1A6291; --steel-lt:#4685AF; --gold:#C9973F; --gold-lt:#E3BC72; --gold-pale:#FBF0DA; --gold-pale-2:#EFDCB2; --gold-deep:#9C711C; --text:#232E3B; --text-2:#5B6877; --text-3:#8B96A4; --on-dark:#DEE7F1; --on-dark-2:#9CB0C6; --alert:#B4472C; --line:#E3DDD3; --line-2:#EDE8DF; --sh-s:0 1px 2px rgba(35,45,60,.05),0 3px 8px rgba(35,45,60,.05); --sh-m:0 2px 4px rgba(35,45,60,.04),0 12px 26px -10px rgba(35,45,60,.16); --sh-l:0 3px 6px rgba(35,45,60,.05),0 26px 50px -22px rgba(27,58,92,.28); --sh-x:0 40px 80px -32px rgba(18,40,63,.4); /* 3D inset shells */ --inset-lite:inset 0 2px 4px rgba(255,255,255,.95), inset 0 -3px 10px rgba(27,58,92,.09), inset 0 0 0 1px rgba(255,255,255,.6); --inset-dark:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -14px 28px -14px rgba(0,0,0,.55); --wrap:1220px; --ease:cubic-bezier(.22,.68,.32,1); /* Typefaces. Change these in Site Settings → Design, or here. */ --font-display:"Jost",system-ui,sans-serif; /* headings */ --font-body:"Poppins",system-ui,-apple-system,sans-serif; /* body */ --font-label:"Montserrat",system-ui,sans-serif; /* small caps labels */ --fs-body:15.5px; /* base text size */ --h-scale:1; /* multiplies every heading */ /* Letter case for buttons and small-caps labels */ --case-btn:uppercase; --case-label:uppercase; /* Line height, as named tokens. Change one of these in style.css and it applies everywhere that role is used — no need to touch , which would drag every other element with it. */ --lh-flat:1; /* single-line labels, logos, numbers */ --lh-tight:1.15; /* headings */ --lh-snug:1.35; /* short stacked lines: badges, cards */ --lh-body:1.7; /* running paragraphs — the body default*/ --lh-loose:1.85; /* addresses and legal text */ } *{box-sizing:border-box} body{margin:0;background:var(--ivory);color:var(--text); font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;overflow-x:clip} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} h1,h2,h3,h4,.shd{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight); letter-spacing:-.012em;text-wrap:balance;margin:0;color:var(--navy-deep)} p{margin:0} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:28px} .split>*,.book-grid>*,.faq-grid>*,.hero-grid>*,.why-top>*,.team>*, .frow>*,.pick>*,.cred-grid>*,.pa-grid>*,.posts>*,.paths>*{min-width:0} .fld input,.fld select,.fld textarea{max-width:100%} .su input{max-width:100%} [hidden]{display:none!important} /* emphasis — brass, one weight heavier. No italic, no underline. */ h1 em,h2 em,h3 em,.shd em{font-style:italic;font-weight:500;color:var(--gold-deep); text-transform:none;letter-spacing:-.005em} .dark h1 em,.dark h2 em,.dark h3 em,.dark .shd em,.cta-panel .shd em{color:var(--gold-lt);font-style:italic;font-weight:500} /* Utilities — add one of these to any element to set its line height locally. .lh-flat .lh-tight .lh-snug .lh-body .lh-loose */ .lh-flat{line-height:var(--lh-flat)} .lh-tight{line-height:var(--lh-tight)} .lh-snug{line-height:var(--lh-snug)} .lh-body{line-height:var(--lh-body)} .lh-loose{line-height:var(--lh-loose)} /* ── primitives ───────────────────────────────────────────── */ .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label); font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:var(--case-label);color:var(--gold-deep)} .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gold);flex:none} .eyebrow.inv{color:var(--gold-lt)} .lede{font-size:16.5px;line-height:1.78;color:var(--text-2);max-width:62ch} .lede.inv{color:var(--on-dark-2)} .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label); font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:var(--case-btn); padding:15px 27px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s,color .28s,border-color .28s} .btn-gold{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#3A2905; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 5px rgba(120,84,10,.25),0 10px 22px -10px rgba(201,151,63,.8)} .btn-gold:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 5px rgba(120,84,10,.25),0 16px 30px -12px rgba(201,151,63,.9)} .btn-navy{background:var(--navy);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--sh-m)} .btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)} .btn-out{background:rgba(255,255,255,.78);color:var(--navy);border-color:var(--line);box-shadow:var(--sh-s)} .btn-out:hover{background:#fff;border-color:var(--gold);transform:translateY(-2px)} .btn-out.inv{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.26);box-shadow:none} .btn-out.inv:hover{background:rgba(255,255,255,.16);border-color:rgba(227,188,114,.6)} .arw{transition:transform .28s var(--ease)} .btn:hover .arw,.tlink:hover .arw{transform:translateX(4px)} .tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label); font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:var(--case-btn);color:var(--steel)} /* ═══ TOPBAR + FLOATING HEADER ══════════════════════════════ */ .topbar{background:var(--navy-ink);color:#C4D4E6;font-size:12.5px} .topbar .wrap{display:flex;align-items:center;gap:10px 22px;min-height:44px;padding-block:8px;flex-wrap:wrap} .topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .25s} .topbar a:hover{color:var(--gold-lt)} .topbar .r{margin-left:auto;display:flex;gap:22px} .site-header{position:sticky;top:0;z-index:120;padding:16px 0 0;transition:padding .3s var(--ease)} .site-header.stuck{padding-top:10px} .hdr{max-width:1140px;margin-inline:auto;display:flex;align-items:center;gap:26px; padding:9px 9px 9px 22px;border-radius:50px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%); border:1px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 0 #fff,0 18px 38px -24px rgba(27,58,92,.5); transition:background .3s,box-shadow .3s var(--ease)} .site-header.stuck .hdr{background:rgba(255,255,255,.9); box-shadow:inset 0 1px 0 #fff,0 22px 46px -22px rgba(27,58,92,.6)} .logo{display:flex;align-items:center;gap:12px;flex:none} .logo img{height:48px;width:auto;flex:none} .logo .div{width:1px;height:32px;background:linear-gradient(180deg,transparent,var(--gold),transparent);flex:none} .logo .txt{display:flex;flex-direction:column;justify-content:center;gap:3px} .logo .nm{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1; letter-spacing:.15em;text-transform:uppercase;color:var(--navy-deep)} .logo .tg{font-family:var(--font-label);font-size:7.5px;line-height:1;letter-spacing:.2em; text-transform:uppercase;color:var(--text-3);font-weight:700} .nav{display:flex;gap:1px;margin-left:auto} .nav a,.nav .drop>button{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text); padding:10px 15px;border-radius:999px;background:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:6px;transition:color .22s,background .22s} .nav a:hover,.nav .drop:hover>button{color:var(--navy);background:rgba(27,58,92,.06)} .nav a.on{color:var(--gold-deep);background:var(--gold-pale);font-weight:600} .drop{position:relative} .drop-menu{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:620px; background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--sh-l); display:grid;grid-template-columns:1fr 1fr;gap:2px 20px; opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .26s var(--ease)} .drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none} .drop.dismissed .drop-menu{opacity:0!important;visibility:hidden!important;transform:translateY(-6px)!important} .drop-menu a{padding:9px 12px;border-radius:12px;font-size:13.5px;font-weight:400;color:var(--text-2)} .drop-menu a:hover{background:var(--ivory-2);color:var(--navy)} .drop-menu .g{grid-column:1/-1;font-family:var(--font-label);font-size:10px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);padding:14px 12px 5px} .hdr-cta{display:flex;align-items:center;gap:8px;flex:none} /* The burger and the mobile panel live in nav.css. */ /* ═══ SECTION FURNITURE ═════════════════════════════════════ */ .sec{padding:96px 0} .sec.tight{padding:0 0 96px} .sec-head{max-width:66ch;margin-bottom:48px} .sec-head .shd{font-size:calc(clamp(30px,3.7vw,46px) * var(--h-scale,1));margin:20px 0 18px} .sec-head.ctr{margin-inline:auto;text-align:center} .sec-head.ctr .eyebrow{justify-content:center} .sec-head.ctr .lede{margin-inline:auto} .phero{position:relative;overflow:hidden; margin-top:calc(var(--hdrH,98px) * -1);padding:calc(var(--hdrH,98px) + 44px) 0 84px; background:var(--ivory)} .phero::before{content:"";position:absolute;inset:0; background:radial-gradient(52% 66% at 84% -6%,rgba(201,151,63,.26),transparent 68%), radial-gradient(46% 58% at 2% 74%,rgba(26,98,145,.15),transparent 72%), radial-gradient(34% 44% at 52% 108%,rgba(201,151,63,.12),transparent 70%)} .phero .wrap{position:relative;z-index:2} .phero .shd{font-size:calc(clamp(32px,4.2vw,52px) * var(--h-scale,1));margin:16px 0 18px;max-width:20ch} .crumb{display:flex;gap:9px;align-items:center;font-family:var(--font-label);font-size:11px; font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px} .crumb a:hover{color:var(--gold-deep)} .frame{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--sh-l); border:1px solid rgba(255,255,255,.8)} .frame img{width:100%;height:100%;object-fit:cover;object-position:center 28%} .dummy{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--font-label); font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:5px 9px;border-radius:999px;background:rgba(13,31,50,.55);color:#EFE6D4; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* ═══ smoother grounds — tints fade out, nothing stops on a line ═══ */ /* A tint clipped by overflow:hidden leaves a razor edge. Masking each overlay guarantees it has reached zero by the time it meets the next section, whatever the gradient inside it is doing. */ .stage::before,.tst::before,.orbit::before{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%)} .hero::before,.phero::before{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 130px),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 130px),transparent 100%)} .stage{background:var(--ivory)} .stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(62% 72% at 50% 50%,rgba(224,205,170,.58),transparent 74%)} .tst{background:var(--ivory)} .tst::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(72% 80% at 50% 46%,rgba(226,208,176,.55),transparent 76%), radial-gradient(38% 44% at 88% 82%,rgba(26,98,145,.08),transparent 72%)} /* ═══ FOOTER ════════════════════════════════════════════════ */ .site-footer{background:var(--navy-ink);color:var(--on-dark-2);padding:70px 0 0} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:46px;padding-bottom:54px} .f-logo img{height:100px;width:auto;margin-bottom:20px} .f-brand p{font-size:14px;max-width:34ch;line-height:var(--lh-body)} .f-areas{margin-top:18px;font-family:var(--font-label);font-size:10px;letter-spacing:.13em; text-transform:uppercase;color:#7B90A8;line-height:2.2;font-weight:700} .fcol h4{font-family:var(--font-label);font-size:10px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-lt);margin:0 0 18px} .fcol ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .fcol a{font-size:14px;transition:color .22s} .fcol a:hover{color:var(--gold-lt)} .fcol address{font-style:normal;font-size:14px;line-height:var(--lh-loose)} .fcol address a{display:block} .socials{display:flex;gap:9px;margin-top:20px} .socials a{width:38px;height:38px;border-radius:999px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:all .3s var(--ease)} .socials a:hover{color:var(--gold-lt);border-color:rgba(201,151,63,.45);transform:translateY(-2px)} .f-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0 34px;display:flex; justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;color:#7B90A8} .f-bottom .legal{max-width:72ch;line-height:var(--lh-body)} /* ═══ reveal ════════════════════════════════════════════════ */ .reveal{opacity:1;transform:none} /* Reveal states live in anim.css. */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}} /* Responsive rules live in responsive.css, which is enqueued AFTER every section stylesheet. They cannot live here: a section sheet that redefines the same selector loads later and wins on equal specificity, which silently killed every grid collapse on phones. */