/* * site.css — the static site's own stylesheet. * * app.css next to this file is Tailwind's compiled output and is overwritten on * every conversion. This file is yours: it holds what replaces the behaviour * React used to provide (framer-motion entrances, mobile drawer, dialogs). * The converter creates it once and never touches it again. */ /* --- Scroll reveal: the static stand-in for framer-motion entrances -------- * The renderer tags elements that were mid-animation with data-reveal and * removes the inline opacity/transform that would have left them invisible. * nexus.js adds .is-visible when they scroll into view. */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* Content must never depend on the script running. The renderer sets .no-js on * ; nexus.js drops it only after marking on-screen elements visible, so * the reveal state is never painted. transition: none keeps that swap silent. */ .no-js [data-reveal] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Mobile navigation ---------------------------------------------------- * React rendered the drawer only while open, so it is absent from the snapshot. * nexus.js rebuilds it from the desktop nav links into this shell. */ .nexus-mobile-nav { display: none; border-top: 1px solid rgba(147, 144, 143, 0.2); background: #fff; } .nexus-mobile-nav.is-open { display: block; } .nexus-mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 1.5rem 1.25rem; } .nexus-mobile-nav a { display: block; padding: 0.625rem 0; font-size: 0.9375rem; font-weight: 600; color: #1f1f1f; text-decoration: none; border-bottom: 1px solid rgba(147, 144, 143, 0.12); } .nexus-mobile-nav a:hover { color: #2b3492; } /* --- Dialogs -------------------------------------------------------------- * Replaces the Radix dialog used by the contact-sales modal. */ .nexus-dialog { border: none; border-radius: 0.75rem; padding: 0; max-width: 32rem; width: calc(100% - 2rem); box-shadow: 0 25px 50px -12px rgba(31, 31, 31, 0.35); } .nexus-dialog::backdrop { background: rgba(31, 31, 31, 0.55); backdrop-filter: blur(2px); } /* --- Captured overlays ---------------------------------------------------- * Radix renders dropdowns and dialogs into a portal only while open, so the * conversion lifts that markup back inline and strips its inline positioning. * Placement is defined here instead. */ .nexus-overlay[hidden] { display: none !important; } .nexus-menu-anchor { position: relative; display: inline-flex; align-items: center; } .nexus-menu { position: absolute; top: calc(100% + 0.25rem); right: 0; z-index: 60; min-width: 11rem; background: #fff; border: 1px solid rgba(147, 144, 143, 0.3); box-shadow: 0 12px 28px -8px rgba(31, 31, 31, 0.22); } .nexus-menu a { display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #717888; text-decoration: none; white-space: nowrap; } .nexus-menu a:hover { color: #1f1f1f; background: rgba(43, 52, 146, 0.06); } .nexus-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(31, 31, 31, 0.55); overflow-y: auto; } /* The lifted dialog content had its Radix positioning removed with its inline * styles, so the flex parent above centres it instead. */ .nexus-modal > * { position: relative; max-height: 90vh; width: 100%; max-width: 36rem; overflow-y: auto; background: #fff; box-shadow: 0 25px 50px -12px rgba(31, 31, 31, 0.4); } /* --- Tabs and accordions --------------------------------------------------- */ [data-nexus-panel][hidden] { display: none !important; } /* --- Canvas posters ------------------------------------------------------- * WebGL canvases are baked to PNG at conversion time; keep them fluid. */ img[data-canvas-poster] { display: block; width: 100%; height: auto; } /* --- Controls with no behaviour yet --------------------------------------- * Load the page with ?audit to highlight every button the conversion could not * carry over, so the manual pass has a visible worklist. */ .nexus-audit [data-needs-wiring] { outline: 2px dashed #f8b603; outline-offset: 2px; } /* ---------------------------------------------------------------- phone safety * A marketing page must never scroll sideways on a phone. Three rules cover * every case the conversion hit, without touching individual pages: * * 1. Long single words — module names like "InvestmentPlanning", Hungarian * compounds — may break rather than force the layout wider than the screen. * 2. Media never exceeds its column. * 3. A table that genuinely needs the width scrolls on its own, inside the page. */ h1, h2, h3, h4 { overflow-wrap: anywhere; } img, svg, video, canvas { max-width: 100%; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 4. Button rows wrap on narrow screens. The pages put two calls to action in a * flex row with whitespace-nowrap labels; the Hungarian wording is longer * than the English ("Ingyenes csatlakozás", "Árazás megtekintése"), so the * pair runs past the edge of a phone. Desktop layout is untouched. */ @media (max-width: 900px) { .flex.gap-3, .flex.gap-4, .flex.flex-shrink-0 { flex-wrap: wrap; } /* flex-shrink-0 keeps such a row at its full content width, so wrapping alone never kicks in — on a tablet the About page's two buttons still ran off. */ .flex.flex-shrink-0 { flex-shrink: 1; min-width: 0; } } /* ------------------------------------------------------------ 3D viewer * The poster is real markup and is what phones (and anyone without JS) keep. * When the model finishes loading, viewer.js adds .is-gone and it fades out. */ .nexus-viewer__poster { transition: opacity .5s ease; } .nexus-viewer__poster.is-gone { opacity: 0; } .nexus-viewer__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: #1a1f3a; } .nexus-viewer__status, .nexus-viewer__error { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); } .nexus-viewer__error { color: #fca5a5; text-transform: none; letter-spacing: 0; } .nexus-viewer__spinner { width: 1.5rem; height: 1.5rem; border: 2px solid rgba(248,182,3,.3); border-top-color: #F8B603; border-radius: 50%; animation: nexus-spin 1s linear infinite; } @keyframes nexus-spin { to { transform: rotate(360deg); } }