/* =========================================================================
MM Recruitment Ltd - Portal design tokens & shared chrome
Independent brand identity - deliberately NOT sharing tokens/styles
with the Laurus Recruitment codebase this portal was forked from,
matching this ecosystem's own convention of independent brands per
project.
The :root block below is copied from the sibling mm-recruitment-website
repo's assets/css/style.css (the marketing site's own design system -
see that repo's docs/DESIGN-SYSTEM.md), so this portal's header,
footer and form chrome visually match the public site. Keep the two
in sync by hand if the marketing site's palette/type changes - there
is no shared build step between the two repos.
Palette (as supplied in the brief - do not adjust without approval):
Warm ivory #FAF7F1
Rich gold #B18A43
Light champagne#E9D7B4
Charcoal #26231F
White #FFFFFF
Typography: Fraunces (display serif) for headings/wordmark, Inter
(humanist sans) for body text and UI. Both loaded from Google Fonts -
see the tags in every page's .
========================================================================= */
:root {
--ivory: #FAF7F1;
--gold: #B18A43;
/* A deliberately darker shade than the approved #B18A43 for TEXT on
light backgrounds only (links, small labels) - #B18A43 itself only
measures ~3.2:1 against white/ivory, below WCAG AA's 4.5:1 for
normal text. #8a6b2c measures ~4.65-5:1 against ivory/white while
staying visibly the same gold family. --gold itself is unchanged
and still used for backgrounds, borders, buttons and large/
decorative elements, where this contrast rule doesn't apply. */
--gold-dark: #8a6b2c;
--champagne: #E9D7B4;
--charcoal: #26231F;
--white: #FFFFFF;
--text: var(--charcoal);
--text-muted: rgba(38, 35, 31, 0.66);
--hairline: rgba(38, 35, 31, 0.12);
--surface: var(--white);
--surface-warm: var(--champagne);
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 28px;
--shadow-soft: 0 20px 60px -30px rgba(38, 35, 31, 0.35);
--container-width: 1180px;
/* -----------------------------------------------------------------
Role-mapped aliases for portal.css / los-recruitment.css / legal.css
(carried over unmodified from the forked codebase). Those files
were written against Laurus Recruitment's navy/gold palette; rather
than rewrite every rule, each old variable name is aliased here to
the MM token that plays the same ROLE (not the same hex) - primary
dark ink -> charcoal, gold accent -> gold, light neutral panel bg,
etc. See each file's own header comment for how it's layered on
top of this file.
----------------------------------------------------------------- */
--navy: var(--charcoal);
--navy-deep: #1a1712;
--navy-soft: #332e26;
--gold-soft: var(--champagne);
--hairline-dark: rgba(255, 255, 255, 0.14);
--light: #F1ECE0;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
max-width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
background: var(--ivory);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--charcoal);
line-height: 1.15;
margin: 0 0 0.5em;
font-weight: 600;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--gold-dark); }
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 24px;
}
.container.narrow { max-width: 640px; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dark);
margin: 0 0 14px;
}
.section {
padding: clamp(56px, 8vw, 110px) 0;
}
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
/* -------------------------------------------------------------------
Buttons
------------------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.96rem;
padding: 14px 30px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.button.primary {
background: var(--gold);
color: var(--white);
box-shadow: 0 14px 30px -14px rgba(177, 138, 67, 0.65);
}
.button.primary:hover { background: var(--gold-dark); transform: translateY(-1px); }
.button.secondary {
background: transparent;
color: var(--charcoal);
border-color: var(--charcoal);
}
.button.secondary:hover { background: var(--charcoal); color: var(--white); }
.button.disabled,
.button[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.button.disabled:hover, .button[aria-disabled="true"]:hover { transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* -------------------------------------------------------------------
Header / navigation - matches mm-recruitment-website's own
header markup exactly (see that repo's index.html