/* ============================================================ HOME PAGE — VARIABLE SYSTEM (page-local only) Controls logo size, position, shadow, and responsive overrides. ============================================================ */ .home-page { --logo-size: 42vw; /* Base logo size (relative to viewport width) */ --logo-shadow-x: 0; /* Shadow horizontal offset */ --logo-shadow-y: 1vw; /* Shadow vertical offset */ --logo-shadow-blur: 0.3vw; /* Shadow blur amount */ --logo-shadow-color: rgba(0,0,0,0.6); /* Shadow color */ --logo-top: 50%; /* Vertical position of logo */ --logo-left: 50%; /* Horizontal position of logo */ --logo-size-phone-portrait: 100vw; /* Bigger logo on portrait phones */ --logo-top-phone-portrait: 52%; /* Slightly lower position */ --logo-size-phone-landscape: 50vw; /* Smaller logo on landscape phones */ --logo-top-phone-landscape: 85%; /* Move logo lower */ --logo-size-tablet-portrait: 90vw; /* Tablet portrait size */ --logo-size-tablet-landscape: 60vw; /* Tablet landscape size */ --logo-top-tablet-landscape: 55%; /* Tablet landscape vertical shift */ --logo-size-short-landscape: 30vw; /* Very short screens (e.g., split-screen) */ --logo-top-short-landscape: 55%; /* Adjust vertical center */ } /* ============================================================ DISABLE SCROLLING WHEN NEEDED Applied only when is present. ============================================================ */ body.no-scroll { overflow: hidden; /* Prevent vertical scroll */ height: 100vh; /* Lock viewport height */ overscroll-behavior: none; /* Disable pull-to-refresh / bounce */ touch-action: none; /* Block touch gestures */ } /* ============================================================ LOGO WRAPPER (centered responsive logo) ============================================================ */ .logo-wrapper { position: absolute; /* Remove from document flow */ top: var(--logo-top); /* Position using variables */ left: var(--logo-left); transform: translate(-50%, -50%); /* Center on position point */ width: var(--logo-size); /* Width from variable */ height: var(--logo-size); /* Height matches width */ display: flex; /* Center image inside */ justify-content: center; align-items: center; } /* The logo image inside the wrapper */ .logo-container img { width: 100%; /* Fill wrapper horizontally */ height: 100%; /* Fill vertically */ object-fit: contain; /* Maintain proportions */ filter: drop-shadow( /* Apply shadow using variables */ var(--logo-shadow-x) var(--logo-shadow-y) var(--logo-shadow-blur) var(--logo-shadow-color) ); } /* ============================================================ RESPONSIVE OVERRIDES — variable-driven breakpoint behavior Each block only changes variables (cleanest approach). ============================================================ */ /* ===== Tablet Portrait ===== */ @media (min-width: 901px) and (max-width: 1440px) and (orientation: portrait) { .home-page { --logo-size: var(--logo-size-tablet-portrait); /* Larger portrait tablet logo */ } } /* ===== Tablet Landscape ===== */ @media (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) { .home-page { --logo-size: var(--logo-size-tablet-landscape); /* Tablet landscape size */ --logo-top: var(--logo-top-tablet-landscape); /* Slight reposition */ } } /* ===== Phone Portrait ===== */ @media (max-width: 940px) { .home-page { --logo-size: var(--logo-size-phone-portrait); /* Very large portrait logo */ --logo-top: var(--logo-top-phone-portrait); /* Slight top adjustment */ } } /* ===== Phone Landscape ===== */ @media (max-width: 940px) and (orientation: landscape) { .home-page { --logo-size: var(--logo-size-phone-landscape); /* Smaller landscape logo */ --logo-top: var(--logo-top-phone-landscape); /* Move further down */ } } /* ===== Very Short Landscapes (foldables, TVs, tiny windows) ===== */ @media (max-height: 500px) and (orientation: landscape) { .home-page { --logo-size: var(--logo-size-short-landscape); /* Shrink logo a lot */ --logo-top: var(--logo-top-short-landscape); /* Keep centered */ } }