.svm-text-dark h3 { color: var(--page-primary); } .svm-text-dark p{ max-width: 100%; color: var(--page-primary); } .lv-text h4{ color: var(--page-primary); } .lv-text p{ color: var(--page-primary); } .lv-text p b { color: var(--page-primary); } /*══════════════════════════════════════════════════════ arch.css — Architectural Page Additional Sections Palette: #66263D (primary) / #DB99B5 (accent/secondary) Add in AFTER global.css ══════════════════════════════════════════════════════*/ /* ─── PAGE PALETTE VARS (already in global.css via data-page) Re-declaring here so this file is self-contained if needed) ─── */ [data-page="architectural"] { --page-primary: #66263D; --page-secondary: #DB99B5; --page-bg-light: #f5eef1; } /* ─── SVM TEXT COLOR FIX for this page ────────────────── global.css hardcodes navy — override for page palette ─── */ [data-page="architectural"] .svm-text-dark h3, [data-page="architectural"] .svm-text-dark .svm-eyebrow { color: var(--page-primary); } [data-page="architectural"] .svm-text-dark p { color: rgba(102, 38, 61, .7); } /* ─── SCROLL REVEAL OPACITY FIX ───────────────────────── Elements already in the viewport on page load (e.g. logos-inner at the top of a short page) never get observed. Force-show them. ─── */ [data-page="architectural"] .logos-inner.scroll-reveal, [data-page="architectural"] .collection-inner.scroll-reveal { opacity: 1; transform: none; } /* ─── MEDIA LAYOUT (text + video side by side) ────── Used for "From start to finish / Lumion Pro" section and "Lumion View inside your modelling tool" section ── */ .media-layout { background: var(--page-primary); padding: 80px 0; position: relative; z-index: 5; } .media-layout--light { background: var(--page-bg-light, #f5eef1); } .media-layout-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; } .media-layout--reverse .media-layout-inner { grid-template-columns: 7fr 5fr; } .media-layout--reverse .media-layout-text { order: 2; } .media-layout--reverse .media-layout-media { order: 1; } /* Eyebrow label e.g. "Lumion Pro" */ .media-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--page-secondary); margin-bottom: 14px; opacity: .9; } .media-layout--light .media-eyebrow { color: var(--page-primary); } .media-layout-text h4 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; color: var(--page-secondary); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 24px; } .media-layout--light .media-layout-text h4 { color: var(--page-primary); } .media-layout-text p { font-size: 15px; color: rgba(219, 153, 181, .82); line-height: 1.7; margin-bottom: 14px; } .media-layout--light .media-layout-text p { color: rgba(102, 38, 61, .75); } .media-layout-text p b { color: #fff; } .media-layout--light .media-layout-text p b { color: var(--page-primary); } .media-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } /* Video/image side */ .media-layout-media { border-radius: 10px; overflow: hidden; position: relative; } .media-layout-media video, .media-layout-media img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 10px; } .media-layout-media img { aspect-ratio: 16/9; object-fit: cover; } /* ─── SVM with NO video (text-only scroll section) ─── */ /* The arch page svm1 has no video, just the text morphing */ .svm-section--text-only .svm-video-wrap { display: none; } /* ─── LOGO COLLECTION LIGHT BG (Seamless workflow section) ─ Reuses .logos-section but with page accent color dots ─── */ .logos-section--page .logos-title { color: var(--page-primary); } .logos-section--page .logos-sub { color: rgba(102, 38, 61, .65); } .logos-section--page .logos-dot.active { background: var(--page-primary); } .logos-section--page .logos-dot { background: rgba(102, 38, 61, .2); } .logos-section--page .logos-prev, .logos-section--page .logos-next { color: var(--page-primary); } .logos-section--page .logos-viewport::before { background: linear-gradient(to right, #f3f3f3, transparent); } .logos-section--page .logos-viewport::after { background: linear-gradient(to left, #f3f3f3, transparent); } /* ─── COLLECTION GRID ("See your designs in the best light") ─ Two-row asymmetric grid: small+large image/video pairs ─── */ .collection-section { background: var(--page-bg-light, #f5eef1); padding: 80px 0; position: relative; z-index: 5; } .collection-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .collection-title { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; color: var(--page-primary); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 16px; } .collection-desc { font-size: 15px; color: rgba(102, 38, 61, .7); line-height: 1.7; max-width: 680px; margin-bottom: 56px; } /* Each row: small col + large col */ .collection-row { display: grid; grid-template-columns: 1fr 1.78fr; gap: 20px; margin-bottom: 20px; } .collection-row--reverse { grid-template-columns: 1.78fr 1fr; } .collection-row--reverse .collection-col:first-child { order: 2; } .collection-row--reverse .collection-col:last-child { order: 1; } .collection-col { position: relative; } /* Image/video wrapper with hover zoom */ .collection-media { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: var(--page-primary); } .collection-col--small .collection-media { aspect-ratio: 1 / 1; } .collection-col--large .collection-media { aspect-ratio: 16 / 9; } .collection-media img, .collection-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .55s cubic-bezier(.25,.46,.45,.94); } .collection-media:hover img { transform: scale(1.04); } /* Caption overlay on hover */ .collection-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 18px; font-size: 13px; color: rgba(255,255,255,.9); background: linear-gradient(transparent, rgba(102,38,61,.55)); opacity: 0; transition: opacity .3s; pointer-events: none; } .collection-media:hover .collection-caption { opacity: 1; } /* ─── FULL-WIDTH IMAGE SECTION ("From start to finish" big render) ─ */ .full-image-section { background: var(--page-primary); padding: 0; position: relative; z-index: 5; } .full-image-section img { width: 100%; display: block; max-height: 70vh; object-fit: cover; object-position: center; } /* ─── CENTRED BODY TEXT SECTION ("A world of possibilities") ─── */ .body-center-section { background: var(--page-primary); padding: 80px 40px; text-align: center; position: relative; z-index: 5; } .body-center-section h4 { font-size: clamp(32px, 4vw, 56px); font-weight: 700; color: var(--page-secondary); letter-spacing: -.025em; margin-bottom: 16px; } .body-center-section h5 { font-size: clamp(18px, 2vw, 26px); font-weight: 400; color: rgba(219, 153, 181, .75); line-height: 1.5; } /* ─── HOTSPOT INTERACTIVE IMAGE ───────────────────── + button on image that reveals detail panel on click ─── */ .hotspot-section { background: var(--page-primary); padding: 80px 0; position: relative; z-index: 5; } .hotspot-inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .hotspot-wrap { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; } .hotspot-wrap > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Hotspot + button */ .hotspot-btn { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgba(219, 153, 181, .9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); transition: background .2s, transform .2s; z-index: 10; } .hotspot-btn:hover { background: #DB99B5; transform: translate(-50%, -50%) scale(1.12); } .hotspot-btn svg { display: block; } .hotspot-btn path { stroke: #66263D; } /* Slide-in drawer */ .hotspot-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; background: rgba(245, 238, 241, .97); transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 20; padding: 24px 20px; border-radius: 0 10px 10px 0; } .hotspot-drawer.open { transform: translateX(0); } .hotspot-drawer-close { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: var(--page-primary); font-size: 20px; line-height: 1; } .hotspot-drawer h5 { font-size: 16px; font-weight: 600; color: var(--page-primary); margin-bottom: 10px; } .hotspot-drawer p { font-size: 14px; color: rgba(102, 38, 61, .75); line-height: 1.65; } /* Swap images on hotspot open */ .hotspot-swap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease; pointer-events: none; } .hotspot-swap-img.visible { opacity: 1; } /* ─── RESPONSIVE ─────────────────────────────────── */ @media (max-width: 900px) { .media-layout-inner, .media-layout--reverse .media-layout-inner { grid-template-columns: 1fr; gap: 40px; } .media-layout--reverse .media-layout-text { order: 1; } .media-layout--reverse .media-layout-media { order: 2; } .collection-row, .collection-row--reverse { grid-template-columns: 1fr; } .collection-row--reverse .collection-col:first-child { order: 1; } .collection-row--reverse .collection-col:last-child { order: 2; } .collection-col--small .collection-media { aspect-ratio: 16/9; } } @media (max-width: 768px) { .media-layout { padding: 60px 0; } .media-layout-inner { padding: 0 20px; } .collection-inner { padding: 0 20px; } .collection-section { padding: 60px 0; } .hotspot-inner { padding: 0 20px; } .hotspot-drawer { width: 240px; } .body-center-section { padding: 60px 20px; } }