/* ===================================================================== ROWEL LAND LAW FIRM — MODERN BLACK & GOLD DESIGN SYSTEM v1.0 | Loaded last in to override template + inline styles. Palette: deep muted black surfaces, antique-gold accents. ===================================================================== */ :root { --ink-900: #08080a; /* deepest background */ --ink-800: #0d0d10; /* base background */ --ink-700: #131318; /* raised surface */ --ink-600: #1b1b21; /* card surface */ --ink-500: #26262e; /* hairline / border */ --line: rgba(255,255,255,.08); --gold: #C29B57; /* primary gold */ --gold-bright: #E2C277; /* highlight gold */ --gold-soft: #D9B978; --cream: #F2E8C4; /* warm cream */ --text: #C9C9D2; /* body text */ --text-dim: #8A8A94; /* muted text */ --white: #FFFFFF; --grad-gold: linear-gradient(135deg, #E2C277 0%, #C29B57 45%, #A87E3C 100%); --grad-surface: linear-gradient(180deg, rgba(38,38,46,.55) 0%, rgba(19,19,24,.55) 100%); --shadow-card: 0 18px 50px -20px rgba(0,0,0,.85); --shadow-gold: 0 14px 40px -12px rgba(194,155,87,.45); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --ease: cubic-bezier(.22,.61,.36,1); } /* ----------------------------------------------------------------- BASE */ html { scroll-behavior: smooth; } body { background-color: var(--ink-800) !important; color: var(--text) !important; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* layered ambient glow behind everything */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 600px at 85% -5%, rgba(194,155,87,.10), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(194,155,87,.06), transparent 55%), var(--ink-900); pointer-events: none; } ::selection { background: var(--gold); color: #000; } /* custom scrollbar */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--ink-900); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), #8f6f37); border-radius: 20px; border: 2px solid var(--ink-900); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); } /* ------------------------------------------------------------- TYPOGRAPHY */ h1,h2,h3,h4,h5,h6,.navbar-brand { font-family: 'Playfair Display', serif !important; color: var(--white) !important; letter-spacing: .2px; } h1 { font-weight: 700 !important; line-height: 1.1 !important; } h2 { font-weight: 700 !important; line-height: 1.18 !important; } p { color: var(--text) !important; line-height: 1.8; } a { transition: color .3s var(--ease); } /* eyebrow / subheading */ .subheading, .heading-section .subheading, .heading-section-white .subheading { color: var(--gold) !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase; font-size: 13px !important; display: inline-flex; align-items: center; gap: 12px; } .subheading::before { content: ""; width: 32px; height: 2px; background: var(--grad-gold); display: inline-block; } .heading-section h2, .heading-section-white h2 { font-size: clamp(28px, 3.4vw, 44px) !important; margin-top: 10px; position: relative; } /* gold gradient text accent helper */ .text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold) !important; } /* rotating hero word — solid bright gold (gradient-clip breaks on child .wrap) */ .txt-rotate, .txt-rotate .wrap { color: var(--gold-bright) !important; -webkit-text-fill-color: var(--gold-bright) !important; background: none !important; } /* --------------------------------------------------------------- BUTTONS */ .btn { font-family: 'Poppins', sans-serif !important; letter-spacing: 1px; border-radius: 50px !important; transition: all .35s var(--ease) !important; } .btn-primary, .subscribe-form .submit { position: relative; overflow: hidden; background: var(--grad-gold) !important; border: none !important; color: #14110a !important; font-weight: 600 !important; text-transform: uppercase; box-shadow: var(--shadow-gold); } .btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transition: left .6s var(--ease); } .btn-primary:hover::after { left: 120%; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -12px rgba(194,155,87,.6); color: #14110a !important; } /* outline / ghost button */ .btn-outline-gold { background: transparent !important; border: 1.5px solid var(--gold) !important; color: var(--gold) !important; font-weight: 600 !important; text-transform: uppercase; } .btn-outline-gold:hover { background: var(--gold) !important; color: #000 !important; } /* small round arrow button on service cards */ .btn-custom { width: 46px; height: 46px; background: transparent !important; color: var(--gold) !important; border: 1px solid var(--gold) !important; border-radius: 50% !important; transition: all .35s var(--ease) !important; } .btn-custom:hover { background: var(--grad-gold) !important; color: #000 !important; transform: rotate(-45deg) scale(1.08); box-shadow: var(--shadow-gold); } /* --------------------------------------------------------------- NAVBAR */ .ftco-navbar-light { background: rgba(8,8,10,.55) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: .9rem !important; padding-bottom: .9rem !important; transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); } .ftco-navbar-light.scrolled.awake, .ftco-navbar-light.scrolled { background: rgba(8,8,10,.92) !important; box-shadow: 0 10px 40px -10px rgba(0,0,0,.8) !important; padding-top: .5rem !important; padding-bottom: .5rem !important; } .navbar-nav .nav-item .nav-link { font-family: 'Poppins', sans-serif !important; font-weight: 500; font-size: 14.5px; letter-spacing: .3px; padding-left: 1rem !important; padding-right: 1rem !important; } .brand-main { background: var(--grad-gold); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; } /* ------------------------------------------------------- HERO (homepage) */ .hero-wrap .overlay { background: linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 45%, rgba(8,8,10,.45) 100%) !important; } .hero-wrap::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 400px at 78% 30%, rgba(194,155,87,.18), transparent 60%); pointer-events:none; } .hero-wrap .slider-text { position: relative; z-index: 2; } .hero-wrap h1 { font-size: clamp(38px, 5.4vw, 72px) !important; margin-bottom: 22px !important; } .hero-wrap .subheading { margin-bottom: 18px; } .hero-wrap p.mb-4 { font-size: 17px; max-width: 560px; color: var(--text) !important; } /* animated gold caret for the rotating text */ .txt-rotate .wrap { border-right: 2px solid var(--gold); padding-right: 4px; } /* ----------------------------------------------- INNER PAGE HERO (hero-2) */ .hero-wrap-2 { height: 56vh !important; min-height: 380px; } .hero-wrap-2 .overlay { background: linear-gradient(180deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.6) 50%, rgba(8,8,10,.9) 100%) !important; } .hero-wrap-2::after { content:""; position:absolute; inset:0; background: radial-gradient(700px 380px at 50% 0%, rgba(194,155,87,.22), transparent 65%); pointer-events:none; } .hero-wrap-2 .ftco-section-name h1, .hero-wrap-2 h1 { font-size: clamp(34px, 4.6vw, 58px) !important; } .hero-wrap-2 .breadcrumbs { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--text-dim) !important; } .hero-wrap-2 .breadcrumbs a { color: var(--gold) !important; } .hero-wrap-2 .breadcrumbs span { color: var(--text-dim) !important; } /* --------------------------------------------------------- SECTION RHYTHM */ .ftco-section { padding: 7em 0; } .bg-light { background: var(--ink-800) !important; } .bg-dark { background: var(--ink-900) !important; } /* --------------------------------------------------- CARDS: SERVICES */ .services-wrap .services { background: var(--grad-surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; padding: 44px 26px !important; box-shadow: var(--shadow-card); backdrop-filter: blur(6px); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease) !important; position: relative; } .services-wrap .services::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-gold); border-radius: var(--r-md) var(--r-md) 0 0; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .services-wrap .services:hover::before { transform: scaleX(1); } .services-wrap .services:hover { transform: translateY(-12px); border-color: rgba(194,155,87,.5) !important; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), var(--shadow-gold); } .services .icon { width: 90px; height: 90px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(194,155,87,.22), rgba(194,155,87,.05)); border: 1px solid rgba(194,155,87,.35); transition: all .4s var(--ease); } .services-wrap .services:hover .icon { transform: rotateY(180deg); background: var(--grad-gold); } .services .icon span { font-size: 38px; color: var(--gold) !important; transition: color .4s; } .services-wrap .services:hover .icon span { color: #000 !important; } .services h3 { color: #fff !important; margin-bottom: 14px; font-size: 21px; } .services p { color: var(--text-dim) !important; font-size: 14.5px; } /* --------------------------------------------------- CARDS: PRACTICE GRID */ .practice, .practice-2, .ftco-practice .practice { background: var(--grad-surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md); padding: 34px 26px !important; transition: all .4s var(--ease); height: 100%; } .practice:hover, .practice-2:hover { transform: translateY(-8px); border-color: rgba(194,155,87,.5) !important; box-shadow: var(--shadow-card); } .practice .icon span, .practice-2 .icon span { color: var(--gold) !important; } .practice h3 a, .practice h3 { color:#fff !important; } .practice:hover h3 a { color: var(--gold) !important; } /* --------------------------------------------------- TEAM FLIP CARDS */ .block-2 { border-radius: var(--r-md); overflow: hidden; } .block-2 .front { border-radius: var(--r-md); border: 1px solid var(--line); } .block-2 .front::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 35%, rgba(8,8,10,.85) 100%); } .block-2 .back { background: var(--grad-surface) !important; border: 1px solid rgba(194,155,87,.45) !important; border-radius: var(--r-md); box-shadow: var(--shadow-card); } .block-2 .back blockquote p { color: var(--cream) !important; font-style: italic; } .block-2 .box { position: relative; z-index: 2; border-radius: 0 0 var(--r-md) var(--r-md); } /* --------------------------------------------------- CASE CARDS */ .case { border-radius: var(--r-md); overflow: hidden; } .case .text { background: var(--grad-surface) !important; border: 1px solid var(--line); backdrop-filter: blur(6px); } .case .text h3 a { color: var(--gold) !important; } .case:hover { box-shadow: var(--shadow-card); } /* --------------------------------------------------- BLOG CARDS */ .blog-entry { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .4s var(--ease); } .blog-entry:hover { transform: translateY(-8px); } .blog-entry .text { background: var(--grad-surface) !important; border: 1px solid var(--line) !important; } .blog-entry .block-20 { transition: transform .6s var(--ease); } .blog-entry:hover .block-20 { transform: scale(1.06); } .blog-entry .text .heading a { color:#fff !important; font-family:'Playfair Display',serif !important; } .blog-entry .text .heading a:hover { color: var(--gold) !important; } .blog-entry .text .topper { background: var(--grad-gold) !important; } .blog-entry .text .topper span { color:#000 !important; } /* --------------------------------------------------- TABS / PILLS */ .nav-pills .nav-link { color:#fff; border:1px solid var(--line); border-radius: 50px; background: var(--ink-700); transition: all .3s var(--ease); } .nav-pills .nav-link.active { background: var(--grad-gold) !important; color:#000 !important; font-weight:600; border-color: transparent; } .tab-content.bg-light { background: var(--ink-700) !important; border:1px solid var(--line); border-radius: var(--r-sm); } /* --------------------------------------------------- STAT COUNTERS */ .ftco-counter, .stats-band { background: linear-gradient(180deg, var(--ink-900), var(--ink-800)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-box { padding: 28px 14px; text-align:center; position:relative; } .stat-box .number, .stat-box .stat-num { font-family:'Playfair Display',serif; font-size: clamp(36px, 4vw, 54px); font-weight: 700; background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; line-height:1; } .stat-box .label { color: var(--text-dim); text-transform:uppercase; letter-spacing:2px; font-size:13px; margin-top:12px; } .stat-box::after { content:""; position:absolute; right:0; top:25%; height:50%; width:1px; background: var(--line); } .stat-box:last-child::after { display:none; } /* numbers used elsewhere (about/years) */ .number { color: var(--gold) !important; } /* "Years of experience" counter — make it pop against dark bg */ .years h4 { display: flex; align-items: baseline; gap: 12px; } .years .number { color: var(--gold-bright) !important; -webkit-text-fill-color: var(--gold-bright) !important; font-family: 'Playfair Display', serif !important; font-size: 56px !important; font-weight: 700 !important; line-height: 1; text-shadow: 0 2px 18px rgba(226,194,119,.45); } /* --------------------------------------------------- CONSULTATION FORM */ .ftco-consultation .overlay { background: rgba(8,8,10,.86) !important; } .ftco-consultation .half { background: var(--grad-surface) !important; border: 1px solid rgba(194,155,87,.3) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-card); backdrop-filter: blur(10px); } .form-control { background: rgba(8,8,10,.6) !important; border: 1px solid var(--ink-500) !important; color:#fff !important; border-radius: var(--r-sm) !important; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .form-control:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(194,155,87,.15) !important; } .form-control::placeholder { color: var(--text-dim) !important; } /* --------------------------------------------------- NEWSLETTER STRIP */ .bg-primary { background: var(--grad-surface) !important; border: 1px solid rgba(194,155,87,.4) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-card); backdrop-filter: blur(8px); } .subscribe-form .form-control { border-radius: 50px 0 0 50px !important; background:#000 !important; } .subscribe-form .submit { border-radius: 0 50px 50px 0 !important; } /* --------------------------------------------------- FOOTER */ .ftco-footer { background: var(--ink-900) !important; border-top:1px solid var(--line); } .ftco-footer .ftco-footer-widget h2 { color:#fff !important; position:relative; padding-bottom:14px; } .ftco-footer .ftco-footer-widget h2::after { content:""; position:absolute; left:0; bottom:0; width:38px; height:2px; background: var(--grad-gold); } .ftco-footer-social li a { border:1px solid var(--line) !important; background: rgba(255,255,255,.04) !important; } .ftco-footer-social li a:hover { background: var(--grad-gold) !important; border-color:transparent !important; color:#000 !important; } /* --------------------------------------------------- SCROLL REVEAL */ [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal][data-reveal-delay="1"] { transition-delay: .12s; } [data-reveal][data-reveal-delay="2"] { transition-delay: .24s; } [data-reveal][data-reveal-delay="3"] { transition-delay: .36s; } /* --------------------------------------------------- FLOATING ACTION BTN */ .fab-stack { position: fixed; right: 22px; bottom: 26px; z-index: 1500; display: flex; flex-direction: column; align-items: center; gap: 14px; } .fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color:#fff; font-size: 20px; text-decoration: none; box-shadow: 0 10px 26px -8px rgba(0,0,0,.7); transform: translateY(14px) scale(.6); opacity: 0; transition: all .4s var(--ease); border: none; cursor: pointer; } .fab-stack.open .fab.fab-child { transform: translateY(0) scale(1); opacity: 1; } .fab-call { background: var(--grad-gold); color:#000; } .fab-line { background: #06C755; } .fab-mail { background: var(--ink-600); border:1px solid rgba(194,155,87,.5); color: var(--gold); } .fab-top { background: var(--ink-600); border:1px solid rgba(194,155,87,.5); color: var(--gold); } .fab:hover { transform: translateY(-3px) scale(1.08); box-shadow: var(--shadow-gold); } .fab-toggle { width: 60px; height: 60px; border-radius: 50%; background: var(--grad-gold); color:#000; font-size: 26px; opacity: 1; transform: none; box-shadow: var(--shadow-gold); position: relative; } .fab-toggle::before { content:""; position:absolute; inset:-6px; border-radius:50%; border: 2px solid rgba(194,155,87,.4); animation: fabPulse 2.4s infinite; } @keyframes fabPulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} } .fab-stack.open .fab-toggle { transform: rotate(135deg); } .fab-toggle .fab-ic { transition: transform .4s var(--ease); } /* back-to-top variant shown after scroll */ .fab-top { display:none; } .fab-top.show { display:flex; } /* --------------------------------------------------- PRELOADER */ #ftco-loader .path { stroke: var(--gold) !important; } /* --------------------------------------------------- MISC POLISH */ .icon-video.popup-youtube { background: var(--grad-gold) !important; color:#000 !important; box-shadow: 0 0 0 0 rgba(194,155,87,.6); animation: ripple 2s infinite; } @keyframes ripple { 0%{box-shadow:0 0 0 0 rgba(194,155,87,.5)} 100%{box-shadow:0 0 0 26px rgba(194,155,87,0)} } img { max-width: 100%; } hr { border-color: var(--line) !important; } /* reduce motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } [data-reveal] { opacity:1 !important; transform:none !important; } } /* --------------------------------------------------- RESPONSIVE */ @media (max-width: 991px) { .ftco-section { padding: 4.5em 0; } .ftco-navbar-light { background: rgba(8,8,10,.95) !important; } .stat-box::after { display:none; } } @media (max-width: 575px) { .fab-stack { right: 16px; bottom: 18px; } .hero-wrap p.mb-4 { font-size: 15.5px; } }