LyAhn
00bf7da344
Replace the stacked desktop layout with a phone-first product flow featuring an image-led hero, inline privacy proof, compact semantic search, swipeable feature cards with live pagination, expandable technical details, and touch-friendly navigation and calls to action. Add the standalone Phokus aperture SVG asset.
75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 100 900;
|
|
src: url("@fontsource-variable/inter/files/inter-latin-wght-normal.woff2") format("woff2-variations");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Space Grotesk";
|
|
font-style: normal;
|
|
font-display: swap;
|
|
font-weight: 300 700;
|
|
src: url("@fontsource-variable/space-grotesk/files/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
|
|
}
|
|
|
|
/* Phokus brand tokens — near-black surfaces, hairline edges, one amber accent
|
|
(the iris focal point). Borrowed from the app, not copied literally. */
|
|
@theme {
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
|
|
|
|
--color-canvas: #0a0b0d;
|
|
--color-surface: #0f1116;
|
|
--color-surface-2: #161922;
|
|
--color-edge: #ffffff14;
|
|
--color-edge-strong: #ffffff2b;
|
|
--color-ink: #e8e9ec;
|
|
--color-muted: #9a9ca3;
|
|
--color-faint: #6b6e76;
|
|
--color-amber: #e6a23c;
|
|
--color-amber-soft: #f0bd6f;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--color-canvas);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a:focus-visible,
|
|
summary:focus-visible {
|
|
outline: 2px solid var(--color-amber);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
@media (max-width: 63.999rem) {
|
|
section[id] {
|
|
scroll-margin-top: 6.25rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|