/* ========================================================================== Primus Digital — design system + the AI universe One dark, gold-accented visual language shared by every route. Depth comes from a persistent WebGL/Canvas world behind the content, CSS 3D interface panels and GSAP scroll choreography. Contents 01 Tokens & base 02 Universe, veil & route transitions 03 Navigation 04 Shared scene furniture (headings, buttons, glass, crumbs) 05 Home — hero 06 Home — the module system (nodes, wires, core) 07 Module chambers (expanded panels) 08 Module demonstrations 09 Home — project portals & phase track 10 Projects page — worlds 11 Capabilities page — system map & areas 12 Process page — the journey 13 Contact page & forms 14 Project builder (Projektarkitekten) 15 Footer & error pages 16 Responsive 17 Reduced motion & no-JS fallbacks ========================================================================== */ /* ========================================================================== 01 TOKENS & BASE ========================================================================== */ :root { --bg: #080b12; --bg-2: #0b1020; --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.14); --text: #eaeef7; --text-strong: #ffffff; --muted: #97a3bd; --muted-2: #6b7793; --gold: #facc15; --gold-2: #f5b806; --gold-soft: rgba(250, 204, 21, 0.14); --cyan: #38bdf8; --violet: #a78bfa; --green: #34d399; --danger: #f87171; --acc: var(--gold); /* per-module accent, set inline */ --accent: var(--gold); /* per-project accent, set inline */ --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; --container: 1200px; --gutter: clamp(20px, 5vw, 48px); --shadow-1: 0 10px 40px -12px rgba(0, 0, 0, 0.6); --shadow-2: 0 30px 80px -20px rgba(0, 0, 0, 0.75); --glow-gold: 0 0 60px -10px rgba(250, 204, 21, 0.35); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace; --nav-h: 74px; --z-universe: 0; --z-content: 1; --z-nav: 100; --z-menu: 99; --z-progress: 150; --z-panel: 160; --z-veil: 180; --z-skip: 200; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--bg); } body { font-family: var(--font); color: var(--text); background: transparent; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; } /* The `hidden` attribute must always win. Without this, any component that sets its own `display` (the mobile menu, builder steps, the review panel) would stay in the layout as an invisible click-blocking overlay. */ [hidden] { display: none !important; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .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-link { position: fixed; top: 10px; left: 10px; z-index: var(--z-skip); padding: 10px 16px; background: var(--gold); color: #111; font-weight: 700; border-radius: 8px; transform: translateY(-160%); transition: transform 0.2s var(--ease); } .skip-link:focus { transform: translateY(0); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); font-weight: 700; /* Danish compound words are long. break-word only kicks in when a single word genuinely cannot fit, so wide screens keep clean unbroken headlines while 360 px screens never get a sideways scrollbar. */ overflow-wrap: break-word; } em { font-style: normal; overflow-wrap: break-word; background: linear-gradient(100deg, var(--gold), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .linkbtn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 0.92rem; } .linkbtn:hover { color: var(--gold); } /* ========================================================================== 02 UNIVERSE, VEIL & ROUTE TRANSITIONS ========================================================================== */ #pd-universe { position: fixed; inset: 0; z-index: var(--z-universe); pointer-events: none; background: radial-gradient(60vw 60vw at 80% -10%, rgba(250, 204, 21, 0.10), transparent 60%), radial-gradient(52vw 52vw at 6% 14%, rgba(56, 189, 248, 0.07), transparent 60%), radial-gradient(60vw 60vw at 50% 116%, rgba(167, 139, 250, 0.09), transparent 62%); } #pd-universe canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; } #pd-universe.is-static { background: radial-gradient(34vw 34vw at 68% 38%, rgba(250, 204, 21, 0.13), transparent 62%), radial-gradient(60vw 60vw at 80% -10%, rgba(250, 204, 21, 0.10), transparent 60%), radial-gradient(52vw 52vw at 6% 14%, rgba(56, 189, 248, 0.07), transparent 60%), radial-gradient(60vw 60vw at 50% 116%, rgba(167, 139, 250, 0.09), transparent 62%); } .content, .site-footer { position: relative; z-index: var(--z-content); } /* The portal veil used between routes. Inert until JS adds body.is-leaving. */ .pd-veil { position: fixed; inset: 0; z-index: var(--z-veil); pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(60vw 60vw at 50% 50%, rgba(250, 204, 21, 0.16), transparent 60%), linear-gradient(180deg, rgba(5, 7, 13, 0.55), rgba(5, 7, 13, 0.85)); transition: opacity 0.24s var(--ease), visibility 0s linear 0.24s; } .pd-veil__scan { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 24px rgba(250, 204, 21, 0.7); transform: scaleX(0); transform-origin: center; } body.is-leaving .pd-veil { opacity: 1; visibility: visible; transition-delay: 0s; } body.is-leaving .pd-veil__scan { animation: veilscan 0.24s var(--ease) forwards; } @keyframes veilscan { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } body.is-leaving .content { opacity: 0.35; transform: translateZ(0) scale(0.995); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); } /* Incoming page: a single short fade-up, then CSS lets go entirely. */ body.is-entering .content { animation: routein 0.42s var(--ease-out) both; } @keyframes routein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); background: transparent; } .scroll-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--cyan)); box-shadow: 0 0 12px rgba(250, 204, 21, 0.6); } /* ========================================================================== 03 NAVIGATION ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background 0.35s var(--ease), border-color 0.35s, backdrop-filter 0.35s; } .site-header.is-scrolled { background: rgba(8, 11, 18, 0.72); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); } .nav-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 20px; } .nav-logo { flex-shrink: 0; display: flex; align-items: center; } .nav-logo img { width: 150px; height: auto; } .nav-links { margin-left: auto; } .nav-links ul { display: flex; gap: 4px; } .nav-links a { position: relative; display: block; padding: 10px 15px; color: var(--muted); font-size: 0.95rem; font-weight: 550; border-radius: 999px; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-links a:hover { color: var(--text-strong); } .nav-links a.is-active { color: var(--text-strong); } .nav-links a.is-active::after { transform: scaleX(1); } .nav-cta { position: relative; overflow: hidden; padding: 11px 22px; border-radius: 999px; background: linear-gradient(100deg, var(--gold), var(--gold-2)); color: #10131b; border: 1px solid transparent; font-weight: 700; font-size: 0.92rem; box-shadow: 0 0 34px -12px rgba(250, 204, 21, 0.8); transition: transform 0.25s var(--ease), box-shadow 0.25s; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 48px -10px rgba(250, 204, 21, 0.95); } .nav-cta.is-active { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.35), 0 0 40px -12px rgba(250, 204, 21, 0.9); } .nav-cta__pulse { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%); transform: translateX(-120%); animation: ctasheen 6s var(--ease) infinite; } @keyframes ctasheen { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } } .nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { width: 20px; height: 2px; background: var(--text-strong); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu); background: rgba(8, 11, 18, 0.97); backdrop-filter: blur(20px); padding: 32px var(--gutter) 48px; display: flex; flex-direction: column; gap: 8px; transform: translateY(-8px); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); overflow-y: auto; } /* Belt and braces: even mid-transition the closed menu must not swallow clicks. */ .mobile-menu:not(.is-open) { pointer-events: none; } .mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .mobile-menu ul a { display: block; padding: 18px 6px; font-size: 1.4rem; font-weight: 650; color: var(--text-strong); border-bottom: 1px solid var(--line); } .mobile-menu ul a.is-active { color: var(--gold); } .mobile-cta { margin-top: 22px; text-align: center; padding: 16px; border-radius: 14px; background: linear-gradient(100deg, var(--gold), var(--gold-2)); color: #10131b; font-weight: 700; font-size: 1.05rem; } .mobile-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); } .mobile-contact a { color: var(--muted); } /* ========================================================================== 04 SHARED SCENE FURNITURE ========================================================================== */ .scene { position: relative; } .content .scene { z-index: 1; } .scene-build::before, .scene-capabilities::before, .scene-cap::before, .scene-process::before, .scene-contact::before, .scene-journey::before, .scene-builder::before, .scene-world::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .scene-build::before { background: radial-gradient(48vw 42vw at 50% 42%, rgba(250, 204, 21, 0.05), transparent 62%); } .scene-capabilities::before, .scene-cap::before { background: radial-gradient(60vw 50vw at 12% 30%, rgba(56, 189, 248, 0.055), transparent 60%); } .scene-process::before, .scene-journey::before { background: radial-gradient(55vw 55vw at 82% 42%, rgba(167, 139, 250, 0.06), transparent 60%); } .scene-contact::before { background: radial-gradient(52vw 46vw at 72% 46%, rgba(250, 204, 21, 0.07), transparent 62%); } .scene-builder::before { background: radial-gradient(60vw 50vw at 78% 20%, rgba(56, 189, 248, 0.07), transparent 62%); } .scene-build, .scene-capabilities, .scene-process, .scene-combos, .scene-journey { padding-block: clamp(80px, 12vw, 160px); } .scene-projects { padding-block: clamp(80px, 12vw, 150px); } .scene-pagehead { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 88px)); padding-bottom: clamp(30px, 5vw, 60px); } .scene-builder { padding-top: calc(var(--nav-h) + clamp(30px, 5vw, 60px)); padding-bottom: clamp(70px, 10vw, 130px); } .scene-eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.28em; font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 20px; } .scene-title { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 22ch; } .scene-sub { margin-top: 18px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 58ch; } .scene-head { margin-bottom: clamp(38px, 6vw, 68px); } .scene-foot { margin-top: clamp(36px, 5vw, 56px); } .pagehead { max-width: 900px; } .pagehead__title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; } .pagehead__lead { margin-top: 24px; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 62ch; } .crumbs { margin-bottom: 26px; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--muted-2); } .crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted-2); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--gold); } .crumbs [aria-current] { color: var(--text); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 650; font-size: 0.98rem; border: 1px solid transparent; min-height: 52px; text-align: center; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--primary { background: linear-gradient(100deg, var(--gold), var(--gold-2)); color: #10131b; box-shadow: var(--glow-gold); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 80px -8px rgba(250, 204, 21, 0.5); } .btn--ghost { background: var(--surface); color: var(--text-strong); border-color: var(--line-2); backdrop-filter: blur(8px); } .btn--ghost:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--gold); } .btn--block { width: 100%; } .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; } .glass { background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-reveal] { opacity: 1; } .preload [data-reveal] { transition: none; } @keyframes syspulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* ========================================================================== 05 HOME — HERO ========================================================================== */ .scene-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; } .hero-content { position: relative; z-index: 2; transform-style: preserve-3d; } .hero-kicker { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); backdrop-filter: blur(10px); text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; font-weight: 700; color: var(--text); } .hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); } .hero-title { margin-top: 28px; font-size: clamp(2.7rem, 8.5vw, 6.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; } .hero-title .line, .hero-title .line span { display: block; } .hero-title .line:nth-child(2) span { color: transparent; background: linear-gradient(100deg, #fff 10%, var(--gold) 60%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; } .hero-lead { margin-top: 30px; max-width: 54ch; font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--muted); } .hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 16px; } .hero-systems { margin-top: 52px; display: flex; flex-direction: column; gap: 14px; } .hero-systems__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-2); } .hero-systems ul { display: flex; flex-wrap: wrap; gap: 10px; } .hero-systems a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 0.92rem; color: var(--text); transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s; } .hero-systems a:hover { border-color: var(--gold); background: var(--surface-2); transform: translateY(-2px); } .sys-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: syspulse 2.4s ease-in-out infinite; } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; } .scroll-cue__line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; } .scroll-cue__line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--gold); animation: cue 1.8s var(--ease) infinite; } @keyframes cue { 0% { top: -40%; } 100% { top: 120%; } } /* ========================================================================== 06 HOME — THE MODULE SYSTEM ========================================================================== */ .msys { position: relative; } .msys__list { display: grid; gap: 18px; } .msys__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 168px; height: 168px; z-index: 2; display: none; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(250, 204, 21, 0.26), rgba(8, 12, 22, 0.95) 68%); border: 1px solid rgba(250, 204, 21, 0.45); box-shadow: 0 0 70px -14px rgba(250, 204, 21, 0.65), inset 0 0 40px rgba(250, 204, 21, 0.1); } .msys__core-nucleus { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff5cc, var(--gold) 60%, transparent 72%); box-shadow: 0 0 40px rgba(250, 204, 21, 0.8); animation: nucleus 3.4s ease-in-out infinite; } @keyframes nucleus { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.14); opacity: 1; } } .msys__core-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(250, 204, 21, 0.28); animation: corering 4.4s ease-out infinite; } .msys__core-ring--2 { animation-delay: 2.2s; } @keyframes corering { 0% { transform: scale(0.78); opacity: 0.85; } 100% { transform: scale(1.3); opacity: 0; } } .msys__core-label { position: relative; z-index: 2; text-align: center; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.06em; color: var(--gold); } .msys__core-label i { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; color: var(--muted-2); } .msys.is-focused .msys__core { box-shadow: 0 0 100px -10px var(--gold); } .msys__item { position: relative; } .msys__wire { display: none; } .msys__signal { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px var(--acc); opacity: 0; } /* module node button */ .mnode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; text-align: left; padding: 22px 24px 20px; border-radius: 14px; color: var(--text); background: linear-gradient(180deg, rgba(16, 23, 42, 0.72), rgba(10, 14, 26, 0.5)); border: 1px solid rgba(56, 189, 248, 0.13); backdrop-filter: blur(10px); transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.35s, background 0.35s; } .mnode::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0.5; border-radius: inherit; background: linear-gradient(var(--acc) 0 0) top left / 16px 1.5px, linear-gradient(var(--acc) 0 0) top left / 1.5px 16px, linear-gradient(var(--acc) 0 0) top right / 16px 1.5px, linear-gradient(var(--acc) 0 0) top right / 1.5px 16px, linear-gradient(var(--acc) 0 0) bottom left / 16px 1.5px, linear-gradient(var(--acc) 0 0) bottom left / 1.5px 16px, linear-gradient(var(--acc) 0 0) bottom right / 16px 1.5px, linear-gradient(var(--acc) 0 0) bottom right / 1.5px 16px; background-repeat: no-repeat; transition: opacity 0.35s; } .mnode:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: var(--shadow-2), 0 0 50px -24px var(--acc); } .mnode:hover::after { opacity: 1; } .msys__item.is-active .mnode { border-color: var(--acc); box-shadow: 0 0 60px -18px var(--acc); background: linear-gradient(180deg, rgba(20, 28, 50, 0.9), rgba(10, 14, 26, 0.6)); } .msys.is-focused .msys__item:not(.is-active) .mnode { opacity: 0.42; } .mnode__head { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 16px; } .mnode__id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--muted-2); } .mnode__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); } .mnode__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: syspulse 3s ease-in-out infinite; } .mnode__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 13px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); margin-bottom: 16px; } .mnode__icon svg { width: 24px; height: 24px; } .mnode__title { font-size: 1.14rem; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; } .mnode__text { margin-top: 7px; color: var(--muted); font-size: 0.94rem; line-height: 1.5; } .mnode__open { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 650; color: var(--acc); } .mnode__open svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); } .mnode:hover .mnode__open svg { transform: translateX(4px); } .msys__foot { margin-top: clamp(34px, 5vw, 54px); color: var(--muted); } .msys__foot a { color: var(--gold); font-weight: 600; } /* ========================================================================== 07 MODULE CHAMBERS ========================================================================== */ .mpanel { display: none; } .mpanel.is-open { display: block; position: fixed; inset: 0; z-index: var(--z-panel); padding: calc(var(--nav-h) + 12px) clamp(12px, 3vw, 40px) clamp(12px, 3vw, 40px); overflow-y: auto; overscroll-behavior: contain; } .mpanel__scrim { position: fixed; inset: 0; background: rgba(4, 6, 12, 0.78); backdrop-filter: blur(10px); } .mpanel__chamber { position: relative; max-width: 1180px; margin-inline: auto; background: linear-gradient(180deg, rgba(15, 21, 38, 0.95), rgba(8, 12, 22, 0.96)); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line-2)); border-radius: var(--radius-lg); box-shadow: var(--shadow-2), 0 0 120px -50px var(--acc); padding: clamp(22px, 3.4vw, 40px); animation: chamber 0.42s var(--ease-out) both; } @keyframes chamber { from { opacity: 0; transform: translateY(26px) scale(0.96) perspective(1200px) rotateX(6deg); } to { opacity: 1; transform: none; } } .mpanel__rails { position: absolute; inset: 10px; pointer-events: none; } .mpanel__rails i { position: absolute; background: var(--acc); opacity: 0.55; } .mpanel__rails i:nth-child(1) { top: 0; left: 0; width: 28px; height: 1.5px; } .mpanel__rails i:nth-child(2) { top: 0; left: 0; width: 1.5px; height: 28px; } .mpanel__rails i:nth-child(3) { bottom: 0; right: 0; width: 28px; height: 1.5px; } .mpanel__rails i:nth-child(4) { bottom: 0; right: 0; width: 1.5px; height: 28px; } .mpanel__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); } .mpanel__id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); } .mpanel__name { color: var(--acc); font-weight: 700; } .mpanel__state { display: inline-flex; align-items: center; gap: 7px; color: var(--green); } .mpanel__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: syspulse 2.4s ease-in-out infinite; } .mpanel__close { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); transition: border-color 0.25s, background 0.25s; } .mpanel__close:hover { border-color: var(--gold); background: var(--surface-2); } .mpanel__close svg { width: 16px; height: 16px; } .mpanel__body { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.5vw, 46px); align-items: start; } .mpanel__headline { font-size: clamp(1.5rem, 2.8vw, 2.2rem); } .mpanel__lead { margin-top: 14px; color: var(--muted); font-size: 1.05rem; } .mpanel__value { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } .mpanel__value h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--acc); } .mpanel__value > p { margin-top: 10px; color: var(--text); font-size: 0.98rem; } .mpanel__examples { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; } .mpanel__examples li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 0.94rem; } .mpanel__tick { flex-shrink: 0; margin-top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); } .mpanel__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .mpanel__more { margin-top: 16px; font-size: 0.9rem; } .mpanel__more a { color: var(--muted); border-bottom: 1px solid var(--line-2); } .mpanel__more a:hover { color: var(--gold); border-color: var(--gold); } body.has-mpanel { overflow: hidden; } /* ========================================================================== 08 MODULE DEMONSTRATIONS ========================================================================== */ .mdemo { --acc-soft: color-mix(in srgb, var(--acc) 22%, transparent); } .mdemo__frame { border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(9, 13, 24, 0.92), rgba(6, 9, 17, 0.94)); border: 1px solid var(--line); box-shadow: inset 0 0 60px -30px var(--acc); } .mdemo__chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } .mdemo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); } .mdemo__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .mdemo__phase { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--muted-2); } .mdemo__stage { position: relative; padding: 14px; background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 70%); } .mdemo__svg { width: 100%; height: auto; display: block; } /* generic stepped reveal: elements appear at data-s, vanish at data-out */ .mdemo [data-s] { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .mdemo[data-step="1"] [data-s="1"], .mdemo[data-step="2"] :is([data-s="1"], [data-s="2"]), .mdemo[data-step="3"] :is([data-s="1"], [data-s="2"], [data-s="3"]), .mdemo[data-step="4"] :is([data-s="1"], [data-s="2"], [data-s="3"], [data-s="4"]), .mdemo[data-step="5"] :is([data-s="1"], [data-s="2"], [data-s="3"], [data-s="4"], [data-s="5"]) { opacity: 1; transform: none; } .mdemo[data-step="2"] [data-out="2"], .mdemo[data-step="3"] :is([data-out="2"], [data-out="3"]), .mdemo[data-step="4"] :is([data-out="2"], [data-out="3"], [data-out="4"]), .mdemo[data-step="5"] :is([data-out="2"], [data-out="3"], [data-out="4"], [data-out="5"]) { opacity: 0 !important; transform: translateY(-4px); } /* demo primitives */ .d-box { fill: rgba(255, 255, 255, 0.02); stroke: var(--line-2); stroke-width: 1; } .d-box--dash { stroke-dasharray: 4 4; } .d-fill { fill: var(--acc); opacity: 0.85; } .d-fill.d-dim { fill: #7b88a5; opacity: 0.35; } .d-link { fill: none; stroke: var(--acc); stroke-width: 1.3; opacity: 0.75; } .d-flow { stroke-dasharray: 5 5; animation: dflow 1.1s linear infinite; } @keyframes dflow { to { stroke-dashoffset: -20; } } .d-node { fill: var(--acc); opacity: 0.9; } .d-pulse { animation: dpulse 1.6s ease-in-out infinite; } .d-pulse:nth-of-type(2n) { animation-delay: 0.4s; } .d-pulse:nth-of-type(3n) { animation-delay: 0.8s; } @keyframes dpulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .d-txt { fill: #9fadc7; font-size: 11px; font-family: var(--mono); letter-spacing: 0.06em; } .d-txt--sm { font-size: 9.5px; } .d-txt--badge { fill: #eaeef7; font-size: 11px; font-weight: 700; font-family: var(--font); letter-spacing: 0; } .d-txt--right { text-anchor: end; } .d-warn { fill: #d59a5a; } .d-chip { fill: rgba(255, 255, 255, 0.05); stroke: var(--line-2); stroke-width: 1; } .d-badge { fill: color-mix(in srgb, var(--acc) 12%, rgba(255, 255, 255, 0.03)); stroke: color-mix(in srgb, var(--acc) 45%, transparent); stroke-width: 1; } .d-live { fill: var(--green); } .d-check { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .d-cursor { fill: #d59a5a; opacity: 0.9; } .d-dust { fill: #7b88a5; opacity: 0.5; } .d-highlight { fill: color-mix(in srgb, var(--acc) 18%, transparent); stroke: var(--acc); stroke-width: 1; } .d-bar { fill: var(--acc); opacity: 0.8; } .mdemo__steps { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 5px; } .mdemo__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--muted-2); transition: color 0.3s var(--ease), opacity 0.3s; } .mdemo__n { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: var(--muted-2); transition: background 0.3s, color 0.3s, box-shadow 0.3s; } .mdemo__steps li.is-done { color: var(--muted); } .mdemo__steps li.is-done .mdemo__n { background: color-mix(in srgb, var(--acc) 25%, transparent); color: var(--text); } .mdemo__steps li.is-current { color: var(--text-strong); } .mdemo__steps li.is-current .mdemo__n { background: var(--acc); color: #0b0f18; box-shadow: 0 0 14px var(--acc); } .mdemo__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 14px 14px; } .mdemo__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font-size: 0.82rem; transition: border-color 0.25s, background 0.25s; } .mdemo__btn:hover { border-color: var(--acc); background: var(--surface-2); } .mdemo__btn svg { width: 14px; height: 14px; } .mdemo__note { font-size: 0.78rem; color: var(--muted-2); flex: 1 1 200px; } /* ========================================================================== 09 HOME — PROJECT PORTALS & PHASE TRACK ========================================================================== */ .portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .portal { position: relative; } .portal__link { display: block; height: 100%; padding: 16px 16px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(16, 23, 42, 0.6), rgba(10, 14, 26, 0.42)); border: 1px solid var(--line); transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.35s; } .portal__link:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-2), 0 0 60px -28px var(--accent); } .portal__frame { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #0c1220; } .portal__chrome { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: linear-gradient(180deg, #141c2e, #0f1626); border-bottom: 1px solid var(--line); } .portal__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #2b3650; } .portal__chrome i:nth-child(1) { background: #ff5f57; } .portal__chrome i:nth-child(2) { background: #febc2e; } .portal__chrome i:nth-child(3) { background: #28c840; } .portal__url { margin-left: auto; margin-right: auto; font-size: 0.7rem; color: var(--muted-2); } .portal__frame img { width: 100%; aspect-ratio: 1200 / 750; object-fit: cover; } .portal__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px); } .portal__meta { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .portal__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent); } .portal__cat { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-2); } .portal__name { margin-top: 8px; font-size: 1.5rem; } .portal__desc { margin-top: 8px; color: var(--muted); font-size: 0.95rem; } .portal__cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 650; font-size: 0.9rem; } .portal__cta svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); } .portal__link:hover .portal__cta svg { transform: translateX(4px); } .phase-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; position: relative; } .phase-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--line-2); } .phase { position: relative; padding-top: 30px; } .phase__node { position: absolute; top: 3px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--muted-2); transition: border-color 0.4s, box-shadow 0.4s, background 0.4s; } .phase.is-lit .phase__node { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 14px var(--gold); } .phase__n { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--muted-2); } .phase__title { display: block; margin-top: 4px; font-weight: 700; color: var(--text-strong); font-size: 0.98rem; } .phase__signal { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); } .phase.is-lit .phase__n { color: var(--gold); } .cta-console { overflow: hidden; } .cta-console__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: linear-gradient(180deg, #141c2e, #0f1626); border-bottom: 1px solid var(--line); } .cta-console__body { padding: clamp(28px, 4.4vw, 56px); } .cta-console__heading { font-size: clamp(1.7rem, 3.6vw, 2.7rem); max-width: 20ch; } .cta-console__lead { margin-top: 18px; color: var(--muted); font-size: 1.08rem; max-width: 56ch; } .terminal__dots { display: flex; gap: 7px; } .terminal__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2b3650; } .terminal__dots i:nth-child(1) { background: #ff5f57; } .terminal__dots i:nth-child(2) { background: #febc2e; } .terminal__dots i:nth-child(3) { background: #28c840; } .terminal__title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--muted); } .terminal__status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--green); } .terminal__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: syspulse 2.6s ease-in-out infinite; } /* ========================================================================== 10 PROJECTS PAGE — WORLDS ========================================================================== */ .portal-nav { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 12px; } .portal-nav a { display: flex; flex-direction: column; gap: 3px; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease); } .portal-nav a:hover, .portal-nav a.is-active { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); } .portal-nav__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent); } .portal-nav__name { font-weight: 650; color: var(--text-strong); } .scene-world { padding-block: clamp(70px, 10vw, 130px); scroll-margin-top: calc(var(--nav-h) + 20px); } .world__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background: radial-gradient(46vw 46vw at 76% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); transition: opacity 0.6s var(--ease); } .scene-world.is-active .world__aura { opacity: 1; } .world__head { margin-bottom: clamp(26px, 4vw, 44px); } .world__index { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .world__num { font-size: 2rem; font-weight: 800; color: var(--accent); letter-spacing: -0.03em; } .world__total { font-family: var(--mono); font-size: 0.85rem; color: var(--muted-2); } .world__cat { margin-left: 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-2); } .world__name { margin-top: 8px; font-size: clamp(2rem, 5vw, 3.4rem); } .world__tagline { margin-top: 10px; color: var(--muted); font-size: 1.12rem; } .world__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 62px); align-items: start; } .world__visual { position: relative; transform-style: preserve-3d; } .world__mockup-note { margin-top: 30px; font-size: 0.78rem; color: var(--muted-2); } .holo-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(8, 12, 22, 0.85); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); backdrop-filter: blur(6px); } .holo-chip--cat { top: -30px; left: 4px; } .holo-chip--live { top: -30px; right: 4px; color: var(--green); } .holo-chip--live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: syspulse 2s ease-in-out infinite; } .browser { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0c1220; box-shadow: var(--shadow-2); transform-style: preserve-3d; transition: box-shadow 0.5s var(--ease); } .scene-world.is-active .browser { box-shadow: var(--shadow-2), 0 0 70px -22px var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); } .browser__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, #141c2e, #0f1626); border-bottom: 1px solid var(--line); } .browser__dots { display: flex; gap: 7px; } .browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2b3650; } .browser__dots i:nth-child(1) { background: #ff5f57; } .browser__dots i:nth-child(2) { background: #febc2e; } .browser__dots i:nth-child(3) { background: #28c840; } .browser__url { flex: 1; text-align: center; font-size: 0.82rem; color: var(--muted); background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 6px 12px; } .browser__screen { position: relative; aspect-ratio: 1200 / 750; background: #0c1220; } .browser__screen img { width: 100%; height: 100%; object-fit: cover; } .browser__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px); } .browser__reflection { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%); mix-blend-mode: screen; } .pshow-glow { position: absolute; inset: 6% 4%; z-index: -1; background: radial-gradient(circle, var(--accent), transparent 66%); filter: blur(75px); opacity: 0.3; } .pshow-shadow { position: absolute; left: 8%; right: 8%; bottom: -5%; height: 44px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65), transparent 70%); filter: blur(22px); z-index: -1; } .world__layers { display: flex; flex-direction: column; gap: 18px; } .layer { padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); } .layer__h { display: flex; flex-direction: column; gap: 6px; font-size: 1.05rem; } .layer__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .layer p { margin-top: 10px; color: var(--muted); font-size: 0.96rem; } .world__foot { margin-top: clamp(32px, 4.5vw, 54px); display: flex; flex-direction: column; gap: 26px; } .world__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 24px; border-top: 1px solid var(--line); } .world__facts dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-2); } .world__facts dd { margin-top: 4px; font-weight: 650; color: var(--text-strong); } .world__modules { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .world__modules-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); } .world__modules ul { display: flex; flex-wrap: wrap; gap: 8px; } .world__modules a { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 0.82rem; color: var(--text); transition: border-color 0.25s, color 0.25s; } .world__modules a:hover { border-color: var(--accent); color: var(--text-strong); } .world__actions { display: flex; flex-wrap: wrap; gap: 14px; } .world__disclaimer { font-size: 0.82rem; color: var(--muted-2); max-width: 70ch; } .world__next { margin-top: clamp(36px, 5vw, 60px); display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--muted); transition: border-color 0.25s, color 0.25s; } .world__next:hover { border-color: var(--gold); color: var(--text-strong); } .world__next-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .world__next-name { font-weight: 650; color: var(--text-strong); } .world__next-arrow { animation: nextbob 2s ease-in-out infinite; } @keyframes nextbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ========================================================================== 11 CAPABILITIES PAGE ========================================================================== */ .sysmap { position: relative; display: none; height: clamp(420px, 52vh, 560px); margin-top: clamp(30px, 5vw, 56px); transform-style: preserve-3d; } .sysmap__circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sysmap__circuit line { stroke: rgba(122, 210, 255, 0.24); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; } .sysmap__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 32%, rgba(250, 204, 21, 0.24), rgba(10, 14, 26, 0.92) 70%); border: 1px solid rgba(250, 204, 21, 0.5); box-shadow: 0 0 50px -8px rgba(250, 204, 21, 0.5), inset 0 0 26px rgba(250, 204, 21, 0.12); } .sysmap__hub span { font-weight: 800; font-size: 1.4rem; color: var(--gold); } .sysmap__hub i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; color: var(--muted-2); } .sysmap__hub::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(250, 204, 21, 0.25); animation: corering 3.8s ease-out infinite; } .sysmap__node { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); width: 210px; padding: 14px 18px; border-radius: 12px; background: linear-gradient(180deg, rgba(14, 20, 38, 0.9), rgba(9, 13, 24, 0.75)); border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent); backdrop-filter: blur(8px); transition: border-color 0.3s, box-shadow 0.3s; } .sysmap__node:hover { border-color: var(--acc); box-shadow: 0 0 34px -12px var(--acc); } .sysmap__node-id { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--acc); } .sysmap__node-name { display: block; margin-top: 4px; font-weight: 700; color: var(--text-strong); } .sysnav { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 10px; } .sysnav a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 0.9rem; transition: border-color 0.25s, background 0.25s; } .sysnav a:hover { border-color: var(--acc); background: var(--surface-2); } .sysnav__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--acc); } .scene-cap { padding-block: clamp(56px, 8vw, 100px); scroll-margin-top: calc(var(--nav-h) + 20px); } .cap-area { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4.5vw, 60px); align-items: center; } .scene-cap:nth-of-type(even) .cap-area { direction: rtl; } .scene-cap:nth-of-type(even) .cap-area > * { direction: ltr; } .cap-area__id { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .cap-area__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--muted-2); } .cap-area__pill { padding: 5px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--acc); font-size: 0.8rem; font-weight: 650; } .cap-area__headline { font-size: clamp(1.5rem, 3vw, 2.3rem); } .cap-area__lead { margin-top: 14px; color: var(--muted); font-size: 1.05rem; } .cap-area__sub { margin-top: 26px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--acc); } .cap-area__value { margin-top: 10px; } .cap-area__list { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; } .cap-area__list li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 0.94rem; } .cap-area__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .scene-cap.is-active .cap-area__pill { box-shadow: 0 0 26px -10px var(--acc); } .combo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .combo { padding: 26px 28px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); transition: border-color 0.3s, transform 0.35s var(--ease); } .combo:hover { border-color: var(--gold-soft); transform: translateY(-4px); } .combo__parts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .combo__chip { padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); color: var(--acc); background: color-mix(in srgb, var(--acc) 9%, transparent); } .combo__plus { color: var(--muted-2); } .combo__title { font-size: 1.2rem; } .combo__text { margin-top: 10px; color: var(--muted); font-size: 0.95rem; } .combo__link { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 650; font-size: 0.9rem; } .combo__link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); } .combo__link:hover svg { transform: translateX(4px); } .cap-cta { margin-top: clamp(38px, 5vw, 60px); display: flex; flex-wrap: wrap; gap: 14px; } /* ========================================================================== 12 PROCESS PAGE — THE JOURNEY ========================================================================== */ .signal-start { margin-top: clamp(30px, 5vw, 50px); display: flex; align-items: center; gap: 18px; } .signal-start__blob { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.6), rgba(167, 139, 250, 0.35) 55%, transparent 72%); filter: blur(1px); animation: blob 5s ease-in-out infinite; } @keyframes blob { 0%, 100% { border-radius: 52% 48% 44% 56% / 48% 52% 48% 52%; transform: scale(1); } 50% { border-radius: 42% 58% 60% 40% / 58% 42% 58% 42%; transform: scale(1.1); } } .signal-start__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); } .journey { position: relative; padding-left: 46px; } .journey__line { position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; background: var(--line); overflow: hidden; } .journey__fill { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--violet), var(--cyan) 45%, var(--gold)); box-shadow: 0 0 16px rgba(250, 204, 21, 0.5); } .journey__list { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); } .jstage { position: relative; } .jstage__node { position: absolute; left: -40px; top: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--muted-2); display: flex; align-items: center; justify-content: center; transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); } .jstage__node i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); transition: background 0.4s; } .jstage.is-active .jstage__node { border-color: var(--gold); box-shadow: 0 0 18px var(--gold); transform: scale(1.15); } .jstage.is-active .jstage__node i { background: var(--gold); } .jstage.is-final .jstage__node { border-color: var(--gold); background: var(--gold); } .jstage.is-final .jstage__node i { background: #10131b; } .jstage__card { padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); } .jstage.is-active .jstage__card { border-color: var(--gold-soft); box-shadow: var(--shadow-2); } .jstage.is-final .jstage__card { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow-2), 0 0 60px -24px var(--gold); } .jstage__n { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(120deg, var(--gold), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .jstage__n i { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-2); -webkit-text-fill-color: var(--muted-2); margin-bottom: 2px; } .jstage__title { margin-top: 6px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .jstage__intro { margin-top: 8px; color: var(--muted); } .jstage__facts { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; } .jstage__facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--acc, var(--gold)); } .jstage__facts dd { margin-top: 6px; color: var(--muted); font-size: 0.93rem; } .jstage__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; } .jstage__signal { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted-2); } .jstage__signal strong { color: var(--text); } .jstage__signal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); } .jstage:nth-child(n + 4) .jstage__signal-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .jstage:nth-child(n + 6) .jstage__signal-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); } .jstage__next { margin-left: auto; font-size: 0.85rem; color: var(--muted-2); } .journey__note { margin-top: clamp(46px, 6vw, 74px); padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .journey__note h2 { font-size: 1.25rem; } .journey__note p { margin-top: 12px; color: var(--muted); max-width: 78ch; } /* ========================================================================== 13 CONTACT & FORMS ========================================================================== */ .scene-contact { position: relative; padding-block: clamp(80px, 12vw, 160px); overflow: hidden; } .scene-contact--page { padding-top: calc(var(--nav-h) + clamp(36px, 6vw, 70px)); } .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; } .contact-heading { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 18ch; } .contact-lead { margin-top: 20px; color: var(--muted); font-size: 1.08rem; max-width: 48ch; } .contact-details { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; } .contact-details--inline { margin-top: 34px; max-width: 640px; } .contact-details dt { color: var(--muted-2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; } .contact-details dd { margin-top: 4px; font-size: 1.05rem; color: var(--text-strong); font-weight: 600; } .contact-details a { color: var(--text-strong); border-bottom: 1px solid var(--gold-soft); transition: border-color 0.2s; } .contact-details a:hover { border-color: var(--gold); } .contact-after { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); } .contact-after h2 { font-size: 1.05rem; } .contact-after ol { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; counter-reset: ca; } .contact-after li { position: relative; padding-left: 34px; color: var(--muted); font-size: 0.94rem; counter-increment: ca; } .contact-after li::before { content: counter(ca); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--gold); border: 1px solid var(--gold-soft); background: var(--surface); } .contact-alt { margin-top: 32px; padding: 22px 24px; border-radius: 14px; border: 1px dashed var(--line-2); } .contact-alt p { color: var(--muted); font-size: 0.94rem; margin-bottom: 16px; } .contact-card { padding: clamp(26px, 4vw, 42px); } .contact-card.terminal { padding: 0; overflow: hidden; } .terminal__bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: linear-gradient(180deg, #141c2e, #0f1626); border-bottom: 1px solid var(--line); } .terminal__body { padding: clamp(22px, 3.4vw, 36px); } .contact-form__heading { font-size: 1.2rem; margin-bottom: 20px; } .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-row { display: flex; flex-direction: column; gap: 8px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } label { font-size: 0.85rem; font-weight: 600; color: var(--text); } label .opt { color: var(--muted-2); font-weight: 400; } input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 15px 16px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text-strong); font: inherit; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); background: rgba(0, 0, 0, 0.4); } textarea { resize: vertical; min-height: 120px; } [aria-invalid="true"] { border-color: var(--danger) !important; } .field-error { color: #fca5a5; font-size: 0.85rem; } .form-fineprint { color: var(--muted-2); font-size: 0.82rem; text-align: center; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { display: none; padding: 14px 16px; border-radius: 12px; font-size: 0.95rem; } .form-status[data-state] { display: block; } .form-status[data-state="success"] { background: rgba(40, 200, 64, 0.12); border: 1px solid rgba(40, 200, 64, 0.4); color: #a7f3c0; } .form-status[data-state="error"] { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.4); color: #fca5a5; } .form-status a { color: inherit; text-decoration: underline; } /* ========================================================================== 14 PROJECT BUILDER ========================================================================== */ .pagehead--builder { max-width: 780px; } .builder__honesty { margin-top: 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.9rem; max-width: 62ch; } .builder { margin-top: clamp(34px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(26px, 4vw, 52px); align-items: start; } .builder.is-hidden-after-submit { display: none; } .builder__progress { margin-bottom: 26px; } .builder__progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .builder__phase { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .builder__pct { font-family: var(--mono); font-size: 11px; color: var(--muted-2); } .builder__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .builder__bar span { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--cyan)); box-shadow: 0 0 12px rgba(250, 204, 21, 0.55); transition: width 0.45s var(--ease); } .builder__dots { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .builder__dots li { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--mono); color: var(--muted-2); transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s; } .builder__dots li.is-done { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); } .builder__dots li.is-current { border-color: var(--gold); background: var(--gold); color: #10131b; box-shadow: 0 0 16px rgba(250, 204, 21, 0.6); } .builder__status { min-height: 0; color: var(--muted); font-size: 0.88rem; } .builder__form { margin-top: 18px; } .bstep { border: 0; padding: 0; margin: 0 0 24px; } .builder.is-enhanced .bstep { animation: stepin 0.35s var(--ease-out) both; } @keyframes stepin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .bstep__legend { display: block; padding: 0; margin-bottom: 6px; } .bstep__n { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .bstep__n i { font-style: normal; color: var(--muted-2); margin-left: 4px; } .bstep__q { display: block; margin-top: 8px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.15; } .bstep__help { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; } .bstep__limit { margin-top: 10px; font-size: 0.82rem; color: var(--muted-2); transition: color 0.3s; } .bstep__limit.is-hit { color: var(--gold); } .bstep__note { margin-top: 18px; } .bopts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .bopts--dense { grid-template-columns: repeat(3, 1fr); } .bopt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; cursor: pointer; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); font-size: 0.95rem; font-weight: 500; color: var(--text); transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease); } .bopt:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); background: var(--surface-2); transform: translateY(-2px); } .bopt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bopt__box { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); position: relative; transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; } .bopt input[type="radio"] ~ .bopt__box { border-radius: 50%; } .bopt__box::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #10131b; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.2s var(--ease); } .bopt input:checked ~ .bopt__box { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(250, 204, 21, 0.55); } .bopt input:checked ~ .bopt__box::after { opacity: 1; transform: scale(1); } .bopt input:focus-visible ~ .bopt__box { outline: 2px solid var(--gold); outline-offset: 3px; } .bopt:has(input:checked) { border-color: var(--gold); background: linear-gradient(180deg, rgba(250, 204, 21, 0.1), rgba(255, 255, 255, 0.02)); } .bopt__label { flex: 1; } .bopt__spark { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(60% 100% at 50% 50%, rgba(250, 204, 21, 0.28), transparent 70%); } .bopt.is-pinged .bopt__spark { animation: ping 0.6s var(--ease) forwards; } @keyframes ping { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.08); } } .bcontact { display: flex; flex-direction: column; gap: 18px; } .form-row--consent { margin-top: 4px; } .bconsent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 400; color: var(--muted); font-size: 0.92rem; } .bconsent input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bconsent .bopt__box { margin-top: 2px; } .bconsent input:checked ~ .bopt__box { background: var(--gold); border-color: var(--gold); } .bconsent input:checked ~ .bopt__box::after { opacity: 1; transform: scale(1); } .bconsent input:focus-visible ~ .bopt__box { outline: 2px solid var(--gold); outline-offset: 3px; } .breview { padding: clamp(22px, 3vw, 30px); border-radius: var(--radius); border: 1px solid var(--gold-soft); background: var(--surface); margin-bottom: 24px; } .breview__h { font-size: 1.4rem; } .breview__lead { margin-top: 8px; color: var(--muted); font-size: 0.95rem; } .breview__block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .breview__block h3 { font-size: 0.98rem; color: var(--text-strong); } .breview__block ul { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .breview__block li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 0.85rem; color: var(--text); } .breview__none { margin-top: 8px; color: var(--muted-2); font-size: 0.88rem; } .breview__note-text { margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--gold); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 0.9rem; white-space: pre-wrap; } .breview__edit { margin-top: 12px; } .breview__note { margin-top: 22px; color: var(--muted-2); font-size: 0.85rem; } .builder__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; } .builder__reset { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted-2); font-size: 0.88rem; } .builder__reset a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .builder__reset a:hover { color: var(--gold); } .bsummary { position: sticky; top: calc(var(--nav-h) + 20px); } .bsummary__inner { overflow: hidden; } .bsummary__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, #141c2e, #0f1626); border-bottom: 1px solid var(--line); } .bsummary__body { padding: clamp(20px, 2.6vw, 28px); } .bsummary__h { font-size: 1.15rem; } .bsummary__empty { margin-top: 10px; color: var(--muted-2); font-size: 0.9rem; } .bsummary__list { margin-top: 16px; } .bsummary__list dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 16px; } .bsummary__list dt:first-child { margin-top: 0; } .bsummary__list dd { margin-top: 8px; } .bsummary__list ul { display: flex; flex-wrap: wrap; gap: 6px; } .bsummary__list li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 0.82rem; color: var(--text); } .bsummary__note { margin-top: 8px; color: var(--muted); font-size: 0.85rem; white-space: pre-wrap; } .bsummary__viz { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); position: relative; } .bsummary__core { position: absolute; left: 9px; top: 26px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--gold), transparent); opacity: 0.4; } .bsummary__nodes { display: flex; flex-direction: column; gap: 9px; } .bsummary__nodes li { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--muted-2); transition: color 0.35s; } .bsummary__nodes i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line-2); position: relative; z-index: 1; transition: background 0.35s, box-shadow 0.35s, border-color 0.35s; } .bsummary__nodes li.is-on { color: var(--text); } .bsummary__nodes li.is-on i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold); } .builder-done { margin-top: clamp(30px, 4vw, 48px); padding: clamp(28px, 4vw, 48px); text-align: center; } .builder-done__mark { display: inline-flex; width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.5); color: var(--green); margin-bottom: 20px; } .builder-done__mark svg { width: 28px; height: 28px; } .builder-done h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .builder-done p { margin-top: 12px; color: var(--muted); } .builder-done .hero-actions { justify-content: center; } .builder-done a { color: inherit; } .builder-done p a { color: var(--gold); text-decoration: underline; } /* ========================================================================== 15 FOOTER & ERROR PAGES ========================================================================== */ .site-footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(8, 11, 18, 0.6)); padding-top: clamp(60px, 8vw, 90px); } .footer-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1fr; gap: 36px; } .footer-brand img { width: 160px; margin-bottom: 18px; } .footer-brand p { color: var(--muted); max-width: 34ch; font-size: 0.94rem; } .footer-cta { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-weight: 650; font-size: 0.9rem; transition: background 0.25s, color 0.25s; } .footer-cta:hover { background: var(--gold); color: #10131b; } .footer-cta svg { width: 16px; height: 16px; } .footer-col h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-2); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 0.92rem; } .footer-col a { color: var(--muted); transition: color 0.2s; } .footer-col a:hover { color: var(--gold); } .footer-col .ext { font-size: 0.75em; color: var(--muted-2); } .footer-bottom { max-width: var(--container); margin: 50px auto 0; padding: 26px var(--gutter); border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--muted-2); font-size: 0.88rem; } .scene-error { min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); } .error-box { text-align: center; max-width: 560px; margin-inline: auto; } .error-code { font-size: clamp(4rem, 16vw, 9rem); font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--gold), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-box h1 { margin-top: 10px; font-size: clamp(1.6rem, 4vw, 2.4rem); } .error-box p { margin-top: 16px; color: var(--muted); } .error-box p a { color: var(--gold); } .error-box .hero-actions { justify-content: center; } /* ========================================================================== 16 RESPONSIVE ========================================================================== */ @media (min-width: 1001px) { /* The module system becomes a spatial layout around the core. */ .msys__list { grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); column-gap: 300px; row-gap: 20px; } .msys__core { display: flex; } .msys__wire { display: block; position: absolute; top: 50%; height: 1px; width: 150px; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, transparent), color-mix(in srgb, var(--acc) 12%, transparent)); opacity: 0.5; z-index: -1; } .msys__item--left .msys__wire { left: 100%; transform-origin: left; } .msys__item--right .msys__wire { right: 100%; transform-origin: right; background: linear-gradient(270deg, color-mix(in srgb, var(--acc) 55%, transparent), color-mix(in srgb, var(--acc) 12%, transparent)); } .msys__item.is-active .msys__wire { opacity: 1; } .msys__item--left .msys__signal { right: 0; } .msys__item--right .msys__signal { left: 0; } .msys__item--left.is-signalling .msys__signal { animation: sigleft 0.7s var(--ease) forwards; } .msys__item--right.is-signalling .msys__signal { animation: sigright 0.7s var(--ease) forwards; } @keyframes sigleft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-150px); } } @keyframes sigright { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(150px); } } .sysmap { display: block; } .sysnav { display: none; } } @media (max-width: 1200px) and (min-width: 1001px) { .msys__list { column-gap: 230px; } .msys__wire { width: 120px; } @keyframes sigleft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-120px); } } @keyframes sigright { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(120px); } } } @media (max-width: 1000px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-toggle { display: flex; } .msys__list { grid-template-columns: repeat(2, 1fr); } .mpanel__body { grid-template-columns: 1fr; } .mpanel__demo { order: -1; } .builder { grid-template-columns: 1fr; } .bsummary { position: static; } .bsummary__viz { display: none; } .cap-area { grid-template-columns: 1fr; } .scene-cap:nth-of-type(even) .cap-area { direction: ltr; } .cap-area__demo { order: -1; } .world__grid { grid-template-columns: 1fr; } .combo-grid { grid-template-columns: 1fr; } .portal-grid { grid-template-columns: repeat(2, 1fr); } .phase-track { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; } .contact-layout { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 760px) { :root { --nav-h: 66px; } .msys__list { grid-template-columns: 1fr; } .portal-grid { grid-template-columns: 1fr; } .phase-track { grid-template-columns: repeat(2, 1fr); } .phase-track::before { display: none; } .phase { padding-top: 26px; } .bopts, .bopts--dense { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; } .contact-details { grid-template-columns: 1fr 1fr; } .jstage__facts { grid-template-columns: 1fr; } .journey { padding-left: 34px; } .jstage__node { left: -32px; } .journey__line { left: 7px; } .footer-inner { grid-template-columns: 1fr 1fr; } .hero-title { font-size: clamp(2.4rem, 12vw, 4rem); } .scroll-cue { display: none; } .mpanel.is-open { padding: calc(var(--nav-h) + 8px) 0 0; } .mpanel__chamber { border-radius: 20px 20px 0 0; min-height: calc(100svh - var(--nav-h) - 8px); } .mpanel__close-txt { display: none; } .world__next { width: 100%; } .builder__dots { display: none; } } @media (max-width: 420px) { .footer-inner { grid-template-columns: 1fr; } .contact-details { grid-template-columns: 1fr; } .btn { width: 100%; } .hero-actions .btn, .world__actions .btn, .cap-cta .btn { width: 100%; } } @media (hover: none) { .mnode:hover, .portal__link:hover, .combo:hover, .bopt:hover { transform: none; } } /* ========================================================================== 17 REDUCED MOTION & NO-JS FALLBACKS ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .pd-veil { display: none; } .scroll-cue__line::after, .nav-cta__pulse { display: none; } .journey__fill { transform: scaleY(1) !important; } .mdemo [data-s] { opacity: 1 !important; transform: none !important; } .mdemo [data-out] { opacity: 1 !important; } .mdemo__btn { display: none; } /* A stable, non-spatial expanded module panel. */ .mpanel.is-open { position: static; inset: auto; padding: 0; overflow: visible; margin-top: 28px; } .mpanel__scrim { display: none; } .mpanel__chamber { animation: none; max-width: none; } body.has-mpanel { overflow: auto; } .msys.is-focused .msys__item:not(.is-active) .mnode { opacity: 1; } } /* Without JavaScript every module panel is ordinary stacked content, the builder is one long form, and nothing depends on the animation layer. */ .no-js [data-reveal] { opacity: 1; } .no-js .mpanel { display: block; margin-top: 30px; } .no-js .mpanel__scrim, .no-js .mpanel__close { display: none; } .no-js .mpanel__chamber { animation: none; } .no-js .msys__core { display: none; } .no-js .mnode__open { display: none; } .no-js .builder__progress, .no-js .builder__nav [data-builder-prev], .no-js .builder__nav [data-builder-next], .no-js [data-builder-reset], .no-js .mdemo__btn { display: none; } .no-js .bstep { margin-bottom: 44px; } .no-js .bsummary { display: none; } /* ========================================================================== 18 HOME — RESTORED SCENE DESIGN The homepage runs its original scene choreography again: the six-card module grid, the pinned 3D project showcase, the intelligence constellation and the seven-phase journey. Everything below is homepage-only. The two selectors the subpages also use (.browser, .holo-chip) are scoped to body[data-route="home"] so /projekter, /kompetencer, /proces, /kontakt and /start-et-projekt are left exactly as they are. ========================================================================== */ /* ----- Scene 2 — system modules (holographic panels) ----- */ .module-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1300px; transform-style: preserve-3d; } .module { position: relative; padding: 26px 28px 30px; border-radius: 14px; background: linear-gradient(180deg, rgba(16, 23, 42, 0.72), rgba(10, 14, 26, 0.5)); border: 1px solid rgba(56, 189, 248, 0.13); backdrop-filter: blur(10px); transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; will-change: transform; } /* corner brackets — the holo frame */ .module::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0.55; border-radius: inherit; background: linear-gradient(rgba(250, 204, 21, 0.9) 0 0) top left / 16px 1.5px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) top left / 1.5px 16px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) top right / 16px 1.5px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) top right / 1.5px 16px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) bottom left / 16px 1.5px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) bottom left / 1.5px 16px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) bottom right / 16px 1.5px, linear-gradient(rgba(250, 204, 21, 0.9) 0 0) bottom right / 1.5px 16px; background-repeat: no-repeat; } .module:hover { transform: translateY(-6px); border-color: rgba(250, 204, 21, 0.35); box-shadow: var(--shadow-2); } .module__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .module__id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--muted-2); } .module__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); } .module__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: syspulse 3s ease-in-out infinite; } .module__icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 13px; background: var(--gold-soft); color: var(--gold); margin-bottom: 18px; } .module__icon svg { width: 25px; height: 25px; } .module h3 { font-size: 1.16rem; margin-bottom: 8px; } .module p { color: var(--muted); font-size: 0.96rem; } /* staggered depth rhythm on desktop (margins, so GSAP transforms stay free) */ @media (min-width: 1001px) { .module:nth-child(2), .module:nth-child(5) { margin-top: 22px; margin-bottom: -22px; } .module:nth-child(3), .module:nth-child(6) { margin-top: -10px; margin-bottom: 10px; } } /* ----- Scene 3 — projects (pinned 3D showcase) ----- */ .scene-projects { padding-bottom: 0; } .projects-pin { position: relative; } .projects-stage { position: relative; } .projects-stage.pd-pinned { height: 100svh; perspective: 1500px; overflow: hidden; } .projects-stage.pd-pinned .pshow { position: absolute; inset: 0; display: flex; align-items: center; transform-style: preserve-3d; will-change: transform, opacity; } .projects-stage.pd-pinned .pshow:not(.is-active) { pointer-events: none; } .projects-stage.pd-unpinned { padding-block: 20px; } .projects-stage.pd-unpinned .pshow { position: relative; margin-block: clamp(60px, 10vw, 120px); } .pshow-inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(30px, 5vw, 72px); align-items: center; width: 100%; } /* Pinned desktop: give the browser more presence, but cap its height to the viewport so it is always fully visible and never cropped on short screens. */ .projects-stage.pd-pinned .pshow-inner { max-width: 1400px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); } .projects-stage.pd-pinned .browser { max-width: min(100%, calc((70svh - 46px) * 1.6)); margin-inline: auto; } .pshow-visual { position: relative; transform-style: preserve-3d; } body[data-route="home"] .browser { will-change: transform; } .pshow.is-active .browser { box-shadow: var(--shadow-2), 0 0 70px -22px var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); } /* Holographic portal frame around the browser */ .pshow-visual::after { content: ""; position: absolute; inset: -14px; pointer-events: none; opacity: 0.5; z-index: 2; background: linear-gradient(var(--accent, var(--gold)) 0 0) top left / 22px 1.5px, linear-gradient(var(--accent, var(--gold)) 0 0) top left / 1.5px 22px, linear-gradient(var(--accent, var(--gold)) 0 0) top right / 22px 1.5px, linear-gradient(var(--accent, var(--gold)) 0 0) top right / 1.5px 22px, linear-gradient(var(--accent, var(--gold)) 0 0) bottom left / 22px 1.5px, linear-gradient(var(--accent, var(--gold)) 0 0) bottom left / 1.5px 22px, linear-gradient(var(--accent, var(--gold)) 0 0) bottom right / 22px 1.5px, linear-gradient(var(--accent, var(--gold)) 0 0) bottom right / 1.5px 22px; background-repeat: no-repeat; } body[data-route="home"] .holo-chip { transform: translateZ(50px); } .pshow-info .project-cat { color: var(--accent, var(--gold)); font-weight: 650; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.14em; } .pshow-info .project-name { margin-top: 8px; font-size: clamp(2rem, 4vw, 3rem); } .pshow-info .project-desc { margin-top: 18px; color: var(--muted); font-size: 1.05rem; max-width: 46ch; } .project-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .project-tags li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--text); background: var(--surface); } .project-link { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 650; color: var(--text-strong); transition: gap 0.25s var(--ease), border-color 0.25s, background 0.25s, transform 0.25s; } .project-link svg { width: 18px; height: 18px; color: var(--accent, var(--gold)); transition: transform 0.25s var(--ease); } .project-link:hover { border-color: var(--accent, var(--gold)); background: var(--surface-2); transform: translateY(-2px); } .project-link:hover svg { transform: translate(3px, -3px); } /* In-composition project progress (part of the info column, not an edge HUD) */ .pshow-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pshow-progress__word { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-2); } .pshow-progress__num { color: var(--text-strong); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em; } .pshow-progress__total { color: var(--muted-2); font-weight: 700; font-size: 0.82rem; } .pshow-progress__bars { display: flex; gap: 6px; margin-left: 4px; } .pshow-progress__bars i { width: 24px; height: 3px; border-radius: 3px; background: var(--line-2); } .pshow-progress__bars i.on { background: var(--accent, var(--gold)); box-shadow: 0 0 10px var(--accent, var(--gold)); } /* ----- Scene 4 — intelligence constellation (desktop) + network list ----- */ .constellation { position: relative; display: none; height: clamp(560px, 70vh, 720px); margin-top: 10px; transform-style: preserve-3d; will-change: transform; } .constellation__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .constellation__lines line { stroke: rgba(122, 210, 255, 0.22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; } .constellation__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 32%, rgba(250, 204, 21, 0.22), rgba(10, 14, 26, 0.9) 70%); border: 1px solid rgba(250, 204, 21, 0.5); box-shadow: 0 0 40px -6px rgba(250, 204, 21, 0.45), inset 0 0 22px rgba(250, 204, 21, 0.12); } .constellation__hub span { font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; color: var(--gold); } .constellation__hub::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(250, 204, 21, 0.25); animation: hubring 3.6s ease-out infinite; } @keyframes hubring { 0% { transform: scale(0.72); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } } .cap-node-chip { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); width: 205px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(14, 20, 38, 0.85), rgba(9, 13, 24, 0.7)); border: 1px solid rgba(56, 189, 248, 0.16); backdrop-filter: blur(8px); transition: border-color 0.3s, box-shadow 0.3s; } .cap-node-chip:hover { border-color: rgba(250, 204, 21, 0.45); box-shadow: 0 0 30px -10px rgba(250, 204, 21, 0.5); } .cap-node-chip__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--cyan); } .cap-node-chip h3 { font-size: 0.98rem; margin-top: 4px; } .cap-node-chip p { color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: 4px; } @media (min-width: 1000px) { .constellation { display: block; } .scene-capabilities .cap-list { display: none; } } .cap-list { position: relative; border-top: 1px solid var(--line); } .cap-track { position: absolute; left: 13px; top: 24px; bottom: 24px; width: 2px; background: var(--line); overflow: hidden; } .cap-track__fill { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--gold), var(--cyan)); box-shadow: 0 0 12px var(--gold); } .cap-row { position: relative; display: grid; grid-template-columns: 56px 1fr 1.2fr auto; align-items: center; gap: 24px; padding: 30px 12px 30px 48px; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); } .cap-node { position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 4px rgba(8, 11, 18, 0.9); transform: scale(0.75); transition: background 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .cap-row.is-active { background: var(--surface); } .cap-row.is-active .cap-node { background: var(--gold); box-shadow: 0 0 14px var(--gold), 0 0 0 4px rgba(8, 11, 18, 0.9); transform: scale(1.15); } .cap-num { color: var(--muted-2); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; } .cap-title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); transition: transform 0.35s var(--ease), color 0.3s; } .cap-row.is-active .cap-title { transform: translateX(6px); } .cap-text { color: var(--muted); font-size: 1rem; } .cap-arrow { color: var(--gold); font-size: 1.5rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s var(--ease); } .cap-row.is-active .cap-arrow { opacity: 1; transform: none; } /* ----- Scene 5 — process (forward journey) ----- */ .scene-process { overflow: hidden; } .process-path { position: relative; max-width: 940px; margin-inline: auto; padding: 10px 0 20px; } .process-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); overflow: hidden; } .process-line__fill { display: block; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--gold), var(--violet)); box-shadow: 0 0 14px rgba(250, 204, 21, 0.6); } .process-journey { list-style: none; margin: 0; padding: 0; } .process-step { position: relative; width: 50%; padding: 0 46px; margin-bottom: 30px; } .process-step:nth-child(odd) { left: 0; text-align: right; } .process-step:nth-child(even) { left: 50%; text-align: left; } .process-step__node { position: absolute; top: 34px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--muted-2); box-shadow: 0 0 0 5px rgba(8, 11, 18, 0.9); transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease); } .process-step:nth-child(odd) .process-step__node { right: -8px; } .process-step:nth-child(even) .process-step__node { left: -8px; } .process-step.is-active .process-step__node { border-color: var(--gold); box-shadow: 0 0 16px var(--gold), 0 0 0 5px rgba(8, 11, 18, 0.9); transform: scale(1.15); } .process-step__card { display: inline-block; text-align: left; padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; } .process-step.is-active .process-step__card { border-color: var(--gold-soft); transform: translateZ(0) scale(1.02); box-shadow: var(--shadow-2); } .process-step__n { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(120deg, var(--gold), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .process-step__n i { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-2); -webkit-text-fill-color: var(--muted-2); margin-bottom: 2px; } .process-step__body { margin-top: 8px; } .process-step__body h3 { font-size: 1.2rem; margin-bottom: 6px; } .process-step__body p { color: var(--muted); font-size: 0.95rem; max-width: 34ch; } .process-step.is-final .process-step__card { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow-2), 0 0 60px -20px var(--gold); } .process-step.is-final .process-step__node { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 22px var(--gold), 0 0 0 5px rgba(8, 11, 18, 0.9); } /* ----- Responsive ----- */ @media (max-width: 1000px) { .module-grid { grid-template-columns: repeat(2, 1fr); } .cap-row { grid-template-columns: 1fr auto; grid-template-areas: "num arrow" "title arrow" "text arrow"; gap: 4px 16px; padding-left: 44px; } .cap-num { grid-area: num; } .cap-title { grid-area: title; } .cap-text { grid-area: text; } .cap-arrow { grid-area: arrow; align-self: center; } } @media (max-width: 900px) { /* Projects fall back to a clean vertical stack (JS also unpins) */ .pshow-inner { grid-template-columns: 1fr; gap: 30px; } body[data-route="home"] .browser { transform: none !important; } /* Process becomes a single-column timeline */ .process-line { left: 14px; transform: none; } .process-step { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 0 46px; } .process-step:nth-child(odd) .process-step__node, .process-step:nth-child(even) .process-step__node { left: 6px; right: auto; } } @media (max-width: 760px) { .module-grid { grid-template-columns: 1fr; } } @media (hover: none) { .process-step:hover, .project-link:hover { transform: none; } } /* ----- Reduced motion & no-JS fallbacks for the restored scenes ----- */ @media (prefers-reduced-motion: reduce) { .projects-stage { height: auto !important; perspective: none; } .projects-stage .pshow { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; margin-block: clamp(40px, 8vw, 90px); } .projects-stage .pshow-info { opacity: 1 !important; } .cap-track__fill, .process-line__fill { transform: scaleY(1) !important; } } .no-js .projects-stage .pshow { position: relative; inset: auto; opacity: 1; }