:root { /* Brand */ --pink: #E21C76; --pink-mid: #c41565; --pink-pale: #fce8f3; --pink-wash: #fdf3f9; --purple: #352B53; --purple-mid: #5a4d85; --purple-pale: #ede9f9; --gold: #FFA400; --gold-pale: #fff4e0; /* Neutrals */ --white: #ffffff; --off: #faf8fb; --ink: #1e1826; --ink-mid: #4a3f5c; --ink-light: #8a7a9b; --border: rgba(53,43,83,.1); /* Type */ --ff-display: 'Fahkwang', serif; --ff-body: 'Open Sans', sans-serif; /* Layout */ --nav-h: 80px; --wrap-w: 1240px; --wrap-pad: 48px; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 50px; /* Shadows */ --shadow-sm: 0 4px 20px rgba(226,28,118,.08); --shadow-md: 0 8px 24px rgba(226,28,118,.3); --shadow-lg: 0 14px 40px rgba(53,43,83,.1); --shadow-xl: 0 16px 40px rgba(53,43,83,.12); /* Motion */ --ease: .18s ease; --ease-mid: .22s ease; --ease-slow: .35s ease; } /* ── Reset (project-wide) ───────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--ff-body); background: var(--white); color: var(--ink); overflow-x: hidden; line-height: 1.6; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } /* ── Container ──────────────────────────────────────────────── */ .wrap { width: min(var(--wrap-w), 100% - var(--wrap-pad)); margin-inline: auto; } .wrap-narrow { width: min(800px, 100% - var(--wrap-pad)); margin-inline: auto; } /* ── Display ────────────────────────────────────────────────── */ .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none; } .contents { display: contents; } /* ── Flex / grid helpers ───────────────────────────────────── */ .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } /* gap scale */ .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 14px; } .gap-5 { gap: 18px; } .gap-6 { gap: 22px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-20 { gap: 80px; } /* grid templates */ .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } /* ── Spacing (margin / padding) ─────────────────────────────── */ .m-0 { margin: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-10 { margin-bottom: 44px; } .mb-12 { margin-bottom: 52px; } .p-0 { padding: 0; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; } .py-section { padding-block: 100px; } .py-section-sm { padding-block: 80px; } /* ── Position ───────────────────────────────────────────────── */ .relative { position: relative; } .absolute { position: absolute; } .sticky-top { position: sticky; top: 0; z-index: 50; } .inset-0 { inset: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-50 { z-index: 50; } /* ── Sizing ─────────────────────────────────────────────────── */ .w-full { width: 100%; } .h-full { height: 100%; } .overflow-hidden { overflow: hidden; } /* ── Type — family / weight / style ─────────────────────────── */ .font-display { font-family: var(--ff-display); } .font-body { font-family: var(--ff-body); } .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-600 { font-weight: 600; } /* ── Type — size scale ──────────────────────────────────────── */ .text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-base{ font-size: 15px; } .text-md { font-size: 16px; } .text-lg { font-size: 18px; } .text-xl { font-size: 22px; } .text-2xl { font-size: 28px; } /* fluid display sizes */ .text-display-sm { font-size: clamp(22px, 2.8vw, 36px); line-height: 1.15; } .text-display-md { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15; } .text-display-lg { font-size: clamp(28px, 3.5vw, 50px); line-height: 1.15; } .text-display-xl { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.1; } /* tracking / case */ .tracking-wide { letter-spacing: .14em; } .tracking-wider { letter-spacing: .18em; } .tracking-tight { letter-spacing: .1em; } .uppercase { text-transform: uppercase; } .text-center { text-align: center; } /* line-height */ .leading-tight { line-height: 1.15; } .leading-snug { line-height: 1.35; } .leading-relaxed { line-height: 1.65; } .leading-loose { line-height: 1.8; } /* ── Colour — text ──────────────────────────────────────────── */ .t-pink { color: var(--pink); } .t-purple { color: var(--purple); } .t-gold { color: var(--gold); } .t-white { color: var(--white); } .t-ink { color: var(--ink); } .t-ink-mid { color: var(--ink-mid); } .t-ink-light{ color: var(--ink-light); } .t-white-65 { color: rgba(255,255,255,.65); } .t-white-68 { color: rgba(255,255,255,.68); } /* ── Colour — background ────────────────────────────────────── */ .bg-white { background: var(--white); } .bg-off { background: var(--off); } .bg-pink { background: var(--pink); } .bg-pink-pale { background: var(--pink-pale); } .bg-pink-wash { background: var(--pink-wash); } .bg-purple { background: var(--purple); } .bg-purple-pale{ background: var(--purple-pale); } .bg-gold { background: var(--gold); } .bg-ink { background: var(--ink); } /* ── Borders & radius ───────────────────────────────────────── */ .border { border: 1px solid var(--border); } .border-2 { border: 2px solid var(--border); } .border-b { border-bottom: 1px solid var(--border); } .border-t { border-top: 1px solid var(--border); } .rounded-sm { border-radius: var(--r-sm); } .rounded-md { border-radius: var(--r-md); } .rounded-lg { border-radius: var(--r-lg); } .rounded-xl { border-radius: var(--r-xl); } .rounded-pill { border-radius: var(--r-pill); } .rounded-full { border-radius: 50%; } /* ── Shadows ────────────────────────────────────────────────── */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* ── Misc ───────────────────────────────────────────────────── */ .cursor-pointer { cursor: pointer; } .transition { transition: all var(--ease); } /* ── Responsive (matches site breakpoints) ──────────────────── */ @media (max-width: 1024px) { .md\:grid-cols-1 { grid-template-columns: 1fr; } .md\:hidden { display: none; } .md\:gap-10 { gap: 40px; } } @media (max-width: 640px) { .sm\:grid-cols-1 { grid-template-columns: 1fr; } .sm\:hidden { display: none; } }