/* ============================================================
GLOBAL.CSS — Karisyo Events
Base layer: fonts, variables, reset, typography, utilities
IMPORTANT — Mhiora local font note:
@font-face will NOT load when the HTML file is opened directly
from the filesystem (file:// protocol) in Chrome/Edge due to
CORS restrictions on local files. Always serve the project
through a local server (e.g. VS Code Live Server, "npx serve .",
or Hostinger's file manager preview) for Mhiora to appear.
Jost loads from Google Fonts CDN and works in all contexts.
============================================================ */
/* ── Google Fonts — Jost (body / UI) ───────────────────────── */
/* Loaded in of every HTML file via tag.
Declared here as a reference comment only.
Weights used: 300 (light), 400 (regular), 500 (medium), 700 (bold)
*/
/* ── Mhiora — Display / Logo / Headlines (local) ───────────── */
@font-face {
font-family: 'Mhiora';
src: url('fonts/Mhiora/Mhiora.woff2') format('woff2'),
url('fonts/Mhiora/Mhiora.woff') format('woff'),
url('fonts/Mhiora/Mhiora.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
}
/* ── Design Tokens ──────────────────────────────────────────── */
:root {
/* Brand palette */
--color-orange: #f87e00;
--color-crimson: #a72227;
--color-gold: #fcc12b;
--color-indigo: #3d348b;
--color-slate: #9a9a9a;
--color-teal: #3e4e50;
--color-deep: #390099;
/* Surfaces */
--color-bg: #fdf6ee; /* warm off-white — complements the fiery palette */
--color-bg-alt: #f7ede0; /* slightly deeper cream for alternate sections */
--color-white: #ffffff;
--color-paper-white: #FFFBF5;
--color-warm-white: #FEF3E8;
/* Typography stacks
--font-display : Mhiora for all logo / headline / display use
--font-body : Jost for all readable / UI / body text */
--font-display: 'Mhiora',
'Cormorant Garamond', /* elegant serif fallback */
'Garamond',
Georgia,
serif;
--font-body: 'Jost',
'DM Sans', /* close geometric sans fallback */
'Outfit',
'Nunito Sans',
'Segoe UI Emoji', /* Windows emoji */
'Apple Color Emoji', /* macOS/iOS emoji */
'Noto Color Emoji', /* Android/Linux emoji */
sans-serif;
/* Type scale */
--text-xs: 0.7rem;
--text-sm: 0.85rem;
--text-base: 1rem;
--text-md: 1.15rem;
--text-lg: 1.35rem;
--text-xl: 1.7rem;
--text-2xl: 2.2rem;
--text-3xl: 3rem;
--text-4xl: 4.5rem;
--text-5xl: 6.5rem;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 8rem;
/* Motion */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 0.25s;
--dur-base: 0.45s;
--dur-slow: 0.8s;
/* Layout */
--max-width: 1200px;
--gutter: clamp(1.5rem, 5vw, 5rem);
}
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background-color: var(--color-bg);
color: var(--color-teal);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--text-base);
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: var(--font-body);
cursor: pointer;
}
ul, ol {
list-style: none;
}
/* ── Base Typography ────────────────────────────────────────── */
/* Mhiora — all major headings */
h1, .h1 {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
font-weight: normal;
line-height: 1;
letter-spacing: 0.04em;
color: var(--color-crimson);
}
h2, .h2 {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
font-weight: normal;
line-height: 1.1;
letter-spacing: 0.02em;
}
h3, .h3 {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
font-weight: normal;
line-height: 1.2;
}
h4, h5, h6 {
font-family: var(--font-body);
font-weight: 500;
line-height: 1.3;
}
/* Jost — all body / readable text */
p {
font-family: var(--font-body);
font-weight: 300;
font-size: var(--text-base);
line-height: 1.8;
color: var(--color-teal);
}
/* Eyebrow / label utility */
.label {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.35em;
text-transform: uppercase;
}
/* ── Layout utilities ───────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ── Colour utilities ───────────────────────────────────────── */
.text-orange { color: var(--color-orange); }
.text-crimson { color: var(--color-crimson); }
.text-gold { color: var(--color-gold); }
.text-white { color: var(--color-white); }
.text-teal { color: var(--color-teal); }
.display-font { font-family: var(--font-display); }
.body-font { font-family: var(--font-body); }
/* ── Touch / mobile: restore native cursor ──────────────────── */
@media (hover: none) and (pointer: coarse) {
#cursor-butterfly { display: none !important; }
body { cursor: auto; }
* { cursor: auto !important; }
button { cursor: pointer; }
a { cursor: pointer; }
}
/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}