/* BYNT GLOBAL THEME This file contains all the standard colours, fonts, and basic styles to make any project look like the Bynt Gold/Black theme. Simply link this file in the of your other projects. */ /* 1. Import Standard Fonts */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap'); /* 2. Core Theme Colors */ :root { --gold: #C9A84C; --gold-light: #E8C97A; --gold-dim: #B8924A; --ink: #0A0906; --paper: #F7F3EC; --paper-mid: #EDE6D6; --charcoal: #1C1A16; --charcoal-mid: #2E2B24; --grey: #A89F94; --white: #FAF8F4; } /* 3. Basic Page Reset and Setup */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--white); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; cursor: none; /* Auto-hide native cursor for the custom cursor */ } /* 4. Common Typography Helpers */ .font-heading { font-family: 'Cormorant Garamond', serif; font-weight: 300; } .font-accent { font-family: 'Bebas Neue', sans-serif; letter-spacing: 4px; } .text-gold { color: var(--gold); } .text-grey { color: var(--grey); } /* 5. Standard Primary Button */ .btn-primary { background: var(--gold); color: var(--ink); padding: 16px 36px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-weight: 500; border: none; transition: all 0.3s; text-decoration: none; display: inline-block; cursor: pointer; } .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); } /* 6. Standard Header/Nav Styling (Base) */ .standard-nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 60px; background: linear-gradient(to bottom, rgba(10, 9, 6, 0.95) 0%, transparent 100%); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } @media (max-width: 768px) { .standard-nav { padding: 16px 24px; } } /* 7. Global Custom Cursor Animation */ .cursor { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transition: transform 0.1s ease; } .cursor-ring { width: 30px; height: 30px; border: 1px solid rgba(201, 168, 76, 0.4); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transition: all 0.25s ease; } /* Ensure links and buttons have the pointer cursor state explicitly */ a, button, .dropdown-item, .nav-link, .footer-link { cursor: pointer; }