:root{ --void:#080808; --electric:#D4E600; --bone:#E8E7E4; --field:#2B2D31; --dim:#9c9c98; --faint:#7d7d79; --paper:#111113; --edge:rgba(232,231,228,.14); --head:'League Spartan',Arial,sans-serif; --serif:'Times New Roman',Times,serif; --pad:clamp(20px,5vw,40px); --bar:50px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--void); color:var(--bone); font-family:var(--head); font-weight:400; font-size:clamp(16px,4.1vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; } /* ══ the corridor — one-point perspective, strict symmetry, slow forward drift ══ Floor and ceiling planes converge on a centred vanishing point. The drift is deliberately slow: enough to hold attention while reading a question, not enough to compete with it. */ .field{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; perspective:300px;perspective-origin:50% 50%; } .field .plane{ position:absolute;left:-50%;width:200%;height:130vh; background-image: /* converging verticals — kept faint; they read as diagonals across the text */ repeating-linear-gradient(to right,rgba(212,230,0,.055) 0 1px,transparent 1px 96px), /* receding rungs — these carry the motion */ repeating-linear-gradient(to bottom,rgba(212,230,0,.15) 0 1px,transparent 1px 60px); animation:drift 19s linear infinite; } .field .floor{top:50%;transform-origin:50% 0;transform:rotateX(79deg); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 58%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 58%,#000 100%)} .field .ceil{bottom:50%;transform-origin:50% 100%;transform:rotateX(-79deg); -webkit-mask-image:linear-gradient(to top,transparent 0,#000 58%,#000 100%); mask-image:linear-gradient(to top,transparent 0,#000 58%,#000 100%)} @keyframes drift{from{background-position:0 0,0 0}to{background-position:0 0,0 60px}} /* light at the end of the corridor */ .field::after{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 44% 22% at 50% 50%,rgba(212,230,0,.045),transparent 70%); } /* ══ BACKGROUND VARIATION B — 2001 light panels ══ Blueprint wireframe becomes lit architecture: solid bands of ceiling and floor light receding to the vanishing point. Same geometry, different material. Switch by changing to . */ body.bg-panels .field .plane{ background-image:repeating-linear-gradient(to bottom, rgba(212,230,0,.20) 0 9px, rgba(212,230,0,.05) 9px 15px, transparent 15px 120px); animation-name:panels; animation-duration:13s; } @keyframes panels{from{background-position:0 0}to{background-position:0 120px}} body.bg-panels .field .floor{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 50%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 50%,#000 100%)} body.bg-panels .field .ceil{ -webkit-mask-image:linear-gradient(to top,transparent 0,#000 50%,#000 100%); mask-image:linear-gradient(to top,transparent 0,#000 50%,#000 100%)} body.bg-panels .field::after{ background:radial-gradient(ellipse 36% 18% at 50% 50%,rgba(212,230,0,.10),transparent 64%); } body::after{ content:'';position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ══ dossier bar ══ */ .bar{ position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:30; display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad); background:rgba(8,8,8,.9);border-bottom:1px solid var(--edge); } .bar b,.bar>span{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase} .bar b{color:var(--bone)} .bar .slash{color:var(--electric)} .bar>span{color:var(--electric);font-variant-numeric:tabular-nums} /* ══ screens ══ */ .screen{display:none;min-height:100svh;padding:calc(var(--bar) + var(--pad)) var(--pad) calc(var(--pad)*2)} .screen.is-active{display:flex;align-items:center;position:relative;z-index:2} .screen[data-screen="result"].is-active, .screen[data-screen="gate"].is-active{align-items:flex-start} .wrap{width:100%;max-width:660px;margin:0 auto;position:relative; animation:rise .32s cubic-bezier(.16,1,.3,1) both} @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ══ the card — a page torn from the book ══ */ .card{ position:relative;background:var(--paper);border:1px solid var(--edge); padding:clamp(26px,6.5vw,42px); box-shadow:14px 14px 0 rgba(212,230,0,.055), 0 1px 0 rgba(232,231,228,.05) inset; } .card::before{ /* taped top edge */ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:repeating-linear-gradient(90deg,var(--electric) 0 22px,transparent 22px 30px); opacity:.85; } /* content sits above the card's taped edge and the hero's grid overlay */ .card>*,.hero>*{position:relative;z-index:2} /* ══ file tag — the outlined label ══ */ .filetag{ display:inline-block;border:1px solid var(--electric);color:var(--electric); font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; padding:7px 12px;margin-bottom:20px;line-height:1; } .filetag b{color:var(--bone);font-weight:800} /* ══ stamp ══ */ .stamp{ position:absolute;right:10px;top:-14px;z-index:6; border:2px solid rgba(212,230,0,.55);color:rgba(212,230,0,.7); font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; line-height:1.24;text-align:center;padding:8px 11px; transform:rotate(-7deg);background:var(--void); } /* ══ type ══ */ h1{ font-weight:900;text-transform:uppercase;line-height:.87;letter-spacing:-.025em; font-size:clamp(40px,11.6vw,68px);margin-bottom:20px; } h2{ font-weight:800;text-transform:uppercase;line-height:1.01;letter-spacing:-.016em; font-size:clamp(25px,7vw,38px);margin-bottom:14px; } h2.tight{margin-bottom:18px} p{margin-bottom:16px;color:#d5d4d1} p:last-child{margin-bottom:0} em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--electric)} .lede{ font-family:var(--serif);font-style:italic;font-weight:700; font-size:clamp(20px,5.4vw,27px);line-height:1.26;color:var(--bone);margin-bottom:24px; } .sub{font-family:var(--serif);font-style:italic;color:var(--dim);margin-bottom:28px;font-size:17px} .fine{font-size:12.5px;color:var(--faint);margin-top:14px;letter-spacing:.02em} .rule{height:0;border-top:1px solid var(--edge);margin:26px 0;position:relative} .rule::before{content:'';position:absolute;top:-1px;left:0;width:50px;height:2px;background:var(--electric)} /* ══ metadata row ══ */ .meta{display:flex;gap:1px;background:var(--edge);border:1px solid var(--edge);margin:24px 0 0} .meta>div{flex:1;background:var(--paper);padding:15px 14px} .meta span{ display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--electric);margin-bottom:7px; } .meta b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--bone);line-height:1.15} .meta-wide{margin:0 0 24px;border-top:0} .meta-wide b{font-size:clamp(13px,3.4vw,16px)} /* ══ question ══ */ /* Kubrick: the question block is strictly centred on the vanishing point */ .qhead{position:relative;margin-bottom:4px;text-align:center} .qnum{ font-size:clamp(44px,12vw,72px);font-weight:900;line-height:.8; color:transparent;-webkit-text-stroke:1.5px rgba(212,230,0,.62); letter-spacing:-.04em;user-select:none;margin-bottom:6px; } [data-screen="q"] h2{text-align:center;margin-left:auto;margin-right:auto;max-width:15ch} [data-screen="q"] .sub{text-align:center} /* Rules run the full width of the frame — architecture, not component borders. Rows are snapped to twice the 42px module so the rhythm reads against the grid. */ .opts{ display:flex;flex-direction:column; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); width:100vw;max-width:100vw;border-top:1px solid var(--edge); } .opt{ display:flex;gap:15px;align-items:center;width:100%;min-height:84px; text-align:left;cursor:pointer;background:transparent;color:var(--bone); border:0;border-bottom:1px solid var(--edge); font-family:var(--head);font-size:16px;line-height:1.4; padding:14px max(var(--pad),calc(50vw - 330px)); transition:background .16s ease,color .16s ease; } .opt i{ font-style:normal;font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--electric); flex:none;width:15px;transition:color .16s ease; } .opt:hover{background:rgba(212,230,0,.07)} .opt.is-picked{background:var(--electric);color:var(--void)} .opt.is-picked i{color:var(--void)} /* ══ hero band — the shareable moment ══ */ .hero{ position:relative;overflow:hidden;background:var(--paper); border:1px solid rgba(212,230,0,.35); padding:clamp(28px,7vw,46px) clamp(24px,6vw,42px) clamp(30px,7vw,44px); } .hero::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(to right,rgba(212,230,0,.07) 0 1px,transparent 1px 34px), repeating-linear-gradient(to bottom,rgba(212,230,0,.07) 0 1px,transparent 1px 34px); } .hero>*{position:relative;z-index:2} .hero h1{ color:var(--electric);font-size:clamp(38px,11.2vw,66px);margin-bottom:16px; animation:stamp .46s cubic-bezier(.16,1,.3,1) .06s both; } .hero-line{ font-family:var(--serif);font-style:italic;font-weight:700; font-size:clamp(19px,5vw,25px);line-height:1.26;color:var(--bone);margin:0; } @keyframes stamp{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} /* ══ ticker ══ */ .ticker{ background:var(--electric);color:var(--void);overflow:hidden;white-space:nowrap; padding:8px 0;margin-bottom:24px; } .ticker span{ display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em; text-transform:uppercase;animation:slide 30s linear infinite; } @keyframes slide{to{transform:translateX(-50%)}} /* ══ application ══ */ .apply{ border:1px solid var(--edge);border-top:2px solid var(--electric); background:var(--paper);padding:clamp(24px,5vw,32px);margin-top:26px; } .apply label{ display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--electric);margin:22px 0 8px; } .apply input,.apply textarea{ width:100%;background:rgba(8,8,8,.6);color:var(--bone); border:1px solid var(--edge);border-left:2px solid rgba(212,230,0,.5); font-family:var(--head);font-size:16px;line-height:1.5;padding:14px 14px; transition:border-color .16s ease; } .apply textarea{resize:vertical;min-height:104px} .apply input:focus,.apply textarea:focus{outline:0;border-color:var(--electric)} .apply input::placeholder,.apply textarea::placeholder{color:var(--faint)} /* ══ chooser — the fork between artist and brand ══ */ .choices{display:flex;flex-direction:column;gap:12px;margin-top:28px} .choice{ display:block;text-align:left;width:100%;cursor:pointer;color:var(--bone); background:rgba(212,230,0,.03);border:1px solid var(--edge);border-left:3px solid var(--electric); padding:22px;font-family:var(--head); transition:background .16s ease,transform .1s ease; } .choice:hover{background:rgba(212,230,0,.09)} .choice:active{transform:translateY(1px)} .choice-k{display:block;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--electric);margin-bottom:9px} .choice-t{ display:block;font-size:clamp(26px,7vw,34px);font-weight:900;text-transform:uppercase; letter-spacing:-.02em;line-height:1;margin-bottom:11px; } .tag{ display:inline-block;vertical-align:middle;margin-left:10px; font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--electric); border:1px solid rgba(212,230,0,.5);padding:3px 8px; } .choice-d{display:block;font-size:14.5px;color:var(--dim);line-height:1.5;margin-bottom:15px} .choice-go{ display:block;font-size:13px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--electric); } .choice-soon{border-left-color:rgba(212,230,0,.4)} /* ══ buttons ══ */ .btn-ghost{background:transparent;border:1px solid var(--edge);color:var(--dim)} .btn-ghost:hover{filter:none;border-color:var(--electric);color:var(--electric)} .btn{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%;cursor:pointer; background:var(--electric);color:var(--void);border:0;font-family:var(--head);font-weight:800; text-transform:uppercase;letter-spacing:.09em;font-size:15px;padding:19px 22px;margin-top:28px; text-decoration:none;transition:filter .14s ease,transform .1s ease; } .btn span{transition:transform .16s ease} .btn:hover{filter:brightness(1.1)} .btn:hover span{transform:translateX(4px)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.4;cursor:default} /* ══ gate preview — the diagnosis starts, then fades mid-thought ══ The email is not asked for against a promise; it is asked for against something they have already begun reading. */ .preview{ position:relative;max-height:min(310px,40svh);overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 42%,transparent 97%); mask-image:linear-gradient(to bottom,#000 0,#000 42%,transparent 97%); } .preview p{margin-bottom:16px} .cut{ margin-top:2px;color:var(--dim);font-size:15px; padding-top:20px;border-top:1px solid var(--edge); } /* ══ form ══ */ #email{ width:100%;background:rgba(8,8,8,.6);color:var(--bone); border:1px solid var(--edge);border-left:2px solid var(--electric); font-family:var(--head);font-size:17px;padding:16px 14px;margin-top:20px; transition:border-color .16s ease; } #email:focus{outline:0;border-color:var(--electric)} #email::placeholder{color:var(--faint)} .err{color:var(--electric);font-size:13.5px;margin-top:12px;font-family:var(--serif);font-style:italic;font-weight:700} /* ══ result blocks ══ */ #rbody p{margin-bottom:18px} .missing{ border:1px solid rgba(212,230,0,.42);border-left-width:3px; padding:24px;margin:34px 0 0;background:rgba(212,230,0,.04); } .secondary{border:1px solid var(--edge);padding:22px;margin:24px 0 0;background:rgba(232,231,228,.03)} .secondary strong{color:var(--bone)} .secondary .fine{color:#93938f} .cred{margin:26px 0 0;padding:26px;border:1px solid var(--edge);background:var(--paper)} .cred p{color:var(--dim);font-size:15px} .offer{ position:relative;border:1px solid var(--electric);padding:28px;margin-top:26px; background:linear-gradient(180deg,rgba(212,230,0,.06),rgba(212,230,0,.02)); } .offer p{color:var(--bone)} .free{ font-family:var(--serif);font-style:italic;font-weight:700; font-size:clamp(25px,7vw,32px);color:var(--electric);margin:22px 0 0;line-height:1.1; } .signoff{ text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin:34px 0 0; } .signoff b{color:var(--electric)} /* ══ full-bleed bands — break the column, build page rhythm ══ */ .bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw} .hero.bleed{ border-left:0;border-right:0; padding-left:max(var(--pad),calc(50vw - 330px)); padding-right:max(var(--pad),calc(50vw - 330px)); } .ticker.bleed{margin-bottom:26px} /* No scroll-reveal here by design. Page rhythm comes from layout — full-bleed bands, alternating section fills, numbered sections — never from JS that could leave the diagnosis invisible. */ /* ══ section numbering — document rhythm ══ */ .sec{position:relative;counter-increment:sec} .sec::before{ content:'§ ' counter(sec,decimal-leading-zero); position:absolute;top:-9px;right:14px;z-index:3; font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--electric); background:var(--void);padding:2px 8px; } [data-screen="result"] .wrap{counter-reset:sec} /* ══ progress rail ══ */ .prog{position:fixed;top:var(--bar);left:0;right:0;height:2px; background:rgba(232,231,228,.09);z-index:29;opacity:0;transition:opacity .3s} .prog.on{opacity:1} .prog i{display:block;height:100%;width:0;background:var(--electric); transition:width .38s cubic-bezier(.4,0,.2,1)} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }