/* ============================================================ Legacy of the Ark — series website "Ark Terminal (book-tinted)" design system. Structure & chamfered 9-slice frame language mirror the game site (arkidle.com); accent re-tints per book: amber = Book One, teal = Book Two, violet = Book Three. Set the page accent with . Self-contained; only external dependency is Google Fonts. ============================================================ */ :root{ --void:#080B10; --hull:#10141B; --hull-2:#161C25; --hull-3:#1D2530; --steel:#2A3543; --line:#212A35; --line-2:#2C3743; --txt:#E9EFF7; --txt-2:#9EAFC1; --txt-3:#677788; /* book-coded accents */ --amber:#E8A24A; --amber-deep:#7C5A26; --teal:#4FC7BD; --teal-deep:#1C5F5A; --violet:#A88BE0;--violet-deep:#5A3AA0; --ember:#E8763C; --cyan:#36DFE6; --green:#57D37F; --red:#FF6C52; /* --acc is the live page accent; defaults to amber (Book One / series) */ --acc:var(--amber); --acc-deep:var(--amber-deep); --acc-rgb:232,162,74; --maxw:1180px; --chamfer:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); --chamfer-sm:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } body[data-book="1"]{--acc:var(--amber); --acc-deep:var(--amber-deep); --acc-rgb:232,162,74} body[data-book="2"]{--acc:var(--teal); --acc-deep:var(--teal-deep); --acc-rgb:79,199,189} body[data-book="3"]{--acc:var(--violet);--acc-deep:var(--violet-deep);--acc-rgb:168,139,224} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--void);color:var(--txt); font-family:"Rajdhani","Segoe UI",Roboto,system-ui,sans-serif; line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.head{font-family:"Orbitron","Rajdhani","Segoe UI",sans-serif;font-weight:700;letter-spacing:.5px;line-height:1.14} a{color:var(--acc);text-decoration:none;transition:color .15s} a:hover{filter:brightness(1.2)} img{max-width:100%;display:block} .mono{font-family:"Share Tech Mono",ui-monospace,monospace} .serif{font-family:Georgia,"Times New Roman",serif} ::selection{background:rgba(var(--acc-rgb),.28);color:#fff} /* ---- animated space backdrop ---- */ .spacefield{position:fixed;inset:0;z-index:-2;background: radial-gradient(1400px 700px at 50% -10%, rgba(var(--acc-rgb),.14), transparent 60%), radial-gradient(1100px 600px at 80% 110%, rgba(54,223,230,.08), transparent 60%), url("img/brand/bg-stars.webp") center/cover no-repeat, var(--void)} .spacefield::after{content:"";position:absolute;inset:0;opacity:.5; background:linear-gradient(transparent 0 2px, rgba(var(--acc-rgb),.02) 2px 3px);background-size:100% 3px} .gridfloor{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30; background: linear-gradient(rgba(var(--acc-rgb),.05) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(var(--acc-rgb),.05) 1px, transparent 1px) 0 0/44px 44px; -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%)} @media(prefers-reduced-motion:no-preference){ .spacefield{animation:drift 120s linear infinite alternate} } @keyframes drift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,-60px 40px,0 0}} /* ---- layout ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .wrap-wide{max-width:1340px;margin:0 auto;padding:0 22px} section{padding:88px 0;position:relative} .eyebrow{font-family:"Orbitron",sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase; color:var(--acc);font-weight:700;margin-bottom:14px;display:inline-block} .eyebrow.amber{color:var(--amber)} .eyebrow.teal{color:var(--teal)} .eyebrow.violet{color:var(--violet)} .sec-title{font-size:clamp(28px,4vw,44px);margin-bottom:14px} .sec-sub{color:var(--txt-2);max-width:720px;font-size:18px;margin-bottom:46px} .center{text-align:center;margin-left:auto;margin-right:auto} .lead{color:var(--txt-2);font-size:18px} .muted{color:var(--txt-3)} .small{font-size:.86rem;color:var(--txt-3)} /* ---- 9-slice frame / panel ---- */ .panel{background:linear-gradient(160deg,var(--hull-2),var(--hull));border:1px solid var(--line); clip-path:var(--chamfer);position:relative} .frame{position:relative;background:linear-gradient(160deg,var(--hull-2),var(--hull)); border:1px solid var(--line-2);clip-path:var(--chamfer)} .frame::before,.frame::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none; border-color:var(--acc);opacity:.85;transition:opacity .25s,box-shadow .25s} .frame::before{top:7px;left:7px;border-top:2px solid;border-left:2px solid} .frame::after{bottom:7px;right:7px;border-bottom:2px solid;border-right:2px solid} .frame:hover::before,.frame:hover::after{opacity:1;box-shadow:0 0 10px rgba(var(--acc-rgb),.5)} .frame > .corners{position:absolute;inset:0;pointer-events:none} .frame > .corners::before,.frame > .corners::after{content:"";position:absolute;width:20px;height:20px;opacity:.85} .frame > .corners::before{top:7px;right:7px;border-top:2px solid var(--acc);border-right:2px solid var(--acc)} .frame > .corners::after{bottom:7px;left:7px;border-bottom:2px solid var(--acc);border-left:2px solid var(--acc)} /* per-book frame overrides for mixing on a page */ .f-amber::before,.f-amber::after,.f-amber>.corners::before,.f-amber>.corners::after{border-color:var(--amber)!important} .f-teal::before,.f-teal::after,.f-teal>.corners::before,.f-teal>.corners::after{border-color:var(--teal)!important} .f-violet::before,.f-violet::after,.f-violet>.corners::before,.f-violet>.corners::after{border-color:var(--violet)!important} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:"Orbitron",sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase; padding:15px 28px;cursor:pointer;border:1px solid var(--acc);color:var(--void); background:var(--acc);clip-path:var(--chamfer);box-shadow:0 0 24px rgba(var(--acc-rgb),.35); transition:transform .12s,box-shadow .2s,filter .2s} .btn:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(var(--acc-rgb),.6);color:var(--void);filter:brightness(1.05)} .btn--ghost{background:transparent;color:var(--acc);box-shadow:none} .btn--ghost:hover{background:rgba(var(--acc-rgb),.10);color:var(--acc)} .btn--sm{padding:10px 18px;font-size:12px} .btn--amber{background:var(--amber);border-color:var(--amber);color:#1a1206;box-shadow:0 0 24px rgba(232,162,74,.4)} .btn--teal{background:var(--teal);border-color:var(--teal);color:#04211f;box-shadow:0 0 24px rgba(79,199,189,.4)} .btn--violet{background:var(--violet);border-color:var(--violet);color:#140a26;box-shadow:0 0 24px rgba(168,139,224,.4)} .btnrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* ---- store / buy buttons ---- */ .stores{display:flex;gap:16px;flex-wrap:wrap} .stores.center{justify-content:center} .store{display:flex;align-items:center;gap:14px;min-width:210px;text-align:left; padding:13px 20px;clip-path:var(--chamfer);border:1px solid var(--acc);color:var(--acc); background:linear-gradient(160deg,var(--hull-2),var(--hull));box-shadow:0 0 26px rgba(var(--acc-rgb),.22); transition:transform .12s,box-shadow .2s} .store:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(var(--acc-rgb),.5)} .store svg{width:30px;height:30px;flex-shrink:0;fill:currentColor} .store__tx{display:flex;flex-direction:column;line-height:1.15} .store__tx small{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-3);font-family:"Orbitron"} .store__tx b{font-family:"Orbitron";font-size:15px;letter-spacing:.5px;color:#fff} .store__badge{margin-left:auto;font-family:"Orbitron";font-size:9px;letter-spacing:1.5px;padding:3px 8px;border-radius:3px; text-transform:uppercase;background:var(--acc);color:var(--void)} /* ---- status pill ---- */ .pill{display:inline-flex;align-items:center;gap:7px;font-family:"Orbitron";font-weight:700; font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:6px 13px; clip-path:var(--chamfer-sm);border:1px solid var(--line-2)} .pill--live{color:var(--green);border-color:rgba(87,211,127,.5);background:rgba(87,211,127,.08)} .pill--live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 1.6s ease-in-out infinite} .pill--soon{color:var(--acc);border-color:rgba(var(--acc-rgb),.4);background:rgba(var(--acc-rgb),.06)} @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} /* ---- nav ---- */ header.nav{position:fixed;top:0;left:0;right:0;z-index:50; background:rgba(8,11,16,.74);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav__in{display:flex;align-items:center;gap:18px;height:62px;max-width:var(--maxw);margin:0 auto;padding:0 22px} .nav__logo{display:flex;align-items:center;gap:11px;font-family:"Orbitron";font-weight:700;font-size:15px;letter-spacing:1.5px;color:var(--txt);white-space:nowrap} .nav__logo img{height:26px;width:auto;filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.5))} .nav__logo small{display:block;font-size:8px;letter-spacing:3px;color:var(--txt-3);font-weight:500} .nav__links{margin-left:auto;display:flex;align-items:center;gap:22px} .nav__links a{color:var(--txt-2);font-size:14px;font-weight:600;letter-spacing:.5px} .nav__links a:hover,.nav__links a.active{color:var(--acc)} .nav__cta{padding:9px 18px;font-size:12px} .nav__toggle{display:none;background:none;border:0;color:var(--txt);font-size:24px;cursor:pointer;margin-left:auto} /* ---- hero ---- */ .hero{min-height:92vh;display:flex;align-items:center;padding:120px 0 70px;position:relative} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--void));pointer-events:none;z-index:1} .hero__in{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 22px; display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .hero__copy{max-width:640px} .hero h1{font-size:clamp(34px,6vw,66px);margin:14px 0 18px;text-shadow:0 0 40px rgba(var(--acc-rgb),.3)} .hero h1 .hl{color:var(--acc)} .hero__tag{color:var(--txt-2);font-size:clamp(16px,2.2vw,20px);margin:0 0 26px;max-width:560px} .hero__meta{margin-top:26px;color:var(--txt-3);font-size:12px;letter-spacing:1.5px} .hero__covers{display:flex;justify-content:center;align-items:flex-end;gap:12px;perspective:1400px} .hero__covers img{width:31%;border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.6); transition:transform .35s;clip-path:var(--chamfer-sm)} .hero__covers img:nth-child(1){transform:rotateY(10deg) translateZ(-10px);opacity:.94} .hero__covers img:nth-child(2){width:35%;z-index:3;transform:translateY(-16px);position:relative;box-shadow:0 26px 70px rgba(var(--acc-rgb),.28),0 20px 60px rgba(0,0,0,.7)} .hero__covers img:nth-child(3){transform:rotateY(-10deg) translateZ(-10px);opacity:.94} .hero__covers:hover img:nth-child(1){transform:rotateY(6deg) translateY(-6px)} .hero__covers:hover img:nth-child(3){transform:rotateY(-6deg) translateY(-6px)} /* ---- grids / cards ---- */ .grid{display:grid;gap:18px} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{padding:26px;display:flex;flex-direction:column;gap:12px} .card .ico{height:50px;width:50px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(var(--acc-rgb),.3))} .card h3{font-size:19px} .card p{color:var(--txt-2);font-size:15px} .card .more{margin-top:auto;font-family:"Orbitron";font-size:11px;letter-spacing:1.5px;color:var(--acc)} .card--accent h3{color:var(--acc)} /* ---- book cards (with cover) ---- */ .bookgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:20px 0} .bookcard{display:flex;flex-direction:column;padding:0;overflow:hidden} .bookcard .cover{position:relative;aspect-ratio:1600/2560;overflow:hidden;background:var(--hull-3)} .bookcard .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .bookcard:hover .cover img{transform:scale(1.04)} .bookcard .cover .num{position:absolute;top:12px;left:12px;font-family:"Orbitron";font-size:10px;letter-spacing:2px; text-transform:uppercase;color:var(--void);background:var(--acc);padding:4px 10px;clip-path:var(--chamfer-sm);z-index:2} .bookcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .bookcard__body h3{font-size:22px} .bookcard__body p{color:var(--txt-2);font-size:15px;flex:1} .b1{--acc:var(--amber);--acc-deep:var(--amber-deep);--acc-rgb:232,162,74} .b2{--acc:var(--teal);--acc-deep:var(--teal-deep);--acc-rgb:79,199,189} .b3{--acc:var(--violet);--acc-deep:var(--violet-deep);--acc-rgb:168,139,224} /* book detail block */ .bookrow{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;margin:0 0 28px;padding:28px} .bookrow .cover{clip-path:var(--chamfer);border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.5)} .bookrow h2{font-size:clamp(24px,3vw,34px)} .bookrow .bk{font-family:"Orbitron";font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--acc)} .bookrow p{color:var(--txt-2);font-size:16px;margin:12px 0} .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px} .tagmeta{font-family:"Share Tech Mono";font-size:12px;color:var(--txt-3);border:1px solid var(--line); padding:5px 10px;clip-path:var(--chamfer-sm)} /* ---- portrait gallery (characters) ---- */ .portraits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .portrait{padding:0;overflow:hidden;display:flex;flex-direction:column} .portrait__img{aspect-ratio:1/1;overflow:hidden;background:#0c1017} .portrait__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .45s} .portrait:hover .portrait__img img{transform:scale(1.05)} .portrait__body{padding:14px 16px 16px} .portrait__body h3{font-size:16px;margin-bottom:2px} .portrait__role{font-family:"Orbitron";font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc)} .portrait__body p{color:var(--txt-2);font-size:13px;margin-top:7px} /* locked spoiler tile */ .lock{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; min-height:220px;aspect-ratio:auto;background: repeating-linear-gradient(135deg,rgba(var(--acc-rgb),.04) 0 12px,transparent 12px 24px),var(--hull-2); border:1px dashed var(--line-2);color:var(--txt-3);padding:24px} .lock svg{width:34px;height:34px;fill:var(--txt-3);margin-bottom:12px;opacity:.7} .lock b{font-family:"Orbitron";font-size:12px;letter-spacing:1.5px;color:var(--txt-2);display:block;margin-bottom:4px} .lock span{font-size:13px} /* ---- environment / gallery ---- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .shot{aspect-ratio:16/10;overflow:hidden;clip-path:var(--chamfer);background:var(--hull-2);border:1px solid var(--line);cursor:pointer;position:relative} .shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .shot:hover img{transform:scale(1.05)} .shot__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;z-index:2; background:linear-gradient(transparent,rgba(6,9,14,.92));font-family:"Orbitron";font-size:13px;letter-spacing:.5px} .shot__cap small{display:block;font-family:"Rajdhani";font-size:12px;color:var(--txt-2);letter-spacing:0;text-transform:none;font-weight:500} .shot:focus-visible{outline:2px solid var(--acc);outline-offset:3px} /* relic strip */ .relics{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .relic{padding:14px;text-align:center} .relic img{aspect-ratio:1/1;object-fit:cover;clip-path:var(--chamfer-sm);margin-bottom:8px} .relic span{display:block;font-family:"Orbitron";font-size:11px;letter-spacing:.5px;color:var(--txt-2)} /* ---- lightbox ---- */ .lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center; background:rgba(4,6,10,.92);backdrop-filter:blur(6px);padding:40px;flex-direction:column;gap:14px} .lightbox.open{display:flex} .lightbox__img{max-width:92vw;max-height:82vh;clip-path:var(--chamfer);border:1px solid var(--line);box-shadow:0 0 60px rgba(var(--acc-rgb),.25)} .lightbox__cap{font-family:"Orbitron";font-size:14px;letter-spacing:1px;color:var(--txt-2)} .lightbox__close{position:fixed;top:18px;right:22px;z-index:121;display:flex;align-items:center;justify-content:center; width:46px;height:46px;font-size:30px;line-height:1;cursor:pointer;background:rgba(16,20,27,.92); border:1px solid var(--line);color:var(--txt);clip-path:var(--chamfer-sm)} .lightbox__close:hover{color:var(--acc);border-color:var(--acc)} /* ---- spoiler gate ---- */ .gate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;margin:0 0 30px} .gate label{font-family:"Orbitron";font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc)} .gate select{background:var(--void);color:var(--txt);border:1px solid var(--line-2); padding:9px 12px;font-family:"Share Tech Mono";font-size:14px;clip-path:var(--chamfer-sm);cursor:pointer} .gate select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),.25)} .gate .note{font-size:13px;color:var(--txt-3);margin-left:auto} .gate .note b{color:var(--txt-2);font-family:"Share Tech Mono"} [data-tier]{transition:opacity .3s} .spoiler-hidden{display:none!important} .tierbadge{display:inline-block;font-family:"Orbitron";font-size:9px;letter-spacing:1.5px;text-transform:uppercase; padding:2px 8px;border:1px solid currentColor;border-radius:3px;margin-left:8px;vertical-align:middle} .t2{color:var(--teal)} .t3{color:var(--violet)} /* ---- split ---- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center} .split p{color:var(--txt-2);font-size:17px;margin-bottom:16px} .split__art{padding:12px} .split__art img{clip-path:var(--chamfer)} /* ---- codex sidebar guide ---- */ .codex{display:grid;grid-template-columns:250px 1fr;gap:32px;max-width:1200px;margin:0 auto; padding:96px 22px 80px;align-items:start} .codex__side{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:6px} .codex__nav{list-style:none} .codex__nav .grp{font-family:"Orbitron";font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-3);margin:18px 0 8px;padding-left:4px} .codex__nav a{display:block;padding:8px 12px;color:var(--txt-2);font-size:14px;font-weight:600; border-left:2px solid transparent;transition:.15s;cursor:pointer} .codex__nav a:hover{color:var(--txt);background:rgba(var(--acc-rgb),.05)} .codex__nav a.active{color:var(--acc);border-left-color:var(--acc);background:rgba(var(--acc-rgb),.07)} .codex__main{min-width:0} .codex-sec{display:none;animation:fadeUp .4s ease} .codex-sec.show{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .codex-sec h1{font-size:clamp(26px,4vw,38px);margin-bottom:8px} .codex-sec .kicker{font-family:"Orbitron";font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px;display:block} .codex-sec h2{font-size:22px;margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)} .codex-sec p{color:var(--txt-2);font-size:16px;margin-bottom:14px} .codex-sec ul{color:var(--txt-2);font-size:16px;margin:0 0 16px 20px} .codex-sec li{margin-bottom:7px} .codex-sec strong{color:var(--txt)} .codex-mobnav{display:none} /* callouts */ .callout{padding:16px 18px;margin:18px 0;clip-path:var(--chamfer-sm);background:rgba(var(--acc-rgb),.06);border-left:3px solid var(--acc)} .callout.lore{background:rgba(168,139,224,.07);border-left-color:var(--violet)} .callout.warn{background:rgba(232,162,74,.08);border-left-color:var(--amber)} .callout b{font-family:"Orbitron";font-size:11px;letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:6px;color:var(--acc)} .callout.lore b{color:var(--violet)} .callout.warn b{color:var(--amber)} .callout p:last-child{margin-bottom:0} /* ---- timeline rail ---- */ .tl{position:relative;margin:28px 0;padding-left:26px;border-left:2px solid var(--line-2)} .tl .ev{margin:0 0 26px;position:relative} .tl .ev::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;border-radius:50%; background:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),.7)} .tl .ev h3{font-size:18px;margin-bottom:4px} .tl .ev .when{font-family:"Orbitron";font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-3)} .tl .ev p{color:var(--txt-2);font-size:15px;margin-top:6px} /* ---- CTA band ---- */ .cta-band{text-align:center;padding:82px 0; background:radial-gradient(800px 400px at 50% 50%, rgba(var(--acc-rgb),.16), transparent 70%),var(--hull); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .cta-band h2{font-size:clamp(26px,4vw,40px);margin-bottom:14px} .cta-band p{color:var(--txt-2);font-size:18px;margin-bottom:28px} /* ---- reveal ---- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- back to top ---- */ .totop{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;display:none;align-items:center;justify-content:center; background:rgba(16,20,27,.92);border:1px solid var(--line);color:var(--txt-2);clip-path:var(--chamfer-sm);cursor:pointer;font-size:20px} .totop:hover{color:var(--acc);border-color:var(--acc)} .totop.show{display:flex} /* ---- footer ---- */ footer.site{background:var(--void);border-top:1px solid var(--line);padding:56px 0 34px;margin-top:40px} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;max-width:var(--maxw);margin:0 auto;padding:0 22px} .foot__brand strong{font-family:"Orbitron";letter-spacing:1px} .foot__brand p{color:var(--txt-3);font-size:14px;max-width:320px;margin-top:10px} .foot h4{font-family:"Orbitron";font-size:12px;letter-spacing:2px;color:var(--txt-2);text-transform:uppercase;margin-bottom:14px} .foot ul{list-style:none} .foot li{margin-bottom:9px} .foot a{color:var(--txt-3);font-size:14px} .foot a:hover{color:var(--acc)} .foot__bar{max-width:var(--maxw);margin:36px auto 0;padding:22px 22px 0;border-top:1px solid var(--line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--txt-3);font-size:13px} .foot__bar a{color:var(--txt-3)} .foot__bar a:hover{color:var(--acc)} /* ---- responsive ---- */ @media(max-width:960px){ .hero__in{grid-template-columns:1fr;text-align:center} .hero__copy{max-width:none;margin:0 auto} .hero__tag{margin-left:auto;margin-right:auto} .hero__covers{margin-top:12px} .btnrow{justify-content:center} .split{grid-template-columns:1fr;gap:28px} .bookrow{grid-template-columns:1fr;gap:20px;text-align:center} .bookrow .cover{max-width:260px;margin:0 auto} .meta-row,.stores{justify-content:center} .grid-4,.portraits{grid-template-columns:repeat(3,1fr)} .relics{grid-template-columns:repeat(4,1fr)} .codex{grid-template-columns:1fr;padding-top:80px} .codex__side{display:none} .codex__side.open{display:block;position:fixed;inset:62px 0 0 0;z-index:45;background:rgba(8,11,16,.98);max-height:none;padding:20px 22px;overflow-y:auto} .codex-mobnav{display:flex;align-items:center;gap:10px;position:sticky;top:62px;z-index:40; background:rgba(8,11,16,.92);backdrop-filter:blur(8px);padding:12px 0;margin:-6px 0 8px;border-bottom:1px solid var(--line)} .codex-mobnav button{font-family:"Orbitron";font-size:12px;letter-spacing:1px;color:var(--acc);background:var(--hull-2); border:1px solid var(--line-2);padding:9px 14px;clip-path:var(--chamfer-sm);cursor:pointer} } @media(max-width:820px){ .bookgrid,.grid-3,.grid-4,.portraits{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:1fr 1fr} .relics{grid-template-columns:repeat(3,1fr)} .foot{grid-template-columns:1fr 1fr} .gate .note{margin-left:0;width:100%} } @media(max-width:560px){ section{padding:60px 0} .nav__links{display:none} .nav__toggle{display:block} .bookgrid,.grid-2,.grid-3,.grid-4,.portraits,.gallery{grid-template-columns:1fr} .relics{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1fr} .store{min-width:0;width:100%} .hero__covers img{width:44%} }