Alt Mystery

Mysterious and alt ^^
Code

<style>@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

/*==============================
  GRUNGE PALETTE SHIFT
==============================*/

[data-skin-page]{
--skin-palette-accent:#cfd2d6;
--skin-palette-backdrop:#050505;
--skin-palette-page:#0a0a0a;
--skin-palette-page-text:#cfd2d6;
--skin-palette-link:#e6e6e6;
--skin-palette-link-hover:#ffffff;
--skin-palette-surface:#111;
--skin-palette-chrome:#1a1a1a;

background:
url("https://i.imgur.com/5vX5Q8q.jpeg"), /* dirty paper texture */
linear-gradient(#000,#050505);

background-repeat:repeat;
background-size:cover;

cursor:crosshair;
}

/*==============================
  ROOT — CONCRETE ZINE FRAME
==============================*/

[data-skin-root]{
position:relative;

padding:44px;

font-family:"VT323", monospace !important;

color:#cfd2d6;

background:
url("https://i.imgur.com/8QZQZ8m.jpeg"), /* scratched metal */
linear-gradient(180deg,#0a0a0a,#000);

background-repeat:repeat;

border:6px solid #111;

box-shadow:
inset 0 0 60px rgba(0,0,0,.85),
0 0 18px rgba(0,0,0,.6);

overflow:hidden;

filter:contrast(1.05) grayscale(.2);
}

/* grime overlay */
[data-skin-root]::before{
content:"";
position:absolute;
inset:0;

background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,.02) 3px
),
radial-gradient(circle at 30% 30%,rgba(255,255,255,.03),transparent 60%);

opacity:.4;
pointer-events:none;
}

/* dust + vignette */
[data-skin-root]::after{
content:"";
position:absolute;
inset:0;

background:
radial-gradient(circle at center,transparent 40%,rgba(0,0,0,.8)),
radial-gradient(circle at 20% 80%,rgba(255,255,255,.02),transparent 60%);

pointer-events:none;
}

/*==============================
  PANELS — WORN PAPER BLOCKS
==============================*/

.panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"]{

background:#0e0e0e!important;

border:2px solid #1f1f1f!important;

box-shadow:
inset 0 0 14px rgba(0,0,0,.9),
0 0 10px rgba(0,0,0,.6);

color:#d0d0d0!important;

border-radius:2px!important;
}

/* subtle “ink bleed” */
.panel::before{
content:"";
position:absolute;
inset:0;

background:
repeating-linear-gradient(
45deg,
transparent,
transparent 6px,
rgba(255,255,255,.015) 7px
);

opacity:.3;

pointer-events:none;
}

/*==============================
  HEADINGS — STAMPED LABELS
==============================*/

.panel__heading{
background:#0a0a0a!important;

color:#e0e0e0!important;

text-transform:uppercase;
letter-spacing:3px;

border-bottom:1px solid #2a2a2a;

text-align:left;

padding-left:10px;
}

/* faded stamp feel */
.panel__heading::after{
content:"ARCHIVE LOG";
position:absolute;
right:10px;
bottom:-8px;

font-size:10px;
letter-spacing:2px;

color:#666;
opacity:.7;
}

/*==============================
  LINKS — SCRATCHED WHITE
==============================*/

[data-skin-root] a{
color:#e6e6e6!important;
text-decoration:none;
}

[data-skin-root] a:hover{
text-shadow:0 0 6px rgba(255,255,255,.25);
}

/*==============================
  PROFILE IMAGE — POLAROID DAMAGE
==============================*/

[data-skin-part="photo"]{
background:none!important;
border:none!important;
}

[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder{
border:2px solid #2a2a2a;
box-shadow:
0 0 14px rgba(0,0,0,.8),
inset 0 0 10px rgba(0,0,0,.6);

filter:grayscale(.3) contrast(1.1);
}

/*==============================
  ACTIONS — DULL METAL TAGS
==============================*/

[data-skin-part="actions"]{
background:#0a0a0a!important;
}

[data-skin-part="actions"] .profile-action{
color:#cfcfcf;
text-transform:uppercase;
border:1px solid #2a2a2a;
background:#111;
}

[data-skin-part="actions"] .profile-action::before{
content:"› ";
color:#888;
}

/*==============================
  NAVIGATION — STREET WALL PANEL
==============================*/

[data-skin-part="navigation"]{
background:#0a0a0a!important;

border:2px solid #1f1f1f;

box-shadow:inset 0 0 12px rgba(0,0,0,.8);
}

/*==============================
  FOOTER — FADED STRIP
==============================*/

[data-skin-part="footer"]{
background:#0a0a0a!important;
border-top:1px solid #222;
color:#999;
}

/*==============================
  MICRO GRUNGE FINISH
==============================*/

.panel:hover{
box-shadow:
0 0 12px rgba(0,0,0,.9),
inset 0 0 14px rgba(0,0,0,.9);
}

::selection{
background:#444;
color:#fff;
}</style>
Comments

No comments yet.