/* ═══════════════════════════════════════════════════════════════════════════ ai-course.css - the Klay AI Course design system. PAGE-SCOPED ON PURPOSE. This file REPLACES /styles.css on /ai-course and on every generated course page; it does not extend it. The mentorship site and Klay Coach stay on the dark #0A0A0A brand, and the AI Course - a separately sold product with its own buyer - gets its own light surface. Nothing here leaks into styles.css and nothing in styles.css is needed here. The tokens below are one system and are meant to be read as one: a single ink ramp, a 4px spacing grid every size snaps to, one radius scale, a three-layer shadow stack, 1280/1000 container widths and a 64px topbar. Add a value that sits off the grid and the page stops looking built. Typefaces are self-hosted from /fonts (both SIL OFL, licences committed beside them): Overused Grotesk - RandomMaerks/Overused-Grotesk, 4 weights only Departure Mono - rektdeckard/departure-mono, the pixel display face IBM Plex Mono - Google Fonts, loaded in the page ═══════════════════════════════════════════════════════════════════════════ */ /* ── faces ───────────────────────────────────────────────────────────────── */ @font-face { font-family: "Overused Grotesk"; src: url("/fonts/OverusedGrotesk-Book.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; } @font-face { font-family: "Overused Grotesk"; src: url("/fonts/OverusedGrotesk-Roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Overused Grotesk"; src: url("/fonts/OverusedGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Overused Grotesk"; src: url("/fonts/OverusedGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Departure Mono"; src: url("/fonts/DepartureMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ── tokens ──────────────────────────────────────────────────────────────── */ :root { /* surfaces */ --k-bg: #f7f7f8; --k-surface: #ffffff; --k-hover: #f0f0f2; --k-chip: #f4f4f5; --k-divider: #e8e8ea; --k-border: #dedee2; --k-border-strong: #c9c9cf; /* ink ramp */ --k-ink-100: #f3f3f3; --k-ink-200: #e1e1e1; --k-ink-300: #cfcfcf; --k-ink-400: #adadad; --k-ink-500: #929292; --k-ink-600: #6e6e6e; --k-ink-700: #4a4a4a; --k-ink-800: #272727; --k-ink-900: #1d1d1d; --k-fg1: var(--k-ink-800); --k-fg2: var(--k-ink-600); --k-fg3: var(--k-ink-500); --k-fg-inv: #ffffff; /* accents - module cards cycle these */ --k-green: #2ab673; --k-blue: #2f7cf6; --k-orange: #e8822a; --k-purple: #6e56cf; --k-red: #e4402c; --k-yellow: #e9b949; /* type */ --k-font-sans: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --k-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --k-font-display: "Departure Mono", "IBM Plex Mono", ui-monospace, monospace; --k-text-xs: 12px; --k-text-sm: 13px; --k-text-md: 14px; --k-text-lg: 16px; --k-text-xl: 18px; --k-text-2xl: 20px; --k-text-3xl: 24px; --k-text-4xl: 32px; --k-text-hero: clamp(38px, 6.2vw, 64px); --k-lh-tight: 1; --k-lh-snug: 1.25; --k-lh-normal: 1.5; /* space - 4px grid */ --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 20px; --k-6: 24px; --k-8: 32px; --k-10: 40px; --k-12: 48px; --k-16: 64px; --k-20: 80px; /* radii */ --k-r-xs: 4px; --k-r-sm: 6px; --k-r-md: 8px; --k-r-lg: 12px; --k-r-xl: 16px; --k-r-full: 999px; /* elevation */ --k-shadow-sm: 0 1px 2px #3b3b3b17, 0 0 0 1px #3b3b3b03; --k-shadow-md: 0 1px 2px #3b3b3b17, 0 2px 4px #3b3b3b0d, 0 0 0 1px #3b3b3b03; --k-shadow-lg: 0 2px 4px #3b3b3b0d, 0 4px 8px #3b3b3b17, 0 8px 16px #3b3b3b1a, 0 0 0 1px #3b3b3b03; /* layout */ --k-topbar-h: 64px; --k-promo-h: 34px; --k-content-max: 1280px; --k-reading-max: 1000px; --k-gutter: clamp(20px, 4vw, 40px); --k-topbar-glass: #f7f7f8e6; /* motion */ --k-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --k-dur-fast: 0.15s; --k-dur-base: 0.2s; --k-dur-slow: 0.25s; } /* ── dark mode ───────────────────────────────────────────────────────────── */ .dark { --k-bg: #111315; --k-surface: #1a1d20; --k-hover: #232629; --k-chip: #1e2124; --k-divider: #2a2d31; --k-border: #35383d; --k-border-strong: #4a4e54; --k-ink-100: #1a1d20; --k-ink-200: #2a2d31; --k-ink-300: #3a3d42; --k-ink-400: #5a5d63; --k-ink-500: #7a7d84; --k-ink-600: #9a9da5; --k-ink-700: #b8bbc2; --k-ink-800: #d8dae0; --k-ink-900: #edeff2; --k-fg1: var(--k-ink-900); --k-fg2: var(--k-ink-600); --k-fg3: var(--k-ink-500); --k-fg-inv: #111315; --k-shadow-sm: 0 1px 2px #0000002e, 0 0 0 1px #ffffff05; --k-shadow-md: 0 1px 2px #0000002e, 0 2px 4px #0000001a, 0 0 0 1px #ffffff05; --k-shadow-lg: 0 2px 4px #0000001a, 0 4px 8px #0000002e, 0 8px 16px #00000033, 0 0 0 1px #ffffff05; --k-topbar-glass: #111315e6; } .dark .k-hero::after { background: linear-gradient(180deg, #11131500 0%, #1a1d2060 60%, #1a1d20 100%); } .dark .k-split { background: #1a1d20; } .dark .k-board { background: linear-gradient(160deg, #232629, #1e2124); } .dark .k-promo { background: color-mix(in srgb, var(--k-purple) 18%, #1a1d20); border-bottom-color: color-mix(in srgb, var(--k-purple) 24%, var(--k-divider)); } .dark .k-cta-card { background: var(--k-surface); } /* ── base ────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* .k-header is sticky, so an in-page jump would land its target underneath it. This only has to be roughly the header's height - it is the one place the two bar heights are still added up, and being a little generous costs nothing. */ scroll-padding-top: calc(var(--k-topbar-h) + var(--k-promo-h) + 16px); -webkit-text-size-adjust: 100%; } body { background: var(--k-bg); color: var(--k-fg1); font-family: var(--k-font-sans); font-weight: 400; font-size: var(--k-text-lg); line-height: var(--k-lh-normal); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--k-ink-900); color: var(--k-fg-inv); } :focus-visible { outline: 2px solid var(--k-ink-800); outline-offset: 2px; border-radius: var(--k-r-xs); } /* ── layout primitives ───────────────────────────────────────────────────── */ .k-wrap { width: 100%; max-width: var(--k-content-max); margin: 0 auto; padding-inline: var(--k-gutter); } .k-read { max-width: var(--k-reading-max); } .k-section { padding-block: clamp(56px, 9vw, 112px); } .k-section + .k-section { padding-top: 0; } /* A hairline that spans the viewport but starts at the gutter. */ .k-rule { border: 0; border-top: 1px solid var(--k-divider); } /* The small tracked mono label that sits in the left gutter of a section. */ .k-eyebrow { font-family: var(--k-font-mono); font-size: var(--k-text-xs); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fg3); } .k-h2 { font-family: var(--k-font-sans); font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; line-height: var(--k-lh-snug); letter-spacing: -0.015em; text-wrap: balance; } /* The pixel display face. Used sparingly: one word of the hero, card titles, and the closing band - the same three places the reference uses it. */ .k-display { font-family: var(--k-font-display); font-weight: 400; letter-spacing: 0; } /* ── icons ───────────────────────────────────────────────────────────────── */ .k-icon { width: 1em; height: 1em; flex: none; } .k-icon-sm { width: 14px; height: 14px; } .k-icon-md { width: 16px; height: 16px; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-2); height: 40px; padding: 0 var(--k-4); border-radius: 7px; border: 0; font-family: var(--k-font-sans); font-size: var(--k-text-md); font-weight: 500; white-space: nowrap; letter-spacing: 0.01em; cursor: pointer; transition: transform var(--k-dur-fast) var(--k-ease-out), box-shadow var(--k-dur-fast) var(--k-ease-out), background var(--k-dur-fast) var(--k-ease-out); } .k-btn svg, .k-btn .ph { width: 14px; height: 14px; flex: none; } .k-btn-primary { background: var(--k-ink-900); color: var(--k-fg-inv); box-shadow: var(--k-shadow-md); } .k-btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--k-shadow-lg); } .k-btn-secondary { background: var(--k-surface); color: var(--k-fg1); border: 1px solid var(--k-border); box-shadow: var(--k-shadow-sm); } .k-btn-secondary:hover { background: var(--k-hover); transform: translateY(-1px); } .k-btn-sm { height: 32px; padding: 0 10px; font-size: var(--k-text-sm); } .k-btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--k-r-sm); color: var(--k-fg2); transition: background var(--k-dur-fast) var(--k-ease-out), color var(--k-dur-fast) var(--k-ease-out); cursor: pointer; } .k-btn-icon:hover { background: var(--k-hover); color: var(--k-fg1); } .k-btn[aria-disabled="true"], .k-btn:disabled { opacity: 0.5; pointer-events: none; } /* The bare underlined link that sits beside a primary button. */ .k-link { font-size: var(--k-text-md); color: var(--k-fg2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--k-border-strong); transition: color var(--k-dur-fast) var(--k-ease-out); } .k-link:hover { color: var(--k-fg1); text-decoration-color: currentColor; } /* ── pills ───────────────────────────────────────────────────────────────── */ .k-pill { display: inline-flex; align-items: center; gap: var(--k-1); height: 24px; padding: 0 10px; border-radius: var(--k-r-full); border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-fg1); font-family: var(--k-font-sans); font-size: var(--k-text-xs); font-weight: 500; white-space: nowrap; } .k-pill-dark { background: var(--k-ink-900); border-color: var(--k-ink-900); color: var(--k-fg-inv); } .k-pill-free { background: color-mix(in srgb, var(--k-green) 14%, #fff); border-color: color-mix(in srgb, var(--k-green) 34%, #fff); color: color-mix(in srgb, var(--k-green) 78%, var(--k-ink-900)); font-family: var(--k-font-mono); letter-spacing: 0.08em; text-transform: uppercase; } /* ── promo strip ─────────────────────────────────────────────────────────── */ /* The promo strip and the topbar are ONE sticky header, not two independently fixed bars. They used to be the latter, with the topbar pinned at `top: var(--k-promo-h)` and the page padded by the sum of both - which is correct only while the promo is exactly one line tall. On a narrow phone the promo wraps to two, and a hardcoded 34px offset then slides the nav on top of it. Sticky puts both in normal flow, so the header is however tall it needs to be and the page below simply follows it. */ .k-header { position: sticky; top: 0; z-index: 60; } .k-promo { position: relative; min-height: var(--k-promo-h); padding-block: 6px; display: flex; align-items: center; justify-content: center; gap: var(--k-3); padding: 0 var(--k-10) 0 var(--k-4); background: color-mix(in srgb, var(--k-purple) 8%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--k-purple) 14%, var(--k-divider)); font-size: var(--k-text-xs); color: var(--k-fg1); } .k-promo-tag { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-xs); padding: 2px 6px; } .k-promo strong { font-weight: 600; } .k-promo-close { position: absolute; right: var(--k-4); top: var(--k-2); display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--k-r-sm); color: var(--k-fg3); transition: background var(--k-dur-fast) var(--k-ease-out); } .k-promo-close:hover { background: #0000000d; color: var(--k-fg1); } /* ── topbar ──────────────────────────────────────────────────────────────── */ .k-topbar { position: relative; z-index: 1; height: var(--k-topbar-h); display: flex; align-items: center; gap: var(--k-6); padding-inline: var(--k-gutter); background: var(--k-topbar-glass); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--k-dur-base) var(--k-ease-out), background var(--k-dur-base) var(--k-ease-out); } .k-topbar.is-scrolled { border-bottom-color: var(--k-divider); } /* Wordmark only - no symbol. The .k-brand-mark glyph rule was removed with the glyph itself; the type is the logo everywhere on Klay. */ .k-brand { display: inline-flex; align-items: center; font-size: var(--k-text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--k-ink-900); } .k-nav-links { display: flex; align-items: center; gap: var(--k-5); margin-left: var(--k-4); font-size: var(--k-text-md); color: var(--k-fg2); } .k-nav-links a { transition: color var(--k-dur-fast) var(--k-ease-out); } .k-nav-links a:hover { color: var(--k-fg1); } .k-nav-links a.is-active { color: var(--k-ink-900); font-weight: 500; } .k-nav-actions { display: flex; align-items: center; gap: var(--k-2); margin-left: auto; } /* ── page shell ──────────────────────────────────────────────────────────── */ /* No padding-top: .k-header is sticky, so it occupies real flow space and the page already starts beneath it at whatever height it happens to be. */ /* ── hero ────────────────────────────────────────────────────────────────── */ .k-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 104px) clamp(72px, 11vw, 140px); text-align: center; } /* The reference warms the page from about the fold downwards. One gradient, pinned behind everything, rather than a background on each section. */ .k-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, #f7f7f800 0%, #faf7f1cc 60%, #f8f4ec 100%); pointer-events: none; z-index: 0; } .k-hero > .k-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--k-5); } .k-hero-title { font-size: var(--k-text-hero); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; /* Wide enough for "Ten years of shipping is enough. It isn't." to balance onto two lines without orphaning the correction onto a third. */ max-width: 22ch; } /* The struck clause: the comfort the reader arrived holding, crossed out. Grey as well as struck - a line through full-strength ink reads as a typo, and the drop in contrast is what makes the correction after it land. nowrap is load-bearing. line-through is applied per line-box, so a clause that wrapped would be struck twice in two fragments, which reads as a rendering fault rather than a deliberate mark. The trade is that this clause overflows rather than wrapping, so it has to stay short - the character budget is spelled out in ai-course.jsx's hero comment. */ .k-hero-title .k-strike { text-decoration: line-through; text-decoration-thickness: 0.055em; color: var(--k-ink-500); white-space: nowrap; } /* The one pixel-face word. Optically larger than the sans at the same px, so it is stepped down and nudged onto the shared baseline. The trailing space is eaten by the monospaced advance width, so the gap before the next word is restored explicitly - without it the sentence reads "learn AI.Nobody". */ .k-hero-title .k-display { font-size: 0.86em; letter-spacing: -0.01em; vertical-align: 0.02em; margin-right: 0.12em; } .k-hero-sub { max-width: 62ch; font-size: var(--k-text-xl); line-height: 1.55; color: var(--k-fg2); text-wrap: pretty; } /* The highlighted audience strip. */ .k-hero-for { display: inline-block; padding: 3px 10px; background: color-mix(in srgb, var(--k-green) 30%, #fff); color: var(--k-ink-900); font-size: var(--k-text-md); font-weight: 500; } .k-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--k-4); margin-top: var(--k-1); } .k-hero-note { font-size: var(--k-text-sm); color: var(--k-fg3); } /* ── hero card collage ───────────────────────────────────────────────────── */ /* Pure CSS, no images: four small objects tilted into the hero's margins. They are decorative and hidden from assistive tech, and they collapse below 1100px rather than fighting the headline for space. */ .k-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .k-collage-item { position: absolute; background: var(--k-surface); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow-lg); padding: var(--k-3) var(--k-4); width: 210px; animation: k-float 9s var(--k-ease-out) infinite; } .k-collage-item .k-eyebrow { font-size: 10px; margin-bottom: 6px; } .k-collage-item h4 { font-size: var(--k-text-md); font-weight: 600; line-height: var(--k-lh-snug); letter-spacing: -0.01em; margin-bottom: 6px; } .k-collage-item p { font-size: var(--k-text-xs); line-height: 1.45; color: var(--k-fg2); } .k-collage-lesson { top: 8%; left: 3%; rotate: -7deg; animation-delay: 0s; } .k-collage-note { top: 6%; right: 3%; rotate: 5deg; animation-delay: -3s; } .k-collage-cert { bottom: 12%; left: 6%; rotate: 4deg; animation-delay: -6s; } /* The dark progress chip, the one non-white object in the collage. */ .k-collage-progress { position: absolute; top: 30%; right: 5%; display: flex; align-items: center; gap: var(--k-2); padding: 8px var(--k-3); border-radius: var(--k-r-full); background: var(--k-ink-900); color: var(--k-fg-inv); font-size: var(--k-text-xs); box-shadow: var(--k-shadow-lg); rotate: -3deg; animation: k-float 9s var(--k-ease-out) -4.5s infinite; } .k-collage-bars { display: flex; gap: 2px; } .k-collage-bars i { width: 4px; height: 11px; border-radius: 1px; background: #ffffff40; } .k-collage-bars i:nth-child(-n + 3) { background: #fff; } @keyframes k-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* ── split: what this actually is ────────────────────────────────────────── */ .k-split { background: #f8f4ec; } .k-split .k-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; } .k-split-prose { display: flex; flex-direction: column; gap: var(--k-5); font-size: var(--k-text-lg); line-height: 1.6; color: var(--k-fg2); } .k-split-prose h2 { font-family: var(--k-font-sans); font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: var(--k-lh-snug); letter-spacing: -0.02em; color: var(--k-fg1); } .k-split-prose strong { color: var(--k-fg1); font-weight: 500; } .k-split-links { display: flex; gap: var(--k-5); margin-top: var(--k-1); } /* The numbered object on the right - the reference's pinboard, ours a stack of what a module is actually made of. */ .k-board { position: relative; border-radius: var(--k-r-xl); background: linear-gradient(160deg, #efe7d8, #e5dac6); box-shadow: var(--k-shadow-lg); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--k-3); } .k-board-row { display: flex; align-items: baseline; gap: var(--k-4); background: var(--k-surface); border-radius: var(--k-r-md); padding: var(--k-4) var(--k-5); box-shadow: var(--k-shadow-sm); transition: transform var(--k-dur-base) var(--k-ease-out); } .k-board-row:nth-child(odd) { rotate: -0.5deg; } .k-board-row:nth-child(even) { rotate: 0.4deg; } .k-board-row:hover { transform: translateY(-2px); } .k-board-num { font-family: var(--k-font-mono); font-size: var(--k-text-md); color: var(--k-fg3); flex: none; } .k-board-row h4 { font-size: var(--k-text-lg); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; } .k-board-row p { font-size: var(--k-text-sm); color: var(--k-fg2); line-height: 1.45; } /* "In build" — the badge on a promise this page has not shipped yet. Reads as a status chip, not as a feature highlight, so it is deliberately quieter than .k-promo-tag: same monospace shape, no fill, fg3 ink. It sits INSIDE the h4 rather than beside it so it wraps with the heading on a phone instead of pushing the line into a second row of its own. */ .k-soon { display: inline-block; margin-left: var(--k-2); vertical-align: middle; font-family: var(--k-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fg3); border: 1px solid var(--k-border); border-radius: var(--k-r-xs); padding: 1px 5px; } /* The same qualifier inside the stat row, where the line is already monospace and uppercase — so it only has to drop in weight, not change shape. */ .k-stats em { font-style: normal; color: var(--k-fg3); opacity: 0.85; } .k-board-caption { font-family: var(--k-font-display); font-size: var(--k-text-md); color: var(--k-ink-700); margin-top: var(--k-2); } /* ── module cards ────────────────────────────────────────────────────────── */ .k-modules-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-4); margin-bottom: var(--k-8); flex-wrap: wrap; } .k-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-5); } .k-module { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: var(--k-6); border-radius: var(--k-r-xl); color: var(--k-ink-900); overflow: hidden; box-shadow: var(--k-shadow-md); transition: transform var(--k-dur-base) var(--k-ease-out), box-shadow var(--k-dur-base) var(--k-ease-out); transform: perspective(800px) rotateX(0deg) rotateY(0deg); } .k-module:hover { transform: perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-6px); box-shadow: var(--k-shadow-lg); } /* The faint rules the reference prints across the top of each card. */ .k-module::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; background-image: repeating-linear-gradient( 180deg, #00000010 0 1px, transparent 1px 7px ); pointer-events: none; } /* The stacked-cards graphic. Four offset rounded rects, front one labelled. */ .k-module-stack { position: relative; height: 150px; margin-bottom: var(--k-8); } .k-module-stack i { position: absolute; top: 22px; left: 50%; width: 148px; height: 96px; translate: -50% 0; border-radius: var(--k-r-md); background: #ffffff2e; border: 1px solid #ffffff45; } .k-module-stack i:nth-child(1) { translate: calc(-50% + 21px) -12px; } .k-module-stack i:nth-child(2) { translate: calc(-50% + 14px) -8px; } .k-module-stack i:nth-child(3) { translate: calc(-50% + 7px) -4px; } .k-module-stack span { position: absolute; top: 22px; left: 50%; translate: -50% 0; width: 148px; height: 96px; display: grid; place-items: center; padding: var(--k-2); text-align: center; border-radius: var(--k-r-md); background: #ffffffde; box-shadow: var(--k-shadow-md); font-family: var(--k-font-display); font-size: var(--k-text-sm); line-height: 1.3; color: var(--k-ink-900); } .k-module-eyebrow { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #00000094; margin-bottom: var(--k-3); display: flex; align-items: center; gap: var(--k-2); } .k-module h3 { font-family: var(--k-font-display); font-size: var(--k-text-3xl); font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; margin-bottom: var(--k-3); } .k-module p { font-size: var(--k-text-md); line-height: 1.5; color: #000000ad; } .k-module-open { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--k-6); font-size: var(--k-text-md); font-weight: 500; } .k-module-open svg, .k-module-open .ph { width: 16px; height: 16px; transition: transform var(--k-dur-base) var(--k-ease-out); } .k-module:hover .k-module-open svg, .k-module:hover .k-module-open .ph { transform: translateX(4px); } /* Dark cards flip the ink. */ .k-module.is-dark { color: #fff; } .k-module.is-dark::before { background-image: repeating-linear-gradient( 180deg, #ffffff14 0 1px, transparent 1px 7px ); } .k-module.is-dark .k-module-eyebrow { color: #ffffffa1; } .k-module.is-dark p { color: #ffffffbd; } .k-module.is-dark .k-module-stack i { background: #ffffff1f; border-color: #ffffff2b; } /* ── pricing ─────────────────────────────────────────────────────────────── */ .k-pricing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-4); margin-bottom: var(--k-5); flex-wrap: wrap; } .k-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-lg); overflow: hidden; margin-bottom: var(--k-5); } .k-stats div { padding: var(--k-5) var(--k-4); text-align: center; font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-fg2); } .k-stats div + div { border-left: 1px solid var(--k-divider); } /* ── the one-time plan, as a wide two-column card ─────────────────────────── Price on the left, promise on the right. The right column is the wider of the two because it carries the sentence that has to land; the left only has to be unambiguous. Mirrors .pr-hero on /pricing. */ .k-price-hero { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--k-6); align-items: start; padding: var(--k-6); margin-bottom: var(--k-5); border-radius: var(--k-r-lg); border: 1px solid var(--k-border); background: var(--k-surface); } .k-price-hero-buy { display: flex; flex-direction: column; } .k-price-name { font-family: var(--k-font-mono); font-size: var(--k-text-lg); font-weight: 600; letter-spacing: -0.01em; } /* The list price. Struck and quiet: it is context for the number under it, and any more ink than that competes with the price actually charged. */ .k-price-was { display: flex; align-items: baseline; gap: var(--k-2); margin-top: var(--k-4); font-size: var(--k-text-md); color: var(--k-fg3); } .k-price-sub { margin-top: var(--k-2); font-size: var(--k-text-sm); color: var(--k-fg2); } .k-price-claim { font-family: var(--k-font-mono); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; } .k-price-hero-pitch .k-price-list { margin-top: var(--k-4); } .k-price-note { margin-top: var(--k-4); max-width: 56ch; font-size: var(--k-text-md); color: var(--k-fg3); } /* The recommended flag. Green like /pricing's, and reading as a badge rather than a second button. */ .k-pill-rec { padding: 3px 10px; border-radius: 999px; background: var(--k-green); color: #fff; font-family: var(--k-font-mono); font-size: var(--k-text-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; } /* Three rental tiers now, not the old Free/Lifetime pair. */ .k-price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-5); align-items: stretch; } .k-price-card { display: flex; flex-direction: column; gap: var(--k-4); padding: var(--k-6); border-radius: var(--k-r-lg); border: 1px solid var(--k-border); background: var(--k-surface); } /* The recommended card gets a tinted treatment. Derived from --k-surface rather than typed as a gradient between two light hexes: the literal version (#f2fbf6 → #ffffff) was a light-mode-only rule on a page that has a full .dark palette, so in dark mode it painted a white card and left the white label text on top of it unreadable. Mixing over the surface token tints whichever surface is actually in play. */ .k-price-card.is-highlight { background: color-mix(in srgb, var(--k-green) 8%, var(--k-surface)); border-color: color-mix(in srgb, var(--k-green) 30%, var(--k-border)); } .k-price-top { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); } .k-price-label { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-fg2); } .k-price-amount { display: flex; align-items: baseline; gap: var(--k-2); } .k-price-amount b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .k-price-amount span { font-size: var(--k-text-md); color: var(--k-fg2); } .k-price-card p { font-size: var(--k-text-md); line-height: 1.5; color: var(--k-fg2); } .k-price-list { list-style: none; display: flex; flex-direction: column; gap: var(--k-2); font-size: var(--k-text-md); color: var(--k-fg2); } .k-price-list li { display: flex; gap: var(--k-2); align-items: flex-start; } .k-price-list svg, .k-price-list .ph { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--k-green); } .k-price-foot { margin-top: auto; padding-top: var(--k-4); border-top: 1px solid var(--k-divider); display: flex; flex-direction: column; gap: var(--k-2); } .k-price-status { font-size: var(--k-text-sm); color: var(--k-fg3); min-height: 20px; } /* ── who should not buy this ─────────────────────────────────────────────── */ .k-honest .k-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; } .k-honest-rows { display: flex; flex-direction: column; } .k-honest-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--k-4); padding: var(--k-6) 0; border-top: 1px solid var(--k-divider); font-size: var(--k-text-lg); line-height: 1.55; color: var(--k-fg2); } .k-honest-row:last-child { border-bottom: 1px solid var(--k-divider); } .k-honest-row b { display: block; color: var(--k-fg1); font-weight: 600; font-size: var(--k-text-lg); margin-bottom: var(--k-1); } .k-honest-num { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-fg3); padding-top: 3px; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .k-faq .k-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; } .k-faq-list { display: flex; flex-direction: column; } .k-faq-item { border-top: 1px solid var(--k-divider); } .k-faq-item:last-child { border-bottom: 1px solid var(--k-divider); } .k-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--k-4); padding: var(--k-5) 0; cursor: pointer; list-style: none; font-size: var(--k-text-xl); font-weight: 500; letter-spacing: -0.01em; color: var(--k-fg1); transition: color var(--k-dur-fast) var(--k-ease-out); } .k-faq-item summary::-webkit-details-marker { display: none; } .k-faq-item summary:hover { color: var(--k-ink-900); } .k-faq-item summary svg, .k-faq-item summary .ph { width: 16px; height: 16px; flex: none; color: var(--k-fg3); transition: transform var(--k-dur-base) var(--k-ease-out); } .k-faq-item[open] summary svg, .k-faq-item[open] summary .ph { transform: rotate(180deg); } .k-faq-body { padding: 0 var(--k-10) var(--k-6) 0; max-width: 78ch; font-size: var(--k-text-lg); line-height: 1.6; color: var(--k-fg2); } /* ── closing band ────────────────────────────────────────────────────────── */ .k-cta { padding-bottom: clamp(56px, 9vw, 112px); } .k-cta-card { display: flex; align-items: center; justify-content: space-between; gap: var(--k-8); flex-wrap: wrap; padding: clamp(28px, 4vw, 44px); border-radius: var(--k-r-xl); background: var(--k-surface); box-shadow: var(--k-shadow-md); } .k-cta-card h2 { font-family: var(--k-font-display); font-size: clamp(24px, 3.4vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: var(--k-3) 0 var(--k-2); } .k-cta-card p { font-size: var(--k-text-md); color: var(--k-fg2); max-width: 60ch; } .k-cta-actions { display: flex; gap: var(--k-3); flex-wrap: wrap; } /* ── footer ──────────────────────────────────────────────────────────────── */ .k-footer { border-top: 1px solid var(--k-divider); padding-block: var(--k-8); font-size: var(--k-text-sm); color: var(--k-fg3); } .k-footer .k-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--k-4); flex-wrap: wrap; } .k-footer a:hover { color: var(--k-fg1); } .k-footer-links { display: flex; gap: var(--k-5); } /* ── responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { /* The collage crowds the headline before it crowds the viewport. */ .k-collage { display: none; } } @media (max-width: 1024px) { .k-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-split .k-wrap { grid-template-columns: minmax(0, 1fr); } .k-honest .k-wrap, .k-faq .k-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--k-5); } } @media (max-width: 760px) { :root { --k-topbar-h: 56px; } .k-modules, .k-price-row { grid-template-columns: minmax(0, 1fr); } /* Price stack first: at this width the reader has scrolled here for a number, and the claim reads fine as its confirmation. */ .k-price-hero { grid-template-columns: minmax(0, 1fr); } .k-stats { grid-template-columns: minmax(0, 1fr); } .k-stats div + div { border-left: 0; border-top: 1px solid var(--k-divider); } /* The nav links drop to their own row under the brand, the same reflow styles.css does on the marketing site. */ .k-topbar { height: auto; flex-wrap: wrap; padding-block: var(--k-2); gap: var(--k-2) var(--k-4); } .k-nav-links { order: 3; width: 100%; margin-left: 0; justify-content: space-between; font-size: var(--k-text-sm); } .k-promo { font-size: 11px; padding-right: var(--k-8); } .k-promo-tag { display: none; } .k-hero-title { max-width: 100%; } .k-hero-sub { font-size: var(--k-text-lg); } .k-honest-row { grid-template-columns: minmax(0, 1fr); gap: var(--k-1); } .k-faq-body { padding-right: 0; } .k-cta-card { flex-direction: column; align-items: flex-start; } } /* ── touch targets ───────────────────────────────────────────────────────── This page takes the same ad traffic as everything else and had no target sizing at all: the promo strip's dismiss button measured 22x22, the wordmark 33x29, and every nav and footer link about 21px tall. 44px is the WCAG 2.2 pointer floor and the value the rest of the site uses (--ga-target-min in site/src/styles/tokens.css); it is written as a literal here because this stylesheet predates that token file and does not import it. Scoped to `pointer: coarse`, so the desktop layout is untouched. */ @media (pointer: coarse) { .k-nav-links a, .k-footer a, .k-brand, .k-btn, .k-btn-sm { /* Width as well as height: "Blog" is 25px wide, so a 44px-tall link is still a 25px target on its narrow axis. The extra room is padding, so the labels do not move. */ min-height: 44px; min-width: 44px; padding-inline: 6px; display: inline-flex; align-items: center; justify-content: center; } .k-promo-close, .k-btn-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } /* .k-link is a standalone "See the full curriculum →" line under a section, not a link inside a sentence, so the WCAG inline exception does not cover it. It was 22px tall. */ .k-link { display: inline-flex; align-items: center; min-height: 44px; } } /* The hero lockup bottoms out too high: "L5 to L7." rendered at 45px on a 375px screen, where it is the widest single line on the page. */ @media (max-width: 600px) { .k-hero-title { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.15; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .k-module { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ THE PHYSICAL KEY - a PORT of site/src/styles/keys.css for the --k-* cascade. Third and last copy. ai-course.html links this file and nothing else, and its token vocabulary is --k-*, so keys.css cannot be shared. Same contract as the ports in course/course.css and coach/styles.css: CHANGE ALL OF THEM, and the numbers that must agree are edge 78%, face 96/92, hover 86/80, lip 68% - with the ink tone's lip at 30% in light and 64% in dark, because --k-fg1 swings the full width of the ramp between themes and one percentage cannot serve both. This file already loads Overused Grotesk itself (@font-face at the top) and --k-font-sans already names it, so unlike course.css there is no font to fix here. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --k-key-emph:#000; --k-key-ink-lip:color-mix(in srgb,var(--k-fg1) 30%,#000); --k-key-neutral-edge:color-mix(in srgb,var(--k-fg2) 84%,var(--k-surface)); --k-key-neutral-lip:var(--k-ink-300); --k-key-gloss:color-mix(in srgb,#fff 34%,transparent); } .dark{ --k-key-emph:#fff; --k-key-ink-lip:color-mix(in srgb,var(--k-fg1) 64%,#000); --k-key-neutral-lip:#000; } /* Geometry stays where .k-btn already set it (40px, 7px radius, 32px for sm); only the four physical layers and the press are added. */ .k-btn{--k-lip-h:3px} .k-btn-sm{--k-lip-h:2px} /* INK. Its hover is ELEVATION - a near-black or near-white face has nowhere to move in colour, which is the same finding the app's ink tone records. */ .k-btn-primary{ border:.5px solid var(--k-fg1); background:linear-gradient(var(--k-fg1),color-mix(in srgb,var(--k-fg1) 90%,#000)); color:var(--k-bg); box-shadow:var(--k-shadow-md),inset 0 1px 1px var(--k-key-gloss),inset 0 calc(-1 * var(--k-lip-h)) var(--k-key-ink-lip); } .k-btn-primary:hover{ background:linear-gradient(color-mix(in srgb,var(--k-fg1) 88%,var(--k-key-emph)),color-mix(in srgb,var(--k-fg1) 78%,var(--k-key-emph))); box-shadow:var(--k-shadow-lg),inset 0 1px 1px var(--k-key-gloss),inset 0 calc(-1 * var(--k-lip-h)) var(--k-key-ink-lip); } .dark .k-btn-primary{--k-key-gloss:transparent} /* NEUTRAL. Its edge is the load-bearing one: a --k-surface face on --k-bg has no silhouette of its own, and --k-border measures well under the 3:1 WCAG 1.4.11 asks of a control boundary. */ .k-btn-secondary{ border:.5px solid var(--k-key-neutral-edge); background:linear-gradient(var(--k-surface),color-mix(in srgb,var(--k-surface) 96%,#000)); color:var(--k-fg1); box-shadow:var(--k-shadow-sm),inset 0 calc(-1 * var(--k-lip-h)) var(--k-key-neutral-lip); } .k-btn-secondary:hover{background:var(--k-hover)} /* The icon square is a cap too, at the smallest step and a 2px lip. */ .k-btn-icon{ --k-lip-h:2px; border:.5px solid var(--k-key-neutral-edge); background:linear-gradient(var(--k-surface),color-mix(in srgb,var(--k-surface) 96%,#000)); box-shadow:var(--k-shadow-sm),inset 0 calc(-1 * var(--k-lip-h)) var(--k-key-neutral-lip); } /* The press: the lip collapses and the cap drops, so the top edge stays put and the bottom rises to meet it. No hover lift anywhere - the travel belongs to the click. */ .k-btn:active:not(:disabled),.k-btn-icon:active:not(:disabled){ --k-lip-h:1px;transform:translateY(1px); }