/* ============================================================= Claude Tools , shared stylesheet Aesthetic: night observatory / instrument panel. Editorial serif display + grotesque body + monospace data-ink. ============================================================= */ /* ----- Fonts, self-hosted ----- Served from this origin instead of fetched from Google. Three reasons, in order of weight: this page states directly under the hero that nothing is sent to third parties, and pulling type from another host sits badly beside that claim; an @import inside a stylesheet is the slowest way there is to load a font, costing three serial round trips before a glyph is drawn; and if that host is unreachable the display face silently becomes Georgia and the whole page reflows. All three families are VARIABLE fonts, so one file per family covers every weight. Google's stylesheet declares the same file once per weight, which is why a naive download produces ten files that are really three. Declaring a weight range instead is both correct and a third of the bytes. Latin subsets only, 136KB for the set. See assets/fonts/README.md. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/fraunces-var.woff2') format('woff2'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/hanken-grotesk-var.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/jetbrains-mono-var.woff2') format('woff2'); } /* ----- Design tokens ----- */ :root { /* canvas */ --bg: #0a0c10; --bg-2: #0e1117; --panel: #12151d; --panel-2: #171b25; --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14); /* ink */ --ink: #eef1f6; --ink-dim: #b2bac6; --ink-faint: #6b7482; /* brand + signal palette (mirrors the extension) */ --amber: #e0823d; --amber-lit: #f2a862; --ok: #3fb950; --warn: #d4a72c; --act: #e0823d; --limit: #f85149; --under: #5b9dff; --model: #e5a63b; /* type */ /* Base type scale, driven by the display settings. Unitless on purpose: it is a ratio against --fs-ref, not a length. This has to move the ROOT font size, not the body's. Almost every size in this stylesheet is in rem, and rem resolves against , so setting the body size left 60 of 61 sizes untouched and the control appeared to do almost nothing. Scaling html by --fs / --fs-ref keeps the default rendering byte for byte what it was (19/19 * 16px = 16px) while making every rem in the sheet follow the slider proportionally. */ --fs: 19; --fs-ref: 19; --display: 'Fraunces', Georgia, serif; --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* layout */ --wrap: 1120px; --radius: 14px; --radius-lg: 22px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: calc(var(--fs) / var(--fs-ref) * 16px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.1875rem; /* 19px at the default scale */ line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* atmospheric page backdrop */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 600px at 78% -8%, rgba(224,130,61,0.13), transparent 60%), radial-gradient(1100px 800px at 8% 4%, rgba(91,157,255,0.07), transparent 55%), linear-gradient(180deg, #0b0e13 0%, var(--bg) 40%); } /* film grain */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----- Layout helpers ----- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; } .section-sm { padding: 60px 0; } .stack > * + * { margin-top: 1.1em; } /* ----- Type ----- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: #fff; } h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } p { margin: 0; color: var(--ink-dim); } strong { color: var(--ink); font-weight: 600; } em { color: var(--amber-lit); font-style: italic; } .kicker { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber-lit); font-weight: 700; display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-dim); } .mono { font-family: var(--mono); } .amber { color: var(--amber-lit); } /* ----- Top nav ----- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(10,12,16,0.72); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.12rem; color: #fff; letter-spacing: -0.01em; } .brand img { width: 30px; height: 30px; border-radius: 8px; } .brand .dim { color: var(--ink-faint); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: 0.92rem; color: var(--ink-dim); transition: color 0.2s; } .nav-links a:hover { color: var(--ink); } .nav-cta { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--ink); transition: all 0.2s; } .nav-cta:hover { border-color: var(--amber); color: var(--amber-lit); background: rgba(224,130,61,0.08); } .nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.4rem; } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.01em; padding: 13px 22px; border-radius: 11px; border: 1px solid transparent; transition: all 0.22s var(--ease); } .btn-primary { background: linear-gradient(180deg, var(--amber-lit), var(--amber)); color: #1a0f05; font-weight: 600; box-shadow: 0 8px 30px -8px rgba(224,130,61,0.5); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(224,130,61,0.6); } .btn-ghost { border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink-dim); background: rgba(255,255,255,0.03); } .btn .arrow { transition: transform 0.22s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ----- Cards / panels ----- */ .panel { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); } /* ----- Hero ----- */ .hero { position: relative; padding: 92px 0 72px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero h1 { margin-top: 22px; } .hero .lede { margin-top: 24px; } .hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } .hero-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02) inset; } .hero-art img { width: 100%; height: 100%; object-fit: cover; } .hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,12,16,0.5)); } /* hub hero: two layouts toggled by .hero-layout-showcase on . Default (no class) = side by side. */ .hub-inner { display: grid; grid-template-columns: minmax(0, 500px) 1fr; gap: 52px; align-items: center; } .hub-art img { height: auto; object-fit: contain; } .hub-art::after { display: none; } @media (max-width: 900px) { .hub-inner { grid-template-columns: 1fr; gap: 36px; } } /* showcase: stacked, centered copy, image full-width below */ .hero-layout-showcase .hub-inner { display: block; text-align: center; } .hero-layout-showcase .hub-copy { max-width: 800px; margin: 0 auto; } .hero-layout-showcase .hub-copy .kicker, .hero-layout-showcase .hub-copy .hero-cta { justify-content: center; } .hero-layout-showcase .hub-copy .lede { margin-left: auto; margin-right: auto; } .hero-layout-showcase .hub-art { max-width: 1040px; margin: 54px auto 0; } /* ----- Feature grid ----- */ .grid { display: grid; gap: 20px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .feature { padding: 30px 26px; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.25s, transform 0.25s var(--ease); } .feature:hover { border-color: var(--line-2); transform: translateY(-3px); } .feature .feat-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; } .feature .feat-ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; border: 1px solid var(--line-2); flex: none; } .feature h3 { font-size: 1.18rem; color: #fff; margin: 0; } .feature p { font-size: 0.98rem; } /* ----- Tool card (hub) ----- */ .tool-card { display: grid; grid-template-columns: 108px 1fr auto; gap: 26px; align-items: center; padding: 26px 28px; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: all 0.28s var(--ease); position: relative; overflow: hidden; } .tool-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber), transparent); opacity: 0; transition: opacity 0.28s; } .tool-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); } .tool-card:hover::before { opacity: 1; } .tool-card .thumb { width: 108px; height: 108px; border-radius: 20px; border: 1px solid var(--line-2); } .tool-card h3 { font-size: 1.5rem; margin-bottom: 6px; } .tool-card .meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .tool-card p { font-size: 0.98rem; max-width: 52ch; } .tool-card .go { font-family: var(--mono); font-size: 0.85rem; color: var(--amber-lit); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .tool-card .go .arrow { transition: transform 0.24s var(--ease); } .tool-card:hover .go .arrow { transform: translateX(5px); } .tool-card.soon { opacity: 0.62; } .tool-card.soon .go { color: var(--ink-faint); } .badge-soon { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; } /* ----- Tabs (tool microsite) ----- */ .tabs { position: sticky; top: 66px; z-index: 40; display: flex; gap: 6px; padding: 10px 0; background: rgba(10,12,16,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 9px; color: var(--ink-dim); background: none; border: 1px solid transparent; white-space: nowrap; transition: all 0.2s; } .tab:hover { color: var(--ink); } .tab.active { color: var(--amber-lit); border-color: rgba(224,130,61,0.35); background: rgba(224,130,61,0.08); } .tab-panel { display: none; animation: fade 0.45s var(--ease); } .tab-panel.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ----- Legend / signal tables ----- */ .legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .legend { padding: 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); } .legend h4 { font-family: var(--display); font-size: 1.24rem; color: #fff; margin-bottom: 4px; } .legend .sub { font-size: 0.9rem; color: var(--ink-dim); margin-bottom: 20px; } .legend-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.92rem; } .legend-row:first-of-type { border-top: 0; } .swatch { width: 34px; height: 12px; border-radius: 999px; flex: none; box-shadow: 0 0 14px -2px currentColor; } .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 12px 0 currentColor; } .legend-row .name { font-weight: 600; color: var(--ink); min-width: 92px; } .legend-row .desc { color: var(--ink-dim); font-size: 0.86rem; } .legend-row code { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); margin-left: auto; } /* ----- Data table ----- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 520px; } table.data th, table.data td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); } table.data th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } table.data td { color: var(--ink-dim); } table.data tr:last-child td { border-bottom: 0; } table.data code { font-family: var(--mono); font-size: 0.82rem; color: var(--amber-lit); } table.data td strong { color: var(--ink); } /* ----- Callout / note ----- */ .note { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: rgba(91,157,255,0.06); border: 1px solid rgba(91,157,255,0.22); } .note .ico { color: var(--under); font-size: 1.2rem; flex: none; } .note p { font-size: 0.95rem; color: var(--ink-dim); } .note.amber { background: rgba(224,130,61,0.06); border-color: rgba(224,130,61,0.24); } .note.amber .ico { color: var(--amber-lit); } .hud-model { color: var(--model); } .hud-5h { color: var(--ok); } .hud-7d { color: var(--limit); } .hud-fable { color: var(--warn); } /* annotation pins */ .pin { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #180d03; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(224,130,61,0.22), 0 4px 12px rgba(0,0,0,0.5); z-index: 5; } .annot-list { display: grid; gap: 14px; margin-top: 26px; } .annot { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; } .annot .n { width: 24px; height: 24px; border-radius: 50%; background: rgba(224,130,61,0.14); border: 1px solid rgba(224,130,61,0.5); color: var(--amber-lit); font-family: var(--mono); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .annot p { font-size: 0.95rem; } .annot strong { color: var(--ink); } .emoji-bar { letter-spacing: 1px; } /* ----- Floating HUD facsimile ----- */ .float-hud { width: 340px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #12151d, #0d1017); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.85); } .fh-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .fh-head .m { font-family: var(--mono); color: var(--model); font-size: 0.9rem; } .fh-head .btns { display: flex; gap: 8px; color: var(--ink-faint); font-size: 0.9rem; } .fh-body { padding: 14px 16px; } .meter { margin-bottom: 16px; } .meter .row1 { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 0.76rem; margin-bottom: 6px; } .meter .lab { color: var(--ink-dim); } .meter .pct { font-weight: 700; } .meter .track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; } .meter .fill { height: 100%; border-radius: 999px; box-shadow: 0 0 12px -1px currentColor; } .meter .row2 { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 5px; } .fh-sessions { border-top: 1px solid var(--line); padding: 12px 16px; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); } .fh-sessions .s { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .fh-foot { padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); } /* ----- Steps (how it works) ----- */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); } .step:first-child { border-top: 0; } .step .num { font-family: var(--display); font-size: 2.2rem; color: var(--amber); line-height: 1; } .step h3 { font-size: 1.25rem; color: #fff; margin-bottom: 8px; } .step p { font-size: 0.97rem; } /* ----- About ----- */ .about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; } .links-list { display: grid; gap: 2px; } .link-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-top: 1px solid var(--line); transition: padding 0.2s; } .link-row:hover { padding-left: 12px; } .link-row:first-child { border-top: 0; } .link-row .l { display: flex; align-items: center; gap: 14px; } .link-row .l .ph { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; width: 84px; } .link-row .l .name { color: var(--ink); font-size: 1.02rem; } .link-row .arrow { color: var(--ink-faint); transition: transform 0.2s, color 0.2s; } .link-row:hover .arrow { transform: translateX(4px); color: var(--amber-lit); } /* ----- Footer ----- */ .footer { border-top: 1px solid var(--line); padding: 46px 0 60px; margin-top: 40px; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer .brand { font-size: 1rem; } .footer p { font-size: 0.84rem; color: var(--ink-faint); font-family: var(--mono); } .footer .fl { display: flex; gap: 22px; } .footer .fl a { font-size: 0.86rem; color: var(--ink-dim); transition: color 0.2s; } .footer .fl a:hover { color: var(--amber-lit); } /* ----- Reveal on scroll ----- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } /* ----- Starburst mark (inline SVG accent) ----- */ .burst { display: inline-block; color: var(--amber); filter: drop-shadow(0 0 10px rgba(224,130,61,0.5)); } @keyframes spin-slow { to { transform: rotate(360deg); } } .burst.spin { animation: spin-slow 60s linear infinite; } /* ============================================================= Responsive ============================================================= */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-art { order: -1; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .legend-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; gap: 32px; } .tool-card { grid-template-columns: 72px 1fr; } .tool-card .thumb { width: 72px; height: 72px; } .tool-card .go { grid-column: 1 / -1; } .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 0; } .nav-links.open { display: flex; } .nav-links a, .nav-links .nav-cta { padding: 14px 28px; width: 100%; border-radius: 0; border: 0; } .nav-toggle { display: block; } .section { padding: 64px 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================= Settings cluster (top-right on every page): fullscreen + gear ============================================================= */ /* buttons live in the header now */ .nav-inner { justify-content: flex-start; } .nav .brand { margin-right: auto; } .settings-fab { display: flex; gap: 8px; align-items: center; margin-left: 20px; flex: none; } .set-btn { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--ink); font-size: 1.85rem; line-height: 1; transition: all 0.2s; } .set-btn:hover { color: var(--amber-lit); border-color: var(--amber); background: rgba(224,130,61,0.1); } .settings-pop { position: fixed; top: 74px; right: 20px; z-index: 55; width: 272px; background: rgba(11,13,19,0.92); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--line-2); border-radius: 14px; padding: 18px; box-shadow: 0 34px 74px -22px rgba(0,0,0,0.9); display: none; animation: fade 0.25s var(--ease); } .settings-pop.open { display: block; } .settings-pop h5 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px; font-weight: 500; } .settings-pop .grp { margin-bottom: 20px; } .settings-pop .grp:last-child { margin-bottom: 0; } /* minimal slider: track + fill (painted in JS) + a plain knob, no outlines */ .settings-pop input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); cursor: pointer; } .settings-pop input[type=range]:focus { outline: none; } .settings-pop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: none; box-shadow: none; } .settings-pop input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); border: none; } .settings-pop input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); } .settings-pop .seg { display: flex; gap: 6px; } .settings-pop .seg button { flex: 1; font-family: var(--mono); font-size: 0.74rem; padding: 8px 0; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--ink-dim); transition: all 0.15s; } .settings-pop .seg button.on { background: var(--amber); border-color: var(--amber); color: #1a0f05; font-weight: 700; } .settings-pop .val { font-family: var(--mono); font-size: 0.8rem; color: var(--amber-lit); float: right; } .settings-pop .reset { width: 100%; margin-top: 4px; font-family: var(--mono); font-size: 0.74rem; padding: 9px 0; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border: 1px solid var(--line-2); color: var(--ink); } .settings-pop .reset:hover { border-color: var(--amber); color: var(--amber-lit); background: linear-gradient(180deg, rgba(224,130,61,0.14), rgba(224,130,61,0.05)); } @media (max-width: 700px) { .settings-pop { top: 64px; right: 12px; left: 12px; width: auto; } } @media (max-width: 560px) { } /* ========================================================================== Screenshots. These replaced hand-built HTML facsimiles of the extension's surfaces. The facsimiles drifted: they accumulated thirteen stale model names and two real repository names before anyone noticed, because nothing tied them to the renderer. An image cannot drift from the product, because it is the product. Never reintroduce a drawn surface here. ========================================================================== */ .shot { margin: 0; } .shot img { display: block; width: 100%; height: auto; border-radius: 12px; } /* A window capture already carries its own rounded corner and drop shadow on a transparent background, so it must not get a second frame. */ .shot.bare img { border-radius: 0; } .shot.framed img { border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0,0,0,0.8); } .shot figcaption { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint); text-align: center; margin-top: 14px; line-height: 1.6; } .shot-narrow { max-width: 620px; margin-left: auto; margin-right: auto; } /* The GitHub mark, inline so it inherits currentColor and needs no request. */ .gh-mark { width: 1.05em; height: 1.05em; vertical-align: -0.18em; fill: currentColor; flex: none; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; } .btn .gh-mark { margin-right: 2px; } /* The tab bar docks directly beneath the sticky header. This used to be an inline top:66px on the element, which meant the header height was written down in three places (here, the markup, and the scroll target in site.js) and nothing kept them agreeing. */ .tabs-dock { position: sticky; top: 66px; } /* -------------------------------------------------------------------------- The annotated status bar strip. Pins hang clear of the capture with a leader line down to the segment they name, so the annotation never sits on top of the thing being annotated. Their horizontal positions are percentages measured from the image itself, so they stay aligned at any rendered width. -------------------------------------------------------------------------- */ /* Half the container width. The strip is a 730px wide detail, not a hero: at full width the type inside it outgrows the body copy around it. Pin positions are percentages of this box, so they follow any width. */ .pinned { position: relative; padding: 52px 0; max-width: 440px; margin: 0 auto; } .pinned > img { display: block; width: 100%; height: auto; border-radius: 6px; } .pinned .pin { --pin: 22px; --leader: 18px; position: absolute; transform: translateX(-50%); width: var(--pin); height: var(--pin); border-radius: 50%; background: var(--amber); color: #1a0f05; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.6); } /* The leader is drawn from the pin toward the strip, in the pin's own colour. */ .pinned .pin::after { content: ""; position: absolute; left: 50%; width: 1px; height: var(--leader); background: linear-gradient(var(--amber), rgba(224,130,61,0.25)); } .pinned .pin.above { top: calc(52px - var(--leader) - var(--pin)); } .pinned .pin.above::after { top: 100%; } .pinned .pin.below { bottom: calc(52px - var(--leader) - var(--pin)); } .pinned .pin.below::after { bottom: 100%; background: linear-gradient(rgba(224,130,61,0.25), var(--amber)); } /* ========================================================================== Phone. The page was laid out desktop first behind a single 900px breakpoint, which collapsed the grids but left type, spacing and two wide components sized for a laptop. This block is the narrow pass. ========================================================================== */ @media (max-width: 620px) { :root { --fs: 17; } .wrap { padding: 0 20px; } .section { padding: 44px 0; } .nav-inner { height: 58px; } .nav-links { top: 58px; } .tabs-dock { top: 58px; } /* The hero headline sets its first line with white-space:nowrap so the comma never orphans. At this width that line is what decides whether the page scrolls sideways, so the clamp floor comes down to meet it. */ .hero { padding: 48px 0 40px; } .hero h1 { font-size: clamp(1.55rem, 8.5vw, 2.2rem) !important; } .hero-cta { gap: 10px; margin-top: 26px; } .hero-cta .btn { flex: 1 1 100%; justify-content: center; } .tabs { gap: 4px; } .tab { padding: 12px 14px; font-size: 0.88rem; white-space: nowrap; } /* A legend row is name, description and threshold on one line, which at this width squeezes the description to about a word per line. Let it wrap, with the description dropping to its own full-width line underneath. */ .legend { padding: 20px 18px; } .legend-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; } .legend-row .name { min-width: 0; } .legend-row .desc { flex: 1 1 100%; order: 3; font-size: 0.84rem; } .legend-row code { margin-left: auto; } /* The annotated status bar is a 730px strip. Shrinking it to fit makes the type illegible and collapses the pin spacing, so it scrolls sideways and keeps its proportions instead. */ .pin-scroll { overflow-x: auto; } .pin-scroll .pinned { min-width: 500px; padding: 42px 0; } .pin-scroll .pin { --pin: 19px; --leader: 14px; font-size: 0.64rem; } .pin-scroll .pin.above { top: calc(42px - var(--leader) - var(--pin)); } .pin-scroll .pin.below { bottom: calc(42px - var(--leader) - var(--pin)); } /* Screenshots go edge to edge: a 20px gutter either side of a dark capture on a dark page is a stripe, not a margin. */ figure.shot { margin-left: -20px; margin-right: -20px; } figure.shot img { border-radius: 0; } figure.shot figcaption { padding: 0 20px; } .shot-narrow { max-width: 100%; } .feature { padding: 20px 18px; } .feature .feat-ic { width: 38px; height: 38px; font-size: 1.15rem; } .feature h3 { font-size: 1.06rem; } .note { padding: 16px; } .footer-inner { gap: 14px; } .settings-fab { margin-left: 10px; } } /* A tab panel opens directly under the sticky tab bar, so it needs far less lead-in than a section that follows other content. The 96px section padding is tuned for a section that arrives after a page of other material; here it just leaves the reader staring at empty space under the tabs. */ main.section { padding-top: 36px; } .tab-panel > *:first-child { margin-top: 0 !important; } /* Terms that name a colour in the annotation list carry that colour, and need the weight to survive against it on a dark ground. */ .annot strong { font-weight: 700; } /* The shipped default, called out in the density table. Sits in the row's own third grid column so it lands at the end of the line without displacing the reading beside it. */ .dflt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; margin-left: 16px; align-self: center; justify-self: end; white-space: nowrap; }