/* ============================================================ AMANI ALSAEEDI — Advocates & Legal Consultants L.L.C Design system: ivory ground, maroon ink, cold gold accents One stylesheet serves AR (RTL) and EN (LTR) via logical props Dials: DESIGN_VARIANCE 6 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4 Single light theme (approved by the firm). One accent: cold gold. One radius scale: --radius everywhere. No em-dashes in UI copy. ============================================================ */ :root { /* Brand palette (from business card + approved logo) */ --maroon-950: #2f0b12; --maroon-900: #3e1019; --maroon-800: #4a1622; /* primary brand maroon */ --maroon-700: #5c1f2b; --maroon-600: #6f2a37; --ink: #43292e; /* long-form body text */ --ink-soft: #6b5055; --gold-300: #e3d3ab; --gold-400: #d5bc85; --gold-500: #c9aa66; /* decorative gold (hairlines, ornament, large display) */ --gold-600: #ad8c4b; --gold-700: #7a5c28; /* text-safe gold on ivory */ --ivory: #faf7f1; /* page ground */ --ivory-2: #f4efe4; /* alternate section ground */ --ivory-3: #ece4d3; --white: #ffffff; --line: rgba(74, 22, 34, .16); --line-gold: rgba(201, 170, 102, .55); --line-gold-soft: rgba(201, 170, 102, .3); --shadow-soft: 0 10px 40px -18px rgba(62, 16, 25, .22); --shadow-lift: 0 26px 64px -26px rgba(62, 16, 25, .34); /* Type scale — hero capped so a 2-line headline always clears the fold */ --fs-display: clamp(2rem, 1.35rem + 1.9vw, 3rem); --fs-hero: clamp(1.85rem, 1.3rem + 1.7vw, 2.75rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); --fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); --fs-lead: clamp(1.02rem, .95rem + .35vw, 1.2rem); --fs-body: 1.0625rem; --fs-small: .9rem; --fs-kicker: .78rem; /* Fonts — swapped per language on */ --font-head: 'El Messiri', 'EB Garamond', serif; --font-body: 'Tajawal', 'Lato', sans-serif; --font-latin-head: 'EB Garamond', serif; /* Arabic headlines carry diacritics; they need more leading than Latin. */ --lh-head: 1.5; --container: 1180px; --sec-pad: clamp(4.5rem, 3rem + 5vw, 8rem); --radius: 4px; /* topstrip + header, used to size the hero against the real fold */ --chrome-h: 128px; --ease: cubic-bezier(.22, .61, .36, 1); } html[lang="en"] { --font-head: 'EB Garamond', serif; --font-body: 'Lato', 'Segoe UI', sans-serif; --lh-head: 1.15; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.75; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--maroon-800); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--gold-700); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--maroon-800); line-height: var(--lh-head); margin: 0 0 .6em; font-weight: 700; text-wrap: balance; } p { margin: 0 0 1.1em; text-wrap: pretty; } ul { padding: 0; margin: 0; list-style: none; } ::selection { background: var(--maroon-800); color: var(--gold-300); } :focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: 2px; } .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Latin runs inside Arabic prose: isolate so neighbouring punctuation does not get reordered by the bidi algorithm. */ .lat { unicode-bidi: isolate; } .ltr { direction: ltr; unicode-bidi: isolate; } /* ---------- Ornamental primitives ---------- */ .kicker { display: inline-flex; align-items: center; gap: .9em; font-size: var(--fs-kicker); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-700); margin-bottom: .2em; } html[lang="ar"] .kicker { letter-spacing: .16em; } .kicker::before, .kicker.k-center::after { content: ""; width: 42px; height: 1px; background: var(--gold-500); flex: none; } .k-center { justify-content: center; } .rule-gold { border: 0; height: 1px; background: linear-gradient(to right, transparent, var(--gold-500), transparent); margin: 0; } .section { padding-block: var(--sec-pad); position: relative; } .section-alt { background: var(--ivory-2); border-block: 1px solid var(--line-gold-soft); } .section-head { max-width: 700px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: var(--fs-h2); margin-top: .3em; } .section-head .lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 2.1em; border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: .04em; line-height: 1.2; cursor: pointer; border: 1px solid transparent; text-wrap: nowrap; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); } .btn-primary { background: var(--maroon-800); color: var(--ivory); border-color: var(--maroon-800); } .btn-primary:hover { background: var(--maroon-700); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn-ghost { background: transparent; color: var(--maroon-800); border-color: var(--gold-600); } .btn-ghost:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--maroon-950); transform: translateY(-2px); } .btn-gold { background: var(--gold-500); color: var(--maroon-950); border-color: var(--gold-500); } .btn-gold:hover { background: var(--gold-400); color: var(--maroon-950); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .btn:active { transform: translateY(0) scale(.985); } .btn svg { width: 1.05em; height: 1.05em; flex: none; } html[dir="rtl"] .btn svg.arrow, html[dir="rtl"] .more-link svg { transform: scaleX(-1); } /* ---------- Top strip ---------- */ .topstrip { background: var(--maroon-950); color: var(--gold-300); font-size: .85rem; letter-spacing: .02em; border-bottom: 1px solid rgba(201, 170, 102, .25); position: relative; z-index: 60; } .topstrip .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .45rem; } .topstrip a { color: var(--gold-300); display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; } .topstrip a:hover { color: var(--gold-400); } .topstrip svg { width: .95em; height: .95em; flex: none; } .topstrip .ts-group { display: flex; align-items: center; gap: 1.6rem; min-width: 0; } .lang-switch { font-family: var(--font-latin-head); font-size: .9rem; letter-spacing: .14em; border: 1px solid rgba(201, 170, 102, .45); padding: .1em .9em .18em; border-radius: 2px; flex: none; } .lang-switch:hover { background: var(--gold-500); color: var(--maroon-950) !important; } /* One line, always. Email is the first thing to go, then the phone label. */ @media (max-width: 720px) { .topstrip { font-size: .8rem; } .topstrip .ts-group { gap: 1rem; } .topstrip .ts-mail { display: none; } } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 241, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-gold-soft); transition: box-shadow .3s var(--ease), background .3s var(--ease); } .site-header.scrolled { box-shadow: 0 12px 40px -22px rgba(62, 16, 25, .4); background: rgba(250, 247, 241, .97); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .8rem; } .brand { display: flex; align-items: center; flex: none; } .brand img { height: clamp(38px, 3.4vw, 46px); width: auto; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 2rem); } .site-nav a { font-size: .97rem; font-weight: 500; color: var(--maroon-800); padding-block: .35em; position: relative; white-space: nowrap; } .site-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold-600); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease); } .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); } .site-nav a[aria-current="page"] { color: var(--gold-700); } .header-cta { flex: none; } .header-cta .btn { padding: .68em 1.5em; font-size: .93rem; } /* Mobile nav */ .nav-toggle { display: none; background: none; border: 1px solid var(--line-gold); border-radius: var(--radius); width: 44px; height: 44px; cursor: pointer; color: var(--maroon-800); align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } .nav-toggle .icon-close, .nav-open .nav-toggle .icon-menu { display: none; } .nav-open .nav-toggle .icon-close { display: block; } @media (max-width: 980px) { .nav-toggle { display: inline-flex; } .header-cta { display: none; } .site-nav { position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ivory); border-bottom: 1px solid var(--line-gold); padding: .5rem 0 1rem; box-shadow: var(--shadow-lift); display: none; } .nav-open .site-nav { display: flex; } .site-nav a { padding: .8em clamp(1.25rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line-gold-soft); } .site-nav a::after { display: none; } } /* ---------- Hero (home) — asymmetric split ---------- */ .hero { position: relative; overflow: hidden; background: var(--ivory); padding-block: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); } .hero-guilloche { position: absolute; inset: -10%; background: url("../img/guilloche.svg") center / cover no-repeat; opacity: .42; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 30%, transparent 78%); } .hero-inner { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; min-height: clamp(440px, calc(100dvh - var(--chrome-h) - 7rem), 620px); } .hero-copy { max-width: 34rem; } .hero h1 { font-size: var(--fs-hero); margin-bottom: .45em; } .hero .lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 32rem; margin-bottom: 0; } .hero-rule { width: 96px; height: 1px; border: 0; margin: 1.5rem 0 1.4rem; background: linear-gradient(to right, var(--gold-500), transparent); } html[dir="rtl"] .hero-rule { background: linear-gradient(to left, var(--gold-500), transparent); } .hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; } /* Framed plate: Union House, the firm's actual neighbour. Borders belong to the picture, not the figure, so the caption sits outside the frame rather than inside it. */ .hero-plate { justify-self: center; width: 100%; max-width: 540px; margin: 0; } .hero-plate picture { position: relative; display: block; } /* No crop: the photograph shows a listed national landmark, so it is reproduced at its own proportions. The intrinsic ratio comes from the width/height attributes on the , which must match the real file. */ .hero-plate img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lift); } .hero-plate picture::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-gold); border-radius: var(--radius); pointer-events: none; } .hero-plate figcaption { margin-top: 1rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--line-gold); font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); max-width: 34ch; } /* On one column the message leads and the photograph follows: the value proposition and the CTA have to clear the fold on a phone. */ @media (max-width: 900px) { .hero { padding-block: clamp(2rem, 4vw, 3rem); } .hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 2.25rem; } .hero-copy { max-width: none; } .hero-plate { max-width: 100%; } .hero-ctas { margin-top: 1.75rem; } .hero-ctas .btn { flex: 1 1 auto; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; overflow: hidden; background: var(--maroon-900); color: var(--ivory); padding-block: clamp(3.5rem, 3rem + 3.5vw, 6.5rem); } .page-hero::before { content: ""; position: absolute; inset: 0; background: url("../img/guilloche.svg") center / cover no-repeat; opacity: .14; pointer-events: none; } .page-hero.has-photo::before { display: none; } .page-hero .ph-photo { position: absolute; inset: 0; background-size: cover; background-position: center; } /* Directional scrim: heavy behind the text, light on the far side so the photograph still reads as a photograph. The strong band runs to 62%, past where the longest lead line ends, so every glyph clears WCAG AA. */ .page-hero .ph-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(47, 11, 18, .93) 0%, rgba(47, 11, 18, .86) 40%, rgba(47, 11, 18, .74) 62%, rgba(47, 11, 18, .34) 100%), linear-gradient(to top, rgba(47, 11, 18, .55), transparent 60%); } html[dir="ltr"] .page-hero .ph-photo::after { background: linear-gradient(to right, rgba(47, 11, 18, .93) 0%, rgba(47, 11, 18, .86) 40%, rgba(47, 11, 18, .74) 62%, rgba(47, 11, 18, .34) 100%), linear-gradient(to top, rgba(47, 11, 18, .55), transparent 60%); } .page-hero .container { position: relative; z-index: 1; } .page-hero .kicker { color: var(--gold-400); } .page-hero h1 { color: var(--white); font-size: var(--fs-display); margin: .3em 0 .35em; max-width: 18ch; } .page-hero .lead { color: rgba(250, 247, 241, .88); max-width: 52ch; font-size: var(--fs-lead); margin-bottom: 0; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: .5em; font-size: var(--fs-small); color: var(--gold-300); margin-bottom: 1.2rem; } .breadcrumbs a { color: var(--gold-300); } .breadcrumbs a:hover { color: var(--gold-400); } .breadcrumbs .sep { color: rgba(201, 170, 102, .6); } /* ---------- Editorial split (about / founder / contact) ---------- */ .split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 4vw, 5rem); align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .split h2 { font-size: var(--fs-h2); margin-top: .3em; } .cred-card { background: var(--white); border: 1px solid var(--line-gold); border-top: 3px solid var(--gold-500); padding: clamp(1.8rem, 2vw, 2.6rem); box-shadow: var(--shadow-soft); border-radius: var(--radius); } .cred-card h3 { font-size: 1.15rem; letter-spacing: .02em; display: flex; align-items: center; gap: .6em; } .cred-card h3 svg { width: 1.2em; height: 1.2em; color: var(--gold-600); flex: none; } /* Home page: name and role only, with the detail one click away on /our-team. */ .cred-card--brief { display: grid; gap: .1rem; } .cred-card--brief h3 { margin-bottom: .2em; } .cred-card--brief .cred-role { color: var(--ink-soft); font-size: var(--fs-small); margin: 0 0 1.2rem; } .cred-card--brief .more-link { margin-top: 0; } .cred-list li { display: flex; gap: .85em; padding-block: .85em; border-bottom: 1px solid var(--line-gold-soft); } .cred-list li:last-child { border-bottom: 0; } .cred-list svg { width: 1.25em; height: 1.25em; color: var(--gold-600); flex: none; margin-top: .2em; } .cred-list strong { display: block; color: var(--maroon-800); font-weight: 700; } .cred-list span { color: var(--ink-soft); font-size: var(--fs-small); } /* ---------- Practice areas — bento with rhythm ---------- 7 areas, 7 cells, four different cell sizes. No empty cells at any breakpoint: 6-col desktop, 2-col tablet, 1-col phone. */ .practice-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 1.6vw, 1.6rem); } .pcard--xl { grid-column: span 4; grid-row: span 2; } .pcard--tall { grid-column: span 2; } .pcard--half { grid-column: span 3; } .pcard--sm { grid-column: span 2; } .pcard--wide { grid-column: span 4; } @media (max-width: 980px) { .practice-grid { grid-template-columns: repeat(2, 1fr); } .pcard--xl { grid-column: span 2; grid-row: auto; } .pcard--tall { grid-column: span 1; } .pcard--half { grid-column: span 1; } .pcard--sm { grid-column: span 2; } .pcard--wide { grid-column: span 2; } } @media (max-width: 620px) { .practice-grid { grid-template-columns: 1fr; } .pcard--xl, .pcard--tall, .pcard--half, .pcard--sm, .pcard--wide { grid-column: span 1; } } .pcard { background: var(--white); border: 1px solid var(--line-gold-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-gold); } .pcard-media { position: relative; aspect-ratio: 21 / 10; overflow: hidden; background: var(--maroon-900); } .pcard-media picture { display: contents; } .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .pcard:hover .pcard-media img { transform: scale(1.05); } .pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(47, 11, 18, .35), transparent 55%); } .pcard-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .pcard-body .en-tag { font-family: var(--font-latin-head); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); unicode-bidi: isolate; } .pcard-body h3 { font-size: var(--fs-h3); margin: 0; } .pcard-body p { color: var(--ink-soft); font-size: .96rem; margin: .3em 0 1em; flex: 1; } .more-link { display: inline-flex; align-items: center; gap: .5em; color: var(--gold-700); font-weight: 500; font-size: .94rem; letter-spacing: .03em; margin-top: auto; } /* Two sibling links under a section body */ .about-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: .4rem; } .about-links .more-link { margin-top: 0; } .more-link svg { width: 1em; height: 1em; transition: transform .25s var(--ease); } .more-link:hover { color: var(--maroon-800); } .more-link:hover svg { transform: translateX(4px); } html[dir="rtl"] .more-link:hover svg { transform: scaleX(-1) translateX(4px); } /* The lead area: photograph fills the tall cell, copy sits beneath it. */ .pcard--xl .pcard-media { aspect-ratio: auto; flex: 1; min-height: 240px; } .pcard--xl .pcard-body { padding: clamp(1.6rem, 2vw, 2.2rem); flex: none; } .pcard--xl .pcard-body h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); } .pcard--xl .pcard-body p { flex: none; max-width: 52ch; } /* The closing area runs horizontally, breaking the vertical-card rhythm. */ .pcard--wide { flex-direction: row; } .pcard--wide .pcard-media { aspect-ratio: auto; flex: 0 0 42%; } .pcard--wide .pcard-body { justify-content: center; } @media (max-width: 620px) { .pcard--wide { flex-direction: column; } .pcard--wide .pcard-media { aspect-ratio: 21 / 10; flex: none; } } /* ---------- Pillars — hairline columns on the maroon band ---------- */ .band { background: var(--maroon-900); color: var(--ivory); position: relative; overflow: hidden; } .band::before { content: ""; position: absolute; inset: 0; background: url("../img/guilloche.svg") center / 120% no-repeat; opacity: .1; pointer-events: none; } .band .container { position: relative; } .band .kicker { color: var(--gold-400); } .band h2 { color: var(--white); } .band .section-head .lead { color: rgba(250, 247, 241, .8); } /* Four principles across four hairline columns, folding to 2x2 then to one. */ .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(201, 170, 102, .3); } .pillar { padding: clamp(1.6rem, 2vw, 2.4rem) clamp(1rem, 1.4vw, 1.6rem); border-inline-start: 1px solid rgba(201, 170, 102, .22); transition: background .35s var(--ease); } .pillar:first-child { border-inline-start: 0; } .pillar:hover { background: rgba(47, 11, 18, .45); } .pillar svg { width: 28px; height: 28px; color: var(--gold-500); margin-bottom: 1rem; } .pillar h3 { color: var(--gold-300); font-size: 1.05rem; margin-bottom: .45em; } .pillar p { color: rgba(250, 247, 241, .76); font-size: .92rem; margin: 0; } @media (max-width: 1100px) { .pillar { padding-inline: .85rem; } .pillar h3 { font-size: .98rem; } .pillar p { font-size: .87rem; } } @media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } .pillar:nth-child(odd) { border-inline-start: 0; } .pillar:nth-child(n+3) { border-top: 1px solid rgba(201, 170, 102, .22); } } @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } .pillar { border-inline-start: 0; padding-inline: 0; padding-block: 1.5rem; } .pillar + .pillar { border-top: 1px solid rgba(201, 170, 102, .22); } .pillar svg { margin-bottom: .7rem; } .pillar h3 { font-size: 1.05rem; } .pillar p { font-size: .92rem; } } /* ---------- Credo: full lockup + the firm's creed ---------- */ .seal-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } @media (max-width: 800px) { .seal-wrap { grid-template-columns: 1fr; text-align: center; } .seal-mark { margin-inline: auto; } } .seal-mark { width: clamp(200px, 24vw, 290px); position: relative; padding: clamp(1.5rem, 2vw, 2.2rem); } .seal-mark::before { content: ""; position: absolute; inset: 0; border-block: 1px solid var(--line-gold); pointer-events: none; } .seal-mark img { width: 100%; } .credo blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.8rem); color: var(--maroon-800); line-height: 1.75; font-weight: 700; } .credo .attr { margin-top: 1.2rem; color: var(--gold-700); font-size: var(--fs-small); letter-spacing: .12em; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 4vw, 5rem); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-list li { display: flex; gap: 1em; padding-block: 1.1em; border-bottom: 1px solid var(--line-gold-soft); align-items: flex-start; } .contact-list li:last-child { border-bottom: 0; } .contact-list svg { width: 1.4em; height: 1.4em; color: var(--gold-600); flex: none; margin-top: .15em; } .contact-list strong { display: block; color: var(--maroon-800); margin-bottom: .15em; } .contact-list a { color: var(--ink); } .contact-list a:hover { color: var(--gold-700); } .form-card { background: var(--white); border: 1px solid var(--line-gold); border-top: 3px solid var(--gold-500); border-radius: var(--radius); padding: clamp(1.8rem, 2.5vw, 2.8rem); box-shadow: var(--shadow-soft); } .form-card h3 { font-size: var(--fs-h3); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } } .field label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--maroon-800); margin-bottom: .35em; } .field input, .field select, .field textarea { width: 100%; padding: .8em 1em; border: 1px solid rgba(74, 22, 34, .28); border-radius: var(--radius); background: var(--ivory); font-family: var(--font-body); font-size: 1rem; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: #7d666a; opacity: 1; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-600); background: var(--white); box-shadow: 0 0 0 3px rgba(173, 140, 75, .28); } .field textarea { min-height: 130px; resize: vertical; } .form-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 1rem 0 0; } .form-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .9rem; } /* ---------- CTA strip ---------- */ .cta-strip { background: var(--maroon-800); color: var(--ivory); position: relative; overflow: hidden; } .cta-strip::before { content: ""; position: absolute; inset: 0; background: url("../img/guilloche.svg") center / 140% no-repeat; opacity: .12; } .cta-strip .container { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; padding-block: clamp(2.6rem, 3vw, 4rem); } .cta-strip h2 { color: var(--white); margin: 0 0 .2em; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); } .cta-strip p { margin: 0; color: rgba(250, 247, 241, .82); } /* ---------- Detail page content ---------- */ .article { max-width: 720px; } .article h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); margin-top: 1.7em; } .article h2:first-child { margin-top: 0; } .article .lead { font-size: var(--fs-lead); color: var(--ink-soft); } .check-list li { display: flex; gap: .8em; padding-block: .55em; align-items: flex-start; } .check-list svg { width: 1.15em; height: 1.15em; color: var(--gold-600); flex: none; margin-top: .3em; } .layout-sidebar { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; } @media (max-width: 980px) { .layout-sidebar { grid-template-columns: 1fr; } } .sidebar-card { background: var(--white); border: 1px solid var(--line-gold); border-top: 3px solid var(--gold-500); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-soft); position: sticky; top: 110px; } .sidebar-card h3 { font-size: 1.12rem; } .sidebar-links li { border-bottom: 1px solid var(--line-gold-soft); } .sidebar-links li:last-child { border-bottom: 0; } .sidebar-links a { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding-block: .7em; font-size: .96rem; color: var(--ink); } .sidebar-links a:hover, .sidebar-links a[aria-current="page"] { color: var(--gold-700); } .sidebar-links a[aria-current="page"] { font-weight: 700; } .sidebar-links svg { width: .9em; height: .9em; color: var(--gold-600); flex: none; } html[dir="rtl"] .sidebar-links svg { transform: scaleX(-1); } .sidebar-card .btn { width: 100%; margin-top: 1.2rem; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 2rem); } @media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; } } .member { background: var(--white); border: 1px solid var(--line-gold-soft); border-top: 3px solid var(--gold-500); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .member:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-gold); } .member-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-2); } .member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Until a real portrait is supplied, a monogram in the brand palette rather than a stock silhouette or an invented likeness. */ .member-photo.is-pending { display: grid; place-items: center; background: linear-gradient(160deg, var(--maroon-800), var(--maroon-950)); } .member-photo.is-pending::before { content: attr(data-initial); font-family: var(--font-latin-head); font-size: clamp(3rem, 6vw, 4.5rem); color: var(--gold-500); letter-spacing: .06em; line-height: 1; } .member-photo.is-pending::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201, 170, 102, .35); border-radius: 2px; } .member-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .member-body h3 { font-size: 1.2rem; margin: 0; } .member-role { color: var(--gold-700); font-size: .9rem; font-weight: 500; letter-spacing: .02em; } .member-body p { color: var(--ink-soft); font-size: .95rem; margin: .5em 0 1em; flex: 1; } .member-contact { margin-top: auto; border-top: 1px solid var(--line-gold-soft); padding-top: .9rem; display: grid; gap: .35rem; } .member-contact a, .member-contact span { display: flex; align-items: center; gap: .55em; font-size: .9rem; color: var(--ink); } .member-contact a:hover { color: var(--gold-700); } .member-contact svg { width: 1em; height: 1em; color: var(--gold-600); flex: none; } /* ---------- Map ---------- */ .map-frame { border: 1px solid var(--line-gold); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .map-frame iframe { display: block; width: 100%; height: 420px; border: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--maroon-950); color: rgba(250, 247, 241, .82); position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0; background: url("../img/guilloche.svg") 50% 120% / 160% no-repeat; opacity: .08; pointer-events: none; } .site-footer .container { position: relative; } .footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: clamp(2rem, 3vw, 3.5rem); padding-block: clamp(3rem, 4vw, 4.5rem) 2.5rem; } /* Below the desktop breakpoint the brand block and the contact block run the full width and the two link lists sit side by side. That keeps the footer near one screen instead of one and a half on a phone, and stops the column of right-aligned links from leaving the other half of the page empty. The practice list gets the wider track because its labels are longer. */ @media (max-width: 980px) { .footer-top { grid-template-columns: 1.25fr .75fr; } .footer-brand, .footer-reach { grid-column: 1 / -1; } .footer-brand p { max-width: 54ch; } .footer-reach { border-top: 1px solid rgba(201, 170, 102, .18); padding-top: 1.5rem; } } @media (max-width: 620px) { .footer-top { gap: 1.5rem 1.25rem; padding-block: 2.25rem 1.5rem; } .footer-brand { display: grid; gap: .75rem; } .footer-brand img { width: min(215px, 58%); margin-bottom: 0; } .footer-brand p { margin: 0; line-height: 1.7; } .site-footer h4 { font-size: .95rem; margin-bottom: .5rem; } .footer-links a { font-size: .88rem; line-height: 1.5; } .footer-links li { padding-block: .3em; } .footer-reach { border-top: 1px solid rgba(201, 170, 102, .18); padding-top: 1.35rem; } .footer-contact li { padding-block: .3em; line-height: 1.6; } .footer-bottom { padding-block: 1rem; gap: .4rem; font-size: .8rem; } } .footer-brand img { width: min(280px, 70%); margin-bottom: 1.2rem; } .footer-brand p { font-size: var(--fs-small); line-height: 1.9; color: rgba(250, 247, 241, .7); } .site-footer h4 { color: var(--gold-400); font-size: 1.02rem; letter-spacing: .06em; margin-bottom: 1rem; } .footer-links li { padding-block: .32em; } .footer-links a { color: rgba(250, 247, 241, .82); font-size: .94rem; } .footer-links a:hover { color: var(--gold-400); } .footer-contact li { display: flex; gap: .7em; padding-block: .4em; font-size: .92rem; align-items: flex-start; } .footer-contact svg { width: 1.1em; height: 1.1em; color: var(--gold-500); flex: none; margin-top: .25em; } .footer-contact a { color: rgba(250, 247, 241, .82); } .footer-contact a:hover { color: var(--gold-400); } .footer-bottom { border-top: 1px solid rgba(201, 170, 102, .22); padding-block: 1.3rem; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; font-size: .85rem; color: rgba(250, 247, 241, .6); } .footer-bottom .domain { font-family: var(--font-latin-head); letter-spacing: .22em; color: var(--gold-500); unicode-bidi: isolate; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; } /* Above-the-fold content must paint immediately: fading the hero in would push the Largest Contentful Paint out by the length of the transition. These elements rise into place instead, at full opacity from the first frame. */ .hero .reveal, .page-hero .reveal { opacity: 1; transform: translateY(16px); transition: none; animation: rise-in .7s var(--ease) both; } .hero .reveal.reveal-d1, .page-hero .reveal.reveal-d1 { animation-delay: .06s; } .hero .reveal.reveal-d2, .page-hero .reveal.reveal-d2 { animation-delay: .12s; } .hero .reveal.reveal-d3, .page-hero .reveal.reveal-d3 { animation-delay: .18s; } .hero .reveal.reveal-d4, .page-hero .reveal.reveal-d4 { animation-delay: .24s; } .hero .reveal.in, .page-hero .reveal.in { opacity: 1; } @keyframes rise-in { to { transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Print ---------- */ @media print { .topstrip, .site-header, .cta-strip, .site-footer::before, .nav-toggle { display: none; } body { background: #fff; } } /* ---------- Capability list (homepage Expertise) ---------- Deliberately not another card grid: hairline rows, no imagery, so the sectors below can carry the photography without competing. */ .cap-list { border-top: 1px solid var(--line-gold-soft); } .cap-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding-block: clamp(1.3rem, 2vw, 1.9rem); border-bottom: 1px solid var(--line-gold-soft); transition: background .3s var(--ease), padding-inline .3s var(--ease); } .cap-row:hover { background: rgba(201, 170, 102, .07); padding-inline: .9rem; } .cap-row h3 { font-size: var(--fs-h3); margin: 0 0 .25em; } .cap-row p { color: var(--ink-soft); font-size: .97rem; margin: 0; max-width: 62ch; } .cap-row .cap-go { color: var(--gold-600); flex: none; } .cap-row .cap-go svg { width: 1.35em; height: 1.35em; transition: transform .25s var(--ease); } .cap-row:hover .cap-go svg { transform: translateX(5px); } html[dir="rtl"] .cap-row .cap-go svg { transform: scaleX(-1); } html[dir="rtl"] .cap-row:hover .cap-go svg { transform: scaleX(-1) translateX(5px); } @media (max-width: 620px) { .cap-row { grid-template-columns: 1fr; gap: .6rem; } .cap-row .cap-go { justify-self: start; } } /* ---------- Sector panels (homepage Industries) ---------- Five tall photographic panels in one band, so industries read as a different kind of thing from the capability list above. */ .sector-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1vw, 1rem); } .sector { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 4; background: var(--maroon-900); } .sector img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .sector:hover img { transform: scale(1.06); } .sector::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(47, 11, 18, .92) 12%, rgba(47, 11, 18, .35) 55%, rgba(47, 11, 18, .12)); } .sector-label { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 1.1rem 1rem 1.2rem; text-align: center; } .sector-label span { display: block; color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.4; } .sector-label small { display: block; margin-top: .3rem; color: var(--gold-400); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-latin-head); unicode-bidi: isolate; } /* Five panels never divide evenly into two or three columns, so below the desktop breakpoint they go 2 + 2 + one full-width. Every rule sets the aspect ratio on the same selector, otherwise :nth-child outranks .sector at the next breakdown and the rows come out ragged. */ @media (max-width: 980px) { .sector-band { grid-template-columns: repeat(2, 1fr); } .sector:nth-child(n) { aspect-ratio: 5 / 4; } .sector:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 21 / 9; } } @media (max-width: 620px) { .sector:nth-child(n) { aspect-ratio: 4 / 5; } .sector:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .sector-label { padding: .9rem .7rem 1rem; } .sector-label span { font-size: .95rem; } .sector-label small { font-size: .68rem; letter-spacing: .07em; } }