@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Black+Ops+One&display=swap'); /* NOTE: the original html,body rule (overflow:hidden + full countryside gradient background) has been removed from here. This stylesheet is now loaded site-wide via header.php's , so a global html/body rule would override your main site background/scroll behaviour on every page. The canvas itself is transparent (see #canvas-container below) so your normal page background shows through everywhere except where the plane mesh is actually drawn. */ /* Fullscreen WebGL Canvas Layer - spans the whole viewport with a transparent background (renderer alpha:true in 3d_logo.js), and sits ABOVE page content (high z-index) rather than being clipped. The "window" look at rest comes purely from the plane's starting position sitting over the header - but since nothing is masked, the plane is free to fly out over any part of the page, on top of everything, when dragged. */ #canvas-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; cursor: grab; } #canvas-container:active { cursor: grabbing; } /* Viewport Frame Overlay acting as a window over the 3D scene. Kept full-viewport (unclipped) so #bg-text positioning logic in 3d_logo.js - which measures screen coordinates via getBoundingClientRect - continues to work exactly as before. Only the canvas underneath it is visually windowed. */ #viewport-frame { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; /* Mouse & touch events pass through to 3D canvas */ } #bg-text { position: absolute; top: 10%; left: 0; width: 100%; height: 30vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; user-select: none; pointer-events: none; } .brand-title { font-family: 'Black Ops One', cursive, sans-serif; font-size: clamp(2.8rem, 8.5vw, 6.2rem); color: #1a1c1a; letter-spacing: 0.12em; text-transform: uppercase; line-height: 0.9; } .brand-subtitle-container { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; width: 100%; max-width: clamp(280px, 62vw, 750px); } .brand-subtitle { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: clamp(0.85rem, 2.3vw, 1.7rem); font-weight: 900; color: #1a1c1a; letter-spacing: 0.22em; white-space: nowrap; text-transform: uppercase; } .taper-line { flex: 1; height: clamp(4px, 0.8vw, 10px); background-color: #1a1c1a; } .taper-line.left { clip-path: polygon(0 50%, 100% 0, 100% 100%); } .taper-line.right { clip-path: polygon(0 0, 100% 50%, 0 100%); } /* ========================================================================== Overlay mode (3d_logo.php only) - full screen with a grey border frame, rounded corners, and a close button. Scoped under #overlay-border so it never affects the header's free-flying version, which shares this same stylesheet and the same #canvas-container / #viewport-frame IDs. ========================================================================== */ #overlay-border { position: fixed; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #8a8a8a; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } /* Canvas/frame become absolute and fill the bordered box, rather than the fixed full-viewport behaviour used on the header page - this keeps the plane contained within the rounded frame here, since that's the intended "windowed" feel for the overlay page. */ #overlay-border #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: radial-gradient(120px 60px at 15% 12%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(180px 80px at 40% 18%, rgba(255, 255, 255, 0.45), transparent 70%), radial-gradient(140px 64px at 68% 10%, rgba(255, 255, 255, 0.50), transparent 70%), radial-gradient(100px 48px at 85% 20%, rgba(255, 255, 255, 0.40), transparent 70%), radial-gradient(40px 60px at 10% 78%, rgba(48, 64, 36, 0.6), transparent 65%), radial-gradient(55px 70px at 28% 82%, rgba(46, 60, 32, 0.55), transparent 65%), radial-gradient(45px 65px at 50% 80%, rgba(50, 66, 38, 0.6), transparent 65%), radial-gradient(60px 75px at 72% 83%, rgba(44, 58, 30, 0.55), transparent 65%), radial-gradient(50px 68px at 90% 79%, rgba(48, 62, 34, 0.6), transparent 65%), linear-gradient(to bottom, #7ba2c7 0%, #a2becc 45%, #728c58 75%, #4e6638 100%); background-size: 220% 100%; background-repeat: no-repeat; background-position: 50% center; } #overlay-border #viewport-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } #overlay-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto; } #overlay-close:hover { background: rgba(0, 0, 0, 0.75); }