/* ============================================================
JIL SOVEREIGN -- CANONICAL DESIGN SYSTEM
File: /css/design-system.css
Single source of truth for all colors, typography, spacing,
and component styles across jilsovereign.com.
Supports:
- Dark theme (default) and light theme via [data-theme="light"]
on or
- RTL layout for Arabic (ar) and Hebrew (he) via
[dir="rtl"] on
- 13-language font stack coverage
Add to every page :
============================================================ */
/* Load DM Sans + DM Mono - the canonical JIL brand typeface */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');
/* Editorial serif - used for H1/H2 regular weight + italic em accents
across the site. Retail-inspired look-and-feel (Phase 2 site-wide). */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* IBM Plex Sans - kept as a fallback. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
/* Aptos / Aptos Display - Microsoft's new system-default sans.
Preferred across the site 2026-04-24. Where Google Fonts doesn't
serve this family, the fallback chain (IBM Plex Sans -> DM Sans ->
Segoe UI) keeps things legible. On Windows 11 Segoe UI already
maps to Aptos natively. */
@import url('https://fonts.googleapis.com/css2?family=Aptos:ital,wght@0,400;0,500;0,600;0,700&display=swap');
/* ------------------------------------------------------------
1. FONT STACKS PER LANGUAGE
Applied via html[lang="xx"] selectors so the correct
font stack activates automatically when lang changes.
------------------------------------------------------------ */
/* Latin scripts: EN, FR, DE, ES, PT, PL, UK */
html[lang="en"],
html[lang="fr"],
html[lang="de"],
html[lang="es"],
html[lang="pt"],
html[lang="pl"],
html[lang="uk"] {
--jil-font-body: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-heading: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Swiss German -- same Latin stack, explicit for completeness */
html[lang="de-CH"] {
--jil-font-body: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-heading: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Arabic -- RTL, requires Arabic-supporting font */
html[lang="ar"] {
--jil-font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--jil-font-heading: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Hebrew -- RTL */
html[lang="he"] {
--jil-font-body: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
--jil-font-heading: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Hindi (Devanagari) */
html[lang="hi"] {
--jil-font-body: "Noto Sans Devanagari", "Hind", "Mangal", Arial, sans-serif;
--jil-font-heading: "Noto Sans Devanagari", "Hind", "Mangal", Arial, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Japanese */
html[lang="ja"] {
--jil-font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
--jil-font-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Chinese Simplified */
html[lang="zh"],
html[lang="zh-CN"],
html[lang="zh-Hans"] {
--jil-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "SimHei", sans-serif;
--jil-font-heading: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "SimHei", sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Chinese Traditional */
html[lang="zh-TW"],
html[lang="zh-Hant"] {
--jil-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
--jil-font-heading: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
}
/* Fallback: if no lang attribute is set, default to Latin */
:root {
--jil-font-body: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-heading: "Aptos Display", "Aptos", "IBM Plex Sans", "DM Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--jil-font-mono: "DM Mono", "Courier New", monospace;
/* Editorial serif stack (retail-inspired) - used for H1/H2 and
italic-em accents when an element opts in via class or explicit
font-family override. */
--jil-font-editorial: "Instrument Serif", "DM Serif Display", "Source Serif 4", "GT Sectra", Georgia, serif;
}
/* ------------------------------------------------------------
2. DESIGN TOKENS -- DARK THEME (DEFAULT)
------------------------------------------------------------ */
:root,
[data-theme="dark"],
[data-theme="sovereign-dark"],
[data-theme="getjil"] {
/* Backgrounds */
--jil-bg-base: #08101F; /* page root */
--jil-bg-primary: #0A1628; /* hero sections */
--jil-bg-secondary: #0D1B35; /* alternating sections */
--jil-bg-card: #101F3A; /* card / panel surfaces */
--jil-bg-card-hover: #132444; /* card hover */
--jil-bg-overlay: rgba(8, 16, 31, 0.94);
/* Text */
--jil-text-primary: #F0EFE9; /* headings, high-emphasis */
--jil-text-secondary: #B8C4D8; /* body copy */
--jil-text-muted: #6B7E9A; /* captions, labels */
--jil-text-inverse: #0A1628; /* text on gold buttons */
/* Accent -- JIL Gold */
--jil-gold: #C9A84C;
--jil-gold-light: #E2C87A; /* hover state */
--jil-gold-dim: rgba(201, 168, 76, 0.15); /* subtle bg tint */
--jil-gold-border: rgba(201, 168, 76, 0.25); /* gold borders */
/* Accent -- Cranberry (retail-shared editorial accent) */
--jil-crimson: #9B1C1F;
--jil-crimson-2: #7D1516; /* hover / darker */
/* Retail-shared light-blue surface tokens (for featured panels,
hero accent washes, CTA strips). Present even in dark theme so
pale-blue-tinted cards work there too. */
--jil-surface-deep: #E4EEF8;
--jil-ice: #C9DDF0;
/* Borders */
--jil-border-subtle: rgba(255, 255, 255, 0.06);
--jil-border-default: rgba(255, 255, 255, 0.10);
--jil-border-emphasis: rgba(201, 168, 76, 0.30);
/* Status */
--jil-success: #2ECC8A;
--jil-success-bg: rgba(46, 204, 138, 0.10);
--jil-warning: #F5A623;
--jil-warning-bg: rgba(245, 166, 35, 0.10);
--jil-danger: #E05252;
--jil-danger-bg: rgba(224, 82, 82, 0.10);
--jil-info: #4B9EE8;
--jil-info-bg: rgba(75, 158, 232, 0.10);
/* Verdict badges -- Yes / No / Review */
--jil-verdict-yes: #2ECC8A;
--jil-verdict-yes-bg: rgba(46, 204, 138, 0.12);
--jil-verdict-no: #E05252;
--jil-verdict-no-bg: rgba(224, 82, 82, 0.12);
--jil-verdict-review: #F5A623;
--jil-verdict-review-bg: rgba(245, 166, 35, 0.12);
/* Shadows */
--jil-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
--jil-shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
--jil-shadow-gold: 0 0 20px rgba(201, 168, 76, 0.15);
/* Nav specifics */
--jil-nav-bg: rgba(9, 18, 32, 0.97);
--jil-nav-border: rgba(184, 151, 58, 0.16);
--jil-dropdown-bg: #0F1F35;
--jil-dropdown-border: rgba(255, 255, 255, 0.08);
--jil-nav-shadow: none;
}
/* ------------------------------------------------------------
3. DESIGN TOKENS -- LIGHT THEME
------------------------------------------------------------ */
[data-theme="light"],
[data-theme="sovereign-light"] {
/* Backgrounds */
--jil-bg-base: #F5F4F0;
--jil-bg-primary: #FFFFFF;
--jil-bg-secondary: #F0EEE8;
--jil-bg-card: #FFFFFF;
--jil-bg-card-hover: #F7F6F2;
--jil-bg-overlay: rgba(245, 244, 240, 0.94);
/* Text */
--jil-text-primary: #0A1628;
--jil-text-secondary: #344B6B;
--jil-text-muted: #6B7E9A;
--jil-text-inverse: #FFFFFF;
/* Accent -- slightly deeper gold for contrast on light */
--jil-gold: #A8841E;
--jil-gold-light: #C9A84C;
--jil-gold-dim: rgba(168, 132, 30, 0.10);
--jil-gold-border: rgba(168, 132, 30, 0.25);
/* Accent -- Cranberry (retail-shared editorial accent) */
--jil-crimson: #9B1C1F;
--jil-crimson-2: #7D1516;
/* Retail-shared light-blue surface tokens */
--jil-surface-deep: #E4EEF8;
--jil-ice: #C9DDF0;
/* Borders */
--jil-border-subtle: rgba(10, 22, 40, 0.06);
--jil-border-default: rgba(10, 22, 40, 0.12);
--jil-border-emphasis: rgba(168, 132, 30, 0.30);
/* Status -- same hues, lighter backgrounds */
--jil-success: #1A9E65;
--jil-success-bg: rgba(26, 158, 101, 0.08);
--jil-warning: #C47D0A;
--jil-warning-bg: rgba(196, 125, 10, 0.08);
--jil-danger: #C03535;
--jil-danger-bg: rgba(192, 53, 53, 0.08);
--jil-info: #1B6EC2;
--jil-info-bg: rgba(27, 110, 194, 0.08);
/* Verdict badges */
--jil-verdict-yes: #1A9E65;
--jil-verdict-yes-bg: rgba(26, 158, 101, 0.10);
--jil-verdict-no: #C03535;
--jil-verdict-no-bg: rgba(192, 53, 53, 0.10);
--jil-verdict-review: #C47D0A;
--jil-verdict-review-bg: rgba(196, 125, 10, 0.10);
/* Shadows */
--jil-shadow-card: 0 1px 3px rgba(10, 22, 40, 0.08), 0 4px 16px rgba(10, 22, 40, 0.06);
--jil-shadow-elevated: 0 4px 24px rgba(10, 22, 40, 0.12), 0 1px 4px rgba(10, 22, 40, 0.08);
--jil-shadow-gold: 0 0 20px rgba(168, 132, 30, 0.12);
/* Nav specifics */
--jil-nav-bg: rgba(250, 248, 244, 0.97);
--jil-nav-border: rgba(138, 106, 16, 0.14);
--jil-dropdown-bg: #FFFFFF;
--jil-dropdown-border: rgba(0, 0, 0, 0.08);
--jil-nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* ------------------------------------------------------------
4. TYPOGRAPHY SCALE
------------------------------------------------------------ */
:root {
--jil-text-xs: 0.75rem; /* 12px -- captions, legal */
--jil-text-sm: 0.875rem; /* 14px -- labels, metadata */
--jil-text-base: 1rem; /* 16px -- body copy */
--jil-text-md: 1.125rem; /* 18px -- lead text */
--jil-text-lg: 1.25rem; /* 20px -- subheadings */
--jil-text-xl: 1.5rem; /* 24px */
--jil-text-2xl: 1.875rem; /* 30px */
--jil-text-3xl: 2.25rem; /* 36px */
--jil-text-4xl: 3rem; /* 48px -- hero H1 */
--jil-text-5xl: 3.5rem; /* 56px -- hero H1 large viewports */
--jil-leading-tight: 1.2;
--jil-leading-snug: 1.35;
--jil-leading-normal: 1.6;
--jil-leading-loose: 1.8;
--jil-weight-normal: 400;
--jil-weight-medium: 500;
--jil-weight-semi: 600;
--jil-weight-bold: 700;
}
/* CJK and Devanagari need more generous line height */
html[lang="ja"],
html[lang="zh"],
html[lang="zh-CN"],
html[lang="zh-Hans"],
html[lang="zh-TW"],
html[lang="zh-Hant"],
html[lang="hi"] {
--jil-leading-normal: 1.9;
--jil-leading-loose: 2.1;
}
/* Arabic and Hebrew need slightly more line height */
html[lang="ar"],
html[lang="he"] {
--jil-leading-normal: 1.75;
--jil-leading-loose: 2.0;
}
/* ------------------------------------------------------------
5. SPACING & LAYOUT TOKENS
------------------------------------------------------------ */
:root {
--jil-space-1: 0.25rem; /* 4px */
--jil-space-2: 0.5rem; /* 8px */
--jil-space-3: 0.75rem; /* 12px */
--jil-space-4: 1rem; /* 16px */
--jil-space-5: 1.25rem; /* 20px */
--jil-space-6: 1.5rem; /* 24px */
--jil-space-8: 2rem; /* 32px */
--jil-space-10: 2.5rem; /* 40px */
--jil-space-12: 3rem; /* 48px */
--jil-space-16: 4rem; /* 64px */
--jil-space-20: 5rem; /* 80px */
--jil-space-24: 6rem; /* 96px */
--jil-radius-sm: 4px;
--jil-radius-md: 8px;
--jil-radius-lg: 12px;
--jil-radius-xl: 16px;
--jil-radius-pill: 9999px;
--jil-max-width: 1200px;
--jil-content-width: 760px; /* prose / centered text */
--jil-nav-height: 68px;
--jil-transition-fast: 150ms ease;
--jil-transition-base: 250ms ease;
--jil-transition-slow: 400ms ease;
}
/* ------------------------------------------------------------
6. BASE RESET & GLOBAL STYLES
------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--jil-font-body);
font-size: var(--jil-text-base);
font-weight: var(--jil-weight-normal);
line-height: var(--jil-leading-normal);
color: var(--jil-text-secondary);
background-color: var(--jil-bg-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure canonical design system body styles beat legacy
jil-doc-standard.css [data-theme] body rules (specificity 0,1,1).
This rule at 0,1,1 loads after jil-doc-standard.css so it wins. */
[data-theme] body {
font-family: var(--jil-font-body);
background-color: var(--jil-bg-base);
color: var(--jil-text-secondary);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--jil-font-heading);
font-weight: var(--jil-weight-semi);
line-height: var(--jil-leading-tight);
color: var(--jil-text-primary);
}
h1 { font-size: var(--jil-text-4xl); }
h2 { font-size: var(--jil-text-3xl); }
h3 { font-size: var(--jil-text-2xl); }
h4 { font-size: var(--jil-text-xl); }
h5 { font-size: var(--jil-text-lg); }
h6 { font-size: var(--jil-text-base); font-weight: var(--jil-weight-medium); }
p {
line-height: var(--jil-leading-normal);
color: var(--jil-text-secondary);
}
a {
color: var(--jil-gold);
text-decoration: none;
transition: color var(--jil-transition-fast);
}
a:hover {
color: var(--jil-gold-light);
}
img, svg {
display: block;
max-width: 100%;
}
code, pre {
font-family: var(--jil-font-mono);
font-size: 0.9em;
}
/* RTL base adjustments */
[dir="rtl"] {
text-align: right;
}
/* ------------------------------------------------------------
7. LAYOUT UTILITIES
------------------------------------------------------------ */
.jil-container {
width: 100%;
max-width: var(--jil-max-width);
margin-inline: auto;
padding-inline: var(--jil-space-8);
}
@media (max-width: 768px) {
.jil-container {
padding-inline: var(--jil-space-5);
}
}
.jil-section {
padding-block: var(--jil-space-24);
}
.jil-section--sm {
padding-block: var(--jil-space-16);
}
.jil-section--lg {
padding-block: calc(var(--jil-space-24) * 1.5);
}
/* Alternating section backgrounds */
.jil-section--primary { background-color: var(--jil-bg-primary); }
.jil-section--secondary { background-color: var(--jil-bg-secondary); }
.jil-section--base { background-color: var(--jil-bg-base); }
/* ------------------------------------------------------------
8. NAVIGATION
The nav partial (/partials/nav.html) uses these classes.
------------------------------------------------------------ */
.jil-nav {
position: fixed;
top: 0;
inset-inline-start: 0; /* RTL-aware: replaces `left: 0` */
width: 100%;
height: var(--jil-nav-height);
background: var(--jil-nav-bg);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--jil-nav-border);
box-shadow: var(--jil-nav-shadow);
-webkit-backdrop-filter: blur(12px);
z-index: 1000;
display: flex;
align-items: center;
/* Self-contained: prevent page-level CSS from affecting nav alignment.
Different pages load jil-v14.css (line-height:1.7), jil-doc-standard.css,
or jil-design-system.css - each with different body rules that inherit
into the nav and cause inconsistent vertical alignment. */
font-family: var(--jil-font-body);
line-height: 1;
font-size: var(--jil-text-sm);
}
.jil-nav.is-scrolled {
background: var(--jil-nav-bg);
border-bottom-color: var(--jil-nav-border);
box-shadow: var(--jil-nav-shadow);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.jil-nav__inner {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 2rem;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--jil-space-1);
height: var(--jil-nav-height);
}
/* Logo -- parent-scoped for specificity */
.jil-nav .jil-nav__logo {
display: flex;
align-items: center;
gap: var(--jil-space-3);
text-decoration: none;
color: inherit;
flex-shrink: 0;
}
.jil-nav__logo-img {
width: 32px;
height: 32px;
flex-shrink: 0;
display: block;
}
.jil-nav__logo-text {
font-size: var(--jil-text-base);
font-weight: var(--jil-weight-semi);
color: var(--jil-text-primary);
letter-spacing: -0.01em;
}
/* Top-level nav items -- flows naturally after logo on the same line */
.jil-nav__items {
display: flex;
align-items: center;
gap: var(--jil-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.jil-nav__item {
position: relative;
margin: 0;
padding: 0;
}
/* Parent-scoped (.jil-nav) for specificity 0,2,0 -- beats
[data-theme] a overrides (0,1,1) from jil-doc-standard.css */
.jil-nav .jil-nav__link {
display: flex;
align-items: center;
gap: var(--jil-space-1);
padding: var(--jil-space-2) var(--jil-space-3);
font-size: var(--jil-text-sm);
font-weight: var(--jil-weight-medium);
color: var(--jil-text-secondary);
text-decoration: none;
border-radius: var(--jil-radius-md);
transition: color var(--jil-transition-fast), background-color var(--jil-transition-fast);
cursor: pointer;
white-space: nowrap;
}
.jil-nav .jil-nav__link:hover,
.jil-nav .jil-nav__item:hover > .jil-nav__link {
color: var(--jil-text-primary);
background-color: var(--jil-gold-dim);
}
.jil-nav .jil-nav__link--active {
color: var(--jil-gold);
}
/* Dropdown chevron */
.jil-nav__chevron {
width: 12px;
height: 12px;
transition: transform var(--jil-transition-fast);
opacity: 0.5;
}
.jil-nav__item:hover > .jil-nav__link .jil-nav__chevron {
transform: rotate(180deg);
opacity: 1;
}
/* Dropdown panel */
.jil-nav__dropdown {
position: absolute;
top: calc(100% + var(--jil-space-2));
inset-inline-start: 0; /* RTL-aware */
min-width: 220px;
background: var(--jil-dropdown-bg);
border: 1px solid var(--jil-dropdown-border);
border-radius: var(--jil-radius-lg);
box-shadow: var(--jil-shadow-elevated);
padding: var(--jil-space-2);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--jil-transition-fast),
transform var(--jil-transition-fast),
visibility var(--jil-transition-fast);
z-index: 100;
}
/* Wide dropdown for How It Works (two column groups) */
.jil-nav__dropdown--wide {
min-width: 480px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--jil-space-4);
}
/* Settlements dropdown - single column with CTA */
.jil-nav__dropdown--settlements {
min-width: 300px;
}
/* Request a Demo CTA link in dropdown */
.jil-nav .jil-nav__dropdown-cta {
color: var(--jil-gold);
font-weight: var(--jil-weight-semi);
}
.jil-nav .jil-nav__dropdown-cta:hover {
color: var(--jil-text-primary);
background-color: var(--jil-gold-dim);
}
.jil-nav__item:hover > .jil-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown group label */
.jil-nav__group-label {
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jil-gold);
padding: var(--jil-space-2) var(--jil-space-3) var(--jil-space-1);
display: block;
}
/* Dropdown links -- parent-scoped for specificity */
.jil-nav .jil-nav__dropdown-link {
display: block;
padding: var(--jil-space-2) var(--jil-space-3);
font-size: var(--jil-text-sm);
color: var(--jil-text-secondary);
text-decoration: none;
border-radius: var(--jil-radius-md);
transition: color var(--jil-transition-fast), background-color var(--jil-transition-fast);
white-space: nowrap;
}
.jil-nav .jil-nav__dropdown-link:hover {
color: var(--jil-text-primary);
background-color: var(--jil-gold-dim);
}
/* Dropdown section divider label - groups related dropdown links */
.jil-nav .jil-nav__dropdown-section {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jil-gold, #C9A227);
padding: 10px 12px 4px;
margin-top: 4px;
border-top: 1px solid var(--jil-border-subtle, rgba(201,162,39,0.18));
}
.jil-nav .jil-nav__dropdown-section:first-child {
border-top: none;
margin-top: 0;
padding-top: 4px;
}
.jil-nav__divider {
height: 1px;
background: var(--jil-border-subtle);
margin: var(--jil-space-2);
}
/* Right-side controls group -- pushed to far right */
.jil-nav__controls {
display: flex;
align-items: center;
gap: var(--jil-space-2);
margin-inline-start: auto;
flex-shrink: 0;
}
/* CTA button in nav -- parent-scoped for specificity */
.jil-nav__cta {
margin-inline-start: var(--jil-space-2);
flex-shrink: 0;
}
.jil-nav .jil-btn--primary,
.jil-nav__mobile .jil-btn--primary {
color: var(--jil-text-inverse);
text-decoration: none;
}
/* "Schedule a Call" CTA override (2026-04-29 v2): light-gold fill +
crimson outline + black text. Targeted by i18n key so it hits every
Schedule a Call instance site-wide. !important required to win against
the aggressive site-wide override block at line ~1872.
--
2026-04-29 v2 update: bg switched from cool gray (#F2F2F0) to a warm
light gold (#FAF1D0) per UX direction. Crimson border + black text
retained. Hover deepens the gold to #F2E5B0 with a stronger crimson
border and a subtle gold-tinted glow. */
.jil-btn--primary[data-i18n="nav.cta"],
.jil-btn--primary[data-i18n="btn_request_access"],
.jil-btn--primary[data-i18n="pillar_cta_contact"],
.jil-btn--primary[data-i18n="ihero_btn_access"],
.jil-btn--primary[data-i18n="infra_hero_btn_1"],
.jil-btn--primary[data-i18n="execution_model_btn_1"],
.jil-btn--primary[data-i18n="pilot_btn_2"],
.btn-primary[data-i18n="nav.cta"],
.btn-primary[data-i18n="btn_request_access"],
.btn-primary[data-i18n="pillar_cta_contact"],
.btn-primary[data-i18n="ihero_btn_access"],
.btn-primary[data-i18n="infra_hero_btn_1"],
.btn-primary[data-i18n="execution_model_btn_1"],
.btn-primary[data-i18n="pilot_btn_2"],
.btn-primary-lg[data-i18n="nav.cta"],
.btn-primary-lg[data-i18n="btn_request_access"],
.btn-primary-lg[data-i18n="pillar_cta_contact"],
.v14-btn-buy[data-i18n="btn_request_access"],
.v2-mobile-cta[data-i18n="btn_request_access"],
.jil-nav__cta.jil-btn--primary {
background: #FAF1D0 !important; /* warm light gold */
background-color: #FAF1D0 !important;
color: #000000 !important;
border: 1.5px solid var(--jil-crimson, #9B1C1F) !important;
border-radius: 0 !important;
}
.jil-btn--primary[data-i18n="nav.cta"]:hover,
.jil-btn--primary[data-i18n="btn_request_access"]:hover,
.jil-btn--primary[data-i18n="pillar_cta_contact"]:hover,
.jil-btn--primary[data-i18n="ihero_btn_access"]:hover,
.jil-btn--primary[data-i18n="infra_hero_btn_1"]:hover,
.jil-btn--primary[data-i18n="execution_model_btn_1"]:hover,
.jil-btn--primary[data-i18n="pilot_btn_2"]:hover,
.btn-primary[data-i18n="nav.cta"]:hover,
.btn-primary[data-i18n="btn_request_access"]:hover,
.btn-primary[data-i18n="pillar_cta_contact"]:hover,
.btn-primary[data-i18n="ihero_btn_access"]:hover,
.btn-primary[data-i18n="infra_hero_btn_1"]:hover,
.btn-primary[data-i18n="execution_model_btn_1"]:hover,
.btn-primary[data-i18n="pilot_btn_2"]:hover,
.btn-primary-lg[data-i18n="nav.cta"]:hover,
.btn-primary-lg[data-i18n="btn_request_access"]:hover,
.btn-primary-lg[data-i18n="pillar_cta_contact"]:hover,
.v14-btn-buy[data-i18n="btn_request_access"]:hover,
.v2-mobile-cta[data-i18n="btn_request_access"]:hover,
.jil-nav__cta.jil-btn--primary:hover {
background: #F2E5B0 !important; /* deeper gold on hover */
background-color: #F2E5B0 !important;
color: #000000 !important;
border-color: var(--jil-crimson-2, #7D1516) !important;
box-shadow: 0 2px 10px rgba(201, 162, 39, 0.30), 0 1px 4px rgba(155, 28, 31, 0.18) !important;
}
/* Mobile hamburger -- hidden on desktop */
.jil-nav__hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
width: 44px;
height: 44px;
padding: 0;
margin-inline-start: auto;
background: none;
border: 1px solid var(--jil-border-subtle);
border-radius: 6px;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.jil-nav__hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--jil-text-primary);
border-radius: 2px;
transition: transform var(--jil-transition-base), opacity var(--jil-transition-base);
}
/* Mobile nav drawer */
.jil-nav__mobile {
display: none;
position: fixed;
top: var(--jil-nav-height);
inset-inline-start: 0;
width: 100%;
height: calc(100vh - var(--jil-nav-height));
background: var(--jil-bg-primary);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--jil-space-6) var(--jil-space-5);
z-index: 9998;
flex-direction: column;
gap: var(--jil-space-1);
}
.jil-nav__mobile.is-open {
display: flex;
}
/* Mobile links -- parent-scoped for specificity */
.jil-nav__mobile .jil-nav__mobile-link {
display: block;
padding: var(--jil-space-3) var(--jil-space-4);
font-size: var(--jil-text-base);
font-weight: var(--jil-weight-medium);
color: var(--jil-text-secondary);
text-decoration: none;
border-radius: var(--jil-radius-md);
border-bottom: 1px solid var(--jil-border-subtle);
}
.jil-nav__mobile .jil-nav__mobile-link:hover {
color: var(--jil-gold);
background: var(--jil-gold-dim);
}
.jil-nav__mobile-group-label {
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jil-gold);
padding: var(--jil-space-4) var(--jil-space-4) var(--jil-space-1);
}
.jil-nav__mobile .jil-nav__mobile-sub-link {
display: block;
padding: var(--jil-space-2) var(--jil-space-6);
font-size: var(--jil-text-sm);
color: var(--jil-text-muted);
text-decoration: none;
border-radius: var(--jil-radius-md);
}
.jil-nav__mobile .jil-nav__mobile-sub-link:hover {
color: var(--jil-text-primary);
background: var(--jil-gold-dim);
}
/* Nav responsive breakpoints */
@media (max-width: 1024px) {
.jil-nav__items {
display: none;
}
.jil-nav__controls {
display: none;
}
.jil-nav__hamburger {
display: flex;
}
.jil-nav__cta {
display: none;
}
}
/* ------------------------------------------------------------
8b. BREADCRUMB BAR
Contextual location indicator below the nav bar.
Shows hierarchy: "Platform > Security & Compliance"
------------------------------------------------------------ */
.jil-breadcrumb {
position: fixed;
top: var(--jil-nav-height);
inset-inline-start: 0;
width: 100%;
z-index: 999;
background: var(--jil-bg-secondary);
border-bottom: 1px solid var(--jil-border-subtle);
font-size: var(--jil-text-xs);
line-height: 1;
}
.jil-breadcrumb__inner {
max-width: 1200px;
margin-inline: auto;
padding: var(--jil-space-2) 2rem;
display: flex;
align-items: center;
gap: var(--jil-space-2);
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.jil-breadcrumb__inner::-webkit-scrollbar { display: none; }
/* Parent-scoped for specificity -- beats [data-theme] a overrides */
.jil-breadcrumb .jil-breadcrumb__link {
color: var(--jil-text-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--jil-transition-fast);
}
.jil-breadcrumb .jil-breadcrumb__link:hover {
color: var(--jil-gold);
}
.jil-breadcrumb__sep {
color: var(--jil-text-muted);
opacity: 0.5;
user-select: none;
flex-shrink: 0;
}
.jil-breadcrumb__current {
color: var(--jil-text-primary);
font-weight: var(--jil-weight-medium);
white-space: nowrap;
}
/* When breadcrumb is present, push body down to clear both nav + breadcrumb */
body.has-breadcrumb {
padding-top: calc(var(--jil-nav-height) + 32px);
}
/* Hide breadcrumb on mobile - too cramped */
@media (max-width: 768px) {
.jil-breadcrumb {
display: none;
}
body.has-breadcrumb {
padding-top: var(--jil-nav-height);
}
}
/* ------------------------------------------------------------
9. HERO SECTION
Left-aligned on all pages. Consistent structure:
eyebrow > H1 > subhead > CTAs
------------------------------------------------------------ */
/* Body needs top padding to clear fixed nav */
body {
padding-top: var(--jil-nav-height) !important;
}
/* Mobile: sync --jil-nav-height with actual nav heights from jil-header.css.
This ensures body padding-top, mobile drawer position, and breadcrumb
offsets all match the real nav height on each breakpoint. */
@media (max-width: 768px) {
:root {
--jil-nav-height: 56px;
}
body {
padding-top: var(--jil-nav-height) !important;
}
}
@media (max-width: 480px) {
:root {
--jil-nav-height: 52px;
}
body {
padding-top: var(--jil-nav-height) !important;
}
}
.jil-hero {
background-color: var(--jil-bg-primary);
padding-block: var(--jil-space-24) var(--jil-space-20);
border-bottom: 1px solid var(--jil-border-subtle);
position: relative;
overflow: hidden;
}
/* Subtle grid texture overlay */
.jil-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--jil-border-subtle) 1px, transparent 1px),
linear-gradient(90deg, var(--jil-border-subtle) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
opacity: 0.4;
}
.jil-hero__inner {
position: relative;
z-index: 1;
max-width: var(--jil-max-width);
margin-inline: auto;
padding-inline: var(--jil-space-8);
}
/* RTL hero is right-aligned */
[dir="rtl"] .jil-hero__inner {
text-align: right;
}
.jil-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--jil-space-2);
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-semi);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jil-gold);
margin-bottom: var(--jil-space-5);
}
.jil-hero__eyebrow::before {
content: "";
display: block;
width: 24px;
height: 1px;
background: var(--jil-gold);
}
[dir="rtl"] .jil-hero__eyebrow::before {
display: none;
}
[dir="rtl"] .jil-hero__eyebrow::after {
content: "";
display: block;
width: 24px;
height: 1px;
background: var(--jil-gold);
}
.jil-hero__heading {
font-size: clamp(var(--jil-text-3xl), 4.5vw, var(--jil-text-5xl));
font-weight: var(--jil-weight-bold);
line-height: var(--jil-leading-tight);
color: var(--jil-text-primary);
max-width: 800px;
margin-bottom: var(--jil-space-6);
letter-spacing: -0.02em;
}
.jil-hero__subhead {
font-size: var(--jil-text-md);
line-height: var(--jil-leading-normal);
color: var(--jil-text-secondary);
max-width: 600px;
margin-bottom: var(--jil-space-10);
}
.jil-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--jil-space-4);
align-items: center;
}
[dir="rtl"] .jil-hero__actions {
justify-content: flex-end;
}
@media (max-width: 768px) {
.jil-hero {
padding-block: var(--jil-space-16) var(--jil-space-12);
}
.jil-hero__subhead {
font-size: var(--jil-text-base);
}
.jil-hero__actions {
flex-direction: column;
align-items: flex-start;
}
[dir="rtl"] .jil-hero__actions {
align-items: flex-end;
}
}
/* ------------------------------------------------------------
10. BUTTONS
Two variants: primary (gold fill) and ghost (gold outline).
One label: "Request Access" -- configured per-page via i18n.
------------------------------------------------------------ */
.jil-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--jil-space-2);
padding: 0.65rem var(--jil-space-6);
font-family: var(--jil-font-body);
font-size: var(--jil-text-sm);
font-weight: var(--jil-weight-semi);
line-height: 1;
border-radius: var(--jil-radius-md);
cursor: pointer;
text-decoration: none;
transition:
background-color var(--jil-transition-fast),
color var(--jil-transition-fast),
border-color var(--jil-transition-fast),
box-shadow var(--jil-transition-fast),
transform var(--jil-transition-fast);
border: 1.5px solid transparent;
white-space: nowrap;
user-select: none;
}
.jil-btn:active {
transform: scale(0.98);
}
/* Primary -- squared cranberry fill with white text. Matches retail's
"Browse all Products" CTA and was adopted site-wide on 2026-04-24. */
.jil-btn--primary {
background-color: var(--jil-crimson);
color: #FFFFFF;
border-color: var(--jil-crimson);
border-radius: 0;
}
.jil-btn--primary:hover {
background-color: var(--jil-crimson-2);
border-color: var(--jil-crimson-2);
color: #FFFFFF;
box-shadow: 0 2px 10px rgba(155, 28, 31, 0.18);
}
/* Ghost -- cranberry outline to pair with the new primary. */
.jil-btn--ghost {
background-color: transparent;
color: var(--jil-crimson);
border-color: var(--jil-crimson);
border-radius: 0;
}
.jil-btn--ghost:hover {
background-color: var(--jil-crimson);
border-color: var(--jil-crimson);
color: #FFFFFF;
}
/* Small variant */
.jil-btn--sm {
padding: 0.45rem var(--jil-space-4);
font-size: var(--jil-text-xs);
}
/* Large variant */
.jil-btn--lg {
padding: 0.85rem var(--jil-space-8);
font-size: var(--jil-text-base);
}
/* ------------------------------------------------------------
11. CARDS
------------------------------------------------------------ */
.jil-card {
background: var(--jil-bg-card);
border: 1px solid var(--jil-border-subtle);
border-radius: var(--jil-radius-lg);
padding: var(--jil-space-8);
transition:
background-color var(--jil-transition-base),
border-color var(--jil-transition-base),
box-shadow var(--jil-transition-base);
}
.jil-card--hoverable:hover {
background: var(--jil-bg-card-hover);
border-color: var(--jil-border-emphasis);
box-shadow: var(--jil-shadow-card);
}
.jil-card--gold {
border-color: var(--jil-gold-border);
}
.jil-card--gold:hover {
border-color: var(--jil-gold);
box-shadow: var(--jil-shadow-gold);
}
/* Stat / metric card */
.jil-stat-card {
background: var(--jil-bg-card);
border: 1px solid var(--jil-border-subtle);
border-radius: var(--jil-radius-lg);
padding: var(--jil-space-6) var(--jil-space-8);
text-align: center;
}
.jil-stat-card__value {
font-size: var(--jil-text-4xl);
font-weight: var(--jil-weight-bold);
color: var(--jil-gold);
line-height: 1;
margin-bottom: var(--jil-space-2);
letter-spacing: -0.02em;
}
.jil-stat-card__label {
font-size: var(--jil-text-sm);
color: var(--jil-text-muted);
font-weight: var(--jil-weight-medium);
}
/* ------------------------------------------------------------
12. VERDICT BADGES (Yes / No / Review)
------------------------------------------------------------ */
.jil-verdict {
display: inline-flex;
align-items: center;
gap: var(--jil-space-2);
padding: 0.3rem var(--jil-space-3);
border-radius: var(--jil-radius-pill);
font-size: var(--jil-text-sm);
font-weight: var(--jil-weight-semi);
}
.jil-verdict--yes {
color: var(--jil-verdict-yes);
background: var(--jil-verdict-yes-bg);
}
.jil-verdict--no {
color: var(--jil-verdict-no);
background: var(--jil-verdict-no-bg);
}
.jil-verdict--review {
color: var(--jil-verdict-review);
background: var(--jil-verdict-review-bg);
}
/* ------------------------------------------------------------
13. TABLES
------------------------------------------------------------ */
.jil-table {
width: 100%;
border-collapse: collapse;
font-size: var(--jil-text-sm);
}
.jil-table th {
font-weight: var(--jil-weight-semi);
color: var(--jil-gold);
font-size: var(--jil-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: var(--jil-space-3) var(--jil-space-4);
text-align: start; /* RTL-aware */
border-bottom: 1px solid var(--jil-border-default);
}
.jil-table td {
padding: var(--jil-space-3) var(--jil-space-4);
color: var(--jil-text-secondary);
border-bottom: 1px solid var(--jil-border-subtle);
vertical-align: top;
}
.jil-table tr:last-child td {
border-bottom: none;
}
.jil-table tr:hover td {
background: var(--jil-gold-dim);
}
/* Responsive table wrapper */
.jil-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--jil-border-subtle);
border-radius: var(--jil-radius-lg);
}
.jil-table-wrapper .jil-table th:first-child { border-radius: var(--jil-radius-lg) 0 0 0; }
.jil-table-wrapper .jil-table th:last-child { border-radius: 0 var(--jil-radius-lg) 0 0; }
[dir="rtl"] .jil-table-wrapper .jil-table th:first-child { border-radius: 0 var(--jil-radius-lg) 0 0; }
[dir="rtl"] .jil-table-wrapper .jil-table th:last-child { border-radius: var(--jil-radius-lg) 0 0 0; }
/* ------------------------------------------------------------
14. THEME TOGGLE BUTTON
------------------------------------------------------------ */
.jil-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--jil-radius-md);
border: 1px solid var(--jil-border-default);
background: transparent;
color: var(--jil-text-muted);
cursor: pointer;
transition:
color var(--jil-transition-fast),
border-color var(--jil-transition-fast),
background-color var(--jil-transition-fast);
}
.jil-theme-toggle:hover {
color: var(--jil-gold);
border-color: var(--jil-gold-border);
background: var(--jil-gold-dim);
}
/* Show/hide sun/moon icons based on theme */
.jil-theme-toggle .icon-sun { display: none; }
.jil-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .jil-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .jil-theme-toggle .icon-moon { display: none; }
/* ------------------------------------------------------------
15. LANGUAGE SELECTOR
------------------------------------------------------------ */
.jil-lang-selector {
position: relative;
}
.jil-lang-selector__trigger {
display: flex;
align-items: center;
gap: var(--jil-space-1);
padding: var(--jil-space-2) var(--jil-space-3);
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-medium);
color: var(--jil-text-muted);
background: transparent;
border: 1px solid var(--jil-border-default);
border-radius: var(--jil-radius-md);
cursor: pointer;
transition: color var(--jil-transition-fast), border-color var(--jil-transition-fast);
white-space: nowrap;
}
.jil-lang-selector__trigger:hover {
color: var(--jil-text-primary);
border-color: var(--jil-gold-border);
}
.jil-lang-selector__dropdown {
position: absolute;
top: calc(100% + var(--jil-space-2));
/* Right-anchor with explicit LTR rules first; older browsers / specificity
fights have caused this dropdown to open rightward and overflow the
viewport. The explicit right/left pair wins; inset-inline-end keeps the
RTL behavior correct. */
right: 0;
left: auto;
inset-inline-end: 0;
inset-inline-start: auto;
min-width: 180px;
max-width: min(280px, calc(100vw - 32px));
max-height: min(70vh, 480px);
overflow-y: auto;
background: var(--jil-dropdown-bg);
border: 1px solid var(--jil-dropdown-border);
border-radius: var(--jil-radius-lg);
box-shadow: var(--jil-shadow-elevated);
padding: var(--jil-space-2);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--jil-transition-fast),
transform var(--jil-transition-fast),
visibility var(--jil-transition-fast);
z-index: 200;
}
/* Narrow viewports: pin the dropdown into a safe gutter so it never gets
clipped, regardless of where the trigger sits in the navbar. */
@media (max-width: 640px) {
.jil-lang-selector__dropdown {
right: 12px;
left: auto;
min-width: 200px;
max-width: calc(100vw - 24px);
}
}
.jil-lang-selector.is-open .jil-lang-selector__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.jil-lang-selector__option {
display: flex;
align-items: center;
gap: var(--jil-space-3);
padding: var(--jil-space-2) var(--jil-space-3);
font-size: var(--jil-text-sm);
color: var(--jil-text-secondary);
cursor: pointer;
border-radius: var(--jil-radius-md);
transition: color var(--jil-transition-fast), background-color var(--jil-transition-fast);
}
.jil-lang-selector__option:hover,
.jil-lang-selector__option[aria-selected="true"] {
color: var(--jil-text-primary);
background: var(--jil-gold-dim);
}
.jil-lang-selector__option[aria-selected="true"] {
color: var(--jil-gold);
}
/* ------------------------------------------------------------
16. SECTION HEADINGS
Consistent label + heading + optional subtext pattern
------------------------------------------------------------ */
.jil-section-header {
margin-bottom: var(--jil-space-12);
}
.jil-section-header--center {
text-align: center;
}
.jil-section-label {
display: inline-block;
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-semi);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jil-gold);
margin-bottom: var(--jil-space-3);
}
.jil-section-heading {
font-size: clamp(var(--jil-text-2xl), 3vw, var(--jil-text-3xl));
font-weight: var(--jil-weight-bold);
color: var(--jil-text-primary);
line-height: var(--jil-leading-snug);
letter-spacing: -0.015em;
margin-bottom: var(--jil-space-4);
}
.jil-section-subtext {
font-size: var(--jil-text-md);
color: var(--jil-text-secondary);
max-width: 640px;
line-height: var(--jil-leading-normal);
}
.jil-section-header--center .jil-section-subtext {
margin-inline: auto;
}
/* ------------------------------------------------------------
17. FOOTER
------------------------------------------------------------ */
.jil-footer {
background: var(--jil-bg-base);
border-top: 1px solid var(--jil-border-subtle);
padding-block: var(--jil-space-16) var(--jil-space-8);
}
.jil-footer__grid {
display: grid;
grid-template-columns: 200px repeat(4, 1fr);
gap: var(--jil-space-8);
margin-bottom: var(--jil-space-12);
}
.jil-footer__col-heading {
font-size: var(--jil-text-xs);
font-weight: var(--jil-weight-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jil-text-primary);
margin-bottom: var(--jil-space-4);
}
.jil-footer__links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--jil-space-2);
}
.jil-footer__link {
font-size: var(--jil-text-sm);
color: var(--jil-text-muted);
text-decoration: none;
transition: color var(--jil-transition-fast);
}
.jil-footer__link:hover {
color: var(--jil-gold);
}
.jil-footer__bottom {
border-top: 1px solid var(--jil-border-subtle);
padding-top: var(--jil-space-6);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--jil-space-6);
flex-wrap: wrap;
}
.jil-footer__legal {
font-size: var(--jil-text-xs);
color: var(--jil-text-muted);
line-height: var(--jil-leading-loose);
max-width: 680px;
}
.jil-footer__corp {
font-size: var(--jil-text-xs);
color: var(--jil-text-muted);
white-space: nowrap;
}
@media (max-width: 900px) {
.jil-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.jil-footer__grid {
grid-template-columns: 1fr;
}
.jil-footer__bottom {
flex-direction: column;
}
}
/* ------------------------------------------------------------
18. RTL OVERRIDES
All directional properties above use logical properties
(inset-inline-start, margin-inline-start, padding-inline, etc.)
which flip automatically with dir="rtl".
This section handles any remaining LTR-specific patterns.
------------------------------------------------------------ */
[dir="rtl"] .jil-hero__eyebrow::before {
display: none;
}
[dir="rtl"] .jil-section-label {
text-align: right;
}
[dir="rtl"] .jil-nav__dropdown--wide {
inset-inline-start: auto;
inset-inline-end: 0;
}
/* Arabic / Hebrew: disable letter-spacing on headings
(spacing breaks Arabic ligatures and Hebrew forms) */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3,
html[lang="he"] h4 {
letter-spacing: 0;
}
html[lang="ar"] .jil-hero__heading,
html[lang="he"] .jil-hero__heading {
letter-spacing: 0;
}
/* CJK: disable letter-spacing on all text */
html[lang="ja"] *,
html[lang="zh"] *,
html[lang="zh-CN"] *,
html[lang="zh-Hans"] *,
html[lang="zh-TW"] *,
html[lang="zh-Hant"] * {
letter-spacing: 0 !important;
word-break: break-all;
}
/* ------------------------------------------------------------
19. ACCESSIBILITY & FOCUS STATES
------------------------------------------------------------ */
:focus-visible {
outline: 2px solid var(--jil-gold);
outline-offset: 3px;
border-radius: var(--jil-radius-sm);
}
.jil-btn:focus-visible {
outline-offset: 4px;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ------------------------------------------------------------
20. UTILITY CLASSES
------------------------------------------------------------ */
.jil-text-gold { color: var(--jil-gold); }
.jil-text-muted { color: var(--jil-text-muted); }
.jil-text-primary { color: var(--jil-text-primary); }
.jil-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.jil-divider {
height: 1px;
background: var(--jil-border-subtle);
margin-block: var(--jil-space-8);
}
/* ------------------------------------------------------------
21. MOBILE RESPONSIVE OVERRIDES
Comprehensive mobile fixes for 768px and 480px breakpoints.
Covers sections, typography, grids, cards, tables, and
inline-style grid overrides.
------------------------------------------------------------ */
/* -- Tablet (768px) ----------------------------------------- */
@media (max-width: 768px) {
/* Nav bar - compact mobile height */
.jil-nav__inner {
height: 56px;
padding: 0 1rem;
}
.jil-nav__logo-img {
width: 28px;
height: 28px;
}
/* Section spacing - reduce from desktop values */
.jil-section {
padding-block: var(--jil-space-12);
}
.jil-section--sm {
padding-block: var(--jil-space-8);
}
.jil-section--lg {
padding-block: var(--jil-space-16);
}
/* Section header spacing */
.jil-section-header {
margin-bottom: var(--jil-space-8);
}
/* Typography scaling */
h1 { font-size: var(--jil-text-3xl); }
h2 { font-size: var(--jil-text-2xl); }
h3 { font-size: var(--jil-text-xl); }
h4 { font-size: var(--jil-text-lg); }
.jil-section-subtext {
font-size: var(--jil-text-base);
}
/* Cards - reduce padding */
.jil-card {
padding: var(--jil-space-5);
}
.jil-stat-card {
padding: var(--jil-space-4) var(--jil-space-5);
}
.jil-stat-card__value {
font-size: var(--jil-text-3xl);
}
/* Tables - ensure horizontal scroll on all tables */
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Except tables already wrapped */
.jil-table-wrapper table {
display: table;
overflow-x: visible;
}
/* Force inline-style grids to collapse on mobile.
Targets common patterns like style="grid-template-columns:1fr 1fr"
or style="grid-template-columns:repeat(3,1fr)". */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns:repeat(2"],
[style*="grid-template-columns: repeat(2"],
[style*="grid-template-columns:repeat(3"],
[style*="grid-template-columns: repeat(3"],
[style*="grid-template-columns:repeat(4"],
[style*="grid-template-columns: repeat(4"],
[style*="grid-template-columns:repeat(5"],
[style*="grid-template-columns: repeat(5"],
[style*="grid-template-columns:repeat(6"],
[style*="grid-template-columns: repeat(6"] {
grid-template-columns: 1fr !important;
}
/* Wide dropdown - collapse to single column */
.jil-nav__dropdown--wide {
min-width: 260px;
grid-template-columns: 1fr;
}
}
/* -- Small mobile (480px) ------------------------------------ */
@media (max-width: 480px) {
/* Nav bar - extra compact on small mobile */
.jil-nav__inner {
height: 52px;
padding: 0 0.75rem;
}
.jil-nav__logo-img {
width: 24px;
height: 24px;
}
/* Container - tighter padding */
.jil-container {
padding-inline: var(--jil-space-4);
}
/* Section spacing - tighter */
.jil-section {
padding-block: var(--jil-space-10);
}
.jil-section--sm {
padding-block: var(--jil-space-6);
}
.jil-section--lg {
padding-block: var(--jil-space-12);
}
/* Typography - further scaling */
h1 { font-size: var(--jil-text-2xl); }
h2 { font-size: var(--jil-text-xl); }
h3 { font-size: var(--jil-text-lg); }
.jil-hero__heading {
font-size: clamp(var(--jil-text-2xl), 6vw, var(--jil-text-3xl));
}
.jil-section-subtext {
font-size: var(--jil-text-sm);
}
/* Hero - tighter */
.jil-hero {
padding-block: var(--jil-space-10) var(--jil-space-8);
}
.jil-hero__inner {
padding-inline: var(--jil-space-4);
}
/* Cards - minimal padding */
.jil-card {
padding: var(--jil-space-4);
}
.jil-stat-card {
padding: var(--jil-space-3) var(--jil-space-4);
}
.jil-stat-card__value {
font-size: var(--jil-text-2xl);
}
/* Buttons - full width on small screens */
.jil-btn--lg {
padding: 0.75rem var(--jil-space-6);
font-size: var(--jil-text-sm);
}
/* Footer - single column */
.jil-footer__grid {
grid-template-columns: 1fr;
gap: var(--jil-space-6);
}
}
/* ============================================================
22. RETAIL-INSPIRED EDITORIAL TREATMENT (Phase 2 site-wide)
Applies the same look-and-feel that ships on retail.jilsovereign.com
and was piloted on the v2-app home hero (PR #1301, #1302) to every
page on jilsovereign.com that loads this design system file (all
of them, via Express middleware auto-injection).
Three surgical additions:
A. Small cranberry dot before every section label / eyebrow.
B. Italic Instrument Serif cranberry accent for inside
H1 / H2 / H3.
C. Editorial serif as the default font-family for H1 and H2
(keeps DM Sans fallback so existing inline font-family
overrides still win; only un-overridden headings opt in).
============================================================ */
/* A. Section-label / eyebrow cranberry dot.
Matches multiple label class names used across the site so
docs, standalone pages, v14 pages, and the canonical design
system all get the same accent. The pseudo-element is a pure
decoration: no text content, no translation impact. */
.jil-section-label::before,
.eyebrow::before,
.v2-label::before,
.label-eyebrow::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 10px;
background: var(--jil-crimson);
border-radius: 50%;
vertical-align: middle;
transform: translateY(-1px);
flex-shrink: 0;
}
/* B. Italic em accent inside headings.
The i18n engine preserves child elements on translation, so the
text inside will stay English; we accept that trade-off
site-wide because only a handful of pages currently use em
inside translated headings, and the visual win outweighs the
single-word anglicism for non-English users. */
h1 em,
h2 em,
h3 em,
.jil-hero__heading em,
.jil-section-heading em,
.v2-hero-title em {
font-family: var(--jil-font-editorial);
font-style: italic;
font-weight: 400;
color: var(--jil-crimson);
}
/* C. Default editorial serif for H1/H2.
Placed behind the existing DM Sans fallback so every site-wide
inline font-family override (jil-v14, jil-doc-standard, v2-app
inline