275 lines
13 KiB
TypeScript
275 lines
13 KiB
TypeScript
import { defineConfig, presetUno } from "unocss";
|
|
|
|
const colors = {
|
|
bg: "#080d16",
|
|
"bg-deep": "#050910",
|
|
panel: "#101722",
|
|
"panel-raised": "#151e2b",
|
|
border: "#263242",
|
|
"border-soft": "#1d2836",
|
|
text: "#f4f7f5",
|
|
muted: "#8f9bab",
|
|
"muted-bright": "#b9c2cc",
|
|
accent: "#46e69e",
|
|
"accent-strong": "#28d985",
|
|
"accent-ink": "#062317",
|
|
danger: "#ff7f7f",
|
|
};
|
|
|
|
export default defineConfig({
|
|
presets: [presetUno({ preflight: false })],
|
|
safelist: [
|
|
"site-shell",
|
|
"site-header",
|
|
"brand",
|
|
"brand-mark",
|
|
"brand-i",
|
|
"status-dot",
|
|
"page",
|
|
"hero",
|
|
"eyebrow",
|
|
"hero-copy",
|
|
"rail-layout",
|
|
"panel",
|
|
"panel-main",
|
|
"panel-side",
|
|
"drop-panel",
|
|
"drop-zone",
|
|
"drop-icon",
|
|
"button",
|
|
"button-large",
|
|
"button-secondary",
|
|
"button-small",
|
|
"side-heading",
|
|
"feature-list",
|
|
"feature",
|
|
"feature-icon",
|
|
"selected-file",
|
|
"selected-card",
|
|
"selected-icon",
|
|
"selected-meta",
|
|
"selected-name",
|
|
"selected-detail",
|
|
"icon-button",
|
|
"selected-actions",
|
|
"privacy-note",
|
|
"error-message",
|
|
"success-title",
|
|
"success-copy",
|
|
"share-label",
|
|
"share-box",
|
|
"share-value",
|
|
"success-actions",
|
|
"qr-panel",
|
|
"qr-frame",
|
|
"qr-title",
|
|
"qr-copy",
|
|
"progress-wrap",
|
|
"progress-track",
|
|
"progress-bar",
|
|
"progress-label",
|
|
"download-page",
|
|
"download-heading",
|
|
"download-intro",
|
|
"download-card",
|
|
"ready-badge",
|
|
"download-file",
|
|
"download-button",
|
|
"preview",
|
|
"preview-caption",
|
|
"state-box",
|
|
"spinner",
|
|
"site-footer",
|
|
"footer-security",
|
|
],
|
|
theme: {
|
|
colors,
|
|
fontFamily: {
|
|
display: "'Instrument Sans', ui-sans-serif, system-ui, sans-serif",
|
|
body: "'Instrument Sans', ui-sans-serif, system-ui, sans-serif",
|
|
mono: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
},
|
|
breakpoints: {
|
|
// Uno's lt-* variants subtract .1px; offset these to preserve the original inclusive max-width queries.
|
|
sm: "560.1px",
|
|
md: "800.1px",
|
|
},
|
|
transitionProperty: {
|
|
drop: "border-color, background, transform",
|
|
button: "transform, background, box-shadow",
|
|
},
|
|
animation: {
|
|
keyframes: {
|
|
progress:
|
|
"{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}",
|
|
spin: "{to{transform:rotate(360deg)}}",
|
|
},
|
|
},
|
|
},
|
|
shortcuts: {
|
|
"site-shell":
|
|
"w-[min(1180px,calc(100%_-_40px))] min-h-screen mx-auto flex flex-col lt-sm:w-[min(100%_-_26px,1180px)]",
|
|
"site-header": "h-16 flex items-center justify-between lt-sm:h-[72px]",
|
|
brand:
|
|
"inline-flex items-center gap-[11px] text-[var(--text)] font-display text-[21px] font-800 tracking-[-.04em] no-underline",
|
|
"brand-mark":
|
|
"w-[33px] h-[33px] grid place-items-center border border-[rgba(70,230,158,.3)] rounded-[10px] text-accent bg-[rgba(70,230,158,.08)] [&>svg]:w-[19px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.8] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
"brand-i":
|
|
"relative after:absolute after:left-[22%] after:top-[4.5px] after:h-[3.5px] after:w-[3.5px] after:-translate-x-[22%] after:bg-accent after:content-empty",
|
|
"status-dot":
|
|
"w-[7px] h-[7px] rounded-full bg-accent shadow-[0_0_12px_rgba(70,230,158,.75)]",
|
|
page: "pt-4 pb-[64px] lt-md:pt-[50px] lt-sm:pt-[40px] lt-sm:pb-[50px]",
|
|
hero: "max-w-[720px] mb-[44px] lt-sm:mb-[30px]",
|
|
eyebrow:
|
|
"m-0 mb-[15px] text-accent text-[12px] font-700 tracking-[.14em] uppercase",
|
|
"hero-copy":
|
|
"max-w-[600px] m-0 text-[var(--muted)] text-[18px] leading-[1.65] lt-sm:text-[16px]",
|
|
"rail-layout":
|
|
"grid grid-cols-[minmax(0,1.18fr)_minmax(320px,.82fr)] gap-[22px] items-stretch lt-md:grid-cols-[minmax(0,1fr)]",
|
|
panel:
|
|
"min-w-0 border border-[var(--border)] rounded-[20px] bg-[rgba(16,23,34,.9)] shadow-[0_22px_70px_rgba(0,0,0,.18)]",
|
|
"panel-main": "min-h-[418px] p-[clamp(25px,4vw,42px)] lt-sm:p-[22px]",
|
|
"panel-side": "p-[clamp(25px,3vw,36px)] lt-md:min-h-auto lt-sm:p-[22px]",
|
|
"drop-panel": "flex flex-col",
|
|
"drop-zone":
|
|
"my-auto min-h-[282px] flex flex-col items-center justify-center p-[35px] border border-dashed border-[#35475a] rounded-[15px] text-center cursor-pointer bg-[rgba(8,13,22,.48)] transition-drop duration-200 hover:border-accent hover:bg-[rgba(70,230,158,.04)] hover:translate-y-[-2px] [&.is-dragging]:border-accent [&.is-dragging]:bg-[rgba(70,230,158,.04)] [&.is-dragging]:translate-y-[-2px] [&:has(.file-input:focus-visible)]:border-accent [&:has(.file-input:focus-visible)]:bg-[rgba(70,230,158,.04)] [&:has(.file-input:focus-visible)]:translate-y-[-2px] [&:has(.file-input:focus-visible)]:outline-[3px] [&:has(.file-input:focus-visible)]:outline-[rgba(70,230,158,.35)] [&:has(.file-input:focus-visible)]:outline-offset-[3px] [&>h2]:mb-[8px] [&>h2]:text-[21px] [&>h2]:tracking-[-.025em] [&>p]:mb-[21px] [&>p]:text-[var(--muted)] [&>p]:text-[14px] lt-sm:min-h-[250px] lt-sm:py-[25px] lt-sm:px-[15px]",
|
|
"drop-icon":
|
|
"w-[54px] h-[54px] grid place-items-center mb-[20px] rounded-[15px] text-accent bg-[rgba(70,230,158,.1)] [&>svg]:w-[27px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
button:
|
|
"min-h-[48px] inline-flex items-center justify-center gap-[10px] px-[20px] rounded-[10px] text-[var(--accent-ink)] bg-accent font-700 no-underline cursor-pointer transition-button duration-180 hover:not-disabled:bg-[#5ef0ae] hover:not-disabled:translate-y-[-2px] hover:not-disabled:shadow-[0_10px_28px_rgba(70,230,158,.16)] disabled:cursor-not-allowed disabled:opacity-55 [&>svg]:w-[20px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-2 [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
"button-large": "min-h-[58px] w-full text-[16px]",
|
|
"button-secondary":
|
|
"text-[var(--text)] border border-[var(--border)] bg-[var(--panel-raised)] hover:not-disabled:bg-[#1a2533] hover:not-disabled:shadow-none",
|
|
"button-small": "min-h-[39px] px-[14px] text-[13px]",
|
|
"side-heading": "mb-[24px] text-[17px] tracking-[-.02em]",
|
|
"feature-list": "grid gap-[23px] m-0 p-0 list-none",
|
|
feature:
|
|
"grid grid-cols-[38px_1fr] gap-[14px] [&_h3]:m-[1px_0_4px] [&_h3]:text-[14px] [&_p]:m-0 [&_p]:text-[var(--muted)] [&_p]:text-[13px] [&_p]:leading-[1.5]",
|
|
"feature-icon":
|
|
"w-[38px] h-[38px] grid place-items-center border border-[rgba(70,230,158,.16)] rounded-[10px] text-accent bg-[rgba(70,230,158,.06)] [&>svg]:w-[18px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
"selected-file": "h-full flex flex-col justify-center",
|
|
"selected-card":
|
|
"flex items-center gap-[16px] p-[17px] border border-[var(--border)] rounded-[13px] bg-[var(--bg)]",
|
|
"selected-icon":
|
|
"w-[49px] h-[49px] flex-none grid place-items-center rounded-[12px] text-accent bg-[rgba(70,230,158,.09)] [&>svg]:w-[24px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
"selected-meta": "min-w-0 flex-1",
|
|
"selected-name":
|
|
"m-0 mb-[3px] overflow-hidden text-[var(--text)] font-600 text-ellipsis whitespace-nowrap",
|
|
"selected-detail": "m-0 text-[var(--muted)] text-[13px]",
|
|
"icon-button":
|
|
"w-[38px] h-[38px] flex-none grid place-items-center rounded-[9px] text-[var(--muted)] bg-transparent cursor-pointer hover:text-[var(--text)] hover:bg-[var(--panel-raised)] [&>svg]:w-[18px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.8] [&>svg]:[stroke-linecap:round]",
|
|
"selected-actions":
|
|
"grid grid-cols-[1fr_auto] gap-[10px] mt-[18px] lt-sm:grid-cols-[1fr]",
|
|
"privacy-note":
|
|
"flex items-start gap-[9px] m-[21px_0_0] text-[var(--muted)] text-[12px] leading-[1.5] [&>svg]:w-[15px] [&>svg]:min-w-[15px] [&>svg]:mt-[1px] [&>svg]:fill-none [&>svg]:stroke-accent [&>svg]:stroke-width-[1.8]",
|
|
"error-message": "m-[16px_0_0] text-danger text-[13px]",
|
|
"success-title": "mb-[8px] text-[27px] tracking-[-.04em]",
|
|
"success-copy": "mb-[27px] text-[var(--muted)] leading-[1.6]",
|
|
"share-label":
|
|
"block mb-[9px] text-[var(--muted-bright)] text-[12px] font-600",
|
|
"share-box":
|
|
"flex gap-[9px] p-[8px] border border-[var(--border)] rounded-[12px] bg-[var(--bg)] lt-sm:flex-col",
|
|
"share-value":
|
|
"min-w-0 flex-1 p-[10px_7px] overflow-hidden border-0 text-accent bg-transparent font-mono text-[13px] text-ellipsis whitespace-nowrap lt-sm:w-full",
|
|
"success-actions": "mt-[28px]",
|
|
"qr-panel":
|
|
"flex flex-col items-center justify-center text-center lt-md:py-[36px]",
|
|
"qr-frame":
|
|
"w-[min(100%,300px)] aspect-square p-[16px] rounded-[15px] bg-white shadow-[0_16px_45px_rgba(0,0,0,.24)] lt-md:w-[min(260px,80vw)] [&>svg]:block [&>svg]:w-full [&>svg]:h-full",
|
|
"qr-title": "mt-[22px] mb-[7px] text-[16px]",
|
|
"qr-copy":
|
|
"max-w-[260px] m-0 text-[var(--muted)] text-[13px] leading-[1.55]",
|
|
"progress-wrap": "mt-[24px]",
|
|
"progress-track": "h-[5px] overflow-hidden rounded-full bg-[#263242]",
|
|
"progress-bar":
|
|
"w-[38%] h-full rounded-inherit bg-accent animate-[progress_1.3s_ease-in-out_infinite]",
|
|
"progress-label": "mt-[11px] text-[var(--muted)] text-[13px]",
|
|
"download-page":
|
|
"max-w-[920px] mx-auto py-[82px] pb-[72px] lt-sm:pt-[50px]",
|
|
"download-heading":
|
|
"mb-[13px] text-[clamp(34px,5vw,53px)] text-center tracking-[-.05em]",
|
|
"download-intro":
|
|
"max-w-[580px] mx-auto mb-[35px] text-[var(--muted)] text-[16px] leading-[1.6] text-center",
|
|
"download-card": "max-w-[680px] mx-auto p-[clamp(25px,5vw,42px)]",
|
|
"ready-badge":
|
|
"w-fit flex items-center gap-[8px] mx-auto mb-[25px] py-[7px] px-[11px] rounded-full text-accent bg-[rgba(70,230,158,.08)] text-[12px] font-700",
|
|
"download-file": "mb-[22px]",
|
|
"download-button": "mt-[18px]",
|
|
preview:
|
|
"mt-[26px] overflow-hidden border border-[var(--border)] rounded-[14px] bg-[var(--bg-deep)] [&_img]:w-full [&_img]:max-h-[460px] [&_img]:block [&_img]:object-contain [&_video]:w-full [&_video]:max-h-[460px] [&_video]:block [&_video]:object-contain",
|
|
"preview-caption":
|
|
"p-[10px_14px] border-t border-[var(--border-soft)] text-[var(--muted)] text-[12px] text-center",
|
|
"state-box":
|
|
"min-h-[330px] flex flex-col items-center justify-center text-center [&>h2]:mb-[8px] [&>h2]:text-[21px] [&>p]:max-w-[420px] [&>p]:mb-[22px] [&>p]:text-[var(--muted)] [&>p]:leading-[1.55]",
|
|
spinner:
|
|
"w-[32px] h-[32px] mb-[19px] border-[3px] border-[#263242] border-t-accent rounded-full animate-[spin_.8s_linear_infinite]",
|
|
"site-footer":
|
|
"min-h-[86px] flex items-center justify-between gap-[20px] border-t border-[var(--border-soft)] text-[var(--muted)] text-[12px] lt-sm:py-[23px] lt-sm:flex-col lt-sm:items-start [&>p]:m-0",
|
|
"footer-security":
|
|
"flex items-center gap-[7px] [&>svg]:w-[15px] [&>svg]:fill-none [&>svg]:stroke-accent [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
|
|
},
|
|
preflights: [
|
|
{
|
|
layer: "base",
|
|
getCSS: () => `
|
|
@font-face {
|
|
font-family: 'Instrument Sans';
|
|
src: url('/fonts/InstrumentSans-VariableFont_wdth,wght.woff2') format('woff2');
|
|
font-display: swap;
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
}
|
|
:root {
|
|
--bg: #080d16;
|
|
--bg-deep: #050910;
|
|
--panel: #101722;
|
|
--panel-raised: #151e2b;
|
|
--border: #263242;
|
|
--border-soft: #1d2836;
|
|
--text: #f4f7f5;
|
|
--muted: #8f9bab;
|
|
--muted-bright: #b9c2cc;
|
|
--accent: #46e69e;
|
|
--accent-strong: #28d985;
|
|
--accent-ink: #062317;
|
|
--danger: #ff7f7f;
|
|
--font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
|
|
html { min-height: 100%; color-scheme: dark; background: var(--bg); font-family: var(--font-body); }
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
color: var(--text);
|
|
background: radial-gradient(circle at 78% 8%, rgba(70, 230, 158, .07), transparent 27rem), radial-gradient(circle at 10% 50%, rgba(58, 126, 250, .05), transparent 30rem), var(--bg);
|
|
}
|
|
body::before {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
content: '';
|
|
opacity: .22;
|
|
background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
|
|
background-size: 42px 42px;
|
|
mask-image: linear-gradient(to bottom, black, transparent 72%);
|
|
}
|
|
button, input { font: inherit; }
|
|
button, a { -webkit-tap-highlight-color: transparent; }
|
|
a { color: inherit; }
|
|
button { border: 0; }
|
|
:focus-visible { outline: 3px solid rgba(70,230,158,.5); outline-offset: 3px; }
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1, h2, h3 { font-family: var(--font-display); }
|
|
h1 { margin-bottom: 17px; font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -.055em; }
|
|
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
}
|
|
`,
|
|
},
|
|
],
|
|
});
|