/* ============================================================
HR LAW ASSOCIATES - single stylesheet for the whole site.
Replaces styles-home / styles-about / styles-services /
styles-team / styles-contact / layout.css.
Every page loads only this file:
Written mobile-first throughout: base rules target small
phones, then min-width queries layer up at
576px large phones
768px tablets
992px laptops
1200px full desktop
Media queries sit next to the component they modify rather
than in one block at the end, so each section reads top to
bottom as "phone first, then wider".
Where two pages use the same class name for different things
(.team-grid, .team-card, .founder, .rule-heading) the rules
are scoped with body[data-page="..."]. Every page sets that
attribute; js/layout.js also reads it to mark the active nav
item, so it must stay on .
CONTENTS
01 Tokens & reset
02 Utilities
03 Buttons
04 Section headings & ornaments
05 Chrome: top bar
06 Chrome: header, nav, mega dropdown
07 Chrome: footer
08 Shared: page banner
09 Shared: CTA bands
10 Shared: founder block
11 Home
12 About
13 Legal services (listing)
14 Service detail
15 Our team
16 Contact
17 Latest updates
18 Our clients
19 Floating WhatsApp / call buttons
20 Team / partner profile modal
21 Gallery + lightbox
22 Associates
============================================================ */
/* ============================================================
01 TOKENS & RESET
============================================================ */
:root {
--primary-blue: #0E203A;
--gold: #CDA458;
--gold-hover: #b58d44;
--text-dark: #333333;
--text-light: #666666;
--white: #ffffff;
--bg-light: #f9f9f9;
--bg-gray: #f4f5f7;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Roboto', sans-serif;
--font-cursive: 'Great Vibes', cursive;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-sans);
color: var(--text-dark);
line-height: 1.6;
background-color: var(--white);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; }
/* ============================================================
02 UTILITIES
============================================================ */
.text-center { text-align: center; }
.mt-20 { margin-top: 16px; }
.mt-30 { margin-top: 24px; }
@media (min-width: 992px) {
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
}
/* ============================================================
03 BUTTONS
One shared shape for all four variants. inline-flex + gap
handles the icon spacing, so no per-icon margins are needed.
============================================================ */
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 13px 24px;
border-radius: 4px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.5px;
text-align: center;
border: none;
cursor: pointer;
transition: 0.3s;
}
.btn-primary { background-color: var(--gold); color: var(--white); }
.btn-primary:hover { background-color: var(--gold-hover); }
.btn-secondary { background-color: transparent; border: 1px solid var(--white); color: var(--white); }
.btn-secondary:hover { background-color: rgba(255,255,255,0.1); }
.btn-dark { background-color: var(--primary-blue); color: var(--white); }
.btn-dark:hover { background-color: #091629; }
.btn-gold { background-color: var(--gold); color: var(--white); }
.btn-gold:hover { background-color: var(--gold-hover); }
@media (min-width: 992px) {
.btn-primary, .btn-secondary, .btn-dark, .btn-gold { gap: 22px; padding: 13px 26px; }
}
/* ============================================================
04 SECTION HEADINGS & ORNAMENTS
============================================================ */
.section-subtitle {
color: var(--gold);
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 8px;
text-transform: uppercase;
}
.section-title { font-size: 24px; color: var(--primary-blue); line-height: 1.3; }
.gold-rule { width: 70px; height: 2px; background-color: var(--gold); margin: 16px 0 20px; }
/* Small diamond ornament under a centred heading (home, about) */
.ornament {
width: 60px; height: 2px; background-color: var(--gold);
margin: 12px auto 28px; position: relative;
}
.ornament::before {
content: '❖';
position: absolute; top: -8px; left: 23px;
color: var(--gold); background: var(--white); font-size: 14px;
}
/* Centred uppercase heading with a hairline diamond (services) */
.center-heading { text-align: center; }
.center-heading h2 {
font-size: 17px;
color: var(--primary-blue);
letter-spacing: 2px;
text-transform: uppercase;
}
.center-heading.gold h2 { color: var(--gold); }
.center-heading .ornament {
width: 46px; height: 1px; margin: 12px auto 0;
}
.center-heading .ornament::before {
top: -11px; left: 50%;
transform: translateX(-50%);
font-size: 12px; padding: 0 4px;
}
/* Standalone diamond rule (team) */
.heading-ornament {
width: 46px; height: 1px; background-color: var(--gold);
margin: 12px auto 0; position: relative;
}
.heading-ornament::before {
content: '❖';
position: absolute; top: -11px; left: 50%;
transform: translateX(-50%);
color: var(--gold); background: var(--white);
font-size: 12px; padding: 0 4px;
}
/* Heading with gold rules running out to either side */
.rule-heading { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rule-heading::before, .rule-heading::after {
content: ''; height: 1px; background-color: var(--gold); flex: 1 1 auto;
}
.rule-heading h2 {
font-size: 17px; color: var(--primary-blue);
letter-spacing: 2px; text-transform: uppercase;
}
@media (min-width: 576px) {
.section-title { font-size: 26px; }
}
@media (min-width: 768px) {
.section-title { font-size: 28px; }
.center-heading h2, .rule-heading h2 { font-size: 20px; }
.rule-heading { gap: 22px; }
.rule-heading h2 { white-space: nowrap; }
.rule-heading::before, .rule-heading::after { flex: 0 1 120px; }
}
@media (min-width: 992px) {
.gold-rule { margin: 18px 0 22px; }
.ornament { margin: 15px auto 40px; }
}
@media (min-width: 1200px) {
.section-subtitle { font-size: 13px; }
.section-title { font-size: 30px; }
/* Home and about were designed with a slightly larger title */
body[data-page="home"] .section-title,
body[data-page="about"] .section-title { font-size: 32px; }
.center-heading h2, .rule-heading h2 { font-size: 22px; }
.rule-heading::before, .rule-heading::after { flex: 0 1 210px; }
}
/* ============================================================
05 CHROME: TOP BAR
============================================================ */
/* Phones show phone + email + socials on ONE line. The postal address
is dropped here - it is the longest item by far and is what forced
the bar to wrap. It returns at XL, where there is room beside the
nav, and it is always available in the footer and on Contact Us. */
.top-bar {
background-color: #0b1525;
color: #ccc;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 7px 4%;
font-size: 10px;
}
.top-bar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.top-bar-left span { white-space: nowrap; }
.top-bar-left i { color: var(--gold); margin-right: 4px; }
.top-bar-address { display: none; }
.top-bar-right { display: flex; align-items: center; flex-shrink: 0; }
.top-bar-right a { margin-left: 10px; color: #ccc; transition: 0.3s; }
.top-bar-right a:hover { color: var(--gold); }
/* ---- Blinking Online Services button ----
The one promoted link on the site, so it is loud on purpose: the
colour swings gold -> red, the ring expands and the pill breathes,
all on one 1.2s loop. Held just short of a hard on/off strobe,
which reads as a broken element rather than a call to action.
Stops entirely for anyone who has asked for less motion. */
.top-bar-right a.top-bar-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 0;
margin-right: 6px;
padding: 5px 13px;
border-radius: 999px;
background: var(--gold);
color: var(--white);
font-weight: 700;
font-size: 10.5px;
letter-spacing: .5px;
white-space: nowrap;
text-shadow: 0 1px 1px rgba(0,0,0,.18);
animation: topCtaBlink 1.2s ease-in-out infinite;
}
/* Hover settles it on a solid colour so the label is easy to read
at the moment someone is actually about to click it. */
.top-bar-right a.top-bar-cta:hover {
background: var(--gold-hover);
color: var(--white);
animation-play-state: paused;
}
.top-bar-cta i { font-size: 11px; }
@keyframes topCtaBlink {
0% {
background: var(--gold);
box-shadow: 0 0 0 0 rgba(205,164,88,.75);
transform: scale(1);
}
50% {
background: #e14b3a;
box-shadow: 0 0 0 8px rgba(225,75,58,0);
transform: scale(1.06);
}
100% {
background: var(--gold);
box-shadow: 0 0 0 0 rgba(205,164,88,0);
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.top-bar-right a.top-bar-cta { animation: none; }
}
/* Below 400px the label would push the contact details off the bar. */
@media (max-width: 399px) {
.top-bar-cta span { display: none; }
.top-bar-right a.top-bar-cta { padding: 5px 9px; }
}
@media (min-width: 400px) {
.top-bar { font-size: 11px; gap: 10px; }
.top-bar-left { gap: 14px; }
}
@media (min-width: 576px) {
.top-bar { padding: 10px 5%; font-size: 12px; }
.top-bar-left { gap: 20px; }
.top-bar-left i { margin-right: 5px; }
.top-bar-right a { margin-left: 15px; }
}
@media (min-width: 1281px) {
/* Room for the full address alongside the horizontal nav */
.top-bar-address { display: inline; }
}
/* ============================================================
06 CHROME: HEADER, NAV, MEGA DROPDOWN
Base is the burger layout. The eight-item nav plus logo and
CTA needs ~1200px on one row, so the horizontal nav only
appears at 1200px and up. Keep that breakpoint in sync with
the matchMedia query in js/layout.js.
============================================================ */
.header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 12px 4%;
background: var(--white);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 200;
}
.header .logo {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
color: inherit;
}
.logo-mark { width: 34px; height: 34px; margin-right: 8px; flex-shrink: 0; }
.header .logo-text h1 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 15px;
color: var(--primary-blue);
letter-spacing: 0;
margin: 0 0 -4px;
}
.header .logo-text p {
font-size: 8px;
letter-spacing: 1.5px;
color: var(--gold);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
margin: 0;
}
.header .logo-text p::before,
.header .logo-text p::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--gold);
min-width: 12px;
}
.nav-toggle {
display: block;
order: 2;
background: none;
border: 1px solid #e2e2e2;
border-radius: 4px;
color: var(--primary-blue);
font-size: 16px;
padding: 6px 10px;
cursor: pointer;
}
/* Hidden on phones - the logo, burger and button together forced the
header onto a second row. The menu carries a CONTACT US link
instead (.nav-contact-link); the two swap over at 576px. */
.btn-contact {
display: none;
order: 3;
margin-left: 10px;
background-color: var(--gold);
color: var(--white);
padding: 9px 12px;
border-radius: 4px;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.5px;
white-space: nowrap;
transition: 0.3s;
}
.btn-contact:hover { background-color: var(--gold-hover); }
.nav-links .nav-contact-link {
display: block;
margin-top: 10px;
padding: 12px 4px;
background-color: var(--gold);
color: var(--white);
text-align: center;
border-bottom: none;
border-radius: 4px;
letter-spacing: 0.8px;
}
.nav-links .nav-contact-link:hover,
.nav-links .nav-contact-link.active {
background-color: var(--gold-hover);
color: var(--white);
}
.nav-links {
order: 4;
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
margin-top: 14px;
border-top: 1px solid #eee;
padding-top: 10px;
}
.nav-links.open { display: flex; }
.nav-links > a,
.nav-item > a {
display: block;
margin: 0;
padding: 12px 4px;
font-size: 13px;
font-weight: 600;
color: var(--primary-blue);
text-transform: uppercase;
border-bottom: 1px solid #f2f2f2;
transition: 0.2s;
white-space: nowrap;
}
.nav-links a.active { color: var(--gold); }
.nav-links a:hover { color: var(--gold); }
.nav-links i { font-size: 10px; margin-left: 3px; }
.nav-item { position: relative; width: 100%; }
.nav-item > a i { float: right; margin-top: 4px; transition: 0.2s; }
.nav-item.open > a i { transform: rotate(180deg); }
.mega-menu {
position: static;
width: 100%;
display: none;
visibility: hidden;
opacity: 1;
padding: 6px 0 10px 12px;
background: #fbfbfc;
z-index: 210;
}
.nav-item.open .mega-menu { display: block; visibility: visible; }
.mega-menu-head { display: none; }
.mega-menu-head h4 {
font-family: var(--font-serif);
font-size: 17px;
color: var(--primary-blue);
}
.mega-menu-head a {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
color: var(--gold);
text-transform: uppercase;
}
.mega-menu-head a i { font-size: 10px; margin-left: 4px; }
.mega-menu-list { list-style: none; display: grid; grid-template-columns: 1fr; column-gap: 22px; }
.mega-menu-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 4px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #3d4a5c;
border-bottom: none;
border-radius: 3px;
transition: 0.2s;
}
.mega-menu-list a i {
font-size: 13px;
width: 22px;
margin: 0;
text-align: center;
color: var(--gold);
flex-shrink: 0;
}
.mega-menu-list a:hover { background: #f7f8fa; color: var(--primary-blue); padding-left: 8px; }
@media (min-width: 576px) {
.header { padding: 15px 5%; }
.logo-mark { width: 44px; height: 44px; margin-right: 12px; }
.header .logo-text h1 { font-size: 18px; letter-spacing: 0.5px; }
.header .logo-text p { font-size: 10px; letter-spacing: 3px; }
.nav-toggle { font-size: 18px; padding: 7px 12px; }
/* Enough width for the button to sit beside the burger again */
.btn-contact { display: inline-flex; padding: 12px 22px; font-size: 14px; }
.nav-links .nav-contact-link { display: none; }
}
@media (min-width: 1200px) {
.header { flex-wrap: nowrap; gap: 0; }
.header .logo { flex: 0 0 auto; }
.header .logo-text h1 { font-size: 18px; }
.nav-toggle { display: none; }
.btn-contact { order: 0; margin-left: 0; }
.nav-links {
order: 0;
display: flex;
flex-direction: row;
align-items: center;
width: auto;
margin-top: 0;
border-top: none;
padding-top: 0;
}
.nav-links > a,
.nav-item > a {
display: inline-block;
margin: 0 8px;
padding-bottom: 5px;
font-size: 12px;
border-bottom: 2px solid transparent;
}
.nav-links a.active { border-bottom: 2px solid var(--gold); color: var(--primary-blue); }
.nav-item { width: auto; }
.nav-item > a i { float: none; margin-top: 0; }
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
width: 640px;
display: block;
visibility: hidden;
opacity: 0;
background: var(--white);
border-top: 3px solid var(--gold);
box-shadow: 0 18px 40px rgba(14, 32, 58, 0.18);
padding: 20px 24px 22px;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid #eee;
}
.mega-menu-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1281px) {
.nav-links > a, .nav-item > a { margin: 0 11px; font-size: 13px; }
.header .logo-text h1 { font-size: 21px; }
}
/* ============================================================
07 CHROME: FOOTER
============================================================ */
.footer { background-color: var(--primary-blue); color: #c7cfd9; }
.footer-top {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 5% 34px;
}
.footer .brand-col .logo { display: flex; align-items: center; }
.footer .brand-col .logo-text h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 18px;
color: var(--white);
letter-spacing: 0.5px;
margin: 0 0 -4px;
}
.footer .brand-col .logo-text p {
font-size: 9px;
letter-spacing: 3px;
color: var(--gold);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.footer .brand-col .logo-text p::before,
.footer .brand-col .logo-text p::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--gold);
min-width: 10px;
}
.footer .brand-col .about-text { font-size: 12.5px; margin: 20px 0; line-height: 1.7; }
.footer-socials a {
display: inline-flex;
width: 34px;
height: 34px;
border: 1px solid rgba(255,255,255,0.22);
border-radius: 50%;
align-items: center;
justify-content: center;
margin-right: 9px;
font-size: 13px;
transition: 0.3s;
}
.footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.footer-col h3 {
color: var(--white);
font-family: var(--font-serif);
font-size: 15px;
letter-spacing: 1.5px;
margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; font-size: 12.5px; }
/* Quick Links and Practice Areas get a gold chevron marker. The
arrow is drawn with two borders on a rotated square rather than an
icon font, so it stays crisp and needs no webfont to have loaded.
The contact column has no anchors, so it is untouched. */
.footer-col ul li a {
display: inline-flex;
align-items: flex-start;
gap: 9px;
line-height: 1.6;
transition: color 0.25s ease, transform 0.25s ease;
}
.footer-col ul li a::before {
content: '';
width: 5px;
height: 5px;
margin-top: 6px;
flex-shrink: 0;
border-right: 1.5px solid var(--gold);
border-bottom: 1.5px solid var(--gold);
transform: rotate(-45deg);
transition: border-color 0.25s ease;
}
.footer-col ul li a:hover { color: var(--gold); transform: translateX(4px); }
.footer-col ul li a:hover::before { border-color: var(--white); }
.footer .contact-col ul li { display: flex; gap: 10px; }
.footer .contact-col ul li i { color: var(--gold); margin-top: 4px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
.footer-col ul li a { transition: color 0.25s ease; }
.footer-col ul li a:hover { transform: none; }
}
.offices-col-inner { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.offices-list { font-size: 12.5px; line-height: 2; }
.offices-list span { color: rgba(255,255,255,0.28); margin: 0 4px; }
.india-map { width: 112px; flex-shrink: 0; margin-top: 10px; }
.footer-bottom {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
padding: 18px 5%;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom span { color: var(--gold); font-weight: 600; }
/* Visitor counter - an odometer strip, one box per digit, filled in by
js/visitor-counter.js. Hidden until the number arrives so the footer
never shows a placeholder or a stale zero. The [hidden] rule has to be
repeated here: the display below would otherwise win over the browser's
default styling for the attribute. */
.footer-visitors { display: inline-flex; align-items: center; gap: 10px; }
.footer-visitors[hidden] { display: none; }
/* Two classes deep on purpose - the label is a inside .footer-bottom,
which colours every span gold; the digits should carry that, not the word. */
.footer-visitors .visitor-label {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.72);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.footer-visitors .visitor-label i { color: var(--gold); font-size: 12px; }
.visitor-digits { display: inline-flex; gap: 3px; }
.visitor-digits .digit {
min-width: 17px;
padding: 2px 0 3px;
text-align: center;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(205,164,88,0.38);
border-radius: 3px;
color: var(--gold);
font-weight: 700;
font-size: 13px;
line-height: 1.15;
/* Tabular figures so a box never resizes as its digit changes. */
font-variant-numeric: tabular-nums;
}
/* The leading zeros are padding, not a real figure - held back so the eye
reads the actual count first. */
.visitor-digits .digit.is-pad { color: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.12); }
/* Screen-reader copy of the same number - the digit boxes are aria-hidden. */
.visitor-sr-text {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (min-width: 576px) {
.footer-top { grid-template-columns: 1fr 1fr; }
.footer .offices-col { grid-column: span 2; }
.offices-col-inner { flex-direction: row; }
.offices-list { white-space: nowrap; }
.india-map { margin-top: -6px; }
.footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 992px) {
.footer-top { grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr; padding: 55px 5% 45px; }
.footer .offices-col { grid-column: span 4; }
}
@media (min-width: 1200px) {
.footer-top { grid-template-columns: 1.5fr 0.9fr 1.05fr 1.35fr 1.75fr; }
.footer .offices-col { grid-column: auto; }
}
/* ============================================================
08 SHARED: PAGE BANNER
Used by about, legal services, service detail, our team and
contact. Phones stack the copy above the artwork; from 992px
the artwork becomes the absolute arch on the right.
============================================================ */
.page-banner {
background-color: var(--primary-blue);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.banner-content {
width: 100%;
padding: 36px 5% 40px;
color: var(--white);
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-content h1 { font-size: 30px; letter-spacing: 0.5px; line-height: 1.15; }
/* Per-page strap lines under the H1 */
.banner-subtitle { color: var(--gold); font-size: 14px; letter-spacing: 1.5px; margin-top: 6px; }
.banner-tagline {
font-family: var(--font-serif);
font-size: 21px;
color: var(--gold);
margin-top: 6px;
line-height: 1.3;
}
.banner-content h3 {
font-size: 19px;
font-weight: 400;
line-height: 1.4;
color: #e0e0e0;
}
.banner-separator { display: flex; align-items: center; margin: 16px 0 18px; color: var(--gold); }
.banner-separator .line {
width: 70px; height: 1px; background-color: var(--gold);
margin-right: 12px; position: relative;
}
.banner-separator .line::before {
content: ''; position: absolute; right: -2px; top: -3px;
width: 0; height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid var(--gold);
}
.banner-separator i { font-size: 20px; }
.banner-text { font-size: 15px; color: #dbe1e8; line-height: 1.7; max-width: 430px; }
.banner-content .banner-text { margin-bottom: 20px; }
.breadcrumb { font-size: 14px; color: #e8ecf1; }
.breadcrumb span { margin: 0 6px; color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: var(--gold); }
.banner-content .breadcrumb-top { margin-bottom: 22px; }
.banner-content .gold-rule { margin: 16px 0 20px; }
/* Arch artwork (services, detail, team, contact) */
.banner-media {
position: relative;
width: 100%;
height: 200px;
background-color: var(--gold);
padding: 0;
z-index: 1;
}
.banner-media-inner {
width: 100%; height: 100%;
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: center;
border-top: 3px solid var(--gold);
}
/* Skewed artwork (about only) */
.banner-image {
position: relative;
width: 100%;
height: 200px;
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: center;
border-top: 3px solid var(--gold);
z-index: 1;
}
@media (min-width: 576px) {
.banner-content h1 { font-size: 36px; }
.banner-tagline { font-size: 24px; }
.banner-media, .banner-image { height: 240px; }
}
@media (min-width: 768px) {
.banner-content { padding: 44px 5% 48px; }
.banner-content h1 { font-size: 40px; }
.banner-tagline { font-size: 27px; }
.banner-content h3 { font-size: 22px; }
.banner-media, .banner-image { height: 290px; }
}
@media (min-width: 992px) {
.page-banner { flex-direction: row; min-height: 330px; }
.banner-content { width: 46%; padding: 45px 5%; }
.banner-content h1 { font-size: 42px; }
.banner-tagline { font-size: 29px; }
.banner-subtitle { font-size: 15px; }
.banner-content h3 { font-size: 24px; }
.banner-text { font-size: 16px; }
.banner-media {
position: absolute;
right: 0; top: 0;
width: 60%;
height: 100%;
border-top-left-radius: 8% 100%;
border-bottom-left-radius: 8% 100%;
padding-left: 3px;
}
.banner-media-inner {
border-top-left-radius: 8% 100%;
border-bottom-left-radius: 8% 100%;
border-top: none;
}
.banner-image {
position: absolute;
right: 0; top: 0;
width: 60%;
height: 100%;
border-top: none;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.banner-image::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 5px; height: 100%;
background-color: var(--gold);
transform: skewX(-11.5deg);
transform-origin: bottom left;
}
}
@media (min-width: 1200px) {
/* Sizes the individual page designs were signed off at */
body[data-page="about"] .banner-content h1 { font-size: 48px; }
body[data-page="team"] .banner-content h1 { font-size: 46px; }
body[data-page="services"] .banner-content h1 { font-size: 44px; }
}
/* About's banner puts the breadcrumb above the strap line */
body[data-page="about"] .banner-content { width: 100%; }
body[data-page="about"] .breadcrumb { margin-bottom: 22px; }
@media (min-width: 992px) {
body[data-page="about"] .banner-content { width: 50%; }
body[data-page="about"] .breadcrumb { margin-bottom: 30px; }
}
/* ============================================================
09 SHARED: CTA BANDS
============================================================ */
/* Gold band (home .cta-banner, services .cta-gold) */
.cta-banner, .cta-gold {
background-color: var(--gold);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
padding: 28px 5%;
color: var(--white);
}
.cta-gold { background-image: linear-gradient(to right, #cda458 0%, #cda458 62%, #c39b4d 100%); }
.cta-content, .cta-gold-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.cta-icon, .cta-gold-text > i { font-size: 38px; color: var(--white); opacity: 0.9; }
.cta-content h2 { font-size: 21px; margin-bottom: 4px; font-family: var(--font-sans); }
.cta-content p { font-size: 14px; }
.cta-gold-text h2 { font-size: 21px; color: var(--primary-blue); }
.cta-gold-text p { font-size: 14px; color: #3f3212; }
/* Navy band (service detail, contact) */
.cta-navy {
background-color: var(--primary-blue);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
padding: 34px 5%;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cta-navy-text { display: flex; align-items: center; gap: 18px; }
.cta-navy-text > i { font-size: 44px; color: var(--gold); flex-shrink: 0; }
.cta-badge {
width: 62px; height: 62px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: var(--gold);
}
.cta-navy-text h2 { font-size: 22px; color: var(--white); margin-bottom: 4px; }
.cta-navy-text .cta-gold-line { font-size: 14.5px; color: var(--gold); }
.cta-navy-text p { font-size: 14px; color: #c2cbd6; line-height: 1.6; }
@media (min-width: 576px) {
.cta-navy { flex-direction: row; align-items: center; justify-content: space-between; gap: 26px; }
.cta-content, .cta-gold-text { flex-direction: row; text-align: left; gap: 18px; }
.cta-icon, .cta-gold-text > i { font-size: 44px; }
}
@media (min-width: 768px) {
.cta-banner, .cta-gold {
flex-direction: row;
justify-content: space-between;
text-align: left;
padding: 28px 5%;
}
.cta-content h2, .cta-gold-text h2 { font-size: 23px; }
.cta-navy { padding: 38px 5%; }
.cta-navy-text h2 { font-size: 25px; }
}
@media (min-width: 992px) {
.cta-content, .cta-gold-text { gap: 22px; }
.cta-icon { font-size: 45px; }
.cta-content h2, .cta-gold-text h2 { font-size: 26px; }
.cta-content p, .cta-gold-text p { font-size: 15px; }
.cta-navy { padding: 40px 5%; }
.cta-navy-text { gap: 24px; }
.cta-navy-text > i { font-size: 52px; }
.cta-navy-text h2 { font-size: 27px; }
.cta-badge { width: 74px; height: 74px; font-size: 31px; }
}
@media (min-width: 1200px) {
.cta-banner { padding: 30px 10%; }
.cta-gold { padding: 26px 5%; }
}
/* ============================================================
10 SHARED: FOUNDER BLOCK (home + about)
============================================================ */
.founder {
display: flex;
flex-direction: column;
gap: 34px;
padding: 44px 5%;
background-color: var(--bg-light);
position: relative;
overflow: hidden;
}
.founder-image { width: 100%; position: relative; }
.founder-image::before {
content: '';
position: absolute;
top: -8px; left: -8px;
width: 100%; height: 100%;
border: 2px solid var(--gold);
z-index: 1;
}
.founder-image img {
width: 100%;
height: 300px;
object-fit: cover;
position: relative;
z-index: 2;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.founder-content { width: 100%; position: relative; z-index: 2; }
.founder-role {
font-size: 16px; color: var(--gold); margin-bottom: 18px;
font-family: var(--font-sans); font-weight: 500;
}
.founder-content p { margin-bottom: 16px; color: var(--text-light); font-size: 14px; }
.signature {
font-family: var(--font-cursive);
font-size: 34px;
color: var(--primary-blue);
margin: 16px 0;
}
/* Oversized watermark is decorative - only worth showing when
there is room for it, and it must never create a scrollbar. */
.watermark-icon { display: none; }
body[data-page="about"] .founder { background-color: var(--white); }
@media (min-width: 768px) {
.founder { flex-direction: row; align-items: center; gap: 40px; padding: 60px 5%; }
.founder-image { width: 42%; }
.founder-image img { height: auto; }
.founder-content { width: 58%; }
.founder-image::before { top: -12px; left: -12px; }
}
@media (min-width: 992px) {
.founder { gap: 60px; padding: 80px 8%; }
.founder-image { width: 40%; }
.founder-content { width: 60%; }
.founder-image::before { top: -15px; left: -15px; }
.founder-role { font-size: 18px; margin-bottom: 25px; }
.signature { font-size: 40px; margin: 20px 0; }
.watermark-icon {
display: block;
position: absolute;
right: 5%; top: 50%;
transform: translateY(-50%);
font-size: 300px;
color: rgba(205, 164, 88, 0.05);
z-index: 1;
pointer-events: none;
}
}
@media (min-width: 1200px) {
body[data-page="about"] .founder { padding: 80px 10%; }
}
/* ============================================================
11 HOME
============================================================ */
/* ---------- Hero ---------- */
.hero {
background-color: var(--primary-blue);
position: relative;
display: flex;
flex-direction: column;
}
.hero-content {
width: 100%;
padding: 36px 5% 40px;
color: var(--white);
z-index: 2;
}
.hero-content h1, .hero-content h2 { font-size: 25px; font-weight: 400; line-height: 1.25; }
.hero-content h1, .hero-content h2 span { color: var(--gold); font-weight: 700; }
.hero-content .subtitle { margin-top: 10px; font-size: 15px; color: #ddd; }
.hero-content h3 { font-size: 21px; margin-bottom: 18px; line-height: 1.35; }
.hero-services { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-bottom: 22px; }
.hero-services ul { list-style: none; flex: 1 1 45%; min-width: 140px; }
.hero-services li { margin-bottom: 7px; font-size: 13.5px; }
.hero-services i { color: var(--gold); margin-right: 7px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-buttons a { flex: 1 1 auto; }
/* On phones the arch becomes a plain banner below the copy */
.hero-image-wrapper {
position: relative;
width: 100%;
height: 210px;
padding: 0;
background-color: var(--gold);
border-radius: 0;
}
.hero-image-arch {
position: relative;
width: 100%;
height: 100%;
overflow: hidden; /* clips the slides to the arch */
background-color: var(--primary-blue);
border-radius: 0;
border-top: 3px solid var(--gold);
}
/* ---------- Hero slider ---------- */
/* Slides stack and cross-fade; the first is marked active in the
markup, so the banner is correct before the script runs. */
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .9s ease;
will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
/* A video slide fills the arch exactly like a background image would. */
.hero-slide-video video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
background: var(--primary-blue);
}
.hero-slider-controls {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 999px;
background: rgba(14,32,58,.55);
backdrop-filter: blur(4px);
}
.hero-slider-controls[hidden] { display: none; }
.hero-slider-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border: none; border-radius: 50%;
background: transparent; color: rgba(255,255,255,.8);
font-size: 11px; cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.hero-slider-arrow:hover { background: var(--gold); color: var(--white); }
.hero-slider-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero-dots { display: flex; align-items: center; gap: 7px; padding: 0 4px; }
.hero-dot {
width: 8px; height: 8px; padding: 0;
border: none; border-radius: 50%;
background: rgba(255,255,255,.45);
cursor: pointer;
transition: background .25s ease, width .25s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.75); }
.hero-dot.is-active { width: 20px; border-radius: 999px; background: var(--gold); }
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: none; }
}
/* ---------- Features bar ---------- */
.features {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
padding: 28px 5%;
background-color: var(--white);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: relative;
z-index: 10;
}
.feature-item { display: flex; align-items: center; padding: 0; }
.feature-icon {
width: 46px; height: 46px;
background-color: var(--primary-blue);
color: var(--white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
margin-right: 14px;
flex-shrink: 0;
}
.feature-text h4 { font-size: 14.5px; margin-bottom: 3px; font-family: var(--font-sans); }
.feature-text p { font-size: 12px; color: var(--text-light); }
.feature-divider { display: none; }
/* ---------- Practice areas ---------- */
.practice-areas { padding: 46px 5%; }
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.practice-card {
border: 1px solid #eee;
padding: 22px 12px;
text-align: center;
border-radius: 5px;
transition: 0.3s;
background: var(--white);
}
.practice-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: var(--gold); }
.practice-card i { font-size: 26px; color: var(--primary-blue); margin-bottom: 12px; }
.practice-card p { font-weight: 600; font-size: 13px; color: var(--primary-blue); }
/* ---------- Stats ---------- */
.stats {
background-color: var(--primary-blue);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 12px;
padding: 38px 5%;
color: var(--white);
text-align: center;
}
.stat-item i { font-size: 24px; color: var(--white); margin-bottom: 10px; opacity: 0.8; }
.stat-item h3 { font-size: 30px; color: var(--gold); margin-bottom: 3px; }
.stat-item p { font-size: 13.5px; }
.stat-divider { display: none; }
/* ---------- Team strip (home only) ---------- */
.team { padding: 46px 5%; background-color: var(--bg-light); }
body[data-page="home"] .team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px 14px;
}
/* Flex column + flex:1 on the info block so every card's text area
reaches the card's full height. The .plus-icon badge is anchored
to that block, so it straddles the bottom border identically on
every card. No overflow:hidden - it would clip the badge. */
body[data-page="home"] .team-card {
background: var(--white);
text-align: center;
border: 1px solid #eee;
display: flex;
flex-direction: column;
}
body[data-page="home"] .team-card img { width: 100%; height: 165px; object-fit: cover; display: block; }
.team-info { padding: 16px 12px 30px; position: relative; flex: 1; }
.team-info h4 { color: var(--primary-blue); font-size: 14px; margin-bottom: 5px; line-height: 1.3; }
.team-info p { font-size: 11.5px; color: var(--text-light); }
.plus-icon {
width: 30px; height: 30px;
background-color: var(--gold); color: var(--white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
/* ---------- Clients ---------- */
.clients { padding: 40px 5%; background: var(--white); }
.clients-slider { display: block; }
.slider-btn { display: none; }
.client-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; width: 100%; }
.client-logo { text-align: center; color: var(--primary-blue); }
.client-logo h3 { font-size: 17px; font-family: var(--font-sans); font-weight: 700; margin-bottom: 2px; }
.client-logo p { font-size: 10px; color: var(--text-light); }
/* ---------- Updates & testimonials ---------- */
.updates-testimonials {
display: flex;
flex-direction: column;
gap: 36px;
padding: 46px 5%;
background-color: var(--bg-light);
}
.updates-col, .testimonials-col { width: 100%; }
.testimonials-col { position: relative; }
.flex-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 34px;
}
.flex-header .section-title { margin: 0; }
.view-all { font-size: 12.5px; font-weight: 600; color: var(--primary-blue); }
.view-all:hover { color: var(--gold); }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 34px 18px; }
.news-card {
background: var(--white);
border-radius: 5px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.news-card img { width: 100%; height: 175px; object-fit: cover; display: block; }
.news-content { padding: 20px 15px; position: relative; }
.date-badge {
position: absolute; top: -30px; left: 15px;
background: var(--gold); color: var(--white);
padding: 5px 10px; text-align: center;
font-size: 10px; font-weight: 600;
}
.date-badge span { display: block; font-size: 16px; }
.news-content p {
font-size: 14px; font-weight: 600; margin: 10px 0 15px;
line-height: 1.4; color: var(--primary-blue);
}
.read-more { font-size: 12px; color: var(--gold); font-weight: 600; }
.testimonial-card {
background: var(--white);
padding: 28px 22px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
border-radius: 5px;
position: relative;
z-index: 2;
margin-top: 0;
}
.quote-icon { font-size: 34px; color: #f0f0f0; margin-bottom: 12px; }
.testimonial-card p { font-style: italic; font-size: 14px; color: var(--text-light); margin-bottom: 18px; }
.stars { color: var(--gold); margin-bottom: 12px; font-size: 14px; }
.testimonial-card h5 { font-family: var(--font-sans); font-size: 14px; color: var(--primary-blue); }
.slider-dots { display: flex; gap: 5px; margin-top: 18px; }
.dot { width: 8px; height: 8px; background: #ddd; border-radius: 50%; }
.dot.active { background: var(--gold); }
@media (min-width: 576px) {
.hero-content { padding: 42px 5% 46px; }
.hero-content h1, .hero-content h2 { font-size: 29px; }
.hero-content h3 { font-size: 24px; }
.hero-buttons a { flex: 0 0 auto; }
.hero-image-wrapper { height: 250px; }
.features { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
.practice-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
body[data-page="home"] .team-grid { grid-template-columns: repeat(3, 1fr); }
body[data-page="home"] .team-card img { height: 180px; }
.client-logos { grid-template-columns: repeat(3, 1fr); }
.flex-header { flex-direction: row; justify-content: space-between; align-items: center; }
.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.hero-content { padding: 48px 5% 52px; }
.hero-content h1, .hero-content h2 { font-size: 33px; }
.hero-content h3 { font-size: 28px; }
.hero-services { gap: 2px 40px; }
.hero-image-wrapper { height: 300px; }
.practice-areas { padding: 60px 5%; }
.practice-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stats { grid-template-columns: repeat(4, 1fr); padding: 48px 5%; }
.team { padding: 60px 5%; }
body[data-page="home"] .team-grid { grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
body[data-page="home"] .team-card img { height: 200px; }
.client-logos { grid-template-columns: repeat(6, 1fr); gap: 20px 10px; }
.updates-testimonials { padding: 60px 5%; }
.news-grid { grid-template-columns: repeat(3, 1fr); }
.news-card img { height: 160px; }
}
@media (min-width: 992px) {
.hero { flex-direction: row; min-height: 440px; }
.hero-content { width: 62%; padding: 50px 5%; }
.hero-content h1, .hero-content h2 { font-size: 36px; }
.hero-content .subtitle { margin-top: 14px; font-size: 18px; }
.hero-content h3 { font-size: 30px; margin-bottom: 20px; }
.hero-services { margin-bottom: 26px; }
.hero-services li { font-size: 15px; margin-bottom: 8px; }
.hero-image-wrapper {
position: absolute;
right: 0; top: 0;
width: 50%;
height: 100%;
padding: 10px 0 10px 10px;
border-top-left-radius: 500px;
border-bottom-left-radius: 500px;
}
.hero-image-arch {
border-top-left-radius: 500px;
border-bottom-left-radius: 500px;
border-top: none;
}
/* Bottom-right, where the arch still has a square corner - centred
controls would sit on the curve. */
.hero-slider-controls {
left: auto; right: 26px;
bottom: 22px;
transform: none;
}
.features {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0;
padding: 40px 5%;
}
.feature-item { flex: 1; padding: 0 15px; }
.feature-icon { width: 50px; height: 50px; font-size: 20px; margin-right: 15px; }
.feature-text h4 { font-size: 15px; }
.feature-divider { display: block; width: 1px; height: 50px; background-color: #e0e0e0; }
.practice-areas { padding: 80px 5%; }
.practice-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.practice-card { padding: 30px 15px; }
.practice-card i { font-size: 30px; margin-bottom: 15px; }
.practice-card p { font-size: 14px; }
.stats { display: flex; justify-content: space-between; padding: 60px 8%; }
.stat-item { flex: 1; }
.stat-item i { font-size: 30px; margin-bottom: 15px; }
.stat-item h3 { font-size: 40px; margin-bottom: 5px; }
.stat-item p { font-size: 15px; }
.stat-divider { display: block; width: 1px; background-color: rgba(255,255,255,0.2); }
.team { padding: 80px 5%; }
body[data-page="home"] .team-grid { gap: 30px; }
body[data-page="home"] .team-card img { height: 250px; }
.team-info { padding: 20px 20px 32px; }
.team-info h4 { font-size: 16px; }
.team-info p { font-size: 12px; }
.clients { padding: 60px 5%; }
.clients-slider { display: flex; align-items: center; justify-content: space-between; }
.slider-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
background: var(--white);
border: 1px solid #ddd;
border-radius: 50%;
cursor: pointer;
color: var(--text-dark);
flex-shrink: 0;
transition: 0.3s;
}
.slider-btn:hover { border-color: var(--gold); color: var(--gold); }
.client-logos { display: flex; justify-content: space-around; width: 85%; gap: 10px; }
.client-logo h3 { font-size: 20px; }
.updates-testimonials { flex-direction: row; gap: 40px; }
.updates-col { width: 65%; }
.testimonials-col { width: 35%; }
.news-grid { gap: 20px; }
.flex-header { margin-bottom: 30px; }
.testimonial-card { padding: 40px 30px; margin-top: 30px; }
.quote-icon { font-size: 40px; margin-bottom: 15px; }
}
@media (min-width: 1200px) {
.hero-content { width: 60%; }
.hero-content h1, .hero-content h2 { font-size: 38px; }
.hero-content h3 { font-size: 32px; }
.stats { padding: 60px 10%; }
}
/* ============================================================
12 ABOUT
============================================================ */
.about-company-section {
display: flex;
flex-direction: column;
gap: 34px;
padding: 44px 5%;
}
.about-text-content { width: 100%; }
.about-text-content p { margin-bottom: 16px; color: var(--text-light); font-size: 14px; }
.about-grid-content { width: 100%; display: grid; grid-template-columns: 1fr; gap: 16px; }
.about-card {
border: 1px solid #eaeaea;
border-radius: 5px;
padding: 24px 18px;
display: flex;
gap: 15px;
transition: 0.3s;
}
.about-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #ddd; }
.card-icon { font-size: 26px; color: var(--gold); flex-shrink: 0; }
.card-info h4 {
font-family: var(--font-serif);
font-size: 18px;
color: var(--primary-blue);
margin-bottom: 8px;
}
.card-info p { font-size: 13px; color: var(--text-light); line-height: 1.5; }
/* ---------- Our focus ---------- */
.our-focus {
background-color: var(--bg-light);
display: flex;
flex-direction: column;
gap: 28px;
padding: 44px 5%;
}
.focus-text { width: 100%; }
.focus-text p { font-size: 14px; color: var(--text-light); margin-top: 12px; }
.focus-list { width: 100%; display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.focus-list ul { list-style: none; }
.focus-list li {
font-size: 14px;
color: var(--text-dark);
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.focus-list li i { color: var(--gold); font-size: 15px; margin-top: 3px; flex-shrink: 0; }
/* ---------- Stats (dark) ---------- */
.stats-dark {
background-color: var(--primary-blue);
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding: 38px 5%;
color: var(--white);
}
.stat-dark-item { display: flex; align-items: center; gap: 18px; }
.stat-dark-item .stat-icon i {
font-size: 34px;
color: transparent;
-webkit-text-stroke: 1px var(--white);
}
.stat-text h3 { font-size: 28px; color: var(--gold); margin-bottom: 0; line-height: 1; }
.stat-text p { font-size: 13.5px; margin-top: 5px; color: #ddd; }
.stat-dark-divider { display: none; }
/* ---------- Network offices ---------- */
.network-offices { padding: 44px 5%; }
.cities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.city-card {
text-align: center;
border: 1px solid #eee;
border-radius: 4px;
overflow: hidden;
padding-bottom: 10px;
transition: 0.3s;
}
.city-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.city-card img {
width: 100%;
height: 70px;
object-fit: cover;
margin-bottom: 10px;
background-color: #eef0f3;
}
/* If a city photo fails to load, show a branded tile instead of a
broken-image glyph (see the onerror hook in about-us.html). */
.city-card img.img-fallback {
background: linear-gradient(135deg, var(--primary-blue), #1b3557);
font-size: 0;
color: transparent;
}
.city-card h4 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--primary-blue);
}
@media (min-width: 576px) {
.about-grid-content { grid-template-columns: 1fr 1fr; }
.focus-list { grid-template-columns: 1fr 1fr; }
.stats-dark { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.cities-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
.about-company-section { padding: 60px 5%; gap: 40px; }
.our-focus { padding: 60px 5%; }
.focus-list { grid-template-columns: repeat(3, 1fr); }
.stats-dark { grid-template-columns: repeat(4, 1fr); padding: 48px 5%; }
.network-offices { padding: 60px 5%; }
.cities-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
}
@media (min-width: 992px) {
.about-company-section { flex-direction: row; gap: 50px; padding: 80px 5%; }
.about-text-content { width: 45%; }
.about-grid-content { width: 55%; gap: 20px; }
.about-card { padding: 30px 20px; }
.card-icon { font-size: 28px; }
.card-info h4 { font-size: 20px; margin-bottom: 10px; }
.our-focus { flex-direction: row; align-items: center; gap: 50px; padding: 80px 5%; }
.focus-text { width: 30%; }
.focus-list { width: 70%; }
.focus-list li { margin-bottom: 15px; }
.stats-dark {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 8%;
}
.stat-dark-item { gap: 20px; }
.stat-dark-item .stat-icon i { font-size: 40px; }
.stat-text h3 { font-size: 32px; }
.stat-text p { font-size: 14px; }
.stat-dark-divider { display: block; width: 1px; height: 60px; background-color: rgba(255,255,255,0.2); }
.network-offices { padding: 80px 5%; }
.cities-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1200px) {
.stats-dark { padding: 50px 10%; }
.cities-grid { grid-template-columns: repeat(8, 1fr); }
}
/* ============================================================
13 LEGAL SERVICES (listing)
============================================================ */
.services-intro {
display: flex;
flex-direction: column;
gap: 24px;
padding: 44px 5% 0;
position: relative;
}
.services-intro-text { width: 100%; }
.services-intro-text p { font-size: 14.5px; color: var(--text-light); margin-bottom: 24px; max-width: 480px; }
.services-intro-art { width: 100%; display: flex; justify-content: center; align-items: center; }
.services-intro-art i {
font-size: 110px;
color: transparent;
-webkit-text-stroke: 1.5px rgba(205, 164, 88, 0.28);
}
.services-grid-section { padding: 34px 5% 50px; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.service-card {
border: 1px solid #ececec;
background: var(--white);
text-align: center;
padding: 26px 18px 28px;
display: flex;
flex-direction: column;
transition: 0.3s;
}
.service-card:hover {
box-shadow: 0 12px 26px rgba(14, 32, 58, 0.1);
border-color: var(--gold);
transform: translateY(-4px);
}
.service-card-icon {
width: 52px; height: 52px;
border-radius: 50%;
background-color: var(--primary-blue);
color: var(--gold);
font-size: 21px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
transition: 0.3s;
}
.service-card:hover .service-card-icon { background-color: var(--gold); color: var(--white); }
.service-card h3 { font-size: 16px; color: var(--primary-blue); line-height: 1.3; }
.service-card .card-rule { width: 34px; height: 2px; background-color: var(--gold); margin: 12px auto 14px; }
.service-card p { font-size: 12.5px; color: var(--text-light); line-height: 1.65; }
/* ---------- Legal process ---------- */
.legal-process {
position: relative;
background-color: var(--primary-blue);
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: center;
padding: 40px 5% 44px;
overflow: hidden;
}
.legal-process::before {
content: ''; position: absolute; inset: 0;
background: rgba(11, 21, 37, 0.93);
}
.legal-process-inner { position: relative; z-index: 2; }
.legal-process .rule-heading h2 { color: var(--white); }
.process-steps {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 28px 0;
margin-top: 30px;
}
.process-step { text-align: center; flex: 1 1 100%; position: relative; }
.process-icon {
width: 62px; height: 62px;
border: 1px solid var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
position: relative;
}
.process-icon i { font-size: 24px; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.process-icon .step-no {
position: absolute;
right: -14px; bottom: -4px;
font-family: var(--font-serif);
font-size: 13px;
color: var(--gold);
}
.process-step h4 { font-size: 16px; color: var(--white); margin-bottom: 6px; }
.process-step p { font-size: 12.5px; color: #b9c3cf; line-height: 1.55; padding: 0 12px; }
.process-arrow { display: none; }
@media (min-width: 480px) {
.services-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 576px) {
.process-step { flex: 1 1 50%; }
}
@media (min-width: 768px) {
.services-intro { padding: 50px 5% 0; }
.services-grid-section { padding: 40px 5% 60px; }
.services-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.services-intro-art i { font-size: 150px; }
.process-step { flex: 1 1 33%; }
.legal-process { padding: 46px 5% 52px; }
}
@media (min-width: 992px) {
.services-intro { flex-direction: row; align-items: center; gap: 40px; padding: 60px 5% 10px; }
.services-intro-text { width: 52%; }
.services-intro-art { width: 48%; }
.services-intro-art i { font-size: 190px; }
.services-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.services-grid-section { padding: 40px 5% 70px; }
.process-steps { flex-wrap: nowrap; gap: 0; margin-top: 36px; }
.process-step { flex: 1; }
.process-arrow {
display: block;
flex: 0 0 60px;
margin-top: 26px;
color: rgba(205, 164, 88, 0.8);
font-size: 18px;
text-align: center;
}
.legal-process .rule-heading::before,
.legal-process .rule-heading::after { flex: 0 1 130px; }
}
@media (min-width: 1200px) {
.services-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ============================================================
14 SERVICE DETAIL
============================================================ */
.service-highlights {
background-color: #0b1930;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 6px;
padding: 16px 5%;
}
.highlight-item {
flex: 1 1 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
border-right: none;
}
.highlight-item i {
font-size: 26px;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
flex-shrink: 0;
}
.highlight-item span { font-size: 13px; color: #e6eaf0; line-height: 1.35; }
/* ---------- About + what we offer ---------- */
.service-about {
display: flex;
flex-direction: column;
gap: 32px;
padding: 44px 5%;
align-items: flex-start;
}
.service-about-text { width: 100%; }
.service-about-text h2 { font-size: 24px; color: var(--primary-blue); line-height: 1.3; }
.service-about-text p { font-size: 14.5px; color: var(--text-light); margin-bottom: 18px; line-height: 1.8; }
.offer-box {
width: 100%;
background-color: var(--primary-blue);
padding: 26px 22px;
}
.offer-box h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 1.5px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 22px;
}
.offer-box ul { list-style: none; }
.offer-box li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13.5px;
color: #dde3ea;
margin-bottom: 13px;
line-height: 1.5;
}
.offer-box li:last-child { margin-bottom: 0; }
.offer-box li i { color: var(--gold); font-size: 14px; margin-top: 3px; flex-shrink: 0; }
/* ---------- Services include ---------- */
.service-includes { background-color: var(--bg-gray); padding: 44px 5% 50px; }
.service-includes .center-heading .ornament::before { background: var(--bg-gray); }
.includes-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
.include-card {
background: var(--white);
border: 1px solid #e8e8e8;
text-align: center;
padding: 24px 16px 26px;
transition: 0.3s;
}
.include-card:hover { box-shadow: 0 10px 22px rgba(14, 32, 58, 0.1); border-color: var(--gold); }
.include-card .include-icon {
width: 50px; height: 50px;
border-radius: 50%;
background-color: var(--primary-blue);
color: var(--gold);
font-size: 20px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
transition: 0.3s;
}
.include-card:hover .include-icon { background-color: var(--gold); color: var(--white); }
.include-card h4 { font-size: 15px; color: var(--primary-blue); margin-bottom: 10px; line-height: 1.3; }
.include-card p { font-size: 12px; color: var(--text-light); line-height: 1.6; }
/* ---------- Why choose (detail) ---------- */
.why-choose-service {
background-color: var(--primary-blue);
display: flex;
flex-direction: column;
gap: 28px;
padding: 40px 5%;
}
.why-choose-img { width: 100%; }
.why-choose-img img { width: 100%; height: 230px; object-fit: cover; display: block; }
.why-choose-body { width: 100%; }
.why-choose-body h2 {
font-size: 21px;
color: var(--white);
letter-spacing: 0.5px;
margin-bottom: 20px;
}
.why-choose-body ul { list-style: none; }
.why-choose-body li {
display: flex;
align-items: flex-start;
gap: 13px;
font-size: 14px;
color: #dde3ea;
margin-bottom: 14px;
}
.why-choose-body li i { color: var(--gold); font-size: 15px; margin-top: 3px; flex-shrink: 0; }
/* ---------- Related practice areas ---------- */
.related-areas { background-color: var(--bg-light); padding: 36px 5% 40px; }
.related-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
gap: 10px;
margin-top: 24px;
}
.related-item {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 8px 0;
border-right: none;
text-align: left;
transition: 0.3s;
}
.related-item i {
font-size: 18px;
color: var(--gold);
width: 34px; height: 34px;
border: 1px solid rgba(205,164,88,0.55);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: 0.3s;
}
.related-item span { font-size: 13.5px; color: var(--primary-blue); line-height: 1.35; }
.related-item:hover i { background: var(--gold); color: var(--white); }
.related-item:hover span { color: var(--gold); }
/* ---------- Not-found fallback ---------- */
.service-missing { padding: 70px 5%; text-align: center; }
.service-missing h1 { font-size: 26px; color: var(--primary-blue); margin-bottom: 14px; }
.service-missing p { color: var(--text-light); margin-bottom: 26px; }
@media (min-width: 480px) {
.includes-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 576px) {
.highlight-item { flex: 1 1 45%; }
.related-item { flex: 1 1 45%; }
}
@media (min-width: 768px) {
.service-about { padding: 55px 5%; gap: 40px; }
.service-about-text h2 { font-size: 26px; }
.service-includes { padding: 55px 5% 60px; }
.includes-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.why-choose-service { padding: 50px 5%; }
.why-choose-body h2 { font-size: 23px; }
.service-missing { padding: 90px 5%; }
.service-missing h1 { font-size: 32px; }
}
@media (min-width: 992px) {
.service-highlights { padding: 18px 5%; }
.highlight-item { flex: 1 1 30%; padding: 6px 18px; }
.service-about { flex-direction: row; gap: 50px; padding: 65px 5%; }
.service-about-text { width: 52%; }
.service-about-text h2 { font-size: 29px; }
.offer-box { width: 48%; padding: 32px 34px 34px; }
.includes-grid { grid-template-columns: repeat(4, 1fr); }
.why-choose-service { flex-direction: row; align-items: center; gap: 50px; }
.why-choose-img { width: 42%; }
.why-choose-img img { height: 290px; }
.why-choose-body { width: 58%; }
.why-choose-body h2 { font-size: 24px; margin-bottom: 24px; }
.why-choose-body li { font-size: 14.5px; margin-bottom: 15px; }
.related-areas { padding: 40px 5% 44px; }
.related-item { flex: 1 1 30%; justify-content: center; }
}
@media (min-width: 1200px) {
.service-highlights { flex-wrap: nowrap; gap: 0; }
.highlight-item { flex: 1; border-right: 1px solid rgba(255,255,255,0.13); }
.highlight-item:last-child { border-right: none; }
.includes-grid { grid-template-columns: repeat(5, 1fr); }
.related-list { flex-wrap: nowrap; gap: 0; margin-top: 26px; }
.related-item { flex: 1; padding: 8px 16px; border-right: 1px solid #e0e0e0; }
.related-item:last-child { border-right: none; }
}
/* ============================================================
15 OUR TEAM
============================================================ */
.strength-section {
display: flex;
flex-direction: column;
gap: 30px;
padding: 44px 5%;
align-items: flex-start;
}
.strength-text { width: 100%; }
.strength-text .section-title { margin-bottom: 16px; }
.strength-text p { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
.strength-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 16px; }
.strength-card {
border: 1px solid #ececec;
background: var(--white);
text-align: center;
padding: 28px 18px 26px;
transition: 0.3s;
}
.strength-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.07); border-color: var(--gold); }
.strength-icon {
width: 58px; height: 58px;
border: 1px solid var(--gold);
border-radius: 50%;
margin: 0 auto 20px;
display: flex; align-items: center; justify-content: center;
}
.strength-icon i { font-size: 24px; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.strength-card h4 { font-size: 16px; color: var(--primary-blue); line-height: 1.3; margin-bottom: 12px; }
.strength-card p { font-size: 12px; color: var(--text-light); line-height: 1.6; }
/* Team's rule-heading spans the full page width */
body[data-page="team"] .rule-heading { padding: 0 5%; }
body[data-page="team"] .rule-heading::before,
body[data-page="team"] .rule-heading::after { flex: 1; }
/* ---------- Partners ---------- */
.partners-section { padding: 20px 5% 0; }
.partners-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
.partner-card {
background-color: var(--primary-blue);
border: 1px solid rgba(205, 164, 88, 0.55);
padding: 5px;
display: flex;
gap: 16px;
transition: 0.3s;
}
.partner-card:hover { box-shadow: 0 10px 22px rgba(14, 32, 58, 0.25); }
.partner-photo {
width: 118px;
flex-shrink: 0;
align-self: stretch;
object-fit: cover;
object-position: top center;
}
.partner-info { flex: 1; padding: 14px 12px 12px 0; display: flex; flex-direction: column; min-width: 0; }
.partner-info h3 { font-size: 17px; color: var(--white); margin-bottom: 2px; }
.partner-role { font-family: var(--font-serif); font-size: 15px; color: var(--gold); margin-bottom: 10px; }
.partner-info p { font-size: 12px; color: #c7cfd9; line-height: 1.6; }
.partner-footer { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; }
.partner-footer .line { width: 60px; height: 1px; background-color: var(--gold); }
.plus-btn {
width: 26px; height: 26px;
border-radius: 50%;
background-color: var(--gold);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
transition: 0.3s;
}
.plus-btn:hover { background-color: var(--gold-hover); }
/* ---------- Legal team grid (team page) ---------- */
.legal-team-section { padding: 44px 5% 0; }
body[data-page="team"] .team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px 14px;
margin-top: 28px;
}
body[data-page="team"] .team-card {
border: 1px solid #ececec;
background: var(--white);
text-align: center;
padding: 8px 8px 26px;
position: relative;
transition: 0.3s;
}
body[data-page="team"] .team-card:hover {
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
border-color: var(--gold);
}
/* Portrait ratio rather than a fixed height: the tile scales with its column,
so the photo stays proportional at every breakpoint instead of getting
shorter as the grid adds columns. object-position keeps heads in frame. */
body[data-page="team"] .team-card img {
width: 100%;
aspect-ratio: 3 / 4;
height: auto;
max-height: 260px;
object-fit: cover;
object-position: top center;
display: block;
margin-bottom: 12px;
}
body[data-page="team"] .team-card h4 {
font-size: 13px;
color: var(--primary-blue);
margin-bottom: 4px;
line-height: 1.3;
}
body[data-page="team"] .team-card p { font-size: 11px; color: var(--text-light); line-height: 1.5; }
body[data-page="team"] .team-card .plus-btn {
width: 22px; height: 22px;
font-size: 11px;
position: absolute;
bottom: -11px; left: 50%;
transform: translateX(-50%);
}
.team-cta { text-align: center; padding: 36px 5% 46px; }
/* ---------- Why clients choose us ---------- */
.why-choose {
position: relative;
background-color: var(--primary-blue);
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: right center;
overflow: hidden;
}
.why-choose::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, #0E203A 0%, #0E203A 42%, rgba(14, 32, 58, 0.9) 62%, rgba(14, 32, 58, 0.72) 100%);
}
.why-choose-inner {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 24px 16px;
padding: 30px 5%;
}
.why-choose-title { width: 100%; text-align: center; flex-shrink: 0; }
.why-choose-title h5 { font-size: 18px; color: var(--gold); letter-spacing: 1px; line-height: 1.3; }
.why-choose-title h2 {
font-size: 18px;
color: var(--white);
letter-spacing: 1px;
font-weight: 400;
line-height: 1.3;
}
.why-item { text-align: center; color: var(--white); flex: 0 0 45%; }
.why-item i {
font-size: 30px;
color: transparent;
-webkit-text-stroke: 1px var(--white);
margin-bottom: 12px;
display: inline-block;
}
.why-item p { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.4; }
@media (min-width: 576px) {
.strength-grid { grid-template-columns: 1fr 1fr; }
body[data-page="team"] .team-grid { grid-template-columns: repeat(3, 1fr); }
.partner-photo { width: 140px; }
.partner-footer .line { width: 78px; }
}
@media (min-width: 768px) {
.strength-section { padding: 60px 5%; }
.partners-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
body[data-page="team"] .team-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 20px; }
.legal-team-section { padding: 55px 5% 0; }
.why-item { flex: 0 0 30%; }
.why-choose-inner { padding: 34px 5%; }
.why-choose-title h5, .why-choose-title h2 { font-size: 20px; }
}
@media (min-width: 992px) {
.strength-section { flex-direction: row; gap: 50px; padding: 70px 5%; }
.strength-text { width: 38%; }
.strength-text .section-title { margin-bottom: 20px; }
.strength-text p { margin-bottom: 28px; }
.strength-grid { width: 62%; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.strength-card { padding: 32px 18px 28px; }
.strength-card h4 { font-size: 17px; }
.strength-icon { margin-bottom: 22px; }
.partners-grid { grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.partner-info h3 { font-size: 18px; }
.partner-role { font-size: 16px; margin-bottom: 12px; }
body[data-page="team"] .team-grid { margin-top: 34px; }
.team-cta { padding: 45px 5% 60px; }
.why-choose-inner { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: 30px; }
.why-choose-title { width: auto; text-align: left; }
.why-item { flex: 1; }
.why-item i { font-size: 32px; margin-bottom: 14px; }
.why-item p { font-size: 14px; }
}
@media (min-width: 1200px) {
/* 6 columns makes each card narrow; 5 keeps the portraits a usable size. */
body[data-page="team"] .team-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ============================================================
16 CONTACT
============================================================ */
.contact-strip {
background-color: var(--bg-gray);
display: grid;
grid-template-columns: 1fr;
gap: 22px;
padding: 30px 5%;
}
.contact-strip-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 0;
border-right: none;
}
.contact-strip-icon {
width: 48px; height: 48px;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--primary-blue);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
}
.contact-strip-item h4 {
font-family: var(--font-serif);
font-size: 15px;
letter-spacing: 0.5px;
color: var(--primary-blue);
text-transform: uppercase;
margin-bottom: 5px;
}
.contact-strip-item p { font-size: 13px; color: var(--text-light); line-height: 1.6; }
.contact-strip-item a:hover { color: var(--gold); }
/* ---------- Form + map ---------- */
.contact-main {
display: flex;
flex-direction: column;
gap: 44px;
padding: 44px 5%;
}
.contact-form-col, .contact-map-col { width: 100%; }
.contact-lead { font-size: 14px; color: var(--text-light); margin-bottom: 24px; max-width: 440px; }
.contact-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.contact-form input,
.contact-form textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-dark);
padding: 13px 15px;
border: 1px solid #dcdfe4;
border-radius: 3px;
background: var(--white);
transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9aa1ab; }
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(205, 164, 88, 0.18);
}
.contact-form input.invalid,
.contact-form textarea.invalid { border-color: #c0392b; background: #fdf7f6; }
.field-error { display: none; font-size: 12px; color: #c0392b; margin-top: 5px; }
.field.has-error .field-error { display: block; }
.contact-form .btn-dark { justify-self: start; margin-top: 4px; }
.form-status {
display: none;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
padding: 14px 16px;
border-radius: 3px;
font-size: 13.5px;
line-height: 1.6;
}
.form-status.show { display: flex; }
.form-status.ok { background: #eef7f0; border: 1px solid #bcdfc7; color: #1e6b37; }
.form-status.err { background: #fdf1ef; border: 1px solid #f0c4bd; color: #a5342a; }
.form-status i { margin-top: 2px; }
/* ---------- Map ---------- */
.map-address {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
}
.map-address i { color: var(--gold); font-size: 20px; margin-top: 3px; }
.map-frame {
width: 100%;
height: 250px;
border: 1px solid #e3e6ea;
border-radius: 3px;
overflow: hidden;
background: var(--bg-gray);
margin-bottom: 20px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* contact-us.jpg has the headline and gold arch baked into its left
half, which bled into the banner at every size. contact-us-photo.jpg
is that file cropped to the photograph only - the arch is drawn in
CSS. The original is kept in images/banner/ untouched. */
body[data-page="contact"] .banner-media-inner {
background-image: url('../images/banner/contact-us-photo.jpg');
}
@media (min-width: 576px) {
.contact-strip { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
.contact-form .form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
.contact-strip { padding: 36px 5%; }
.contact-main { padding: 56px 5%; gap: 50px; }
.map-frame { height: 300px; }
}
@media (min-width: 992px) {
/* Four info items in a row, separated by hairline rules */
.contact-strip { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 34px 5%; }
.contact-strip-item { padding: 4px 26px; border-right: 1px solid #dfe3e8; }
.contact-strip-item:first-child { padding-left: 0; }
.contact-strip-item:last-child { border-right: none; padding-right: 0; }
/* Form and map side by side with a divider between them */
.contact-main { flex-direction: row; gap: 0; padding: 60px 5%; }
.contact-form-col { width: 52%; padding-right: 5%; }
.contact-map-col { width: 48%; padding-left: 5%; border-left: 1px solid #e8ebef; }
.map-frame { height: 320px; }
}
@media (min-width: 1200px) {
.contact-strip-item p { font-size: 13.5px; }
}
/* ============================================================
17 LATEST UPDATES
============================================================ */
.updates-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
padding: 44px 5% 0;
}
.updates-intro-text p { font-size: 14.5px; color: var(--text-light); max-width: 620px; }
.updates-section { padding: 34px 5% 50px; }
.updates-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.update-card {
background: var(--white);
border: 1px solid #ececec;
display: flex;
flex-direction: column;
transition: 0.3s;
}
.update-card:hover { box-shadow: 0 12px 26px rgba(14, 32, 58, 0.1); border-color: var(--gold); }
.update-media { display: block; position: relative; overflow: hidden; }
.update-media img {
width: 100%;
height: 190px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.update-card:hover .update-media img { transform: scale(1.04); }
/* .date-badge is shared with the home page news cards, but here it
sits inside the image rather than overlapping a sibling. */
.update-media .date-badge {
position: absolute;
top: auto; bottom: 0; left: 0;
background: var(--gold);
color: var(--white);
padding: 6px 12px;
text-align: center;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
.update-media .date-badge span { display: block; font-size: 16px; }
.update-body { padding: 20px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.update-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.update-cat {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(205, 164, 88, 0.55);
border-radius: 2px;
padding: 3px 8px;
}
.update-date { font-size: 11.5px; color: var(--text-light); }
.update-card h3 { font-size: 17px; color: var(--primary-blue); line-height: 1.35; margin-bottom: 10px; }
.update-card h3 a:hover { color: var(--gold); }
.update-excerpt { font-size: 13px; color: var(--text-light); line-height: 1.7; margin-bottom: 16px; }
.update-body .read-more { margin-top: auto; align-self: flex-start; }
/* ---------- Press coverage ---------- */
.press-section { background-color: var(--bg-gray); padding: 44px 5% 50px; }
.press-section .center-heading .ornament::before { background: var(--bg-gray); }
.press-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
.press-card {
background: var(--white);
border: 1px solid #e6e8ec;
display: flex;
flex-direction: column;
transition: 0.3s;
}
.press-card:hover { box-shadow: 0 10px 22px rgba(14, 32, 58, 0.1); border-color: var(--gold); }
/* Clippings are newsprint scans - contain, on a paper-toned mat, so
text stays legible instead of being cropped by object-fit: cover. */
.press-clip {
display: block;
background: #f0ece4;
border-bottom: 1px solid #e6e8ec;
}
.press-clip img {
width: 100%;
height: 240px;
object-fit: contain;
object-position: top center;
display: block;
}
.press-body { padding: 18px 18px 20px; }
.press-source {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.press-source span { color: rgba(0,0,0,0.2); margin: 0 2px; }
.press-card h4 { font-size: 15.5px; color: var(--primary-blue); line-height: 1.4; margin-bottom: 8px; }
.press-body p { font-size: 12.5px; color: var(--text-light); line-height: 1.7; }
@media (min-width: 576px) {
.updates-grid { grid-template-columns: 1fr 1fr; }
.press-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
.updates-intro {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 34px;
padding: 60px 5% 0;
}
.updates-intro-text { flex: 1; }
.updates-section { padding: 40px 5% 60px; }
.press-section { padding: 55px 5% 60px; }
.press-grid { grid-template-columns: repeat(3, 1fr); margin-top: 38px; }
.press-clip img { height: 210px; }
}
@media (min-width: 992px) {
.updates-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.updates-section { padding: 40px 5% 70px; }
.update-media img { height: 200px; }
.update-body { padding: 22px 20px 24px; }
.update-card h3 { font-size: 18px; }
.press-clip img { height: 250px; }
}
/* ---------- Article detail (update-detail.html) ---------- */
/* Measure is capped for readability rather than filling the viewport. */
.article-main {
max-width: 820px;
margin: 0 auto;
padding: 34px 5% 44px;
}
.article-hero { margin-bottom: 22px; }
.article-hero img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
border: 1px solid #ececec;
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid #eef0f3;
}
.article-meta > span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--text-light);
}
.article-meta i { color: var(--gold); font-size: 12px; }
a.update-cat:hover { background: var(--gold); color: var(--white); }
.article-body p { font-size: 15px; color: #4a5563; line-height: 1.85; margin-bottom: 18px; }
.article-lead {
font-size: 16.5px !important;
color: var(--primary-blue) !important;
line-height: 1.75 !important;
font-weight: 400;
padding-left: 16px;
border-left: 3px solid var(--gold);
}
.article-body h2 {
font-size: 20px;
color: var(--primary-blue);
line-height: 1.35;
margin: 30px 0 12px;
}
.takeaway-box {
background: var(--bg-gray);
border-left: 3px solid var(--gold);
padding: 24px 22px;
margin: 32px 0 26px;
}
.takeaway-box h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.takeaway-box ul { list-style: none; }
.takeaway-box li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--primary-blue);
line-height: 1.6;
margin-bottom: 12px;
}
.takeaway-box li:last-child { margin-bottom: 0; }
.takeaway-box li i { color: var(--gold); font-size: 13px; margin-top: 4px; flex-shrink: 0; }
.article-disclaimer {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px !important;
font-style: italic;
color: var(--text-light) !important;
line-height: 1.7 !important;
background: #fbfaf7;
border: 1px solid #efe7d7;
border-radius: 3px;
padding: 14px 16px;
margin-top: 26px !important;
}
.article-disclaimer i { color: var(--gold); font-style: normal; margin-top: 3px; }
.article-foot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid #eef0f3;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--primary-blue);
transition: 0.3s;
}
.back-link:hover { color: var(--gold); }
.more-updates { background-color: var(--bg-light); padding: 44px 5% 50px; }
.more-updates .center-heading .ornament::before { background: var(--bg-light); }
.more-updates .updates-grid { margin-top: 30px; }
@media (min-width: 576px) {
.article-hero img { height: 300px; }
.article-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) {
.article-main { padding: 44px 5% 56px; }
.article-hero img { height: 360px; }
.article-body h2 { font-size: 22px; margin-top: 34px; }
.more-updates { padding: 55px 5% 60px; }
.more-updates .updates-grid { margin-top: 38px; }
}
@media (min-width: 992px) {
.article-main { padding: 50px 0 60px; }
.article-hero img { height: 400px; }
.article-body p { font-size: 15.5px; }
.article-lead { font-size: 17.5px !important; }
.article-body h2 { font-size: 24px; }
}
/* ============================================================
18 OUR CLIENTS
============================================================ */
.clientele-intro {
display: flex;
flex-direction: column;
gap: 30px;
padding: 44px 5%;
}
.clientele-text { width: 100%; }
.clientele-text p { font-size: 14.5px; color: var(--text-light); margin-bottom: 16px; }
.trust-list { list-style: none; width: 100%; }
.trust-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--text-dark);
padding: 12px 0;
border-bottom: 1px solid #eef0f3;
}
.trust-list li:last-child { border-bottom: none; }
.trust-list li i { color: var(--gold); font-size: 15px; margin-top: 4px; flex-shrink: 0; }
/* ---------- Client cards ---------- */
.clients-section { padding: 44px 5% 50px; }
.clients-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 30px;
}
.client-card {
border: 1px solid #ececec;
background: var(--white);
text-align: center;
padding: 24px 14px 22px;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.3s;
}
.client-card:hover {
box-shadow: 0 10px 22px rgba(14, 32, 58, 0.1);
border-color: var(--gold);
transform: translateY(-3px);
}
/* Initials stand in for logos the firm has not supplied */
.client-mark {
width: 58px; height: 58px;
border-radius: 50%;
background-color: var(--primary-blue);
color: var(--gold);
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: 0.3s;
}
.client-card:hover .client-mark { background-color: var(--gold); color: var(--white); }
.client-card h3 {
font-size: 14px;
color: var(--primary-blue);
line-height: 1.4;
margin-bottom: 8px;
flex: 1;
}
.client-card p {
font-size: 11.5px;
color: var(--text-light);
display: flex;
align-items: center;
gap: 5px;
}
.client-card p i { color: var(--gold); font-size: 11px; }
.clients-note {
text-align: center;
font-size: 12.5px;
color: var(--text-light);
margin-top: 26px;
}
/* ---------- Sectors ---------- */
.sectors-section {
position: relative;
background-color: var(--primary-blue);
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: center;
padding: 40px 5% 44px;
overflow: hidden;
}
.sectors-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(11, 21, 37, 0.93);
}
.sectors-section > * { position: relative; z-index: 2; }
.sectors-section .center-heading .ornament::before { background: #0b1525; }
.sectors-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 12px;
margin-top: 30px;
}
.sector-item { text-align: center; color: var(--white); }
.sector-item i {
font-size: 28px;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
margin-bottom: 12px;
display: inline-block;
}
.sector-item span {
display: block;
font-family: var(--font-serif);
font-size: 13.5px;
line-height: 1.4;
}
@media (min-width: 576px) {
.clients-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sectors-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
.clientele-intro { padding: 60px 5%; gap: 40px; }
.clients-section { padding: 60px 5%; }
.clients-grid { grid-template-columns: repeat(4, 1fr); }
.sectors-section { padding: 46px 5% 52px; }
.sectors-strip { margin-top: 36px; }
}
@media (min-width: 992px) {
.clientele-intro { flex-direction: row; align-items: flex-start; gap: 60px; padding: 70px 5%; }
.clientele-text { width: 55%; }
.trust-list { width: 45%; }
.clients-section { padding: 70px 5% 60px; }
.clients-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 36px; }
.client-card { padding: 28px 16px 24px; }
.client-mark { width: 64px; height: 64px; font-size: 22px; }
.client-card h3 { font-size: 14.5px; }
.sectors-strip { grid-template-columns: repeat(8, 1fr); gap: 20px 10px; }
.sector-item i { font-size: 30px; }
}
@media (min-width: 1200px) {
.clients-grid { grid-template-columns: repeat(7, 1fr); }
}
/* ============================================================
19 FLOATING WHATSAPP / CALL BUTTONS
Injected into every page by js/layout.js. Sits below the
sticky header (z-index 200) so it can never cover the nav.
============================================================ */
.floating-actions {
position: fixed;
right: 14px;
bottom: 14px;
z-index: 150;
display: flex;
flex-direction: column;
gap: 10px;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* Get out of the way of the profile modal and the gallery lightbox */
body.modal-open .floating-actions {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.float-btn {
width: 46px;
height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 21px;
box-shadow: 0 4px 14px rgba(0,0,0,0.28);
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
/* Keeps the circle from being squeezed by the label on hover */
flex-shrink: 0;
}
.float-btn:hover, .float-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.34); }
.float-btn-whatsapp { background-color: #25D366; }
.float-btn-whatsapp:hover { background-color: #1ebe5b; }
.float-btn-call { background-color: var(--gold); }
.float-btn-call:hover { background-color: var(--gold-hover); }
.float-btn i { line-height: 1; }
/* Label is a desktop affordance only - hidden from view on phones but
still exposed to assistive tech via aria-label on the anchor. */
.float-btn-label { display: none; }
@media (min-width: 992px) {
.floating-actions { right: 22px; bottom: 22px; gap: 12px; }
.float-btn { width: 52px; height: 52px; font-size: 23px; position: relative; }
/* Slide-out label on hover */
.float-btn-label {
display: block;
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
white-space: nowrap;
background: var(--primary-blue);
color: var(--white);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px;
padding: 7px 12px;
border-radius: 3px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.float-btn-label::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: var(--primary-blue);
}
.float-btn:hover .float-btn-label, .float-btn:focus-visible .float-btn-label {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.float-btn, .float-btn-label { transition: none; }
.float-btn:hover, .float-btn:focus-visible { transform: none; }
}
/* ============================================================
20 TEAM / PARTNER PROFILE MODAL
Opened from the "+" badge on any team or partner card.
============================================================ */
.team-card.is-clickable, .partner-card.is-clickable { cursor: pointer; }
.team-card.is-clickable:focus-visible,
.partner-card.is-clickable:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
body.modal-open { overflow: hidden; }
.profile-overlay {
position: fixed;
inset: 0;
z-index: 300;
display: none;
align-items: flex-start;
justify-content: center;
padding: 16px;
overflow-y: auto;
background: rgba(9, 18, 33, 0.72);
}
.profile-overlay.open { display: flex; }
.profile-modal {
position: relative;
width: 100%;
max-width: 720px;
margin: auto;
background: var(--white);
border-top: 3px solid var(--gold);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
}
.profile-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--primary-blue);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
transition: 0.25s;
}
.profile-close:hover { background: var(--gold); color: var(--white); }
.profile-photo { background: #eef1f5; flex-shrink: 0; }
.profile-photo img {
width: 100%;
height: 260px;
object-fit: cover;
object-position: top center;
display: block;
}
.profile-info { padding: 24px 22px 26px; }
.profile-info h3 { font-size: 22px; color: var(--primary-blue); line-height: 1.3; }
.profile-role {
font-family: var(--font-serif);
font-size: 16px;
color: var(--gold);
margin-top: 2px;
}
.profile-info .gold-rule { margin: 14px 0 16px; }
.profile-lines { list-style: none; margin-bottom: 18px; }
.profile-lines li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
margin-bottom: 8px;
}
.profile-lines li i { color: var(--gold); font-size: 12px; margin-top: 5px; flex-shrink: 0; }
.profile-bio { font-size: 14px; color: var(--text-light); line-height: 1.8; margin-bottom: 18px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 22px;
border: 1px solid var(--gold);
border-radius: 4px;
color: var(--primary-blue);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
transition: 0.3s;
}
.btn-outline i { color: var(--gold); font-size: 12px; }
.btn-outline:hover { background: var(--gold); color: var(--white); }
.btn-outline:hover i { color: var(--white); }
@media (min-width: 640px) {
.profile-overlay { padding: 30px; align-items: center; }
.profile-modal { flex-direction: row; }
.profile-photo { width: 42%; }
.profile-photo img { height: 100%; min-height: 320px; }
.profile-info { width: 58%; padding: 30px 28px; }
.profile-info h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.profile-close { transition: none; }
}
/* ============================================================
21 GALLERY + LIGHTBOX
============================================================ */
.gallery-section { padding: 44px 5% 50px; }
/* ---------- Filter chips ---------- */
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 28px 0 26px;
}
.gallery-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 15px;
border: 1px solid #e2e5ea;
border-radius: 40px;
background: var(--white);
color: var(--primary-blue);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: 0.25s;
}
.gallery-chip:hover { border-color: var(--gold); color: var(--gold); }
.gallery-chip.active { background: var(--primary-blue); border-color: var(--primary-blue); color: var(--white); }
.chip-count {
font-size: 10.5px;
line-height: 1;
padding: 3px 6px;
border-radius: 20px;
background: var(--bg-gray);
color: var(--text-light);
transition: 0.25s;
}
.gallery-chip.active .chip-count { background: var(--gold); color: var(--white); }
/* ---------- Tile grid ---------- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.gallery-item {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
padding: 0;
border: 1px solid #ececec;
background: var(--bg-gray);
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.gallery-item.is-hidden { display: none; }
.gallery-item:hover, .gallery-item:focus-visible {
border-color: var(--gold);
box-shadow: 0 12px 26px rgba(14, 32, 58, 0.16);
transform: translateY(-3px);
outline: none;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.07); }
.gallery-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
text-align: center;
background: linear-gradient(to top, rgba(14,32,58,0.92) 0%, rgba(14,32,58,0.55) 55%, rgba(14,32,58,0.15) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-zoom {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--gold);
color: var(--gold);
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gallery-caption {
font-family: var(--font-sans);
font-size: 11.5px;
line-height: 1.5;
color: var(--white);
/* Long captions must not push the zoom badge out of the tile */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- Lightbox ---------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 320;
display: none;
align-items: center;
justify-content: center;
padding: 54px 14px 20px;
background: rgba(6, 12, 22, 0.93);
}
.lightbox.open { display: flex; }
.lb-figure {
max-width: 1100px;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.lb-img {
max-width: 100%;
/* Leaves room for the caption row below on short screens */
max-height: calc(100vh - 165px);
object-fit: contain;
display: block;
background: #0b1525;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.lb-cap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.lb-text { font-size: 13.5px; color: #e6eaf0; line-height: 1.6; max-width: 720px; }
.lb-count {
font-family: var(--font-sans);
font-size: 11.5px;
letter-spacing: 1.5px;
color: var(--gold);
}
.lb-close, .lb-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: var(--white);
cursor: pointer;
transition: 0.25s;
}
.lb-close:hover, .lb-nav:hover { background: var(--gold); border-color: var(--gold); }
.lb-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 17px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; font-size: 16px; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
@media (min-width: 576px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-caption { font-size: 12px; }
}
@media (min-width: 768px) {
.gallery-section { padding: 60px 5%; }
.gallery-filters { gap: 10px; margin: 34px 0 30px; }
.gallery-chip { padding: 10px 18px; font-size: 13px; }
.gallery-grid { gap: 16px; }
.lightbox { padding: 20px 70px; }
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 19px; }
.lb-nav { width: 46px; height: 46px; font-size: 18px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-img { max-height: calc(100vh - 140px); }
.lb-text { font-size: 14.5px; }
}
@media (min-width: 992px) {
.gallery-section { padding: 70px 5%; }
.gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-zoom { width: 46px; height: 46px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.gallery-item, .gallery-item img, .gallery-overlay, .gallery-chip,
.lb-close, .lb-nav { transition: none; }
.gallery-item:hover { transform: none; }
.gallery-item:hover img { transform: none; }
}
/* ============================================================
22 ASSOCIATES
============================================================ */
.network-intro {
display: flex;
flex-direction: column;
gap: 32px;
padding: 44px 5%;
}
.network-intro-text { width: 100%; }
.network-intro-text p { font-size: 14.5px; color: var(--text-light); margin-bottom: 16px; }
.network-intro-text #office-count { color: var(--gold); font-weight: 600; }
.network-intro-text .btn-dark { margin-top: 6px; }
.network-points { width: 100%; display: grid; grid-template-columns: 1fr; gap: 14px; }
.network-point {
border: 1px solid #ececec;
background: var(--white);
padding: 24px 20px;
transition: 0.3s;
}
.network-point:hover { box-shadow: 0 8px 20px rgba(14,32,58,0.08); border-color: var(--gold); }
.network-point-icon {
width: 50px; height: 50px;
border: 1px solid var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.network-point-icon i { font-size: 20px; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.network-point h4 { font-size: 17px; color: var(--primary-blue); margin-bottom: 8px; }
.network-point p { font-size: 13px; color: var(--text-light); line-height: 1.7; }
/* ---------- Office grid ---------- */
.offices-section { background-color: var(--bg-gray); padding: 44px 5% 50px; }
.offices-section .center-heading .ornament::before { background: var(--bg-gray); }
.offices-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 30px;
}
.office-card {
position: relative;
background: var(--white);
border: 1px solid #e6e8ec;
text-align: center;
padding: 22px 12px 20px;
transition: 0.3s;
}
.office-card:hover { box-shadow: 0 8px 20px rgba(14,32,58,0.1); border-color: var(--gold); }
.office-card > i { font-size: 20px; color: var(--gold); margin-bottom: 10px; display: block; }
.office-card h4 { font-size: 15px; color: var(--primary-blue); margin-bottom: 3px; }
.office-card p { font-size: 11.5px; color: var(--text-light); line-height: 1.5; }
/* The principal office is called out rather than listed as an equal */
.office-card.is-principal { background: var(--primary-blue); border-color: var(--gold); }
.office-card.is-principal h4 { color: var(--white); }
.office-card.is-principal p { color: #b9c3cf; }
.office-tag {
display: inline-block;
margin-top: 9px;
padding: 3px 9px;
border-radius: 20px;
background: var(--gold);
color: var(--white);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* ---------- Associate cards ---------- */
.associates-section { padding: 44px 5% 50px; }
.associates-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 30px;
}
.associate-card {
display: flex;
align-items: flex-start;
gap: 15px;
border: 1px solid #ececec;
background: var(--white);
padding: 20px 18px;
transition: 0.3s;
}
.associate-card:hover { box-shadow: 0 8px 20px rgba(14,32,58,0.09); border-color: var(--gold); }
.associate-mark {
width: 50px; height: 50px;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--primary-blue);
color: var(--gold);
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.associate-card:hover .associate-mark { background-color: var(--gold); color: var(--white); }
/* Photo variant of the initials disc: same 50px circle, so cards with a
photo and cards still on initials line up exactly. */
.associate-mark-photo { padding: 0; overflow: hidden; background-color: var(--primary-blue); }
.associate-mark-photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
}
.associate-card:hover .associate-mark-photo { background-color: var(--primary-blue); }
.associate-info { min-width: 0; }
.associate-info h4 { font-size: 15px; color: var(--primary-blue); line-height: 1.35; margin-bottom: 3px; }
.associate-role {
font-family: var(--font-serif);
font-size: 13.5px;
color: var(--gold);
margin-bottom: 6px;
}
.associate-focus { font-size: 12.5px; color: var(--text-light); line-height: 1.6; }
.associate-court {
display: flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
color: var(--primary-blue);
margin-top: 8px;
}
.associate-court i { color: var(--gold); font-size: 11px; }
.associates-note {
text-align: center;
font-size: 12.5px;
color: var(--text-light);
margin-top: 26px;
}
.associates-note a { color: var(--gold); font-weight: 500; }
.associates-note a:hover { text-decoration: underline; }
/* ---------- Courts strip ---------- */
.courts-section {
position: relative;
background-color: var(--primary-blue);
background-image: url('../images/banner/our-team.jpg');
background-size: cover;
background-position: center;
padding: 40px 5% 44px;
overflow: hidden;
}
.courts-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(11, 21, 37, 0.93);
}
.courts-section > * { position: relative; z-index: 2; }
.courts-section .center-heading .ornament::before { background: #0b1525; }
.courts-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 12px;
margin-top: 30px;
}
.court-item { text-align: center; color: var(--white); }
.court-item i {
font-size: 26px;
color: transparent;
-webkit-text-stroke: 1px var(--gold);
margin-bottom: 12px;
display: inline-block;
}
.court-item span {
display: block;
font-family: var(--font-serif);
font-size: 13.5px;
line-height: 1.4;
}
@media (min-width: 576px) {
.network-points { grid-template-columns: 1fr 1fr; }
.offices-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.associates-grid { grid-template-columns: 1fr 1fr; }
.courts-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
.network-intro { padding: 60px 5%; gap: 40px; }
.offices-section { padding: 60px 5%; }
.offices-grid { grid-template-columns: repeat(4, 1fr); }
.associates-section { padding: 60px 5%; }
.courts-section { padding: 46px 5% 52px; }
.courts-strip { grid-template-columns: repeat(6, 1fr); gap: 20px 10px; margin-top: 36px; }
}
@media (min-width: 992px) {
.network-intro { flex-direction: row; align-items: flex-start; gap: 55px; padding: 70px 5%; }
.network-intro-text { width: 42%; }
.network-points { width: 58%; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.network-point { padding: 28px 22px; }
.offices-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 36px; }
.associates-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.associates-section { padding: 70px 5% 60px; }
.associate-card { padding: 22px 20px; }
.court-item i { font-size: 28px; }
}
@media (min-width: 1200px) {
.associates-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
CONTACT FORM - IMAGE CAPTCHA
============================================================ */
.field-captcha { margin-top: 4px; }
.captcha-field-label {
display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px;
}
/* One line: the code input first, then the image and its refresh button.
Wraps on very narrow phones, where three items would each be too
cramped - the input keeps the full width and the image drops below it. */
.captcha-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.captcha-image-wrap {
border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; flex-shrink: 0; line-height: 0;
background: var(--primary-blue);
}
.captcha-image-wrap img { display: block; width: 150px; height: 50px; }
.captcha-refresh {
width: 44px; height: 50px; border-radius: 8px; border: 1px solid #e0e0e0;
background: var(--white); cursor: pointer; color: var(--text-light); font-size: 15px; flex-shrink: 0;
transition: color .15s ease, border-color .15s ease;
}
.captcha-refresh:hover { color: var(--gold); border-color: var(--gold); }
/* Takes the rest of the row, and matches the height of the two tiles
beside it rather than the default input height. */
.contact-form .captcha-row input {
flex: 1 1 180px;
min-width: 0;
height: 50px;
margin: 0;
}
/* ============================================================
ONLINE SERVICES - pay-online service cards
============================================================ */
.online-services { padding: 50px 20px 60px; max-width: 1200px; margin: 0 auto; }
.online-services-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.online-services-head .gold-rule { margin-left: auto; margin-right: auto; }
.online-services-lede { color: var(--text-light); font-size: 15px; }
.online-service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.online-service-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid #e8e8e8;
border-radius: 10px;
/* Padding moved onto the body: the photo runs edge to edge at the top. */
padding: 0 0 24px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.online-service-card:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 12px 30px rgba(14, 32, 58, .10);
}
/* Photo banner (replaces the old gold icon tile). The navy background shows
while the image loads, and covers the case of a service with no photo.
A fixed height rather than an aspect ratio: the cards are wide, and a
16/10 ratio made the photo taller than the text it introduces. */
.online-service-media {
position: relative;
width: 100%;
height: 130px;
background: var(--primary-blue);
overflow: hidden;
margin-bottom: 16px;
}
.online-service-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.online-service-card:hover .online-service-media img { transform: scale(1.05); }
/* Everything below the photo keeps the original inset. */
.online-service-card > :not(.online-service-media) { margin-left: 24px; margin-right: 24px; }
.online-service-title {
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.35;
color: var(--primary-blue);
margin-bottom: 10px;
}
.online-service-desc { color: var(--text-light); font-size: 14px; margin-bottom: 14px; }
/* ---- Feature bullets ---- */
.online-service-features {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex; flex-direction: column; gap: 9px;
/* Fills the space so the price/button row stays bottom-aligned across
cards whose bullet text wraps to different heights. */
flex: 1;
}
.online-service-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.5; color: var(--text-light);
}
.online-service-features li i {
color: var(--gold); font-size: 13px; margin-top: 3px; flex-shrink: 0;
}
/* ---- Price + button row, pinned to the bottom of every card ---- */
.online-service-foot {
margin-top: auto;
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
padding-top: 4px;
}
.online-service-price {
display: inline-flex; align-items: center;
padding: 11px 16px; border-radius: 4px;
background-color: #d9c08a; color: #4a3410;
font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
/* A