/* ========================================================= 01. GLOBAL DESIGN TOKENS ========================================================= */ :root { /* ----------------------------------------------------- GLOBAL COLOR PALETTE ----------------------------------------------------- */ --ostn-color-accent: #0d6efd; --ostn-color-link: #0d6efd; --ostn-color-primary: var(--ostn-color-accent); --ostn-color-secondary: var(--ostn-color-link); --ostn-color-site-background: #f3f4f6; --ostn-color-background: var(--ostn-color-site-background); --ostn-color-content-background: #ffffff; --ostn-color-background-alt: var(--ostn-color-content-background); --ostn-color-heading: #1f2937; --ostn-color-text: #374151; --ostn-color-text-muted: #6b6b6b; --ostn-color-text-inverse: #ffffff; --ostn-color-border: #d1d5db; --ostn-link-decoration: none; --ostn-color-overlay: rgba(17, 17, 17, 0.06); /* MENU AND FOOTER STYLE TOKENS */ --ostn-menu-background: #ffffff; --ostn-menu-text: #333333; --ostn-menu-font-family: Inter, sans-serif; --ostn-menu-font-size: 24px; --ostn-menu-font-weight: 400; --ostn-menu-line-height: 1.5; --ostn-menu-letter-spacing: normal; --ostn-menu-word-spacing: normal; --ostn-menu-font-style: normal; --ostn-menu-text-transform: none; --ostn-footer-background: #ffffff; --ostn-footer-text: #333333; --ostn-footer-font-family: Inter, sans-serif; --ostn-footer-font-size: 16px; --ostn-footer-font-weight: 400; --ostn-footer-line-height: 1.5; --ostn-footer-letter-spacing: normal; --ostn-footer-word-spacing: normal; --ostn-footer-font-style: normal; --ostn-footer-text-transform: none; --ostn-footer-border-top-color: #d4d4d4; --ostn-footer-border-top-width: 1px; /* GLOBAL CONTAINER */ --ostn-container-width: 1200px; --ostn-container-narrow-width: 750px; --ostn-container-active-width: var(--ostn-container-width); --ostn-container-surface: transparent; --ostn-container-padding: 0; /* GLOBAL TYPOGRAPHY */ --ostn-font-body-family: Inter, sans-serif; --ostn-font-body-size: 16px; --ostn-font-body-weight: 400; --ostn-font-body-line-height: 1.5; --ostn-font-body-color: var(--ostn-color-text); --ostn-font-body-style: normal; --ostn-font-body-transform: none; --ostn-font-h1-family: Inter, sans-serif; --ostn-font-h2-family: Inter, sans-serif; --ostn-font-h3-family: Inter, sans-serif; --ostn-font-h4-family: Inter, sans-serif; --ostn-font-h5-family: Inter, sans-serif; --ostn-font-h6-family: Inter, sans-serif; --ostn-font-h1-color: var(--ostn-color-heading); --ostn-font-h2-color: var(--ostn-color-heading); --ostn-font-h3-color: var(--ostn-color-heading); --ostn-font-h4-color: var(--ostn-color-heading); --ostn-font-h5-color: var(--ostn-color-heading); --ostn-font-h6-color: var(--ostn-color-heading); /* ----------------------------------------------------- HEADER COLORS ----------------------------------------------------- */ --ostn-header-background: var(--ostn-color-background); --ostn-header-text: var(--ostn-color-text); --ostn-header-text-hover: var(--ostn-color-secondary); --ostn-header-border: var(--ostn-color-border); /* ----------------------------------------------------- MEGA MENU COLORS ----------------------------------------------------- */ --ostn-mega-background: var(--ostn-color-background); --ostn-mega-heading: var(--ostn-color-text); --ostn-mega-text: var(--ostn-color-text-muted); --ostn-mega-text-hover: var(--ostn-color-text); --ostn-mega-border: var(--ostn-color-border); --ostn-mega-hover-background: var(--ostn-color-background-alt); /* ----------------------------------------------------- MOBILE MENU COLORS ----------------------------------------------------- */ --ostn-mobile-background: var(--ostn-color-background); --ostn-mobile-text: var(--ostn-color-text); --ostn-mobile-text-hover: var(--ostn-color-secondary); --ostn-mobile-border: var(--ostn-color-border); /* ----------------------------------------------------- HEADER DIMENSIONS ----------------------------------------------------- */ --ostn-header-height: 82px; --ostn-header-container: 1240px; --ostn-header-side-padding: 24px; --ostn-header-logo-width: 165px; --ostn-header-logo-height: 52px; /* ----------------------------------------------------- NAVIGATION TYPOGRAPHY ----------------------------------------------------- */ --ostn-nav-font-size: 12px; --ostn-nav-font-weight: 600; --ostn-nav-letter-spacing: 0.075em; /* ----------------------------------------------------- MEGA MENU TYPOGRAPHY ----------------------------------------------------- */ --ostn-mega-heading-size: 11px; --ostn-mega-heading-weight: 700; --ostn-mega-heading-spacing: 0.11em; --ostn-mega-link-size: 13px; --ostn-mega-link-weight: 400; /* ----------------------------------------------------- RADIUS ----------------------------------------------------- */ --ostn-radius-xs: 6px; --ostn-radius-sm: 9px; --ostn-radius-md: 14px; --ostn-radius-lg: 18px; --ostn-radius-xl: 24px; --ostn-radius-pill: 999px; /* ----------------------------------------------------- SHADOWS ----------------------------------------------------- */ --ostn-shadow-dropdown: 0 18px 50px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03); --ostn-shadow-mega: 0 28px 80px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.04); --ostn-shadow-mobile: -25px 0 70px rgba(0, 0, 0, 0.12); /* ----------------------------------------------------- ANIMATION ----------------------------------------------------- */ --ostn-ease: cubic-bezier(0.22, 1, 0.36, 1); --ostn-transition-fast: 0.18s ease; --ostn-transition-normal: 0.28s ease; --ostn-transition-smooth: 0.35s var(--ostn-ease); --ostn-transition-menu: 0.45s var(--ostn-ease); /* ----------------------------------------------------- Z-INDEX ----------------------------------------------------- */ --ostn-header-z-index: 9999; --ostn-mega-z-index: 99990; --ostn-mobile-z-index: 100000; }