/* * Kiteworks — Home / landing-page sections. * * Restyle + reorder of the public showcase (templates/showcase.html) to the * approved rebrand mockup (handoff: home.html). Covers the three sections the * mockup upgrades over the old plain markup: * 1. .kw-grid-cards--muted — the de-emphasized "Coming next" roadmap grid. * 2. .kw-feature / .kw-orb — "Why our agents are different" feature cards * with self-contained icon orbs (one gold). * 3. .kw-installgrid/-card — "Install in your AI host" glass cards, plus * .kw-codeblock — the navy install snippet. * * Token-driven (--kw-* from tokens.css); themed via html.dark (PUBLIC) / * html.light (ADMIN). Orbs are self-contained — there is NO .icon-orb primitive * (same convention as states.css / dialog.css). Logical properties only, so the * page mirrors automatically under (see test_rtl_layout.py). */ /* ---- Section rhythm ------------------------------------------------------ */ /* Each landing block is a .kw-home-section; the first inherits the container's top padding, the rest get vertical breathing room between them. */ .kw-home-section + .kw-home-section { margin-block-start: 3rem; } /* ---- Coming next — de-emphasized roadmap grid ---------------------------- */ /* Sits on the standard .kw-grid-cards layout but flatter: muted fill, no glow until hover, so "available" clearly leads and "coming next" signals momentum without competing. */ .kw-grid-cards--muted { opacity: 0.92; } .kw-grid-cards--muted .kw-card { background: var(--kw-bg-subtle); box-shadow: none; } html.dark .kw-grid-cards--muted .kw-card { background: var(--kw-glass-fill-2); border-color: rgba(255, 255, 255, 0.07); box-shadow: none; } html.dark .kw-grid-cards--muted .kw-card:hover { box-shadow: var(--kw-glow-glass); } /* ---- Self-contained icon orb (mirrors .estate__orb) ---------------------- */ /* Glass + white glyph on dark; solid brand blue + white glyph on light. The glyph inherits currentColor, so the orb owns "white or gold" per the brand icon rule. */ .kw-orb { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: var(--kw-radius-md); background: var(--kw-glass-fill); border: 1px solid var(--kw-glass-stroke); color: #fff; } .kw-orb::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0)); } .kw-orb > * { position: relative; } html.dark .kw-orb { box-shadow: var(--kw-glow-glass); } html.light .kw-orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; } html.light .kw-orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); } /* Gold accent orb — the single signal-gold moment the brand allows per block. Keeps the glass shell; only the glyph + ring turn gold (white/gold rule). On light, the glyph drops to the WCAG-AA gold ink so it stays legible. */ .kw-orb--gold { color: var(--kw-signal-gold); border-color: rgba(253, 202, 19, 0.42); } html.dark .kw-orb--gold { box-shadow: 0 0 22px -6px rgba(253, 202, 19, 0.45); } html.light .kw-orb--gold { background: rgba(253, 202, 19, 0.14); border-color: rgba(253, 202, 19, 0.42); color: var(--kw-yellow-ink); } /* ---- Why our agents are different — branded feature cards ---------------- */ .kw-features { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .kw-features { grid-template-columns: repeat(3, 1fr); } } .kw-feature { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--kw-radius-xl); background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-shadow-card); } html.dark .kw-feature { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-feature__top { display: flex; align-items: center; gap: 0.75rem; } .kw-feature__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--kw-fg); margin: 0; } .kw-feature__body { font-size: 0.875rem; color: var(--kw-fg-muted); line-height: 1.6; margin: 0; } /* ---- Code block — navy install snippet (Claude Code) --------------------- */ .kw-codeblock { margin: 0; background: var(--kw-navy); color: var(--kw-white); font-family: var(--kw-font-mono); font-size: 11.5px; line-height: 1.55; padding: 0.75rem 0.875rem; border-radius: var(--kw-radius-md); overflow-x: auto; } .kw-codeblock code { font-family: inherit; color: inherit; } /* ---- Install in your AI host — glass cards ------------------------------- */ .kw-installgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .kw-installgrid { grid-template-columns: repeat(3, 1fr); } } .kw-installcard { display: flex; flex-direction: column; padding: 1.375rem; border-radius: var(--kw-radius-xl); background: var(--kw-surface); border: 1px solid var(--kw-border-color); box-shadow: var(--kw-shadow-card); } html.dark .kw-installcard { -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); } .kw-installcard__head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; } .kw-installcard__head .kw-orb { width: 38px; height: 38px; } .kw-installcard__host { font-family: var(--kw-font-headline); font-weight: 600; font-size: 1rem; color: var(--kw-fg); } .kw-installcard__body { font-size: 0.84375rem; color: var(--kw-fg-muted); line-height: 1.55; margin: 0; } .kw-installcard__body code { font-family: var(--kw-font-mono); font-size: 0.86em; background: var(--kw-bg-subtle); padding: 1px 6px; border-radius: 4px; } html.dark .kw-installcard__body code { background: rgba(77, 96, 251, 0.16); color: var(--kw-soft-lavender); } /* Foot pins to the card bottom so the three cards align regardless of body length (codeblock vs button vs pill). */ .kw-installcard__foot { margin-block-start: auto; padding-block-start: 0.875rem; } .kw-installcard__foot .kw-codeblock { font-size: 11px; }