/* ============================================= Ambar Inmo Group — DESIGN v2.0 (2026 UX/UI) DESIGN SYSTEM: - Spatial / 3D Depth Layers (2026 trend) - Bento Grid Layouts (2026 trend) - Micro-interactions + Spring Animations - Adaptive Color Scheme (dark-first) - Type Scale: Fluid Clamp-based sizing - Accessible contrast (WCAG AA) ============================================= */ /* ── GOOGLE FONTS ───────────────────────────── Families used: Cormorant Garamond (luxury display), DM Sans (clean UI), Space Grotesk (data/numbers) Loaded inline in HTML ──────────────────────────────────────────────── */ /* ── DESIGN TOKENS ────────────────────────────── */ :root { /* Deep Mediterranean Palette */ --c-bg: #08090d; /* Very deep ink */ --c-surface: #0e111a; /* Card surfaces */ --c-surface-2: #141924; /* Elevated cards */ --c-surface-3: rgba(22,28,42,0.7); /* Glass panels */ --c-border: rgba(255,255,255,0.06); --c-border-gold: rgba(193,155,90,0.25); /* Brand Gold — warm saffron-amber gradient */ --c-gold-1: #c19b5a; /* Deep gold */ --c-gold-2: #d4b27a; /* Mid gold */ --c-gold-3: #e8cfa0; /* Light gold / hover */ --c-gold-glow: rgba(193,155,90,0.15); /* Text hierarchy */ --c-text-1: #f0f2f5; /* Headings */ --c-text-2: #b8bdc8; /* Body */ --c-text-3: #6b7282; /* Muted / captions */ --c-text-inv: #08090d; /* Text on gold bg */ /* Semantic */ --c-success: #3ecf8e; --c-error: #f97066; /* Typography — fluid scale with clamp() */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-ui: 'DM Sans', 'Poppins', system-ui, sans-serif; --font-data: 'Space Grotesk', 'Roboto Mono', monospace; --fs-hero: clamp(2.8rem, 6vw, 5.5rem); --fs-h1: clamp(2rem, 4vw, 3.6rem); --fs-h2: clamp(1.5rem, 2.5vw, 2.4rem); --fs-h3: clamp(1.1rem, 1.8vw, 1.5rem); --fs-body: clamp(0.9rem, 1.2vw, 1.05rem); --fs-small: 0.8125rem; --fs-label: 0.71875rem; /* 11.5px */ /* Line heights */ --lh-display: 1.08; --lh-heading: 1.2; --lh-body: 1.72; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* Layout */ --max-w: 1440px; --max-w-content: 1160px; --max-w-narrow: 680px; --gutter: clamp(20px, 5vw, 80px); --header-h: 76px; --flyout-w: 320px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; /* Elevation (box-shadow layers) */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 20px 50px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); --shadow-gold: 0 0 0 1px var(--c-border-gold), 0 8px 24px rgba(193,155,90,0.08); /* Easing — spring-like curves (2026 trend) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 360ms; --dur-slow: 600ms; --dur-slower: 1000ms; } /* ── RESET ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-2); background: var(--c-bg); overflow-x: hidden; } img, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; } /* Focus ring — accessible */ :focus-visible { outline: 2px solid var(--c-gold-2); outline-offset: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── LAYOUT UTILITIES ────────────────────────── */ .container { width: 100%; max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); } /* ═══════════════════════════════════════════════ SITE HEADER ═══════════════════════════════════════════════ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--header-h); display: flex; align-items: center; padding-inline: var(--gutter); background: linear-gradient(to bottom, rgba(8,9,13,0.72) 0%, rgba(8,9,13,0.0) 100%); transition: background var(--dur-base) var(--ease-std), backdrop-filter var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std); } .site-header--scrolled { background: rgba(8,9,13,0.88); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 1px 0 var(--c-border-gold), var(--shadow-sm); } .site-header__inner { width: 100%; max-width: var(--max-w); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } /* Logo */ .site-header__logo { display: flex; align-items: center; flex-shrink: 0; } .site-header__logo img { height: 68px; width: auto; object-fit: contain; transition: height var(--dur-base) var(--ease-out-expo); } .site-header--scrolled .site-header__logo img { height: 55px; } /* Desktop navigation — injected by JS */ .site-header__desktop-nav { display: none; } @media (min-width: 1025px) { .site-header__desktop-nav { display: flex; align-items: center; gap: var(--sp-8); } .site-header__desktop-nav a { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); position: relative; padding-block: var(--sp-2); transition: color var(--dur-fast) var(--ease-std); } .site-header__desktop-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--c-gold-2); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out-expo); } .site-header__desktop-nav a:hover, .site-header__desktop-nav a.is-active { color: var(--c-gold-3); } .site-header__desktop-nav a:hover::after, .site-header__desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; } /* CTA button style for last nav item (Contacto) */ .site-header__desktop-nav a:last-child { padding: var(--sp-2) var(--sp-5); border: 1px solid var(--c-border-gold); background: var(--c-gold-glow); transition: all var(--dur-base) var(--ease-out-expo); } .site-header__desktop-nav a:last-child::after { display: none; } .site-header__desktop-nav a:last-child:hover { background: var(--c-gold-1); color: var(--c-text-inv); border-color: var(--c-gold-1); } } /* Hamburger button */ .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-text-1); border-radius: var(--radius-sm); transition: all var(--dur-fast) var(--ease-std); } .menu-toggle:hover { color: var(--c-gold-2); background: rgba(255,255,255,0.04); } .menu-toggle svg { width: 22px; height: 22px; fill: currentColor; } @media (min-width: 1025px) { .menu-toggle { display: none !important; } } /* ── FLYOUT MENU ─────────────────────────────── */ .flyout-overlay { position: fixed; inset: 0; background: rgba(8,9,13,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base) var(--ease-std); } .flyout-overlay.is-open { opacity: 1; visibility: visible; } .flyout-menu { position: fixed; top: 0; right: calc(-1 * var(--flyout-w)); width: var(--flyout-w); height: 100dvh; background: var(--c-surface-2); border-left: 1px solid var(--c-border-gold); z-index: 1002; padding: var(--sp-6) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); transition: right var(--dur-slow) var(--ease-out-expo); overflow-y: auto; box-shadow: var(--shadow-lg); } .flyout-menu.is-open { right: 0; } .flyout-menu__close { align-self: flex-end; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--c-text-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: all var(--dur-fast) var(--ease-std); } .flyout-menu__close:hover { color: var(--c-text-1); border-color: var(--c-border-gold); background: var(--c-gold-glow); } .flyout-menu__close svg { width: 20px; height: 20px; fill: currentColor; } .flyout-menu__nav { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-4); } .flyout-menu__nav a { display: block; padding: var(--sp-4) var(--sp-5); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; color: var(--c-text-2); border-radius: var(--radius-sm); opacity: 0; transform: translateX(16px); transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo); } .flyout-menu.is-open .flyout-menu__nav a { opacity: 1; transform: none; } .flyout-menu__nav a:hover { color: var(--c-gold-3); background: rgba(193,155,90,0.06); } .flyout-menu__nav a.is-active { color: var(--c-gold-2); background: rgba(193,155,90,0.08); } /* Legal tag in flyout footer */ .flyout-menu__footer { margin-top: auto; padding-top: var(--sp-6); border-top: 1px solid var(--c-border); font-size: var(--fs-label); color: var(--c-text-3); line-height: 1.5; } /* ═══════════════════════════════════════════════ HERO SLIDER ═══════════════════════════════════════════════ */ .hero-slider { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 640px; max-height: 980px; background: var(--c-bg); overflow: hidden; touch-action: pan-y pinch-zoom; } .hero-slider__track { position: relative; width: 100%; height: 100%; } .hero-slider__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-std), visibility var(--dur-slow) var(--ease-std); } .hero-slider__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; } .hero-slider__slide.is-leaving { z-index: 1; } /* Ken Burns — smoother curve, longer duration */ .hero-slider__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transform: scale(1.08); -webkit-transform: scale(1.08); transition: transform 14s cubic-bezier(0.25, 0.1, 0.25, 1); -webkit-transition: -webkit-transform 14s cubic-bezier(0.25, 0.1, 0.25, 1); } .hero-slider__slide.is-active .hero-slider__bg { transform: scale(1); -webkit-transform: scale(1); } .hero-slider__bg video { width: 100%; height: 100%; object-fit: cover; } /* Multi-stop overlay for depth */ .hero-slider__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to right, rgba(8,9,13,0.88) 0%, rgba(8,9,13,0.4) 55%, rgba(8,9,13,0.15) 100% ), linear-gradient( to top, rgba(8,9,13,0.6) 0%, transparent 40% ); z-index: 1; } /* Slot machine-style text layout */ .hero-slider__content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; align-items: center; padding: var(--header-h) var(--gutter) var(--sp-20); } .hero-slider__mid { max-width: var(--max-w-content); width: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-10); } .hero-slider__slide.is-active .hero-slider__text-col { -webkit-animation: heroTextIn var(--dur-slower) var(--ease-out-expo) both; animation: heroTextIn var(--dur-slower) var(--ease-out-expo) both; } .hero-slider__slide.is-leaving .hero-slider__text-col { -webkit-animation: heroTextOut var(--dur-slow) var(--ease-in-expo) both; animation: heroTextOut var(--dur-slow) var(--ease-in-expo) both; } /* Overline pill */ .hero-slider__caption { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gold-2); margin-bottom: var(--sp-5); } .hero-slider__caption::before { content: ''; display: block; width: 24px; height: 1px; background: var(--c-gold-2); } .hero-slider__title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 500; line-height: var(--lh-display); color: var(--c-text-1); margin-bottom: var(--sp-8); letter-spacing: -0.02em; } .hero-slider__desc { font-size: var(--fs-body); font-weight: 300; line-height: 1.8; color: rgba(240,242,245,0.72); max-width: 54ch; } /* Slide counter block */ .hero-slider__counter-col { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); padding-bottom: var(--sp-5); } .hero-slider__counter { font-family: var(--font-data); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 300; line-height: 1; color: rgba(193,155,90,0.22); letter-spacing: -0.04em; transition: color var(--dur-base) var(--ease-std); } .hero-slider__slide.is-active .hero-slider__counter { color: rgba(193,155,90,0.45); } /* Bottom chrome — nav + progress + scroll */ .hero-slider__chrome { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: var(--sp-6) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); } .hero-slider__nav { display: flex; gap: var(--sp-3); background: transparent; height: auto; width: auto; position: static; bottom: auto; right: auto; } .hero-slider__nav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-border-gold); background: rgba(14,17,26,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--c-text-1); position: static; transition: background var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-std); } .hero-slider__nav-btn:hover { background: var(--c-gold-1); border-color: var(--c-gold-1); color: var(--c-text-inv); transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(193,155,90,0.3); } .hero-slider__nav-btn .material-icons { font-size: 22px; } /* Progress bar */ .hero-slider__progress-wrap { flex: 1; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .hero-slider__progress { height: 100%; background: transparent; } .hero-slider__progress-bar { height: 100%; width: 0%; background: var(--c-gold-2); border-radius: 2px; transition: width linear; } /* Total count */ .hero-slider__total { font-family: var(--font-data); font-size: var(--fs-small); font-weight: 300; color: var(--c-text-3); letter-spacing: 0.1em; position: static; right: auto; bottom: auto; } /* Scroll hint */ .hero-slider__scroll { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); position: static; left: auto; bottom: auto; } .hero-slider__scroll-text { font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--c-text-3); } .hero-slider__scroll-line { width: 1px; height: 40px; background: rgba(255,255,255,0.12); position: relative; overflow: hidden; } .hero-slider__scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 16px; background: var(--c-gold-2); animation: scrollDown 2s ease-in-out infinite; } @-webkit-keyframes heroTextIn { from { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes heroTextIn { from { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes heroTextOut { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes heroTextOut { from { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes scrollDown { 0% { transform: translateY(-16px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-slider__slide, .hero-slider__bg, .hero-slider__text-col, .hero-slider__progress-bar, .hero-slider__scroll-line::after { transition: none !important; animation: none !important; } .hero-slider__slide.is-active .hero-slider__bg { transform: none; } } /* ═══════════════════════════════════════════════ ABOUT / INFO SECTIONS (Bento layout concept) ═══════════════════════════════════════════════ */ .section { position: relative; } /* Full-bleed background variant */ .section--bg-image { min-height: 600px; display: flex; flex-direction: column; justify-content: center; background-size: cover; background-position: center; overflow: hidden; } .section--bg-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(8,9,13,0.92) 0%, rgba(8,9,13,0.60) 55%, rgba(8,9,13,0.25) 100% ); z-index: 0; } .section--bg-image > * { position: relative; z-index: 1; } /* Inner content container for text sections */ .section__inner { max-width: var(--max-w-content); width: 100%; margin-inline: auto; padding: var(--sp-24) var(--gutter); } .section__eyebrow { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-2); margin-bottom: var(--sp-6); } .section__eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--c-gold-2); flex-shrink: 0; } .section__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-heading); color: var(--c-text-1); letter-spacing: -0.02em; margin-bottom: var(--sp-8); } .section__title--playfair { font-family: var(--font-display); } .section__subtitle { font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); color: var(--c-text-2); max-width: 70ch; margin-bottom: var(--sp-8); } .section__spacer { height: var(--sp-6); } .section__btn-wrap { margin-top: var(--sp-8); } /* Two-col layout on desktop for bg sections */ @media (min-width: 1025px) { .section--bg-image .section__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-20); } .section--bg-image .section__inner > * { grid-column: 1; } .section--bg-image .section__title { margin-bottom: var(--sp-5); } } /* ── BUTTONS ─────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: var(--sp-4) var(--sp-8); background: transparent; color: var(--c-text-1); border: 1px solid var(--c-border-gold); border-radius: var(--radius-sm); position: relative; overflow: hidden; z-index: 1; transition: color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .btn::before { content: ''; position: absolute; inset: 0; background: var(--c-gold-1); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out-expo); z-index: -1; } .btn:hover { color: var(--c-text-inv); border-color: var(--c-gold-1); box-shadow: 0 6px 20px rgba(193,155,90,0.25); transform: translateY(-1px); } .btn:hover::before { transform: scaleX(1); transform-origin: left; } .btn:active { transform: translateY(0); } /* Arrow variant */ .btn--arrow::after { content: '→'; font-size: 1.1em; transition: transform var(--dur-base) var(--ease-spring); } .btn--arrow:hover::after { transform: translateX(4px); } /* ═══════════════════════════════════════════════ CTA GRID — BENTO CARD LAYOUT (2026 trend) ═══════════════════════════════════════════════ */ .cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--max-w); margin-inline: auto; padding: var(--sp-20) var(--gutter); } .cta-grid--projects { padding-top: var(--sp-12); } .cta-grid--projects .cta-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-8); } .cta-grid--projects .cta-card__title { order: 1; margin-bottom: var(--sp-2); } .cta-grid--projects .cta-card__label { order: 2; margin-bottom: var(--sp-3); } .cta-grid--projects .cta-card__desc { order: 3; } .cta-grid--projects .cta-card__overlay { background: linear-gradient( to top, rgba(8, 9, 13, 0.95) 0%, rgba(8, 9, 13, 0.5) 55%, rgba(8, 9, 13, 0.1) 100% ); } /* All cards equal size */ .cta-grid > .cta-card:first-child { grid-row: span 1; grid-column: span 1; } .cta-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; border: 1px solid var(--c-border); border-radius: var(--radius-md); cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std); } .cta-card:hover { transform: translateY(-6px) scale(1.005); border-color: var(--c-border-gold); box-shadow: var(--shadow-gold), var(--shadow-md); } .cta-card:active { transform: translateY(-2px) scale(1); } .cta-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: inherit; transition: transform var(--dur-slower) var(--ease-out-expo); } .cta-card:hover .cta-card__bg { transform: scale(1.05); } .cta-card__overlay { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( to top, rgba(8,9,13,0.95) 0%, rgba(8,9,13,0.5) 55%, rgba(8,9,13,0.1) 100% ); transition: background var(--dur-base) var(--ease-std); } .cta-card__content { position: relative; z-index: 2; padding: var(--sp-8); } .cta-card__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-2); margin-bottom: var(--sp-3); } .cta-card__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: 500; line-height: 1.2; color: var(--c-gold-3); margin-bottom: var(--sp-3); transition: color var(--dur-fast) var(--ease-std); } .cta-card__desc { font-size: var(--fs-small); font-weight: 300; line-height: 1.65; color: var(--c-text-2); } /* Arrow indicator in bottom-right */ .cta-card::after { content: '↗'; position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 3; font-size: 1.1rem; color: var(--c-gold-2); } /* ═══════════════════════════════════════════════ ICON GRID — Services / Features ═══════════════════════════════════════════════ */ .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-20) var(--gutter); } .icon-box { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8) var(--sp-8) var(--sp-10); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: border-color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-std); } .icon-box:hover { border-color: var(--c-border-gold); background: var(--c-surface-2); transform: translateY(-4px); box-shadow: var(--shadow-gold); } .icon-box__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: rgba(193,155,90,0.08); color: var(--c-gold-2); border: 1px solid var(--c-border-gold); transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .icon-box:hover .icon-box__icon { background: var(--c-gold-1); color: var(--c-text-inv); transform: scale(1.05); } .icon-box__icon svg { width: 22px; height: 22px; fill: currentColor; } .icon-box__title { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-1); } .icon-box__desc { font-size: var(--fs-small); font-weight: 300; line-height: 1.7; color: var(--c-text-2); flex: 1; } /* ═══════════════════════════════════════════════ TEAM GRID ═══════════════════════════════════════════════ */ .team-section { padding-block: var(--sp-16) var(--sp-24); } .team-section__header { max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: var(--sp-12); text-align: center; } .team-section__header .section__eyebrow { justify-content: center; } .team-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); } .team-card:nth-child(-n+3) { grid-column: span 4; } .team-card:nth-child(n+4) { grid-column: span 3; } .team-card { position: relative; width: 60%; max-width: 200px; margin-inline: auto; border-radius: var(--radius-md); transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-std); } .team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-gold), var(--shadow-lg); } .team-card__media { position: relative; width: 100%; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; border: 2px solid var(--c-border-gold); background: #000; transition: border-color var(--dur-base) var(--ease-std); } .team-card:hover .team-card__media { border-color: var(--c-gold-2); } .team-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; transform: scale(1.2); transition: transform var(--dur-slower) var(--ease-out-expo); } .team-card:hover .team-card__media img { transform: scale(1.24); } .team-card__caption { padding: var(--sp-4) var(--sp-2) 0; text-align: center; } .team-card__caption::before { content: ''; display: block; width: 32px; height: 2px; background: var(--c-gold-2); margin: 0 auto var(--sp-3); transition: width var(--dur-base) var(--ease-out-expo); } .team-card:hover .team-card__caption::before { width: 48px; } .team-card__name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; line-height: 1.25; color: var(--c-text-1); margin-bottom: var(--sp-2); transition: color var(--dur-fast) var(--ease-std); } .team-card:hover .team-card__name { color: var(--c-gold-3); } .team-card__role { font-size: var(--fs-label); font-weight: 500; line-height: 1.45; color: var(--c-gold-2); text-transform: uppercase; letter-spacing: 0.12em; } /* ═══════════════════════════════════════════════ PAGE HERO (inner pages) ═══════════════════════════════════════════════ */ .page-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; padding: var(--header-h) var(--gutter) var(--sp-16); background-size: cover; background-position: center; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(8,9,13,0.95) 0%, rgba(8,9,13,0.5) 50%, rgba(8,9,13,0.3) 100% ); } .page-hero__inner { position: relative; z-index: 1; max-width: var(--max-w-content); width: 100%; margin-inline: auto; } .page-hero__eyebrow { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gold-2); margin-bottom: var(--sp-4); } .page-hero__eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--c-gold-2); flex-shrink: 0; } .page-hero__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--c-text-1); margin-bottom: var(--sp-6); } .page-hero__subtitle { font-size: var(--fs-body); font-weight: 300; line-height: var(--lh-body); color: var(--c-text-2); max-width: 60ch; } /* Fallback: old classnames still work */ .page-hero > .page-hero__title:not(.page-hero__inner .page-hero__title) { position: relative; z-index: 1; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; color: var(--c-text-1); } .page-hero > .page-hero__subtitle:not(.page-hero__inner .page-hero__subtitle) { position: relative; z-index: 1; font-size: var(--fs-body); color: var(--c-text-2); max-width: 60ch; margin-inline: auto; text-align: center; } /* Page title for contact page */ .page-title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.02em; color: var(--c-text-1); text-align: center; padding-top: calc(var(--header-h) + var(--sp-16)); padding-inline: var(--gutter); margin-bottom: var(--sp-10); } /* ═══════════════════════════════════════════════ CONTACT FORM ═══════════════════════════════════════════════ */ .form-section { max-width: 640px; margin-inline: auto; margin-block: var(--sp-16) var(--sp-24); padding: var(--sp-12) var(--sp-12); background: #1e222a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .form-section__title { font-size: var(--fs-small); font-weight: 400; line-height: 1.6; color: var(--c-text-2); text-align: center; margin-bottom: var(--sp-10); } .contact-form { padding-bottom: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); } .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-group--full { grid-column: 1 / -1; } .form-group:not(.form-group--half):not(.form-group--full) { grid-column: 1 / -1; } /* Back-compat for old --half classes */ .form-group--half { /* handled by grid now */ } .form-group label { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; color: var(--c-text-3); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-small); font-weight: 300; line-height: 1.5; color: var(--c-text-1); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--c-text-3); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--c-gold-2); box-shadow: 0 0 0 3px rgba(193,155,90,0.12); background: var(--c-surface-2); } .form-group textarea { min-height: 130px; resize: vertical; } .form-submit { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: var(--sp-4); } .form-submit button { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: var(--sp-4) var(--sp-12); background: var(--c-gold-1); color: var(--c-text-inv); border: 1px solid var(--c-gold-1); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .form-submit button:hover { background: transparent; color: var(--c-gold-2); box-shadow: 0 0 0 1px var(--c-gold-1); transform: translateY(-1px); } .form-submit button:active { transform: none; } .form-message { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--c-success); text-align: center; padding: var(--sp-4) var(--sp-5); background: rgba(62,207,142,0.06); border: 1px solid rgba(62,207,142,0.2); border-radius: var(--radius-sm); display: none; margin-top: var(--sp-4); } .form-message.is-visible { display: block; } .form-message.is-error { color: var(--c-error); background: rgba(249, 112, 102, 0.08); border-color: rgba(249, 112, 102, 0.25); } /* Map */ .map-embed { width: 100%; padding-inline: var(--gutter); max-width: var(--max-w-content); margin-inline: auto; } .map-embed iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius-md); filter: grayscale(100%) contrast(1.1) brightness(0.75); border: 1px solid var(--c-border); } /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ .site-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); } .site-footer__bottom { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-8) var(--gutter); display: flex; align-items: center; justify-content: center; } .site-footer__copyright { font-size: var(--fs-small); font-weight: 300; letter-spacing: 0.05em; color: var(--c-text-3); } /* ═══════════════════════════════════════════════ PROJECT PAGES ═══════════════════════════════════════════════ */ .project-back { display: inline-flex; align-items: center; gap: var(--sp-3); margin: calc(var(--header-h) + var(--sp-8)) var(--gutter) 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-2); transition: all var(--dur-fast) var(--ease-std); } .project-back:hover { color: var(--c-text-1); transform: translateX(-4px); } .project-hero { position: relative; min-height: 540px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: var(--header-h) var(--gutter) var(--sp-16); margin-top: 0; background-size: cover; background-position: center; overflow: hidden; } .project-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; pointer-events: none; } .project-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(8,9,13,0.95) 0%, rgba(8,9,13,0.5) 50%, rgba(8,9,13,0.25) 100% ); } .project-hero > :not(.project-hero__bg) { position: relative; z-index: 2; } .project-hero__logo { max-width: 280px; width: 60%; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); margin-bottom: var(--sp-6); transition: transform var(--dur-base) var(--ease-spring); } .project-hero__logo--compact { display: block; width: 149px; max-width: 149px; height: auto; margin-bottom: var(--sp-4); } .project-hero > a:has(.project-hero__logo--compact) { display: inline-block; line-height: 0; } .project-hero:hover .project-hero__logo { transform: scale(1.03); } .project-hero__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--c-text-1); letter-spacing: -0.01em; margin-bottom: var(--sp-3); } .project-hero__title a { color: inherit; transition: color var(--dur-fast) var(--ease-std); } .project-hero__title a:hover { color: var(--c-gold-3); } .project-hero__link a { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-2); border-bottom: 1px solid rgba(193,155,90,0.3); padding-bottom: var(--sp-1); transition: all var(--dur-fast) var(--ease-std); } .project-hero__link a:hover { color: var(--c-text-1); border-bottom-color: var(--c-text-1); } .project-hero__subtitle { font-size: var(--fs-small); font-weight: 300; color: var(--c-text-2); letter-spacing: 0.08em; text-align: left; max-width: 640px; } /* Project gallery — pixel-accurate reference layout */ .project-gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 38px); gap: 10px; width: 100%; max-width: 100%; margin-inline: 0; padding: var(--sp-6) 0; align-items: stretch; } .project-gallery__item { overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface-2); } /* 1 — small square, top-left with ~13% left indent */ .project-gallery__item:nth-child(1) { grid-column: 2 / 7; grid-row: 1 / 4; } /* 2 — dominant tall, right half, starts at top */ .project-gallery__item:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 7; } /* 3 — wide landscape, bottom-left from edge */ .project-gallery__item:nth-child(3) { grid-column: 1 / 7; grid-row: 4 / 8; } /* 4 — small accent, bottom-right under photo 2 */ .project-gallery__item:nth-child(4) { grid-column: 7 / 11; grid-row: 7 / 9; } /* 5 — not visible */ .project-gallery__item:nth-child(5) { display: none; } .project-gallery__item img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out-expo); } .project-gallery__item:hover img { transform: scale(1.04); } .project-content { max-width: var(--max-w-narrow); margin-inline: auto; padding: var(--sp-12) var(--gutter) var(--sp-24); } .project-content__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--c-text-1); letter-spacing: -0.02em; margin-bottom: var(--sp-6); } .project-content__text { font-size: var(--fs-small); font-weight: 300; line-height: 1.8; color: var(--c-text-2); margin-bottom: var(--sp-6); } /* ═══════════════════════════════════════════════ SCROLL ANIMATIONS ═══════════════════════════════════════════════ */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); } .fade-in.is-visible { opacity: 1; transform: none; } .fade-in-up { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); } .fade-in-up.is-visible { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════ RESPONSIVE OVERRIDES ═══════════════════════════════════════════════ */ /* ── Tablet 768–1024 ─ */ @media (max-width: 1024px) { .hero-slider { min-height: 600px; max-height: none; } .hero-slider__mid { grid-template-columns: 1fr; gap: var(--sp-6); } .hero-slider__counter-col { display: none; } .cta-grid { grid-template-columns: repeat(3, 1fr); } .cta-grid > .cta-card:first-child { grid-column: span 1; } .icon-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .team-card:nth-child(-n+3), .team-card:nth-child(n+4) { grid-column: auto; } .project-gallery { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 34px); gap: 8px; } .project-gallery__item:nth-child(1) { grid-column: 2 / 7; grid-row: 1 / 4; } .project-gallery__item:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 7; } .project-gallery__item:nth-child(3) { grid-column: 1 / 7; grid-row: 4 / 8; } .project-gallery__item:nth-child(4) { grid-column: 7 / 11; grid-row: 7 / 9; } .project-gallery__item:nth-child(5) { display: none; } .form-section { margin-inline: var(--gutter); } } /* ── Mobile ≤767 ─ */ @media (max-width: 767px) { :root { --header-h: 68px; } .site-header { padding-inline: var(--sp-5); } .hero-slider { min-height: 580px; } .hero-slider__chrome { flex-wrap: wrap; gap: var(--sp-4); } .hero-slider__scroll { display: none; } .cta-grid { grid-template-columns: 1fr; padding: var(--sp-10) var(--gutter); } .cta-grid > .cta-card:first-child { grid-column: span 1; } .cta-card { min-height: 320px; } .icon-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .team-card:nth-child(-n+3), .team-card:nth-child(n+4) { grid-column: auto; } .team-section__header { margin-bottom: var(--sp-8); } .team-card { width: 170px; max-width: 100%; justify-self: center; } .team-card:nth-child(3) { grid-column: 1 / -1; width: 170px; max-width: 100%; justify-self: center; } .team-card__caption { padding: var(--sp-4) var(--sp-2) 0; } .team-card__name { font-size: 0.95rem; } .team-card__role { font-size: 0.65rem; letter-spacing: 0.08em; } .project-gallery { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 28px); gap: 6px; } .project-gallery__item:nth-child(1) { grid-column: 2 / 7; grid-row: 1 / 4; } .project-gallery__item:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 7; } .project-gallery__item:nth-child(3) { grid-column: 1 / 7; grid-row: 4 / 8; } .project-gallery__item:nth-child(4) { grid-column: 7 / 11; grid-row: 7 / 9; } .project-gallery__item:nth-child(5) { display: none; } .form-section { padding: var(--sp-8) var(--sp-6); border-radius: var(--radius-md); } .form-row { grid-template-columns: 1fr; } .page-hero { min-height: 360px; padding-bottom: var(--sp-12); } .page-title { padding-top: calc(var(--header-h) + var(--sp-10)); } .project-hero { min-height: 400px; } } /* ── Very large screens ─ */ @media (min-width: 1440px) { .cta-grid { grid-template-columns: repeat(3, 1fr); } } /* ───────────────────────────────────────────── EXTRA COMPATIBILITY & ALIGNMENT PATCHES Ensure all pages look correct across variants ─────────────────────────────────────────────── .section used standalone (NPL, Comercial text blocks) ─── */ .section .section__inner { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-16) var(--gutter); text-align: left; } /* Centered content variant (text-only sections) */ .section .section__inner[style*="text-align: center"] .section__subtitle, .section .section__inner[style*="max-width: 800px"] .section__subtitle, .section .section__inner[style*="max-width: 880px"] .section__subtitle { text-align: center; margin-inline: auto; } /* page-hero: direct children (backward compat) */ .page-hero > h1:not(.page-hero__inner h1) { position: relative; z-index: 2; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; color: var(--c-text-1); text-shadow: 0 2px 20px rgba(0,0,0,0.6); } .page-hero > p:not(.page-hero__inner p) { position: relative; z-index: 2; font-size: var(--fs-body); color: var(--c-text-2); max-width: 60ch; margin-inline: auto; text-align: center; } /* Map embed spacing fix */ .map-embed { padding-inline: var(--gutter); max-width: var(--max-w-content); margin-inline: auto; margin-top: var(--sp-6); } /* Form row backward compatibility for --half classes */ .form-row .form-group--half { /* On desktop: already in 2-col grid. On mobile: full width */ } /* Section standalone — ensure padding-top doesn't overlap header */ .section:first-child { padding-top: calc(var(--header-h) + var(--sp-16)); } /* Icon grid standalone (comercial) */ .icon-grid + .section { padding-top: 0; } /* Project hero margin reset */ .project-hero { margin-top: 0; } /* Page title standalone (contact) spacing fix */ .page-title + .map-embed { margin-top: var(--sp-6); } /* Ensure .flyout-menu z-index above everything */ .flyout-menu { z-index: 9999; } .flyout-overlay { z-index: 9998; } .site-header { z-index: 9000; } /* ───────────────────────────────────────────── 2026 PREMIUM UI/UX COMPONENT STYLES ─────────────────────────────────────────────── */ .btn--filled { background: var(--c-gold-1); color: var(--c-text-inv); border-color: var(--c-gold-1); } .btn--filled::before { background: var(--c-gold-3); } .btn--filled:hover { color: var(--c-text-inv); border-color: var(--c-gold-3); } .hero-slider__btn-wrap { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); animation: heroTextIn var(--dur-slower) var(--ease-out-expo) 200ms both; } @media (max-width: 767px) { .hero-slider__btn-wrap { flex-direction: column; width: 100%; gap: var(--sp-3); } .hero-slider__btn-wrap .btn { width: 100%; justify-content: center; } } /* Trust Bar */ .trust-bar { background: var(--c-surface); border-top: 1px solid var(--c-border-gold); border-bottom: 1px solid var(--c-border-gold); position: relative; z-index: 5; } .trust-bar__inner { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-6) var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); align-items: center; } .trust-item { display: flex; align-items: center; gap: var(--sp-4); } .trust-item__icon { color: var(--c-gold-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-item__icon .material-icons { font-size: 32px; } .trust-item__number { font-family: var(--font-data); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; color: var(--c-gold-2); line-height: 1; } .trust-item__text-wrap { display: flex; flex-direction: column; gap: 2px; } .trust-item__title { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-1); } .trust-item__desc { font-size: 11px; color: var(--c-text-3); line-height: 1.3; } @media (max-width: 1024px) { .trust-bar__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } } @media (max-width: 580px) { .trust-bar__inner { grid-template-columns: 1fr; gap: var(--sp-5); } } /* Quiénes Somos / Editorial Split */ .editorial-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-12); max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-24) var(--gutter); align-items: center; } .editorial-split__text { position: relative; padding-left: var(--sp-8); border-left: 2px solid var(--c-border-gold); } .editorial-split__img-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--c-border); aspect-ratio: 4 / 5; } .editorial-split__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out-expo); } .editorial-split__img-wrap:hover img { transform: scale(1.05); } @media (max-width: 900px) { .editorial-split { grid-template-columns: 1fr; gap: var(--sp-10); } .editorial-split__img-wrap { aspect-ratio: 16 / 10; } } /* Featured Project Section */ .featured-project { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-16) var(--gutter) var(--sp-24); } .featured-project__title-main { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--c-text-1); letter-spacing: -0.01em; margin-bottom: var(--sp-8); text-align: center; } .featured-card { display: grid; grid-template-columns: 6fr 4fr; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std); } .featured-card:hover { border-color: var(--c-border-gold); box-shadow: var(--shadow-gold), var(--shadow-md); } .featured-card__gallery { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .featured-card__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out-expo); } .featured-card:hover .featured-card__gallery img { transform: scale(1.04); } .featured-card__body { padding: var(--sp-10); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); border-left: 1px solid var(--c-border); } .featured-card__tag { display: inline-flex; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold-2); } .featured-card__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--c-text-1); line-height: var(--lh-heading); } .featured-card__desc { font-size: var(--fs-small); font-weight: 300; line-height: 1.7; color: var(--c-text-2); } @media (max-width: 900px) { .featured-card { grid-template-columns: 1fr; } .featured-card__body { border-left: none; border-top: 1px solid var(--c-border); padding: var(--sp-8); } } /* Soft CTA */ .soft-cta { background: var(--c-surface-2); border-top: 1px solid var(--c-border-gold); padding: var(--sp-12) var(--gutter); text-align: center; position: relative; } .soft-cta__inner { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); } .soft-cta__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400; color: var(--c-text-1); letter-spacing: -0.01em; } /* Contact popup */ .contact-popup { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-std), visibility var(--dur-base) var(--ease-std); } .contact-popup.is-open { opacity: 1; visibility: visible; } .contact-popup__overlay { position: absolute; inset: 0; background: rgba(8, 9, 13, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .contact-popup__panel { position: relative; width: 100%; max-width: 640px; max-height: calc(100dvh - var(--sp-12)); overflow-y: auto; padding: var(--sp-10) var(--sp-10) var(--sp-8); background: #1e222a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform: translateY(16px) scale(0.98); transition: transform var(--dur-base) var(--ease-spring); } .contact-popup.is-open .contact-popup__panel { transform: translateY(0) scale(1); } .contact-popup__close { position: absolute; top: var(--sp-4); right: var(--sp-4); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--c-text-2); background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); } .contact-popup__close svg { width: 18px; height: 18px; } .contact-popup__close:hover { color: var(--c-gold-2); border-color: var(--c-border-gold); background: rgba(193, 155, 90, 0.06); } .contact-popup__title { font-size: var(--fs-small); font-weight: 400; line-height: 1.6; color: var(--c-text-2); text-align: center; margin-bottom: var(--sp-8); padding-inline: var(--sp-8); } .contact-popup .form-submit { flex-direction: column; align-items: center; gap: var(--sp-3); } .contact-popup__note { font-size: 11px; color: var(--c-text-3); letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 640px) { .contact-popup { padding: var(--sp-4); align-items: flex-end; } .contact-popup__panel { max-height: 92dvh; padding: var(--sp-8) var(--sp-6) var(--sp-6); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .contact-popup__title { padding-inline: var(--sp-2); margin-bottom: var(--sp-6); } } /* Full Footer Grid */ .footer-main { background: #04060a; border-top: 1px solid rgba(193,155,90,0.12); padding-block: var(--sp-16) var(--sp-8); } .footer-main__inner { max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: var(--sp-12); margin-bottom: var(--sp-12); } .footer-main__col { display: flex; flex-direction: column; gap: var(--sp-6); } .footer-main__brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--c-text-1); } .footer-main__logo-img { height: 52px; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: var(--sp-2); } .footer-main__desc { font-size: var(--fs-small); color: var(--c-text-3); line-height: 1.6; max-width: 32ch; } .footer-main__title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-gold-2); } .footer-main__links { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-main__links a { font-size: var(--fs-small); color: var(--c-text-2); transition: color var(--dur-fast) var(--ease-std); } .footer-main__links a:hover { color: var(--c-gold-3); } .footer-main__contact-list { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-text-2); } .footer-main__contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); } .footer-main__contact-item .material-icons { font-size: 18px; color: var(--c-gold-2); margin-top: 2px; } .footer-main__socials { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); } .footer-main__social-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; color: var(--c-text-2); transition: all var(--dur-fast) var(--ease-std); } .footer-main__social-btn:hover { border-color: var(--c-gold-2); color: var(--c-gold-2); background: var(--c-gold-glow); } .footer-main__divider { max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); margin-bottom: var(--sp-6); } .footer-main__divider-line { height: 1px; background: rgba(255,255,255,0.06); } .footer-main__bottom { max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); flex-wrap: wrap; } .footer-main__legal { font-size: 11px; color: var(--c-text-3); line-height: 1.5; max-width: 60ch; } .footer-main__copy { font-size: 11px; color: var(--c-text-3); white-space: nowrap; } .footer-main__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); width: 100%; } .footer-main__legal-links a { font-size: 11px; color: var(--c-text-3); text-decoration: none; letter-spacing: 0.03em; transition: color var(--dur-fast) var(--ease-std); } .footer-main__legal-links a:hover { color: var(--c-text-1); } @media (max-width: 850px) { .footer-main__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .footer-main__col:first-child { grid-column: span 2; } } @media (max-width: 580px) { .footer-main__inner { grid-template-columns: 1fr; gap: var(--sp-8); } .footer-main__col:first-child { grid-column: span 1; } .footer-main__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } } /* Breadcrumbs */ .breadcrumbs { max-width: var(--max-w-content); margin-inline: auto; padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); } .breadcrumbs a { color: var(--c-text-2); transition: color var(--dur-fast) var(--ease-std); } .breadcrumbs a:hover { color: var(--c-gold-3); } .breadcrumbs__sep { color: rgba(255,255,255,0.15); } /* Project Detail Split Layout — gallery left, text right */ .project-detail-grid { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-4) var(--gutter) var(--sp-20); display: grid; grid-template-columns: 6fr 5fr; grid-template-areas: "gallery content" "contact contact"; gap: var(--sp-10); align-items: start; } .project-detail-side { display: contents; } .project-detail-grid .project-content { grid-area: content; padding: 0; max-width: none; margin: 0; margin-top: 20%; } .project-detail-grid .project-content__text { font-size: calc(var(--fs-small) * 1.2); } .project-detail-grid .project-gallery { grid-area: gallery; } .sticky-contact-card { grid-area: contact; position: static; width: 100%; max-width: 640px; margin-inline: auto; margin-top: var(--sp-4); background: #1e222a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: var(--sp-8); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--sp-6); justify-self: center; } .sticky-contact-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--c-text-1); } .sticky-contact-card__desc { font-size: var(--fs-small); color: var(--c-text-2); line-height: 1.5; margin-bottom: var(--sp-2); } .sticky-contact-card .form-group label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 900px) { .project-detail-grid { grid-template-columns: 1fr; grid-template-areas: "content" "gallery" "contact"; gap: var(--sp-10); } .project-detail-grid .project-content { margin-top: 0; } } /* Related projects */ .related-projects { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-16) var(--gutter) var(--sp-24); border-top: 1px solid var(--c-border); } .related-projects__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; color: var(--c-text-1); margin-bottom: var(--sp-8); letter-spacing: -0.01em; } .related-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; border: 1px solid var(--c-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--dur-base) var(--ease-spring); } .related-card:hover { transform: translateY(-4px); border-color: var(--c-border-gold); box-shadow: var(--shadow-gold); } .related-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slower) var(--ease-out-expo); } .related-card:hover .related-card__bg { transform: scale(1.05); } .related-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,13,0.92) 0%, rgba(8,9,13,0.3) 60%, transparent 100%); } .related-card__content { position: relative; z-index: 2; padding: var(--sp-5); } .related-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--c-text-1); margin-bottom: 4px; } .related-card__subtitle { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-gold-2); } @media (max-width: 768px) { .related-projects__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ COOKIE CONSENT BANNER ═══════════════════════════════════════════════ */ .cookie-consent__overlay[hidden], .cookie-consent__banner[hidden], .cookie-consent__modal[hidden] { display: none !important; } .cookie-consent__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); z-index: 10100; } .cookie-consent__banner:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10101; padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + env(safe-area-inset-bottom)); animation: cookieSlideUp var(--dur-slow) var(--ease-out-expo); } .cookie-consent__banner-inner { max-width: var(--max-w-content); margin-inline: auto; padding: var(--sp-3) var(--sp-4); padding-right: var(--sp-10); background: var(--c-surface-2); border: 1px solid var(--c-border-gold); border-radius: var(--radius-sm); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4); position: relative; } .cookie-consent__banner-row { display: flex; align-items: center; gap: var(--sp-5); } .cookie-consent__banner-copy { flex: 1; min-width: 0; } .cookie-consent__close { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-3); border-radius: var(--radius-sm); transition: color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std); } .cookie-consent__close .material-icons { font-size: 18px; } .cookie-consent__close:hover { color: var(--c-text-1); background: rgba(255, 255, 255, 0.06); } .cookie-consent__banner .cookie-consent__title { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-1); margin-bottom: 2px; padding-right: 0; } .cookie-consent__banner .cookie-consent__text { font-size: 0.75rem; line-height: 1.45; color: var(--c-text-3); max-width: none; } .cookie-consent__text a { color: var(--c-gold-2); text-decoration: underline; text-underline-offset: 2px; } .cookie-consent__text a:hover { color: var(--c-gold-3); } .cookie-consent__actions, .cookie-consent__modal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .cookie-consent__actions--banner { flex-shrink: 0; margin-top: 0; gap: var(--sp-2); } .cookie-consent__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--sp-3) var(--sp-6); font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); border: 1px solid var(--c-border-gold); transition: color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-spring); } .cookie-consent__btn--sm { min-height: 32px; padding: 6px 12px; font-size: 0.625rem; letter-spacing: 0.08em; white-space: nowrap; } .cookie-consent__btn--ghost { color: var(--c-text-1); background: transparent; } .cookie-consent__btn--ghost:hover { border-color: var(--c-gold-1); color: var(--c-gold-2); } .cookie-consent__btn--accept { color: var(--c-text-inv); background: var(--c-gold-1); border-color: var(--c-gold-1); } .cookie-consent__btn--accept:hover { background: var(--c-gold-2); border-color: var(--c-gold-2); transform: translateY(-1px); } .cookie-consent__modal:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 10102; align-items: center; justify-content: center; padding: var(--sp-6) var(--gutter); } .cookie-consent__modal-panel { width: min(720px, 100%); max-height: min(88vh, 820px); overflow: auto; padding: var(--sp-8); background: var(--c-surface-2); border: 1px solid var(--c-border-gold); border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); } .cookie-consent__modal .cookie-consent__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; color: var(--c-text-1); margin-bottom: 0; } .cookie-consent__modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .cookie-consent__modal-header .cookie-consent__close { position: static; flex-shrink: 0; } .cookie-consent__modal-intro { color: var(--c-text-2); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--sp-6); } .cookie-consent__modal-intro p + p { margin-top: var(--sp-3); } .cookie-consent__category { padding: var(--sp-5) 0; border-top: 1px solid var(--c-border); } .cookie-consent__category-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); } .cookie-consent__category-title { font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: 600; color: var(--c-text-1); margin-bottom: var(--sp-2); } .cookie-consent__badge { display: inline-block; margin-left: var(--sp-2); padding: 2px 8px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold-2); border: 1px solid var(--c-border-gold); border-radius: 999px; vertical-align: middle; } .cookie-consent__category-desc { font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-3); } .cookie-consent__toggle { position: relative; flex-shrink: 0; width: 48px; height: 28px; cursor: pointer; } .cookie-consent__toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .cookie-consent__toggle-ui { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border-radius: 999px; transition: background var(--dur-base) var(--ease-std); } .cookie-consent__toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur-base) var(--ease-spring); } .cookie-consent__toggle input:checked + .cookie-consent__toggle-ui { background: var(--c-gold-1); } .cookie-consent__toggle input:checked + .cookie-consent__toggle-ui::after { transform: translateX(20px); } .cookie-consent__toggle input:disabled + .cookie-consent__toggle-ui { opacity: 0.65; cursor: not-allowed; } @keyframes cookieSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 767px) { .cookie-consent__banner-inner { padding: var(--sp-3); padding-right: var(--sp-9); } .cookie-consent__banner-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .cookie-consent__actions--banner { flex-direction: row;