/* * ORCS & PAYERS -------------------------------------------------------------- * Custom CSS * * Author: * Pavel Soyfer * pavelsoyfer.ru */ /* VARIABLES --------------------------------------------------------------- */ :root { /* Colors */ /* UI */ --ui-light: #FFFBE5; --ui-bg: #0B0F12; --ui-bg-a20: rgba(11, 15, 18, 0.2); --ui-bg-a40: rgba(11, 15, 18, 0.4); --ui-bg-a80: rgba(11, 15, 18, 0.8); --ui-stroke: rgba(255, 255, 255, 0.1); --ui-divider: rgba(255, 255, 255, 0.12); /* Orc Green */ --orc-green-300: #D8DD8F; --orc-green-400: #C4CC58; --orc-green-500: #B1BB20; /* Orc Green Gradient */ --orc-green-gradient: linear-gradient(180deg, var(--orc-green-300) 0%, var(--orc-green-400) 50%, var(--orc-green-500) 100%); /* Typography */ /* Effects */ --bg-blur: 20px; --shadow-inner-ui: 0 1px 0 0 rgba(255, 255, 255, 0.16) inset; --shadow-inner-card: 0 2px 0 0 rgba(255, 255, 255, 0.16) inset; /* Transitions */ --btn_primary_duration: 0.25s; } /* GLOBAL ------------------------------------------------------------------ */ /* Headings */ .uc-heading .tn-atom{ position: relative; background: repeating-linear-gradient( to bottom, #FFF8D7 0, #FFF8D7 0.6em, #F3C999 0.6em, #F3C999 1.07em); -webkit-background-clip: text; color: transparent !important; } .uc-heading .tn-atom:after { content: attr(data-text); display: block; position: absolute; width: 100%; top: 0; left: 0; color: black; text-align: inherit; z-index: -1; -webkit-text-stroke: 8px black; } /* Buttons */ /* Button inner container */ .btn_primary .tn-atom__button-content, .btn_secondary .tn-atom__button-content { padding-top: 0 !important; padding-bottom: 0 !important; position: relative; } /* Button (Primary) */ .btn_primary .tn-atom { height: 54px !important; position: relative; background: var(--orc-green-300) !important; transition-duration: var(--btn_primary_duration) !important; transition-timing-function: ease !important; } /* Hover background */ .btn_primary .tn-atom:before { content: ""; display: block; width: 100%; height: calc(100% - 2px); position: absolute; top: 2px; left: 0; border-radius: inherit; background: var(--orc-green-500); transition: transform; transition-duration: var(--btn_primary_duration); transition-timing-function: ease; } /* Button hover */ .btn_primary .tn-atom:hover {background: var(--orc-green-400) !important;} .btn_primary .tn-atom:hover:before {transform: translateY(100%);} /* Button (Secondary) */ .btn_secondary .tn-atom { position: relative; height: 54px !important; box-shadow: 0 2px 0 var(--orc-green-300) inset; } /* DESKTOP ----------------------------------------------------------------- */ /* HEADER -------------------------------------------------------------- */ /* Header background */ .uc-header .t-menu-base { background: var(--ui-bg-a80) !important; } /* INDEX --------------------------------------------------------------- */ /* Catalog (Game cards) */ .uc-index-catalog { --card-hover-duration: 0.2s; --link-hover-duration: 0.1s; } /* Catalog block container */ .uc-index-catalog .t396__artboard { align-items: stretch !important; } /* Game card */ .game-card { min-width: 270px; flex-grow: 1; } /* Game card background */ .game-card:after { content: ""; display: block; width: calc(100% + 2 * 24px); height: calc(100% + 14px + 34px); border-radius: 20px; border: 1px solid var(--ui-stroke); position: absolute; left: -24px; top: -14px; box-sizing: border-box; opacity: 0; background: var(--ui-bg-a20); backdrop-filter: blur(var(--bg-blur)); transition: opacity var(--card-hover-duration) ease; } /* Game card background (on card hover) */ .game-card:hover:after {opacity: 1;} /* Game card cover wrapper */ .game-card_cover-wrapper { width: calc(100% + 2 * 23px) !important; } /* Game card cover wrapper (inner) */ .game-card_cover-wrapper .tn-molecule { transition: opacity var(--card-hover-duration) ease !important; } /* Game card cover wrapper (on card hover) */ .game-card:hover .game-card_cover-wrapper .tn-molecule { opacity: 1 !important; } /* Game card cover overlay */ .game-card_cover-wrapper .tn-molecule:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: inherit; z-index: 9; box-shadow: var(--shadow-inner-card) !important; pointer-events: none; background: linear-gradient(195deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%); } /* Game card cover image */ .game-card_cover { transition: transform var(--card-hover-duration) ease; } /* Game card cover image (on card hover) */ .game-card:hover .game-card_cover { transform: scale(1.05); } /* Game card cover logo */ .game-card_logo { transition: transform var(--card-hover-duration) ease; transform-origin: top left; } /* Game card cover logo (on card hover) */ .game-card:hover .game-card_logo { transform: scale(0.96); } /* Game card title */ .game-card_title h3 { background: var(--orc-green-gradient); -webkit-background-clip: text; background-clip: text; transition: color var(--card-hover-duration) ease !important; } .game-card:hover .game-card_title h3 {color: transparent !important;} /* Game card link */ .game-card_link a { opacity: 0.8; transition-property: opacity, color; transition-duration: var(--link-hover-duration); transition-timing-function: ease; position: relative; } .game-card_link a:hover { color: var(--orc-green-400) !important; opacity: 1; } /* Game card link underline */ .game-card_link a:before { content: ""; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: -1px; border-radius: 1px; background-color: var(--orc-green-400); transform: scaleX(0); transform-origin: left center; transition: transform var(--link-hover-duration) ease; } .game-card_link a:hover:before {transform: scaleX(1);} /* Game card link dot (first in row) */ .game-card_dot-lead {display: none !important;} /* Game card link dot (last) */ .game-card_dot-last {opacity: 0;}