diff --git a/pages/favicon.svg b/pages/favicon.svg index 90ceead..5d47973 100644 --- a/pages/favicon.svg +++ b/pages/favicon.svg @@ -1 +1 @@ - + diff --git a/pages/fonts/OFL.txt b/pages/fonts/OFL.txt new file mode 100644 index 0000000..98835ac --- /dev/null +++ b/pages/fonts/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) Geist-Italic[wght].ttf: Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/pages/fonts/geist-mono.woff2 b/pages/fonts/geist-mono.woff2 new file mode 100644 index 0000000..0750682 Binary files /dev/null and b/pages/fonts/geist-mono.woff2 differ diff --git a/pages/fonts/geist.woff2 b/pages/fonts/geist.woff2 new file mode 100644 index 0000000..991445d Binary files /dev/null and b/pages/fonts/geist.woff2 differ diff --git a/pages/images/apple-touch-icon.png b/pages/images/apple-touch-icon.png new file mode 100644 index 0000000..e9f10cb Binary files /dev/null and b/pages/images/apple-touch-icon.png differ diff --git a/pages/images/logos/coderabbit-wordmark.svg b/pages/images/logos/coderabbit-wordmark.svg new file mode 100644 index 0000000..0a85bdb --- /dev/null +++ b/pages/images/logos/coderabbit-wordmark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/pages/images/logos/docker.svg b/pages/images/logos/docker.svg new file mode 100644 index 0000000..0021a8a --- /dev/null +++ b/pages/images/logos/docker.svg @@ -0,0 +1 @@ +Docker \ No newline at end of file diff --git a/pages/images/logos/githubactions.svg b/pages/images/logos/githubactions.svg new file mode 100644 index 0000000..bc925a3 --- /dev/null +++ b/pages/images/logos/githubactions.svg @@ -0,0 +1 @@ +GitHub Actions \ No newline at end of file diff --git a/pages/images/logos/opentofu.svg b/pages/images/logos/opentofu.svg new file mode 100644 index 0000000..19a8acc --- /dev/null +++ b/pages/images/logos/opentofu.svg @@ -0,0 +1 @@ +OpenTofu \ No newline at end of file diff --git a/pages/images/logos/python.svg b/pages/images/logos/python.svg new file mode 100644 index 0000000..30587d8 --- /dev/null +++ b/pages/images/logos/python.svg @@ -0,0 +1 @@ +Python \ No newline at end of file diff --git a/pages/images/logos/tailscale-wordmark.svg b/pages/images/logos/tailscale-wordmark.svg new file mode 100644 index 0000000..890cde2 --- /dev/null +++ b/pages/images/logos/tailscale-wordmark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/images/logos/terraform.svg b/pages/images/logos/terraform.svg new file mode 100644 index 0000000..7aafae1 --- /dev/null +++ b/pages/images/logos/terraform.svg @@ -0,0 +1 @@ +Terraform \ No newline at end of file diff --git a/pages/images/logos/testcontainers.svg b/pages/images/logos/testcontainers.svg new file mode 100644 index 0000000..7572c69 --- /dev/null +++ b/pages/images/logos/testcontainers.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/pages/images/og.png b/pages/images/og.png index 65c3c9c..b17081f 100644 Binary files a/pages/images/og.png and b/pages/images/og.png differ diff --git a/pages/index.html b/pages/index.html index 74d8fbf..227d56c 100644 --- a/pages/index.html +++ b/pages/index.html @@ -12,20 +12,20 @@ - - - + + + - - + + - - - - + + + + diff --git a/pages/site.css b/pages/site.css index 092f80e..da28d97 100644 --- a/pages/site.css +++ b/pages/site.css @@ -1,343 +1,653 @@ -/* HomeCloud site. Plain CSS, no build step. */ +/* HomeCloud landing page. Dark first, with a light theme. No build step. */ + +@font-face { + font-family: "Geist"; + src: url("/fonts/geist.woff2") format("woff2"); + font-weight: 100 900; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "Geist Mono"; + src: url("/fonts/geist-mono.woff2") format("woff2"); + font-weight: 100 900; + font-style: normal; + font-display: swap; +} :root { - --bg: #fbfbf9; - --surface: #f3f3f0; - --code-bg: #f1f1ed; - --text: #19191c; - --muted: #55555c; - --faint: #6e6e75; - --line: #e3e3de; - --line-strong: #cfcfc8; - --accent: #c2410c; - --accent-hover: #9a3412; - --on-accent: #ffffff; - --shot-border: #d9d9d3; - --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; - --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - --wrap: 1120px; - --gutter: 24px; - color-scheme: light; + color-scheme: dark; + --bg: #09090b; + --bg-2: #0c0c0f; + --panel: #111114; + --panel-2: #17171b; + --line: rgba(255, 255, 255, 0.075); + --line-2: rgba(255, 255, 255, 0.13); + --line-3: rgba(255, 255, 255, 0.2); + --fg: #f2f2f3; + --fg-2: #d4d4d8; + --muted: #a1a1aa; + --faint: #8a8a94; + --accent: #ff7a2e; + --accent-2: #ff9a5c; + --accent-ink: #ffa36b; + --accent-soft: rgba(255, 122, 46, 0.12); + --ok: #4ade80; + --warn: #fbbf24; + --grid: rgba(255, 255, 255, 0.045); + --glow: rgba(255, 112, 40, 0.2); + --shadow-win: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 60px 120px -30px rgba(0, 0, 0, 0.7); + --btn-bg: #f2f2f3; + --btn-fg: #09090b; + --header-bg: rgba(9, 9, 11, 0.72); + --code-bg: #0d0d10; + --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + --radius: 14px; + --wrap: 1200px; } -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --bg: #111113; - --surface: #18181b; - --code-bg: #18181b; - --text: #ededea; - --muted: #a5a5ac; - --faint: #8d8d95; - --line: #26262a; - --line-strong: #36363b; - --accent: #fb923c; - --accent-hover: #fdba74; - --on-accent: #1a1006; - --shot-border: #2c2c31; - color-scheme: dark; +@media (prefers-color-scheme: light) { + :root:not([data-theme="dark"]) { + color-scheme: light; + --bg: #fafaf9; + --bg-2: #f4f4f2; + --panel: #ffffff; + --panel-2: #f6f6f4; + --line: rgba(10, 10, 20, 0.08); + --line-2: rgba(10, 10, 20, 0.13); + --line-3: rgba(10, 10, 20, 0.22); + --fg: #0b0b0d; + --fg-2: #27272a; + --muted: #52525b; + --faint: #63636d; + --accent: #f06418; + --accent-2: #e5550f; + --accent-ink: #b8400a; + --accent-soft: rgba(240, 100, 24, 0.09); + --ok: #15803d; + --warn: #a16207; + --grid: rgba(10, 10, 20, 0.05); + --glow: rgba(255, 120, 40, 0.18); + --shadow-win: 0 0 0 1px rgba(10, 10, 20, 0.08), 0 2px 4px rgba(10, 10, 20, 0.05), 0 24px 48px -16px rgba(10, 10, 20, 0.22), 0 60px 120px -40px rgba(10, 10, 20, 0.3); + --btn-bg: #0b0b0d; + --btn-fg: #fafaf9; + --header-bg: rgba(250, 250, 249, 0.75); } } -:root[data-theme="dark"] { - --bg: #111113; - --surface: #18181b; - --code-bg: #18181b; - --text: #ededea; - --muted: #a5a5ac; - --faint: #8d8d95; - --line: #26262a; - --line-strong: #36363b; - --accent: #fb923c; - --accent-hover: #fdba74; - --on-accent: #1a1006; - --shot-border: #2c2c31; - color-scheme: dark; +:root[data-theme="light"] { + color-scheme: light; + --bg: #fafaf9; + --bg-2: #f4f4f2; + --panel: #ffffff; + --panel-2: #f6f6f4; + --line: rgba(10, 10, 20, 0.08); + --line-2: rgba(10, 10, 20, 0.13); + --line-3: rgba(10, 10, 20, 0.22); + --fg: #0b0b0d; + --fg-2: #27272a; + --muted: #52525b; + --faint: #63636d; + --accent: #f06418; + --accent-2: #e5550f; + --accent-ink: #b8400a; + --accent-soft: rgba(240, 100, 24, 0.09); + --ok: #15803d; + --warn: #a16207; + --grid: rgba(10, 10, 20, 0.05); + --glow: rgba(255, 120, 40, 0.18); + --shadow-win: 0 0 0 1px rgba(10, 10, 20, 0.08), 0 2px 4px rgba(10, 10, 20, 0.05), 0 24px 48px -16px rgba(10, 10, 20, 0.22), 0 60px 120px -40px rgba(10, 10, 20, 0.3); + --btn-bg: #0b0b0d; + --btn-fg: #fafaf9; + --header-bg: rgba(250, 250, 249, 0.75); } +/* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } -html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; } +* { margin: 0; } +html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { - margin: 0; background: var(--bg); - color: var(--text); - font: 400 17px/1.6 var(--sans); + color: var(--fg); + font: 400 16px/1.6 var(--font); + font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + overflow-x: clip; } -img { max-width: 100%; height: auto; display: block; } -a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } -a:hover { color: var(--accent-hover); } -:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } -code, pre, kbd { font-family: var(--mono); font-size: 0.875em; } -p code, li code, td code, dd code { - background: var(--code-bg); - border: 1px solid var(--line); - border-radius: 4px; - padding: 0.05em 0.35em; - font-size: 0.84em; - white-space: nowrap; -} -h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0; } -h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); } -h3 { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.35; } -p { margin: 0; } - -.skip { - position: absolute; left: 12px; top: -48px; - background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 6px; z-index: 10; -} +img, svg { display: block; max-width: 100%; } +img { height: auto; } +a { color: inherit; text-decoration: none; } +p a, dd a, td a, li a:not(.btn), .section-head a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: text-decoration-color .2s; } +p a:hover, dd a:hover, td a:hover, li a:not(.btn):hover, .section-head a:hover { text-decoration-color: var(--accent); } +code { font-family: var(--mono); font-size: .88em; } +:not(pre) > code { padding: .1em .38em; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; } +pre { font-family: var(--mono); } +h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; } +p { text-wrap: pretty; } +strong, b { font-weight: 600; } +em { font-style: normal; color: var(--fg); } +:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } +::selection { background: rgba(255, 122, 46, 0.35); } + +.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } +.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } +.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; } .skip:focus { top: 12px; } -.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } +/* ---------- buttons ---------- */ +.btn { + display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; + height: 44px; padding: 0 18px; border-radius: 10px; + font: 500 15px/1 var(--font); letter-spacing: -0.01em; + border: 1px solid transparent; cursor: pointer; + transition: background .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s; +} +.btn svg { width: 16px; height: 16px; transition: transform .2s; } +.btn:hover svg { transform: translateX(2px); } +.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -8px rgba(0,0,0,.5); } +.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -10px var(--glow); } +.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); } +.btn-ghost:hover { background: var(--panel-2); border-color: var(--line-3); } +.btn-sm { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 8px; } -/* Header */ +/* ---------- header ---------- */ .site-header { - position: sticky; top: 0; z-index: 5; - background: var(--bg); + position: sticky; top: 0; z-index: 50; + background: var(--header-bg); + backdrop-filter: saturate(160%) blur(14px); + -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } -.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 60px; } -.brand { - display: inline-flex; align-items: center; gap: 10px; - color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.0625rem; -} -.brand:hover { color: var(--text); } -.brand svg { width: 24px; height: 24px; flex: none; } -.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 0.9375rem; } -.site-nav a { color: var(--muted); text-decoration: none; } -.site-nav a:hover { color: var(--text); } -.theme-btn { - display: inline-grid; place-items: center; - width: 34px; height: 34px; border-radius: 6px; - background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; -} -.theme-btn:hover { color: var(--text); border-color: var(--line-strong); } -.theme-btn svg { width: 16px; height: 16px; } -.theme-btn .sun { display: none; } -:root[data-theme="dark"] .theme-btn .sun { display: block; } -:root[data-theme="dark"] .theme-btn .moon { display: none; } -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) .theme-btn .sun { display: block; } - :root:not([data-theme="light"]) .theme-btn .moon { display: none; } +.header-row { display: flex; align-items: center; height: 64px; gap: 24px; } +.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.03em; } +.brand .mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 14px -4px var(--glow); } +.site-nav { display: flex; gap: 2px; margin-left: 12px; } +.site-nav a { padding: 7px 12px; border-radius: 8px; font-size: 14.5px; color: var(--muted); transition: color .15s, background .15s; } +.site-nav a:hover { color: var(--fg); background: var(--panel-2); } +.site-nav .nav-demo { display: none; } +.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } +.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; } +.icon-btn:hover { color: var(--fg); background: var(--panel-2); } +.icon-btn svg { width: 16px; height: 16px; } +.gh svg { width: 16px; height: 16px; } +#theme .sun { display: none; } +:root[data-theme="light"] #theme .sun { display: block; } +:root[data-theme="light"] #theme .moon { display: none; } +@media (prefers-color-scheme: light) { + :root:not([data-theme="dark"]) #theme .sun { display: block; } + :root:not([data-theme="dark"]) #theme .moon { display: none; } } +.menu-btn { display: none; } +.menu-btn path { transition: transform .25s, opacity .2s; transform-origin: 8px 8px; } +.menu-btn[aria-expanded="true"] .l1 { transform: translateY(2.5px) rotate(45deg); } +.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-2.5px) rotate(-45deg); } -/* Hero */ -.hero { padding: 88px 0 56px; } -.release { - display: inline-block; margin-bottom: 28px; - font-size: 0.875rem; color: var(--muted); text-decoration: none; +/* ---------- hero ---------- */ +.hero { position: relative; padding: 60px 0 0; isolation: isolate; } +.hero-bg { position: absolute; inset: -64px 0 auto; height: 1100px; z-index: -1; pointer-events: none; overflow: hidden; } +.hero-bg::before { + content: ""; position: absolute; inset: 0; + background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); + background-size: 64px 64px; background-position: center top; + -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); + mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); } -.release strong { color: var(--text); font-weight: 500; } -.release:hover { color: var(--text); } -.release span { color: var(--accent); } -.hero h1 { - font-size: clamp(2.25rem, 5.4vw, 3.75rem); - letter-spacing: -0.028em; - line-height: 1.06; - max-width: 17ch; +.hero-bg::after { + content: ""; position: absolute; inset: 0; + background: + radial-gradient(ellipse 50% 38% at 50% 0%, var(--glow), transparent 70%), + radial-gradient(ellipse 30% 25% at 78% 58%, rgba(255, 122, 46, 0.07), transparent 70%), + radial-gradient(ellipse 30% 25% at 22% 64%, rgba(120, 140, 255, 0.05), transparent 70%); } -.lead { - margin-top: 24px; max-width: 640px; - font-size: 1.1875rem; line-height: 1.6; color: var(--muted); +.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; } +.pill { + display: inline-flex; align-items: center; gap: 10px; max-width: 100%; + padding: 5px 12px 5px 5px; border-radius: 999px; + background: color-mix(in srgb, var(--panel) 70%, transparent); + border: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); + transition: border-color .2s, color .2s; } -.lead strong { color: var(--text); font-weight: 400; } - -.install { margin-top: 40px; max-width: 720px; } -.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 0; } -.tab { - appearance: none; background: none; border: 0; cursor: pointer; - font: 500 0.875rem/1 var(--sans); color: var(--muted); - padding: 10px 12px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; +.pill:hover { border-color: var(--line-3); color: var(--fg); } +.pill-tag { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-family: var(--mono); font-size: 12px; border: 1px solid rgba(255,122,46,.25); } +.pill-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.pill svg { width: 14px; height: 14px; flex: none; transition: transform .2s; } +.pill:hover svg { transform: translateX(2px); } +.hero h1 { + margin-top: 24px; + font-size: clamp(42px, 6.4vw, 74px); + letter-spacing: -0.05em; line-height: 1; + background: linear-gradient(180deg, var(--fg) 55%, color-mix(in srgb, var(--fg) 62%, var(--bg))); + -webkit-background-clip: text; background-clip: text; color: transparent; + padding-bottom: .06em; } -.tab:hover { color: var(--text); } -.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); } -.panel[hidden] { display: none; } +.lead { margin-top: 22px; max-width: 700px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--muted); } +.lead em { color: var(--fg-2); font-weight: 500; } + +/* install */ +.install { margin-top: 28px; width: 100%; max-width: 680px; text-align: center; } +.install .cmd { text-align: left; } +.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 10px; } +.seg-tab { font: 500 13.5px/1 var(--font); color: var(--muted); background: transparent; border: 0; padding: 8px 12px; border-radius: 7px; cursor: pointer; transition: color .15s, background .2s, box-shadow .2s; } +.seg-tab:hover { color: var(--fg); } +.seg-tab[aria-selected="true"] { color: var(--fg); background: var(--panel); box-shadow: 0 0 0 1px var(--line-2), 0 1px 3px rgba(0,0,0,.25); } .cmd { - display: flex; align-items: stretch; - margin-top: 14px; - border: 1px solid var(--line-strong); border-radius: 8px; - background: var(--code-bg); - overflow: hidden; + position: relative; display: flex; align-items: center; gap: 12px; + padding: 14px 14px 14px 18px; border-radius: 12px; + background: var(--code-bg); border: 1px solid var(--line-2); + box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -20px rgba(0,0,0,.6); + color: #ececf0; } -.cmd pre { - flex: 1; min-width: 0; margin: 0; - padding: 14px 16px; overflow-x: auto; - font-size: 0.875rem; line-height: 1.55; +:root[data-theme="light"] .cmd { border-color: #1d1d22; } +@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cmd { border-color: #1d1d22; } } +.cmd pre { flex: 1; min-width: 0; overflow-x: auto; font-size: 14px; line-height: 1.6; scrollbar-width: none; } +.cmd pre::-webkit-scrollbar { display: none; } +.cmd .prompt { color: var(--accent-2); margin-right: 10px; user-select: none; } +.copy { + flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; + border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #b4b4bc; cursor: pointer; + transition: color .15s, background .15s, border-color .15s; } -.cmd .p { color: var(--faint); user-select: none; } -.btn { - display: inline-flex; align-items: center; justify-content: center; gap: 8px; - font: 500 0.9375rem/1 var(--sans); - padding: 12px 18px; border-radius: 7px; text-decoration: none; cursor: pointer; - border: 1px solid transparent; white-space: nowrap; -} -.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } -.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } -.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); } -.btn-secondary:hover { color: var(--text); border-color: var(--text); } -.cmd .btn { border-radius: 0; flex: none; padding: 0 20px; min-width: 84px; } -.install-note { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); } -.hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } -.hero-actions .aside { font-size: 0.9375rem; color: var(--muted); } - -.shot { - margin: 0; - border: 1px solid var(--shot-border); border-radius: 10px; overflow: hidden; - background: #0d1117; -} -.hero-shot { margin-top: 64px; } -figure { margin: 0; } -figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 12px; } - -/* Facts */ -.facts { - display: grid; grid-template-columns: repeat(4, 1fr); - margin: 72px 0 0; padding: 0; border-top: 1px solid var(--line); +.copy:hover { color: #fff; background: rgba(255,255,255,.08); } +.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; transition: opacity .2s, transform .2s; } +.copy .i-ok { opacity: 0; transform: scale(.6); color: var(--ok); stroke: #4ade80; stroke-width: 2; } +.copy.done { border-color: rgba(74, 222, 128, .4); } +.copy.done .i-copy { opacity: 0; transform: scale(.6); } +.copy.done .i-ok { opacity: 1; transform: none; } +.install-note { margin-top: 12px; font-size: 13.5px; color: var(--faint); } +.install-note code { padding: 0; border: 0; background: none; color: var(--fg-2); } +.panel[hidden] { display: none; } +.js .panel:not([hidden]) { animation: fade-in .3s ease both; } +@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } + +.hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } + +/* hero visual */ +.stage-wrap { margin-top: 52px; } +.stage { position: relative; padding: 0 0 0; max-width: 1120px; margin: 0 auto; perspective: 2400px; } +.win { + border-radius: 12px; overflow: hidden; background: #0f1115; + box-shadow: var(--shadow-win); } -.facts div { padding: 22px 24px 0 0; } -.facts dt { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } -.facts dd { margin: 6px 0 0; font-size: 0.9375rem; color: var(--muted); max-width: 26ch; } - -/* Sections */ -.section { padding: 104px 0 0; } -.section-head { max-width: 660px; margin-bottom: 40px; } -.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; } -.more { margin-top: 24px; font-size: 0.9375rem; } - -/* Side-by-side code */ -.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } -.code { - border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg); overflow: hidden; - min-width: 0; +.win img { width: 100%; } +.win-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #15171c; border-bottom: 1px solid rgba(255,255,255,.06); } +.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c2f36; } +.win-bar span { margin: 0 auto; padding-right: 50px; font: 12px/1 var(--mono); color: #8b8f99; padding: 5px 12px; border-radius: 6px; background: rgba(255,255,255,.04); } +.win-front { position: relative; z-index: 2; transform: rotateX(4deg); transform-origin: 50% 100%; } +.win-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; } +.win-back { + position: absolute; z-index: 1; width: 70%; right: -6%; top: -40px; + opacity: .55; transform: rotateX(4deg) scale(.96); filter: saturate(.8); + -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); + mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); } -.code-title { - display: flex; justify-content: space-between; gap: 12px; - padding: 10px 16px; border-bottom: 1px solid var(--line); - font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); +:root[data-theme="light"] .win-back { opacity: .35; } +@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .win-back { opacity: .35; } } +.stage::before { + content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 8%; height: 70%; + background: radial-gradient(closest-side, rgba(255, 112, 40, .35), transparent); + filter: blur(40px); opacity: .55; } -.code pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.65; } -.c { color: var(--faint); } -.s { color: var(--accent); } -.pair-note { margin-top: 18px; color: var(--muted); font-size: 0.9375rem; max-width: 720px; } - -/* Works-with list */ -.works { - margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; - border-top: 1px solid var(--line); padding: 0; list-style: none; +.win-front img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top; } +.term { + position: absolute; z-index: 4; left: -3%; bottom: -56px; width: min(430px, 42%); + border-radius: 12px; overflow: hidden; + background: rgba(13, 13, 16, .96); border: 1px solid rgba(255,255,255,.12); + box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4); + color: #e4e4e7; } -.works li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--muted); } -.works li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; } - -/* Services table */ -.svc { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } -.svc th, .svc td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-top: 1px solid var(--line); } -.svc thead th { border-top: 0; font-size: 0.8125rem; font-weight: 500; color: var(--faint); padding-bottom: 10px; } -.svc tbody th { font-weight: 600; width: 18%; white-space: nowrap; } -.svc td:nth-child(2) { width: 38%; } -.svc td:last-child { color: var(--muted); padding-right: 0; } -.svc tbody tr:last-child > * { border-bottom: 1px solid var(--line); } -.limits { margin-top: 24px; max-width: 760px; color: var(--muted); font-size: 0.9375rem; } -.limits strong { color: var(--text); font-weight: 600; } - -/* CI tabs */ -.ci { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } -.ci-tabs { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); } -.ci-tabs .tab { - text-align: left; padding: 12px 16px; margin: 0 0 0 -1px; - border-bottom: 0; border-left: 2px solid transparent; line-height: 1.35; +.term-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.07); } +.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #34363c; } +.term-bar span { margin-left: 8px; font: 11.5px/1 var(--mono); color: #8b8f99; } +.term pre { padding: 14px 16px 16px; font-size: 12.5px; line-height: 1.7; overflow-x: auto; } +.t-p { color: #ff9a5c; } +.t-d { color: #9a9aa4; } +.t-ok { color: #6ee7a0; } + +/* works with */ +.works-with { position: relative; z-index: 5; margin-top: 120px; text-align: center; } +.works-with p { font-size: 13px; color: var(--faint); letter-spacing: 0.01em; } +.works-with ul { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; } +.works-with li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; transition: color .2s; } +.works-with li:hover { color: var(--fg); } +.logo { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; } +.logo-img { width: 20px; height: 20px; flex: none; filter: grayscale(1) contrast(1.1); opacity: .8; transition: filter .2s, opacity .2s; } +li:hover .logo-img, .ci-tab[aria-selected="true"] .logo-img { filter: none; opacity: 1; } +.glyph { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; } +.glyph svg { width: 20px; height: 20px; } + +/* stats */ +.stats { margin: 72px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } +.stats > div { padding: 32px 28px; border-left: 1px solid var(--line); } +.stats > div:first-child { border-left: 0; padding-left: 0; } +.stats dt { font-size: 44px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; } +.stats dt span { color: var(--faint); font-weight: 500; } +.stats dd { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 240px; } + +/* ---------- sections ---------- */ +.section { padding: 128px 0 0; } +.section-head { max-width: 680px; margin-bottom: 56px; } +.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; } +.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } +.section-head h2 { margin-top: 18px; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.045em; } +.section-head > p:not(.eyebrow):not(.more) { margin-top: 18px; font-size: 18px; color: var(--muted); } +.more { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; } +.more a { color: var(--fg); font-weight: 500; text-decoration: none; } +.more a span { display: inline-block; color: var(--accent-ink); transition: transform .2s; } +.more a:hover span { transform: translateX(3px); } + +/* code blocks: always dark */ +.code { border-radius: var(--radius); overflow: hidden; background: var(--code-bg); border: 1px solid var(--line-2); color: #e4e4e7; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; } +:root[data-theme="light"] .code { border-color: #1d1d22; box-shadow: 0 20px 40px -24px rgba(10,10,20,.35); } +@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .code { border-color: #1d1d22; box-shadow: 0 20px 40px -24px rgba(10,10,20,.35); } } +.code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); font: 12.5px/1 var(--mono); color: #9a9aa4; } +.code-bar .tag { color: #8b8f99; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.05); } +.code pre, .snip { padding: 18px 20px; font-size: 13.5px; line-height: 1.75; overflow-x: auto; tab-size: 4; } +.c { color: #7d8590; } +.s { color: #9be3b0; } +.k { color: #c7a6ff; } +.f { color: #7cc4ff; } +.n { color: #ffb86b; } + +/* how it works */ +.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } +.how-code { display: grid; gap: 16px; } +.flow { + position: relative; display: flex; flex-direction: column; gap: 0; padding: 28px; + border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); + background-image: radial-gradient(ellipse 80% 50% at 50% 50%, var(--accent-soft), transparent 70%); } -.ci-tabs .tab small { display: block; font-weight: 400; color: var(--faint); margin-top: 3px; font-size: 0.8125rem; } -.ci-tabs .tab[aria-selected="true"] { border-left-color: var(--accent); } -.ci > * { min-width: 0; } -.ci .panel p { margin-top: 14px; font-size: 0.9375rem; color: var(--muted); } - -/* Screenshots grid */ -.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; } -.shots figcaption strong { color: var(--text); font-weight: 600; } - -/* Comparison */ -.compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } -.compare th, .compare td { text-align: left; vertical-align: top; padding: 15px 20px 15px 0; border-top: 1px solid var(--line); } -.compare tbody th { font-weight: 600; width: 22%; } -.compare td { color: var(--muted); } -.compare tr.us th, .compare tr.us td { color: var(--text); } -.compare tr:last-child > * { border-bottom: 1px solid var(--line); } - -/* Self-hosting */ -.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; margin: 0; } -.notes div { border-top: 1px solid var(--line); padding-top: 18px; } -.notes dt { font-weight: 600; } -.notes dd { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; } - -/* Open source */ -.oss { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; } -.oss p + p { margin-top: 14px; } -.oss .body p { color: var(--muted); } -.oss .body p strong { color: var(--text); font-weight: 500; } -.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } -.linklist li { border-bottom: 1px solid var(--line); } -.linklist a { - display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; - color: var(--text); text-decoration: none; font-size: 0.9375rem; +.flow-col { position: relative; padding: 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); } +.flow-hc { border-color: rgba(255, 122, 46, .45); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-2); box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 40px -12px var(--glow); } +.flow-label { font: 500 12.5px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; } +.flow-hc .flow-label { color: var(--accent-ink); } +.flow-label code { border: 0; background: none; padding: 0; color: inherit; font-size: 1em; } +.chips, .grid-chips, .steps { list-style: none; padding: 0; } +.chips { display: flex; flex-wrap: wrap; gap: 6px; } +.chips li { padding: 6px 10px; border-radius: 8px; font: 13px/1 var(--mono); color: var(--fg-2); background: var(--panel-2); border: 1px solid var(--line); } +.steps { display: grid; gap: 8px; counter-reset: s; } +.steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted); } +.steps li::before { content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 600 11px/1 var(--mono); color: var(--accent-ink); background: var(--accent-soft); border: 1px solid rgba(255,122,46,.3); } +.steps b { color: var(--fg); font-weight: 600; } +.grid-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } +.grid-chips li { padding: 10px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 3px; } +.grid-chips b { font-size: 13.5px; } +.grid-chips span { font: 12px/1.3 var(--mono); color: var(--faint); } +.flow-line { position: relative; height: 34px; width: 2px; margin: 0 auto; background: linear-gradient(var(--line-3), var(--line-3)) center / 1px 100% no-repeat; } +.flow-line span { position: absolute; left: -2px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: drop 2.4s cubic-bezier(.6,0,.4,1) infinite; } +.flow-line + .flow-col + .flow-line span { animation-delay: 1.2s; } +@keyframes drop { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(32px); opacity: 0; } } + +.compat { margin-top: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); overflow-x: auto; } +.compat table, .svc { width: 100%; border-collapse: collapse; font-size: 14.5px; } +.compat th, .compat td, .svc th, .svc td { text-align: left; padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: top; } +.compat thead th, .svc thead th { border-top: 0; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding-top: 16px; padding-bottom: 14px; } +.compat tbody th { font-weight: 600; white-space: nowrap; } +.compat td:last-child { color: var(--muted); } +.compat tbody tr { transition: background .15s; } +.compat tbody tr:hover { background: var(--panel-2); } +.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 12px/1.4 var(--mono); white-space: nowrap; border: 1px solid var(--line-2); } +.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } +.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } +.badge.part { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } +.badge.maybe { color: var(--muted); } + +/* ---------- bento ---------- */ +.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } +.tile { + position: relative; overflow: hidden; padding: 28px; border-radius: 18px; + border: 1px solid var(--line); background: var(--panel); + transition: border-color .25s, transform .25s, box-shadow .25s; + display: flex; flex-direction: column; } -.linklist a span { color: var(--faint); } -.linklist a:hover { color: var(--accent); } - -.partners { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 36px; flex-wrap: wrap; } -.partners p { font-size: 0.875rem; color: var(--muted); } -.partners a { display: block; } -.partners a:hover img { opacity: 1; } -.partners img { filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.75; } -.partners .ts img { height: 60px; width: auto; margin: -14px -12px; } -.partners .cr img { height: 22px; width: auto; } -:root[data-theme="dark"] .partners .ts img { filter: invert(1) grayscale(1); mix-blend-mode: screen; } -:root[data-theme="dark"] .partners .cr img { filter: grayscale(1) brightness(1.7); mix-blend-mode: normal; } -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) .partners .ts img { filter: invert(1) grayscale(1); mix-blend-mode: screen; } - :root:not([data-theme="light"]) .partners .cr img { filter: grayscale(1) brightness(1.7); mix-blend-mode: normal; } +.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255,255,255,.035), transparent 70%); } +.tile:hover { border-color: var(--line-2); box-shadow: 0 20px 50px -30px rgba(0,0,0,.5); } +.tile-k { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } +.tile h3 { margin-top: 12px; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; } +.tile p:not(.tile-k) { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.6; } +.tile .snip { margin: 18px -28px 4px; padding: 16px 28px; font-size: 12.5px; line-height: 1.7; background: var(--code-bg); color: #e4e4e7; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } +.tile .snip-end { margin: auto -28px -28px; padding-top: 18px; border-bottom: 0; } +.t-db .mini { margin-bottom: 24px; } +.t-compute { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 0; } +.t-db { grid-column: span 5; } +.t-fn, .t-net, .t-iam { grid-column: span 4; } +.t-s3, .t-msg { grid-column: span 3; } +.t-obs { grid-column: span 6; padding-bottom: 0; } +.t-cfn, .t-limits { grid-column: span 6; } +.tile-text { max-width: 520px; } +.crop { position: relative; margin: 24px -28px 0 0; height: 250px; overflow: hidden; border-top-left-radius: 12px; border: 1px solid var(--line-2); border-right: 0; border-bottom: 0; background: #0f1115; } +.crop img { position: absolute; max-width: none; } +.crop-ec2 img { width: 1100px; left: -196px; top: -150px; } +.crop-cw img { width: 900px; left: -150px; top: -60px; } + +.mini { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 14px; } +.mini th, .mini td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } +.mini th { font: 500 13px/1.6 var(--mono); color: var(--accent-ink); padding-right: 16px; white-space: nowrap; width: 1%; } +.mini td { color: var(--fg-2); } +.mini td span { color: var(--faint); padding: 0 2px; } + +.map { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 8px; } +.map li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); } +.map i { height: 1px; background: repeating-linear-gradient(90deg, var(--line-3) 0 3px, transparent 3px 7px); } +.map b { font: 500 13px/1 var(--mono); color: var(--fg); padding: 6px 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); } + +.ticks { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; font-size: 14.5px; color: var(--fg-2); } +.ticks li { position: relative; padding-left: 24px; } +.ticks li::before { content: ""; flex: none; width: 14px; height: 9px; position: absolute; left: 0; top: .55em; background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.5l3.5 3.5L13 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 4.5l3.5 3.5L13 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } +.ticks-no li::before { width: 10px; height: 2px; top: .75em; border-radius: 2px; background: var(--warn); -webkit-mask: none; mask: none; } + +.fan { margin-top: 20px; display: grid; grid-template-columns: auto 34px auto; align-items: center; justify-content: start; } +.fan-src { font: 500 13px/1 var(--mono); padding: 9px 11px; border-radius: 8px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid rgba(255,122,46,.3); } +.fan-lines { height: 80px; background: + linear-gradient(var(--line-3), var(--line-3)) 0 50% / 50% 1px no-repeat, + linear-gradient(var(--line-3), var(--line-3)) 50% 50% / 1px 66% no-repeat, + linear-gradient(var(--line-3), var(--line-3)) 100% 17% / 50% 1px no-repeat, + linear-gradient(var(--line-3), var(--line-3)) 100% 50% / 50% 1px no-repeat, + linear-gradient(var(--line-3), var(--line-3)) 100% 83% / 50% 1px no-repeat; } +.fan-dst { display: grid; gap: 6px; } +.fan-dst span { font: 500 12.5px/1 var(--mono); padding: 6px 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); } + +.metric { margin-top: auto; padding-top: 24px; display: flex; align-items: flex-end; gap: 16px; } +.metric b { font-size: 56px; font-weight: 600; letter-spacing: -0.05em; line-height: .9; background: linear-gradient(180deg, var(--fg), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } +.metric span { font-size: 14px; color: var(--muted); max-width: 300px; line-height: 1.5; } + +.all-services { margin-top: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; } +.all-services summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px; cursor: pointer; font-weight: 500; transition: background .15s; } +.all-services summary::-webkit-details-marker { display: none; } +.all-services summary:hover { background: var(--panel-2); } +.all-services summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .25s; } +.all-services[open] summary svg { transform: rotate(180deg); } +.svc-wrap { overflow-x: auto; } +.svc { font-size: 14px; } +.svc tbody th { font-weight: 600; white-space: nowrap; } +.svc td:nth-child(2) { color: var(--fg-2); } +.svc td:last-child { color: var(--muted); } + +/* ---------- CI ---------- */ +.ci { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; } +.ci-tabs { display: grid; gap: 6px; } +.ci-tab { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } +.ci-tab:hover { background: var(--panel); color: var(--fg); } +.ci-tab[aria-selected="true"] { background: var(--panel); border-color: var(--line-2); color: var(--fg); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); } +.ci-tab b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; } +.ci-tab small { display: block; margin-top: 2px; font-size: 13px; color: var(--faint); } +.ci-tab .logo, .ci-tab .glyph, .ci-tab .logo-img { width: 22px; height: 22px; } +.ci-panels .panel > p { margin-top: 16px; font-size: 15px; color: var(--muted); max-width: 640px; } + +/* ---------- gallery ---------- */ +.gallery { display: grid; gap: 20px; } +.gal-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); justify-self: center; max-width: 100%; overflow-x: auto; } +.gal-tab { font: 500 14px/1 var(--font); color: var(--muted); background: none; border: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color .15s, background .2s; } +.gal-tab:hover { color: var(--fg); } +.gal-tab[aria-selected="true"] { color: var(--fg); background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2); } +.win-gal { position: relative; } +.gal-panel figcaption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 999px; font-size: 14px; color: #c8c8ce; background: rgba(12,12,15,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.gal-panel figcaption b { color: #fff; } +.gal-panel figcaption a { color: var(--accent-2); margin-left: 6px; text-decoration: none; } +.gal-panel figcaption a:hover { text-decoration: underline; } + +/* ---------- compare ---------- */ +.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } +.two-col .section-head { margin-bottom: 0; position: sticky; top: 112px; } +.compare { border-top: 1px solid var(--line); } +.compare > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); } +.compare dt { font-weight: 600; letter-spacing: -0.01em; } +.compare dd { color: var(--muted); font-size: 15px; } +.compare .us dt { color: var(--accent-ink); } +.compare .us dd { color: var(--fg-2); } + +/* ---------- self-hosting ---------- */ +.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } +.note { padding: 26px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s; } +.note:hover { border-color: var(--line-2); } +.note .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; background: var(--code-bg); color: #e4e4e7; border: 1px solid var(--line-2); } +.note h3 { margin-top: 20px; font-size: 18px; letter-spacing: -0.02em; } +.note p { margin-top: 8px; font-size: 14.5px; color: var(--muted); } + +/* ---------- CTA + partners ---------- */ +.cta { padding-bottom: 32px; } +.cta-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 88px 32px 64px; border-radius: 24px; border: 1px solid var(--line-2); background: var(--panel); } +.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%); } +.cta-glow { position: absolute; z-index: -1; left: 50%; top: -160px; width: 640px; height: 360px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px); } +.cta-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 17px; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 20px 50px -10px var(--glow); } +.cta-card h2 { margin-top: 28px; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.045em; } +.cta-card > p { margin: 18px auto 0; max-width: 620px; color: var(--muted); font-size: 16.5px; } +.cta-actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } +.cta-links { list-style: none; padding: 0; margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; font-size: 14.5px; } +.cta-links a { color: var(--muted) !important; } +.cta-links a:hover { color: var(--fg) !important; } + +.partners { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 48px; } +.partners p { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); } +.partner { display: inline-flex; align-items: center; padding: 8px; border-radius: 8px; color: var(--muted); transition: color .2s; } +.partner:hover { color: var(--fg); } +.wordmark { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; } +.wm-ts { --src: url(/images/logos/tailscale-wordmark.svg); width: 135px; height: 26px; } +.wm-cr { --src: url(/images/logos/coderabbit-wordmark.svg); width: 172px; height: 25px; } + +/* ---------- footer ---------- */ +.site-footer { margin-top: 96px; border-top: 1px solid var(--line); background: var(--bg-2); } +.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 48px; } +.footer-brand p { margin-top: 14px; font-size: 14.5px; color: var(--muted); max-width: 260px; } +.site-footer nav { display: grid; align-content: start; gap: 10px; font-size: 14.5px; } +.site-footer nav h2 { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 6px; } +.site-footer nav a { color: var(--muted); transition: color .15s; justify-self: start; } +.site-footer nav a:hover { color: var(--fg); } +.site-footer .footer-legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: 40px; font-size: 13px; color: var(--faint); } +.footer-legal::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; border-top: 1px solid var(--line); } +.footer-legal p:last-child { max-width: 620px; } + +/* ---------- reveal ---------- */ +.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } +.js .reveal.in { opacity: 1; transform: none; } +.bento .reveal:nth-child(3n+2) { transition-delay: .06s; } +.bento .reveal:nth-child(3n) { transition-delay: .12s; } +.notes .reveal:nth-child(3n+2) { transition-delay: .06s; } +.notes .reveal:nth-child(3n) { transition-delay: .12s; } + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { animation: none !important; transition: none !important; } + .js .reveal { opacity: 1; transform: none; } + .flow-line span { display: none; } } -/* Footer */ -.site-footer { margin-top: 112px; border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 0.875rem; color: var(--muted); } -.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; } -.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; } -.site-footer a { color: var(--muted); text-decoration: none; } -.site-footer a:hover { color: var(--text); text-decoration: underline; } - -/* Responsive */ -@media (max-width: 900px) { - .facts { grid-template-columns: 1fr 1fr; } - .pair, .shots, .oss, .ci { grid-template-columns: 1fr; } - .ci { gap: 20px; } - .ci-tabs { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); } - .ci-tabs .tab { border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; padding: 10px 12px 11px; white-space: nowrap; } - .ci-tabs .tab small { display: none; } - .ci-tabs .tab[aria-selected="true"] { border-bottom-color: var(--accent); } - .works, .notes { grid-template-columns: 1fr 1fr; } - .site-nav .opt { display: none; } +/* ---------- responsive ---------- */ +@media (max-width: 1080px) { + .t-compute, .t-db { grid-column: span 12; } + .t-fn, .t-net, .t-iam { grid-column: span 6; } + .t-iam { grid-column: span 12; } + .t-s3, .t-msg { grid-column: span 6; } + .t-obs, .t-cfn, .t-limits { grid-column: span 12; } + .two-col { grid-template-columns: minmax(0, 1fr); gap: 40px; } + .two-col .section-head { position: static; } +} +@media (max-width: 920px) { + .site-nav { + display: none; position: absolute; left: 0; right: 0; top: 64px; + flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 16px; + background: var(--bg); border-bottom: 1px solid var(--line); + box-shadow: 0 24px 40px -20px rgba(0,0,0,.5); + } + .site-nav.open { display: flex; animation: fade-in .2s ease both; } + .site-nav a { padding: 14px 8px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--fg-2); } + .site-nav a:last-child { border-bottom: 0; } + .site-nav .nav-demo { display: block; } + .menu-btn { display: inline-grid; } + .how { grid-template-columns: minmax(0, 1fr); } + .ci { grid-template-columns: minmax(0, 1fr); } + .ci-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .stats { grid-template-columns: repeat(2, 1fr); } + .stats > div:nth-child(3) { border-left: 0; padding-left: 0; } + .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } + .site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; } + .footer-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { - :root { --gutter: 16px; } - body { font-size: 16px; } - .hero { padding: 56px 0 40px; } - .lead { font-size: 1.0625rem; } - .section { padding-top: 80px; } - .facts { margin-top: 48px; } - .facts dt { font-size: 1.5rem; } - .works, .notes { grid-template-columns: 1fr; } - .site-nav { gap: 16px; } - .site-nav .opt2, .hide-sm { display: none; } - .hero-shot { margin-top: 48px; } - .shots { gap: 32px; } - /* tables become stacked rows */ + .wrap { padding: 0 16px; } + .gh span { display: none; } + .gh { width: 34px; padding: 0; justify-content: center; } + .hero { padding-top: 48px; } + .pill-text { max-width: 220px; } + .hero h1 { margin-top: 22px; letter-spacing: -0.045em; } + .hero h1 { font-size: clamp(32px, 10vw, 44px); } + .lead { margin-top: 18px; } + .install { margin-top: 28px; } + .seg { display: flex; } + .seg-tab { flex: 1; padding: 9px 6px; } + .cmd { padding: 10px 10px 10px 14px; } + .cmd pre { font-size: 13px; } + .hero-ctas { width: 100%; } + .hero-ctas .btn { flex: 1; justify-content: center; } + .stage-wrap { margin-top: 48px; } + .win-back { display: none; } + .win-front { transform: none; } + .win-bar { height: 26px; padding: 0 10px; gap: 5px; } + .win-bar i { width: 7px; height: 7px; } + .win-bar span { font-size: 10px; padding: 3px 8px; } + .term { position: relative; left: auto; bottom: auto; width: auto; margin: -36px 12px 0; } + .term pre { font-size: 11.5px; } + .works-with { margin-top: 40px; } + .works-with ul { gap: 14px 22px; } + .works-with li { font-size: 14px; } + .stats { margin-top: 48px; } + .stats > div { padding: 22px 0 22px 16px; } + .stats > div:nth-child(odd) { padding-left: 0; border-left: 0; } + .stats dt { font-size: 34px; } + .stats dd { font-size: 13px; } + .section { padding-top: 88px; } + .section-head { margin-bottom: 36px; } + .section-head > p:not(.eyebrow):not(.more) { font-size: 16.5px; } + .flow { padding: 16px; } + .code pre, .snip { font-size: 12.5px; padding: 16px; } + .compat th, .compat td { padding: 12px 14px; } + .compat thead th:last-child, .compat td:last-child { display: none; } + .compat table { font-size: 14px; } + .bento { gap: 12px; } + .tile { padding: 22px; border-radius: 16px; } + .tile .snip { margin-left: -22px; margin-right: -22px; padding: 14px 22px; } + .tile .snip-end { margin-bottom: -22px; } + .footer-legal::before { left: 16px; right: 16px; } + .t-fn, .t-net, .t-s3, .t-msg { grid-column: span 12; } + .crop { margin-right: -22px; height: 200px; } + .crop-ec2 img { width: 900px; left: -160px; top: -120px; } + .all-services summary { padding: 18px 22px; } .svc thead { display: none; } - .svc, .svc tbody, .svc tr, .svc th, .svc td, - .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; } - .svc tr, .compare tr { border-top: 1px solid var(--line); padding: 14px 0; } - .svc th, .svc td, .compare th, .compare td { border: 0 !important; padding: 0; white-space: normal; } - .svc td, .compare td { margin-top: 4px; } - .svc tbody tr:last-child, .compare tr:last-child { border-bottom: 1px solid var(--line); } -} - -@media (prefers-reduced-motion: no-preference) { - html { scroll-behavior: smooth; } + .svc tr { display: grid; padding: 14px 20px; border-top: 1px solid var(--line); gap: 4px; } + .svc th, .svc td { padding: 0; border: 0; } + .ci-tabs { grid-template-columns: 1fr 1fr; gap: 6px; } + .ci-tab { padding: 10px 12px; gap: 10px; } + .ci-tab b { font-size: 13.5px; overflow-wrap: anywhere; } + .ci-tab small { display: none; } + .gal-tabs { justify-self: stretch; } + .gal-tab { flex: 1; padding: 9px 8px; font-size: 13px; } + .gal-panel figcaption { position: static; transform: none; display: block; max-width: none; white-space: normal; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: #111318; } + .compare > div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } + .notes { grid-template-columns: 1fr; } + .cta-card { padding: 56px 20px 44px; border-radius: 20px; } + .partners { gap: 16px 32px; } + .partners p { flex-basis: 100%; text-align: center; } + .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } } diff --git a/pages/site.js b/pages/site.js index f9a3b37..c8b94e6 100644 --- a/pages/site.js +++ b/pages/site.js @@ -1,36 +1,43 @@ (function () { "use strict"; + var $$ = function (sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); }; // Install commands point at this site's /scripts/ when served over http(s), // so preview deployments install from themselves. The HTML already has the // public URL for when JavaScript is off. if (location.protocol.indexOf("http") === 0) { var base = location.origin + "/scripts/"; - document.querySelectorAll("[data-script]").forEach(function (el) { + $$("[data-script]").forEach(function (el) { el.textContent = el.dataset.script === "ps1" ? "irm " + base + "install.ps1 | iex" : "curl -fsSL " + base + "install.sh | sh"; }); } - // Tabs (install methods, CI integrations). - document.querySelectorAll("[role=tablist]").forEach(function (list) { - var tabs = Array.prototype.slice.call(list.querySelectorAll("[role=tab]")); + // Tabs (install methods, CI integrations, console screens). + var galUrl = document.getElementById("gal-url"); + $$("[role=tablist]").forEach(function (list) { + var tabs = $$("[role=tab]", list); + var vertical = list.getAttribute("aria-orientation") === "vertical"; function select(tab, focus) { tabs.forEach(function (t) { var on = t === tab; + var panel = document.getElementById(t.getAttribute("aria-controls")); t.setAttribute("aria-selected", on ? "true" : "false"); t.tabIndex = on ? 0 : -1; - document.getElementById(t.getAttribute("aria-controls")).hidden = !on; + panel.hidden = !on; + if (on && panel.dataset.url && galUrl) galUrl.textContent = panel.dataset.url; }); if (focus) tab.focus(); } tabs.forEach(function (tab, i) { tab.addEventListener("click", function () { select(tab, false); }); tab.addEventListener("keydown", function (e) { + var next = vertical ? ["ArrowDown", "ArrowRight"] : ["ArrowRight", "ArrowDown"]; + var prev = vertical ? ["ArrowUp", "ArrowLeft"] : ["ArrowLeft", "ArrowUp"]; var n = null; - if (e.key === "ArrowRight" || e.key === "ArrowDown") n = tabs[(i + 1) % tabs.length]; - if (e.key === "ArrowLeft" || e.key === "ArrowUp") n = tabs[(i - 1 + tabs.length) % tabs.length]; + if (next.indexOf(e.key) >= 0) n = tabs[(i + 1) % tabs.length]; + if (prev.indexOf(e.key) >= 0) n = tabs[(i - 1 + tabs.length) % tabs.length]; if (e.key === "Home") n = tabs[0]; if (e.key === "End") n = tabs[tabs.length - 1]; if (n) { e.preventDefault(); select(n, true); } @@ -38,36 +45,70 @@ }); }); - // Copy buttons. - document.querySelectorAll("[data-copy]").forEach(function (btn) { + // Copy buttons, with a check mark and a screen reader announcement. + var status = document.getElementById("copy-status"); + $$("[data-copy]").forEach(function (btn) { + var timer; btn.addEventListener("click", function () { - var text = document.getElementById(btn.dataset.copy).textContent.trim(); - var done = function (label) { - btn.textContent = label; - setTimeout(function () { btn.textContent = "Copy"; }, 1600); + var src = document.getElementById(btn.dataset.copy); + var text = src.textContent.trim(); + var done = function (msg) { + btn.classList.add("done"); + if (status) status.textContent = msg; + clearTimeout(timer); + timer = setTimeout(function () { btn.classList.remove("done"); if (status) status.textContent = ""; }, 1800); }; if (navigator.clipboard && window.isSecureContext) { - navigator.clipboard.writeText(text).then(function () { done("Copied"); }, function () { done("Failed"); }); + navigator.clipboard.writeText(text).then(function () { done("Copied to clipboard"); }, function () { select(src); }); } else { + select(src); + } + function select(el) { var range = document.createRange(); - range.selectNodeContents(document.getElementById(btn.dataset.copy)); + range.selectNodeContents(el); var sel = getSelection(); sel.removeAllRanges(); sel.addRange(range); - done("Press ⌘C"); + if (status) status.textContent = "Command selected. Press Ctrl+C or Cmd+C to copy."; } }); }); // Theme toggle. The choice is remembered on this device only. - var btn = document.getElementById("theme"); - if (btn) { - btn.addEventListener("click", function () { + var themeBtn = document.getElementById("theme"); + if (themeBtn) { + themeBtn.addEventListener("click", function () { var root = document.documentElement; - var cur = root.dataset.theme || - (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); + var cur = root.dataset.theme || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); var next = cur === "dark" ? "light" : "dark"; root.dataset.theme = next; - btn.setAttribute("aria-label", next === "dark" ? "Switch to light theme" : "Switch to dark theme"); + themeBtn.setAttribute("aria-label", next === "dark" ? "Switch to light theme" : "Switch to dark theme"); try { localStorage.setItem("theme", next); } catch (e) {} }); } + + // Mobile menu. + var menu = document.getElementById("menu"); + var nav = document.getElementById("site-nav"); + if (menu && nav) { + var setOpen = function (open) { + nav.classList.toggle("open", open); + menu.setAttribute("aria-expanded", open ? "true" : "false"); + menu.setAttribute("aria-label", open ? "Close menu" : "Open menu"); + }; + menu.addEventListener("click", function () { setOpen(!nav.classList.contains("open")); }); + $$("a", nav).forEach(function (a) { a.addEventListener("click", function () { setOpen(false); }); }); + document.addEventListener("keydown", function (e) { if (e.key === "Escape" && nav.classList.contains("open")) { setOpen(false); menu.focus(); } }); + } + + // Reveal on scroll. + var items = $$(".reveal"); + if ("IntersectionObserver" in window && !matchMedia("(prefers-reduced-motion: reduce)").matches) { + var io = new IntersectionObserver(function (entries) { + entries.forEach(function (e) { + if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } + }); + }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }); + items.forEach(function (el) { io.observe(el); }); + } else { + items.forEach(function (el) { el.classList.add("in"); }); + } })();