/* Pulsar landing page — derived from docs/mockups/landing_deep_field.html (the approved spec). Edit both or regenerate; keep them in step. */ /* ============================================================ "PULSAR" — the Deep Field direction, developed Named for the celestial lighthouse; styled for the long look. Hubble's Deep Field: point at one patch of sky, hold the exposure longer than anyone thinks reasonable, resolve what was there all along. Near-black · thin bold uppercase · hairline rules · one cyan signal. ============================================================ */ :root { --void: #05070d; --void-2: #090d17; --hair: #1c2331; /* hairline rules */ --hair-2: #2c3648; --star: #dfe6f2; --text: #eef2fa; --text-2: #9aa6bd; --muted: #5d6981; --ion: #62d9e8; /* the signal — pulsar cyan */ --ion-dim:rgba(98,217,232,.35); } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:"Liberation Sans","DejaVu Sans","Helvetica Neue",Arial,sans-serif; background:var(--void); color:var(--text); overflow-x:hidden; } /* ---- deep field: stars in real stellar colors, each layer on its own twinkle phase (the Outer Wilds menu-sky treatment: gentle, lively, warm-and-cool mixed — the sky feels inhabited, not printed) ---- */ .field { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(ellipse 40% 30% at 12% 78%, rgba(120,130,200,.05), transparent 60%); } .field i { position:absolute; border-radius:50%; } .f1 { width:1px; height:1px; box-shadow: 760px 110px #ffd9a3, 1020px 320px #cfe2ff, 1250px 90px #eef2fa, 1400px 380px #a5e8f0, 940px 480px #ffe9c4, 1180px 560px #cfe2ff, 60px 760px #ffb39a, 380px 840px #eef2fa, 660px 780px #ffd9a3, 930px 880px #a5e8f0, 1180px 800px #cfe2ff, 1390px 720px #ffe9c4, 160px 90px #eef2fa, 340px 40px #ffd9a3, 90px 300px #cfe2ff, 1330px 940px #ffb39a, 720px 940px #eef2fa, 240px 950px #a5e8f0; animation:blink 5s ease-in-out infinite alternate; } .f2 { width:2px; height:2px; box-shadow: 870px 210px #ffe9c4, 1120px 180px #cfe2ff, 1300px 640px #ffd9a3, 1010px 690px #a5e8f0, 130px 900px #eef2fa, 1050px 920px #ffb39a, 60px 160px #cfe2ff, 420px 930px #ffe9c4; animation:blink 7s ease-in-out 1.1s infinite alternate; } .f3 { width:1px; height:1px; box-shadow: 820px 60px #a5e8f0, 1090px 120px #ffd9a3, 1355px 210px #cfe2ff, 985px 250px #eef2fa, 700px 300px #ffe9c4, 1230px 420px #ffb39a, 880px 620px #cfe2ff, 1440px 550px #ffd9a3, 200px 820px #a5e8f0, 540px 890px #eef2fa, 810px 860px #cfe2ff, 1260px 880px #ffe9c4, 40px 480px #ffd9a3, 300px 640px #cfe2ff; animation:blink 6s ease-in-out .6s infinite alternate; } .f4 { width:2px; height:2px; filter:drop-shadow(0 0 3px rgba(238,242,250,.9)); box-shadow: 1160px 640px #ffe9c4, 300px 130px #cfe2ff, 890px 60px #ffd9a3, 1420px 180px #eef2fa, 170px 660px #a5e8f0, 620px 880px #ffb39a; animation:blink 8.5s ease-in-out 2s infinite alternate; } @keyframes blink { from{opacity:.3} to{opacity:.9} } /* ---- the very occasional nova: a star that quietly sits there, then — once or twice a minute, somewhere — flares hard and settles back ---- */ .nova { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.3; } .nova.n1 { left:76px; top:206px; animation:nova 47s linear -38.8s infinite; } .nova.n2 { left:450px; top:895px; background:#ffe9c4; animation:nova 61s linear -20s infinite; } @keyframes nova { 0%, 87% { opacity:.3; transform:scale(1); box-shadow:none; } 90% { opacity:1; transform:scale(1.4); box-shadow:0 0 4px 1px rgba(255,255,255,.5), 0 0 14px 5px rgba(255,242,220,.18), 0 0 36px 12px rgba(180,220,255,.07); } 93% { opacity:.9; transform:scale(1.2); box-shadow:0 0 3px 1px rgba(255,255,255,.35), 0 0 9px 3px rgba(255,242,220,.1); } 100% { opacity:.3; transform:scale(1); box-shadow:none; } } /* ---- the nebula, upper right: generated image (make_nebula.py) ---- fades to true black at its own edges, so screen-blending onto the void leaves no visible rectangle */ .nebula { position:absolute; top:-140px; right:-200px; width:1000px; height:833px; z-index:0; pointer-events:none; } .nebula img { width:100%; height:100%; display:block; mix-blend-mode:screen; /* the mask, not the blend, is what guarantees no rectangle seam: image alpha fades out before its frame edge, so the page background shows through even where screen-blending isn't applied */ -webkit-mask-image:radial-gradient(ellipse 60% 56% at 56% 38%, #000 42%, transparent 88%); mask-image:radial-gradient(ellipse 60% 56% at 56% 38%, #000 42%, transparent 88%); } /* ---- the pulsar: quiet core + expanding wisps. After Hubble's Crab time-lapse: wave-like ripples moving outward through the surrounding gas — no lighthouse beam. ---- */ .pulsar { position:absolute; top:278px; right:294px; width:0; height:0; z-index:0; pointer-events:none; } .pulsar .core { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px rgba(255,255,255,.9), 0 0 22px 6px var(--ion-dim), 0 0 60px 18px rgba(98,217,232,.18); } .pulsar .spike { position:absolute; background: linear-gradient(90deg, transparent, rgba(223,230,242,.85), transparent); } .pulsar .sx { left:-70px; top:-.5px; width:140px; height:1px; } .pulsar .sy { left:-.5px; top:-70px; width:1px; height:140px; background:linear-gradient(180deg, transparent, rgba(223,230,242,.85), transparent); } /* wisps: inclined elliptical arcs (only the leading edge is drawn) that ripple outward slowly and dissolve, like the Crab's expanding rings */ .pulsar .wisp { position:absolute; left:-60px; top:-24px; width:120px; height:48px; border:1px solid transparent; border-top-color:rgba(98,217,232,.55); border-radius:50%; transform:rotate(-24deg) scale(.3); opacity:0; filter:blur(.4px); animation:wisp 8s cubic-bezier(.2,.5,.6,1) infinite; } .pulsar .w2 { animation-delay:2.7s; } .pulsar .w3 { animation-delay:5.4s; } @keyframes wisp { 0% { transform:rotate(-24deg) scale(.3); opacity:0; } 12% { opacity:.75; } 70%, 100% { transform:rotate(-24deg) scale(2.9); opacity:0; } } @media (prefers-reduced-motion:reduce){ .field i, .pulsar .wisp { animation:none !important; } .pulsar .wisp { opacity:.3; transform:rotate(-24deg) scale(1.4); } .nova { opacity:.4; } } .wrap { position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 40px; } /* ---- header ---- */ header { position:sticky; top:0; z-index:5; background:rgba(5,7,13,.9); backdrop-filter:blur(6px); border-bottom:1px solid var(--hair); } .hbar { display:flex; align-items:center; height:70px; } .mark { display:flex; align-items:center; gap:13px; font-size:1.04rem; font-weight:700; letter-spacing:.42em; text-transform:uppercase; } .mark svg { display:block; flex-shrink:0; } .mark .sub { font-size:.62rem; font-weight:400; letter-spacing:.3em; color:var(--muted); margin-left:2px; padding-left:16px; border-left:1px solid var(--hair-2); } nav { margin-left:auto; display:flex; gap:34px; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; } nav a { color:var(--text-2); text-decoration:none; padding-bottom:4px; border-bottom:1px solid transparent; } nav a:hover { color:var(--text); border-color:var(--ion); } /* ---- hero ---- */ .hero { min-height:min(88vh, 800px); display:flex; align-items:center; padding:90px 0 80px; position:relative; overflow:visible; } .hero-inner { width:100%; position:relative; z-index:1; } .hero .index { font-size:.75rem; letter-spacing:.4em; color:var(--muted); text-transform:uppercase; margin-bottom:34px; } .hero .index b { color:var(--ion); font-weight:400; } h1 { font-size:5.9rem; line-height:1.0; font-weight:300; letter-spacing:.04em; text-transform:uppercase; } h1 strong { font-weight:700; display:block; color:#fff; } h1 strong .dot { color:var(--ion); } .subheader { margin:34px 0 0; font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ion); } .subheader span { color:var(--muted); padding:0 10px; } .hero p.lead { margin:26px 0 52px; max-width:600px; font-size:1.06rem; line-height:1.8; color:var(--text-2); } .cta { display:inline-block; border:1px solid var(--text); color:var(--text); text-decoration:none; text-transform:uppercase; letter-spacing:.3em; font-size:.82rem; padding:20px 52px; transition:all .25s; } .cta:hover { background:var(--text); color:var(--void); } .cta.ion { border-color:var(--ion); color:var(--ion); margin-left:20px; } .cta.ion:hover { background:var(--ion); color:var(--void); } /* ---- stat rail ---- */ .rail { border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); position:relative; z-index:1; background:rgba(5,7,13,.72); } .rail .wrap { display:grid; grid-template-columns:repeat(4,1fr); } .rcell { padding:44px 30px; border-left:1px solid var(--hair); } .rcell:first-child { border-left:none; } .rcell b { display:block; font-size:2.6rem; font-weight:300; letter-spacing:.02em; font-family:"Liberation Mono","DejaVu Sans Mono",monospace; } .rcell b em { color:var(--ion); font-style:normal; } .rcell span { display:block; margin-top:10px; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); } /* ---- the two doctrines: deep field & lighthouse ---- */ .doctrine { padding:120px 0 30px; } .doctrine .cols { display:grid; grid-template-columns:1fr 1fr; gap:70px; } .doc h2 { font-size:1.9rem; font-weight:300; letter-spacing:.18em; text-transform:uppercase; margin:18px 0 26px; } .doc h2 b { font-weight:700; } .doc .tag { font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ion); } .doc p { color:var(--text-2); line-height:1.85; font-size:.98rem; margin-bottom:18px; } .doc p b { color:var(--text); font-weight:700; } /* the stacked-pulse trace (PSR B1919+21) */ .trace { margin-top:34px; border:1px solid var(--hair); padding:26px 26px 14px; background:var(--void-2); } .trace svg { display:block; width:100%; height:auto; } .trace path { fill:var(--void-2); stroke:var(--text-2); stroke-width:1.1; } .trace path:nth-child(2n) { stroke:var(--muted); } .trace .lit { stroke:var(--ion); } .trace figcaption { font-family:"Liberation Mono",monospace; font-size:.68rem; letter-spacing:.18em; color:var(--muted); padding-top:12px; text-transform:uppercase; } /* exposure counter under the deep-field column */ .exposure { margin-top:34px; border:1px solid var(--hair); padding:26px; background:var(--void-2); display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; } .exposure b { display:block; font-family:"Liberation Mono",monospace; font-weight:400; font-size:1.5rem; } .exposure b i { color:var(--ion); font-style:normal; } .exposure span { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } /* ---- the survey (capability rows, goal-first) ---- */ .survey { padding:110px 0 40px; } .survey .shead { font-size:.8rem; font-weight:400; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .survey .slede { font-size:1.9rem; font-weight:300; letter-spacing:.1em; text-transform:uppercase; margin-bottom:30px; } .survey .slede b { font-weight:700; } .mrow { display:grid; grid-template-columns:110px 360px 1fr; gap:30px; padding:44px 0; border-bottom:1px solid var(--hair); align-items:baseline; transition:background .2s; } .mrow:hover { background:var(--void-2); } .mrow .no { font-family:"Liberation Mono",monospace; font-size:.9rem; color:var(--ion); letter-spacing:.1em; } .mrow h3 { font-size:1.5rem; font-weight:300; letter-spacing:.14em; text-transform:uppercase; } .mrow p { color:var(--text-2); font-size:.95rem; line-height:1.75; max-width:580px; } .mrow .cite { display:inline-block; margin-top:12px; font-family:"Liberation Mono",monospace; font-size:.72rem; letter-spacing:.12em; color:var(--muted); } /* ---- closing ---- */ .closing { text-align:center; padding:150px 0 160px; position:relative; } .closing::before { content:""; position:absolute; left:50%; top:0; width:1px; height:90px; background:linear-gradient(var(--ion), transparent); } .closing h2 { font-size:3.4rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; } .closing h2 b { font-weight:700; } .closing p { color:var(--text-2); margin-bottom:52px; letter-spacing:.04em; } footer { border-top:1px solid var(--hair); padding:38px 0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } footer .wrap { display:flex; justify-content:space-between; } footer a { color:var(--text-2); text-decoration:none; margin-left:28px; }