/* ========================================================= PMCI — Pelican Management Consultants Inc. Shared stylesheet (tokens, layout, nav, footer, utilities) ========================================================= */ :root { /* Brand palette — derived from logo */ --teal-900: #003b41; --teal-800: #0a5660; --teal-700: #0f6b75; /* primary logo teal */ --teal-600: #178694; --teal-500: #2ea2b0; --teal-400: #66c2cc; --teal-200: #c7e5e8; --teal-100: #e6f2f3; --teal-050: #f2f8f9; /* Accents (flipped by theme tweak) */ --accent: var(--teal-700); --accent-soft: var(--teal-100); --accent-ink: var(--teal-900); /* Neutrals */ --ink: #14181b; --ink-2: #2a3036; --ink-3: #4a545c; --mute: #6b7680; --mute-2: #8a939b; --line: #e3e6e9; --line-2: #eef0f2; --paper: #fbfbfa; --paper-2: #f4f4f1; --white: #ffffff; /* Type */ --font-display: "Fraunces-off", "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --dur: .5s; /* Layout */ --wrap: 1320px; --gutter: clamp(20px, 4vw, 48px); --radius: 14px; --radius-lg: 22px; color-scheme: light; } /* Theme variants set on */ html[data-theme="teal-gold"] { --accent: #b8892b; --accent-soft: #f6ecd3; --accent-ink: #5b3e0d; } html[data-theme="teal-navy"] { --accent: #162948; --accent-soft: #e6eaf2; --accent-ink: #0a1528; } /* Dark mode */ html[data-mode="dark"] { --ink: #f3f5f6; --ink-2: #dde2e5; --ink-3: #aab3ba; --mute: #8b959c; --mute-2: #6b737a; --line: #242a2f; --line-2: #1b2024; --paper: #0b0e10; --paper-2: #111518; --white: #16191c; --teal-100: #0d2428; --teal-050: #0a1c1f; --teal-200: #0f3a40; --accent-soft: #0d2428; color-scheme: dark; } /* Typography pairing variants */ html[data-type="editorial"] { --font-display: "Fraunces", "Playfair Display", Georgia, serif; --font-sans: "Inter Tight", "Inter", ui-sans-serif, sans-serif; } html[data-type="geometric"] { --font-display: "Space Grotesk", "Inter Tight", ui-sans-serif, sans-serif; --font-sans: "Inter", ui-sans-serif, sans-serif; } html[data-type="grotesk"] { --font-display: "Inter Tight", ui-sans-serif, sans-serif; --font-sans: "Inter", ui-sans-serif, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.55; font-size: 16px; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--teal-200); color: var(--teal-900); } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .wrap-sm { max-width: 980px; } .wrap-xl { max-width: 1500px; } .section { padding: clamp(64px, 9vw, 128px) 0; position: relative; } .section-sm { padding: clamp(40px, 6vw, 80px) 0; } .eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 .4em; line-height: 1.02; text-wrap: balance; } h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 400; } h2 { font-size: clamp(36px, 5vw, 68px); } h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; line-height: 1.2; } h4 { font-size: 18px; letter-spacing: 0; line-height: 1.3; } p { margin: 0 0 1em; color: var(--ink-2); } .lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); line-height: 1.55; max-width: 62ch; } .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; line-height: .95; } .num { font-feature-settings: "tnum","lnum"; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--accent); color: var(--white); border: 1px solid var(--accent); font-weight: 500; font-size: 14px; letter-spacing: .02em; transition: transform var(--dur) var(--ease), background .3s, color .3s, border-color .3s; white-space: nowrap; } html[data-mode="dark"] .btn { color: var(--ink); } .btn:hover { transform: translateY(-2px); background: var(--teal-800); border-color: var(--teal-800); } .btn .arrow { transition: transform .4s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: var(--white); transform: translateY(-2px); } .btn-lg { padding: 18px 30px; font-size: 15px; } .linklike { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; font-size: 14px; letter-spacing: .02em; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap .3s var(--ease); } .linklike:hover { gap: 14px; } /* ---------- Nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; } .nav.is-solid, .nav.is-light { background: color-mix(in srgb, var(--paper) 85%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); max-width: var(--wrap); margin: 0 auto; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 12px; } .nav-brand img { height: 44px; width: auto; } .nav-brand-text { display: flex; flex-direction: column; line-height: 1; } .nav-brand-text b { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .nav-brand-text span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { position: relative; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: 999px; transition: color .3s, background .3s; } .nav-links a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: var(--accent); } /* On hero (dark overlay) variants */ .nav.is-onhero:not(.is-solid) .nav-brand img { filter: brightness(0) invert(1); } .nav.is-onhero:not(.is-solid) .nav-brand-text b, .nav.is-onhero:not(.is-solid) .nav-links a { color: #fff; } .nav.is-onhero:not(.is-solid) .nav-brand-text span { color: rgba(255,255,255,.7); } .nav.is-onhero:not(.is-solid) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); } .nav.is-onhero:not(.is-solid) .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; } .nav-burger { display: none; appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 999px; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--ink); } .nav.is-onhero:not(.is-solid) .nav-burger { color: #fff; border-color: rgba(255,255,255,.35); } /* Mobile nav */ @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: inline-flex; } } .nav-drawer { position: fixed; inset: 0; background: var(--paper); z-index: 60; transform: translateY(-100%); transition: transform .5s var(--ease); padding: 100px var(--gutter) 40px; display: flex; flex-direction: column; gap: 8px; } .nav-drawer.open { transform: translateY(0); } .nav-drawer a { font-family: var(--font-display); font-size: 36px; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); } /* ---------- Footer ---------- */ .ft { background: var(--teal-900); color: #dbeef0; padding: clamp(64px, 9vw, 120px) 0 40px; position: relative; overflow: hidden; } html[data-theme="teal-gold"] .ft, html[data-theme="teal-navy"] .ft { background: var(--teal-900); } .ft-big { font-family: var(--font-display); font-size: clamp(48px, 8vw, 140px); line-height: .95; letter-spacing: -0.03em; color: #fff; font-weight: 400; margin-bottom: 80px; text-wrap: balance; } .ft-big em { font-style: italic; color: var(--teal-400); font-weight: 300; } .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.15); } @media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .ft-col h5 { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 16px; font-family: var(--font-sans); } .ft-col a, .ft-col p { display: block; color: #dbeef0; font-size: 15px; padding: 4px 0; margin: 0; transition: color .3s; } .ft-col a:hover { color: var(--teal-400); } .ft-brand img { height: 60px; filter: brightness(0) invert(1); opacity: .95; } .ft-brand p { font-size: 14px; color: rgba(255,255,255,.7); margin: 16px 0 0; max-width: 32ch; } .ft-base { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 13px; color: rgba(255,255,255,.55); gap: 16px; flex-wrap: wrap; } .ft-base a:hover { color: #fff; } /* ---------- Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal="fade"] { transform: none; } [data-reveal-delay="1"] { transition-delay: .08s; } [data-reveal-delay="2"] { transition-delay: .16s; } [data-reveal-delay="3"] { transition-delay: .24s; } [data-reveal-delay="4"] { transition-delay: .32s; } /* ---------- Photo placeholders ---------- */ .ph { background: var(--paper-2); border: 1px dashed color-mix(in srgb, var(--mute) 40%, transparent); color: var(--mute); display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; position: relative; overflow: hidden; border-radius: 4px; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%), radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--teal-400) 20%, transparent), transparent 55%); } .ph > span { position: relative; z-index: 1; padding: 8px 14px; background: color-mix(in srgb, var(--paper) 85%, transparent); border-radius: 999px; border: 1px solid var(--line); font-size: 10.5px; } .ph-dark { background: var(--teal-900); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.1); } .ph-dark::before { background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--teal-500) 50%, transparent), transparent 55%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--teal-700) 70%, transparent), transparent 60%); } .ph-dark > span { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.15); color: #fff; } /* ---------- Marquee ---------- */ .marquee { display: flex; overflow: hidden; gap: 64px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 64px; flex-shrink: 0; animation: mrq 40s linear infinite; } @keyframes mrq { to { transform: translateX(-100%); } } .marquee-item { font-family: var(--font-display); font-size: clamp(36px, 5vw, 72px); font-weight: 400; color: var(--ink-3); white-space: nowrap; letter-spacing: -0.02em; display: flex; align-items: center; gap: 64px; } .marquee-item::after { content: "✦"; color: var(--accent); font-size: .6em; } /* ---------- Utility ---------- */ .grid { display: grid; gap: 24px; } .center { text-align: center; } .muted { color: var(--mute); } .divider { height: 1px; background: var(--line); margin: 24px 0; } .rule-tall { height: 40px; width: 1px; background: var(--line); }