/* Theme Name: Arfil Theme URI: https://arfil.eu Author: Arfil LTD Description: Custom theme for Arfil property development — Cyprus. Version: 1.25.1 Requires at least: 6.0 Tested up to: 6.7.5 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: arfil */ /* ============================================ TABLE OF CONTENTS — search "NN." to jump -------------------------------------------- 00. Custom properties & reset 01. Base typography 02. Layout utilities 03. Header & navigation 04. Hero section 05. Projects section 06. About section 07. Progress section 08. Contact section 09. Footer 10. Animations & scroll reveal 11. Media queries — tablet (max-width: 1279px) 12. Media queries — mobile (max-width: 767px) 13. Media queries — small (max-width: 479px) Project-page section styles (hero/gallery/specs/location/chronology/ floor-plans/units) live within 03–08 and the media queries. The cookie banner is styled separately in assets/css/cookie-notice.css. ============================================ */ /* ============================================ 00. CUSTOM PROPERTIES & RESET ============================================ */ :root { /* Backgrounds */ --color-bg-white: #ffffff; --color-bg-light: #f5f4f0; --color-bg-dark: #1a1a2e; --color-bg-overlay: rgba(26, 26, 46, 0.55); /* Text */ --color-text-primary: #1a1a2e; --color-text-secondary: #5a5a6e; --color-text-light: #ffffff; --color-text-muted: #8a8a9a; /* Accent */ --color-accent: #c9a96e; --color-accent-hover: #b8944f; /* Borders */ --color-border: #e0ddd6; --color-border-light: #eeece6; /* Status */ --color-status-done: #4a8c6f; --color-status-active: #c9a96e; --color-status-new: #1a1a2e; /* Typography */ --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Layout */ --container-max: 1400px; --header-h: 5rem; /* Transitions */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Reusable transition patterns */ --t-fast: 0.3s ease; --t-medium: 0.4s ease; --t-transform-card: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease; --t-image-zoom: transform 0.7s var(--ease-out-expo); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text-primary); background: var(--color-bg-light); overflow-x: hidden; max-width: 100vw; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .site-main { flex: 1; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; font-size: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } /* ============================================ 01. BASE TYPOGRAPHY ============================================ */ .section-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; color: var(--color-text-primary); margin-bottom: 1rem; } .section-title--light { color: var(--color-text-light); } .section-subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); max-width: 500px; } .section-header { margin-bottom: 3.5rem; } /* ============================================ 02. LAYOUT UTILITIES ============================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 5rem); } .section { padding: clamp(4rem, 8vh, 7rem) 0; } .section--alt { background: var(--color-bg-light); } .section--white { background: var(--color-bg-white); } /* ============================================ 03. HEADER & NAVIGATION ============================================ */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background 0.4s ease, box-shadow 0.4s ease; } .header[data-state="top"] { background: transparent; } .header[data-state="scrolled"] { background: rgba(255, 255, 255, 0.97); /* No backdrop-filter: blur sampled through 3% transparency is invisible, and the blur on a sticky/scrolling element costs a repaint every scroll frame. */ box-shadow: 0 1px 0 var(--color-border-light); } .header__inner { display: flex; align-items: center; height: var(--header-h); gap: 2rem; } /* Inline SVG logo — `color` drives the fill via currentColor */ .header__logo { display: inline-flex; align-items: center; line-height: 0; color: var(--color-text-primary); transition: color 0.4s ease; } .header__logo svg { height: 22px; width: auto; display: block; } .header[data-state="top"] .header__logo { color: #fff; } /* Legacy support: if an is still there, keep original filter behavior */ .header__logo img { height: 40px; width: auto; transition: filter 0.4s ease; } .header[data-state="top"] .header__logo img { filter: brightness(0) invert(1); } .header__nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; } .header__nav-link { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.03em; transition: color 0.3s ease; position: relative; } .header[data-state="top"] .header__nav-link { color: rgba(255, 255, 255, 0.85); } .header[data-state="top"] .header__nav-link:hover { color: #fff; } .header[data-state="scrolled"] .header__nav-link { color: var(--color-text-secondary); } .header[data-state="scrolled"] .header__nav-link:hover { color: var(--color-text-primary); } .header__nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--color-accent); transition: width 0.3s var(--ease-out-expo); } .header__nav-link:hover::after { width: 100%; } .header__cta { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.625rem 1.5rem; border-radius: 3px; transition: all 0.3s ease; margin-left: 1rem; } .header[data-state="top"] .header__cta { color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); } .header[data-state="top"] .header__cta:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); } .header[data-state="scrolled"] .header__cta { color: var(--color-text-light); background: var(--color-accent); border: 1px solid var(--color-accent); } .header[data-state="scrolled"] .header__cta:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } /* Burger */ .header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; margin-left: auto; z-index: 1001; } .header__burger span { display: block; width: 100%; height: 2px; border-radius: 1px; transition: all 0.3s ease; } .header[data-state="top"] .header__burger span { background: #fff; } .header[data-state="scrolled"] .header__burger span { background: var(--color-text-primary); } .header__burger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .header__burger.is-active span:nth-child(2) { opacity: 0; } .header__burger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile menu */ .header__mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: var(--color-bg-dark); padding: calc(var(--header-h) + 2rem) 2rem 2rem; transform: translateY(-100%); transition: transform 0.5s var(--ease-out-expo); z-index: 999; display: none; } .header__mobile-menu.is-open { transform: translateY(0); } .header__mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; } .header__mobile-link { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; color: var(--color-text-light); padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.3s ease; } .header__mobile-link:hover { color: var(--color-accent); } /* Overlay */ .header__overlay { position: fixed; inset: 0; background: rgba(26, 26, 46, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 998; } .header__overlay.is-visible { opacity: 1; visibility: visible; } /* ============================================ 04. HERO SECTION ============================================ */ .hero { position: relative; height: 100vh; height: 100dvh; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; background: #2a3040; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 2s var(--ease-smooth) forwards; } @keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(26, 26, 46, 0.6) 0%, rgba(26, 26, 46, 0.25) 40%, rgba(26, 26, 46, 0.1) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; padding-bottom: 12vh; } .hero__title { font-family: var(--font-heading); font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; color: #fff; letter-spacing: 0.06em; line-height: 1; animation: fadeUp 1s ease 0.4s both; } /* Hero title rendered as logo SVG — color via currentColor, sized with clamp */ .hero__title--logo { display: flex; justify-content: flex-start; margin: 0; line-height: 0; } .hero__title--logo svg { width: auto; /* Logotype is ~1.22:1 (668x545). 18vh feels right on desktop, capped so it doesn't balloon on ultra-wide displays. */ height: clamp(140px, 22vh, 240px); display: block; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)); } .hero__subtitle { font-size: clamp(0.9375rem, 1.5vw, 1.125rem); font-weight: 400; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1rem; animation: fadeUp 1s ease 0.7s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Scroll indicator — centered via left:0 + right:0 + flex, NOT via transform: translateX(-50%), because the fadeUp animation's final keyframe (transform: translateY(0)) would override it. */ .hero__scroll-indicator { position: absolute; bottom: 2.5rem; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; animation: fadeUp 1s ease 1.2s both; } .hero__scroll-text { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } /* Desktop text shown by default; mobile variant hidden (swapped via @media below) */ .hero__scroll-text--mobile { display: none; } .hero__scroll-line { width: 1px; height: clamp(35px, 3.5vh, 65px); background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ''; position: absolute; top: calc(-1 * clamp(35px, 3.5vh, 65px)); left: 0; width: 1px; height: clamp(35px, 3.5vh, 65px); background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.6)); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(calc(2 * clamp(35px, 3.5vh, 65px))); } } /* ── Touch devices (phones + tablets): "Swipe" label + reversed bottom→top animation ── Combined query: real touch (hover:none + pointer:coarse) OR narrow viewport ≤1023px, so it also catches desktop users resizing to a narrow window (common for responsive QA). */ @media (hover: none) and (pointer: coarse), (max-width: 1023px) { .hero__scroll-text--desktop { display: none; } .hero__scroll-text--mobile { display: inline; } /* Reverse the decorative line: start below, travel up */ .hero__scroll-line::after { top: auto; bottom: calc(-1 * clamp(35px, 3.5vh, 65px)); background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.6)); animation-name: scrollLineUp; } @keyframes scrollLineUp { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-2 * clamp(35px, 3.5vh, 65px))); } } } /* ============================================ 05. PROJECTS SECTION ============================================ */ .projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .project-card { display: block; background: transparent; transition: transform 0.5s var(--ease-out-expo); } /* [data-animate] selector bumps specificity above [data-animate].is-visible (0,2,0) so hover transform wins */ .project-card[data-animate]:hover { transform: translateY(-4px); } .project-card__image-wrap { position: relative; overflow: hidden; border-radius: 10px; } /* img.project-card__image (0,1,1) beats WP Smush lazy-load's .lazyloaded (0,1,0) which sets transition:opacity 400ms */ img.project-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .project-card[data-animate]:hover img.project-card__image { transform: scale(1.06); } /* Glass-morphism status badge (bottom-left) */ .project-card__badge--status { position: absolute; bottom: 0.875rem; left: 0.875rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; color: #fff; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .project-card__badge--status svg { width: 12px; height: 12px; flex-shrink: 0; } /* Pill badges (top-right) — solid */ .project-card__badges { position: absolute; top: 0.875rem; right: 0.875rem; display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; } .project-card__badge--pill { padding: 0.25rem 0.75rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 100px; color: #fff; background: var(--color-bg-dark); } /* Card info — text directly on section background, flex row */ .project-card__info { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.875rem 0.25rem 0.5rem; } .project-card__info-text { flex: 1; min-width: 0; } .project-card__title { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.125rem; color: var(--color-text-primary); /* Allow long titles to wrap instead of stretching the card (was: white-space:nowrap + overflow:hidden + text-overflow:ellipsis, which combined with flex: 1 on .project-card__info-text caused the card to expand past viewport on mobile). */ overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; } .project-card__location { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-secondary); } .project-card__location svg { flex-shrink: 0; opacity: 0.5; } .project-card__price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; white-space: nowrap; align-self: center; } .project-card__price-from { font-size: 0.6875rem; font-weight: 500; color: var(--color-text-muted); text-transform: lowercase; letter-spacing: 0.02em; line-height: 1.4; } .project-card__price-value { font-size: 1.25rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; line-height: 1.3; } /* ============================================ 06. ABOUT SECTION ============================================ */ .about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } /* No gallery images yet (no project has CMB2 _arfil_gallery filled) → let the text block use the full row. Rather than shipping foreign stock imagery as a "visual fallback", we honor the empty state and reveal a cleaner text-only About until the user uploads gallery photos. */ .about--no-gallery .about__inner { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; } .about__text .section-title { margin-bottom: 1.5rem; } .about__lead { font-size: 1.125rem; line-height: 1.7; color: var(--color-text-primary); margin-bottom: 1rem; } .about__text p { color: var(--color-text-secondary); margin-bottom: 1rem; } .about__stats { display: flex; gap: 3rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .about__stat { display: flex; flex-direction: column; } .about__stat-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; } .about__stat-label { font-size: 0.8125rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.375rem; } /* Scrolling columns */ .about__columns { display: flex; gap: 1rem; height: 550px; overflow: hidden; border-radius: 8px; } .about__scroll-col { flex: 1; overflow: hidden; } .about__scroll-track { display: flex; flex-direction: column; gap: 1rem; } .about__scroll-track img { width: 100%; height: 260px; object-fit: cover; border-radius: 4px; } /* Scroll is handled entirely by JS (initAboutColumns) for smooth interaction — no CSS keyframes needed. */ @media (prefers-reduced-motion: reduce) { .about__scroll-track { transform: none !important; } } /* ============================================ 07. PROGRESS SECTION ============================================ */ /* Flex layout so the row adapts to the actual number of active projects: 1 project → centered, 2 → side by side, 3 → three across, 4+ wraps. max-width caps the column so a lone card doesn't stretch the full container. */ .progress__projects { display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem; } .progress__project { flex: 1 1 420px; max-width: 600px; min-width: 0; } .progress__project-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.375rem; } .progress__project-location { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 2rem; } .progress__timeline { position: relative; padding-left: 2.5rem; } .progress__timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: var(--timeline-bottom, 8px); width: 2px; background: var(--color-border); } .progress__milestone { position: relative; padding-bottom: 2rem; } .progress__milestone:last-child { padding-bottom: 0; } .progress__milestone-dot { position: absolute; left: -2.5rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-bg-light); z-index: 1; transition: all 0.3s ease; } .progress__milestone[data-status="done"] .progress__milestone-dot { background: var(--color-status-done); border-color: var(--color-status-done); } .progress__milestone[data-status="current"] .progress__milestone-dot { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 5px rgba(201, 169, 110, 0.2); } .progress__milestone[data-status="upcoming"] .progress__milestone-dot { background: var(--color-bg-light); border-color: var(--color-border); } .progress__milestone-content { display: flex; flex-direction: column; gap: 0.25rem; } .progress__milestone-date { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .progress__milestone[data-status="current"] .progress__milestone-date { color: var(--color-accent); } .progress__milestone-label { font-size: 1rem; font-weight: 500; color: var(--color-text-primary); } .progress__milestone[data-status="upcoming"] .progress__milestone-label { color: var(--color-text-muted); } .progress__milestone-image { width: 100%; max-width: 280px; height: 80px; object-fit: cover; border-radius: 4px; margin-top: 0.5rem; } /* ============================================ 07b. NEWS SECTION ============================================ */ .news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* Card background adapts to the section it sits in (sections alternate white/light dynamically on project pages): white card on light sections, light card on white sections — never card-color-on-same-color. */ .news-card { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: 8px; overflow: hidden; transition: var(--t-transform-card); } .section--white .news-card { background: var(--color-bg-light); border-color: transparent; } .news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26, 26, 46, 0.1); } .news-card__link { display: block; color: inherit; } .news-card__image-wrap { overflow: hidden; aspect-ratio: 2 / 1; background: var(--color-border-light); } .news-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .news-card__image-wrap img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: var(--t-image-zoom); } .news-card:hover .news-card__image-wrap img { transform: scale(1.05); } .news-card__body { padding: 1.5rem; } .news-card__date { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.5rem; } .news-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; color: var(--color-text-primary); transition: color 0.3s ease; } .news-card:hover .news-card__title { color: var(--color-accent); } .news-card__excerpt { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card__read-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-accent); transition: gap 0.3s ease; } .news-card:hover .news-card__read-more { gap: 0.625rem; } /* News "View All" link (used in homepage + project page news sections) */ .news__all-link { text-align: center; margin-top: 2.5rem; } .news__view-all { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-accent); transition: gap 0.3s ease; } .news__view-all:hover { gap: 0.75rem; } /* ============================================ 07c. COMPACT PAGE HERO (archives, news, etc.) ============================================ */ .page-hero { background: var(--color-bg-dark); padding: calc(var(--header-h) + 2.5rem) 0 2.5rem; text-align: center; } .page-hero__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: #fff; margin-bottom: 0.375rem; } .page-hero__subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.55); } /* Filter tabs */ .news-filters { padding: 1.5rem 0 0; background: var(--color-bg-white); } .news-filters__tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .news-filters__tab { display: inline-block; padding: 0.5rem 1.25rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 100px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: transparent; transition: all 0.3s ease; } .news-filters__tab:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); } .news-filters__tab.is-active { background: var(--color-bg-dark); color: #fff; border-color: var(--color-bg-dark); } /* ============================================ 07d. SINGLE NEWS ARTICLE ============================================ */ /* Hero with featured image overlay */ .single-news__hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; } .single-news__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .single-news__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(26, 26, 46, 0.85) 0%, rgba(26, 26, 46, 0.45) 50%, rgba(26, 26, 46, 0.25) 100% ); pointer-events: none; } .single-news__hero .container { position: relative; z-index: 1; padding-top: calc(var(--header-h) + 2rem); padding-bottom: 2.5rem; } .single-news__hero .page-hero__title { color: var(--color-text-light); } .single-news__hero .page-hero__subtitle { color: rgba(255, 255, 255, 0.7); } .single-news__category { display: inline-block; padding: 0.25rem 0.75rem; background: var(--color-accent); color: var(--color-bg-dark); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; /* side margins: a post can carry several project chips (joint news) */ margin: 0 0.25rem 1rem; } .single-news__content { max-width: 750px; margin: 0 auto; padding: 2.5rem 0 3rem; line-height: 1.9; font-size: 1.05rem; color: var(--color-text-secondary); } .single-news__content p { margin-bottom: 1.25rem; } .single-news__content h2, .single-news__content h3 { color: var(--color-text-primary); margin: 2rem 0 0.75rem; } .single-news__content img { border-radius: 8px; margin: 1.5rem 0; } /* Prev / Next navigation */ .single-news__nav { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--color-border-light); } .single-news__nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; max-width: 45%; transition: color var(--t-fast); } .single-news__nav-link:hover { color: var(--color-accent); } .single-news__nav-link--next { margin-left: auto; text-align: right; } .single-news__nav-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.25rem; } .single-news__nav-title { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; } .single-news__back { display: inline-block; font-size: 0.9375rem; font-weight: 600; color: var(--color-accent); transition: opacity var(--t-fast); } .single-news__back:hover { opacity: 0.7; } /* ============================================ 08. CONTACT SECTION ============================================ */ .contact { position: relative; overflow: hidden; } /* No user-supplied contact background photo → solid brand-dark under the overlay so the section stays visually consistent with the rest of the dark-footer strip. (Hero has the same baseline via its own `background: #2a3040;` declaration.) */ .contact--no-bg { background: var(--color-bg-dark, #1a1a2e); } .contact__bg { position: absolute; inset: 0; z-index: 0; } .contact__bg img { width: 100%; height: 100%; object-fit: cover; } .contact__overlay { position: absolute; inset: 0; background: rgba(26, 26, 46, 0.82); z-index: 1; } .contact .container { position: relative; z-index: 2; } .contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact__text { color: rgba(255, 255, 255, 0.7); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 2rem; } .contact__details { display: flex; flex-direction: column; gap: 1rem; } .contact__detail { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9375rem; } .contact__detail svg { opacity: 0.5; flex-shrink: 0; } /* Form */ .contact__form { display: flex; flex-direction: column; gap: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .contact__form input, .contact__form textarea { width: 100%; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: #fff; font-size: 0.9375rem; transition: border-color 0.3s ease, background 0.3s ease; outline: none; } .contact__form input::placeholder, .contact__form textarea::placeholder { color: rgba(255, 255, 255, 0.35); } .contact__form input:focus, .contact__form textarea:focus { border-color: var(--color-accent); background: rgba(255, 255, 255, 0.1); } .contact__form textarea { resize: vertical; min-height: 120px; } .contact__submit { align-self: flex-start; padding: 1rem 2.5rem; background: var(--color-accent); color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; border: none; transition: background 0.3s ease, transform 0.3s ease; } .contact__submit:hover { background: var(--color-accent-hover); transform: translateY(-1px); } /* ============================================ 09. FOOTER ============================================ */ .footer { background: var(--color-bg-dark); color: rgba(255, 255, 255, 0.6); padding: 4rem 0 0; } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer__logo { display: inline-flex; align-items: center; color: #fff; /* inline SVG uses currentColor */ margin-bottom: 0.75rem; line-height: 0; } .footer__logo svg { height: 72px; /* logotype is ~1.2:1 so ~86px wide */ width: auto; display: block; } /* Legacy fallback */ .footer__logo img { height: 36px; width: auto; filter: brightness(0) invert(1); } .footer__tagline { font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); } .footer__heading { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); margin-bottom: 1.25rem; } .footer__nav-col { display: flex; flex-direction: column; } .footer__link { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); padding: 0.3rem 0; transition: color 0.3s ease; } .footer__link:hover { color: var(--color-accent); } .footer__contact-col { display: flex; flex-direction: column; } .footer__contact-item { font-size: 0.875rem; padding: 0.3rem 0; } .footer__bottom { padding: 1.5rem 0; text-align: center; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.3); } .footer__bottom-link { color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); text-underline-offset: 2px; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; } .footer__bottom-link:hover { color: rgba(255, 255, 255, 0.7); text-decoration-color: rgba(255, 255, 255, 0.5); } .footer__bottom-sep { margin: 0 0.5rem; opacity: 0.5; } /* ============================================ P1. PROJECT HERO (split-panel, level.ru style) ============================================ */ .project-hero { background: var(--color-bg-light); padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 1.5rem; } .project-hero__container { display: flex; gap: 1.5rem; align-items: stretch; } /* — Left: Info Card — */ .project-hero__card { width: 380px; min-width: 340px; flex-shrink: 0; background: #fff; border-radius: 12px; padding: 2rem 0; display: flex; flex-direction: column; } .project-hero__card-head { padding: 0 2rem; margin-bottom: 1.875rem; } .project-hero__title { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; margin-bottom: 0.625rem; } .project-hero__subtitle { display: block; margin-top: 0.25rem; font-size: 1.125rem; font-weight: 500; line-height: 1.3; } .project-hero__location { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--color-text-secondary); } .project-hero__location svg { opacity: 0.5; flex-shrink: 0; } /* Info rows */ .project-hero__info { flex: 1; display: flex; flex-direction: column; gap: 1.125rem; padding: 0 2rem; } .project-hero__info-group { display: flex; flex-direction: column; gap: 0.5rem; } .project-hero__info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .project-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; } .project-hero__fact { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .project-hero__fact + .project-hero__fact { padding-left: 1.25rem; border-left: 1px solid var(--color-border); } .project-hero__fact-value { order: -1; margin: 0 0 0.25rem; font-size: 1.75rem; line-height: 1.15; font-weight: 600; overflow-wrap: anywhere; } .project-hero__fact-label { display: flex; align-items: center; gap: 0.375rem; color: var(--color-text-secondary); font-size: 0.8125rem; line-height: 1.4; } .project-hero__fact-label svg { flex: 0 0 14px; opacity: 0.65; } .project-hero__completion { display: grid; gap: 0.5rem; margin: 0; } .project-hero__phase { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: 0.5rem; min-height: 2rem; } .project-hero__phase-label { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.8125rem; line-height: 1.4; } .project-hero__phase-icon { flex: 0 0 16px; color: var(--color-accent); } .project-hero__phase-icon--completed { color: #3b7159; } .project-hero__phase-result { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; text-align: center; } .project-hero__phase-qualifier { color: var(--color-text-secondary); font-size: 0.6875rem; line-height: 1.4; } .project-hero__phase-value { font-size: 0.8125rem; font-weight: 600; line-height: 1.4; } .project-hero__phase-value--completed { padding: 0.25rem 0.625rem; border-radius: 50px; background: #eef5f0; color: #3b7159; font-size: 0.75rem; font-weight: 500; } .project-hero__info-label { font-size: 0.875rem; color: var(--color-text-secondary); } .project-hero__info-value { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); text-align: right; } .project-hero__price { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; margin: 1.25rem 2rem 0; padding-top: 1rem; border-top: 1px solid var(--color-border); } .project-hero__price-label { color: var(--color-text-secondary); font-size: 0.8125rem; line-height: 1.4; } .project-hero__price-value { font-size: 1.875rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; } /* Card buttons */ .project-hero__card-actions { display: flex; flex-direction: column; gap: 0.625rem; padding: 0 2rem; margin-top: 1.25rem; } @media (max-width: 359px) { .project-hero__card-head, .project-hero__info, .project-hero__card-actions { padding-left: 1.5rem; padding-right: 1.5rem; } .project-hero__price { margin-left: 1.5rem; margin-right: 1.5rem; } .project-hero__facts { gap: 0.75rem; } .project-hero__fact + .project-hero__fact { padding-left: 0.75rem; } .project-hero__phase { grid-template-columns: minmax(0, 1fr) 6.25rem; } } .project-hero__btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0 1.5rem; font-size: 0.875rem; font-weight: 600; border-radius: 50px; transition: all 0.25s ease; text-align: center; } .project-hero__btn--outline { background: transparent; color: var(--color-text-primary); border: 1.5px solid var(--color-border); } .project-hero__btn--outline:hover { border-color: var(--color-text-secondary); } .project-hero__btn--outline svg { opacity: 0.6; } /* ----- Animated brochure button (outline only, rotating conic-gradient arc) ----- */ /* Idle: the conic-gradient's `from` angle is animated via @property --brochure-angle, so the gradient itself rotates inside a fixed element — no rotating oversized square, no compound clipping. The mask recipe (content-box XOR border-box) paints only the 3px padding band. Because the padding is uniform and the mask inherits border-radius on both clips, the inner and outer edges are concentric pill arcs — no crooked cut. */ @property --brochure-angle { syntax: ''; initial-value: 0deg; inherits: false; } .project-hero__btn--animated { position: relative; background: transparent; /* interior = card background */ color: var(--color-text-primary); border: none; /* ring is painted by .project-hero__btn-animated */ transition: color 0.3s ease-in-out; isolation: isolate; /* contain any negative z-index children */ } .project-hero__btn-animated { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; /* match parent 50px pill */ padding: 3px; /* ring thickness — uniform on all sides */ /* Gradient painted directly on the padding box — same pill footprint as the button. */ background: conic-gradient( from var(--brochure-angle), var(--color-border) 0deg, var(--color-bg-dark) 45deg, var(--color-border) 110deg, var(--color-border) 360deg ); /* CSS-tricks "gradient border" recipe: XOR a content-box mask against a full-box mask, leaving only the padding band visible. Both clip layers inherit the pill border-radius so the inner edge curves properly. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: arfil-brochure-angle 3s linear infinite; } .project-hero__btn-label { position: relative; z-index: 1; /* sit above .project-hero__btn-animated */ display: inline-flex; align-items: center; gap: 0.5rem; } /* Hover: collapse the rotating gradient to a solid stroke and freeze it. */ .project-hero__btn--animated:hover .project-hero__btn-animated { background: var(--color-text-secondary); animation-play-state: paused; } .project-hero__btn--animated svg { opacity: 0.6; } @keyframes arfil-brochure-angle { from { --brochure-angle: 0deg; } to { --brochure-angle: 360deg; } } /* Respect user's reduced-motion preference — freeze the ring on a static stroke. */ @media (prefers-reduced-motion: reduce) { .project-hero__btn-animated { animation: none; background: var(--color-border); } } .project-hero__btn--solid { background: var(--color-bg-dark); color: #fff; border: 1.5px solid var(--color-bg-dark); } .project-hero__btn--solid:hover { background: #2a2a42; border-color: #2a2a42; } /* — Right: Image Slider — */ .project-hero__slider { flex: 1; min-width: 0; min-height: 480px; position: relative; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .project-hero__slider-track { display: flex; width: 100%; flex: 1; transition: transform 0.5s var(--ease-out-expo); will-change: transform; } .project-hero__slider-track.is-dragging { transition: none; } .project-hero__slide { flex: 0 0 100%; min-width: 0; position: relative; } .project-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-hero__slide-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 60% ); } .project-hero__slide-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; } .project-hero__slide-text { margin-bottom: 1.5rem; } .project-hero__slide-title { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1.1; } .project-hero__slide-subtitle { display: block; font-size: 1.125rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.5rem; } .project-hero__slide-actions { display: flex; gap: 0.75rem; } .project-hero__slide-btn { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; font-size: 0.8125rem; font-weight: 600; border-radius: 50px; transition: all 0.25s ease; } .project-hero__slide-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); } .project-hero__slide-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .project-hero__slide-btn--filled { background: #fff; color: var(--color-text-primary); border: 1.5px solid #fff; } .project-hero__slide-btn--filled:hover { background: rgba(255, 255, 255, 0.9); } /* Badge (top-right of slider) */ .project-hero__badge { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3; width: 72px; height: 72px; border-radius: 50%; background: var(--color-bg-dark); color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding: 0.5rem; } /* Slider navigation (bottom-right) */ .project-hero__slider-nav { position: absolute; bottom: 1.25rem; right: 1.25rem; z-index: 3; display: flex; align-items: center; gap: 0.5rem; } .project-hero__slider-counter { display: flex; align-items: center; gap: 0.125rem; padding: 0.5rem 0.875rem; border-radius: 50px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); font-size: 0.8125rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .project-hero__slider-sep { opacity: 0.5; margin: 0 0.125rem; } .project-hero__slider-total { opacity: 0.5; } .project-hero__slider-arrows { display: flex; gap: 0.375rem; } .project-hero__slider-arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; } .project-hero__slider-arrow:hover { background: #fff; transform: scale(1.05); } /* ============================================ P2. GALLERY SECTION ============================================ */ .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .gallery__item { width: 100%; padding: 0; text-align: inherit; overflow: hidden; border-radius: 10px; cursor: pointer; position: relative; } .gallery__item::after { content: ''; position: absolute; inset: 0; background: rgba(26, 26, 46, 0); transition: background 0.3s ease; } .gallery__item:hover::after { background: rgba(26, 26, 46, 0.15); } .gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: var(--t-image-zoom); } .gallery__item:hover img { transform: scale(1.05); } .gallery__item--large { grid-column: span 2; grid-row: span 2; } .gallery__item--large img { aspect-ratio: auto; height: 100%; } /* Gallery "more" tile — 6th slot when total > 6 images. Shows a 2×2 mini-grid of the next 4 hidden photos under a dimmed overlay with "+N more" text. z-index is explicit so the mini-grid sits under the overlay, and the parent ::after hover tint is disabled here so it doesn't mask the thumbnails. */ .gallery__item--more { overflow: hidden; border-radius: 10px; cursor: pointer; position: relative; aspect-ratio: 4 / 3; } .gallery__item--more::after { display: none; } .gallery__more-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; position: absolute; inset: 0; z-index: 1; } .gallery__more-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Single-photo variant of the "more" tile — used when fewer than 4 images remain hidden (under 9 total), where a 2×2 grid would repeat photos. */ .gallery__more-single { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__more-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(26, 26, 46, 0.55); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .gallery__item--more:hover .gallery__more-overlay { background: rgba(26, 26, 46, 0.35); } .gallery__more-text { color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.5rem 1rem; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 4px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(12, 12, 16, 0.96); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* touch-action:none across the modal surfaces disables the browser's double-tap-to-zoom (a stray double-tap no longer zooms the photo) and lets our JS own the horizontal swipe. Clicks/taps still fire normally. */ .lightbox, .lightbox__image-wrap, .lightbox__image, .lightbox__close, .lightbox__prev, .lightbox__next { touch-action: none; -webkit-user-select: none; user-select: none; } .lightbox.is-active { opacity: 1; visibility: visible; } .lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; color: rgba(255, 255, 255, 0.7); background: none; border: none; cursor: pointer; z-index: 2001; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; } .lightbox__close:hover { color: #fff; } .lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255, 255, 255, 0.14); border: none; cursor: pointer; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; z-index: 2001; } .lightbox__prev { left: 1.5rem; } .lightbox__next { right: 1.5rem; } .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } .lightbox__image-wrap { max-width: 94vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lightbox__image { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); -webkit-user-drag: none; } .lightbox__counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; } /* ============================================ P3. SPECIFICATIONS SECTION ============================================ */ .specs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .specs__card { padding: 1.75rem; background: var(--color-bg-white); border-radius: 10px; border: 1px solid var(--color-border-light); transition: var(--t-transform-card); } .specs__card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(26, 26, 46, 0.08); } .specs__icon { color: var(--color-accent); margin-bottom: 1rem; } .specs__card-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 0.375rem; } .specs__card-value { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; } /* ============================================ P3b. ADVANTAGES — cutaway (CSS/SVG cross-section + stat chips) ============================================ */ .cutaway .cut-wrap { display: grid; grid-template-columns: 1fr 330px; gap: 46px; align-items: center; } .cut-eyebrow { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 1rem; } .cut-head { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.16; font-weight: 700; letter-spacing: -0.015em; color: var(--color-text-primary); } .cut-intro { margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.6; color: var(--color-text-muted); max-width: 44ch; } .cut-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cut-stats li { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: 9px; padding: 12px 12px 11px; } .cut-stats b { display: block; font-size: 1.1875rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; } .cut-stats li.is-accent b { color: var(--color-accent); } .cut-stats span { display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .cut-fig { margin: 0; } .cut-svg { width: 100%; height: auto; display: block; } .cut-gold { fill: var(--color-accent); stroke: none; } .cut-roomneut { fill: var(--color-bg-white); stroke: var(--color-text-primary); stroke-width: 1.5; } .cut-slab { fill: var(--color-text-primary); } .cut-neut { fill: var(--color-bg-white); stroke: var(--color-text-primary); stroke-width: 1.5; } .cut-div { stroke: rgba(26, 26, 46, 0.22); stroke-width: 1; } .cut-win { fill: rgba(26, 26, 46, 0.08); stroke: rgba(26, 26, 46, 0.30); stroke-width: 1; } .cut-open { fill: rgba(26, 26, 46, 0.05); stroke: var(--color-text-primary); stroke-width: 1.5; } .cut-rail { stroke: rgba(26, 26, 46, 0.45); stroke-width: 1.2; } .cut-grade { stroke: var(--color-text-primary); stroke-dasharray: 5 4; stroke-width: 1.4; opacity: 0.5; } .cut-grade-lbl { fill: var(--color-text-muted); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; } .cut-door { fill: rgba(26, 26, 46, 0.30); } .cut-numg { fill: var(--color-text-primary); font-size: 23px; font-weight: 800; letter-spacing: -0.02em; } .cut-ming { fill: var(--color-text-primary); font-size: 8.5px; font-weight: 600; opacity: 0.7; } .cut-lab text { fill: var(--color-text-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.07em; } .cut-tick { stroke: rgba(26, 26, 46, 0.28); stroke-width: 1; } .cut-cap { margin-top: 14px; font-size: 0.6875rem; color: var(--color-text-muted); text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; } .cut-key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; } .cut-key-gold { background: var(--color-accent); } .cut-key-neut { background: var(--color-bg-white); border: 1px solid rgba(26, 26, 46, 0.2); } @media (max-width: 900px) { .cutaway .cut-wrap { grid-template-columns: 1fr; gap: 30px; } .cut-fig { max-width: 360px; margin: 0 auto; } } @media (max-width: 480px) { .cut-stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================ P4. FLOOR PLANS SECTION ============================================ */ .floor-plans__tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .floor-plans__tab { padding: 0.625rem 1.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 4px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all 0.3s ease; } .floor-plans__tab:hover { border-color: var(--color-accent); color: var(--color-accent); } .floor-plans__tab.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .floor-plans__viewer { position: relative; min-height: 300px; } .floor-plans__image { display: none; } .floor-plans__image.is-active { display: block; animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .floor-plans__image img { display: block; width: 100%; height: auto; /* let the width/height attrs reserve the box ratio (no CLS) */ max-width: 900px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--color-border-light); } /* Compass — position + size + rotation all configurable per project via CMB2. The compass sits on a solid circular disc so it never blends into the plan drawing underneath (plans are thin dark lines on white — same palette as the compass glyphs). Rotation is applied to the SVG, not the disc, so the disc's shadow/border stay visually stable at any angle. */ .floor-plans__compass { position: absolute; z-index: 2; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--color-border-light); box-shadow: 0 4px 18px rgba(26, 26, 46, 0.16); pointer-events: none; } .floor-plans__compass svg { /* The disc is a snug backdrop: the compass fills almost all of it. */ width: 92%; height: auto; display: block; transform: rotate(var(--compass-rotation, 0deg)); } /* Counter-rotate the cardinal labels (N, S, W) and the E-sun so they always read right-side-up from the viewer's perspective, no matter how the outer disc is rotated to point true-north. `--compass-rotation` is set inline on the parent .floor-plans__compass div and cascades here via CSS-variable inheritance — we simply negate it with `calc(-1 * ...)`. `transform-box: fill-box` + `transform-origin: center` makes each group rotate around its own bounding-box center, which is why we don't need to hardcode pivot coordinates per letter. */ .floor-plans__compass .compass-label { transform-box: fill-box; transform-origin: center; transform: rotate(calc(-1 * var(--compass-rotation, 0deg))); } /* Letters additionally scale down — the 286×264 viewBox renders cardinal glyphs visually larger than the previous 309×310 viewBox at the same container width, so we match the editor-intended proportions. The sun (no `--letter` modifier) keeps its full size. */ .floor-plans__compass .compass-label--letter { transform: rotate(calc(-1 * var(--compass-rotation, 0deg))) scale(0.78); } /* S letter is naturally narrower than N/W in the source paths (25px vs 33/47px wide). At the shared 0.78 scale that makes it read as visibly smaller than the others. Bump S up so its rendered height matches N/W more closely without stretching the actual glyph shape. */ .floor-plans__compass .compass-label--s { transform: rotate(calc(-1 * var(--compass-rotation, 0deg))) scale(0.92); } /* N is the primary compass indicator (points true-north), so we give it more visual weight than S and W: no scale reduction AND a thin gold stroke on top of the fill to read as semi-bold. This preserves the glyph shape exactly. */ .floor-plans__compass .compass-label--n { transform: rotate(calc(-1 * var(--compass-rotation, 0deg))); transform-box: fill-box; transform-origin: center; } /* Size variants — clearly distinct so the admin setting is visible: indicator = small corner badge, background = larger disc. Widths are the DISC size; the compass glyph inside is 92% of it (snug ring, not a big empty circle). */ .floor-plans__compass--indicator { width: 72px; } .floor-plans__compass--background { width: clamp(124px, 12vw, 164px); } /* Position variants */ .floor-plans__compass--top-right { top: 1.5rem; right: 1.5rem; } .floor-plans__compass--top-left { top: 1.5rem; left: 1.5rem; } .floor-plans__compass--bottom-right { bottom: 1.5rem; right: 1.5rem; } .floor-plans__compass--bottom-left { bottom: 1.5rem; left: 1.5rem; } .floor-plans__compass--center { top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 767px) { .floor-plans__compass--indicator { width: 52px; } .floor-plans__compass--background { width: 88px; } .floor-plans__compass--top-right { top: 0.75rem; right: 0.75rem; } .floor-plans__compass--top-left { top: 0.75rem; left: 0.75rem; } .floor-plans__compass--bottom-right { bottom: 0.75rem; right: 0.75rem; } .floor-plans__compass--bottom-left { bottom: 0.75rem; left: 0.75rem; } } /* ============================================ P5. LOCATION SECTION ============================================ */ .location__content { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; align-items: stretch; } .location__highlights { display: flex; flex-direction: column; gap: 1.25rem; } .location__item { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; background: var(--color-bg-white); border-radius: 10px; border: 1px solid var(--color-border-light); } .location__item-icon { color: var(--color-accent); flex-shrink: 0; } .location__item-text { flex: 1; min-width: 0; } .location__item-distance { display: block; font-size: 1.125rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.2; } .location__item-label { display: block; font-size: 0.8125rem; color: var(--color-text-secondary); } /* Transport icon + time sit to the right, aligned vertically with the text column */ .location__item-transport { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; padding-left: 0.5rem; color: var(--color-text-muted); } .location__transport-icon { color: var(--color-text-muted); flex-shrink: 0; } .location__item-time { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; } .location__map { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; min-height: 300px; border: 1px solid var(--color-border-light); } .location__map-load { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1rem 1.5rem; color: var(--color-text-primary); background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 6px; font-weight: 600; } .location__map-load span { color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 400; } .location__map-load[hidden], .location__map iframe:not([src]) { display: none; } .location__map iframe { display: block; } .contact__form input:focus-visible, .contact__form textarea:focus-visible, .contact-overlay__form input:focus-visible, .contact-overlay__form textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* ============================================ P5b. PROJECT DESCRIPTION (free-text intro) ============================================ */ .project-about__inner { max-width: 780px; margin: 0 auto; text-align: center; } .project-about__overline { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1.5rem; } .project-about__text { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.75; color: var(--color-text-secondary); } .project-about__text p { margin: 0 0 1.25em; } .project-about__text p:last-child { margin-bottom: 0; } /* ============================================ P6. UNITS TABLE ============================================ */ .units__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid var(--color-border-light); /* v1.6.9.1: always-visible custom scrollbar as overflow hint. Works when the user has >12 columns and the table needs horizontal scrolling — the scrollbar is clearly visible on macOS/iOS where native scrollbars default to hidden. Firefox uses `scrollbar-width/color`, Webkit uses the ::-webkit-scrollbar family. Scroll-shadow via Lea Verou's trick doesn't work here: the table's own / backgrounds paint on top of the wrap, hiding any gradient we'd put on the wrap itself. */ scrollbar-width: thin; scrollbar-color: rgba(26, 26, 46, 0.35) rgba(26, 26, 46, 0.06); } .units__table-wrap::-webkit-scrollbar { height: 10px; } .units__table-wrap::-webkit-scrollbar-track { background: rgba(26, 26, 46, 0.06); border-radius: 0 0 10px 10px; } .units__table-wrap::-webkit-scrollbar-thumb { background: rgba(26, 26, 46, 0.35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .units__table-wrap::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 26, 46, 0.6); background-clip: padding-box; } .units__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .units__table thead { background: var(--color-bg-dark); color: #fff; } .units__table th { padding: 0.625rem 0.5rem; text-align: center; /* v1.6.11: centered headers + values */ font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: normal; /* v1.6.9.1: wrap header text so 10+ columns fit viewport */ vertical-align: bottom; line-height: 1.3; word-break: normal; overflow-wrap: break-word; } .units__table td { padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; /* keep value+suffix on one line (e.g. "128 m²") */ vertical-align: middle; font-size: 0.875rem; text-align: center; /* v1.6.11 */ } /* Narrow fixed width for the auto-№ column so it doesn't eat horizontal space at 15+ cols */ .units__table .units__th-num, .units__table .units__td-num { width: 2.5rem; min-width: 2.5rem; text-align: center; color: var(--color-text-muted); } /* Row colors. Zebra everywhere; sold rows use clearly DARKER shades of the SAME warm palette as the regular stripes (no warm-vs-cool clash, but an unavailable row catches the eye immediately), plus muted text and the Sold badge. Hover is one solid warm tint with higher specificity than every row background, so all rows — available, sold, reserved — react uniformly. */ /* Row colors — NO zebra (deliberate). With only a handful of columns, per-cell row dividers, and a full-row hover, zebra added little and competed with the status fills for the one background channel — mixed tables read as muddy. So STATUS is the only background signal: - available → clean white (its real price makes the buyable rows stand out) - sold → muted warm-grey fill + grey left strip + Sold badge + secondary text - reserved → light gold fill + gold left strip + Reserved badge Row separation comes from the per-cell bottom border, not stripes. */ .units__table tbody tr { background: var(--color-bg-white); transition: background 0.15s ease; } .units__table tbody tr.units__row--sold { background: #ece8e2; } .units__table tbody tr.units__row--reserved { background: rgba(201, 169, 110, 0.12); } /* Left status strip. Desktop (table rows, border-collapse): inset shadow on the first cell paints down the row's left edge. Mobile cards override this onto the block (see the mobile media query). */ .units__table tbody tr.units__row--sold td:first-child { box-shadow: inset 4px 0 0 #9c9488; } .units__table tbody tr.units__row--reserved td:first-child { box-shadow: inset 4px 0 0 var(--color-accent); } .units__table tbody tr:last-child td { border-bottom: none; } /* Hover — one warm tint that beats every background+status combo (equal specificity, declared later in source). */ .units__table tbody tr:hover, .units__table tbody tr.units__row--sold:hover, .units__table tbody tr.units__row--reserved:hover { background: #f1e7d4; } /* Price is the most important value — emphasise it (the price column is auto-detected in units.php and tagged .units__td--price). Desktop: heavier weight. Mobile gets a much stronger treatment in the media query below. */ .units__table td.units__td--price { font-weight: 500; font-size: 1rem; } /* ---- Hero slide overlay caption (per-image text, level.ru style) ---- No box, no blur: the text sits directly on the photo and readability comes from a soft position-aware gradient scrim painted on the slide overlay (below) plus a subtle text-shadow — the level.ru treatment. With no boxed background there is also no reserved empty space when only one of heading/text is filled in. */ .project-hero__slide-caption { position: absolute; z-index: 3; max-width: min(560px, 82%); color: #fff; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 18px rgba(0, 0, 0, 0.25); } .project-hero__slide-heading { font-size: clamp(1.5rem, 2.8vw, 2.375rem); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; } .project-hero__slide-text { font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); line-height: 1.55; margin: 0; opacity: 0.95; } .project-hero__slide-heading + .project-hero__slide-text { margin-top: 0.5rem; } /* Optional per-slide CTA button. The caption is pointer-events:none (so the slider can be dragged through it), so the button must opt back in. */ .project-hero__slide-cta { display: inline-flex; align-items: center; margin-top: 1.1rem; padding: 0.65rem 1.4rem; background: #fff; color: var(--color-text-primary, #1a1a2e); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; text-decoration: none; text-shadow: none; pointer-events: auto; transition: transform 0.2s ease, box-shadow 0.2s ease; } .project-hero__slide-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .project-hero__slide-caption--bottom-left { left: 2rem; bottom: 2rem; } .project-hero__slide-caption--bottom-right { right: 2rem; bottom: 2rem; text-align: right; } .project-hero__slide-caption--top-left { left: 2rem; top: 2rem; } .project-hero__slide-caption--top-right { right: 2rem; top: 2rem; text-align: right; } .project-hero__slide-caption--center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* Position-aware scrims: a near-invisible dark gradient over the part of the photo the caption sits on. Painted on the existing slide overlay element so it never affects layout. The base overlay (bottom 45%→0 gradient) already covers bottom captions; top/center captions get their own region. */ .project-hero__slide--cap-bottom-left .project-hero__slide-overlay, .project-hero__slide--cap-bottom-right .project-hero__slide-overlay { background: linear-gradient( to top, rgba(8, 10, 20, 0.6) 0%, rgba(8, 10, 20, 0.25) 32%, rgba(0, 0, 0, 0) 60% ); } .project-hero__slide--cap-top-left .project-hero__slide-overlay, .project-hero__slide--cap-top-right .project-hero__slide-overlay { background: linear-gradient( to bottom, rgba(8, 10, 20, 0.55) 0%, rgba(8, 10, 20, 0.18) 30%, rgba(0, 0, 0, 0) 52% ), linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 45%); } .project-hero__slide--cap-center .project-hero__slide-overlay { background: radial-gradient(ellipse 72% 56% at 50% 50%, rgba(8, 10, 20, 0.42), rgba(0, 0, 0, 0) 74%), linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%); } @media (max-width: 767px) { /* Mirror the DESKTOP treatment on mobile (per request): keep the authored caption position and its position-aware scrim, just smaller text and tighter insets. The width cap keeps a top caption clear of the top-right badge; the position-aware scrims defined above (not media-scoped) carry over unchanged, so mobile reads like a scaled-down desktop. */ .project-hero__slide-heading { font-size: 1.375rem; } .project-hero__slide-text { font-size: 0.875rem; } .project-hero__slide-caption { max-width: 80%; } .project-hero__slide-caption--bottom-left { left: 1.25rem; bottom: 1.25rem; } .project-hero__slide-caption--bottom-right { right: 1.25rem; bottom: 1.25rem; } .project-hero__slide-caption--top-left { left: 1.25rem; top: 1.25rem; } .project-hero__slide-caption--top-right { right: 1.25rem; top: 1.25rem; } .project-hero__slide-caption--center { max-width: calc(100% - 2.5rem); } } /* Sold — readable text (secondary, NOT muted — muted washed out on the wash); the left strip + Sold badge carry the explicit status. Mobile ::before column labels too, so they don't vanish on the tinted card. */ .units__row--sold td, .units__row--sold td::before { color: var(--color-text-secondary); } .units__status { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 100px; } /* Badges. Available is the quiet default (subtle green tint); the two status changes are SOLID pills so they read clearly on a tinted/washed row. */ .units__status--available { background: rgba(74, 140, 111, 0.14); color: var(--color-status-done); } .units__status--reserved { background: var(--color-accent); color: #fff; } .units__status--sold { background: #6f6b75; color: #fff; } /* ============================================ P7. CONSTRUCTION CHRONOLOGY ============================================ */ /* * Arc / "fan" photo carousel — initChronology() in main.js drives the geometry * (modern-variant fan: flat, no blur, generous neighbours). Progressive * enhancement: without the `.is-ready` class (JS off) the photos fall back to a * simple wrapped, captioned flow and the interactive chrome stays hidden. */ .chronology__widget { position: relative; isolation: isolate; /* contain the fan's z-index (centre photo hits 1000) so it never paints over the fixed header */ max-width: 1180px; margin: 0 auto; outline: none; -webkit-tap-highlight-color: transparent; } /* —— focal animated period label —— */ .chronology__head { position: relative; z-index: 5; text-align: center; pointer-events: none; } .chronology__label-wrap { position: relative; display: inline-block; min-width: 60%; } .chronology__month, .chronology__label-item { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-text-primary); white-space: nowrap; } .chronology__month { transition: opacity 0.28s ease; } .chronology__label-track { position: absolute; inset: 0; display: none; /* JS shows this and hides the static month */ overflow: visible; /* let the sliding label's blur breathe — no hard clipped edge (page has overflow-x:hidden) */ } .chronology__label-item { position: absolute; left: 50%; top: 50%; will-change: transform, opacity, filter; } .chronology__counter { margin-top: 0.6rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--color-text-muted); } /* —— fan stage —— */ .chronology__stage-wrap { position: relative; margin-top: 0.5rem; } .chronology__stage { position: relative; width: 100%; display: flex; /* fallback flow; JS switches to block + sets height */ flex-wrap: wrap; justify-content: center; gap: 1rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .chronology__widget.is-ready .chronology__stage { display: block; cursor: grab; } .chronology__photo { position: relative; /* fallback flow */ width: 240px; height: 158px; margin: 0; border-radius: 5px; overflow: hidden; background: var(--color-border-light); border: 1px solid rgba(26, 26, 46, 0.08); box-shadow: 0 18px 40px -20px rgba(26, 26, 46, 0.45); } .chronology__widget.is-ready .chronology__photo { position: absolute; left: 50%; top: 0; will-change: transform, opacity; backface-visibility: hidden; } .chronology__photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; /* own GPU layer: the raster is cached once, so the parent's inspect/hover scale is a composite transform (GPU bilinear) rather than a per-frame re-raster — kills the contrasty-edge shimmer on high-refresh desktops while zooming. will-change (not translateZ(0), which Chrome flattens to a 2D no-op here) is the reliable promotion hint. */ will-change: transform; backface-visibility: hidden; } .chronology__photo::after { /* readability scrim behind the caption */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.42) 100%); pointer-events: none; } .chronology__photo-cap { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.55rem; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.625rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.94); } .chronology__photo-no { flex-shrink: 0; } .chronology__photo-period { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* —— start / latest markers (on the first & last photos) + loop seam divider —— */ .chronology__photo-badge { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: var(--color-accent, #c9a96e); color: #1a1a2e; font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); pointer-events: none; /* decorative — never eat a tap/drag on the photo */ } .chronology__photo-badge--latest { background: #1a1a2e; color: var(--color-accent, #c9a96e); border: 1px solid var(--color-accent, #c9a96e); } .chronology__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } @media (prefers-reduced-motion: no-preference) { .chronology__badge-dot { animation: chronoPulse 1.8s ease-in-out infinite; } } @keyframes chronoPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } } .chronology__seam { position: absolute; left: 50%; top: 0; width: 34px; /* box = the ring, so translate(-50%,-50%) centres the ring on the arc point */ height: 34px; pointer-events: none; will-change: transform, opacity; } .chronology__seam-ring { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed var(--color-accent, #c9a96e); background: transparent; color: var(--color-accent, #c9a96e); } .chronology__seam-label { position: absolute; /* hangs below the ring without shifting the ring off the point */ top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-text-secondary, rgba(26, 26, 46, 0.62)); } /* —— arrows —— */ .chronology__arrow { position: absolute; top: 44%; transform: translateY(-50%); width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-primary); font-size: 1.5rem; line-height: 0; cursor: pointer; z-index: 1100; /* always above the fanned photos */ box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .chronology__arrow--prev { left: 4px; } .chronology__arrow--next { right: 4px; } .chronology__arrow:hover { transform: translateY(-50%) scale(1.08); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-dark); } /* —— bottom progress slider —— */ .chronology__track-wrap { max-width: 340px; margin: 0.6rem auto 0; padding: 0.7rem 0; /* comfortable grab zone around the 3px line */ cursor: grab; touch-action: none; /* dragging the slider must not scroll the page */ -webkit-user-select: none; user-select: none; } .chronology__track-wrap:active { cursor: grabbing; } .chronology__track { position: relative; height: 3px; border-radius: 3px; background: rgba(26, 26, 46, 0.12); } .chronology__thumb { position: absolute; top: 50%; left: 0; width: 26px; height: 7px; border-radius: 6px; background: var(--color-accent); transform: translate(-50%, -50%); transition: left 0.08s linear; } .chronology__hint { text-align: center; margin-top: 1.1rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } /* interactive chrome is hidden until JS is ready, and always for one photo */ .chronology__arrow, .chronology__track-wrap, .chronology__hint { display: none; } .chronology__widget.is-ready .chronology__track-wrap, .chronology__widget.is-ready .chronology__hint { display: block; } .chronology__widget.is-ready .chronology__arrow { display: flex; } .chronology__widget.is-single .chronology__arrow, .chronology__widget.is-single .chronology__track-wrap, .chronology__widget.is-single .chronology__hint, .chronology__widget.is-single .chronology__counter { display: none; } @media (max-width: 600px) { .chronology__arrow { width: 40px; height: 40px; font-size: 1.3rem; } } /* News "All" link */ .news__all-link { text-align: center; margin-top: 2.5rem; } .news__view-all { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-accent); letter-spacing: 0.03em; transition: gap 0.3s ease; } .news__view-all:hover { gap: 0.75rem; } /* ============================================ 10. ANIMATIONS & SCROLL REVEAL ============================================ */ [data-animate] { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } [data-animate="fade-up"] { transform: translateY(40px); } [data-animate="fade-left"] { transform: translateX(-40px); } [data-animate="fade-right"] { transform: translateX(40px); } [data-animate].is-visible { opacity: 1; transform: none; } /* Milestone scroll animation */ .progress__milestone { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } .progress__milestone.is-visible { opacity: 1; transform: translateX(0); } /* ============================================ 11. MEDIA QUERIES — TABLET (max-width: 1279px) ============================================ */ @media (max-width: 1279px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } .about__inner { gap: 3rem; } .about__columns { height: 450px; } .progress__projects { gap: 3rem; } .news__grid { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } /* Project hero tablet — narrower card, keep side-by-side */ .project-hero__card { width: 320px; min-width: 280px; } .project-hero__slider { min-height: 400px; } .gallery__grid { grid-template-columns: repeat(2, 1fr); } .gallery__item--large { grid-column: span 2; grid-row: span 1; } .gallery__item--large img { aspect-ratio: 16 / 9; } .specs__grid { grid-template-columns: repeat(2, 1fr); } .location__content { grid-template-columns: 1fr 1.5fr; } /* Timeline: no changes needed at tablet — single-slide view works */ } /* ============================================ 11b. LANGUAGE SWITCHER (desktop) ============================================ */ .header__lang { display: flex; align-items: center; gap: 0.25rem; margin-left: 1rem; } .header__lang-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 3px; background: none; color: var(--color-text-muted); transition: color 0.3s ease, background 0.3s ease; border: none; cursor: pointer; font-family: inherit; } .header__lang-btn:hover { color: var(--color-text-primary); } .header__lang-btn.is-active { color: var(--color-accent); background: rgba(201, 169, 110, 0.1); } .header[data-state="top"] .header__lang-btn { color: rgba(255, 255, 255, 0.5); } .header[data-state="top"] .header__lang-btn:hover { color: rgba(255, 255, 255, 0.85); } .header[data-state="top"] .header__lang-btn.is-active { color: var(--color-accent); background: rgba(201, 169, 110, 0.15); } /* ============================================ 11c. BOTTOM NAV + OVERLAYS (hidden on desktop) ============================================ */ .bottom-nav, .contact-overlay, .mobile-menu-overlay { display: none; } /* Card swipe track (desktop — no swipe, single image) */ .project-card__swipe-track { display: contents; } .project-card__slide--image { display: contents; } .project-card__slide--map { display: none; } .project-card__dots { display: none; } /* Hero slider dots (hidden on desktop) */ .project-hero__slider-dots { display: none; } /* ============================================ 12. MEDIA QUERIES — MOBILE (max-width: 767px) ============================================ */ @media (max-width: 767px) { :root { --header-h: 4rem; } /* Header — hidden on mobile, replaced by bottom nav */ .header { display: none; } .header__lang { display: none; } /* Hero — main layout overrides are in the bottom-nav section below */ /* Projects — vertical stack */ .projects__grid { grid-template-columns: 1fr; gap: 2rem; } .project-card__image { aspect-ratio: 16 / 10; } /* About */ .about__inner { grid-template-columns: 1fr; gap: 2.5rem; } .about__columns { height: 350px; } .about__scroll-track img { height: 200px; } .about__stats { gap: 2rem; } /* Progress — flex layout already wraps via flex-basis + min-width */ .progress__projects { gap: 3rem; } .progress__project { flex-basis: 100%; } .progress__milestone-image { max-width: 100%; } /* News */ .news__grid { grid-template-columns: 1fr; } /* Contact */ .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; } .form-row { grid-template-columns: 1fr; } .contact__submit { width: 100%; text-align: center; } /* Footer */ .footer__top { grid-template-columns: 1fr; gap: 2rem; } /* Project hero mobile — stack vertically */ .project-hero { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1rem; } .project-hero__container { flex-direction: column; } .project-hero__card { width: 100%; min-width: 0; } .project-hero__slider { min-height: 280px; } .project-hero__slide-title { font-size: 1.75rem; } .project-hero__slide-content { padding: 1.5rem; } .project-hero__badge { width: 56px; height: 56px; font-size: 0.5rem; top: 0.75rem; right: 0.75rem; } .gallery__grid { grid-template-columns: 1fr; } .gallery__item--large { grid-column: span 1; grid-row: span 1; } .gallery__item--large img { aspect-ratio: 16 / 10; } .lightbox__prev { left: 0.75rem; } .lightbox__next { right: 0.75rem; } .specs__grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .location__content { grid-template-columns: 1fr; } .location__map { height: 300px; } /* Units table — card layout on mobile */ .units__table thead { display: none; } .units__table, .units__table tbody, .units__table tr, .units__table td { display: block; } .units__table tr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border-light); } .units__table td { padding: 0.25rem 0; border-bottom: none; white-space: normal; display: flex; justify-content: space-between; align-items: center; } .units__table td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); flex-shrink: 0; margin-right: 1rem; } /* Status strip spans the whole card here (cards are display:block), so move it off the first cell and onto the . Extra left padding clears it. */ .units__table tbody tr.units__row--sold td:first-child, .units__table tbody tr.units__row--reserved td:first-child { box-shadow: none; } .units__table tr.units__row--sold, .units__table tr.units__row--reserved { padding-left: 1.5rem; } .units__table tr.units__row--sold { box-shadow: inset 4px 0 0 #9c9488; } .units__table tr.units__row--reserved { box-shadow: inset 4px 0 0 var(--color-accent); } /* Hide the auto row-counter cell on mobile cards: it duplicates the project's own Unit/№ column (the card already represents one unit). */ .units__table td.units__td-num { display: none; } /* Price is the headline of each card — pull it out of the flat label/value list: a divider above, larger accent-dark value, label kept small. */ .units__table td.units__td--price { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-light); font-size: 1.25rem; font-weight: 500; color: var(--color-text-primary); } .units__table td.units__td--price::before { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); align-self: center; } /* Hero — no header offset on mobile */ .hero { min-height: 100svh; } .project-hero { padding-top: 1rem; padding-bottom: 1rem; } /* Body padding for bottom nav + safe area background color */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); } /* Fill safe area below bottom nav — solid white to match the near-opaque bottom nav. Fixes color mismatch on iOS Safari where the home-indicator strip showed the beige page bg through the semi-transparent rgba value. */ body::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: env(safe-area-inset-bottom, 0); background: #ffffff; z-index: 999; } /* Hero accounts for bottom nav — center title, scroll indicator below it midway to bottom */ .hero { height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0)); min-height: 500px; align-items: center; justify-content: center; } .hero__content { padding-bottom: 0; text-align: center; width: 100%; } .hero__title--logo { justify-content: center; } .hero__title--logo svg { height: clamp(120px, 28vh, 200px); } .hero__scroll-indicator { bottom: 18%; /* inherits left:0; right:0 from base rule — no transform needed */ } /* ---- Bottom Nav ---- */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; height: calc(64px + env(safe-area-inset-bottom, 0)); /* Fully opaque white — fixes iOS Safari safe area beige bleed-through. Semi-transparent + backdrop-filter: blur looked nice but let the beige body background (#f5f4f0) peek through the 3% transparency in the safe area, where there's no scrollable content behind to justify frosted glass. */ background: #ffffff; border-top: 1px solid var(--color-border-light); align-items: flex-start; justify-content: space-around; padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); /* Promote to its own compositing layer so the fixed bar (and its protruding contact circle, which paints above the bar's box) is composited per scroll frame instead of repainted on the main thread. Fixes mobile scroll jank + the stale-paint "trail" above the bar. Identity transform = geometry unchanged; do NOT use overflow/contain here — would clip the circle. */ transform: translateZ(0); } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 0 6px; background: none; border: none; color: var(--color-text-muted); text-decoration: none; font-family: inherit; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; border-radius: 8px; margin: 4px 2px; position: relative; } .bottom-nav__item.is-active { background: rgba(0, 0, 0, 0.06); color: var(--color-text-primary); } .bottom-nav__item--spacer { pointer-events: none; visibility: hidden; } .bottom-nav__icon { width: 22px; height: 22px; } .bottom-nav__icon--close { display: none; } .bottom-nav__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } /* Center contact button — protruding green circle */ .bottom-nav__item--contact { position: relative; } .bottom-nav__contact-circle { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--color-status-done); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(74, 140, 111, 0.35); transition: transform 0.2s ease; } .bottom-nav__item--contact .bottom-nav__label { margin-top: 28px; } .bottom-nav__item--contact:active .bottom-nav__contact-circle { transform: translateX(-50%) scale(0.95); } /* Menu button icon swap */ .bottom-nav__item[data-tab="menu"].is-open .bottom-nav__icon--menu { display: none; } .bottom-nav__item[data-tab="menu"].is-open .bottom-nav__icon--close { display: block; } /* ---- Contact Overlay ---- */ .contact-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0)); z-index: 999; background: var(--color-bg-dark); transform: translateY(100%); /* visibility:hidden when closed — otherwise this full-screen DARK fixed layer is painted just below the viewport at all times and iOS smears it as a black trail above the bottom nav during scroll. The delayed visibility transition keeps the slide-out animation visible. */ visibility: hidden; transition: transform 0.4s var(--ease-out-expo), visibility 0s linear 0.4s; overflow-y: auto; -webkit-overflow-scrolling: touch; } .contact-overlay.is-open { transform: translateY(0); visibility: visible; transition: transform 0.4s var(--ease-out-expo), visibility 0s; } .contact-overlay__close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0.5rem; transition: color 0.3s ease; } .contact-overlay__close:hover { color: #fff; } .contact-overlay__inner { padding: 3rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .contact-overlay__title { font-size: 1.75rem; font-weight: 700; color: #fff; } .contact-overlay__details { display: flex; flex-direction: column; } .contact-overlay__link { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.8); font-size: 1.0625rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; transition: color 0.3s ease; } .contact-overlay__link:hover { color: #fff; } .contact-overlay__form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; } .contact-overlay__form input, .contact-overlay__form textarea { width: 100%; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: #fff; font-family: inherit; font-size: 0.9375rem; outline: none; transition: border-color 0.3s ease; } .contact-overlay__form input:focus, .contact-overlay__form textarea:focus { border-color: var(--color-accent); } .contact-overlay__form input::placeholder, .contact-overlay__form textarea::placeholder { color: rgba(255, 255, 255, 0.3); } .contact-overlay__submit { width: 100%; padding: 1rem; background: var(--color-accent); color: #fff; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border: none; border-radius: 4px; cursor: pointer; font-family: inherit; transition: background 0.3s ease; } .contact-overlay__submit:hover { background: var(--color-accent-hover); } /* ---- Mobile Menu Overlay ---- */ .mobile-menu-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0)); z-index: 998; background: var(--color-bg-dark); transform: translateY(100%); /* Same iOS black-trail guard as .contact-overlay above. */ visibility: hidden; transition: transform 0.4s var(--ease-out-expo), visibility 0s linear 0.4s; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu-overlay.is-open { transform: translateY(0); visibility: visible; transition: transform 0.4s var(--ease-out-expo), visibility 0s; } .mobile-menu-overlay__inner { padding: 3rem 1.5rem 2rem; } .mobile-menu-overlay__nav { display: flex; flex-direction: column; gap: 0; margin-bottom: 2.5rem; } .mobile-menu-overlay__link { font-size: 1.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; transition: color 0.3s ease; } .mobile-menu-overlay__link:hover { color: var(--color-accent); } .mobile-menu-overlay__lang { margin-bottom: 2rem; } .lang-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-bottom: 0.75rem; } .lang-switcher { display: flex; gap: 0.5rem; flex-wrap: wrap; } .lang-switcher__btn { padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: inherit; transition: all 0.3s ease; } .lang-switcher__btn:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .lang-switcher__btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .mobile-menu-overlay__contact { margin-top: 2rem; color: rgba(255, 255, 255, 0.4); font-size: 0.875rem; line-height: 1.8; } /* ---- Project Card Swipe (mobile) ---- */ .project-card__swipe-track { display: flex; width: 200%; transition: transform 0.4s var(--ease-out-expo); } .project-card__swipe-track.is-dragging { transition: none; } .project-card__slide { flex: 0 0 50%; min-width: 0; overflow: hidden; } .project-card__slide--image { display: block; } .project-card__slide--map { position: relative; display: flex; align-items: center; justify-content: center; background: var(--color-bg-light); overflow: hidden; } /* Map iframe: oversized + offset to push Google's UI controls (zoom buttons, fullscreen, logo, "view larger map") outside the visible clip area. pointer-events:none makes it fully static. */ .project-card__slide--map iframe { position: absolute; top: -50px; left: -50px; width: calc(100% + 100px); height: calc(100% + 100px); border: 0; pointer-events: none; } .project-card__map-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--color-text-muted); font-size: 0.8125rem; } /* "Map off" state — shown when optional cookies are declined/undecided. */ .project-card__map-placeholder--off { gap: 0.3rem; padding: 0 1rem; text-align: center; } .project-card__map-off-title { font-weight: 600; font-size: 0.85rem; color: var(--color-text-primary); } .project-card__map-off-text { font-size: 0.72rem; line-height: 1.4; color: var(--color-text-secondary); } .project-card__map-off-cta { margin-top: 0.15rem; font-size: 0.75rem; font-weight: 600; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* Dot indicators */ .project-card__dots { display: flex; justify-content: center; gap: 6px; position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 2; } .project-card__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; } .project-card__dot.is-active { width: 8px; height: 8px; background: #fff; } /* ---- Hero Slider Dots (mobile) ---- */ .project-hero__slider-counter { display: none; } .project-hero__slider-dots { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.875rem; border-radius: 50px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3); } .project-hero__slider-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; } .project-hero__slider-dot.is-active { width: 8px; height: 8px; background: #fff; } } /* ============================================ 13. MEDIA QUERIES — SMALL (max-width: 479px) ============================================ */ @media (max-width: 479px) { .hero__title { font-size: 3rem; } .hero__title--logo svg { height: clamp(100px, 24vh, 160px); } .about__stats { flex-direction: column; gap: 1.25rem; } .about__stat { flex-direction: row; align-items: baseline; gap: 0.75rem; } .about__stat-number { font-size: 2rem; } .project-card__badges { flex-direction: column; align-items: flex-end; } /* Project page small */ .specs__grid { grid-template-columns: 1fr; } }