-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrelease.css
More file actions
42 lines (41 loc) · 5.29 KB
/
Copy pathrelease.css
File metadata and controls
42 lines (41 loc) · 5.29 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
/* Premium accents for the 1.4.2 public release. */
.language a { border-radius:50px; color:#8e949e; font-size:11px; font-weight:800; padding:6px 9px; }
.language a.active { color:#fff; background:#252933; }
.release-badge { position:relative; display:flex; align-items:center; gap:13px; width:max-content; max-width:100%; margin-top:18px; padding:10px 14px 10px 11px; overflow:hidden; border:1px solid #6b371c; border-radius:14px; background:linear-gradient(105deg,#17100cdd,#101216dd 60%,#1c100add); box-shadow:0 16px 40px #0006,inset 0 1px #ffffff0b; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.release-badge::before { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(100deg,transparent,#ff7a0014,transparent); animation:releaseSweep 5s ease-in-out infinite; }
.release-badge:hover { transform:translateY(-3px); border-color:#ff721f; box-shadow:0 18px 48px #0009,0 0 28px #ff61001b; }
.release-badge__spark { position:relative; width:34px; height:34px; flex:0 0 auto; border:1px solid #ff6a25; border-radius:11px; background:radial-gradient(circle at 35% 30%,#ffaf45,#ff6200 35%,#401507 70%); box-shadow:0 0 20px #ff60004d; }
.release-badge__spark::before,.release-badge__spark::after { content:""; position:absolute; inset:50%; width:13px; height:2px; border-radius:4px; background:#fff; box-shadow:0 0 10px #fff; transform:translate(-50%,-50%); }
.release-badge__spark::after { transform:translate(-50%,-50%) rotate(90deg); }
.release-badge span:nth-child(2) { display:flex; flex-direction:column; line-height:1.3; }
.release-badge strong { font-size:11px; letter-spacing:.12em; }
.release-badge small { color:#8f96a2; font-size:10px; }
.release-badge>b { margin-left:auto; color:var(--orange); font-size:17px; }
.app-window { transition:filter .45s ease; }
.app-window::before { content:""; position:absolute; z-index:-2; inset:-18px; border-radius:25px; background:conic-gradient(from 0deg,transparent 0 34%,#ff650048 43%,#ff9b364f 50%,transparent 61% 100%); filter:blur(12px); animation:appAura 9s linear infinite; pointer-events:none; }
.app-window:hover { filter:drop-shadow(0 46px 75px #000) drop-shadow(0 0 28px #ff61002a); }
.shot-stage::after { content:""; position:absolute; width:min(530px,92vw); height:min(590px,120vw); border:1px solid #ff660021; border-radius:42px; box-shadow:0 0 0 22px #ff650007,0 0 80px #ff650018; animation:shotBreath 4.2s ease-in-out infinite; pointer-events:none; }
@keyframes releaseSweep { 0%,58% { transform:translateX(-120%); } 82%,100% { transform:translateX(120%); } }
@keyframes appAura { to { transform:rotate(360deg); } }
@keyframes shotBreath { 0%,100% { transform:scale(.98); opacity:.45; } 50% { transform:scale(1.02); opacity:1; } }
@media (max-width:1050px) { .release-badge { margin-inline:auto; } }
@media (max-width:680px) { .hero { grid-template-columns:minmax(0,1fr); } .hero-copy { min-width:0; } .hero h1 { max-width:100%; font-size:36px; line-height:.94; letter-spacing:-.06em; } .release-badge { width:100%; text-align:left; } .release-badge small { font-size:9px; } .app-window::before { inset:-10px; } .shot-stage::after { width:90vw; height:108vw; } }
@media (prefers-reduced-motion:reduce) { .release-badge::before,.app-window::before,.shot-stage::after { animation:none; } }
/* Honest, browser-local rating widget. */
.rating-section { padding-top:32px; }
.rating-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; padding:42px 48px; border:1px solid #402b1e; border-radius:26px; background:radial-gradient(circle at 85% 50%,#ff650019,transparent 38%),linear-gradient(135deg,#111318,#0b0d10); box-shadow:0 26px 70px #0007; }
.rating-card h2 { margin:0 0 10px; font-size:clamp(34px,4vw,54px); letter-spacing:-.04em; }
.rating-card p { margin:0; color:#969ca7; }
.rating-control { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 18px; min-width:340px; }
.rating-stars { display:flex; gap:5px; }
.rating-stars button { padding:0; border:0; color:#353943; background:transparent; font-size:38px; line-height:1; cursor:pointer; filter:drop-shadow(0 0 0 transparent); transition:transform .2s ease,color .2s ease,filter .2s ease; }
.rating-stars button:hover { transform:translateY(-3px) scale(1.08); }
.rating-stars button.active { color:#ff740f; filter:drop-shadow(0 0 9px #ff650066); }
.rating-stars button:disabled { cursor:default; }
.rating-stars button:disabled:hover { transform:none; }
#rating-value { color:#ff9a4c; font:800 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.rating-submit { grid-column:1/3; min-height:44px; border:1px solid #ff7428; border-radius:11px; color:#fff; background:linear-gradient(110deg,#ff7900,#e94800); font-size:12px; font-weight:900; letter-spacing:.05em; cursor:pointer; box-shadow:0 12px 30px #ff520022; }
.rating-submit:disabled { border-color:#38403b; color:#8faaa0; background:#121715; box-shadow:none; cursor:default; }
#rating-status { grid-column:1/3; font-size:11px; text-align:center; }
@media (max-width:850px) { .rating-card { grid-template-columns:1fr; gap:30px; text-align:center; } .rating-card .kicker { justify-content:center; } .rating-control { width:min(420px,100%); min-width:0; margin:auto; } .rating-stars { justify-content:center; } }
@media (max-width:440px) { .rating-card { padding:30px 18px; } .rating-stars button { font-size:34px; } }