/* The AI page, in the dark. * * Every other page here is cream, orange and ink, and this one is the odd * thing on the site: not a step in the job but a thing that works for you. So * it is dark, and the accent is the indigo-to-violet the app already uses for * its own mark — the colour that means "ours" inside the product, on the one * page about the part of the product that is ours. * * Nearly all of it is done by moving the tokens. `site.css` builds the whole * site out of eleven custom properties, so redefining them on one takes * the header, the crumbs, the prose, the cards and the footer with it. What is * below the token block is the short list of places that were written as a * literal colour rather than a variable, plus the few things this page has and * no other does. * * Loaded after `site.css` and only here. The other eight pages never fetch it. */ .ai-page { /* Backgrounds: the page, and anything raised off it. */ --cream: #0e0d13; --cream-deep: #16151f; /* Text, in the three weights the site uses it. */ --ink: #f3f1fb; --ink-soft: #b6b1cb; --ink-faint: #7b7593; --line: #272437; /* The accent. Same three roles as the orange it replaces. */ --orange: #8b7cf6; --orange-deep: #a78bfa; --orange-pale: #221d3a; } /* ---------- the parts written as literal colours ---------- */ .ai-page .site-header { border-bottom-color: var(--line); background: rgba(14, 13, 19, 0.82); } .ai-page .button-primary { background: linear-gradient(135deg, #6366f1, #a78bfa); color: #fff; box-shadow: 0 14px 34px rgba(99, 102, 241, 0.34); } .ai-page .button-primary:hover { background: linear-gradient(135deg, #6d70f5, #b69bff); } .ai-page .button-ghost { border-color: var(--line); color: var(--ink); } .ai-page .button-ghost:hover { border-color: var(--orange-deep); } .ai-page .next-card { background: #16151f; } .ai-page .next-card:hover { border-color: var(--orange-deep); } .ai-page .cta-panel { background: linear-gradient(135deg, #4f46e5, #8b5cf6 55%, #a855f7); color: #f6f3ff; } .ai-page .cta-panel h2 em, .ai-page .cta-panel p { color: #ddd3ff; } .ai-page .cta-panel .button { background: #0e0d13; color: #f3f1fb; } .ai-page .cta-panel .button:hover { background: #000; } /* The chip in the header is the one thing that must not follow the tokens: it is this page's own name in the menu, and it is the same chip on all nine. */ .ai-page .header-nav .nav-ai { border-color: rgba(167, 139, 250, 0.4); background: linear-gradient(180deg, #241f3c, #1b1730); color: #c4b5fd; } .ai-page .header-nav .nav-ai:hover { border-color: rgba(167, 139, 250, 0.75); box-shadow: 0 2px 14px rgba(139, 124, 246, 0.28); } .ai-page .nav-mark { fill: #a78bfa; } /* ---------- what only this page has ---------- */ /* A light behind the title. Two soft circles rather than one, because a single centred glow on a left-aligned heading looks like a mistake in the export. */ .ai-page .page-head { position: relative; overflow: hidden; background: #0e0d13; } .ai-page .page-head::before, .ai-page .page-head::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; } .ai-page .page-head::before { width: 620px; height: 620px; left: -140px; top: -300px; background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 66%); } .ai-page .page-head::after { width: 520px; height: 520px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 68%); } .ai-page .page-head-inner { position: relative; } /* The emphasised half of the title, in the gradient the mark is made of. */ .ai-page .page-head h1 em { background: linear-gradient(100deg, #818cf8, #c084fc 60%, #e879f9); background-clip: text; -webkit-background-clip: text; color: transparent; } /* Section headings get a small mark of their own, so the page reads as a list of parts rather than as a wall. Drawn in CSS: one more request for eleven dots is one request too many. */ .ai-page .prose > h2 { position: relative; padding-left: 26px; } .ai-page .prose > h2::before { position: absolute; left: 0; top: 0.52em; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, #6366f1, #a78bfa); content: ""; } .ai-page .prose li::marker { color: var(--orange); } .ai-page .callout { border-left-color: var(--orange-deep); background: linear-gradient(180deg, #1a1730, #16151f); } /* A mat around the screenshot. The app it photographs is a light window, and white against near-black with nothing in between is a hole in the page. */ .ai-page .prose figure img { padding: 10px; border-color: var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.1)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } /* A file or folder name, which on this page is most of what is in backticks. */ .ai-page .prose code { padding: 2px 6px; border-radius: 6px; background: #221d3a; color: #cfc6f5; font-size: 0.92em; } @media (max-width: 680px) { .ai-page .page-head::before, .ai-page .page-head::after { width: 380px; height: 380px; } .ai-page .prose > h2 { padding-left: 22px; } }