/* bricolage-grotesque-vietnamese-wght-normal */
@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* bricolage-grotesque-latin-ext-wght-normal */
@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* bricolage-grotesque-latin-wght-normal */
@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* fraunces-vietnamese-wght-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/fraunces-vietnamese-wght-normal-CnvboYUG.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* fraunces-latin-ext-wght-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/fraunces-latin-ext-wght-normal-Ca2vKHc0.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* fraunces-latin-wght-normal */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/fraunces-latin-wght-normal-ukD16Tqj.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* space-grotesk-vietnamese-wght-normal */
@font-face {
font-family: 'Space Grotesk Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url(/assets/space-grotesk-vietnamese-wght-normal-D0rl6rjA.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* space-grotesk-latin-ext-wght-normal */
@font-face {
font-family: 'Space Grotesk Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url(/assets/space-grotesk-latin-ext-wght-normal-D9tNdqV9.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* space-grotesk-latin-wght-normal */
@font-face {
font-family: 'Space Grotesk Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url(/assets/space-grotesk-latin-wght-normal-BhU9QXUp.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-wght-normal */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(data:font/woff2;base64,d09GMgABAAAAAAfsABQAAAAAEAwAAAeCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoP0hWQVJbBmA/U1RBVIFiJyYAdC9qEQgKhGSEAAsgADCGCAE2AiQDOgQgBYlMB4EUDAcbLQ4onoexrSC/2ZyLAa8p8VHB8/x3Vue+V0hVJalMJg2nx/TCrQXxBeqLjQG7FyM1WEa/X1tEXN7cFz9EJEMmMUz3RihWSSKeQCbcIou0izz/C8v+fq3VfajEa9gDD11CImXS7qL/RJFVzC1qiB6KmKeD6TZdQ6IRGv78dL6uSVVCfgni5mzu7kcgQBgAEAQTQRCoL++STTYybkJxNfQxAAIAGu8OdEB9teW2jh4BpgDqFjAeSEByW3zFP0CBBgNMsMCGEDjgggdhiEAUAeIIED7ABTDUEnkIE9Q9ahFgKttcVhApo4ACB4qobHaccgDfEjFO6aaWUhjMLt2SyIvHKoDqoA4CSUwEIYQCEjhAO9R1G6keDeDZGjNo+AhxOjCEGTr1WeIF3kYBiLAOKvkJSMiKX0VdAyQt3SDJClCkxJCHkCzfqyVTriJZLcolS32JZHUekq2TYNkYtCtjYHMQXSxGjXDz2t/yLWXzDzxz+o3zFwDEaN23F+13pyMdQAEaSKAR9vcGq4A4MTSKCElGW+M7UcY7xqkggITb28ZJhlqc9q2twYKTt0NjixBgYvO9BIihEBLYuOFXQzfIQ7dXGUEEEgFDooBfAzqiQbpJrhiWSuKJCRFKYbHCyJKI2G5GiZbNAvgAu5pc3vwx4G+g3aDkhklABiSz0BICXrYghtYhx/cdJ+44rY2oZ0aMNRFz3VZjb6W33F3gzltqtOCV8tTHSpOeXuItfvr5lCdfzFpqtEitvqdcdGGFd28ZqqC0tPbeChGXgrIlnhSWu/eUso4uKWFLugyDzQJhflY4659+WjQ++6x72WUMv9G8mw6QJl7BVxX5fe/kpUsOvnZwee9uQ0cGXYd0o89XB2748sDSnt8d2VphdOTTgceDVvOds0v9P/s7HPq15aGun/6Vllb56f1dl0t1LejqrNkpdRZsG8TOnM5vkBG5oiVyVGnS8LHps5cfNWJs6qKPfaNSxiQNBUm3cKNWROr0GSur7Za31k1vieq7LH11VF+jXdRIasRKflc7jkobm1Z9te1IyZA0pDkhLR98+H37Zf1c/8at+dB7x+7GfVyTfJMPiYztsnl59Y5l4j+0n1RXlpHnF3Tq7HecmNF/CJodEMAikruxiyJaGLvHOdAfoA+oDvpjBm2b91cHGRZMU9n25xEU0A8fgEEAdKI3Q1iDtc034sug5YVMkE2jsE+BIkwSoQ3gxXMqz9tELp48bd0cFKOKS7xYjEuXBnZP5ia7DyiO/X/YI+PQSbt2uSdqAkWL9nQbV1XB94/+uPfdZz8dnXYFBYrcTl2SIR/ybxJNJPz/Gupb0JaZeens2ekC7EKr8t+Ls/P5VJPYJdHKyqfg2nqU6bhlidzcddQV/7MmecTzJ5VPcKXkNKSEogHjYFx6QZ7rQ+FSe8njaiNuOnXS8H2ScQ619c2mC3VTtauL0rRbXd/CkSOP37FY9Zkjz8+GibYUMOEWF+RdrFS8Ecv1SHOpPUPZGEIpjPvFyU5cXKjd6OXqorTqy9GwRd++HVufPGnVsW+aO3vggKZ18jR9sXaTC1PWTEsVUaK0FkNySbTQDqlm2PfDjZcu4aalnSLKjnOoYQ0nUlqqXcGpPu/4VgV/xU2pAqW4BW3qzhQ8/hFKhV2qE3+BKAtDqBXjfgnVdH4y0wg5tbVNRenNdTWOrenWLcupQdmsbq5b+18piTe/xRdp1xbILxNPJGInm2z6hoB21Lal0i+ePTtd7B45+3XhFJ329evskXm7qurUVREotqSluSo/L29d3qDhI4YOQqWhI4YNvBNfsMHeXKemXrxQfKeuPOGRVayA3JtkJKEgbPp+dXUDluddutRYLFoXGXWX6N3WFaGLbQtRSitVYNacTNSdy7AaG/HSaUEANcBoGXNdcZvZsOqQ1icBDv21/gzAoYPHH/WDW0qNR3QTYKEAEHig6o13NXbND06CQPlRtYjGNnSktRc09k1mAMDvAlDKfQjgy6fssInlfzmNAjKkDxoxHOBLdVRAIVt9j4qo+hA1w9T1aNBNTUOTTNUHLbqokE+UAfJXCIGw/IxCSL5GRUJeR40rL/UxTm4Q08H6MbCs70ObuNyIIXrINHQYInF06UUlevTjbQzTh5upiDMzMMogUtEnjPs/Y7jAHCJeB0GBHh04tC6FiB6ZFB1oArUSIoFoqhzCeAN6lHwm0T4C3VVPWvjpSMXReuWesMEcoqrmgtNBGd2noWeV0hNAz9rFeShNJxHGsPa3HXeKTk8b55hahySYHaYKKFFLpCfN8rsoaJn01CR04Gkc+5k7KVTCmClX8Q10HCrUEkVlSX+XO33oQR9609tJ516H497WSobWs5Up6TLaS10/dessIskgJSLiDlWvHVUywpkQ7hdPZqGyiEF0uVQerVcPamT1A3eKXdyI1vG9OoflrSXihZ1qqGE3nhmAgiIbRCQgPLEPtOM3UQwTLYaYYomNlpA44opnjV6jkD6id80OOrzf6BzmMD6eEa1zKyeYG1fzfEf16V6jw9XYOaar1/b2kP/IYX8oR2mcFvv2GtBV3JXgd437AQAA) format('woff2-variations');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2) format('woff2-variations');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* jetbrains-mono-greek-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2) format('woff2-variations');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2) format('woff2-variations');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* jetbrains-mono-latin-wght-normal */
@font-face {
font-family: 'JetBrains Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ==========================================================================
hyphive - UI CORE PRIMITIVES · EPIC dark-luxe
Visual styles for Button, IconButton, Card, Badge, Chip, Tag, Avatar,
PriceTag, StarRating, Spinner, Skeleton, Divider.
Rules:
· Consumes design tokens from theme.css ONLY - no hard-coded hex.
Soft/luminous fills are derived with color-mix() over base COLOUR
tokens (--primary, --accent, --data, --fg, semantics) so they track
the theme in both dark (hero) and light modes.
· All hover/press transforms + ambient animation neutralise under
prefers-reduced-motion. Focus is :focus-visible only, luminous ring.
· Motion uses transform/opacity only, with shared eases + durations.
========================================================================== */
/* Local, reusable derivations (token-driven, theme-aware) ------------------ */
.btn,
.icon-btn,
.ui-card,
.badge,
.chip,
.ui-tag,
.avatar,
.price-tag,
.star-rating {
/* soft luminous fill + hairline ring strengths, tuned once */
--fill-soft: 14%;
--fill-hover: 20%;
--ring-tint: 34%;
--sheen-hi: color-mix(in srgb, var(--fg) 20%, transparent);
}
/* ==========================================================================
BUTTON - primary(luminous glow) · accent(warm) · danger · outline · ghost
========================================================================== */
.btn {
--btn-h: 44px;
--btn-px: var(--space-5);
--btn-fs: var(--fs-sm);
--btn-gap: var(--space-2);
--btn-radius: var(--radius-md);
--btn-tx: 0px;
--btn-ty: 0px;
--btn-scale: 1;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
min-height: var(--btn-h);
padding: 0 var(--btn-px);
border: 1px solid transparent;
border-radius: var(--btn-radius);
font-family: var(--font-sans);
font-size: var(--btn-fs);
font-weight: var(--fw-semibold);
line-height: 1;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
user-select: none;
isolation: isolate;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transform: translate3d(var(--btn-tx), var(--btn-ty), 0) scale(var(--btn-scale));
transition:
background-color var(--dur-fast) var(--ease-standard),
background-image var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-out-quint),
transform var(--dur-fast) var(--ease-out-quint);
}
/* cursor-follow glow highlight (set via --mx/--my by JS on fine pointers) */
.btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
120px circle at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--fg) 16%, transparent),
transparent 60%
);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-standard);
pointer-events: none;
z-index: 0;
}
/* gradient sheen sweep - glides across on hover */
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
border-radius: inherit;
background: linear-gradient(
100deg,
transparent 20%,
color-mix(in srgb, var(--fg) 22%, transparent) 50%,
transparent 80%
);
transform: translateX(-160%) skewX(-14deg);
opacity: 0;
pointer-events: none;
z-index: 1;
transition: transform var(--dur-slow) var(--ease-out-quint), opacity var(--dur-fast) linear;
}
.btn > * {
position: relative;
z-index: 2;
}
.btn:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.btn:hover:not(:disabled):not([aria-disabled='true'])::before {
opacity: 1;
}
.btn:hover:not(:disabled):not([aria-disabled='true'])::after {
transform: translateX(240%) skewX(-14deg);
opacity: 1;
}
.btn:active:not(:disabled):not([aria-disabled='true']) {
--btn-scale: 0.97;
}
.btn:disabled,
.btn[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.5;
filter: saturate(0.7);
}
.btn__label {
display: inline-flex;
align-items: center;
transition: opacity var(--dur-micro) var(--ease-standard);
}
.btn__icon {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.btn__icon svg {
display: block;
width: 1.15em;
height: 1.15em;
}
/* sizes -------------------------------------------------------------------- */
.btn--sm {
--btn-h: 36px;
--btn-px: var(--space-4);
--btn-fs: var(--fs-xs);
--btn-gap: var(--space-1);
--btn-radius: var(--radius-sm);
}
.btn--md {
--btn-h: 44px;
}
.btn--lg {
--btn-h: 54px;
--btn-px: var(--space-6);
--btn-fs: var(--fs-body);
--btn-radius: var(--radius-lg);
}
.btn--block {
display: flex;
width: 100%;
}
/* variant - PRIMARY (bioluminescent green, gradient + soft glow) ----------- */
.btn--primary {
background-image: var(--grad-primary);
background-color: var(--primary);
color: var(--primary-contrast);
box-shadow:
var(--glow-sm),
inset 0 1px 0 var(--sheen-hi);
}
.btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
box-shadow:
var(--glow-md),
inset 0 1px 0 var(--sheen-hi);
}
.btn--primary:active:not(:disabled):not([aria-disabled='true']) {
box-shadow: var(--glow-sm), inset 0 1px 0 var(--sheen-hi);
}
/* variant - ACCENT (warm chanterelle gold, sparse high-emphasis) ----------- */
.btn--accent {
background-image: var(--grad-accent);
background-color: var(--accent);
color: var(--accent-contrast);
box-shadow:
var(--glow-accent),
inset 0 1px 0 var(--sheen-hi);
}
.btn--accent:hover:not(:disabled):not([aria-disabled='true']) {
box-shadow:
var(--glow-accent),
var(--elev-hover),
inset 0 1px 0 var(--sheen-hi);
}
/* variant - DANGER --------------------------------------------------------- */
.btn--danger {
background-color: var(--danger);
color: var(--danger-fg);
box-shadow: var(--shadow-2), inset 0 1px 0 var(--sheen-hi);
}
.btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
background-color: color-mix(in srgb, var(--danger) 88%, var(--fg));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent),
0 8px 28px color-mix(in srgb, var(--danger) 32%, transparent),
inset 0 1px 0 var(--sheen-hi);
}
/* variant - OUTLINE (gradient hairline border on any surface) --------------- */
.btn--outline {
background: color-mix(in srgb, var(--bg-2) 60%, transparent);
color: var(--fg-body);
}
.btn--outline::after {
/* replace the light-sheen sweep with the gradient hairline ring */
width: 100%;
height: 100%;
background: var(--gradient-border);
transform: none;
opacity: 1;
padding: 1px;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: opacity var(--dur-fast) var(--ease-standard);
}
.btn--outline:hover:not(:disabled):not([aria-disabled='true']) {
color: var(--fg);
background: color-mix(in srgb, var(--primary) 8%, var(--bg-2));
box-shadow: var(--glow-sm);
}
.btn--outline:hover:not(:disabled):not([aria-disabled='true'])::after {
opacity: 1;
transform: none;
}
/* variant - GHOST (glass) -------------------------------------------------- */
.btn--ghost {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
border-color: var(--glass-border);
color: var(--fg-body);
}
.btn--ghost::after {
display: none;
}
.btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--glass-bg-strong);
border-color: var(--border-strong);
color: var(--fg);
}
/* loading ------------------------------------------------------------------ */
.btn--loading {
cursor: progress;
}
.btn--loading .btn__label,
.btn--loading .btn__icon {
opacity: 0;
}
.btn__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ==========================================================================
ICON BUTTON
========================================================================== */
.icon-btn {
--ib-size: 40px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ib-size);
height: var(--ib-size);
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-out-quint),
transform var(--dur-micro) var(--ease-out-quint);
}
.icon-btn svg {
display: block;
width: 1.25em;
height: 1.25em;
}
.icon-btn:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--bg-3);
color: var(--fg);
}
.icon-btn:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.icon-btn:active:not(:disabled):not([aria-disabled='true']) {
transform: scale(0.92);
}
.icon-btn:disabled,
.icon-btn[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.5;
}
.icon-btn--sm {
--ib-size: 34px;
border-radius: var(--radius-sm);
}
.icon-btn--lg {
--ib-size: 48px;
border-radius: var(--radius-lg);
}
.icon-btn--solid {
background: var(--bg-3);
color: var(--fg);
border-color: var(--hairline);
}
.icon-btn--solid:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--bg-4);
border-color: var(--border);
}
.icon-btn--primary {
background-image: var(--grad-primary);
background-color: var(--primary);
color: var(--primary-contrast);
box-shadow: var(--glow-sm);
}
.icon-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
box-shadow: var(--glow-md);
color: var(--primary-contrast);
}
.icon-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
background: color-mix(in srgb, var(--danger) var(--fill-soft), transparent);
color: var(--danger);
}
.icon-btn--glass {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border-color: var(--glass-border);
color: var(--fg);
box-shadow: var(--shadow-1);
}
.icon-btn__badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--danger);
color: var(--danger-fg);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-variant-numeric: tabular-nums;
line-height: 1;
box-shadow: 0 0 0 2px var(--bg-0);
}
/* ==========================================================================
CARD - elevated surface · gradient hairline · glow/tilt/spotlight
========================================================================== */
.ui-card {
--rx: 0deg;
--ry: 0deg;
position: relative;
display: block;
background: var(--bg-3);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
color: inherit;
}
/* gradient hairline ring (premium surface signature) */
.ui-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-border);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.ui-card > * {
position: relative;
z-index: 0;
}
.ui-card--padded {
padding: var(--space-5);
}
/* content clip only when NOT tilting (tilt needs 3D overflow) */
.ui-card:not(.ui-card--tilt) {
overflow: clip;
}
/* interactive affordance (link / button cards) */
.ui-card--interactive {
cursor: pointer;
text-decoration: none;
}
.ui-card--interactive:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
/* hover lift + luminous glow */
.ui-card--hover,
.ui-card--interactive {
transition:
transform var(--dur-base) var(--ease-out-quint),
box-shadow var(--dur-base) var(--ease-out-quint),
border-color var(--dur-base) var(--ease-standard);
will-change: transform;
}
.ui-card--hover:hover,
.ui-card--interactive:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-3), var(--glow-sm);
}
/* glow variant - permanent primary aura, intensifies on hover */
.ui-card--glow {
box-shadow: var(--shadow-1), var(--glow-sm);
}
.ui-card--glow:hover {
box-shadow: var(--shadow-3), var(--glow-md);
}
/* cursor tilt (--rx/--ry set by JS; degrees) */
.ui-card--tilt {
transform-style: preserve-3d;
transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint);
will-change: transform;
}
.ui-card--tilt:hover {
transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
box-shadow: var(--elev-hover), var(--glow-sm);
}
/* cursor spotlight (--mx/--my set by JS) */
.ui-card--spotlight::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--primary) 16%, transparent),
transparent 55%
);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-standard);
pointer-events: none;
z-index: 1;
}
.ui-card--spotlight:hover::before {
opacity: 1;
}
/* ==========================================================================
BADGE - refined luminous soft-fill pill
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px var(--space-2);
border-radius: var(--radius-pill);
border: 1px solid transparent;
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-label);
line-height: 1;
white-space: nowrap;
}
.badge__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: currentColor;
box-shadow: 0 0 6px currentColor;
flex: 0 0 auto;
}
.badge svg {
width: 12px;
height: 12px;
}
.badge--neutral {
background: var(--bg-3);
color: var(--fg-body);
border-color: var(--hairline);
}
.badge--muted {
background: var(--bg-2);
color: var(--fg-muted);
border-color: var(--hairline);
}
.badge--primary {
background: color-mix(in srgb, var(--primary) var(--fill-soft), transparent);
color: var(--primary-bright);
border-color: color-mix(in srgb, var(--primary) var(--ring-tint), transparent);
}
.badge--accent {
background: color-mix(in srgb, var(--accent) var(--fill-soft), transparent);
color: var(--accent-bright);
border-color: color-mix(in srgb, var(--accent) var(--ring-tint), transparent);
}
.badge--data {
background: color-mix(in srgb, var(--data) var(--fill-soft), transparent);
color: var(--data);
border-color: color-mix(in srgb, var(--data) var(--ring-tint), transparent);
}
.badge--success {
background: color-mix(in srgb, var(--success) var(--fill-soft), transparent);
color: var(--success);
border-color: color-mix(in srgb, var(--success) var(--ring-tint), transparent);
}
.badge--warning {
background: color-mix(in srgb, var(--warning) var(--fill-soft), transparent);
color: var(--warning);
border-color: color-mix(in srgb, var(--warning) var(--ring-tint), transparent);
}
.badge--danger {
background: color-mix(in srgb, var(--danger) var(--fill-soft), transparent);
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) var(--ring-tint), transparent);
}
/* solid emphasis */
.badge--solid {
border-color: transparent;
}
.badge--solid.badge--primary {
background: var(--primary);
color: var(--primary-contrast);
box-shadow: var(--glow-sm);
}
.badge--solid.badge--accent {
background: var(--accent);
color: var(--accent-contrast);
box-shadow: var(--glow-accent);
}
.badge--solid.badge--danger {
background: var(--danger);
color: var(--danger-fg);
}
.badge--solid.badge--success {
background: var(--success);
color: var(--success-fg);
}
.badge--solid.badge--data {
background: var(--data);
color: var(--bg-0);
}
/* ==========================================================================
CHIP - interactive filter pill (toggle)
========================================================================== */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 38px;
padding: 0 var(--space-4);
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--fg-body);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-micro) var(--ease-out-quint);
}
.chip svg {
width: 16px;
height: 16px;
}
.chip:hover:not(:disabled) {
background: var(--bg-3);
color: var(--fg);
border-color: var(--border-strong);
}
.chip:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.chip:active:not(:disabled) {
transform: scale(0.96);
}
.chip:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.chip--active {
background: color-mix(in srgb, var(--primary) var(--fill-soft), transparent);
color: var(--primary-bright);
border-color: var(--border-primary);
box-shadow: var(--glow-sm), inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}
.chip--active:hover {
background: color-mix(in srgb, var(--primary) var(--fill-hover), transparent);
color: var(--primary-bright);
border-color: var(--primary);
}
/* ==========================================================================
TAG - static technical label (P#, %, lot codes)
========================================================================== */
.ui-tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--hairline);
background: var(--bg-2);
color: var(--fg-body);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
line-height: 1.4;
white-space: nowrap;
}
.ui-tag--mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.ui-tag svg {
width: 13px;
height: 13px;
}
.ui-tag--primary { background: color-mix(in srgb, var(--primary) var(--fill-soft), transparent); color: var(--primary-bright); border-color: transparent; }
.ui-tag--accent { background: color-mix(in srgb, var(--accent) var(--fill-soft), transparent); color: var(--accent-bright); border-color: transparent; }
.ui-tag--data { background: color-mix(in srgb, var(--data) var(--fill-soft), transparent); color: var(--data); border-color: transparent; }
.ui-tag--success { background: color-mix(in srgb, var(--success) var(--fill-soft), transparent); color: var(--success); border-color: transparent; }
.ui-tag--warning { background: color-mix(in srgb, var(--warning) var(--fill-soft), transparent); color: var(--warning); border-color: transparent; }
.ui-tag--danger { background: color-mix(in srgb, var(--danger) var(--fill-soft), transparent); color: var(--danger); border-color: transparent; }
/* ==========================================================================
AVATAR - crisp ring + subtle glow
========================================================================== */
.avatar {
--av-size: 40px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--av-size);
height: var(--av-size);
flex: 0 0 auto;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--primary) var(--fill-soft), var(--bg-3));
color: var(--primary-bright);
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
font-size: calc(var(--av-size) * 0.4);
line-height: 1;
overflow: hidden;
user-select: none;
}
.avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.avatar--ring {
box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--border-strong);
}
.avatar--ring-primary {
box-shadow:
0 0 0 2px var(--bg-0),
0 0 0 3px var(--primary),
var(--glow-sm);
}
.avatar--square {
border-radius: var(--radius-md);
}
.avatar__status {
position: absolute;
right: 0;
bottom: 0;
width: 28%;
height: 28%;
min-width: 8px;
min-height: 8px;
border-radius: var(--radius-pill);
background: var(--success);
box-shadow: 0 0 0 2px var(--bg-0), 0 0 6px color-mix(in srgb, var(--success) 60%, transparent);
}
/* ==========================================================================
PRICE TAG - mono, tabular, slashed-zero
========================================================================== */
.price-tag {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
letter-spacing: var(--tracking-tight);
color: var(--fg);
}
.price-tag__amount {
font-size: var(--fs-lead);
font-weight: var(--fw-semibold);
line-height: 1;
}
.price-tag--sm .price-tag__amount { font-size: var(--fs-body); }
.price-tag--lg .price-tag__amount { font-size: var(--fs-h3); }
.price-tag__meta {
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-label);
color: var(--fg-muted);
}
.price-tag__approx {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--fg-muted);
letter-spacing: normal;
}
.price-tag--trade { color: var(--data); }
.price-tag--wanted { color: var(--accent-bright); }
.price-tag--free { color: var(--success); }
/* ==========================================================================
STAR RATING - luminous
========================================================================== */
.star-rating {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.star-rating__stars {
display: inline-flex;
align-items: center;
gap: 1px;
}
.star-rating__star {
position: relative;
display: inline-flex;
width: var(--star-size, 16px);
height: var(--star-size, 16px);
color: var(--border-strong);
}
.star-rating__star svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.star-rating__fill {
position: absolute;
inset: 0;
overflow: hidden;
color: var(--accent);
display: inline-flex;
filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent));
}
.star-rating__fill svg {
fill: currentColor;
}
.star-rating__count {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
font-size: var(--fs-xs);
color: var(--fg-muted);
letter-spacing: var(--tracking-tight);
}
.star-rating--sm { --star-size: 14px; }
.star-rating--md { --star-size: 16px; }
.star-rating--lg { --star-size: 22px; }
/* editable */
.star-rating--editable .star-rating__btn {
padding: 2px;
margin: -2px;
background: none;
border: 0;
cursor: pointer;
color: inherit;
line-height: 0;
-webkit-tap-highlight-color: transparent;
transition: transform var(--dur-micro) var(--ease-out-quint);
}
.star-rating--editable .star-rating__btn:hover {
transform: scale(1.18);
}
.star-rating--editable .star-rating__btn:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ==========================================================================
SPINNER
========================================================================== */
.spinner {
display: inline-block;
width: var(--spinner-size, 20px);
height: var(--spinner-size, 20px);
color: currentColor;
vertical-align: middle;
}
.spinner svg {
display: block;
width: 100%;
height: 100%;
animation: hv-spin 0.7s linear infinite;
}
.spinner__track { opacity: 0.22; }
.spinner__head { opacity: 0.95; }
@keyframes hv-spin {
to { transform: rotate(360deg); }
}
/* ==========================================================================
SKELETON - shimmer
========================================================================== */
.ui-skeleton {
display: block;
position: relative;
overflow: hidden;
background: var(--bg-3);
border-radius: var(--radius-sm);
}
.ui-skeleton::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--fg) 8%, transparent),
transparent
);
animation: hv-shimmer 1.5s var(--ease-in-out) infinite;
}
.ui-skeleton--circle {
border-radius: var(--radius-pill);
}
@keyframes hv-shimmer {
100% { transform: translateX(100%); }
}
/* ==========================================================================
DIVIDER
========================================================================== */
.ui-divider {
border: 0;
height: 1px;
width: 100%;
background: var(--hairline);
margin: var(--space-4) 0;
}
.ui-divider--vertical {
width: 1px;
height: auto;
min-height: 1em;
align-self: stretch;
margin: 0 var(--space-3);
}
.ui-divider--labelled {
display: flex;
align-items: center;
gap: var(--space-3);
height: auto;
background: transparent;
color: var(--fg-muted);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.ui-divider--labelled::before,
.ui-divider--labelled::after {
content: '';
flex: 1;
height: 1px;
background: var(--hairline);
}
/* ==========================================================================
REDUCED MOTION - strip transforms + ambient animation
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.btn,
.icon-btn,
.chip,
.ui-card,
.ui-card--hover,
.ui-card--interactive,
.ui-card--tilt,
.star-rating--editable .star-rating__btn {
transition:
background-color var(--dur-fast) linear,
color var(--dur-fast) linear,
border-color var(--dur-fast) linear,
box-shadow var(--dur-fast) linear;
}
.btn {
transform: none;
}
.btn::after,
.btn::before,
.ui-card--spotlight::before {
display: none;
}
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.chip:active:not(:disabled),
.ui-card--hover:hover,
.ui-card--interactive:hover,
.ui-card--tilt:hover,
.star-rating--editable .star-rating__btn:hover {
transform: none;
}
.spinner svg {
animation-duration: 1.4s;
}
.ui-skeleton::after {
animation: none;
}
}
/* =============================================================================
hyphive EPIC - Forms & overlays
Inputs · Textarea · Select · Field · Modal · ConfirmModal · Tabs · Toggle
Alert · Breadcrumbs · EmptyState · Toast
Consumes design tokens only (theme.css). Dark-first, light-aware, a11y,
prefers-reduced-motion respected. No hard-coded brand colours.
============================================================================= */
/* Local fallbacks for motion tokens (values only - never colours) */
.field,
.field-control,
.modal,
.tabs,
.toggle,
.alert,
.breadcrumbs,
.empty-state,
.toast-viewport {
--_dur-micro: var(--dur-micro, 120ms);
--_dur-fast: var(--dur-fast, 180ms);
--_dur-base: var(--dur-base, 240ms);
--_dur-slow: var(--dur-slow, 320ms);
--_ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
--_ease-quint: var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
--_ease-overshoot: var(--ease-overshoot, cubic-bezier(0.34, 1.56, 0.64, 1));
}
/* -----------------------------------------------------------------------------
FIELD
-------------------------------------------------------------------------- */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2, 0.5rem);
min-width: 0;
}
.field__label {
display: inline-flex;
align-items: baseline;
gap: var(--space-1, 0.25rem);
font-family: var(--font-sans);
font-size: var(--fs-label, 0.8125rem);
font-weight: var(--fw-medium, 500);
letter-spacing: var(--tracking-label, 0.01em);
color: var(--fg-body, var(--fg));
line-height: 1.3;
}
.field__required {
color: var(--danger);
font-weight: var(--fw-semibold, 600);
}
.field__optional {
font-family: var(--font-mono);
font-size: var(--fs-xs, 0.6875rem);
text-transform: uppercase;
letter-spacing: var(--tracking-wide, 0.08em);
color: var(--fg-faint, var(--fg-muted));
}
.field__control {
display: block;
min-width: 0;
}
.field__hint {
margin: 0;
font-size: var(--fs-sm, 0.8125rem);
line-height: 1.45;
color: var(--fg-muted);
}
.field__error {
display: flex;
align-items: flex-start;
gap: var(--space-1, 0.35rem);
margin: 0;
font-size: var(--fs-sm, 0.8125rem);
line-height: 1.45;
color: var(--danger);
}
.field__error-icon {
flex: none;
margin-top: 0.12em;
}
/* -----------------------------------------------------------------------------
SHARED CONTROL SKIN (Input shell · Select shell · Textarea)
-------------------------------------------------------------------------- */
.field-control {
--_border: var(--border, var(--glass-border));
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 2.75rem; /* 44px tap target */
box-sizing: border-box;
border: 1px solid var(--_border);
border-radius: var(--radius-md);
background: var(--glass-bg, var(--bg-2));
background-clip: padding-box;
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body, 1rem);
line-height: var(--lh-body, 1.5);
transition:
border-color var(--_dur-fast) var(--_ease),
box-shadow var(--_dur-fast) var(--_ease),
background var(--_dur-fast) var(--_ease);
-webkit-backdrop-filter: blur(var(--glass-blur-sm, 6px));
backdrop-filter: blur(var(--glass-blur-sm, 6px));
}
/* inner luminous top highlight */
.field-control::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 0 var(--sheen, transparent);
}
.field-control:hover:not(.is-disabled) {
border-color: var(--border-strong, var(--_border));
}
.field-control:focus-within {
border-color: var(--primary);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
0 0 24px color-mix(in srgb, var(--primary) 16%, transparent);
}
.field-control.is-invalid {
border-color: var(--danger);
}
.field-control.is-invalid:focus-within {
box-shadow:
0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent),
0 0 24px color-mix(in srgb, var(--danger) 14%, transparent);
}
.field-control.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* bare native control inside a shell */
.input__field,
.select__field {
flex: 1 1 auto;
min-width: 0;
width: 100%;
margin: 0;
padding: 0.6rem 0.9rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
line-height: inherit;
outline: none;
appearance: none;
}
.input__field::placeholder {
color: var(--fg-faint, var(--fg-muted));
opacity: 1;
}
.input__field:disabled,
.select__field:disabled {
cursor: not-allowed;
}
/* number spinner cleanup */
.input__field[type='number']::-webkit-outer-spin-button,
.input__field[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input__field[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* mono for numeric-ish inputs */
.input__field[inputmode='decimal'],
.input__field[inputmode='numeric'],
.input__field[type='number'] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
}
/* sizes */
.input--sm,
.select--sm {
min-height: 2.25rem;
font-size: var(--fs-sm, 0.875rem);
}
.input--sm .input__field,
.select--sm .select__field {
padding: 0.4rem 0.7rem;
}
.input--lg,
.select--lg {
min-height: 3.25rem;
font-size: var(--fs-lead, 1.0625rem);
}
.input--lg .input__field,
.select--lg .select__field {
padding: 0.8rem 1.05rem;
}
/* icons / affixes */
.input__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
color: var(--fg-muted);
transition: color var(--_dur-fast) var(--_ease);
}
.input__icon--left {
padding-left: 0.85rem;
}
.input__icon--right {
padding-right: 0.85rem;
}
.input.has-icon-left .input__field {
padding-left: 0.55rem;
}
.input.has-icon-right .input__field {
padding-right: 0.55rem;
}
.field-control:focus-within .input__icon {
color: var(--primary);
}
.field-control.is-invalid .input__icon {
color: var(--danger);
}
.input__icon--action {
border: 0;
background: transparent;
cursor: pointer;
border-radius: var(--radius-sm);
padding: 0.25rem;
margin-right: 0.55rem;
}
.input__icon--action:hover {
color: var(--fg);
}
.input__icon--action:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* SELECT chevron */
.select {
cursor: pointer;
}
.select__field {
padding-right: 2.6rem;
cursor: pointer;
text-overflow: ellipsis;
}
.select__field option {
color: var(--fg);
background: var(--bg-3, var(--surface));
}
.select__chevron {
position: absolute;
right: 0.85rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--fg-muted);
transition:
color var(--_dur-fast) var(--_ease),
transform var(--_dur-fast) var(--_ease);
}
.select:focus-within .select__chevron {
color: var(--primary);
}
/* TEXTAREA */
.textarea {
display: block;
min-height: 6rem;
padding: 0.7rem 0.9rem;
resize: vertical;
outline: none;
scrollbar-width: thin;
}
.textarea::placeholder {
color: var(--fg-faint, var(--fg-muted));
opacity: 1;
}
.textarea--auto {
resize: none;
overflow-y: hidden;
}
/* -----------------------------------------------------------------------------
MODAL
-------------------------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal, 1000);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4, 1.5rem);
overflow-y: auto;
}
.modal__backdrop {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--bg-0, #000) 62%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-saturate, 1.2));
backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-saturate, 1.2));
opacity: 0;
transition: opacity var(--_dur-base) var(--_ease);
}
.modal.is-open .modal__backdrop {
opacity: 1;
}
.modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 34rem;
max-height: calc(100dvh - var(--space-6, 2rem) * 2);
margin: auto;
border-radius: var(--radius-xl, 1.25rem);
border: 1px solid var(--glass-border, var(--border));
background: var(--glass-bg-strong, var(--bg-3, var(--surface)));
-webkit-backdrop-filter: blur(var(--glass-blur-lg, 28px)) saturate(var(--glass-saturate, 1.3));
backdrop-filter: blur(var(--glass-blur-lg, 28px)) saturate(var(--glass-saturate, 1.3));
box-shadow:
var(--shadow-4, 0 40px 80px -20px rgba(0, 0, 0, 0.6)),
0 0 60px -20px color-mix(in srgb, var(--primary) 24%, transparent);
overflow: hidden;
opacity: 0;
transform: translateY(14px) scale(0.97);
transition:
opacity var(--_dur-base) var(--_ease),
transform var(--_dur-base) var(--_ease-overshoot);
}
.modal.is-open .modal__dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
/* gradient hairline sheen along the top edge */
.modal__dialog::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: var(--gradient-border, linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, transparent), transparent 40%));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.6;
}
.modal__dialog--sm {
max-width: 26rem;
}
.modal__dialog--lg {
max-width: 48rem;
}
.modal__dialog--full {
max-width: min(72rem, calc(100vw - var(--space-6, 2rem)));
}
.modal__header {
display: flex;
align-items: flex-start;
gap: var(--space-3, 1rem);
padding: var(--space-4, 1.5rem) var(--space-5, 1.75rem) var(--space-3, 1rem);
}
.modal__heading {
flex: 1 1 auto;
min-width: 0;
}
.modal__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4, 1.35rem);
font-weight: var(--fw-semibold, 600);
letter-spacing: var(--tracking-heading, -0.01em);
line-height: var(--lh-heading, 1.15);
color: var(--fg);
}
.modal__desc {
margin: var(--space-1, 0.35rem) 0 0;
font-size: var(--fs-sm, 0.875rem);
color: var(--fg-muted);
line-height: 1.5;
}
.modal__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid transparent;
border-radius: var(--radius-pill, 999px);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition:
color var(--_dur-fast) var(--_ease),
background var(--_dur-fast) var(--_ease),
border-color var(--_dur-fast) var(--_ease);
}
.modal__close:hover {
color: var(--fg);
background: var(--bg-4, color-mix(in srgb, var(--fg) 8%, transparent));
border-color: var(--border);
}
.modal__close:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.modal__body {
flex: 1 1 auto;
padding: 0 var(--space-5, 1.75rem);
overflow-y: auto;
color: var(--fg-body, var(--fg));
}
.modal__header + .modal__body {
padding-top: 0;
}
.modal__dialog > .modal__body:first-child {
padding-top: var(--space-5, 1.75rem);
}
.modal__footer {
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 0.75rem);
padding: var(--space-4, 1.5rem) var(--space-5, 1.75rem);
margin-top: var(--space-4, 1.5rem);
border-top: 1px solid var(--hairline, var(--border));
background: color-mix(in srgb, var(--bg-2) 40%, transparent);
}
.modal__actions {
display: flex;
gap: var(--space-2, 0.75rem);
justify-content: flex-end;
width: 100%;
}
/* ConfirmModal */
.confirm-modal__content {
display: flex;
gap: var(--space-3, 1rem);
align-items: flex-start;
padding-bottom: var(--space-2, 0.5rem);
}
.confirm-modal__halo {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-pill, 999px);
}
.confirm-modal__halo--danger {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 14%, transparent);
box-shadow: 0 0 26px -6px color-mix(in srgb, var(--danger) 45%, transparent);
}
.confirm-modal__halo--primary {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 14%, transparent);
box-shadow: 0 0 26px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}
.confirm-modal__message {
margin: 0.15rem 0 0;
color: var(--fg-body, var(--fg));
line-height: 1.55;
}
/* -----------------------------------------------------------------------------
TABS
-------------------------------------------------------------------------- */
.tabs {
display: flex;
align-items: stretch;
gap: var(--space-1, 0.25rem);
min-width: 0;
}
.tabs--fitted .tabs__tab {
flex: 1 1 0;
justify-content: center;
}
.tabs__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2, 0.5rem);
padding: 0.6rem 0.95rem;
min-height: 2.5rem;
border: 0;
background: transparent;
color: var(--fg-muted);
font-family: var(--font-sans);
font-size: var(--fs-sm, 0.9375rem);
font-weight: var(--fw-medium, 500);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
color var(--_dur-fast) var(--_ease),
background var(--_dur-fast) var(--_ease),
box-shadow var(--_dur-fast) var(--_ease);
}
.tabs--sm .tabs__tab {
padding: 0.45rem 0.7rem;
min-height: 2.1rem;
font-size: var(--fs-xs, 0.8125rem);
}
.tabs__tab:hover:not(.is-disabled):not(.is-active) {
color: var(--fg);
}
.tabs__tab.is-active {
color: var(--fg);
}
.tabs__tab.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.tabs__tab:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
border-radius: var(--radius-sm);
}
.tabs__icon {
display: inline-flex;
}
.tabs__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
border-radius: var(--radius-pill, 999px);
background: color-mix(in srgb, var(--primary) 18%, transparent);
color: var(--primary);
font-family: var(--font-mono);
font-size: var(--fs-xs, 0.6875rem);
font-variant-numeric: tabular-nums;
}
/* underline variant */
.tabs--underline {
border-bottom: 1px solid var(--border);
gap: var(--space-3, 1rem);
}
.tabs--underline .tabs__tab {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.tabs--underline .tabs__tab::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--primary);
box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 60%, transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--_dur-base) var(--_ease-quint);
}
.tabs--underline .tabs__tab.is-active::after {
transform: scaleX(1);
}
/* segment + pill variants */
.tabs--segment,
.tabs--pill {
padding: 0.3rem;
border-radius: var(--radius-lg, 0.85rem);
border: 1px solid var(--glass-border, var(--border));
background: var(--glass-bg, var(--bg-2));
-webkit-backdrop-filter: blur(var(--glass-blur-sm, 6px));
backdrop-filter: blur(var(--glass-blur-sm, 6px));
gap: 0.15rem;
}
.tabs--segment .tabs__tab,
.tabs--pill .tabs__tab {
border-radius: var(--radius-md);
z-index: 0;
}
.tabs--pill .tabs__tab {
border-radius: var(--radius-pill, 999px);
}
.tabs--segment .tabs__tab.is-active,
.tabs--pill .tabs__tab.is-active {
background: color-mix(in srgb, var(--primary) 16%, var(--bg-3, transparent));
color: var(--fg);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
0 2px 12px -4px color-mix(in srgb, var(--primary) 50%, transparent);
}
/* -----------------------------------------------------------------------------
TOGGLE
-------------------------------------------------------------------------- */
.toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3, 0.75rem);
min-width: 0;
}
.toggle--left {
flex-direction: row;
}
.toggle.is-disabled {
opacity: 0.55;
}
.toggle__switch {
--_tw: 2.75rem;
--_th: 1.6rem;
flex: none;
position: relative;
display: inline-flex;
align-items: center;
width: var(--_tw);
height: var(--_th);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.toggle__switch--sm {
--_tw: 2.25rem;
--_th: 1.3rem;
}
.toggle__switch:disabled {
cursor: not-allowed;
}
.toggle__track {
position: absolute;
inset: 0;
border-radius: var(--radius-pill, 999px);
border: 1px solid var(--border-strong, var(--border));
background: var(--bg-4, color-mix(in srgb, var(--fg) 10%, transparent));
transition:
background var(--_dur-base) var(--_ease),
border-color var(--_dur-base) var(--_ease),
box-shadow var(--_dur-base) var(--_ease);
}
.toggle__thumb {
position: absolute;
top: 50%;
left: 3px;
width: calc(var(--_th) - 8px);
height: calc(var(--_th) - 8px);
border-radius: 50%;
background: var(--fg, #fff);
transform: translateY(-50%);
transition: transform var(--_dur-base) var(--_ease-overshoot);
box-shadow: var(--shadow-1, 0 2px 6px -1px rgba(0, 0, 0, 0.4));
}
.toggle.is-on .toggle__track {
background: color-mix(in srgb, var(--primary) 85%, transparent);
border-color: var(--primary);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
0 0 18px -2px color-mix(in srgb, var(--primary) 60%, transparent);
}
.toggle.is-on .toggle__thumb {
transform: translateY(-50%) translateX(calc(var(--_tw) - var(--_th)));
background: var(--primary-contrast, #05130c);
}
.toggle__switch:focus-visible .toggle__track {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}
.toggle__text {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.toggle__label {
font-size: var(--fs-body, 0.9375rem);
font-weight: var(--fw-medium, 500);
color: var(--fg-body, var(--fg));
cursor: pointer;
line-height: 1.35;
}
.toggle.is-disabled .toggle__label {
cursor: not-allowed;
}
.toggle__desc {
font-size: var(--fs-sm, 0.8125rem);
color: var(--fg-muted);
line-height: 1.4;
}
/* -----------------------------------------------------------------------------
ALERT
-------------------------------------------------------------------------- */
.alert {
--_tone: var(--info);
position: relative;
display: flex;
gap: var(--space-3, 0.85rem);
padding: var(--space-3, 1rem) var(--space-4, 1.15rem);
border-radius: var(--radius-lg, 0.85rem);
border: 1px solid color-mix(in srgb, var(--_tone) 30%, var(--border));
background:
linear-gradient(
color-mix(in srgb, var(--_tone) 9%, transparent),
color-mix(in srgb, var(--_tone) 5%, transparent)
),
var(--glass-bg, var(--bg-2));
color: var(--fg-body, var(--fg));
-webkit-backdrop-filter: blur(var(--glass-blur-sm, 6px));
backdrop-filter: blur(var(--glass-blur-sm, 6px));
}
/* accent rail */
.alert::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
border-radius: var(--radius-lg, 0.85rem) 0 0 var(--radius-lg, 0.85rem);
background: var(--_tone);
box-shadow: 0 0 16px -2px color-mix(in srgb, var(--_tone) 70%, transparent);
}
.alert--info {
--_tone: var(--info, var(--data));
}
.alert--success {
--_tone: var(--success);
}
.alert--warning {
--_tone: var(--warning);
}
.alert--danger {
--_tone: var(--danger);
}
.alert--primary {
--_tone: var(--primary);
}
.alert--neutral {
--_tone: var(--border-strong, var(--fg-muted));
}
.alert__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.05em;
color: var(--_tone);
}
.alert__content {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1, 0.3rem);
}
.alert__title {
margin: 0;
font-weight: var(--fw-semibold, 600);
font-size: var(--fs-body, 0.9375rem);
color: var(--fg);
line-height: 1.35;
}
.alert__body {
font-size: var(--fs-sm, 0.875rem);
line-height: 1.5;
color: var(--fg-muted);
}
.alert__body :where(a) {
color: var(--_tone);
text-decoration: underline;
text-underline-offset: 2px;
}
.alert__actions {
margin-top: var(--space-2, 0.5rem);
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 0.5rem);
}
.alert__close {
flex: none;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
margin: -0.25rem -0.25rem -0.25rem 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition: color var(--_dur-fast) var(--_ease), background var(--_dur-fast) var(--_ease);
}
.alert__close:hover {
color: var(--fg);
background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.alert__close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_tone) 30%, transparent);
}
/* -----------------------------------------------------------------------------
BREADCRUMBS
-------------------------------------------------------------------------- */
.breadcrumbs {
min-width: 0;
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs__item {
display: inline-flex;
min-width: 0;
}
.breadcrumbs__crumb {
display: inline-flex;
align-items: center;
gap: 0.3rem;
max-width: 22ch;
padding: 0.2rem 0.4rem;
border-radius: var(--radius-sm);
font-size: var(--fs-sm, 0.875rem);
color: var(--fg-muted);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--_dur-fast) var(--_ease), background var(--_dur-fast) var(--_ease);
}
.breadcrumbs__text {
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumbs__link:hover {
color: var(--fg);
background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.breadcrumbs__link:focus-visible {
outline: none;
color: var(--fg);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}
.breadcrumbs__crumb--current {
color: var(--fg);
font-weight: var(--fw-medium, 500);
}
.breadcrumbs__sep {
display: inline-flex;
align-items: center;
color: var(--fg-faint, var(--fg-muted));
}
.breadcrumbs__icon {
display: inline-flex;
}
/* -----------------------------------------------------------------------------
EMPTY STATE
-------------------------------------------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3, 1rem);
padding: var(--space-8, 4rem) var(--space-4, 1.5rem);
max-width: 34rem;
margin-inline: auto;
}
.empty-state--sm {
padding: var(--space-6, 2rem) var(--space-3, 1rem);
gap: var(--space-2, 0.75rem);
}
.empty-state--lg {
padding: var(--space-9, 6rem) var(--space-4, 1.5rem);
}
.empty-state__halo {
--_glow: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
width: 5rem;
height: 5rem;
border-radius: var(--radius-pill, 999px);
border: 1px solid color-mix(in srgb, var(--_glow) 30%, var(--border));
background:
radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--_glow) 20%, transparent), transparent 70%),
var(--glass-bg, var(--bg-2));
box-shadow:
0 0 0 8px color-mix(in srgb, var(--_glow) 6%, transparent),
0 0 44px -8px color-mix(in srgb, var(--_glow) 40%, transparent);
color: var(--_glow);
}
.empty-state--danger .empty-state__halo {
--_glow: var(--danger);
}
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.empty-state__icon--emoji {
font-size: 2rem;
filter: saturate(1.1);
}
.empty-state--sm .empty-state__halo {
width: 3.5rem;
height: 3.5rem;
}
.empty-state--sm .empty-state__icon--emoji {
font-size: 1.5rem;
}
.empty-state__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4, 1.35rem);
font-weight: var(--fw-semibold, 600);
letter-spacing: var(--tracking-heading, -0.01em);
color: var(--fg);
line-height: 1.2;
}
.empty-state__message {
margin: 0;
max-width: 42ch;
color: var(--fg-muted);
font-size: var(--fs-body, 1rem);
line-height: 1.55;
}
.empty-state__action {
margin-top: var(--space-2, 0.5rem);
display: flex;
flex-wrap: wrap;
gap: var(--space-2, 0.75rem);
justify-content: center;
}
.empty-state__secondary {
color: var(--fg-muted);
font-size: var(--fs-sm, 0.875rem);
}
/* -----------------------------------------------------------------------------
TOAST
-------------------------------------------------------------------------- */
.toast-viewport {
position: fixed;
z-index: var(--z-toast, 1100);
display: flex;
flex-direction: column;
gap: var(--space-2, 0.75rem);
width: min(24rem, calc(100vw - var(--space-4, 1.5rem) * 2));
max-height: 100dvh;
padding: var(--space-4, 1.5rem);
pointer-events: none;
}
.toast-viewport--bottom-right {
right: 0;
bottom: 0;
align-items: flex-end;
}
.toast-viewport--bottom-left {
left: 0;
bottom: 0;
align-items: flex-start;
}
.toast-viewport--top-right {
right: 0;
top: 0;
align-items: flex-end;
flex-direction: column-reverse;
}
.toast-viewport--top-center {
left: 50%;
top: 0;
transform: translateX(-50%);
align-items: center;
flex-direction: column-reverse;
}
.toast {
--_tone: var(--primary);
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-2, 0.7rem);
width: 100%;
padding: var(--space-3, 0.9rem) var(--space-3, 1rem);
border-radius: var(--radius-lg, 0.85rem);
border: 1px solid var(--glass-border, var(--border));
background: var(--glass-bg-strong, var(--bg-3, var(--surface)));
color: var(--fg-body, var(--fg));
-webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-saturate, 1.3));
backdrop-filter: blur(var(--glass-blur, 16px)) saturate(var(--glass-saturate, 1.3));
box-shadow:
var(--shadow-3, 0 18px 40px -12px rgba(0, 0, 0, 0.5)),
0 0 32px -14px color-mix(in srgb, var(--_tone) 60%, transparent);
overflow: hidden;
}
.toast--info {
--_tone: var(--info, var(--data));
}
.toast--success {
--_tone: var(--success);
}
.toast--warning {
--_tone: var(--warning);
}
.toast--danger {
--_tone: var(--danger);
}
.toast--primary {
--_tone: var(--primary);
}
.toast__glow {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--_tone);
box-shadow: 0 0 18px 0 color-mix(in srgb, var(--_tone) 70%, transparent);
}
.toast__icon {
flex: none;
display: inline-flex;
margin-top: 0.05em;
color: var(--_tone);
}
.toast__content {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.toast__title {
margin: 0;
font-weight: var(--fw-semibold, 600);
font-size: var(--fs-sm, 0.9375rem);
color: var(--fg);
line-height: 1.3;
}
.toast__message {
margin: 0;
font-size: var(--fs-sm, 0.875rem);
line-height: 1.45;
color: var(--fg-muted);
overflow-wrap: anywhere;
}
.toast__action {
margin-top: var(--space-2, 0.4rem);
display: flex;
gap: var(--space-2, 0.5rem);
}
.toast__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
margin: -0.15rem -0.15rem 0 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--fg-faint, var(--fg-muted));
cursor: pointer;
transition: color var(--_dur-fast) var(--_ease), background var(--_dur-fast) var(--_ease);
}
.toast__close:hover {
color: var(--fg);
background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.toast__close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_tone) 30%, transparent);
}
.toast.is-entering {
animation: toast-in var(--_dur-base) var(--_ease-overshoot) both;
}
.toast.is-leaving {
animation: toast-out var(--_dur-fast) var(--_ease) forwards;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateX(12px) scale(0.96);
}
}
/* -----------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 30rem) {
.modal {
padding: 0;
align-items: flex-end;
}
.modal__dialog {
max-width: 100%;
max-height: 92dvh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.toast-viewport {
width: 100%;
align-items: stretch;
}
.modal__actions {
flex-direction: column-reverse;
}
.modal__actions > * {
width: 100%;
}
}
/* -----------------------------------------------------------------------------
REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.field-control,
.modal__backdrop,
.modal__dialog,
.tabs__tab,
.tabs--underline .tabs__tab::after,
.toggle__track,
.toggle__thumb,
.modal__close,
.alert__close,
.toast__close,
.breadcrumbs__crumb,
.select__chevron,
.input__icon {
transition: none !important;
}
.toast.is-entering,
.toast.is-leaving {
animation: none !important;
}
.modal__dialog {
transform: none;
}
}
/* ==================================================================
* nav.css - chrome for hyphive EPIC: Header, Footer, PageHeader,
* Container, SearchBar. Tokens only (no hard-coded colour).
* ================================================================== */
/* ------------------------------------------------------------------ */
/* Container */
/* ------------------------------------------------------------------ */
.nh-container {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter);
}
.nh-container--default { max-width: var(--maxw); }
.nh-container--lg { max-width: var(--maxw-lg); }
.nh-container--narrow { max-width: var(--maxw-narrow); }
.nh-container--full { max-width: none; }
/* ================================================================== */
/* HEADER */
/* ================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
padding: var(--space-2) var(--gutter);
transition: padding var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled {
padding-top: var(--space-1);
padding-bottom: var(--space-1);
}
.site-header__bar {
position: relative;
margin-inline: auto;
max-width: var(--maxw-lg);
border-radius: var(--radius-xl);
padding: var(--space-2) var(--space-4);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-2);
transition:
background var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
padding var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled .site-header__bar {
background: var(--glass-bg-strong);
box-shadow: var(--shadow-3);
border-color: var(--border-strong);
padding-top: var(--space-1);
padding-bottom: var(--space-1);
}
/* Gradient hairline along the bottom edge */
.site-header__bar::after {
content: "";
position: absolute;
left: var(--space-4);
right: var(--space-4);
bottom: -1px;
height: 1px;
background: var(--grad-primary);
opacity: 0.5;
border-radius: var(--radius-pill);
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled .site-header__bar::after { opacity: 0.9; }
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-3);
}
.site-header__brand {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
border-radius: var(--radius-md);
text-decoration: none;
color: inherit;
}
.site-header__brand:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
/* Search takes the flexible middle */
.site-header__search {
flex: 1 1 auto;
min-width: 0;
max-width: 460px;
margin-inline: var(--space-2);
}
.site-header__right {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
flex: 0 0 auto;
}
/* Primary nav links */
.nh-nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
.nh-link {
position: relative;
display: inline-flex;
align-items: center;
height: 40px;
padding-inline: var(--space-3);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-tight);
color: var(--fg-muted);
text-decoration: none;
white-space: nowrap;
transition:
color var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard);
}
.nh-link:hover { color: var(--fg); background: var(--bg-3); }
.nh-link.is-active { color: var(--fg); }
.nh-link.is-active::after {
content: "";
position: absolute;
left: var(--space-3);
right: var(--space-3);
bottom: 4px;
height: 2px;
border-radius: var(--radius-pill);
background: var(--grad-primary);
box-shadow: var(--glow-sm);
}
.nh-link:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
/* A divider pip between clusters */
.nh-sep {
width: 1px;
height: 24px;
background: var(--border);
flex: 0 0 auto;
}
/* Luminous Sell CTA */
.nh-sell {
flex: 0 0 auto;
}
/* Generic icon button (theme toggle, hamburger, avatar) */
.nh-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 auto;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--fg-muted);
cursor: pointer;
transition:
color var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-quint);
}
.nh-iconbtn:hover {
color: var(--fg);
background: var(--bg-3);
border-color: var(--border);
}
.nh-iconbtn:active { transform: scale(0.94); }
.nh-iconbtn:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.nh-iconbtn__icon {
display: inline-flex;
transition: transform var(--dur-base) var(--ease-overshoot);
}
.nh-theme:hover .nh-iconbtn__icon { transform: rotate(-18deg); }
/* Auth cluster */
.nh-auth {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Inline currency/location control cluster */
.nh-controls {
display: flex;
align-items: center;
gap: var(--space-1);
}
/* Avatar dropdown */
.nh-menu-root { position: relative; flex: 0 0 auto; }
.nh-avatar-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px;
padding-right: var(--space-1);
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--bg-2);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.nh-avatar-btn:hover { border-color: var(--border-primary); box-shadow: var(--glow-sm); }
.nh-avatar-btn:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.nh-avatar-btn__chev {
color: var(--fg-faint);
transition: transform var(--dur-fast) var(--ease-standard);
}
.nh-avatar-btn[aria-expanded="true"] .nh-avatar-btn__chev { transform: rotate(180deg); }
.nh-menu {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
min-width: 244px;
padding: var(--space-2);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-4);
z-index: var(--z-dropdown);
transform-origin: top right;
animation: nh-pop var(--dur-fast) var(--ease-out);
}
@keyframes nh-pop {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nh-menu__head {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
margin-bottom: var(--space-1);
}
.nh-menu__head-text { min-width: 0; }
.nh-menu__name {
display: block;
font-weight: var(--fw-semibold);
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nh-menu__sub {
display: block;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nh-menu__sep {
height: 1px;
margin: var(--space-1) 0;
background: var(--border);
border: 0;
}
.nh-menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-2);
border-radius: var(--radius-md);
border: 0;
background: transparent;
color: var(--fg-body);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.nh-menu__item svg { color: var(--fg-faint); flex: 0 0 auto; transition: color var(--dur-micro) var(--ease-standard); }
.nh-menu__item:hover,
.nh-menu__item.is-active {
background: var(--bg-3);
color: var(--fg);
}
.nh-menu__item:hover svg { color: var(--primary); }
.nh-menu__item:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: calc(-1 * var(--ring-width));
}
.nh-menu__item--danger { color: var(--danger); }
.nh-menu__item--danger svg { color: var(--danger); }
.nh-menu__item--danger:hover { background: var(--bg-3); color: var(--danger-fg, var(--danger)); }
/* Responsive show/hide helpers scoped to header */
.nh-desktop { display: flex; }
.nh-hamburger { display: none; }
@media (max-width: 1080px) {
.site-header__search { max-width: 320px; }
}
@media (max-width: 900px) {
/* `.site-header` prefix raises specificity above `.btn` so the Sell button
(a .btn.nh-desktop) is actually hidden on mobile, not just the nav. */
.site-header .nh-desktop { display: none; }
.nh-hamburger { display: inline-flex; }
.site-header__search { display: none; }
}
/* ------------------------------------------------------------------ */
/* Mobile drawer */
/* ------------------------------------------------------------------ */
.nh-scrim {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: color-mix(in srgb, var(--bg-0) 70%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
animation: nh-fade var(--dur-fast) var(--ease-out) forwards;
}
@keyframes nh-fade { to { opacity: 1; } }
.nh-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: var(--z-modal);
width: min(88vw, 380px);
display: flex;
flex-direction: column;
padding: var(--space-4);
gap: var(--space-4);
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
border-left: 1px solid var(--glass-border);
box-shadow: var(--shadow-4);
overflow-y: auto;
transform: translateX(100%);
animation: nh-slide-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes nh-slide-in { to { transform: translateX(0); } }
.nh-drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.nh-drawer__nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.nh-drawer__link {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
color: var(--fg-body);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nh-drawer__link:hover,
.nh-drawer__link.is-active { background: var(--bg-3); color: var(--fg); }
.nh-drawer__link.is-active { box-shadow: inset 3px 0 0 0 var(--primary); }
.nh-drawer__link svg { color: var(--fg-faint); }
.nh-drawer__link:hover svg { color: var(--primary); }
.nh-drawer__section {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.nh-drawer__controls {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.nh-drawer__foot {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* ================================================================== */
/* SEARCH BAR */
/* ================================================================== */
.nh-search {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.nh-search__field {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 44px;
padding-inline: var(--space-3);
gap: var(--space-2);
border-radius: var(--radius-pill);
background: var(--glass-bg);
border: 1px solid var(--border);
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard);
}
.nh-search__field:hover { border-color: var(--border-strong); }
.nh-search:focus-within .nh-search__field {
border-color: var(--border-primary);
box-shadow: var(--glow-sm);
background: var(--glass-bg-strong);
}
.nh-search__icon { color: var(--fg-faint); flex: 0 0 auto; }
.nh-search:focus-within .nh-search__icon { color: var(--primary); }
.nh-search__input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-sm);
outline: none;
}
.nh-search__input::placeholder { color: var(--fg-faint); }
.nh-search__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex: 0 0 auto;
border: 0;
border-radius: var(--radius-pill);
background: var(--bg-3);
color: var(--fg-muted);
cursor: pointer;
transition: background var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.nh-search__clear:hover { background: var(--bg-4); color: var(--fg); }
.nh-search__clear:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.nh-search__kbd {
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-faint);
padding: 2px 6px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-2);
}
.nh-search--lg .nh-search__field { height: 52px; }
.nh-search--lg .nh-search__input { font-size: var(--fs-body); }
/* ================================================================== */
/* PAGE HEADER */
/* ================================================================== */
.page-header {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
background: var(--bg-1);
isolation: isolate;
}
.page-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--aurora);
opacity: 0.35;
pointer-events: none;
}
.page-header::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--vignette);
pointer-events: none;
}
.page-header__inner {
padding-block: clamp(var(--space-5), 5vw, var(--space-7));
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.page-header__crumbs { margin-bottom: var(--space-1); }
.page-header__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.page-header__head {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.page-header__title {
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-display);
font-weight: var(--fw-bold);
color: var(--fg);
margin: 0;
text-wrap: balance;
}
.page-header__subtitle {
font-size: var(--fs-lead);
color: var(--fg-muted);
max-width: var(--measure);
margin: 0;
}
.page-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
flex: 0 0 auto;
}
/* ================================================================== */
/* FOOTER */
/* ================================================================== */
.site-footer {
position: relative;
margin-top: var(--space-9);
border-top: 1px solid var(--border);
background: var(--bg-1);
overflow: hidden;
isolation: isolate;
}
.site-footer::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--grad-primary);
opacity: 0.55;
z-index: 1;
}
.site-footer__glow {
position: absolute;
left: 50%;
bottom: -40%;
width: 70%;
aspect-ratio: 1;
transform: translateX(-50%);
background: var(--aurora);
opacity: 0.22;
filter: blur(60px);
z-index: -1;
pointer-events: none;
}
.site-footer__inner {
padding-block: clamp(var(--space-6), 6vw, var(--space-8));
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.6fr repeat(4, 1fr);
gap: var(--space-5);
}
.site-footer__brandcol {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 34ch;
}
.site-footer__tagline { color: var(--fg-muted); font-size: var(--fs-sm); }
.site-footer__socials {
display: flex;
gap: var(--space-2);
margin-top: var(--space-1);
}
.site-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--fg-muted);
transition:
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-quint);
}
.site-footer__social:hover {
color: var(--primary);
border-color: var(--border-primary);
box-shadow: var(--glow-sm);
transform: translateY(-2px);
}
.site-footer__social:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.site-footer__col {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.site-footer__coltitle {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg-faint);
margin-bottom: var(--space-1);
}
.site-footer__link {
color: var(--fg-muted);
font-size: var(--fs-sm);
text-decoration: none;
width: fit-content;
transition: color var(--dur-fast) var(--ease-standard);
}
.site-footer__link:hover { color: var(--fg); }
.site-footer__link:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
border-radius: var(--radius-sm);
}
.site-footer__mini {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.site-footer__compliance {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--fg-muted);
font-size: var(--fs-xs);
line-height: var(--lh-body);
}
.site-footer__compliance svg { color: var(--warning); flex: 0 0 auto; margin-top: 1px; }
.site-footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.site-footer__legal {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.site-footer__copyright {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fg-faint);
}
@media (max-width: 900px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.site-footer__brandcol { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
.site-footer__grid { grid-template-columns: 1fr; }
.page-header__row { align-items: flex-start; }
}
/* ------------------------------------------------------------------ */
/* Reduced motion */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.site-header,
.site-header__bar,
.site-header__bar::after,
.nh-iconbtn,
.nh-iconbtn__icon,
.nh-avatar-btn,
.nh-avatar-btn__chev,
.nh-link,
.nh-search__field,
.site-footer__social {
transition: none;
}
.nh-menu,
.nh-scrim,
.nh-drawer {
animation: none;
}
.nh-drawer { transform: none; }
.nh-theme:hover .nh-iconbtn__icon { transform: none; }
}
/* ==========================================================================
hyphive - MARKETPLACE SURFACE · dark-luxe + the HUMAN HAND
ListingCard · ListingGrid · CategoryRail · CategoryGrid · SellerChip
· VerifiedBadge · FilterBar · ImageGallery
Consumes ONLY design tokens from theme.css + utilities from global.css.
No hard-coded colours. color-mix() tints derive from tokens only.
(The single exception is the greyscale film-grain data-URI, which is a
neutral luminance texture blended via mix-blend-mode - it carries no hue.)
All hover / tilt / parallax neutralise under prefers-reduced-motion.
Focus is :focus-visible only, using the tokenised ring.
HAND-TOUCH layered on top of the loved dark base:
· fine film-grain / paper-tooth on card media (very low opacity)
· specimen / apothecary tag for the type + mono catalogue index
· hand-drawn hairline corner flourish + hand-underline under price
· rubber-stamp SOLD mark, placed-by-hand micro-rotations
· italic Latin binomial set in the editorial serif
Restraint is the luxury signal: one or two flourishes per card, not ten.
========================================================================== */
:root {
/* Fraunces - warm old-style editorial serif for hand-crafted moments. */
--font-editorial: 'Fraunces Variable', 'Fraunces', 'Bricolage Grotesque Variable', Georgia, serif;
/* Neutral (hueless) film-grain - greyscale luminance only, blended in. */
--craft-grain:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* Placed-by-hand tilt set - odd, non-round angles cycled by nth-child. */
--tilt-a: -0.6deg;
--tilt-b: 0.5deg;
--tilt-c: -0.4deg;
}
/* --------------------------------------------------------------------------
Shared glass control (favourite, gallery arrows, rail nav, lightbox chrome)
-------------------------------------------------------------------------- */
.listing-card__fav,
.image-gallery__zoom,
.image-gallery__arrow,
.image-lightbox__close,
.image-lightbox__arrow,
.category-rail__nav {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
color: var(--fg);
box-shadow: var(--shadow-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-micro) var(--ease-out-quint);
}
.listing-card__fav:hover,
.image-gallery__zoom:hover,
.image-gallery__arrow:hover,
.image-lightbox__close:hover,
.image-lightbox__arrow:hover,
.category-rail__nav:hover {
background: var(--glass-bg-strong);
box-shadow: var(--shadow-3);
}
.listing-card__fav:active,
.image-gallery__zoom:active,
.image-gallery__arrow:active,
.image-lightbox__close:active,
.image-lightbox__arrow:active,
.category-rail__nav:active {
transform: scale(0.92);
}
.listing-card__fav:focus-visible,
.image-gallery__zoom:focus-visible,
.image-gallery__arrow:focus-visible,
.image-lightbox__close:focus-visible,
.image-lightbox__arrow:focus-visible,
.category-rail__nav:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
/* ==========================================================================
CRAFT PRIMITIVES - ink ornaments, stamps, hand-underlines (tokenised)
========================================================================== */
/* Hand-drawn SVG ornaments inherit currentColor so a container can tint them. */
.craft-ink {
display: block;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* Corner flourish - a little sprig pinned to a card corner. Decorative. */
.craft-corner {
position: absolute;
z-index: 2;
width: 46px;
height: 46px;
color: var(--accent);
opacity: 0.34;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-standard);
}
.craft-corner--tr {
top: 6px;
right: 6px;
transform: rotate(2deg);
}
.craft-corner--br {
bottom: 8px;
right: 8px;
transform: rotate(-3deg) scaleY(-1);
}
/* Hand-inked underline stroke placed under a key word (price). */
.craft-underline {
position: absolute;
left: -2px;
right: -3px;
bottom: -0.42em;
height: 0.5em;
color: var(--accent);
opacity: 0.72;
pointer-events: none;
}
/* Spore-scatter row - an irregular sprinkle used in dividers / empty states. */
.craft-spore {
display: block;
color: var(--fg-faint);
}
/* Rubber-stamp mark - broken-ink outline, placed at a hand angle. */
.craft-stamp {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border: 1.5px solid currentColor;
border-radius: 3px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
opacity: 0.86;
}
/* ==========================================================================
LISTING CARD - glass card, cursor tilt + parallax + glow + hand-touch
========================================================================== */
.listing-card {
--mx: 50%;
--my: 50%;
--rx: 0deg;
--ry: 0deg;
--lift: 0px;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
overflow: clip;
transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
transform-style: preserve-3d;
transition:
transform var(--dur-base) var(--ease-out-quint),
box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
will-change: transform;
}
/* Luminous gradient hairline, revealed on hover/focus */
.listing-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
border-radius: inherit;
padding: 1px;
background: var(--grad-primary);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-standard);
}
.listing-card:hover {
--lift: -6px;
border-color: transparent;
box-shadow: var(--shadow-3), var(--glow-md);
}
.listing-card:hover::before {
opacity: 0.6;
}
.listing-card:hover .craft-corner {
opacity: 0.6;
}
.listing-card:focus-within {
border-color: var(--border-primary);
}
.listing-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.listing-card__link:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: calc(-1 * var(--ring-width));
border-radius: var(--radius-lg);
}
.listing-card__media {
position: relative;
aspect-ratio: 4 / 5;
background: var(--bg-2);
overflow: hidden;
}
.listing-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.001);
transition: transform var(--dur-slow) var(--ease-out-quint);
will-change: transform;
}
.listing-card:hover .listing-card__img {
transform: scale(1.08)
translate(calc((var(--mx) - 50%) * -0.06), calc((var(--my) - 50%) * -0.06));
}
.listing-card__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--fg-faint);
background: radial-gradient(120% 90% at 50% 0%, var(--bg-4), var(--bg-2));
}
/* Fine film-grain / paper-tooth over the media - hueless, whisper-low. */
.listing-card__grain {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: var(--craft-grain);
background-size: 140px 140px;
opacity: 0.07;
mix-blend-mode: overlay;
}
/* bottom scrim for overlay chip legibility */
.listing-card__sheen {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
transparent 52%,
color-mix(in srgb, var(--bg-0) 60%, transparent) 100%
);
}
/* cursor-tracked luminous spotlight */
.listing-card__glow {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
background: radial-gradient(
circle at var(--mx) var(--my),
color-mix(in srgb, var(--primary) 26%, transparent),
transparent 46%
);
transition: opacity var(--dur-base) var(--ease-standard);
}
.listing-card:hover .listing-card__glow {
opacity: 1;
}
/* SOLD / reserved - rubber-stamp mark, placed by hand across the media. */
.listing-card__status {
position: absolute;
top: var(--space-4);
left: var(--space-3);
z-index: 5;
color: var(--accent);
background: color-mix(in srgb, var(--bg-0) 46%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
backdrop-filter: blur(var(--glass-blur-sm));
transform: rotate(-6.5deg);
box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--bg-0) 90%, transparent);
}
.listing-card__distance {
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px var(--space-2);
border-radius: var(--radius-pill);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
color: var(--data);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-wide);
font-variant-numeric: tabular-nums slashed-zero;
box-shadow: var(--shadow-1);
}
.listing-card__distance svg {
color: var(--data);
}
.listing-card__fav {
position: absolute;
top: var(--space-3);
right: var(--space-3);
z-index: 7;
width: 40px;
height: 40px;
color: var(--fg-body);
}
.listing-card__fav:hover {
color: var(--danger);
}
.listing-card__fav.is-faved {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 55%, transparent);
box-shadow: var(--shadow-2), 0 0 18px -4px var(--danger);
}
.listing-card__fav:disabled {
cursor: progress;
}
.listing-card__body {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1 1 auto;
padding: var(--space-4);
}
/* ---- Specimen / apothecary tag: mono catalogue index + type ------------- */
.listing-card__tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 4px 9px 4px 7px;
border: 1px solid var(--border);
border-radius: 4px;
background: color-mix(in srgb, var(--bg-2) 74%, transparent);
box-shadow: inset 0 1px 0 var(--sheen);
transform: rotate(var(--tilt-a));
transform-origin: left center;
}
/* punched hole at the tag's binding edge */
.listing-card__tag::before {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: var(--bg-0);
box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg-0) 85%, transparent);
border: 1px solid var(--border-strong);
}
.listing-card__tag-no {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
font-variant-numeric: tabular-nums slashed-zero;
}
.listing-card__tag-type {
padding-left: 7px;
border-left: 1px solid var(--border);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* provenance / trust badges reduced to quiet marginalia chips */
.listing-card__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.listing-card__chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: var(--radius-pill);
border: 1px solid var(--glass-border);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
backdrop-filter: blur(var(--glass-blur-sm));
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
line-height: 1;
color: var(--fg-muted);
white-space: nowrap;
}
.listing-card__chip--primary {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.listing-card__chip--accent {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.listing-card__chip--data {
color: var(--data);
border-color: color-mix(in srgb, var(--data) 30%, transparent);
}
.listing-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
color: var(--fg);
}
/* Italic Latin binomial - set in the warm editorial serif. */
.listing-card__latin {
margin: 0;
font-family: var(--font-editorial);
font-style: italic;
font-optical-sizing: auto;
font-size: 0.8rem;
line-height: var(--lh-tight);
letter-spacing: 0.005em;
color: var(--fg-muted);
}
.listing-card__price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-2);
}
/* price sits in a hand-inked underline rather than a filled chip */
.listing-card__price-wrap {
position: relative;
display: inline-flex;
min-width: 0;
}
.listing-card__price {
display: inline-flex;
align-items: baseline;
gap: 3px;
min-width: 0;
font-family: var(--font-mono);
font-size: 1.0625rem;
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums slashed-zero;
color: var(--fg);
}
.listing-card__approx {
font-weight: var(--fw-regular);
color: var(--fg-faint);
}
.listing-card__price--tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-editorial);
font-style: italic;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0;
color: var(--accent);
}
.listing-card__price--tag svg {
color: var(--accent);
}
.listing-card__fulfil {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 3px var(--space-2);
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--fg-muted);
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-label);
line-height: 1;
white-space: nowrap;
}
.listing-card__fulfil--pickup {
background: color-mix(in srgb, var(--data) 14%, transparent);
color: var(--data);
border-color: color-mix(in srgb, var(--data) 30%, transparent);
}
.listing-card__fulfil--worldwide {
background: color-mix(in srgb, var(--primary) 14%, transparent);
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.listing-card__fulfil--toyou,
.listing-card__fulfil--ships {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.listing-card__location {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--fg-muted);
font-size: var(--fs-xs);
}
.listing-card__location svg {
color: var(--fg-faint);
flex: 0 0 auto;
}
.listing-card__flag {
font-size: var(--fs-sm);
line-height: 1;
flex: 0 0 auto;
}
/* skeleton variant */
.listing-card--skeleton {
transform: none;
pointer-events: none;
box-shadow: var(--shadow-1);
}
.listing-card--skeleton::before {
display: none;
}
.listing-card--skeleton .listing-card__body {
gap: var(--space-3);
}
.listing-card__skel-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
.listing-card__skel-chip {
width: 40%;
height: 14px;
border-radius: var(--radius-pill);
}
.listing-card__skel-line {
height: 13px;
border-radius: var(--radius-sm);
}
.listing-card__skel-price {
width: 46%;
height: 18px;
border-radius: var(--radius-sm);
margin-top: var(--space-1);
}
/* ---- 2-up mobile: compact but legible ---------------------------------- */
@media (max-width: 560px) {
.listing-card__body {
padding: var(--space-3);
gap: 6px;
}
.listing-card__title {
font-size: var(--fs-sm);
}
.listing-card__latin {
font-size: 0.68rem;
}
.listing-card__price {
font-size: 0.95rem;
}
.listing-card__tag {
gap: 5px;
padding: 3px 7px 3px 6px;
}
.listing-card__tag::before {
width: 6px;
height: 6px;
}
.listing-card__price-row {
padding-top: var(--space-1);
}
/* keep the fulfilment cue as an icon-only stamp to protect the price line */
.listing-card__fulfil span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.listing-card__fulfil {
padding: 4px;
}
.craft-corner {
width: 34px;
height: 34px;
}
}
/* ==========================================================================
LISTING GRID - 2-up on phones (HARD requirement), premium at all widths
========================================================================== */
.listing-grid {
display: grid;
gap: var(--space-3);
/* mobile-first: exactly two columns, always. */
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Tablet and up switch to fluid auto-fill; this NEVER applies at <=560px. */
@media (min-width: 561px) {
.listing-grid {
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
@media (min-width: 1100px) {
.listing-grid {
gap: var(--space-5);
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
}
/* Explicit belt-and-braces lock: two columns at phone widths, no override. */
@media (max-width: 560px) {
.listing-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
}
/* ---- bespoke, hand-drawn empty state ----------------------------------- */
.listing-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: clamp(var(--space-7), 8vw, var(--space-10)) var(--space-4);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-xl);
background:
radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%),
var(--bg-2);
}
.listing-empty__art {
width: clamp(72px, 18vw, 108px);
height: auto;
color: var(--fg-faint);
opacity: 0.9;
}
.listing-empty__title {
margin: 0;
font-family: var(--font-editorial);
font-style: italic;
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
color: var(--fg);
}
.listing-empty__msg {
margin: 0;
max-width: 46ch;
color: var(--fg-muted);
font-size: var(--fs-sm);
line-height: var(--lh-body);
}
.listing-empty__index {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg-faint);
}
.listing-empty__action {
margin-top: var(--space-2);
}
/* ==========================================================================
CATEGORY RAIL - scrollable chips → /c/:slug (light hand-touch polish)
========================================================================== */
.category-rail {
position: relative;
isolation: isolate;
}
.category-rail__track {
display: flex;
gap: var(--space-2);
margin: 0;
padding: var(--space-1) 0;
list-style: none;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}
.category-rail__track::-webkit-scrollbar {
display: none;
}
.category-rail__item {
flex: 0 0 auto;
scroll-snap-align: start;
}
.category-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-4);
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
color: var(--fg-body);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-micro) var(--ease-out-quint);
}
.category-chip:hover {
background: var(--bg-4);
color: var(--fg);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.category-chip:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.category-chip--active {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 55%, transparent);
background: color-mix(in srgb, var(--primary) 12%, var(--glass-bg));
box-shadow: var(--glow-sm);
}
/* hand-inked underline that draws in beneath the active chip label */
.category-chip__ink {
position: absolute;
left: var(--space-4);
right: var(--space-4);
bottom: 7px;
height: 5px;
color: var(--primary);
opacity: 0;
transform: scaleX(0.4);
transform-origin: left center;
transition:
opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-base) var(--ease-out-quint);
pointer-events: none;
}
.category-chip--active .category-chip__ink,
.category-chip:hover .category-chip__ink {
opacity: 0.7;
transform: scaleX(1);
}
.category-chip__icon {
display: inline-flex;
color: currentColor;
flex: 0 0 auto;
}
.category-chip__label {
position: relative;
}
.category-chip__live {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--accent);
box-shadow: 0 0 8px -1px var(--accent);
flex: 0 0 auto;
}
.category-rail__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
z-index: var(--z-raised);
opacity: 0;
pointer-events: none;
color: var(--fg);
}
.category-rail__nav[data-visible='true'] {
opacity: 1;
pointer-events: auto;
}
.category-rail__nav[data-visible='true']:active {
transform: translateY(-50%) scale(0.92);
}
.category-rail__nav--prev {
left: calc(-1 * var(--space-2));
}
.category-rail__nav--next {
right: calc(-1 * var(--space-2));
}
@media (max-width: 760px), (pointer: coarse) {
.category-rail__nav {
display: none;
}
}
/* ==========================================================================
CATEGORY GRID - editorial, hand-crafted directory of category tiles
========================================================================== */
.category-grid {
--cat-cols: 3;
display: grid;
gap: var(--space-3);
/* mobile-first: two tiles per row. */
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
.category-grid {
gap: var(--space-4);
grid-template-columns: repeat(var(--cat-cols), minmax(0, 1fr));
}
}
.category-tile {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: 150px;
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
box-shadow: var(--shadow-1);
color: inherit;
text-decoration: none;
overflow: clip;
isolation: isolate;
transition:
transform var(--dur-base) var(--ease-out-quint),
border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
background var(--dur-base) var(--ease-standard);
}
/* accent rule that wipes in along the bottom on hover */
.category-tile::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--grad-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-base) var(--ease-out-quint);
}
.category-tile:hover {
transform: translateY(-4px);
border-color: var(--border-primary);
background: linear-gradient(180deg, var(--bg-4) 0%, var(--bg-2) 100%);
box-shadow: var(--shadow-3), var(--glow-sm);
}
.category-tile:hover::after {
transform: scaleX(1);
}
.category-tile:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.category-tile:hover .category-tile__icon {
color: var(--primary);
transform: rotate(-5deg);
}
.category-tile:hover .craft-corner {
opacity: 0.6;
}
/* oversized mono index in the corner - 01 / 02 marginalia */
.category-tile__index {
position: absolute;
top: var(--space-3);
right: var(--space-4);
z-index: 1;
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-label);
color: var(--fg-faint);
font-variant-numeric: tabular-nums slashed-zero;
transform: rotate(var(--tilt-c));
}
.category-tile__icon {
display: inline-flex;
color: var(--fg-body);
transition:
color var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-out-quint);
}
.category-tile__name {
margin: 0;
font-family: var(--font-editorial);
font-optical-sizing: auto;
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
color: var(--fg);
}
/* hand-inked hairline under the name, inset + asymmetric */
.category-tile__rule {
width: 62%;
height: 4px;
color: var(--accent);
opacity: 0.5;
}
.category-tile__blurb {
margin: 0;
color: var(--fg-muted);
font-size: var(--fs-xs);
line-height: var(--lh-body);
}
.category-tile__meta {
margin-top: auto;
display: flex;
align-items: center;
gap: 6px;
padding-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg-muted);
}
.category-tile__count {
color: var(--accent);
font-variant-numeric: tabular-nums slashed-zero;
}
.category-tile__live {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--accent);
box-shadow: 0 0 8px -1px var(--accent);
flex: 0 0 auto;
}
/* featured tile - spans two columns on larger screens, gold kicker + sprig */
.category-tile--feature {
min-height: 170px;
}
@media (min-width: 640px) {
.category-tile--feature {
grid-column: span 2;
}
}
.category-tile__kicker {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 5px;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
line-height: 1;
transform: rotate(var(--tilt-b));
}
@media (max-width: 560px) {
.category-tile {
min-height: 128px;
padding: var(--space-3);
}
.category-tile__name {
font-size: var(--fs-body);
}
.category-tile__blurb {
display: none;
}
}
/* ==========================================================================
SELLER CHIP
========================================================================== */
.seller-chip {
display: inline-flex;
align-items: center;
gap: var(--space-3);
max-width: 100%;
padding: var(--space-1);
border-radius: var(--radius-md);
color: inherit;
text-decoration: none;
}
.seller-chip--link {
transition: background var(--dur-fast) var(--ease-standard);
}
.seller-chip--link:hover {
background: var(--bg-3);
}
.seller-chip--link:hover .seller-chip__name {
color: var(--primary);
}
.seller-chip--link:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.seller-chip__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.seller-chip__name-row {
display: flex;
align-items: center;
gap: var(--space-1);
min-width: 0;
}
.seller-chip__name {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--fg);
transition: color var(--dur-fast) var(--ease-standard);
}
.seller-chip__sub {
line-height: var(--lh-tight);
}
.seller-chip--sm .seller-chip__name {
font-size: var(--fs-xs);
}
.seller-chip--lg .seller-chip__name {
font-size: var(--fs-body);
}
/* ==========================================================================
VERIFIED BADGE
========================================================================== */
.verified-badge {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--primary);
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-label);
line-height: 1;
white-space: nowrap;
}
.verified-badge__icon {
width: 15px;
height: 15px;
flex: 0 0 auto;
color: var(--primary);
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 55%, transparent));
}
.verified-badge--sm .verified-badge__icon {
width: 13px;
height: 13px;
}
.verified-badge__label {
text-transform: uppercase;
}
/* ==========================================================================
FILTER BAR - refined glass, collapsible on mobile
========================================================================== */
.filter-bar {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
box-shadow: var(--shadow-2);
}
.filter-bar__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.filter-bar__search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 240px;
min-width: 200px;
}
.filter-bar__search svg {
position: absolute;
left: var(--space-3);
color: var(--fg-muted);
pointer-events: none;
}
.filter-bar__search-input {
width: 100%;
padding-left: calc(var(--space-3) + 22px);
}
.filter-bar__head-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.filter-bar__sort {
display: inline-flex;
}
.filter-bar__toggle {
display: none;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
background: var(--bg-3);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition:
background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.filter-bar__toggle:hover {
background: var(--bg-4);
border-color: var(--border-primary);
}
.filter-bar__toggle:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.filter-bar__count {
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-pill);
background: var(--primary);
color: var(--primary-contrast);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-variant-numeric: tabular-nums;
line-height: 1;
}
@media (max-width: 760px) {
.filter-bar__toggle {
display: inline-flex;
}
.filter-bar__head-actions {
flex: 1 1 100%;
justify-content: space-between;
}
}
.filter-bar__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
animation: filter-reveal var(--dur-base) var(--ease-out);
}
@keyframes filter-reveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-bar__grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.filter-bar__price {
display: flex;
align-items: center;
gap: var(--space-2);
}
.filter-bar__price > * {
min-width: 0;
}
.filter-bar__dash {
color: var(--fg-muted);
flex: 0 0 auto;
}
.filter-bar__fulfil {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.filter-bar__radius {
display: flex;
align-items: center;
gap: var(--space-2);
max-width: 220px;
}
.filter-bar__unit {
color: var(--fg-muted);
font-family: var(--font-mono);
font-size: var(--fs-sm);
letter-spacing: var(--tracking-wide);
}
.filter-bar__footer {
display: flex;
justify-content: flex-end;
}
/* ==========================================================================
IMAGE GALLERY - cinematic frame + thumbnail rail + lightbox
========================================================================== */
.image-gallery {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.image-gallery__main {
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-2);
}
.image-gallery__main:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.image-gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-gallery__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 100%;
color: var(--fg-muted);
}
.image-gallery__zoom {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 38px;
height: 38px;
z-index: var(--z-raised);
color: var(--fg);
}
.image-gallery__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
z-index: var(--z-raised);
color: var(--fg);
opacity: 0;
}
.image-gallery__main:hover .image-gallery__arrow,
.image-gallery__main:focus-within .image-gallery__arrow {
opacity: 1;
}
.image-gallery__arrow--prev {
left: var(--space-3);
}
.image-gallery__arrow--next {
right: var(--space-3);
}
.image-gallery__arrow:active {
transform: translateY(-50%) scale(0.92);
}
@media (pointer: coarse) {
.image-gallery__arrow {
opacity: 1;
}
}
.image-gallery__counter {
position: absolute;
right: var(--space-3);
bottom: var(--space-3);
z-index: var(--z-raised);
padding: 3px var(--space-2);
border-radius: var(--radius-pill);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
color: var(--fg);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--tracking-wide);
font-variant-numeric: tabular-nums slashed-zero;
box-shadow: var(--shadow-1);
}
.image-gallery__thumbs {
display: flex;
gap: var(--space-2);
margin: 0;
padding: 2px;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
}
.image-gallery__thumb {
display: block;
width: 74px;
height: 74px;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-2);
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-micro) var(--ease-out-quint);
}
.image-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-gallery__thumb:hover {
border-color: var(--border-strong);
transform: translateY(-1px);
}
.image-gallery__thumb:focus-visible {
outline: var(--ring-width) solid var(--ring);
outline-offset: var(--ring-offset-width);
}
.image-gallery__thumb.is-active {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary), var(--glow-sm);
}
/* lightbox */
.image-lightbox {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--space-5);
background: color-mix(in srgb, var(--bg-0) 82%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
backdrop-filter: blur(var(--glass-blur-lg));
animation: lightbox-in var(--dur-fast) var(--ease-out);
}
@keyframes lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
.image-lightbox__figure {
margin: 0;
max-width: min(1200px, 94vw);
max-height: 88vh;
display: grid;
place-items: center;
}
.image-lightbox__img {
max-width: 100%;
max-height: 88vh;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: var(--shadow-4);
}
.image-lightbox__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 46px;
height: 46px;
color: var(--fg);
}
.image-lightbox__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
color: var(--fg);
}
.image-lightbox__arrow--prev {
left: var(--space-4);
}
.image-lightbox__arrow--next {
right: var(--space-4);
}
.image-lightbox__arrow:active {
transform: translateY(-50%) scale(0.92);
}
.image-lightbox__counter {
position: absolute;
left: 50%;
bottom: var(--space-5);
transform: translateX(-50%);
padding: 4px var(--space-3);
border-radius: var(--radius-pill);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
color: var(--fg);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
font-variant-numeric: tabular-nums slashed-zero;
box-shadow: var(--shadow-1);
}
/* ==========================================================================
REDUCED MOTION - collapse tilt / parallax / lift / ambient reveals
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.listing-card,
.listing-card__img,
.category-chip,
.category-chip__ink,
.category-tile,
.category-tile__icon,
.category-tile::after,
.seller-chip--link,
.seller-chip__name,
.image-gallery__thumb,
.listing-card__fav,
.image-gallery__zoom,
.image-gallery__arrow,
.image-lightbox__close,
.image-lightbox__arrow,
.category-rail__nav,
.filter-bar__toggle,
.listing-card__glow {
transition: none;
}
.listing-card {
transform: none !important;
}
.listing-card:hover {
--lift: 0px;
}
.listing-card:hover .listing-card__img {
transform: scale(1.04);
}
.category-chip:hover,
.image-gallery__thumb:hover {
transform: none;
}
.category-tile:hover {
transform: none;
}
.category-tile:hover .category-tile__icon {
transform: none;
}
.category-tile::after {
transform: scaleX(1);
height: 1px;
}
.listing-card__fav:active,
.image-gallery__zoom:active,
.image-gallery__arrow:active,
.image-lightbox__close:active,
.category-rail__nav[data-visible='true']:active {
transform: none;
}
.image-lightbox__arrow:active {
transform: translateY(-50%);
}
.image-gallery__arrow {
opacity: 1;
}
.filter-bar__body,
.image-lightbox {
animation: none;
}
}
/* ==================================================================
geo.css - hyphive "EPIC" worldwide + realtime layer
Map · CurrencySwitcher · LocationPicker · NotificationBell
Dark-luxe, cinematic, high-tech. Tokens only - no hard-coded hex.
Soft brand tints are derived from tokens via color-mix(...,transparent).
Mobile-first, large tap targets, real :focus-visible, reduced-motion aware.
================================================================== */
/* ------------------------------------------------------------------ */
/* Popover root + header trigger controls */
/* ------------------------------------------------------------------ */
.geo-pop {
position: relative;
display: inline-flex;
}
/* Trigger - a refined glass header pill. */
.geo-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
max-width: 15rem;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
cursor: pointer;
transition:
background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-quint);
}
.geo-trigger:hover {
background: var(--bg-3);
border-color: var(--border-strong);
}
.geo-trigger:active {
transform: scale(0.98);
}
.geo-trigger:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: var(--ring-offset-width, 2px);
}
/* Open / set states get a luminous hairline + faint glow. */
.geo-trigger[aria-expanded='true'],
.geo-trigger.is-set {
border-color: var(--border-primary);
box-shadow: var(--glow-sm);
}
.geo-trigger__lead {
color: var(--primary);
flex: 0 0 auto;
}
.geo-trigger__flag {
font-size: var(--fs-body);
line-height: 1;
}
.geo-trigger__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.geo-trigger__label.mono {
letter-spacing: var(--tracking-wide);
}
.geo-trigger__chev {
flex: 0 0 auto;
color: var(--fg-muted);
transition: transform var(--dur-base) var(--ease-out-quint);
}
.geo-trigger__chev.is-open {
transform: rotate(180deg);
color: var(--primary);
}
/* ------------------------------------------------------------------ */
/* Notification bell trigger */
/* ------------------------------------------------------------------ */
.geo-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: var(--fg-body);
cursor: pointer;
transition:
background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-quint);
}
.geo-bell:hover {
background: var(--bg-3);
border-color: var(--border);
color: var(--fg);
}
.geo-bell:active {
transform: scale(0.94);
}
.geo-bell[aria-expanded='true'] {
background: var(--bg-3);
border-color: var(--border-primary);
color: var(--fg);
}
.geo-bell:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: var(--ring-offset-width, 2px);
}
/* Unread badge - the single warm, luminous alert accent. */
.geo-bell__badge {
position: absolute;
top: 5px;
right: 5px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--accent-contrast);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
line-height: 1;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--bg-1), var(--glow-accent);
animation: geo-badge-in var(--dur-base) var(--ease-overshoot) both;
}
@keyframes geo-badge-in {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ------------------------------------------------------------------ */
/* Popover panel - glass with a gradient hairline + brand glow */
/* ------------------------------------------------------------------ */
.geo-popover {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
z-index: var(--z-dropdown);
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
box-shadow:
inset 0 1px 0 var(--sheen),
var(--shadow-4),
var(--glow-sm);
transform-origin: top left;
animation: geo-pop-in var(--dur-base) var(--ease-out) both;
}
/* Gradient hairline edge (premium surface). */
.geo-popover::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-border);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
opacity: 0.9;
}
.geo-popover--right {
left: auto;
right: 0;
transform-origin: top right;
}
.geo-popover--sm {
width: min(20rem, calc(100vw - var(--space-5)));
}
.geo-popover--md {
width: min(23rem, calc(100vw - var(--space-5)));
}
@keyframes geo-pop-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.geo-popover__head,
.geo-popover__foot {
align-items: center;
}
.geo-popover__foot {
padding-top: var(--space-2);
border-top: 1px solid var(--hairline);
}
/* Small ghost text button (Clear / Mark all read). */
.geo-textbtn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--fg-muted);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
cursor: pointer;
transition:
color var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard);
}
.geo-textbtn:hover {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.geo-textbtn:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: 1px;
}
/* ------------------------------------------------------------------ */
/* Option list (currency / country) */
/* ------------------------------------------------------------------ */
.geo-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 15rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
display: flex;
flex-direction: column;
gap: 2px;
}
.geo-list--tall {
max-height: 13rem;
}
.geo-list:focus-visible {
outline: none;
}
.geo-list::-webkit-scrollbar {
width: 8px;
}
.geo-list::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
}
.geo-option {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
padding: var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--fg-body);
font-size: var(--fs-sm);
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.geo-option__flag {
font-size: var(--fs-body);
line-height: 1;
flex: 0 0 auto;
}
.geo-option__code {
font-size: var(--fs-xs);
color: var(--fg-muted);
letter-spacing: var(--tracking-wide);
flex: 0 0 auto;
min-width: 2.6em;
}
.geo-option__name {
flex: 1 1 auto;
min-width: 0;
color: var(--fg-body);
}
.geo-option__sym {
font-size: var(--fs-xs);
color: var(--fg-faint);
flex: 0 0 auto;
}
.geo-option__check {
color: var(--primary);
flex: 0 0 auto;
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 60%, transparent));
}
.geo-option.is-active {
background: var(--bg-3);
color: var(--fg);
}
.geo-option.is-selected {
background: color-mix(in srgb, var(--primary) 14%, transparent);
color: var(--fg);
}
.geo-option.is-selected .geo-option__name {
color: var(--fg);
}
.geo-option.is-selected .geo-option__code,
.geo-option.is-selected .geo-option__sym {
color: var(--primary);
}
.geo-empty {
padding: var(--space-4) var(--space-2);
color: var(--fg-muted);
}
/* ------------------------------------------------------------------ */
/* Location picker specifics */
/* ------------------------------------------------------------------ */
/* Detect button - primary CTA with the signature glow. */
.geo-detect {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: var(--grad-primary);
color: var(--primary-contrast);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
cursor: pointer;
box-shadow: var(--glow-sm);
transition:
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-out-quint),
filter var(--dur-base) var(--ease-standard);
}
.geo-detect:hover:not(:disabled) {
box-shadow: var(--glow-md);
filter: brightness(1.05);
}
.geo-detect:active:not(:disabled) {
transform: scale(0.985);
}
.geo-detect:disabled {
opacity: 0.75;
cursor: progress;
box-shadow: none;
}
.geo-detect:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: var(--ring-offset-width, 2px);
}
/* Search field + city input. */
.geo-field {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-3);
min-height: 42px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-2);
transition:
border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard);
}
.geo-field:focus-within {
border-color: var(--border-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.geo-field__icon {
color: var(--fg-muted);
flex: 0 0 auto;
}
.geo-field__input,
.geo-cityinput {
flex: 1 1 auto;
width: 100%;
border: 0;
background: transparent;
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: var(--lh-body);
}
.geo-field__input {
padding: var(--space-2) 0;
}
.geo-field__input:focus,
.geo-cityinput:focus {
outline: none;
}
.geo-field__input::placeholder,
.geo-cityinput::placeholder {
color: var(--fg-faint);
}
.geo-cityinput {
min-height: 42px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-2);
transition:
border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard);
}
.geo-cityinput:focus {
border-color: var(--border-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.geo-error {
margin: 0;
color: var(--danger);
}
/* Units toggle. */
.geo-units {
display: inline-flex;
padding: 3px;
border-radius: var(--radius-pill);
background: var(--bg-2);
border: 1px solid var(--border);
}
.geo-unit {
min-width: 42px;
min-height: 30px;
padding: var(--space-1) var(--space-3);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--fg-muted);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tracking-wide);
cursor: pointer;
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.geo-unit.is-active {
background: var(--bg-4);
color: var(--primary);
box-shadow: var(--shadow-1);
}
.geo-unit:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: 1px;
}
/* ------------------------------------------------------------------ */
/* Notifications */
/* ------------------------------------------------------------------ */
.geo-notif-loading,
.geo-notif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-6) var(--space-3);
}
.geo-notif-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 22rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
display: flex;
flex-direction: column;
gap: 2px;
}
.geo-notif-list::-webkit-scrollbar {
width: 8px;
}
.geo-notif-list::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
}
.geo-notif {
display: flex;
align-items: flex-start;
gap: var(--space-3);
width: 100%;
padding: var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--fg-body);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard);
}
.geo-notif:hover {
background: var(--bg-3);
}
.geo-notif:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: -2px;
}
.geo-notif.is-unread {
background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.geo-notif.is-unread:hover {
background: color-mix(in srgb, var(--primary) 16%, transparent);
}
/* Luminous unread dot - the bioluminescent signature. */
.geo-notif__dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-top: 6px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--border-strong);
}
.geo-notif__dot.is-unread {
background: var(--primary);
border-color: var(--primary);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent),
0 0 8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.geo-notif__content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.geo-notif__title {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
color: var(--fg);
}
.geo-notif__body {
line-height: var(--lh-tight);
color: var(--fg-muted);
}
.geo-notif__time {
font-size: var(--fs-label);
color: var(--fg-faint);
letter-spacing: var(--tracking-wide);
margin-top: 2px;
}
/* ==================================================================
Map - cinematic dark tiles, luminous glowing pins, glass popups
================================================================== */
.hyphive-map {
position: relative;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-2);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 var(--sheen);
z-index: var(--z-base);
}
.hyphive-map__canvas {
position: absolute;
inset: 0;
}
.hyphive-map--static .hyphive-map__canvas {
pointer-events: none;
}
/* Cinematic vignette + faint brand edge-glow. Transparent centre keeps pins
crisp; pointer-events:none so controls and popups stay interactive. */
.hyphive-map::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 500;
background:
radial-gradient(120% 120% at 50% 42%, transparent 58%, color-mix(in srgb, var(--bg-0) 70%, transparent) 100%),
radial-gradient(90% 90% at 50% 108%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%);
box-shadow: inset 0 0 0 1px var(--hairline);
border-radius: inherit;
}
.hyphive-map--failed {
display: flex;
align-items: center;
justify-content: center;
}
.hyphive-map--failed::after {
content: none;
}
.hyphive-map__fallback {
color: var(--fg-muted);
font-size: var(--fs-sm);
font-family: var(--font-sans);
}
/* Leaflet container inherits our surfaces. */
.hyphive-map .leaflet-container {
width: 100%;
height: 100%;
background: var(--bg-1);
font-family: var(--font-sans);
color: var(--fg-body);
}
/* Crisp, gallery-clean OSM tiles - the map lives in LIGHT content by default. */
.hyphive-map .leaflet-tile {
filter: saturate(0.92) brightness(1.02) contrast(0.98);
}
/* Inside a dark surface, darken + desaturate the tiles toward the brand. */
.surface-dark .hyphive-map .leaflet-tile,
[data-surface='dark'] .hyphive-map .leaflet-tile {
filter:
brightness(0.62)
invert(1)
contrast(0.86)
hue-rotate(176deg)
saturate(0.58)
brightness(0.94);
}
/* Zoom controls - glass buttons. */
.hyphive-map .leaflet-bar {
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.hyphive-map .leaflet-bar a {
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
backdrop-filter: blur(var(--glass-blur-sm));
color: var(--fg-body);
border-bottom: 1px solid var(--hairline);
transition:
background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.hyphive-map .leaflet-bar a:hover {
background: var(--bg-4);
color: var(--primary);
}
.hyphive-map .leaflet-bar a:focus-visible {
outline: var(--ring-width, 2px) solid var(--ring);
outline-offset: -2px;
}
.hyphive-map .leaflet-control-attribution {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
backdrop-filter: blur(var(--glass-blur-sm));
color: var(--fg-muted);
font-size: var(--fs-label);
border-top-left-radius: var(--radius-sm);
}
.hyphive-map .leaflet-control-attribution a {
color: var(--fg-body);
}
.hyphive-map .leaflet-control-attribution a:hover {
color: var(--primary);
}
/* ------------------------------------------------------------------ */
/* Brand pin marker (L.divIcon) - luminous bioluminescent teardrop */
/* ------------------------------------------------------------------ */
.hyphive-pin-wrap {
background: transparent;
border: 0;
}
.hyphive-pin {
position: relative;
display: block;
width: 30px;
height: 40px;
filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--bg-0) 55%, transparent));
}
/* Pulse halo (expanding ring). */
.hyphive-pin::after {
content: '';
position: absolute;
left: 2px;
top: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--primary);
opacity: 0;
transform-origin: 50% 50%;
pointer-events: none;
animation: hyphive-pin-pulse 2400ms var(--ease-out) infinite;
}
/* Teardrop body - luminous green with a dark rim and outer glow. */
.hyphive-pin::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 26px;
height: 26px;
margin-left: -13px;
background:
radial-gradient(circle at 50% 38%, var(--primary-bright), var(--primary) 70%);
border: 2px solid var(--bg-0);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow:
0 0 10px color-mix(in srgb, var(--primary) 75%, transparent),
0 0 20px color-mix(in srgb, var(--primary) 45%, transparent);
}
.hyphive-pin__core {
position: absolute;
left: 50%;
top: 8px;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bg-0);
box-shadow: inset 0 0 4px color-mix(in srgb, var(--primary) 60%, transparent);
z-index: 1;
}
/* Active / single-listing pin - the sparse warm accent, brighter glow. */
.hyphive-pin.is-active::before {
background:
radial-gradient(circle at 50% 38%, var(--accent-bright), var(--accent) 70%);
border-color: var(--bg-0);
box-shadow:
0 0 12px color-mix(in srgb, var(--accent) 80%, transparent),
0 0 24px color-mix(in srgb, var(--accent) 50%, transparent);
}
.hyphive-pin.is-active::after {
border-color: var(--accent);
}
.hyphive-pin.is-active .hyphive-pin__core {
box-shadow: inset 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes hyphive-pin-pulse {
0% { transform: scale(0.5); opacity: 0.65; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
/* ------------------------------------------------------------------ */
/* Popup - dark glass card */
/* ------------------------------------------------------------------ */
.hyphive-popup-shell .leaflet-popup-content-wrapper {
padding: 0;
border-radius: var(--radius-md);
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
color: var(--fg);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-4), var(--glow-sm);
}
.hyphive-popup-shell .leaflet-popup-content {
margin: 0;
min-width: 9.5rem;
}
.hyphive-popup-shell .leaflet-popup-tip {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-2);
}
.hyphive-popup-shell .leaflet-popup-close-button {
color: var(--fg-muted);
padding: var(--space-2) var(--space-2) 0 0;
transition: color var(--dur-fast) var(--ease-standard);
}
.hyphive-popup-shell .leaflet-popup-close-button:hover {
color: var(--fg);
}
.hyphive-popup {
display: flex;
flex-direction: column;
gap: 3px;
padding: var(--space-3);
}
.hyphive-popup__title {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--fg);
line-height: var(--lh-tight);
}
.hyphive-popup__loc {
font-family: var(--font-mono);
font-size: var(--fs-label);
color: var(--fg-muted);
letter-spacing: var(--tracking-wide);
}
.hyphive-popup__link {
margin-top: var(--space-2);
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--primary);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
text-decoration: none;
transition: gap var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-standard);
}
.hyphive-popup__link:hover {
color: var(--primary-bright);
gap: 8px;
}
.hyphive-popup__arrow {
display: inline-block;
}
/* ------------------------------------------------------------------ */
/* Reduced motion */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.geo-popover,
.geo-bell__badge {
animation: none;
}
.hyphive-pin::after {
animation: none;
display: none;
}
.geo-trigger,
.geo-trigger__chev,
.geo-bell,
.geo-detect,
.geo-option,
.geo-notif,
.geo-textbtn,
.geo-unit,
.hyphive-popup__link,
.hyphive-map .leaflet-bar a {
transition-duration: 1ms;
}
.geo-trigger:active,
.geo-bell:active,
.geo-detect:active {
transform: none;
}
}
/* ---- Location picker: featured quick-picks (USA / UK / Europe / Australia) ---- */
.geo-featured {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-block: var(--space-1) var(--space-3);
}
.geo-featured__label {
color: var(--fg-faint);
}
.geo-featured__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.geo-chip {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 var(--space-3);
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--glass-bg);
color: var(--fg);
font: inherit;
font-weight: var(--fw-medium);
cursor: pointer;
text-align: left;
transition: border-color var(--dur-2, 200ms) var(--ease-standard),
background var(--dur-2, 200ms) var(--ease-standard),
box-shadow var(--dur-2, 200ms) var(--ease-standard),
transform var(--dur-1, 120ms) var(--ease-standard);
}
.geo-chip:hover {
border-color: var(--border-primary);
background: var(--surface-raised);
}
.geo-chip:active { transform: translateY(1px); }
.geo-chip:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
}
.geo-chip.is-selected {
border-color: var(--primary);
background: var(--primary-soft);
box-shadow: var(--glow-sm);
}
.geo-chip__flag { font-size: 1.05rem; line-height: 1; }
.geo-chip__name { flex: 1 1 auto; min-width: 0; }
.geo-chip__check { color: var(--primary); flex: 0 0 auto; }
.geo-hint {
margin: var(--space-1) 0 var(--space-2);
padding: var(--space-3);
border-radius: var(--radius-md);
border: 1px dashed var(--border);
text-align: center;
}
/* ================================================================= *
* craft.css - the hand-touch layer for hyphive.
* Editorial typography, tactile UI details and ornament styling.
* Token-based, dark-first, WCAG-AA. Consumes theme.css tokens only;
* never hard-codes colour. Grain/noise is kept VERY subtle so the
* premium dark base is preserved.
* ================================================================= */
:root {
/* Fraunces Variable - warm old-style editorial serif for
hand-crafted heading / pull-quote / accent moments. */
--font-editorial: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif;
/* Hand-jitter tokens - deliberate, tiny, placed-by-hand angles.
Odd values (never 5/10deg) read as human, not machine. */
--tilt-stamp: -1.2deg;
--tilt-tag: -0.6deg;
--tilt-tag-alt: 0.8deg;
/* Editorial rhythm helper for oversized numerals / drop-caps. */
--editorial-cap-size: 3.4em;
}
/* ----------------------------------------------------------------- *
* Global grain hook. A page can opt into a whisper of paper-tooth
* by adding `.craft-grain` to a wrapping element (or ). The
* heavy lifting is the fixed layer; this is a cheap
* per-surface fallback tint that never greys the midtones.
* ----------------------------------------------------------------- */
.craft-grain {
position: relative;
isolation: isolate;
}
.craft-grain::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
opacity: 0.5;
mix-blend-mode: overlay;
background-image: var(--vignette, none);
}
.craft-grain > * {
position: relative;
z-index: 1;
}
/* ----------------------------------------------------------------- *
* GrainField - fixed, full-viewport, pointer-events-none noise.
* Two turbulences: a fine tooth + a large uneven patina so the dark
* base is never uniformly lit. Opacities are intentionally tiny.
* ----------------------------------------------------------------- */
.grain-field {
position: fixed;
inset: 0;
z-index: var(--z-grain, 1);
pointer-events: none;
overflow: hidden;
contain: strict;
}
.grain-field__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* fine tooth: visible only as texture, never as noise */
.grain-field__fine {
opacity: 0.035;
mix-blend-mode: overlay;
}
/* large-scale patina: fakes uneven lighting across the page */
.grain-field__patina {
opacity: 0.06;
mix-blend-mode: soft-light;
}
@media (prefers-contrast: more) {
.grain-field { display: none; }
}
/* ----------------------------------------------------------------- *
* Ornament base styling. All ornaments inherit colour via
* currentColor; these just size them and set a sensible default ink.
* ----------------------------------------------------------------- */
.hyphae-divider {
display: block;
width: 100%;
height: auto;
color: var(--fg-faint);
overflow: visible;
}
.spore-scatter {
display: block;
width: 100%;
max-width: 7rem;
height: auto;
color: var(--fg-muted);
}
.sprig {
display: block;
width: 2.5rem;
height: auto;
color: var(--fg-muted);
overflow: visible;
}
.sketch-arrow {
display: block;
width: 3.5rem;
height: auto;
color: var(--accent);
overflow: visible;
}
/* ----------------------------------------------------------------- *
* .u-handunderline - hand-drawn underline to sit under a word.
* Absolutely positioned just below its inline parent. The parent
* word should be `position: relative`.
* ----------------------------------------------------------------- */
.u-handunderline {
position: absolute;
left: -0.06em;
right: -0.14em; /* overshoot the word on the right */
bottom: -0.24em;
width: auto;
height: 0.42em;
overflow: visible;
color: var(--accent);
pointer-events: none;
}
/* draw-in animation, gated on prefers-reduced-motion */
.u-handunderline__stroke {
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: craft-draw var(--dur-4, 900ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) forwards;
}
.u-handunderline__ghost {
stroke-dasharray: 240;
stroke-dashoffset: 240;
animation: craft-draw var(--dur-4, 900ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) 120ms forwards;
}
@keyframes craft-draw {
to { stroke-dashoffset: 0; }
}
/* helper: an inline word that hosts a hand-underline */
.u-underlined {
position: relative;
display: inline-block;
white-space: nowrap;
}
/* ----------------------------------------------------------------- *
* .u-stamp - a rubber-stamp / wax-seal mark. Placed-by-hand tilt,
* glows warm into the dark ground rather than sitting on top.
* ----------------------------------------------------------------- */
.u-stamp {
display: inline-block;
transform: rotate(var(--tilt-stamp));
transform-origin: center;
}
.wax-seal {
width: 4rem;
height: 4rem;
color: var(--accent);
opacity: 0.92;
overflow: visible;
/* shadow direction follows the tilt so it reads physical */
filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.45));
}
.wax-seal__text {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 7px;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.14em;
}
/* ----------------------------------------------------------------- *
* .specimen-tag - apothecary / herbarium label wrapper with a
* punched hole and a slight rotation. Warm paper plane, hairline
* border, trimmed corner. Settles to straight on hover/focus.
* ----------------------------------------------------------------- */
.specimen-tag {
position: relative;
display: block;
padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-3, 0.75rem);
padding-top: var(--space-6, 1.5rem);
background: var(--surface, var(--bg-2));
border: 1px solid var(--border);
border-radius: var(--radius-sm, 4px);
color: var(--fg-body);
transform: rotate(var(--tilt-tag));
transform-origin: top center;
box-shadow:
inset 0 1px 0 var(--sheen, rgba(255, 255, 255, 0.04)),
var(--shadow-2, 0 8px 24px -12px rgba(0, 0, 0, 0.6));
/* trimmed top-left corner, like a hand-cut tag */
clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
transition: transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.specimen-tag:nth-of-type(even) {
transform: rotate(var(--tilt-tag-alt));
}
.specimen-tag:hover,
.specimen-tag:focus-within {
transform: rotate(0deg);
}
/* punched hole near the top - reads as a real punch on dark */
.specimen-tag__hole {
position: absolute;
top: var(--space-2, 0.5rem);
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: var(--radius-pill, 999px);
background: var(--bg-0, var(--bg-1));
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.7),
0 1px 0 var(--sheen, rgba(255, 255, 255, 0.05));
}
.specimen-tag__body {
display: block;
}
/* ----------------------------------------------------------------- *
* .cutline - a dashed hand cut-line. Crisp dashes via repeating
* gradient (never border-dashed), with an optional scissors glyph.
* ----------------------------------------------------------------- */
.cutline {
display: flex;
align-items: center;
gap: var(--space-2, 0.5rem);
width: 100%;
color: var(--fg-faint);
}
.cutline__scissors {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
color: inherit;
}
.cutline__rule {
flex: 1 1 auto;
height: 1px;
background-image: repeating-linear-gradient(
90deg,
currentColor 0,
currentColor 6px,
transparent 6px,
transparent 12px
);
opacity: 0.5;
}
/* ----------------------------------------------------------------- *
* .marginalia - mono index number / field-guide annotation, sits in
* the quiet margin beside a section. Letterpress-debossed micro-label.
* ----------------------------------------------------------------- */
.marginalia {
display: inline-block;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--fs-xs, 0.75rem);
font-weight: var(--fw-medium, 500);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-muted);
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.5),
0 -1px 0 var(--sheen, rgba(255, 255, 255, 0.04));
font-feature-settings: 'tnum' 1;
}
/* oversized index numeral variant (01 / 02) beside sections */
.marginalia--index {
font-family: var(--font-editorial);
font-size: var(--fs-h4, 1.5rem);
font-weight: var(--fw-regular, 400);
letter-spacing: 0.02em;
color: var(--accent);
opacity: 0.75;
font-feature-settings: 'onum' 1, 'tnum' 0;
}
/* vertical margin label, like a field-guide annotation */
.marginalia--vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* ----------------------------------------------------------------- *
* .drop-cap - a true editorial initial letter in the serif, warm
* accent, for story / grower / journal blocks only.
* ----------------------------------------------------------------- */
.drop-cap::first-letter {
float: left;
font-family: var(--font-editorial);
font-weight: var(--fw-semibold, 600);
font-size: var(--editorial-cap-size);
line-height: 0.82;
padding: 0.04em 0.12em 0 0;
margin-right: 0.02em;
color: var(--accent);
font-feature-settings: 'onum' 0;
}
/* small-caps opening line pairs well with the drop-cap */
.drop-cap::first-line {
font-variant-caps: small-caps;
letter-spacing: 0.03em;
}
@supports (initial-letter: 3) {
.drop-cap::first-letter {
initial-letter: 3;
float: none;
}
}
/* ----------------------------------------------------------------- *
* .editorial-title - Fraunces display heading for hand-crafted
* moments. Big scale, tight tracking, sentence-case editorial voice
* (never ALL-CAPS-CENTERED). Debossed on dark.
* ----------------------------------------------------------------- */
.editorial-title {
font-family: var(--font-editorial);
font-weight: var(--fw-semibold, 600);
font-size: clamp(2rem, 5.5vw, 3.75rem);
line-height: var(--lh-tight, 1.04);
letter-spacing: -0.02em;
color: var(--fg);
text-wrap: balance;
font-variation-settings: 'opsz' 128, 'SOFT' 0, 'WONK' 1;
font-feature-settings: 'liga' 1, 'onum' 1;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.55),
0 -1px 0 var(--sheen, rgba(255, 255, 255, 0.04));
}
.editorial-title em,
.editorial-title i,
.editorial-title .binomial {
font-style: italic;
font-variation-settings: 'opsz' 96, 'SOFT' 40, 'WONK' 1;
}
/* editorial pull-quote - hung, hand-tilted, ink-ruled */
.editorial-quote {
font-family: var(--font-editorial);
font-weight: var(--fw-regular, 400);
font-style: italic;
font-size: clamp(1.4rem, 3vw, 2.2rem);
line-height: var(--lh-snug, 1.18);
color: var(--fg);
max-width: 20ch;
margin: 0;
padding-left: var(--space-4, 1rem);
border-left: 2px solid var(--accent);
transform: rotate(-1.2deg);
}
/* editorial eyebrow - tracked mono kicker, hanging into the margin */
.editorial-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2, 0.5rem);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--fs-label, 0.6875rem);
font-weight: var(--fw-medium, 500);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
/* italic Latin binomial helper (pairs with global .binomial) */
.u-binomial {
font-family: var(--font-editorial);
font-style: italic;
font-variation-settings: 'opsz' 72, 'SOFT' 40;
letter-spacing: 0;
color: inherit;
}
/* ----------------------------------------------------------------- *
* Small helpers.
* ----------------------------------------------------------------- */
/* risograph mis-registration glow on a select accent element */
.u-misregister {
position: relative;
}
.u-misregister::after {
content: attr(data-echo);
position: absolute;
inset: 0;
transform: translate(1.5px, -1px);
color: var(--primary);
opacity: 0.28;
mix-blend-mode: screen;
pointer-events: none;
z-index: -1;
}
/* faint hand-made paper-tooth on a key surface */
.u-paper {
position: relative;
isolation: isolate;
}
.u-paper::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0.4;
mix-blend-mode: soft-light;
background: var(--grad-metal, none);
}
/* nudge a framed photo as if pinned to a board */
.u-pinned { transform: rotate(-0.4deg); }
.u-pinned:nth-child(even) { transform: rotate(0.4deg); }
/* oldstyle / tabular figures for catalogue-feel prices & counts */
.u-oldstyle { font-feature-settings: 'onum' 1, 'liga' 1; }
/* short, flush-left rough rule for section headers */
.u-rule-short {
width: 2.5rem;
height: 1px;
border: 0;
background: currentColor;
color: var(--accent);
opacity: 0.85;
}
/* ----------------------------------------------------------------- *
* Motion & accessibility. Respect reduced-motion and forced-colors.
* ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.u-handunderline__stroke,
.u-handunderline__ghost {
animation: none;
stroke-dashoffset: 0;
}
.specimen-tag {
transition: none;
}
}
@media (forced-colors: active) {
.grain-field { display: none; }
.specimen-tag { border-color: CanvasText; }
.cutline__rule { background-image: none; border-top: 1px dashed CanvasText; }
}
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
max-width: none !important;
max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
width: auto;
padding: 0;
}
.leaflet-container img.leaflet-tile {
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline-offset: 1px;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
font-size: 13px;
font-size: 1.08333em;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.8);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
line-height: 1.4;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
text-decoration: underline;
}
.leaflet-attribution-flag {
display: inline !important;
vertical-align: baseline !important;
width: 1em;
height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
white-space: nowrap;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 24px 13px 20px;
line-height: 1.3;
font-size: 13px;
font-size: 1.08333em;
min-height: 1px;
}
.leaflet-popup-content p {
margin: 17px 0;
margin: 1.3em 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-top: -1px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
pointer-events: auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
border: none;
text-align: center;
width: 24px;
height: 24px;
font: 16px/24px Tahoma, Verdana, sans-serif;
color: #757575;
text-decoration: none;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
color: #585858;
}
.leaflet-popup-scrolled {
overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
-ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* Printing */
@media print {
/* Prevent printers from removing background-images of controls. */
.leaflet-control {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* =============================================================================
hyphive - EPIC design system · theme.css
Cinematic dark-luxe × high-tech · bioluminescent mycelial signature glow
-----------------------------------------------------------------------------
THE authoritative token layer. Components consume these vars ONLY - no raw
hex outside this file. The site ships ONE deliberate light/dark MIX (no theme
toggle): warm-LIGHT is the default content ramp (redeclared on :root just
below), and DARK is applied to banners/chrome via the `.surface-dark` scope
(site header, Home hero, page-header banners, footer). The first :root block
below supplies the shared STRUCTURAL tokens (type, spacing, radius, motion);
its colour values are the base dark ramp and are overridden by the light
:root that follows.
Fonts are @fontsource-imported by the orchestrator; we only name families.
========================================================================== */
/* Typed custom properties - GPU-interpolable gradient angle & glow colour.
Used for rotating conic borders and true-colour glow transitions. */
@property --angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
@property --glow-color {
syntax: "";
inherits: false;
initial-value: transparent;
}
/* =============================================================================
ROOT - structural tokens + base (dark) ramp.
The warm-LIGHT :root further down redeclares the colour tokens and is the
effective default view; the dark values here are inherited only by elements
inside a `.surface-dark` scope. Structural tokens (type/space/radius/motion/
z) live ONLY here and apply everywhere.
========================================================================== */
:root {
color-scheme: dark;
/* ---- Type families (self-hosted variable fonts) ------------------------ */
--font-display: "Bricolage Grotesque Variable", "Space Grotesk Variable",
"Inter Variable", system-ui, sans-serif;
--font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, sans-serif;
--font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo,
monospace;
/* ---- Fluid display type scale (1.25 modular, hero → ~6rem) ------------- */
--fs-display: clamp(3rem, 6vw + 0.5rem, 6rem); /* hero */
--fs-h1: clamp(2.4rem, 4.2vw + 0.5rem, 4rem);
--fs-h2: clamp(1.9rem, 2.8vw + 0.5rem, 2.85rem);
--fs-h3: clamp(1.45rem, 1.6vw + 0.5rem, 2rem);
--fs-h4: clamp(1.2rem, 0.8vw + 0.6rem, 1.5rem);
--fs-lead: clamp(1.075rem, 0.6vw + 0.9rem, 1.3rem); /* deck / subtitle */
--fs-body: 1rem; /* 16px base */
--fs-sm: 0.875rem;
--fs-xs: 0.78rem;
--fs-label: 0.7rem; /* mono micro-labels */
--lh-display: 1.02;
--lh-heading: 1.1;
--lh-body: 1.6;
--lh-tight: 1.3;
--tracking-display: -0.03em;
--tracking-heading: -0.02em;
--tracking-tight: -0.01em;
--tracking-label: 0.16em; /* uppercase eyebrows / mono labels */
--tracking-wide: 0.08em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 680;
/* ---- Layered dark surfaces (elevation = lighter surface, cool bias) ---- */
--bg-0: #060B08; /* page - deep near-black, cool green undertone */
--bg-1: #07100C; /* section band */
--bg-2: #0C1712; /* raised surface */
--bg-3: #12201A; /* card */
--bg-4: #172A21; /* hover / popover / highest solid */
--surface: var(--bg-3);
--surface-raised: var(--bg-4);
/* ---- Text ramp (never pure white - kills halation) --------------------- */
--fg: #EAF2EC; /* headings / hi-emphasis */
--fg-body: rgba(234, 242, 236, 0.82); /* body */
--fg-muted: #93A79A; /* secondary */
--fg-faint: #5E7268; /* tertiary / disabled */
--fg-on-accent: #041109; /* text on luminous green fills */
--fg-on-warm: #1B1203; /* text on gold fills */
/* ---- Brand hues -------------------------------------------------------- */
--primary: #37E29A; /* bioluminescent mycelial green */
--primary-bright: #45F0A6; /* hover / peak glow */
--primary-dim: #2BB47C; /* pressed */
--primary-contrast: var(--fg-on-accent);
--accent: #E6B15A; /* chanterelle gold - sparse, high-emphasis */
--accent-bright: #F3C978;
--accent-contrast: var(--fg-on-warm);
--data: #4FD6E0; /* cool cyan-teal - data / charts / links */
--data-dim: #35A9B3;
/* ---- Semantic (tuned to palette, AA legible on dark) ------------------- */
--success: #37E29A;
--success-fg: #7FF3C6;
--warning: #E6B15A;
--warning-fg: #F0C98A;
--danger: #FF6B6B;
--danger-fg: #FF9C9C;
--info: #4FD6E0;
/* ---- Borders / hairlines ---------------------------------------------- */
--border: rgba(234, 242, 236, 0.08);
--border-strong: rgba(234, 242, 236, 0.14);
--border-primary: rgba(55, 226, 154, 0.28);
--hairline: rgba(234, 242, 236, 0.06);
--sheen: rgba(234, 242, 236, 0.07); /* top-lit etched-metal edge */
/* Gradient hairline (lit top-left → fading, faint green at base) */
--gradient-border: linear-gradient(
135deg,
rgba(234, 242, 236, 0.45),
rgba(234, 242, 236, 0.05) 42%,
transparent 62%,
rgba(55, 226, 154, 0.18)
);
/* ---- Glass ------------------------------------------------------------- */
--glass-bg: color-mix(in oklab, var(--bg-2) 62%, transparent);
--glass-bg-strong: color-mix(in oklab, var(--bg-3) 78%, transparent);
--glass-border: rgba(234, 242, 236, 0.10);
--glass-blur: 20px;
--glass-blur-sm: 10px;
--glass-blur-lg: 34px;
--glass-saturate: 150%;
/* ---- Rings / focus ----------------------------------------------------- */
--ring: rgba(55, 226, 154, 0.55);
--ring-offset: var(--bg-0);
--ring-width: 2px;
--ring-offset-width: 2px;
/* ---- Signature gradients & aurora ------------------------------------- */
--grad-primary: linear-gradient(135deg, var(--primary-bright), var(--primary-dim));
--grad-accent: linear-gradient(135deg, var(--accent-bright), var(--accent));
--grad-data: linear-gradient(135deg, var(--data), var(--primary));
--grad-metal: linear-gradient(180deg, #FFFFFF 0%, #B9C8C0 100%); /* brushed-metal hero word */
--grad-shimmer: linear-gradient(
100deg,
var(--fg) 0%,
var(--primary-bright) 30%,
var(--data) 50%,
var(--primary-bright) 70%,
var(--fg) 100%
);
/* Aurora mesh - OKLCH-mixed radial blobs, never muddies to grey */
--aurora:
radial-gradient(60% 50% at 18% 12%, color-mix(in oklab, var(--primary) 32%, transparent), transparent 62%),
radial-gradient(50% 42% at 84% 20%, color-mix(in oklab, var(--data) 26%, transparent), transparent 60%),
radial-gradient(80% 62% at 50% 108%, color-mix(in oklab, #0A2E22 70%, transparent), transparent 72%);
--vignette:
radial-gradient(130% 100% at 50% -8%, rgba(23, 42, 33, 0.55) 0%, transparent 55%),
radial-gradient(140% 120% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.38));
/* ---- Shadows: layered black weight + coloured luminous glow ----------- */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 var(--sheen) inset;
--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.65),
0 1px 0 var(--sheen) inset;
--shadow-3: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 40px -18px rgba(0, 0, 0, 0.75),
0 1px 0 var(--sheen) inset;
--shadow-4: 0 4px 8px rgba(0, 0, 0, 0.6), 0 32px 64px -24px rgba(0, 0, 0, 0.82),
0 1px 0 var(--sheen) inset;
/* Glow tokens - brand-keyed luminous halos (tight, negative spread) */
--glow-sm: 0 0 16px -6px rgba(55, 226, 154, 0.5);
--glow-md: 0 0 32px -8px rgba(55, 226, 154, 0.55);
--glow-lg: 0 0 64px -16px rgba(55, 226, 154, 0.45);
--glow-accent: 0 0 30px -8px rgba(230, 177, 90, 0.55);
--glow-data: 0 0 28px -8px rgba(79, 214, 224, 0.5);
/* composite: card weight + brand bloom (hover peak) */
--elev-hover: 0 30px 60px -24px rgba(0, 0, 0, 0.85),
0 0 42px -12px rgba(55, 226, 154, 0.28),
0 1px 0 var(--sheen) inset;
/* ---- Spacing - 8pt scale ---------------------------------------------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 2.5rem; /* 40 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 10rem; /* 160 */
--section-y: clamp(4.5rem, 10vh, 10rem); /* fluid section rhythm */
/* ---- Radius - refined multi-step -------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 999px;
/* ---- Layout ------------------------------------------------------------ */
--maxw: 1200px;
--maxw-lg: 1400px;
--maxw-narrow: 720px;
--measure: 68ch;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
/* ---- Motion - durations + shared eases -------------------------------- */
--dur-micro: 140ms; /* hover / press */
--dur-fast: 200ms;
--dur-base: 280ms; /* state swaps */
--dur-slow: 420ms;
--dur-macro: 720ms; /* reveals / entrances */
--dur-aurora: 34s; /* ambient drift */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out - reveals */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* card hover settle */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moves / state */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* micro */
--ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1); /* tiny confirmations only */
/* ---- Z-index ladder ---------------------------------------------------- */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-header: 200;
--z-dropdown: 300;
--z-overlay: 400;
--z-modal: 500;
--z-toast: 600;
--z-cursor: 900;
--z-grain: 950;
/* Cursor spotlight position (rAF-updated by JS; safe defaults) */
--mx: 50%;
--my: 50%;
}
/* =============================================================================
DEFAULT VIEW - warm gallery-light (THE single content ramp).
The page, category grid and product surfaces all read on this light ramp so
they stay easy to read. There is NO user-facing theme toggle: the site ships
one deliberate light/dark MIX - dark banners/chrome (see .surface-dark below)
over warm-light content. Warm paper tone ties the botanical hand-touch
thumbnails to the surfaces they sit on.
========================================================================== */
/* `:root:root` (specificity 0,2,0) so the light content ramp deterministically
wins over the base dark `:root` above regardless of source-order quirks in the
bundler/CSSOM. It still only matches , so element-level `.surface-dark`
rules keep governing the dark banners. */
:root:root {
color-scheme: light;
--bg-0: #F4F1E9; /* page - warm paper */
--bg-1: #FBF9F4; /* section band / footer / page-header base */
--bg-2: #EFEADF; /* raised: inputs, tags, media placeholders, icon tiles */
--bg-3: #FFFFFF; /* card - clean white pops on the warm page */
--bg-4: #F3EFE6; /* hover / highest solid */
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--fg: #0A1611;
--fg-body: rgba(10, 22, 17, 0.78);
--fg-muted: #4C6157;
--fg-faint: #7C9186;
--fg-on-accent: #04140C;
--fg-on-warm: #221703;
--primary: #12B981; /* deeper for AA on white */
--primary-bright: #0EA372;
--primary-dim: #0B8C61;
--primary-contrast: #FFFFFF;
--accent: #B67B18;
--accent-bright: #C98E2A;
--accent-contrast: #FFFFFF;
--data: #0E97A3;
--data-dim: #0B7A85;
--success: #0E9E6E;
--success-fg: #0B7C56;
--warning: #B67B18;
--warning-fg: #8A5C10;
--danger: #D64545;
--danger-fg: #B23434;
--info: #0E97A3;
--border: rgba(10, 22, 17, 0.10);
--border-strong: rgba(10, 22, 17, 0.16);
--border-primary: rgba(18, 185, 129, 0.35);
--hairline: rgba(10, 22, 17, 0.08);
--sheen: rgba(255, 255, 255, 0.9);
--gradient-border: linear-gradient(
135deg,
rgba(10, 22, 17, 0.16),
rgba(10, 22, 17, 0.04) 45%,
transparent 62%,
rgba(18, 185, 129, 0.22)
);
--glass-bg: color-mix(in oklab, #FFFFFF 68%, transparent);
--glass-bg-strong: color-mix(in oklab, #FFFFFF 84%, transparent);
--glass-border: rgba(10, 22, 17, 0.10);
--ring: rgba(18, 185, 129, 0.5);
--ring-offset: var(--bg-0);
--grad-metal: linear-gradient(180deg, #14231C 0%, #4C6157 100%);
--grad-shimmer: linear-gradient(
100deg,
var(--fg) 0%,
var(--primary) 32%,
var(--data) 50%,
var(--primary) 68%,
var(--fg) 100%
);
--aurora:
radial-gradient(60% 50% at 18% 12%, color-mix(in oklab, var(--primary) 9%, transparent), transparent 62%),
radial-gradient(50% 42% at 84% 20%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%),
radial-gradient(80% 62% at 50% 108%, color-mix(in oklab, #EBE3D0 62%, transparent), transparent 72%);
--vignette: radial-gradient(140% 120% at 50% 40%, transparent 58%, rgba(40, 30, 12, 0.06));
--shadow-1: 0 1px 2px rgba(10, 22, 17, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
--shadow-2: 0 1px 3px rgba(10, 22, 17, 0.08), 0 10px 24px -14px rgba(10, 22, 17, 0.18);
--shadow-3: 0 2px 6px rgba(10, 22, 17, 0.09), 0 20px 44px -20px rgba(10, 22, 17, 0.22);
--shadow-4: 0 4px 10px rgba(10, 22, 17, 0.1), 0 34px 68px -28px rgba(10, 22, 17, 0.26);
--glow-sm: 0 0 14px -8px rgba(18, 185, 129, 0.4);
--glow-md: 0 0 26px -10px rgba(18, 185, 129, 0.42);
--glow-lg: 0 0 52px -18px rgba(18, 185, 129, 0.32);
--glow-accent: 0 0 26px -10px rgba(182, 123, 24, 0.4);
--glow-data: 0 0 24px -10px rgba(14, 151, 163, 0.38);
--elev-hover: 0 26px 54px -26px rgba(10, 22, 17, 0.28),
0 0 32px -14px rgba(18, 185, 129, 0.2);
}
/* =============================================================================
DARK SURFACES - the chrome & banners. The one deliberate light/dark MIX: the
content ramp above is warm-light; these regions re-assert the beloved
dark-luxe ramp so the site header, Home hero, page-header banners and footer
read dark, while everything between them stays light and legible.
Add `.surface-dark` (or data-surface="dark") to opt any other block in.
(Same specificity as :root - placed AFTER it so it wins on these elements;
custom props then inherit down to every descendant of a dark surface.)
========================================================================== */
.surface-dark,
[data-surface="dark"],
.site-header,
.home-hero,
.page-header,
.site-footer {
color-scheme: dark;
--bg-0: #060B08;
--bg-1: #07100C;
--bg-2: #0C1712;
--bg-3: #12201A;
--bg-4: #172A21;
--surface: var(--bg-3);
--surface-raised: var(--bg-4);
--fg: #EAF2EC;
--fg-body: rgba(234, 242, 236, 0.82);
--fg-muted: #93A79A;
--fg-faint: #5E7268;
--fg-on-accent: #041109;
--fg-on-warm: #1B1203;
--primary: #37E29A;
--primary-bright: #45F0A6;
--primary-dim: #2BB47C;
--primary-contrast: var(--fg-on-accent);
--accent: #E6B15A;
--accent-bright: #F3C978;
--accent-contrast: var(--fg-on-warm);
--data: #4FD6E0;
--data-dim: #35A9B3;
--success: #37E29A;
--success-fg: #7FF3C6;
--warning: #E6B15A;
--warning-fg: #F0C98A;
--danger: #FF6B6B;
--danger-fg: #FF9C9C;
--info: #4FD6E0;
--border: rgba(234, 242, 236, 0.08);
--border-strong: rgba(234, 242, 236, 0.14);
--border-primary: rgba(55, 226, 154, 0.28);
--hairline: rgba(234, 242, 236, 0.06);
--sheen: rgba(234, 242, 236, 0.07);
--gradient-border: linear-gradient(
135deg,
rgba(234, 242, 236, 0.45),
rgba(234, 242, 236, 0.05) 42%,
transparent 62%,
rgba(55, 226, 154, 0.18)
);
--glass-bg: color-mix(in oklab, var(--bg-2) 62%, transparent);
--glass-bg-strong: color-mix(in oklab, var(--bg-3) 78%, transparent);
--glass-border: rgba(234, 242, 236, 0.10);
--ring: rgba(55, 226, 154, 0.55);
--ring-offset: var(--bg-0);
--grad-metal: linear-gradient(180deg, #FFFFFF 0%, #B9C8C0 100%);
--grad-shimmer: linear-gradient(
100deg,
var(--fg) 0%,
var(--primary-bright) 30%,
var(--data) 50%,
var(--primary-bright) 70%,
var(--fg) 100%
);
--aurora:
radial-gradient(60% 50% at 18% 12%, color-mix(in oklab, var(--primary) 32%, transparent), transparent 62%),
radial-gradient(50% 42% at 84% 20%, color-mix(in oklab, var(--data) 26%, transparent), transparent 60%),
radial-gradient(80% 62% at 50% 108%, color-mix(in oklab, #0A2E22 70%, transparent), transparent 72%);
--vignette:
radial-gradient(130% 100% at 50% -8%, rgba(23, 42, 33, 0.55) 0%, transparent 55%),
radial-gradient(140% 120% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.38));
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 var(--sheen) inset;
--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.65),
0 1px 0 var(--sheen) inset;
--shadow-3: 0 2px 4px rgba(0, 0, 0, 0.55), 0 18px 40px -18px rgba(0, 0, 0, 0.75),
0 1px 0 var(--sheen) inset;
--shadow-4: 0 4px 8px rgba(0, 0, 0, 0.6), 0 32px 64px -24px rgba(0, 0, 0, 0.82),
0 1px 0 var(--sheen) inset;
--glow-sm: 0 0 16px -6px rgba(55, 226, 154, 0.5);
--glow-md: 0 0 32px -8px rgba(55, 226, 154, 0.55);
--glow-lg: 0 0 64px -16px rgba(55, 226, 154, 0.45);
--glow-accent: 0 0 30px -8px rgba(230, 177, 90, 0.55);
--glow-data: 0 0 28px -8px rgba(79, 214, 224, 0.5);
--elev-hover: 0 30px 60px -24px rgba(0, 0, 0, 0.85),
0 0 42px -12px rgba(55, 226, 154, 0.28),
0 1px 0 var(--sheen) inset;
}
/* =============================================================================
hyphive - EPIC design system · global.css
Modern reset · base typography · body atmosphere · rich utility layer · motion
Depends on theme.css tokens. Ships after theme.css.
========================================================================== */
/* ============================ MODERN RESET ================================= */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent;
tab-size: 4;
}
body {
min-height: 100dvh;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
font-feature-settings: "cv05" 1, "ss01" 1;
color: var(--fg-body);
background-color: var(--bg-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button { background: none; border: none; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }
hr {
border: none;
height: 1px;
background: var(--hairline);
}
table { border-collapse: collapse; }
:target { scroll-margin-top: calc(var(--space-8) + 1rem); }
/* ============================ BODY ATMOSPHERE ============================== */
/* Deep base + subtle aurora + radial vignette, all fixed behind content. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background: var(--aurora), var(--bg-0);
background-attachment: fixed;
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--vignette);
}
/* Faint film grain overlay - kills banding, adds cinematic finish.
Placed as a fixed top layer; add once in the app,
or rely on this body-scoped variant if you prefer a wrapper element. */
.grain {
position: fixed;
inset: 0;
z-index: var(--z-grain);
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============================ BASE TYPOGRAPHY ============================== */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--fg);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-heading);
font-weight: var(--fw-bold);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
p { max-width: var(--measure); }
p + p { margin-top: var(--space-4); }
small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-semibold); color: var(--fg); }
/* Latin binomials - italic (e.g. Pleurotus ostreatus) */
i, em, .binomial { font-style: italic; }
.binomial { color: var(--fg); }
/* Data / numerals - tabular + slashed zero */
code, kbd, samp, pre,
.mono, .price, [data-mono] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}
code {
font-size: 0.9em;
padding: 0.12em 0.4em;
border-radius: var(--radius-sm);
background: var(--bg-2);
border: 1px solid var(--border);
color: var(--fg);
}
/* ============================ LINKS ======================================= */
a:where(:not([class])) {
color: var(--data);
text-decoration: underline;
text-decoration-color: color-mix(in oklab, var(--data) 40%, transparent);
text-underline-offset: 0.18em;
transition: color var(--dur-micro) var(--ease-standard),
text-decoration-color var(--dur-micro) var(--ease-standard);
}
a:where(:not([class])):hover {
color: color-mix(in oklab, var(--data) 80%, var(--fg));
text-decoration-color: var(--data);
}
/* ============================ SELECTION =================================== */
::selection {
background: color-mix(in oklab, var(--primary) 30%, transparent);
color: var(--fg);
}
/* ============================ FOCUS-VISIBLE (luminous ring) ================ */
:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset),
0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring),
0 0 18px -2px var(--ring);
border-radius: var(--radius-sm);
}
/* Never fall back to default outline for mouse users */
:focus:not(:focus-visible) { outline: none; }
/* ============================ SCROLLBAR =================================== */
* {
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: padding-box; }
/* =============================================================================
UTILITY LAYER
========================================================================== */
/* ---- Layout containers --------------------------------------------------- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container-lg { max-width: var(--maxw-lg); }
.container-narrow { max-width: var(--maxw-narrow); }
.container-lg, .container-narrow {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter);
}
.page { min-height: 100dvh; position: relative; }
.section { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: calc(var(--section-y) * 0.55); }
.measure { max-width: var(--measure); }
/* ---- Stacks (vertical rhythm) ------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }
/* ---- Rows (horizontal) --------------------------------------------------- */
.row { display: flex; align-items: center; gap: var(--space-4); }
.row-sm { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.row-wrap { flex-wrap: wrap; }
/* ---- Grid ---------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Bento - asymmetric editorial grid with one hero cell */
.bento {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
}
.bento-feature { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
.grid-2, .grid-3, .grid-4, .bento { grid-template-columns: 1fr; }
.bento-feature, .bento-wide, .bento-tall { grid-column: auto; grid-row: auto; }
}
/* ---- Card (etched-metal edge: hairline + inset top-light + weight) ------- */
.card {
position: relative;
background: linear-gradient(180deg,
color-mix(in oklab, var(--surface) 92%, var(--bg-4)),
var(--surface));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
transition: transform var(--dur-base) var(--ease-out-quint),
box-shadow var(--dur-base) var(--ease-out-quint),
border-color var(--dur-base) var(--ease-out-quint);
}
.card-pad { padding: var(--space-5); }
/* ---- Glass surfaces ------------------------------------------------------ */
.glass {
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2), inset 0 1px 0 var(--sheen);
}
.glass-strong {
background: var(--glass-bg-strong);
-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-4), inset 0 1px 0 var(--sheen);
}
/* Fallback when backdrop-filter unsupported - raise fill so it stays intentional */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: color-mix(in oklab, var(--bg-2) 92%, transparent); }
.glass-strong { background: color-mix(in oklab, var(--bg-3) 96%, transparent); }
}
/* ---- Glow helpers -------------------------------------------------------- */
.glow { box-shadow: var(--shadow-2), var(--glow-md); }
.glow-lg { box-shadow: var(--shadow-3), var(--glow-lg); }
.glow-hover { transition: box-shadow var(--dur-base) var(--ease-out-quint),
transform var(--dur-base) var(--ease-out-quint); }
.glow-hover:hover { box-shadow: var(--elev-hover); transform: translateY(-4px); }
/* ---- Gradient hairline border (padding-box / border-box composite) ------ */
.gradient-border {
border: 1px solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--gradient-border) border-box;
}
/* Crisp 1px gradient ring that survives radius, via mask-composite */
.hairline {
position: relative;
}
.hairline::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-border);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* Rotating conic luminous edge - reserve for 1-2 hero/featured elements */
.conic-edge {
position: relative;
}
.conic-edge::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--angle),
transparent, var(--primary) 12%, transparent 30%, transparent 70%, var(--primary) 88%, transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: spin-angle 8s linear infinite;
pointer-events: none;
}
/* ---- Gradient text (static + animated shimmer) --------------------------- */
.gradient-text {
background: var(--grad-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-text-shimmer {
background: var(--grad-shimmer);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer-text 6s linear infinite;
}
/* ---- Eyebrow / mono micro-label ------------------------------------------ */
.eyebrow, .mono-label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--fg-muted);
font-variant-numeric: tabular-nums slashed-zero;
}
.eyebrow { color: var(--primary); }
/* ---- Text helpers -------------------------------------------------------- */
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.small { font-size: var(--fs-sm); }
.strong { font-weight: var(--fw-semibold); color: var(--fg); }
.lead { font-size: var(--fs-lead); color: var(--fg-body); line-height: var(--lh-tight); }
.display {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
font-weight: var(--fw-bold);
color: var(--fg);
text-wrap: balance;
}
/* ---- Price (data-grade) -------------------------------------------------- */
.price {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums slashed-zero;
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
color: var(--fg);
}
.price-unit { font-size: 0.72em; font-weight: var(--fw-medium); color: var(--fg-muted); }
/* ---- Truncation / clamp -------------------------------------------------- */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2, .clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
/* ---- Media --------------------------------------------------------------- */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-video { aspect-ratio: 16 / 9; }
.cover { width: 100%; height: 100%; object-fit: cover; }
/* ---- Tags & pills -------------------------------------------------------- */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--fg-muted);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--fg-body);
background: color-mix(in oklab, var(--bg-2) 70%, transparent);
-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
box-shadow: inset 0 1px 0 var(--sheen);
}
/* Verified - the only element allowed to truly glow (scarcity = premium) */
.pill-verified {
color: var(--primary-bright);
border-color: var(--border-primary);
box-shadow: inset 0 1px 0 var(--sheen), var(--glow-sm);
}
.pill-accent { color: var(--accent-bright); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
/* ---- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: var(--space-3) var(--space-5);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
letter-spacing: 0.01em;
border-radius: var(--radius-md);
border: 1px solid transparent;
color: var(--fg);
transition: transform var(--dur-micro) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out-quint),
background-color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--grad-primary);
color: var(--primary-contrast);
box-shadow: var(--shadow-1), var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
box-shadow: var(--shadow-2), var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
.btn-accent {
background: var(--grad-accent);
color: var(--accent-contrast);
box-shadow: var(--shadow-1), var(--glow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-accent:hover { transform: translateY(-1px); }
.btn-ghost {
background: color-mix(in oklab, var(--bg-2) 60%, transparent);
border-color: var(--border-strong);
color: var(--fg);
}
.btn-ghost:hover {
border-color: var(--border-primary);
box-shadow: var(--glow-sm);
background: color-mix(in oklab, var(--bg-3) 70%, transparent);
}
.btn-sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
.btn-lg { min-height: 52px; padding: var(--space-4) var(--space-7); font-size: var(--fs-body); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
/* ---- Divider (fading hairline seam, not a hard rule) --------------------- */
.divider {
height: 1px;
border: none;
background: linear-gradient(90deg, transparent,
color-mix(in oklab, var(--primary) 22%, var(--border)) 50%, transparent);
}
.divider-plain { height: 1px; border: none; background: var(--hairline); }
/* ---- Tilt (CSS-var driven 3D toward cursor; JS sets --rx/--ry) ----------- */
.tilt {
--rx: 0deg;
--ry: 0deg;
transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
transform-style: preserve-3d;
transition: transform var(--dur-base) var(--ease-out-quint);
}
/* Cursor-tracked specular sheen - a ::before that follows --mx/--my */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(300px circle at var(--mx) var(--my),
color-mix(in oklab, var(--primary) 12%, transparent), transparent 55%);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-standard);
pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
/* ---- Skeleton shimmer ---------------------------------------------------- */
.skeleton {
background: linear-gradient(100deg,
var(--bg-2) 20%, var(--bg-3) 40%, var(--bg-2) 60%);
background-size: 200% 100%;
border-radius: var(--radius-md);
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
/* ---- Reveal (scroll-in base state; JS/IO adds .is-visible) --------------- */
.reveal {
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
transition: opacity var(--dur-macro) var(--ease-out),
transform var(--dur-macro) var(--ease-out),
filter var(--dur-macro) var(--ease-out);
transition-delay: calc(var(--reveal-i, 0) * 70ms);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
filter: none;
}
/* ---- Accessibility & responsive helpers ---------------------------------- */
.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;
}
.hide-mobile { }
.show-mobile { display: none; }
@media (max-width: 640px) {
.hide-mobile { display: none !important; }
.show-mobile { display: revert; }
}
/* ---- Text alignment / flow ----------------------------------------------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.flex-1 { flex: 1 1 0%; }
.gap-0 { gap: 0; }
/* =============================================================================
MOTION KEYFRAMES
========================================================================== */
@keyframes aurora-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes shimmer-text {
to { background-position: 200% center; }
}
@keyframes glow-pulse {
0%, 100% { box-shadow: var(--shadow-2), var(--glow-sm); }
50% { box-shadow: var(--shadow-2), var(--glow-md); }
}
@keyframes fade-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@keyframes skeleton-shimmer {
to { background-position: -200% 0; }
}
@keyframes spin-angle {
to { --angle: 360deg; }
}
/* Ambient aurora layer helper (attach to a fixed bg element in the hero) */
.aurora-layer {
position: absolute;
inset: -10%;
background: var(--aurora);
filter: blur(4px);
animation: aurora-drift var(--dur-aurora) var(--ease-in-out) infinite;
pointer-events: none;
z-index: -1;
}
.glow-pulse { animation: glow-pulse 3.4s var(--ease-in-out) infinite; }
.fade-rise { animation: fade-rise var(--dur-macro) var(--ease-out) both; }
/* =============================================================================
REDUCED MOTION - collapse to opacity-only / none. All ambient loops stop.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal {
transform: none;
filter: none;
transition: opacity var(--dur-base) linear;
}
.aurora-layer, .glow-pulse, .conic-edge::before, .gradient-text-shimmer,
.skeleton { animation: none !important; }
.glow-hover:hover, .btn-primary:hover, .btn-accent:hover, .card:hover { transform: none; }
.tilt { transform: none !important; }
}
/* Touch devices: disable cursor-reactive spotlight (no hover intent) */
@media (hover: none) {
.spotlight::before { display: none; }
}