/* ===================================================== MAZURY HIP HOP FESTIVAL HERO - CLEAN VERSION ===================================================== */ /* ========================================================== HERO VARIABLES ========================================================== */ :root{ --hero-max-width:1320px; --hero-offset:0px; --hero-transition:450ms cubic-bezier(.22,.61,.36,1); } .hero__overlay{ background: rgba( 8, 8, 8, var(--hero-overlay-opacity) ); } /* ========================================================== HERO LAYOUT ========================================================== */ .hero{ position:relative; min-height:100vh; min-height:var(--hero-height-desktop); overflow:hidden; isolation:isolate; background:#050505; } /* ========================================================== HERO VIDEO ========================================================== */ .hero__media{ position:absolute; inset:0; z-index:1; overflow:hidden; -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 72%, rgba(0,0,0,.96) 80%, rgba(0,0,0,.65) 90%, transparent 100% ); mask-image: linear-gradient( to bottom, #000 0%, #000 72%, rgba(0,0,0,.96) 80%, rgba(0,0,0,.65) 90%, transparent 100% ); } .hero__video{ width:100%; height:100%; object-fit:cover; object-position:center center; transform: translate3d( 0, var(--hero-offset), 0 ) scale( var(--hero-video-scale) ); transform-origin:center center; } /* ========================================================== HERO EFFECTS ========================================================== */ .hero__effects{ position:absolute; inset:0; z-index:2; pointer-events:none; } .hero__effects>*{ position:absolute; inset:0; } .hero__overlay{ background: rgba( 8, 8, 8, var(--hero-overlay-opacity) ); } .hero__radial{ background: radial-gradient( circle at center, rgba(255,255,255,.04), transparent 62% ); } .hero__top-gradient{ background: linear-gradient( to bottom, rgba(0,0,0,.55), transparent 25% ); } .hero::after{ height:220px; background:linear-gradient( to bottom, transparent 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,.65) 55%, #fff 100% ); } /* |-------------------------------------------------------------------------- | Hero Container |-------------------------------------------------------------------------- */ .hero__container{ position:relative; z-index:10; display:flex; align-items:center; width:100%; max-width:var(--hero-max-width); min-height:var(--hero-height-desktop); margin-inline:auto; padding-top:var(--hero-content-offset-desktop); } /* |-------------------------------------------------------------------------- | Hero Content |-------------------------------------------------------------------------- */ .hero__content{ width:100%; max-width:var(--hero-card-width); margin-inline-start:clamp(1rem,3vw,3rem); } /* |-------------------------------------------------------------------------- | Hero Card |-------------------------------------------------------------------------- */ .hero__card{ display:flex; flex-direction:column; gap:1rem; padding:clamp(1.5rem,3vw,2.5rem); border:1px solid rgba(255,255,255,.12); border-radius: var(--hero-card-radius); background: rgba( 12, 12, 12, var(--hero-card-opacity) ); backdrop-filter: blur(var(--hero-card-blur)); -webkit-backdrop-filter: blur(var(--hero-card-blur)); box-shadow: 0 25px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); } /* |-------------------------------------------------------------------------- | Hero Eyebrow |-------------------------------------------------------------------------- */ .hero__eyebrow{ font-size:.85rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); } /* |-------------------------------------------------------------------------- | Hero Title |-------------------------------------------------------------------------- */ .hero__title{ margin:0; font-size:clamp(3rem,5vw,4.8rem); font-weight:900; line-height:.92; text-transform:uppercase; color:#fff; } .hero__title-line{ display:block; color:var(--accent-color); } .hero__description{ margin:0; max-width:40ch; font-size: clamp(1rem,2vw,1.2rem); line-height:1.6; color: rgba(255,255,255,.88); } /* |-------------------------------------------------------------------------- | Hero Actions |-------------------------------------------------------------------------- */ .hero__actions{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } /* |-------------------------------------------------------------------------- | Hero Button |-------------------------------------------------------------------------- */ .hero__button{ display:inline-flex; align-items:center; justify-content:center; width:100% padding: 1rem 2rem; border-radius:999px; font-weight:700; font-size:1rem; text-decoration:none; transition: background-color var(--hero-transition), color var(--hero-transition), border-color var(--hero-transition), transform var(--hero-transition), box-shadow var(--hero-transition); } .hero__button--primary{ background:var(--accent-color); color:#fff; border:2px solid var(--accent-color); } .hero__button--primary:hover{ transform:translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.28); } .hero__button--secondary{ background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .hero__button--secondary:hover{ background: rgba(255,255,255,.16); transform:translateY(-2px); } /* |-------------------------------------------------------------------------- | Hero Scroll |-------------------------------------------------------------------------- */ .hero__scroll{ position:absolute; left:50%; bottom:2rem; z-index:20; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); transition: opacity var(--hero-transition), transform var(--hero-transition); } /* |-------------------------------------------------------------------------- | Hero Responsive |-------------------------------------------------------------------------- */ @media (max-width:768px){ .hero{ min-height:var(--hero-height-mobile); } .hero__container{ position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(calc(100% - 1rem),500px); max-width:none; margin-inline:auto; padding-inline:0; padding-top:var(--hero-content-offset-mobile); box-sizing:border-box; } .hero__card{ padding:1.5rem; gap:1rem; border-radius:22px; width:100%; margin-inline:auto; box-sizing:border-box; } .hero__title{ font-size:clamp(2.2rem,9vw,3.6rem); } .hero__description{ font-size:.95rem; line-height:1.5; } .hero__video{ object-position: var(--hero-mobile-video-position) center; } .hero__actions{ display:flex; flex-direction:column; width:100%; gap:1rem; } .hero__button{ width:100%; display:flex; justify-content:center; align-items:center; } .hero__content{ width:100%; display:flex; justify-content:center; padding-inline:1rem; box-sizing:border-box; max-width:100%; margin-inline:auto; } }