Website for the Lede browser extension.
Use Lede mark as favicon; nav float veil; light privacy band
+61
-20
-4
public/favicon.svg
-4
public/favicon.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
2
-
<rect width="32" height="32" rx="6" fill="#f5f0e8"/>
3
-
<path fill="#F15B2F" d="M17.2 6.5 14.8 18.2l8.5-3.2c.4-.2.8-.1 1 .2.3.3.4.7.2 1.1-3.4 7.8-8.2 15-13.4 21.8-.3.4-.9.5-1.4.2s-.7-.9-.5-1.3l4.9-14.1-7.5 1.4c-.4.1-.8-.1-1-.4s-.3-.7-.1-1L15.5 5.8c.2-.4.7-.6 1.2-.4.5.1.8.6.5 1.1Z"/>
4
-
</svg>
+3
src/components/SiteHeader.astro
+3
src/components/SiteHeader.astro
···
67
67
var exit = 12;
68
68
var floated = false;
69
69
var cls = "site-header--scrolled";
70
+
var rootCls = "site-nav-floated";
71
+
var root = document.documentElement;
70
72
var raf = 0;
71
73
function sync() {
72
74
var y = window.scrollY || document.documentElement.scrollTop;
···
76
78
if (next === floated) return;
77
79
floated = next;
78
80
header.classList.toggle(cls, floated);
81
+
root.classList.toggle(rootCls, floated);
79
82
}
80
83
function onScroll() {
81
84
if (raf) return;
+1
-1
src/layouts/BaseLayout.astro
+1
-1
src/layouts/BaseLayout.astro
···
37
37
<meta property="og:image" content={resolvedOgImage} />
38
38
<meta name="twitter:card" content="summary_large_image" />
39
39
<meta name="twitter:image" content={resolvedOgImage} />
40
-
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
40
+
<link rel="icon" href="/images/summarizer-logo.svg" type="image/svg+xml" />
41
41
<link rel="preconnect" href="https://fonts.googleapis.com" />
42
42
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
43
43
<link
+57
-15
src/styles/global.css
+57
-15
src/styles/global.css
···
26
26
--color-link: oklch(38% 0.02 var(--hue-ink));
27
27
--color-link-hover: var(--color-brand);
28
28
29
-
/* Dark band (privacy) */
30
-
--color-dark-canvas: oklch(12.8% 0.012 var(--hue-ink));
31
-
--color-dark-subtle: oklch(16.5% 0.012 var(--hue-ink));
32
-
--color-dark-border: oklch(21% 0.012 var(--hue-ink));
33
-
--color-dark-ink: oklch(94% 0.012 75);
34
-
--color-dark-ink-secondary: oklch(86% 0.018 75);
29
+
/* Privacy band — soft apricot slab (light mode); hue locks to brand orange */
30
+
--color-dark-canvas: oklch(92.5% 0.022 38);
31
+
--color-dark-subtle: oklch(89.6% 0.025 38);
32
+
--color-dark-border: oklch(84% 0.03 40);
33
+
--color-dark-ink: var(--color-ink);
34
+
--color-dark-ink-secondary: var(--color-ink-secondary);
35
35
36
36
/* Typography */
37
37
--font-display: "Sora", system-ui, sans-serif;
···
77
77
/* Floated site header — slightly rounder than cards, tuned for blur + shadow */
78
78
--radius-nav-float: 13px;
79
79
--nav-float-max: 1280px;
80
+
/* Full-viewport top veil (html.site-nav-floated::before) — tall + opaque stops hide scroll “pop” */
81
+
--nav-top-fade-reach: clamp(2rem, 6vw, 3.5rem);
82
+
--nav-veil-pill-overlap: clamp(3.25rem, 8dvh, 6.25rem);
80
83
81
84
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
82
85
/* Softer deceleration for first-paint choreography (no bounce) */
···
135
138
0 0 0 1px color-mix(in oklch, var(--color-brand) 28%, oklch(100% 0 0 / 0.12)),
136
139
0 14px 32px oklch(0% 0 0 / 0.45),
137
140
0 36px 88px oklch(0% 0 0 / 0.55);
138
-
}
139
-
140
-
.section--dark .eyebrow {
141
-
color: oklch(76% 0.055 55);
142
141
}
143
142
144
143
.hero-mast {
···
429
428
animation: nav-glass-in 0.42s var(--ease-reveal) both;
430
429
}
431
430
431
+
html.site-nav-floated::before {
432
+
animation: nav-glass-in 0.42s var(--ease-reveal) both;
433
+
}
434
+
432
435
.hero-shell > .site-header.site-header--scrolled {
433
436
animation: nav-pill-in 0.45s var(--ease-reveal) both;
434
437
}
435
438
}
436
439
440
+
/* Full-bleed top veil: must live on html (not the pill) so width isn’t clipped and transform doesn’t trap position:fixed */
441
+
html.site-nav-floated::before {
442
+
content: "";
443
+
position: fixed;
444
+
top: 0;
445
+
left: 0;
446
+
right: 0;
447
+
width: 100%;
448
+
height: calc(
449
+
env(safe-area-inset-top, 0px) + var(--space-sm) + var(--nav-top-fade-reach) + var(--nav-veil-pill-overlap)
450
+
);
451
+
z-index: 55;
452
+
pointer-events: none;
453
+
background: linear-gradient(
454
+
to bottom,
455
+
color-mix(in oklch, var(--color-canvas) 100%, transparent) 0%,
456
+
color-mix(in oklch, var(--color-canvas) 96%, transparent) 10%,
457
+
color-mix(in oklch, var(--color-canvas) 82%, transparent) 26%,
458
+
color-mix(in oklch, var(--color-canvas) 52%, transparent) 48%,
459
+
color-mix(in oklch, var(--color-canvas) 22%, transparent) 70%,
460
+
color-mix(in oklch, var(--color-canvas) 6%, transparent) 88%,
461
+
transparent 100%
462
+
);
463
+
}
464
+
437
465
.hero-shell > .site-header.site-header--scrolled {
438
466
position: fixed;
439
467
top: var(--space-sm);
···
452
480
453
481
.site-header .wrap {
454
482
position: relative;
455
-
z-index: 1;
483
+
z-index: 2;
456
484
}
457
485
458
486
.site-header__inner {
···
756
784
/* Privacy dark band */
757
785
.section--dark {
758
786
background-color: var(--color-dark-canvas);
787
+
/* Light mode: gentle brand glow on apricot base */
759
788
background-image:
760
-
radial-gradient(ellipse 120% 70% at 100% 0%, oklch(38% 0.06 48 / 0.4), transparent 52%),
761
-
radial-gradient(ellipse 90% 55% at 0% 100%, oklch(32% 0.07 38 / 0.35), transparent 48%);
789
+
radial-gradient(ellipse 125% 72% at 100% 0%, color-mix(in oklch, var(--color-brand) 13%, transparent) 0%, transparent 56%),
790
+
radial-gradient(ellipse 100% 58% at 0% 100%, oklch(70% 0.06 38 / 0.09), transparent 52%);
762
791
color: var(--color-dark-ink);
763
792
padding-block: calc(var(--space-3xl) + var(--space-md));
764
793
border-block: 1px solid var(--color-dark-border);
765
794
}
766
795
767
796
.section--dark .eyebrow {
768
-
color: oklch(72% 0.04 60);
797
+
color: color-mix(in oklch, var(--color-brand) 34%, var(--color-ink-muted));
769
798
}
770
799
771
800
.section--dark .heading-xl {
···
794
823
795
824
.section--dark a:hover {
796
825
color: color-mix(in oklch, var(--color-dark-ink) 70%, var(--color-brand));
826
+
}
827
+
828
+
@media (prefers-color-scheme: dark) {
829
+
.section--dark {
830
+
background-image:
831
+
radial-gradient(ellipse 120% 70% at 100% 0%, oklch(38% 0.06 48 / 0.4), transparent 52%),
832
+
radial-gradient(ellipse 90% 55% at 0% 100%, oklch(32% 0.07 38 / 0.35), transparent 48%);
833
+
}
834
+
835
+
.section--dark .eyebrow {
836
+
color: oklch(76% 0.055 55);
837
+
}
797
838
}
798
839
799
840
.split {
···
939
980
.journey-strip__cell a,
940
981
.hero-highlights li,
941
982
.site-header,
942
-
.site-header::after {
983
+
.site-header::after,
984
+
html.site-nav-floated::before {
943
985
transition: none;
944
986
animation: none !important;
945
987
}