/* HAKIM Theme — Homepage Styles (Sections 1-5) */ /* ============================================================ 1. HERO — Cinematic full-viewport ============================================================ */ .hk-hero--cinematic { padding-top: 85px; /* header height: 10+64+10+1 */ background: var(--hk-white); color: var(--hk-heading); text-align: center; position: relative; overflow: hidden; } /* Video container — takes up viewport minus header, text strip flows after */ .hk-hero__video-area { position: relative; width: 100%; height: calc(80vh - 78px); overflow: hidden; } /* Hero background video */ .hk-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hk-hero__video--desktop { display: block; } .hk-hero__video--mobile { display: none; } @media (max-width: 768px) { .hk-hero__video--desktop { display: block; } .hk-hero__video--mobile { display: block; } } @media (prefers-reduced-motion: reduce) { .hk-hero__video { display: none; } } @media (prefers-reduced-data: reduce) { .hk-hero__video { display: none; } } /* Thin creme line at top of video area */ .hk-hero__video-area::before { content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; height: 1px; background: var(--hk-parchment-dark); z-index: 2; pointer-events: none; } /* Legacy element — hidden */ .hk-hero__bottom-edge { display: none; } /* Logo — centered within video area */ .hk-hero__logo-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 0; } .hk-hero__logo-wrapper img { width: 260px; height: auto; filter: drop-shadow(0 4px 24px rgba(27, 42, 74, 0.06)); } /* Animated logo video — stacked-alpha canvas + hidden video */ .hk-hero__logo-canvas { width: 260px; height: 301px; position: relative; z-index: 2; } /* Stacked video: visually hidden but still decoding frames for WebGL. iOS hardware compositor ignores opacity:0 on