/* Scoped to the Home page only via :root:has(h2#autopil-documentation). A calm, premium landing: one hero + one uniform navigation grid. Brand accent: AutoPIL teal — #0891B2 (light) / #22D3EE (dark). */ :root:has(h2#autopil-documentation) { /* ─── Hide page chrome (tabs, breadcrumb, platform title/description, anchors) ─── */ .dai-breadcrumbs { display: none !important; } .dai-page-header { display: none !important; } .page-title { display: none !important; } .page-description { display: none !important; } /* SEO meta stays in */ [data-component="Heading"] > div { display: none !important; } [data-component="Heading"] > span { display: none !important; } .dai-feedback { display: none !important; } /* "Was this helpful?" block */ .dai-footer { display: none !important; } /* page footer */ .dai-page-nav { display: none !important; } /* prev/next page navigation */ /* ─── Content column (wide, no sidebar) ─── */ .dai-article { padding-top: 24px !important; } .dai-article, .dai-content-column { max-width: 1100px !important; margin: 0 auto !important; padding-left: 32px !important; padding-right: 32px !important; } /* ─── Hero heading + teal eyebrow + accent ─── */ .dai-article h2#autopil-documentation { display: block !important; /* override platform "flex items-start" */ font-size: 42px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.12 !important; color: #0B1220 !important; margin: 0 !important; padding: 0 !important; border-bottom: none !important; position: relative !important; } .dai-article h2#autopil-documentation::before { content: "PLATFORM INTELLIGENCE LAYER" !important; display: block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; color: #0891B2 !important; margin: 0 0 14px !important; } &.dark .dai-article h2#autopil-documentation { color: #F2F6F8 !important; } &.dark .dai-article h2#autopil-documentation::before { color: #22D3EE !important; } /* ─── Hero subtitle ─── */ .dai-article h2#autopil-documentation + p { color: #4B5563 !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.7 !important; max-width: 720px !important; margin: 24px 0 0 !important; } &.dark .dai-article h2#autopil-documentation + p { color: #9BA6B2 !important; } /* ─── Navigation grid ─── */ h2#autopil-documentation + p + [data-component="Columns"] { margin-top: 44px !important; margin-bottom: 8px !important; gap: 20px !important; } /* ─── Cards (single, uniform style) ─── */ [data-component="Card"] { border-radius: 16px !important; min-height: 168px !important; cursor: pointer !important; background: #FFFFFF !important; border: 1px solid #E7EBF0 !important; box-shadow: 0 1px 2px rgba(16,24,40,0.04) !important; /* Only shadow/transform animate (for hover). Colors/borders snap so theme switching is instant, not a laggy fade. */ transition: box-shadow 0.15s ease, transform 0.15s ease !important; display: flex !important; flex-direction: column !important; } &.dark [data-component="Card"] { background: #12181F !important; border-color: #232C36 !important; box-shadow: none !important; } [data-component="Card"]:hover { box-shadow: 0 10px 28px rgba(8,145,178,0.12) !important; border-color: #7DD3E8 !important; transform: translateY(-2px) !important; } &.dark [data-component="Card"]:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important; border-color: #2C7A8C !important; } /* ─── Collapse the empty image slot (the stray "dot") ─── */ [data-component="Card"] > div:first-child:empty { display: none !important; } /* ─── Icon rendered as a subtle teal chip ─── */ [data-component="Card"] svg.lucide { width: 22px !important; height: 22px !important; box-sizing: content-box !important; padding: 9px !important; border-radius: 12px !important; background: rgba(8,145,178,0.10) !important; color: #0891B2 !important; stroke-width: 1.9 !important; } &.dark [data-component="Card"] svg.lucide { background: rgba(34,211,238,0.12) !important; color: #22D3EE !important; } [data-component="Card"]:hover svg.lucide { background: rgba(8,145,178,0.16) !important; } &.dark [data-component="Card"]:hover svg.lucide { background: rgba(34,211,238,0.18) !important; } /* ─── Card body ─── */ [data-component="Card"] > div:last-child { padding: 16px 24px 24px 24px !important; } [data-component="Card"] .dai-card-title { color: #101828 !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.4 !important; margin: 0 0 6px !important; } &.dark [data-component="Card"] .dai-card-title { color: #E7EDF3 !important; } [data-component="Card"]:hover .dai-card-title { color: #0891B2 !important; } &.dark [data-component="Card"]:hover .dai-card-title { color: #67E8F9 !important; } [data-component="Card"] .dai-card-description { color: #5B6675 !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 !important; } &.dark [data-component="Card"] .dai-card-description { color: #97A2AF !important; } /* ─── Tablet ─── */ @media (max-width: 1023px) { .dai-article, .dai-content-column { padding-left: 20px !important; padding-right: 20px !important; } } /* ─── Mobile ─── */ @media (max-width: 640px) { .dai-article { padding-top: 12px !important; } .dai-article, .dai-content-column { padding-left: 16px !important; padding-right: 16px !important; } .dai-article h2#autopil-documentation { font-size: 32px !important; } .dai-article h2#autopil-documentation + p { font-size: 16px !important; } h2#autopil-documentation + p + [data-component="Columns"] { margin-top: 32px !important; } [data-component="Card"] { min-height: 140px !important; } } }