/* ============================================ FEITSMA VASTGOED - Page Styles ============================================ */ /* --- Page-level overrides --- */ :root { --color--purple: #bea9fa; --color--purple-dark: #9b7ff0; --color--purple-light: #d4c4ff; --color--dark-surface: #1c1e24; --color--dark-border: #32343a; --color--dark-muted: #5a5c62; --color--item-text: #505256; --color--item-text-dark: #bebebe; } /* --- Shared button with dot animation --- */ .vg-btn { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.5rem; font-weight: 500; border-radius: 3rem; text-decoration: none; position: relative; cursor: pointer; transition: padding 0.35s cubic-bezier(.175, .885, .32, 1.275); } .vg-btn_dot { border-radius: 50%; transform: scale(0); position: absolute; top: 50%; } /* Size: default */ .vg-btn { padding: 1rem 1.75rem; font-size: 1rem; } .vg-btn:hover { padding-left: 2.25rem; } .vg-btn_dot { width: 0.5rem; height: 0.5rem; left: 1rem; margin-top: -0.25rem; } /* Size: small */ .vg-btn.is-small { padding: 0.875rem 1.5rem; font-size: 0.875rem; } .vg-btn.is-small:hover { padding-left: 2rem; } .vg-btn.is-small .vg-btn_dot { width: 7px; height: 7px; left: 0.875rem; margin-top: -3.5px; } /* Size: large */ .vg-btn.is-large { padding: 1.125rem 2rem; } .vg-btn.is-large:hover { padding-left: 2.5rem; } .vg-btn.is-large .vg-btn_dot { width: 8px; height: 8px; left: 1.125rem; margin-top: -4px; } /* Color: primary (purple bg, dark text) */ .vg-btn.is-primary { background-color: var(--color--purple); color: var(--color--black-text); } .vg-btn.is-primary .vg-btn_dot { background-color: var(--color--black-text); } /* Color: dark (dark bg, white text) */ .vg-btn.is-dark { background: var(--color--black-text); color: #fff; } .vg-btn.is-dark .vg-btn_dot { background: var(--color--purple); } /* --- GSAP animation initial states (CSS fallback) --- Elements start hidden via CSS. If JS fails to load, the .no-js class on makes everything visible. */ .vastgoed-hero_title, .vastgoed-hero_intro, .vastgoed-hero_shape, .vg-pijlers_title, .vg-pijlers_subtitle, .vg-card, .vg-mockup, .vg-pakketten_label, .vg-pakketten_title, .vg-pakketten_subtitle, .vg-pack, .vg-cta_card { opacity: 0; } .no-js .vastgoed-hero_title, .no-js .vastgoed-hero_intro, .no-js .vastgoed-hero_shape, .no-js .vg-pijlers_title, .no-js .vg-pijlers_subtitle, .no-js .vg-card, .no-js .vg-mockup, .no-js .vg-pakketten_label, .no-js .vg-pakketten_title, .no-js .vg-pakketten_subtitle, .no-js .vg-pack, .no-js .vg-cta_card { opacity: 1; } /* --- Body background for overscroll --- */ body { background-color: var(--color--black-text); } /* --- Hero --- */ .vastgoed-hero { min-height: 100vh; display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 4vw, 6rem); padding: 5rem clamp(2rem, 5vw, 6rem) 6.25rem; background-color: var(--color--black-light); } .vastgoed-hero_content { display: flex; flex-direction: column; gap: 1.75rem; flex: 1.5; min-width: 0; } .vastgoed-hero_shape { flex: 1; max-width: 32rem; min-width: 20rem; aspect-ratio: 514 / 609; position: relative; overflow: hidden; margin-right: 4rem; } .vastgoed-hero_shape video { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; display: block; } .vastgoed-hero_title { font-size: 4rem; font-weight: 700; line-height: 1.0625; letter-spacing: -0.125rem; color: var(--color--grey-text); } .vastgoed-hero_title span { color: #fff; background: linear-gradient(90deg, #fff 0%, var(--color--purple) 50%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 50% { background-position: 0% 0; } 100% { background-position: 100% 0; } } .vastgoed-hero_intro { font-size: 1.0625rem; line-height: 1.6; color: var(--color--grey-text); } /* --- Drie Pijlers --- */ .vg-pijlers { background-color: var(--color--black-text); padding: 6.25rem 4rem; display: flex; flex-direction: column; gap: 5rem; align-items: center; } .vg-pijlers_header { text-align: center; display: flex; flex-direction: column; gap: 3rem; align-items: center; } .vg-pijlers_title { font-size: 2.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.0625rem; color: #fff; } .vg-pijlers_title span { color: var(--color--grey-text); } .vg-pijlers_subtitle { font-size: 1rem; line-height: 1.625; color: var(--color--grey-text); max-width: 50rem; text-align: center; } .vg-pijlers_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; width: 100%; } .vg-card { background: var(--color--dark-surface); border-radius: 1.25rem; padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 1rem; transition: background-color 0.35s ease; } .vg-card_number { font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--color--dark-border); } .vg-card_title { font-size: 1.5rem; font-weight: 500; line-height: 1.25; color: #fff; } .vg-card_text { font-size: 0.9375rem; line-height: 1.55; color: var(--color--grey-text); } .vg-card_divider { height: 1px; background: var(--color--dark-border); width: 100%; } .vg-card_tags { font-size: 0.8125rem; line-height: 1.55; color: var(--color--dark-muted); } /* Card hidden content (desktop hover reveal) */ .vg-card_text, .vg-card_divider, .vg-card_tags { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease; } /* Card hover state */ .vg-card:hover { background: var(--color--purple); } .vg-card:hover .vg-card_number { color: rgba(0, 0, 0, 0.15); } .vg-card:hover .vg-card_title { color: var(--color--black-text); } .vg-card:hover .vg-card_text { max-height: 10rem; opacity: 1; color: rgba(0, 0, 0, 0.6); } .vg-card:hover .vg-card_divider { max-height: 1px; opacity: 1; background: rgba(0, 0, 0, 0.15); } .vg-card:hover .vg-card_tags { max-height: 5rem; opacity: 1; color: rgba(0, 0, 0, 0.4); } /* --- Mockups gallery --- */ .vg-mockups { display: flex; gap: 1.25rem; width: 100%; height: 24rem; margin-top: 1.5rem; } .vg-mockup { flex: 1; border-radius: 1.25rem; overflow: hidden; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .vg-mockup:first-child { flex: 2; } .vg-mockups:hover .vg-mockup { flex: 1; } .vg-mockups:hover .vg-mockup:hover { flex: 3; } .vg-mockup img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Pakketten --- */ .vg-pakketten { padding: 6.25rem 4rem; background: var(--color--white); } .vg-pakketten_header { text-align: center; margin-bottom: 3rem; } .vg-pakketten_label { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color--grey-text); margin-bottom: 1rem; } .vg-pakketten_title { font-size: 2.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.0625rem; color: var(--color--black-text); margin-bottom: 1rem; } .vg-pakketten_subtitle { font-size: 1rem; color: var(--color--grey-text); } .vg-pakketten_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .vg-pack { background: #fff; border-radius: 1.25rem; padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 0.375rem; } .vg-pack .vg-btn { margin-top: 1.5rem; } .vg-pack.is-featured { background: var(--color--black-text); } .vg-pack_badge { display: inline-flex; align-self: flex-start; padding: 0.375rem 0.875rem; background: linear-gradient(90deg, var(--color--purple) 0%, var(--color--purple-dark) 50%, var(--color--purple) 100%); background-size: 200% 100%; animation: shimmer 4s ease-in-out infinite; color: var(--color--black-text); font-size: 0.75rem; font-weight: 500; border-radius: 3rem; margin-bottom: 0.5rem; } .vg-pack_name { font-size: 1.375rem; font-weight: 500; color: var(--color--black-text); margin-top: 0.5rem; } .vg-pack.is-featured .vg-pack_name { color: #fff; } .vg-pack_price { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.0625rem; line-height: 1; color: var(--color--black-text); margin-top: 1rem; } .vg-pack.is-featured .vg-pack_price { color: var(--color--purple); } .vg-pack_price-sub { font-size: 0.8125rem; color: var(--color--grey-text); } .vg-pack.is-featured .vg-pack_price-sub { color: #a0a0a0; } .vg-pack_divider { height: 1px; background: #e6e6e6; width: 100%; margin: 1rem 0 0.75rem; } .vg-pack.is-featured .vg-pack_divider { background: var(--color--dark-border); } .vg-pack_item { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0; } .vg-pack_item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color--black-text); flex-shrink: 0; } .vg-pack.is-featured .vg-pack_item::before { background: var(--color--purple); } .vg-pack_item span { font-size: 0.875rem; color: var(--color--item-text); } .vg-pack.is-featured .vg-pack_item span { color: var(--color--item-text-dark); } .vg-pack.is-featured .vg-btn.is-dark { background: var(--color--purple); color: var(--color--black-text); } .vg-pack.is-featured .vg-btn.is-dark .vg-btn_dot { background: var(--color--black-text); } /* --- CTA Section --- */ .vg-cta { background: var(--color--black-text); padding: 6.25rem 4rem 2.5rem; } .vg-cta_card { background: var(--color--purple); border-radius: 1.5rem; padding: 5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; position: relative; overflow: hidden; } .vg-cta_card::before, .vg-cta_card::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.5; } .vg-cta_card::before { width: 24rem; height: 24rem; background: var(--color--purple-dark); animation: ctaOrb1 10s ease-in-out infinite; } .vg-cta_card::after { width: 20rem; height: 20rem; background: var(--color--purple-light); animation: ctaOrb2 12s ease-in-out infinite; } .vg-cta_card > * { position: relative; z-index: 1; } @keyframes ctaOrb1 { 0% { top: -20%; left: -10%; } 33% { top: 50%; left: 70%; } 66% { top: 10%; left: 40%; } 100% { top: -20%; left: -10%; } } @keyframes ctaOrb2 { 0% { top: 60%; right: -15%; } 33% { top: -10%; right: 40%; } 66% { top: 40%; right: 10%; } 100% { top: 60%; right: -15%; } } .vg-cta_label { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: #3c3c3c; } .vg-cta_title { font-size: 3rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.094rem; color: #fff; } .vg-cta_card .vg-btn { align-self: center; } .vg-cta_text { font-size: 1.0625rem; line-height: 1.55; color: #323232; } /* --- Navigation overrides --- */ .navigation.is-dark .vg-logo-label { color: var(--color--white); border-left-color: rgba(255, 255, 255, 0.2); } .navigation.is-dark .vg-contact-button { background: var(--color--white); color: var(--color--black-text); } .vg-logo-label { font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; padding-left: 0.75rem; border-left: 1px solid rgba(0, 0, 0, 0.15); margin-left: 0.75rem; line-height: 1; } .vg-contact-button { pointer-events: auto; display: flex; align-items: center; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--color--white); background: var(--color--black-text); text-decoration: none; border-radius: 10rem; transition: transform 0.3s cubic-bezier(.175, .885, .32, 1.275); position: relative; z-index: 101; } .vg-contact-button:hover { transform: scale(1.05); } /* --- Mobile Menu --- */ .vg-menu-toggle { display: none; pointer-events: auto; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; z-index: 101; } .vg-menu-toggle span { display: block; width: 1.25rem; height: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; position: relative; } .vg-menu-toggle span::before, .vg-menu-toggle span::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.3s ease; } .vg-menu-toggle span::before { top: -6px; } .vg-menu-toggle span::after { top: 6px; } .vg-menu-toggle.is-open span { background: transparent; } .vg-menu-toggle.is-open span::before { top: 0; transform: rotate(45deg); } .vg-menu-toggle.is-open span::after { top: 0; transform: rotate(-45deg); } .vg-mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: var(--color--black-text); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .vg-mobile-menu.is-open { display: flex; opacity: 1; pointer-events: auto; } .vg-mobile-menu a { font-size: 1.5rem; font-weight: 500; color: #fff; text-decoration: none; transition: color 0.2s ease; } .vg-mobile-menu a:hover { color: var(--color--purple); } /* --- Responsive --- */ @media (max-width: 767px) { .vastgoed-hero { min-height: 100svh; padding: 6rem 1.5rem 3rem; flex-direction: column; justify-content: center; gap: 2.5rem; } .vastgoed-hero_title { font-size: 2.5rem; letter-spacing: -0.075rem; } .vastgoed-hero_shape { width: 18rem; min-width: 0; margin-right: 0; align-self: center; } .vg-pijlers { padding: 4rem 1.5rem; gap: 3rem; } .vg-pijlers_title { font-size: 1.75rem; } .vg-pijlers_cards { grid-template-columns: 1fr; } .vg-card_text, .vg-card_divider, .vg-card_tags { max-height: none; opacity: 1; } .vg-mockups { flex-direction: column; height: auto; } .vg-mockup, .vg-mockup:first-child { flex: none; height: 14rem; } .vg-mockups:hover .vg-mockup, .vg-mockups:hover .vg-mockup:hover { flex: none; } .vg-pakketten { padding: 4rem 1.5rem; } .vg-pakketten_title { font-size: 1.75rem; } .vg-pakketten_grid { grid-template-columns: 1fr; } .vg-cta { padding: 4rem 1.5rem 2rem; } .vg-cta_card { padding: 3rem 1.5rem; } .vg-cta_title { font-size: 2rem; } .vg-logo-label { display: none; } .vg-contact-button { display: none; } .vg-menu-toggle { display: flex; color: var(--color--black-text); } .navigation.is-dark .vg-menu-toggle { color: var(--color--white); } .vg-mobile-menu { display: flex; } }