/* Additions on top of the original compiled design — dropdown menus were client-rendered (React state) in the original, so their positioning CSS didn't exist in the static export. Everything else below reuses the original's exact utility/component classes. */ /* The compiled stylesheet reads the font name from this CSS variable (font-family: var(--font-inter), ...). The original site set it via a Next.js–generated class on that this theme never carried over, so every page was silently falling back to the browser's system font. Defining it globally here is a more robust fix than replicating that generated class name. */ html { --font-inter: "__Inter_5c4a2f", "__Inter_Fallback_5c4a2f"; } /* This one Tailwind arbitrary-value class (used only on the contact page's captcha input) didn't make it into the compiled CSS bundle. */ .tracking-\[0\.25em\] { letter-spacing: 0.25em; } /* A handful of other utility classes used on pages the original build's content-scanner apparently missed (same root cause as the class above) — added here so every page renders exactly as designed. */ .pl-4 { padding-left: 1rem; } .pt-2 { padding-top: 0.5rem; } .pt-6 { padding-top: 1.5rem; } .max-w-none { max-width: none; } .max-w-6xl { max-width: 72rem; } .w-fit { width: fit-content; } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); } .bg-white\/8 { background-color: rgba(255,255,255,.08); } .text-brand-gold\/40 { color: rgba(200,149,30,.4); } /* lg:col-span-3 — the contact page's form column was collapsing to a sliver because this class was missing; this was the reported bug. */ @media (min-width: 1024px) { .lg\:col-span-3 { grid-column: span 3 / span 3; } } .sarc-dropdown { position: relative; } .sarc-dropdown-panel { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid #f3f4f6; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); padding: 0.5rem; margin-top: 0.5rem; z-index: 60; } .sarc-dropdown-panel a { display: block; padding: 0.55rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #374151; transition: background-color .15s ease, color .15s ease; } .sarc-dropdown-panel a:hover { background: #FAF6EC; color: #0B2340; } .sarc-dropdown.open .sarc-dropdown-panel { display: block; } .sarc-dropdown.open .sarc-dropdown-toggle svg { transform: rotate(180deg); } /* Investor document listing rows */ .sarc-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #f3f4f6; border-radius: 0.75rem; margin-bottom: 0.75rem; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .sarc-doc-row:hover { border-color: #E4C46A; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); } .sarc-doc-row .sarc-doc-date { font-size: 0.75rem; color: #9CA3AF; white-space: nowrap; } /* Contact form captcha display */ .sarc-captcha-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.35em; color: #0B2340; background: #E5E7EB; border-radius: 0.75rem; padding: 0.6rem 1rem; display: inline-flex; align-items: center; user-select: none; } .sarc-form-message { border-radius: 0.75rem; padding: 0.85rem 1rem; font-size: 0.875rem; margin-top: 1rem; } .sarc-form-message.success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; } .sarc-form-message.error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } button[disabled] { opacity: 0.6; cursor: not-allowed; } /* Mobile nav accordion (Products / Investors sub-items) */ .sarc-mobile-accordion-panel { display: none; padding-bottom: 0.25rem; } .sarc-mobile-accordion.open .sarc-mobile-accordion-panel { display: block; } .sarc-mobile-accordion.open .sarc-mobile-accordion-toggle svg { transform: rotate(180deg); } /* Blog cards */ .sarc-blog-card { background: #fff; border: 1px solid #f3f4f6; border-radius: 0.75rem; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; display: flex; flex-direction: column; height: 100%; } .sarc-blog-card:hover { border-color: #E4C46A; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); transform: translateY(-2px); } .sarc-blog-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #FAF6EC; } .sarc-blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .sarc-blog-meta { font-size: 0.75rem; color: #9CA3AF; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .sarc-blog-category { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #0B2340; background: #FAF6EC; padding: 0.2rem 0.6rem; border-radius: 999px; } /* WordPress default pagination markup (paginate_links / the_posts_pagination) */ .page-numbers { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; } .page-numbers li { display: inline-flex; } a.page-numbers, span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.5rem; border: 1px solid #E5E7EB; color: #374151; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } a.page-numbers:hover { border-color: #E4C46A; color: #0B2340; } span.page-numbers.current { background: #0B2340; border-color: #0B2340; color: #fff; } span.page-numbers.dots { border: none; } /* Minimal .prose fallback — the original design didn't ship the Tailwind Typography plugin, but a couple of fallback templates (generic Page, generic single post) use it for safety with arbitrary editor content. */ .prose { color: #374151; line-height: 1.75; } .prose h1, .prose h2, .prose h3 { color: #0B2340; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; } .prose p { margin-top: 1em; margin-bottom: 1em; } .prose ul, .prose ol { margin-top: 1em; margin-bottom: 1em; padding-left: 1.5em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose a { color: #E4C46A; text-decoration: underline; } .prose img { border-radius: 0.75rem; }