/* ============================================================ KĀRTH — Global Stylesheet karth.css · v1.0 Born of the Sun. Never Owned. ============================================================ */ /* ── GOOGLE FONTS ──────────────────────────────────────────── Load via in of every page: Cormorant Garamond (display serif) + Jost (geometric sans) ──────────────────────────────────────────────────────────── */ /* ── RESET ─────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } img, video { display: block; max-width: 100%; } a { text-decoration: none; } ul, ol { list-style: none; } button { background: none; border: none; cursor: none; } /* ── CSS VARIABLES ─────────────────────────────────────────── */ :root { /* Palette */ --black: #060606; --deep: #0C0C0C; --surface: #111111; --surface-2: #181818; --surface-3: #1E1E1E; /* Gold scale */ --gold: #C9A84C; --gold-dim: #8A6E2E; --gold-pale: #EAD9A8; --gold-glow: rgba(201, 168, 76, 0.10); --gold-border: rgba(201, 168, 76, 0.20); --gold-border-h:rgba(201, 168, 76, 0.50); /* Text scale */ --text: #EDE8DE; --text-soft: #A89F8C; --text-muted: #5C5850; --text-ghost: #2A2820; /* Borders */ --border: rgba(255, 255, 255, 0.06); --border-gold: rgba(201, 168, 76, 0.18); /* Typography */ --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --sans: 'Jost', 'DM Sans', sans-serif; /* Spacing scale */ --sp-xs: 8px; --sp-sm: 16px; --sp-md: 32px; --sp-lg: 64px; --sp-xl: 128px; --sp-2xl: 200px; /* Site max width */ --max-w: 1440px; /* Section padding */ --pad-x: 64px; --pad-y: 140px; /* Transitions */ --t-fast: 0.2s ease; --t-mid: 0.4s ease; --t-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1); --t-reveal: 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* ── BASE BODY ─────────────────────────────────────────────── */ body { background-color: var(--black); color: var(--text); font-family: var(--sans); font-weight: 200; font-size: 16px; line-height: 1.7; cursor: none; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Restore cursor on touch / mobile */ @media (pointer: coarse) { body { cursor: auto; } #k-cursor, #k-ring { display: none !important; } * { cursor: auto !important; } } /* ── CUSTOM CURSOR ─────────────────────────────────────────── */ #k-cursor { position: fixed; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width var(--t-fast), height var(--t-fast), background var(--t-mid), opacity var(--t-mid); will-change: left, top; } #k-ring { position: fixed; width: 32px; height: 32px; border: 0.5px solid rgba(201, 168, 76, 0.45); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, border-color var(--t-mid), opacity var(--t-mid); will-change: left, top; } /* Hover states */ body.k-hover #k-cursor { width: 8px; height: 8px; } body.k-hover #k-ring { width: 52px; height: 52px; border-color: rgba(201, 168, 76, 0.8); } body.k-link #k-cursor { width: 3px; height: 3px; background: var(--gold-pale); } body.k-link #k-ring { width: 44px; height: 44px; border-color: var(--gold); } /* ── NAVIGATION ────────────────────────────────────────────── */ #k-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 28px var(--pad-x); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, rgba(6, 6, 6, 0.85) 0%, rgba(6, 6, 6, 0.0) 100%); transition: padding var(--t-mid), background var(--t-mid), backdrop-filter var(--t-mid); } #k-nav.scrolled { padding: 18px var(--pad-x); background: rgba(6, 6, 6, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--text-ghost); } .k-logo { font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: 0.55em; color: var(--gold); transition: color var(--t-mid), opacity var(--t-mid); } .k-logo:hover { color: var(--gold-pale); } .k-nav-links { display: flex; align-items: center; gap: 44px; } .k-nav-links a { font-size: 9px; font-weight: 300; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-muted); transition: color var(--t-mid), letter-spacing var(--t-mid); position: relative; } .k-nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 0.5px; background: var(--gold-dim); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); } .k-nav-links a:hover { color: var(--text-soft); } .k-nav-links a:hover::after { transform: scaleX(1); } .k-nav-links a.active { color: var(--gold); } /* Inquire CTA link in nav */ .k-nav-cta { color: var(--gold) !important; border: 0.5px solid var(--gold-dim) !important; padding: 9px 22px !important; letter-spacing: 0.4em !important; transition: background var(--t-slow), color var(--t-mid), border-color var(--t-mid) !important; } .k-nav-cta:hover { background: var(--gold) !important; color: var(--black) !important; border-color: var(--gold) !important; } .k-nav-cta::after { display: none !important; } /* Mobile nav toggle (hidden desktop) */ .k-nav-toggle { display: none; flex-direction: column; gap: 5px; width: 24px; cursor: none; } .k-nav-toggle span { display: block; width: 100%; height: 0.5px; background: var(--text-muted); transition: transform var(--t-slow), opacity var(--t-mid); } /* ── MARQUEE ───────────────────────────────────────────────── */ .k-marquee { border-top: 0.5px solid var(--text-ghost); border-bottom: 0.5px solid var(--text-ghost); padding: 15px 0; overflow: hidden; background: var(--surface); position: relative; } .k-marquee-track { display: flex; white-space: nowrap; animation: k-marquee-roll 32s linear infinite; } .k-marquee-track:hover { animation-play-state: paused; } @keyframes k-marquee-roll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .k-marquee-item { display: inline-flex; align-items: center; gap: 20px; padding: 0 44px; font-size: 8.5px; font-weight: 200; letter-spacing: 0.45em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; } .k-marquee-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-dim); flex-shrink: 0; } /* ── SECTION UTILITY CLASSES ───────────────────────────────── */ .k-section { padding: var(--pad-y) var(--pad-x); position: relative; } .k-section--flush-x { padding-left: 0; padding-right: 0; } .k-section--sm { padding-top: 100px; padding-bottom: 100px; } .k-section--dark { background: var(--surface); } .k-section--border-t { border-top: 0.5px solid var(--text-ghost); } .k-section--border-b { border-bottom: 0.5px solid var(--text-ghost); } /* ── TYPOGRAPHY ────────────────────────────────────────────── */ .k-eyebrow { font-family: var(--sans); font-size: 8.5px; font-weight: 200; letter-spacing: 0.55em; text-transform: uppercase; color: var(--gold-dim); display: flex; align-items: center; gap: 18px; } .k-eyebrow--line::before { content: ''; width: 36px; height: 0.5px; background: var(--gold-dim); flex-shrink: 0; } .k-eyebrow--line-both::before, .k-eyebrow--line-both::after { content: ''; width: 36px; height: 0.5px; background: var(--gold-dim); flex-shrink: 0; } .k-h1 { font-family: var(--serif); font-size: clamp(56px, 9vw, 110px); font-weight: 300; letter-spacing: 0.55em; line-height: 1; color: var(--text); } .k-h2 { font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); font-weight: 300; line-height: 1.1; color: var(--text); } .k-h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); font-weight: 300; line-height: 1.15; color: var(--text); } .k-h4 { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); font-weight: 300; line-height: 1.2; color: var(--text); } /* Italic gold accent within headings */ .k-h1 em, .k-h2 em, .k-h3 em, .k-h4 em { font-style: italic; color: var(--gold-pale); } .k-body { font-size: 12px; font-weight: 200; line-height: 2.1; color: var(--text-muted); } .k-body--light { color: var(--text-soft); } .k-body--sm { font-size: 10.5px; } .k-rule { width: 28px; height: 0.5px; background: var(--gold-dim); } .k-rule--lg { width: 60px; } /* ── BUTTONS ───────────────────────────────────────────────── */ .k-btn { display: inline-flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: 8.5px; font-weight: 300; letter-spacing: 0.55em; text-transform: uppercase; color: var(--gold); border: 0.5px solid var(--gold-dim); padding: 18px 44px; position: relative; overflow: hidden; transition: color var(--t-mid), letter-spacing var(--t-slow); } .k-btn::before { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); } .k-btn > span { position: relative; z-index: 1; } .k-btn:hover { color: var(--black); letter-spacing: 0.7em; } .k-btn:hover::before { transform: scaleX(1); } /* Ghost button (no fill) */ .k-btn--ghost { color: var(--text-muted); border-color: var(--border); } .k-btn--ghost::before { background: var(--surface-2); } .k-btn--ghost:hover { color: var(--text); } /* Text link arrow */ .k-arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 8.5px; font-weight: 300; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold-dim); transition: gap var(--t-slow), color var(--t-mid); } .k-arrow-link::after { content: '→'; font-size: 12px; transition: transform var(--t-slow); } .k-arrow-link:hover { gap: 18px; color: var(--gold-pale); } /* ── DIVIDER / ORNAMENT ────────────────────────────────────── */ .k-divider { width: 100%; height: 0.5px; background: var(--text-ghost); border: none; } .k-divider--gold { background: var(--gold-dim); opacity: 0.4; } .k-ornament { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 0; } .k-ornament::before, .k-ornament::after { content: ''; flex: 1; max-width: 120px; height: 0.5px; background: var(--text-ghost); } .k-ornament-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dim); } /* ── IMAGE TILE (base for category and piece cards) ────────── */ .k-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: var(--surface); } .k-tile-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); } .k-tile:hover .k-tile-img { transform: scale(1.06); } .k-tile-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(6, 6, 6, 0.95) 0%, rgba(6, 6, 6, 0.55) 45%, rgba(6, 6, 6, 0.15) 100% ); z-index: 1; transition: background var(--t-mid); } .k-tile:hover .k-tile-overlay { background: linear-gradient( to top, rgba(6, 6, 6, 0.98) 0%, rgba(6, 6, 6, 0.65) 50%, rgba(6, 6, 6, 0.25) 100% ); } /* Gold border on hover */ .k-tile::after { content: ''; position: absolute; inset: 0; border: 0.5px solid rgba(201, 168, 76, 0); z-index: 3; transition: border-color var(--t-mid); pointer-events: none; } .k-tile:hover::after { border-color: var(--gold-border); } .k-tile-content { position: relative; z-index: 2; padding: 32px 36px; } .k-tile-cat { font-size: 7.5px; font-weight: 300; letter-spacing: 0.55em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .k-tile-cat::before { content: '·'; color: var(--gold-dim); } .k-tile-name { font-family: var(--serif); font-size: clamp(20px, 2.5vw, 32px); font-weight: 300; color: var(--text); } .k-tile-sub { font-size: 9px; font-weight: 200; letter-spacing: 0.2em; color: var(--text-muted); margin-top: 6px; } .k-tile-num { position: absolute; top: 24px; right: 28px; z-index: 2; font-family: var(--serif); font-size: 11px; font-weight: 300; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.12); } /* ── SCROLL REVEAL ─────────────────────────────────────────── */ .k-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-reveal), transform var(--t-reveal); } .k-reveal.k-visible { opacity: 1; transform: translateY(0); } .k-reveal--up { transform: translateY(40px); } .k-reveal--fade { transform: none; } /* Delay helpers */ .k-d1 { transition-delay: 0.10s; } .k-d2 { transition-delay: 0.22s; } .k-d3 { transition-delay: 0.36s; } .k-d4 { transition-delay: 0.50s; } .k-d5 { transition-delay: 0.65s; } /* ── STATS GRID ────────────────────────────────────────────── */ .k-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5px; background: var(--text-ghost); border-top: 0.5px solid var(--text-ghost); border-bottom: 0.5px solid var(--text-ghost); } .k-stat { background: var(--surface); padding: 72px 48px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: background var(--t-mid); } .k-stat:hover { background: var(--surface-2); } .k-stat::after { content: ''; position: absolute; bottom: 0; left: 48px; right: 48px; height: 0.5px; background: var(--gold-dim); opacity: 0; transition: opacity var(--t-mid); } .k-stat:hover::after { opacity: 1; } .k-stat-num { font-family: var(--serif); font-size: clamp(44px, 5vw, 68px); font-weight: 300; line-height: 1; color: var(--gold-pale); } .k-stat-label { font-size: 9px; font-weight: 200; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-muted); line-height: 1.8; } /* ── QUOTE BLOCK ───────────────────────────────────────────── */ .k-quote-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .k-quote-mark { font-family: var(--serif); font-size: 72px; font-weight: 300; color: var(--gold-dim); line-height: 0.6; margin-bottom: 48px; opacity: 0.4; } .k-quote-text { font-family: var(--serif); font-size: clamp(24px, 3.8vw, 48px); font-weight: 300; font-style: italic; color: var(--text); line-height: 1.5; max-width: 760px; } .k-quote-attr { margin-top: 52px; font-size: 8.5px; font-weight: 200; letter-spacing: 0.55em; text-transform: uppercase; color: var(--gold-dim); display: flex; align-items: center; gap: 18px; } .k-quote-attr::before, .k-quote-attr::after { content: ''; width: 36px; height: 0.5px; background: var(--gold-dim); } /* ── FOOTER ────────────────────────────────────────────────── */ #k-footer { border-top: 0.5px solid var(--text-ghost); padding: 56px var(--pad-x) 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 40px; } .k-footer-logo { font-family: var(--serif); font-size: 12px; font-weight: 400; letter-spacing: 0.55em; color: var(--gold-dim); display: block; margin-bottom: 8px; } .k-footer-tag { font-size: 8px; font-weight: 200; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-ghost); } .k-footer-links { display: flex; gap: 32px; justify-content: center; align-items: center; } .k-footer-links a { font-size: 8.5px; font-weight: 200; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-ghost); transition: color var(--t-mid); } .k-footer-links a:hover { color: var(--text-muted); } .k-footer-copy { font-size: 8.5px; font-weight: 200; letter-spacing: 0.2em; color: var(--text-ghost); text-align: right; } /* ── GRAIN OVERLAY (reusable) ──────────────────────────────── */ .k-grain { position: absolute; inset: 0; pointer-events: none; z-index: 10; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); } /* ── FORM (Inquiry page) ───────────────────────────────────── */ .k-form { display: flex; flex-direction: column; gap: 28px; max-width: 600px; } .k-field { display: flex; flex-direction: column; gap: 10px; } .k-label { font-size: 8.5px; font-weight: 300; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-muted); } .k-input, .k-textarea, .k-select { background: transparent; border: none; border-bottom: 0.5px solid var(--text-ghost); color: var(--text); font-family: var(--sans); font-size: 12px; font-weight: 200; padding: 12px 0; width: 100%; outline: none; transition: border-color var(--t-mid); cursor: none; } .k-input:focus, .k-textarea:focus, .k-select:focus { border-color: var(--gold-dim); } .k-input::placeholder, .k-textarea::placeholder { color: var(--text-ghost); font-weight: 200; } .k-textarea { resize: none; height: 120px; line-height: 1.8; } .k-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%238A6E2E' stroke-width='0.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; color: var(--text-muted); } .k-select option { background: var(--surface); color: var(--text); } /* ── BREADCRUMB ────────────────────────────────────────────── */ .k-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 8px; font-weight: 200; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-ghost); } .k-breadcrumb a { color: var(--text-ghost); transition: color var(--t-mid); } .k-breadcrumb a:hover { color: var(--text-muted); } .k-breadcrumb-sep { color: var(--text-ghost); opacity: 0.5; } .k-breadcrumb-current { color: var(--gold-dim); } /* ── PAGE HERO (inner pages) ───────────────────────────────── */ .k-page-hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--pad-x) 80px; position: relative; overflow: hidden; } .k-page-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; } .k-page-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(6, 6, 6, 1.0) 0%, rgba(6, 6, 6, 0.7) 40%, rgba(6, 6, 6, 0.35) 100% ); z-index: 1; } .k-page-hero-content { position: relative; z-index: 2; } /* ── UTILITIES ─────────────────────────────────────────────── */ .k-text-center { text-align: center; } .k-text-right { text-align: right; } .k-gold { color: var(--gold); } .k-gold-pale { color: var(--gold-pale); } .k-muted { color: var(--text-muted); } .k-serif { font-family: var(--serif); } .k-italic { font-style: italic; } .k-mt-sm { margin-top: var(--sp-sm); } .k-mt-md { margin-top: var(--sp-md); } .k-mt-lg { margin-top: var(--sp-lg); } .k-flex { display: flex; } .k-flex-between { display: flex; justify-content: space-between; align-items: flex-end; } .k-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .k-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; } .k-max-w { max-width: var(--max-w); margin: 0 auto; } /* ── RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --pad-x: 40px; --pad-y: 100px; } .k-stats { grid-template-columns: 1fr 1fr; } #k-footer { grid-template-columns: 1fr; gap: 32px; text-align: center; } .k-footer-links { justify-content: center; } .k-footer-copy { text-align: center; } } @media (max-width: 768px) { :root { --pad-x: 24px; --pad-y: 80px; } .k-nav-links { display: none; } .k-nav-toggle { display: flex; } .k-stats { grid-template-columns: 1fr 1fr; } .k-stat { padding: 48px 32px; } .k-grid-2, .k-grid-3 { grid-template-columns: 1fr; } .k-quote-text { font-size: clamp(22px, 6vw, 32px); } } @media (max-width: 480px) { :root { --pad-x: 20px; --pad-y: 60px; } .k-stats { grid-template-columns: 1fr; } .k-btn { padding: 15px 32px; } }