/* Theme Name: Eye Legacy */ html, body{ background: #000 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; } body { font-family: 'Inter', sans-serif; } /* ========================================================= Eye Legacy — Core (scoped) ========================================================= */ .el-landing{ /* Theme tokens */ --el-bg: #050607 !important; --el-text: rgba(255,255,255,.92) !important; --el-muted: rgba(255,255,255,.70) !important; --el-line: rgba(255,255,255,.12) !important; /* Accent */ --el-accent: #06D1D4 !important; --el-accent2: #2DE3B7 !important; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important; color: var(--el-text) !important; background: var(--el-bg) !important; } .el-landing *{ box-sizing: border-box !important; } .el-landing a{ color: inherit !important; text-decoration: none !important; } /* ========================================================= Reveal (failsafe) - Visible by default - Only animates when exists ========================================================= */ .el-reveal{ opacity: 1 !important; transform: translateY(0) !important; } .js .el-reveal{ opacity: 0 !important; transform: translateY(14px) !important; transition: opacity .7s ease, transform .7s ease !important; } .js .el-reveal.is-in{ opacity: 1 !important; transform: translateY(0) !important; } /* ========================================================= Shared Layout (sections) ========================================================= */ .el-wrap{ width: min(1180px, calc(100% - 40px)) !important; margin: 0 auto !important; } .el-section{ padding: 84px 0 !important; background: var(--el-bg) !important; } .el-section__head{ text-align: left !important; max-width: 720px !important; margin-bottom: 26px !important; } .el-eyebrow{ display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; margin-bottom: 14px !important; } .el-h2{ margin: 0 0 10px !important; font-size: clamp(26px, 3.2vw, 42px) !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; font-weight: 800 !important; color: rgba(255,255,255,.92) !important; } .el-p{ margin: 0 !important; color: rgba(255,255,255,.70) !important; line-height: 1.7 !important; font-size: 16px !important; } /* ========================================================= HERO ========================================================= */ .el-hero{ position: relative !important; min-height: 100vh !important; height: 100vh !important; overflow: hidden !important; background: var(--el-bg) !important; } /* Background video container */ .el-hero__video{ position: absolute !important; inset: 0 !important; overflow: hidden !important; z-index: 0 !important; } .el-hero__videoEl{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.06) !important; filter: contrast(1.1) saturate(1.05) brightness(.62) blur(.15px) !important; pointer-events: none !important; } /* Optional YouTube iframe background (if you ever use it again) */ .el-hero__iframe{ position: absolute !important; top: 50% !important; left: 50% !important; width: 100vw !important; height: 56.25vw !important; min-width: 177.78vh !important; min-height: 100vh !important; transform: translate(-50%, -50%) scale(1.18) !important; transform-origin: center !important; pointer-events: none !important; border: 0 !important; } /* Overlays */ .el-hero__overlay{ position: absolute !important; inset: 0 !important; z-index: 1 !important; opacity: .10 !important; background: radial-gradient(900px 500px at 20% 10%, rgba(0,0,0,.25), rgba(0,0,0,.70) 70%), linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.78)) !important; } .el-hero__vignette{ position: absolute !important; inset: -20% !important; z-index: 2 !important; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 55%) !important; opacity: .35 !important; pointer-events: none !important; } /* Grain */ .el-hero__grain{ position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; opacity: .08 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E") !important; mix-blend-mode: overlay !important; animation: el-grain 7s steps(6) infinite !important; } @keyframes el-grain{ 0%{ transform: translate(0,0) !important; } 10%{ transform: translate(-2%, -4%) !important; } 20%{ transform: translate(-6%, 2%) !important; } 30%{ transform: translate(3%, -5%) !important; } 40%{ transform: translate(-3%, 6%) !important; } 50%{ transform: translate(-7%, -2%) !important; } 60%{ transform: translate(6%, 3%) !important; } 70%{ transform: translate(2%, 7%) !important; } 80%{ transform: translate(-5%, 2%) !important; } 90%{ transform: translate(4%, -3%) !important; } 100%{ transform: translate(0,0) !important; } } /* Content layout */ .el-hero__inner{ position: relative !important; z-index: 10 !important; height: 100% !important; display: grid !important; place-items: center !important; padding: 40px 20px !important; padding-top: 90px !important; } .el-hero__content{ text-align: center !important; max-width: 980px !important; } /* Badge */ .el-hero__badge{ display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 14px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.35) !important; backdrop-filter: blur(10px) !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; letter-spacing: .28em !important; text-transform: uppercase !important; } /* Title / Lead */ .el-hero__title{ margin: 18px 0 10px !important; font-weight: 750 !important; letter-spacing: -0.03em !important; line-height: 0.95 !important; font-size: clamp(46px, 6.4vw, 108px) !important; text-shadow: 0 10px 40px rgba(0,0,0,.65), 0 0 80px rgba(122,168,255,.12) !important; } .el-hero__lead{ margin: 0 auto !important; padding-top: 15px !important; max-width: 60ch !important; color: rgba(255,255,255,.92) !important; line-height: 1.7 !important; font-size: clamp(15px, 1.6vw, 18px) !important; font-weight: 600 !important; } /* Buttons (hero) */ .el-hero__actions{ margin-top: 18px !important; display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; } .el-btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .01em !important; border: 1px solid transparent !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important; user-select: none !important; } .el-btn:active{ transform: scale(.98) !important; } .el-btn--primary{ color: #060708 !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; box-shadow: 0 18px 60px rgba(6,209,212,.14) !important; } .el-btn--primary:hover{ transform: translateY(-1px) !important; box-shadow: 0 22px 70px rgba(6,209,212,.22) !important; } .el-btn--ghost{ color: rgba(255,255,255,.90) !important; background: rgba(0,0,0,.35) !important; border-color: rgba(255,255,255,.16) !important; backdrop-filter: blur(10px) !important; } .el-btn--ghost:hover{ transform: translateY(-1px) !important; border-color: rgba(255,255,255,.26) !important; background: rgba(255,255,255,.06) !important; } /* Scroll hint */ .el-scroll{ position: absolute !important; left: 50% !important; bottom: 18px !important; transform: translateX(-50%) !important; z-index: 12 !important; display: grid !important; justify-items: center !important; gap: 8px !important; opacity: .75 !important; } .el-scroll__line{ width: 1px !important; height: 34px !important; background: rgba(255,255,255,.30) !important; border-radius: 99px !important; overflow: hidden !important; position: relative !important; } .el-scroll__line::after{ content: "" !important; position: absolute !important; top: -40% !important; left: 0 !important; width: 100% !important; height: 40% !important; background: rgba(191,231,255,.90) !important; animation: el-scroll 1.6s ease-in-out infinite !important; } @keyframes el-scroll{ 0%{ transform: translateY(0) !important; opacity: 0 !important; } 20%{ opacity: 1 !important; } 100%{ transform: translateY(180%) !important; opacity: 0 !important; } } .el-scroll__text{ font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; } /* ========================================================= TOP NAV (logo left + center pill) ========================================================= */ .el-topnav{ position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 60 !important; padding: 18px 22px !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 16px !important; pointer-events: none !important; } .el-topnav > *{ pointer-events: auto !important; } .el-topnav__spacer{ width: 58px !important; /* match jouw logo SVG width (58) */ height: 44px !important; /* match .el-brand__logo height */ } .el-brand{ display: inline-flex !important; align-items: center !important; } .el-brand__logo{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 44px !important; } .el-brand__logo svg{ height: 34px !important; width: auto !important; display: block !important; filter: drop-shadow(0 12px 34px rgba(0,0,0,.55)) !important; } /* Center pill */ .el-floatmenu--center{ justify-self: center !important; } .el-floatmenu{ display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 10px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.38) !important; backdrop-filter: blur(18px) !important; box-shadow: 0 22px 80px rgba(0,0,0,.46) !important; } .el-floatmenu__link{ font-size: 13px !important; font-weight: 700 !important; letter-spacing: .01em !important; color: rgba(255,255,255,.78) !important; padding: 12px 14px !important; border-radius: 999px !important; border: 1px solid transparent !important; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important; } .el-floatmenu__link:hover{ transform: translateY(-1px) !important; background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.94) !important; border-color: rgba(255,255,255,.10) !important; } .el-floatmenu__link--cta{ background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; color: #050607 !important; border-color: rgba(191,231,255,.40) !important; box-shadow: 0 14px 48px rgba(6,209,212,.20) !important; } .el-floatmenu__link--cta:hover{ box-shadow: 0 18px 62px rgba(6,209,212,.26) !important; } /* ========================================================= LOGO STRIP (full width) — FIXED ========================================================= */ .el-logoStrip{ position: relative !important; width: 100% !important; overflow: hidden !important; padding: 16px 0 !important; background: transparent !important; } /* Fade edges */ .el-logoStrip::before, .el-logoStrip::after{ content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 160px !important; z-index: 2 !important; pointer-events: none !important; } .el-logoStrip::before{ left: 0 !important; background: linear-gradient(90deg, rgba(5,6,7,1), rgba(5,6,7,0)) !important; } .el-logoStrip::after{ right: 0 !important; background: linear-gradient(270deg, rgba(5,6,7,1), rgba(5,6,7,0)) !important; } /* Track movement */ .el-logoStrip__track{ display: flex !important; align-items: center !important; gap: 108px !important; /* spacing */ width: max-content !important; will-change: transform !important; animation: elLogoStrip 30s linear infinite !important; } @keyframes elLogoStrip{ from { transform: translateX(0); } to { transform: translateX(-50%); } } .el-logoStrip:hover .el-logoStrip__track{ animation-play-state: paused !important; } /* Slots */ .el-logoStrip__slot{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 66px !important; width: 240px !important; } .el-logoStrip__slot.is-mark{ width: 250px !important; } .el-logoStrip__slot.is-wide{ width: 300px !important; } /* wide logos wat ruimer */ /* Base logo style (FIXED + complete) */ .el-logoStrip__logo{ height: 96px !important; width: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; transition: opacity .18s ease, transform .18s ease, filter .18s ease !important; transform: translateY(0) !important; } .el-logoStrip__slot:hover .el-logoStrip__logo{ opacity: 1 !important; transform: translateY(-1px) !important; filter: grayscale(0) brightness(1.08) contrast(1.05) !important; } /* Talpa (black) -> visible */ .el-logoStrip__slot.is-dark .el-logoStrip__logo{ filter: invert(1) grayscale(1) brightness(1.6) contrast(1.1) !important; opacity: .78 !important; } .el-logoStrip__slot.is-dark:hover .el-logoStrip__logo{ opacity: .95 !important; filter: invert(1) grayscale(0) brightness(1.15) contrast(1.05) !important; } /* Photo logo (andy.jpg) smaller */ .el-logoStrip__slot.is-photo .el-logoStrip__logo{ height: 46px !important; opacity: .82 !important; filter: grayscale(0) brightness(1.05) contrast(1.05) !important; } /* ========================= LOGO STRIP — ANDY FIX ONLY (laat alle andere logos met rust) ========================= */ .el-logoStrip__slot.is-photo{ width: 320px !important; /* meer ruimte, zodat hij optisch groter kan */ } .el-logoStrip__slot.is-photo .el-logoStrip__logo{ height: 136px !important; /* <-- groter maken */ opacity: .92 !important; filter: brightness(1.08) contrast(1.12) !important; } /* “Boxed” workaround for MB white bg */ .el-logoStrip__slot.is-boxed{ padding: 10px 14px !important; border-radius: 999px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 20px 70px rgba(0,0,0,.32) !important; } /* ========================================================= WORK GRID (Projects) ========================================================= */ .el-work__grid{ display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; } .el-card{ grid-column: span 4 !important; border-radius: 22px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 22px 90px rgba(0,0,0,.35) !important; transition: transform .22s ease, border-color .22s ease, background .22s ease !important; } .el-card:hover{ transform: translateY(-4px) !important; border-color: rgba(6,209,212,.35) !important; background: rgba(255,255,255,.05) !important; } .el-card--wide{ grid-column: span 8 !important; } .el-card__media{ position: relative !important; aspect-ratio: 16 / 10 !important; background: radial-gradient(900px 500px at 20% 10%, rgba(6,209,212,.20), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28)) !important; } .el-card__tag{ position: absolute !important; top: 12px !important; left: 12px !important; z-index: 3 !important; padding: 8px 10px !important; border-radius: 999px !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.45) !important; color: rgba(255,255,255,.78) !important; backdrop-filter: blur(12px) !important; } .el-card__body{ padding: 16px 16px 18px !important; } .el-card__title{ font-weight: 800 !important; letter-spacing: -0.02em !important; color: rgba(255,255,255,.92) !important; font-size: 16px !important; margin-bottom: 6px !important; } .el-card__meta{ color: rgba(255,255,255,.62) !important; font-size: 13px !important; line-height: 1.5 !important; } /* Tall card */ .el-card--tall{ display: grid !important; grid-template-rows: 1fr auto !important; } .el-card--tall .el-card__media{ aspect-ratio: auto !important; min-height: 78% !important; } .el-card--tall .el-card__body{ padding: 14px 16px 16px !important; background: rgba(0,0,0,.18) !important; border-top: 1px solid rgba(255,255,255,.06) !important; } .el-card__img, .el-card__video{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border: 0 !important; } /* ========================================================= ABOUT (modern, premium) — UPDATED ========================================================= */ .el-about{ padding: 96px 0 !important; } .el-about__grid{ display: grid !important; grid-template-columns: 1.05fr .95fr !important; gap: 26px !important; align-items: start !important; } .el-about__copy{ max-width: 64ch !important; } .el-about__kicker{ display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 12px !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; margin-bottom: 14px !important; } .el-about__kickerDot{ width: 8px !important; height: 8px !important; border-radius: 999px !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; box-shadow: 0 0 0 6px rgba(6,209,212,.10) !important; } .el-about__title{ margin: 0 0 12px 0 !important; font-size: clamp(32px, 4.2vw, 56px) !important; line-height: 1.03 !important; letter-spacing: -0.035em !important; font-weight: 900 !important; color: rgba(255,255,255,.95) !important; } .el-about__lead{ margin: 0 0 18px 0 !important; font-size: 16px !important; line-height: 1.8 !important; color: rgba(255,255,255,.72) !important; } .el-about__points{ display: grid !important; gap: 10px !important; margin: 18px 0 0 0 !important; padding: 0 !important; list-style: none !important; } .el-about__point{ display: grid !important; grid-template-columns: 18px 1fr !important; gap: 12px !important; align-items: start !important; padding: 12px 14px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; backdrop-filter: blur(12px) !important; } .el-about__check{ width: 18px !important; height: 18px !important; border-radius: 6px !important; margin-top: 2px !important; background: rgba(6,209,212,.16) !important; border: 1px solid rgba(6,209,212,.35) !important; position: relative !important; } .el-about__check::after{ content: "" !important; position: absolute !important; left: 5px !important; top: 2px !important; width: 6px !important; height: 10px !important; border-right: 2px solid rgba(255,255,255,.92) !important; border-bottom: 2px solid rgba(255,255,255,.92) !important; transform: rotate(40deg) !important; } .el-about__point strong{ display: block !important; font-weight: 900 !important; color: rgba(255,255,255,.92) !important; letter-spacing: -0.01em !important; margin-bottom: 4px !important; } .el-about__point span{ display: block !important; color: rgba(255,255,255,.64) !important; line-height: 1.65 !important; font-size: 13px !important; } .el-about__actions{ display: flex !important; gap: 12px !important; margin-top: 22px !important; flex-wrap: wrap !important; } /* About buttons */ .el-about__btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; padding: 0 18px !important; border-radius: 999px !important; font-weight: 900 !important; letter-spacing: .01em !important; border: 1px solid transparent !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important; } .el-about__btn:active{ transform: scale(.99) !important; } .el-about__btn--primary{ color: #050607 !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; box-shadow: 0 18px 70px rgba(6,209,212,.22) !important; } .el-about__btn--ghost{ color: rgba(255,255,255,.90) !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.14) !important; backdrop-filter: blur(12px) !important; } .el-about__btn--ghost:hover{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.22) !important; } /* Media card */ .el-about__media{ position: relative !important; border-radius: 26px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; background: radial-gradient(900px 520px at 20% 10%, rgba(6,209,212,.20), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35)) !important; box-shadow: 0 28px 120px rgba(0,0,0,.38) !important; min-height: 520px !important; } .el-about__mediaImg{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; filter: none !important; transform: none !important; z-index: 1 !important; }form: scale(1.03) !important; } .el-about__media::after{ content: "" !important; position: absolute !important; inset: 0 !important; background: radial-gradient(600px 360px at 40% 30%, rgba(0,0,0,.10), rgba(0,0,0,.72) 72%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65)) !important; pointer-events: none !important; } .el-about__badgeRow{ position: absolute !important; left: 18px !important; right: 18px !important; bottom: 18px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; z-index: 2 !important; } .el-about__mini{ border-radius: 18px !important; border: 1px solid rgba(255,255,255,.12) !important; background: rgba(0,0,0,.38) !important; backdrop-filter: blur(14px) !important; padding: 14px 14px 16px !important; } .el-about__miniK{ font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; margin-bottom: 8px !important; } .el-about__miniV{ font-size: 15px !important; font-weight: 900 !important; letter-spacing: -0.02em !important; color: rgba(255,255,255,.92) !important; } /* ========================================================= PLACEHOLDERS (later invullen) - Services - CTA - Contact - Footer ========================================================= */ /* .el-services { } */ /* .el-cta { } */ /* .el-contact { } */ /* .el-footer { } */ /* ========================================================= Responsive ========================================================= */ @media (max-width: 980px){ .el-card{ grid-column: span 6 !important; } .el-card--wide{ grid-column: span 12 !important; } } @media (max-width: 920px){ .el-about{ padding: 76px 0 !important; } .el-about__grid{ grid-template-columns: 1fr !important; } .el-about__media{ min-height: 420px !important; } } @media (max-width: 860px){ .el-topnav{ grid-template-columns: 1fr !important; justify-items: center !important; padding: 14px 14px !important; gap: 10px !important; } .el-topnav__spacer{ display: none !important; } .el-brand__logo svg{ height: 30px !important; } .el-floatmenu{ padding: 8px 8px !important; } .el-floatmenu__link{ padding: 10px 12px !important; font-size: 12px !important; } } @media (max-width: 640px){ .el-section{ padding: 64px 0 !important; } .el-card{ grid-column: span 12 !important; } } @media (max-width: 520px){ .el-logoStrip__track{ gap: 48px !important; animation-duration: 38s !important; } .el-logoStrip__logo{ height: 48px !important; } .el-logoStrip__slot{ width: 190px !important; } .el-logoStrip__slot.is-wide{ width: 230px !important; } .el-logoStrip__slot.is-mark{ width: 160px !important; } .el-logoStrip::before, .el-logoStrip::after{ width: 80px !important; } .el-about__badgeRow{ grid-template-columns: 1fr !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .el-hero__grain{ animation: none !important; } .el-scroll__line::after{ animation: none !important; } .el-btn{ transition: none !important; } .el-logoStrip__track{ animation: none !important; transform: translateX(0) !important; } } /* ========================= SERVICES (visual cards) ========================= */ .el-svcs{ padding: 92px 0 !important; } .el-svcs__head .el-p{ max-width: 46ch !important; } .el-svcs__grid{ margin-top: 22px !important; display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; } /* Card */ .el-svcCard{ grid-column: span 4 !important; position: relative !important; border-radius: 24px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 26px 110px rgba(0,0,0,.38) !important; transform: translateY(0) !important; transition: transform .22s ease, border-color .22s ease, background .22s ease !important; } .el-svcCard:hover{ transform: translateY(-6px) !important; border-color: rgba(6,209,212,.30) !important; background: rgba(255,255,255,.045) !important; } /* Media */ .el-svcCard__media{ position: relative !important; height: 320px !important; overflow: hidden !important; background: radial-gradient(900px 520px at 20% 10%, rgba(6,209,212,.20), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35)) !important; } .el-svcCard__img{ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.04) !important; filter: contrast(1.07) saturate(1.05) brightness(.92) !important; opacity: .90 !important; transition: transform .35s ease, filter .35s ease, opacity .35s ease !important; } .el-svcCard:hover .el-svcCard__img{ transform: scale(1.10) !important; filter: contrast(1.10) saturate(1.10) brightness(.98) !important; opacity: .96 !important; } /* Overlay */ .el-svcCard__overlay{ position: absolute !important; inset: 0 !important; background: radial-gradient(560px 340px at 30% 20%, rgba(6,209,212,.16), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)) !important; opacity: .95 !important; transition: opacity .25s ease !important; } .el-svcCard:hover .el-svcCard__overlay{ opacity: .85 !important; } /* Body */ .el-svcCard__body{ padding: 16px 16px 14px !important; } .el-svcCard__kicker{ display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; margin-bottom: 10px !important; } .el-svcCard__title{ font-size: 18px !important; font-weight: 900 !important; letter-spacing: -0.02em !important; color: rgba(255,255,255,.94) !important; line-height: 1.08 !important; } .el-svcCard__sub{ margin-top: 8px !important; font-size: 13px !important; line-height: 1.6 !important; color: rgba(255,255,255,.66) !important; } /* Meta chips (hidden-ish, shows on hover) */ .el-svcCard__meta{ position: absolute !important; left: 14px !important; right: 14px !important; bottom: 14px !important; display: flex !important; gap: 10px !important; flex-wrap: wrap !important; z-index: 3 !important; opacity: 0 !important; transform: translateY(10px) !important; transition: opacity .25s ease, transform .25s ease !important; } .el-svcCard:hover .el-svcCard__meta{ opacity: 1 !important; transform: translateY(0) !important; } .el-chip2{ display: inline-flex !important; align-items: center !important; padding: 10px 12px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.36) !important; backdrop-filter: blur(12px) !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; font-weight: 800 !important; } /* Wide feature card */ .el-svcCard--wide{ grid-column: span 12 !important; } .el-svcCard--wide .el-svcCard__media{ height: 360px !important; } .el-svcCard__cta{ position: absolute !important; right: 16px !important; top: 16px !important; z-index: 4 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.38) !important; backdrop-filter: blur(14px) !important; opacity: .92 !important; transition: transform .22s ease, opacity .22s ease, border-color .22s ease !important; } .el-svcCard:hover .el-svcCard__cta{ transform: translateY(-1px) !important; opacity: 1 !important; border-color: rgba(6,209,212,.28) !important; } .el-svcCard__ctaText{ font-weight: 900 !important; color: rgba(255,255,255,.92) !important; } .el-svcCard__ctaArrow{ color: rgba(255,255,255,.80) !important; font-weight: 900 !important; } /* Responsive */ @media (max-width: 980px){ .el-svcCard{ grid-column: span 6 !important; } .el-svcCard--wide{ grid-column: span 12 !important; } .el-svcCard__media{ height: 280px !important; } } @media (max-width: 640px){ .el-svcs{ padding: 74px 0 !important; } .el-svcCard{ grid-column: span 12 !important; } .el-svcCard__media{ height: 260px !important; } } /* ========================= CTA + CONTACT (Eye Legacy) ========================= */ /* ========================= CTA / CONTACT (self-contained) ========================= */ .el-contact{ padding: 92px 0 !important; } .elCta__card{ position: relative !important; border-radius: 34px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.02) !important; box-shadow: 0 40px 140px rgba(0,0,0,.60) !important; } /* Glow */ .elCta__card::before{ content: "" !important; position: absolute !important; inset: -2px !important; pointer-events: none !important; opacity: .90 !important; background: radial-gradient(900px 520px at 18% 22%, rgba(6,209,212,.32), transparent 60%), radial-gradient(900px 520px at 40% 12%, rgba(45,227,183,.18), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)) !important; filter: blur(10px) !important; } .elCta__card > *{ position: relative !important; z-index: 2 !important; } .elCta__card{ display: grid !important; grid-template-columns: 1fr 1fr !important; } .elCta__left, .elCta__right{ padding: 34px !important; } .elCta__right{ border-left: 1px solid rgba(255,255,255,.08) !important; } /* Left content */ .elCta__pill{ display: inline-flex !important; align-items: center !important; height: 38px !important; padding: 0 14px !important; border-radius: 999px !important; font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: rgba(255,255,255,.74) !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(0,0,0,.25) !important; backdrop-filter: blur(14px) !important; } .elCta__title{ margin: 18px 0 10px !important; font-size: clamp(26px, 2.6vw, 36px) !important; letter-spacing: -0.03em !important; font-weight: 900 !important; color: rgba(255,255,255,.95) !important; } .elCta__sub{ margin: 0 !important; color: rgba(255,255,255,.72) !important; line-height: 1.75 !important; max-width: 60ch !important; } .elCta__rule{ height: 1px !important; background: rgba(255,255,255,.08) !important; margin: 18px 0 18px !important; } .elCta__meta{ margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px !important; } .elCta__row{ display: grid !important; grid-template-columns: 110px 1fr !important; gap: 14px !important; align-items: baseline !important; } .elCta__row dt{ margin: 0 !important; font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(255,255,255,.52) !important; } .elCta__row dd{ margin: 0 !important; color: rgba(255,255,255,.88) !important; font-weight: 800 !important; } .elCta__mail{ color: rgba(255,255,255,.92) !important; } .elCta__copy{ margin-left: 12px !important; border: none !important; background: transparent !important; color: rgba(255,255,255,.52) !important; font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; cursor: pointer !important; } .elCta__copy:hover{ color: rgba(255,255,255,.85) !important; } .elCta__fine{ margin: 14px 0 0 !important; color: rgba(255,255,255,.52) !important; font-size: 13px !important; line-height: 1.6 !important; } .elCta__form { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; row-gap: 18px !important; align-items: start !important; } .elCta__field{ display: grid !important; gap: 8px !important; } .elCta__field--full{ grid-column: 1 / -1 !important; } .elCta__label{ font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; } .elCta__input{ width: 100% !important; height: 44px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.12) !important; background: rgba(0,0,0,.20) !important; color: rgba(255,255,255,.92) !important; padding: 0 14px !important; outline: none !important; box-sizing: border-box !important; min-width: 0 !important; } .elCta__textarea{ height: auto !important; min-height: 170px !important; padding: 12px 14px !important; resize: vertical !important; } .elCta__input:focus{ border-color: rgba(6,209,212,.35) !important; box-shadow: 0 0 0 6px rgba(6,209,212,.12) !important; } /* Actions */ .elCta__actions{ grid-column: 1 / -1 !important; display: flex !important; gap: 12px !important; align-items: center !important; margin-top: 6px !important; } .elCta__btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 50px !important; padding: 0 18px !important; border-radius: 999px !important; font-weight: 900 !important; border: 1px solid transparent !important; text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important; } .elCta__btn:active{ transform: scale(.99) !important; } .elCta__btn--primary{ color: #050607 !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; box-shadow: 0 18px 70px rgba(6,209,212,.22) !important; } .elCta__btn--ghost{ color: rgba(255,255,255,.90) !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.14) !important; backdrop-filter: blur(12px) !important; } /* Honeypot: Company (ALTijd verbergen) */ .elCta__hp{ position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Responsive */ @media (max-width: 980px){ .elCta__card{ grid-template-columns: 1fr !important; } .elCta__right{ border-left: none !important; border-top: 1px solid rgba(255,255,255,.08) !important; } } @media (max-width: 640px){ .elCta__left, .elCta__right{ padding: 24px !important; } .elCta__form{ grid-template-columns: 1fr !important; } } /* ========================= WORDPRESS OVERRIDES FIX ========================= */ /* Remove ugly default link underline */ a { text-decoration: none !important; color: inherit !important; } /* Fix buttons die “verdwenen” zijn */ button, .el-btn, .el-about__btn, .elCta__btn { all: unset; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; } /* Restore jouw primary button */ .el-btn--primary, .el-about__btn--primary, .elCta__btn--primary { color: #060708 !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; border-radius: 999px !important; padding: 12px 18px !important; font-weight: 700 !important; box-shadow: 0 18px 60px rgba(122,168,255,.18) !important; transition: all .2s ease !important; } .el-btn--primary:hover, .el-about__btn--primary:hover, .elCta__btn--primary:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 70px rgba(122,168,255,.26) !important; } /* Ghost button fix */ .el-btn--ghost, .el-about__btn--ghost { border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; padding: 12px 18px !important; background: rgba(0,0,0,.35) !important; color: #fff !important; } /* Fix WordPress block styles */ .wp-block-button a { text-decoration: none !important; } /* ========================= FORCE TYPO + BUTTON FIX ========================= */ /* H1 altijd wit */ h1, .el-hero__title { color: #fff !important; } /* Reset alle link-styling volledig */ a, a:visited, a:hover, a:focus { text-decoration: none !important; color: inherit !important; } /* BELANGRIJK: fix jouw primary buttons (anchors) */ a.el-btn, a.el-btn--primary, a.el-about__btn--primary, a.elCta__btn--primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .01em !important; background: linear-gradient(135deg, var(--el-accent), var(--el-accent2)) !important; color: #060708 !important; box-shadow: 0 18px 60px rgba(122,168,255,.18) !important; transition: all .2s ease !important; } /* hover terug */ a.el-btn--primary:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 70px rgba(122,168,255,.26) !important; } /* Ghost buttons */ a.el-btn--ghost, a.el-about__btn--ghost { background: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; } /* voorkom WordPress button styles */ .wp-block-button__link { all: unset !important; } /* Hero primary button fix */ .el-hero .el-btn--primary, .el-hero__actions .el-btn--primary, a.el-btn.el-btn--primary { background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: none !important; box-shadow: 0 18px 60px rgba(6, 209, 212, 0.22) !important; } .el-hero .el-btn--primary:hover, .el-hero__actions .el-btn--primary:hover, a.el-btn.el-btn--primary:hover { background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; box-shadow: 0 22px 70px rgba(6, 209, 212, 0.28) !important; } /* ========================= GLOBAL PRIMARY BUTTON FIX ========================= */ .el-btn--primary, a.el-btn--primary, button.el-btn--primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .01em !important; background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: none !important; box-shadow: 0 18px 60px rgba(6, 209, 212, 0.22) !important; transition: all .2s ease !important; } .el-btn--primary:hover, a.el-btn--primary:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 70px rgba(6, 209, 212, 0.28) !important; } /* Header CTA */ .el-floatmenu__link--cta{ background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border-color: rgba(191,231,255,.40) !important; box-shadow: 0 14px 48px rgba(6, 209, 212, 0.26) !important; } /* Contact / CTA primary button */ .elCta__btn--primary{ background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: none !important; box-shadow: 0 18px 70px rgba(6, 209, 212, 0.22) !important; } /* Fix grootte Send message knop */ .elCta__btn--primary{ padding: 17px 16px !important; font-size: 14px !important; height: auto !important; } /* optioneel: iets minder rond */ .elCta__btn--primary{ border-radius: 999px !important; } /* ========================= MODAL ========================= */ .el-modal{ position: fixed; inset: 0; z-index: 999; display: none; } .el-modal.is-open{ display: block; } .el-modal__overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); } .el-modal__content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 90%); max-height: 90vh; z-index: 2; } .el-modal__media{ max-height: 75vh; overflow: hidden; } .el-modal__media video, .el-modal__media img{ max-height: 75vh; object-fit: contain; } .el-modal__media img, .el-modal__media video{ width: 100%; border-radius: 16px; } .el-modal__close{ position: absolute; top: -40px; right: 0; font-size: 32px; color: white; background: none; border: none; cursor: pointer; } .el-modal__info{ margin-top: 16px; } .el-card--clickable{ cursor: pointer; } .el-capability__hover, .el-capability__meta, .el-capability__tags { display: none !important; } .el-capability__card:hover .el-capability__overlay { opacity: 0 !important; transform: none !important; } /* ========================= ABOUT BUTTON FIX ========================= */ .el-about__actions{ display: flex !important; gap: 14px !important; align-items: center !important; flex-wrap: wrap !important; } .el-about__btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; padding: 0 22px !important; border-radius: 999px !important; font-weight: 800 !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,.14) !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important; } .el-about__btn--primary{ background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: none !important; box-shadow: 0 18px 60px rgba(6,209,212,.22) !important; } .el-about__btn--primary:hover{ transform: translateY(-1px) !important; box-shadow: 0 22px 70px rgba(6,209,212,.28) !important; } .el-about__btn--ghost{ background: rgba(255,255,255,.03) !important; color: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.14) !important; backdrop-filter: blur(12px) !important; } .el-about__btn--ghost:hover{ transform: translateY(-1px) !important; background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.24) !important; } /* FORCE ABOUT PRIMARY BUTTON */ .el-about__btn--primary{ background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: none !important; opacity: 1 !important; } .el-about__btn--primary:visited{ color: #050607 !important; } .el-about__btn--primary:link{ color: #050607 !important; } /* DEFINITIEVE ABOUT PRIMARY BUTTON FIX */ a.el-about__btn.el-about__btn--primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; padding: 0 22px !important; border-radius: 999px !important; background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: 0 !important; opacity: 1 !important; box-shadow: 0 18px 70px rgba(6, 209, 212, .22) !important; text-decoration: none !important; } a.el-about__btn.el-about__btn--primary:link, a.el-about__btn.el-about__btn--primary:visited, a.el-about__btn.el-about__btn--primary:hover, a.el-about__btn.el-about__btn--primary:focus { background: linear-gradient(135deg, #06D1D4, #2DE3B7) !important; color: #050607 !important; border: 0 !important; opacity: 1 !important; text-decoration: none !important; } .elFormPopup{ position: fixed !important; inset: 0 !important; z-index: 9999 !important; display: none !important; } .elFormPopup.is-visible{ display: block !important; } .elFormPopup__backdrop{ position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.72) !important; backdrop-filter: blur(10px) !important; } .elFormPopup__card{ position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: min(520px, calc(100% - 32px)) !important; padding: 28px 24px !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.12) !important; background: linear-gradient(180deg, rgba(18,18,18,.96), rgba(8,8,8,.96)) !important; box-shadow: 0 30px 120px rgba(0,0,0,.45) !important; text-align: center !important; } .elFormPopup__eyebrow{ font-size: 11px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; margin-bottom: 10px !important; } .elFormPopup__title{ margin: 0 0 10px !important; font-size: 32px !important; line-height: 1.05 !important; color: #fff !important; } .elFormPopup__text{ margin: 0 !important; color: rgba(255,255,255,.72) !important; line-height: 1.7 !important; } .elFormPopup__close{ position: absolute !important; top: 14px !important; right: 16px !important; background: transparent !important; border: 0 !important; color: rgba(255,255,255,.7) !important; font-size: 28px !important; cursor: pointer !important; } /* ========================= FOOTER ========================= */ .el-footer{ border-top: 1px solid rgba(255,255,255,.08); padding: 28px 0; background: #050607; } .el-footer__inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .el-footer__copyright{ font-size: 13px; color: rgba(255,255,255,.5); } .el-footer__links{ display: flex; gap: 18px; } .el-footer__links a{ font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; transition: .2s; } .el-footer__links a:hover{ color: #fff; } .el-footer__right{ display: flex; align-items: center; gap: 20px; } .el-footer__socials{ display: flex; gap: 10px; } .el-footer__socials a{ font-size: 12px; color: rgba(255,255,255,.6); text-decoration: none; border: 1px solid rgba(255,255,255,.1); padding: 6px 10px; border-radius: 999px; transition: .2s; } .el-footer__socials a:hover{ color: #fff; border-color: rgba(255,255,255,.3); } .el-footer__credit{ font-size: 12px; color: rgba(255,255,255,.5); } .el-footer__credit a{ color: rgba(255,255,255,.8); text-decoration: none; } .el-footer__credit a:hover{ color: #fff; } /* MOBILE */ @media (max-width: 768px){ .el-footer__inner{ flex-direction: column; align-items: flex-start; gap: 16px; } .el-footer__right{ width: 100%; justify-content: space-between; } } body { overflow-x: hidden; } footer { margin-top: 0 !important; } /* ========================= FOOTER FIXED GRID ========================= */ .el-footer { border-top: 1px solid rgba(255, 255, 255, .06) !important; background: #050607 !important; padding: 36px 0 !important; } /* BELANGRIJK: deze override */ .el-footer .el-wrap { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; } .el-footer__grid { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; width: 100% !important; } /* LEFT */ .el-footer__left { justify-self: start !important; font-size: 13px !important; color: rgba(255, 255, 255, .5) !important; } /* CENTER */ .el-footer__center { justify-self: center !important; text-align: center !important; font-size: 13px !important; color: rgba(255, 255, 255, .5) !important; } .el-footer__center a { color: rgba(255, 255, 255, .85) !important; text-decoration: none !important; } .el-footer__center a:hover { color: #fff !important; } /* RIGHT */ .el-footer__right { justify-self: end !important; display: flex !important; gap: 20px !important; } .el-footer__right a { font-size: 13px !important; color: rgba(255, 255, 255, .6) !important; text-decoration: none !important; transition: .2s !important; } .el-footer__right a:hover { color: #fff !important; } /* MOBILE */ @media (max-width: 768px) { .el-footer__grid { grid-template-columns: 1fr !important; gap: 16px !important; text-align: center !important; } .el-footer__left, .el-footer__center, .el-footer__right { justify-self: center !important; } } @media (max-width: 768px) { .el-footer__right { justify-self: center !important; justify-content: center !important; gap: 14px !important; flex-wrap: wrap !important; } .el-footer__right a { display: inline-block !important; } }