mirror of
https://github.com/Since-3/Kumasy-Marketing.git
synced 2026-10-12 19:51:17 +00:00
307 lines
9 KiB
CSS
307 lines
9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ── Brand ──────────────────────────────────────────────
|
|
Sampled from public/icons/icon-512.png: the amber tile
|
|
and the navy mark. These two carry the whole palette. */
|
|
--color-amber: #f4c00c;
|
|
--color-amber-deep: #d9a800;
|
|
--color-amber-soft: #ffe9a3;
|
|
--color-ink: #1e293b;
|
|
--color-ink-soft: #334155;
|
|
--color-slate-body: #475569;
|
|
--color-slate-helper: #64748b;
|
|
--color-slate-quiet: #94a3b8;
|
|
|
|
/* Surfaces & lines */
|
|
--color-canvas: #f9fafb;
|
|
--color-paper: #ffffff;
|
|
--color-hairline: #e2e8f0;
|
|
--color-mist: #eef2f6;
|
|
|
|
/* Status washes, borrowed from the app's badge colours */
|
|
--color-mint-wash: #dcfce7;
|
|
--color-mint-ink: #15803d;
|
|
--color-sky-wash: #e0f2fe;
|
|
--color-sky-ink: #0369a1;
|
|
--color-peach-wash: #ffedd5;
|
|
--color-peach-ink: #c2410c;
|
|
|
|
/* ── Typography ─────────────────────────────────────── */
|
|
--font-switzer: var(--font-switzer-local), ui-sans-serif, system-ui, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-display: var(--font-display-local), ui-sans-serif, system-ui, -apple-system,
|
|
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--text-caption: 10px;
|
|
--text-caption--line-height: 1.5;
|
|
--text-caption--letter-spacing: 1.4px;
|
|
--text-body: 16px;
|
|
--text-body--line-height: 1.5;
|
|
--text-body-lg: 18px;
|
|
--text-body-lg--line-height: 1.45;
|
|
--text-subheading: 20px;
|
|
--text-subheading--line-height: 1.43;
|
|
--text-subheading--letter-spacing: -0.26px;
|
|
--text-heading-sm: 31px;
|
|
--text-heading-sm--line-height: 1.1;
|
|
--text-heading-sm--letter-spacing: -0.4px;
|
|
--text-heading: 44px;
|
|
--text-heading--line-height: 1.08;
|
|
--text-heading--letter-spacing: -1.15px;
|
|
--text-heading-lg: 49px;
|
|
--text-heading-lg--line-height: 1.04;
|
|
--text-heading-lg--letter-spacing: -1.96px;
|
|
--text-display: 76px;
|
|
--text-display--line-height: 1;
|
|
--text-display--letter-spacing: -4.25px;
|
|
|
|
/* ── Radii ──────────────────────────────────────────── */
|
|
--radius-cards: 24px;
|
|
--radius-images: 24px;
|
|
--radius-inputs: 16px;
|
|
--radius-buttons: 28px;
|
|
--radius-nav: 28px;
|
|
|
|
/* ── Shadows ────────────────────────────────────────── */
|
|
--shadow-float: 0 16px 16px -8px rgba(30, 41, 59, 0.04),
|
|
0 10px 10px -5px rgba(30, 41, 59, 0.04), 0 5px 5px -2.5px rgba(30, 41, 59, 0.03),
|
|
0 3px 3px -1.5px rgba(30, 41, 59, 0.03), 0 1px 1px -0.5px rgba(30, 41, 59, 0.03);
|
|
--shadow-card: 0 0 0 1px rgba(30, 41, 59, 0.06), 0 16px 16px -8px rgba(30, 41, 59, 0.04),
|
|
0 10px 10px -5px rgba(30, 41, 59, 0.03), 0 5px 5px -2.5px rgba(30, 41, 59, 0.03),
|
|
0 2px 2px -1px rgba(30, 41, 59, 0.03);
|
|
--shadow-elevated: 0 0 0 1px rgba(30, 41, 59, 0.05),
|
|
0 28px 32px -12px rgba(30, 41, 59, 0.1), 0 12px 14px -6px rgba(30, 41, 59, 0.05),
|
|
0 5px 5px -2.5px rgba(30, 41, 59, 0.03), 0 2px 2px -1px rgba(30, 41, 59, 0.03);
|
|
--shadow-amber: 0 18px 40px -14px rgba(217, 168, 0, 0.55);
|
|
|
|
/* ── Motion ─────────────────────────────────────────── */
|
|
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
}
|
|
|
|
:root {
|
|
/* The signature gradient: amber into navy, used on accents and
|
|
as the light source behind glass. */
|
|
--gradient-brand: linear-gradient(115deg, #f4c00c 0%, #f0a500 42%, #1e293b 100%);
|
|
--gradient-amber: linear-gradient(120deg, #ffd84d 0%, #f4c00c 45%, #e09b00 100%);
|
|
--gradient-ink: linear-gradient(150deg, #334155 0%, #1e293b 55%, #0f172a 100%);
|
|
--page-max: 1200px;
|
|
}
|
|
|
|
html {
|
|
/* Native smooth scrolling would fight Lenis. Under reduced motion Lenis
|
|
never starts, and jumping instantly is the correct behaviour anyway. */
|
|
scroll-behavior: auto;
|
|
scroll-padding-top: 104px;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* Lenis drives scrolling via transform on <html>; these are its required
|
|
host styles. Without them the page height collapses on some browsers. */
|
|
html.lenis,
|
|
html.lenis body {
|
|
height: auto;
|
|
}
|
|
|
|
.lenis.lenis-smooth {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.lenis.lenis-stopped {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-canvas);
|
|
color: var(--color-ink);
|
|
font-family: var(--font-switzer);
|
|
overflow-x: clip;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-amber);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-ink);
|
|
outline-offset: 3px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ── Glass system ─────────────────────────────────────────
|
|
The four ingredients from DESIGN-SYSTEM.md, bundled once:
|
|
translucent fill, backdrop blur, light edge, soft shadow.
|
|
Intensity scales with the surface's visual priority. */
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.58);
|
|
backdrop-filter: blur(24px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(160%);
|
|
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.glass-sm {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(10px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(140%);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
box-shadow: var(--shadow-float);
|
|
}
|
|
|
|
.glass-xl {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
box-shadow: var(--shadow-elevated);
|
|
}
|
|
|
|
/* Dark frosted panel — the auth-panel treatment from the app. */
|
|
.glass-ink {
|
|
background: rgba(30, 41, 59, 0.72);
|
|
backdrop-filter: blur(40px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(150%);
|
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
|
box-shadow: var(--shadow-elevated);
|
|
}
|
|
|
|
/* A top light-edge, as if a highlight catches the glass rim. */
|
|
.glass-rim {
|
|
position: relative;
|
|
}
|
|
.glass-rim::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding-top: 1px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(255, 255, 255, 0.9),
|
|
transparent 40%
|
|
);
|
|
-webkit-mask:
|
|
linear-gradient(#000 0 0) content-box,
|
|
linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Backdrop-filter is expensive; on small screens trade blur for opacity. */
|
|
@media (max-width: 640px) {
|
|
.glass,
|
|
.glass-xl {
|
|
backdrop-filter: blur(14px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(150%);
|
|
background: rgba(255, 255, 255, 0.78);
|
|
}
|
|
}
|
|
|
|
@supports not (backdrop-filter: blur(1px)) {
|
|
.glass,
|
|
.glass-sm,
|
|
.glass-xl {
|
|
background: rgba(255, 255, 255, 0.94);
|
|
}
|
|
.glass-ink {
|
|
background: rgba(30, 41, 59, 0.94);
|
|
}
|
|
}
|
|
|
|
/* ── Brand gradient primitives ────────────────────────── */
|
|
|
|
.brand-text {
|
|
background: var(--gradient-amber);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
padding-inline-end: 0.06em;
|
|
}
|
|
|
|
/* Amber gradient border via double-background. */
|
|
.brand-border {
|
|
background:
|
|
linear-gradient(var(--color-paper), var(--color-paper)) padding-box,
|
|
var(--gradient-amber) border-box;
|
|
border: 1.5px solid transparent;
|
|
}
|
|
|
|
/* ── Ambient motion ───────────────────────────────────── */
|
|
@keyframes blob-float {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
50% {
|
|
transform: translate3d(3%, -4%, 0) scale(1.08);
|
|
}
|
|
}
|
|
|
|
.blob {
|
|
animation: blob-float 18s var(--ease-out-soft) infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes aurora-shift {
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
/* Slow-drifting wash so the glass always has something to blur. */
|
|
.aurora {
|
|
background: linear-gradient(
|
|
120deg,
|
|
rgba(244, 192, 12, 0.22) 0%,
|
|
rgba(255, 216, 77, 0.16) 22%,
|
|
rgba(224, 242, 254, 0.3) 48%,
|
|
rgba(30, 41, 59, 0.1) 74%,
|
|
rgba(244, 192, 12, 0.2) 100%
|
|
);
|
|
background-size: 300% 300%;
|
|
animation: aurora-shift 22s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
transform: translate3d(-50%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.marquee-track {
|
|
animation: marquee 42s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* ── Accessibility ────────────────────────────────────── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.blob,
|
|
.marquee-track,
|
|
.aurora {
|
|
animation: none !important;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|