/* ========================================================================== Legal Sharmaji Advisors — Design System Palette: deep blue + bright blue accent, white/paper surfaces Type: Playfair Display (display) + Inter (body/UI) Signature motif: the "docket" — ruled letterhead rules + folder-tab cards ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap'); :root{ --navy-950:#051230; --navy-900:#0A2A6E; --navy-800:#123C8F; --navy-700:#1B4FB8; --gold-400:#4E8EF7; --gold-500:#2563EB; --gold-600:#1741A6; --ivory-50:#FFFFFF; --ivory-100:#EEF3FC; --ink-900:#101A2E; --ink-700:#2C3E5C; --slate-500:#5B6B85; --slate-300:#C4D0E6; --line:#1B4FB8; --line-light:#DCE5F7; --success:#3F8F5F; --error:#C0503E; --font-display:'Playfair Display', Georgia, serif; --font-body:'Inter', Arial, sans-serif; --radius:6px; --shadow-card:0 10px 30px rgba(10,42,110,0.12); --shadow-deep:0 20px 50px rgba(10,42,110,0.35); } *{margin:0;padding:0;box-sizing:border-box} /* ========================================================================== Admin panel override — Red / Black / Blue (scoped to .admin-theme, applied to the admin panel's only — public site and client/staff portals are unaffected and keep the blue & white palette above). ========================================================================== */ .admin-theme{ --navy-950:#0A0A0A; --navy-900:#161616; --navy-800:#222222; --navy-700:#2E2E2E; --gold-400:#F04452; --gold-500:#D62839; --gold-600:#9E1523; --ivory-50:#FFFFFF; --ivory-100:#F3F4F8; --ink-900:#141821; --ink-700:#333B4D; --slate-500:#626B7E; --slate-300:#C7CCD3; --line:#1E3A8A; --line-light:#E2E6F0; } .admin-theme .dash-nav a.active{ background:rgba(37,99,235,0.16); border-left-color:#2563EB; color:#5B93F5; } .admin-theme .stat-card{border-top-color:#2563EB;} .admin-theme .dash-topbar{border-bottom-color:#2563EB;} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--ivory-50); color:var(--ink-900); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} ul{list-style:none} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.2; color:var(--navy-900); } .container{width:92%;max-width:1180px;margin:0 auto} .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:14px; } .eyebrow::before{ content:""; width:28px;height:1px; background:var(--gold-500); } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } /* ---------------- Reveal on scroll ---------------- */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; } .reveal.is-visible{opacity:1;transform:none} /* ---------------- Top strip ---------------- */ .topbar{ background:var(--navy-950); color:var(--slate-300); font-size:12.5px; padding:7px 0; letter-spacing:.3px; } .topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; } .topbar a{color:var(--gold-400)} /* ---------------- Header / letterhead ---------------- */ header{ background:var(--ivory-50); border-bottom:1px solid var(--line-light); position:sticky; top:0; z-index:1000; } .nav{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; } .brand{ display:flex; align-items:center; gap:10px; min-width:0; } .brand img{ height:54px; width:54px; object-fit:cover; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px var(--ivory-50), 0 0 0 3px rgba(198,161,91,.5), 0 3px 6px rgba(10,20,50,.28); } .brand-text{min-width:0;overflow:hidden;line-height:1.2;} .brand-text .name{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--navy-900); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(60vw, 340px); } .brand-text .name-line2{ font-family:var(--font-display); font-size:11.5px; font-weight:700; color:var(--gold-600); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(60vw, 340px); } .brand-text .tagline{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold-600); } .menu-toggle{ display:none; font-size:24px; cursor:pointer; color:var(--navy-900); background:none; border:none; } .nav-links{ display:flex; align-items:center; gap:30px; } .nav-links a{ position:relative; font-size:14.5px; font-weight:500; color:var(--ink-700); padding:4px 0; } .nav-links a::after{ content:""; position:absolute; left:0;bottom:-2px; width:0;height:2px; background:var(--gold-500); transition:width .25s ease; } .nav-links a:hover::after, .nav-links a.active::after{width:100%} .nav-links a.active{color:var(--navy-900);font-weight:600} .nav-links .btn{padding:9px 20px;font-size:13.5px} /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn-gold{ background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(198,161,91,0.35)} .btn-outline{ background:transparent; border-color:var(--gold-500); color:var(--gold-600); } .btn-outline-light{ background:transparent; border-color:rgba(216,184,118,0.6); color:var(--ivory-50); } .btn-outline:hover, .btn-outline-light:hover{background:rgba(198,161,91,0.1)} .btn-navy{background:var(--navy-900);color:var(--ivory-50)} .btn-navy:hover{background:var(--navy-700)} .btn-block{width:100%} .btn-sm{padding:8px 16px;font-size:13px} .btn-danger{background:var(--error);color:#fff} /* ---------------- Hero ---------------- */ .hero{ background: radial-gradient(ellipse at top right, rgba(198,161,91,0.14), transparent 55%), linear-gradient(160deg,var(--navy-950),var(--navy-900) 60%,var(--navy-800)); color:var(--ivory-50); padding:100px 0 90px; position:relative; overflow:hidden; } .hero .container{ display:flex; align-items:center; gap:60px; } .hero-copy{flex:1.1} .hero-copy h1{ color:#fff; font-size:46px; max-width:620px; margin-bottom:18px; } .hero-copy h1 em{color:var(--gold-400);font-style:normal} .hero-copy p{ color:var(--slate-300); font-size:17px; max-width:520px; margin-bottom:32px; } .hero-actions{display:flex;gap:16px;flex-wrap:wrap} .hero-stats{ display:flex; gap:36px; margin-top:46px; padding-top:26px; border-top:1px solid rgba(216,184,118,0.25); } .hero-stats div strong{ display:block; font-family:var(--font-display); font-size:26px; color:var(--gold-400); } .hero-stats div span{font-size:12.5px;color:var(--slate-300);letter-spacing:.4px} /* The seal — signature element */ .hero-seal{ flex:0 0 220px; display:flex; align-items:center; justify-content:center; } .seal{ width:210px;height:210px; border-radius:50%; border:2px solid var(--gold-500); display:flex; align-items:center; justify-content:center; position:relative; animation:seal-in 1s ease both; } .seal::after{ content:""; position:absolute; inset:-14px; border:1px solid rgba(216,184,118,0.35); border-radius:50%; animation:seal-pulse 2.8s ease-out infinite; } @keyframes seal-pulse{ 0%{transform:scale(0.92);opacity:.9;} 100%{transform:scale(1.18);opacity:0;} } .seal::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(216,184,118,0.5); border-radius:50%; } .seal-inner{ text-align:center; color:var(--gold-400); font-family:var(--font-display); } .seal-inner .est{display:block;font-size:11px;letter-spacing:2px;color:var(--slate-300);margin-top:6px} @keyframes seal-in{ from{opacity:0;transform:scale(.85) rotate(-6deg)} to{opacity:1;transform:scale(1) rotate(0)} } /* Page header for inner pages */ .page-hero{ background:linear-gradient(160deg,var(--navy-950),var(--navy-800)); color:#fff; padding:70px 0; text-align:center; } .page-hero .eyebrow{color:var(--gold-400)} .page-hero .eyebrow::before{background:var(--gold-400)} .page-hero h1{color:#fff;font-size:36px} .page-hero p{color:var(--slate-300);margin-top:10px} /* ---------------- Sections ---------------- */ .section{padding:88px 0} .section-tight{padding:56px 0} .section-dark{background:var(--navy-950);color:var(--ivory-100)} .section-dark h2, .section-dark h3{color:#fff} .section-alt{background:var(--ivory-100)} .section-head{max-width:640px;margin:0 auto 50px;text-align:center} .section-head.left{margin:0 0 50px;text-align:left} .section-head h2{font-size:32px;margin-bottom:12px} .section-head p{color:var(--slate-500)} .section-dark .section-head p{color:var(--slate-300)} /* ---------------- About / split rows ---------------- */ .split{ display:flex; gap:56px; align-items:center; } .split.reverse{flex-direction:row-reverse} .split-text{flex:1} .split-media{flex:1} .split-media img{border-radius:var(--radius);box-shadow:var(--shadow-card)} .split-text .eyebrow{margin-bottom:10px} .split-text h2{font-size:30px;margin-bottom:16px} .split-text p{color:var(--slate-500);margin-bottom:14px} .section-dark .split-text p{color:var(--slate-300)} .check-list li{ display:flex; gap:10px; margin-top:10px; color:var(--ink-700); font-size:14.5px; } .section-dark .check-list li{color:var(--ivory-100)} .check-list li::before{ content:"✓"; color:var(--gold-500); font-weight:700; } /* ---------------- Docket / practice-area folder cards ---------------- */ .docket-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; } .docket-card{ background:var(--ivory-50); border:1px solid var(--line-light); border-top:4px solid var(--gold-500); border-radius:var(--radius); padding:28px 24px; position:relative; transition:transform .25s ease, box-shadow .25s ease; } .docket-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)} .docket-tab{ display:inline-block; font-family:var(--font-body); font-size:11px; letter-spacing:1.4px; font-weight:700; color:var(--gold-600); background:var(--ivory-100); padding:4px 10px; border-radius:3px; margin-bottom:14px; } .docket-card h3{font-size:19px;margin-bottom:8px} .docket-card p{color:var(--slate-500);font-size:14.5px} /* ---------------- Accordion (core values) ---------------- */ .accordion-item{ border-bottom:1px solid var(--line-light); } .accordion-item button{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 4px; background:none; border:none; text-align:left; font-family:var(--font-display); font-size:18px; color:var(--navy-900); cursor:pointer; } .accordion-item .plus{color:var(--gold-500);font-size:22px;transition:transform .25s ease} .accordion-item.open .plus{transform:rotate(45deg)} .acc-content{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--slate-500); font-size:14.5px; } .acc-content-inner{padding:0 4px 20px} /* ---------------- Cards: team / blog / testimonials ---------------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; } .card{ background:var(--ivory-50); border:1px solid var(--line-light); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)} .card img{width:100%;height:220px;object-fit:cover} .card.team-card img{object-fit:contain;object-position:center top;background:var(--ivory-100);} .card-body{padding:20px} .card-body h3{font-size:18px;margin-bottom:4px} .card-body .role{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-600);margin-bottom:10px;display:block} .card-body p{color:var(--slate-500);font-size:14px} .card-body .meta{font-size:12px;color:var(--slate-500);margin-bottom:8px;display:block} .card-body .read-more{color:var(--gold-600);font-weight:600;font-size:13.5px;margin-top:10px;display:inline-block} a.team-card-link{ display:block; text-decoration:none; color:inherit; cursor:pointer; } a.team-card-link:hover .read-more{text-decoration:underline;} .testimonial{ background:var(--navy-900); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; color:var(--ivory-100); } .testimonial p.quote{font-style:italic;color:var(--slate-300);margin-bottom:16px} .testimonial .who{font-weight:700;color:var(--gold-400);font-size:14px} /* ---------------- Forms ---------------- */ .form-card{ background:var(--ivory-50); border:1px solid var(--line-light); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-card); max-width:560px; margin:0 auto; } .form-row{margin-bottom:18px} .form-row label{ display:block; font-size:13px; font-weight:600; color:var(--navy-900); margin-bottom:6px; } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} input,textarea,select{ width:100%; padding:13px 14px; border-radius:var(--radius); border:1px solid var(--line-light); background:#fff; color:var(--ink-900); font-family:var(--font-body); font-size:14.5px; } input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(198,161,91,0.18); } textarea{resize:vertical;min-height:110px} .form-help{font-size:12.5px;color:var(--slate-500);margin-top:6px} .form-foot{margin-top:10px;font-size:13.5px;color:var(--slate-500);text-align:center} .form-foot a{color:var(--gold-600);font-weight:600} /* ---------------- Alerts / badges ---------------- */ .alert{ padding:13px 18px; border-radius:var(--radius); font-size:14px; margin-bottom:18px; border:1px solid transparent; } .alert-success{background:#EAF5EE;color:#256B41;border-color:#BFE3CC} .alert-error{background:#FBEAE7;color:#9A3A2B;border-color:#F1C6BE} .alert-info{background:#EAF1FB;color:#274B7D;border-color:#C9DBF3} .badge{ display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.3px; } .badge-pending{background:#FCF1DC;color:#9A6A0A} .badge-ongoing{background:#E3EEFB;color:#215384} .badge-approved{background:#E4F4E9;color:#256B41} .badge-closed{background:#E7E7EA;color:#4A4E58} .badge-rejected{background:#FBE7E4;color:#9A3A2B} /* ---------------- Popup / disclaimer ---------------- */ .popup{ position:fixed;inset:0; background:rgba(10,21,38,0.82); display:flex;align-items:center;justify-content:center; z-index:9999; padding:20px; } .popup-box{ background:var(--ivory-50); color:var(--ink-900); padding:34px; border-radius:var(--radius); max-width:480px; border-top:4px solid var(--gold-500); } .popup-box h2{margin-bottom:12px} .popup-box p{color:var(--slate-500);font-size:14.5px;margin-bottom:20px} /* ---------------- Footer ---------------- */ footer{background:var(--navy-950);color:var(--slate-300);padding:60px 0 0} .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(216,184,118,0.15); } .footer-map{ margin-top:28px; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(216,184,118,0.15); } .footer-map iframe{display:block;width:100%;height:200px;border:0;filter:grayscale(.15);} .footer-grid h4{color:var(--gold-400);font-size:15px;margin-bottom:16px;font-family:var(--font-body);letter-spacing:.5px} .footer-grid p{font-size:13.5px;color:var(--slate-300);margin-bottom:10px} .footer-grid ul li{margin-bottom:9px;font-size:13.5px} .footer-grid ul li a:hover{color:var(--gold-400)} .footer-brand .name{font-family:var(--font-display);color:#fff;font-size:20px;margin-bottom:10px} .social-links{display:flex;gap:10px;margin-top:18px;} .social-links a{ width:36px;height:36px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(216,184,118,0.3); border-radius:50%; color:var(--gold-400); transition:background .2s ease, transform .2s ease; } .social-links a:hover{background:rgba(216,184,118,0.15);transform:translateY(-2px);} .footer-bottom{ display:flex;justify-content:space-between;align-items:center; padding:20px 0;font-size:12.5px;color:var(--slate-500);flex-wrap:wrap;gap:8px; } /* ---------------- Utility ---------------- */ .text-center{text-align:center} .mt-24{margin-top:24px} .empty-state{ text-align:center; padding:50px 20px; color:var(--slate-500); } .empty-state .glyph{font-size:34px;margin-bottom:10px;color:var(--gold-500)} /* ---------------- Tables (portal/admin) ---------------- */ .table-wrap{overflow-x:auto;background:#fff;border-radius:var(--radius);border:1px solid var(--line-light)} table{width:100%;border-collapse:collapse;font-size:14px} table th{ text-align:left; background:var(--ivory-100); color:var(--navy-900); padding:13px 16px; font-size:12px; letter-spacing:.4px; text-transform:uppercase; } table td{padding:13px 16px;border-top:1px solid var(--line-light);color:var(--ink-700)} table tr:hover td{background:#FAF9F6} /* ---------------- Hero background pattern (subtle "ruled paper" texture) ---------------- */ .hero::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(transparent, transparent 38px, rgba(216,184,118,0.055) 39px, transparent 40px); pointer-events:none; } .hero::after{ content:""; position:absolute; top:-120px; right:-120px; width:420px;height:420px; background:radial-gradient(circle, rgba(198,161,91,0.18), transparent 70%); border-radius:50%; pointer-events:none; } .hero .container{position:relative;z-index:1;} /* ---------------- Testimonial carousel ---------------- */ .carousel{position:relative;max-width:680px;margin:0 auto;overflow:hidden;} .carousel-track{display:flex;transition:transform .5s ease;} .carousel-slide{flex:0 0 100%;padding:4px;} .carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;} .carousel-dots button{ width:9px;height:9px;border-radius:50%; border:none;background:var(--line-light);cursor:pointer;padding:0; transition:background .2s ease, transform .2s ease; } .carousel-dots button.active{background:var(--gold-500);transform:scale(1.2);} /* ---------------- WhatsApp floating button ---------------- */ .whatsapp-float{ position:fixed; right:22px; bottom:22px; width:56px;height:56px; background:#25D366; color:#fff; border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(37,211,102,0.45); z-index:900; transition:transform .2s ease; } .whatsapp-float:hover{transform:scale(1.08);} /* ---------------- Scroll-to-top button ---------------- */ .scroll-top-btn{ position:fixed; right:22px; bottom:90px; width:44px;height:44px; background:var(--navy-950); color:var(--gold-400); border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(10,21,38,0.3); z-index:900; border:none;cursor:pointer; opacity:0;pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .scroll-top-btn.visible{opacity:1;pointer-events:auto;} .scroll-top-btn:hover{transform:translateY(-3px);} /* ---------------- Sticky mobile CTA bar ---------------- */ .mobile-cta-bar{ display:none; position:fixed; left:0;right:0;bottom:0; background:var(--navy-950); padding:12px 16px; z-index:950; box-shadow:0 -6px 20px rgba(10,21,38,0.25); } .mobile-cta-bar a{ display:block;text-align:center; background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); font-weight:700;font-size:14px; padding:12px;border-radius:8px; } @media(max-width:768px){ .mobile-cta-bar{display:block;} body{padding-bottom:64px;} .whatsapp-float{bottom:86px;} .scroll-top-btn{bottom:154px;} .chat-launcher{bottom:218px;} .chat-window{bottom:284px;} } /* ---------------- Animated counters ---------------- */ .hero-stats div strong{font-variant-numeric:tabular-nums;} /* ---------------- Password show/hide toggle ---------------- */ .password-wrap{position:relative;} .password-wrap input{padding-right:44px;} .toggle-password{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none;border:none;cursor:pointer; color:var(--slate-500); padding:4px; display:flex; } .toggle-password:hover{color:var(--navy-900);} .toggle-password.showing{color:var(--gold-600);} /* ---------------- Back link ---------------- */ .back-link{ display:inline-flex;align-items:center;gap:6px; font-size:13.5px;font-weight:600;color:var(--slate-500); margin-bottom:18px;cursor:pointer; } .back-link:hover{color:var(--navy-900);} /* ---------------- Draft badge ---------------- */ .badge-draft{background:#F1E9FB;color:#6A3FA0;} /* ---------------- Logged-in account chip (public nav) ---------------- */ .nav-account{ display:flex;align-items:center;gap:10px; padding:6px 14px 6px 6px; border:1px solid var(--line-light); border-radius:30px; } .nav-account .avatar{ width:28px;height:28px;border-radius:50%; background:var(--navy-900);color:var(--gold-400); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700; } .nav-account .name{font-size:13.5px;font-weight:600;color:var(--navy-900);} .nav-account a.logout-link{font-size:12.5px;color:var(--error);font-weight:600;margin-left:4px;} /* ---------------- Payment QR block (invoice) ---------------- */ .pay-block{ margin-top:20px;padding-top:20px;border-top:1px dashed var(--line); display:flex;gap:20px;align-items:center;flex-wrap:wrap; } .pay-block img{border:1px solid var(--line);border-radius:8px;} .pay-block .pay-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-600);font-weight:700;margin-bottom:6px;} /* ---------------- Live chat widget ---------------- */ .chat-launcher{ position:fixed; right:22px; bottom:154px; width:56px;height:56px; background:var(--navy-900); color:var(--gold-400); border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px rgba(10,42,110,0.35); z-index:900; border:none;cursor:pointer; transition:transform .2s ease; } .chat-launcher:hover{transform:scale(1.08);} .chat-launcher .badge-dot{ position:absolute;top:-2px;right:-2px; width:12px;height:12px;border-radius:50%; background:var(--error);border:2px solid #fff; display:none; } .chat-window{ position:fixed; right:22px; bottom:220px; width:320px; max-width:88vw; height:420px; max-height:65vh; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(10,21,38,0.3); display:none; flex-direction:column; overflow:hidden; z-index:901; } .chat-window.open{display:flex;} .chat-window-head{ background:var(--navy-900);color:#fff; padding:14px 16px; display:flex;justify-content:space-between;align-items:center; font-weight:700;font-size:14px; } .chat-window-head button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;} .chat-body{flex:1;overflow-y:auto;padding:14px;background:var(--ivory-100);display:flex;flex-direction:column;gap:8px;} .chat-msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;} .chat-msg.visitor{align-self:flex-end;background:var(--gold-500);color:#fff;border-bottom-right-radius:2px;} .chat-msg.staff{align-self:flex-start;background:#fff;border:1px solid var(--line-light);border-bottom-left-radius:2px;} .chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line-light);background:#fff;} .chat-input-row input{flex:1;padding:9px 12px;font-size:13.5px;} .chat-input-row button{background:var(--navy-900);color:#fff;border:none;border-radius:6px;width:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;} .chat-name-gate{padding:16px;text-align:center;} .chat-name-gate input{margin-bottom:10px;} /* ---------------- Star rating widget ---------------- */ .star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;} .star-rating input{display:none;} .star-rating label{ font-size:28px; color:var(--line-light); cursor:pointer; transition:color .15s ease; } .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label{color:var(--gold-500);} .star-display{color:var(--gold-500);font-size:14px;letter-spacing:1px;} .star-display .empty{color:var(--line-light);} /* ---------------- Contact info card ---------------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;} .contact-info-card{ background:var(--navy-950); color:var(--ivory-100); border-radius:var(--radius); padding:36px; } .contact-info-card h3{color:#fff;font-size:20px;margin-bottom:22px;} .contact-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start;} .contact-row:last-child{margin-bottom:0;} .contact-row .icon-badge{ flex-shrink:0; width:42px;height:42px; border-radius:50%; background:rgba(216,184,118,0.15); color:var(--gold-400); display:flex;align-items:center;justify-content:center; } .contact-row .label{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:4px;} .contact-row .value{font-size:14.5px;color:var(--ivory-100);line-height:1.6;} .contact-row .value a{color:var(--ivory-100);} .contact-row .value a:hover{color:var(--gold-400);} .map-embed{ border-radius:var(--radius); overflow:hidden; margin-top:24px; border:1px solid var(--line); } .map-embed iframe{display:block;width:100%;height:280px;border:0;} @media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} } /* ---------------- Simple bar charts (reports) ---------------- */ .barchart{display:flex;flex-direction:column;gap:12px;} .barchart-row{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:12px;font-size:13px;} .barchart-label{color:var(--ink-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .barchart-track{background:var(--ivory-100);border-radius:20px;height:14px;overflow:hidden;} .barchart-fill{height:100%;background:linear-gradient(90deg,var(--gold-400),var(--gold-600));border-radius:20px;} .barchart-fill.navy{background:linear-gradient(90deg,var(--navy-700),var(--navy-950));} .barchart-value{text-align:right;font-weight:700;color:var(--navy-900);font-size:13px;} /* ---------------- Case diary / timeline ---------------- */ .timeline{position:relative;padding-left:26px} .timeline::before{ content:""; position:absolute; left:6px;top:6px;bottom:6px; width:2px; background:var(--line-light); } .timeline-item{position:relative;padding-bottom:26px} .timeline-item:last-child{padding-bottom:0} .timeline-item::before{ content:""; position:absolute; left:-26px;top:4px; width:13px;height:13px; border-radius:50%; background:var(--gold-500); border:2px solid var(--ivory-50); box-shadow:0 0 0 2px var(--gold-500); } .timeline-item.is-next::before{background:var(--navy-900);box-shadow:0 0 0 2px var(--navy-900)} .timeline-date{font-size:12.5px;font-weight:700;color:var(--navy-900);letter-spacing:.3px;margin-bottom:4px} .timeline-note{font-size:14px;color:var(--slate-500)} .timeline-next{ display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--gold-600); background:var(--ivory-100); padding:3px 10px; border-radius:20px; } /* ========================================================================== Dashboard shell — shared by client portal and admin panel ========================================================================== */ .dash-shell{display:flex;min-height:100vh;background:var(--ivory-100)} .dash-sidebar{ width:250px; flex-shrink:0; background:var(--navy-950); color:var(--slate-300); padding:26px 0; position:fixed; top:0;bottom:0;left:0; overflow-y:auto; } .dash-sidebar .brand{ display:flex;align-items:center;gap:10px; padding:0 22px 22px; margin-bottom:10px; border-bottom:1px solid rgba(216,184,118,0.15); min-width:0; } .dash-sidebar .brand img{ height:46px;width:46px;object-fit:cover;border-radius:50%;flex-shrink:0; box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 0 0 3px rgba(198,161,91,.55), 0 3px 6px rgba(0,0,0,.4); } .dash-sidebar .brand > div{min-width:0;overflow:hidden;line-height:1.25;} .dash-sidebar .brand .name{ font-family:var(--font-display);color:#fff;font-size:12.5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dash-sidebar .brand .name-line2{ font-family:var(--font-display);color:var(--gold-400);font-size:10.5px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dash-sidebar .brand .role-tag{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate-400);margin-top:2px;display:block;} .dash-nav a{ display:flex;align-items:center;gap:12px; padding:12px 22px; color:var(--slate-300); font-size:14px; font-weight:500; border-left:3px solid transparent; } .dash-nav a:hover{background:rgba(255,255,255,0.04);color:#fff} .dash-nav a.active{ background:rgba(198,161,91,0.12); border-left-color:var(--gold-500); color:var(--gold-400); } .dash-nav .icon{display:inline-flex;align-items:center;justify-content:center;width:18px;flex-shrink:0} .dash-nav .icon svg{vertical-align:middle;} .dash-main{margin-left:250px;flex:1;min-width:0} .dash-topbar{ background:#fff; border-bottom:1px solid var(--line-light); padding:16px 30px; display:flex; justify-content:space-between; align-items:center; position:sticky;top:0;z-index:100; } .dash-topbar h1{font-size:20px} .dash-topbar .user-chip{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--ink-700)} .dash-topbar .user-chip a{color:var(--error);font-weight:600} .dash-content{padding:30px} .dash-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:30px; } .stat-card{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding:22px; border-top:3px solid var(--gold-500); } a.stat-card{display:block;text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease;} a.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);} .stat-card .num{font-family:var(--font-display);font-size:30px;color:var(--navy-900)} .stat-card .label{font-size:13px;color:var(--slate-500);margin-top:4px} .panel{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); margin-bottom:26px; } .panel-head{ padding:18px 22px; border-bottom:1px solid var(--line-light); display:flex; justify-content:space-between; align-items:center; } .panel-head h2{font-size:17px} .panel-body{padding:22px} .dash-menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy-900)} @media(max-width:900px){ .dash-sidebar{ transform:translateX(-100%); transition:transform .25s ease; z-index:2000; } .dash-sidebar.open{transform:translateX(0)} .dash-main{margin-left:0} .dash-menu-toggle{display:block} } @media(max-width:600px){ .dash-topbar{ padding:12px 16px; flex-wrap:wrap; gap:10px; } .dash-topbar h1{font-size:17px;} .dash-topbar .user-chip{font-size:13px;gap:10px;} .dash-content{padding:16px;} .panel-head{padding:14px 16px;flex-wrap:wrap;gap:8px;} .panel-body{padding:16px;} .dash-stats{grid-template-columns:1fr 1fr;gap:12px;} .stat-card{padding:16px;} .stat-card .num{font-size:24px;} } /* ---------------- Mobile ---------------- */ @media(max-width:900px){ .hero .container{flex-direction:column;text-align:center} .hero-actions{justify-content:center} .hero-stats{justify-content:center;flex-wrap:wrap} .split, .split.reverse{flex-direction:column} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:480px){ .brand img{height:44px;width:44px;} .brand-text .name{font-size:13px;max-width:52vw;} .brand-text .name-line2{font-size:10px;max-width:52vw;} .topbar .container{font-size:11px;} } @media(max-width:768px){ .menu-toggle{display:block} .nav-links{ display:none; position:absolute; top:100%;left:0;right:0; background:var(--ivory-50); flex-direction:column; align-items:flex-start; padding:20px 6%; border-bottom:1px solid var(--line-light); gap:16px; } .nav-links.active{display:flex} .form-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .hero-copy h1{font-size:34px} }