aboutsummaryrefslogtreecommitdiff
path: root/landing/static/css/style.css
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--landing/static/css/style.css888
1 files changed, 515 insertions, 373 deletions
diff --git a/landing/static/css/style.css b/landing/static/css/style.css
index 30665f6..33ddc1b 100644
--- a/landing/static/css/style.css
+++ b/landing/static/css/style.css
@@ -1,137 +1,147 @@
/* ----------------------------------------------------------------
- Tidy Index — landing styles
- Palette: whites, soft blues, generous space.
+ Tidy Index — landing styles (editorial revision)
+
+ The site is a typeset document, not a SaaS template.
+ Light palette, generous space, serif headlines, monospace
+ labels, hairline rules.
---------------------------------------------------------------- */
:root {
--c-bg: #ffffff;
- --c-bg-soft: #f6f9fc;
+ --c-bg-soft: #f7f9fc;
--c-bg-tint: #eef4fb;
- --c-border: #e3ecf5;
- --c-border-soft: #eef2f7;
+
+ --c-rule: #e3ecf5;
+ --c-rule-strong: #cbd6e6;
--c-ink: #0b1f3a;
--c-ink-soft: #3b4f6b;
--c-ink-mute: #6b7c93;
- --c-blue: #3b82f6;
- --c-blue-deep: #2563eb;
+ --c-blue: #2563eb;
+ --c-blue-deep: #1d4ed8;
--c-blue-soft: #dbeafe;
--c-blue-tint: #eef4ff;
- --c-accent: #60a5fa;
-
--shadow-sm: 0 1px 2px rgba(15, 38, 73, 0.04);
- --shadow-md: 0 6px 24px -8px rgba(37, 99, 235, 0.18),
- 0 2px 6px rgba(15, 38, 73, 0.04);
- --shadow-lg: 0 24px 60px -20px rgba(37, 99, 235, 0.25),
- 0 6px 16px rgba(15, 38, 73, 0.06);
+ --shadow-md: 0 8px 28px -10px rgba(37, 99, 235, 0.18),
+ 0 2px 6px rgba(15, 38, 73, 0.05);
- --radius-sm: 8px;
- --radius-md: 14px;
- --radius-lg: 22px;
+ --radius-sm: 6px;
+ --radius-md: 12px;
+ --radius-lg: 18px;
+ --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
Consolas, monospace;
- --max-w: 1120px;
- --max-w-narrow: 760px;
+ --max-w: 960px;
+ --max-w-wide: 1080px;
+ --gutter: clamp(20px, 4vw, 40px);
}
* { box-sizing: border-box; }
-html { -webkit-text-size-adjust: 100%; }
+html {
+ -webkit-text-size-adjust: 100%;
+}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 17px;
- line-height: 1.6;
+ line-height: 1.65;
color: var(--c-ink);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
- background-image:
- radial-gradient(ellipse 80% 50% at 50% -10%, var(--c-blue-tint), transparent 70%),
- radial-gradient(ellipse 60% 40% at 90% 10%, #f0f7ff, transparent 70%);
- background-repeat: no-repeat;
}
a {
- color: var(--c-blue-deep);
+ color: var(--c-blue);
text-decoration: none;
transition: color 160ms ease;
}
-a:hover { color: var(--c-blue); }
+a:hover { color: var(--c-blue-deep); }
img, svg { display: block; max-width: 100%; }
-/* ---------- layout helpers ---------- */
+::selection {
+ background: var(--c-blue-soft);
+ color: var(--c-ink);
+}
+
+/* ---------- layout ---------- */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
- padding: 0 24px;
+ padding: 0 var(--gutter);
}
-.container.narrow { max-width: var(--max-w-narrow); }
-
-.eyebrow {
- display: inline-block;
- font-size: 13px;
- font-weight: 500;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--c-blue-deep);
- background: var(--c-blue-tint);
- padding: 6px 12px;
- border-radius: 999px;
- border: 1px solid var(--c-blue-soft);
+.container-wide {
+ max-width: var(--max-w-wide);
}
-.eyebrow.center { display: inline-block; }
-
-.center { text-align: center; }
-.center.eyebrow { display: inline-block; }
.section {
- padding: 120px 0;
+ padding: 96px 0;
+ border-top: 1px solid var(--c-rule);
}
+.section:first-of-type { border-top: 0; }
+
.section-soft {
background: var(--c-bg-soft);
- border-top: 1px solid var(--c-border-soft);
- border-bottom: 1px solid var(--c-border-soft);
}
-.section-title {
- font-size: clamp(28px, 4vw, 44px);
- line-height: 1.15;
- font-weight: 600;
- letter-spacing: -0.02em;
- margin: 18px 0 18px;
+/* ---------- shared element styles ---------- */
+
+.section-marker {
+ margin: 0 0 22px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.04em;
+ color: var(--c-blue);
+ text-transform: lowercase;
+}
+
+.section-headline {
+ margin: 0 0 28px;
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 144, 'SOFT' 30;
+ font-weight: 400;
+ font-size: clamp(32px, 4.6vw, 52px);
+ line-height: 1.08;
+ letter-spacing: -0.018em;
color: var(--c-ink);
+ max-width: 22ch;
}
-.section-title.center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
-.section-lede {
- font-size: 19px;
- color: var(--c-ink-soft);
- max-width: 640px;
- margin: 0 auto 60px;
+.section-headline em {
+ font-style: italic;
+ font-variation-settings: 'opsz' 144, 'SOFT' 100;
+ color: var(--c-blue);
+}
+
+.section-body {
+ margin: 0 0 48px;
+ font-size: 18px;
line-height: 1.6;
+ color: var(--c-ink-soft);
+ max-width: 60ch;
}
-.section-lede.center { text-align: center; }
-/* center the eyebrow when wrapped */
-.section .eyebrow.center,
-.container .eyebrow.center {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: max-content;
+code {
+ font-family: var(--font-mono);
+ font-size: 0.92em;
+ background: var(--c-bg-soft);
+ padding: 1px 6px;
+ border-radius: 4px;
+ color: var(--c-ink);
}
/* ---------- header ---------- */
@@ -140,64 +150,80 @@ img, svg { display: block; max-width: 100%; }
position: sticky;
top: 0;
z-index: 50;
- background: rgba(255, 255, 255, 0.78);
- backdrop-filter: saturate(180%) blur(14px);
- -webkit-backdrop-filter: saturate(180%) blur(14px);
- border-bottom: 1px solid var(--c-border-soft);
+ background: rgba(255, 255, 255, 0.85);
+ backdrop-filter: saturate(180%) blur(16px);
+ -webkit-backdrop-filter: saturate(180%) blur(16px);
+ border-bottom: 1px solid var(--c-rule);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
- height: 72px;
+ height: 68px;
}
.brand {
display: inline-flex;
align-items: center;
- gap: 10px;
- font-weight: 600;
- font-size: 17px;
+ gap: 12px;
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 24;
+ font-weight: 500;
+ font-size: 19px;
+ letter-spacing: -0.005em;
color: var(--c-ink);
- letter-spacing: -0.01em;
}
-.brand:hover { color: var(--c-blue-deep); }
+.brand:hover { color: var(--c-blue); }
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
- width: 32px; height: 32px;
- color: var(--c-blue-deep);
- background: var(--c-blue-tint);
- border-radius: 9px;
- border: 1px solid var(--c-blue-soft);
+ width: 30px;
+ height: 30px;
+ color: var(--c-blue);
}
-.brand-mark svg { width: 20px; height: 20px; }
+.brand-mark svg { width: 22px; height: 22px; }
-.site-nav {
+.header-meta {
display: flex;
align-items: center;
- gap: 32px;
+ gap: 28px;
}
-.site-nav a {
- color: var(--c-ink-soft);
- font-size: 15px;
- font-weight: 500;
+
+.header-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ letter-spacing: 0.03em;
+ color: var(--c-ink-mute);
+ text-transform: lowercase;
}
-.site-nav a:hover { color: var(--c-blue-deep); }
-.nav-cta {
- background: var(--c-ink);
- color: #fff !important;
- padding: 9px 16px;
- border-radius: 999px;
- transition: transform 160ms ease, background 160ms ease;
+.status-dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #34d399;
+ box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
-.nav-cta:hover {
- background: var(--c-blue-deep);
- transform: translateY(-1px);
+
+.header-cta {
+ font-family: var(--font-mono);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--c-ink);
+ letter-spacing: 0.01em;
+ border-bottom: 1px solid var(--c-ink);
+ padding-bottom: 1px;
+ transition: color 160ms ease, border-color 160ms ease;
+}
+.header-cta:hover {
+ color: var(--c-blue);
+ border-color: var(--c-blue);
}
/* ---------- buttons ---------- */
@@ -206,10 +232,11 @@ img, svg { display: block; max-width: 100%; }
display: inline-flex;
align-items: center;
justify-content: center;
- font-family: inherit;
- font-size: 16px;
+ gap: 10px;
+ font-family: var(--font-sans);
+ font-size: 15px;
font-weight: 500;
- padding: 14px 24px;
+ padding: 13px 22px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
@@ -217,421 +244,536 @@ img, svg { display: block; max-width: 100%; }
letter-spacing: -0.005em;
}
+.btn svg {
+ width: 17px;
+ height: 17px;
+}
+
.btn-primary {
- background: var(--c-blue-deep);
+ background: var(--c-ink);
color: #fff;
- box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.5);
+ box-shadow: 0 6px 18px -8px rgba(11, 31, 58, 0.5);
}
.btn-primary:hover {
- background: #1d4ed8;
+ background: var(--c-blue);
color: #fff;
transform: translateY(-1px);
- box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
+ box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.5);
}
-.btn-ghost {
- background: transparent;
- color: var(--c-ink);
- border-color: var(--c-border);
+.btn-lg {
+ padding: 16px 26px;
+ font-size: 16px;
}
-.btn-ghost:hover {
- background: #fff;
- border-color: var(--c-blue-soft);
- color: var(--c-blue-deep);
+.btn-lg svg {
+ width: 18px;
+ height: 18px;
}
-.btn-lg {
- padding: 16px 30px;
- font-size: 16px;
+.btn-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-family: var(--font-sans);
+ font-size: 15px;
+ font-weight: 500;
+ color: var(--c-ink-soft);
+ border-bottom: 1px solid var(--c-rule-strong);
+ padding-bottom: 1px;
+}
+.btn-link:hover {
+ color: var(--c-blue);
+ border-color: var(--c-blue);
}
/* ---------- hero ---------- */
.hero {
- padding: 120px 0 80px;
+ padding: 140px 0 110px;
position: relative;
overflow: hidden;
}
-.hero-inner {
- text-align: center;
- position: relative;
+.hero::before {
+ content: "";
+ position: absolute;
+ top: -200px;
+ right: -200px;
+ width: 600px;
+ height: 600px;
+ background: radial-gradient(closest-side, rgba(96, 165, 250, 0.20), rgba(96, 165, 250, 0) 70%);
+ pointer-events: none;
+ z-index: 0;
}
-.hero .eyebrow {
- margin-bottom: 28px;
+.hero .container {
+ position: relative;
+ z-index: 1;
}
-.hero-title {
- font-size: clamp(40px, 6vw, 76px);
- line-height: 1.05;
- font-weight: 600;
- letter-spacing: -0.035em;
- margin: 0 auto 24px;
- max-width: 12ch;
+.hero-headline {
+ margin: 0 0 32px;
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 144, 'SOFT' 30;
+ font-weight: 400;
+ font-size: clamp(44px, 7.4vw, 92px);
+ line-height: 1.02;
+ letter-spacing: -0.025em;
color: var(--c-ink);
+ max-width: 14ch;
}
-.hero-title .accent {
- background: linear-gradient(120deg, var(--c-blue-deep), var(--c-accent));
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
+.hero-headline em {
+ font-style: italic;
+ font-variation-settings: 'opsz' 144, 'SOFT' 100;
+ color: var(--c-blue);
+ font-weight: 400;
}
.hero-sub {
+ margin: 0 0 44px;
font-size: 20px;
line-height: 1.55;
color: var(--c-ink-soft);
- max-width: 600px;
- margin: 0 auto 40px;
+ max-width: 56ch;
}
.hero-cta {
display: flex;
- gap: 14px;
- justify-content: center;
+ align-items: center;
+ gap: 28px;
flex-wrap: wrap;
- margin-bottom: 80px;
}
-/* ---------- code card ---------- */
+/* ---------- record demo ---------- */
+
+.record {
+ margin-top: 8px;
+ background: #fff;
+ border: 1px solid var(--c-rule);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-sm);
+ overflow: hidden;
+}
-.hero-visual {
+.record-head {
display: flex;
- justify-content: center;
- margin-top: 16px;
+ align-items: baseline;
+ gap: 14px;
+ padding: 18px 26px;
+ background: var(--c-bg-soft);
+ border-bottom: 1px solid var(--c-rule);
}
-.code-card {
- width: 100%;
- max-width: 640px;
- background: #ffffff;
- border: 1px solid var(--c-border);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-lg);
- overflow: hidden;
- text-align: left;
- position: relative;
+.record-label {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--c-ink-mute);
}
-.code-card::before {
- content: "";
- position: absolute;
- inset: -1px;
- border-radius: inherit;
- padding: 1px;
- background: linear-gradient(160deg, rgba(96,165,250,0.4), rgba(255,255,255,0) 60%);
- -webkit-mask:
- linear-gradient(#000 0 0) content-box,
- linear-gradient(#000 0 0);
- -webkit-mask-composite: xor;
- mask-composite: exclude;
- pointer-events: none;
+.record-id {
+ font-family: var(--font-mono);
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--c-ink);
+ background: transparent;
+ padding: 0;
}
-.code-card-head {
+.record-meta {
+ margin-left: auto;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--c-ink-mute);
+}
+
+.record-row {
+ display: grid;
+ grid-template-columns: 200px 1fr;
+ border-top: 1px solid var(--c-rule);
+}
+
+.record-row:first-of-type {
+ border-top: 0;
+}
+
+.record-tag {
display: flex;
- align-items: center;
- gap: 8px;
- padding: 14px 18px;
- background: var(--c-bg-soft);
- border-bottom: 1px solid var(--c-border-soft);
+ flex-direction: column;
+ justify-content: flex-start;
+ padding: 24px 26px;
+ background: #fff;
+ border-right: 1px solid var(--c-rule);
}
-.code-card-head .dot {
- width: 10px; height: 10px;
- border-radius: 50%;
- background: #d6dde7;
+.tag-name {
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 36, 'SOFT' 50;
+ font-weight: 500;
+ font-size: 22px;
+ font-style: italic;
+ color: var(--c-blue);
+ margin-bottom: 4px;
}
-.dot-a { background: #ffd1d1; }
-.dot-b { background: #ffe5b4; }
-.dot-c { background: #c8e6c9; }
-.code-card-title {
- margin-left: 12px;
+.tag-mime {
font-family: var(--font-mono);
- font-size: 13px;
+ font-size: 11px;
+ letter-spacing: 0.02em;
color: var(--c-ink-mute);
}
-.code-card-body {
+.tag-note {
+ display: block;
+ margin-top: 10px;
+ font-family: var(--font-sans);
+ font-size: 12px;
+ line-height: 1.4;
+ color: var(--c-ink-mute);
+ max-width: 18ch;
+}
+
+.record-body {
margin: 0;
- padding: 22px 24px;
+ padding: 22px 26px;
font-family: var(--font-mono);
font-size: 13.5px;
- line-height: 1.65;
+ line-height: 1.7;
color: var(--c-ink-soft);
- background: #ffffff;
+ background: #fff;
overflow-x: auto;
white-space: pre;
}
-.code-card-body code { font-family: inherit; }
+.record-body code {
+ background: transparent;
+ padding: 0;
+ font-size: inherit;
+ color: inherit;
+}
.tk-k { color: #2563eb; }
.tk-s { color: #0f766e; }
.tk-n { color: #b45309; }
.tk-p { color: #94a3b8; }
+.tk-x { color: #7c3aed; }
+.tk-c { color: #cbd6e6; }
-/* ---------- format grid ---------- */
+/* ---------- catalog (dataset coverage widget) ---------- */
-.format-grid {
+.catalog {
+ margin: 8px 0 22px;
display: grid;
grid-template-columns: repeat(4, 1fr);
- gap: 20px;
- margin-top: 20px;
+ border-top: 1px solid var(--c-rule-strong);
+ border-bottom: 1px solid var(--c-rule);
}
-.format-card {
- background: #fff;
- border: 1px solid var(--c-border);
- border-radius: var(--radius-md);
- padding: 32px 26px;
- box-shadow: var(--shadow-sm);
- transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
+.catalog-col {
+ padding: 30px 24px;
+ border-right: 1px solid var(--c-rule);
}
-.format-card:hover {
- transform: translateY(-3px);
- border-color: var(--c-blue-soft);
- box-shadow: var(--shadow-md);
+.catalog-col:first-child { padding-left: 0; }
+.catalog-col:last-child {
+ border-right: 0;
+ padding-right: 0;
}
-.format-icon {
- display: inline-flex;
- width: 44px;
- height: 44px;
- align-items: center;
- justify-content: center;
- border-radius: 12px;
- background: var(--c-blue-tint);
- color: var(--c-blue-deep);
+.catalog-cat {
+ display: block;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 0.07em;
+ color: var(--c-blue);
+ text-transform: lowercase;
margin-bottom: 18px;
}
-.format-icon svg { width: 22px; height: 22px; }
-
-.format-card h3 {
- margin: 0 0 8px;
- font-size: 18px;
- font-weight: 600;
- letter-spacing: -0.01em;
- color: var(--c-ink);
-}
-.format-card p {
- margin: 0;
- font-size: 15px;
- line-height: 1.55;
- color: var(--c-ink-mute);
-}
-
-/* ---------- audience grid ---------- */
-
-.audience-grid {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 24px;
- margin-top: 20px;
-}
-
-.audience-card {
+.catalog-window {
position: relative;
- background: #fff;
- border: 1px solid var(--c-border);
- border-radius: var(--radius-lg);
- padding: 40px 32px;
- box-shadow: var(--shadow-sm);
- transition: transform 200ms ease, box-shadow 200ms ease;
+ height: 188px;
+ overflow: hidden;
+ -webkit-mask-image: linear-gradient(
+ to bottom,
+ transparent 0%,
+ #000 14%,
+ #000 86%,
+ transparent 100%
+ );
+ mask-image: linear-gradient(
+ to bottom,
+ transparent 0%,
+ #000 14%,
+ #000 86%,
+ transparent 100%
+ );
+}
+
+.catalog-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 11px;
+ animation: catalog-scroll 64s linear infinite;
+ will-change: transform;
}
-.audience-card:hover {
- transform: translateY(-3px);
- box-shadow: var(--shadow-md);
+.catalog-col:hover .catalog-list {
+ animation-play-state: paused;
}
-.audience-card-feature {
- background: linear-gradient(180deg, #ffffff 0%, var(--c-blue-tint) 130%);
- border-color: var(--c-blue-soft);
-}
+/* Stagger speeds slightly so columns don't move in lockstep */
+.catalog-col:nth-child(1) .catalog-list { animation-duration: 58s; }
+.catalog-col:nth-child(2) .catalog-list { animation-duration: 72s; }
+.catalog-col:nth-child(3) .catalog-list { animation-duration: 64s; }
+.catalog-col:nth-child(4) .catalog-list { animation-duration: 68s; }
-.audience-num {
- font-family: var(--font-mono);
- font-size: 13px;
- font-weight: 500;
- color: var(--c-blue-deep);
- letter-spacing: 0.04em;
- margin-bottom: 16px;
+@keyframes catalog-scroll {
+ from { transform: translateY(0); }
+ to { transform: translateY(-50%); }
}
-.audience-card h3 {
- margin: 0 0 12px;
- font-size: 22px;
- font-weight: 600;
- letter-spacing: -0.015em;
+.catalog-list li {
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 14, 'SOFT' 30;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 1.3;
color: var(--c-ink);
}
-.audience-card p {
+.catalog-more {
margin: 0;
- color: var(--c-ink-soft);
- font-size: 16px;
- line-height: 1.6;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ letter-spacing: 0.02em;
+ color: var(--c-ink-mute);
+ text-align: right;
+}
+.catalog-more strong {
+ font-weight: 500;
+ color: var(--c-blue);
}
-/* ---------- value list ---------- */
+/* ---------- CTA section ---------- */
-.value-list {
- list-style: none;
- padding: 0;
- margin: 40px 0 0;
- display: grid;
- gap: 22px;
+.section-cta {
+ padding: 110px 0 130px;
}
-.value-list li {
+.cta-block {
display: flex;
- align-items: flex-start;
- gap: 18px;
- background: #fff;
- border: 1px solid var(--c-border);
- border-radius: var(--radius-md);
- padding: 22px 26px;
- box-shadow: var(--shadow-sm);
-}
-
-.value-check {
- display: inline-flex;
align-items: center;
- justify-content: center;
- width: 36px;
- height: 36px;
- flex: 0 0 36px;
- border-radius: 50%;
- background: var(--c-blue-tint);
- color: var(--c-blue-deep);
-}
-.value-check svg { width: 18px; height: 18px; }
-
-.value-list strong {
- display: block;
- font-weight: 600;
- font-size: 17px;
- color: var(--c-ink);
- margin-bottom: 4px;
+ justify-content: space-between;
+ gap: 40px;
+ padding-top: 56px;
+ border-top: 1px solid var(--c-rule-strong);
+ position: relative;
}
-.value-list p {
- margin: 0;
- color: var(--c-ink-mute);
- font-size: 15.5px;
- line-height: 1.55;
+.cta-block::before {
+ content: "";
+ position: absolute;
+ top: -1px;
+ left: 0;
+ width: 80px;
+ height: 2px;
+ background: var(--c-blue);
}
-/* ---------- CTA card ---------- */
+.cta-block .section-marker { margin-bottom: 14px; }
+.cta-block .section-headline { margin: 0; }
-.cta-card {
- position: relative;
+.cta-agents {
+ margin: 24px 0 0;
display: flex;
- flex-direction: column;
align-items: center;
- background: linear-gradient(160deg, #ffffff 0%, var(--c-blue-tint) 100%);
- border: 1px solid var(--c-blue-soft);
- border-radius: var(--radius-lg);
- padding: 72px 40px;
- box-shadow: var(--shadow-md);
- overflow: hidden;
+ flex-wrap: wrap;
+ gap: 14px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ line-height: 1.5;
+ color: var(--c-ink-mute);
}
-.cta-glow {
- position: absolute;
- top: -120px;
- left: 50%;
- width: 360px;
- height: 360px;
- transform: translateX(-50%);
- background: radial-gradient(closest-side, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0) 70%);
- pointer-events: none;
- z-index: 0;
+.cta-agents-label {
+ font-weight: 500;
+ letter-spacing: 0.06em;
+ text-transform: lowercase;
+ color: var(--c-blue);
}
-.cta-title {
- position: relative;
- z-index: 1;
- margin: 0 0 28px;
- font-size: clamp(26px, 3.4vw, 36px);
- font-weight: 600;
- letter-spacing: -0.02em;
+.cta-agents a {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
color: var(--c-ink);
- text-align: center;
+ border-bottom: 1px solid var(--c-rule-strong);
+ padding-bottom: 1px;
+ transition: color 160ms ease, border-color 160ms ease;
}
-
-.cta-btn {
- position: relative;
- z-index: 1;
- gap: 10px;
+.cta-agents a code {
+ background: transparent;
+ padding: 0;
+ font-size: 12px;
+ color: inherit;
+}
+.cta-agents a:hover {
+ color: var(--c-blue);
+ border-color: var(--c-blue);
}
-.cta-btn svg {
- width: 18px;
- height: 18px;
+.cta-agents-note {
+ font-style: italic;
+ color: var(--c-ink-mute);
}
/* ---------- footer ---------- */
.site-footer {
- border-top: 1px solid var(--c-border-soft);
+ border-top: 1px solid var(--c-rule);
background: var(--c-bg);
- padding: 60px 0 50px;
+ padding: 40px 0;
}
.footer-inner {
- text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 24px;
+ flex-wrap: wrap;
}
-.footer-brand {
+.footer-line {
display: inline-flex;
align-items: center;
- gap: 10px;
- font-weight: 600;
+ gap: 12px;
+ font-size: 14px;
+ color: var(--c-ink-soft);
+}
+.footer-line .brand-mark { color: var(--c-blue); }
+.footer-line .brand-mark svg { width: 18px; height: 18px; }
+
+.footer-name {
+ font-family: var(--font-serif);
+ font-variation-settings: 'opsz' 24;
+ font-weight: 500;
color: var(--c-ink);
- margin-bottom: 14px;
}
-.footer-brand .brand-mark { color: var(--c-blue-deep); }
-.footer-brand .brand-mark svg { width: 20px; height: 20px; }
.footer-tagline {
- margin: 0 0 12px;
- color: var(--c-ink-soft);
- font-size: 15px;
+ font-style: italic;
+ color: var(--c-ink-mute);
+}
+
+.footer-sep {
+ color: var(--c-rule-strong);
}
.footer-meta {
margin: 0;
+ font-family: var(--font-mono);
+ font-size: 12px;
color: var(--c-ink-mute);
- font-size: 13px;
+}
+.footer-meta a {
+ color: var(--c-ink-soft);
+ border-bottom: 1px solid var(--c-rule-strong);
+}
+.footer-meta a:hover {
+ color: var(--c-blue);
+ border-color: var(--c-blue);
}
/* ---------- responsive ---------- */
-@media (max-width: 880px) {
- .format-grid { grid-template-columns: repeat(2, 1fr); }
- .audience-grid { grid-template-columns: 1fr; }
- .section { padding: 90px 0; }
- .hero { padding: 80px 0 40px; }
-}
-
-@media (max-width: 640px) {
+@media (max-width: 1020px) {
+ .catalog {
+ grid-template-columns: repeat(2, 1fr);
+ border-bottom: 0;
+ }
+ .catalog-col {
+ padding: 28px 24px;
+ border-right: 1px solid var(--c-rule);
+ border-bottom: 1px solid var(--c-rule);
+ }
+ .catalog-col:first-child { padding-left: 24px; }
+ .catalog-col:last-child {
+ border-right: 1px solid var(--c-rule);
+ padding-right: 24px;
+ }
+ .catalog-col:nth-child(2n) { border-right: 0; padding-right: 0; }
+ .catalog-col:nth-child(2n+1) { padding-left: 0; }
+ .catalog-col:nth-last-child(-n+2) { border-bottom: 0; }
+}
+
+@media (max-width: 820px) {
+ .section { padding: 72px 0; }
+ .hero { padding: 90px 0 70px; }
+ .section-cta { padding: 80px 0 100px; }
+
+ .record-row {
+ grid-template-columns: 1fr;
+ }
+ .record-tag {
+ flex-direction: row;
+ align-items: baseline;
+ gap: 12px;
+ padding: 16px 22px;
+ border-right: 0;
+ border-bottom: 1px solid var(--c-rule);
+ background: var(--c-bg-soft);
+ }
+ .tag-name { margin-bottom: 0; font-size: 18px; }
+
+ .cta-block {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+@media (max-width: 620px) {
+ .catalog {
+ grid-template-columns: 1fr;
+ }
+ .catalog-col {
+ padding: 24px 0;
+ border-right: 0;
+ border-bottom: 1px solid var(--c-rule);
+ }
+ .catalog-col:first-child { padding-top: 24px; }
+ .catalog-col:last-child { border-bottom: 0; padding-bottom: 0; }
+}
+
+@media (max-width: 560px) {
body { font-size: 16px; }
- .site-nav { gap: 18px; }
- .site-nav a:not(.nav-cta) { display: none; }
- .header-inner { height: 64px; }
- .hero-cta { flex-direction: column; align-items: stretch; }
- .hero-cta .btn { width: 100%; }
- .code-card-body { font-size: 12px; padding: 18px; }
- .format-grid { grid-template-columns: 1fr; }
- .cta-card { padding: 40px 24px; }
+ .header-status { display: none; }
+ .header-inner { height: 60px; }
+ .hero-cta { gap: 18px; }
+ .record-head { flex-wrap: wrap; padding: 16px 20px; }
+ .record-meta { margin-left: 0; flex-basis: 100%; }
+ .record-body { font-size: 12.5px; padding: 18px 20px; }
+ .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
+
+ .catalog-window {
+ overflow-y: auto;
+ -webkit-mask-image: none;
+ mask-image: none;
+ }
+ .catalog-list {
+ animation: none;
+ }
+ .catalog-list li[aria-hidden="true"] {
+ display: none;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-01 20:35:16 +0000