/* =================================================================== * Spurgeon Main Stylesheet * Template Ver. 1.0.0 * 08-15-2021 * ------------------------------------------------------------------ * * TOC: * # SETTINGS * ## fonts * ## colors * ## spacing and typescale * ## grid variables * # NORMALIZE * # BASE SETUP * # GRID * ## large screen devices * ## medium screen devices * ## tablet devices * ## mobile devices * ## small screen devices * ## additional column stackpoints * # UTILITY CLASSES * # TYPOGRAPHY * ## base type styles * ## additional typography & helper classes * ## lists * ## spacing * # PRELOADER * ## page loaded * # FORM * ## style placeholder text * ## change autocomplete styles in Chrome * # BUTTONS * # TABLE * # COMPONENTS * ## pagination * ## alert box * ## skillbars * ## stats tabs * # PROJECT-WIDE SHARED STYLES * ## fade in up effect * ## media classes * ## swiper overrides * ## bricks masonry * ## masonry entries * # PAGE WRAP * # SITE HEADER * ## branding * ## main navigation * ## mobile menu toggle * ## header-search * ## close button for search * ## search triggers * # HERO * ## hero slider * ## hero scroll down * ## slide transitions * # SITE CONTENT * ## pageheader * # FOOTER * ## subscription form * ## footer social * ## copyright * ## go top * # BLOG STYLES * ## blog comments * * ------------------------------------------------------------------ */ /* =================================================================== * # SETTINGS * * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## fonts * ------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Caveat:wght@500&display=swap"); :root { --font-1 : "Inter", sans-serif; --font-2 : "Merriweather", serif; /* monospace */ --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace; } /* ------------------------------------------------------------------- * ## colors * ------------------------------------------------------------------- */ :root { /* color-1(#04776F) * color-2(#DD614A) */ --color-1 : hsla(176, 93%, 24%, 1); --color-2 : hsla(9, 68%, 58%, 1); /* theme color variations */ --color-1-lighter : hsla(176, 93%, 44%, 1); --color-1-light : hsla(176, 93%, 34%, 1); --color-1-dark : hsla(176, 93%, 14%, 1); --color-1-darker : hsla(176, 93%, 8%, 1); --color-2-lighter : hsla(9, 68%, 78%, 1); --color-2-light : hsla(9, 68%, 68%, 1); --color-2-dark : hsla(9, 68%, 48%, 1); --color-2-darker : hsla(9, 68%, 38%, 1); /* feedback colors * color-error(#ffd1d2), color-success(#c8e675), * color-info(#d7ecfb), color-notice(#fff099) */ --color-error : hsla(359, 100%, 91%, 1); --color-success : hsla(76, 69%, 68%, 1); --color-info : hsla(205, 82%, 91%, 1); --color-notice : hsla(51, 100%, 80%, 1); --color-error-content : hsla(359, 50%, 50%, 1); --color-success-content : hsla(76, 29%, 28%, 1); --color-info-content : hsla(205, 32%, 31%, 1); --color-notice-content : hsla(51, 30%, 30%, 1); /* shades * generated using * Tint & Shade Generator * (https://maketintsandshades.com/) */ --color-black : #000000; --color-gray-19 : #141415; --color-gray-18 : #27292a; --color-gray-17 : #3b3d40; --color-gray-16 : #4f5255; --color-gray-15 : #63676a; --color-gray-14 : #767b7f; --color-gray-13 : #8a9094; --color-gray-12 : #9ea4aa; --color-gray-11 : #b1b9bf; --color-gray-10 : #c5cdd4; --color-gray-9 : #cbd2d8; --color-gray-8 : #d1d7dd; --color-gray-7 : #d6dce1; --color-gray-6 : #dce1e5; --color-gray-5 : #e2e6ea; --color-gray-4 : #e8ebee; --color-gray-3 : #eef0f2; --color-gray-2 : #f3f5f6; --color-gray-1 : #f9fafb; --color-white : #ffffff; /* text */ --color-text : var(--color-black); --color-text-dark : var(--color-black); --color-text-light : var(--color-gray-15); --color-placeholder : var(--color-gray-13); /* buttons */ --color-btn : var(--color-gray-5); --color-btn-text : var(--color-black); --color-btn-hover : var(--color-gray-7); --color-btn-hover-text : var(--color-black); --color-btn-primary : var(--color-black); --color-btn-primary-text : var(--color-white); --color-btn-primary-hover : var(--color-1); --color-btn-primary-hover-text : var(--color-white); --color-btn-stroke : var(--color-black); --color-btn-stroke-text : var(--color-black); --color-btn-stroke-hover : var(--color-black); --color-btn-stroke-hover-text : var(--color-white); /* image skeleton (lazy-loaded photos) */ --color-skeleton : rgba(0, 0, 0, 0.06); --color-skeleton-shine : rgba(0, 0, 0, 0.12); /* others */ --color-body : white; /* the platform mark's cards (render_site_mark()): text color → background */ --site-mark-1 : #16181a; --site-mark-2 : #8a9094; --site-mark-3 : #d1d7dd; --color-border : rgba(0, 0, 0, .08); --border-radius : 3px; } /* ------------------------------------------------------------------- * ## dark theme * * most of the site is built on the --color-black / --color-white / * --color-gray-N ramp above rather than literal hex values, so the * simplest way to get broad coverage is to invert that whole ramp (gray-1, * the near-white end, becomes the darkest surface; gray-19, the near-black * end, becomes the lightest text) — every rule that already references * these tokens (buttons, borders, --color-text, --color-placeholder, etc.) * flips automatically with no extra rule needed. Components styled with * literal white/black instead of the tokens are patched individually below. * ------------------------------------------------------------------- */ [data-theme="dark"] { --color-black : #ffffff; /* buttons with a colored (teal) hover background keep white text in * both themes — the one rule for every primary button, no per-button * exceptions (--color-white is dark here) */ --color-btn-primary-hover-text : #ffffff; --color-gray-1 : #141415; --color-gray-2 : #27292a; --color-gray-3 : #3b3d40; --color-gray-4 : #4f5255; --color-gray-5 : #63676a; --color-gray-6 : #767b7f; --color-gray-7 : #8a9094; --color-gray-8 : #9ea4aa; --color-gray-9 : #b1b9bf; --color-gray-10 : #c5cdd4; --color-gray-11 : #cbd2d8; --color-gray-12 : #d1d7dd; --color-gray-13 : #d6dce1; --color-gray-14 : #dce1e5; --color-gray-15 : #e2e6ea; --color-gray-16 : #e8ebee; --color-gray-17 : #eef0f2; --color-gray-18 : #f3f5f6; --color-gray-19 : #f9fafb; --color-white : #0e0f11; --color-skeleton : rgba(255, 255, 255, 0.05); --color-skeleton-shine : rgba(255, 255, 255, 0.11); --color-body : #0e0f11; --site-mark-1 : #ffffff; --site-mark-2 : #8a9094; --site-mark-3 : #4f5255; --color-border : rgba(255, 255, 255, .1); } /* "system" theme status: no explicit [data-theme] set at all (the default, * and what the toggle returns to as its third click state) — follow the OS * preference instead. Guarded with :not([data-theme="light"]) so an * explicit light choice still wins over a dark system preference; the * [data-theme="dark"] block above already covers the reverse case. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-black : #ffffff; --color-btn-primary-hover-text : #ffffff; --color-gray-1 : #141415; --color-gray-2 : #27292a; --color-gray-3 : #3b3d40; --color-gray-4 : #4f5255; --color-gray-5 : #63676a; --color-gray-6 : #767b7f; --color-gray-7 : #8a9094; --color-gray-8 : #9ea4aa; --color-gray-9 : #b1b9bf; --color-gray-10 : #c5cdd4; --color-gray-11 : #cbd2d8; --color-gray-12 : #d1d7dd; --color-gray-13 : #d6dce1; --color-gray-14 : #dce1e5; --color-gray-15 : #e2e6ea; --color-gray-16 : #e8ebee; --color-gray-17 : #eef0f2; --color-gray-18 : #f3f5f6; --color-gray-19 : #f9fafb; --color-white : #0e0f11; --color-skeleton : rgba(255, 255, 255, 0.05); --color-skeleton-shine : rgba(255, 255, 255, 0.11); --color-body : #0e0f11; --site-mark-1 : #ffffff; --site-mark-2 : #8a9094; --site-mark-3 : #4f5255; --color-border : rgba(255, 255, 255, .1); } } /* ------------------------------------------------------------------- * ## spacing and typescale * ------------------------------------------------------------------- */ :root { /* spacing * base font size: 18px * vertical space unit : 32px */ --base-size : 62.5%; --multiplier : 1; --base-font-size : calc(1.8rem * var(--multiplier)); --space : calc(3.2rem * var(--multiplier)); /* vertical spacing */ --vspace-0_125 : calc(0.125 * var(--space)); --vspace-0_25 : calc(0.25 * var(--space)); --vspace-0_375 : calc(0.375 * var(--space)); --vspace-0_5 : calc(0.5 * var(--space)); --vspace-0_625 : calc(0.625 * var(--space)); --vspace-0_75 : calc(0.75 * var(--space)); --vspace-0_875 : calc(0.875 * var(--space)); --vspace-1 : calc(var(--space)); --vspace-1_25 : calc(1.25 * var(--space)); --vspace-1_5 : calc(1.5 * var(--space)); --vspace-1_75 : calc(1.75 * var(--space)); --vspace-2 : calc(2 * var(--space)); --vspace-2_5 : calc(2.5 * var(--space)); --vspace-3 : calc(3 * var(--space)); --vspace-3_5 : calc(3.5 * var(--space)); --vspace-4 : calc(4 * var(--space)); --vspace-4_5 : calc(4.5 * var(--space)); --vspace-5 : calc(5 * var(--space)); /* type scale * ratio 1 :2 | base: 18px * ------------------------------------------------------- * * --text-display-3 = (77.40px) * --text-display-2 = (64.50px) * --text-display-1 = (53.75px) * --text-xxxl = (44.79px) * --text-xxl = (37.32px) * --text-xl = (31.10px) * --text-lg = (25.92px) * --text-md = (21.60px) * --text-size = (18.00px) BASE * --text-sm = (15.00px) * --text-xs = (12.50px) * * --------------------------------------------------------- */ --text-scale-ratio : 1.2; --text-size : var(--base-font-size); --text-xs : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)); --text-sm : calc(var(--text-xs) * var(--text-scale-ratio)); --text-md : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-lg : calc(var(--text-md) * var(--text-scale-ratio)); --text-xl : calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl : calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl : calc(var(--text-xxl) * var(--text-scale-ratio)); --text-display-1 : calc(var(--text-xxxl) * var(--text-scale-ratio)); --text-display-2 : calc(var(--text-display-1) * var(--text-scale-ratio)); --text-display-3 : calc(var(--text-display-2) * var(--text-scale-ratio)); /* default button height */ --vspace-btn : var(--vspace-2); } /* on mobile devices below 600px, change the value of '--multiplier' * to adjust the values of base font size and vertical space unit. */ @media screen and (max-width: 600px) { :root { --multiplier : .9375; } } /* ------------------------------------------------------------------- * ## grid variables * ------------------------------------------------------------------- */ :root { /* widths for rows and containers */ --width-full : 100%; --width-max : 1200px; --width-wide : 1400px; --width-wider : 1600px; --width-widest : 1800px; --width-narrow : 1000px; --width-narrower : 800px; --width-grid-max : var(--width-max); /* gutter */ --gutter : 2rem; } /* on medium screen devices */ @media screen and (max-width: 1200px) { :root { --gutter : 1.8rem; } } /* on mobile devices */ @media screen and (max-width: 600px) { :root { --gutter : 1rem; } } /* ==================================================================== * # NORMALIZE * * * -------------------------------------------------------------------- * normalize.css v8.0.1 | MIT License | * github.com/necolas/normalize.css * -------------------------------------------------------------------- */ html { line-height : 1.15; -webkit-text-size-adjust : 100%; } body { margin : 0; } main { display : block; } h1 { font-size : 2em; margin : 0.67em 0; } hr { box-sizing : content-box; height : 0; overflow : visible; } pre { font-family : monospace, monospace; font-size : 1em; } a { background-color : transparent; } abbr[title] { border-bottom : none; text-decoration : underline; text-decoration : underline dotted; } b, strong { font-weight : bolder; } code, kbd, samp { font-family : monospace, monospace; font-size : 1em; } small { font-size : 80%; } sub, sup { font-size : 75%; line-height : 0; position : relative; vertical-align : baseline; } sub { bottom : -0.25em; } sup { top : -0.5em; } img { border-style : none; } button, input, optgroup, select, textarea { font-family : inherit; font-size : 100%; line-height : 1.15; margin : 0; } button, input { overflow : visible; } button, select { text-transform : none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance : button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style : none; padding : 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline : 1px dotted ButtonText; } fieldset { padding : 0.35em 0.75em 0.625em; } legend { box-sizing : border-box; color : inherit; display : table; max-width : 100%; padding : 0; white-space : normal; } progress { vertical-align : baseline; } textarea { overflow : auto; } [type="checkbox"], [type="radio"] { box-sizing : border-box; padding : 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height : auto; } [type="search"] { -webkit-appearance : textfield; outline-offset : -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance : none; } ::-webkit-file-upload-button { -webkit-appearance : button; font : inherit; } details { display : block; } summary { display : list-item; } template { display : none; } [hidden] { display : none; } /* =================================================================== * # BASE SETUP * * * ------------------------------------------------------------------- */ html { font-size : var(--base-size); box-sizing : border-box; } *, *::before, *::after { box-sizing : inherit; } html, body { height : 100%; } body { background-color : var(--color-body); -webkit-overflow-scrolling : touch; -webkit-text-size-adjust : 100%; -webkit-tap-highlight-color : rgba(0, 0, 0, 0); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } p { font-size : inherit; text-rendering : optimizeLegibility; } a { text-decoration : none; } svg, img, video { max-width : 100%; height : auto; } pre { overflow : auto; } div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin : 0; padding : 0; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance : none; -moz-appearance : none; appearance : none; } /* =================================================================== * # GRID v4.0.0 * * * ----------------------------------------------------------------- * - Grid breakpoints are based on MAXIMUM WIDTH media queries, * meaning they apply to that one breakpoint and ALL THOSE BELOW IT. * - Grid columns without a specified width will automatically layout * as equal width columns. * * - BLOCK GRID columns(columns inside BLOCK GRID containers) are * equally-sized columns define at parent/row level. * A BLOCK GRID container's class attribute value begins with "block-". * * ------------------------------------------------------------------- */ /* row */ .row { width : 92%; max-width : var(--width-grid-max); margin : 0 auto; display : flex; flex-flow : row wrap; } .row .row { width : auto; max-width : none; margin-left : calc(var(--gutter) * -1); margin-right : calc(var(--gutter) * -1); } /* column */ .column { display : block; flex : 1 1 0%; padding : 0 var(--gutter); } .collapse>.column, .column.collapse { padding : 0; } /* row utility classes */ .row.row-wrap { flex-wrap : wrap; } .row.row-nowrap { flex-wrap : nowrap; } .row.row-y-top { align-items : flex-start; } .row.row-y-bottom { align-items : flex-end; } .row.row-y-center { align-items : center; } .row.row-stretch { align-items : stretch; } .row.row-baseline { align-items : baseline; } .row.row-x-left { justify-content : flex-start; } .row.row-x-right { justify-content : flex-end; } .row.row-x-center { justify-content : center; } /* -------------------------------------------------------------------- * ## large screen devices * -------------------------------------------------------------------- */ .lg-1 { flex : none; width : 8.33333%; } .lg-2 { flex : none; width : 16.66667%; } .lg-3 { flex : none; width : 25%; } .lg-4 { flex : none; width : 33.33333%; } .lg-5 { flex : none; width : 41.66667%; } .lg-6 { flex : none; width : 50%; } .lg-7 { flex : none; width : 58.33333%; } .lg-8 { flex : none; width : 66.66667%; } .lg-9 { flex : none; width : 75%; } .lg-10 { flex : none; width : 83.33333%; } .lg-11 { flex : none; width : 91.66667%; } .lg-12 { flex : none; width : 100%; } .block-lg-one-eight>.column { flex : none; width : 12.5%; } .block-lg-one-sixth>.column { flex : none; width : 16.66667%; } .block-lg-one-fifth>.column { flex : none; width : 20%; } .block-lg-one-fourth>.column { flex : none; width : 25%; } .block-lg-one-third>.column { flex : none; width : 33.33333%; } .block-lg-one-half>.column { flex : none; width : 50%; } .block-lg-whole>.column { flex : none; width : 100%; } /* -------------------------------------------------------------------- * ## medium screen devices * -------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { .md-1 { flex : none; width : 8.33333%; } .md-2 { flex : none; width : 16.66667%; } .md-3 { flex : none; width : 25%; } .md-4 { flex : none; width : 33.33333%; } .md-5 { flex : none; width : 41.66667%; } .md-6 { flex : none; width : 50%; } .md-7 { flex : none; width : 58.33333%; } .md-8 { flex : none; width : 66.66667%; } .md-9 { flex : none; width : 75%; } .md-10 { flex : none; width : 83.33333%; } .md-11 { flex : none; width : 91.66667%; } .md-12 { flex : none; width : 100%; } .block-md-one-eight>.column { flex : none; width : 12.5%; } .block-md-one-sixth>.column { flex : none; width : 16.66667%; } .block-md-one-fifth>.column { flex : none; width : 20%; } .block-md-one-fourth>.column { flex : none; width : 25%; } .block-md-one-third>.column { flex : none; width : 33.33333%; } .block-md-one-half>.column { flex : none; width : 50%; } .block-md-whole>.column { flex : none; width : 100%; } .hide-on-md { display : none; } } /* -------------------------------------------------------------------- * ## tablet devices * -------------------------------------------------------------------- */ @media screen and (max-width: 800px) { .tab-1 { flex : none; width : 8.33333%; } .tab-2 { flex : none; width : 16.66667%; } .tab-3 { flex : none; width : 25%; } .tab-4 { flex : none; width : 33.33333%; } .tab-5 { flex : none; width : 41.66667%; } .tab-6 { flex : none; width : 50%; } .tab-7 { flex : none; width : 58.33333%; } .tab-8 { flex : none; width : 66.66667%; } .tab-9 { flex : none; width : 75%; } .tab-10 { flex : none; width : 83.33333%; } .tab-11 { flex : none; width : 91.66667%; } .tab-12 { flex : none; width : 100%; } .block-tab-one-eight>.column { flex : none; width : 12.5%; } .block-tab-one-sixth>.column { flex : none; width : 16.66667%; } .block-tab-one-fifth>.column { flex : none; width : 20%; } .block-tab-one-fourth>.column { flex : none; width : 25%; } .block-tab-one-third>.column { flex : none; width : 33.33333%; } .block-tab-one-half>.column { flex : none; width : 50%; } .block-tab-whole>.column { flex : none; width : 100%; } .hide-on-tab { display : none; } } /* -------------------------------------------------------------------- * ## mobile devices * -------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .row { width : 100%; padding-left : 6vw; padding-right : 6vw; } .row .row { padding-left : 0; padding-right : 0; } .mob-1 { flex : none; width : 8.33333%; } .mob-2 { flex : none; width : 16.66667%; } .mob-3 { flex : none; width : 25%; } .mob-4 { flex : none; width : 33.33333%; } .mob-5 { flex : none; width : 41.66667%; } .mob-6 { flex : none; width : 50%; } .mob-7 { flex : none; width : 58.33333%; } .mob-8 { flex : none; width : 66.66667%; } .mob-9 { flex : none; width : 75%; } .mob-10 { flex : none; width : 83.33333%; } .mob-11 { flex : none; width : 91.66667%; } .mob-12 { flex : none; width : 100%; } .block-mob-one-eight>.column { flex : none; width : 12.5%; } .block-mob-one-sixth>.column { flex : none; width : 16.66667%; } .block-mob-one-fifth>.column { flex : none; width : 20%; } .block-mob-one-fourth>.column { flex : none; width : 25%; } .block-mob-one-third>.column { flex : none; width : 33.33333%; } .block-mob-one-half>.column { flex : none; width : 50%; } .block-mob-whole>.column { flex : none; width : 100%; } .hide-on-mob { display : none; } } /* -------------------------------------------------------------------- * ## small screen devices * --------------------------------------------------------------------*/ /* stack columns on small screen devices */ @media screen and (max-width: 400px) { .row .row { margin-left : 0; margin-right : 0; } .block-stack>.column, .column { flex : none; width : 100%; margin-left : 0; margin-right : 0; padding : 0; } .hide-on-sm { display : none; } } /* -------------------------------------------------------------------- * ## additional column stackpoints * -------------------------------------------------------------------- */ @media screen and (max-width: 1000px) { .stack-on-1000, .block-stack-on-1000>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } @media screen and (max-width: 700px) { .stack-on-700, .block-stack-on-700>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } @media screen and (max-width: 550px) { .stack-on-550, .block-stack-on-550>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } /* =================================================================== * # UTILITY CLASSES * * * ------------------------------------------------------------------- */ /* flex item alignment classes */ .u-flexitem-center { margin : auto; align-self : center; } .u-flexitem-left { margin-right : auto; align-self : center; } .u-flexitem-right { margin-left : auto; align-self : center; } .u-flexitem-x-center { margin-right : auto; margin-left : auto; } .u-flexitem-x-left { margin-right : auto; } .u-flexitem-x-right { margin-left : auto; } .u-flexitem-y-center { align-self : center; } .u-flexitem-y-top { align-self : flex-start; } .u-flexitem-y-bottom { align-self : flex-end; } /* misc helper classes */ .u-screen-reader-text { clip : rect(1px, 1px, 1px, 1px); clip-path : inset(50%); height : 1px; width : 1px; margin : -1px; overflow : hidden; padding : 0; border : 0; position : absolute; word-wrap : normal !important; } .u-clearfix:after { content : ""; display : table; clear : both; } .u-hidden { display : none; } .u-invisible { visibility : hidden; } .u-antialiased { -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } .u-overflow-hidden { overflow : hidden; } .u-remove-top { margin-top : 0; } .u-remove-bottom { margin-bottom : 0; } .u-add-half-bottom { margin-bottom : var(--vspace-0_5); } .u-add-bottom { margin-bottom : var(--vspace-1); } .u-no-border { border : none; } .u-fullwidth { width : 100%; } .u-pull-left { float : left; } .u-pull-right { float : right; } /* =================================================================== * # TYPOGRAPHY * * * ------------------------------------------------------------------- * type scale - ratio 1:2 | base: 18px * ------------------------------------------------------------------- * * --text-display-3 = (77.40px) * --text-display-2 = (64.50px) * --text-display-1 = (53.75px) * --text-xxxl = (44.79px) * --text-xxl = (37.32px) * --text-xl = (31.10px) * --text-lg = (25.92px) * --text-md = (21.60px) * --text-size = (18.00px) BASE * --text-sm = (15.00px) * --text-xs = (12.50px) * * -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- * ## base type styles * -------------------------------------------------------------------- */ body { font-family : var(--font-1); font-size : var(--base-font-size); font-weight : 400; line-height : var(--vspace-1); color : var(--color-text); } /* links */ a { color : var(--color-1); transition : all 0.3s ease-in-out; } a:focus, a:hover, a:active { color : var(--color-2); } a:hover, a:active { outline : 0; } /* headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family : var(--font-2); font-weight : 400; color : var(--color-text-dark); font-variant-ligatures : common-ligatures; text-rendering : optimizeLegibility; } h1, .h1 { margin-top : var(--vspace-2_5); margin-bottom : var(--vspace-0_75); } h2, .h2, h3, .h3, h4, .h4 { margin-top : var(--vspace-2); margin-bottom : var(--vspace-0_75); } h5, .h5, h6, .h6 { margin-top : var(--vspace-1_75); margin-bottom : var(--vspace-0_5); } h1, .h1 { font-size : var(--text-display-2); line-height : calc(2.25 * var(--space)); letter-spacing : -.01em; } @media screen and (max-width: 500px) { h1, .h1 { font-size : var(--text-display-1); line-height : calc(1.875 * var(--space)); } } h2, .h2 { font-size : var(--text-xxl); line-height : calc(1.375 * var(--space)); } h3, .h3 { font-size : var(--text-xl); line-height : calc(1.125 * var(--space)); } h4, .h4 { font-size : var(--text-lg); line-height : var(--vspace-1); } h5, .h5 { font-size : var(--text-md); line-height : var(--vspace-0_875); } h6, .h6 { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); line-height : var(--vspace-0_75); text-transform : uppercase; letter-spacing : .3rem; } /* emphasis, italic, * strong, bold and small text */ em, i, strong, b { font-size : inherit; line-height : inherit; } em, i { font-style : italic; } strong, b { font-weight : 600; } small { font-size : 80%; font-weight : 400; line-height : var(--vspace-0_5); } /* blockquotes */ blockquote { margin : 0 0 var(--vspace-1) 0; padding : var(--vspace-1) var(--vspace-1_5); border-left : 2px solid var(--color-text-dark); position : relative; } blockquote p { font-family : var(--font-1); font-weight : 400; font-size : var(--text-lg); font-style : normal; line-height : var(--vspace-1_25); color : var(--color-text-dark); padding : 0; } blockquote cite { display : block; font-family : var(--font-1); font-weight : 400; font-size : var(--text-sm); line-height : var(--vspace-0_75); font-style : normal; } blockquote cite:before { content : "\2014 \0020"; } blockquote cite, blockquote cite a, blockquote cite a:visited { color : var(--color-text-light); border : none; } @media screen and (max-width: 500px) { blockquote { padding : var(--vspace-0_75) var(--vspace-0_75); } blockquote p { font-size : var(--text-md); line-height : var(--vspace-1); } } /* figures */ figure img, p img { margin : 0; vertical-align : bottom; } figure { display : block; margin-left : 0; margin-right : 0; } figure img+figcaption { margin-top : var(--vspace-1); } figcaption { /* font-style: italic; */ font-size : var(--text-sm); text-align : center; margin-bottom : 0; } /* preformatted, code */ var, kbd, samp, code, pre { font-family : var(--font-mono); } pre { padding : var(--vspace-0_75) var(--vspace-1) var(--vspace-1); background : var(--color-gray-6); overflow-x : auto; } code { font-size : var(--text-sm); line-height : 1.6rem; margin : 0 .2rem; padding : calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem); white-space : nowrap; background : var(--color-gray-6); border : 1px solid var(--color-gray-10); color : var(--color-text-dark); border-radius : 3px; } pre>code { display : block; white-space : pre; line-height : var(--vspace-1); padding : 0; margin : 0; border : none; } /* deleted text, abbreviation, * & mark text */ del { text-decoration : line-through; } abbr { font-family : var(--font-1); font-weight : 600; font-variant : small-caps; text-transform : lowercase; letter-spacing : .1em; } abbr[title], dfn[title] { border-bottom : 1px dotted; cursor : help; text-decoration : none; } mark { background : var(--color-1-lighter); color : var(--color-black); } /* horizontal rule */ hr { border : solid var(--color-border); border-width : .1rem 0 0; clear : both; margin : var(--vspace-2) 0 calc(var(--vspace-2) - 1px); height : 0; } hr.fancy { border : none; margin : var(--vspace-2) 0; height : var(--vspace-1); text-align : center; } hr.fancy::before { content : "*****"; letter-spacing : .3em; } /* -------------------------------------------------------------------- * ## additional typography & helper classes * -------------------------------------------------------------------- */ .lead, .attention-getter { font-family : var(--font-1); font-weight : 300; font-size : var(--text-md); line-height : var(--vspace-1_25); color : var(--color-text-light); } @media screen and (max-width: 500px) { .lead, .attention-getter { font-size : calc(var(--text-size) * 1.0556); line-height : calc(1.125 * var(--space)); } } @media screen and (max-width: 400px) { .lead, .attention-getter { font-size : var(--text-size); line-height : var(--vspace-1); } } .pull-quote { position : relative; padding : 0; margin-top : 0; text-align : center; } .pull-quote blockquote { border : none; margin : 0 auto; max-width : 62rem; padding-top : var(--vspace-2_5); position : relative; } .pull-quote blockquote p { font-weight : 400; color : var(--color-text-dark); } .pull-quote blockquote:before { content : ""; display : block; height : var(--vspace-1); width : var(--vspace-1); background-repeat : no-repeat; background : center center; background-size : contain; background-image : url(../images/icons/icon-quote.svg); transform : translate(-50%, 0, 0); position : absolute; top : var(--vspace-1); left : 50%; } /* game page comment ("Мой комментарий"): pull-quote with the quote icon * on the left and left-aligned italic text */ .pull-quote.game-detail__comment { text-align : left; margin-bottom : var(--vspace-1_5); } .pull-quote.game-detail__comment blockquote { max-width : none; margin : 0; padding : 0 0 0 6.4rem; } /* bigger icon, painted with the text color through a mask (the svg itself * is black) — so it follows the theme: dark on light, white on dark */ .pull-quote.game-detail__comment blockquote:before { top : 0; left : 0; width : 4.4rem; height : 4.4rem; transform : none; background : var(--color-text-dark); -webkit-mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; } .pull-quote.game-detail__comment blockquote p { font-style : italic; } /* quotes inside post / game texts (and the same in the editor): like the * game page comment — quote icon on the left, italic text */ .entry__content blockquote, .sun-editor.sun-editor .se-wrapper .sun-editor-editable blockquote { position : relative; max-width : none; margin : 0 0 var(--vspace-1); padding : 0 0 0 6.4rem; min-height : 4.4rem; border : none; color : var(--color-text-dark); font-size : inherit; } .entry__content blockquote:before, .sun-editor.sun-editor .se-wrapper .sun-editor-editable blockquote:before { content : ""; position : absolute; top : 0; left : 0; width : 4.4rem; height : 4.4rem; background : var(--color-text-dark); -webkit-mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; } .entry__content blockquote, .entry__content blockquote p, .sun-editor.sun-editor .se-wrapper .sun-editor-editable blockquote, .sun-editor.sun-editor .se-wrapper .sun-editor-editable blockquote p { font-style : italic; } .drop-cap:first-letter { float : left; font-family : var(--font-1); font-weight : 700; font-size : calc(3 * var(--space)); line-height : 1; padding : 0 0.125em 0 0; text-transform : uppercase; background : transparent; color : var(--color-text-dark); } .text-center { text-align : center; } .text-left { text-align : left; } .text-right { text-align : right; } /* -------------------------------------------------------------------- * ## lists * -------------------------------------------------------------------- */ ol { list-style : decimal; } ul { list-style : disc; } li { display : list-item; } ol, ul { margin-left : 1.6rem; } ul li { padding-left : .4rem; } ul ul, ul ol, ol ol, ol ul { margin : 1.6rem 0 1.6rem 1.6rem; } ul.disc li { display : list-item; list-style : none; padding : 0 0 0 .8rem; position : relative; } ul.disc li::before { content : ""; display : inline-block; width : 8px; height : 8px; border-radius : 50%; background : var(--color-1); position : absolute; left : -.9em; top : 11px; vertical-align : middle; } dt { margin : 0; color : var(--color-1); } dd { margin : 0 0 0 2rem; } /* definition list line style */ .lining dt, .lining dd { display : inline; margin : 0; } .lining dt+dt:before, .lining dd+dt:before { content : "\A"; white-space : pre; } .lining dd+dd:before { content : ", "; } .lining dd+dd:before { content : ", "; } .lining dd:before { content : ": "; margin-left : -0.2em; } /* definition list dictionary style */ .dictionary-style dt { display : inline; counter-reset : definitions; } .dictionary-style dt+dt:before { content : ", "; margin-left : -0.2em; } .dictionary-style dd { display : block; counter-increment : definitions; } .dictionary-style dd:before { content : counter(definitions, decimal) ". "; } /* -------------------------------------------------------------------- * ## spacing * -------------------------------------------------------------------- */ fieldset:not(:where(.sun-editor *, .sun-editor-common *)), button:not(:where(.sun-editor *, .sun-editor-common *)), .btn:not(:where(.sun-editor *, .sun-editor-common *)) { margin-bottom : var(--vspace-0_5); } input:not(:where(.sun-editor *, .sun-editor-common *)), textarea:not(:where(.sun-editor *, .sun-editor-common *)), select:not(:where(.sun-editor *, .sun-editor-common *)), pre:not(:where(.sun-editor *, .sun-editor-common *)), blockquote:not(:where(.sun-editor *, .sun-editor-common *)), figure:not(:where(.sun-editor *, .sun-editor-common *)), figcaption:not(:where(.sun-editor *, .sun-editor-common *)), table:not(:where(.sun-editor *, .sun-editor-common *)), p:not(:where(.sun-editor *, .sun-editor-common *)), ul:not(:where(.sun-editor *, .sun-editor-common *)), ol:not(:where(.sun-editor *, .sun-editor-common *)), dl:not(:where(.sun-editor *, .sun-editor-common *)), form:not(:where(.sun-editor *, .sun-editor-common *)), img:not(:where(.sun-editor *, .sun-editor-common *)), .video-container:not(:where(.sun-editor *, .sun-editor-common *)), .ss-custom-select:not(:where(.sun-editor *, .sun-editor-common *)) { margin-bottom : var(--vspace-1); } /* =================================================================== * # IMAGE SKELETON * * Lazy-loaded photos (.ss-lazy, see lazy_img()/lazy_bg_attrs() in * functions.php and ssLazyMedia in main.js) show a shimmering placeholder * until the file arrives; .is-loaded is added on load. * ------------------------------------------------------------------- */ .ss-lazy:not(.is-loaded) { background-color : var(--color-skeleton); background-image : linear-gradient(100deg, transparent 20%, var(--color-skeleton-shine) 50%, transparent 80%); background-size : 200% 100%; background-repeat : no-repeat; animation : ss-skeleton 1.4s ease-in-out infinite; } /* the itself is transparent until decoded — keep the box visible */ img.ss-lazy:not(.is-loaded) { color : transparent; } img.ss-lazy { transition : opacity .3s ease; } @keyframes ss-skeleton { from { background-position : 150% 0; } to { background-position : -50% 0; } } @media (prefers-reduced-motion: reduce) { .ss-lazy:not(.is-loaded) { animation : none; } } /* =================================================================== * # FORM * * * ------------------------------------------------------------------- */ fieldset { border : none; padding : 0; } input[type="email"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="number"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="search"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="text"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="tel"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="url"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="password"]:not(:where(.sun-editor *, .sun-editor-common *)), textarea:not(:where(.sun-editor *, .sun-editor-common *)), select:not(:where(.sun-editor *, .sun-editor-common *)) { --input-height : var(--vspace-2); --input-line-height : var(--vspace-1); --input-vpadding : calc(((var(--input-height) - var(--input-line-height)) / 2) - 1px); display : block; height : var(--input-height); padding : var(--input-vpadding) calc(2.4rem - 1px); border : 0; outline : 0; color : var(--color-black); font-family : var(--font-1); font-size : var(--text-sm); font-size : calc(var(--text-size) * 0.8889); line-height : var(--input-line-height); max-width : 100%; background-color : var(--color-gray-3); border : 1px solid transparent; transition : all .3s ease-in-out; border-radius : var(--border-radius); } .ss-custom-select { position : relative; padding : 0; } .ss-custom-select select { -webkit-appearance : none; -moz-appearance : none; appearance : none; text-indent : 0.01px; text-overflow : ''; margin : 0; vertical-align : middle; } .ss-custom-select select option { padding-left : 2rem; padding-right : 2rem; } .ss-custom-select select::-ms-expand { display : none; } .ss-custom-select::after { border-bottom : 2px solid black; border-right : 2px solid black; content : ''; display : block; height : 8px; width : 8px; margin-top : -7px; pointer-events : none; position : absolute; right : 2.4rem; top : 50%; transition : all 0.15s ease-in-out; transform-origin : 66% 66%; transform : rotate(45deg); } textarea { min-height : calc(8 * var(--space)); } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color : var(--color-black); background-color : var(--color-white); box-shadow : 0 0 5px var(--color-1); border : 1px solid var(--color-1-light); } label:not(:where(.sun-editor *, .sun-editor-common *)), legend:not(:where(.sun-editor *, .sun-editor-common *)) { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); line-height : var(--vspace-0_5); margin-bottom : var(--vspace-0_5); color : var(--color-text-dark); display : block; } input[type="checkbox"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="radio"]:not(:where(.sun-editor *, .sun-editor-common *)) { display : inline; } label>.label-text { display : inline-block; margin-left : 1rem; font-family : var(--font-1); line-height : inherit; } label>input[type="checkbox"]:not(:where(.sun-editor *, .sun-editor-common *)), label>input[type="radio"]:not(:where(.sun-editor *, .sun-editor-common *)) { margin : 0; position : relative; top : 2px; } /* ------------------------------------------------------------------- * ## style placeholder text * ------------------------------------------------------------------- */ ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color : var(--color-placeholder); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : var(--color-placeholder); opacity : 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color : var(--color-placeholder); opacity : 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color : var(--color-placeholder); } ::-ms-input-placeholder { /* Microsoft Edge */ color : var(--color-placeholder); } ::placeholder { /* Most modern browsers support this now. */ color : var(--color-placeholder); } /* ------------------------------------------------------------------- * ## change autocomplete styles in Chrome * ------------------------------------------------------------------- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color : var(--color-1); transition : background-color 5000s ease-in-out 0s; } /* =================================================================== * # BUTTONS * * * ------------------------------------------------------------------- */ .btn:not(:where(.sun-editor *, .sun-editor-common *)), button:not(:where(.sun-editor *, .sun-editor-common *)), input[type="submit"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="reset"]:not(:where(.sun-editor *, .sun-editor-common *)), input[type="button"]:not(:where(.sun-editor *, .sun-editor-common *)) { --btn-height : var(--vspace-btn); display : inline-block; font-family : var(--font-1); font-weight : 600; font-size : var(--text-xs); text-transform : uppercase; letter-spacing : .35em; height : var(--btn-height); line-height : calc(var(--btn-height) - 4px); padding : 0 3.6rem; margin : 0 0.4rem var(--vspace-0_5) 0; color : var(--color-btn-text); text-decoration : none; text-align : center; white-space : nowrap; cursor : pointer; transition : all .3s; border-radius : var(--border-radius); background-color : var(--color-btn); border : 2px solid var(--color-btn); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } .btn:not(:where(.sun-editor *, .sun-editor-common *)):focus, button:not(:where(.sun-editor *, .sun-editor-common *)):focus, input[type="submit"]:not(:where(.sun-editor *, .sun-editor-common *)):focus, input[type="reset"]:not(:where(.sun-editor *, .sun-editor-common *)):focus, input[type="button"]:not(:where(.sun-editor *, .sun-editor-common *)):focus, .btn:not(:where(.sun-editor *, .sun-editor-common *)):hover, button:not(:where(.sun-editor *, .sun-editor-common *)):hover, input[type="submit"]:not(:where(.sun-editor *, .sun-editor-common *)):hover, input[type="reset"]:not(:where(.sun-editor *, .sun-editor-common *)):hover, input[type="button"]:not(:where(.sun-editor *, .sun-editor-common *)):hover { background-color : var(--color-btn-hover); border-color : var(--color-btn-hover); color : var(--color-btn-hover-text); outline : 0; } /* button primary */ .btn.btn--primary, button.btn--primary, input[type="submit"].btn--primary, input[type="reset"].btn--primary, input[type="button"].btn--primary { background : var(--color-btn-primary); border-color : var(--color-btn-primary); color : var(--color-btn-primary-text); } .btn.btn--primary:focus, button.btn--primary:focus, input[type="submit"].btn--primary:focus, input[type="reset"].btn--primary:focus, input[type="button"].btn--primary:focus, .btn.btn--primary:hover, button.btn--primary:hover, input[type="submit"].btn--primary:hover, input[type="reset"].btn--primary:hover, input[type="button"].btn--primary:hover { background : var(--color-btn-primary-hover); border-color : var(--color-btn-primary-hover); color : var(--color-btn-primary-hover-text); } /* button modifiers */ .btn.u-fullwidth, button.u-fullwidth { width : 100%; margin-right : 0; } .btn--small, button.btn--small { --btn-height : calc(var(--vspace-btn) - 1.6rem); } .btn--medium, button.btn--medium { --btn-height : calc(var(--vspace-btn) + .8rem); } .btn--large, button.btn--large { --btn-height : calc(var(--vspace-btn) + 1.6rem); } .btn--stroke, button.btn--stroke { background : transparent !important; font-weight : 700; border : 2px solid var(--color-btn-stroke); color : var(--color-btn-stroke-text); } .btn--stroke:focus, button.btn--stroke:focus, .btn--stroke:hover, button.btn--stroke:hover { background : var(--color-btn-stroke-hover) !important; border : 2px solid var(--color-btn-stroke-hover); color : var(--color-btn-stroke-hover-text); } .load-more-btn { position : relative; } .load-more-btn.is-loading { color : transparent !important; pointer-events : none; } .load-more-btn.is-loading::after { content : ""; position : absolute; top : 50%; left : 50%; width : 1.8rem; height : 1.8rem; margin : -0.9rem 0 0 -0.9rem; border : 2px solid var(--color-btn-stroke-text); border-top-color : transparent; border-radius : 50%; animation : load-more-spin 0.7s linear infinite; } @keyframes load-more-spin { to { transform : rotate(360deg); } } .btn--pill, button.btn--pill { padding-left : 3.2rem !important; padding-right : 3.2rem !important; border-radius : 1000px !important; } /* =================================================================== * # TABLE * * * ------------------------------------------------------------------- */ table { border-width : 0; width : 100%; max-width : 100%; font-family : var(--font-1); border-collapse : collapse; } th, td { padding : var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px); text-align : left; border-bottom : 1px solid var(--color-border); } th { padding : var(--vspace-0_5) 3.2rem; color : var(--color-text-dark); font-family : var(--font-1); font-weight : 600; } th:first-child, td:first-child { padding-left : 0; } th:last-child, td:last-child { padding-right : 0; } .table-responsive { overflow-x : auto; -webkit-overflow-scrolling : touch; } /* =================================================================== * # COMPONENTS * * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## pagination * ------------------------------------------------------------------- */ .pgn { --pgn-num-height : calc(var(--vspace-1) + .4rem); margin : 0 auto var(--vspace-1); text-align : center; } .pgn ul { display : inline-flex; flex-flow : row wrap; justify-content : center; list-style : none; margin-left : 0; position : relative; padding : 0 6rem; } .pgn ul li { margin : 0; padding : 0; } .pgn__num { font-family : var(--font-1); font-weight : 600; font-size : var(--text-size); line-height : var(--vspace-1); display : block; padding : .2rem 1.2rem; height : var(--pgn-num-height); margin : .2rem .2rem; color : var(--color-text-dark); border-radius : var(--border-radius); transition : all, .3s, ease-in-out; } .pgn__num:focus, .pgn__num:hover { background : var(--color-text-dark); color : var(--color-white); } .pgn .current, .pgn .current:focus, .pgn .current:hover { background : var(--color-text-dark); color : var(--color-white); } .pgn .inactive, .pgn .inactive:focus, .pgn .inactive:hover { opacity : 0.4; cursor : default; } .pgn__prev, .pgn__next { display : inline-flex; flex-flow : row wrap; justify-content : center; align-items : center; height : var(--pgn-num-height); width : 4.8rem; line-height : var(--vspace-1); border-radius : 4px; padding : 0; margin : 0; opacity : 1; font : 0/0 a; text-shadow : none; color : transparent; transition : all, .3s, ease-in-out; position : absolute; top : 50%; transform : translate(0, -50%); } .pgn__prev:focus, .pgn__prev:hover, .pgn__next:focus, .pgn__next:hover { background : var(--color-text-dark); } .pgn__prev svg, .pgn__next svg { height : 2.4rem; width : 2.4rem; transition : all, .3s, ease-in-out; } .pgn__prev svg path, .pgn__next svg path { stroke : var(--color-text-dark); } .pgn__prev:focus svg path, .pgn__prev:hover svg path, .pgn__next:focus svg path, .pgn__next:hover svg path { stroke : white; } .pgn__prev { left : 0; } .pgn__next { right : 0; } .pgn__prev.inactive, .pgn__next.inactive { opacity : 0.4; cursor : default; } .pgn__prev.inactive:focus, .pgn__prev.inactive:hover, .pgn__next.inactive:focus, .pgn__next.inactive:hover { background-color : transparent; } /* ------------------------------------------------------------------- * responsive: * pagination * ------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .pgn ul { padding : 0 5.2rem; } } /* ------------------------------------------------------------------- * ## alert box * ------------------------------------------------------------------- */ .alert-box { padding : var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem; margin-bottom : var(--vspace-1); border-radius : var(--border-radius); font-family : var(--font-1); font-weight : 500; font-size : var(--text-sm); line-height : var(--vspace-0_75); opacity : 1; visibility : visible; position : relative; } .alert-box__close { position : absolute; display : block; right : 1.6rem; top : 1.6rem; cursor : pointer; width : 12px; height : 12px; } .alert-box__close::before, .alert-box__close::after { content : ''; display : inline-block; width : 1px; height : 12px; position : absolute; top : 0; left : 5px; } .alert-box__close::before { transform : rotate(45deg); } .alert-box__close::after { transform : rotate(-45deg); } .alert-box--error { background-color : var(--color-error); color : var(--color-error-content); } .alert-box--error .alert-box__close::before, .alert-box--error .alert-box__close::after { background-color : var(--color-error-content); } .alert-box--success { background-color : var(--color-success); color : var(--color-success-content); } .alert-box--success .alert-box__close::before, .alert-box--success .alert-box__close::after { background-color : var(--color-success-content); } .alert-box--info { background-color : var(--color-info); color : var(--color-info-content); } .alert-box--info .alert-box__close::before, .alert-box--info .alert-box__close::after { background-color : var(--color-info-content); } .alert-box--notice { background-color : var(--color-notice); color : var(--color-notice-content); } .alert-box--notice .alert-box__close::before, .alert-box--notice .alert-box__close::after { background-color : var(--color-notice-content); } .alert-box.hideit { opacity : 0; visibility : hidden; transition : all .5s; } /* ------------------------------------------------------------------- * ## skillbars * ------------------------------------------------------------------- */ .skill-bars { list-style : none; margin : var(--vspace-2) 0 var(--vspace-1); } .skill-bars li { height : .4rem; background : var(--color-gray-9); width : 100%; margin-bottom : calc(var(--vspace-2) - .4rem); padding : 0; position : relative; } .skill-bars li strong { position : absolute; left : 0; top : calc((var(--vspace-1) * 1.25) * -1); font-family : var(--font-1); font-weight : 600; color : var(--color-text-dark); text-transform : uppercase; letter-spacing : .2em; font-size : var(--text-xs); line-height : var(--vspace-0_75); } .skill-bars li .progress { background : var(--color-1); position : relative; height : 100%; } .skill-bars li .progress span { display : block; font-family : var(--font-1); color : white; font-size : 1rem; line-height : 1; background : var(--color-black); padding : var(--vspace-0_25); border-radius : 4px; position : absolute; right : 0; top : calc((var(--vspace-1) + .8rem) * -1); } .skill-bars li .progress span::after { position : absolute; left : 50%; bottom : -10px; margin-left : -5px; width : 0; height : 0; border : 5px solid transparent; border-top-color : var(--color-black, var(--color-black)); content : ""; } .skill-bars li .percent5 { width : 5%; } .skill-bars li .percent10 { width : 10%; } .skill-bars li .percent15 { width : 15%; } .skill-bars li .percent20 { width : 20%; } .skill-bars li .percent25 { width : 25%; } .skill-bars li .percent30 { width : 30%; } .skill-bars li .percent35 { width : 35%; } .skill-bars li .percent40 { width : 40%; } .skill-bars li .percent45 { width : 45%; } .skill-bars li .percent50 { width : 50%; } .skill-bars li .percent55 { width : 55%; } .skill-bars li .percent60 { width : 60%; } .skill-bars li .percent65 { width : 65%; } .skill-bars li .percent70 { width : 70%; } .skill-bars li .percent75 { width : 75%; } .skill-bars li .percent80 { width : 80%; } .skill-bars li .percent85 { width : 85%; } .skill-bars li .percent90 { width : 90%; } .skill-bars li .percent95 { width : 95%; } .skill-bars li .percent100 { width : 100%; } /* -------------------------------------------------------------------- * ## stats tabs * -------------------------------------------------------------------- */ .stats-tabs { padding : 0; margin : var(--vspace-1) 0; } .stats-tabs li { display : inline-block; margin : 0 1.6rem var(--vspace-0_5) 0; padding : 0 1.5rem 0 0; border-right : 1px solid var(--color-border); } .stats-tabs li:last-child { margin : 0; padding : 0; border : none; } .stats-tabs li a { display : block; font-family : var(--font-1); font-size : var(--text-lg); font-weight : 600; line-height : var(--vspace-1_5); border : none; color : var(--color-text-dark); } .stats-tabs li a:hover { color : var(--color-1); } .stats-tabs li a em { display : block; margin : 0; font-family : var(--font-1); font-size : var(--text-sm); line-height : var(--vspace-0_5); font-weight : 400; font-style : normal; color : var(--color-text-light); } /* =================================================================== * # PROJECT-WIDE SHARED STYLES * * * ------------------------------------------------------------------- */ .wide { max-width : var(--width-wide); } .wider { max-width : var(--width-wider); } .narrow { max-width : var(--width-narrow); } .body-text-sm { font-size : calc(var(--text-size) * 0.8889); line-height : calc(0.9375 * var(--space)); } /* ------------------------------------------------------------------- * ## fade in up effect * ------------------------------------------------------------------- */ [data-animate-el] { --transition-delay : 0ms; transition-timing-function : cubic-bezier(0.28, 0.12, 0.22, 1); transition-property : opacity, visibility, transform; transition-duration : 1s; transition-delay : var(--transition-delay); opacity : 0; visibility : hidden; transform : translate(0, 150%); } .ss-animated [data-animate-el] { opacity : 1; visibility : visible; transform : translate(0, 0); } /* ------------------------------------------------------------------- * ## media classes * ------------------------------------------------------------------- */ /* floated image */ img.u-pull-right { margin : var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875); } img.u-pull-left { margin : var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0; } /* responsive video container */ .video-container { --aspect-ratio : 16/9; position : relative; height : 0; overflow : hidden; padding-bottom : calc(100%/(var(--aspect-ratio))); } .video-container iframe, .video-container object, .video-container embed, .video-container video { position : absolute; top : 0; left : 0; width : 100%; height : 100%; } /* ------------------------------------------------------------------- * ## swiper overrides * ------------------------------------------------------------------- */ .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { margin : 0 1.2rem; } .swiper-container .swiper-pagination-bullet { width : 6px; height : 6px; background : rgba(0, 0, 0, 0.3); opacity : 1; } .swiper-container .swiper-pagination-bullet-active { background : black; opacity : 1; } /* ------------------------------------------------------------------- * ## bricks masonry * ------------------------------------------------------------------- */ .bricks { --brick-padding : 4rem; padding-top : var(--vspace-5); padding-bottom : var(--vspace-3); } .bricks--half-top-padding { padding-top : var(--vspace-2_5); } #bricks { padding-bottom : 0; } #favorite-games { padding-top : 0; } #favorite-games .home-posts-title { margin-top : 0; } .bricks .masonry { max-width : 1520px; width : 92%; margin : 0 auto var(--vspace-2); overflow : hidden; } /* only the horizontal overflow (the bricks' side gutters) needs cutting — * clipping vertically too cut off the gray panel of a first-row card with * embedded expansions (.entry--with-expansions::before), which reaches up * into the wrapper's negative top margin */ @supports (overflow: clip) { .bricks .masonry { overflow-x : clip; overflow-y : visible; } } .home-posts-title { max-width : 1520px; width : 92%; margin-left : auto; margin-right : auto; margin-top : calc(var(--vspace-2) * -1); margin-bottom : var(--vspace-2_5); font-size : var(--text-xxl); text-align : center; } /* the main site's home: a multi-line heading — airier lines, closer to * the header and further from the grid below */ .home-posts-title.home-posts-title--main { margin-top : calc(var(--vspace-5) * -1); margin-bottom : var(--vspace-3_5); line-height : 1.25; font-style : italic; } /* a phone: the heading pulled up less (it overlapped the logo) and * smaller */ @media screen and (max-width: 700px) { .home-posts-title.home-posts-title--main { margin-top : calc(var(--vspace-2_5) * -1); margin-bottom : var(--vspace-1_5); font-size : 2.8rem; } } /* the line under it */ .home-posts-title__sub { display : block; margin-top : var(--vspace-0_75); font-family : var(--font-1); font-size : 1.6rem; font-style : normal; font-weight : 400; line-height : 1.5; letter-spacing : 0; color : var(--color-text-light); } /* the main domain's home: a die spinning around its axis between the title * and the posts — white pips on the color of "BLOGS" in the logo */ .home-posts-title.home-posts-title--main:has(+ .home-luck) { margin-bottom : var(--vspace-1_5); } /* "попытай удачу ↗ [die] ↙ кликни кубик": handwritten notes and arrows */ .home-luck { display : flex; align-items : center; justify-content : center; gap : .6rem; margin : 0 auto var(--vspace-3); padding : 0 1.6rem; color : var(--color-text-light); } .home-luck__note { font-family : "Caveat", cursive; font-size : 2.6rem; font-weight : 500; line-height : 1; white-space : nowrap; } /* "попытай удачу" below the die's middle, "кликни кубик" above it */ .home-luck__note--left { transform : rotate(-5deg) translateY(.6rem); } .home-luck__note--right { transform : rotate(6deg) translateY(-.4rem); } /* the arrows run up from the left note, down from the right one */ .home-luck__arrow { flex : none; width : 5rem; height : auto; } .home-luck__arrow--left { transform : translateY(.8rem) scaleY(-1); } .home-luck__arrow--right { transform : translateY(-.8rem) scaleY(-1); } .home-dice { --dice-size : 3.6rem; flex : none; display : block; width : var(--dice-size); height : var(--dice-size); margin : 0 .8rem; perspective : 60rem; cursor : pointer; } /* bigger while it rolls (ssHomeDice), back to its size when it stops */ .home-dice { transition : transform .35s cubic-bezier(.3, .7, .3, 1.3); } .home-dice.is-rolling { transform : scale(1.6); } .home-dice:focus-visible { outline : 2px solid var(--random-accent, var(--color-2)); outline-offset : .8rem; } @media screen and (max-width: 500px) { .home-luck__note { font-size : 2rem; } .home-luck__arrow { width : 3.6rem; } } .home-dice__cube { display : block; position : relative; width : 100%; height : 100%; transform-style : preserve-3d; animation : home-dice-spin 8s linear infinite; } .home-dice__face { position : absolute; inset : 0; display : grid; grid-template-columns : repeat(3, 1fr); grid-template-rows : repeat(3, 1fr); padding : 16%; border-radius : 16%; background : var(--random-accent, var(--color-2)); box-shadow : inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 1.2rem rgba(0, 0, 0, .25); } .home-dice__pip { width : 72%; height : 72%; margin : auto; border-radius : 50%; background : white; box-shadow : inset 0 .15rem .2rem rgba(0, 0, 0, .3); } .home-dice__face--1 { transform : rotateY(0deg) translateZ(calc(var(--dice-size) / 2)); } .home-dice__face--6 { transform : rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); } .home-dice__face--2 { transform : rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); } .home-dice__face--5 { transform : rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); } .home-dice__face--3 { transform : rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); } .home-dice__face--4 { transform : rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); } /* a steady turn around the vertical axis, tilted a bit to show the top * (touch screens; with a mouse the cursor turns it) */ @keyframes home-dice-spin { from { transform : rotateX(-22deg) rotateY(0deg); } to { transform : rotateX(-22deg) rotateY(360deg); } } /* turned by the mouse instead (ssHomeDice in main.js) */ .home-dice__cube.is-cursor-driven { animation : none; } @media (prefers-reduced-motion: reduce) { .home-dice__cube { animation : none; transform : rotateX(-22deg) rotateY(-30deg); } } /* the die's popup (ssHomeDice): the rolled number, its phrase, a random post */ .dice-popup { position : fixed; inset : 0; z-index : 1000; display : flex; align-items : center; justify-content : center; padding : 2rem 1.6rem; } .dice-popup[hidden] { display : none; } .dice-popup__overlay { position : absolute; inset : 0; background : rgba(0, 0, 0, .55); animation : dice-popup-fade .2s ease-out; } .dice-popup__panel { position : relative; width : 100%; max-width : 52rem; max-height : 100%; overflow-y : auto; padding : var(--vspace-1_5) var(--vspace-1_5) var(--vspace-1); border-radius : var(--border-radius); background : var(--color-body); color : var(--color-text); text-align : center; box-shadow : 0 2rem 6rem rgba(0, 0, 0, .35); animation : dice-popup-in .3s cubic-bezier(.2, .8, .3, 1.2); } .dice-popup__close { position : absolute; top : 1.2rem; right : 1.2rem; display : flex; align-items : center; justify-content : center; width : 3.6rem; height : 3.6rem; margin : 0; padding : 0; border : 0; background : none; color : var(--color-text-light); cursor : pointer; } .dice-popup__close:hover, .dice-popup__close:focus-visible { color : var(--color-text-dark); } /* the rolled number: a big figure in the die's color */ .dice-popup__number { font-family : var(--font-2); font-size : 7.2rem; font-weight : 700; line-height : 1; color : var(--random-accent, var(--color-2)); } .dice-popup__phrase { margin : var(--vspace-0_5) 0 0; font-family : "Caveat", cursive; font-size : 3.2rem; font-weight : 500; line-height : 1.15; color : var(--color-text-dark); } .dice-popup__lead { margin : var(--vspace-0_25) 0 var(--vspace-1); font-size : 1.6rem; color : var(--color-text-light); } /* the random post: its card as in the feed (render_post_card) — one * column wide: photo, title, games (no edit pencil, categories, VK link, * excerpt or date) */ .dice-popup__post { max-width : 36rem; margin : 0 auto; text-align : left; } .dice-popup__post[hidden] { display : none; } .dice-popup__post .bricks-wrapper { margin-top : 0; } .dice-popup__post .bricks-wrapper .brick { float : none; width : 100%; padding : 0; } /* the buttons closer: no bottom padding under the card's text */ .dice-popup__post .bricks-wrapper .entry__text { padding-bottom : 0; } /* beats ".bricks-wrapper .entry__date" etc. */ .dice-popup__post .bricks-wrapper .entry__edit-trigger, .dice-popup__post .bricks-wrapper .entry__meta, .dice-popup__post .bricks-wrapper .entry__excerpt, .dice-popup__post .bricks-wrapper .entry__date { display : none; } .dice-popup__actions { display : flex; flex-wrap : wrap; justify-content : center; gap : 1.2rem; margin-top : var(--vspace-0_5); } .dice-popup__actions .btn { margin : 0; } body.dice-popup-is-open { overflow : hidden; } @keyframes dice-popup-fade { from { opacity : 0; } } @keyframes dice-popup-in { from { opacity : 0; transform : translateY(2rem) scale(.96); } } @media (prefers-reduced-motion: reduce) { .dice-popup__overlay, .dice-popup__panel { animation : none; } } /* "Данные от DICEFEST" on a game page: the dice popup's frame, a list of * facts and episodes inside */ .dicefest-popup .dice-popup__panel { text-align : left; } .dicefest-popup__title { margin : 0 4rem 0 0; font-size : var(--text-lg); line-height : 1.2; } /* the logo in the title: a bit taller than the title's capitals */ .dicefest-popup__title .dicefest-logo { height : .9em; vertical-align : -.05em; } .dicefest-popup__game { margin : var(--vspace-0_25) 0 0; font-size : 1.5rem; color : var(--color-text-light); } .dicefest-popup__heading { margin : var(--vspace-1) 0 var(--vspace-0_5); padding-top : var(--vspace-0_75); border-top : 1px solid var(--color-border); font-family : var(--font-1); font-size : 1.2rem; font-weight : 600; letter-spacing : .15em; text-transform : uppercase; color : var(--color-text-light); } .dicefest-popup__facts { display : grid; grid-template-columns : auto 1fr; gap : .6rem 1.6rem; margin : 0; font-size : 1.5rem; line-height : 1.5; } .dicefest-popup__facts dt { margin : 0; font-weight : 400; color : var(--color-text-light); } .dicefest-popup__facts dd { margin : 0; color : var(--color-text-dark); } .dicefest-popup__more { display : inline-block; margin-top : var(--vspace-0_5); font-size : 1.5rem; } .dicefest-popup__episodes { margin : 0; padding : 0; list-style : none; font-size : 1.5rem; line-height : 1.5; } .dicefest-popup__episodes li { margin : 0 0 .8rem; padding-left : 0; } /* an episode: a framed row, a link as a whole (with the time) */ .dicefest-popup__episode { display : flex; align-items : baseline; justify-content : space-between; gap : 1.6rem; padding : 1rem 1.4rem; border : 1px solid var(--color-border); border-radius : var(--border-radius); color : var(--color-text-dark); transition : border-color .2s, color .2s; } a.dicefest-popup__episode:hover, a.dicefest-popup__episode:focus-visible { border-color : var(--color-text-dark); color : var(--color-text-dark); } .dicefest-popup__time { color : var(--color-text-light); white-space : nowrap; } .dicefest-popup__source { margin : var(--vspace-1) 0 0; font-size : 1.3rem; color : var(--color-text-light); } /* "Картинка месяца" (the calendar): the dice popup's frame, wider, with * the generated picture */ .month-image-popup .dice-popup__panel { max-width : 64rem; } /* centered: the same room on both sides (the close button is on the right) */ .month-image-popup__title { margin : 0 4rem var(--vspace-0_75); font-size : var(--text-lg); line-height : 1.2; } /* the pattern switcher under the picture: small previews in a row, the * chosen one framed; the random one — the arrows icon in the middle, "без * узора" — a crossed-out circle */ .month-image-popup .month-image-popup__patterns { gap : .8rem; margin : var(--vspace-0_75) 0 0; } .month-image-popup__patterns li { margin : 0; } .month-image-popup .month-image-popup__swatch { display : flex; align-items : center; justify-content : center; width : 4rem; height : 4rem; padding : 0; overflow : hidden; border : 1px solid var(--color-border); border-radius : var(--border-radius); color : var(--color-text-dark); transition : border-color .2s; } .month-image-popup__swatch canvas { display : block; width : 100%; height : 100%; } .month-image-popup .month-image-popup__swatch:hover, .month-image-popup .month-image-popup__swatch:focus-visible { border-color : var(--color-text-light); } .month-image-popup__patterns .is-active .month-image-popup__swatch { border : 2px solid var(--color-text-dark); } .month-image-popup__random svg { transition : transform .4s; } .month-image-popup__random:hover svg, .month-image-popup__random:focus-visible svg { transform : rotate(90deg); } .month-image-popup__status { margin : 0 0 var(--vspace-0_75); font-size : 1.5rem; color : var(--color-text-light); } /* a gray frame: the picture's background is the site's, as is the popup's */ .month-image-popup__image { display : block; width : 100%; height : auto; margin : 0; border : 1px solid var(--color-gray-6, #888); border-radius : var(--border-radius); } .month-image-popup__credit { margin : var(--vspace-0_5) 0 0; font-size : 1.2rem; line-height : 1.5; color : var(--color-text-light); } .month-image-popup__credit a { color : inherit; text-decoration : underline; } .month-image-popup__credit[hidden], .month-image-popup__status[hidden], .month-image-popup__image[hidden], .month-image-popup .btn[hidden] { display : none; } /* rating (/rating/): numbered list of owned games by priority */ .rating-list { max-width : 900px; margin : 0 auto var(--vspace-3); padding : 0; list-style : none; } .rating-list__item { display : flex; flex-wrap : wrap; align-items : center; gap : 2.4rem; margin : 0; padding : var(--vspace-0_75) 0; } /* "Мой комментарий" under a rating row: a small pull-quote on its own line, * lined up with the title (place column + gap + thumb + gap) */ .rating-list__comment.pull-quote { flex : 0 0 100%; margin : calc(var(--vspace-0_25) - 2.4rem) 0 0; padding-left : calc(6.4rem + 2.4rem + 72px + 2rem); text-align : left; } .rating-list__comment.pull-quote blockquote { max-width : none; margin : 0; padding : 0 0 0 3.6rem; } .rating-list__comment.pull-quote blockquote:before { top : 0.1em; left : 0; width : 2.4rem; height : 2.4rem; transform : none; background : var(--color-text-dark); -webkit-mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; } .rating-list__comment.pull-quote blockquote p { margin-bottom : var(--vspace-0_25); /* mid gray in both themes (the gray-N tokens flip between themes, so a * single token would be near-white in the dark one) */ color : #8a9094; font-size : 1.6rem; font-style : italic; line-height : 1.6; } .rating-list__comment.pull-quote blockquote p:last-child { margin-bottom : 0; } @media screen and (max-width: 600px) { .rating-list__comment.pull-quote { padding-left : calc(3.6rem + 1.2rem); margin-top : calc(var(--vspace-0_25) - 1.2rem); } } /* the podium (places 1–3) is set apart from the rest of the top 10 */ .rating-list--podium .rating-list__item:nth-child(3) { margin-bottom : var(--vspace-1_5); } .rating-list__place { flex-shrink : 0; width : 6.4rem; font-family : var(--font-2); font-size : var(--text-xl); line-height : 1; /* centered, so every number (and the wreath around 1) shares one axis */ text-align : center; /* lining figures: Merriweather's default old-style digits (3, 4, 5, 7, 9) * drop below the baseline and look misaligned in a column */ font-variant-numeric: lining-nums tabular-nums; color : var(--color-gray-15); /* center the digits themselves (cap height → baseline), not the line * box with its empty descender space, against the row */ text-box : trim-both cap alphabetic; } /* podium places (1–3) get their own color below, by place number — so it * also works for an excerpt of the list (game page) */ /* 1st place: laurel wreath around the number (inline svg, currentColor = gold) */ .rating-list__place--first { position : relative; text-align : center; } .rating-list__place--first .rating-laurel { position : absolute; top : 50%; left : 50%; width : 8.4rem; height : 8.4rem; max-width : none; margin : 0; transform : translate(-50%, -50%); pointer-events : none; } /* podium: places 1–3 (/rating/, the home page, the game page) in gold / silver / bronze, * each a step smaller than the one before */ .rating-list__place.rating-list__place--first { font-size : 5.6rem; font-weight : 700; color : #d4af37; } .rating-list__place.rating-list__place--second { font-size : 4.8rem; font-weight : 700; color : #a9adb3; } .rating-list__place.rating-list__place--third { font-size : 4.2rem; font-weight : 700; color : #cd7f32; } /* custom links (rating list, "Не играно", embedded expansions) keep their * text color on hover — the global a:hover would tint them with --color-2; * like the card titles they only fade (opacity on the title) */ .rating-list__link:hover, .rating-list__link:focus, .rating-excluded__list a:hover, .rating-excluded__list a:focus, .bricks-wrapper .entry__expansion-link:hover, .bricks-wrapper .entry__expansion-link:focus { color : inherit; } .rating-excluded__list a { transition : opacity 0.2s ease-in-out; } @media (hover: hover) { .rating-excluded__list a:hover { opacity : 0.8; } } /* rating (admin): drag handle at the row's end + drag states (ssRatingDrag) */ .rating-list__handle { flex-shrink : 0; display : flex; align-items : center; justify-content : center; width : 4rem; height : 4rem; margin : 0; padding : 0; border : none; background : none; color : var(--color-gray-13); cursor : grab; touch-action: none; transition : color .2s; } .rating-list__handle:hover, .rating-list__handle:focus-visible { background : none; color : var(--color-text-dark); } .rating-list__item.is-drag-chosen .rating-list__handle { cursor : grabbing; } .rating-list__item.is-drag-ghost { opacity : .35; } .rating-list.is-saving { opacity : .7; transition : opacity .2s; } .rating-list__link { display : flex; flex : 1; align-items : center; gap : 2rem; min-width : 0; color : inherit; } .rating-list__thumb { flex-shrink : 0; width : 72px; height : 72px; margin : 0; object-fit : cover; border-radius : 4px; } .rating-list__thumb--empty { display : block; background-color : var(--color-gray-2); } .rating-list__text { display : flex; flex-direction : column; min-width : 0; } .rating-list__title { font-family : var(--font-2); font-size : var(--text-md); line-height : 1.3; letter-spacing : -0.02em; transition : opacity 0.2s ease-in-out; } /* favorite mark after a game's name (rating list + comparison panel) */ .rating-heart { display : inline-block; margin-left : 0.3em; color : #e0245e; line-height : 1; vertical-align : 0.05em; } .rating-heart svg { display : block; width : 0.7em; height : 0.7em; } .rating-list__title-en { font-family : var(--font-1); font-size : 1.3rem; color : var(--color-gray-13); } @media (hover: hover) { .rating-list__link:hover .rating-list__title { opacity : 0.8; } } @media screen and (max-width: 600px) { .rating-list__item { gap : 1.2rem; } .rating-list__place { width : 3.6rem; font-size : var(--text-lg); } .rating-list__place.rating-list__place--first { font-size : 3.6rem; } .rating-list__place--first .rating-laurel { width : 5.6rem; height : 5.6rem; } .rating-list__place.rating-list__place--second { font-size : 3.2rem; } .rating-list__place.rating-list__place--third { font-size : 2.8rem; } .rating-list__thumb { width : 56px; height : 56px; } } /* rating: pairwise comparison drawer */ .rating-compare__progress { margin-bottom : var(--vspace-1); } .rating-compare__progress-bar { height : 4px; border-radius : 2px; background-color : var(--color-gray-2); overflow : hidden; } .rating-compare__progress-bar span { display : block; width : 0; height : 100%; background-color : var(--color-1, #333); transition : width 0.3s ease-in-out; } .rating-compare__progress-text { margin : var(--vspace-0_375) 0 0; font-size : 1.3rem; color : var(--color-gray-15); } .rating-compare__pair { display : grid; grid-template-columns : 1fr 1fr; gap : 2.4rem; } .rating-compare__pair[hidden] { display : none; } .rating-compare .rating-compare__option { display : flex; flex-direction : column; align-items : stretch; gap : 1.6rem; height : auto; margin : 0; padding : 1.6rem; border : 1px solid var(--color-border); border-radius : 6px; background-color : transparent; color : inherit; font : inherit; line-height : 1.3; letter-spacing : normal; text-transform : none; text-align : center; white-space : normal; cursor : pointer; transition : border-color 0.2s ease-in-out, transform 0.2s ease-in-out; } .rating-compare .rating-compare__option:focus, .rating-compare .rating-compare__option:hover { background-color : transparent; color : inherit; border-color : var(--color-1, #333); } @media (hover: hover) { .rating-compare .rating-compare__option:hover { transform : translateY(-2px); } } .rating-compare__cover { display : block; aspect-ratio : 1 / 1; border-radius : 4px; background-color : var(--color-gray-2); overflow : hidden; } .rating-compare__cover img { display : block; width : 100%; height : 100%; margin : 0; object-fit : contain; } .rating-compare__name { font-family : var(--font-2); font-size : var(--text-md); letter-spacing : -0.02em; } .rating-compare__side { display : flex; flex-direction : column; gap : 0.8rem; } .rating-compare .rating-compare__exclude { height : auto; margin : 0; padding : 0.6rem; border : none; background-color : transparent; color : var(--color-gray-15); font-family : var(--font-1); font-size : 1.3rem; font-weight : 400; line-height : 1.4; letter-spacing : normal; text-transform : none; text-decoration : underline; cursor : pointer; } .rating-compare .rating-compare__exclude:focus, .rating-compare .rating-compare__exclude:hover { background-color : transparent; color : inherit; } /* games left out of the rating ("ещё не играл", priority = 0) */ .rating-excluded { max-width : 900px; margin : 0 auto var(--vspace-3); } /* section titles on /rating/: ТОП-10, Остальные места, Не играно */ .rating-section__title { max-width : 900px; margin : 0 auto var(--vspace-1); font-size : var(--text-lg); text-align : center; } .rating-excluded .rating-section__title { max-width : none; } /* the first section (ТОП-10) is the larger one, with extra space below * the page title */ .ss-rating .column > .rating-section__title:first-child { margin-top : var(--vspace-1_5); font-size : var(--text-xxl); } .rating-excluded__list { margin : 0; padding : 0; list-style : none; } .rating-excluded__list li { display : flex; align-items : center; justify-content : space-between; gap : 1.6rem; margin : 0; padding : var(--vspace-0_25) 0; border-bottom : 1px solid var(--color-border); } .rating-excluded__list a { color : inherit; } .rating-excluded .rating-excluded__return { height : auto; margin : 0; padding : 0.4rem 1.2rem; border : 1px solid var(--color-border); border-radius : 4px; background-color : transparent; color : inherit; font-family : var(--font-1); font-size : 1.2rem; line-height : 1.6; letter-spacing : normal; text-transform : none; } .rating-compare__done { padding : var(--vspace-2) 0; text-align : center; } .rating-compare__actions { display : flex; flex-wrap : wrap; gap : 1.2rem; margin-top : var(--vspace-1_5); } .rating-compare__actions .btn--stroke { margin-bottom : 0; } @media screen and (max-width: 600px) { .rating-compare__pair { gap : 1.2rem; } .rating-compare .rating-compare__option { padding : 0.8rem; } .rating-compare__name { font-size : 1.6rem; } } /* search results (/search/) reuse the home block titles */ #search-games .home-posts-title, #search-posts .home-posts-title { margin-top : 0; } /* after the games block the posts block drops its top padding; right * under the search form (no games found) it keeps the regular .bricks * padding, otherwise its title runs into the form */ #search-games + #search-posts { padding-top : 0; } /* always-visible search form under the /search/ page title */ .search-page-form { display : flex; gap : 1.2rem; max-width : 640px; margin : var(--vspace-1) auto 0; } .search-page-form input.search-page-form__field { flex : 1; min-width : 0; height : 6rem; margin-bottom : 0; } .search-page-form .search-page-form__submit { flex-shrink : 0; height : 6rem; line-height : 6rem; margin-bottom : 0; } .search-count { margin-left : .2em; font-size : .45em; font-weight : 400; opacity : .55; } .search-empty { padding-top : var(--vspace-1_5); padding-bottom : var(--vspace-3); text-align : center; } /* home "Мои любимые настолочки": Список / ТОП-10 submenu under the title */ #favorite-games .home-posts-title:has(+ .home-favorites-tabs) { margin-bottom : var(--vspace-1); } /* same gap as under a plain .home-posts-title: the grid below pulls itself * up by --brick-padding (.bricks-wrapper's negative top margin); the id * keeps it above .collection-filter's margin: 0, declared further down */ #favorite-games .home-favorites-tabs { margin-bottom : var(--vspace-2_5); } [data-home-panel][hidden] { display : none; } .home-top10 { width : 92%; max-width : 900px; margin : 0 auto var(--vspace-2); } .home-top10 .rating-list { margin-bottom : 0; } .home-favorites-cta, .home-posts-cta { margin-top : var(--vspace-1); text-align : center; } .bricks .pagination { margin-top : var(--vspace-2); } .load-more-row { text-align : center; } .load-more-btn[disabled] { opacity : 0.5; cursor : default; pointer-events : none; } .bricks-wrapper { position : relative; margin-top : calc(var(--brick-padding) * -1); } .bricks-wrapper .grid-sizer, .bricks-wrapper .brick { width : 33.3333%; } .ss-collection .bricks-wrapper .grid-sizer, .ss-collection .bricks-wrapper .brick, #calendar-games-month .bricks-wrapper .grid-sizer, #calendar-games-month .bricks-wrapper .brick, #favorite-games .bricks-wrapper .grid-sizer, #favorite-games .bricks-wrapper .brick, #search-games .bricks-wrapper .grid-sizer, #search-games .bricks-wrapper .brick { width : 20%; } .ss-collection .bricks-wrapper .brick.entry--large, .ss-collection .bricks-wrapper .brick.entry--split, #favorite-games .bricks-wrapper .brick.entry--large, #search-games .bricks-wrapper .brick.entry--large { width : 40%; } /* L size (games.is_large = 2): three columns */ .ss-collection .bricks-wrapper .brick.entry--xl, #favorite-games .bricks-wrapper .brick.entry--xl, #search-games .bricks-wrapper .brick.entry--xl { width : 60%; } /* XL / XXL sizes (games.is_large = 3 / 4): four / five columns */ .ss-collection .bricks-wrapper .brick.entry--cols-4, #favorite-games .bricks-wrapper .brick.entry--cols-4, #search-games .bricks-wrapper .brick.entry--cols-4 { width : 80%; } .ss-collection .bricks-wrapper .brick.entry--cols-5, #favorite-games .bricks-wrapper .brick.entry--cols-5, #search-games .bricks-wrapper .brick.entry--cols-5 { width : 100%; } /* this section never doubles a card's width for is_large games — no .entry--large override here, so it just keeps the regular .brick width */ .ss-game-detail .bricks-wrapper .grid-sizer, .ss-game-detail .bricks-wrapper .brick { width : 100%; } .ss-game-detail .game-detail__posts .bricks-wrapper .grid-sizer, .ss-game-detail .game-detail__posts .bricks-wrapper .brick { width : 33.3333%; } /* post card sizes (posts.size): M = 2 columns, L = 3 (the full row) */ .bricks-wrapper[data-grid="posts"] .brick.entry.entry--post-m { width : 66.6666%; } .bricks-wrapper[data-grid="posts"] .brick.entry.entry--post-l { width : 100%; } .bricks-wrapper .brick { float : left; padding : var(--brick-padding) var(--brick-padding) 0; } /* ------------------------------------------------------------------- * ## masonry entries * ------------------------------------------------------------------- */ .bricks-wrapper .entry__thumb { overflow : hidden; position : relative; border-radius : var(--border-radius); } .bricks-wrapper .entry__thumb img { display : block; width : 100%; height : auto; vertical-align : bottom; transition : all 0.3s ease-in-out; margin : 0; } .entry__thumb--empty { aspect-ratio : 1 / 1; background-color : var(--color-gray-4); } /* a post card without photos but with a VK video: the player as the cover, * 4:3 — the shape of VK's preview pictures (a 16:9 video gets them with * black bands baked in), so the preview fills the card without side bars */ .entry__thumb .video-container.entry__thumb-video { --aspect-ratio : 4/3; margin-bottom : 0; } /* the transparent link over the player: a click opens the post instead of * starting the video (the edit pencil, z-index 2, stays above it) */ .entry__thumb-video .entry__thumb-video-link { z-index : 1; position : absolute; inset : 0; } .entry__thumb-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 1px; transition : transform 0.3s ease-in-out; } .entry__thumb-grid--cols-2 { grid-template-columns : repeat(2, 1fr); } .entry__thumb-grid-item { aspect-ratio : 1 / 1; background-size : cover; background-position : center; background-repeat : no-repeat; } @media (hover: hover) { .bricks-wrapper .entry__thumb:hover .entry__thumb-grid { transform : scale(1.05); } } .bricks-wrapper .entry__thumb .thumb-link::before { z-index : 1; content : ""; display : block; background : rgba(0, 0, 0, 0.5); opacity : 0; visibility : hidden; width : 100%; height : 100%; transition : all 0.3s ease-in-out; position : absolute; top : 0; left : 0; } .bricks-wrapper .entry__thumb .thumb-link::after { z-index : 1; display : block; content : "..."; font-family : georgia, serif; font-size : 2.4rem; height : 90px; width : 90px; letter-spacing : .2rem; line-height : 90px; margin-left : -45px; margin-top : -55px; text-align : center; color : white; opacity : 0; visibility : hidden; transform : scale(0.5); transition : all 0.3s ease-in-out; position : absolute; left : 50%; top : 50%; } @media (hover: hover) { .bricks-wrapper .entry__thumb:hover .thumb-link::before { opacity : 1; visibility : visible; } .bricks-wrapper .entry__thumb:hover .thumb-link::after { opacity : 1; visibility : visible; transform : scale(1); } .bricks-wrapper .entry__thumb:hover .thumb-link img { transform : scale(1.05); } } .bricks-wrapper .entry__text { padding : var(--vspace-1) 0 calc(var(--vspace-1) + 2px); } .bricks-wrapper .entry__header { margin : 0; text-align : left; } /* a base game card that holds embedded expansions gets a soft gray panel * behind it (drawn by ::before so the brick's gutter padding stays clear) */ .bricks-wrapper .entry--with-expansions { position : relative; isolation : isolate; } .bricks-wrapper .entry--with-expansions::before { content : ""; position : absolute; z-index : -1; top : calc(var(--brick-padding) - 1.6rem); left : calc(var(--brick-padding) - 1.6rem); right : calc(var(--brick-padding) - 1.6rem); bottom : 0; border-radius : var(--border-radius); background-color : var(--color-gray-2); } /* dark theme: same tone as the footer (.s-footer) */ [data-theme="dark"] .bricks-wrapper .entry--with-expansions::before { background-color : var(--color-gray-1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bricks-wrapper .entry--with-expansions::before { background-color : var(--color-gray-1); } } /* expansions embedded in their base game's card (collection list) — * a compact row per expansion below the game's info */ .bricks-wrapper .entry__expansions { display : flex; flex-direction : column; gap : var(--vspace-0_375); margin-top : calc(var(--vspace-0_5) * -1); padding-bottom : calc(var(--vspace-1) + 2px); } .bricks-wrapper .entry__expansion { position : relative; display : flex; align-items : center; gap : 1.2rem; } .bricks-wrapper .entry__expansion-link { display : flex; flex : 1; align-items : center; gap : 1.2rem; min-width : 0; color : inherit; } /* admin edit button of an embedded expansion — sits at the row's end */ .entry__edit-trigger.entry__edit-trigger--expansion { position : static; flex-shrink : 0; width : 28px; height : 28px; } .bricks-wrapper .entry__expansion-thumb { flex-shrink : 0; width : var(--expansion-thumb, 100px); height : var(--expansion-thumb, 100px); margin : 0; object-fit : cover; border-radius : 4px; } .bricks-wrapper .entry__expansion-text { display : flex; flex-direction : column; gap : var(--vspace-0_25); min-width : 0; } .bricks-wrapper .entry__expansion-label { font-family : var(--font-1); font-size : 1.1rem; font-weight : 300; text-transform : uppercase; letter-spacing : .1em; line-height : 1.455; color : var(--color-gray-15); } /* narrow (non-"Большой") cards: stack the text under the thumbnail — * side by side it squeezes the title into a one-word-per-line column; * the edit button moves onto the thumbnail's top-right corner */ .bricks-wrapper .entry:not(.entry--large) .entry__expansion-link { flex-direction : column; align-items : flex-start; /* more air between the stacked thumbnail and its label */ gap : 2.4rem; } .bricks-wrapper .entry:not(.entry--large) .entry__edit-trigger--expansion { position : absolute; top : 6px; left : calc(var(--expansion-thumb, 100px) - 34px); right : auto; } /* single-size card with embedded expansions: widened to double width * (.entry--split shares the .entry--large widths above) — the game keeps * its regular single-card column on the left, expansions go on the right */ .bricks-wrapper .entry--split { --expansion-thumb : 100px; display : grid; grid-template-columns : 1fr 1fr; grid-template-rows : auto 1fr; column-gap : calc(var(--brick-padding) * 2); } .bricks-wrapper .entry--split > .entry__thumb { grid-column : 1; grid-row : 1; } .bricks-wrapper .entry--split > .entry__text { grid-column : 1; grid-row : 2; } .bricks-wrapper .entry--split > .entry__expansions { grid-column : 2; grid-row : 1 / span 2; align-self : start; gap : var(--vspace-1); margin-top : 0; } @media screen and (max-width: 480px) { .bricks-wrapper .entry--split { display : block; } .bricks-wrapper .entry--split > .entry__expansions { margin-top : calc(var(--vspace-0_5) * -1); } } /* same type as the base game's .entry__title, just smaller */ .bricks-wrapper .entry__expansion-title { font-family : var(--font-2); font-size : 1.6rem; font-weight : 400; line-height : 1.4; letter-spacing : -0.02em; transition : opacity 0.2s ease-in-out; } @media (hover: hover) { .bricks-wrapper .entry__expansion-link:hover .entry__expansion-title { opacity : 0.8; } } .bricks-wrapper .entry__title { font-size : var(--text-md); font-weight : 400; line-height : calc(var(--vspace-1) + var(--vspace-0_125)); letter-spacing : -0.02em; margin-top : 0; margin-bottom : var(--vspace-0_875); } .bricks-wrapper .entry__date { display : block; font-family : var(--font-1); font-size : 1.3rem; color : var(--color-gray-13); margin-top : var(--vspace-0_5); margin-bottom : var(--vspace-0_875); } /* ".entry__games" is also used, unrelated, on the post detail page for a * bordered "games used in this post" section (see below) — that rule's * padding-top/border-top still apply here since this one never touches * those properties itself, so cancel them explicitly */ .bricks-wrapper .entry__games { display : block; font-size : 1.3rem; color : var(--color-gray-13); margin : 0; padding-top : 0; border-top : none; white-space : nowrap; overflow : hidden; text-overflow : ellipsis; } /* the title's own margin-bottom is what leaves a gap here, not anything on * .entry__games itself — drop it only when a games line actually follows */ .bricks-wrapper .entry__header:has(+ .entry__games) .entry__title { margin-bottom : 0; } .bricks-wrapper .entry__title-en { display : block; font-family : var(--font-1); font-size : 1.3rem; color : var(--color-gray-13); margin-top : calc(var(--vspace-0_875) * -1); margin-bottom : var(--vspace-0_875); } /* game cards: long names wrap onto several lines — tighter lines for the * name and the original name under it */ .bricks-wrapper .entry__header:has(.entry__meta--game) .entry__title { line-height : 1.25; } .bricks-wrapper .entry__header:has(.entry__meta--game) .entry__title { margin-bottom : var(--vspace-0_25); } .bricks-wrapper .entry__title-en { margin-top : 0; line-height : 1.4; } .bricks-wrapper .entry__suggest { margin-top : var(--vspace-0_5); } .bricks-wrapper .entry__suggest-btn { height : auto; line-height : 1.4; padding : 1.2rem 2.4rem; letter-spacing : .25em; margin : 0; } .bricks-wrapper .entry__title a, .bricks-wrapper .entry__title a:visited { color : black; } .bricks-wrapper .entry__title a:focus, .bricks-wrapper .entry__title a:hover { color : rgba(0, 0, 0, 0.8); } /* post and game card titles (shared by both via .bricks-wrapper) are * literal black above — force them white in dark mode */ [data-theme="dark"] .bricks-wrapper .entry__title a, [data-theme="dark"] .bricks-wrapper .entry__title a:visited { color : white; } [data-theme="dark"] .bricks-wrapper .entry__title a:focus, [data-theme="dark"] .bricks-wrapper .entry__title a:hover { color : rgba(255, 255, 255, 0.8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bricks-wrapper .entry__title a, :root:not([data-theme="light"]) .bricks-wrapper .entry__title a:visited { color : white; } :root:not([data-theme="light"]) .bricks-wrapper .entry__title a:focus, :root:not([data-theme="light"]) .bricks-wrapper .entry__title a:hover { color : rgba(255, 255, 255, 0.8); } } .bricks-wrapper .entry__meta { display : block; font-family : var(--font-1); font-weight : 400; font-size : 1.1rem; text-transform : uppercase; letter-spacing : .1em; line-height : 1.455; color : black; margin-bottom : var(--vspace-0_375); } /* the "vk:" prefix (plain text in .byline, not a link) inherits this * literal black */ [data-theme="dark"] .bricks-wrapper .entry__meta { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bricks-wrapper .entry__meta { color : white; } } .bricks-wrapper .entry__meta a { font-weight : 300; color : var(--color-gray-15); } .bricks-wrapper .entry__meta a:focus, .bricks-wrapper .entry__meta a:hover { color : black; } [data-theme="dark"] .bricks-wrapper .entry__meta a:focus, [data-theme="dark"] .bricks-wrapper .entry__meta a:hover { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bricks-wrapper .entry__meta a:focus, :root:not([data-theme="light"]) .bricks-wrapper .entry__meta a:hover { color : white; } } .bricks-wrapper .entry__meta .cat-links, .bricks-wrapper .entry__meta .byline { display : inline-block; } .bricks-wrapper .entry__meta .cat-links { margin-right : .8rem; } .bricks-wrapper .entry__meta .cat-links a::after { content : ", "; } .bricks-wrapper .entry__meta .cat-links a:last-child::after { display : none; } /* the post page: a plain label after the categories ("Обзор, Видео") */ .entry__meta .cat-links__tag { color : var(--color-text-light); } /* plain (non-link) label after the category, e.g. "Владею, Дополнение" — * the link before it keeps its ", " separator since it's no longer last */ .bricks-wrapper .entry__meta .cat-links__tag { font-weight : 300; color : var(--color-gray-15); } /* several labels in a row ("Дополнение, PnP"; the catalog cards have no * category link before them) */ .entry__meta .cat-links__tag + .cat-links__tag::before { content : ", "; } .bricks-wrapper .entry__meta--game { display : flex; align-items : center; justify-content : space-between; } .bricks-wrapper .entry__favorite { display : inline-flex; align-items : center; justify-content : center; flex-shrink : 0; height : 20px; margin-bottom : 0; padding : 0; border : none; background : none; color : var(--color-gray-13); cursor : pointer; } .bricks-wrapper button.entry__favorite:focus, .bricks-wrapper button.entry__favorite:hover { background-color : transparent; border-color : transparent; } .bricks-wrapper .entry__favorite svg { transition : fill 0.15s ease-in-out; } .bricks-wrapper .entry__favorite.is-favorite { color : #e0245e; } .bricks-wrapper .entry__excerpt { font-weight : 400; font-size : 1.5rem; line-height : 1.733; } .bricks-wrapper .entry__excerpt p { margin-bottom : var(--vspace-0_25); } .bricks-wrapper .entry__more-link { display : inline-block; font-size : 1.1rem; text-transform : uppercase; letter-spacing : .15em; color : black; border-bottom : 1px solid transparent; } .bricks-wrapper .entry__more-link:focus, .bricks-wrapper .entry__more-link:hover { border-bottom : 1px solid black; } /* ------------------------------------------------------------------- * responsive: * project-wide and shared styles * ------------------------------------------------------------------- */ @media screen and (max-width: 1600px) { .bricks { --brick-padding : 2.8rem; } } @media screen and (max-width: 1500px) { .bricks { --brick-padding : 4rem; } .bricks .masonry { max-width : 1280px; } .bricks-wrapper .grid-sizer, .bricks-wrapper .brick { width : 33.3333%; } .ss-collection .bricks-wrapper .grid-sizer, .ss-collection .bricks-wrapper .brick, #calendar-games-month .bricks-wrapper .grid-sizer, #calendar-games-month .bricks-wrapper .brick, #favorite-games .bricks-wrapper .grid-sizer, #favorite-games .bricks-wrapper .brick, #search-games .bricks-wrapper .grid-sizer, #search-games .bricks-wrapper .brick { width : 25%; } .ss-collection .bricks-wrapper .brick.entry--large, .ss-collection .bricks-wrapper .brick.entry--split, #favorite-games .bricks-wrapper .brick.entry--large, #search-games .bricks-wrapper .brick.entry--large { width : 50%; } .ss-collection .bricks-wrapper .brick.entry--xl, #favorite-games .bricks-wrapper .brick.entry--xl, #search-games .bricks-wrapper .brick.entry--xl { width : 75%; } .ss-collection .bricks-wrapper .brick.entry--cols-4, #favorite-games .bricks-wrapper .brick.entry--cols-4, #search-games .bricks-wrapper .brick.entry--cols-4 { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-5, #favorite-games .bricks-wrapper .brick.entry--cols-5, #search-games .bricks-wrapper .brick.entry--cols-5 { width : 100%; } } @media screen and (max-width: 1200px) { .bricks { --brick-padding : 2.8rem; } } @media screen and (max-width: 1080px) { .bricks { --brick-padding : 4rem; } /* two columns (or one) here: M / L post cards take the whole row */ .bricks-wrapper[data-grid="posts"] .brick.entry.entry--post-m, .bricks-wrapper[data-grid="posts"] .brick.entry.entry--post-l { width : 100%; } .bricks-wrapper .grid-sizer, .bricks-wrapper .brick { width : 50%; } .ss-collection .bricks-wrapper .grid-sizer, .ss-collection .bricks-wrapper .brick, #calendar-games-month .bricks-wrapper .grid-sizer, #calendar-games-month .bricks-wrapper .brick, #favorite-games .bricks-wrapper .grid-sizer, #favorite-games .bricks-wrapper .brick, #search-games .bricks-wrapper .grid-sizer, #search-games .bricks-wrapper .brick { width : 33.3333%; } .ss-collection .bricks-wrapper .brick.entry--large, .ss-collection .bricks-wrapper .brick.entry--split, #favorite-games .bricks-wrapper .brick.entry--large, #search-games .bricks-wrapper .brick.entry--large { width : 66.6666%; } .ss-collection .bricks-wrapper .brick.entry--xl, #favorite-games .bricks-wrapper .brick.entry--xl, #search-games .bricks-wrapper .brick.entry--xl { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-4, #favorite-games .bricks-wrapper .brick.entry--cols-4, #search-games .bricks-wrapper .brick.entry--cols-4 { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-5, #favorite-games .bricks-wrapper .brick.entry--cols-5, #search-games .bricks-wrapper .brick.entry--cols-5 { width : 100%; } .ss-post-detail .entry__games .bricks-wrapper .grid-sizer, .ss-post-detail .entry__games .bricks-wrapper .brick { width : 33.3333%; } } @media screen and (max-width: 1024px) { .ss-game-detail .game-detail__posts .bricks-wrapper .grid-sizer, .ss-game-detail .game-detail__posts .bricks-wrapper .brick { width : 50%; } } @media screen and (max-width: 900px) { .bricks { --brick-padding : 2.8rem; } } @media screen and (max-width: 800px) { .bricks { --brick-padding : 2.4rem; } .game-detail__card-col .entry__thumb { width : 100vw; margin-left: 50%; transform : translateX(-50%); } } @media screen and (max-width: 700px) { .bricks { --brick-padding : 2rem; padding-top : var(--vspace-1_5); padding-bottom : var(--vspace-1); } .home-posts-title { margin-top : 0; } .bricks .masonry { max-width : 500px; } .bricks-wrapper .grid-sizer, .bricks-wrapper .brick { width : 100%; } .ss-collection .bricks-wrapper .grid-sizer, .ss-collection .bricks-wrapper .brick, #calendar-games-month .bricks-wrapper .grid-sizer, #calendar-games-month .bricks-wrapper .brick, #favorite-games .bricks-wrapper .grid-sizer, #favorite-games .bricks-wrapper .brick, #search-games .bricks-wrapper .grid-sizer, #search-games .bricks-wrapper .brick { width : 50%; } .ss-collection .bricks-wrapper .brick.entry--large, .ss-collection .bricks-wrapper .brick.entry--split, #favorite-games .bricks-wrapper .brick.entry--large, #search-games .bricks-wrapper .brick.entry--large { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--xl, #favorite-games .bricks-wrapper .brick.entry--xl, #search-games .bricks-wrapper .brick.entry--xl { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-4, #favorite-games .bricks-wrapper .brick.entry--cols-4, #search-games .bricks-wrapper .brick.entry--cols-4 { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-5, #favorite-games .bricks-wrapper .brick.entry--cols-5, #search-games .bricks-wrapper .brick.entry--cols-5 { width : 100%; } .ss-post-detail .entry__games .bricks-wrapper .grid-sizer, .ss-post-detail .entry__games .bricks-wrapper .brick { width : 50%; } .ss-game-detail .game-detail__posts .bricks-wrapper .grid-sizer, .ss-game-detail .game-detail__posts .bricks-wrapper .brick { width : 50%; } } @media screen and (max-width: 600px) { .ss-game-detail .game-detail__posts .bricks-wrapper .grid-sizer, .ss-game-detail .game-detail__posts .bricks-wrapper .brick { width : 100%; } .ss-post-detail .entry__games .bricks-wrapper .grid-sizer, .ss-post-detail .entry__games .bricks-wrapper .brick { width : 100%; } } @media screen and (max-width: 480px) { .ss-collection .bricks-wrapper .grid-sizer, .ss-collection .bricks-wrapper .brick, #calendar-games-month .bricks-wrapper .grid-sizer, #calendar-games-month .bricks-wrapper .brick, #favorite-games .bricks-wrapper .grid-sizer, #favorite-games .bricks-wrapper .brick, #search-games .bricks-wrapper .grid-sizer, #search-games .bricks-wrapper .brick { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--large, .ss-collection .bricks-wrapper .brick.entry--split, #favorite-games .bricks-wrapper .brick.entry--large, #search-games .bricks-wrapper .brick.entry--large { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--xl, #favorite-games .bricks-wrapper .brick.entry--xl, #search-games .bricks-wrapper .brick.entry--xl { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-4, #favorite-games .bricks-wrapper .brick.entry--cols-4, #search-games .bricks-wrapper .brick.entry--cols-4 { width : 100%; } .ss-collection .bricks-wrapper .brick.entry--cols-5, #favorite-games .bricks-wrapper .brick.entry--cols-5, #search-games .bricks-wrapper .brick.entry--cols-5 { width : 100%; } } @media screen and (max-width: 420px) { .bricks .masonry { width : 100%; } .bricks-wrapper .brick { padding-right : 5vw; padding-left : 5vw; } .ss-game-detail .bricks-wrapper .brick { padding-right : 5vw; padding-left : 5vw; } .bricks-wrapper .entry__title { font-size : calc(var(--text-size) * 1.659); } } /* ------------------------------------------------------------------- * ## game card edit trigger * ------------------------------------------------------------------- */ .entry__edit-trigger { z-index : 2; display : flex; align-items : center; justify-content : center; width : 36px; height : 36px; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : rgba(0, 0, 0, 0.55); color : white; line-height : 1; text-transform : none; letter-spacing : normal; transition : background-color 0.2s ease-in-out; position : absolute; top : 1.2rem; right : 1.2rem; } .entry__edit-trigger:focus, .entry__edit-trigger:hover { background-color : var(--color-black); color : var(--color-white); } .entry__edit-trigger--inline { display : inline-flex; vertical-align : middle; margin-left : var(--vspace-0_75); position : static; width : 44px; height : 44px; background-color : var(--color-black); } .entry__edit-trigger--inline:focus, .entry__edit-trigger--inline:hover { background-color : var(--color-1, #333); } /* the button's own background already flips correctly (var(--color-black) * at rest, teal on hover) — but the icon inside (svg uses stroke="currentColor", * so this is the "color" property) inherited white from the base * .entry__edit-trigger rule at all times, going invisible against the * now-white resting background. Just the icon: black at rest, white on * hover, independent of the button's own background. */ [data-theme="dark"] .entry__edit-trigger--inline { color : black; } [data-theme="dark"] .entry__edit-trigger--inline:focus, [data-theme="dark"] .entry__edit-trigger--inline:hover { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .entry__edit-trigger--inline { color : black; } :root:not([data-theme="light"]) .entry__edit-trigger--inline:focus, :root:not([data-theme="light"]) .entry__edit-trigger--inline:hover { color : white; } } /* ------------------------------------------------------------------- * ## game edit drawer * ------------------------------------------------------------------- */ .game-edit-overlay { z-index : 401; display : block; background : rgba(0, 0, 0, 0.5); opacity : 0; visibility : hidden; width : 100%; height : 100%; transition : all 0.3s; position : fixed; top : 0; left : 0; } .game-edit-panel { z-index : 402; background-color : var(--color-white); width : 880px; max-width : 90vw; height : 100%; overflow-y : auto; /* nothing scrolls sideways (the text editor's hidden button tooltips * reach past the right edge on a phone) */ overflow-x : hidden; padding : var(--vspace-1_5) var(--vspace-1_5) var(--vspace-2); transform : translateX(100%); transition : transform 0.4s cubic-bezier(0, 0.55, 0.45, 1), box-shadow 0.4s ease; position : fixed; top : 0; right : 0; bottom : 0; } .login-panel { width : 440px; } @media screen and (max-width: 600px) { .game-edit-panel { width : 100%; max-width : 100%; /* tighter edges on a phone; the bottom bar of buttons follows them */ padding : 2rem 1.6rem 1.6rem; } .game-edit-panel__close { top : 1.2rem; right : 1.2rem; } .game-edit-panel .game-edit-panel__title { margin-bottom : var(--vspace-1); } .game-edit-panel .game-edit-form .game-edit-form__actions { bottom : -1.6rem; margin-right : -1.6rem; margin-bottom : -1.6rem; margin-left : -1.6rem; padding : 1.2rem 1.6rem 1.6rem; } } /* a touch screen has no hover: the text editor's button tooltips never show * there, but laid out off-panel they made the form scroll sideways */ @media (hover: none) { .sun-editor .se-tooltip-inner { display : none; } } .game-edit-drawer.is-open .game-edit-overlay { opacity : 1; visibility : visible; } .game-edit-drawer.is-open .game-edit-panel { transform : none; /* only while open: on the closed (off-screen) panel the shadow bled * into the right edge of the page */ box-shadow : -10px 0 40px rgba(0, 0, 0, 0.15); } .game-edit-panel__close { display : flex; align-items : center; justify-content : center; width : 36px; height : 36px; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : var(--color-gray-4); color : black; line-height : 1; text-transform : none; letter-spacing : normal; position : absolute; top : var(--vspace-1); right : var(--vspace-1); } .game-edit-panel__close:focus, .game-edit-panel__close:hover { background-color : var(--color-gray-6); } [data-theme="dark"] .game-edit-panel__close { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-edit-panel__close { color : white; } } .game-edit-panel__title { font-size : var(--text-lg); margin-top : 0; margin-bottom : var(--vspace-1_5); padding-right : var(--vspace-2); } /* favorite heart next to the drawer title (game form) — gray outline * state, red when checked, like the hearts on the cards */ .game-edit-panel__title .game-edit-favorite { display : inline-flex; align-items : center; margin : 0 0 0 1.2rem; vertical-align : middle; color : var(--color-gray-13); cursor : pointer; transition : color 0.15s ease-in-out; } .game-edit-favorite input { position : absolute; width : 0; height : 0; opacity : 0; pointer-events : none; } .game-edit-favorite svg { width : 20px; height : 20px; } .game-edit-favorite:has(input:checked) { color : #e0245e; } .game-edit-favorite:has(input:focus-visible) { outline : 2px solid currentColor; outline-offset : 4px; border-radius : 4px; } .game-edit-form div { margin-bottom : var(--vspace-0_5); } .game-edit-form__row { display : flex; align-items : flex-end; gap : 1.6rem; } .game-edit-form__row--top { align-items : flex-start; } .game-edit-form__row.game-edit-form__row--category { margin-bottom : var(--vspace-1); } .game-edit-form__row .game-edit-form__category { flex : 1; margin-bottom : 0; } .game-edit-form__row .game-edit-form__category .game-edit-form__category-options { margin-bottom : 0; } .game-edit-form__row .game-edit-form__large { margin-bottom : 0; flex-shrink : 0; } .game-edit-form__row .game-edit-form__favorite { margin-top : 3.2rem; margin-bottom : 0; flex-shrink : 0; } .game-edit-form__favorite .ss-switch { height : 4.8rem; } .game-edit-form__row .game-edit-form__field { flex : 1; margin-bottom : 0; } .game-edit-form__row .game-edit-form__field--narrow { flex : 0 0 14rem; } .game-edit-form__row .game-edit-form__field--date { flex : 0 0 20rem; } .game-edit-form__category-options { display : flex; flex-wrap : wrap; gap : 0.8rem; } /* a phone: the side-by-side fields (title + date, categories + size, name + * year…) one under another, each the full width */ @media screen and (max-width: 600px) { .game-edit-form__row { flex-direction : column; align-items : stretch; gap : 0; } .game-edit-form__row .game-edit-form__field, .game-edit-form__row .game-edit-form__field--narrow, .game-edit-form__row .game-edit-form__field--date { flex : none; margin-bottom : var(--vspace-0_5); } .game-edit-form__row .game-edit-form__large, .game-edit-form__row .game-edit-form__favorite { margin-top : var(--vspace-0_5); } /* the buttons at the bottom: one compact row of two equal buttons */ .game-edit-panel .game-edit-form .game-edit-form__actions { gap : .8rem; } .game-edit-panel .game-edit-form__actions input[type="submit"], .game-edit-panel .game-edit-form__actions #calendar-edit-repeat, .game-edit-panel .game-edit-form__actions .game-edit-delete { flex : 1 1 0; width : auto; min-width : 0; padding : .8rem; font-size : 1.2rem; line-height : 2.4rem; letter-spacing : .06em; white-space : nowrap; } } .game-edit-form__category-option { display : flex; align-items : center; justify-content : center; box-sizing : border-box; height : 4.8rem; padding : 0 1.6rem; margin-bottom : 0; border : 1px solid black; border-radius : var(--border-radius); font-family : var(--font-1); font-weight : 600; font-size : 1.4rem; color : black; background-color : transparent; cursor : pointer; user-select : none; transition : background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .game-edit-form__size-options { flex-wrap : nowrap; } /* like the category options in this row: no bottom gap, so the size * buttons line up with the category and "Доп" buttons */ .game-edit-form__row .game-edit-form__large .game-edit-form__size-options { margin-bottom : 0; } .game-edit-form__size-options .game-edit-form__category-option { min-width : 4.8rem; padding : 0 1.4rem; } .game-edit-form__category-option input { position : absolute; width : 0; height : 0; opacity : 0; pointer-events : none; } .game-edit-form__category-option:has(input:checked) { background-color : black; color : white; } [data-theme="dark"] .game-edit-form__category-option { border : 1px solid white; color : white; } [data-theme="dark"] .game-edit-form__category-option:has(input:checked) { background-color : white; color : black; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-edit-form__category-option { border : 1px solid white; color : white; } :root:not([data-theme="light"]) .game-edit-form__category-option:has(input:checked) { background-color : white; color : black; } } .game-edit-form__large-toggle { display : flex; align-items : center; justify-content : center; flex-shrink : 0; min-width : 4.8rem; height : 4.8rem; padding : 0 1.6rem; margin-bottom : 0; border : 1px solid black; border-radius : var(--border-radius); font-family : var(--font-1); font-weight : 600; font-size : 1.6rem; color : black; background-color : transparent; cursor : pointer; user-select : none; transition : background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .game-edit-form__large-toggle input { position : absolute; width : 0; height : 0; opacity : 0; pointer-events : none; } .game-edit-form__large-toggle:has(input:checked) { background-color : black; color : white; } [data-theme="dark"] .game-edit-form__large-toggle { border : 1px solid white; color : white; } [data-theme="dark"] .game-edit-form__large-toggle:has(input:checked) { background-color : white; color : black; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-edit-form__large-toggle { border : 1px solid white; color : white; } :root:not([data-theme="light"]) .game-edit-form__large-toggle:has(input:checked) { background-color : white; color : black; } } .game-edit-form input[type="text"], .game-edit-form input[type="url"], .game-edit-form input[type="number"], .game-edit-form input[type="password"], .game-edit-form input[type="email"], .game-edit-form select { height : 4.8rem; padding : 1rem 1.6rem; box-sizing : border-box; } .game-edit-form textarea { height : auto; padding : 2rem 1.6rem; line-height : calc(var(--input-line-height, var(--vspace-1)) / 2); min-height : calc((var(--input-line-height, var(--vspace-1)) / 2 * 2) + 4rem + 2px); overflow : hidden; resize : none; } /* rich-text (SunEditor) description editor: framed like the form's other * fields; the editor's own dark theme (se-theme-dark) is switched with the * site's theme in ssRichTextEditor() */ .game-edit-form .sun-editor, .post-edit-form .sun-editor, .calendar-edit-form .sun-editor { margin-bottom : 0; border-radius : var(--border-radius); font-family : var(--font-1); } /* the forms' generic "div { margin-bottom }" spacing must not reach the * editor's internal divs */ .sun-editor div { margin-bottom : 0; } .sun-editor .se-wrapper-inner { min-height : 20rem; } /* the editor's modals (image, link…) are 500px wide — too narrow for the * Russian labels: the image modal's alignment radios + "Подтвердить" wrapped * onto two lines; a bit wider fits them on one */ .sun-editor .se-modal-area.sun-editor-common .se-modal-inner .se-modal-content { max-width : min(600px, calc(100vw - 3.2rem)); } /* sticky toolbar inside a drawer: sticky stops at the panel's padding edge, * so pull it up by that padding to stick to the very top of the panel * (not in full screen: there the toolbar gets an inline position: relative) */ .game-edit-panel .sun-editor.sun-editor .se-toolbar:not([style*="relative"]) { top : calc(-1 * var(--vspace-1_5)); } /* editor text and the "Формат" list look like the post page: Inter text, * Merriweather headings at the site's sizes, quotes with a left rule */ .sun-editor.sun-editor .se-wrapper .sun-editor-editable, .sun-editor.sun-editor .se-list-layer.se-list-format ul { font-family : var(--font-1); color : var(--color-text); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable { font-size : var(--text-size); line-height : var(--vspace-1); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable :is(h2, h3, h4), .sun-editor.sun-editor .se-list-layer.se-list-format ul :is(h2, h3, h4) { font-family : var(--font-2); font-weight : 400; color : var(--color-text-dark); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable :is(h2, h3, h4) { margin : var(--vspace-1) 0 var(--vspace-0_5); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable h2 { font-size : var(--text-xxl); line-height : calc(1.375 * var(--space)); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable h3 { font-size : var(--text-xl); line-height : calc(1.125 * var(--space)); } .sun-editor.sun-editor .se-wrapper .sun-editor-editable h4 { font-size : var(--text-lg); line-height : var(--vspace-1); } .sun-editor.sun-editor .se-list-layer.se-list-format ul h2 { font-size : var(--text-xl); } .sun-editor.sun-editor .se-list-layer.se-list-format ul h3 { font-size : var(--text-lg); } .sun-editor.sun-editor .se-list-layer.se-list-format ul h4 { font-size : var(--text-md); } .sun-editor.sun-editor .se-list-layer.se-list-format ul :is(p, h2, h3, h4, blockquote) { margin : 0; line-height : 1.3; } .sun-editor.sun-editor .se-list-layer.se-list-format ul blockquote { position : relative; height : auto; margin : 0; padding : 0 0 0 2.4rem; border : none; color : var(--color-text-dark); font-size : var(--text-size); font-style : italic; } .sun-editor.sun-editor .se-list-layer.se-list-format ul blockquote:before { content : ""; position : absolute; top : 50%; left : 0; width : 1.6rem; height : 1.6rem; transform : translateY(-50%); background : var(--color-text-dark); -webkit-mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; mask : url(../images/icons/icon-quote.svg) center / contain no-repeat; } /* file picker box: its icon / file name inherit the site's 3.2rem body * line-height and sit below the middle — center them in the box instead */ .sun-editor .se-modal-area.sun-editor-common .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div { display : flex; align-items : center; justify-content : center; padding-top : 0; line-height : 1; } .sun-editor .se-modal-area.sun-editor-common .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-w { display : flex; align-items : center; gap : 0.6rem; margin : 0; } .sun-editor .se-modal-area.sun-editor-common .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-icon-up { display : flex; } .game-edit-form__uploads { display : flex; flex-wrap : wrap; align-items : flex-start; gap : 2.4rem; margin-bottom : var(--vspace-0_5); } .game-edit-form__uploads .game-edit-form__upload { margin-bottom : 0; } .game-edit-form__upload { margin-bottom : var(--vspace-1); } .game-edit-form__preview { display : flex; align-items : center; justify-content : center; background-color : var(--color-gray-4); background-repeat : no-repeat; background-position: center; background-size : contain; margin-bottom : var(--vspace-0_5); overflow : hidden; cursor : pointer; transition : background-color 0.2s ease-in-out; } .game-edit-form__preview:focus, .game-edit-form__preview:hover { background-color : var(--color-gray-6); } .game-edit-form__preview--thumb { width : 100px; height : 100px; } .game-edit-form__preview--full { width : 200px; height : 200px; } /* hero drawer: the background block (photo + effect switches) gets a bit * more room before the text fields */ #hero-edit-form .hero-edit-form__background { margin-bottom : var(--vspace-1_5); } #hero-edit-form .hero-edit-form__background .game-edit-form__switches { margin-top : var(--vspace-0_25); } /* hero slide photo: a landscape background, so a wide preview */ .game-edit-form__preview--hero { width : 100%; aspect-ratio : 16 / 9; background-size : cover; } /* upload icon + caption in the middle of the photo box; over a chosen * photo it sits on a dark pill (click replaces the photo) */ .game-edit-form__upload-icon { display : inline-flex; align-items : center; gap : 0.8rem; padding : 0.8rem 1.4rem; border-radius : 999px; font-family : var(--font-1); font-size : 1.4rem; line-height : 1; color : var(--color-gray-13); transition : background-color .2s, color .2s; } .game-edit-form__preview.has-image .game-edit-form__upload-icon { background : rgba(0, 0, 0, .6); color : white; } .game-edit-form__upload-text--replace, .game-edit-form__preview.has-image .game-edit-form__upload-text { display : none; } .game-edit-form__preview.has-image .game-edit-form__upload-text--replace { display : inline; } .game-edit-form__preview:hover .game-edit-form__upload-icon { color : var(--color-text-dark); } .game-edit-form__preview.has-image:hover .game-edit-form__upload-icon { background : rgba(0, 0, 0, .8); color : white; } .game-edit-form__preview.has-image .game-edit-form__preview-plus { display : none; } .game-edit-form__preview-plus { font-family : var(--font-1); font-size : 3.2rem; font-weight : 300; line-height : 1; color : var(--color-gray-13); } .game-edit-form__error { color : #c0392b; font-size : 1.4rem; margin-bottom : var(--vspace-0_875); } .game-edit-form__name-ru-toggle { display : inline-block; font-family : var(--font-1); font-size : var(--text-sm); font-weight : 600; color : var(--color-text-dark); text-decoration : underline; margin-top : 0.2rem; margin-bottom : 0; } .game-edit-form__name-ru-toggle[hidden] { display : none; } /* Russian name / "Мой комментарий" block under the name row: links and * opened fields stacked with one gap; the same 3.2rem above (the name * input's own bottom margin) and below the block */ .game-edit-form .game-edit-form__row--top { margin-bottom : 0; } /* note under the drawer title while the shared fields are locked */ .game-edit-panel__locked-note { display : flex; align-items : flex-start; gap : 0.8rem; margin-top : calc(var(--vspace-1) * -1); margin-bottom : var(--vspace-1); font-family : var(--font-1); font-size : var(--text-sm); line-height : 1.5; color : var(--color-gray-13); } .game-edit-panel__locked-note[hidden] { display : none; } .game-edit-panel__locked-note svg { flex-shrink : 0; margin-top : 0.3rem; } .game-edit-panel__locked-note b { font-weight : 600; } /* account sub-domain: shared game fields are read-only while editing * (ssGameEdit → .is-shared-locked) — dimmed, with a lock after the field's * label (the switches: after their text) */ .game-edit-form.is-shared-locked [data-shared] input[type="text"], .game-edit-form.is-shared-locked [data-shared] input[type="url"] { color : var(--color-gray-13); cursor : not-allowed; } .game-edit-form.is-shared-locked .ss-switch[data-shared] .ss-switch__label::after, .game-edit-form.is-shared-locked div[data-shared] > label::after { content : ""; display : inline-block; width : 1.6rem; height : 1.6rem; margin-left : 0.8rem; vertical-align : -0.2rem; background : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a9094' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat center / contain; } .game-edit-form.is-shared-locked .ss-switch[data-shared], .game-edit-form.is-shared-locked .game-edit-form__upload[data-shared] .game-edit-form__preview, .game-edit-form.is-shared-locked .post-edit-form__games[data-shared] .post-edit-form__games-search { opacity : 0.55; cursor : not-allowed; } .game-edit-form.is-shared-locked .game-edit-form__upload[data-shared] .game-edit-form__preview { pointer-events : none; } .game-edit-form.is-shared-locked .post-edit-form__games[data-shared] .post-edit-form__gallery-remove, .game-edit-form.is-shared-locked .game-edit-form__upload[data-shared] .game-edit-form__preview-plus { display : none; } .game-edit-form.is-shared-locked div[data-shared] .sun-editor { opacity : 0.7; } /* the editor's toolbar stays clickable-looking when disabled */ .game-edit-form.is-shared-locked div[data-shared] .se-toolbar { pointer-events : none; opacity : 0.5; } /* change requests (refreshChangeLocks in main.js): while editing on a * sub-domain the lock of a field it applies to is a button instead of the * label's ::after; a click opens the field, marked "на модерацию" */ .game-edit-form.has-change-locks div[data-change-field] > label::after, .game-edit-form.has-change-locks .ss-switch[data-change-field] .ss-switch__label::after { display : none; } .game-edit-form__unlock { display : inline-flex; align-items : center; justify-content : center; width : 2.4rem; height : 2.4rem; margin : 0 0 0 .4rem; padding : 0; border : 0; border-radius : 50%; background : none !important; color : var(--color-gray-13); vertical-align : -.6rem; cursor : pointer; transition : color .2s; } .game-edit-form__unlock:hover, .game-edit-form__unlock:focus-visible { color : var(--color-2); } /* the switches are dimmed while locked: the lock in them stays clickable */ .game-edit-form.is-shared-locked .ss-switch[data-change-field] { cursor : default; } .game-edit-form__change-note { margin-left : .8rem; white-space : nowrap; font-size : 1.2rem; font-weight : 400; text-transform : none; letter-spacing : 0; color : var(--color-2); } /* an opened field: as editable-looking as an unlocked form, outlined in * the accent color (its change goes to moderation) */ .game-edit-form.is-shared-locked [data-shared].is-unlocked input[type="text"], .game-edit-form.is-shared-locked [data-shared].is-unlocked input[type="url"] { color : var(--color-text-dark); cursor : text; box-shadow : inset 0 0 0 1px var(--color-2); } .game-edit-form.is-shared-locked .ss-switch[data-shared].is-unlocked { opacity : 1; cursor : pointer; } .game-edit-form.is-shared-locked div[data-shared].is-unlocked .sun-editor, .game-edit-form.is-shared-locked div[data-shared].is-unlocked .se-toolbar { opacity : 1; pointer-events : auto; } .game-edit-form .game-edit-form__switches { display : flex; flex-wrap : wrap; align-items : center; gap : 1.6rem 3.2rem; /* half of the name input's 3.2rem bottom margin above the switches */ margin-top : -1.6rem; margin-bottom : 3.2rem; } .game-edit-form__switches .ss-switch { margin-bottom : 0; } .game-edit-form .game-edit-form__extra { display : flex; flex-direction : column; gap : 1.6rem; margin-bottom : 3.2rem; } .game-edit-form .game-edit-form__extra > *, .game-edit-form .game-edit-form__extra input, .game-edit-form .game-edit-form__extra textarea { margin-top : 0; margin-bottom : 0; } .game-edit-form__extra > .game-edit-form__name-ru-toggle { align-self : flex-start; } .game-edit-form__name-ru-toggle:focus, .game-edit-form__name-ru-toggle:hover { color : black; } .date-picker { position : relative; } .date-picker__input { cursor : pointer; } /* matches .game-edit-form__category-option's fixed height, so the date field and category pills line up when shown side by side */ .game-edit-form input[type="text"].date-picker__input { height : 4.8rem; box-sizing : border-box; } .date-picker__backdrop { z-index : 499; background : rgba(255, 255, 255, 0.75); position : fixed; inset : 0; } .date-picker__panel { z-index : 500; width : 280px; padding : var(--vspace-0_75); background-color : var(--color-white); border : 1px solid var(--color-gray-6); border-radius : var(--border-radius); box-shadow : 0 10px 30px rgba(0, 0, 0, 0.18); position : fixed; } .date-picker__header { display : flex; align-items : center; justify-content : space-between; margin-bottom : var(--vspace-0_5); } .date-picker__label { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); text-transform : capitalize; color : var(--color-text-dark); } .date-picker__nav { display : flex; align-items : center; justify-content : center; width : 28px; height : 28px; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : transparent; color : var(--color-text-dark); cursor : pointer; transition : background-color 0.2s ease-in-out; } .date-picker__nav:focus, .date-picker__nav:hover { background-color : var(--color-gray-4); } .date-picker__weekdays, .date-picker__days { display : grid; grid-template-columns : repeat(7, 1fr); gap : 0.2rem; } .date-picker__weekdays span { min-width : 0; font-family : var(--font-1); font-size : var(--text-xs); font-weight : 600; text-align : center; text-transform : uppercase; color : var(--color-gray-13); padding-bottom : var(--vspace-0_25); } .date-picker__day { display : flex; align-items : center; justify-content : center; width : 100%; min-width : 0; height : auto; aspect-ratio : 1 / 1; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : transparent; font-family : var(--font-1); font-size : var(--text-sm); font-weight : 400; line-height : normal; text-transform : none; letter-spacing : normal; color : var(--color-text-dark); cursor : pointer; transition : background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .date-picker__day--empty { cursor : default; opacity : 0; } .date-picker__day:focus, .date-picker__day:hover { background-color : var(--color-gray-4); } .date-picker__day.is-today { font-weight : 700; } .date-picker__day.is-selected { background-color : black; color : white; } .post-edit-form__gallery-header { display : flex; align-items : center; justify-content : space-between; margin-bottom : var(--vspace-0_5); } .post-edit-form__gallery-header label:first-child { margin-bottom : 0; } .ss-switch { display : inline-flex; align-items : center; gap : 0.8rem; margin-bottom : 0; cursor : pointer; user-select : none; } /* [type] beats "label>input[type=checkbox]" (position: relative), which otherwise leaves the hidden input in the flow and shifts the track by the gap */ .ss-switch input[type="checkbox"], .ss-switch input { position : absolute; width : 0; height : 0; opacity : 0; pointer-events : none; } .ss-switch__track { display : inline-block; flex-shrink : 0; width : 40px; height : 24px; background-color : var(--color-gray-7); border-radius : 999px; transition : background-color 0.2s ease-in-out; position : relative; } .ss-switch__thumb { width : 20px; height : 20px; background-color : white; border-radius : 50%; box-shadow : 0 1px 3px rgba(0, 0, 0, 0.25); transition : transform 0.2s ease-in-out; position : absolute; top : 2px; left : 2px; } .ss-switch input:checked + .ss-switch__track { background-color : black; } .ss-switch input:checked + .ss-switch__track .ss-switch__thumb { transform : translateX(16px); } [data-theme="dark"] .ss-switch input:checked + .ss-switch__track { background-color : white; } [data-theme="dark"] .ss-switch input:checked + .ss-switch__track .ss-switch__thumb { background-color : black; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-switch input:checked + .ss-switch__track { background-color : white; } :root:not([data-theme="light"]) .ss-switch input:checked + .ss-switch__track .ss-switch__thumb { background-color : black; } } .ss-switch__label { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); color : var(--color-text-dark); } .post-edit-form__gallery { display : flex; flex-wrap : wrap; gap : 1.2rem; margin-bottom : var(--vspace-0_5); } .post-edit-form__gallery-item { position : relative; width : 100px; height : 100px; border-radius : var(--border-radius); background-color : var(--color-gray-4); background-repeat : no-repeat; background-position : center; background-size : cover; overflow : hidden; cursor : grab; transition : opacity 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .post-edit-form__gallery-item.is-dragging { opacity : 0.4; cursor : grabbing; } .post-edit-form__gallery-item.is-drag-over { box-shadow : 0 0 0 2px black; } .post-edit-form__gallery-remove { z-index : 1; display : flex; align-items : center; justify-content : center; width : 24px; height : 24px; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : rgba(0, 0, 0, 0.6); color : white; font-size : 1.4rem; line-height : 1; text-transform : none; letter-spacing : normal; cursor : pointer; transition : background-color 0.2s ease-in-out; position : absolute; top : 4px; right : 4px; } .post-edit-form__gallery-remove:focus, .post-edit-form__gallery-remove:hover { background-color : black; color : white; } .post-edit-form__gallery-add { display : flex; align-items : center; justify-content : center; width : 100px; height : 100px; border-radius : var(--border-radius); background-color : var(--color-gray-4); cursor : pointer; transition : background-color 0.2s ease-in-out; } .post-edit-form__gallery-add:focus, .post-edit-form__gallery-add:hover { background-color : var(--color-gray-6); } .post-edit-form__games-search { position : relative; } .post-edit-form__games-suggestions { z-index : 20; max-height : 220px; overflow-y : auto; background-color : var(--color-white); border : 1px solid var(--color-gray-6); border-radius : var(--border-radius); box-shadow : 0 10px 30px rgba(0, 0, 0, 0.12); position : absolute; top : calc(100% + 0.4rem); left : 0; right : 0; } .post-edit-form__games-suggestion { display : block; width : 100%; height : auto; padding : 0.4rem 1.6rem; margin : 0; border : none; background : none; text-align : left; font-family : var(--font-1); font-size : var(--text-sm); font-weight : 400; text-transform : none; letter-spacing : normal; line-height : 1.4; color : var(--color-text-dark); cursor : pointer; } .post-edit-form__games-suggestion:focus, .post-edit-form__games-suggestion:hover { background-color : var(--color-gray-3); } .post-edit-form__games { margin-bottom : var(--vspace-0_5); } .post-edit-form__games .post-edit-form__gallery { margin-top : var(--vspace-0_75); } .post-edit-form__game-chip { display : flex; } /* "Доп" badge on expansion tiles in the game pickers */ .post-edit-form__game-badge { position : absolute; left : 4px; bottom : 4px; padding : 2px 6px; border-radius : 4px; background-color : rgba(0, 0, 0, 0.6); color : white; font-family : var(--font-1); font-size : 1.1rem; font-weight : 600; line-height : 1.4; pointer-events : none; } .post-edit-form__game-chip--placeholder { align-items : center; justify-content : center; padding : 0.8rem; font-family : var(--font-1); font-size : 1.1rem; font-weight : 600; line-height : 1.25; text-align : center; color : var(--color-gray-14); } .game-edit-form .game-edit-form__actions { display : flex; gap : 1.6rem; position : sticky; z-index : 11; bottom : calc(var(--vspace-2) * -1); margin-top : var(--vspace-1); margin-right : calc(var(--vspace-1_5) * -1); margin-bottom : calc(var(--vspace-2) * -1); margin-left : calc(var(--vspace-1_5) * -1); padding : var(--vspace-0_75) var(--vspace-1_5) var(--vspace-1); background-color : var(--color-white); border-top : 1px solid var(--color-gray-4); } .game-edit-form__actions input[type="submit"], .game-edit-form__actions #calendar-edit-repeat, .game-edit-form__actions .game-edit-delete { height : auto; margin : 0; padding : 1rem 1.6rem; line-height : var(--vspace-1); flex : 1; } .game-edit-delete.is-confirming, .game-edit-delete.is-confirming:hover, .game-edit-delete.is-confirming:focus { background : hsla(359, 65%, 51%, 1) !important; border : 2px solid hsla(359, 65%, 51%, 1); color : var(--color-white); } /* the armed "Вы уверены?" delete confirm: a red hover background, so white * text (--color-white is dark in dark mode) */ [data-theme="dark"] .game-edit-delete.is-confirming:hover, [data-theme="dark"] .game-edit-delete.is-confirming:focus { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-edit-delete.is-confirming:hover, :root:not([data-theme="light"]) .game-edit-delete.is-confirming:focus { color : white; } } /* =================================================================== * # PAGE WRAP * * * ------------------------------------------------------------------- */ .s-pagewrap { display : flex; flex-direction : column; min-height : 100%; overflow : hidden; position : relative; } /* =================================================================== * # SITE HEADER * * * ------------------------------------------------------------------- */ .s-header { z-index : 100; width : 100%; position : absolute; top : 2.8rem; left : 0; } /* -------------------------------------------------------------------- * ## branding * -------------------------------------------------------------------- */ .s-header__branding { --branding-left : 3.6rem; z-index : 2; font-family : var(--font-2); font-size : 2.8rem; line-height : 1; letter-spacing : -0.03em; transform : translateY(-50%); position : absolute; top : 50%; left : var(--branding-left); } .s-header__branding .site-title { margin : 0; padding : 0; } /* desktop, an author's site: the avatar logo stays pinned while the page scrolls — * same spot as in the header (its top 2.8rem + half its 4.1rem height); * once scrolled (body.ss-logo-scrolled, ssFixedLogo) the title fades out, * hovering the logo brings it back */ @media screen and (min-width: 1201px) { .s-header__branding:has(.site-title__author) { position : fixed; top : 4.85rem; } .site-title__author-text { transition : opacity .4s ease, visibility .4s ease; } .ss-logo-scrolled .s-header__branding:not(:hover) .site-title__author-text { opacity : 0; visibility : hidden; } } /* the main domain's logo: the mark (render_site_mark()) and "BOARDGAME / BLOGS" */ .s-header__branding .site-title__main { display : inline-flex; align-items : center; gap : 1rem; font-weight : 700; } .site-title__main-text { font-size : 2.2rem; } .site-title__mark { flex : none; width : 6.4rem; height : 6.4rem; overflow : visible; } /* the mark's cards fade from the text color to the background: black, gray, * light gray; in the dark theme white, gray, dark gray (--site-mark-1…3). * In the header the middle card takes the color of "BLOGS" (random_accent()) */ .site-mark__card--1 { fill : var(--site-mark-1); } .site-mark__card--2 { fill : var(--site-mark-2); } .site-mark__card--3 { fill : var(--site-mark-3); } .site-mark__ink { fill : var(--color-body); } .site-title__main[class*="random-accent--"] .site-mark__card--2 { fill : var(--random-accent); } /* the back card: the same accent, paler — mixed with the page's background, * so it fades the same way in the light and the dark theme */ .site-title__main[class*="random-accent--"] .site-mark__card--3 { fill : color-mix(in srgb, var(--random-accent) 40%, var(--color-body)); } /* the fan: each card turned about its own center; on hovering the logo the * cards spread a little further apart — with a bounce (a spring easing: past * the end, back, a smaller swing, rest), the cards one after another */ .site-mark__card--3, .site-mark__card--2, .site-mark__front { transform-box : view-box; transition : transform .7s cubic-bezier(.3, 1.8, .4, 1); } @supports (transition-timing-function: linear(0, 1)) { .site-mark__card--3, .site-mark__card--2, .site-mark__front { transition-timing-function : linear(0, .22 5%, .7 13%, 1.16 22%, 1.24 28%, 1.12 37%, .94 50%, .98 58%, 1.03 67%, 1.01 80%, 1); } } .site-mark__card--2 { transition-delay : .04s; } .site-mark__front { transition-delay : .08s; } .site-mark__card--3 { transform-origin : 19px 34px; transform : rotate(-14deg); } .site-mark__card--2 { transform-origin : 30px 30px; transform : rotate(-4deg); } .site-mark__front { transform-origin : 42px 32px; transform : rotate(8deg); } .site-title__main:hover .site-mark__card--3, .site-title__main:focus-visible .site-mark__card--3 { transform : translate(-3px, 2px) rotate(-24deg); } .site-title__main:hover .site-mark__card--2, .site-title__main:focus-visible .site-mark__card--2 { transform : translate(-1px, -1px) rotate(-8deg); } .site-title__main:hover .site-mark__front, .site-title__main:focus-visible .site-mark__front { transform : translate(2px, 0) rotate(14deg); } @media (prefers-reduced-motion: reduce) { .site-mark__card--3, .site-mark__card--2, .site-mark__front { transition : none; } } /* a phone: the mark and the name smaller, so "BOARDGAME" keeps clear of * the header icons */ @media screen and (max-width: 600px) { .s-header__branding .site-title__main { gap : .6rem; } .site-title__main-text { font-size : 1.9rem; } .site-title__mark { width : 4.8rem; height : 4.8rem; } } .s-header__branding .site-title__main-accent { color : var(--color-gray-15); } /* the main domain's random accent (random_accent(): "BLOGS" in the logo, * the home page's die) — mid-tone colors, readable both on the light and * the dark theme */ .random-accent--1 { --random-accent : #e04848; } /* red */ .random-accent--2 { --random-accent : #e67e22; } /* orange */ .random-accent--3 { --random-accent : #c99a10; } /* mustard */ .random-accent--4 { --random-accent : #2fa36b; } /* green */ .random-accent--5 { --random-accent : #1fa0a0; } /* teal */ .random-accent--6 { --random-accent : #3a86d4; } /* blue */ .random-accent--7 { --random-accent : #8a63d2; } /* purple */ .random-accent--8 { --random-accent : #d0559a; } /* pink */ .s-header__branding .site-title__main[class*="random-accent--"] .site-title__main-accent { color : var(--random-accent); } .s-header__branding a { margin : 0; padding : 0; outline : 0; border : none; color : black; } /* an author's site: the channel's avatar before the title, whole on screen, * 1.6rem from its edge */ .s-header__branding .site-title__author { --avatar-size : 7.2rem; display : inline-flex; align-items : center; gap : 1.2rem; transform : translateX(calc(-1 * var(--branding-left) + 1.6rem)); } .site-title__avatar { flex : none; width : var(--avatar-size); height : var(--avatar-size); border-radius : 50%; object-fit : cover; } @media screen and (max-width: 600px) { .s-header__branding .site-title__author { --avatar-size : 5.2rem; gap : .8rem; } } .ss-home .s-header__branding a { color : white; } /* logo text is literal "black" above (deliberately theme-independent on * .ss-home, where it sits over the hero photo) — everywhere else it needs * to follow the theme, so make it explicitly white on dark */ [data-theme="dark"] .s-header__branding a { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-header__branding a { color : white; } } /* -------------------------------------------------------------------- * ## main navigation * -------------------------------------------------------------------- */ .s-header__navigation { max-width : none; width : 100%; } .s-header__nav-wrap { display : flex; justify-content : center; margin-left : 6rem; margin-right : 6rem; width : 100%; } .ss-home .s-header__nav-wrap { margin-left : 50%; } .s-header__nav-wrap .s-header__nav-heading { display : none; font-family : var(--font-1); font-weight : 300; font-size : var(--text-size); color : var(--color-text-light); letter-spacing : -0.02em; padding-left : 3.2rem; margin-top : 0; margin-bottom : var(--vspace-1_75); position : relative; } .s-header__nav-wrap .s-header__nav-heading::before { content : ""; display : block; width : 2rem; height : 1px; background-color : rgba(0, 0, 0, 0.3); position : absolute; top : 50%; left : 0; } .s-header__nav { list-style : none; display : flex; flex-flow : row nowrap; margin : 0; padding : 0; } .s-header__nav a { display : inline-block; font-family : var(--font-1); font-size : 1.8rem; font-weight : 400; line-height : 4rem; color : var(--color-text-dark); transition-property : color, background-color; } .s-header__nav a:hover { color : var(--color-gray-16); } .s-header__nav li { padding : 0 1.2rem; position : relative; } .s-header__nav li.has-children>a { padding-right : 1.2rem; position : relative; } .s-header__nav li.has-children>a::after { border-bottom : 1px solid black; border-right : 1px solid black; content : ''; display : block; height : 5px; width : 5px; margin-top : -4px; pointer-events : none; -webkit-transform-origin : 66% 66%; transform-origin : 66% 66%; transform : rotate(45deg); transition : all .3s; position : absolute; right : 0; top : calc(50% + 2px); } .s-header__nav .current-menu-item>a { border-bottom : 1px solid var(--color-text-dark); } .s-header__nav ul { z-index : 200; margin : 0; padding : 2rem 0; background : var(--color-gray-18); border-radius : 0 0 4px 4px; transform : translate(0, 20px); transition : all .5s; opacity : 0; visibility : hidden; position : absolute; top : calc(100% - 1px); left : 0; } .s-header__nav ul ul { position : absolute; top : 0; left : calc(100% + 1px); border-radius : 0 0 4px 4px; padding-top : 1.2rem; } .s-header__nav ul li { display : block; text-align : left; padding : 0; margin : 0; min-height : 3.2rem; width : 100%; } .s-header__nav ul li a { display : block; white-space : nowrap; padding : .6rem 3rem .6rem 2rem; font-family : var(--font-1); font-weight : 300; font-size : 1.45rem; line-height : 1.8rem; color : rgba(255, 255, 255, 0.8); } .s-header__nav ul li a:focus, .s-header__nav ul li a:hover { color : white; } .s-header__nav li:hover>ul { opacity : 1; visibility : visible; transform : translate(0, 0); } /* -------------------------------------------------------------------- * ## mobile menu toggle * -------------------------------------------------------------------- */ .s-header__menu-toggle { display : none; z-index : 301; width : 6.8rem; height : 7.2rem; transform : translateY(-50%); position : absolute; top : 50%; right : .8rem; } .s-header__menu-toggle span { display : block; background-color : var(--color-black); width : 22px; height : 2px; margin-top : -1px; font : 0/0 a; text-shadow : none; color : transparent; transition : background-color 0.3s ease-in-out; position : absolute; right : 23px; top : 50%; bottom : auto; left : auto; } .s-header__menu-toggle span::before, .s-header__menu-toggle span::after { content : ""; width : 100%; height : 100%; transition : transform 0.3s ease-in-out; background-color : inherit; position : absolute; left : 0; } .s-header__menu-toggle span::before { top : -8px; } .s-header__menu-toggle span::after { bottom : -8px; } /* is clicked */ .s-header__menu-toggle.is-clicked span { background-color : rgba(0, 0, 0, 0); transition : all .1s; } .s-header__menu-toggle.is-clicked span::before, .s-header__menu-toggle.is-clicked span::after { background-color : var(--color-black); } .s-header__menu-toggle.is-clicked span::before { top : 0; transform : rotate(135deg); } .s-header__menu-toggle.is-clicked span::after { bottom : 0; transform : rotate(225deg); } /* ------------------------------------------------------------------- * ## header-search * ------------------------------------------------------------------- */ .s-header__search { z-index : 302; display : block; background : rgba(255, 255, 255, 0.5); opacity : 0; visibility : hidden; position : fixed; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; transition : all .3s .5s; } .s-header__search-inner { background-color : black; height : var(--vspace-3); width : 100%; transform : translateY(-200%); transition : transform 0.5s 0.3s cubic-bezier(0, 0.55, 0.45, 1); position : absolute; top : 0; left : 0; } .s-header__search-form { width : 100%; padding : 0 var(--gutter); margin : 0; } .s-header__search-form label { margin : 0; } .s-header__search-form input[type="search"] { --input-height : var(--vspace-3); background-color : transparent; color : white; height : auto; width : 100%; font-family : var(--font-2); font-weight : 400; font-size : var(--text-md); line-height : 1; border : transparent; margin : 0; text-align : center; } .s-header__search-form input[type="search"]::-webkit-search-decoration, .s-header__search-form input[type="search"]::-webkit-search-cancel-button, .s-header__search-form input[type="search"]::-webkit-search-results-button, .s-header__search-form input[type="search"]::-webkit-search-results-decoration { -webkit-appearance : none; } .s-header__search-form input[type="search"]::-webkit-input-placeholder { color : white; opacity : 1; } .s-header__search-form input[type="search"]:-moz-placeholder { color : white; opacity : 1; } .s-header__search-form input[type="search"]::-moz-placeholder { color : white; opacity : 1; } .s-header__search-form input[type="search"]:-ms-input-placeholder { color : white; opacity : 1; } .s-header__search-form input[type="search"].placeholder { color : white; opacity : 1; } .s-header__search-form input[type="search"]:focus { outline : none; color : white; box-shadow : none; } .s-header__search-form input[type="submit"] { display : none; } body.search-is-visible .s-header__search { transition : all .3s; opacity : 1; visibility : visible; } body.search-is-visible .s-header__search-inner { transform : none; } /* ------------------------------------------------------------------- * ## close button for search * ------------------------------------------------------------------- */ .s-header__search-close { display : block; background-color : var(--color-gray-18); width : 36px; height : 36px; border-radius : 50%; font : 0/0 a; text-shadow : none; color : transparent; transform : translateY(-50%); position : absolute; top : 100%; right : 2.8rem; } .s-header__search-close::before, .s-header__search-close::after { content : ''; display : inline-block; width : 2px; height : 14px; background-color : white; position : absolute; top : 11px; left : 17px; } .s-header__search-close::before { transform : rotate(45deg); } .s-header__search-close::after { transform : rotate(-45deg); } /* ------------------------------------------------------------------- * ## search triggers * ------------------------------------------------------------------- */ .s-header__search-trigger { display : flex; align-items : center; justify-content : center; transform : translateY(-50%); position : absolute; top : 50%; right : 3.6rem; } .s-header__search-trigger svg { height : 2.8rem; width : 2.8rem; } .s-header__search-trigger svg path { stroke : var(--color-text-dark); } /* ------------------------------------------------------------------- * ## theme toggle * ------------------------------------------------------------------- */ .s-header__theme-toggle { display : flex; align-items : center; justify-content : center; transform : translateY(-50%); position : absolute; top : 50%; right : 8rem; padding : 0; border : none; background : none; color : var(--color-text-dark); cursor : pointer; } /* the site's global "button:focus, button:hover { background-color: * var(--color-btn-hover) }" (BUTTONS section) otherwise fills this in on * hover/focus since this button never sets its own hover/focus state */ .s-header__theme-toggle:focus, .s-header__theme-toggle:hover { background-color : transparent; border-color : transparent; } .s-header__theme-icon { height : 2.8rem; width : 2.8rem; display : none; } /* no [data-theme] at all = "system" status, the toggle's third click state * (follows the OS preference — see the prefers-color-scheme block above) */ .s-header__theme-icon--system { display : block; } [data-theme="light"] .s-header__theme-icon--system, [data-theme="dark"] .s-header__theme-icon--system { display : none; } [data-theme="light"] .s-header__theme-icon--sun { display : block; } [data-theme="dark"] .s-header__theme-icon--moon { display : block; } /* ------------------------------------------------------------------- * responsive: * site-header * ------------------------------------------------------------------- */ @media screen and (max-width: 1400px) { .ss-home .s-header__nav>li { padding : 0 1rem; } .ss-home .s-header__nav>li>a { font-size : 1.6rem; } } @media screen and (min-width: 1201px) { /* "Главная" isn't needed in the desktop header of the home page itself * (the mobile menu keeps it) */ .ss-home .s-header__nav>li.s-header__nav-home { display : none; } .s-header__nav li.has-children:hover>a::after, .s-header__nav li.has-children:focus>a::after { transform : rotate(225deg); } .s-header__nav li ul { display : block !important; } } @media screen and (max-width: 1200px) { .s-header { top : 4rem; } .s-header__branding { --branding-left : 2.8rem; } .s-header__nav-wrap { z-index : 300; display : block; opacity : 0; visibility : hidden; background-color : var(--color-white); width : 100%; height : 100%; margin : 0 !important; padding : var(--vspace-1_5) 0; border : none; overflow-y : auto; position : fixed; top : 0; left : 0; bottom : 0; right : 0; } .s-header__nav-wrap .s-header__nav-heading { display : inline-block; margin-left : 5.6vw; } .s-header__nav-wrap .s-header__nav { display : block; counter-reset : ctr; padding : 0 6vw var(--vspace-1); } .s-header__nav-wrap .s-header__nav>li.has-children>a { padding-right : 1.6rem; } .s-header__nav-wrap .s-header__nav>li a { font-size : var(--text-xxxl); line-height : 1.6; padding-left : 2.4rem; } .s-header__nav-wrap .s-header__nav>li a:hover { color : var(--color-1); } .s-header__nav-wrap .s-header__nav>li::before { content : counter(ctr, decimal-leading-zero); counter-increment : ctr; display : inline; font-family : var(--font-1); font-weight : 400; font-size : var(--text-xs); color : black; transform : translateY(-50%); position : absolute; left : 0; top : 2.8em; } [data-theme="dark"] .s-header__nav-wrap .s-header__nav>li::before { color : white; } .s-header__nav-wrap .s-header__nav li { display : block; padding : 0; text-align : left; position : relative; } .s-header__nav-wrap .s-header__nav li ul { width : 100%; opacity : 0; visibility : visible; height : auto; max-height : 0; overflow : hidden; transform : translate(0, 0); background-color : transparent; padding : 0; position : static; } .s-header__nav-wrap .s-header__nav li.sub-menu-is-open>ul { opacity : 1; max-height : 1000px; } .s-header__nav-wrap .s-header__nav li.has-children>a::after { top : 0.85em; } .s-header__nav-wrap .s-header__nav li.sub-menu-is-open>a::after { transform : rotate(225deg); } .s-header__nav-wrap .s-header__nav li ul li a { font-size : calc(var(--text-size) * 0.8889); font-weight : 300; line-height : var(--vspace-0_5); color : var(--color-text-light); padding : .4rem 1.6rem .2rem 3.2rem; } .s-header__nav-wrap .s-header__nav li ul li a:focus, .s-header__nav-wrap .s-header__nav li ul li a:hover { color : var(--color-text-black); } .s-header__nav-wrap .s-header__nav li.current-menu-item a { border : none; } .s-header__menu-toggle { display : block; } .s-header__search-trigger { right : 6.4rem; } .s-header__search-trigger svg { height : 3.2rem; width : 3.2rem; } .s-header__theme-toggle { right : 10.3rem; } .s-header__theme-icon { height : 3.2rem; width : 3.2rem; } .ss-home .s-header__nav li>a { font-size : var(--text-xxxl); } body.menu-is-open .s-header__nav-wrap { opacity : 1; visibility : visible; } } @media screen and (max-width: 1200px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-header__nav-wrap .s-header__nav>li::before { color : white; } } @media screen and (max-width: 600px) { .s-header__nav-wrap .s-header__nav-heading { margin-left : 7vw; } .s-header__nav { padding : 0 8vw var(--vspace-1); } } @media screen and (max-width: 400px) { .s-header__nav>li a { font-size : var(--text-xxl); padding-left : 2.2rem; } .s-header__nav>li::before { top : 2.6rem; } } /* =================================================================== * # HERO * * * ------------------------------------------------------------------- */ .hero { --entry-title-size : 3.8rem; --text-multiplier : 1; background-color : var(--color-body); width : 100%; height : 100vh; min-height : calc(25.5 * var(--space)); overflow : hidden; position : relative; } /* -------------------------------------------------------------------- * ## hero slider * -------------------------------------------------------------------- */ .hero__slider { --slider-bg-color : var(--color-gray-1); display : block; position : absolute; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; min-height : calc(25.5 * var(--space)); } .hero__slider .swiper-pagination { font-size : var(--text-sm); width : auto; transform : translateY(-50%); top : 50%; right : 4rem; left : auto; bottom : auto; } .hero__slider .swiper-pagination .swiper-pagination-bullet { display : block; outline : none; font-weight : 300; width : auto; height : auto; background : transparent; color : var(--color-gray-12); margin : 1.4rem 0; opacity : 1; position : relative; } .hero__slider .swiper-pagination .swiper-pagination-bullet::before { content : "0"; } .hero__slider .swiper-pagination .swiper-pagination-bullet:nth-child(n + 10)::before { content : none; } .hero__slider .swiper-pagination .swiper-pagination-bullet-active { font-weight : 400; color : black; } .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after { content : ""; display : block; background-color : black; height : 1px; width : 2.8rem; position : absolute; top : 50%; right : -4rem; pointer-events : none; } [data-theme="dark"] .hero__slider .swiper-pagination .swiper-pagination-bullet-active { color : white; } [data-theme="dark"] .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after { background-color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__slider .swiper-pagination .swiper-pagination-bullet-active { color : white; } :root:not([data-theme="light"]) .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after { background-color : white; } } .hero__slide { background-color : var(--slider-bg-color); display : flex; align-items : center; position : relative; } .hero__slide::before { content : ""; display : block; background-color : black; width : 50%; height : 100%; position : absolute; top : 0; right : 50%; bottom : 0; left : 0; } .hero__entry-image { background-size : cover; background-position : center; background-repeat : no-repeat; width : 50%; position : absolute; top : 0; right : 50%; bottom : 0; left : 0; } .hero__entry-image::before { z-index : 2; content : ""; display : block; position : absolute; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; pointer-events : none; background : black; background : linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 94%); opacity : 0.3; mix-blend-mode : multiply; } .hero__ash { z-index : 2; position : absolute; top : 0; left : 0; right : 0; bottom : 0; overflow : hidden; pointer-events : none; } .ash-particle { position : absolute; bottom : -5%; border-radius : 50%; background : radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 180, 0.35) 60%, rgba(255, 220, 180, 0) 100%); filter : blur(0.4px); opacity : 0; animation-name : ash-float; animation-timing-function : ease-in-out; animation-iteration-count : infinite; } @keyframes ash-float { 0% { bottom : -5%; opacity : 0; transform : translateX(0); } 12% { opacity : 0.85; } 50% { transform : translateX(var(--drift-x)); } 88% { opacity : 0.2; } 100% { bottom : 105%; opacity : 0; transform : translateX(calc(var(--drift-x) * 1.8)); } } .hero__glitch { z-index : 1; position : absolute; top : 0; left : 0; right : 0; bottom : 0; overflow : hidden; pointer-events : none; } .glitch-slice { position : absolute; top : 0; left : 0; right : 0; bottom : 0; background-size : cover; background-position : center; background-repeat : no-repeat; animation-name : glitch-shift; animation-timing-function : steps(1, end); animation-iteration-count : infinite; } @keyframes glitch-shift { 0%, 91%, 100% { transform : translateX(0); } 92% { transform : translateX(var(--glitch-x)); } 93% { transform : translateX(calc(var(--glitch-x) * -0.6)); } 94% { transform : translateX(calc(var(--glitch-x) * 0.8)); } 95% { transform : translateX(0); } 96% { transform : translateX(calc(var(--glitch-x) * -0.4)); } 97%, 100% { transform : translateX(0); } } .hero__entry-text { width : 50%; display : flex; justify-content : center; margin-left : 50%; margin-right : 6rem; padding-top : calc(8.8rem + var(--vspace-3)); padding-bottom : var(--vspace-4); } .hero__entry-text-inner { z-index : 2; box-sizing : border-box; background-color : var(--slider-bg-color); padding : var(--vspace-1) 4rem var(--vspace-2) 6rem; text-align : center; max-width : 680px; max-height : calc(20 * var(--space)); overflow : hidden; position : relative; } .hero__entry-meta { margin-left : .4rem; margin-bottom : var(--vspace-0_5); } .hero__entry-meta .cat-links { font-weight : 400; font-size : var(--text-sm); text-transform : uppercase; letter-spacing : .2em; color : var(--color-text-dark); } .hero__entry-title { font-size : calc(var(--entry-title-size) * var(--text-multiplier)); line-height : 1.158; letter-spacing : -0.015em; margin-top : 0; margin-bottom : var(--vspace-1_5); } .hero__entry-title a { color : var(--color-text-dark); } .hero__entry-desc { max-width : 540px; margin-right : auto; margin-left : auto; } .hero__more-link { display : inline-block; color : var(--color-text-dark); font-weight : 500; font-size : 1.15rem; text-transform : uppercase; letter-spacing : .3em; border-bottom : 1px solid transparent; } .hero__more-link:focus, .hero__more-link:hover { color : var(--color-text-dark); border-bottom : 1px solid black; } /* -------------------------------------------------------------------- * ## hero scroll down * -------------------------------------------------------------------- */ .hero__scroll-down { z-index : 2; display : flex; align-items : center; font-size : calc(var(--text-size) * 0.5556); font-weight : 600; text-transform : uppercase; letter-spacing : .3em; color : black !important; position : absolute; bottom : 4.4rem; left : calc(100% - 3rem); transform-origin : left bottom; transform : rotate(-90deg); width : 200px; } .hero__scroll-down svg { margin-right : 1.2rem; height : var(--vspace-0_625); width : var(--vspace-0_625); } .hero__scroll-down svg path { stroke : black; } [data-theme="dark"] .hero__scroll-down { color : white !important; } [data-theme="dark"] .hero__scroll-down svg path { stroke : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__scroll-down { color : white !important; } :root:not([data-theme="light"]) .hero__scroll-down svg path { stroke : white; } } /* -------------------------------------------------------------------- * ## slide transitions * -------------------------------------------------------------------- */ .hero__entry-image, .hero__entry-text-inner, .hero__entry-text-inner> :nth-child(n) { transition-timing-function : cubic-bezier(0.28, 0.12, 0.22, 1); transition-duration : .4s; transition-delay : 0s; opacity : 0; } .hero__entry-image, .hero__entry-text-inner { transition-property : opacity, visibility; visibility : hidden; } .hero__entry-text-inner> :nth-child(n) { transition-property : opacity, transform; transform : translate(0, 50px); } .no-js .hero__entry-image, .no-js .hero__entry-text-inner, .no-js .hero__entry-text-inner> :nth-child(n), .swiper-slide-active .hero__entry-image, .swiper-slide-active .hero__entry-text-inner, .swiper-slide-active .hero__entry-text-inner> :nth-child(n) { opacity : 1; } .no-js .hero__entry-image, .swiper-slide-active .hero__entry-image { visibility : visible; transition-delay : .4s; } .no-js .hero__entry-text-inner, .swiper-slide-active .hero__entry-text-inner { visibility : visible; transition-delay : .8s; } .no-js .hero__entry-text-inner> :nth-child(1), .swiper-slide-active .hero__entry-text-inner> :nth-child(1) { transition-delay : 1s; } .no-js .hero__entry-text-inner> :nth-child(2), .swiper-slide-active .hero__entry-text-inner> :nth-child(2) { transition-delay : 1.2s; } .no-js .hero__entry-text-inner> :nth-child(3), .swiper-slide-active .hero__entry-text-inner> :nth-child(3) { transition-delay : 1.4s; } .no-js .hero__entry-text-inner> :nth-child(4), .swiper-slide-active .hero__entry-text-inner> :nth-child(4) { transition-delay : 1.6s; } .no-js .hero__entry-text-inner> :nth-child(1), .no-js .hero__entry-text-inner> :nth-child(2), .no-js .hero__entry-text-inner> :nth-child(3), .no-js .hero__entry-text-inner> :nth-child(4), .swiper-slide-active .hero__entry-text-inner> :nth-child(1), .swiper-slide-active .hero__entry-text-inner> :nth-child(2), .swiper-slide-active .hero__entry-text-inner> :nth-child(3), .swiper-slide-active .hero__entry-text-inner> :nth-child(4) { transform : translate(0, 0); } /* ------------------------------------------------------------------- * responsive: * hero * ------------------------------------------------------------------- */ @media screen and (max-width: 1700px) { .hero { --text-multiplier : .92; } .hero__entry-text-inner { max-width : 600px; } } @media screen and (max-width: 1600px) { .hero { --text-multiplier : .9; } } @media screen and (max-width: 1500px) { .hero { --text-multiplier : .87; } } @media screen and (max-width: 1400px) { .hero { --text-multiplier : .8; } .hero__slider .swiper-pagination { font-size : calc(var(--text-size) * 0.7778); } .hero__slider .swiper-pagination .swiper-pagination-bullet { margin : .8rem 0; } .hero__entry-text-inner { max-width : 540px; } .hero__entry-meta .cat-links { font-size : calc(var(--text-size) * 0.7778); } .hero__entry-title { margin-bottom : var(--vspace-1_25); } .hero__entry-desc { max-width : 440px; font-size : calc(var(--text-size) * 0.8889); line-height : var(--vspace-0_875); margin-bottom : var(--vspace-0_75); } .hero__more-link { font-size : 1.1rem; } } @media screen and (max-width: 1300px) { .hero { --text-multiplier : .76; } } @media screen and (max-width: 1200px) { .hero { --text-multiplier : .72; } .hero__entry-desc { max-width : 380px; } } @media screen and (max-width: 1100px) { .hero { --text-multiplier : .66; } } @media screen and (max-width: 1000px) { .hero { overflow : auto; } .hero__entry-text { width : 100%; margin : 0 8rem; margin-top : 25%; padding-top : calc(5.5 * var(--space)); padding-bottom : var(--vspace-4_5); } .hero__entry-text-inner { max-width : 520px; padding : var(--vspace-2) var(--vspace-1_5) var(--vspace-1_5); border : 1px solid var(--color-gray-2); box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06); } .hero__entry-image { width : 100%; right : 0; bottom : 50%; } .hero__slide::before { width : 100%; height : 50%; right : 0; bottom : 50%; } .hero__slider .swiper-pagination { transform : none; } .ss-home .s-header__search-trigger svg path { stroke : white; } .ss-home .s-header__menu-toggle span { background-color : white; } .ss-home .s-header__theme-toggle { color : white; } } @media screen and (max-width: 800px) { .hero { --text-multiplier : .62; } } @media screen and (max-width: 700px) { .hero__slider .swiper-pagination { right : 3.2rem; } .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after { width : 2.2rem; right : -3.2rem; } .hero__scroll-down { left : calc(100% - 2.4rem); } } @media screen and (max-width: 600px) { .hero { --text-multiplier : .55; } .hero__entry-text { margin-left : 7rem; margin-right : 7rem; } .hero__entry-text-inner { padding : 4.8rem 3.6rem 4rem; } } @media screen and (max-width: 500px) { .hero { --text-multiplier : .46; } .hero__slider .swiper-pagination { right : 1.8rem; } .hero__slider .swiper-pagination .swiper-pagination-bullet-active::after { display : none; } .hero__scroll-down { bottom : 2.4rem; } .hero__scroll-down svg { height : 2.4rem; width : 2.4rem; } .hero__scroll-down span { display : none; } .hero__entry-text { margin-left : 5rem; margin-right : 5rem; } .hero__entry-text-inner { padding : 4.8rem 3.2rem 4rem; } } @media screen and (max-width: 400px) { .hero { --text-multiplier : .44; } .hero__slider .swiper-pagination { transform : translateY(0); top : auto; right : auto; left : 2rem; bottom : 2.4rem; } .hero__slider .swiper-pagination .swiper-pagination-bullet { display : inline-block; font-size : 1.1rem; height : 2rem; width : 2rem; line-height : 2rem; margin : 0 .6rem; background-color : rgba(0, 0, 0, 0.5); text-align : center; } .hero__slider .swiper-pagination .swiper-pagination-bullet::before { display : none; } .hero__slider .swiper-pagination .swiper-pagination-bullet-active { background-color : white; color : black; } .hero__entry-text { margin-left : 2rem; margin-right : 2rem; } .hero__entry-text-inner { padding : 4.8rem 2.4rem 4rem; } .hero__entry-title { margin-bottom : var(--vspace-1); } } /* =================================================================== * # SITE CONTENT * * * ------------------------------------------------------------------- */ .s-content { padding-top : var(--vspace-5); } .s-content--blog, .s-content--page { padding-top : var(--vspace-5); } .ss-home .s-content { padding-top : 0; } /* -------------------------------------------------------------------- * ## pageheader * -------------------------------------------------------------------- */ .s-pageheader { text-align : center; } .s-pageheader .row { max-width : 900px; } .s-pageheader .page-title { font-size : var(--text-display-3); line-height : 1.085; margin-top : 0; margin-bottom : var(--vspace-1); } .ss-game-detail .s-pageheader .page-title { font-size : var(--text-display-1); } /* search results: the query is the title — smaller than section titles */ .ss-search .s-pageheader .page-title { font-size : var(--text-display-1); } @media screen and (max-width: 500px) { .ss-search .s-pageheader .page-title { font-size : 3.6rem; } } .game-detail__title-en { display : block; font-family : var(--font-1); font-size : var(--text-size); color : var(--color-gray-13); margin-top : calc(var(--vspace-0_875) * -1); margin-bottom : var(--vspace-1); } /* "N партий · M впечатлений" right under the English title */ .game-detail__title-en:has(+ .game-detail__stats) { margin-bottom : 0; } .game-detail__title-en + .game-detail__stats { margin-top : 0; } /* game page: "Место в рейтинге" — the game's row with the row before and * after it, the neighbours half transparent */ .game-detail__rating-list { margin-bottom : 0; } .game-detail__rating-list .rating-list__item--dimmed { opacity : .5; } /* the rating row a game page links to (/rating/#rating-game-ID) stays * clear of the sticky header */ .rating-list__item { scroll-margin-top : 12rem; } .game-detail__back { display : inline-block; font-family : var(--font-1); font-size : var(--text-xs); font-weight : 600; text-transform : uppercase; letter-spacing : .15em; color : var(--color-gray-13); border-bottom : 1px solid transparent; margin-bottom : var(--vspace-1); } .game-detail__back:focus, .game-detail__back:hover { color : black; border-bottom : 1px solid black; } [data-theme="dark"] .game-detail__back:focus, [data-theme="dark"] .game-detail__back:hover { color : white; border-bottom : 1px solid white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-detail__back:focus, :root:not([data-theme="light"]) .game-detail__back:hover { color : white; border-bottom : 1px solid white; } } .s-pageheader .page-title__small-type { display : block; font-family : var(--font-1); font-weight : 300; font-size : calc(var(--text-size) * 0.8889); letter-spacing : 0; line-height : 1; color : var(--color-text-light); } .s-pageheader+.bricks { padding-top : var(--vspace-2); } .s-pagewrap.ss-game-detail { /* .s-pagewrap's overflow:hidden makes it a scroll container, which breaks position:sticky on the card column below (mixing overflow-x: hidden with overflow-y:visible still computes overflow-y as auto per spec, so it has to go fully visible on both axes here) */ overflow : visible; } .game-detail { padding-top : var(--vspace-2); padding-bottom : var(--vspace-3); } @media screen and (min-width: 801px) { .game-detail__card-col { position : sticky; top : var(--vspace-2); align-self : flex-start; padding-right : calc(var(--vspace-2) * 0.75); } .game-detail__description-col { padding-left : calc(var(--vspace-2) * 0.75); } } .game-detail__card-col .entry__title, .game-detail__card-col .entry__title-en { max-height : 0; margin-top : 0; margin-bottom : 0; overflow : hidden; opacity : 0; visibility : hidden; transition : opacity 0.25s ease, visibility 0.25s ease, max-height 0.25s ease, margin 0.25s ease; } .game-detail__card-col.is-stuck .entry__title { max-height : 10rem; margin-bottom : var(--vspace-0_875); opacity : 1; visibility : visible; } /* right under the title (its bottom margin is the small one of the game * cards, so no pulling up: a two-line title would be overlapped) */ .game-detail__card-col.is-stuck .entry__title-en { max-height : 10rem; margin-top : 0; margin-bottom : var(--vspace-0_875); opacity : 1; visibility : visible; } .game-detail__no-description { color : var(--color-gray-13); } .game-detail__links { display : flex; flex-wrap : wrap; gap : var(--vspace-1) var(--vspace-1_5); margin-top : var(--vspace-1_5); margin-left : 0; padding : var(--vspace-1) 0 0; border-top : 1px solid var(--color-gray-4); list-style : none; } .game-detail__links li { margin : 0; } /* "Данные от [DICEFEST logo]" (opens #dicefest-popup): on the right of the row */ .game-detail__links .game-detail__links-dicefest { margin-left : auto; } /* mobile: the short form — "BGG", "Tesera", the logo */ @media screen and (max-width: 800px) { .game-detail__links-prefix { display : none; } } /* no underline (on hover) under the logo */ .game-detail__links .game-detail__links-dicefest a, .game-detail__links .game-detail__links-dicefest a:hover, .game-detail__links .game-detail__links-dicefest a:focus { border-bottom : 0 !important; text-decoration : none; } .dicefest-logo { display : inline-block; width : auto; height : .9em; margin-left : .3rem; vertical-align : -.05em; } .game-detail__links a { font-family : var(--font-1); font-size : var(--text-xs); font-weight : 600; text-transform : uppercase; letter-spacing : .1em; color : black; border-bottom : 1px solid transparent; } .game-detail__links a:focus, .game-detail__links a:hover { border-bottom : 1px solid black; } [data-theme="dark"] .game-detail__links a { color : white; } [data-theme="dark"] .game-detail__links a:focus, [data-theme="dark"] .game-detail__links a:hover { border-bottom : 1px solid white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-detail__links a { color : white; } :root:not([data-theme="light"]) .game-detail__links a:focus, :root:not([data-theme="light"]) .game-detail__links a:hover { border-bottom : 1px solid white; } } /* "see all" links in block title rows ("Весь рейтинг", "Все впечатления", * "Все игры") — gray like "← Назад к коллекции", turning black (white in * the dark theme) and underlined on hover */ .game-detail__posts-more { font-family : var(--font-1); font-size : var(--text-xs); font-weight : 600; text-transform : uppercase; letter-spacing : .15em; color : var(--color-gray-13); border-bottom : 1px solid transparent; } .game-detail__posts-more:focus, .game-detail__posts-more:hover { color : black; border-bottom : 1px solid black; } [data-theme="dark"] .game-detail__posts-more:focus, [data-theme="dark"] .game-detail__posts-more:hover { color : white; border-bottom : 1px solid white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .game-detail__posts-more:focus, :root:not([data-theme="light"]) .game-detail__posts-more:hover { color : white; border-bottom : 1px solid white; } } /* block title row (game page, post page): heading on the left, a "see * all" link ("Весь рейтинг", "Все впечатления", "Все игры") on the right */ .game-detail__posts-head { display : flex; align-items : baseline; justify-content : space-between; gap : var(--vspace-1); margin-top : var(--vspace-1); margin-bottom : var(--vspace-1_5); } .game-detail__posts-head .game-detail__posts-title, .game-detail__posts-head .entry__games-title, .game-detail__posts-head .entry__other-posts-title { margin : 0; } .game-detail__posts-more { flex-shrink : 0; } .game-detail__posts { --brick-padding : 3rem; margin-top : var(--vspace-1); padding : var(--vspace-0_75) 0 var(--vspace-1); border-top : 1px solid var(--color-gray-4); } .game-detail__posts-title { margin-top : var(--vspace-1); margin-bottom : var(--vspace-1_5); } .game-detail__posts .bricks-wrapper { margin-left : calc(var(--brick-padding) * -1); margin-right : calc(var(--brick-padding) * -1); } @media screen and (max-width: 700px) { .game-detail__posts { --brick-padding : 1.6rem; } } /* "У кого есть эта игра" on a catalog game page: one author per row, * full width — avatar, name with "Любимая игра", plays and posts under it, "Перейти" (the game on the author's site) on the right */ .game-owners { margin : 0; list-style : none; } .game-owners__item { display : flex; align-items : center; gap : 1.6rem; margin : 0; padding : var(--vspace-0_5) 0; } .game-owners__item + .game-owners__item { border-top : 1px solid var(--color-gray-3); } .game-owners__avatar { flex : none; width : 7.2rem; height : 7.2rem; border-radius : 50%; overflow : hidden; background : var(--color-gray-3); } .game-owners__avatar img { display : block; width : 100%; height : 100%; object-fit : cover; } .game-owners__text { flex : 1; display : flex; flex-direction : column; gap : .4rem; min-width : 0; } .game-owners__name { font-family : var(--font-2); font-size : 2rem; line-height : 1.3; color : var(--color-text-dark); } .game-owners__notes { font-size : 1.4rem; line-height : 1.5; color : var(--color-text-light); } .game-owners__go { flex : none; margin : 0; } @media screen and (max-width: 600px) { .game-owners__item { flex-wrap : wrap; } .game-owners__go { width : 100%; } } /* "Читать лонгрид" between the "Впечатления об этой игре" title and its posts: * the explanation on the left, the button on the right, in one row */ .game-detail__longread { display : flex; align-items : center; justify-content : space-between; gap : var(--vspace-0_75); margin-bottom : var(--vspace-1); padding : var(--vspace-0_75) var(--vspace-1); border-radius : var(--border-radius, 8px); background : var(--color-gray-1); } .game-detail__longread-text { margin : 0; font-size : 1.6rem; line-height : 1.5; color : var(--color-text-light); } .game-detail__longread-text b { color : var(--color-text); } .game-detail__longread-btn { flex : none; margin : 0; } @media screen and (max-width: 700px) { .game-detail__longread { flex-direction : column; align-items : stretch; text-align : center; } } /* advertising marking of an ad post (ad_marking_html()): on its page, * card and in the longread */ .ad-marking { margin : var(--vspace-0_25) 0 var(--vspace-0_5); font-size : 1.3rem; line-height : 1.5; color : var(--color-text-light); } .ad-marking b { font-weight : 600; letter-spacing : .05em; text-transform : uppercase; color : var(--color-text); } .ad-marking--card { margin : .4rem 0 0; font-size : 1.1rem; line-height : 1.4; } .entry__header .ad-marking { margin-top : var(--vspace-0_5); } /* "Экземпляр от издательства" on a post (not an ad) */ .ad-marking--gifted { font-style : italic; } /* the post edit form: "Реклама" and "Экземпляр от издательства" side by * side, the hint "Возможно, реклама" above them */ .post-edit-form__ad-switches { display : flex; flex-wrap : wrap; gap : var(--vspace-0_25) var(--vspace-1); } .post-edit-form__ad-suspect { margin : 0 0 var(--vspace-0_5); padding : 1rem 1.4rem; border-radius : var(--border-radius); background : var(--color-notice); color : var(--color-notice-content); font-size : 1.3rem; line-height : 1.5; } .post-edit-form__ad-suspect[hidden], .post-edit-form__gifted-field[hidden] { display : none; } .post-edit-form__gifted-field { margin-top : var(--vspace-0_5); } .post-edit-form__optional { font-weight : 400; color : var(--color-text-light); } /* "Реклама" in the post edit form: the switch, then erid / advertiser / * ИНН in one row */ .game-edit-form .post-edit-form__ad { margin-bottom : var(--vspace-1_5); } .post-edit-form__ad-fields { display : grid; grid-template-columns : 1fr 1.6fr 1fr; gap : 0 var(--vspace-0_5); margin-top : var(--vspace-0_5); margin-bottom : 0; } /* the hint sits right under the fields */ .post-edit-form__ad-fields .game-edit-form__field, .post-edit-form__ad-fields input { margin-bottom : 0; } .post-edit-form__ad-hint { margin-top : .8rem !important; } .post-edit-form__ad-fields[hidden], .post-edit-form__ad-hint[hidden] { display : none; } .post-edit-form__ad-hint { margin : 0; font-size : 1.3rem; color : var(--color-text-light); } @media screen and (max-width: 700px) { .post-edit-form__ad-fields { grid-template-columns : 1fr; row-gap : var(--vspace-0_5); } } /* the longread page (collection/longread.php): the posts * one after another, each opened by its title */ .entry__header.longread__header { margin-bottom : var(--vspace-0_5); } .longread__kicker { margin : var(--vspace-0_25) 0 0; font-size : 1.4rem; letter-spacing : .1em; text-transform : uppercase; color : var(--color-text-light); } .longread__post { padding-top : var(--vspace-2); } .longread__post-header { max-width : 800px; margin : 0 auto var(--vspace-1); text-align : center; } .longread__post-title { margin : 0 0 var(--vspace-0_25); } .longread__post-title a { color : inherit; } /* the loader under the last loaded post (ssLongread), and a post fading in */ .longread__loader { display : flex; justify-content : center; padding : var(--vspace-2) 0; } .longread__spinner { width : 3.6rem; height : 3.6rem; border : 3px solid var(--color-gray-4); border-top-color : var(--color-text); border-radius : 50%; animation : load-more-spin 0.8s linear infinite; } .longread__post--new { animation : longread-in 0.5s ease-out both; } @keyframes longread-in { from { opacity : 0; transform : translateY(2rem); } to { opacity : 1; transform : none; } } @media (prefers-reduced-motion: reduce) { .longread__post--new { animation : none; } } .longread__end { margin-top : var(--vspace-1); text-align : center; } .game-detail__gallery { margin-top : var(--vspace-1); padding : var(--vspace-0_75) 0 var(--vspace-1); border-top : 1px solid var(--color-gray-4); } .game-detail__gallery-title { margin-top : var(--vspace-1); margin-bottom : var(--vspace-1_5); } /* the main domain: the photos are the authors' — a gray note under the title */ .game-detail__gallery-title:has(+ .game-detail__gallery-note) { margin-bottom : var(--vspace-0_25); } .game-detail__gallery-note { margin : 0 0 var(--vspace-1_5); font-size : 1.4rem; line-height : 1.5; color : var(--color-text-light); } @media screen and (max-width: 700px) { .game-detail__gallery .entry__gallery-grid-sizer, .game-detail__gallery .entry__gallery-grid-item { width : 50%; } } @media screen and (max-width: 480px) { .game-detail__gallery .entry__gallery-grid-sizer, .game-detail__gallery .entry__gallery-grid-item { width : 100%; } } /* click-to-enlarge: game cover/gallery + post gallery (grid/single/slider) */ .game-detail__card-col .entry__thumb, .game-detail__gallery .entry__gallery-grid-item, .entry__media .entry__gallery-grid-item, .entry__media .featured-image { cursor : pointer; } .game-detail__gallery .entry__gallery-grid-item, .entry__media .entry__gallery-grid-item, .entry__media .featured-image { position : relative; } .game-detail__card-col .entry__thumb::before, .game-detail__gallery .entry__gallery-grid-item::before, .entry__media .entry__gallery-grid-item::before, .entry__media .featured-image::before { content : ""; display : block; background : rgba(0, 0, 0, 0.5); opacity : 0; visibility : hidden; width : 100%; height : 100%; transition : all 0.3s ease-in-out; position : absolute; top : 0; left : 0; z-index : 1; } @media (hover: hover) { .game-detail__card-col .entry__thumb:hover::before, .game-detail__gallery .entry__gallery-grid-item:hover::before, .entry__media .entry__gallery-grid-item:hover::before, .entry__media .featured-image:hover::before { opacity : 1; visibility : visible; } } .zoom-icon { display : flex; align-items : center; justify-content : center; position : absolute; top : 50%; left : 50%; z-index : 2; opacity : 0; visibility : hidden; transform : translate(-50%, -50%) scale(0.5); transition : all 0.3s ease-in-out; pointer-events : none; } @media (hover: hover) { .game-detail__card-col .entry__thumb:hover .zoom-icon, .game-detail__gallery .entry__gallery-grid-item:hover .zoom-icon, .entry__media .entry__gallery-grid-item:hover .zoom-icon, .entry__media .featured-image:hover .zoom-icon { opacity : 1; visibility : visible; transform : translate(-50%, -50%) scale(1); } } /* game detail: lightbox */ .lightbox { position : fixed; inset : 0; z-index : 500; opacity : 0; visibility : hidden; transition : opacity 0.3s ease, visibility 0.3s ease; } .lightbox.is-open { opacity : 1; visibility : visible; } .lightbox__overlay { position : absolute; inset : 0; background : rgba(0, 0, 0, 0.5); } .lightbox__content { position : relative; z-index : 1; display : flex; align-items : center; justify-content : center; width : 100%; height : 100%; padding : var(--vspace-2); box-sizing : border-box; } .lightbox__image { max-width : 100%; max-height : 100%; object-fit : contain; margin : 0; } .lightbox__close, .lightbox__nav { display : flex; align-items : center; justify-content : center; padding : 0; border : none; border-radius : 50%; background-color : rgba(0, 0, 0, 0.5); color : white; transition : background-color 0.2s ease-in-out; position : absolute; z-index : 2; } .lightbox__close:focus, .lightbox__close:hover, .lightbox__nav:focus, .lightbox__nav:hover { background-color : rgba(255, 255, 255, 0.3); color : white; } .lightbox__close { top : var(--vspace-1); right : var(--vspace-1); width : 44px; height : 44px; } .lightbox__nav { top : 50%; transform : translateY(-50%); width : 48px; height : 48px; } .lightbox__nav--prev { left : var(--vspace-1); } .lightbox__nav--next { right : var(--vspace-1); } .lightbox__counter { position : absolute; z-index : 2; bottom : var(--vspace-1); left : 50%; transform : translateX(-50%); padding : .4rem 1.2rem; border-radius : var(--border-radius); background-color : rgba(0, 0, 0, 0.5); color : white; font-size : 1.3rem; } @media screen and (max-width: 600px) { .lightbox__content { padding : var(--vspace-1); } .lightbox__nav { width : 40px; height : 40px; } .lightbox__nav--prev { left : var(--vspace-0_5); } .lightbox__nav--next { right : var(--vspace-0_5); } } .page-title-row { display : inline-flex; align-items : center; gap : 1.6rem; } .game-add-trigger { display : flex; align-items : center; justify-content : center; flex-shrink : 0; width : 44px; height : 44px; padding : 0; margin : 0 0 var(--vspace-1); border : none; border-radius : 50%; background-color : var(--color-black); color : var(--color-white); transition : background-color 0.2s ease-in-out; } .game-add-trigger[hidden] { display : none; } .game-add-trigger:focus, .game-add-trigger:hover { background-color : var(--color-1, #333); color : white; } .collection-filter { list-style : none; display : flex; justify-content: center; flex-wrap : wrap; gap : 2.4rem; margin : 0; padding : 0; } .collection-filter a { display : inline-block; font-family : var(--font-1); font-size : 1.5rem; font-weight : 500; text-transform : uppercase; letter-spacing : .1em; color : var(--color-gray-13); text-decoration: none; transition : color .2s; } .collection-filter a:hover { color : var(--color-text-dark); } .collection-filter__label { padding-bottom : .5em; border-bottom : 1px solid transparent; transition : border-color .2s; } .collection-filter li.is-active a { color : var(--color-text-dark); } .collection-filter li.is-active a .collection-filter__label { border-bottom : 1px solid var(--color-text-dark); } .collection-filter__count { margin-left : .3em; font-weight : 400; opacity : .55; } /* posts: sort direction icon next to the active item (click it again to * flip the order); arrow down = newest first, flipped = oldest first */ .collection-filter__sort { display : none; margin-left : .4em; vertical-align : middle; line-height : 0; } .collection-filter li.is-active .collection-filter__sort { display : inline-block; } .collection-filter__sort svg { display : block; transition : transform .2s; } .collection-filter.is-sort-asc .collection-filter__sort svg { transform : scaleY(-1); } /* ------------------------------------------------------------------- * responsive: * site content * ------------------------------------------------------------------- */ @media screen and (max-width: 1400px) { .s-content--blog, .s-content--page { padding-top : calc(6 * var(--space)); } } @media screen and (max-width: 1200px) { .s-content--blog, .s-content--page { padding-top : var(--vspace-5); } } @media screen and (max-width: 800px) { .s-pageheader .page-title { font-size : var(--text-display-2); } .s-pageheader .page-title__small-type { font-size : calc(var(--text-size) * 0.8333); } } @media screen and (max-width: 500px) { .s-content--blog, .s-content--page { padding-top : var(--vspace-4_5); } .s-pageheader .page-title { font-size : 4.8rem; } .collection-filter { gap : 1.2rem 2rem; } .collection-filter a { font-size : 1.3rem; } } @media screen and (max-width: 400px) { .s-content { padding-top : var(--vspace-4); } .s-pageheader .page-title { font-size : 4.2rem; } .s-pageheader .page-title__small-type { font-size : 1.3rem; } .collection-filter { gap : 1rem 1.4rem; } .collection-filter a { font-size : 1.15rem; } .s-pageheader+.bricks { padding-top : var(--vspace-1); } } /* =================================================================== * # FOOTER * * * ------------------------------------------------------------------- */ .s-footer { background-color : var(--color-gray-4); font-weight : 300; padding-top : var(--vspace-4_5); padding-bottom : var(--vspace-3_5); position : relative; } /* the light-theme gray ramp is front-loaded with shades close to white, so * inverting it 1:1 for dark mode turns gray-4 (barely-there tint in light * mode) into a fairly strong mid-gray — pick a subtler dark-mode tint here * instead of the auto-inverted one */ [data-theme="dark"] .s-footer { background-color : var(--color-gray-1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-footer { background-color : var(--color-gray-1); } } .s-footer>.row { max-width : 1520px; } .s-footer h2 { font-size : var(--text-xxxl); line-height : var(--vspace-1_5); margin-top : 0; margin-bottom : var(--vspace-0_375); } .s-footer h4 { font-family : var(--font-1); font-weight : 500; font-size : calc(var(--text-size) * 1.0556); margin-top : 0; margin-bottom : var(--vspace-0_5); } .s-footer .link-list { list-style : none; margin-left : 0; } .s-footer .link-list li { padding-left : 0; white-space : nowrap; } .s-footer .link-list a { color : var(--color-text); border : none; } .s-footer .link-list a:focus, .s-footer .link-list a:hover, .s-footer .link-list a:active { color : var(--color-1); } .s-footer__main { font-size : calc(var(--text-size) * 0.8889); line-height : var(--vspace-0_875); border-top : 1px solid var(--color-border); padding-top : var(--vspace-1_25); } .s-footer__about { margin-right : auto; } .s-footer__bottom { padding-top : var(--vspace-0_25); font-size : var(--text-sm); line-height : var(--vspace-0_75); color : var(--color-gray-14); } .s-footer__bottom a { color : black; } /* ------------------------------------------------------------------- * ## subscription form * ------------------------------------------------------------------- */ .s-footer__subscribe { margin-bottom : var(--vspace-0_5); line-height : var(--vspace-0_875); text-align : center; } .s-footer__subscribe .mc-form { display : flex; margin-top : var(--vspace-1_5); } .s-footer__subscribe input[type="email"], .s-footer__subscribe input[type="submit"] { margin-bottom : var(--vspace-0_5); } .s-footer__subscribe input[type="email"] { background-color : var(--color-white); font-size : calc(var(--text-size) * 0.8889); border : 1px solid var(--color-gray-5); border-radius : var(--border-radius) 0 0 var(--border-radius); padding : var(--input-vpadding) 2rem var(--input-vpadding) 2.4rem; text-align : left; box-shadow : none; } .s-footer__subscribe input[type="submit"] { width : 240px; margin-right : 0; border-radius : 0 var(--border-radius) var(--border-radius) 0; } /* -------------------------------------------------------------------- * ## footer social * -------------------------------------------------------------------- */ .s-footer__social { list-style : none; display : flex; margin : 0; } .s-footer__social li { padding-left : 0; margin-right : 1rem; line-height : 1; } .s-footer__social li:last-child { margin-right : 0; } .s-footer__social svg { height : 2.8rem; width : 2.8rem; } .s-footer__social svg path { fill : black; } [data-theme="dark"] .s-footer__social svg path { fill : white; } [data-theme="dark"] .ss-copyright a, [data-theme="dark"] .ss-copyright a:visited { color : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-footer__social svg path { fill : white; } :root:not([data-theme="light"]) .ss-copyright a, :root:not([data-theme="light"]) .ss-copyright a:visited { color : white; } } /* ------------------------------------------------------------------- * ## copyright * ------------------------------------------------------------------- */ .ss-copyright span { display : inline-block; } /* the main site's footer: "Каталог игр" — just the outline, no fill */ .s-footer__catalog-btn.btn--stroke:not(:hover):not(:focus) { background : transparent !important; } /* the main site's footer: no social links, the copyright line centered */ .ss-copyright-col--center .ss-copyright { text-align : center; } .ss-copyright span::after { content : "|"; display : inline-block; padding : 0 .8rem 0 1rem; color : var(--color-gray-10); } .ss-copyright span:last-child::after { display : none; } /* ------------------------------------------------------------------- * ## go top * ------------------------------------------------------------------- */ .ss-go-top { z-index : 2; opacity : 0; visibility : hidden; transform : translate(0, 200%); transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position : fixed; bottom : 6rem; right : 4rem; } .ss-go-top a { display : flex; align-items : center; justify-content : center; text-decoration : none; border : none; height : 6rem; width : 6rem; border-radius : 50%; background-color : var(--color-gray-7); transition : all .3s; position : relative; } .ss-go-top a:focus, .ss-go-top a:hover { background-color : var(--color-black); } .ss-go-top a:focus svg path, .ss-go-top a:hover svg path { stroke : white; } /* the hover/focus background above flips to white in dark mode (via * var(--color-black)), which left this literal white arrow invisible on * top of it */ [data-theme="dark"] .ss-go-top a:focus svg path, [data-theme="dark"] .ss-go-top a:hover svg path { stroke : black; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-go-top a:focus svg path, :root:not([data-theme="light"]) .ss-go-top a:hover svg path { stroke : black; } } .ss-go-top svg { height : 1.8rem; width : 1.8rem; } .ss-go-top svg path { stroke : black; } [data-theme="dark"] .ss-go-top svg path { stroke : white; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-go-top svg path { stroke : white; } } .ss-go-top.link-is-visible { opacity : 1; visibility : visible; transform : translate(0, 0); } /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ @media screen and (max-width: 1500px) { .ss-go-top { right : 2.4rem; } } @media screen and (max-width: 1400px) { .ss-go-top { bottom : 4.8rem; } .ss-go-top a { height : 5.2rem; width : 5.2rem; } } @media screen and (max-width: 1200px) { .s-footer { padding-bottom : var(--vspace-2); } .s-footer>.row { max-width : 900px; } .s-footer__main { margin-bottom : var(--vspace-1); } .s-footer__social { margin-bottom : var(--vspace-0_5); } } @media screen and (max-width: 600px) { .s-footer__subscribe .mc-form { display : block; } .s-footer__subscribe input[type="email"], .s-footer__subscribe input[type="submit"] { border-radius : var(--border-radius); } .s-footer__subscribe input[type="email"] { text-align : center; } .s-footer__subscribe input[type="submit"] { width : 100%; } .ss-copyright span { display : block; } .ss-copyright span::after { display : none; } .ss-go-top a { height : 4.8rem; width : 4.8rem; } } @media screen and (max-width: 400px) { .s-footer { padding-top : var(--vspace-3_5); } .s-footer h2 { font-size : var(--text-xxl); line-height : var(--vspace-1_25); } .ss-go-top { bottom : 4rem; right : 2rem; } .ss-go-top a { height : 4rem; width : 4rem; } .ss-go-top svg { height : 1.6rem; width : 1.6rem; } } /* =================================================================== * # BLOG STYLES * * * ------------------------------------------------------------------- */ .entry-wrap { --entry-title-size : 6rem; --text-multiplier : 1; --width-content-blog : 1200px; --content-primary-padding : 15rem; max-width : var(--width-content-blog); padding-bottom : var(--vspace-5); } .entry-wrap .content-primary, .entry-wrap .comments-wrap { padding-left : var(--content-primary-padding); padding-right : var(--content-primary-padding); } /* entry header */ .entry__header { text-align : center; max-width : 1100px; margin-right : auto; margin-left : auto; margin-bottom : var(--vspace-3); } .entry__header--narrow { max-width : 1000px; } .entry__header--narrower { max-width : 900px; } .entry__title { font-size : calc(var(--entry-title-size) * var(--text-multiplier)); line-height : 1.12; margin-top : 0; margin-bottom : var(--vspace-1); } .entry__meta { display : flex; flex-flow : row wrap; align-items : center; justify-content : center; font-size : calc(var(--text-size) * 0.9444); font-weight : 400; } .entry__meta a { color : var(--color-text); } .entry__meta .cat-links a::after { content : ", "; } .entry__meta .cat-links a:last-child::after { display : none; } .entry__meta>[class*="entry__meta"] { display : flex; align-items : center; margin : 0 1.4rem; } .entry__meta>[class*="entry__meta"] svg { margin-right : .4rem; height : var(--vspace-0_875); width : var(--vspace-0_875); } .entry__meta > .entry__meta-author svg { height : var(--vspace-1); width : var(--vspace-1); } .entry__meta>[class*="entry__meta"] svg path, .entry__meta>[class*="entry__meta"] svg circle { stroke : var(--color-text); } /* entry featured media */ .entry__media { margin-bottom : var(--vspace-2); } .entry__media figure { margin : 0; } .entry__media img { vertical-align : bottom; margin-bottom : 0; } .featured-image img { width : 100%; height : auto; } /* a post's only photo: never taller than the window — a tall (portrait) * one shrinks to the window height and sits centered, the sides gray (as * in the post's photo slider) */ .entry__media .featured-image { background-color : var(--color-gray-2); } .entry__media .featured-image img { max-height : 100vh; max-height : 100svh; object-fit : contain; } /* about page banner photo — same floating ash + glitch overlay as the * homepage hero (both classes are shared/global, just need a positioned, * clipped container the same size as the photo to run them in), but none * of the shared .featured-image click-to-enlarge/lightbox hover behavior */ .about__hero-photo { position : relative; overflow : hidden; border-radius : var(--border-radius); } .about__title-sub { display : inline-block; color : var(--color-text-light); font-size : 0.55em; } /* entry gallery: slider (2+ photos, no grid) */ .entry__gallery-swiper .swiper-slide { height : auto; } .entry__gallery-swiper .swiper-slide img { display : block; width : 100%; height : auto; margin : 0; vertical-align : bottom; } /* a slide is never taller than the window: a photo fills the width (also a smaller one), a tall (portrait) one shrinks to the window height and sits centered, the sides filled with a gray */ .entry__gallery-swiper .swiper-slide { background-color : var(--color-gray-2); } .entry__gallery-swiper .swiper-slide img { max-height : 100vh; max-height : 100svh; object-fit : contain; } @media screen and (max-width: 700px) { .entry__gallery-swiper { width : 100vw; margin-left : calc(50% - 50vw); margin-right : calc(50% - 50vw); } } .entry__gallery-nav { z-index : 2; display : flex; align-items : center; justify-content : center; width : 40px; height : 40px; padding : 0; margin : 0; border : none; border-radius : 50%; background-color : rgba(0, 0, 0, 0.55); color : white; line-height : 1; text-transform : none; letter-spacing : normal; cursor : pointer; transition : background-color 0.2s ease-in-out, opacity 0.2s ease-in-out; position : absolute; top : 50%; margin-top : -20px; } .entry__gallery-nav:focus, .entry__gallery-nav:hover { background-color : black; color : white; } .entry__gallery-nav--prev { left : var(--vspace-0_75); } .entry__gallery-nav--next { right : var(--vspace-0_75); } .entry__gallery-nav.swiper-button-disabled { opacity : 0; pointer-events : none; } .entry__gallery-nav.swiper-button-lock { display : none; } .entry__gallery-swiper .swiper-pagination-bullet { background : white; opacity : 0.5; box-shadow : 0 0 2px rgba(0, 0, 0, 0.5); } .entry__gallery-swiper .swiper-pagination-bullet-active { opacity : 1; background : white; } /* entry gallery: 3-column masonry (thumb_grid on, 9+ photos) */ .entry__gallery-grid { position : relative; } .entry__gallery-grid-sizer, .entry__gallery-grid-item { width : 33.3333%; } /* two or four photos (the post page): two columns */ .entry__gallery-grid--cols-2 .entry__gallery-grid-sizer, .entry__gallery-grid--cols-2 .entry__gallery-grid-item { width : 50%; } .entry__gallery-grid-item { box-sizing : border-box; padding : 0.5px; } .entry__gallery-grid-item img { display : block; width : 100%; height : auto; margin : 0; } /* entry main content */ .entry__content .alignwide img { --img-width : calc(var(--width-content-blog) - var(--gutter) * 2); max-width : var(--img-width); margin : var(--vspace-1) 0 var(--vspace-1) calc(var(--content-primary-padding) * -1); } /* entry tags */ .entry__tags { display : flex; flex-flow : row wrap; margin : var(--vspace-1_5) 0; } .entry__tags strong, .entry__tags span { display : inline-block; } .entry__tags strong { margin-right : 1.2rem; margin-bottom : var(--vspace-0_25); } .entry__tag-list { display : flex; flex-flow : row wrap; font-size : calc(var(--text-size) * 0.6111); text-transform : uppercase; letter-spacing : .2em; } .entry__tag-list a { display : inline-block; margin-right : .2rem; margin-bottom : var(--vspace-0_25); padding : 0 1rem; border : 1px solid var(--color-gray-8); border-radius : var(--border-radius); color : var(--color-text); } .entry__tag-list a:focus, .entry__tag-list a:hover { background-color : var(--color-text); color : white; } /* author box */ /* ------------------------------------------------------------------- * ## authors (the main domain's /authors/) * ------------------------------------------------------------------- */ .authors-list { row-gap : var(--vspace-2); margin-top : var(--vspace-2); } /* the cover on the left, everything else on the right (stacked on mobile) */ .author-card { display : flex; align-items : flex-start; gap : var(--vspace-1); margin-bottom : var(--vspace-2); } /* the photo of the blog's first hero slide, in its own proportions */ .author-card__cover { flex : 0 0 50%; display : block; } .author-card__cover img { display : block; width : 100%; height : auto; margin : 0; border-radius : var(--border-radius); } .author-card__body { flex : 1 1 auto; min-width : 0; } /* the avatar in a line with the name, the subtitle under the name */ .author-card__head { display : flex; align-items : center; gap : var(--vspace-0_75); } .author-card__names { flex : 1 1 auto; min-width : 0; } .author-card__avatar { flex : none; display : flex; align-items : center; justify-content : center; width : 9.6rem; height : 9.6rem; overflow : hidden; border-radius : 50%; background : var(--color-gray-2); font-family : var(--font-2); font-size : 4rem; color : var(--color-text-light); } .author-card__avatar img { display : block; width : 100%; height : 100%; margin : 0; object-fit : cover; } .author-card__name { margin : 0; font-size : var(--text-lg); line-height : 1.2; } .author-card__name a { color : var(--color-text-dark); } .author-card__subtitle { margin : var(--vspace-0_25) 0 0; font-size : 1.5rem; line-height : 1.5; color : var(--color-text-light); } .author-card__description { margin : var(--vspace-0_5) 0 0; font-size : 1.5rem; line-height : 1.6; } .author-card__spec { display : flex; flex-wrap : wrap; gap : .6rem; margin : var(--vspace-0_75) 0 0; padding : 0; list-style : none; } .author-card__spec li { margin : 0; padding : .3rem 1rem; border-radius : var(--border-radius); background : var(--color-gray-3); font-size : 1.3rem; line-height : 1.5; color : var(--color-text); } /* the author form on "Авторы" (an admin): the address with the base * domain after it and its check, the e-mail beside it; the invite link */ /* "Код в head": the pasted code, as code */ #author-form .author-form__code { font-family : var(--font-mono); font-size : 1.4rem; line-height : 1.5; min-height : 10rem; } .author-form__row { display : grid; grid-template-columns : repeat(2, minmax(0, 1fr)); gap : 0 var(--vspace-0_75); } /* the rows keep the form's usual 32px between a field and the next label; * the address check sits in that gap, under its field */ /* (the form's cells keep 16px under their fields) */ #author-form .author-form__row { margin-bottom : 1.6rem; } #author-form #author-new-invite-wrap { margin-top : 3.2rem; } #author-form .author-form__row > div, #author-form .author-form__row input { margin-bottom : 0; } .author-form__domain { position : relative; } .author-form__domain-field { display : flex; align-items : center; gap : .6rem; } #author-form .author-form__domain-field input { margin-bottom : 0; } .author-form__domain-base { flex : none; font-size : 1.4rem; color : var(--color-text-light); white-space : nowrap; } .author-form__domain-status { position : absolute; top : calc(100% - 1.6rem); left : 0; margin : .4rem 0 0; line-height: 1.4; white-space: nowrap; font-size : 1.3rem; color : var(--color-text-light); } .author-form__domain-status.is-free { color : #2fa36b; } .author-form__domain-status.is-taken { color : #e04848; } .author-form__invite { margin-bottom : var(--vspace-1); padding : var(--vspace-0_75); border-radius : var(--border-radius); background : var(--color-gray-2); } .author-form__invite[hidden] { display : none; } .author-form__invite-field { display : flex; gap : .8rem; } .author-form__invite-field input { margin-bottom : 0; font-size : 1.3rem; } .author-form__invite-copy { flex : none; margin : 0; } .author-form__invite-hint { margin : .8rem 0 0; font-size : 1.3rem; color : var(--color-text-light); } @media screen and (max-width: 600px) { .author-form__row { grid-template-columns : 1fr; } } /* auth/invite.php: the new author sets a password */ .invite-page { max-width : 52rem; } .invite-page__form { margin-top : var(--vspace-1); } .invite-page__hint { margin : 0 0 var(--vspace-0_75); font-size : 1.3rem; color : var(--color-text-light); } /* "Спецификация" in the settings: the common tags as toggles, wrapping */ .settings-form__spec { margin : 0 0 var(--vspace-1); padding : 0; border : 0; } .settings-form__spec legend { margin-bottom : var(--vspace-0_5); padding : 0; font-weight : 600; } .settings-form__spec-hint { font-weight : 400; color : var(--color-text-light); } .settings-form__spec-tags { flex-wrap : wrap; gap : .8rem; } .settings-form__spec-tags .game-edit-form__category-option { height : 3.6rem; padding : 0 1.2rem; font-size : 1.3rem; } .settings-form__spec-tags .game-edit-form__category-option.is-disabled { opacity : .4; cursor : not-allowed; } /* counts: a big number, its label on the right */ .author-card__stats { display : flex; flex-wrap : wrap; gap : var(--vspace-0_5) var(--vspace-1_5); margin : var(--vspace-1) 0 0; padding : 0; list-style : none; } .author-card__stats li { margin : 0; padding : 0; } .author-card__stats a { display : flex; align-items : center; gap : 1rem; color : var(--color-text-dark); } .author-card__stat-num { font-family : var(--font-2); font-size : 5.6rem; font-weight : 700; line-height : 1; } .author-card__stat-label { font-size : 1.7rem; line-height : 1.3; color : var(--color-text-light); } @media screen and (max-width: 1024px) { .author-card { flex-direction : column; } .author-card__cover { flex : none; width : 100%; } } /* under an author card: their reviews — single-width cards, 3 in three * columns, all 4 in two (render_author_reviews()) */ .author-section .bricks-wrapper .brick.entry { width : 33.3333%; } .author-section .bricks-wrapper article.brick:nth-of-type(n+4) { display : none; } @media screen and (max-width: 1080px) { .author-section .bricks-wrapper .brick.entry { width : 50%; } .author-section .bricks-wrapper article.brick:nth-of-type(n+4) { display : block; } } /* a phone: one column, as the other post grids */ @media screen and (max-width: 700px) { .author-section .bricks-wrapper .brick.entry { width : 100%; } } /* the arrows next to "Впечатления автора": other random reviews */ .author-section__refresh { display : inline-flex; align-items : center; justify-content : center; width : 4.4rem; height : 4.4rem; margin : 0 0 0 .4rem; padding : 0; border : 0; background : none; color : var(--color-text-light); vertical-align : middle; cursor : pointer; transition : color .2s, transform .4s; } .author-section__refresh svg { width : 2.6rem; height : 2.6rem; } /* no fill in any state (beats the site's button hover/focus background) */ .author-section__refresh, .author-section__refresh:hover, .author-section__refresh:focus, .author-section__refresh:active { background : none !important; box-shadow : none; } .author-section__refresh:hover, .author-section__refresh:focus-visible { color : var(--color-text-dark); transform : rotate(90deg); } .author-section__refresh.is-loading svg { animation : author-refresh-spin .8s linear infinite; } @keyframes author-refresh-spin { to { transform : rotate(360deg); } } .author-section { --brick-padding : 2.8rem; margin-bottom : var(--vspace-2); } .author-section .bricks-wrapper { margin-left : calc(var(--brick-padding) * -1); margin-right : calc(var(--brick-padding) * -1); } @media screen and (max-width: 700px) { .author-section { --brick-padding : 1.6rem; } } .entry__author-box { display : flex; align-items : flex-start; font-size : calc(var(--text-size) * 0.8889); font-weight : 300; line-height : calc(0.9375 * var(--space)); color : var(--color-text-light); padding : var(--vspace-1_5) 0 var(--vspace-1); border-top : 1px solid var(--color-border); margin-top : var(--vspace-1_5); } .entry__author-avatar { margin-top : 0; padding-right : var(--vspace-1); flex : none; } .entry__author-avatar img { height : var(--vspace-2_5); width : var(--vspace-2_5); border-radius : 50%; } .entry__author-name { margin-top : 0; } .entry__author-name a { color : var(--color-text); } /* entry blocks, entry forms */ .entry__blocks { margin-top : var(--vspace-2); margin-bottom : var(--vspace-1); } .entry__blocks h4 { margin-top : 0; } .entry__form { margin-top : var(--vspace-1_5); } .entry #contactForms, .entry #cForm { --gutter : 1.6rem; } /* games used in a post */ .entry__games { --brick-padding : 3rem; padding : var(--vspace-0_75) 0 var(--vspace-1); border-top : 1px solid var(--color-border); } .entry__games-title { margin-top : var(--vspace-1); margin-bottom : var(--vspace-1_5); } .entry__games .bricks-wrapper { margin-left : calc(var(--brick-padding) * -1); margin-right : calc(var(--brick-padding) * -1); } @media screen and (max-width: 700px) { .entry__games { --brick-padding : 1.6rem; } } /* other posts featuring the same game(s) as this post */ .entry__other-posts { --brick-padding : 3rem; padding : var(--vspace-0_75) 0 var(--vspace-1); border-top : 1px solid var(--color-border); } .entry__other-posts-title { margin-top : var(--vspace-1); margin-bottom : var(--vspace-1_5); } .entry__other-posts .bricks-wrapper { margin-left : calc(var(--brick-padding) * -1); margin-right : calc(var(--brick-padding) * -1); } @media screen and (max-width: 700px) { .entry__other-posts { --brick-padding : 1.6rem; } } /* post navigation */ .post-nav { display : flex; padding : var(--vspace-1_25) 0 var(--vspace-2); border-top : 1px solid var(--color-border); border-bottom : 1px solid var(--color-border); position : relative; } .post-nav::before { content : ""; display : block; width : 1px; height : 100%; background-color : var(--color-border); position : absolute; top : 0; left : 50%; bottom : 0; } .post-nav__prev, .post-nav__next { flex : none; width : 50%; } .post-nav__prev { padding-right : calc(var(--gutter) + 1.2rem); } .post-nav__next { padding-left : calc(var(--gutter) + 1.2rem); margin-left : auto; } .post-nav__prev:only-child, .post-nav__next:only-child { width : 100%; padding-right : 0; padding-left : 0; margin-left : 0; } .post-nav:has(.post-nav__prev:only-child)::before, .post-nav:has(.post-nav__next:only-child)::before { display : none; } .post-nav a { font-family : var(--font-2); font-size : var(--text-xl); line-height : 1.158; color : var(--color-text); } .post-nav span { font-family : var(--font-1); font-weight : 400; font-size : var(--text-sm); line-height : var(--vspace-1); display : block; margin-left : .2rem; margin-bottom : var(--vspace-0_25); color : var(--color-text-light); } /* ------------------------------------------------------------------- * responsive: * blog styles * ------------------------------------------------------------------- */ @media screen and (max-width: 1400px) { .entry-wrap { --text-multiplier : .9; --width-content-blog : 1100px; --content-primary-padding : 10rem; } .entry__header { max-width : 1000px; } } @media screen and (max-width: 1300px) { .entry-wrap { --text-multiplier : .85; --width-content-blog : 1040px; --content-primary-padding : 9rem; } } @media screen and (max-width: 1200px) { .entry-wrap { --text-multiplier : .8; --width-content-blog : 1000px; --content-primary-padding : 6rem; } .entry__header { max-width : 900px; margin-bottom : var(--vspace-2); } } @media screen and (max-width: 1100px) { .entry-wrap { --text-multiplier : .7; --width-content-blog : 860px; --content-primary-padding : 0; } .entry__content .alignwide img { max-width : 100%; margin : var(--vspace-1) 0; } } @media screen and (max-width: 900px) { .entry-wrap { --text-multiplier : .62; } } @media screen and (max-width: 700px) { .entry__author-box { display : block; text-align : center; } .entry__author-avatar { padding : 0; margin-bottom : var(--vspace-0_5); } .post-nav { display : block; text-align : center; } .post-nav::before { display : none; } .post-nav>div:first-child { margin-bottom : var(--vspace-0_75); } .post-nav__prev, .post-nav__next { flex : none; width : 100%; padding : 0; } } @media screen and (max-width: 600px) { .entry-wrap { --text-multiplier : .55; } } @media screen and (max-width: 500px) { .entry-wrap { --text-multiplier : .46; } .entry__header { margin-bottom : var(--vspace-1); } .entry__meta { font-size : 1.5rem; } .entry__meta>[class*="entry__meta"] svg { margin-right : .2rem; height : var(--vspace-0_75); width : var(--vspace-0_75); } .entry__media { margin-bottom : var(--vspace-1_5); } .entry__content .alignwide img { margin : var(--vspace-0_5) 0; } } @media screen and (max-width: 400px) { .entry-wrap { --text-multiplier : .42; } } @media screen and (max-width: 350px) { .entry-wrap { --text-multiplier : .38; } } /* ------------------------------------------------------------------- * ## blog comments * ------------------------------------------------------------------- */ .comments-wrap { margin-top : var(--vspace-3); } .comments-wrap h3 { text-align : center; margin-top : 0; margin-bottom : var(--vspace-0_5); } .comments-wrap h3 span { display : block; font-family : var(--font-1); font-weight : 400; font-size : calc(var(--text-size) * 0.8889); line-height : var(--vspace-0_75); color : var(--color-text-light); margin-top : var(--vspace-0_125); } /* comments * -------------------------------------------------- */ #comments { padding-top : var(--vspace-0_5); padding-bottom : var(--vspace-0_5); } #comments ol, #comments ul { list-style : none; } .commentlist { margin : var(--vspace-2) 0 var(--vspace-1_5); padding : 0; } .commentlist>.comment { position : relative; list-style : none; margin : 0; padding : 2rem 0 0 0; padding-left : 14%; } .comment__avatar { position : absolute; left : 0; display : block; } .comment__avatar img { height : var(--vspace-2); width : var(--vspace-2); border-radius : 100%; vertical-align : bottom; } .comment__info .comment__author { font-weight : 600; font-size : var(--text-size); line-height : var(--vspace-1); font-style : normal; color : var(--color-text-dark); } .comment__info .comment__author a { color : var(--color-text-dark); } .comment__meta { display : flex; align-items : center; font-style : normal; line-height : var(--vspace-0_75); color : var(--color-text-light); } .comment__meta .comment__time { font-size : calc(var(--text-size) * 0.7778); text-transform : uppercase; letter-spacing : .1rem; color : var(--color-text-light); margin-right : 1.6rem; } .comment__meta .comment__time a { color : var(--color-text-light); } .comment__meta .comment__time a:focus, .comment__meta .comment__time a:hover { color : var(--color-text-dark); } .comment__meta .comment__reply a { font-size : var(--text-xs); font-family : var(--font-1); font-weight : 600; text-transform : uppercase; letter-spacing : .2rem; color : var(--color-text-dark); } .comment__text { margin : var(--vspace-0_5) 0 0 0; } .comment ul.children { margin : 0; padding : 0; } .comment ul.children li { padding-left : 5%; margin-top : calc(var(--vspace-1) + 2rem); border-left : 1px solid var(--color-border); } /* comments form * ---------------------------- */ .comments-wrap .comment-respond { margin-top : var(--vspace-1); } .comment-respond form { padding-top : var(--vspace-1_75); } /* ------------------------------------------------------------------- * responsive: * comments * ------------------------------------------------------------------- */ @media screen and (max-width: 1000px) { .comment__avatar img { height : var(--vspace-1_75); width : var(--vspace-1_75); } } @media screen and (max-width: 800px) { .comment__avatar img { margin-top : 0; height : var(--vspace-1_5); width : var(--vspace-1_5); } } @media screen and (max-width: 600px) { .commentlist>.comment { padding-top : 0; padding-left : 0; } .comment__avatar { display : none; } .comment ul.children li { margin-top : calc(var(--vspace-1) + 0rem); } } @media screen and (max-width: 500px) { .comment ul.children li { border-left : none; } } @media screen and (max-width: 400px) { .comment-respond form { padding-top : var(--vspace-1); } } /* =================================================================== * # CALENDAR * * * ------------------------------------------------------------------- */ .ss-calendar { padding-top : var(--vspace-2); margin-bottom : var(--vspace-2); transition : opacity 0.2s ease-in-out; } .ss-calendar__header { display : flex; align-items : center; justify-content : space-between; flex-wrap : wrap; gap : var(--vspace-0_75); margin-bottom : var(--vspace-1_25); } .ss-calendar__title { font-family : var(--font-2); font-weight : 400; font-size : var(--text-xl); letter-spacing : -0.02em; color : var(--color-text-light); margin : 0; } .ss-calendar__title strong { font-weight : 700; color : var(--color-text); } .ss-calendar__nav { display : flex; align-items : center; gap : .8rem; } .ss-calendar__nav-btn { display : flex; align-items : center; justify-content : center; width : 3.6rem; height : 3.6rem; border-radius : 50%; background-color : var(--color-gray-4); color : var(--color-text); transition : background-color 0.2s ease-in-out; } .ss-calendar__nav-btn:hover, .ss-calendar__nav-btn:focus { background-color : var(--color-gray-6); } .ss-calendar__weekdays { display : grid; grid-template-columns : repeat(7, 1fr); padding-bottom : var(--vspace-0_5); } .ss-calendar__weekday { font-family : var(--font-1); font-weight : 600; font-size : var(--text-xs); text-transform : uppercase; letter-spacing : .06em; color : var(--color-text-light); } .ss-calendar__grid { display : grid; grid-template-columns : repeat(7, 1fr); border : 1px solid var(--color-border); } .ss-calendar__cell { aspect-ratio : 1 / 1; padding : var(--vspace-0_5); border-top : 1px solid var(--color-border); border-left : 1px solid var(--color-border); } .ss-calendar__cell:nth-child(7n+1) { border-left : none; } .ss-calendar__cell:nth-child(-n+7) { border-top : none; } .ss-calendar__day { display : inline-flex; align-items : center; justify-content : center; height : 3rem; border-radius : 50%; font-family : var(--font-1); font-size : var(--text-md); color : var(--color-text); } .ss-calendar__cell--muted { background-color : var(--color-gray-4); } /* same gray-4/gray-1 split as .s-footer — gray-4 barely tints white in * light mode but auto-inverts to a strong mid-gray, so dark mode uses the * subtler gray-1 instead to match the footer's look there too */ [data-theme="dark"] .ss-calendar__cell--muted { background-color : var(--color-gray-1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ss-calendar__cell--muted { background-color : var(--color-gray-1); } } .ss-calendar__cell--post { position : relative; display : block; overflow : hidden; } .ss-calendar__cell--addable { position : relative; cursor : pointer; } /* the hover "+" (the whole cell opens the drawer) and "Повторить" */ .ss-calendar__cell-actions { display : flex; gap : .8rem; position : absolute; top : 50%; left : 50%; z-index : 2; opacity : 0; visibility : hidden; transform : translate(-50%, -50%) scale(0.5); transition : opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out; pointer-events : none; } .ss-calendar__cell-add-trigger { display : flex; align-items : center; justify-content : center; flex-shrink : 0; width : 44px; height : 44px; margin : 0; padding : 0; border : none; border-radius : 50%; background-color : var(--color-black); color : var(--color-white); } .ss-calendar__cell-repeat { display : none; cursor : pointer; pointer-events : auto; } .has-calendar-repeat .ss-calendar__cell-repeat { display : flex; } .ss-calendar__cell-repeat:hover, .ss-calendar__cell-repeat:focus { background-color : var(--color-1, #333); color : white; } @media (hover: hover) { .ss-calendar__cell--addable:hover .ss-calendar__cell-actions { opacity : 1; visibility : visible; transform : translate(-50%, -50%) scale(1); } } .ss-calendar__cell-photo { position : absolute; inset : 0; overflow : hidden; background-size : cover; background-position : center; background-repeat : no-repeat; transition : transform 0.35s ease-in-out; } /* game-session cells: several covers slide horizontally through the same * viewport instead of a single static photo (ssCalendarGameCovers() in * main.js drives .ss-calendar__cell-photo-track's transform) */ .ss-calendar__cell-photo-track { display : flex; width : 100%; height : 100%; transition : transform 0.5s ease-in-out; } .ss-calendar__cell-photo-slide { flex-shrink : 0; width : 100%; height : 100%; background-size : cover; background-position : center; background-repeat : no-repeat; } .ss-calendar__cell--post::after { content : ""; position : absolute; inset : 0; background : rgba(0, 0, 0, 0.3); pointer-events : none; transition : opacity 0.3s ease-in-out; } .ss-calendar__cell--post .ss-calendar__day { position : relative; z-index : 1; color : #fff; transition : transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .ss-calendar__cell-title { position : absolute; left : var(--vspace-0_5); right : var(--vspace-0_5); bottom : var(--vspace-0_5); z-index : 1; display : -webkit-box; -webkit-line-clamp : 3; -webkit-box-orient : vertical; overflow : hidden; font-family : var(--font-1); font-size : var(--text-xs); font-weight : 600; line-height : 1.25; color : #fff; transition : transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } /* the photo-zoom / overlay-fade / day-flies-up hover reveal only makes * sense for posts (single text title, worth uncovering the photo for) — * game-session cells show static, always-visible thumbnails instead, so * none of that applies there */ .ss-calendar__cell--post:not(.ss-calendar__cell--game):hover .ss-calendar__cell-photo { transform : scale(1.08); } .ss-calendar__cell--post:not(.ss-calendar__cell--game):hover::after { opacity : 0; } .ss-calendar__cell--post:not(.ss-calendar__cell--game):hover .ss-calendar__day { transform : translateY(-250%); opacity : 0; } .ss-calendar__cell--post:hover .ss-calendar__cell-title { transform : translateY(250%); opacity : 0; } /* game-session cells (/calendar/, "Партии") show one small cover thumbnail * per session instead of a text title — one per session (repeats of the * same game each get their own), always visible (not hidden on hover, since * each is its own link straight to that game) */ .ss-calendar__cell-thumbs { position : absolute; left : var(--vspace-0_5); right : var(--vspace-0_5); bottom : var(--vspace-0_5); z-index : 1; display : flex; flex-wrap : wrap; gap : 1.2rem; } .ss-calendar__cell-thumb-wrap { position : relative; display : block; width : 50px; height : 50px; flex-shrink : 0; } .ss-calendar__cell-thumb { display : block; position : absolute; inset : 0; width : 100%; height : 100%; padding : 0; margin : 0; border : none; background-color : transparent; background-size : cover; background-position : center; background-repeat : no-repeat; border-radius : 4px; box-shadow : 0 2px 6px rgba(0, 0, 0, .35); box-sizing : border-box; cursor : default; -webkit-appearance : none; appearance : none; font : inherit; text-align : center; } button.ss-calendar__cell-thumb:focus, button.ss-calendar__cell-thumb:hover { background-color : transparent; border-color : transparent; } .ss-calendar__cell-thumb-count { display : flex; align-items : center; justify-content : center; position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); min-width : 20px; height : 20px; padding : 0 4px; border-radius : 999px; background-color : rgba(0, 0, 0, .65); color : white; font-family : var(--font-1); font-weight : 600; font-size : 1.1rem; line-height : 1; pointer-events : none; } @media screen and (max-width: 700px) { /* too little room for a photo + full title on mobile — just a plain black dot in the corner to flag that the day has a post */ .ss-calendar__cell-photo { display : none; } .ss-calendar__cell--post::after { content : none; } .ss-calendar__cell--post .ss-calendar__day { color : var(--color-text); } .ss-calendar__cell-title { display : none; } /* posts: single generic dot, same as always */ .ss-calendar__cell--post:not(.ss-calendar__cell--game)::before { content : ""; position : absolute; left : var(--vspace-0_25); bottom : var(--vspace-0_25); width : 9px; height : 9px; border-radius : 50%; /* --color-text is black in light mode, white in dark mode */ background : var(--color-text); } /* game sessions: keep one dot per session (same elements that show full thumbnails on desktop), just shrunk down to dot size */ .ss-calendar__cell--game .ss-calendar__cell-thumbs { left : var(--vspace-0_25); right : auto; bottom : var(--vspace-0_25); gap : 4px; } .ss-calendar__cell--game .ss-calendar__cell-thumb-wrap { width : 9px; height : 9px; } .ss-calendar__cell--game .ss-calendar__cell-thumb { border-radius : 50%; background-image : none !important; background-color : var(--color-text); box-shadow : none; } .ss-calendar__cell-thumb-count { display : none; } } @media screen and (max-width: 700px) { .ss-calendar__cell { padding : var(--vspace-0_25); } .ss-calendar__day { height : 2.4rem; font-size : var(--text-sm); } } /* same width formula as .bricks .masonry, so the calendar and the "N posts this month" heading both line up with the post grid's edges */ .ss-wide-container { max-width : 1520px; width : 92%; margin : 0 auto; } .ss-calendar-posts__title { font-family : var(--font-2); font-weight : 400; font-size : var(--text-xl); letter-spacing : -0.02em; color : var(--color-text); text-align : center; } #calendar-posts-month .bricks, #calendar-games-month .bricks, #calendar-games-posts-month .bricks { padding-top : var(--vspace-1_5); padding-bottom : 0; } /* =================================================================== * # account bar (logged in): code + "Настройки" / "Выход", fixed at the * bottom center; below the drawers (z-index 400+) * ------------------------------------------------------------------- */ .user-bar { position : fixed; z-index : 300; left : 50%; bottom : 1.6rem; transform : translateX(-50%); display : flex; align-items : center; gap : 0.4rem; padding : 0.6rem 0.6rem 0.6rem 1.8rem; background : var(--color-white); border-radius : 1.4rem; box-shadow : 0 0.4rem 2.4rem rgba(0, 0, 0, .14), 0 0 0 1px var(--color-border); font-family : var(--font-1); font-size : 1.5rem; line-height : 1; white-space : nowrap; /* its own width: a fixed box from the middle (left: 50%) would else get * only half the window and squeeze the buttons' icons */ width : max-content; } .user-bar svg { flex : none; } /* game form on the main domain (editor, admin): only the shared game fields (and the catalog card size, games.size) */ .game-edit-drawer--base-only .game-edit-favorite, .game-edit-drawer--base-only .game-edit-form__category, .game-edit-drawer--base-only [id$="edit-comment-toggle"], .game-edit-drawer--base-only [id$="edit-comment-wrap"], .game-edit-drawer--base-only:not(.game-edit-drawer--can-delete) .game-edit-delete, .game-edit-drawer--base-only .game-edit-form__catalog-note { display : none !important; } .user-bar__code { margin-right : 1rem; font-weight : 600; color : var(--color-text-dark); } .user-bar__btn { display : inline-flex; align-items : center; gap : 0.6rem; padding : 1rem 1.4rem; border-radius : 1rem; color : var(--color-text-dark); transition : background-color .2s; } .user-bar__btn[hidden] { display : none; } .user-bar__btn:focus, .user-bar__btn:hover { background : var(--color-gray-3, rgba(0, 0, 0, .06)); color : var(--color-text-dark); } /* the buttons: in a row; on a phone a menu above the bar opened by "⋯" */ .user-bar__menu { display : flex; align-items : center; gap : 0.4rem; } /* "⋯": a square with the hover's gray; on a phone it opens the whole menu, * on a desktop it shows only when the buttons don't fit (.has-overflow) */ .user-bar__more { display : none; align-items : center; justify-content : center; flex : none; width : 4rem; height : 4rem; margin : 0; padding : 0; border : 0; border-radius : 1rem; background : var(--color-gray-3, rgba(0, 0, 0, .06)) !important; color : var(--color-text-dark); cursor : pointer; } .user-bar.has-overflow .user-bar__more { display : inline-flex; } .user-bar__more svg { flex : none; width : 2rem; height : 2rem; } .user-bar__more:hover, .user-bar__more:focus-visible, .user-bar__more[aria-expanded="true"] { background : var(--color-gray-4, rgba(0, 0, 0, .1)) !important; } /* the desktop's overflow: the buttons that didn't fit, in a list over "⋯" */ .user-bar__overflow { position : absolute; right : 0; bottom : calc(100% + 0.8rem); display : flex; flex-direction : column; align-items : stretch; min-width : 20rem; padding : 0.6rem; background : var(--color-white); border-radius : 1.4rem; box-shadow : 0 0.4rem 2.4rem rgba(0, 0, 0, .14), 0 0 0 1px var(--color-border); opacity : 0; visibility : hidden; transform : translateY(0.6rem); transition : opacity .2s, transform .2s, visibility .2s; } .user-bar__overflow:empty { display : none; } .user-bar.is-menu-open .user-bar__overflow { opacity : 1; visibility : visible; transform : translateY(0); } .user-bar__overflow .user-bar__btn { justify-content : flex-start; } @media screen and (max-width: 700px) { .user-bar { padding : 0.6rem 0.6rem 0.6rem 1.6rem; } .user-bar__more { display : inline-flex; } .user-bar__menu { position : absolute; right : 0; bottom : calc(100% + 0.8rem); flex-direction : column; align-items : stretch; min-width : 20rem; padding : 0.6rem; background : var(--color-white); border-radius : 1.4rem; box-shadow : 0 0.4rem 2.4rem rgba(0, 0, 0, .14), 0 0 0 1px var(--color-border); opacity : 0; visibility : hidden; transform : translateY(0.6rem); transition : opacity .2s, transform .2s, visibility .2s; } .user-bar.is-menu-open .user-bar__menu { opacity : 1; visibility : visible; transform : translateY(0); } .user-bar__menu .user-bar__btn { justify-content : flex-start; } } /* room at the page end, so the bar doesn't cover the footer */ body:has(.user-bar) { padding-bottom : 8rem; } /* the account bar would sit on top of the open mobile menu */ body.menu-is-open .user-bar { display : none; } /* =================================================================== * # home hero admin (hero_slides): "+" when there's no hero yet, and the * edit / add-slide buttons on each slide * ------------------------------------------------------------------- */ /* the same round button as the hero's edit / add-slide ones; lifted into * the empty space under the header (the heading below stays in place) */ .home-hero-add { display : flex; justify-content : center; margin-top : -12.8rem; margin-bottom : 19.6rem; } @media screen and (max-width: 800px) { .home-hero-add { margin-top : 0; margin-bottom : var(--vspace-2); } } /* on the border between the photo and the text, in the middle of the * slide's height; stacked one above the other */ .hero__admin { z-index : 3; display : flex; flex-direction : column; gap : 1.2rem; position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%); } .hero__admin-btn { display : flex; align-items : center; justify-content : center; width : 5.6rem; height : 5.6rem; margin : 0; padding : 0; border : 1px solid rgba(255, 255, 255, .25); border-radius : 50%; background-color : black; color : white; opacity : .85; transition : opacity .2s; } .hero__admin-btn svg { width : 2.4rem; height : 2.4rem; } .hero__admin-btn:focus, .hero__admin-btn:hover { background-color : black; color : white; opacity : 1; } /* photo above the text here, the text box overlapping it: side by side, * in the middle of the photo part */ @media screen and (max-width: 1000px) { .hero__admin { flex-direction : row; top : 28%; } } /* "+ Добавить игру" at the bottom of the game searches' suggestions */ .post-edit-form__games-suggestion--add { border-top : 1px solid var(--color-border); font-weight : 600; } /* game form, no category (adding to the shared catalog only) */ .game-edit-form__catalog-note { margin : calc(var(--vspace-0_5) * -1) 0 var(--vspace-1); font-size : 1.4rem; line-height : 1.5; color : var(--color-text-light); } .game-edit-form [hidden], .game-edit-panel__title [hidden] { display : none !important; } /* hero drawer "Раздел" select: the same bottom margin as the text field * next to it (the row lines its fields up by the bottom), and the arrow * follows the theme */ #hero-edit-form .hero-edit-form__select { margin-bottom : var(--vspace-1); } #hero-edit-form .hero-edit-form__select::after { border-color : var(--color-text-dark); } /* =================================================================== * # hero slide effects (render_hero_effects() in functions.php): layers * over the photo in .hero__entry-image; ash and glitch are above * ------------------------------------------------------------------- */ .fx-layer { z-index : 2; position : absolute; inset : 0; overflow : hidden; pointer-events : none; } /* --- медленный наезд / параллакс: a moving copy of the photo --------- */ .hero__entry-image.has-fx-photo { overflow : hidden; } .fx-photo-wrap, .fx-photo { position : absolute; inset : 0; } .fx-photo-wrap { z-index : 0; } .fx-photo { background-size : cover; background-position : center; background-repeat : no-repeat; } .fx-zoom { animation : fx-zoom 24s ease-in-out infinite alternate; } @keyframes fx-zoom { from { transform : scale(1); } to { transform : scale(1.12); } } /* --fx-px / --fx-py (-1…1) follow the mouse (ssHeroParallax): a wider * shift with a slight tilt, and a springy overshoot (the "bounce") */ .fx-parallax { inset : -7%; transform : translate(calc(var(--fx-px, 0) * -45px), calc(var(--fx-py, 0) * -30px)) rotate(calc(var(--fx-px, 0) * -0.8deg)) scale(1.02); transition : transform .9s cubic-bezier(.34, 1.56, .64, 1); } /* --- искры: rising glowing sparks (the ash keyframes) ---------------- */ .fx-spark { position : absolute; bottom : -5%; border-radius : 50%; background : radial-gradient(circle, #fffbe8 0%, #ffc15a 40%, rgba(255, 110, 0, 0) 75%); box-shadow : 0 0 10px 3px rgba(255, 150, 40, .7); opacity : 0; animation-name : ash-float; animation-timing-function : ease-out; animation-iteration-count : infinite; } /* --- falling: petals, snow ------------------------------------- */ .fx-petal, .fx-snowflake { position : absolute; top : -8%; animation-name : fx-fall; animation-timing-function : linear; animation-iteration-count : infinite; } @keyframes fx-fall { 0% { top : -8%; opacity : 0; transform : translateX(0) rotate(0deg); } 10% { opacity : 1; } 50% { transform : translateX(var(--drift-x)) rotate(calc(var(--spin) * .5)); } 90% { opacity : .9; } 100% { top : 105%; opacity : 0; transform : translateX(calc(var(--drift-x) * -.4)) rotate(var(--spin)); } } .fx-petal { border-radius : 150% 0 150% 0; background : linear-gradient(135deg, #ffe1ea 0%, #f7a8bf 60%, #e98aa6 100%); box-shadow : 0 0 2px rgba(255, 255, 255, .5); } .fx-snowflake { border-radius : 50%; background : radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, 0) 75%); } /* --- дождь: slanted fast drops --------------------------------------- */ .fx-rain { transform : skewX(-12deg); } .fx-drop { position : absolute; top : -15%; width : 1px; background : linear-gradient(to bottom, rgba(210, 225, 255, 0), rgba(210, 225, 255, .55)); animation-name : fx-drop; animation-timing-function : linear; animation-iteration-count : infinite; } @keyframes fx-drop { from { top : -15%; } to { top : 105%; } } /* --- сканлайны / VHS: lines, a rolling band, a slight flicker -------- */ .fx-vhs { background : repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) 1px, transparent 1px, transparent 3px); animation : fx-vhs-flicker 4s steps(1) infinite; } .fx-vhs::after { content : ""; position : absolute; left : 0; right : 0; height : 18%; background : linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)); animation : fx-vhs-roll 6s linear infinite; } @keyframes fx-vhs-roll { from { top : -20%; } to { top : 100%; } } @keyframes fx-vhs-flicker { 0%, 100% { opacity : 1; } 47% { opacity : .8; } 48% { opacity : 1; } 83% { opacity : .85; } 84% { opacity : 1; } } /* --- цветовые искажения: the plain photo most of the time; every few * seconds a short burst of red / cyan fringes and colour shifts -------- */ .fx-chroma { z-index : 1; } .fx-chroma__copy { position : absolute; inset : 0; background-size : cover; background-position : center; background-repeat : no-repeat; mix-blend-mode : screen; opacity : 0; animation : fx-chroma-burst 7s steps(1) infinite; } .fx-chroma__copy--red { --dir : 1; --tint : -50deg; } .fx-chroma__copy--cyan { --dir : -1; --tint : 150deg; } /* invisible until ~70%: then about half a second of jumping, re-tinted * copies, and back to the original photo */ @keyframes fx-chroma-burst { 0%, 69%, 78%, 100% { opacity : 0; transform : none; filter : grayscale(1) sepia(1) saturate(8) hue-rotate(var(--tint)); } 70% { opacity : .55; transform : translate(calc(var(--dir) * 14px), calc(var(--dir) * -3px)); filter : grayscale(1) sepia(1) saturate(8) hue-rotate(var(--tint)); } 72% { opacity : .4; transform : translate(calc(var(--dir) * -8px), 0); filter : grayscale(1) sepia(1) saturate(8) hue-rotate(calc(var(--tint) + 90deg)); } 74% { opacity : .6; transform : translate(calc(var(--dir) * 22px), calc(var(--dir) * 2px)); filter : grayscale(1) sepia(1) saturate(8) hue-rotate(var(--tint)); } 76% { opacity : .35; transform : translate(calc(var(--dir) * 5px), 0); filter : grayscale(1) sepia(1) saturate(8) hue-rotate(calc(var(--tint) - 120deg)); } } /* --- матрица: green glyph columns running down ---------------------- */ .fx-matrix { background : rgba(0, 12, 0, .25); } .fx-matrix__col { position : absolute; top : 0; writing-mode : vertical-rl; text-orientation : upright; font-family : var(--font-mono); line-height : 1; letter-spacing : .05em; color : #3dff6a; text-shadow : 0 0 6px rgba(61, 255, 106, .8); /* the tail fades out, the leading (lowest) glyph is the brightest */ -webkit-mask-image : linear-gradient(to bottom, transparent 0%, black 75%, white 100%); mask-image : linear-gradient(to bottom, transparent 0%, black 75%, white 100%); transform : translateY(-100%); animation-name : fx-matrix; animation-timing-function : linear; animation-iteration-count : infinite; } @keyframes fx-matrix { from { transform : translateY(-100%); } to { transform : translateY(calc(100vh + 100%)); } } /* motion-sensitive visitors: effects stand still */ @media (prefers-reduced-motion: reduce) { .fx-layer, .fx-layer *, .fx-layer::before, .fx-layer::after, .fx-photo { animation : none !important; } } /* --- hero drawer: effects switches ---------------------------------- */ #hero-edit-form .hero-edit-form__effects-hint { margin : var(--vspace-0_5) 0 0; font-size : 1.4rem; line-height : 1.5; color : var(--color-text-light); } #hero-edit-form .hero-edit-form__effects { flex-wrap : wrap; gap : 1.2rem 2.4rem; } #hero-edit-form .ss-switch.is-disabled { opacity : .4; cursor : default; } /* game form: a game picked from the shared catalog (name search) */ .game-edit-form__catalog-picked { margin : calc(var(--vspace-0_5) * -1) 0 var(--vspace-0_75); font-size : 1.4rem; line-height : 1.5; color : var(--color-text-light); } .game-edit-form__catalog-picked a { color : var(--color-text-dark); text-decoration : underline; } /* "Настройки" drawer: the square avatar next to the name fields */ .settings-form__head { display : grid; grid-template-columns : 14rem 1fr; gap : 2.4rem; align-items : start; } .settings-form__avatar { width : 14rem; height : 14rem; border-radius : 50%; background-size : cover; } /* upload icon in the middle of the avatar: a dark round badge over the * photo, a bit darker on hover */ .settings-form__avatar-icon { display : flex; align-items : center; justify-content : center; width : 4.8rem; height : 4.8rem; border-radius : 50%; background : rgba(0, 0, 0, .55); color : white; transition : background-color .2s; } .settings-form__avatar:hover .settings-form__avatar-icon, .settings-form__avatar:focus .settings-form__avatar-icon { background : rgba(0, 0, 0, .8); } @media screen and (max-width: 600px) { .settings-form__head { grid-template-columns : 1fr; } } /* "Обычный текст" in the "Формат" list: the size of the site's body text */ .sun-editor.sun-editor .se-list-layer.se-list-format ul p { font-family : var(--font-1); font-size : var(--text-size); } /* "Вводный текст" (p.lead) in the editor and in its "Формат" list: like the * site's .lead — larger, light, grey */ .sun-editor.sun-editor .se-wrapper .sun-editor-editable p.lead, .sun-editor.sun-editor .se-list-layer.se-list-format ul p.lead { font-family : var(--font-1); font-weight : 300; font-size : var(--text-md); line-height : var(--vspace-1_25); color : var(--color-text-light); } .sun-editor.sun-editor .se-list-layer.se-list-format ul p.lead { line-height : 1.3; } /* the "Формат" button always reads "Формат" (the current format's name — * "Обычный текст", "Малый заголовок" — doesn't fit, and a wider button would * break the toolbar into two rows); the list marks the current format */ .sun-editor.sun-editor .se-btn-select.se-btn-tool-format .se-txt { font-size : 0; } .sun-editor.sun-editor .se-btn-select.se-btn-tool-format .se-txt::before { content : "Формат"; font-size : var(--se-main-font-size, 1.4rem); } /* drafts (posts.is_draft, seen only by the logged-in owner) */ .entry__draft-badge { z-index : 2; position : absolute; top : 1.2rem; left : 1.2rem; padding : .5rem 1rem; border-radius : 999px; background : #e8a317; color : black; font-family : var(--font-1); font-size : 1.2rem; font-weight : 600; letter-spacing : .05em; text-transform : uppercase; line-height : 1; } .entry__draft-badge--page { position : static; display : inline-block; margin-bottom : var(--vspace-0_5); } .bricks-wrapper .entry--draft .entry__thumb { position : relative; } .bricks-wrapper .entry--draft .entry__thumb img, .bricks-wrapper .entry--draft .entry__thumb .entry__thumb-grid { opacity : .6; } /* "VK Sync" drawer */ .vk-form__intro { margin : calc(var(--vspace-0_5) * -1) 0 var(--vspace-1); font-size : 1.5rem; line-height : 1.6; color : var(--color-text-light); } .settings-form__vk-info { margin : 0 0 var(--vspace-0_75); padding : 0; list-style : none; font-size : 1.4rem; line-height : 1.6; color : var(--color-text-light); } /* after the hashtags: a full-width line, like the one above "Сохранить" */ #vk-form .settings-form__vk-info { margin-right : calc(var(--vspace-1_5) * -1); margin-left : calc(var(--vspace-1_5) * -1); padding : var(--vspace-0_75) var(--vspace-1_5) 0; border-top : 1px solid var(--color-gray-4); } .settings-form__vk-info li { margin : 0 0 .4rem; } .settings-form__vk-info b { color : var(--color-text-dark); } .settings-form__vk-info code { font-size : 1.3rem; word-break : break-all; } .settings-form__vk-actions { display : flex; flex-wrap : wrap; gap : 1.2rem; } /* beats ".game-edit-form div" — room before step 2 of the VK form */ .game-edit-form .settings-form__vk-actions { margin-bottom : var(--vspace-2); } .settings-form__vk-actions .btn--stroke { margin : 0; } /* VK sync buttons: red with white text while the check / import runs */ .settings-form__vk-actions .btn--stroke[disabled] { background : var(--color-2) !important; border-color : var(--color-2); color : white; opacity : 1; cursor : progress; } .vk-form__step { margin : var(--vspace-1) 0 var(--vspace-0_25); } .vk-form__hint { margin : 0 0 var(--vspace-0_75); font-size : 1.4rem; line-height : 1.6; color : var(--color-text-light); } /* right under the switch: pulled up into the switches' bottom margin */ .vk-form__hint.vk-form__hint--switch { margin-top : calc(var(--vspace-0_75) * -1); } .vk-form__hint code { font-size : 1.3rem; word-break : break-all; } .vk-form__generate { margin-left : .6rem; font-weight : 400; font-size : 1.3rem; } /* "Категории по хештегам": category | locked hashtag input + pencil */ .vk-hashtags { width : 100%; margin-bottom : var(--vspace-0_75); font-size : 1.4rem; } .vk-hashtags th, .vk-hashtags td { padding : .4rem 0; vertical-align : middle; border-bottom : 0; } .vk-hashtags th { width : 30%; padding-right : 1.6rem; font-weight : 400; text-align : left; } .vk-hashtags th label { margin : 0; font-weight : 400; } .game-edit-form .vk-hashtags__field { position : relative; margin : 0; } .vk-hashtags__hash { position : absolute; left : 1rem; font-size : 1.4rem; top : 50%; transform : translateY(-50%); color : var(--color-text-light); pointer-events : none; } .game-edit-form .vk-hashtags__field input { width : 100%; height : 3.2rem; margin : 0; padding : 0 3.2rem 0 2.2rem; font-size : 1.4rem; line-height : 3.2rem; } .game-edit-form .vk-hashtags__field input:disabled { opacity : 1; color : var(--color-text-dark); cursor : default; } .vk-hashtags__edit { position : absolute; right : .2rem; top : 50%; transform : translateY(-50%); display : flex; align-items : center; justify-content : center; width : 2.8rem; height : 2.8rem; margin : 0; padding : 0; border : 0; background : none; color : var(--color-text-light); cursor : pointer; } .vk-hashtags__edit[hidden] { display : none; } .vk-hashtags__edit:hover, .vk-hashtags__edit:focus-visible { color : var(--color-2); } /* "Черновик" among the post form's categories: a dashed outline, the * draft badge's amber when chosen */ #post-edit-form .game-edit-form__category-option--draft { min-width : 4.8rem; padding : 0 1.2rem; border-style : dashed; } #post-edit-form .game-edit-form__category-option--draft:has(input:checked) { background : #e8a317; border-color : #e8a317; border-style : solid; color : black; } /* ssNotify (main.js): the notices — .alert-box — stacked at the top of the * window, over the drawers; the newest at the bottom of the stack */ .ss-alerts { position : fixed; top : 1.6rem; left : 50%; z-index : 2100; display : flex; flex-direction : column; gap : .8rem; width : min(56rem, calc(100% - 3.2rem)); transform : translateX(-50%); pointer-events : none; } .ss-alerts .alert-box { margin : 0; box-shadow : 0 1rem 3rem rgba(0, 0, 0, .2); pointer-events : auto; animation : ss-alert-in .3s ease-out both; } .ss-alerts .alert-box p { margin : 0; } @keyframes ss-alert-in { from { opacity : 0; transform : translateY(-1rem); } to { opacity : 1; transform : none; } } @media (prefers-reduced-motion: reduce) { .ss-alerts .alert-box { animation : none; } } /* "Правки" (the main domain): the pending change requests */ .user-bar__count { margin-left : .3rem; font-size : 1.1rem; font-weight : 600; color : var(--color-2); } .user-bar__count[hidden], .changes-empty[hidden] { display : none; } .changes-empty { margin : var(--vspace-1) 0 0; color : var(--color-text-light); } .changes-list { margin : var(--vspace-0_75) 0 0; padding : 0; list-style : none; } .changes-item { margin : 0 0 var(--vspace-0_75); padding : 1.6rem; border : 1px solid var(--color-border); border-radius : var(--border-radius); } .changes-item__head { display : flex; flex-wrap : wrap; align-items : baseline; justify-content : space-between; gap : .4rem 1.6rem; } .changes-item__game { font-family : var(--font-2); font-size : 1.8rem; color : var(--color-text-dark); } .changes-item__field { font-size : 1.2rem; font-weight : 600; letter-spacing : .1em; text-transform : uppercase; color : var(--color-text-light); } .changes-item__values { display : grid; grid-template-columns : 1fr 1fr; gap : 1.2rem; margin : 1.2rem 0; } .changes-item__value { padding : 1rem 1.2rem; border-radius : var(--border-radius); background : var(--color-gray-2); font-size : 1.4rem; line-height : 1.5; overflow-wrap : anywhere; } .changes-item__value span { display : block; margin-bottom : .4rem; font-size : 1.1rem; letter-spacing : .1em; text-transform : uppercase; color : var(--color-text-light); } .changes-item__value--new { box-shadow : inset 3px 0 0 var(--color-2); } .changes-item__meta { font-size : 1.3rem; color : var(--color-text-light); } .changes-item__actions { display : flex; flex-wrap : wrap; gap : 1.2rem; margin-top : 1.2rem; } .changes-item__actions .btn { margin : 0; } @media screen and (max-width: 600px) { .changes-item__values { grid-template-columns : 1fr; } } /* "Доступ" (template/access-drawer.php) and "Забыли пароль?" (the login * drawer) */ /* the fields in one row (wrapping on a narrow screen); the site's usual * submit button, but not stuck to the panel's bottom — there are two forms */ .access-form .game-edit-form__row { flex-wrap : wrap; align-items : flex-start; } .access-form .game-edit-form__row .game-edit-form__field { flex : 1 1 14rem; min-width : 0; } .game-edit-form.access-form .game-edit-form__actions { position : static; margin : var(--vspace-0_25) 0 0; padding : 0; border-top : 0; background-color : transparent; } .access-form + .access-form { margin-top : var(--vspace-1_5); padding-top : var(--vspace-1); border-top : 1px solid var(--color-border); } .access-form__success { margin : 0 0 var(--vspace-0_75); font-size : 1.5rem; line-height : 1.5; color : var(--color-1, #04766f); } .access-form__success[hidden], #login-form[hidden], #login-reset-form[hidden] { display : none; } /* "Запомнить меня" in the login form */ .login-panel__remember { margin-bottom : var(--vspace-0_75); } .login-panel__forgot { margin : var(--vspace-0_75) 0 0; font-size : 1.4rem; text-align : center; } /* "Политика конфиденциальности" (/privacy/): the cookie table scrolls on * its own on a phone */ .privacy__table { overflow-x : auto; margin-bottom : var(--vspace-1); } .privacy__table table { min-width : 52rem; } .privacy__updated { font-size : 1.4rem; color : var(--color-text-light); } /* "Гайд для авторов" (/guide/): the contents and the sections */ .guide__toc { margin : var(--vspace-1) 0 var(--vspace-1_5); padding : var(--vspace-0_75) var(--vspace-1); border : 1px solid var(--color-border); border-radius : var(--border-radius); } .guide__toc ol { columns : 2; margin : 0 0 0 2rem; } .guide__toc li { margin : 0 0 .4rem; break-inside : avoid; } .guide h2 { margin-top : var(--vspace-2); scroll-margin-top : var(--vspace-2); } @media screen and (max-width: 600px) { .guide__toc ol { columns : 1; } } /* ==================================================================== * # MOBILE: HEADINGS AND SPACING A QUARTER SMALLER * * Below 600px the heading sizes (--text-lg and up: each is the previous one * times the ratio, so scaling --text-lg scales them all) and the spacing * between blocks (--vspace-1_25 and up) are 3/4 of the desktop ones. Body * text, its line height and the small gaps (--vspace-1 and below) stay. * -------------------------------------------------------------------- */ @media screen and (max-width: 600px) { :root { --text-lg : calc(var(--text-md) * var(--text-scale-ratio) * .75); --vspace-1_25 : calc(1.25 * .75 * var(--space)); --vspace-1_5 : calc(1.5 * .75 * var(--space)); --vspace-1_75 : calc(1.75 * .75 * var(--space)); --vspace-2 : calc(2 * .75 * var(--space)); --vspace-2_5 : calc(2.5 * .75 * var(--space)); --vspace-3 : calc(3 * .75 * var(--space)); --vspace-3_5 : calc(3.5 * .75 * var(--space)); --vspace-4 : calc(4 * .75 * var(--space)); --vspace-4_5 : calc(4.5 * .75 * var(--space)); --vspace-5 : calc(5 * .75 * var(--space)); /* buttons keep their height */ --vspace-btn : calc(2 * var(--space)); } /* heading line heights follow their smaller sizes */ h1, .h1 { line-height : calc(2.25 * .75 * var(--space)); } h2, .h2, .sun-editor.sun-editor .se-wrapper .sun-editor-editable h2 { line-height : calc(1.375 * .75 * var(--space)); } h3, .h3, .sun-editor.sun-editor .se-wrapper .sun-editor-editable h3 { line-height : calc(1.125 * .75 * var(--space)); } /* the header search keeps its height */ .s-header__search-inner { height : calc(3 * var(--space)); } /* the drawer's sticky editor toolbar: the panel's top padding is 2rem here */ .game-edit-panel .sun-editor.sun-editor .se-toolbar:not([style*="relative"]) { top : -2rem; } } @media screen and (max-width: 500px) { h1, .h1 { line-height : calc(1.875 * .75 * var(--space)); } } /* headings sized by their own rules, not by the --text-* tokens: the same * sizes times 3/4 (each override after the rule it scales) */ @media screen and (max-width: 700px) { .home-posts-title.home-posts-title--main { font-size : 2.1rem; } } @media screen and (max-width: 600px) { /* post and hero titles: --entry-title-size × the width's multiplier */ .entry__title, .hero__entry-title { font-size : calc(var(--entry-title-size) * var(--text-multiplier) * .75); } /* post and game card titles */ .bricks-wrapper .entry__title { font-size : calc(var(--text-md) * .75); line-height : 1.25; } } @media screen and (max-width: 500px) { .s-pageheader .page-title { font-size : 3.6rem; } .ss-search .s-pageheader .page-title { font-size : 2.7rem; } } @media screen and (max-width: 420px) { .bricks-wrapper .entry__title { font-size : calc(var(--text-size) * 1.659 * .75); } } @media screen and (max-width: 400px) { .s-pageheader .page-title { font-size : 3.15rem; } }