@font-face { font-family: 'Anton'; src: url('./Anton-Regular.ttf') format('truetype'); font-weight: 100 900; font-style: normal; } /* The compiled Tailwind bundle forces every heading tag to Montserrat via "h1,h2,h3,h4,h5,h6,.headline{font-family:Montserrat!important}", which beats a plain inline style. Attribute-selector specificity (0,1,0) beats that rule's tag selectors (0,0,1), so this reliably wins for exactly the headings we've explicitly set to Anton. */ [style*="'Anton'"] { font-family: 'Anton', sans-serif !important; } /* Site-wide type system: Anton everywhere except real body/description copy (paragraphs), which stays Montserrat for readability. Counters the compiled Tailwind bundle's own defaults ("*{font-family:Montserrat}", plus !important rules forcing Montserrat on headings and the whole header/nav) with matching or higher specificity so this wins reliably. */ * { font-family: 'Anton', sans-serif; } p { font-family: 'Montserrat', sans-serif; } /* Form fields stay Montserrat — Anton is a bold display face, unreadable at the sizes people type into. */ input, textarea, select { font-family: 'Montserrat', sans-serif; } h1, h2, h3, h4, h5, h6, .headline { font-family: 'Anton', sans-serif !important; } header, header * { font-family: 'Anton', sans-serif !important; } #siteHeader .nav-link, #siteHeader .nav-link i, #topBar a, #topBar span, #mobile-menu a, #mobile-menu button { font-family: 'Anton', sans-serif !important; } /* ...except body-style text that happens to live inside the header/nav (there isn't any today, but keep the escape hatch consistent). */ header p { font-family: 'Montserrat', sans-serif !important; } /* Prevent phantom horizontal scroll on mobile: some browsers treat , not , as the actual root scrolling element, so overflow-x:hidden on body alone doesn't reliably clip content that runs wider than the viewport. Belt-and-suspenders across both. */ html { overflow-x: hidden; max-width: 100%; } /* Fixed navbar: on iOS Safari, a position:fixed element can flicker or momentarily disappear during momentum/rubber-band scrolling unless it's promoted to its own compositor layer. This is the standard fix. */ #mainNav { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } /* Navbar: always a solid, theme-aware background — never transparent. */ #topBar, #siteHeader { background-color: #ffffff !important; border-bottom-color: rgba(13, 27, 42, 0.12) !important; } html.dark #topBar, html.dark #siteHeader { background-color: #000000 !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } /* Nav text/icons must stay readable against the solid background in both themes, regardless of scroll position (previously only true once scrolled). */ #siteHeader .nav-link, #siteHeader .nav-link i { color: #0f172a !important; } html.dark #siteHeader .nav-link, html.dark #siteHeader .nav-link i { color: #ffffff !important; } #topBar a { color: #0f172a !important; } html.dark #topBar a { color: #ffffff !important; } .topbar-icon { color: #0f172a !important; background: rgba(13, 27, 42, 0.06) !important; border-color: rgba(13, 27, 42, 0.15) !important; } .topbar-icon:hover { background: rgba(13, 27, 42, 0.12) !important; } html.dark .topbar-icon { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; } html.dark .topbar-icon:hover { background: rgba(255, 255, 255, 0.16) !important; } #siteHeader .section-btn, #siteHeader .btn-translucent { background: transparent !important; border-color: rgba(13, 27, 42, 0.3) !important; } #siteHeader .section-btn a, #siteHeader .btn-translucent a, #siteHeader .section-btn .button__icon, #siteHeader .btn-translucent .button__icon, #siteHeader #theme-icon, #siteHeader #menu-icon { color: #0f172a !important; } #siteHeader .section-btn:hover, #siteHeader .btn-translucent:hover { background: rgba(13, 27, 42, 0.08) !important; } html.dark #siteHeader .section-btn, html.dark #siteHeader .btn-translucent { border-color: rgba(255, 255, 255, 0.3) !important; } html.dark #siteHeader .section-btn a, html.dark #siteHeader .btn-translucent a, html.dark #siteHeader .section-btn .button__icon, html.dark #siteHeader .btn-translucent .button__icon, html.dark #siteHeader #theme-icon, html.dark #siteHeader #menu-icon { color: #ffffff !important; } html.dark #siteHeader .section-btn:hover, html.dark #siteHeader .btn-translucent:hover { background: rgba(255, 255, 255, 0.1) !important; } /* The arrow icon sits in a permanently dark circle (.icon-wrapper is always #0f172a, in both themes) — it must stay light, unlike the button text/border which flip with the header's own background. */ #siteHeader .icon-wrapper .button__icon, html.dark #siteHeader .icon-wrapper .button__icon { color: #ffffff !important; } /* Hero "Book Appointment" button: translucent glass, matching the navbar's. */ .hero-cta-gradient { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } .hero-cta-gradient:hover { background: rgba(255, 255, 255, 0.2) !important; }