/* ============================================ WEBCREATOR - PUBLIC SITE STYLES ============================================ Premium Architecture & Construction Landing Page Focused on lead generation and conversions. */ /* ── PAGE LOADER ── Fondo negro + logo centrado. Al cargar, el logo viaja a la posición exacta del logo del header (FLIP, transform-origin: top left). */ #page-loader { position: fixed; inset: 0; z-index: 9999; background: #0a0a0a; display: flex; align-items: center; justify-content: center; /* El fondo se mantiene negro DURANTE todo el viaje del logo (1100ms) y recién al final hace un fade corto. */ transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms, visibility 0s linear 1450ms; } #page-loader-logo { height: clamp(70px, 12vw, 140px); width: auto; display: block; opacity: 0; /* FLIP: el origen top-left hace que translate+scale alineen exactamente con la caja de destino del header. */ transform-origin: top left; animation: loaderLogoIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards; will-change: transform, opacity; } @keyframes loaderLogoIn { to { opacity: 1; } } /* Salida: logo viaja al header, fondo desvanece después */ body.is-loaded #page-loader { opacity: 0; visibility: hidden; pointer-events: none; } body.is-loaded #page-loader-logo { transform: translate(var(--loader-tx, 0), var(--loader-ty, 0)) scale(var(--loader-scale, 0.3)); transition: transform 1100ms cubic-bezier(0.86, 0, 0.07, 1); } body.is-loading { overflow: hidden; } /* Logo del header invisible mientras dura el loader (sin !important para que la transición pueda animar correctamente al pasar a is-loaded) */ body.is-loading .nav-brand .brand-logo, body.is-loading .nav-brand img { opacity: 0; } /* Crossfade: el header-logo empieza a aparecer MID-viaje (700ms), así cuando el logo del loader aterriza (1100ms) el del header ya está visible al 100% — la transición se siente continua. */ body.is-loaded .nav-brand .brand-logo, body.is-loaded .nav-brand img { opacity: 1; transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) 700ms; } @media (prefers-reduced-motion: reduce) { #page-loader, #page-loader-logo { transition: none !important; animation: none !important; } body.is-loaded #page-loader { display: none; } body.is-loading .nav-brand img { opacity: 1 !important; } } /* ── PAGE TRANSITION ── */ /* Nota: NO usar `transform` en — crea containing block y rompe `position: fixed` (overlay menu, etc.). */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageFadeIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both; } body.is-leaving { animation: none; opacity: 0; transition: opacity 260ms ease; } @media (prefers-reduced-motion: reduce) { body, body.is-leaving { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* ── TYPOGRAPHY DEFAULTS ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings, 'Raleway'), system-ui, sans-serif; } .nav-links, .nav-links a, .nav-brand { font-family: var(--font-menu, 'Montserrat'), system-ui, sans-serif; } body, p, span, li, td { font-family: var(--font-primary, 'Inter'), system-ui, sans-serif; } /* ── DYNAMIC LOGO SWAP ── */ /* Dark backgrounds: show negative (white) logo, hide normal */ .brand-logo-normal { display: none; } .brand-logo-negative { display: block; } /* If header becomes light on scroll: swap logos */ .site-header.scrolled.light-header .brand-logo-normal { display: block; } .site-header.scrolled.light-header .brand-logo-negative { display: none; } /* Logo sizing */ .brand-logo { object-fit: contain; transition: opacity 0.3s; } /* ── HEADER / NAVBAR ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); z-index: var(--z-fixed); transition: all var(--transition-base); } .site-header.scrolled { background: rgba(15, 15, 15, 0.92); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .nav { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav-brand { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--font-bold); color: #ffffff; letter-spacing: -0.02em; } .nav-brand img { height: 36px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--space-8); } .nav-links a { font-size: var(--text-sm); font-weight: var(--font-medium); color: rgba(255, 255, 255, 0.65); transition: color var(--transition-fast); position: relative; letter-spacing: 0.01em; } .nav-links a:hover, .nav-links a.active { color: #ffffff; } .nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--color-secondary); border-radius: var(--radius-full); } .nav-phone { font-weight: var(--font-semibold) !important; color: var(--color-secondary) !important; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: var(--space-2); background: transparent; border: 0; margin-left: auto; } .nav-toggle span { width: 26px; height: 2px; background: #ffffff; border-radius: var(--radius-full); transition: all var(--transition-base); } .nav-toggle:hover span { background: var(--color-secondary, #c9a96a); } /* ── OVERLAY MENU (Foster + Partners style) ── */ .overlay-menu { position: fixed; inset: 0; z-index: calc(var(--z-fixed) + 10); display: grid; grid-template-columns: 1fr 1fr; background: transparent; visibility: hidden; pointer-events: none; transition: visibility 0s linear 700ms; } .overlay-menu.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; } body.menu-open { overflow: hidden; } /* Image side: slide+fade in from left, scale settles */ .overlay-menu-image { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: translateX(-32px) scale(1.06); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; overflow: hidden; position: relative; background-color: #0a0a0a; } /* Video variant: