body.profile { background: var(--bg); } .profile .topbar { height: 56px; flex-wrap: nowrap; } .profile .me { margin-left: 0; } .profile .pback { color: #cfcac0; font-size: 13px; text-decoration: none; margin-right: auto; margin-left: 1rem; } .profile .pback:hover { color: #fff; } .pwrap { width: min(980px, calc(100% - 2rem)); margin: 1.6rem auto 4rem; display: grid; gap: 1.6rem; } .phead { display: flex; align-items: center; gap: 1rem; } .phead .avatar { width: 58px; height: 58px; flex: none; display: grid; place-items: center; background: var(--accent); color: #111; border: 2px solid #111; border-radius: 4px; box-shadow: var(--shadow); font-family: var(--hfont); font-size: 20px; } .phead h1 { font-family: var(--hfont); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; } .phead .mail { color: var(--muted); font-size: 13.5px; } .pfoot { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 2.4rem 0 .6rem; padding-top: .7rem; border-top: 2px solid #111; font-size: 12.5px; } .pfoot a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; } .pfoot a:hover { color: #111; text-decoration: underline; } .pwarn { margin: 0; border: 2px solid var(--warn); background: #fff8e6; border-radius: 4px; padding: .6rem .8rem; font-size: 13.5px; } .ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } .tile-s { background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: var(--shadow); padding: .8rem 1rem; } .tile-s.hot { background: var(--accent-bg); } .tile-s .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .tile-s .v { font-family: var(--hfont); font-size: 28px; line-height: 1.2; } .tile-s .s { font-size: 12.5px; color: var(--muted); } .tile-s .tag { background: #9be29e; color: #111; font-size: 11px; font-weight: 700; border-radius: 2px; padding: .05rem .35rem; } .psec h2, .pmore h2 { font-family: var(--hfont); font-weight: 400; font-size: 17px; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; } .psec h2 .n { font-family: var(--font); font-weight: 600; font-size: 12px; background: #111; color: #fff; border-radius: 2px; padding: 0 .4rem; line-height: 18px; } .pnote { margin: .7rem 0 0; font-size: 12.5px; color: var(--muted); } .pmuted { margin: 0; color: var(--muted); } .rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; } .rcard { display: block; background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111; color: inherit; text-decoration: none; overflow: hidden; } .rcard:hover, .rcard:focus-visible { box-shadow: 3px 3px 0 var(--accent); outline: none; } .rcard .ph { aspect-ratio: 4 / 3; background: var(--soft); display: grid; place-items: center; border-bottom: 2px solid #111; } .rcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .rcard .ph span { font-family: var(--hfont); font-size: 30px; color: #b5b0a4; } .rcard .body { padding: .6rem .75rem .75rem; } .rcard .t { font-family: var(--hfont); font-size: 15px; line-height: 1.2; } .rcard .m { margin-top: .3rem; font-size: 13px; } .rcard .new { background: #9be29e; border-radius: 2px; padding: .05rem .35rem; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .rcard .d { margin-top: .15rem; font-size: 12px; color: var(--muted); } .pempty { display: grid; gap: .5rem; justify-items: start; background: #fff; border: 2px dashed #111; border-radius: 4px; padding: 1.1rem; } .pempty span { color: var(--muted); max-width: 46rem; } .pbtn { display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1rem; border: 2px solid #111; border-radius: 4px; background: #fff; color: #111; font-weight: 600; box-shadow: 3px 3px 0 #111; text-decoration: none; white-space: nowrap; } .pbtn.go { background: var(--accent); } .pbtn:active { box-shadow: none; transform: translate(3px, 3px); } .hist { background: #fff; border: 2px solid #111; border-radius: 4px; } .hrow { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .55rem .8rem; } .hrow + .hrow { border-top: 1px solid var(--soft); } .hrow .q { font-family: var(--hfont); font-size: 15px; text-align: center; border-radius: 3px; padding: .1rem 0; } .hrow .q.plus { background: #d9f2da; color: #1d5a20; } .hrow .q.minus { background: var(--soft); color: #111; } .hrow .w { display: grid; min-width: 0; } .hrow .w i { font-style: normal; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrow .d { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .pmore { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; background: #111; color: #fff; border-radius: 4px; padding: 1.1rem 1.2rem; box-shadow: 5px 5px 0 var(--accent); } .pmore h2 { margin-bottom: .2rem; } .pmore p { margin: 0; color: #e6e2d8; max-width: 38rem; } .pmore .pbtn { box-shadow: 3px 3px 0 #fff; } @media (max-width: 700px) { .ptiles { grid-template-columns: 1fr; } .pmore { flex-direction: column; align-items: stretch; } .hrow { grid-template-columns: 2.6rem minmax(0, 1fr); } .hrow .d { grid-column: 2; } .profile .pback { display: none; } } .mailpref { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fff; border: 2px solid #111; border-radius: 4px; padding: .7rem .9rem; } .mailpref label { display: flex; align-items: center; gap: .55rem; font-size: 14.5px; cursor: pointer; } .mailpref input { width: 18px; height: 18px; accent-color: #111; margin: 0; } .rcard .d .over { color: var(--bad); font-weight: 600; } a.hrow.salerow { color: inherit; text-decoration: none; } a.hrow.salerow:hover { background: var(--accent-bg); } .pmore .psubs { display: flex; gap: .5rem; flex-wrap: wrap; } .pbtn.off { opacity: .55; cursor: not-allowed; box-shadow: none; background: #e8e5de; }