/* Promefy Solutions — site-wide layout & scroll animation styles */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #FFFFFF; } body { overflow-x: hidden; /* Neutralised palette: pure white surface, cool slate greys, darker readable text */ --paper: #FFFFFF; --paper-2: #FAFAFA; --paper-3: #F4F4F5; --bg-1: #FFFFFF; --bg-2: #FAFAFA; --bg-3: #F4F4F5; --n-50: #FAFAFA; --n-100: #F4F4F5; --n-200: #E5E5E5; --n-300: #D4D4D4; --n-400: #71717A; --n-500: #52525B; --n-600: #3F3F46; --n-700: #27272A; --n-800: #18181B; --n-900: #0A0A0A; --fg-1: #0A0A0A; --fg-2: #27272A; --fg-3: #52525B; --fg-mute: #71717A; --border-1: rgba(10, 10, 10, 0.08); --border-2: rgba(10, 10, 10, 0.16); --border-3: rgba(10, 10, 10, 0.28); /* NOTE: --site-accent is set on by App.jsx (per Tweaks). We do NOT declare it on body here — that would cascade-trump the inline value the JS writes to documentElement, leaving every descendant on the fallback. */ } /* Force light values even when the user's OS is in dark mode — the in-app Tweaks panel is the source of truth, not the system preference. */ html { color-scheme: light; } [data-theme="light"], html:not([data-theme="dark"]) { --bg-1: #FFFFFF; --bg-2: #FAFAFA; --bg-3: #F4F4F5; --fg-1: #0A0A0A; --fg-2: #27272A; --fg-3: #52525B; --border-1: rgba(10, 10, 10, 0.08); --border-2: rgba(10, 10, 10, 0.16); --border-3: rgba(10, 10, 10, 0.28); } main { display: block; } section { position: relative; } /* Accent: --site-accent is set inline on by the head bootstrap script (before React mounts) and kept in sync by App.jsx on Tweak changes. The :root rule below is just a defensive default — the inline value beats it. */ :root { --site-accent: #00FF66; --site-accent-fg: #0A0A0A; --site-accent-soft: rgba(0, 255, 102, 0.16); } /* Density */ [data-intensity="0"] *, [data-intensity="0"] *::before, [data-intensity="0"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .container { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--s-8); } @media (max-width: 720px) { .container { padding: 0 var(--s-5); } } /* Grain overlay disabled — was creating a brownish multiply tint over the warm off-white. The site now reads as a true neutral white. */ body::after { content: none; } /* Cursor crosshair (hover effect) — on by default; opt out with data-crosshair="off" */ html:not([data-crosshair="off"]), html:not([data-crosshair="off"]) * { cursor: none !important; } @media (prefers-reduced-motion: reduce) { html:not([data-crosshair="off"]), html:not([data-crosshair="off"]) * { cursor: auto !important; } } /* Touch + narrow viewports: restore system cursor (must beat cursor:none specificity) */ @media (max-width: 768px), (hover: none), (pointer: coarse) { html:not([data-crosshair="off"]), html:not([data-crosshair="off"]) * { cursor: auto !important; } .crosshair { display: none !important; } } .crosshair { position: fixed; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; z-index: 999; mix-blend-mode: difference; transition: opacity var(--dur-fast) var(--ease-out); opacity: 0; } .crosshair.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .crosshair { display: none !important; } } .crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--site-accent, var(--flame)); border-radius: 1px; } .crosshair::before { left: 50%; top: -10px; bottom: -10px; width: 2px; transform: translateX(-50%); } .crosshair::after { top: 50%; left: -10px; right: -10px; height: 2px; transform: translateY(-50%); } @keyframes crosshair-click { 0% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -50%) scale(1.45); } 100% { transform: translate(-50%, -50%) scale(1); } } .crosshair.pulse { animation: crosshair-click 200ms var(--ease-out); } .crosshair.pulse::before, .crosshair.pulse::after { background: var(--site-accent, var(--flame)); box-shadow: 0 0 6px var(--site-accent, var(--flame)); } /* ===== Scroll-trigger reveal classes ===== */ /* Hairline reveal: draws a 1px line then fills content */ .reveal-hairline { position: relative; } .reveal-hairline::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--site-accent, var(--flame)); transition: width var(--dur-cinema) var(--ease-out); } .reveal-hairline.in::before { width: 100%; } /* Fade up */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal-up.in { opacity: 1; transform: translateY(0); } /* Stagger children */ .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal-stagger.in > * { opacity: 1; transform: translateY(0); } .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; } .reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; } .reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; } /* Reveal: blueprint/draw a border, then fill */ .reveal-draw { position: relative; --draw-progress: 0; } .reveal-draw::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--site-accent, var(--flame)); clip-path: inset(0 calc(100% - (var(--draw-progress) * 100%)) 0 0); pointer-events: none; transition: clip-path var(--dur-cinema) var(--ease-out); } .reveal-draw.in { --draw-progress: 1; } .reveal-draw.in::before { clip-path: inset(0 0 0 0); } /* Reveal: scale-in numerals */ .reveal-num { display: inline-block; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .reveal-num.in { opacity: 1; transform: translateY(0) scale(1); } /* Clip-down wipe — content unmasks from top */ .reveal-clip-down { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(12px); transition: clip-path 900ms var(--ease-out), opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal-clip-down.in { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } /* Curtain wipe from left — useful for cards on dark sections */ .reveal-clip-right { opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--ease-out), opacity 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal-clip-right.in { opacity: 1; clip-path: inset(0 0 0 0); } /* Blur-in — for hero-like reveals */ .reveal-blur { opacity: 0; filter: blur(14px); transform: translateY(20px) scale(0.985); transition: opacity 900ms var(--ease-out), filter 1100ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal-blur.in { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } /* Subtle 3D tilt-in — cards drop forward */ .reveal-tilt { opacity: 0; transform: perspective(900px) rotateX(8deg) translateY(28px); transform-origin: center bottom; transition: opacity 700ms var(--ease-out), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-tilt.in { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0); } /* Vertical line that grows from top — for accents/section markers */ .reveal-line-y { position: relative; } .reveal-line-y::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--site-accent, var(--flame)); transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--ease-out); } .reveal-line-y.in::after { transform: scaleY(1); } /* Letterbox in — content scales from 0.9 with subtle slide */ .reveal-zoom { opacity: 0; transform: scale(0.94); transition: opacity 700ms var(--ease-out), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-zoom.in { opacity: 1; transform: scale(1); } /* Slide from left */ .reveal-from-left { opacity: 0; transform: translateX(-40px); transition: opacity 800ms var(--ease-out), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-from-left.in { opacity: 1; transform: translateX(0); } .reveal-from-right { opacity: 0; transform: translateX(40px); transition: opacity 800ms var(--ease-out), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-from-right.in { opacity: 1; transform: translateX(0); } /* SVG path draw — element must have CSS var --path-len set, used on */ .reveal-draw-path path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal-draw-path.in path { stroke-dashoffset: 0; } /* Parallax-y drift — applied to motif images. Y offset driven by JS via --parallax-y. */ .parallax-slow { will-change: transform; transform: translate3d(0, var(--parallax-y, 0px), 0); transition: transform 60ms linear; } /* Heading char reveal */ .reveal-chars span { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); } .reveal-chars.in span { opacity: 1; transform: translateY(0); } .reveal-chars span[data-i="0"] { transition-delay: 0ms; } .reveal-chars span[data-i="1"] { transition-delay: 30ms; } .reveal-chars span[data-i="2"] { transition-delay: 60ms; } .reveal-chars span[data-i="3"] { transition-delay: 90ms; } .reveal-chars span[data-i="4"] { transition-delay: 120ms; } .reveal-chars span[data-i="5"] { transition-delay: 150ms; } .reveal-chars span[data-i="6"] { transition-delay: 180ms; } .reveal-chars span[data-i="7"] { transition-delay: 210ms; } .reveal-chars span[data-i="8"] { transition-delay: 240ms; } .reveal-chars span[data-i="9"] { transition-delay: 270ms; } /* Section dividers */ .section-rule { height: 1px; background: var(--border-1); width: 100%; } /* Slowly drifting motif anim */ @keyframes drift-y { 0%, 100% { transform: translateY(-8px) rotate(0deg); } 50% { transform: translateY(10px) rotate(2deg); } } @keyframes drift-x { 0%, 100% { transform: translateX(-12px) rotate(0deg); } 50% { transform: translateX(8px) rotate(-2deg); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .drift-y { animation: drift-y 14s ease-in-out infinite; } .drift-x { animation: drift-x 18s ease-in-out infinite; } .spin-slow { animation: spin-slow 80s linear infinite; } /* Terminal cursor blink */ @keyframes blink { 50% { opacity: 0; } } .term-cursor { display: inline-block; width: 8px; height: 14px; background: var(--site-accent, var(--flame)); vertical-align: -2px; animation: blink 1s steps(2, end) infinite; margin-left: 6px; } /* Marquee */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes asciiSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Dark section helper */ .section-ink { background: var(--ink); color: var(--paper); } .section-ink h2, .section-ink h3 { color: var(--paper); } .section-ink .border-1 { border-color: rgba(245,243,238,0.10) !important; } /* Selection */ ::selection { background: var(--site-accent, var(--flame)); color: var(--site-accent-fg, var(--paper)); } /* Buttons in flame accent inherit site-accent */ .btn-accent { background: var(--site-accent, var(--flame)) !important; color: var(--paper) !important; } /* Layout helpers */ .flex { display: flex; } .col { display: flex; flex-direction: column; } .grid { display: grid; } .gap-2 { gap: 8px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } /* No scrollbar on horizontal scroll regions */ .scroll-x { overflow-x: auto; scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; } /* Print-safe: hide animations */ @media print { .crosshair, body::after { display: none !important; } * { animation: none !important; transition: none !important; } } /* Responsive helpers */ .grid-2 > *, .grid-3 > *, .contact-form > * { min-width: 0; } .contact-form-full { grid-column: 1 / -1; } .contact-form label { width: 100%; } /* Mobile nav — global (portaled to body; must work on touch devices at any width) */ .nav-hamburger { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: var(--fg-1); cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-hamburger.is-dark { color: var(--paper); } .nav-hamburger-icon { display: block; width: 22px; height: 16px; position: relative; } .nav-hamburger-icon span { display: block; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out), top 220ms var(--ease-out); } .nav-hamburger-icon span:nth-child(1) { top: 0; } .nav-hamburger-icon span:nth-child(2) { top: 7px; } .nav-hamburger-icon span:nth-child(3) { top: 14px; } .nav-hamburger-icon.is-open span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-hamburger-icon.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger-icon.is-open span:nth-child(3) { top: 7px; transform: rotate(-45deg); } .nav-mobile-overlay { position: fixed; inset: 0; z-index: 100001; background: var(--paper); color: var(--fg-1); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .nav-mobile-overlay.is-dark { background: var(--ink); color: var(--paper); } .nav-mobile-overlay-inner { min-height: 100%; display: flex; flex-direction: column; padding: 88px var(--s-5) 32px; } .nav-mobile-eyebrow { margin: 0 0 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--fg-3); text-transform: uppercase; } .nav-mobile-overlay.is-dark .nav-mobile-eyebrow { color: var(--n-400); } .nav-mobile-list { display: flex; flex-direction: column; gap: 0; flex: 1; } .nav-mobile-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 18px 0; border: none; border-bottom: 1px solid var(--border-1); background: transparent; text-decoration: none; text-align: left; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-mobile-overlay.is-dark .nav-mobile-item { border-bottom-color: rgba(245, 243, 238, 0.12); } .nav-mobile-item.is-active .nav-mobile-label { color: var(--site-accent, var(--flame)); } .nav-mobile-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-3); } .nav-mobile-overlay.is-dark .nav-mobile-num { color: var(--n-400); } .nav-mobile-label { font-family: var(--font-display); font-size: clamp(26px, 7vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .nav-mobile-chevron { font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--fg-3); transition: transform var(--dur-fast) var(--ease-out); } .nav-mobile-item.is-open .nav-mobile-chevron { transform: rotate(45deg); color: var(--site-accent, var(--flame)); } .nav-mobile-sublist { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 12px 50px; border-bottom: 1px solid var(--border-1); } .nav-mobile-overlay.is-dark .nav-mobile-sublist { border-bottom-color: rgba(245, 243, 238, 0.12); } .nav-mobile-subitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; text-decoration: none; color: inherit; font-family: var(--font-sans); font-size: 15px; border-bottom: 1px solid var(--border-1); } .nav-mobile-overlay.is-dark .nav-mobile-subitem { border-bottom-color: rgba(245, 243, 238, 0.08); } .nav-mobile-subitem:last-child { border-bottom: none; } .nav-mobile-subitem.is-active { color: var(--site-accent, var(--flame)); } .nav-mobile-subitem-accent .nav-mobile-subcode { color: var(--site-accent, var(--flame)); } .nav-mobile-subcode { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg-3); flex-shrink: 0; } .nav-mobile-overlay.is-dark .nav-mobile-subcode { color: var(--n-400); } .nav-mobile-foot { margin-top: 32px; padding-top: 8px; } .nav-mobile-cta { width: 100%; justify-content: center; } html.is-mobile .hide-sm { display: none !important; } html.is-mobile .show-sm-only { display: inline-flex !important; } header.nav-header-menu-open { z-index: 100002 !important; } html.nav-menu-open .twk-panel { display: none !important; } @media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: 1fr 1fr !important; } .team-mirror .team-photo { order: -1; } .case-card-demo { border-right: none !important; border-bottom: 1px solid rgba(245, 243, 238, 0.1) !important; } .case-card-body { padding: 28px !important; } .case-card-footer { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .contact-layout { gap: 48px !important; } .hero-layout { align-items: start !important; } } .show-sm-only { display: none !important; } @media (max-width: 768px), (hover: none), (pointer: coarse) { .hide-sm { display: none !important; } .show-sm-only { display: inline-flex !important; } } @media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr !important; } #contact { padding-top: 72px !important; padding-bottom: 72px !important; } .contact-layout { gap: 40px !important; } .contact-form { padding: 20px 16px !important; gap: 24px !important; grid-template-columns: 1fr !important; } .contact-form-full { grid-column: 1 / -1 !important; } .contact-form-footer { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin-top: 4px !important; } .contact-form-footer > button, .contact-form-footer > a { width: 100%; justify-content: center; } .section-headline { max-width: 100% !important; } .role-row { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 16px !important; padding: 22px 4px !important; } .role-row-meta { grid-column: 1 / -1 !important; padding-left: 52px !important; white-space: normal !important; } .team-table-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 16px 20px !important; } .about-achievement-row { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 12px !important; } .photo-caption { grid-template-columns: 1fr !important; gap: 6px !important; } header > .container { gap: 16px !important; height: 64px !important; min-height: 64px; padding-top: 0 !important; padding-bottom: 0 !important; } header > .container img[alt="Promefy Solutions"] { height: 44px !important; } }