/* ============================================================ 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'); /* ------------------------------------------------------------ 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: "DM Sans", "Helvetica Neue", Arial, sans-serif; --jil-font-heading: "DM Sans", "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: "DM Sans", "Helvetica Neue", Arial, sans-serif; --jil-font-heading: "DM Sans", "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: "DM Sans", "Helvetica Neue", Arial, sans-serif; --jil-font-heading: "DM Sans", "Helvetica Neue", Arial, sans-serif; --jil-font-mono: "DM Mono", "Courier New", monospace; } /* ------------------------------------------------------------ 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 */ /* 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); /* 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: 1400px; margin-inline: auto; padding-inline: var(--jil-space-6); 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 Solutions (two column groups) */ .jil-nav__dropdown--wide { min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--jil-space-4); } .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); } .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; } /* 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: 1400px; margin-inline: auto; padding: var(--jil-space-2) var(--jil-space-6); 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 -- gold fill */ .jil-btn--primary { background-color: var(--jil-gold); color: var(--jil-text-inverse); border-color: var(--jil-gold); } .jil-btn--primary:hover { background-color: var(--jil-gold-light); border-color: var(--jil-gold-light); color: var(--jil-text-inverse); box-shadow: var(--jil-shadow-gold); } /* Ghost -- gold outline */ .jil-btn--ghost { background-color: transparent; color: var(--jil-gold); border-color: var(--jil-gold-border); } .jil-btn--ghost:hover { background-color: var(--jil-gold-dim); border-color: var(--jil-gold); color: var(--jil-gold-light); } /* 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)); inset-inline-end: 0; /* RTL-aware: aligns to trailing edge */ min-width: 160px; 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; } .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); } }