/* ============================================================ Pabrik Batik — Design Tokens Theme: "Woven Clarity" — glassmorphism + textile accent ------------------------------------------------------------ Single source of truth for the visual layer. Colours are stored as space-separated RGB triplets so that Tailwind can consume them through `rgb(var(--x) / )` and keep opacity modifiers (bg-cream/60, text-maroon/80) working. ============================================================ */ :root { /* ---------- Colour: raw triplets ---------- */ --canvas-rgb: 250 248 245; /* #faf8f5 warm canvas */ --canvas-deep-rgb: 240 235 229; /* #f0ebe5 canvas gradient end */ --primary-rgb: 26 31 58; /* #1a1f3a deep indigo */ --accent-rgb: 200 102 60; /* #c8663c warm terracotta */ --dust-rgb: 168 159 153; /* #a89f99 dust grey */ --gold-rgb: 212 165 116; /* #d4a574 gold / beige */ --accent-deep-rgb: 168 80 45; /* #a8502d terracotta, pressed */ /* A lighter, more saturated sibling of the indigo primary — same hue family, bright enough to read as blue in the ambient blooms where #1a1f3a would only ever read as shadow. */ --azure-rgb: 82 108 190; /* #526CBE periwinkle */ /* ---------- Colour: ready-to-use ---------- */ --color-canvas: rgb(var(--canvas-rgb)); --color-canvas-deep: rgb(var(--canvas-deep-rgb)); --color-primary: rgb(var(--primary-rgb)); --color-accent: rgb(var(--accent-rgb)); --color-accent-deep: rgb(var(--accent-deep-rgb)); --color-dust: rgb(var(--dust-rgb)); --color-gold: rgb(var(--gold-rgb)); /* ---------- Surface gradient ---------- */ --gradient-canvas: linear-gradient(160deg, var(--color-canvas) 0%, var(--color-canvas-deep) 100%); /* ---------- Ambient lighting ---------- Soft colour blooms drifting across the canvas. Glassmorphism only reads as glass when there is something worth blurring behind it — a flat wash gives the panes nothing to refract, so these supply the colour. Kept low enough that body copy contrast is untouched. */ --canvas-lighting: radial-gradient(54rem 38rem at 6% 0%, rgba(200, 102, 60, 0.68), transparent 64%), radial-gradient(50rem 36rem at 96% 6%, rgba( 82, 108, 190, 0.66), transparent 66%), radial-gradient(44rem 34rem at 78% 44%, rgba(212, 165, 116, 0.58), transparent 64%), radial-gradient(46rem 36rem at 14% 62%, rgba( 82, 108, 190, 0.46), transparent 66%), radial-gradient(52rem 38rem at 92% 96%, rgba(200, 102, 60, 0.52), transparent 66%), radial-gradient(38rem 30rem at 44% 84%, rgba(212, 165, 116, 0.42), transparent 68%); /* ---------- Glass rim ---------- A 1px gradient ring masked to the element's edge: bright where the light would catch, near-invisible on the shaded flank. This is what sells the pane as a physical edge rather than a flat border. */ --glass-rim: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0.22) 68%, rgba(255, 255, 255, 0.85) 100%); --glass-rim-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.24) 20%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.12) 70%, rgba(255, 255, 255, 0.45) 100%); /* ---------- Glassmorphism ---------- The fill is a gradient rather than a flat wash so light appears to rake across the pane, and the shadow carries an inset top highlight — the "lip" that reads as a real edge of glass. saturate() on the blur keeps colours behind the pane from going muddy. */ --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.34) 52%, rgba(255, 255, 255, 0.42) 100%); --glass-bg-hover: linear-gradient(155deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.44) 52%, rgba(255, 255, 255, 0.52) 100%); --glass-border: rgba(255, 255, 255, 0.62); --glass-border-hover: rgba(255, 255, 255, 0.85); --glass-blur: blur(14px) saturate(150%); --glass-blur-hover: blur(18px) saturate(165%); --glass-radius: 12px; --glass-shadow: 0 10px 34px rgba(26, 31, 58, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.80); --glass-shadow-hover: 0 16px 44px rgba(26, 31, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95); /* Glass tuned for dark (indigo) sections */ --glass-bg-dark: linear-gradient(155deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.11) 100%); --glass-bg-dark-hover: linear-gradient(155deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.10) 58%, rgba(255, 255, 255, 0.16) 100%); --glass-border-dark: rgba(255, 255, 255, 0.24); --glass-shadow-dark: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28); /* ---------- Hero cloth ---------- */ --hero-cloth: url('../assets/foto/desain-motif-custom.jpg'); /* Tuned so the cloth stays legible: the headline sits on its own glass pane, so the scrim only has to tame the photo, not hide it. */ --hero-scrim: linear-gradient(175deg, rgba(26, 31, 58, 0.82) 0%, rgba(26, 31, 58, 0.62) 45%, rgba(26, 31, 58, 0.88) 100%); /* The stats band is short and its numerals sit straight on the pattern with no glass pane to protect them, so its scrim runs heavier than the hero's. */ --band-scrim: linear-gradient(180deg, rgba(26, 31, 58, 0.84) 0%, rgba(26, 31, 58, 0.76) 50%, rgba(26, 31, 58, 0.84) 100%); /* ---------- Typography ---------- Inter is the closest Google Fonts equivalent to the SF-Pro-style grotesque in the reference: large x-height, neutral, tight apertures. One family across headings and body, with Playfair kept as the quote accent so the heritage note survives. */ --font-heading: 'Inter', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-accent: 'Playfair Display', Georgia, serif; /* Fluid type scale — mobile floor → desktop ceiling */ /* Floor lowered from 2.25rem: the home hero's headline is long, and at 36px it broke into six lines on a 375px screen, pushing the hero to 1.4x the viewport before a single button was visible. */ --fs-hero: clamp(1.9375rem, 1.15rem + 3.55vw, 3.5rem); /* 31 → 56 */ --fs-h2: clamp(1.75rem, 1.35rem + 1.78vw, 2.5rem); /* 28 → 40 */ --fs-h3: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);/* 18 → 22 */ --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); /* 16 → 18 */ --fs-caption: 0.8125rem; /* 13 */ --lh-hero: 1.12; --lh-h2: 1.2; --lh-h3: 1.35; --lh-body: 1.7; /* within the 1.6–1.8 band */ --tracking-caption: 0.14em; /* ---------- Vertical rhythm ---------- Every section used to sit at exactly py-20/py-24, so pages read as one flat drone regardless of how much weight each section actually carried. These four steps let a page breathe in and out: dense card grids sit tight, airy content opens up, and no two neighbours share a step. Fluid rather than stepped at the sm breakpoint, so the change of pace is continuous instead of snapping. */ --rhythm-xl: clamp(5rem, 3.77rem + 5.26vw, 8.5rem); /* 80 → 136 */ --rhythm-lg: clamp(4rem, 3.12rem + 3.76vw, 6.5rem); /* 64 → 104 */ --rhythm-md: clamp(3.25rem, 2.72rem + 2.25vw, 4.75rem); /* 52 → 76 */ --rhythm-sm: clamp(2.5rem, 2.15rem + 1.50vw, 3.5rem); /* 40 → 56 */ /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.3s; --duration-base: 0.4s; --transition-glass: all var(--duration-fast) ease; /* ---------- Textile ---------- */ --texture-opacity: 0.03; /* linen grain over the canvas */ --batik-opacity: 0.06; /* micro-batik on glass corners */ --thread-opacity: 0.4; /* wavy section divider */ } /* Respect users who ask for reduced motion. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01s; --duration-base: 0.01s; } }