/* GEXYRAL docs center page - isolated scope for /docs/index.php Fix v2: page CSS is now loaded from after global CSS. The rules below intentionally scope layout to body.gx-docs-page .gx-docs to avoid global front-page utilities overriding this page. */ body.gx-docs-page{background:#ffffff;color:#0f172a;} body.gx-docs-page .gx-docs{display:block;margin:0;padding:0;background:#fff;color:#0f172a;overflow:hidden;isolation:isolate;} body.gx-docs-page .gx-docs, body.gx-docs-page .gx-docs *{box-sizing:border-box;} body.gx-docs-page .gx-docs a{text-decoration:none;color:inherit;} body.gx-docs-page .gx-docs section{display:block;margin:0;} body.gx-docs-page .gx-docs h1, body.gx-docs-page .gx-docs h2, body.gx-docs-page .gx-docs h3, body.gx-docs-page .gx-docs p{margin-top:0;} body.gx-docs-page .gx-docs b, body.gx-docs-page .gx-docs strong{font-weight:900;} body.gx-docs-page .gx-docs img{max-width:100%;height:auto;} body.gx-docs-page .gx-footer{margin-top:0;} :root{ --gx-docs-ink:#0f172a; --gx-docs-muted:#64748b; --gx-docs-line:#e2e8f0; --gx-docs-soft:#f8fafc; --gx-docs-blue:#2563eb; --gx-docs-blue-dark:#1d4ed8; --gx-docs-cyan:#06b6d4; --gx-docs-card:#ffffff; --gx-docs-shadow:0 24px 80px rgba(15,23,42,.10); --gx-docs-radius:28px; } .gx-docs{background:#fff;color:var(--gx-docs-ink);overflow:hidden} .gx-docs *{box-sizing:border-box} .gx-docs-container{width:min(1180px,calc(100% - 36px));margin:0 auto} .gx-docs a{text-decoration:none;color:inherit} .gx-docs-hero{position:relative;padding:76px 0 52px;background:radial-gradient(circle at 8% 0%,rgba(37,99,235,.12),transparent 34%),linear-gradient(180deg,#f8fbff 0%,#fff 100%)} .gx-docs-hero__bg{position:absolute;border-radius:999px;filter:blur(2px);opacity:.72;pointer-events:none} .gx-docs-hero__bg--one{width:310px;height:310px;right:-90px;top:46px;background:rgba(37,99,235,.12)} .gx-docs-hero__bg--two{width:220px;height:220px;left:-72px;bottom:-76px;background:rgba(6,182,212,.14)} .gx-docs-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:34px;align-items:stretch} .gx-docs-hero__copy,.gx-docs-hero__panel{border:1px solid rgba(148,163,184,.26);background:rgba(255,255,255,.84);box-shadow:var(--gx-docs-shadow);backdrop-filter:blur(14px)} .gx-docs-hero__copy{border-radius:34px;padding:50px 50px 46px;min-height:520px;display:flex;flex-direction:column;justify-content:center} .gx-docs-eyebrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px} .gx-docs-eyebrow span{display:inline-flex;align-items:center;border:1px solid rgba(37,99,235,.16);background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:800;letter-spacing:.03em} .gx-docs-hero h1{margin:0;color:#0f172a;font-size:clamp(34px,5.1vw,64px);line-height:1.02;letter-spacing:-.055em;max-width:850px} .gx-docs-lead{margin:22px 0 0;color:#475569;font-size:18px;line-height:1.82;max-width:790px} .gx-docs-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .gx-docs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;padding:0 22px;font-size:15px;font-weight:850;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;color:#0f172a} .gx-docs-btn:hover{transform:translateY(-2px)} .gx-docs-btn--primary{background:linear-gradient(135deg,var(--gx-docs-blue),#0f172a);color:#fff;box-shadow:0 18px 34px rgba(37,99,235,.26)} .gx-docs-btn--ghost{border:1px solid #cbd5e1;background:#fff;color:#0f172a} .gx-docs-btn--white{background:#fff;color:#0f172a;box-shadow:0 16px 40px rgba(0,0,0,.18)} .gx-docs-btn--outline{border:1px solid rgba(255,255,255,.36);color:#fff;background:rgba(255,255,255,.06)} .gx-docs-hero__panel{border-radius:34px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px;background:linear-gradient(180deg,#fff,#f8fbff)} .gx-docs-panel-top{padding:6px 4px 20px;border-bottom:1px solid var(--gx-docs-line)} .gx-docs-panel-top span{display:block;color:#2563eb;font-weight:900;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px} .gx-docs-panel-top strong{display:block;font-size:25px;line-height:1.25;letter-spacing:-.03em;color:#0f172a} .gx-docs-question-list{display:grid;gap:14px;margin-top:22px} .gx-docs-question-list div{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;padding:18px;border:1px solid rgba(148,163,184,.22);background:#fff;border-radius:22px;box-shadow:0 12px 34px rgba(15,23,42,.06)} .gx-docs-question-list b{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:15px;background:#eff6ff;color:#1d4ed8;font-size:13px} .gx-docs-question-list span{color:#334155;font-weight:760;line-height:1.55} .gx-docs-section{padding:76px 0;position:relative} .gx-docs-section--soft{background:linear-gradient(180deg,#f8fafc,#fff)} .gx-docs-section--ink{background:radial-gradient(circle at 80% 8%,rgba(37,99,235,.20),transparent 30%),linear-gradient(135deg,#0f172a,#111827);color:#fff} .gx-docs-section-head{max-width:780px;margin-bottom:34px} .gx-docs-section-head--center{text-align:center;margin-left:auto;margin-right:auto} .gx-docs-section-head span,.gx-docs-boundary span:first-child{display:inline-flex;align-items:center;color:#2563eb;font-size:13px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px} .gx-docs-section-head h2,.gx-docs-boundary h2{margin:0;color:#0f172a;font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-.045em} .gx-docs-section-head p,.gx-docs-boundary p{margin:16px 0 0;color:#64748b;font-size:17px;line-height:1.82} .gx-docs-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .gx-docs-role-grid article{position:relative;overflow:hidden;border:1px solid rgba(148,163,184,.24);border-radius:28px;background:#fff;padding:28px;min-height:260px;box-shadow:0 18px 50px rgba(15,23,42,.07)} .gx-docs-role-grid article:before{content:"";position:absolute;right:-60px;top:-60px;width:150px;height:150px;border-radius:999px;background:rgba(37,99,235,.08)} .gx-docs-role-grid em{font-style:normal;display:inline-flex;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:13px;font-weight:900;padding:7px 12px;margin-bottom:20px} .gx-docs-role-grid h3{margin:0;color:#0f172a;font-size:23px;letter-spacing:-.03em;line-height:1.25} .gx-docs-role-grid p{margin:14px 0 0;color:#64748b;line-height:1.78;font-size:15px} .gx-docs-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .gx-docs-card{display:flex;flex-direction:column;min-height:228px;border:1px solid rgba(148,163,184,.25);border-radius:28px;background:linear-gradient(180deg,#fff,#fbfdff);padding:26px;box-shadow:0 16px 46px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .gx-docs-card:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(15,23,42,.12);border-color:rgba(37,99,235,.28)} .gx-docs-card span{align-self:flex-start;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:950;letter-spacing:.08em;padding:7px 11px;margin-bottom:18px} .gx-docs-card h3{margin:0;color:#0f172a;font-size:22px;letter-spacing:-.028em;line-height:1.25} .gx-docs-card p{margin:13px 0 0;color:#64748b;line-height:1.72;font-size:15px} .gx-docs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:44px;align-items:center} .gx-docs-kicker-light{display:inline-flex;color:#93c5fd;font-weight:900;font-size:13px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px} .gx-docs-section--ink h2{margin:0;font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.048em;color:#fff} .gx-docs-section--ink p{margin:18px 0 0;color:#cbd5e1;font-size:17px;line-height:1.85;max-width:660px} .gx-docs-ink-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .gx-docs-flow{display:grid;gap:14px} .gx-docs-flow div{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:start;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.07);box-shadow:0 18px 40px rgba(0,0,0,.16)} .gx-docs-flow b{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:15px;background:rgba(255,255,255,.13);color:#bfdbfe;font-size:13px} .gx-docs-flow strong{color:#fff;font-size:18px;line-height:1.3} .gx-docs-flow span{color:#cbd5e1;line-height:1.65;font-size:14px} .gx-docs-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px} .gx-docs-resource-card{display:block;border:1px solid rgba(148,163,184,.24);border-radius:30px;background:#fff;padding:30px;min-height:230px;box-shadow:0 18px 56px rgba(15,23,42,.07);position:relative;overflow:hidden} .gx-docs-resource-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:999px;right:-72px;bottom:-90px;background:rgba(37,99,235,.08)} .gx-docs-resource-card--blue{background:linear-gradient(135deg,#eff6ff,#fff)} .gx-docs-resource-card span{display:inline-flex;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:13px;font-weight:950;padding:7px 12px;margin-bottom:18px} .gx-docs-resource-card h3{margin:0;color:#0f172a;font-size:26px;letter-spacing:-.035em;line-height:1.18} .gx-docs-resource-card p{margin:14px 0 0;color:#64748b;line-height:1.75;font-size:15px;max-width:560px} .gx-docs-resource-card em{display:inline-flex;margin-top:22px;font-style:normal;color:#1d4ed8;font-weight:900} .gx-docs-topic-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(148,163,184,.24);border-radius:24px;background:#fff;padding:18px;margin:22px 0 24px;box-shadow:0 14px 44px rgba(15,23,42,.06)} .gx-docs-topic-strip strong{font-size:15px;color:#0f172a;white-space:nowrap} .gx-docs-topic-strip div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px} .gx-docs-topic-chip{display:inline-flex;align-items:center;border-radius:999px;background:#f1f5f9;color:#334155;padding:8px 12px;font-size:13px;font-weight:800;transition:background .18s ease,color .18s ease} .gx-docs-topic-chip:hover{background:#dbeafe;color:#1d4ed8} .gx-docs-latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .gx-docs-latest-panel{border:1px solid rgba(148,163,184,.24);border-radius:30px;background:#fff;padding:24px;box-shadow:0 18px 56px rgba(15,23,42,.07)} .gx-docs-latest-panel--dark{background:#0f172a;border-color:rgba(255,255,255,.12);color:#fff} .gx-docs-latest-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(148,163,184,.20)} .gx-docs-latest-panel--dark .gx-docs-latest-head{border-bottom-color:rgba(255,255,255,.12)} .gx-docs-latest-head span{display:block;color:#2563eb;font-size:12px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px} .gx-docs-latest-panel--dark .gx-docs-latest-head span{color:#93c5fd} .gx-docs-latest-head h3{margin:0;font-size:24px;color:#0f172a;letter-spacing:-.03em} .gx-docs-latest-panel--dark .gx-docs-latest-head h3{color:#fff} .gx-docs-latest-head a{color:#2563eb;font-weight:900;white-space:nowrap;font-size:14px} .gx-docs-latest-panel--dark .gx-docs-latest-head a{color:#bfdbfe} .gx-docs-latest-list{display:grid;gap:10px} .gx-docs-latest-item{display:block;border:1px solid rgba(148,163,184,.18);border-radius:20px;background:#f8fafc;padding:16px;transition:transform .18s ease,background .18s ease,border-color .18s ease} .gx-docs-latest-item:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.28);background:#fff} .gx-docs-latest-panel--dark .gx-docs-latest-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)} .gx-docs-latest-panel--dark .gx-docs-latest-item:hover{background:rgba(255,255,255,.10)} .gx-docs-latest-item strong{display:block;color:#0f172a;font-size:16px;line-height:1.45} .gx-docs-latest-panel--dark .gx-docs-latest-item strong{color:#fff} .gx-docs-latest-item span{display:block;margin-top:7px;color:#64748b;line-height:1.62;font-size:14px} .gx-docs-latest-panel--dark .gx-docs-latest-item span{color:#cbd5e1} .gx-docs-latest-item small{display:block;margin-top:10px;color:#94a3b8;font-weight:800;font-size:12px} .gx-docs-boundary{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);gap:28px;align-items:center;border:1px solid rgba(148,163,184,.25);border-radius:32px;background:linear-gradient(135deg,#fff,#f8fbff);padding:34px;box-shadow:0 20px 70px rgba(15,23,42,.08)} .gx-docs-boundary-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px} .gx-docs-boundary-tags span{display:inline-flex;align-items:center;border-radius:999px;background:#eff6ff;color:#1d4ed8;border:1px solid rgba(37,99,235,.14);padding:10px 13px;font-size:13px;font-weight:900} @media (max-width:980px){ .gx-docs-hero{padding:52px 0 38px} .gx-docs-hero__inner,.gx-docs-split,.gx-docs-boundary{grid-template-columns:1fr} .gx-docs-hero__copy,.gx-docs-hero__panel{min-height:0} .gx-docs-card-grid,.gx-docs-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .gx-docs-boundary-tags{justify-content:flex-start} } @media (max-width:720px){ .gx-docs-container{width:min(100% - 28px,1180px)} .gx-docs-hero__copy{padding:34px 24px;border-radius:26px} .gx-docs-hero__panel{padding:22px;border-radius:26px} .gx-docs-hero h1{font-size:35px;letter-spacing:-.042em} .gx-docs-lead,.gx-docs-section-head p,.gx-docs-boundary p,.gx-docs-section--ink p{font-size:15px;line-height:1.78} .gx-docs-section{padding:54px 0} .gx-docs-card-grid,.gx-docs-role-grid,.gx-docs-resource-grid,.gx-docs-latest-grid{grid-template-columns:1fr} .gx-docs-card,.gx-docs-role-grid article,.gx-docs-resource-card,.gx-docs-latest-panel{border-radius:24px} .gx-docs-topic-strip{align-items:flex-start;flex-direction:column} .gx-docs-topic-strip div{justify-content:flex-start} .gx-docs-flow div,.gx-docs-question-list div{grid-template-columns:42px 1fr;padding:15px} .gx-docs-flow b,.gx-docs-question-list b{width:38px;height:38px} .gx-docs-boundary{padding:24px;border-radius:26px} .gx-docs-hero__actions,.gx-docs-ink-actions{flex-direction:column;align-items:stretch} .gx-docs-btn{width:100%} } /* Defensive overrides against generic global page/card/button styles. */ body.gx-docs-page .gx-docs .gx-docs-container{width:min(1180px,calc(100% - 36px));margin-left:auto;margin-right:auto;} body.gx-docs-page .gx-docs .gx-docs-hero__inner{display:grid;} body.gx-docs-page .gx-docs .gx-docs-card-grid, body.gx-docs-page .gx-docs .gx-docs-role-grid, body.gx-docs-page .gx-docs .gx-docs-resource-grid, body.gx-docs-page .gx-docs .gx-docs-latest-grid{display:grid;} body.gx-docs-page .gx-docs .gx-docs-btn{display:inline-flex;text-decoration:none;} body.gx-docs-page .gx-docs .gx-docs-card, body.gx-docs-page .gx-docs .gx-docs-resource-card, body.gx-docs-page .gx-docs .gx-docs-latest-item{color:inherit;text-decoration:none;} @media (max-width:720px){body.gx-docs-page .gx-docs .gx-docs-container{width:min(100% - 28px,1180px);}} /* Fix v3: stronger isolation from global /assets/css/gexyral-front.css. The global file contains generic body.gx-front-page h1/h2/button rules with !important. These page-scoped rules intentionally use a more specific body class chain and !important only where necessary to protect the document center layout. */ body.gx-front-page.gx-docs-page .gx-docs h1{ margin:0 !important; color:#0f172a !important; font-size:clamp(34px,5.1vw,64px) !important; line-height:1.02 !important; letter-spacing:-.055em !important; max-width:850px !important; text-wrap:balance; } body.gx-front-page.gx-docs-page .gx-docs h2{ margin:0 !important; color:#0f172a !important; font-size:clamp(28px,3.6vw,46px) !important; line-height:1.12 !important; letter-spacing:-.045em !important; text-wrap:balance; } body.gx-front-page.gx-docs-page .gx-docs h3{ color:#0f172a !important; line-height:1.25 !important; letter-spacing:-.03em !important; } body.gx-front-page.gx-docs-page .gx-docs p{ color:#64748b; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-hero h1{ margin:0 !important; font-size:clamp(36px,5.6vw,68px) !important; line-height:1.02 !important; letter-spacing:-.058em !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-lead{ margin:22px 0 0 !important; color:#475569 !important; font-size:18px !important; line-height:1.82 !important; max-width:790px !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-section--ink h2, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-section--ink h3, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-panel--dark h3, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-panel--dark strong{ color:#fff !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-section--ink p, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-section--ink span, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-panel--dark span{ color:#cbd5e1 !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-card-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-role-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-resource-grid, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-hero__inner{ grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-split{ grid-template-columns:minmax(0,1fr) minmax(360px,.9fr) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-boundary{ grid-template-columns:minmax(0,1fr) minmax(320px,.65fr) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-height:46px !important; border-radius:999px !important; padding:0 22px !important; font-size:15px !important; font-weight:850 !important; line-height:1 !important; text-decoration:none !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn--primary{ color:#fff !important; background:linear-gradient(135deg,var(--gx-docs-blue),#0f172a) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn--ghost{ color:#0f172a !important; background:#fff !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn--white{ color:#0f172a !important; background:#fff !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn--outline{ color:#fff !important; background:rgba(255,255,255,.06) !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-section-head span, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-boundary span:first-child{ color:#2563eb !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-eyebrow span, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-boundary-tags span{ color:#1d4ed8 !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-kicker-light{ color:#93c5fd !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-card:hover, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-resource-card:hover, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-item:hover{ text-decoration:none !important; } @media (max-width:980px){ body.gx-front-page.gx-docs-page .gx-docs .gx-docs-hero__inner, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-split, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-boundary{ grid-template-columns:1fr !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-card-grid, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-role-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:720px){ body.gx-front-page.gx-docs-page .gx-docs .gx-docs-hero h1{ font-size:34px !important; line-height:1.12 !important; letter-spacing:-.042em !important; } body.gx-front-page.gx-docs-page .gx-docs h2{ font-size:27px !important; line-height:1.18 !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-lead{ font-size:15.5px !important; line-height:1.78 !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-card-grid, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-role-grid, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-resource-grid, body.gx-front-page.gx-docs-page .gx-docs .gx-docs-latest-grid{ grid-template-columns:1fr !important; } body.gx-front-page.gx-docs-page .gx-docs .gx-docs-btn{ width:100% !important; } }