/* ========================================================================== AstroPanda, global.css Site-wide styles: variables, reset/base, typography, shared buttons, header, footer and other reusable elements. Anything specific to the home page's own sections (hero, panda rail, services, success stories, testimonials) lives in home.css instead. ========================================================================== */ :root{ --ink:#030305; --paper:#eef0f6; --orange:#ff5a14; --orange-soft:#ff8a3d; --orange-supersoft:#ff8b3dc7; --muted:rgba(238,240,246,0.62); --line:rgba(238,240,246,0.12); --shell:1080px; --panda-w:400px; --panda-h:563px; /* 400 x 619/440 */ } *{box-sizing:border-box} /* clip (not hidden) → keeps the viewport as the scroll container and doesn't break position:sticky. No scroll-behavior:smooth and no native snap here: section travel is animated by hand in main.js (easeInOutCubic), native snap can't be timed or eased. */ html{overflow-x:clip} body{ margin:0; padding:0; background:var(--ink); color:var(--paper); font-family:'Space Grotesk',sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--paper); text-decoration:none} a:hover{color:var(--orange)} img{display:block; max-width:100%} /* ---------- background layers ---------- */ #stars{position:fixed; inset:0; z-index:0; pointer-events:none} .ap-glow{ /* no blur filter: these are radial gradients, already soft. Blurring a 52vw surface every frame was pure waste. */ position:fixed; z-index:0; pointer-events:none; border-radius:50%; opacity:.5; } .ap-glow--a{top:-10vh; left:-8vw; width:52vw; height:52vw; background:radial-gradient(circle,rgba(255,90,20,.17) 0%,rgba(255,90,20,.06) 42%,rgba(255,90,20,0) 76%)} .ap-glow--b{bottom:-18vh; right:-12vw; width:58vw; height:58vw; background:radial-gradient(circle,rgba(90,120,255,.14) 0%,rgba(90,120,255,.05) 42%,rgba(90,120,255,0) 76%)} .ap-planet{position:absolute; z-index:1; pointer-events:none; will-change:transform} @keyframes apDriftL{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-14px)}} @keyframes apDriftR{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,12px)}} /* ---------- shell / header ---------- */ .ap-shell{width:min(var(--shell),100% - 88px); margin-inline:auto; position:relative; z-index:2} /* Decorative plates on the home and the service rows are composed to run off the viewport edges. main is exactly viewport-wide, so this clips what hangs over without moving anything. `clip`, not `hidden`: hidden would make main a scroll container and break the panda rail's sticky. */ main{overflow-x:clip} @keyframes apCosmic{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .ap-header{ position:fixed; top:0; left:0; right:0; z-index:50; /* while hidden it must be fully inert AND invisible: its blur/pool pseudo-layers extend past the translated box and were shading the hero's own logo and CTA */ pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-100%); transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s, visibility 0s .45s; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 44px 26px; background:transparent; } /* Cosmic wash behind the bar: an ever-moving gradient over a blurred backdrop, dissolved at its lower edge by a mask instead of ending on a hard line. */ /* Two layers, both bleeding past the bar so nothing ever shows a box edge: ::before = a soft blur veil across the whole top, dissolved by a tall mask; ::after = three dark pools (logo / links / CTA) that drift slowly. */ .ap-header::before{ content:''; position:absolute; inset:-24px 0 -64px 0; z-index:-2; /* it reaches 64px below the bar so the blur can dissolve: without this that strip swallows clicks on everything underneath it */ pointer-events:none; backdrop-filter:blur(15px) saturate(1.1); -webkit-backdrop-filter:blur(15px) saturate(1.1); mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.45) 66%,transparent 96%); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.45) 66%,transparent 96%); } /* Moves the whole layer rather than its background-position: a transform is composited, while background-position repainted this masked, page-wide layer on every frame, on every page, for as long as it was open. */ @keyframes apPools{ 0%,100%{transform:translate3d(0,0,0)} 33%{transform:translate3d(28px,6px,0)} 66%{transform:translate3d(-24px,-6px,0)} } .ap-header::after{ content:''; position:absolute; inset:-40px -120px -90px -120px; z-index:-1; pointer-events:none; background: radial-gradient(ellipse 480px 170px at 11% 42%, rgba(5,8,20,.92) 0%, rgba(9,10,26,.45) 55%, transparent 78%), radial-gradient(ellipse 700px 190px at 50% 38%, rgba(6,8,22,.9) 0%, rgba(14,10,30,.4) 58%, transparent 80%), radial-gradient(ellipse 460px 170px at 89% 42%, rgba(5,8,20,.92) 0%, rgba(9,10,26,.45) 55%, transparent 78%); background-repeat:no-repeat; animation:apPools 26s ease-in-out infinite; will-change:transform; mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 94%); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 94%); } /* the exported hero already carries its own nav, so ours only appears past it */ .ap-header.is-visible{transform:none; pointer-events:auto; opacity:1; visibility:visible; transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s, visibility 0s} .ap-logo{font-weight:700; font-size:17px; line-height:1.02; letter-spacing:.02em} .ap-logo span{color:var(--orange)} .ap-nav{display:flex; align-items:center; gap:32px; justify-self:center; font-size:14.5px; letter-spacing:.12em; font-weight:700} .ap-nav a.is-current{color:var(--orange)} /* nav dropdown (desktop), hover or keyboard-focus reveals it; the trigger link keeps working as a normal link to the services hub */ .ap-nav-drop{position:relative; display:inline-flex; align-items:center} .ap-nav-dropdown{ position:absolute; top:100%; left:50%; z-index:10; min-width:230px; margin-top:22px; padding:10px; border-radius:12px; border:1px solid var(--orange-supersoft); background:rgba(10,13,20,.27); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 22px 50px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:2px; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,4px); transition:opacity .2s ease, transform .2s ease, visibility 0s .2s; } .ap-nav-drop::after{ content:''; position:absolute; left:-30px; right:-30px; top:100%; height:34px; /* bridges the pointer across the gap down to the mega panel */ } .ap-nav-drop:hover .ap-nav-dropdown, .ap-nav-drop:focus-within .ap-nav-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity .2s ease, transform .2s ease, visibility 0s; } /* ---------- services mega menu ---------- Replaces the small dropdown for nav items that carry children with imagery. The panel is position:fixed so it can span the viewport regardless of where the trigger sits in the nav; it still opens on the trigger's :hover / :focus-within exactly like the old dropdown did. */ .ap-mega{ position:fixed; left:50%; top:76px; z-index:20; width:min(1620px, calc(100vw - 48px)); transform:translate(-50%,6px); border-radius:18px; border:1px solid var(--line); background:rgba(8,10,18,.93); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 30px 70px rgba(0,0,0,.6); padding:26px 30px 20px; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .22s ease, visibility 0s .22s; } /* Darkens everything under the open panel. Starts below the navbar row on purpose, and stays pointer-events:none so it neither blocks the page nor interferes with the hover that keeps the menu open. Lives inside the header's stacking context, under the panel's z-index. */ .ap-mega-veil{ position:fixed; left:0; right:0; top:76px; bottom:0; z-index:10; background:rgba(3,4,9,.72); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s .25s; } .ap-nav-drop:hover .ap-mega-veil, .ap-nav-drop:focus-within .ap-mega-veil{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; } .ap-nav-drop:hover .ap-mega, .ap-nav-drop:focus-within .ap-mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition:opacity .22s ease, transform .22s ease, visibility 0s; } .ap-mega-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 2px 18px; } .ap-mega-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.34em; color:rgba(238,240,246,.55); } .ap-mega-all{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--paper); } .ap-mega-all i{font-style:normal; font-size:16px; color:var(--orange)} .ap-mega-all:hover{color:var(--orange)} .ap-mega-grid{ /* --cols comes from how many children the nav item has, so adding a service is a data change and not a CSS one. */ display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:14px; } /* Service rows reveal artwork and copy, matching the industry pages. */ .ap-mega--services{width:min(1300px,calc(100vw - 48px));max-height:calc(100dvh - 100px);overflow-y:auto;background:#080b12;padding:22px 28px 28px} .ap-ms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px} .ap-ms-column{border-top:1px solid var(--line)} .ap-ms-row{display:block;padding:24px 12px;border-bottom:1px solid var(--line);color:var(--paper);text-decoration:none;transition:background .25s ease} .ap-ms-heading{display:flex;align-items:center;justify-content:space-between;gap:20px} .ap-ms-title{font-family:'Anton',sans-serif;font-size:clamp(20px,1.75vw,27px);font-weight:400;letter-spacing:0;line-height:1.2;text-transform:none} .ap-ms-btn{display:inline-flex;align-items:center;gap:10px;flex:none;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(238,240,246,.035);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .25s ease,border-color .25s ease} .ap-ms-btn i{font-style:normal;color:var(--orange)} .ap-ms-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1),opacity .25s ease} .ap-ms-detail{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:22px;overflow:hidden;min-height:0} .ap-ms-detail > *{margin-top:20px} .ap-ms-art{display:block;overflow:hidden;border-radius:10px;border:1px solid var(--line)} .ap-ms-art img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .ap-ms-desc{font-size:14px;line-height:1.6;letter-spacing:normal;font-weight:400;color:var(--muted)} .ap-ms-row:hover,.ap-ms-row:focus-visible{background:rgba(238,240,246,.03)} .ap-ms-row:focus-visible{outline:1px solid var(--orange);outline-offset:-1px} .ap-ms-row:hover .ap-ms-panel,.ap-ms-row:focus-visible .ap-ms-panel{grid-template-rows:1fr;opacity:1} .ap-ms-row:hover .ap-ms-btn,.ap-ms-row:focus-visible .ap-ms-btn{background:rgba(255,90,20,.12);border-color:var(--orange)} @media(max-width:1180px){.ap-ms-grid{gap:24px}.ap-ms-row{padding:22px 8px}.ap-ms-heading{gap:12px}.ap-ms-btn{padding:10px;font-size:9px}.ap-ms-detail{grid-template-columns:130px minmax(0,1fr);gap:16px}} @media(hover:none){.ap-ms-panel{grid-template-rows:1fr;opacity:1}} @media(prefers-reduced-motion:reduce){.ap-ms-panel,.ap-ms-row,.ap-ms-btn{transition:none}} /* INDUSTRIES panel: a list, not a wall of cards. Seven image cards in one row had already pushed the title to 22px so "CONSTRUCTION & REAL ESTATE" would fit a seventh of the width, and the sector list only grows. Two columns of links hold any number of them at a readable size, and the panel keeps exactly one picture: the feature card on the right, which is also the way out of the list. */ .ap-mega--ind{background:#080b12;padding:28px 30px 30px} .ap-mega--ind .ap-mega-head{padding:4px 8px 22px} .ap-mi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.02fr);gap:28px;align-items:stretch} .ap-mi-list{grid-column:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:0 28px;align-content:stretch} .ap-mi-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 8px;text-decoration:none;color:inherit;transition:background .2s ease} .ap-mi-item:nth-child(even){border-left:1px solid rgba(238,240,246,.08);padding-left:28px} .ap-mi-item:hover,.ap-mi-item:focus-visible{background:rgba(238,240,246,.035)} .ap-mi-text{display:flex;flex-direction:column;gap:7px;min-width:0} .ap-mi-text strong{font-size:16px;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--paper);text-wrap:balance} .ap-mi-text span{font-size:14px;font-weight:400;letter-spacing:.01em;line-height:1.55;color:#a4a7b0;text-wrap:pretty} .ap-mi-arrow{flex:none;display:inline-flex;font-size:13px;color:var(--orange);opacity:0;translate:-4px 0;transition:opacity .2s ease,translate .2s ease} .ap-mi-item:hover .ap-mi-arrow,.ap-mi-item:focus-visible .ap-mi-arrow{opacity:1;translate:0 0} .ap-mi-feature{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;border:1px solid rgba(238,240,246,.14);background:#090c12;text-decoration:none;color:inherit;transition:border-color .2s ease} .ap-mi-feature:hover{border-color:rgba(255,90,20,.45)} .ap-mi-feature-art{position:relative;display:block;height:150px;overflow:hidden;flex:none} .ap-mi-feature-art img{width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block} .ap-mi-feature-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 24px 24px} .ap-mi-feature-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)} .ap-mi-feature-title{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,1.95vw,34px);line-height:1.1;letter-spacing:.005em;color:var(--paper)} .ap-mi-feature-desc{font-size:14px;font-weight:400;letter-spacing:.025em;line-height:1.5;color:#a4a7b0} .ap-mi-feature-btn{margin-top:10px;width:100%;justify-content:center;min-height:50px;padding:12px 16px;border:1px solid var(--orange);background:transparent;pointer-events:none;font-size:11px;letter-spacing:.13em;white-space:normal;text-align:center} @media(max-width:1180px){ .ap-mega--ind{padding:20px} .ap-mi-grid{gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)} .ap-mi-list{gap:0 18px} .ap-mi-item:nth-child(even){padding-left:18px} .ap-mi-text strong{font-size:14px} .ap-mi-text span{font-size:12px} .ap-mi-feature-body{padding:18px} .ap-mi-feature-art{height:130px} } /* Cards rest dark with the label centred, and reveal their artwork on hover while the text slides down to sit over it. Fixed aspect so "centred" means something: with the image out of the flow the card has no intrinsic height. */ .ap-mega-card{ position:relative; display:block; container-type:inline-size; aspect-ratio:6/7; overflow:hidden; border-radius:14px; border:1px solid rgba(238,240,246,.1); background:rgba(9,11,17,.92); transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .ap-mega-card:hover{ border-color:rgba(255,110,45,.85); box-shadow:0 0 26px rgba(255,90,20,.18); transform:translateY(-2px); } /* The resting card is a patch of sky rather than an empty panel: a nebula wash, a soft band across it and two layers of stars painted as radial gradients, the near one drifting and breathing. No images and no canvas, so five of these cost nothing while the menu is closed. --i (the card's position) shifts every clock, so the row never pulses in unison. */ .ap-mega-stars{ position:absolute; inset:0; display:block; overflow:hidden; opacity:1; transition:opacity .4s ease; /* Dim on purpose: the card is a piece of sky, not a lit surface, and the tint only has to keep it from reading as flat black. Each card gets the wash from a different corner (see below) so the row is five patches of the same sky rather than five copies of one. */ background: radial-gradient(78% 56% at 74% 6%, rgba(255,90,20,.09), transparent 70%), radial-gradient(66% 48% at 6% 96%, rgba(120,150,255,.06), transparent 72%), linear-gradient(203deg, transparent 36%, rgba(150,170,255,.035) 50%, transparent 64%), #090b11; } /* One wash per card. Same two hues and the same low strengths throughout; what changes is where the light comes from and which way the band runs. */ .ap-mega-card:nth-child(2) .ap-mega-stars{ background: radial-gradient(74% 54% at 12% 10%, rgba(255,90,20,.085), transparent 70%), radial-gradient(70% 52% at 92% 88%, rgba(120,150,255,.055), transparent 72%), linear-gradient(158deg, transparent 38%, rgba(150,170,255,.03) 52%, transparent 66%), #090b11; } .ap-mega-card:nth-child(3) .ap-mega-stars{ background: radial-gradient(82% 50% at 50% 104%, rgba(255,90,20,.08), transparent 68%), radial-gradient(60% 46% at 16% 4%, rgba(120,150,255,.06), transparent 74%), linear-gradient(22deg, transparent 34%, rgba(150,170,255,.032) 50%, transparent 66%), #090b11; } .ap-mega-card:nth-child(4) .ap-mega-stars{ background: radial-gradient(70% 58% at 96% 44%, rgba(255,90,20,.075), transparent 70%), radial-gradient(64% 50% at 2% 62%, rgba(120,150,255,.06), transparent 72%), linear-gradient(240deg, transparent 36%, rgba(150,170,255,.03) 52%, transparent 68%), #090b11; } .ap-mega-card:nth-child(5) .ap-mega-stars{ background: radial-gradient(76% 52% at 28% 96%, rgba(255,90,20,.08), transparent 70%), radial-gradient(68% 50% at 86% 12%, rgba(120,150,255,.055), transparent 72%), linear-gradient(186deg, transparent 38%, rgba(150,170,255,.028) 50%, transparent 64%), #090b11; } .ap-mega-stars::before,.ap-mega-stars::after{ content:""; position:absolute; inset:-14%; background-repeat:no-repeat; } /* the near field: bright, with a couple of haloed stars, and it moves */ .ap-mega-stars::before{ background-image: radial-gradient(9px 9px at 46% 57%, rgba(255,180,130,.16), transparent 70%), radial-gradient(8px 8px at 18% 21%, rgba(200,220,255,.13), transparent 70%), radial-gradient(2.2px 2.2px at 18% 21%, #fff, transparent), radial-gradient(2px 2px at 74% 13%, rgba(255,255,255,.95), transparent), radial-gradient(2.4px 2.4px at 46% 57%, rgba(255,226,206,1), transparent), radial-gradient(1.9px 1.9px at 86% 47%, rgba(255,255,255,.9), transparent), radial-gradient(2.1px 2.1px at 11% 73%, rgba(255,255,255,.88), transparent), radial-gradient(1.8px 1.8px at 62% 81%, rgba(255,196,150,.92), transparent), radial-gradient(2px 2px at 30% 39%, rgba(255,255,255,.9), transparent), radial-gradient(2.3px 2.3px at 88% 77%, rgba(255,255,255,.92), transparent), radial-gradient(1.9px 1.9px at 54% 6%, rgba(205,220,255,.9), transparent), radial-gradient(2px 2px at 6% 33%, rgba(255,255,255,.85), transparent); } /* the far field: dimmer and slower, and it drifts the other way */ .ap-mega-stars::after{ background-image: radial-gradient(1.4px 1.4px at 32% 11%, rgba(255,255,255,.7), transparent), radial-gradient(1.3px 1.3px at 58% 29%, rgba(255,255,255,.62), transparent), radial-gradient(1.4px 1.4px at 8% 45%, rgba(255,255,255,.58), transparent), radial-gradient(1.5px 1.5px at 92% 65%, rgba(255,255,255,.66), transparent), radial-gradient(1.3px 1.3px at 38% 89%, rgba(255,255,255,.6), transparent), radial-gradient(1.4px 1.4px at 78% 92%, rgba(255,255,255,.55), transparent), radial-gradient(1.2px 1.2px at 24% 61%, rgba(255,255,255,.5), transparent), radial-gradient(1.3px 1.3px at 68% 51%, rgba(255,255,255,.54), transparent), radial-gradient(1.2px 1.2px at 48% 74%, rgba(255,255,255,.5), transparent), radial-gradient(1.4px 1.4px at 16% 17%, rgba(255,255,255,.58), transparent), radial-gradient(1.3px 1.3px at 84% 25%, rgba(255,255,255,.52), transparent), radial-gradient(1.2px 1.2px at 70% 7%, rgba(255,255,255,.48), transparent), radial-gradient(1.3px 1.3px at 40% 44%, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 94% 38%, rgba(255,255,255,.46), transparent); } @keyframes apMegaDrift{ 0%,100%{translate:0 0} 50%{translate:-7px -11px} } @keyframes apMegaTwinkle{ 0%,100%{opacity:.62} 50%{opacity:1} } /* The sky only moves while the menu is open. The closed panel keeps its layout (it is hidden with opacity and visibility, not display), so ten animated layers behind it would have kept the compositor busy on every frame of every page, for something nobody can see. */ .ap-nav-drop:hover .ap-mega-stars::before, .ap-nav-drop:focus-within .ap-mega-stars::before{ animation:apMegaDrift calc(26s + var(--i,0) * 3s) ease-in-out calc(var(--i,0) * -2.2s) infinite, apMegaTwinkle calc(4.6s + var(--i,0) * .5s) ease-in-out calc(var(--i,0) * -.8s) infinite; } .ap-nav-drop:hover .ap-mega-stars::after, .ap-nav-drop:focus-within .ap-mega-stars::after{ animation:apMegaDrift calc(38s + var(--i,0) * 4s) ease-in-out calc(var(--i,0) * 3.1s) infinite reverse, apMegaTwinkle calc(6.8s + var(--i,0) * .7s) ease-in-out calc(var(--i,0) * -1.6s) infinite; } /* the artwork takes the card on hover, and the sky gets out of its way */ .ap-mega-card:hover .ap-mega-stars, .ap-mega-card:focus-visible .ap-mega-stars{opacity:0} .ap-mega-img{ position:absolute; inset:0; display:block; overflow:hidden; opacity:0; transition:opacity .4s ease; } .ap-mega-card:hover .ap-mega-img, .ap-mega-card:focus-visible .ap-mega-img{opacity:1} .ap-mega-img img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .5s ease; } .ap-mega-card:hover .ap-mega-img img{transform:scale(1)} /* scrim under the text once the artwork is showing */ .ap-mega-card::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(6,7,12,0) 36%, rgba(6,7,12,.72) 72%, rgba(6,7,12,.92) 100%); opacity:0; transition:opacity .4s ease; } .ap-mega-card:hover::after, .ap-mega-card:focus-visible::after{opacity:1} /* Everything sits on the card's floor in both states; hover just reveals the artwork and lifts the block a touch. The arrow rides the same lift so it stays on the description's baseline. */ .ap-mega-text{ position:absolute; left:0; right:0; bottom:18px; z-index:1; padding:0 16px; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .ap-mega-card:hover .ap-mega-text{transform:translateY(-12px)} .ap-mega-title{ display:block; margin:0; font-family:'Anton',sans-serif; font-weight:400; font-size:min(35px, 13.5cqw); line-height:1.04; letter-spacing:.015em; text-transform:uppercase; color:var(--paper); } .ap-mega-desc{ display:block; margin:6px 0 0; padding-right:46px; font-size:16px; font-weight:300; letter-spacing:normal; line-height:1.5; color:rgba(238,240,246,.62); } .ap-mega-arrow{ position:absolute; right:16px; bottom:14px; z-index:2; font-style:normal; font-size:24px; line-height:1; color:var(--orange); transition:transform .35s cubic-bezier(.2,.7,.2,1); } .ap-mega-card:hover .ap-mega-arrow{transform:translate(2px,-14px)} @media (prefers-reduced-motion: reduce){ .ap-mega-img,.ap-mega-text,.ap-mega-card::after,.ap-mega-arrow{transition:none} } /* the old narrow dropdown look no longer applies where the mega exists, and below the desktop nav breakpoint the mobile menu takes over anyway */ @media (max-width:1024px){ .ap-mega{display:none} } .ap-nav-dropdown a{ padding:11px 13px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:none; color:rgba(238,240,246,.78); white-space:nowrap; transition:background .2s ease, color .2s ease; } .ap-nav-dropdown a:hover{background:rgba(255,90,20,.12); color:var(--paper)} .ap-cta{ --mx:50%; --my:50%; position:relative; isolation:isolate; justify-self:end; border:1px solid rgba(255,90,20,.72); background: radial-gradient( circle 90px at var(--mx) var(--my), rgba(255,125,55,.16), rgba(255,90,20,.055) 42%, transparent 75% ), rgba(10,8,24,.55); font-size:12.5px; font-weight:700; letter-spacing:.12em; padding:13px 24px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:10px; transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), background .2s ease; } /* halo exterior */ .ap-cta::before{ content:''; position:absolute; z-index:-1; inset:-18px; border-radius:18px; pointer-events:none; background: radial-gradient( circle 75px at var(--mx) var(--my), rgba(255,90,20,.34), rgba(255,90,20,.10) 40%, transparent 72% ); opacity:0; filter:blur(12px); transition:opacity .35s ease; } /* barrido luminoso por encima */ .ap-cta::after{ content:''; position:absolute; inset:-1px; border-radius:8px; pointer-events:none; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,0) 37%, rgba(255,220,195,.72) 48%, rgba(255,108,35,.9) 52%, rgba(255,255,255,0) 63%, transparent 80% ); background-size:260% 100%; background-position:160% 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; opacity:0; transition: opacity .25s ease, background-position .8s cubic-bezier(.16,1,.3,1); } .ap-cta:hover{ border-color:rgba(255,132,66,.95); box-shadow: 0 0 18px rgba(255,90,20,.22), 0 0 48px rgba(255,90,20,.10), inset 0 0 18px rgba(255,90,20,.055); transform:translateY(-1px); } .ap-cta:hover::before{ opacity:1; } .ap-cta:hover::after{ opacity:1; background-position:-60% 0; } .ap-cta span{ color:var(--orange); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; } .ap-cta:hover span{ transform:translate(2px,-2px); filter:drop-shadow(0 0 6px rgba(255,90,20,.8)); } .ap-cta span{color:var(--orange)} /* language switcher, sits at the end of the nav (desktop) / mnav (mobile) */ .ap-lang-switch{display:inline-flex; align-items:center; gap:8px; margin-left:6px; padding-left:14px; border-left:1px solid var(--line)} .ap-lang-switch a{color:rgba(238,240,246,.45); transition:color .2s} .ap-lang-switch a:hover{color:var(--paper)} .ap-lang-switch a.is-current{color:var(--orange)} .ap-lang-switch--mobile{display:none} /* hamburger + dropdown, hidden entirely above the mobile breakpoint, where the inline .ap-nav already handles it */ .ap-burger{display:none} .ap-mnav{display:none} /* ---------- typography ---------- */ .ap-eyebrow{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.44em; color:rgba(238,240,246,.72); text-indent:.44em; margin-bottom:26px; } .ap-display{ font-family:'Anton',sans-serif; font-weight:400; /* the floor is what a phone gets: the 4vw term only overtakes it around 850px, so this leaves every desktop size untouched */ font-size:clamp(34px,4vw,80px); line-height:1.04; letter-spacing:.005em; margin:0; color:#f2f3f8; } .ap-grad{ background:linear-gradient(100deg,#ff8a3d 0%,#ff5a14 45%,#e63c00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--orange); filter:drop-shadow(0 0 40px rgba(255,90,20,.32)); } .ap-lead{ max-width:660px; margin:28px auto 0; font-size:17.5px; line-height:1.62; color:rgba(238,240,246,.86); text-wrap:pretty; } .ap-lead b{color:var(--orange); font-weight:500} /* ---------- shared buttons ---------- */ /* Big solid-orange CTA (art direction 2026-09): the one deliberately loud button in the row, everything else on the site stays outlined. */ .ap-more{ display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:20px 36px; border-radius:10px; background:var(--orange); color:#fff; font-size:14px; font-weight:700; letter-spacing:.18em; transition:box-shadow .25s, transform .25s, filter .25s; } .ap-more i{ font-style:normal; font-size:19px; line-height:1; color:#fff; transition:transform .25s; } .ap-more:hover{ /* the global a:hover{color:orange} outranks .ap-more's white and painted the label orange-on-orange (it looked like the text vanished) */ color:#fff; background:#ff7d2e; /* hotter step up from --orange, so the state reads */ box-shadow:0 0 30px rgba(255,90,20,.45); transform:translateY(-2px); } .ap-more:hover i{transform:translate(3px,-3px)} /* One button voice across the site (art direction 2026-09): outlined pill on the dark ground, wide-tracked uppercase, orange arrow. The old solid-orange variant folds into this same look; the class names stay so nothing else has to change. */ .ap-btn{ font-size:12.5px; font-weight:700; letter-spacing:.2em; padding:16px 30px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(255,90,20,.75); background:rgba(10,8,24,.45); color:var(--paper); transition:box-shadow .25s, transform .25s, border-color .25s, background .25s; } .ap-btn span{color:var(--orange)} .ap-btn:hover{ border-color:rgba(255,132,66,.95); background:rgba(255,90,20,.08); box-shadow:0 0 22px rgba(255,90,20,.25); transform:translateY(-1px); } .ap-btn--solid{background:rgba(255,90,20,.1)} .ap-btn--ghost{border-color:rgba(255,90,20,.45)} /* ---------- pointer-tracked glow ---------- The navbar CTA lights up wherever the pointer is over it. This gives the same behaviour to every other button. --mx/--my are the pointer position as a percentage of the button's own box, written by global.js; the 50% defaults keep it centred and harmless if JS never runs. Two layers, both driven by the same coordinates: ::before the light ON the button. Same gradient values as .ap-cta, copied deliberately: an earlier pass used a lighter, wider one and the new buttons read visibly brighter than the navbar. ::after a soft halo spilling OUTSIDE the box, blurred and pushed behind the button with a negative z-index. Deliberately NOT merged with .ap-cta, which keeps its own version: that button also runs a border sweep on hover, and an element only has two pseudo-elements to spend. The shared JS drives both. Pseudo-elements rather than an extra background layer, because the two hero buttons come from the Claude Design export with their background set in an inline style attribute, which no stylesheet rule can override. */ .ap-btn, .ap-more, .ap-foot-cta, .ap-hero-btn{ --mx:50%; --my:50%; position:relative; /* new stacking context, so the negative z-index on ::after stays behind the button and does not fall through to whatever is behind the section */ isolation:isolate; } .ap-btn::before, .ap-more::before, .ap-foot-cta::before, .ap-hero-btn::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; /* Both layers go behind the label (a positioned pseudo-element with z-index auto would paint OVER the text and tint it), and the light goes behind the halo, which is the order .ap-cta ends up with: there the light is part of the button's own background and the halo is a negative z-index pseudo-element painting on top of it. */ z-index:-2; background:radial-gradient( circle 90px at var(--mx) var(--my), rgba(255,125,55,.16), rgba(255,90,20,.055) 42%, transparent 75% ); opacity:0; transition:opacity .35s ease; } .ap-btn::after, .ap-more::after, .ap-foot-cta::after, .ap-hero-btn::after{ content:''; position:absolute; inset:-18px; z-index:-1; /* over the inner light, under the label (see ::before) */ border-radius:18px; pointer-events:none; background:radial-gradient( circle 75px at var(--mx) var(--my), rgba(255,90,20,.34), rgba(255,90,20,.10) 40%, transparent 72% ); filter:blur(12px); opacity:0; transition:opacity .35s ease; } .ap-btn:hover::before, .ap-btn:hover::after, .ap-more:hover::before, .ap-more:hover::after, .ap-foot-cta:hover::before, .ap-foot-cta:hover::after, .ap-hero-btn:hover::before, .ap-hero-btn:hover::after{ opacity:1; } /* Its arrow already has its own hover treatment; keep the moving light off the circle so the two don't fight. */ .ap-more i{position:relative; z-index:1} @media (prefers-reduced-motion: reduce){ .ap-btn::before, .ap-btn::after, .ap-more::before, .ap-more::after, .ap-foot-cta::before, .ap-foot-cta::after, .ap-hero-btn::before, .ap-hero-btn::after{ transition:none; } } /* ---------- CTA band ---------- Big centred "ready when you are" section pattern, used at the bottom of the home page and reused as-is on any content page (services, etc). */ .ap-cta-band{position:relative; text-align:center; padding:150px 0 170px; overflow:hidden} .ap-cta-band::before{ content:''; position:absolute; left:50%; bottom:-42vh; transform:translateX(-50%); width:130vw; height:80vh; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,90,20,.16) 0%, rgba(255,90,20,0) 68%); } .ap-buttons{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:36px; flex-wrap:wrap} /* ---------- footer ---------- */ /* dark enough to smother the page's ambient corner glow where it would otherwise bleed through as a stray warm patch, translucent enough to still let the starfield show through */ /* The ground fades in instead of starting on a line. The flat fill plus a border-top was the hard edge under the CTA's moon: a 1px rule and an 86% black step against whatever the section above ends on. */ .ap-foot{ position:relative; z-index:1; padding:90px 0 0; overflow:hidden; background:linear-gradient(180deg,rgba(3,3,5,0) 0,rgba(3,3,5,.86) 120px); } .ap-foot-top{ position:relative; z-index:2; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:58px; } .ap-foot-brand{display:flex; flex-direction:column; gap:20px; max-width:320px} .ap-foot-logo img{height:28px; width:auto} .ap-foot-tagline{font-size:14.5px; line-height:1.65; color:var(--muted); text-wrap:pretty; margin:0} .ap-foot-col{display:flex; flex-direction:column; gap:14px} .ap-foot-head{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em; color:rgba(238,240,246,.45); margin-bottom:4px; } .ap-foot-col a{font-size:14.5px; color:rgba(238,240,246,.78); transition:color .25s} .ap-foot-col a:hover{color:var(--orange)} .ap-foot-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; border:1px solid var(--orange); background:rgba(255,90,20,.08); font-size:12.5px; font-weight:700; letter-spacing:.1em; padding:12px 20px; border-radius:8px; cursor:pointer; width:fit-content; transition:box-shadow .25s; } .ap-foot-cta:hover{box-shadow:0 0 22px rgba(255,90,20,.35)} .ap-foot-cta span{color:var(--orange)} .ap-foot-bottom{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:rgba(238,240,246,.45); } .ap-foot-legal{display:flex; gap:26px} .ap-foot-legal a{color:rgba(238,240,246,.45); transition:color .25s} .ap-foot-legal a:hover{color:var(--orange)} /* Cookie banner (global.js, "consent banner"): one small card in the corner, both answers the same size so neither is the easy default. */ .ap-consent{ position:fixed; left:16px; bottom:16px; z-index:190; display:flex; align-items:center; gap:14px; max-width:440px; padding:10px 10px 10px 14px; background:rgba(3,3,5,.92); border:1px solid var(--line); border-radius:10px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-family:'Space Mono',monospace; font-size:11px; line-height:1.45; color:rgba(238,240,246,.72); } .ap-consent p{margin:0} .ap-consent a{color:var(--paper); text-decoration:underline; text-underline-offset:2px} .ap-consent-btns{display:flex; gap:6px; flex-shrink:0} .ap-consent button{ min-width:74px; padding:7px 10px; border-radius:6px; cursor:pointer; font:inherit; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); background:transparent; border:1px solid rgba(238,240,246,.35); } .ap-consent button:hover, .ap-consent button:focus-visible{border-color:var(--orange); color:var(--orange); outline:none} @media (max-width:520px){ .ap-consent{left:10px; right:10px; bottom:10px; max-width:none; flex-direction:column; align-items:stretch; gap:8px} .ap-consent-btns button{flex:1} } @media (max-width:1024px){ .ap-foot{padding:64px 0 0} .ap-foot-top{grid-template-columns:1fr 1fr; gap:36px 30px; padding-bottom:42px} .ap-foot-brand{grid-column:1 / -1; max-width:460px} } /* ---------- reveal on scroll ---------- Only hide things when scripting is actually available, so a JS failure (or an old browser) can never leave the page blank. */ @media (scripting: enabled){ .ap-rv{opacity:0; transform:translateY(26px)} } /* An animation, not a transition. The reveal used to be a transition declared on .ap-rv, which meant any component that declared a `transition` of its own replaced it: one class, same specificity, later in the file. .ap-work-card transitions its hover (border, translate, background) and so lost the fade entirely, and the listing's cards snapped in with no animation at all. `animation` is a separate property, so a component's transition cannot reach it. */ .ap-rv.is-in{animation:apReveal .7s cubic-bezier(.22,.61,.36,1) both} @keyframes apReveal{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} } /* ---------- the page title is never hidden ---------- The h1 is the largest thing on every hero, so it is what Chrome reports as the Largest Contentful Paint, and Chrome does not count an element while its opacity is 0. As a scroll reveal it stayed invisible until global.js had loaded, the observer had fired and the fade had run: measured on a throttled phone, the title landed 1.2 to 1.7s after the first paint. It still rises, but by transform alone and from the first style pass, so it is visible, and counted, the moment the page paints, and it no longer waits for any script. The selector outranks .ap-rv.is-in, so the reveal does not replay when the observer catches up. */ h1.ap-display.ap-rv{opacity:1; transform:none; animation:apTitleRise .8s cubic-bezier(.19,.82,.22,1) both} @keyframes apTitleRise{ from{transform:translateY(22px)} to{transform:none} } @media (prefers-reduced-motion:reduce){ h1.ap-display.ap-rv{animation:none} } /* ---------- responsive ---------- */ @media (max-width:1024px){ .ap-shell{width:min(var(--shell),100% - 48px)} .ap-cta-band{padding:90px 0} .ap-cta-band .ap-planet{display:none} /* ...except the easter-egg planet: it was disappearing entirely off the mobile viewport before (not just hidden by the rule above, it was genuinely positioned outside the visible area), so it gets its own smaller, corner-anchored position instead of inheriting the desktop top:10%/right:2%/110px placement. !important because the element also carries an inline style="..." (top/right/width) from index.php, which otherwise wins over any stylesheet rule no matter how specific. */ .ap-cta-band .ap-planet.ap-planet--egg{ display:block !important; top:3% !important; right:4% !important; width:46px !important; opacity:.85 !important; } /* the sticky header is the ONLY header on mobile, shown from first paint instead of fading in after the hero scrolls by, since the hero's own inline nav is hidden (too many links for this width to hold) */ .ap-header{ padding:16px 20px; opacity:1; visibility:visible; transform:none; pointer-events:auto; /* the desktop bar centres the CTA between logo and nav with 1fr auto 1fr; with the nav gone there is nothing on its right to balance against, so it sat alone in the middle of the bar. Both controls belong together on the right. */ grid-template-columns:1fr auto auto; column-gap:14px; } /* The veil's 64px bleed is sized for the desktop bar. Here the bar is 70px tall and the page's first line lands around 108px, so that bleed reaches over it and the backdrop blur softens the eyebrow and the case breadcrumbs. Half of it clears them and still dissolves. */ .ap-header::before{inset:-16px 0 -16px 0} .ap-header::after{inset:-24px -60px -30px -60px} .ap-nav{display:none} .ap-cta{grid-column:2; justify-self:end; padding:11px 18px; font-size:11.5px} .ap-burger{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; grid-column:3; justify-self:end; width:30px; height:30px; padding:0; margin:0; background:none; border:0; cursor:pointer; } .ap-burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--paper); transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .25s ease, width .25s ease; } .ap-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ap-burger.is-open span:nth-child(2){opacity:0; width:0} .ap-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .ap-mnav{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; z-index:5; max-height:0; overflow:hidden; opacity:0; pointer-events:none; background:rgba(6,7,15,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); transition:max-height .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease; } .ap-mnav.is-open{max-height:70vh; opacity:1; pointer-events:auto; overflow-y:auto} .ap-mnav a{ padding:18px 24px; font-size:15px; font-weight:700; letter-spacing:.09em; border-bottom:1px solid var(--line); color:var(--paper); } .ap-mnav a.is-current{color:var(--orange)} /* Services and Industries open a sub-list instead of navigating, and nothing said so. global.js already puts aria-expanded on exactly those two, so the chevron needs no markup and no script of its own. */ .ap-mnav a[aria-expanded]{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .ap-mnav a[aria-expanded]::after{ content:''; flex:none; width:9px; height:9px; margin-right:2px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s cubic-bezier(.22,.61,.36,1); opacity:.75; } .ap-mnav a[aria-expanded="true"]::after{ transform:rotate(-135deg) translate(-3px,-3px); opacity:1; } .ap-mnav-sub{ display:none; flex-direction:column; position:relative; padding:4px 24px 12px 48px; border-bottom:1px solid var(--line); } .ap-mnav-sub::before{ content:''; position:absolute; left:24px; top:12px; bottom:16px; width:2px; background:rgba(238,240,246,.4); pointer-events:none; } .ap-mnav-sub.is-open{ display:flex; } .ap-mnav-sub a{ display:block; width:100%; padding:13px 0; min-height:50px; font-size:17px; line-height:1.4; font-weight:600; letter-spacing:.01em; color:rgba(238,240,246,.88); border-bottom:0; } .ap-lang-switch--mobile{ display:grid; grid-template-columns:1fr 1fr; width:100%; gap:0; padding:0; margin:0; border-left:0; } .ap-lang-switch--mobile a{ width:100%; padding:20px 10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:.09em; border-bottom:1px solid var(--line); } .ap-lang-switch--mobile a + a{ border-left:1px solid var(--line); } .ap-lang-switch--mobile a{font-size:13px; font-weight:700; letter-spacing:.09em} } @media (max-width:560px){ .ap-shell{width:calc(100% - 32px)} .ap-cta{padding:11px 16px; font-size:11px} .ap-foot-top{grid-template-columns:1fr; gap:34px; padding-bottom:34px} .ap-foot-bottom{flex-direction:column; align-items:flex-start; gap:14px} } @media (prefers-reduced-motion:reduce){ .ap-rv,.ap-rv.is-in{opacity:1; transform:none; animation:none} } /* ========================================================================== contact modal, triggered by any [data-ap-contact-trigger] (header CTA, footer CTA), from any page. Three layers, entrance staged bottom-to-top (background flashes in first, then the ship rises into place, then the form/card panel), closing runs the same layers in reverse with shorter, undelayed transitions, see the .is-closing overrides below each layer. State toggling and timing live in global.js; everything about *how* each layer moves lives here. ========================================================================== */ .ap-cm{ position:fixed; inset:0; z-index:200; display:flex; align-items:stretch; } .ap-cm[hidden]{display:none} /* position:fixed (not absolute) on bg/close, both need to stay put even when .ap-cm itself becomes an internally-scrolling container on mobile (see the media query below), and pin to the same box either way since .ap-cm already exactly covers the viewport */ .ap-cm-bg{ position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0; transition:opacity .3s ease; } /* darkens the panel side regardless of how bright the source photo is, the nebula asset is dark already, this is just insurance for contrast */ .ap-cm-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,3,5,.74) 0%, rgba(3,3,5,.46) 46%, rgba(3,3,5,.08) 74%); } .ap-cm.is-open .ap-cm-bg{opacity:1; transition:opacity .32s ease} .ap-cm.is-closing .ap-cm-bg{transition:opacity .3s ease .38s} .ap-cm-close{ position:fixed; top:26px; right:32px; z-index:4; width:44px; height:44px; border-radius:50%; border:1px solid rgba(238,240,246,.28); background:rgba(3,3,5,.5); backdrop-filter:blur(8px); color:var(--paper); display:grid; place-items:center; cursor:pointer; transition:border-color .25s, color .25s, box-shadow .25s, transform .25s; } .ap-cm-close:hover{border-color:var(--orange); color:var(--orange); box-shadow:0 0 20px rgba(255,90,20,.3); transform:rotate(90deg)} /* ---- ship: pinned to the right edge (order:1 puts it after the panel in visual order without touching DOM order, it's aria-hidden, so tab order doesn't care), overflow:hidden so only a window onto the porthole is ever visible. The BOX itself never moves, .ap-cm-ship-img is what animates on open/close (see below). Doing it this way (a static clip window with the image travelling through it) instead of animating the box lets the nose cone genuinely rise into frame and back out the top as it settles, rather than staying invisible the entire time behind a crop window that would otherwise be rigidly attached to, and travelling with, the moving box. */ .ap-cm-ship{ position:relative; z-index:1; order:1; flex:0 0 min(50vw,700px); overflow:hidden; pointer-events:none; } .ap-cm-ship-img{ position:absolute; left:50%; bottom:-10%; z-index:1; width:auto; height:140%; max-width:none; transform:translate(-50%,130vh); transition:transform .55s cubic-bezier(.4,0,.2,1); /* tune bottom/height above to line up the porthole with the crop window, this is deliberately a rough default, easiest to eyeball in-browser */ } .ap-cm.is-open .ap-cm-ship-img{transform:translate(-50%,0); transition:transform .75s cubic-bezier(.16,1,.3,1) .12s} .ap-cm.is-closing .ap-cm-ship-img{transition:transform .5s cubic-bezier(.4,0,.2,1) .15s} @keyframes apCmFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-11px)}} .ap-cm.is-open .ap-cm-ship-img{animation:apCmFloat 6.5s ease-in-out .95s infinite} /* ---- panel: form + info card, slides in after the ship settles */ .ap-cm-panel{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:safe center; /* safe: a form taller than the window must not lose its top */ align-items:flex-end; padding:120px min(9vw,88px) 48px; max-height:100vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; /* stays scrollable on a short window, just no visible rail */ opacity:0; transform:translateX(-26px); transition:opacity .3s ease, transform .3s ease; /* align-items:flex-end hugs the content against the ship's edge (now on the right) instead of the outer viewport edge, that's what actually read as "centered" before the ship moved sides: the panel's own edge touching the ship, not literal viewport-center */ } .ap-cm.is-open .ap-cm-panel{opacity:1; transform:none; transition:opacity .5s ease .52s, transform .5s cubic-bezier(.2,.8,.2,1) .52s} .ap-cm.is-closing .ap-cm-panel{transition:opacity .22s ease, transform .22s ease} /* single block the panel aligns as one unit, head/form/card all sit at width:100% of THIS, so they share one left edge instead of each being independently right-aligned to its own shrink-to-fit width (which is what produced the ragged edge: a heading, a form and a card all measure different "natural" widths) */ .ap-cm-inner{width:100%; max-width:560px; display:flex; flex-direction:column; gap:28px} .ap-cm-head{max-width:460px} .ap-cm-head .ap-display{font-size:clamp(26px,3vw,40px); margin-top:14px} .ap-cm-sub{margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--muted); text-wrap:pretty} .ap-cm-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0} .ap-cm-status{margin:0; min-height:1.4em; font-size:12.5px; font-weight:600; color:var(--muted)} .ap-cm-status[data-state="ok"]{color:var(--orange-soft)} .ap-cm-status[data-state="error"]{color:#ff8080} .ap-cm-card{ max-width:440px; padding:20px 22px; border-radius:16px; background:rgba(15,18,33,.82); border:1px solid rgba(238,240,246,.12); box-shadow:0 20px 50px -24px rgba(0,0,0,.6); } .ap-cm-card-head{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:rgba(238,240,246,.5); margin-bottom:10px} .ap-cm-card-email{display:inline-block; font-size:15px; font-weight:700; color:var(--orange-soft)} .ap-cm-card-email:hover{color:var(--orange)} .ap-cm-card-note{margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--muted)} .ap-cm-panel::-webkit-scrollbar{display:none} /* ---- the form: shared with /contact/ (includes/contact-form.php) ---- */ .ap-cf{ display:flex; flex-direction:column; gap:clamp(16px,2.2vh,22px); padding:clamp(24px,3.4vw,44px); border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,rgba(17,19,26,.9),rgba(8,9,13,.92)); } .ap-cf-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px)} .ap-cf-field{display:flex; flex-direction:column; gap:9px; min-width:0; border:0; padding:0; margin:0} .ap-cf-field > label,.ap-cf-field > legend{ padding:0; font-size:14.5px; font-weight:400; color:rgba(238,240,246,.9); } /* the asterisk is the only orange in a label */ .ap-cf-field b{color:var(--orange); font-weight:400} .ap-cf-hint{margin:8px 0 16px; font-size:13px; font-weight:300; color:rgba(238,240,246,.45)} .ap-cf-field input[type="text"], .ap-cf-field input[type="email"], .ap-cf-field textarea, .ap-cf-select select{ width:100%; font:inherit; font-size:15px; color:var(--paper); padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(6,7,10,.75); transition:border-color .2s ease, background-color .2s ease; } .ap-cf-field textarea{resize:vertical; min-height:150px; line-height:1.55} .ap-cf-field input::placeholder,.ap-cf-field textarea::placeholder{color:rgba(238,240,246,.33)} .ap-cf-field input:focus,.ap-cf-field textarea:focus,.ap-cf-select select:focus{ outline:none; border-color:rgba(255,90,20,.6); background:rgba(6,7,10,.95); } /* a select keeps the same shell as an input, with our own chevron: the native one is drawn by the OS and ignores the palette */ .ap-cf-select{position:relative; display:block} /* a long option must not run under the chevron */ .ap-cf-select select{appearance:none; padding-right:44px; cursor:pointer; text-overflow:ellipsis} .ap-cf-select option{background:#0b0d12; color:var(--paper)} .ap-cf-select i{ position:absolute; right:16px; top:50%; translate:0 -50%; display:inline-flex; font-size:11px; color:rgba(238,240,246,.5); pointer-events:none; } /* ---------- the speciality chips ---------- */ .ap-cf-chips{gap:0} .ap-cf-chip-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .ap-cf-chip{position:relative; display:block} /* the box itself is only there for the keyboard and the form data */ .ap-cf-chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer} .ap-cf-chip span{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(6,7,10,.6); font-size:14.5px; color:rgba(238,240,246,.82); transition:border-color .2s ease, background-color .2s ease, color .2s ease; } .ap-cf-chip:hover span{border-color:rgba(255,90,20,.45); color:var(--paper)} .ap-cf-chip input:checked + span{ background:var(--orange); border-color:var(--orange); color:#0b0d12; font-weight:500; } .ap-cf-chip input:focus-visible + span{outline:2px solid var(--orange); outline-offset:3px} /* ---------- consent ---------- */ .ap-cf-consent{ display:flex; align-items:center; gap:14px; margin-top:6px; cursor:pointer; font-size:14.5px; font-weight:300; color:rgba(238,240,246,.82); } .ap-cf-consent input{ appearance:none; flex:0 0 auto; width:26px; height:26px; margin:0; cursor:pointer; border:1px solid rgba(238,240,246,.55); border-radius:7px; background:transparent; transition:border-color .2s ease, background-color .2s ease; } .ap-cf-consent input:checked{ background:var(--orange) no-repeat center/13px 10px; border-color:var(--orange); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10' fill='none' stroke='%230b0d12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.7 8.8 12 1.4'/%3E%3C/svg%3E"); } .ap-cf-consent input:focus-visible{outline:2px solid var(--orange); outline-offset:3px} .ap-cf-consent a{color:inherit; text-decoration:underline; text-underline-offset:3px} .ap-cf-consent a:hover{color:var(--orange)} /* ---------- submit ---------- The site's .ap-btn--solid is a tinted ghost, which is right for a button sitting among others. This one is the only action in its panel, so it is filled: solid orange with dark type, arrow included. */ .ap-cf-submit{ width:100%; justify-content:center; margin-top:6px; background:var(--orange); border-color:var(--orange); color:#0b0d12; } /* .ap-btn paints its label span orange, which is invisible here */ .ap-cf-submit span{color:#0b0d12} .ap-cf-submit .ap-arw{fill:currentColor} /* the pointer-tracked glow is an orange wash, invisible on orange and it only muddies the fill; the outside halo stays */ .ap-cf-submit::before{display:none} .ap-cf-submit:hover{background:var(--orange-soft); border-color:var(--orange-soft); color:#0b0d12} .ap-cf-submit:disabled{opacity:.55; cursor:progress} .ap-cf-required{margin:0; font-size:13px; font-weight:300; color:rgba(238,240,246,.45)} .ap-cf-status:empty{display:none} @media (max-width:620px){ .ap-cf-row{grid-template-columns:minmax(0,1fr)} .ap-cf-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* In the modal the form sits straight on the sky: no panel of its own, and a column wide enough for the two-up rows and the chips. */ .ap-cm .ap-cf{padding:0; border:0; background:none} .ap-cm .ap-cf-field textarea{min-height:110px} /* body scroll lock while a modal is open (shared with the invaders easter egg modal below, and any future one) */ html.ap-modal-lock{overflow:hidden} @media (max-width:1024px){ /* mobile priority is the form, not the ship: the form is what's visible the moment the modal opens, full stop, the ship sits BELOW it (order:1, after the panel, "inverted" from the desktop arrangement where it comes first) and only comes into view if you scroll down past the form. That sidesteps every version of "the ship covers the form" for good, instead of trying to carve out separate space for both. .ap-cm itself becomes the scroll container (overflow-y:auto), bg/close are position:fixed precisely so they stay put through that scroll instead of scrolling away with the content. The ship still lies on its side, the tall portrait asset doesn't fit a short band any other way, but no longer needs its own entrance animation: it's already below the fold when the modal opens, so it's simply sitting there, static, waiting to be scrolled to. */ .ap-cm{flex-direction:column; overflow-y:auto} .ap-cm-ship{ order:1; flex:0 0 30vh; } .ap-cm-ship-img{ position:absolute; top:30%; left:50%; bottom:auto; width:auto; height:140vw; max-width:none; transform:translate(-50%,-50%) rotate(90deg); /* no object-fit here on purpose, that was cropping into the source image to force a fit, which is exactly what cut the nose off. Same approach as desktop: width:auto/height only, so the whole image renders at its own aspect ratio (oversized on purpose) and the band's overflow:hidden does the actual cropping. rotate(90deg), the mirror of desktop's untransformed nose-up orientation, turns the nose to point right; tune top/left/height above to line the porthole up further, same "eyeball it" approach as desktop. */ } @keyframes apCmFloatM{ 0%,100%{transform:translate(-50%,-50%) rotate(90deg)} 50%{transform:translate(-50%,calc(-50% - 10px)) rotate(90deg)} } .ap-cm.is-open .ap-cm-ship-img{animation:apCmFloatM 6.5s ease-in-out .95s infinite} /* exits downward on close, same direction the desktop ship disappears in (there it sinks back below the fold, reversing its own rise-up entry), the only ship transform mobile needs, since it has no entrance animation to begin with (see the comment up top) */ .ap-cm.is-closing .ap-cm-ship-img{ transform:translate(-50%,calc(-50% + 100vh)) rotate(90deg); transition:transform .45s cubic-bezier(.4,0,.2,1); } .ap-cm-panel{ order:0; padding:14px 24px 40px; justify-content:flex-start; align-items:stretch; max-height:none; overflow-y:visible; } .ap-cm-bg::after{background:linear-gradient(180deg, rgba(3,3,5,.2) 0%, rgba(3,3,5,.5) 30%, rgba(3,3,5,.86) 46%, rgba(3,3,5,.92) 100%)} .ap-cm-close{top:18px; right:18px; width:38px; height:38px} } @media (prefers-reduced-motion:reduce){ .ap-cm-bg, .ap-cm-ship-img, .ap-cm-panel{transition:none !important} .ap-cm-ship-img{animation:none !important} } /* ========================================================================== invaders easter egg, a lightweight modal wrapping an