Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
70 lines (69 loc) · 8.25 KB
/
Copy pathstyles.css
File metadata and controls
70 lines (69 loc) · 8.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; --bg:#07070a; --panel:#0e0e13; --line:#292832; --ink:#f4f1ed; --muted:#8d8996; --pink:#ff3d9a; --orange:#ff9a3d; --violet:#7668ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,Arial,sans-serif; }
button,a { font:inherit; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.032; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.topbar { height:68px; padding:0 clamp(20px,4vw,68px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font:600 11px/1 IBM Plex Mono,monospace; letter-spacing:.1em; position:relative; z-index:2; }
.wordmark { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:14px; }
.mark { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:#0a090d; letter-spacing:-.09em; font-weight:700; }
.top-meta { color:var(--muted); display:flex; align-items:center; gap:10px; }
.profile-avatar { width:34px; height:34px; object-fit:contain; margin-left:2px; border-radius:50%; background:#0d1d34; box-shadow:0 0 0 1px #36b6ff80,0 0 16px #36b6ff55; }
.pulse { width:7px; height:7px; border-radius:50%; background:#67e8a5; box-shadow:0 0 12px #67e8a5; }
.divider { color:#494751; }
main { overflow:hidden; }
.hero { min-height:720px; display:grid; grid-template-columns:minmax(390px,.78fr) 1.22fr; border-bottom:1px solid var(--line); }
.hero-copy { padding:clamp(70px,9vw,138px) 5vw clamp(60px,8vw,110px) clamp(24px,6vw,96px); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.kicker { margin:0 0 22px; color:#c5c0cb; font:600 11px/1.4 IBM Plex Mono,monospace; letter-spacing:.17em; }
h1 { font:400 clamp(6rem,12vw,12rem)/.71 Archivo Black,Impact,sans-serif; letter-spacing:-.085em; margin:0; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:2px var(--ink); text-shadow:8px 8px 0 #ff3d9a,16px 16px 0 #6c49ff; }
.dek { color:#b7b1bc; max-width:560px; margin:52px 0 34px; font-size:clamp(1rem,1.35vw,1.25rem); line-height:1.6; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { border:1px solid var(--line); padding:15px 20px; font:600 11px/1 IBM Plex Mono,monospace; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:.2s ease; }
.primary { background:var(--ink); color:#08080b; }
.secondary { background:transparent; color:var(--ink); }
.button:hover { transform:translateY(-2px); border-color:#aaa3b4; }
.hero-art { position:relative; min-height:680px; overflow:hidden; background:radial-gradient(circle at 60% 35%,#ec5295 0,#784090 25%,#16101d 63%,#09090c 100%); }
.hero-art::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg),transparent 25%),linear-gradient(0deg,var(--bg),transparent 30%); z-index:1; }
.hero-art::after { content:"PROMOTIONAL ASSET REFERENCE"; position:absolute; right:22px; top:22px; border:1px solid #ffffff3a; padding:8px 10px; color:#ffffff9e; font:500 9px IBM Plex Mono,monospace; letter-spacing:.12em; z-index:4; }
.hero-character { position:absolute; inset:1% -4% auto auto; width:105%; height:105%; object-fit:contain; object-position:center; filter:saturate(.86) contrast(1.04); z-index:0; }
.hero-logo { position:absolute; z-index:3; width:min(36%,330px); right:7%; bottom:8%; filter:drop-shadow(0 14px 32px #000c); }
.coordinate { position:absolute; font:500 9px IBM Plex Mono,monospace; color:#ffffff7a; letter-spacing:.12em; z-index:3; writing-mode:vertical-rl; }
.c1 { right:24px; top:120px; } .c2 { left:34px; bottom:30px; }
.status-strip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.status-strip div { padding:24px clamp(18px,3vw,44px); border-right:1px solid var(--line); }
.status-strip div:last-child { border:0; }
.status-strip span { display:block; color:var(--muted); font:500 9px IBM Plex Mono,monospace; letter-spacing:.14em; margin-bottom:9px; }
.status-strip strong { font:600 12px IBM Plex Mono,monospace; color:#d9d4dd; }
.archive { padding:clamp(70px,9vw,130px) clamp(20px,5vw,76px); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.section-heading h2 { font:400 clamp(3rem,6vw,6.5rem)/.9 Archivo Black,Impact,sans-serif; letter-spacing:-.065em; margin:0; }
.section-heading > p { max-width:510px; color:var(--muted); line-height:1.6; margin:0; }
.archive-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:26px; padding-top:28px; align-items:start; }
.asset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.asset-card { border:1px solid var(--line); background:#0b0b0f; padding:0; color:var(--ink); text-align:left; cursor:pointer; transition:.2s ease; overflow:hidden; }
.asset-card:hover,.asset-card.active { border-color:#7c7585; transform:translateY(-2px); }
.asset-frame { height:240px; position:relative; background:linear-gradient(135deg,#15131b,#09090c); overflow:hidden; }
.asset-frame img { width:100%; height:100%; object-fit:contain; transition:.3s ease; }
.asset-card:hover img { transform:scale(1.025); }
.asset-index { position:absolute; left:10px; top:10px; padding:5px 7px; background:#08080bdd; font:500 9px IBM Plex Mono,monospace; color:#c8c3cd; }
.asset-meta { display:flex; justify-content:space-between; gap:12px; padding:14px; border-top:1px solid var(--line); }
.asset-meta strong { font:500 11px IBM Plex Mono,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset-meta span { color:var(--muted); font:400 10px IBM Plex Mono,monospace; flex:0 0 auto; }
.inspector { position:sticky; top:20px; min-height:360px; padding:24px; border:1px solid var(--line); background:var(--panel); }
.inspector-label { color:var(--pink); font:600 9px IBM Plex Mono,monospace; letter-spacing:.16em; margin:0 0 48px; }
.inspector h3 { font:600 1.15rem IBM Plex Mono,monospace; overflow-wrap:anywhere; }
.inspector > p:not(.inspector-label) { color:var(--muted); font-size:.9rem; line-height:1.6; }
.record { margin:30px 0 0; padding:0; list-style:none; }
.record li { padding:12px 0; border-top:1px solid var(--line); }
.record span { display:block; color:#716d78; font:500 9px IBM Plex Mono,monospace; letter-spacing:.1em; margin-bottom:7px; }
.record code { font:400 10px/1.5 IBM Plex Mono,monospace; color:#d4ced8; overflow-wrap:anywhere; }
.terminal-section { margin:0 clamp(20px,5vw,76px) clamp(80px,10vw,150px); border:1px solid var(--line); background:#09090c; }
.terminal-head { display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); color:#77727d; font:500 9px IBM Plex Mono,monospace; letter-spacing:.12em; }
pre { margin:0; min-height:150px; padding:24px; color:#99e8bb; font:400 12px/1.8 IBM Plex Mono,monospace; white-space:pre-wrap; }
.muted { color:#66616c; }
footer { padding:34px clamp(20px,5vw,76px); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:40px; color:#77727d; font-size:.72rem; line-height:1.6; }
footer div { display:flex; flex-direction:column; gap:6px; } footer strong { color:#ddd7e1; letter-spacing:.12em; } footer p { margin:0; max-width:520px; text-align:right; }
@media(max-width:900px){ .hero{grid-template-columns:1fr}.hero-art{min-height:560px}.status-strip{grid-template-columns:repeat(2,1fr)}.archive-layout{grid-template-columns:1fr}.inspector{position:relative;top:0}.section-heading{align-items:start;flex-direction:column}.top-meta{display:none} }
@media(max-width:560px){ .hero-copy{padding-top:80px}.hero-art{min-height:450px}.asset-grid{grid-template-columns:1fr}.status-strip{grid-template-columns:1fr}.status-strip div{border-right:0;border-bottom:1px solid var(--line)}footer{flex-direction:column}footer p{text-align:left}.asset-frame{height:210px} }