/* ==========================================================================
WHERE THIS GOES: public/css/about-page.css (NEW FILE)
LOADED BY: resources/views/frontend/pages/about/index.blade.php
via @section('css')
--------------------------------------------------------------------------
WHY THIS IS HAND-WRITTEN CSS AND NOT TAILWIND
The source design is a Tailwind v4 page. This app has `@tailwind` directives
in resources/frontend/css/tailwind.css but NO tailwind.config.js and NO
postcss.config.js — the directives pass through UNPROCESSED into the built
CSS (you can see the raw text in public/build/assets/app.*.css). So Tailwind
utility classes do nothing here. Every value below is therefore written out
by hand, converted from the original utility classes.
EVERYTHING IS SCOPED UNDER .cwf-about
The site loads Bootstrap 4.6 globally. Scoping means:
- Bootstrap cannot restyle this page
- this page cannot leak into any other page
Never remove the .cwf-about prefix from a selector.
NO BUILD STEP. Upload the file, hard-refresh, done.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
Ported verbatim from the source app's `.theme-about` scope. These hex values
are the contract — if you change one, the page stops matching the live site.
========================================================================== */
.cwf-about {
/* -- About theme surface + ink ----------------------------------------- */
--about-bg: #f7f9fb;
--about-surface: #f7f9fb;
--about-surface-lowest: #ffffff;
--about-surface-low: #f2f4f6;
--about-surface-container: #eceef0;
--about-surface-high: #e6e8ea;
--about-on-surface: #191c1e; /* never pure black for text */
--about-on-surface-variant: #44474d;
--about-primary: #000000;
--about-on-primary: #ffffff;
--about-secondary: #006b5f; /* the teal accent: kickers + CTAs */
--about-on-secondary: #ffffff;
--about-outline: #75777e;
--about-outline-variant: #c5c6cd;
/* -- The two intentionally dark blocks (AI banner, hero fan-card scrim) - */
--about-dark: #0d1c32;
--about-on-dark: #ffffff;
--about-on-dark-muted: #76849f;
/* -- Brand 4-colour. Used for small accents that cycle by index. -------- */
--google-blue: #4285f4;
--google-red: #ea4335;
--google-yellow: #fbbc05;
--google-green: #34a853;
/* -- Deliberate literal exceptions (documented in the source) ----------- */
--amber-text: #d97706; /* google-yellow fails contrast AS TEXT; use this */
--industry-ivory: #faf6ec; /* industries marquee card background */
--youtube-red: #ff0000; /* YouTube brand red on the play icon */
--fan-link-teal: #4fdbc8; /* hero fan-card link label */
/* -- Tailwind palette values the sections reference --------------------- */
--blue-50:#eff6ff; --blue-100:#dbeafe; --blue-400:#60a5fa; --blue-500:#3b82f6;
--blue-600:#2563eb; --blue-700:#1d4ed8; --blue-900:#1e3a8a;
--sky-50:#f0f9ff; --sky-500:#0ea5e9;
--red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-500:#ef4444; --red-600:#dc2626;
--red-700:#b91c1c; --red-900:#7f1d1d;
--rose-50:#fff1f2; --rose-500:#f43f5e;
--amber-50:#fffbeb; --amber-100:#fef3c7;--amber-500:#f59e0b;--amber-600:#d97706;
--amber-800:#92400e;--amber-900:#78350f;
--yellow-50:#fefce8;--yellow-500:#eab308;
--emerald-50:#ecfdf5;--emerald-100:#d1fae5;--emerald-500:#10b981;
--emerald-600:#059669;--emerald-700:#047857;--emerald-900:#064e3b;
--green-50:#f0fdf4; --green-500:#22c55e;
--indigo-50:#eef2ff;--indigo-100:#e0e7ff;--indigo-500:#6366f1;
--violet-50:#f5f3ff;--violet-500:#8b5cf6;
--teal-50:#f0fdfa; --orange-50:#fff7ed;
--slate-50:#f8fafc; --slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;
--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;
--slate-800:#1e293b;--slate-900:#0f172a;--slate-950:#020617;
/* -- Elevation --------------------------------------------------------- */
--shadow-card: 0 4px 20px -5px rgba(15, 23, 42, 0.05);
--shadow-card-hover: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* -- Layout ------------------------------------------------------------ */
--margin-mobile: 20px;
--margin-desktop: 64px;
--max-content: 1280px;
/* -- Radii ------------------------------------------------------------- */
--r-lg: 0.5rem; --r-xl: 0.75rem; --r-2xl: 1rem;
--r-3xl: 1.5rem; --r-4xl: 2rem; --r-full: 9999px;
/* Base typography. Both families are the site-wide pair — the About page
shares the site's fonts on purpose; it does NOT have its own serif theme.
(An older serif "Elite" look was retired upstream. Do not reintroduce it.) */
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--about-on-surface);
background: var(--about-bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Reset only inside our scope, so Bootstrap's own rules can't fight us. */
.cwf-about *,
.cwf-about *::before,
.cwf-about *::after { box-sizing: border-box; }
.cwf-about h1, .cwf-about h2, .cwf-about h3,
.cwf-about h4, .cwf-about p, .cwf-about ul, .cwf-about figure { margin: 0; padding: 0; }
.cwf-about ul { list-style: none; }
.cwf-about img { max-width: 100%; display: block; }
.cwf-about a { text-decoration: none; color: inherit; }
.cwf-about button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* ==========================================================================
2. SHARED TYPOGRAPHY + SECTION SHELL
Every one of the 10 sections is the same recipe: a tinted gradient panel
with 2-4 blurred "ambient orbs" behind a centred 1280px container.
========================================================================== */
.cwf-about .cwf-font-heading {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.cwf-about .cwf-section {
position: relative;
overflow: hidden;
padding: 4rem 0;
color: var(--about-on-surface);
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
@media (min-width: 768px) { .cwf-about .cwf-section { padding: 6rem 0; } }
/* The taller variant (py-20 / md:py-28 in the original). */
.cwf-about .cwf-section--tall { padding: 5rem 0; }
@media (min-width: 768px) { .cwf-about .cwf-section--tall { padding: 7rem 0; } }
.cwf-about .cwf-container {
position: relative;
z-index: 10;
width: 100%;
max-width: var(--max-content);
margin: 0 auto;
padding: 0 var(--margin-mobile);
}
@media (min-width: 768px) { .cwf-about .cwf-container { padding: 0 var(--margin-desktop); } }
/* Ambient orbs. `filter: blur()` is expensive, so they are pointer-events:none
and never animated — exactly as in the source. */
.cwf-about .cwf-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(48px);
width: 500px;
height: 500px;
}
.cwf-about .cwf-orb--tl { top: -8rem; left: -8rem; }
.cwf-about .cwf-orb--br { bottom: -8rem; right: -8rem; }
/* --- The ten section hues ------------------------------------------------
Each section owns a hue pair. Order matters visually but the admin can
reorder sections, so no rule may depend on a section's position. */
.cwf-about .hue-blue { background: linear-gradient(to bottom right, rgba(239,246,255,.8), rgba(240,249,255,.9), rgba(239,246,255,.8)); border-color: rgba(219,234,254,.8); }
.cwf-about .hue-red { background: linear-gradient(to bottom right, rgba(254,242,242,.8), rgba(255,241,242,.9), rgba(254,242,242,.8)); border-color: rgba(254,226,226,.8); }
.cwf-about .hue-amber { background: linear-gradient(to bottom right, rgba(255,251,235,.8), rgba(254,252,232,.9), rgba(255,251,235,.8)); border-color: rgba(254,243,199,.8); }
.cwf-about .hue-emerald { background: linear-gradient(to bottom right, rgba(236,253,245,.8), rgba(240,253,244,.9), rgba(236,253,245,.8)); border-color: rgba(209,250,229,.8); }
.cwf-about .hue-indigo { background: linear-gradient(to bottom right, rgba(238,242,255,.8), rgba(245,243,255,.9), rgba(238,242,255,.8)); border-color: rgba(224,231,255,.8); }
.cwf-about .hue-blue .cwf-orb--tl { background: rgba(59,130,246,.15); }
.cwf-about .hue-blue .cwf-orb--br { background: rgba(14,165,233,.15); }
.cwf-about .hue-red .cwf-orb--tl { background: rgba(239,68,68,.15); }
.cwf-about .hue-red .cwf-orb--br { background: rgba(244,63,94,.15); }
.cwf-about .hue-amber .cwf-orb--tl { background: rgba(245,158,11,.15); }
.cwf-about .hue-amber .cwf-orb--br { background: rgba(234,179,8,.15); }
.cwf-about .hue-emerald .cwf-orb--tl { background: rgba(16,185,129,.15); }
.cwf-about .hue-emerald .cwf-orb--br { background: rgba(34,197,94,.15); }
.cwf-about .hue-indigo .cwf-orb--tl { background: rgba(99,102,241,.15); }
.cwf-about .hue-indigo .cwf-orb--br { background: rgba(139,92,246,.15); }
/* --- Section header type ------------------------------------------------- */
.cwf-about .cwf-kicker {
display: inline-block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--about-secondary);
}
/* A kicker in a rounded chip. Colour is set per section via --chip-*. */
.cwf-about .cwf-kicker-chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .375rem 1rem;
border-radius: var(--r-full);
font-size: .75rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
background: var(--chip-bg, rgba(66,133,244,.15));
border: 1px solid var(--chip-border, rgba(66,133,244,.3));
color: var(--chip-text, var(--google-blue));
}
.cwf-about .cwf-kicker-chip .dot {
width: .5rem; height: .5rem; border-radius: 50%;
background: currentColor;
animation: cwf-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes cwf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.cwf-about .cwf-headline {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 1.15;
letter-spacing: -.01em;
font-weight: 800;
color: var(--about-on-surface);
margin-top: .75rem;
}
/* The italic teal half of a split headline ("... One Global Workforce."). */
.cwf-about .cwf-headline .accent { font-style: italic; color: var(--about-secondary); }
.cwf-about .cwf-subtext {
font-size: 1.125rem;
line-height: 1.75;
color: var(--about-on-surface-variant);
margin-top: 1rem;
}
.cwf-about .cwf-header-center { max-width: 56rem; margin: 0 auto; text-align: center; }
.cwf-about .cwf-header-center .cwf-subtext { margin-left: auto; margin-right: auto; max-width: 48rem; }
/* --- Icon sizing. Reserves space so the layout does not jump when Lucide
replaces each with a real