/** * Critical CSS - Inline in * Variables, reset, layout essentials */ /* CSS Variables */ :root { /* Colors - The Move Miami Brand */ --color-primary: #DA0E0E; /* Red - Primary CTA color */ --color-secondary: #ffffff; /* White - Text on dark backgrounds */ --color-accent: #ff1a1a; /* Lighter red for hovers */ --color-dark: #0f0f14; /* Dark background */ --color-darker: #0a0a10; /* Darker sections */ --color-white: #ffffff; /* Pure white */ --color-text: #e0e0e0; /* Light gray text */ --color-text-light: #a0a0a0; /* Lighter gray for secondary text */ --color-bg: #000000; /* Pure black background */ --color-overlay: rgba(0, 0, 0, 0.7); /* Typography */ --font-primary: "Raleway", Sans-serif; --font-heading: "Raleway", Sans-serif; --font-body: "Rubik", sans-serif; /* Used in accordions, body text */ --font-numeric: "IBM Plex Mono", "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; /* For prices, hours, credit counts — IBM Plex Mono has tabular figures and clear decimal alignment */ /* Font Sizes — Standardized */ --text-hero: clamp(2.5rem, 6vw, 4.5rem); /* 72px — hero only */ --text-section-title: clamp(2rem, 5vw, 4.0625rem); /* 65px — all section titles */ --text-subtitle: clamp(1.05rem, 2vw, 1.35rem);/* 21px — subtitles */ --text-body: 1.1rem; /* 17.6px — body/accordion */ --text-small: 0.9rem; /* 14.4px — captions, meta */ /* Spacing */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 2rem; /* 32px */ --spacing-lg: 3rem; /* 48px */ --spacing-xl: 4rem; /* 64px */ --spacing-2xl: 6rem; /* 96px */ /* Layout */ --container-max-width: 1400px; --header-height: 80px; --border-radius: 8px; /* Transitions */ --transition-base: 0.3s ease; --transition-slow: 0.5s ease; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-primary); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; overflow-x: hidden; margin-top: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { border: none; background: none; cursor: pointer; font-family: inherit; } ul, ol { list-style: none; } /* Screen-reader only (visually hidden, SEO indexable) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link. Hidden until keyboard focus, then snaps to top-left so screen-reader / keyboard users can bypass the fixed header. Tinted with the brand red so the focus state is obvious against the dark background. */ .tmm-skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; padding: 12px 20px; background: var(--color-primary, #DA0E0E); color: #fff; font-family: var(--font-heading, sans-serif); font-size: 0.95rem; font-weight: 700; text-decoration: none; border-radius: 4px; transition: top 150ms ease-out; } .tmm-skip-link:focus, .tmm-skip-link:focus-visible { top: 16px; outline: 3px solid #fff; outline-offset: 2px; }