/* ═══════════════════════════════════════════════════════════════ iGaming Standards Explorer — design system + layout Self-contained: includes design tokens, dark+light modes, and print styles. Apply to HTML that uses the .iges-* prefix. Reference: https://canadacasinos.io/agco-standards-for-internet-gaming/ ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────── DESIGN TOKENS (dark mode = default) ───────────────────────────────────────────── */ :root { --iges-font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif; --iges-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --iges-bg-main: #07090f; --iges-bg-card: #0d1117; --iges-bg-elevated: #111827; --iges-bg-glass: rgba(255,255,255,0.04); --iges-border-subtle: rgba(255,255,255,0.07); --iges-border-mid: rgba(255,255,255,0.12); --iges-text-primary: #f0f4f8; --iges-text-secondary:#94a3b8; --iges-text-muted: rgba(255,255,255,0.35); --iges-text-faint: rgba(255,255,255,0.18); --iges-gold: #f5c842; --iges-gold-dim: rgba(245,200,66,0.12); --iges-gold-border: rgba(245,200,66,0.22); --iges-radius-card: 16px; --iges-radius-pill: 100px; --iges-shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); --iges-transition: all 0.2s cubic-bezier(0.4,0,0.2,1); } /* LIGHT MODE: add `class="iges-light"` to or to switch. */ .iges-light, :root.iges-light { --iges-bg-main: #f4f6f9; --iges-bg-card: #ffffff; --iges-bg-elevated: #eef1f6; --iges-bg-glass: rgba(0,0,0,0.03); --iges-border-subtle: rgba(0,0,0,0.08); --iges-border-mid: rgba(0,0,0,0.13); --iges-text-primary: #0f172a; --iges-text-secondary:#475569; --iges-text-muted: #94a3b8; --iges-text-faint: #cbd5e1; --iges-gold: #e86a17; --iges-gold-dim: rgba(232,106,23,0.10); --iges-gold-border: rgba(232,106,23,0.22); --iges-shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06); } /* Typography reset for the explorer scope (optional; only applied under .iges-root). */ .iges-root { font-family: var(--iges-font-sans); color: var(--iges-text-primary); background: var(--iges-bg-main); line-height: 1.5; } .iges-root *, .iges-root *::before, .iges-root *::after { box-sizing: border-box; } .iges-font-display { font-family: var(--iges-font-display); } /* Breadcrumb & section badge — match the source site's utility patterns */ .iges-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--iges-text-muted); margin-bottom: 1.25rem; } .iges-breadcrumb a { color: var(--iges-text-muted); text-decoration: none; transition: var(--iges-transition); } .iges-breadcrumb a:hover { color: var(--iges-gold); } .iges-breadcrumb__sep { color: var(--iges-text-faint); } .iges-section-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--iges-gold); background: var(--iges-gold-dim); border: 1px solid var(--iges-gold-border); border-radius: var(--iges-radius-pill); padding: 0.3rem 0.875rem; margin-bottom: 1.25rem; } /* ───────────────────────────────────────────── HERO ───────────────────────────────────────────── */ .iges-hero { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; } .iges-hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 55% 70% at 10% 50%, rgba(245,200,66,0.10) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 90% 30%, rgba(59,130,246,0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 45% at 75% 85%, rgba(239,68,68,0.06) 0%, transparent 60%), linear-gradient(155deg, #07090f 0%, #0d1117 60%, #0a0e14 100%); } .iges-light .iges-hero__bg, :root.iges-light .iges-hero__bg { background: radial-gradient(ellipse 55% 70% at 10% 50%, rgba(232,106,23,0.08) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 90% 30%, rgba(59,130,246,0.05) 0%, transparent 60%), linear-gradient(155deg, #f6f8fb 0%, #eef2f7 100%); } .iges-hero__grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.35) 70%, transparent 100%); pointer-events: none; } .iges-light .iges-hero__grid, :root.iges-light .iges-hero__grid { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); } .iges-hero__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 4.5rem 1.5rem 3.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; width: 100%; } @media (min-width: 960px) { .iges-hero__inner { grid-template-columns: 1.5fr 1fr; padding: 5rem 2.5rem 4rem; gap: 3rem; } } .iges-hero__pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--iges-gold); box-shadow: 0 0 0 0 rgba(245,200,66,0.55); animation: iges-pulse 2.2s ease-in-out infinite; margin-right: 0.125rem; } @keyframes iges-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,200,66,0.55); } 70% { box-shadow: 0 0 0 8px rgba(245,200,66,0); } 100% { box-shadow: 0 0 0 0 rgba(245,200,66,0); } } .iges-hero__title { font-family: var(--iges-font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; color: var(--iges-text-primary); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 1.125rem; } .iges-hero__title em { color: var(--iges-gold); font-style: italic; } .iges-hero__lead { font-size: 1.0625rem; color: var(--iges-text-secondary); line-height: 1.7; max-width: 620px; margin: 0 0 1.75rem; } /* Stat strip */ .iges-hero__stats { display: inline-flex; align-items: center; background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 12px; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; } .iges-light .iges-hero__stats, :root.iges-light .iges-hero__stats { background: #fff; } .iges-hero__stat { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0 1rem; } .iges-hero__stat:first-child { padding-left: 0; } .iges-hero__stat:last-child { padding-right: 0; } .iges-hero__stat-num { font-family: var(--iges-font-display); font-size: 1.375rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .iges-hero__stat-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iges-text-muted); white-space: nowrap; } .iges-hero__stat-sep { width: 1px; height: 2rem; background: var(--iges-border-subtle); flex-shrink: 0; } @media (max-width: 540px) { .iges-hero__stats { flex-wrap: wrap; width: 100%; justify-content: flex-start; } .iges-hero__stat { padding: 0.25rem 0.625rem; } .iges-hero__stat-sep { display: none; } } /* Theme quick-jump chips */ .iges-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .iges-hero__chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; padding: 0.5rem 0.875rem; background: var(--iges-bg-glass); border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-pill); color: var(--iges-text-secondary); text-decoration: none; transition: var(--iges-transition); } .iges-hero__chip:hover { color: var(--iges-text-primary); border-color: var(--iges-ch-color, var(--iges-gold)); background: color-mix(in srgb, var(--iges-ch-color, var(--iges-gold)) 8%, var(--iges-bg-glass)); transform: translateY(-1px); } .iges-hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .iges-hero__chip-label { letter-spacing: -0.005em; } .iges-hero__chip-count { font-family: var(--iges-font-display); font-size: 0.75rem; font-weight: 800; color: var(--iges-text-muted); background: var(--iges-bg-elevated); padding: 0.125rem 0.45rem; border-radius: var(--iges-radius-pill); margin-left: 0.15rem; } /* Hero meta aside (about-this-explorer card) */ .iges-hero__aside { display: flex; flex-direction: column; gap: 1rem; } .iges-metacard { background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-card); padding: 1.25rem 1.375rem 1.125rem; box-shadow: var(--iges-shadow-card); position: relative; overflow: hidden; } .iges-metacard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--iges-gold), transparent); } .iges-metacard__head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--iges-gold); margin-bottom: 0.875rem; } .iges-metacard__list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .iges-metacard__list li { font-size: 0.8125rem; color: var(--iges-text-secondary); line-height: 1.55; padding-left: 0.875rem; position: relative; } .iges-metacard__list li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 4px; height: 4px; border-radius: 50%; background: var(--iges-text-muted); opacity: 0.55; } .iges-metacard__list strong { color: var(--iges-text-primary); font-weight: 600; } .iges-metacard__list a { color: var(--iges-gold); } .iges-metacard__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--iges-gold); text-decoration: none; padding: 0.5rem 0.875rem; background: var(--iges-gold-dim); border: 1px solid var(--iges-gold-border); border-radius: var(--iges-radius-pill); transition: var(--iges-transition); } .iges-metacard__cta:hover { background: color-mix(in srgb, var(--iges-gold) 14%, var(--iges-bg-elevated)); } /* ───────────────────────────────────────────── EXPLORER SHELL: sidebar + content ───────────────────────────────────────────── */ .iges-shell { background: var(--iges-bg-main); padding: 2rem 0 5rem; } .iges-shell__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .iges-shell__inner { grid-template-columns: 280px 1fr; gap: 2.25rem; padding: 0 2rem; } } /* Mobile filter toggle */ .iges-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--iges-font-sans); font-size: 0.8125rem; font-weight: 700; color: var(--iges-text-primary); background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 10px; padding: 0.625rem 1rem; width: 100%; cursor: pointer; transition: var(--iges-transition); } .iges-mobile-toggle:hover { border-color: var(--iges-gold); color: var(--iges-gold); } .iges-mobile-toggle__count { font-family: var(--iges-font-display); font-size: 0.6875rem; font-weight: 800; color: var(--iges-gold); background: var(--iges-gold-dim); padding: 0.125rem 0.5rem; border-radius: var(--iges-radius-pill); margin-left: auto; } @media (min-width: 1024px) { .iges-mobile-toggle { display: none; } } /* Sidebar */ .iges-sidebar { background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-card); padding: 1.25rem 1.125rem 1rem; display: flex; flex-direction: column; gap: 1.375rem; box-shadow: var(--iges-shadow-card); } @media (max-width: 1023px) { .iges-sidebar { display: none; } .iges-sidebar--open { display: flex; } } @media (min-width: 1024px) { .iges-sidebar { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--iges-border-mid) transparent; } .iges-sidebar::-webkit-scrollbar { width: 6px; } .iges-sidebar::-webkit-scrollbar-thumb { background: var(--iges-border-mid); border-radius: 3px; } .iges-sidebar::-webkit-scrollbar-track { background: transparent; } } .iges-sidebar__label { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--iges-text-muted); margin-bottom: 0.5rem; } /* Search input */ .iges-sidebar__search { position: relative; display: flex; align-items: center; } .iges-sidebar__search-icon { position: absolute; left: 0.75rem; width: 13px; height: 13px; color: var(--iges-text-muted); pointer-events: none; } .iges-sidebar__search-input { width: 100%; font-size: 0.875rem; color: var(--iges-text-primary); background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 10px; padding: 0.625rem 2.25rem 0.625rem 2.25rem; transition: var(--iges-transition); font-family: inherit; } .iges-sidebar__search-input:focus { outline: none; border-color: var(--iges-gold); box-shadow: 0 0 0 3px rgba(245,200,66,0.12); } .iges-sidebar__search-input::placeholder { color: var(--iges-text-faint); } .iges-sidebar__search-clear { position: absolute; right: 2rem; background: transparent; border: 0; color: var(--iges-text-muted); cursor: pointer; padding: 4px; display: flex; align-items: center; } .iges-sidebar__search-clear:hover { color: var(--iges-text-primary); } .iges-sidebar__search-hint { position: absolute; right: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.625rem; font-weight: 700; color: var(--iges-text-muted); background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: 4px; padding: 0.125rem 0.375rem; pointer-events: none; line-height: 1; } @media (max-width: 480px) { .iges-sidebar__search-hint { display: none; } .iges-sidebar__search-clear { right: 0.5rem; } } /* Filter and theme button groups */ .iges-sidebar__filter-btns, .iges-sidebar__theme-btns { display: flex; flex-direction: column; gap: 0.25rem; } .iges-filter-btn, .iges-theme-btn { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--iges-text-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0.5rem 0.625rem; cursor: pointer; text-align: left; transition: var(--iges-transition); font-family: inherit; } .iges-filter-btn:hover, .iges-theme-btn:hover { background: var(--iges-bg-elevated); color: var(--iges-text-primary); } .iges-filter-btn--active { background: color-mix(in srgb, var(--iges-tag-color, var(--iges-gold)) 12%, transparent); border-color: color-mix(in srgb, var(--iges-tag-color, var(--iges-gold)) 35%, transparent); color: var(--iges-text-primary); } .iges-filter-btn--active[data-tag="all"], .iges-filter-btn--active[data-tag="flagged"] { background: var(--iges-gold-dim); border-color: var(--iges-gold-border); color: var(--iges-gold); } .iges-filter-btn--flags { border-top: 1px dashed var(--iges-border-subtle); margin-top: 0.25rem; padding-top: 0.625rem; border-radius: 0 0 8px 8px; } .iges-filter-btn__dot, .iges-theme-btn__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .iges-filter-btn__count, .iges-theme-btn__count { margin-left: auto; font-family: var(--iges-font-display); font-size: 0.6875rem; font-weight: 800; color: var(--iges-text-muted); background: var(--iges-bg-elevated); padding: 0.125rem 0.5rem; border-radius: var(--iges-radius-pill); min-width: 2rem; text-align: center; } .iges-filter-btn--active .iges-filter-btn__count { color: var(--iges-text-primary); background: color-mix(in srgb, var(--iges-tag-color, var(--iges-gold)) 18%, var(--iges-bg-elevated)); } .iges-theme-btn__label { flex: 1; min-width: 0; } .iges-theme-btn--active { background: color-mix(in srgb, var(--iges-th-color, var(--iges-gold)) 10%, transparent); border-color: color-mix(in srgb, var(--iges-th-color, var(--iges-gold)) 35%, transparent); color: var(--iges-text-primary); } /* Coverage gauge */ .iges-sidebar__gauge { display: flex; flex-direction: column; gap: 0.625rem; } .iges-gauge__bar { height: 10px; background: linear-gradient(90deg, rgba(139,92,246,0.15), rgba(139,92,246,0.08)); border-radius: 5px; overflow: hidden; } .iges-gauge__fill { height: 100%; background: linear-gradient(90deg, var(--iges-gold), #f5c842); border-radius: 5px; box-shadow: 0 0 12px rgba(245,200,66,0.35); transition: width 0.8s ease; } .iges-gauge__legend { display: flex; justify-content: space-between; font-family: var(--iges-font-display); font-size: 0.75rem; font-weight: 800; } .iges-gauge__flagged { color: var(--iges-gold); } .iges-gauge__rest { color: var(--iges-text-muted); } .iges-sidebar__gauge-note { font-size: 0.75rem; color: var(--iges-text-muted); line-height: 1.55; margin: 0; } /* Per-theme breakdown bars */ .iges-sidebar__breakdown { display: flex; flex-direction: column; gap: 0.5rem; } .iges-br-row { display: grid; grid-template-columns: 2rem 1fr 3rem; gap: 0.625rem; align-items: center; } .iges-br-row__name { font-family: var(--iges-font-display); font-size: 0.75rem; font-weight: 800; color: var(--iges-th-color, var(--iges-gold)); } .iges-br-row__bar-track { height: 5px; background: var(--iges-border-subtle); border-radius: 3px; overflow: hidden; } .iges-br-row__bar-fill { height: 100%; background: var(--iges-th-color, var(--iges-gold)); border-radius: 3px; transition: width 0.6s ease; } .iges-br-row__pct { font-family: var(--iges-font-display); font-size: 0.6875rem; font-weight: 800; color: var(--iges-text-muted); text-align: right; } /* Cross-link card */ .iges-sidebar__crosslink { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 12px; color: var(--iges-text-secondary); text-decoration: none; transition: var(--iges-transition); } .iges-sidebar__crosslink:hover { border-color: var(--iges-gold); background: var(--iges-gold-dim); color: var(--iges-text-primary); transform: translateY(-1px); } .iges-sidebar__crosslink-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; color: #f59e0b; flex-shrink: 0; } .iges-sidebar__crosslink-body { flex: 1; min-width: 0; } .iges-sidebar__crosslink-title { font-family: var(--iges-font-display); font-size: 0.8125rem; font-weight: 800; color: var(--iges-text-primary); line-height: 1.2; } .iges-sidebar__crosslink-sub { font-size: 0.6875rem; color: var(--iges-text-muted); margin-top: 0.15rem; } /* ───────────────────────────────────────────── CONTENT AREA ───────────────────────────────────────────── */ .iges-content { min-width: 0; } .iges-content__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: 12px; margin-bottom: 1rem; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); } .iges-content__count { font-size: 0.8125rem; color: var(--iges-text-secondary); } .iges-content__count strong { font-family: var(--iges-font-display); font-size: 0.9375rem; font-weight: 900; color: var(--iges-gold); margin-right: 0.1em; } .iges-content__actions { display: flex; align-items: center; gap: 0.5rem; } .iges-content__reset { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--iges-text-muted); background: transparent; border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-pill); padding: 0.3rem 0.625rem; cursor: pointer; font-family: inherit; transition: var(--iges-transition); } .iges-content__reset:hover { color: var(--iges-text-primary); border-color: var(--iges-gold); } .iges-content__view { display: inline-flex; gap: 2px; padding: 2px; background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 8px; } .iges-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: transparent; color: var(--iges-text-muted); border-radius: 6px; cursor: pointer; transition: var(--iges-transition); } .iges-view-btn:hover { color: var(--iges-text-primary); } .iges-view-btn--active { background: var(--iges-bg-card); color: var(--iges-gold); box-shadow: inset 0 0 0 1px var(--iges-gold-border); } /* ───────────────────────────────────────────── THEMES & CARDS ───────────────────────────────────────────── */ .iges-list { display: flex; flex-direction: column; gap: 1.5rem; } .iges-theme { background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-card); overflow: hidden; box-shadow: var(--iges-shadow-card); } /* Theme header */ .iges-theme__head { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.375rem; align-items: center; padding: 1.25rem 1.375rem; background: linear-gradient(90deg, color-mix(in srgb, var(--iges-th-color) 10%, var(--iges-bg-card)), var(--iges-bg-card)); border-left: 3px solid var(--iges-th-color, var(--iges-gold)); border-bottom: 1px solid var(--iges-border-subtle); } .iges-theme__num { font-family: var(--iges-font-display); font-size: 2.5rem; font-weight: 900; color: var(--iges-th-color, var(--iges-gold)); letter-spacing: -0.03em; line-height: 1; padding: 0.375rem 0.875rem; background: color-mix(in srgb, var(--iges-th-color, var(--iges-gold)) 10%, transparent); border-radius: 10px; min-width: 3rem; text-align: center; flex-shrink: 0; } .iges-theme__body { min-width: 0; } .iges-theme__eyebrow { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--iges-th-color, var(--iges-gold)); margin-bottom: 0.3rem; } .iges-theme__title { font-family: var(--iges-font-display); font-size: 1.375rem; font-weight: 900; color: var(--iges-text-primary); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; } .iges-theme__intent { font-size: 0.9375rem; color: var(--iges-text-secondary); line-height: 1.6; margin: 0 0 0.625rem; } .iges-theme__meta { display: flex; flex-wrap: wrap; gap: 0.375rem; font-size: 0.6875rem; } .iges-theme__meta-chip { font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.5rem; border-radius: var(--iges-radius-pill); border: 1px solid var(--iges-border-subtle); color: var(--iges-text-muted); } .iges-theme__meta-chip--flagged { color: var(--iges-gold); background: var(--iges-gold-dim); border-color: var(--iges-gold-border); } .iges-theme__pct { text-align: right; padding: 0.4rem 0.75rem; background: var(--iges-gold-dim); border: 1px solid var(--iges-gold-border); border-radius: 10px; min-width: 4rem; } .iges-theme__pct-num { font-family: var(--iges-font-display); font-size: 1.125rem; font-weight: 900; color: var(--iges-gold); letter-spacing: -0.02em; line-height: 1; } .iges-theme__pct-lbl { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--iges-text-muted); margin-top: 0.2rem; } @media (max-width: 640px) { .iges-theme__head { grid-template-columns: auto 1fr; } .iges-theme__pct { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: baseline; gap: 0.375rem; text-align: left; padding: 0.25rem 0.5rem; min-width: 0; } .iges-theme__pct-lbl { margin-top: 0; } .iges-theme__num { font-size: 1.75rem; padding: 0.25rem 0.625rem; min-width: 2.5rem; } } /* Collapsible regulatory risks */ .iges-theme__risks { border-bottom: 1px solid var(--iges-border-subtle); } .iges-theme__risks-summary { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iges-text-muted); padding: 0.75rem 1.375rem; cursor: pointer; list-style: none; transition: var(--iges-transition); } .iges-theme__risks-summary::-webkit-details-marker { display: none; } .iges-theme__risks-summary:hover { color: var(--iges-th-color, var(--iges-gold)); background: var(--iges-bg-elevated); } .iges-theme__risks-summary svg { color: var(--iges-th-color, var(--iges-gold)); flex-shrink: 0; } .iges-theme__risks-chev { margin-left: auto; transition: transform 0.2s ease; } .iges-theme__risks[open] .iges-theme__risks-chev { transform: rotate(180deg); } .iges-theme__risks-list { list-style: none; padding: 0.25rem 1.375rem 0.875rem; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.4rem; } @media (min-width: 640px) { .iges-theme__risks-list { grid-template-columns: 1fr 1fr; } } .iges-theme__risks-list li { position: relative; padding-left: 1.125rem; font-size: 0.8125rem; color: var(--iges-text-secondary); line-height: 1.55; } .iges-theme__risks-list li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 5px; height: 5px; border-radius: 50%; background: var(--iges-th-color, var(--iges-gold)); opacity: 0.7; } /* Section grouping */ .iges-section { border-top: 1px solid var(--iges-border-subtle); } .iges-section:first-of-type { border-top: 0; } .iges-section__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iges-text-muted); padding: 0.625rem 1.375rem; background: var(--iges-bg-elevated); border-bottom: 1px solid var(--iges-border-subtle); } .iges-section__accent { width: 4px; height: 14px; background: var(--iges-th-color, var(--iges-gold)); border-radius: 2px; flex-shrink: 0; } .iges-section__count { margin-left: auto; font-family: var(--iges-font-display); font-size: 0.625rem; font-weight: 900; color: var(--iges-text-muted); background: var(--iges-bg-card); padding: 0.1rem 0.4rem; border-radius: var(--iges-radius-pill); border: 1px solid var(--iges-border-subtle); } /* Card */ .iges-card { display: grid; grid-template-columns: 5rem 1fr; gap: 0.875rem 1rem; padding: 1.125rem 1.375rem; border-top: 1px solid var(--iges-border-subtle); transition: background 0.15s ease; scroll-margin-top: 5rem; } .iges-card:first-of-type { border-top: 0; } .iges-card:hover { background: var(--iges-bg-elevated); } .iges-card--flagged { background: linear-gradient(90deg, color-mix(in srgb, var(--iges-gold) 3%, transparent), transparent 40%); } .iges-card--flash { animation: iges-flash 1.4s ease-out; } @keyframes iges-flash { 0% { background: rgba(245,200,66,0.16); } 100% { background: transparent; } } .iges-card__ref-col { display: flex; align-items: flex-start; padding-top: 0.1rem; } .iges-card__ref { font-family: var(--iges-font-display); font-size: 0.8125rem; font-weight: 900; color: var(--iges-th-color, var(--iges-gold)); letter-spacing: -0.01em; background: color-mix(in srgb, var(--iges-th-color, var(--iges-gold)) 10%, transparent); padding: 0.2rem 0.5rem; border-radius: 5px; line-height: 1.2; border: 1px solid color-mix(in srgb, var(--iges-th-color, var(--iges-gold)) 25%, transparent); } .iges-card__body { min-width: 0; } .iges-card__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; } .iges-card__title { font-family: var(--iges-font-display); font-size: 1rem; font-weight: 800; color: var(--iges-text-primary); letter-spacing: -0.01em; line-height: 1.3; margin: 0; flex: 1; min-width: 0; } .iges-card__badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; } .iges-badge { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: var(--iges-radius-pill); color: var(--iges-b, var(--iges-gold)); background: color-mix(in srgb, var(--iges-b, var(--iges-gold)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--iges-b, var(--iges-gold)) 30%, transparent); } .iges-card__text { font-size: 0.9375rem; color: var(--iges-text-secondary); line-height: 1.7; margin: 0 0 0.75rem; } .iges-card__reqs { background: var(--iges-bg-elevated); border: 1px solid var(--iges-border-subtle); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; } .iges-card__reqs-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iges-text-muted); padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--iges-border-subtle); } .iges-card__reqs-head svg { color: var(--iges-th-color, var(--iges-gold)); flex-shrink: 0; } .iges-card__reqs-list { list-style: none; padding: 0.5rem 0.875rem; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .iges-card__reqs-list li { position: relative; padding-left: 1rem; font-size: 0.8125rem; color: var(--iges-text-secondary); line-height: 1.55; } .iges-card__reqs-list li::before { content: ''; position: absolute; left: 0.2rem; top: 0.55rem; width: 5px; height: 5px; border-radius: 50%; background: var(--iges-th-color, var(--iges-gold)); opacity: 0.75; } .iges-card__guidance { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: var(--iges-text-muted); line-height: 1.6; font-style: italic; padding: 0.625rem 0.875rem; background: rgba(59,130,246,0.05); border-left: 2px solid #3b82f6; border-radius: 0 8px 8px 0; margin-bottom: 0.75rem; } .iges-card__guidance svg { color: #3b82f6; } .iges-card__foot { display: flex; align-items: center; justify-content: flex-end; } .iges-card__copy { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--iges-text-muted); background: transparent; border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-pill); padding: 0.3rem 0.625rem; cursor: pointer; font-family: inherit; transition: var(--iges-transition); } .iges-card__copy:hover { color: var(--iges-gold); border-color: var(--iges-gold-border); background: var(--iges-gold-dim); } .iges-card__copy--done { color: #10b981 !important; border-color: rgba(16,185,129,0.35) !important; background: rgba(16,185,129,0.08) !important; } .iges-card__copy-done { font-weight: 800; } /* Compact view */ .iges-list--compact .iges-card { padding: 0.75rem 1rem; grid-template-columns: 4rem 1fr; } .iges-list--compact .iges-card__text { font-size: 0.8125rem; line-height: 1.55; margin-bottom: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .iges-list--compact .iges-card__reqs, .iges-list--compact .iges-card__guidance { display: none; } /* Mobile */ @media (max-width: 540px) { .iges-card { grid-template-columns: 1fr; gap: 0.5rem; } .iges-card__title-row { flex-direction: column; align-items: flex-start; } .iges-card__copy-label { display: none; } } /* Empty state */ .iges-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 3rem 1.5rem; background: var(--iges-bg-card); border: 1px dashed var(--iges-border-mid); border-radius: var(--iges-radius-card); text-align: center; } .iges-empty p { font-size: 0.9375rem; color: var(--iges-text-secondary); margin: 0; } .iges-empty__reset { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--iges-gold); background: var(--iges-gold-dim); border: 1px solid var(--iges-gold-border); border-radius: var(--iges-radius-pill); padding: 0.4rem 0.875rem; cursor: pointer; font-family: inherit; transition: var(--iges-transition); } .iges-empty__reset:hover { background: color-mix(in srgb, var(--iges-gold) 14%, var(--iges-bg-elevated)); } /* Footer rail */ .iges-content__foot { margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--iges-bg-card); border: 1px solid var(--iges-border-subtle); border-radius: var(--iges-radius-card); } .iges-content__foot p { font-size: 0.8125rem; color: var(--iges-text-muted); line-height: 1.7; margin: 0; } .iges-content__foot strong { color: var(--iges-text-primary); font-weight: 700; } .iges-content__foot a { color: var(--iges-gold); } /* ───────────────────────────────────────────── LIGHT MODE OVERRIDES (extra fine-tuning) ───────────────────────────────────────────── */ .iges-light .iges-metacard, :root.iges-light .iges-metacard, .iges-light .iges-sidebar, :root.iges-light .iges-sidebar, .iges-light .iges-content__head, :root.iges-light .iges-content__head, .iges-light .iges-theme, :root.iges-light .iges-theme, .iges-light .iges-empty, :root.iges-light .iges-empty { background: #fff; } .iges-light .iges-theme__head, :root.iges-light .iges-theme__head { background: linear-gradient(90deg, color-mix(in srgb, var(--iges-th-color) 6%, #fff), #fff); } .iges-light .iges-card:hover, :root.iges-light .iges-card:hover { background: #f8fafc; } .iges-light .iges-content__foot, :root.iges-light .iges-content__foot, .iges-light .iges-section__label, :root.iges-light .iges-section__label, .iges-light .iges-card__reqs, :root.iges-light .iges-card__reqs { background: #f8fafc; } .iges-light .iges-sidebar__crosslink:hover, :root.iges-light .iges-sidebar__crosslink:hover { background: #fef9e7; } .iges-light .iges-card__guidance, :root.iges-light .iges-card__guidance { background: rgba(59,130,246,0.06); } /* ───────────────────────────────────────────── PRINT STYLES (compliance teams print these) ───────────────────────────────────────────── */ @media print { .iges-hero__aside, .iges-sidebar, .iges-mobile-toggle, .iges-content__view, .iges-content__reset, .iges-card__copy, .iges-empty, .iges-hero__pulse, .iges-breadcrumb, .iges-section-badge { display: none !important; } .iges-shell__inner, .iges-hero__inner { grid-template-columns: 1fr !important; } .iges-shell { padding: 0; background: #fff; } .iges-hero { min-height: 0; padding: 1rem 0; background: #fff !important; } .iges-hero__title { font-size: 1.5rem; color: #000; } .iges-hero__lead, .iges-card__text { color: #111; font-size: 10pt; } .iges-theme { break-inside: avoid-page; background: #fff !important; border: 1px solid #ccc !important; } .iges-card { break-inside: avoid; } .iges-content__head { position: static; } .iges-content__foot { break-inside: avoid; } a { color: #000 !important; text-decoration: underline; } .iges-badge { border: 1px solid #999 !important; } .iges-theme__risks { display: none; } }