/* ════════════════════════════════════════ JXM BRAND LAYER Sits on top of the Redox style.css and remaps the template's CSS variables onto the JXM design tokens. Master style.css is left untouched. Cascade order in : 1. style.css (Redox base) 2. jxm-brand.css (this file — colors, fonts) 3. dark-mode.css (toggle + logo swap) ════════════════════════════════════════ */ /* ════════════ A11Y — visually-hidden utility ═══════════════════════ Standard "screen-reader only" pattern. Used for h1 elements on pages whose hero design doesn't allow a visible h1 (e.g., editorial intros where the page title would clash with the manifesto), so search engines + assistive tech still get a proper top-level heading. */ .jxm-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ════════════ JXM TOKENS ═══════════════════════ */ :root { /* Brand */ --jxm-tusk: #f3f1ec; --jxm-abyss: #221F32; --jxm-soylent: #233935; --jxm-cedar: #1c2d20; /* Accents */ --jxm-kermit: #49e385; --jxm-gator: #2ec470; --jxm-nemo: #FF6464; --jxm-fly: #BDDEED; --jxm-blurple: #5e4ff5; /* ════════════ V5 CANONICAL TYPE SCALE ═════════════ Use these tokens for new headlines + section content. Existing inline clamps may be kept where they were tuned for specific designs; new work should reference the tokens for consistency. */ --jxm-fs-display-xl: clamp(7rem, 22vw, 22rem); /* hero wordmarks (homepage 'growth') */ --jxm-fs-display-lg: clamp(5rem, 17vw, 13rem); /* marquee-hero row words */ --jxm-fs-display-md: clamp(3.5rem, 11vw, 9.5rem); /* editorial pull-quote / large CTA */ --jxm-fs-headline: clamp(2rem, 4.4vw, 3.5rem); /* section h2 (also brand default) */ --jxm-fs-subhead: clamp(1.5rem, 2.4vw, 2rem); /* card titles / sub-headlines */ --jxm-fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); /* lead paragraph / pull-out body */ --jxm-fs-body: 1rem; /* standard body copy */ --jxm-fs-meta: 0.875rem; /* metadata, captions */ --jxm-fs-eyebrow: 0.75rem; /* mono-caps kicker (set via .section-subtitle override below) */ /* Dark surfaces */ --jxm-bg-dark: #16121f; --jxm-bg-deep: #0a0a0e; /* Text on dark */ --jxm-t1: #ffffff; --jxm-t2: rgba(255,255,255,0.85); --jxm-t3: rgba(255,255,255,0.65); --jxm-t4: rgba(255,255,255,0.45); --jxm-t5: rgba(255,255,255,0.30); /* Borders on dark */ --jxm-bd1: rgba(255,255,255,0.07); --jxm-bd2: rgba(255,255,255,0.10); --jxm-bd3: rgba(255,255,255,0.18); /* Text on cream (tusk) */ --jxm-c-t2: rgba(34,31,50,0.85); --jxm-c-t3: rgba(34,31,50,0.55); --jxm-c-t4: rgba(34,31,50,0.30); --jxm-c-bd: rgba(34,31,50,0.18); } /* ════════════ REDOX VARIABLE REMAP ═════════════ Overrides Redox's :root tokens to point at JXM values. Anything in style.css that reads var(--theme), var(--primary), etc. now follows JXM brand without further edits. ═══════════════════════════════════════════════════ */ :root { --primary: var(--jxm-abyss); --secondary: var(--jxm-c-t2); --border: var(--jxm-c-bd); --bg: var(--jxm-tusk); --theme: var(--jxm-kermit); --black: var(--jxm-abyss); --black-2: var(--jxm-c-t3); --white: #ffffff; --white-2: var(--jxm-t3); --action: var(--jxm-kermit); } /* Dark-mode overrides (Redox uses :root .dark — we mirror). NOTE: --black stays abyss in both modes. Redox's button rule (.dark .rr-btn .text-one { color: var(--black) }) relies on --black being the dark-on-light value to give abyss text on the tusk button. Don't override it here. */ :root .dark, body.dark { --primary: var(--jxm-tusk); --secondary: var(--jxm-t2); --border: var(--jxm-bd2); --bg: var(--jxm-bg-dark); --theme: var(--jxm-kermit); --black-2: var(--jxm-t3); --action: var(--jxm-kermit); } /* ════════════ BODY SURFACE ═════════════════════ Cream surface in light mode, JXM bg-dark in dark. ═══════════════════════════════════════════════════ */ body.body-wrapper { background: var(--jxm-tusk); color: var(--jxm-abyss); } body.body-wrapper.dark { background: var(--jxm-bg-dark); color: var(--jxm-tusk); } /* ════════════ TYPE FAMILIES ════════════════════ Body: DM Sans 400, line-height 1.65–1.75 Display H1-H6: Inter 500, tight letter-spacing Mono labels: IBM Plex Mono (used per-section) Quote accent: Libre Baskerville (used per-section) ═══════════════════════════════════════════════════ */ body.body-wrapper { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* High-specificity headline override — wins over .font-heading-bdogrotesk-regular hN { font-family: ... } */ body[class*="body-"] h1, body[class*="body-"] h2, body[class*="body-"] h3, body[class*="body-"] h4, body[class*="body-"] h5, body[class*="body-"] h6 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--primary); } body[class*="body-"] h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); } body[class*="body-"] h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); } body[class*="body-"] h3 { font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.2; } /* Section subtitle (the small wavy-underline label) — render in mono */ body[class*="body-"] .section-subtitle { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); } /* ════════════ BUTTON HOVER FILL ════════════════ Redox's .rr-btn slides a ::before pseudo up from the bottom on hover. Default fill is white; JXM wants tusk in light and abyss in dark. ═══════════════════════════════════════════════════ */ .rr-btn::before { background-color: var(--jxm-tusk); } body.dark .rr-btn::before, .dark .rr-btn::before { background-color: var(--jxm-abyss); } /* Hover text color on the slid-in fill — kept symmetric */ .rr-btn:hover .btn-wrap .text-two, .rr-btn:focus .btn-wrap .text-two { color: var(--jxm-abyss); } body.dark .rr-btn:hover .btn-wrap .text-two, body.dark .rr-btn:focus .btn-wrap .text-two, .dark .rr-btn:hover .btn-wrap .text-two, .dark .rr-btn:focus .btn-wrap .text-two { color: var(--jxm-tusk); } /* ════════════ CASE STUDY — chapter labels + channels ═ Used on client-stories-*.html pages. ═══════════════════════════════════════════════════ */ .case-chapter-label { display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jxm-c-t3); margin-bottom: 0.75rem; } body.dark .case-chapter-label { color: var(--jxm-t3); } .case-channels { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--jxm-c-bd); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: baseline; } body.dark .case-channels { border-top-color: var(--jxm-bd2); } .case-channels-label { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jxm-c-t3); flex-shrink: 0; } body.dark .case-channels-label { color: var(--jxm-t3); } .case-channels-list { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; line-height: 1.6; color: var(--jxm-abyss); } body.dark .case-channels-list { color: var(--jxm-tusk); } .case-dek { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; line-height: 1.55; color: var(--jxm-c-t2); margin: 1rem 0 0; max-width: 36rem; } body.dark .case-dek { color: var(--jxm-t2); } .case-eyebrow { display: inline-block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jxm-c-t3); margin-bottom: 0.5rem; } body.dark .case-eyebrow { color: var(--jxm-t3); } .case-client-tag { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 500; color: var(--jxm-abyss); margin-bottom: 1.25rem; } body.dark .case-client-tag { color: var(--jxm-tusk); } /* ════════════ REDOX CONTRAST FIXES ═════════════════ Sections where Redox's hardcoded colors don't follow JXM tokens — overridden so dark text reads on light backgrounds and vice versa. ═══════════════════════════════════════════════════ */ /* Services page — parallax callout block was a dark callout in Redox; we want it to read like a normal page section. */ .service-area-service-page .service-content-wrapper { background-color: transparent !important; } .service-area-service-page .service-content-wrapper .text { color: var(--primary) !important; } /* Client-area-service-page bottom CTA — make sure title + body follow the primary token in both modes (Redox version had light-mode-specific styling that broke in dark). */ .client-area-service-page .section-title, .client-area-service-page .section-content .text { color: var(--primary); } /* The throwable client-logo capsules use light backgrounds — invert their tone in dark mode so they don't look like glaring blocks. */ body.dark .client-area-service-page .client-box img { filter: invert(1) brightness(0.95); opacity: 0.7; } /* ════════════ SAFE SPACING FOUNDATION ══════════════ General rules so editorial copy breathes. Gentle — does not override per-section spacing where it's already correct. ═══════════════════════════════════════════════════ */ /* Heading → paragraph rhythm */ body[class*="body-"] h2 + .text-wrapper, body[class*="body-"] h2 + p, body[class*="body-"] h3 + .text-wrapper, body[class*="body-"] h3 + p { margin-top: 1.25rem; } /* Paragraph spacing inside text-wrappers */ body[class*="body-"] .text-wrapper p + p { margin-top: 0.75rem; } /* Section header → following content */ body[class*="body-"] .section-header + .section-content-wrapper, body[class*="body-"] .section-header + .services-wrapper-box, body[class*="body-"] .section-header + .meta-wrapper, body[class*="body-"] .section-header + .accordion-wrapper { margin-top: 2.5rem; } /* Case study chapter blocks — breathing room between Context, Move, Result, and the metrics grid. */ .work-details-area .section-info + .section-details { margin-top: 3rem; } .work-details-area .section-details .details-info + .details-info { margin-top: 2.5rem; } .work-details-area .case-channels { margin-top: 3rem; } /* Team-details — pagination needs air above it */ .team-details-area .pagination { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--jxm-c-bd); } body.dark .team-details-area .pagination { border-top-color: var(--jxm-bd2); } /* Footer breathing room above */ .footer-area-4 { margin-top: 3rem; } /* About page — extra space between four-pillar boxes on smaller screens */ .approach-area-about-page .approach-box { padding-bottom: 1rem; } /* Approach list spacing — give bullets a little vertical room */ .approach-list ul li { margin-bottom: 0.5rem; } /* Service-list bullets on services page — more breathing room */ .service-list li { margin-bottom: 0.4rem; } /* Case-study cover image margin — sits closer to header text in small viewports without this. */ .work-details-area .image-wrapper { margin-top: 2.5rem; } /* Subscribe form / contact form fields — keep generous padding so the new Formspree placeholder text doesn't crowd the field edges. */ .contact-formfield input, .contact-formfield select, .contact-formfield textarea { padding: 1rem 1.25rem; } /* ════════════ SELECTED WORK CARDS — typographic hierarchy ═ Redox's default styles all three meta lines at the same 20px / 400 weight, which collapses the visual hierarchy. This block establishes a clear three-step stack: 1. metric headline — Inter 600, larger, abyss 2. client + campaign — DM Sans 500, mid size, secondary 3. year — IBM Plex Mono, small, uppercase, muted ═══════════════════════════════════════════════════ */ .works-wrapper-4 .work-box .content { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .works-wrapper-4 .work-box .title { font-family: 'Inter', sans-serif !important; font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; color: var(--primary); margin: 0; } .works-wrapper-4 .work-box .title a { color: inherit; transition: color 200ms ease-out; } .works-wrapper-4 .work-box .title a:hover { color: var(--jxm-gator); } .works-wrapper-4 .work-box .meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.875rem; margin: 0; } .works-wrapper-4 .work-box .meta .tag { font-family: 'DM Sans', sans-serif !important; font-size: 0.8125rem !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.4 !important; color: var(--secondary); display: inline; } .works-wrapper-4 .work-box .meta .date { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important; font-size: 0.6875rem !important; font-weight: 400 !important; letter-spacing: 0.14em !important; line-height: 1.4 !important; text-transform: uppercase; color: var(--jxm-c-t3); white-space: nowrap; display: inline; } body.dark .works-wrapper-4 .work-box .meta .date { color: var(--jxm-t4); } /* Kill Redox's bullet-separator pseudo-element — visual differentiation between tag and date already separates them. */ .works-wrapper-4 .work-box .meta span:not(:first-child):before { display: none !important; } /* ════════════ HOMEPAGE SERVICES — body text always visible ═ Redox hides each service-box body text with max-height:0 + opacity:0 and reveals on hover — but since we wrote real body copy in there, on hover the opacity becomes 1 while max-height stays 0, causing the text to overflow into the next row. Force it always-visible and let the grid row grow. ═══════════════════════════════════════════════════ */ .services-wrapper-5 .service-box .text { opacity: 1 !important; max-height: none !important; margin-top: 0.75rem !important; font-family: 'DM Sans', sans-serif !important; font-size: 1rem !important; line-height: 1.55 !important; color: var(--secondary); } .services-wrapper-5 .service-box:hover .text { height: auto !important; } /* ════════════ HOMEPAGE CLOSING CTA — vertical rhythm ═══ Redox's cta-area-4 stacks H2 + body + button with no inherent spacing between them. Add proper breathing room. ═══════════════════════════════════════════════════ */ .cta-area-4 .section-header .text-wrapper { margin-top: 2rem; } .cta-area-4 .section-header .btn-wrapper { margin-top: 2rem; } /* ════════════ STUDIO VIDEO STAGE — V4 PARITY ═══════════ Inline silent-loop iframe with the V4 600px stage height, custom "Play Video" cursor, and click-to-modal pattern. ═══════════════════════════════════════════════════ */ /* Stage = 600px tall (matches V4), iframe scales to cover it */ .jxm-video-stage { position: relative; height: 600px; background: #000; overflow: hidden; cursor: none; z-index: 0; } .jxm-video-stage iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* aspect-fill: 16:9 cover regardless of container ratio */ width: max(100%, 177.78vh); height: max(56.25vw, 100%); min-width: 100%; min-height: 100%; border: 0; pointer-events: none; display: block; } .jxm-video-stage:focus-visible { outline: 2px solid var(--jxm-kermit); outline-offset: -8px; } @media (max-width: 1199px) { .jxm-video-stage { height: 480px; } } @media (max-width: 720px) { .jxm-video-stage { height: 320px; } } /* Custom "Play Video" pill cursor — follows the pointer over the stage */ .jxm-cursor { position: fixed; top: 0; left: 0; z-index: 1100; pointer-events: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; background: #f3f1ec; color: #09090b; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 8px 28px rgba(0,0,0,0.35); opacity: 0; transform: translate(-50%, -50%) scale(0.7); transition: opacity 160ms ease-out, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } .jxm-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } @media (max-width: 720px) { .jxm-cursor { display: none; } } /* Video modal — fades in, scales up, with backdrop blur */ .jxm-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; opacity: 0; pointer-events: none; transition: opacity 240ms ease-out; } .jxm-modal.is-open { opacity: 1; pointer-events: auto; } .jxm-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .jxm-modal-panel { position: relative; width: 100%; max-width: 64rem; aspect-ratio: 16 / 9; transform: scale(0.96); transition: transform 320ms ease-out; } .jxm-modal.is-open .jxm-modal-panel { transform: scale(1); } .jxm-modal-video { width: 100%; height: 100%; background: #000; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.55); } .jxm-modal-video iframe { width: 100%; height: 100%; border: 0; } .jxm-modal-close { position: absolute; top: -3rem; right: 0; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #f3f1ec; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 160ms ease-out; } .jxm-modal-close:hover { background: rgba(255,255,255,0.16); } @media (max-width: 720px) { .jxm-modal-close { top: -2.5rem; } } @media (prefers-reduced-motion: reduce) { .jxm-modal, .jxm-modal-panel { transition: none !important; } } /* ════════════ HERO PIN — Selected Works slides up over hero ═ The hero is pinned via GSAP ScrollTrigger (see inline script on index.html). These styles support the effect: - Hero fills the viewport so the pin reads as a full screen - Selected Works has an opaque background + higher z-index so it occludes the hero as it slides up ═══════════════════════════════════════════════════ */ .hero-area-5 { position: relative; z-index: 1; min-height: 100svh; /* small-viewport-height — avoids mobile address-bar jump */ min-height: 100vh; /* fallback */ background: var(--jxm-tusk); } body.dark .hero-area-5 { background: var(--jxm-bg-dark); } /* Selected Works must paint above the pinned hero with a fully opaque background so the hero text doesn't bleed through. Isolation creates its own stacking context so z-index conflicts inside .hero-area-5 can't elevate hero children above this layer. */ .work-area-4 { position: relative; z-index: 100; background: var(--jxm-tusk); isolation: isolate; } body.dark .work-area-4 { background: var(--jxm-bg-dark); } /* ════════════ FLOATING UI — clear Chrome extension icons ═ Bumps the scroll-to-top button up 64px so it (and the dark-mode toggle stacked above it) don't get covered by browser extension floaters in the bottom-right corner. ═══════════════════════════════════════════════════ */ .progress-wrap { bottom: 84px !important; /* was 20px — +64 to clear PDF/extension icons */ } /* ════════════ TOP NAV — 20% smaller menu items ═════════ Redox's .header-area-2 .main-menu li a is 16px / 21px x 17px padding. Reducing to 13px (≈ 20% smaller) and tightening pad. */ .header-area-2 .main-menu li a { font-size: 13px; padding: 18px 14px; letter-spacing: 0.01em; } /* ════════════ ACCENT SELECTION ═════════════════ */ ::selection { background: var(--jxm-abyss); color: var(--jxm-tusk); } body.dark ::selection { background: var(--jxm-tusk); color: var(--jxm-abyss); } /* ════════════ V5 EYEBROW CONSISTENCY ═════════════════ Canonical "kicker before headline" eyebrow treatment — IBM Plex Mono uppercase, 0.18em tracked. Applied to every legacy eyebrow class on V5 pages (those with a -light or -abyss / -dark body modifier) so eyebrows read consistently sitewide. The .v4-pill class stays a separate, distinct "section label" treatment (rounded DM Sans pill) and is not affected here. */ body[class*="-light"] .section-subtitle, body[class*="-light"] .svc-pill, body[class*="-light"] .case-eyebrow, body[class*="-light"] .cc-eyebrow, body[class*="-light"] .nw-eyebrow, body[class*="-light"] .show-eyebrow:not(.v4-pill), body[class*="-abyss"] .section-subtitle, body.case-dark .section-subtitle, body.service-details-dark .section-subtitle { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace !important; font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0.18em !important; line-height: 1.25 !important; text-transform: uppercase !important; background: none !important; -webkit-text-fill-color: currentColor !important; width: auto !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; display: inline-block !important; } /* ════════════ SCROLL-TO-TOP — single pill, no progress ring ═══════ Kills the legacy SVG scroll-progress indicator entirely on every page. The button is a plain pill with a contrasting arrow — no ring. - Default (any light surface): abyss pill + tusk arrow - Dark surfaces (.dark, *-abyss): tusk pill + abyss arrow */ .progress-wrap svg, .progress-wrap svg.progress-circle { display: none !important; } .progress-wrap.active-progress { mix-blend-mode: normal !important; background-color: var(--jxm-abyss) !important; border: 1px solid rgba(243, 241, 236, 0.18) !important; } .progress-wrap.active-progress::after { color: var(--jxm-tusk) !important; } body.dark .progress-wrap.active-progress, body[class*="-abyss"] .progress-wrap.active-progress { background-color: var(--jxm-tusk) !important; border: 1px solid rgba(34, 31, 50, 0.18) !important; } body.dark .progress-wrap.active-progress::after, body[class*="-abyss"] .progress-wrap.active-progress::after { color: var(--jxm-abyss) !important; }