/* ////////////////////////////////////////////////////////////////////////// Renge 3.2.1 ////////////////////////////////////////////////////////////////////////// I. Customize | ├─ Global settings ├─ Fonts ├─ Color of details ├─ Light version ├─ Dark version ├─ Color version └─ Hiding 'Portal' notifications II. 3rd party scripts | ├─ Normalize.css └─ lightense-images.js, progress bar III. Theme | ├─ 1.Global ├─ 2.Header ├─ 3.Pinned ├─ 4.Loop ├─ 5.Pagination & Load more ├─ 6.Search function ├─ 7.Post — Header ├─ 8.Post — Content ├─ 9.Post — Share ├─ 10.Post — Navigation ├─ 11.Post — Comments ├─ 12.Author & Tag page ├─ 13.Subscribe form ├─ 14.Footer ├─ 15.Custom — Pages ├─ 16.Custom — Error page ├─ 17.Custom — Tags & Authors page ├─ 18.Custom — Membership page ├─ 19.Custom — Account page └─ 20.Colors ////////////////////////////////////////////////////////////////////////// I. Customize ////////////////////////////////////////////////////////////////////////// */ :root { /* Global settings –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Logo */ --height-logo-header: 60px; --height-logo-footer: 45px; /* Logo for custom pages (sign-in, sign-up, etc) */ --height-logo-signin: 55px; /* Logo for mobile devices */ --height-logo-mobile: 40px; /* Global wrapper */ --max-width-global-wrap: 1200px; /* Post wrapper */ --max-width-post-wrap: 700px; /* Border */ --border: 1px dashed; /* Fonts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Headings, logo, search results */ --font-family-one: 'Spartan', sans-serif; --font-weight-one-bold: 700; /* Header, footer, buttons, etc */ --font-family-two: 'Spartan', sans-serif; --font-weight-two-medium: 500; --font-weight-two-semi-bold: 600; --font-weight-two-bold: 700; /* Post content */ --font-family-three: 'Mulish', sans-serif; --font-weight-three-regular: 400; /* Code block, table, small headings, etc */ --font-family-four: 'Source Code Pro', monospace; --font-weight-four-medium: 500; --font-family-five: 'Raleway', sans-serif; --font-weight-five-medium: 500; --font-weight-five-bold: 900; /* Color of details –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* --ghost-accent-color: #00e6cb; */ /* Light version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Fonts */ --color-font-one: #141c3a; --color-font-two: #fff; /* Background & Elements */ --color-one: #f1f1f1; --color-two: #141c3a; --color-three: #9ea1a4; --color-four: #fff; --color-body: #fff; --color-dots: #141c3a; --color-search-close: #fff; --color-notification: #aaef52; --color-notification-false: #F74856; --color-accent: #A3CCD3; --color-preference: 1; --color-underline: #A3CCD3; --color-feature: #DBFE87; /* Background, opacity and shadow */ --bg-color-all: rgba(0, 0, 0, .08); --bg-color-hero: rgba(0, 0, 0, .025); --bg-color-small-image: rgba(0, 0, 0, .08); --bg-search: rgba(0, 0, 0, .7); --bg-nav: #fff --opacity-bg-color: 1; --opacity-bg-dots: .5; --box-shadow: rgba(0, 0, 0, .1); --box-shadow-nav: transparent; /* Tags */ --tag-color-ai-generated-news: #A3CCD3; --tag-color-apple: #A3CCD3; --tag-color-computing: #ABFFE9; --tag-color-features: #F4CB82; --tag-color-feature: #F4CB82; --tag-color-future: #F4CB82; --tag-color-gaming: #A3CCD3; --tag-color-how-to: #579BB1; --tag-color-internet: #A3CCD3; --tag-color-mac: #A3CCD3; --tag-color-media: #A3CCD3; --tag-color-mobile: #EABBA4; --tag-color-news: #EAA0A0; --tag-color-oneplus: #A3CCD3; --tag-color-rants: #A3CCD3; --tag-color-rant: #A3CCD3; --tag-color-recommendation: #A3CCD3; --tag-color-review: #BBBBE2; --tag-color-reviews: #BBBBE2; --tag-color-roundsup: #A3CCD3; --tag-color-samsung: #A3CCD3; --tag-color-shorts: #A3CCD3; --tag-color-smart-home: #A3CCD3; --tag-color-unpacked: #A3CCD3; --tag-color-wearables: #A3CCD3; --tag-color-web: #BBBBE2; } /* Dark version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .dark-mode { /* Fonts */ --color-font-one: #f7f9f9; --color-font-two: #182029; /* Background & Elements */ --color-one: #242d39; --color-two: #f7f9f9; --color-three: #485b73; --color-four: #242d39; --color-body: #0f0f0f; --color-dots: #485b73; --color-search-close: #f7f9f9; --color-notification: #aaef52; --color-notification-false: #F74856; --color-accent: #324F99; --color-underline: #324F99; --color-preference: 0; --color-feature: #37623B; /* Background, opacity and shadow */ --bg-color-all: #293340; --bg-color-hero: #1e2732; --bg-color-small-image: #293340; --bg-search: rgba(0, 0, 0, .6); --bg-nav: #0f0f0f; --opacity-bg-color: .95; --opacity-bg-dots: 1; --box-shadow: transparent; --box-shadow-nav: transparent; /* Tags */ --tag-color-ai-generated-news: #324F99; --tag-color-apple: #324F99; --tag-color-computing: #284946; --tag-color-feature: #694F11; --tag-color-features: #694F11; --tag-color-future: #694F11; --tag-color-gaming: #324F99; --tag-color-how-to: #0C6451; --tag-color-internet: #324F99; --tag-color-mac: #324F99; --tag-color-media: #324F99; --tag-color-mobile: #804317; --tag-color-news: #9F0B3E; --tag-color-oneplus: #324F99; --tag-color-rants: #804317; --tag-color-rant: #804317; --tag-color-recommendation: #324F99; --tag-color-reviews: #553455; --tag-color-review: #553455; --tag-color-roundsup: #324F99; --tag-color-samsung: #324F99; --tag-color-shorts: #324F99; --tag-color-smart-home: #324F99; --tag-color-unpacked: #324F99; --tag-color-wearables: #324F99; --tag-color-web: #553455; } /* Automatic dark version [duplicate dark version] –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (prefers-color-scheme:dark) { .auto-dark-mode { /* Fonts */ --color-font-one: #f7f9f9; --color-font-two: #182029; /* Background & Elements */ --color-one: #242d39; --color-two: #f7f9f9; --color-three: #485b73; --color-four: #242d39; --color-body: #0f0f0f; --color-dots: #485b73; --color-search-close: #f7f9f9; --color-notification: #aaef52; --color-notification-false: #F74856; --color-accent: #324F99; --color-underline: #324F99; --color-preference: 0; --color-feature: #37623B; /* Background, opacity and shadow */ --bg-color-all: #293340; --bg-color-hero: #1e2732; --bg-color-small-image: #293340; --bg-search: rgba(0, 0, 0, .6); --bg-nav: #0f0f0f; --opacity-bg-color: .95; --opacity-bg-dots: 1; --box-shadow: transparent; --box-shadow-nav: transparent; /* Tags */ --tag-color-ai-generated-news: #324F99; --tag-color-apple: #324F99; --tag-color-computing: #284946; --tag-color-features: #694F11; --tag-color-feature: #694F11; --tag-color-future: #694F11; --tag-color-gaming: #324F99; --tag-color-how-to: #0C6451; --tag-color-internet: #324F99; --tag-color-mac: #324F99; --tag-color-media: #324F99; --tag-color-mobile: #804317; --tag-color-news: #9F0B3E; --tag-color-oneplus: #324F99; --tag-color-rants: #804317; --tag-color-rant: #804317; --tag-color-recommendation: #324F99; --tag-color-reviews: #553455; --tag-color-review: #553455; --tag-color-roundsup: #324F99; --tag-color-samsung: #324F99; --tag-color-shorts: #324F99; --tag-color-smart-home: #324F99; --tag-color-unpacked: #324F99; --tag-color-wearables: #324F99; --tag-color-web: #553455; } } /* Color version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-hash-site-pearl, body.tag-hash-post-bg-pearl, .global-hash-site-parchment, body.tag-hash-post-bg-parchment, .global-hash-site-celeste, body.tag-hash-post-bg-celeste, .global-hash-site-arctic, body.tag-hash-post-bg-arctic, .global-hash-site-lilac, body.tag-hash-post-bg-lilac, .global-hash-site-pink, body.tag-hash-post-bg-pink, .global-hash-site-sand, body.tag-hash-post-bg-sand, .global-hash-site-canary, body.tag-hash-post-bg-canary, .global-hash-site-avocado, body.tag-hash-post-bg-avocado, .global-hash-site-jade, body.tag-hash-post-bg-jade, .global-hash-site-custom-light-color { /* Fonts */ --color-font-one: #141c3a; --color-font-two: #141c3a; /* Background & Elements */ --color-one: rgba(0, 0, 0, .1); --color-two: #141c3a; --color-three: rgba(0, 0, 0, .8); --color-four: rgba(0, 0, 0, .08); --color-body: var(--color-site-light); --color-dots: #141c3a; --color-search-close: #fff; --color-notification: #fff; --color-notification-false: #F74856; /* Background, opacity and shadow */ --bg-color-all: rgba(0, 0, 0, .05); --bg-color-hero: rgba(0, 0, 0, .03); --bg-color-small-image: rgba(0, 0, 0, .08); --bg-search: rgba(0, 0, 0, .6); --bg-nav: rgba(0, 0, 0, .1); --opacity-bg-color: .95; --opacity-bg-dots: .6; --box-shadow: transparent; --box-shadow-nav: rgba(0, 0, 0, .1); } .global-hash-site-rose, body.tag-hash-post-bg-rose, .global-hash-site-ruby, body.tag-hash-post-bg-ruby, .global-hash-site-burgundy, body.tag-hash-post-bg-burgundy, .global-hash-site-eggplant, body.tag-hash-post-bg-eggplant, .global-hash-site-magenta, body.tag-hash-post-bg-magenta, .global-hash-site-neon, body.tag-hash-post-bg-neon, .global-hash-site-ultramarine, body.tag-hash-post-bg-ultramarine, .global-hash-site-sapphire, body.tag-hash-post-bg-sapphire, .global-hash-site-grass, body.tag-hash-post-bg-grass, .global-hash-site-emerald, body.tag-hash-post-bg-emerald, .global-hash-site-custom-dark-color { /* Fonts */ --color-font-one: #fff; --color-font-two: #182029; /* Background & Elements */ --color-one: rgba(0, 0, 0, .15); --color-two: #fff; --color-three: rgba(255, 255, 255, .6); --color-four: rgba(0, 0, 0, .15); --color-body: var(--color-site-dark); --color-dots: #fff; --color-search-close: #fff; --color-notification: #fff; --color-notification-false: #F74856; /* Background, opacity and shadow */ --bg-color-all: rgba(0, 0, 0, .2); --bg-color-hero: rgba(0, 0, 0, .1); --bg-color-small-image: rgba(0, 0, 0, .2); --bg-search: rgba(0, 0, 0, .6); --bg-nav: rgba(0, 0, 0, .15); --opacity-bg-color: .95; --opacity-bg-dots: .9; --box-shadow: transparent; --box-shadow-nav: rgba(0, 0, 0, .12); } /* Hiding 'Portal' notifications –––––––––––––––––––––––––––––––––––––––––––––––––––– */ iframe[title="portal-notification"] { display: none; } /* ////////////////////////////////////////////////////////////////////////// II. 3rd party scripts ////////////////////////////////////////////////////////////////////////// */ /* Normalize.css –––––––––––––––––––––––––––––––––––––––––––––––––––– Version : 8.0.1 Website : necolas.github.io/normalize.css Repo : github.com/necolas/normalize.css Author : Nicolas Gallagher License : MIT –––––––––––––––––––––––––––––––––––––––––––––––––––– */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}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:-.25em}sup{top:-.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{padding:0;border-style:none}button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}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']{outline-offset:-2px;-webkit-appearance:textfield}[type='search']::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /* Custom settings for lightense-images.js, progress bar –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .lightense-backdrop{z-index:99998!important;background-color:var(--color-body)!important;-webkit-backdrop-filter:initial!important;backdrop-filter:initial!important}.lightense-wrap ~ br,.lightense-wrap ~ small{display:none}.lightense-wrap img{border-radius:0!important}.post-progress{position:fixed;z-index:90;top:0;right:0;left:0;width:100%;height:8px;transition:opacity .15s ease-out .3s;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.post-progress:not([value]){display:none}.post-progress,.post-progress[value]::-webkit-progress-bar{background-color:transparent}.post-progress[value]::-webkit-progress-value{background-color:var(--color-accent)}.post-progress[value]::-moz-progress-bar{background-color:var(--color-accent)}.post-progress[value='1']{opacity:0} /* ////////////////////////////////////////////////////////////////////////// III. Theme ////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------------------------------- 1.Global -------------------------------------------------------------------------- */ html, body { height: 100%; max-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; font-size: 19px; font-weight: 400; line-height: 1.5; word-wrap: break-word; word-break: break-word; color: var(--color-font-one); background-color: var(--color-body); } /* Preload –––––––––––––––––––––––––––––––––––––––––––––––––––– */ body:not(.is-loaded) .global-underline { transition-duration: 0s; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––––– */ h1,h2 { letter-spacing: -.5px; } h1,h2,h3,h4,h5,h6, input, textarea, blockquote { line-height: 1.3; color: var(--color-font-one); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-one); font-weight: var(--font-weight-one-bold); } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––––– */ a { text-decoration: none; color: var(--color-font-one); } /* input & textarea –––––––––––––––––––––––––––––––––––––––––––––––––––– */ input, textarea { border: none; border-radius: 0; outline: none; background-color: transparent; box-shadow: none; } input { font-family: var(--font-family-two); font-weight: var(--font-weight-two-semi-bold); } input:focus { color: var(--color-font-two); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--color-font-one); } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: var(--color-font-one); } input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: var(--color-font-one); } input::placeholder, textarea::placeholder { color: var(--color-font-one); } /* Background post color –––––––––––––––––––––––––––––––––––––––––––––––––––– */ body.global-hash-post-card-one-color .global-color::after { background-color: var(--bg-color-all) !important; } .global-color::after { opacity: var(--opacity-bg-color); } /* Heading –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-heading { font-size: 20px; display: block; width: 100%; margin: 5vh 0; text-align: center; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .global-bg-image { background: no-repeat center center/cover; } /* Underline –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-underline { padding-bottom: .2%; transition: background-size .6s ease-out; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left 123%/0 40%; } .global-underline:hover { background-size: 97% 40%; } /* Button –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-button { font-family: var(--font-family-two); font-size: 14px; font-weight: var(--font-weight-two-semi-bold); line-height: 1; position: relative; z-index: 0; display: inline-block; padding: 20px 25px 18px; cursor: pointer; letter-spacing: 1px; color: var(--color-font-two); border: none; outline: none; } .global-button::before, .global-button::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; } .global-button::before { z-index: -1; background-color: var(--color-accent); } .global-button::after { z-index: -2; transition-timing-function: ease; transition-duration: .15s; transition-property: top, left, right, bottom; pointer-events: none; background-color: var(--color-two); } .global-button:hover::after { top: 6px; right: -6px; bottom: -6px; left: 6px; } .global-button-social { font-family: var(--font-family-two); font-size: 14px; font-weight: var(--font-weight-two-semi-bold); line-height: 1; position: relative; z-index: 0; display: inline-block; padding: 20px 25px 18px; cursor: pointer; letter-spacing: 1px; color: var(--color-font-two); border: none; outline: none; } .global-button-social::before, .global-button-social::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; } .global-button-social::before { z-index: -1; background-color: var(--color-accent); } .global-button-social::after { z-index: -2; transition-timing-function: ease; transition-duration: .15s; transition-property: top, left, right, bottom; pointer-events: none; background-color: var(--color-two); } .global-button-social:hover::after { top: 6px; right: -6px; bottom: -6px; left: 6px; } /* Meta, Tags & Reading time –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-meta, .global-tags { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); position: relative; z-index: 1; width: 100%; } .global-tags-hash-sign{ color: var(--color-font-one); padding: 5px; background-color: var(--color-accent); border-radius: 6px; } .global-meta { margin-bottom: 2vh; } .global-tags a { margin: 10px 1.5% 0 0; letter-spacing: 1px; } .global-tags a, .global-meta time { display: inline-block; } .global-meta time::first-letter { text-transform: capitalize; } /* Hash sign */ .global-tags-hash-sign::before { position: relative; content: '#'; } .global-tags-hash::before { position: relative; content: '#'; } /* Special section –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-special, .global-special article { position: relative; } .global-special { display: flex; flex-grow: 1; margin: 10vh auto 25px; padding-top: 20px; border-top: 4px solid var(--color-accent); } .global-special h2 { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); line-height: 1.4; position: absolute; z-index: 1; top: 0; left: 0; display: inline-block; margin: 0; transform: translateY(-100%); letter-spacing: 0; color: var(--color-font-two); } .global-special h2 span { background-color: var(--color-accent); color: white; padding-left: 5px; padding-right: 5px; } .global-special article { flex: 1 0 25%; box-sizing: border-box; padding: 10px 25px; } .global-special article:first-of-type, .global-special article:first-of-type:last-of-type { padding-left: 0; } .global-special article:first-of-type:last-of-type { border-left: none; } .global-special article:not(:first-of-type):not(:last-of-type), .global-special article:last-of-type { border-left: var(--border) var(--color-three); } .global-special h3 { font-size: 20px; margin-top: 0; margin-bottom: 1vh; } .global-special h3 + .global-meta { margin-bottom: 0; } /* Members — Question about member account –––––––––––––––––––––––––––––––––––––––––––––––––––– */ small.global-question { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); display: block; margin-top: 5vh; } small.global-question a { transition: border-bottom-color .2s ease; border-bottom: 1px solid; } small.global-question a:hover { border-bottom-color: var(--color-accent); } /* Members — Labels –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-members-label { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); line-height: 1.4; position: absolute; top: -30px; left: -1px; color: var(--color-font-two); background-color: var(--color-accent); } /* Members — Notifications –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-notification div { font-family: var(--font-family-two); font-size: 13px; font-weight: var(--font-weight-two-semi-bold); position: fixed; z-index: 101; top: 25px; right: 10px; left: 10px; display: none; visibility: hidden; max-width: 600px; margin: 0 auto; padding: 20px; transform: translateY(-150%); -webkit-animation: slideDownNotification 5s cubic-bezier(.19, 1, .22, 1) forwards; animation: slideDownNotification 5s cubic-bezier(.19, 1, .22, 1) forwards; text-align: center; color: var(--color-font-two); background-color: var(--color-notification); } .global-notification .expired { background-color: var(--color-notification-false); } .global-notification.is-subscribe .subscribe, .global-notification.is-signin .signin, .global-notification.is-signup .signup, .global-notification.is-update-email .update-email, .global-notification.is-expired .expired, .global-notification.is-checkout-success .checkout-success { display: block; } @-webkit-keyframes slideDownNotification { 15% { transform: translateY(0) } 85% { transform: translateY(0) } 100% { visibility: visible } } @keyframes slideDownNotification { 15% { transform: translateY(0) } 85% { transform: translateY(0) } 100% { visibility: visible } } /* Wrap & Sticky Footer –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-wrap, .global-content { height: 100%; } .global-content { position: relative; display: flex; flex-direction: column; padding: 0 55px; } .global-main { flex: 1 0 auto; margin-top: 0; margin-bottom: 0; } .global-main, .global-footer { width: 100%; max-width: var(--max-width-global-wrap); margin-right: auto; margin-left: auto; } .global-footer { flex-shrink: 0; } /* RWD — Global settings –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .global-heading { font-size: 16px; } } /* RWD — Meta & Tags –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .global-meta, .global-tags { font-size: 12px; } .global-tags, .global-tags a { margin-top: 2px; margin-bottom: 10px; } } /* RWD — Special section –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1000px) { .global-special { margin-bottom: 10px; } .global-special h3 { font-size: 15px; } small.global-question, .global-members-label { font-size: 12px; } } @media (min-width:481px) and (max-width:1000px) { .global-special h3 { font-size: 17px; } } @media (max-width:1000px) { .global-special { flex-wrap: wrap; margin-top: 0; padding-top: 10px; } .global-special article:not(:first-of-type):not(:last-of-type), .global-special article:last-of-type { border-left: none; } .global-special article { flex-basis: 100%; padding-left: 0; } .global-special h3 { margin-bottom: 3px; } } /* @media (min-width:769px) and (max-width:1024px) { .global-special { margin-top: 5vh; } } */ @media (max-width:1024px) { .global-special { min-width: 100%; } .global-content { padding-right: 6%; padding-left: 6%; } } @media (min-width:200px) and (max-width:481px) { .global-special h3{ font-size: 13px; } } /* -------------------------------------------------------------------------- 2.Header -------------------------------------------------------------------------- */ .header-section { width: 100%; } .header-wrap { position: relative; margin-top: 30px; margin-bottom: var(--height-logo-header); } .header-wrap, .header-nav nav, .header-nav nav > ul + ul { display: flex; align-items: center; } .header-section, .header-logo, .header-nav nav { box-sizing: border-box; } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-logo { display: inline-block; flex: 1 0 auto; word-break: normal; } .header-logo, .header-logo .is-image { line-height: 0; } .header-logo .is-image, .header-logo .is-title { margin: 0; } .header-logo .is-image img { max-height: var(--height-logo-header); } .header-logo .is-image img, .header-logo .is-title { max-width: 300px; } .header-logo .is-title { font-family: var(--font-family-one); font-size: 35px; font-weight: var(--font-weight-one-bold); line-height: 1.3; display: inline-block; letter-spacing: -.5px; } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-nav { font-family: var(--font-family-two); font-weight: var(--font-weight-two-bold); position: relative; z-index: 99; flex: 0 1 100%; } .header-nav nav { width: 100%; padding: 0; } .header-nav nav ul { z-index: 1; margin: 0; padding: 0; list-style: none; word-break: normal; } .header-nav nav > ul { flex-grow: 1; } .header-nav nav > ul + ul { flex: 0 0 auto; } .header-nav li, .header-nav a { font-size: 14px; display: inline-block; } /* Item –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-nav a { line-height: 1.5; position: relative; margin: 0 30px 0 0; padding: 0; text-decoration: none; } .header-nav a::before { position: absolute; top: -3px; right: -6px; width: 6px; height: 6px; content: ''; transition-timing-function: ease; transition-duration: .3s; transition-property: background-color, opacity; border-radius: 100%; background-color: transparent; } .header-nav a:hover::before, .header-nav a.is-active::before, .header-nav a.is-active:hover::before { background-color: var(--color-accent); } .header-nav a:hover::before { opacity: 1; background-color: var(--color-accent); } .header-nav a.is-active:hover::before { opacity: 1; } /* Search icon –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-search { line-height: 0; } .header-search span { font-family: var(--font-family-two); font-size: 15px; font-weight: var(--font-weight-two-bold); display: none; margin-right: 8px; color: var(--color-font-two); } .header-search svg { width: 16px; cursor: pointer; fill: var(--color-font-one); } /* Toogle –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-checkbox, .header-checkbox:checked, .header-toggle, .header-checkbox:checked ~ nav { display: none; } .header-toggle, .header-toggle > span, .header-checkbox:checked ~ nav ul { position: relative; } .header-toggle .bar, .header-checkbox:checked ~ nav, .header-checkbox:checked ~ nav::before { position: absolute; } .header-toggle { z-index: 99; overflow: visible; width: 25px; height: 25px; margin: 0; padding: 5px; cursor: pointer; opacity: 1; border: none; outline: none; background-color: transparent; } .header-toggle > span { top: 50%; } .header-toggle > span, .header-toggle .bar { display: block; width: 100%; } .header-toggle .bar { height: 3px; content: ''; transition: transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1) .2s; background-color: var(--color-two); } .header-toggle .bar:nth-child(1) { top: -10px; } .header-toggle .bar:nth-child(3) { top: 10px; } .header-checkbox:checked ~ label .bar { transition: transform .3s cubic-bezier(.645, .045, .355, 1) .3s, top .3s cubic-bezier(.645, .045, .355, 1); } .header-checkbox:checked ~ label .bar:nth-child(1), .header-checkbox:checked ~ label .bar:nth-child(3) { top: 0; } .header-checkbox:checked ~ label .bar:nth-child(1), .header-checkbox:checked ~ label .bar:nth-child(2) { transform: rotate(45deg); } .header-checkbox:checked ~ label .bar:nth-child(3) { transform: rotate(-45deg); } .header-checkbox:checked ~ nav { z-index: 98; background-color: var(--color-body); box-shadow: 0 25px 95px 5px var(--box-shadow-nav); } .header-checkbox:checked ~ nav::before { z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: var(--bg-nav); } .header-checkbox:checked ~ nav ul { display: inline-block; box-sizing: border-box; margin: 0; padding: 0 0 0 15px; list-style: none; } /* RWD — Header –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .header-wrap { min-height: 60px; margin-top: 20px; margin-bottom: 20px; } .header-logo { flex-basis: 75%; } .header-logo .is-title { max-width: 220px; } .header-logo .is-image img { max-height: var(--height-logo-mobile); } .header-nav { flex-basis: 25%; } .header-checkbox:checked ~ nav { top: 40px; right: 0; min-width: 200px; } } @media (min-width:481px) and (max-width:1024px) { .header-wrap { margin-top: 30px; margin-bottom: 30px; } .header-logo, .header-nav { flex-basis: 50%; } .header-checkbox:checked ~ nav { top: 50px; right: -10px; max-width: 200px; } } @media (max-width:768px) { .header-logo .is-title { font-size: 25px; } } @media (min-width:769px) and (max-width:1024px) { .header-logo .is-title { font-size: 28px; } } @media (max-width:1024px) { .header-nav { text-align: right; } .header-toggle, .header-search span { display: inline-block; } .header-nav nav > ul, .header-nav nav > ul + ul, .header-nav-dropdown svg { display: none; } .header-nav ul > li { display: block; } .header-nav a { line-height: 1.3; margin-right: 8px; padding: 5px 10px 9px 0; word-break: break-word; } .header-nav a::before { top: 2px; right: 2px; } .header-nav .signup { padding: 0; letter-spacing: 0; } .header-nav .signup::before, .header-nav .signup::after { background-color: transparent; } .header-nav .signup a { font-weight: var(--font-weight-two-bold); } .header-checkbox:checked ~ nav { display: flex; flex-wrap: wrap; padding-top: 15px; padding-bottom: 15px; } .header-checkbox:checked ~ nav.is-search { padding-bottom: 65px; } .header-checkbox:checked ~ nav ul { width: 100%; } .header-checkbox:checked ~ nav ul ul { padding-left: 0; } .header-search { position: absolute; right: 0; bottom: -65px; left: 0; box-sizing: border-box; width: 100%; height: 50px; padding: 17px 18px 0 0; cursor: pointer; background-color: var(--color-accent); } .header-search svg { width: 15px; margin-bottom: -2px; fill: var(--color-font-two); } } @media (min-width:1025px) { .header-logo, .header-nav-dropdown.is-active ul, .header-nav-dropdown.is-active ul::before { position: absolute; } .header-logo { z-index: 98; top: 0; left: calc(50% - 150px); width: 300px; text-align: center; } .header-nav { pointer-events: none; } .header-nav li, .header-nav-dropdown ul li { pointer-events: auto; } .header-nav .signup { margin-right: 25px; padding: 0; } .header-nav nav:not(.is-search) .signin a, .header-nav nav:not(.is-search) .signout a { margin-right: 0; } .header-nav nav.is-search .signin a, .header-nav nav.is-search .signout a { margin-right: 26px; } .header-nav .signup a { font-family: var(--font-family-two); font-size: 12px; font-weight: var(--font-weight-two-semi-bold); margin-right: 0; padding: 10px 12px 8px; letter-spacing: .5px; color: var(--color-font-two); } .header-nav-dropdown ul, .header-nav .signup a::before { display: none; } .header-nav-dropdown { display: inline-block; width: 30px; margin-right: 20px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; } .header-nav-dropdown svg { width: 22px; margin: 0 0 3px; fill: var(--color-font-one); } .header-nav-dropdown.is-active ul { font-size: 15px; z-index: 999; top: 40px; display: block; min-width: 140px; margin: 0; padding: 20px 10px 15px; list-style: none; cursor: default; transform: translateX(-17px); background-color: var(--color-body); box-shadow: 0 25px 95px 5px var(--box-shadow-nav); } .header-nav-dropdown.is-active ul::before { z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: var(--bg-nav); } .header-nav-dropdown ul li { position: relative; display: block; padding: 0 0 6px; text-align: left; background-color: transparent; } .header-nav-dropdown a { line-height: 1.5; display: inline-block; margin: 0 7px; padding: 2px; text-decoration: none; word-break: normal; } .header-nav-dropdown a::before { top: 0; } } @media (min-width:1025px) and (max-width:1280px) { .header-nav a, .header-nav .signin a, .header-nav .signout a, .header-nav .signup { margin-right: 18px; } } /* -------------------------------------------------------------------------- 3.Pinned -------------------------------------------------------------------------- */ .pinned-section { display: flex; } .pinned-pages { border-color: var(--color-announcements); } .pinned-pages h2 span { background-color: var(--color-announcements); } .pinned-pages + .pinned-posts { margin-left: 35px; } .pinned-pages.items-1, .pinned-pages.items-3 + .pinned-posts { flex-basis: 25%; } .pinned-pages.items-2, .pinned-pages.items-2 + .pinned-posts { flex-basis: 50%; } .pinned-pages.items-3, .pinned-pages.items-1 + .pinned-posts { flex-basis: 75%; } .pinned-pages.items-1 + .pinned-posts article:nth-of-type(4), .pinned-pages.items-2 + .pinned-posts article:nth-of-type(3), .pinned-pages.items-2 + .pinned-posts article:nth-of-type(4), .pinned-pages.items-3 + .pinned-posts article:nth-of-type(2), .pinned-pages.items-3 + .pinned-posts article:nth-of-type(3), .pinned-pages.items-3 + .pinned-posts article:nth-of-type(4), .pinned-pages.items-4 + .pinned-posts { display: none; } .featured-article-image{ margin-top: 0; margin-left: 0; height: 25px; width: 95px; } .featured-unit{ vertical-align: text-top; display: flex; flex-direction: row; padding-bottom: 10px; } /* .featured-cell{ display: flex; flex-direction: column; } */ .featured-article-image img{ width: 110px; height: 60px; object-fit: cover; align-items: baseline; padding: 10px; } .featured-underline { font-size: 18px; padding-bottom: .2%; transition: background-size .6s ease-out; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left 123%/0 40%; } .featured-underline:hover { background-size: 97% 40%; } /* RWD — Pinned –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1000px) { .pinned-section { margin-bottom: 4vh; padding: 25px 5% 0; border: var(--border) var(--color-three); } } @media (max-width:1024px) { .pinned-section { flex-wrap: wrap; } .pinned-pages + .pinned-posts { margin-top: 15px; margin-left: 0; } } /* -------------------------------------------------------------------------- 4.Loop -------------------------------------------------------------------------- */ .loop-section{ padding-top: 15px; } .loop-wrap { flex-wrap: wrap; margin-bottom: 5vh; -webkit-animation: slideTopLoop .8s ease; animation: slideTopLoop .8s ease; } .loop-wrap, .item-container { display: flex; } .item, .item-container { box-sizing: border-box; } @-webkit-keyframes slideTopLoop { 0% { transform: translateY(70px) } 100% { transform: translateY(0) } } @keyframes slideTopLoop { 0% { transform: translateY(70px) } 100% { transform: translateY(0) } } /* Members — Labels –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item.is-hero .item-content > span { position: initial; display: inline-block; margin-bottom: 20px; } /* Item –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item { flex: 1 0 50%; max-width: 50%; margin-top: 12vh; padding-top: 0; padding-bottom: 0; } .item.is-hero { flex-basis: 100%; max-width: 100%; margin-top: 10vh; padding: 50px 0; } .item.is-even { padding-right: 35px; padding-left: 60px; } .item.is-odd { padding-right: 60px; padding-left: 35px; } /* Container –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-container { position: relative; max-width: 100%; } .item-container::after { background-color: var(--bg-color-hero); } .item.is-hero .item-container::before { z-index: -2; top: -6vh; right: 0; bottom: -4vh; max-width: 59.7%; opacity: var(--opacity-bg-dots); background-image: radial-gradient(var(--color-dots) 6%, transparent 0); background-size: 28px 28px; } .item.is-hero .item-container::before, .item.is-hero .item-container::after { position: absolute; width: 100%; content: ''; } .item.is-hero .item-container::after { z-index: -3; top: -7vh; right: 70px; bottom: 4vh; max-width: calc(59.7% - 65px); } .item.is-hero.is-image .item-container::before { max-width: 491px; } .item.is-hero.is-image .item-container::after { max-width: 427px; } .item.is-even .item-container, .item.is-odd .item-container { border-left: var(--border) var(--color-three); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-image { line-height: 0; position: relative; z-index: 1; float: right; width: 125px; height: 125px; margin-bottom: 15px; margin-left: 7%; } .item-image::after { position: absolute; z-index: -1; top: -10px; right: 10px; bottom: 10px; left: -10px; content: ''; pointer-events: none; background-color: var(--bg-color-small-image); } .item.is-hero .item-image { top: 0; right: 40px; float: none; flex: 0 0 350px; order: 2; width: 350px; height: 100%; margin: 0; -webkit-animation: slideTopImage 1s ease; animation: slideTopImage 1s ease; } .item.is-hero .item-image::after { display: none; } @-webkit-keyframes slideTopImage { 0% { transform: translateY(40px) } 100% { transform: translateY(0) } } @keyframes slideTopImage { 0% { transform: translateY(40px) } 100% { transform: translateY(0) } } /* Figcaption */ .item-image figcaption { font-size: 10px; line-height: 1.2; position: absolute; right: 0; bottom: 0; padding: 3px; transform: translateY(100%); text-align: right; background-color: var(--color-body); } .item-image figcaption, .item-image figcaption a { color: var(--color-font-one); } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-content { width: 100%; padding: 10px 0 10px 5%; } .item.is-hero .item-content { padding: 0; will-change: transform; } .item.is-hero.is-image .item-content { padding-right: 5%; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-title { font-size: 30px; width: 100%; margin: 0 0 2vh -2px; } .item.is-image:not(.is-hero) .item-title { width: calc(93% - 125px); } .item.is-hero .item-title { font-size: 75px; max-width: 1000px; margin-left: -4px; } .item.is-hero .item-title a { -webkit-filter: brightness(107%); filter: brightness(107%); } /* Disable filter for Edge */ @supports (-ms-ime-align:auto) { .item.is-hero .item-title a { -webkit-filter: initial; filter: initial; } } /* Excerpt –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-excerpt { font-family: var(--font-family-two); font-size: 13px; font-weight: var(--font-weight-two-medium); line-height: 1.6; width: 95%; max-width: 400px; margin-top: 0; margin-bottom: 0; padding: 5px 0 10px; } .item.is-hero .item-excerpt { font-size: 14px; font-weight: var(--font-weight-two-semi-bold); line-height: 1.9; max-width: 600px; padding-top: 25px; padding-bottom: 4vh; -moz-column-count: 1; column-count: 1; -moz-column-gap: 30px; column-gap: 30px; } /* RWD — Loop –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:700px) { .item, .item.is-hero { margin-top: 0; margin-bottom: 20px; } .item.is-hero { padding-bottom: 35px; } .item.is-even, .item.is-odd { padding-right: 0; padding-left: 0; } .item.is-hero .item-container { flex-wrap: wrap; } .item.is-hero .item-container::after { right: 0; max-width: 59.7%; } .item.is-hero.is-image .item-container::before, .item.is-hero.is-image .item-container::after { display: none; } .item-image::after { background-color: var(--bg-color-hero); } .item.is-hero .item-image { flex-basis: 100%; order: 0; max-width: 100%; margin-bottom: 20px; } .item.is-hero .item-image img, .item.is-hero.is-image .item-image::after { max-width: 240px; } .item.is-hero .item-container::before, .item.is-hero.is-image .item-image::before { background-size: 17px 17px; } .item.is-hero.is-image .item-image::before, .item.is-hero.is-image .item-image::after { position: absolute; top: -35px; left: 35px; display: block; content: ''; } .item.is-hero.is-image .item-image::before { z-index: -2; right: 0; bottom: 10px; background-image: radial-gradient(var(--color-dots) 6%, transparent 0); } .item.is-hero.is-image .item-image::after { z-index: -3; bottom: 40px; } .item-image figcaption { right: initial; left: 0; transform: translateY(0); text-align: left; } .item.is-hero .item-content, .item.is-hero.is-image .item-content { padding-right: 0; } .item.is-hero .item-content > span { margin-bottom: 10px; } .item.is-hero .item-title { font-size: 32px; margin-bottom: 0; margin-left: -1px; } } @media (min-width:481px) and (max-width:768px) { .item, .item.is-hero { margin-top: 4vh; margin-bottom: 0; } .item.is-even, .item.is-odd { padding-right: 10%; padding-left: 10%; } .item.is-hero .item-container::after { right: 26px; max-width: calc(59.7% - 26px); } .item.is-hero.is-image .item-container::before { max-width: 275px; } .item.is-hero.is-image .item-container::after { max-width: 245px; } .item.is-hero .item-image { flex-basis: 200px; width: 200px; } .item.is-hero .item-title { font-size: 40px; } } @media (max-width:768px) { .item { flex-basis: 100%; max-width: 100%; } .item.is-hero.is-first { margin-top: 0; } .item.is-even .item-container, .item.is-odd .item-container { display: block; border-left: none; } .item.is-odd .item-container > span, .item.is-even .item-container > span { position: initial; display: inline-block; margin-bottom: 5px; } .item-content { padding-left: 0; } .item-title { margin-left: 0; } } @media (min-width:769px) and (max-width:1024px) { .item { margin-top: 10vh; } .item.is-hero.is-first { margin-top: 3vh; } .item.is-even { padding-right: 2%; padding-left: 0; } .item.is-odd { padding-right: 0; padding-left: 2%; } .item.is-hero.is-image .item-container::before { max-width: 375px; } .item.is-hero.is-image .item-container::after { max-width: 314px; } .item.is-hero .item-container::after { right: 67px; } .item.is-hero .item-image { flex-basis: 290px; width: 290px; } .item.is-hero .item-title { font-size: 55px; } .item.is-hero .item-excerpt { max-width: 480px; } .item.is-hero.is-image .item-excerpt { max-width: 380px; } } @media (max-width:1024px) { .loop-wrap { margin-bottom: 0; } .item.is-hero .item-container::before { top: -3.1vh; opacity: calc(var(--opacity-bg-dots) / 1.5); } .item.is-hero .item-container::after { top: -4vh; bottom: 3vh; } .item-image { width: 95px; height: 95px; margin-top: 6px; } .item.is-image:not(.is-hero) .item-title { width: calc(93% - 95px); } .item-image::after { top: -6px; right: 6px; bottom: 6px; left: -6px; } .item.is-hero .item-image { right: 0; } .item.is-hero .item-content { will-change: auto; } .item-excerpt { padding-top: 5px; } .item-excerpt, .item.is-hero .item-excerpt { padding-bottom: 5px; } .item.is-hero .item-excerpt { padding-top: 15px; } } @media (min-width:1025px) and (max-width:1280px) { .item.is-hero .item-excerpt { max-width: 500px; padding-top: 10px; padding-bottom: 3vh; } .item.is-hero .item-title { font-size: 65px; } } @media (max-width:1280px) { .item-title { font-size: 24px; } .item.is-hero .item-excerpt { line-height: 1.7; -moz-column-count: 1; column-count: 1; } } /* -------------------------------------------------------------------------- 5.Pagination & Load more -------------------------------------------------------------------------- */ .load-more { display: none; width: 50px; height: 50px; padding: 0; cursor: pointer; transition-timing-function: cubic-bezier(.39, .07, .68, 1.7); transition-duration: .25s; transition-property: transform, background-color; border: 10px solid var(--color-accent); border-radius: 50px; outline: none; background-color: var(--color-body); } .load-more:hover { transform: scale(.6); background-color: var(--color-accent); } .pagination-section { margin: 10vh auto 15vh; padding-bottom: 1px; text-align: center; } /* Fixes Ghost rendering error */ .pagination { display: none; visibility: hidden; opacity: 0; } /* Standard */ .load-more.is-standard { width: initial; height: initial; transition: initial; border-radius: initial; background-color: initial; padding: 20px 25px 18px; border: none } .load-more.is-standard:hover { transform: none } /* RWD — Pagination & Load more –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .load-more { width: 40px; height: 40px; border-width: 8px; } } @media (max-width:768px) { .pagination-section { margin-top: 5vh; margin-bottom: 9vh; } } /* -------------------------------------------------------------------------- 6.Search function -------------------------------------------------------------------------- */ .search-section { z-index: 998; display: none; } .search-section, .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .search-overlay { z-index: 997; background-color: var(--bg-search); } .search-content { position: relative; z-index: 999; top: 20vh; overflow: hidden; width: calc(100% - 50px); max-width: 900px; margin: 0 auto; background-color: var(--color-body); } .search-content, .search-form input, .search-meta, .search-results { box-sizing: border-box; } .search-meta, .search-results small { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); display: block; width: 100%; } /* Close –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-close { position: absolute; z-index: 999; top: 50px; right: 50px; cursor: pointer; } .search-close svg { width: 25px; height: 25px; fill: var(--color-search-close); } /* Form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-form input { font-size: 30px; display: block; width: 100%; padding: 25px 20px; color: var(--color-font-one); } /* Meta –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-meta { margin: 0; padding: 8px 0 8px 20px; text-align: left; color: var(--color-font-two); background-color: var(--color-accent); } .search-meta .is-hide { display: none; } /* Results –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-results { overflow-x: hidden; overflow-y: auto; width: 100%; max-height: calc(60vh - 105px); padding: 0 15px 0 20px; } .search-results small { margin-bottom: 7px; } .search-results small:first-of-type { margin-top: 20px; } .search-results a { font-family: var(--font-family-one); font-size: 22px; font-weight: var(--font-weight-one-bold); line-height: 1.3; display: inline-block; margin: 0 0 15px; } .search-results a:last-of-type { margin-bottom: 25px; } /* If active –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-is-active { overflow: hidden; -webkit-overflow-scrolling: auto; } .search-is-active .global-wrap { overflow-x: hidden; overflow-y: scroll; } .search-is-active .search-section { -webkit-animation: showSearch .2s ease forwards; animation: showSearch .2s ease forwards; } @-webkit-keyframes showSearch { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes showSearch { 0% { opacity: 0 } 100% { opacity: 1 } } /* Hiding the scrollbar –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (min-width:1025px) { .search-section::after { position: absolute; z-index: 996; top: 0; right: 0; width: 17px; height: 100%; content: ''; background-color: var(--color-body); } } /* RWD — Search function –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .search-content { width: calc(100% - 30px); } .search-form input { font-size: 18px; padding: 15px; } .search-meta { font-size: 9px; } .search-meta, .search-results { padding-left: 15px; } .search-results a { font-size: 16px; } } @media (max-width:1024px) { .search-close { display: none; } } /* -------------------------------------------------------------------------- 7.Post — Header -------------------------------------------------------------------------- */ .post-header.is-hero { margin-bottom: 8vh; -webkit-animation: slideTopLoop .8s ease; animation: slideTopLoop .8s ease; } .post-header.is-hero:not(.is-image) .item-content { padding-bottom: 8vh; } .post-header.is-page:not(.is-image) .item-title, .post-header.is-page:not(.is-image) .item-excerpt { margin-right: auto; margin-left: auto; text-align: center; } .post-header.is-page .item-excerpt { -moz-column-count: 1; column-count: 1; } /* RWD — Post — Header –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .post-header.is-hero { margin-bottom: 0; } } @media (min-width:481px) { .post-header.is-hero .item-container { align-items: center; } .post-header.is-hero .item-image { align-self: flex-start; } } @media (min-width:481px) and (max-width:768px) { .post-header.is-hero { margin-bottom: 5vh; } } @media (min-width:769px) { .post-header.is-hero.is-image .item-container { min-height: 45vh; } .post-header.is-hero.is-image .item-content { transform: translateY(-4vh); } .post-header.is-page:not(.is-image) .item-excerpt { font-size: 16px; } } /* -------------------------------------------- Post - Side Card --------------------------------------------- */ .side-card{ max-width: 220px; } /* -------------------------------------------------------------------------- 8.Post — Content -------------------------------------------------------------------------- */ .post-content a { /*color: #553455;*/ color:var(--color-accent); } .post-content { font-family: var(--font-family-three); font-weight: var(--font-weight-three-regular); max-width: var(--max-width-post-wrap); margin: 0 auto 15vh; } /* Margin elements –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content h1:first-child, .post-content h2:first-child, .post-content h3:first-child, .post-content h4:first-child, .post-content h5:first-child, .post-content h6:first-child, .post-content p:first-child { margin-top: 0; } .post-content p, .post-content iframe, .post-content ol, .post-content ul, .post-content table, .post-content p img { margin-top: 0; margin-bottom: 40px; } .post-content hr { margin-top: 60px; margin-bottom: 80px; } .post-content blockquote { text-align: center; font-style: italic; font-family: var(--font-family-two); font-weight: var(--font-weight-two-semi-bold); margin-top: 75px; margin-bottom: 75px; } .post-content .kg-card { width: 100%; margin-top: 50px; margin-bottom: 70px; } .post-content pre, .post-content .kg-code-card { margin-top: 20px; margin-bottom: 20px; } .post-content p, .post-content table, .post-content hr, .post-content blockquote, .post-content pre, .post-content p img, .post-content .kg-card { margin-right: 0; margin-left: 0; } .post-content iframe, .post-content .kg-embed-card > div, .post-content .kg-embed-card > iframe, .post-content .kg-embed-card > .fb-post, .post-content .kg-embed-card > .twitter-tweet { margin-right: auto !important; margin-left: auto !important; } .post-content .kg-embed-card > .twitter-tweet > iframe { margin-bottom: 0; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5 { line-height: 1.4; margin-bottom: 20px; margin-left: -1px; } .post-content h1 { font-size: 55px; margin-top: 60px; } .post-content h2 { font-size: 41px; margin-top: 55px; } .post-content h3 { font-size: 31px; margin-top: 45px; } .post-content h4 { font-size: 24px; margin-top: 40px; } .post-content h5 { font-size: 20px; margin-top: 40px; } .post-content h6 { font-size: 11px; margin-top: 40px; letter-spacing: 2px; text-transform: uppercase; } /* Paragraph –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content p { line-height: 1.75; position: relative; } /* hr –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content hr { position: relative; display: block; width: 80px; height: 1px; border: none; background-color: var(--color-three); } /* Mark –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content mark { padding-bottom: 2px; background-color: var(--color-accent); } /* kbd –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content kbd { font-size: 70%; display: inline-block; padding: 2px 8px 1px; border: 1px solid; } /* iframe –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content iframe { display: block; } /* Blockquote –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content blockquote, .post-content blockquote p { line-height: 1.5; } .post-content blockquote p { margin: 0; } .post-content blockquote { font-size: 30px; position: relative; box-sizing: border-box; width: 100%; padding-left: 55px; } .post-content blockquote::before { font-family: var(--font-family-two); font-size: 120px; font-weight: var(--font-weight-two-bold); position: absolute; top: -20px; left: -15px; content: '“'; color: var(--color-accent); } /* Alternative */ .post-content blockquote.kg-blockquote-alt { font-size: 36px; line-height: 1.4; box-sizing: border-box; padding: 6vh 3.3vw; text-align: center; border: 5px solid var(--color-accent); } .post-content blockquote.kg-blockquote-alt::before { display: none; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content a { transition: border-bottom-color .2s ease; border-bottom: 1px solid; } .post-content a:hover { border-bottom-color: var(--color-accent); } .post-content h1 a, .post-content h2 a, .post-content h3 a, .post-content h4 a, .post-content h5 a, .post-content blockquote a { transition: background-size .6s ease-out; border-bottom: none; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left 130%/80% 40%; } .post-content h1 a:hover, .post-content h2 a:hover, .post-content h3 a:hover, .post-content h4 a:hover, .post-content h5 a:hover, .post-content blockquote a:hover { background-size: 97% 40%; } /* Disable 'border-bottom' */ .post-content .post-image-link, .post-content sup a, .post-content .footnote-backref, .post-content .kg-bookmark-container, .post-content .members-cta-button { border-bottom: none !important; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content ul, .post-content ol { margin-right: 0; margin-left: 15px; } .post-content ul { padding-left: 15px; list-style: disc outside; } .post-content ol { padding-left: 20px; } .post-content ul li ul { list-style: circle outside; } .post-content ol, .post-content ol li ol { list-style: decimal outside; } .post-content ul ul, .post-content ul ol, .post-content ol ol, .post-content ol ul { font-size: 90%; margin: 15px 0; } .post-content li { margin-bottom: 10px; } .post-content dl dt { font-family: var(--font-family-two); font-weight: var(--font-weight-two-bold); float: left; clear: left; overflow: hidden; width: 180px; margin-bottom: 10px; text-align: right; white-space: nowrap; text-overflow: ellipsis; } .post-content dl dd { margin-bottom: 10px; margin-left: 200px; } /* Table –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content table { font-family: var(--font-family-four); font-size: 14px; display: table; width: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse; text-align: left; background-color: transparent; } .post-content th { border-top: 1px solid var(--color-three); } .post-content th, .post-content td { font-weight: var(--font-weight-four-medium); display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--color-three); } .post-content th:first-child, .post-content td:first-child { padding-left: 5px; } .post-content th:last-child, .post-content td:last-child { padding-right: 5px; } /* Responsive */ .post-content .responsive-table { overflow-x: auto; word-break: normal; } /* Footnotes –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .footnotes { padding: 10px 0 0; } .post-content .footnote-ref { font-size: 65%; } .post-content .footnotes-list { padding-left: 20px; list-style: decimal; } .post-content .footnotes-sep { margin: 50px 0 10px; } .post-content .footnotes p, .post-content .footnote-item { font-size: 14px; line-height: 1.3; margin-bottom: 10px; } /* Cardmas –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-card, .post-content .kg-card * { box-sizing: border-box; } .post-content .kg-button-card a, .post-content .kg-nft-card a, .post-content .kg-product-card-button { border-bottom: none; } .post-content .kg-audio-card, .post-content .kg-audio-card .kg-audio-thumbnail, .post-content .kg-callout-card, .post-content .kg-file-card .kg-file-card-container, .post-content .kg-file-card .kg-file-card-icon::before, .post-content .kg-nft-card .kg-nft-card-container, .post-content .kg-nft-card .kg-nft-image, .post-content .kg-product-card .kg-product-card-container, .post-content .kg-product-card .kg-product-card-image, .post-content .kg-toggle-card { border-radius: 0; } /* Audio card */ .post-content .kg-audio-card .kg-audio-volume-slider { width: 55px; } .post-content .kg-audio-card svg { fill: var(--color-font-one); } .post-content .kg-audio-card .kg-audio-playback-rate { color: var(--color-font-one); } /* Button card & Product card */ .post-content .kg-button-card a.kg-btn { position: relative; z-index: 0; height: 2.55em; padding: 1.3em 1.3em 1.25em; opacity: 1 !important; } .post-content .kg-button-card .kg-btn::before, .post-content .kg-button-card .kg-btn::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; } .post-content .kg-button-card .kg-btn::before { z-index: -1; background-color: var(--color-accent); } .post-content .kg-button-card .kg-btn::after { z-index: -2; transition-timing-function: ease; transition-duration: .15s; transition-property: top, left, right, bottom; background-color: var(--color-two); } .post-content .kg-button-card .kg-btn:hover::after { top: 6px; right: -6px; bottom: -6px; left: 6px; } .post-content .kg-button-card .kg-btn, .post-content .kg-product-card .kg-product-card-button { text-decoration: none; color: var(--color-font-two); border-radius: 0; } .post-content .kg-product-card-button:hover { opacity: .85; } .post-content .kg-product-card .kg-product-card-title { font-family: var(--font-family-two); } /* Callout card */ .post-content .kg-callout-card .kg-callout-emoji { flex-shrink: 0; } /* NFT card */ .post-content .kg-nft-card a { text-decoration: none; } .post-content .kg-nft-card .kg-nft-card-container { box-shadow: inset 0 0 0 1px rgb(124 139 154/25%); } /* Video card */ .post-content .kg-video-card.kg-width-full { right: 50%; left: 50%; width: calc(100vw - 55px - 55px); margin: 0 calc(-50vw + 55px); } /* RWD — Video card */ @media (min-width:481px) and (max-width:1024px) { .post-content .kg-video-card.kg-width-full { width: calc(100vw - 25px - 25px); margin-right: calc(-50vw + 25px); margin-left: calc(-50vw + 25px); } } @media (max-width:480px) { .post-content .kg-video-card.kg-width-full { width: 100vw; margin-right: -50vw; margin-left: -50vw; border-radius: 0; } } @media (min-width:1281px) { .post-content .kg-video-card.kg-width-wide { width: calc(100% + 180px + 180px); margin-left: -180px; } } @media (max-width:1280px) and (min-width:1025px) { .post-content .kg-video-card.kg-width-wide { position: relative; right: 50%; left: 50%; width: calc(100vw - 140px - 140px); margin-right: calc(-50vw + 140px); margin-left: calc(-50vw + 140px); } } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content code { font-size: 85%; padding: 2px 5px; } .post-content pre > code { display: block; padding: 15px; white-space: pre-wrap; } .post-content pre, .post-content .kg-code-card { min-width: 100%; } .post-content .kg-code-card pre, .post-content .kg-code-card code { margin: 0; } .post-content code, .post-content p code { background-color: var(--color-one); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content img, .post-content p img { position: relative; max-width: 100%; height: auto; } .post-content .kg-image-card { line-height: 0; } .post-content .kg-image-card:not(.kg-width-full):not(.kg-width-wide) { text-align: center; } .post-content .kg-width-full img { position: relative; right: 50%; left: 50%; width: calc(100vw - 55px - 55px); margin: 0 calc(-50vw + 55px); } .post-content .kg-image-card.kg-width-wide img { width: 100%; } .post-content .kg-width-full img, .post-content .kg-image-card.kg-width-wide:not(.kg-gallery-card) img { max-width: initial; } /* Gallery –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-gallery-image img { display: block; width: 100%; margin: 0; } .post-content .kg-gallery-row { flex-direction: row; justify-content: center; } .post-content .kg-gallery-row, .post-content .kg-gallery-container { display: flex; } .post-content .kg-gallery-container { position: relative; flex-direction: column; margin: 15px auto; } .post-content .kg-gallery-row:not(:first-of-type) { margin: 15px 0 0 0; } .post-content .kg-gallery-image:not(:first-of-type) { margin: 0 0 0 15px; } /* Bookmarks –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-bookmark-container, .post-content .kg-bookmark-content { display: flex; } .post-content .kg-bookmark-title, .post-content .kg-bookmark-metadata { font-family: var(--font-family-two); } .post-content .kg-bookmark-description, .post-content .kg-bookmark-metadata { display: -webkit-box; overflow-y: hidden; -webkit-box-orient: vertical; } .post-content .kg-bookmark-card + .kg-bookmark-card { margin-top: -35px; } .post-content .kg-bookmark-container { position: relative; z-index: 2; min-height: 140px; padding-bottom: 0; text-decoration: none; background-color: var(--color-four); box-shadow: 0 25px 95px 5px var(--box-shadow); } .post-content .kg-bookmark-content { align-items: flex-start; flex-direction: column; flex-grow: 1; justify-content: start; padding: 20px; } .post-content .kg-bookmark-title { font-size: 17px; font-weight: var(--font-weight-two-bold); line-height: 1.3; } .post-content .kg-bookmark-description { font-size: 13px; max-height: 40px; margin-top: 12px; -webkit-line-clamp: 2; } .post-content .kg-bookmark-metadata { font-size: 12px; font-weight: var(--font-weight-two-semi-bold); height: 20px; margin-top: 24px; -webkit-line-clamp: 1; } .post-content .kg-bookmark-metadata .kg-bookmark-icon { width: 20px; height: 20px; margin-right: 6px; margin-bottom: -5px; border-radius: 0; } .post-content .kg-bookmark-metadata span:nth-of-type(2)::before { margin-right: 6px; margin-left: 6px; content: '•'; } .post-content .kg-bookmark-thumbnail { position: relative; min-width: 28%; max-height: 100%; } .post-content .kg-bookmark-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; -o-object-fit: cover; object-fit: cover; } /* These classes will be deprecated. Keep them for GScan validation. */ .post-content .kg-bookmark-author, .post-content .kg-bookmark-publisher { display: inline; } /* Figcaption –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content img ~ small, .post-content p img ~ small, .post-content figcaption { font-family: var(--font-family-two); font-size: 11px; font-weight: var(--font-weight-two-medium); line-height: 1.2; display: block; box-sizing: border-box; width: 100%; text-align: center; letter-spacing: .5px; } .post-content figcaption { margin-top: 15px; } .post-content img ~ small, .post-content p img ~ small { position: absolute; right: 0; bottom: 25px; left: 0; margin: 0 auto; } /* Teaser –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .members-teaser { position: relative; margin-bottom: 20px; } .post-content .members-teaser::after { position: absolute; right: 50%; bottom: -20px; left: 50%; width: calc(100vw - 40px); height: 80%; max-height: 340px; margin: 0 calc(-50vw + 20px); content: ''; pointer-events: none; background-color: var(--color-body); -webkit-mask-image: linear-gradient(transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,black); mask-image: linear-gradient(transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,black); } /* CTA –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .members-cta { box-sizing: border-box; width: 100%; margin: 6vh auto 10vh; padding: 40px 60px; text-align: center; background-color: var(--color-four); box-shadow: 0 25px 95px 5px var(--box-shadow); } .post-content .members-cta h2 { margin: 20px auto 40px; } /* RWD — Post content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:320px) { .post-content .kg-bookmark-container { flex-direction: column; } .post-content .kg-bookmark-content { order: 2; padding: 15px; } .post-content .kg-bookmark-thumbnail { order: 1; width: 100%; min-height: 120px; } } @media (max-width:480px) { .post-content { font-size: 16px; } .post-content p { line-height: 1.7; } .post-content blockquote { padding-left: 32px; } .post-content blockquote::before { font-size: 60px; top: -8px; } .post-content blockquote.kg-blockquote-alt { font-size: 22px; } .post-content figcaption { margin-top: 10px; } .post-content .kg-bookmark-title { font-size: 14px; } .post-content .kg-bookmark-description { font-size: 12px; } .post-content .members-cta { margin: 0; padding: 25px 15px; } .post-content .members-cta h2 { font-size: 25px; margin-top: 10px; margin-bottom: 20px; } .post-content .members-teaser::after { width: 100vw; margin-right: -50vw; margin-left: -50vw } } @media (min-width:481px) and (max-width:768px) { .post-content blockquote { padding-left: 43px; } .post-content blockquote::before { font-size: 80px; top: -12px; } .post-content blockquote.kg-blockquote-alt { font-size: 26px; } .post-content .members-cta { padding: 30px; } } @media (max-width:768px) { .post-content h1 { font-size: 38px; margin-top: 50px; } .post-content h2 { font-size: 30px; margin-top: 45px; } .post-content h3 { font-size: 24px; margin-top: 40px; } .post-content h4 { font-size: 19px; margin-top: 35px; } .post-content h5 { font-size: 16px; } .post-content h5, .post-content h6 { margin-top: 30px; } .post-content blockquote { font-size: 20px; } .post-content blockquote.kg-blockquote-alt { padding-top: 4vh; padding-bottom: 4vh; border-width: 4px; } .post-content table { font-size: 14px; } .post-content p, .post-content iframe, .post-content ol, .post-content ul, .post-content table { margin-bottom: 20px; } .post-content hr, .post-content blockquote { margin-top: 40px; } .post-content .kg-card { margin-top: 30px; } .post-content .kg-bookmark-card + .kg-bookmark-card { margin-top: -20px; } .post-content hr, .post-content blockquote, .post-content .kg-card { margin-bottom: 40px; } .post-content p img { margin-bottom: 5px; } .post-content img ~ small, .post-content p img ~ small { bottom: -10px; } } @media (min-width:769px) and (max-width:1280px) { .post-content blockquote::before { font-size: 100px; top: -15px; } } @media (max-width:1024px) { .post-content .members-cta { margin-top: 0; } } @media (max-width:1280px) { .post-content blockquote::before { left: -5px; } } /* RWD — Images –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:700px) { .post-content .kg-width-full img { width: 100vw; margin-right: -50vw; margin-left: -50vw; border-radius: 0; } .post-content .kg-gallery-card .kg-gallery-container { margin-bottom: 5px; } .post-content .kg-gallery-card .kg-gallery-container, .post-content .kg-gallery-card .kg-gallery-row:not(:first-of-type) { margin-top: 5px; } .post-content .kg-gallery-card .kg-gallery-image:not(:first-of-type) { margin-left: 5px; } } @media (min-width:481px) and (max-width:1024px) { .post-content .kg-gallery-container { margin-bottom: 10px; } .post-content .kg-gallery-container, .post-content .kg-gallery-row:not(:first-of-type) { margin-top: 10px; } .post-content .kg-gallery-image:not(:first-of-type) { margin-left: 10px; } .post-content .kg-width-full img { width: calc(100vw - 25px - 25px); margin-right: calc(-50vw + 25px); margin-left: calc(-50vw + 25px); } } @media (min-width:1025px) and (max-width:1280px) { .post-content .kg-image-card.kg-width-wide img, .post-content .kg-gallery-container { position: relative; right: 50%; left: 50%; width: calc(100vw - 140px - 140px); margin-right: calc(-50vw + 140px); margin-left: calc(-50vw + 140px); } } @media (min-width:1281px) { .post-content .kg-image-card.kg-width-wide img, .post-content .kg-gallery-container { width: calc(100% + 180px + 180px); margin-left: -180px; } } /* -------------------------------------------------------------------------- 9.Post — Share -------------------------------------------------------------------------- */ .post-share-section { width: 100%; padding-top: 40px; } .post-share-wrap { position: relative; display: inline-flex; justify-content: center; width: 100%; } .post-share-wrap a { display: flex; align-items: center; justify-content: center; width: 85px; height: 64px; pointer-events: none; border: none; } .post-share-wrap a:first-of-type { padding-left: 10px; border-left: var(--border) var(--color-three); } .post-share-wrap a:last-of-type { padding-right: 10px; border-right: var(--border) var(--color-three); } .post-share-wrap svg { width: 22px; height: 22px; transition: fill .15s ease; pointer-events: auto; fill: var(--color-font-one); } .post-share-wrap a:hover svg { fill: var(--color-accent); } /* Copy link –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-share-wrap + input { display: block; cursor: default; opacity: 0; color: transparent; } .post-share-link { cursor: pointer; } .post-share-link svg { width: 26px; height: 26px; } .post-share-link + small { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); position: absolute; bottom: -40px; left: 0; width: 100%; text-align: center; opacity: 0; } .post-share-link:not(:active) + small { transition: opacity 10s step-end; } .post-share-link:active + small { opacity: 1; } /* RWD — Post share –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:700px) { .post-share-wrap a { width: 50px; height: 50px; } .post-share-wrap svg { width: 20px; height: 20px; } .post-share-link svg { width: 22px; height: 22px; } } /* -------------------------------------------------------------------------- 10.Post — Navigation -------------------------------------------------------------------------- */ .nextprev-section, .nextprev-section section { display: flex; } .nextprev-section { width: 100%; margin: 10vh auto 16vh; border-top: var(--border) var(--color-three); border-bottom: var(--border) var(--color-three); } .nextprev-section section { flex: 1 0 50%; box-sizing: border-box; margin-top: 40px; margin-bottom: 40px; } .nextprev-section section > div { align-self: center; max-width: 400px; } .nextprev-newer { padding-right: 20px; } .nextprev-older { justify-content: flex-end; padding-left: 20px; text-align: right; } /* Heading –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .nextprev-section small { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .nextprev-section h3 { font-size: 24px; display: block; margin-top: 10px; margin-bottom: 0; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .nextprev-newer .nextprev-image { margin-right: 20px; margin-left: 10px; } .nextprev-older .nextprev-image { margin-left: 30px; } .nextprev-image { position: relative; flex: 0 0 120px; transform: translateY(5px); } .nextprev-image, .nextprev-image img { width: 120px; min-height: 120px; } .nextprev-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .nextprev-image::after { position: absolute; z-index: -1; top: -10px; right: 10px; bottom: 10px; left: -10px; content: ''; pointer-events: none; background-color: var(--bg-color-small-image); } /* RWD — Post — Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .nextprev-section { margin-bottom: 10vh; } .nextprev-section section { margin-top: 30px; margin-bottom: 30px; padding-right: 0; padding-left: 0; } .nextprev-section h3 { font-size: 16px; } .nextprev-newer .nextprev-image { margin-right: 12px; margin-left: 6px; } .nextprev-older .nextprev-image { margin-left: 18px; } .nextprev-image { flex-basis: 85px; } .nextprev-image, .nextprev-image img { width: 85px; min-height: 85px; } .nextprev-image::after { top: -6px; right: 6px; bottom: 6px; left: -6px; } } @media (min-width:481px) and (max-width:768px) { .nextprev-section h3 { font-size: 20px; } } @media (max-width:768px) { .nextprev-section { flex-wrap: wrap; } .nextprev-section section { flex-basis: 100%; } .nextprev-section section + section { margin-top: 0; } } @media (min-width:769px) and (max-width:1024px) { .nextprev-section h3 { font-size: 18px; } } /* -------------------------------------------------------------------------- 11.Post — Comments -------------------------------------------------------------------------- */ .comments-wrap { max-width: var(--max-width-post-wrap); margin: 0 auto; } .comments-wrap > div:first-of-type { margin-top: 16vh; } .comments-wrap > div:last-of-type { margin-bottom: 16vh; } /* RWD — Comments –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:768px) { .comments-wrap > div:first-of-type { margin-top: 10vh; } .comments-wrap > div:last-of-type { margin-bottom: 10vh; } } /* -------------------------------------------------------------------------- 12.Author & Tag page -------------------------------------------------------------------------- */ .archive-section { width: 100%; margin: 8vh auto 5vh; text-align: center; } .archive-details, .archive-description { margin: 3vh auto 0; } .tag-stream { background-color: var(--color-body); color: var(--color-accent); border: none; font-weight: bold; text-decoration-color: var(--color-accent); } .tag-stream a{ line-height: 1; display: inline-block; padding: 0; color: var(--color-accent); } .tag-stream a:hover{ text-decoration: underline; } .tag-stream svg { width: 19px; height: 19px; transition: fill .15s ease; fill: var(--color-accent); } /* Profile & Cover image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-image img { width: 200px; height: 200px; margin-bottom: 2vh; padding: 10px; border: var(--border) var(--color-three); border-radius: 100%; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-title { font-size: 40px; margin: 0; } /* Location & Counter –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-details { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); } /* Author social –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-icons { margin-top: 3vh; } .archive-icons svg { width: 19px; height: 19px; margin: 0 20px; transition: fill .15s ease; fill: var(--color-font-one); } .archive-icons svg:hover { fill: var(--color-accent); } /* Description –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-description { font-family: var(--font-family-two); font-size: 16px; font-weight: var(--font-weight-two-medium); line-height: 1.6; max-width: 680px; } /* RWD — Author & Tag page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .archive-image img { padding: 6px; } .archive-title { font-size: 25px; } .archive-description { font-size: 14px; } } @media (min-width:481px) and (max-width:768px) { .archive-title { font-size: 30px; } } @media (max-width:768px) { .archive-image img { width: 160px; height: 160px; } } @media (max-width:1024px) { .archive-section { margin-top: 3vh; } } /* -------------------------------------------------------------------------- 13.Subscribe form -------------------------------------------------------------------------- */ .subscribe-section { margin-top: 8vh; } .subscribe-wrap, .subscribe-form { display: flex; } .subscribe-form, .subscribe-form button { position: relative; } .subscribe-wrap { align-items: center; flex-wrap: nowrap; margin: 0 auto; padding: 0 0 50px; } .subscribe-wrap h3 { font-size: 35px; line-height: 1.1; flex: 1 1 50%; box-sizing: border-box; min-width: 280px; margin: 0; padding: 25px 5% 25px 0; } .subscribe-form { flex: 0 0 auto; height: 60px; } .subscribe-form button, .subscribe-form input { font-size: 16px; padding: 0 20px; } .subscribe-form button { flex: 0 0 auto; cursor: pointer; color: var(--color-font-two); border: none; outline: 0; background-color: var(--color-accent); box-shadow: none; } .subscribe-form button::after { top: 0; right: 0; bottom: 0; left: 0; } .subscribe-form input { display: block; flex: 1 1 auto; width: 250px; transition: width .3s ease .2s; word-break: normal; color: var(--color-body); background-color: var(--color-two); } .subscribe-form input:focus { width: 270px; } .subscribe-form input::-webkit-input-placeholder { color: var(--color-body); } .subscribe-form input::-moz-placeholder { color: var(--color-body); } .subscribe-form input::-ms-input-placeholder { color: var(--color-body); } .subscribe-form input::placeholder { color: var(--color-body); } /* Alert –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .subscribe-alert small { font-family: var(--font-family-four); font-size: 12px; font-weight: var(--font-weight-four-medium); line-height: 1.1; position: absolute; right: 0; bottom: -38px; left: 20px; display: none; width: 100%; margin: 0; padding: 0; color: var(--color-font-one); } .subscribe-form.loading .alert-loading, .subscribe-form.success .alert-success, .subscribe-form.error .alert-error { display: block; } /* RWD — Subscribe form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .subscribe-wrap h3 { font-size: 28px; } .subscribe-form { width: 100%; height: 50px; } .subscribe-form button, .subscribe-form input { padding-right: 10px; padding-left: 10px; } .subscribe-alert small { left: 0; } } @media (min-width:481px) and (max-width:768px) { .subscribe-wrap h3 { font-size: 32px; } .subscribe-form { width: 70%; } } @media (max-width:768px) { .subscribe-wrap { flex-wrap: wrap; } .subscribe-form input, .subscribe-form input:focus { width: 20%; } } @media (min-width:769px) and (max-width:1024px) { .subscribe-form input, .subscribe-form input:focus { width: 180px; } } /* -------------------------------------------------------------------------- 14.Footer -------------------------------------------------------------------------- */ .footer-section { padding-top: 7vh; padding-bottom: 6vh; border-top: var(--border) var(--color-three); } .footer-wrap, .footer-nav { display: flex; } .footer-wrap { align-items: flex-start; width: 100%; margin: 0 auto; } .footer-wrap, .footer-data { box-sizing: border-box; } .footer-description, .footer-copyright { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); } .footer-logo, .footer-description, .footer-icons { max-width: 350px; } /* Data –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-data { flex: 999 0 30%; padding-right: 5%; } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-logo { margin-bottom: 15px; } .footer-logo .is-title { font-family: var(--font-family-one); font-size: 25px; font-weight: var(--font-weight-one-bold); } .footer-logo .is-image img { max-width: 150px; max-height: var(--height-logo-footer); } /* Description –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-description { margin: 0; } /* Social icons –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-icons { margin-top: 30px; margin-bottom: 30px; } .footer-icons a { line-height: 1; display: inline-block; width: 32px; height: 32px; margin: 0 7px 7px 0; padding: 0; } .footer-icons svg { width: 19px; height: 19px; transition: fill .15s ease; fill: var(--color-font-one); } .footer-icons a:hover svg { fill: var(--color-accent); } .contact-icons { margin-top: 30px; margin-bottom: 30px; } .contact-icons a { color: transparent; line-height: 1; display: inline-block; width: 32px; height: 32px; margin: 0 7px 7px 0; padding: 0; } .contact-icons svg { width: 19px; height: 19px; transition: fill .15s ease; fill: var(--color-font-one); } .contact-icons a:hover svg { fill: var(--color-accent); } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-nav { flex: 1 0 auto; } .footer-nav-column { width: 250px; margin-bottom: 3 0px; } .footer-nav-column ul { margin: 0; padding-left: 15%; } .footer-nav-column li { font-family: var(--font-family-two); font-size: 13px; font-weight: var(--font-weight-two-semi-bold); line-height: 2; margin-bottom: 16px; list-style: none; } /* Copyright –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-copyright { display: block; height: 25px; margin-top: 30px; padding: 0; } /* RWD — Footer –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .footer-nav-column { flex: 1 0 50%; } } @media (min-width:481px) and (max-width:768px) { .footer-nav-column { flex-basis: 25%; } } @media (max-width:768px) { .footer-data { flex-basis: 100%; } .footer-nav { flex-wrap: wrap; max-width: 100%; } .footer-nav-column { width: 100%; } .footer-nav-column ul { padding-right: 20px; padding-left: 0; } } @media (min-width:769px) and (max-width:1024px) { .footer-nav-column { width: 118px; } } @media(min-width: 1025px){ .footer-nav-column{ width:160px; } } @media (max-width:1024px) { .footer-wrap { flex-wrap: wrap; } .footer-icons a { width: 24px; height: 24px; } .footer-icons svg { width: 18px; height: 18px; } .footer-nav-column li { font-size: 12px; } } /* -------------------------------------------------------------------------- 15.Custom — Pages -------------------------------------------------------------------------- */ .custom-wrap { box-sizing: border-box; width: 100%; min-height: 100%; } .custom-wrap, .custom-container, .custom-content { display: flex; } .custom-container { flex-direction: column; flex-grow: 1; } .custom-content { align-items: center; flex: 1 0 auto; width: 100%; max-width: 470px; margin: 0 auto 10vh; } .custom-logo, .custom-content, .custom-content input, .custom-content textarea { box-sizing: border-box; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-image { width: 450px; } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-logo { width: 100%; max-width: 470px; margin: 6vh auto; } .custom-logo .is-image { line-height: 0; } .custom-logo .is-image img { max-height: var(--height-logo-signin); } .custom-logo .is-image, .custom-logo .is-title { width: 100%; } .custom-logo .is-title { font-family: var(--font-family-one); font-size: 30px; font-weight: var(--font-weight-one-bold); letter-spacing: -.5px; } /* Form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-content form { position: relative; width: 100%; margin-bottom: 5vh; } .custom-content h1, .custom-content h2 { font-size: 30px; margin: 0 0 4vh -2px; padding: 0; } .custom-content label { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); display: block; } .custom-content input, .custom-content textarea { font-size: 16px; display: block; width: 100%; margin: 10px 0 3vh; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; } .custom-content input { padding-left: 15px; transition: background-color .15s ease; word-break: break-all; background-color: var(--color-one); } .custom-content input:focus { background-color: var(--color-accent); } .custom-content textarea { min-height: 110px; padding-left: 11px; resize: vertical; transition: border-color .15s ease; border: 4px solid var(--color-one); } .custom-content textarea:focus { border-color: var(--color-accent); } /* Alert –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-content .alert-loading, .custom-content .alert-error { font-family: var(--font-family-four); font-size: 12px; font-weight: var(--font-weight-four-medium); position: absolute; bottom: -60px; left: 0; display: none; } .custom-content form.loading .alert-loading, .custom-content form.error .alert-error { display: block; } /* Sucess –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-content form.success, .custom-content form + .alert-success { display: none; } .custom-content form.success + .alert-success { display: inline-block; } .custom-content .alert-success p { font-size: 17px; margin-top: -2vh; margin-bottom: 4vh; } /* RWD — Custom pages –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .custom-content h1, .custom-content h2 { font-size: 20px; } .custom-logo { display: flex; align-items: center; min-height: 60px; margin-top: 20px; } .custom-logo .is-image img { max-height: var(--height-logo-mobile); } } @media (max-width:768px) { .custom-logo .is-title { font-size: 25px; } } @media (min-width:769px) and (max-width:1024px) { .custom-logo .is-title { font-size: 28px; } } @media (max-width:1024px) { .custom-wrap { padding-right: 6%; padding-left: 6%; } .custom-image { display: none; } } /* -------------------------------------------------------------------------- 16.Custom — Error page -------------------------------------------------------------------------- */ .custom-error .error-message { width: 100%; text-align: center; } .custom-error .custom-content { margin-top: 12vh; margin-bottom: 12vh; } .custom-error h1 { font-size: 175px; line-height: 1; margin: 0; } .custom-error p { font-family: var(--font-family-two); font-size: 25px; font-weight: var(--font-weight-two-medium); margin-top: 20px; margin-bottom: 40px; } /* RWD — Error page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .custom-error .custom-content { margin-top: 7vh; margin-bottom: 7vh; } .custom-error h1 { font-size: 100px; } .custom-error p { font-size: 20px; margin-bottom: 20px; } } /* -------------------------------------------------------------------------- 17.Custom — Tags & Authors page -------------------------------------------------------------------------- */ .custom-elements-wrap { justify-content: center; margin-top: 8vh; margin-bottom: 8vh; } /* Item –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-element { flex: 1 0 33.333%; box-sizing: border-box; max-width: 400px; padding: 0 30px 5vh; text-align: center; } /* Heading –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-element-heading { display: none; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-element > a { display: inline-flex; } .custom-element img, .custom-element .no-image { width: 200px; height: 200px; margin-bottom: 2vh; padding: 10px; border: var(--border) var(--color-three); } .custom-element img, .custom-element .no-image { border-radius: 100%; } .custom-element .no-image { position: relative; align-items: center; justify-content: center; margin-right: auto; margin-left: auto; } .custom-element .no-image svg { position: absolute; top: calc(50% - 17px); left: calc(50% - 17px); width: 34px; height: 34px; opacity: .8; fill: var(--color-three); } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-element h2 { font-size: 30px; line-height: 1.3; margin: 0 0 1vh; } /* Counter –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-element span { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); display: block; } /* RWD — Tags & Authors page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .custom-element { max-width: 120px; } .custom-element img, .custom-element .no-image { width: 78px; height: 78px; padding: 6px; } } @media (min-width:481px) and (max-width:768px) { .custom-element { max-width: 200px; } .custom-element img, .custom-element .no-image { width: 130px; height: 130px; } } @media (max-width:768px) { .custom-element { padding-right: 12px; padding-bottom: 25px; padding-left: 12px; } .custom-element h2 { font-size: 16px; } } @media (min-width:769px) and (max-width:1024px) { .custom-element { max-width: 300px; } .custom-element img, .custom-element .no-image { width: 170px; height: 170px; } .custom-element h2 { font-size: 20px; } } @media (min-width:769px) { .custom-element-heading { display: block; } .custom-element.bottom { flex-basis: 20%; max-width: 210px; padding-bottom: 4vh; } .custom-element.bottom img, .custom-element.bottom .no-image { width: 130px; height: 130px; } .custom-element.bottom h2 { font-size: 20px; } .custom-element.bottom span { display: none; } } @media (max-width:1024px) { .custom-elements-wrap { margin-top: 3vh; } } /* -------------------------------------------------------------------------- 18.Custom — Membership page -------------------------------------------------------------------------- */ /* Description –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-header.is-hero.is-image .membership-description { max-width: 600px; margin-top: 15px; } .post-header.is-hero:not(.is-image) .membership-description { max-width: 800px; margin: 15px auto 0; text-align: center; } .post-header.is-hero.is-page .membership-description p { font-family: var(--font-family-four); font-size: 22px; font-weight: var(--font-weight-four-medium); line-height: 1.5; display: inline; padding: 5px 0; color: var(--color-font-two); background-color: var(--color-accent); } /* Switch –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-switch[data-active-price="yearly"] + .membership-cards [data-monthly], .membership-switch[data-active-price="monthly"] + .membership-cards [data-yearly] { display: none; } .membership-switch, .membership-switch button { position: relative; } .membership-switch { display: none; box-sizing: border-box; width: 100%; max-width: 280px; min-height: 45px; margin: 0 auto 12vh; background-color: var(--color-one); } .membership-switch[data-active-price="monthly"]::before { transform: translateX(-100%); } .membership-switch[data-active-price="monthly"] button:first-of-type, .membership-switch[data-active-price="yearly"] button:first-of-type + button { color: var(--color-font-two); } .membership-switch::before { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; content: ""; transition: transform .15s ease-in-out; background-color: var(--color-accent); } .membership-switch button { font-size: 14px; font-family: var(--font-family-two); font-weight: var(--font-weight-two-semi-bold); line-height: 1; width: 50%; padding: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: color .15s ease-in-out; color: var(--color-font-one); border: 0; outline: none; background-color: transparent; box-shadow: none; } /* Pricing cards –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-cards, .membership-card { display: flex; flex-wrap: wrap; } .membership-cards { justify-content: center; margin: 10vh auto 2vh; } .membership-cards.is-member { margin-bottom: 5vh; } .membership-card { position: relative; flex: 1 0 33.333%; box-sizing: border-box; min-width: 260px; max-width: 400px; margin: 0 0 80px; padding: 10px 10px 5vh; text-align: center; border-left: var(--border) var(--color-three); } .membership-card-content { width: 100%; margin: 0 auto; } /* Title label –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-card-title { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); position: absolute; top: -30px; left: -1px; margin-top: 0; margin-bottom: 0; color: var(--color-font-two); background-color: var(--color-accent); } /* Price –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-card-price { font-size: 66px; margin: 0 0 0 -25px; padding: 3vh 0 4vh; } .membership-card-price sup { font-size: 50%; position: relative; top: -25px; margin-right: 3px; } .membership-card-price span { font-size: 16px; } /* Description –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-card-description { font-family: var(--font-family-two); font-size: 16px; font-weight: var(--font-weight-two-bold); line-height: 1.8; margin: -1vh 25px 4vh; } /* Options –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-card-options ul { margin: 0; padding: 0 20px 5vh; } .membership-card-options ul li { font-family: var(--font-family-four); font-size: 14px; font-weight: var(--font-weight-four-medium); margin: 0 0 10px; padding: 0; list-style: none; } /* Button –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-card-content + a, .membership-card-content + a + a { align-self: flex-end; margin: 0 auto; } /* Small footer –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-cards + small { margin-top: 0; margin-bottom: 10vh; text-align: center; } /* RWD — Membership page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .membership-switch { max-width: 100%; } .membership-card-price span, .membership-card-description { font-size: 14px; } .membership-card-price { font-size: 50px; } .membership-card-title, .membership-card-options ul li { font-size: 12px; } } @media (max-width:768px) { .post-header.is-hero.is-page .membership-description p { font-size: 16px; } } @media (max-width:1024px) { .membership-card-price { font-size: 65px; } } @media (max-width:1280px) { .membership-card { max-width: 100%; } } /* -------------------------------------------------------------------------- 19.Custom — Account page -------------------------------------------------------------------------- */ /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-image { position: relative; } .account-image img { width: 120px; height: 120px; } .account-image svg { position: absolute; z-index: -1; top: calc(50% - 19px - 1vh); left: calc(50% - 17px); width: 34px; height: 34px; opacity: .8; fill: var(--color-three); } /* Details –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-details, .account-detail-column > div { box-sizing: border-box; } .account-details { position: relative; max-width: 600px; margin: 100px auto; border: var(--border) var(--color-three); } .account-details-wrap { display: flex; flex-wrap: wrap; padding: 2vh 6%; } .account-detail-column { flex-basis: auto; min-width: 225px; padding-right: 20px; } .account-detail-column > div { padding: 12px 0; } .account-details-title, .account-detail-heading { font-family: var(--font-family-four); font-size: 13px; font-weight: var(--font-weight-four-medium); } .account-details-title { position: absolute; top: -30px; left: -1px; margin-top: 0; margin-bottom: 0; color: var(--color-font-one); } .account-detail-heading { line-height: 1; position: relative; display: block; width: 100%; } .account-detail-content { font-family: var(--font-family-two); font-size: 14px; font-weight: var(--font-weight-two-bold); display: inline-block; margin-top: 10px; } /* Cancel button –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-detail-cancel { width: 100%; margin-top: 15px; margin-bottom: 15px; } .account-detail-cancel-button { padding: 15px; } .account-detail-cancel-error { display: none; } /* Alerts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-detail-cancel-error, .account-detail-alert { font-size: 11px; margin-top: 10px; } .account-detail-cancel-button.error + .account-detail-cancel-error { display: block; } /* Billing link –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-detail-buttons { font-size: 11px; width: 100%; margin-top: 17px; text-align: right; } .account-detail-buttons span { display: inline-block; transition: transform .2s ease; } .account-detail-buttons a:hover span { transform: translateX(3px); } .account-detail-buttons a + a { margin-left: 10px; } .account-detail-buttons a:hover:first-child { text-decoration: underline; } /* RWD — Account page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:480px) { .account-detail-buttons { text-align: left; } } /* -------------------------------------------------------------------------- 20.Colors -------------------------------------------------------------------------- */ /* Colors — Light [for black text] –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-hash-site-pearl,body.tag-hash-post-bg-pearl{--color-site-light:#f1f1f1}.global-hash-site-parchment,body.tag-hash-post-bg-parchment{--color-site-light:#fdf6e4}.global-hash-site-celeste,body.tag-hash-post-bg-celeste{--color-site-light:#bdebe1}.global-hash-site-arctic,body.tag-hash-post-bg-arctic{--color-site-light:#aac7ff}.global-hash-site-lilac,body.tag-hash-post-bg-lilac{--color-site-light:#d8d0ff}.global-hash-site-pink,body.tag-hash-post-bg-pink{--color-site-light:#ff7ed4}.global-hash-site-sand,body.tag-hash-post-bg-sand{--color-site-light:#ffdb80}.global-hash-site-canary,body.tag-hash-post-bg-canary{--color-site-light:#fcc800}.global-hash-site-avocado,body.tag-hash-post-bg-avocado{--color-site-light:#d7eeaa}.global-hash-site-jade,body.tag-hash-post-bg-jade{--color-site-light:#42d97f} /* Colors — Dark [for white text] –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-hash-site-rose,body.tag-hash-post-bg-rose{--color-site-dark:#db2f2f}.global-hash-site-ruby,body.tag-hash-post-bg-ruby{--color-site-dark:#e23880}.global-hash-site-burgundy,body.tag-hash-post-bg-burgundy{--color-site-dark:#680347}.global-hash-site-magenta,body.tag-hash-post-bg-magenta{--color-site-dark:#d918d2}.global-hash-site-eggplant,body.tag-hash-post-bg-eggplant{--color-site-dark:#620087}.global-hash-site-neon,body.tag-hash-post-bg-neon{--color-site-dark:#5450ff}.global-hash-site-ultramarine,body.tag-hash-post-bg-ultramarine{--color-site-dark:#004cf7}.global-hash-site-sapphire,body.tag-hash-post-bg-sapphire{--color-site-dark:#010087}.global-hash-site-grass,body.tag-hash-post-bg-grass{--color-site-dark:#00873e}.global-hash-site-emerald,body.tag-hash-post-bg-emerald{--color-site-dark:#05ab09} /* Colors — Posts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post.tag-hash-post-card-white .global-color::after{background-color:#fff}.post.tag-hash-post-card-cream .global-color::after{background-color:#fdeacc}.post.tag-hash-post-card-amber .global-color::after{background-color:#fed672}.post.tag-hash-post-card-apricot .global-color::after{background-color:#ffb469}.post.tag-hash-post-card-peach .global-color::after{background-color:#fcae9e}.post.tag-hash-post-card-iris .global-color::after{background-color:#c0b4fc}.post.tag-hash-post-card-lavender .global-color::after{background-color:#c9abff}.post.tag-hash-post-card-purple .global-color::after{background-color:#c18cee}.post.tag-hash-post-card-violet .global-color::after{background-color:#cb73ff}.post.tag-hash-post-card-amethyst .global-color::after{background-color:#b690ff}.post.tag-hash-post-card-sky .global-color::after{background-color:#96b9ff}.post.tag-hash-post-card-blue .global-color::after{background-color:#5db3ff}.post.tag-hash-post-card-lapis .global-color::after{background-color:#1167ef}.post.tag-hash-post-card-cobalt .global-color::after{background-color:#0041cf}.post.tag-hash-post-card-azure .global-color::after{background-color:#615dff}.post.tag-hash-post-card-turquoise .global-color::after{background-color:#04a3c4}.post.tag-hash-post-card-mint .global-color::after{background-color:#00e6cb}.post.tag-hash-post-card-seafoam .global-color::after{background-color:#58ffdd}.post.tag-hash-post-card-green .global-color::after{background-color:#00d89a}.post.tag-hash-post-card-palegreen .global-color::after{background-color:#a7fb93}.post.tag-hash-post-card-celadon .global-color::after{background-color:#8dbc95}.post.tag-hash-post-card-aqua .global-color::after{background-color:#cbf0e8}.post.tag-hash-post-card-lime .global-color::after{background-color:#ceef60}.post.tag-hash-post-card-apple .global-color::after{background-color:#12d356}.post.tag-hash-post-card-coral .global-color::after{background-color:#f86c5f}.post.tag-hash-post-card-tomato .global-color::after{background-color:#f15a4b}.post.tag-hash-post-card-red .global-color::after{background-color:#d0312d}.post.tag-hash-post-card-crimson .global-color::after{background-color:#dc153c}.post.tag-hash-post-card-rosewood .global-color::after{background-color:#d478a2}.post.tag-hash-post-card-cerise .global-color::after{background-color:#ff6dc4}.post.tag-hash-post-card-raspberry .global-color::after{background-color:#ff4a97}.post.tag-hash-post-card-olive .global-color::after{background-color:#bdbd26}.post.tag-hash-post-card-gold .global-color::after{background-color:#c9a663}.post.tag-hash-post-card-lemon .global-color::after{background-color:#fbe362}.post.tag-hash-post-card-yellow .global-color::after{background-color:#ffd01b}.post.tag-hash-post-card-goldenrod .global-color::after{background-color:#f5ab09}.post.tag-hash-post-card-orange .global-color::after{background-color:#ff970d} .container { position: relative; width: 400px; height: 400px; } .image{ height: 400px; width: 400px; opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { height: 20px; transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .container:hover .image { opacity: 0.3; } .container:hover .middle { opacity: 1; } .text { font-family: var(--font-family-one); background-color: var(--color-accent); color: white; font-size: 16px; padding: 20px 32px; } .team-row{ justify-content: space-evenly; display: flex; flex-direction: row; } .team-grid{ padding-bottom: 15px; gap: 30px; display: flex; flex-direction: column; } .about-heading .team-heading{ color: var(--color-accent); } .start-rant{ font-family: var(--font-family-one); line-height: 1.6em; margin-bottom: 15px; } .start-rant p{ font-family: var(--font-family-one); } .start-athenil{ font-weight: var(--font-weight-one-bold); font-size: larger; } .contact-link{ color: var(--color-accent); } .about-athenil{ color: var(--color-accent); } @media (max-width: 300px){ .about-heading{ font-size: 17px; } .middle{ width: 100px; } .text{ font-size: 14px; padding: 5px; } .team-grid{ gap: 5px; } .container { height: 100px; width: 100px; } } @media (min-width: 300px) and (max-width:768px){ .team-grid{ gap: 10px; } .text{ font-size: 14px; padding: 5px; } .middle{ width: 118px; } .container { height: 150px; width: 150px; } } @media (min-width:768px) and (max-width:1080px) { .container { height: 300px; width: 300px; } .text{ padding: 16px 32px; } .middle{ width: 130px; } } /*---------------------------- EVENT BANNER ----------------------------*/ .banner-section{ height: 10%; width: 100%; border-radius: 8px; } .event-heading{ color: var(--color-font-one); text-align: center; } .live-section{ font-family: var(--font-family-one); align-items: center; background-color: var(--color-body); color: var(--color-font-one); border: none; } .live-section a{ border-radius: 8px; padding: 8px 10px 8px 10px; background-color: var(--color-accent); border-color: white; } .module-border-wrap { width: 100%; padding: 1rem; position: relative; background: linear-gradient(to left, var(--color-accent),var(--color-body)); padding: 3px; } .module { background: var(--color-body); color: white; padding: 2rem; } .banner-section{ display: flex; flex-direction: column; } @media (max-width: 300px){ .event-heading{ font-size: 17px; } .live-section{ font-size: 16; } } @media (min-width: 300px) and (max-width:768px){ .event-heading{ font-size: 18px; } .live-section{ font-size: 14px; } } @media (min-width:768px) and (max-width:1080px) { .event-heading{ font-size: 20px; } .live-section{ font-size: 17px; } } /*------------------------------- SHORTS -------------------------------*/ .related-posts-banner{ color: #fff; padding-left:5px; padding-right:5px; } .short-cell{ display: flex; width: 100%; align-items: center; flex-direction: column; } .short-section a{ text-decoration: underline; text-decoration-color: var(--color-accent); font-weight: var(--font-weight-one-bold); } .short-title{ margin: 0; font-weight: var(--font-weight-one-bold); } .short-section{ padding: 0px; font-family: var(--font-family-two); font-size: 15px; } .item-container p{ font-family: var(--font-family-two); font-weight: var(--font-weight-two-medium); } .short-author { color: white; } .short-author a{ font-weight: var(--font-weight-one-bold); } /* .review-summary::before{ font-family: var(--font-family-two); font-size: 120px; font-weight: var(--font-weight-two-bold); position: relative; top: 20px; left: -50px; content: '“'; color: var(--ghost-accent-color); } */ .review-summary{ text-align: center; font-family: var(--font-family-five); font-weight: var(--font-weight-five-medium); color: var(--color-accent) } .review-summary strong{ font-family: var(--font-family-five); font-weight: var(--font-weight-five-bold); letter-spacing: 1.2px; font-style: italic; } .shorts-section{ display: flex; padding-top: 15px; flex-wrap: wrap; margin-bottom: 5vh; -webkit-animation: slideTopLoop .8s ease; animation: slideTopLoop .8s ease; } .short{ flex: 1 0 50%; max-width: 50%; margin-top: 12vh; padding-top: 0; padding-bottom: 0; } .short.is-odd { padding-right: 35px; padding-left: 60px; } .short.is-odd p{ padding-right: 5px; } .short.is-even { padding-right: 60px; padding-left: 35px; } .short.is-even .item-container, .short.is-odd .item-container { border-left: var(--border) var(--color-three); } .shorts-section, .item-container { display: flex; } .short, .item-container { box-sizing: border-box; } @-webkit-keyframes slideTopLoop { 0% { transform: translateY(70px) } 100% { transform: translateY(0) } } @keyframes slideTopLoop { 0% { transform: translateY(70px) } 100% { transform: translateY(0) } } /*------------------------------------------- RWD shorts-loop ------------------------------------------*/ @media (max-width:700px) { .short, .short.is-hero { margin-top: 0; margin-bottom: 20px; } .short.is-hero { padding-bottom: 35px; } .short.is-even, .short.is-odd { padding-right: 0; padding-left: 0; } .short.is-hero .short-container { flex-wrap: wrap; } .short.is-hero .short-container::after { right: 0; max-width: 59.7%; } .short.is-hero.is-image .short-container::before, .short.is-hero.is-image .short-container::after { display: none; } .short-image::after { background-color: var(--color-accent); } .short.is-hero .short-image { flex-basis: 100%; order: 0; max-width: 100%; margin-bottom: 20px; } .short.is-hero .short-image img, .short.is-hero.is-image .short-image::after { max-width: 240px; } .short.is-hero .short-container::before, .short.is-hero.is-image .short-image::before { background-size: 17px 17px; } .short.is-hero.is-image .short-image::before, .short.is-hero.is-image .short-image::after { position: absolute; top: -35px; left: 35px; display: block; content: ''; } .short.is-hero.is-image .short-image::before { z-index: -2; right: 0; bottom: 10px; background-image: radial-gradient(var(--color-dots) 6%, transparent 0); } .short.is-hero.is-image .short-image::after { z-index: -3; bottom: 40px; } .short-image figcaption { right: initial; left: 0; transform: translateY(0); text-align: left; } .short.is-hero .item-content, .short.is-hero.is-image .short-content { padding-right: 0; } .short.is-hero .short-content > span { margin-bottom: 10px; } .short.is-hero .short-title { font-size: 32px; margin-bottom: 0; margin-left: -1px; } } @media (min-width:481px) and (max-width:768px) { .short{ margin-top: 4vh; margin-bottom: 0; } .short.is-even, .short.is-odd { padding-right: 10%; padding-left: 10%; } } @media (max-width:768px) { .short { flex-basis: 100%; max-width: 100%; } .short.is-even .item-container, .short.is-odd .item-container { display: block; border-left: none; } .short.is-odd .item-container > span, .short.is-even .item-container > span { position: initial; display: inline-block; margin-bottom: 5px; } } @media (min-width:769px) and (max-width:1024px) { .short { margin-top: 10vh; } .short.is-even { padding-right: 2%; padding-left: 0; } .short.is-odd { padding-right: 0; padding-left: 2%; } } @media (max-width:1024px) { .shorts-section { margin-bottom: 0; } } figure.kg-card.kg-image-card{ /* margin: 0; */ } .short-content img{ max-width: 100%; max-height: 500px; aspect-ratio: 3/2; object-fit: cover; } /* --------------------------------------- Review Page ----------------------------------------- */ .review-hero{ margin: 0; } .review-hero img{ position: relative; right: 50%; left: 50%; width: calc(100vw - 55px - 55px); margin: 0 calc(-50vw + 55px); object-fit: contain; } .review-title{ margin-bottom: 0; } .main-center{ display: flex; justify-content: center; } .review-excerpt{ font-family: var(--font-family-one); } .review-introduction{ width: 100%; display: flex; flex-direction: column; max-width: 62ch; align-items: center; justify-content: center; } .review-author a{ color: var(--color-accent); } @media (max-width:700px) { .review-title { font-size: 32px; } } @media (min-width:481px) and (max-width:768px) { .review-title { font-size: 40px; } } @media (min-width:769px) and (max-width:1024px) { .review-title { font-size: 55px; } } @media (min-width:1025px) and (max-width:1280px) { .review-title { font-size: 65px; } } @media (max-width:1280px) { .review-title { font-size: 24px; } } @media (max-width:700px) { .review-hero img { width: 100vw; margin-right: -50vw; margin-left: -50vw; border-radius: 0; } } @media (min-width:481px) and (max-width:1024px) { .review-hero img { width: calc(100vw - 25px - 25px); margin-right: calc(-50vw + 25px); margin-left: calc(-50vw + 25px); } } @media (min-width:1025px) and (max-width:1280px) { .review-hero img { position: relative; right: 50%; left: 50%; width: calc(100vw - 140px - 140px); margin-right: calc(-50vw + 140px); margin-left: calc(-50vw + 140px); } } @media (min-width:1281px) { .post-content .kg-image-card.kg-width-wide img, .post-content .kg-gallery-container { width: calc(100% + 180px + 180px); margin-left: -180px; } } .review-summary{ text-align: center; font-family: var(--font-family-five); font-weight: var(--font-weight-five-medium); color: var(--color-accent) } .review-summary strong{ font-family: var(--font-family-five); font-weight: var(--font-weight-five-bold); letter-spacing: 1.2px; font-style: italic; } /*----------------------------------- SHORTS ARTICLE PAGE ------------------------------------*/ .short-article-page{ margin: 0 auto 15vh; margin-top: 5%; display: flex; flex-direction: column; max-width: var(--max-width-post-wrap); } .read-more-shorts{ margin: 0 auto 10vh; display: flex; flex-direction: column; width: var(--max-width-post-wrap); } .short-share-section { width: 100%; padding-top: 40px; } .short-share-wrap { position: relative; display: inline-flex; justify-content: center; width: 100%; } .short-share-wrap a { display: flex; align-items: center; justify-content: center; width: 85px; height: 64px; pointer-events: none; border: none; } .short-share-wrap a:first-of-type { padding-left: 10px; border-left: var(--border) var(--color-three); } .short-share-wrap a:last-of-type { padding-right: 10px; border-right: var(--border) var(--color-three); } .short-share-wrap svg { width: 22px; height: 22px; transition: fill .15s ease; pointer-events: auto; fill: var(--color-font-one); } .short-share-wrap a:hover svg { fill: var(--color-accent); } .post-header.is-hero { margin-bottom: 8vh; -webkit-animation: slideTopLoop .8s ease; animation: slideTopLoop .8s ease; } .post-header.is-hero:not(.is-image) .item-content { padding-bottom: 8vh; } .post-header.is-page:not(.is-image) .item-title, .post-header.is-page:not(.is-image) .item-excerpt { margin-right: auto; margin-left: auto; text-align: center; } .post-header.is-page .item-excerpt { -moz-column-count: 1; column-count: 1; } /* RWD — Post — Header –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page { font-family: var(--font-family-three); font-weight: var(--font-weight-three-regular); max-width: var(--max-width-post-wrap); margin: 0 auto 15vh; } /* Margin elements –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page h1:first-child, .short-article-page h2:first-child, .short-article-page h3:first-child, .short-article-page h4:first-child, .short-article-page h5:first-child, .short-article-page h6:first-child, .short-article-page p:first-child { margin-top: 0; } .short-article-page p, .short-article-page iframe, .short-article-page ol, .short-article-page ul, .short-article-page table, .short-article-page p img { margin-top: 0; margin-bottom: 40px; } .short-article-page hr { margin-top: 60px; margin-bottom: 80px; } .short-article-page blockquote { font-family: var(--font-family-two); font-weight: var(--font-weight-two-semi-bold); margin-top: 75px; margin-bottom: 75px; } .short-article-page .kg-card { width: 100%; margin-top: 50px; margin-bottom: 70px; } .short-article-page pre, .short-article-page .kg-code-card { margin-top: 20px; margin-bottom: 20px; } .short-article-page p, .short-article-page table, .short-article-page hr, .short-article-page blockquote, .short-article-page pre, .short-article-page p img, .short-article-page .kg-card { margin-right: 0; margin-left: 0; } .short-article-page iframe, .short-article-page .kg-embed-card > div, .short-article-page .kg-embed-card > iframe, .short-article-page .kg-embed-card > .fb-post, .short-article-page .kg-embed-card > .twitter-tweet { margin-right: auto !important; margin-left: auto !important; } .post-content .kg-embed-card > .twitter-tweet > iframe { margin-bottom: 0; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page h1, .short-article-page h2, .short-article-page h3, .short-article-page h4, .short-article-page h5 { line-height: 1.4; margin-bottom: 20px; margin-left: -1px; } .short-article-page h1 { font-size: 2em; } .short-article-page h2 { font-size: 41px; margin-top: 55px; } .short-article-page h3 { font-size: 31px; margin-top: 45px; } .short-article-page h4 { font-size: 24px; margin-top: 40px; } .short-article-page h5 { font-size: 20px; margin-top: 40px; } .short-article-page h6 { font-size: 11px; margin-top: 40px; letter-spacing: 2px; text-transform: uppercase; } /* Paragraph –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page p { line-height: 1.75; position: relative; } /* hr –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page hr { position: relative; display: block; width: 80px; height: 1px; border: none; background-color: var(--color-three); } /* Mark –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page mark { padding-bottom: 2px; background-color: var(--ghost-accent-color); } /* kbd –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page kbd { font-size: 70%; display: inline-block; padding: 2px 8px 1px; border: 1px solid; } /* iframe –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page iframe { display: block; } /* Blockquote –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page blockquote, .short-article-page blockquote p { line-height: 1.5; } .short-article-page blockquote p { margin: 0; } .short-article-page blockquote { font-size: 30px; position: relative; box-sizing: border-box; width: 100%; padding-left: 55px; } .short-article-page blockquote::before { font-family: var(--font-family-two); font-size: 120px; font-weight: var(--font-weight-two-bold); position: absolute; top: -20px; left: -15px; content: '“'; color: var(--ghost-accent-color); } /* Alternative */ .short-article-page blockquote.kg-blockquote-alt { font-size: 36px; line-height: 1.4; box-sizing: border-box; padding: 6vh 3.3vw; text-align: center; border: 5px solid var(--ghost-accent-color); } .short-article-page blockquote.kg-blockquote-alt::before { display: none; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page a { transition: border-bottom-color .2s ease; } .short-article-page a:hover { border-bottom-color: var(--ghost-accent-color); } .short-article-page h1 a, .short-article-page h2 a, .short-article-page h3 a, .short-article-page h4 a, .short-article-page h5 a, .short-article-page blockquote a { transition: background-size .6s ease-out; border-bottom: none; background: linear-gradient(var(--ghost-accent-color), var(--ghost-accent-color)) no-repeat left 130%/80% 40%; } .short-article-page h1 a:hover, .short-article-page h2 a:hover, .short-article-page h3 a:hover, .short-article-page h4 a:hover, .short-article-page h5 a:hover, .short-article-page blockquote a:hover { background-size: 97% 40%; } /* Disable 'border-bottom' */ .short-article-page .post-image-link, .short-article-page sup a, .short-article-page .footnote-backref, .short-article-page .kg-bookmark-container, .short-article-page .members-cta-button { border-bottom: none !important; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page ul, .short-article-page ol { margin-right: 0; margin-left: 15px; } .short-article-page ul { padding-left: 15px; list-style: disc outside; } .short-article-page ol { padding-left: 20px; } .short-article-page ul li ul { list-style: circle outside; } .short-article-page ol, .short-article-page ol li ol { list-style: decimal outside; } .short-article-page ul ul, .short-article-page ul ol, .short-article-page ol ol, .short-article-page ol ul { font-size: 90%; margin: 15px 0; } .short-article-page li { margin-bottom: 10px; } .short-article-page dl dt { font-family: var(--font-family-two); font-weight: var(--font-weight-two-bold); float: left; clear: left; overflow: hidden; width: 180px; margin-bottom: 10px; text-align: right; white-space: nowrap; text-overflow: ellipsis; } .short-article-page dl dd { margin-bottom: 10px; margin-left: 200px; } /* Table –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page table { font-family: var(--font-family-four); font-size: 14px; display: table; width: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse; text-align: left; background-color: transparent; } .short-article-page th { border-top: 1px solid var(--color-three); } .short-article-page th, .short-article-page td { font-weight: var(--font-weight-four-medium); display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--color-three); } .short-article-page th:first-child, .short-article-page td:first-child { padding-left: 5px; } .short-article-page th:last-child, .short-article-page td:last-child { padding-right: 5px; } /* Responsive */ .short-article-page .responsive-table { overflow-x: auto; word-break: normal; } /* Footnotes –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .footnotes { padding: 10px 0 0; } .short-article-page .footnote-ref { font-size: 65%; } .short-article-page .footnotes-list { padding-left: 20px; list-style: decimal; } .short-article-page .footnotes-sep { margin: 50px 0 10px; } .short-article-page .footnotes p, .short-article-page .footnote-item { font-size: 14px; line-height: 1.3; margin-bottom: 10px; } /* Cardmas –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .kg-card, .short-article-page .kg-card * { box-sizing: border-box; } .short-article-page .kg-button-card a, .short-article-page .kg-nft-card a, .short-article-page .kg-product-card-button { border-bottom: none; } .short-article-page .kg-audio-card, .short-article-page .kg-audio-card .kg-audio-thumbnail, .short-article-page .kg-callout-card, .short-article-page .kg-file-card .kg-file-card-container, .short-article-page .kg-file-card .kg-file-card-icon::before, .short-article-page .kg-nft-card .kg-nft-card-container, .short-article-page .kg-nft-card .kg-nft-image, .short-article-page .kg-product-card .kg-product-card-container, .short-article-page .kg-product-card .kg-product-card-image, .short-article-page .kg-toggle-card { border-radius: 0; } /* Audio card */ .short-article-page .kg-audio-card .kg-audio-volume-slider { width: 55px; } .short-article-page .kg-audio-card svg { fill: var(--color-font-one); } .short-article-page .kg-audio-card .kg-audio-playback-rate { color: var(--color-font-one); } /* Button card & Product card */ .short-article-page .kg-button-card a.kg-btn { position: relative; z-index: 0; height: 2.55em; padding: 1.3em 1.3em 1.25em; opacity: 1 !important; } .short-article-page .kg-button-card .kg-btn::before, .short-article-page .kg-button-card .kg-btn::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; } .short-article-page .kg-button-card .kg-btn::before { z-index: -1; background-color: var(--ghost-accent-color); } .short-article-page .kg-button-card .kg-btn::after { z-index: -2; transition-timing-function: ease; transition-duration: .15s; transition-property: top, left, right, bottom; background-color: var(--color-two); } .short-article-page .kg-button-card .kg-btn:hover::after { top: 6px; right: -6px; bottom: -6px; left: 6px; } .short-article-page .kg-button-card .kg-btn, .short-article-page .kg-product-card .kg-product-card-button { text-decoration: none; color: var(--color-font-two); border-radius: 0; } .short-article-page .kg-product-card-button:hover { opacity: .85; } .short-article-page .kg-product-card .kg-product-card-title { font-family: var(--font-family-two); } /* Callout card */ .short-article-page .kg-callout-card .kg-callout-emoji { flex-shrink: 0; } /* NFT card */ .short-article-page .kg-nft-card a { text-decoration: none; } .short-article-page .kg-nft-card .kg-nft-card-container { box-shadow: inset 0 0 0 1px rgb(124 139 154/25%); } /* Video card */ .short-article-page .kg-video-card.kg-width-full { right: 50%; left: 50%; width: calc(100vw - 55px - 55px); margin: 0 calc(-50vw + 55px); } /* RWD — Video card */ @media (min-width:481px) and (max-width:1024px) { .short-article-page .kg-video-card.kg-width-full { width: calc(100vw - 25px - 25px); margin-right: calc(-50vw + 25px); margin-left: calc(-50vw + 25px); } } @media (max-width:480px) { .short-article-page .kg-video-card.kg-width-full { width: 100vw; margin-right: -50vw; margin-left: -50vw; border-radius: 0; } } @media (min-width:1281px) { .short-article-page .kg-video-card.kg-width-wide { width: calc(100% + 180px + 180px); margin-left: -180px; } } @media (max-width:1280px) and (min-width:1025px) { .short-article-page .kg-video-card.kg-width-wide { position: relative; right: 50%; left: 50%; width: calc(100vw - 140px - 140px); margin-right: calc(-50vw + 140px); margin-left: calc(-50vw + 140px); } } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page code { font-size: 85%; padding: 2px 5px; } .short-article-page pre > code { display: block; padding: 15px; white-space: pre-wrap; } .short-article-page pre, .short-article-page .kg-code-card { min-width: 100%; } .short-article-page .kg-code-card pre, .short-article-page .kg-code-card code { margin: 0; } .short-article-page code, .short-article-page p code { background-color: var(--color-one); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page img, .short-article-page p img { position: relative; max-width: 100%; height: auto; } .short-article-page .kg-image-card { line-height: 0; } .short-article-page .kg-image-card:not(.kg-width-full):not(.kg-width-wide) { text-align: center; } .short-article-page .kg-width-full img { position: relative; right: 50%; left: 50%; width: calc(100vw - 55px - 55px); margin: 0 calc(-50vw + 55px); } .short-article-page .kg-image-card.kg-width-wide img { width: 100%; } .short-article-page .kg-width-full img, .short-article-page .kg-image-card.kg-width-wide:not(.kg-gallery-card) img { max-width: initial; } /* Gallery –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .kg-gallery-image img { display: block; width: 100%; margin: 0; } .short-article-page .kg-gallery-row { flex-direction: row; justify-content: center; } .short-article-page .kg-gallery-row, .short-article-page .kg-gallery-container { display: flex; } .short-article-page .kg-gallery-container { position: relative; flex-direction: column; margin: 15px auto; } .short-article-page .kg-gallery-row:not(:first-of-type) { margin: 15px 0 0 0; } .short-article-page .kg-gallery-image:not(:first-of-type) { margin: 0 0 0 15px; } /* Bookmarks –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .kg-bookmark-container, .short-article-page .kg-bookmark-content { display: flex; } .short-article-page .kg-bookmark-title, .short-article-page .kg-bookmark-metadata { font-family: var(--font-family-two); } .short-article-page .kg-bookmark-description, .short-article-page .kg-bookmark-metadata { display: -webkit-box; overflow-y: hidden; -webkit-box-orient: vertical; } .short-article-page .kg-bookmark-card + .kg-bookmark-card { margin-top: -35px; } .short-article-page .kg-bookmark-container { position: relative; z-index: 2; min-height: 140px; padding-bottom: 0; text-decoration: none; background-color: var(--color-four); box-shadow: 0 25px 95px 5px var(--box-shadow); } .short-article-page .kg-bookmark-content { align-items: flex-start; flex-direction: column; flex-grow: 1; justify-content: start; padding: 20px; } .short-article-page .kg-bookmark-title { font-size: 17px; font-weight: var(--font-weight-two-bold); line-height: 1.3; } .short-article-page .kg-bookmark-description { font-size: 13px; max-height: 40px; margin-top: 12px; -webkit-line-clamp: 2; } .short-article-page .kg-bookmark-metadata { font-size: 12px; font-weight: var(--font-weight-two-semi-bold); height: 20px; margin-top: 24px; -webkit-line-clamp: 1; } .short-article-page .kg-bookmark-metadata .kg-bookmark-icon { width: 20px; height: 20px; margin-right: 6px; margin-bottom: -5px; border-radius: 0; } .short-article-page .kg-bookmark-metadata span:nth-of-type(2)::before { margin-right: 6px; margin-left: 6px; content: '•'; } .short-article-page .kg-bookmark-thumbnail { position: relative; min-width: 28%; max-height: 100%; } .short-article-page .kg-bookmark-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; -o-object-fit: cover; object-fit: cover; } /* These classes will be deprecated. Keep them for GScan validation. */ .short-article-page .kg-bookmark-author, .short-article-page .kg-bookmark-publisher { display: inline; } /* Figcaption –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page img ~ small, .short-article-page p img ~ small, .short-article-page figcaption { font-family: var(--font-family-two); font-size: 11px; font-weight: var(--font-weight-two-medium); line-height: 1.2; display: block; box-sizing: border-box; width: 100%; text-align: center; letter-spacing: .5px; } .short-article-page figcaption { margin-top: 15px; } .short-article-page img ~ small, .short-article-page p img ~ small { position: absolute; right: 0; bottom: 25px; left: 0; margin: 0 auto; } /* Teaser –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .members-teaser { position: relative; margin-bottom: 20px; } .short-article-page .members-teaser::after { position: absolute; right: 50%; bottom: -20px; left: 50%; width: calc(100vw - 40px); height: 80%; max-height: 340px; margin: 0 calc(-50vw + 20px); content: ''; pointer-events: none; background-color: var(--color-body); -webkit-mask-image: linear-gradient(transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,black); mask-image: linear-gradient(transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,black); } /* CTA –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .short-article-page .members-cta { box-sizing: border-box; width: 100%; margin: 6vh auto 10vh; padding: 40px 60px; text-align: center; background-color: var(--color-four); box-shadow: 0 25px 95px 5px var(--box-shadow); } .short-article-page .members-cta h2 { margin: 20px auto 40px; } /* RWD — Post content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:320px) { .short-article-page .kg-bookmark-container { flex-direction: column; } .short-article-page .kg-bookmark-content { order: 2; padding: 15px; } .short-article-page .kg-bookmark-thumbnail { order: 1; width: 100%; min-height: 120px; } } @media (max-width:480px) { .short-article-page { font-size: 16px; } .short-article-page p { line-height: 1.7; } .short-article-page blockquote { padding-left: 32px; } .short-article-page blockquote::before { font-size: 60px; top: -8px; } .short-article-page blockquote.kg-blockquote-alt { font-size: 22px; } .short-article-page figcaption { margin-top: 10px; } .short-article-page .kg-bookmark-title { font-size: 14px; } .short-article-page .kg-bookmark-description { font-size: 12px; } .short-article-page .members-cta { margin: 0; padding: 25px 15px; } .short-article-page .members-cta h2 { font-size: 25px; margin-top: 10px; margin-bottom: 20px; } .short-article-page .members-teaser::after { width: 100vw; margin-right: -50vw; margin-left: -50vw } } @media (min-width:481px) and (max-width:768px) { .short-article-page blockquote { padding-left: 43px; } .short-article-page blockquote::before { font-size: 80px; top: -12px; } .short-article-page blockquote.kg-blockquote-alt { font-size: 26px; } .short-article-page .members-cta { padding: 30px; } } @media (max-width:768px) { .short-article-page h1 { font-size: 2em; } .short-article-page h2 { font-size: 30px; margin-top: 45px; } .short-article-page h3 { font-size: 24px; margin-top: 40px; } .short-article-page h4 { font-size: 19px; margin-top: 35px; } .short-article-page h5 { font-size: 16px; } .short-article-page h5, .short-article-page h6 { margin-top: 30px; } .short-article-page blockquote { font-size: 20px; } .short-article-page blockquote.kg-blockquote-alt { padding-top: 4vh; padding-bottom: 4vh; border-width: 4px; } .short-article-page table { font-size: 14px; } .short-article-page p, .short-article-page iframe, .short-article-page ol, .short-article-page ul, .short-article-page table { margin-bottom: 20px; } .short-article-page hr, .short-article-page blockquote { margin-top: 40px; } .short-article-page .kg-card { margin-top: 30px; } .short-article-page .kg-bookmark-card + .kg-bookmark-card { margin-top: -20px; } .short-article-page hr, .short-article-page blockquote, .short-article-page .kg-card { margin-bottom: 40px; } .short-article-page p img { margin-bottom: 5px; } .short-article-page img ~ small, .short-article-page p img ~ small { bottom: -10px; } } @media (min-width:769px) and (max-width:1280px) { .short-article-page blockquote::before { font-size: 100px; top: -15px; } } @media (max-width:1024px) { .short-article-page .members-cta { margin-top: 0; } } @media (max-width:1280px) { .short-article-page blockquote::before { left: -5px; } } /* RWD — Images –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:700px) { .short-article-page .kg-width-full img { width: 100vw; margin-right: -50vw; margin-left: -50vw; border-radius: 0; } .short-article-page .kg-gallery-card .kg-gallery-container { margin-bottom: 5px; } .short-article-page .kg-gallery-card .kg-gallery-container, .short-article-page .kg-gallery-card .kg-gallery-row:not(:first-of-type) { margin-top: 5px; } .short-article-page .kg-gallery-card .kg-gallery-image:not(:first-of-type) { margin-left: 5px; } } @media (min-width:481px) and (max-width:1024px) { .short-article-page .kg-gallery-container { margin-bottom: 10px; } .short-article-page .kg-gallery-container, .short-article-page .kg-gallery-row:not(:first-of-type) { margin-top: 10px; } .short-article-page .kg-gallery-image:not(:first-of-type) { margin-left: 10px; } .short-article-page .kg-width-full img { width: calc(100vw - 25px - 25px); margin-right: calc(-50vw + 25px); margin-left: calc(-50vw + 25px); } } @media (min-width:1025px) and (max-width:1280px) { .short-article-page .kg-image-card.kg-width-wide img, .short-article-page .kg-gallery-container { position: relative; right: 50%; left: 50%; width: calc(100vw - 140px - 140px); margin-right: calc(-50vw + 140px); margin-left: calc(-50vw + 140px); } } @media (min-width:1281px) { .short-article-page .kg-image-card.kg-width-wide img, .post-content .kg-gallery-container { width: calc(100% + 180px + 180px); margin-left: -180px; } } .tag-news{ --color-accent:#9F0B3E; --color-underline:#9F0B3E; } .tag-recommendation{ --color-accent:#804317; --color-underline:#804317; } .tag-recommendations{ --color-accent:#804317; --color-underline:#804317; } .tag-reviews{ --color-accent: #553455; --color-underline: #553455; } .tag-review{ --color-accent: #553455; --color-underline: #553455; } .tag-rant{ --color-accent: #804317; --color-underline: #804317; } .tag-rants{ --color-accent: #804317; --color-underline: #804317; } .tag-how-to{ --color-accent: #0C6451; --color-underline: #0C6451; } .tag-how-tos{ --color-accent: #0C6451; --color-underline: #0C6451; } .tag-round-up{ --color-accent: #324F99; --color-underline: #324F99; } .tag-round-ups{ --color-accent: #324F99; --color-underline: #324F99; } /*--------------------------------- ------MEDIA ZONE-----------------*/ .media-zone{ display: flex; flex-direction: row; } .media-shorts{ display: flex; flex: 1; padding-top: 15px; flex-wrap: no-wrap; margin-bottom: 5vh; -webkit-animation: slideTopLoop .8s ease; animation: slideTopLoop .8s ease; flex-direction: column; } .desktop-feature-fill{ display: flex; flex:1; flex-wrap: wrap; padding-top: 15px; margin-bottom: 5vh; } .feature-box{ padding: 10px 0 10px 5%; margin-bottom: 15px; height: fit-content; width: 100%; margin-top: 12vh; position: sticky; position: --webkit-sticky; top: 0px; bottom: 0px; } .feature-box-items{ background-color: var(--color-feature); border-radius: 9px; padding: 20px 5% 10px 5%; } .media{ margin-top: 12vh; /* flex: 1 0 50%; padding-top: 0; padding-bottom: 0; */ } .editor-item{ font-family: var(--font-family-one); font-weight: var(--font-weight-five-bold); display: flex; flex-direction: row; align-items: start; } @media(max-width: 768px) { .desktop-feature-fill { display: none; } } @media(min-width:850px) and (max-width:950px){ .media-shorts{ max-width: 400px; } } @media(min-width:769px) and (max-width: 849px){ .media-shorts{ max-width: 380px; } } .editors-picks{ font-family: var(--font-family-four); font-weight: var(--font-weight-one-bold); margin: 0; font-size: 13px; } .short-content img{ max-width: 100%; max-height: 500px; aspect-ratio: 3/2; object-fit: cover; } .media-shorts img{ border-radius: 9px; max-width: 100%; max-height: 333px; aspect-ratio: 3/2; object-fit: cover; } .media-shorts figure .kg-image-card{ margin: 0 } .item-number{ font-size: 19px; width: 26px; height: 40px; margin-top: 10px; /* background-color: var(--tag-color-news); border-radius: 20px; */ } @media(min-width:850px) and (max-width:950px){ .editors-picks{ padding-left: 38px; } } @media (min-width:481px) and (max-width:768px) { .media-shorts { padding-right: 10%; padding-left: 10%; } } /*--------------------------- BIO PAGE INSTAGRAM----------*/ .p-outer { padding: 4vmin max(4vmin, 20px) 14vmin; } .p-inner { max-width: 1200px; /* Defines the max width of your content */ margin-inline: auto; /* Centers the content */ } .p-post-container { margin-block: 10.2vmin; margin-inline: auto; } .p-post-container h2 { text-transform: uppercase; } .p-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Define a post grid, where cards can be minimum 300px and maximum the size of the column */ gap: 1vmin; padding-bottom: 3vmin; } .p-posts-grid figure{ /* aspect-ratio: 1/1; */ /* object-fit: cover; */ margin: 0; } .p-post-card img { width: 100%; max-height: 200px; aspect-ratio: 1 / 1; /* All images will have an HD image ratio */ object-fit: cover; } .p-post-card h3 { padding-inline: 10px; margin-block: 10px 0; } .p-post-card a:hover { color: var(--ghost-accent-color); } .p-posts-grid img{ width: 100%; height: 100%; /* filter: saturate(0%); */ aspect-ratio: 1/1; object-fit:cover } /* .p-posts-grid img:hover{ filter: saturate(100%); } */ /* Change layout at larger viewport sizes */ @media (min-width: 768px) { .p-hero { grid-template-columns: 1fr 1fr; /* Hero section has 2 columns */ } .p-hero-buttons { transform: translateY(50%); /* Offset buttons */ } .p-hero-right img { max-height: none; aspect-ratio: 1 / 1; /* Make the image a square */ filter: drop-shadow(2px 3px 10px rgb(0 0 0 / 0.25)); /* Add a shadow*/ object-fit: contain; /* But also ensure it's not cropped */ object-position: right; /* Position image to far right */ } }