/* ============================================================ MyKutch.org — Typography System Single source of truth for all type across the site. To change fonts or scale, edit ONLY this file. Fonts : Cormorant Garamond (headings) + DM Sans (body) Heading FX: Blue metallic with sweeping red-metal shimmer ============================================================ */ /* Fonts loaded by navbar.js → injected as in on every page. Local @font-face below ensures Carter One always renders even without an internet connection or before Google Fonts responds. */ @font-face { font-family: 'Carter One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/CarterOne.woff2') format('woff2'); } /* ── Variables ────────────────────────────────────────────── */ :root { /* — Fonts — */ --font-h1: 'Carter One', Impact, sans-serif; /* h1 display font */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* alias names referenced by all other CSS files */ --font-heading: var(--font-serif); --font-body: var(--font-sans); --font-accent: var(--font-serif); /* — Type Scale — */ --text-display: clamp(2.8rem, 6vw, 4.8rem); /* hero / display title */ --text-h1: clamp(2rem, 4vw, 3rem); /* page-level H1 */ --text-h2: clamp(1.4rem, 3vw, 2rem); /* section heading */ --text-h3: clamp(1.15rem,2vw, 1.5rem); /* subsection heading */ --text-h4: 1rem; /* component / card label */ --text-h5: 0.875rem; /* small label */ --text-h6: 0.72rem; /* fine label / badge */ --text-lead: 1.1rem; /* intro / pull-quote paragraph */ --text-body: 1rem; /* standard body text */ --text-small: 0.875rem; /* captions, meta, card body */ --text-xs: 0.72rem; /* eyebrow labels, tags */ /* — Line Heights — */ --lh-tight: 1.1; /* display / large hero title */ --lh-heading: 1.2; /* h1–h3 */ --lh-snug: 1.4; /* h4–h6, tight body */ --lh-body: 1.7; /* standard paragraphs */ --lh-relaxed: 1.85; /* lead text / long-form */ /* — Font Weights — */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* — Letter Spacing — */ --ls-tight: -0.02em; /* large display headings */ --ls-normal: 0em; --ls-wide: 0.04em; /* body caps */ --ls-wider: 0.08em; /* h4 / small-caps labels */ --ls-widest: 0.14em; /* eyebrow / badge text */ --mk-heading-anim-duration: 5s; /* h1 metallic sweep speed — change here */ } /* ── H1 metallic sweep animation ─────────────────────────── */ @keyframes mk-metallic-sweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Body & Base ──────────────────────────────────────────── */ body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text); } /* ── H1 base — font & size only, no colour/animation ─────── */ /* Colour and metallic effect are applied by .mk-h1-metallic */ /* (added via navbar.js to non-hero h1s) so hero h1s are */ /* untouched and their page-level fade-in animations survive. */ h1 { font-family: var(--font-h1) !important; font-size: var(--text-h1) !important; font-weight: var(--fw-regular)!important; /* Carter One is already heavy */ line-height: var(--lh-tight) !important; letter-spacing: var(--ls-normal); } /* ── Hero h1s — white text on photo overlays ─────────────── */ .destination-hero h1, .hero h1, .booking-hero h1, .mk-hero h1, .page-header h1 { -webkit-text-fill-color: white !important; color: white !important; background-image: none !important; text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important; } /* ── H2 & H3 — solid navy ────────────────────────────────── */ h2 { font-family: var(--font-serif) !important; font-size: var(--text-h2) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--ls-normal); -webkit-text-fill-color: var(--color-heading) !important; color: var(--color-heading) !important; background-image: none !important; } h3 { font-family: var(--font-serif) !important; font-size: var(--text-h3) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--ls-normal); -webkit-text-fill-color: var(--color-heading) !important; color: var(--color-heading) !important; background-image: none !important; } /* ── H4–H6 ────────────────────────────────────────────────── */ h4 { font-family: var(--font-sans) !important; font-size: var(--text-h4) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-snug) !important; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-primary) !important; } h5 { font-family: var(--font-sans) !important; font-size: var(--text-h5) !important; font-weight: var(--fw-medium) !important; line-height: var(--lh-snug) !important; letter-spacing: var(--ls-wide); color: var(--color-heading) !important; } h6 { font-family: var(--font-sans) !important; font-size: var(--text-h6) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-snug) !important; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-text-muted) !important; } /* ── Named heading classes — solid navy ──────────────────── */ /* font-family intentionally omitted — h1/h2/h3 tag rules set it */ .shining-blue-text, .heading-bright-blue, .text-metallic { -webkit-text-fill-color: var(--color-heading) !important; color: var(--color-heading) !important; background-image: none !important; animation: none !important; } .t-display { font-family: var(--font-serif) !important; font-size: var(--text-display) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-tight) !important; } /* ── .mk-h1-metallic — the actual gradient effect ──────────── Added by navbar.js to every h1 NOT inside a hero section. Placed last so it beats .shining-blue-text / .heading-bright-blue when both classes appear on the same h1 element. To change colours: edit the linear-gradient stops below. To change speed: edit --mk-heading-anim-duration in :root. ────────────────────────────────────────────────────────────── */ .mk-h1-metallic { background-image: linear-gradient( 90deg, #0F2652 0%, #1B3A6B 9%, #2563EB 20%, #93C5FD 28%, #2563EB 36%, #1B3A6B 44%, #7F1D1D 50%, #C2410C 54%, #EF4444 57%, #C2410C 60%, #7F1D1D 64%, #1B3A6B 70%, #2563EB 80%, #93C5FD 88%, #2563EB 94%, #1B3A6B 100% ) !important; background-size: 200% auto !important; background-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; text-shadow: none !important; animation: mk-metallic-sweep var(--mk-heading-anim-duration) ease-in-out infinite !important; } /* ── Text utility classes ─────────────────────────────────── */ /* Section heading (semantic h2 variant used via class) */ .t-section { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); } /* Eyebrow / label above a heading */ .t-eyebrow, .hero-eyebrow, .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--color-primary); } /* Lead / intro paragraph */ .t-lead, .lead-text { font-family: var(--font-sans); font-size: var(--text-lead) !important; font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--color-text); } /* Hero subtitle / description (stays white on dark overlays) */ .t-subtitle, .hero-subtitle, .hero-desc { font-family: var(--font-sans); font-size: var(--text-small) !important; font-weight: var(--fw-regular); line-height: var(--lh-body); } /* Small body / card description */ .t-small, .attraction-desc, .nearby-desc, .tip-item p { font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--lh-body); color: var(--color-text-muted); } /* Caption / meta */ .t-caption, .t-meta { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--color-text-muted); letter-spacing: var(--ls-wide); } /* Inline label / tag */ .t-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); }