/* ////////////////////////////////////////////////////////////////////////// Basho 2.6.3 ////////////////////////////////////////////////////////////////////////// I. Customize | ├─ Global settings ├─ Fonts ├─ Colors ├─ Light version ├─ Partial version ├─ Dark version ├─ Logo for dark version └─ Hiding 'Portal' notifications II. 3rd party scripts | ├─ Normalize.css └─ flickity, lightense-images.js, progress bar III. Theme | ├─ 1.Global ├─ 2.Header ├─ 3.Hero ├─ 4.Featured ├─ 5.Loop ├─ 6.Subscribe form ├─ 7.Pagination ├─ 8.Search function ├─ 9.Post — Header ├─ 10.Post — Content ├─ 11.Post — Share ├─ 12.Post — Navigation ├─ 13.Post — Comments ├─ 14.Author & Tag page ├─ 15.Footer ├─ 16.Custom — Pages ├─ 17.Custom — Error page ├─ 18.Custom — Membership page ├─ 19.Custom — Account page └─ 20.Custom — Authors & Tags page ////////////////////////////////////////////////////////////////////////// I. Customize ////////////////////////////////////////////////////////////////////////// */ :root { /* Global settings –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Logo & icon */ --height-logo-header: 40px; --height-logo-footer: 40px; --height-logo-mobile-header: 34px; --height-logo-mobile-footer: 34px; /* Global wrapper */ --max-width-global-wrap: 1600px; /* Post content wrapper */ --max-width-post-wrap: 720px; /* Grid gap */ --grid-gap: 16px; /* Border-radius */ --border-radius: 26px; /* Global margin */ --margin-wrap-left-right: 5vw; /* Fonts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* Headings, etc. */ --font-family-one: var(--gh-font-heading, var(--font-family-system)); --font-weight-one-light: 300; --font-weight-one-bold: 700; --font-family-two: var(--gh-font-heading, var(--font-family-system)); --font-weight-two-bold: 700; /* Post content, alerts, etc. */ --font-family-three: var(--gh-font-body, var(--font-family-system)); --font-weight-three-regular: 400; --font-weight-three-medium: 500; --font-weight-three-bold: 700; /* Colors –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Color of details */ --ghost-accent-color: #ff4d82; /* Light version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Fonts */ --color-font-one: #151618; --color-font-two: #fff; --color-font-three: #151618; --color-font-four: #fff; --color-font-five: #151618; --color-font-six: #fff; --color-font-black: #151618; /* Background & elements */ --color-one: #efeef0; --color-two: #e6e6ea; --color-three: #151618; --color-four: #151618; --color-five: #151618; --color-six: #fff; --color-seven: #151618; --color-eight: #efeef0; --color-nine: #f6f6f8; --color-ten: #fff; --color-eleven: #f6f6f8; --color-twelve: #f2f0f2; --color-thirteen: #e6e6ea; --color-fourteen: #f2f0f2; --color-white: #fff; /* Body */ --color-body: #fff; --color-body-partial: #fff; /* Border */ --color-border-one: #ceced0; --color-border-two: #ceced0; --color-border-three: #797c82; --border: 1px solid; /* Alerts */ --color-alert-success: #61d6ad; --color-alert-error: #ff6c78; /* Opacity */ --opacity-one: .8; --opacity-two: 1; } /* Partial version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .partial-dark-mode, .auto-partial-dark-mode { --color-font-two: #f7f7f5; --color-one: #e8e8e6; --color-two: #d9d9d8; --color-six: #f7f7f5; --color-eight: #e8e8e6; --color-eleven: #e8e8e6; --color-thirteen: #e2e2df; --color-fourteen: #e8e8e6; --color-white: #f7f7f5; --color-body: #f7f7f5; --color-border-one: #d9d9d8; --color-border-two: #d9d9d8; --opacity-one: .7; --opacity-two: 1; } /* Dark version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .dark-mode, .is-partial-dark { --color-font-one: #f7f7f5; --color-font-two: #1a1b1e; --color-font-three: #f7f7f5; --color-font-four: #1a1b1e; --color-font-five: #f7f7f5; --color-font-six: #1a1b1e; --color-one: #2b2d31; --color-two: #34363a; --color-three: #f7f7f5; --color-four: #f7f7f5; --color-five: #f7f7f5; --color-six: #1a1b1e; --color-seven: #f7f7f5; --color-eight: #2b2d31; --color-nine: #212225; --color-ten: #212225; --color-eleven: #292a2d; --color-twelve: #2b2d31; --color-thirteen: #34363a; --color-fourteen: #2b2d31; --color-white: #f7f7f5; --color-body: #1a1b1e; --color-body-partial: #1a1b1e; --color-border-one: #4b4f52; --color-border-two: #4b4f52; --color-border-three: #5e6265; --opacity-one: .5; --opacity-two: .9; } /* Automatic dark version [duplicate dark version] –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (prefers-color-scheme:dark) { .auto-dark-mode, .auto-partial-dark-mode { --color-font-one: #f7f7f5; --color-font-two: #1a1b1e; --color-font-three: #f7f7f5; --color-font-four: #1a1b1e; --color-font-five: #f7f7f5; --color-font-six: #1a1b1e; --color-one: #2b2d31; --color-two: #34363a; --color-three: #f7f7f5; --color-four: #f7f7f5; --color-five: #f7f7f5; --color-six: #1a1b1e; --color-seven: #f7f7f5; --color-eight: #2b2d31; --color-nine: #212225; --color-ten: #212225; --color-eleven: #292a2d; --color-twelve: #2b2d31; --color-thirteen: #34363a; --color-fourteen: #2b2d31; --color-white: #f7f7f5; --color-body: #1a1b1e; --color-body-partial: #1a1b1e; --color-border-one: #4b4f52; --color-border-two: #4b4f52; --color-border-three: #5e6265; --opacity-one: .5; --opacity-two: .9; } } body .is-partial-color:not(.is-partial-dark) { --color-font-one: #151618; --color-font-two: #fff; --color-font-four: #151618; --color-font-five: #fff; --color-one: rgba(0, 0, 0, .07); --color-two: rgba(0, 0, 0, .12); --color-three: #151618; --color-four: #fff; --color-five: #151618; --color-six: #151618; --color-nine: #fff; --color-eleven: rgba(0, 0, 0, .07); --color-twelve: #fff; --color-body: #fff; --color-body-partial: var(--ghost-bg-color); --color-border-one: rgba(0, 0, 0, .3); --opacity-one: .8; --opacity-two: 1; } .dark-mode .is-partial-color:not(.is-partial-dark) { --color-font-three: #f7f7f5; --color-font-four: #f7f7f5; --color-font-five: #151618; --color-four: #151618; --color-six: #f7f7f5; --color-nine: rgba(0, 0, 0, .07); --color-twelve: rgba(0, 0, 0, .07); --color-body: #151618; } @media (prefers-color-scheme:dark) { .auto-dark-mode .is-partial-color:not(.is-partial-dark) { --color-font-three: #f7f7f5; --color-font-four: #f7f7f5; --color-font-five: #151618; --color-four: #151618; --color-six: #f7f7f5; --color-nine: rgba(0, 0, 0, .07); --color-twelve: rgba(0, 0, 0, .07); --color-body: #151618; } } /* Logo for dark version –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (prefers-color-scheme:dark) { .auto-dark-mode a.is-dark + a { display: none; } } @media (prefers-color-scheme:light) { .auto-dark-mode a.is-dark { display: none; } } /* Hiding 'Portal' notifications –––––––––––––––––––––––––––––––––––––––––––––––––––– */ iframe[title="portal-notification"] { display: none; } /* Ghost 'Custom Fonts' adjustment –––––––––––––––––––––––––––––––––––––––––––––––––––– */ body[class*='gh-font-heading'] { --font-weight-one-light: 400; --font-weight-one-bold: 700; --font-weight-two-bold: 700; --letter-spacing: normal; } body[class*='gh-font-body'] { --font-weight-three-regular: 400; --font-weight-three-medium: 400; --font-weight-three-bold: 700; } /* ////////////////////////////////////////////////////////////////////////// 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 flickity, lightense-images.js, progress bar –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .flickity-enabled{position:relative}.flickity-enabled:focus{outline:none}.flickity-viewport{position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}.flickity-enabled.is-draggable .flickity-viewport{cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.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(--ghost-accent-color)}.post-progress[value]::-moz-progress-bar{background-color:var(--ghost-accent-color)}.post-progress[value='1']{opacity:0} /* ////////////////////////////////////////////////////////////////////////// III. Theme ////////////////////////////////////////////////////////////////////////// */ /* -------------------------------------------------------------------------- 1.Global -------------------------------------------------------------------------- */ html { font-size: 62.5%; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-family-three); font-size: 2rem; font-weight: var(--font-weight-three-regular); line-height: 1.5; word-wrap: break-word; word-break: break-word; color: var(--color-font-one); background-color: var(--color-body); } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––––– */ h1,h2,h3,h4,h5,h6, input, textarea, blockquote { line-height: 1.3; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-one); font-weight: var(--font-weight-one-bold); width: 100%; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––––– */ a { text-decoration: none; color: var(--color-font-one); } /* Input & textarea –––––––––––––––––––––––––––––––––––––––––––––––––––– */ input, input:focus, textarea { color: var(--color-font-one); } input, textarea { font-family: var(--font-family-three); border: none; border-radius: 0; outline: none; background-color: transparent; box-shadow: none; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: var(--color-font-one); } input::placeholder, textarea::placeholder { color: var(--color-font-one); } /* Aspect ratio –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-logo .is-logo img, .footer-logo .is-logo img { aspect-ratio: attr(width)/attr(height); } /* Partial mode –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .is-partial-color + div .loop-subtitle, .is-partial-color + div .global-subtitle, .is-partial-color .footer-container:first-child, .partial-dark-mode .is-partial-dark + div .loop-subtitle, .partial-dark-mode .is-partial-dark + div .global-subtitle, .partial-dark-mode .is-partial-dark .footer-container:first-child { border-top: 0; } .is-partial-color + div .loop-subtitle, .is-partial-dark + div .loop-subtitle { padding-top: 5.5vh; } .is-partial-color.no-slider + .loop-section, .is-partial-dark.no-slider + .loop-section { margin-top: 5vh; } .is-partial-color + div .global-subtitle, .is-partial-dark + div .global-subtitle { padding-top: 4vh; } .post-header.is-partial-color, .partial-dark-mode .post-header.is-partial-dark { margin-bottom: 5vh; } @media (prefers-color-scheme:light) { .is-partial-dark + div .loop-subtitle, .is-partial-dark + div .global-subtitle, .is-partial-dark .footer-container:first-child { border-top: 0; } .post-header.is-partial-dark { margin-bottom: 5vh; } } @media (max-width:768px) { .is-partial-color + div .loop-subtitle, .is-partial-dark + div .loop-subtitle { padding-top: 3vh; } } @media (min-width:769px) { .post-header.is-partial-color, .partial-dark-mode .post-header.is-partial-dark { margin-bottom: 7vh; } @media (prefers-color-scheme:light) { .post-header.is-partial-dark { margin-bottom: 7vh; } } } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .global-bg-image { background: no-repeat center center/cover; } /* Image orientation */ .global-image-orientation { line-height: 0; position: relative; width: 100%; margin: 0; transition: transform .3s ease; aspect-ratio: 1/1.2; } .global-image-orientation > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .global-image-orientation.is-landscape { aspect-ratio: 4/3; } .global-image-orientation.is-square { aspect-ratio: 1/1; } .global-image-orientation.is-natural { padding-bottom: 0; aspect-ratio: initial; } .global-image-orientation.is-natural > img { position: relative; } @supports not (aspect-ratio:1/1) { .global-image-orientation { padding-bottom: 120%; } .global-image-orientation.is-landscape { padding-bottom: 75%; } .global-image-orientation.is-square { padding-bottom: 100%; } } /* Border radius –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-radius { overflow: hidden; border-radius: var(--border-radius); } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-title { font-size: 6.6rem; line-height: 1.25; margin: 0; } /* Subtitle –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-subtitle { display: flex; margin-bottom: 2vh; padding-top: 1.8vh; border-top: var(--border) var(--color-border-one); } .global-subtitle-title { font-size: 2rem; line-height: 1.1; flex: 1 0 50%; max-width: 800px; margin: 0; } .global-subtitle span { font-weight: var(--font-weight-three-bold); } /* Link overlay –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-link { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; } /* Authors widget –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-authors { line-height: 0; flex: 1 0 auto; margin-top: 1vh; text-align: right; } .global-authors > div { display: flex; justify-content: flex-end; } .global-authors small { font-size: 1.4rem; line-height: 1; display: none; width: 100%; margin-top: 1.5vh; opacity: var(--opacity-one); } .global-authors.option-1 small:nth-of-type(1), .global-authors.option-1-2 small:nth-of-type(2), .global-authors.option-1-2-3 small:nth-of-type(3) { display: block; } .global-item-author { position: relative; display: inline-block; overflow: hidden; width: 84px; height: 84px; margin-right: -25px; transition-timing-function: ease; transition-duration: .2s; transition-property: transform, background-color; pointer-events: none; border: 6px solid transparent; background-color: var(--color-body); will-change: transform; } .global-item-author:last-of-type { margin-right: -10px; } .global-item-author:hover { transform: translateY(-2px); } .global-item-author:not(.is-image) a { z-index: -1; background-color: var(--color-one); } .global-item-author:nth-child(1) { z-index: 5 } .global-item-author:nth-child(2) { z-index: 4 } .global-item-author:nth-child(3) { z-index: 3 } .global-item-author:nth-child(4) { z-index: 2 } .global-item-author:nth-child(5) { z-index: 1 } .global-item-author, .global-item-author.is-image a { border-radius: 100px; } .global-item-author a { pointer-events: auto; } .global-item-author img { width: 101%; height: 101%; } .global-item-author span { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1.8rem; font-weight: normal; line-height: 18px; position: absolute; top: 50%; left: 50%; display: block; overflow: hidden; width: calc(1ch + 4px); transform: translate(-50%, -50%); text-align: center; white-space: nowrap; text-indent: 2px; letter-spacing: 4px; text-transform: uppercase; color: var(--color-font-three); } /* Button –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-button { font-family: var(--font-family-three); font-size: 2.4rem; font-weight: var(--font-weight-three-medium); line-height: 1.3; position: relative; display: inline-block; box-sizing: border-box; padding: 21px 40px; cursor: pointer; text-align: center; color: var(--color-font-two); border: none; border-radius: 100px; outline: none; background-color: var(--color-five); } .global-button, .global-button.members-cta-button { transition-timing-function: ease; transition-duration: .2s; transition-property: color, opacity, background-color; text-decoration: none; } .global-button:hover, .global-accent-color-buttons .global-button, .global-button.members-cta-button:hover { color: var(--color-white); background-color: var(--ghost-accent-color); } .global-accent-color-buttons .global-button:hover { opacity: .8; } /* Excerpt –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-excerpt { font-size: 2.5rem; font-weight: var(--font-weight-three-medium); line-height: 1.5; display: block; max-width: 750px; margin: 3.5vh 0 0; opacity: var(--opacity-two); } /* Tags & Members visibility label –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-tags { line-height: 0; display: flex; align-items: flex-start; flex-wrap: wrap; } .global-tags:empty { display: none; } .global-tags a { font-family: var(--font-family-three); font-size: 1.4rem; font-weight: var(--font-weight-three-medium); line-height: 1; display: inline-block; margin: 0 5px 5px 0; padding: 7px 10px; transition: background-color .2s ease; background-color: var(--color-one); } .global-tags a:hover { background-color: var(--color-two); } .global-tags a, .global-tags > svg { border-radius: 100px; } .global-tags > svg { line-height: 0; display: inline-flex; height: 14px; margin-right: 5px; padding: 7px; background-color: var(--color-one); fill: var(--color-font-one); } /* Alerts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-alert { font-size: 1.2rem; font-weight: var(--font-weight-three-medium); line-height: 1.4; display: none; max-width: 420px; padding: 4px 10px; border-radius: 100px; background-color: var(--color-one); } /* Question about member account –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-question { font-size: 1.6rem; display: block; margin-top: 5vh; } .global-question a, .global-question.members-cta-question a { transition: opacity .15s ease; text-decoration: underline; } .global-question a:hover, .global-question.members-cta-question a:hover { opacity: .8; color: var(--color-font-one); } /* Notifications –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-notification div { font-size: 1.5rem; font-weight: var(--font-weight-three-medium); position: fixed; z-index: 100; top: 1.4vh; 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-black); border-radius: 5px; background-color: var(--color-alert-success); } .global-notification .expired { background-color: var(--color-alert-error); } .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 } } /* Padding –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-padding { max-width: var(--max-width-global-wrap); margin-right: auto; margin-left: auto; padding-right: var(--margin-wrap-left-right); padding-left: var(--margin-wrap-left-right); } /* Wrap & Sticky Footer –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .global-wrap, .global-content { min-height: 100vh; } .global-content { display: flex; flex-direction: column; margin: 0 auto; } .global-main { flex: 1 0 auto; width: 100%; margin: 0 auto; } .global-footer { flex-shrink: 0; } /* RWD — Global settings –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1600px) { .global-title { font-size: 6rem; } } @media (max-width:1480px) { .global-button { padding: 18px 36px; } .global-subtitle-title { font-size: 1.8rem; } .global-excerpt { font-size: 2.3rem; max-width: 660px; } } @media (max-width:1280px) { .global-title { font-size: 5.5rem; } .global-item-author { width: 72px; height: 72px; margin-right: -25px; border-width: 5px; } .global-tags a { font-size: 1.3rem; padding: 5px 8px; } .global-tags a, .global-tags > svg { margin-right: 3px; } .global-tags > svg { height: 13px; padding: 5px; } } @media (max-width:1024px) { .global-item-author { width: 62px; height: 62px; margin-right: -25px; } .global-excerpt { font-size: 2rem; } .global-button { padding: 16px 30px; } } @media (max-width:768px) { .global-radius { border-radius: calc(var(--border-radius) / 1.5); } .global-title { font-size: 4.8rem; } .global-authors:not(.item-authors):not(.post-authors) { display: none; } .global-excerpt { margin-top: 2vh; } .global-button { font-size: 2.2rem; } } @media (max-width:480px) { .global-radius { border-radius: calc(var(--border-radius) / 2); } .global-title { font-size: 3.4rem; } .global-subtitle-title { font-size: 1.6rem; } .global-button { padding: 13px 24px; } .global-button, .global-excerpt { font-size: 1.8rem; } } @media (max-width:320px) { .global-title { font-size: 3.2rem; } } /* -------------------------------------------------------------------------- 2.Header -------------------------------------------------------------------------- */ .header-section { color: var(--color-font-one); background-color: var(--color-body-partial); } .header-wrap { min-height: 90px; padding-bottom: 2vh; } .header-wrap, .header-nav nav > ul { display: flex; align-items: center; } .header-wrap li, .header-wrap a { font-family: var(--font-family-three); font-size: 1.8rem; font-weight: var(--font-weight-three-medium); display: inline-block; } .header-nav a:hover, .header-nav a.is-active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .header-nav svg { fill: var(--color-font-one); } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-logo { line-height: 0; flex: 0 0 auto; margin-top: 30px; margin-bottom: 30px; } .header-logo img { width: auto; height: var(--height-logo-header); } .header-logo .is-title { font-family: var(--font-family-one); font-size: 4rem; font-weight: var(--font-weight-one-bold); line-height: 1.2; max-width: 400px; } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-nav { position: relative; z-index: 2; flex: 0 1 100%; } .header-nav nav ul { margin: 0; padding: 0; list-style: none; word-break: normal; } .header-nav nav li { margin-left: 1.15vw; } .header-nav nav > ul { align-items: center; flex-grow: 1; justify-content: flex-end; } /* Item –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-nav a { line-height: 1.5; margin: 0; } /* Dropdown –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-nav .is-dropdown { position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .header-nav .is-dropdown, .header-nav .is-dropdown svg { cursor: pointer; } .header-nav .is-dropdown ul { position: absolute; z-index: 999; top: 40px; right: 0; display: none; min-width: 120px; margin: 0; padding: 20px 20px 20px 30px; list-style: none; cursor: default; transform: translateX(-2px); text-align: right; border-radius: calc(var(--border-radius) / 2); background-color: var(--color-four); box-shadow: 0 5px 45px -10px rgba(0, 0, 0, .3); } .header-nav .is-dropdown.is-active ul, .header-nav .is-dropdown ul li { display: block; } .header-nav .is-dropdown ul li:not(:last-child) { padding-bottom: 8px; } .header-nav li.is-dropdown li { margin-left: 0; } .header-nav li.is-dropdown li a { color: var(--color-font-four); } .header-nav .is-dropdown svg { width: 16px; transform: translateY(2px); } /* Login panel & Search element –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-search.is-desktop + .signup, .header-search.is-desktop + .account { margin-left: .5vw; } .header-nav .signup a, .header-nav .account a, .header-search.is-desktop { padding: 6px 20px; text-decoration: none; } .header-nav .account a, .header-search.is-desktop { line-height: 1.5; transition: background-color .2s ease; color: var(--color-font-one); background-color: var(--color-one); } .header-nav .account a:hover, .header-search.is-desktop:hover { opacity: 1; background-color: var(--color-two); } .header-search, .header-search.is-mobile svg { display: block; cursor: pointer; } .header-search svg { width: 15px; } .header-search:not(.is-mobile) svg { margin-right: 6px; transform: translateY(1px); } .header-search.is-mobile { display: none; } .header-search.is-mobile svg { position: absolute; top: 9px; right: 46px; width: 24px; } /* Toogle –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .header-toggle, .header-checkbox, .header-checkbox:checked, .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 { position: absolute; } .header-toggle { z-index: 99; overflow: visible; width: 30px; height: 34px; margin: 0; cursor: pointer; opacity: 1; border: none; outline: none; background-color: transparent; will-change: transform; } .header-toggle > span { top: calc(50% + 3px); } .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-three); } .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 { border-radius: calc(var(--border-radius) / 2); background-color: var(--color-four); box-shadow: 0 5px 45px -10px rgba(0, 0, 0, .3); } .header-checkbox:checked ~ nav ul { display: inline-block; margin: 0; padding: 0; list-style: none; } /* RWD — Header –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1024px) { .header-logo { flex-basis: 80%; } .header-nav { flex-basis: 20%; text-align: right; } .header-nav, .header-nav a { color: var(--color-font-four); } .header-nav a { line-height: 1.3; padding: 5px; word-break: break-word; } .header-nav ul > li, .header-search.is-mobile, .header-checkbox:checked ~ nav { display: block; } .header-nav nav ul, .header-nav .is-dropdown span, .header-search:not(.is-mobile) { display: none; } .header-nav .is-dropdown ul { top: 0; min-width: initial; transform: translateX(0); box-shadow: none; } .header-nav .is-dropdown ul li:not(:last-child) { padding-bottom: 0; } .header-toggle { display: inline-block; } .header-checkbox:checked ~ nav { top: 43px; right: -10px; width: 160px; padding: 2vh 15px; } .header-checkbox:checked ~ nav ul { width: 100%; } .header-checkbox:checked ~ nav ul ul { padding-left: 0; } .header-nav .signup a, .header-nav .account a, .header-nav .account a:hover { color: var(--color-font-five); background-color: var(--color-six); } .header-nav .signup a, .header-nav .account a { margin-top: 8px; margin-bottom: 5px; } .header-nav .signup a:hover, .header-nav.is-button-accent-color .signup a { color: var(--color-white); background-color: var(--ghost-accent-color); } } @media (max-width:768px) { .header-checkbox:checked ~ nav { right: -5px; } } @media (max-width:480px) { .header-wrap { padding-bottom: 0; } .header-logo { overflow: hidden; margin-top: 10px; margin-bottom: 10px; } .header-logo .is-logo img { height: var(--height-logo-mobile-header); } .header-logo .is-title { font-size: 3rem; } .header-checkbox:checked ~ nav { right: 0; padding-right: 10px; padding-left: 10px; } } /* -------------------------------------------------------------------------- 3.Hero -------------------------------------------------------------------------- */ .hero-section { color: var(--color-font-one); background-color: var(--color-body-partial); } .hero-wrap { overflow: hidden; padding-top: 4vh; } .hero-content { margin-bottom: 9vh; } .hero-title { font-weight: var(--font-weight-one-light); line-height: 1.2; max-width: 1500px; margin-top: 0; letter-spacing: var(--letter-spacing, normal); } .hero-title span, .hero-title strong, .hero-title b { font-weight: var(--font-weight-one-bold); } .hero-title-medium { font-size: 9rem; } .hero-title-small, .hero-title-medium { margin-bottom: 4.5vh; } .hero-title-large { font-size: 11rem; margin-bottom: 6vh; } /* RWD — Hero –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1820px) and (min-width:1481px) { .hero-title-medium { font-size: 5.1vw; } .hero-title-large { font-size: 6.13vw; } } @media (max-width:1480px) { .hero-wrap { padding-top: 2vh; } .hero-content { margin-bottom: 7vh; } .hero-title-medium { font-size: 7.8rem; } .hero-title-large { font-size: 9.2rem; margin-bottom: 4vh; } } @media (max-width:1280px) { .hero-title-medium { font-size: 6.3vw; } .hero-title-large { font-size: 7.6vw; } } @media (max-width:1024px) { .hero-wrap { padding-top: 1vh; } .hero-content { margin-bottom: 5vh; } .hero-title { margin-bottom: 3vh; } .hero-title-small { font-size: 4.8rem; } .hero-title-medium { font-size: 5.6rem; } } @media (max-width:768px) { .hero-title-small { font-size: 4rem; } .hero-title-medium { font-size: 5rem; } .hero-title-large { font-size: 6rem; } } @media (max-width:480px) { .hero-title-small { font-size: 3rem; } .hero-title-medium { font-size: 3.4rem; } .hero-title-large { font-size: 3.8rem; } } @media (max-width:320px) { .hero-title-small { font-size: 2.8rem; } .hero-title-medium { font-size: 3.2rem; } .hero-title-large { font-size: 3.6rem; } } /* -------------------------------------------------------------------------- 4.Featured -------------------------------------------------------------------------- */ .featured-section { padding-bottom: 12vh; } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .featured-navigation { display: inline-flex; flex: 1 0 auto; justify-content: flex-end; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .featured-navigation svg { width: 1.9rem; cursor: pointer; pointer-events: auto; fill: var(--color-font-one); } .featured-btn-previous { margin-right: 15px; } .featured-btn-previous, .featured-btn-next { line-height: 0; padding: 0; cursor: pointer; border: none; outline: none; background-color: transparent; } .featured-btn-next.is-end, .featured-btn-previous:not(.is-prev) { pointer-events: none; opacity: calc(var(--opacity-one) / 2); } /* Last item trigger */ .featured-wrap .item-image .is-last { position: absolute; z-index: 1; top: 10px; right: 10px; width: 1px; height: 1px; transform: rotate(45deg); background-color: transparent; } /* RWD — Featured –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1600px) { .featured-section { padding-bottom: 10vh; } } @media (max-width:1480px) { .featured-section { padding-bottom: 8vh; } .featured-navigation svg { width: 1.8rem; } } @media (max-width:480px) { .featured-navigation { display: none; } } /* -------------------------------------------------------------------------- 5.Loop -------------------------------------------------------------------------- */ .loop-section { margin-bottom: 3vh; } .loop-wrap { margin-bottom: var(--grid-gap); -webkit-animation: slideTop .8s ease; animation: slideTop .8s ease; grid-template-columns: repeat(3, 1fr); } .loop-wrap, .special-wrap { display: grid; width: 100%; gap: var(--grid-gap); grid-auto-columns: 1fr; grid-gap: var(--grid-gap); will-change: transform; } /* Subtitle –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .hero-section.no-slider + .loop-section .loop-subtitle { display: none; } .loop-subtitle { display: flex; margin-bottom: 4.5vh; padding-top: 2vh; border-top: var(--border) var(--color-border-one); } .loop-subtitle-title { font-family: var(--font-family-one); font-weight: var(--font-weight-one-light); flex: 1 0 50%; margin: 0; letter-spacing: var(--letter-spacing, normal); } .loop-subtitle span { font-weight: var(--font-weight-one-bold); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-image { margin-bottom: 2vh; transition: transform .3s ease; } .item-image:hover { transform: translateY(-3px); } /* Authors –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-authors { position: absolute; z-index: 1; bottom: 13px; left: 13px; margin: 0; } .item-author { width: 30px; height: 30px; margin-right: -16px; border-width: 5px; background-color: rgba(255, 255, 255, .2); } .item-author:hover { transform: scale(.9); background-color: var(--color-white); } .item-author span { font-size: 1.2rem; line-height: 12px; } .item-author:not(.is-image) a { background-color: var(--color-body); } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-content { display: flex; flex-direction: column; box-sizing: border-box; padding-right: 2.5vw; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-title { font-family: var(--font-family-two); font-size: 3rem; font-weight: var(--font-weight-two-bold); line-height: 1.3; max-width: 490px; margin: 1vh 0 0; } .item-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Excerpt –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item-excerpt { font-size: 1.8rem; line-height: 1.5; display: -webkit-box; overflow-y: hidden; max-width: 540px; margin: 0; margin-top: 1.5vh; padding-right: .4vw; opacity: var(--opacity-two); -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .item-excerpt.no-image { -webkit-line-clamp: 10; } /* Item –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item { will-change: transform; } /* If 'loop' –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item.is-loop { margin-bottom: 5.2vh; } /* If 'featured' –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .item.is-featured { width: 41%; margin-right: var(--grid-gap); } .item.is-featured:last-child { margin-right: 0; } .item.is-featured.is-small { width: 29%; } .item.is-featured .item-title, .item.is-featured .item-excerpt { max-width: 550px; } .item.is-featured.is-small .item-excerpt { -webkit-line-clamp: 3; } /* If 'special' –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .comments-section + .special-section { margin-top: 0; } .special-wrap { margin-bottom: 8vh; grid-template-columns: repeat(6, 1fr); } .item.is-special { margin-bottom: 1vh; } .item.is-special .item-image { margin-bottom: 1vh; } .item.is-special .item-content { padding-right: 10px; } .item.is-special .item-title { font-size: 2rem; line-height: 1.3; } /* Animation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @-webkit-keyframes slideTop { 0% { transform: translateY(40px) } 100% { transform: translateY(0) } } @keyframes slideTop { 0% { transform: translateY(40px) } 100% { transform: translateY(0) } } /* RWD — Loop –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1600px) { .item-title { font-size: 2.8rem; } } @media (max-width:1480px) { .special-wrap { margin-bottom: 7vh; grid-template-columns: repeat(5, 1fr); } .item-title { font-size: 2.6rem; margin-top: .5vh; } .item.is-featured .item-title { font-size: 2.4rem; } .item-excerpt { font-size: 1.6rem; margin-top: 1.5vh; } .item.is-special .item-title { font-size: 1.8rem; } } @media (max-width:1480px) and (min-width:769px) { .item.is-special:nth-child(6) { display: none; } } @media (max-width:1280px) { .loop-subtitle { margin-bottom: 4vh; } .item.is-loop { margin-bottom: 3vh; } .item-title { font-size: 2.4rem; } .item-image:hover { transform: translateY(0); } .item.is-featured, .item.is-featured.is-small { width: 30%; } .item.is-featured .item-title { font-size: 2.2rem; } .item.is-featured .item-excerpt { -webkit-line-clamp: 3; } } @media (max-width:1024px) { .loop-wrap { grid-template-columns: repeat(2, 1fr); } .special-wrap { grid-template-columns: repeat(4, 1fr); } .item-excerpt { font-size: 1.4rem; -webkit-line-clamp: 3; } } @media (max-width:1024px) and (min-width:769px) { .item.is-special:nth-child(5) { display: none; } } @media (max-width:768px) { .loop-wrap, .special-wrap { gap: calc(var(--grid-gap) / 1.5); grid-gap: calc(var(--grid-gap) / 1.5); } .loop-subtitle { margin-bottom: 2.5vh; } .special-wrap { grid-template-columns: repeat(3, 1fr); } .item-content { padding-right: 3vw; } .item.is-featured { margin-right: calc(var(--grid-gap) / 1.5); } .item.is-featured .item-tags span { display: none; } .item.is-featured, .item.is-featured.is-small { width: 40%; } .item-title { font-size: 2.2rem; line-height: 1.3; } .item-authors { bottom: 10px; left: 10px; } .item-author { width: 27px; height: 27px; } } @media (max-width:768px) and (min-width:481px) { .item.is-loop .item-tags span { display: none; } } @media (max-width:480px) { .loop-wrap { grid-template-columns: repeat(1, 1fr); } .special-wrap { grid-template-columns: repeat(2, 1fr); } .item.is-featured, .item.is-featured.is-small { width: 80%; } .item.is-special:nth-child(5), .item.is-special:nth-child(6) { display: none; } .item-title { font-size: 2.4rem; } } @media (max-width:320px) { .item.is-special .item-authors { display: none; } } /* -------------------------------------------------------------------------- 6.Subscribe form -------------------------------------------------------------------------- */ .subscribe-wrap { align-items: center; flex-wrap: wrap; } .subscribe-wrap, .subscribe-form { display: flex; } .subscribe-form { margin-right: 2vh; margin-bottom: 1.4vh; border-radius: 100px; background-color: var(--color-twelve); } .subscribe-form button { flex: 1 0 auto; } .subscribe-form input { font-size: 2.2rem; display: block; flex: 1 1 auto; box-sizing: border-box; max-width: 265px; padding: 0 30px; transition: margin-right .25s ease; word-break: normal; border-radius: 100px; } .subscribe-form input:focus { margin-right: 10px; } .subscribe-form input::-moz-placeholder { opacity: .6 } .subscribe-form input::placeholder { opacity: .6 } /* Caption */ .subscribe-form-caption { font-size: 1.6rem; line-height: 1.2; max-width: 390px; margin-bottom: 1.4vh; opacity: var(--opacity-one); } /* Alerts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .subscribe-alert { flex-basis: 100%; } .subscribe-form.loading ~ .subscribe-alert .alert-loading, .subscribe-form.success ~ .subscribe-alert .alert-success, .subscribe-form.error ~ .subscribe-alert .alert-error { display: inline-block; } /* RWD — Subscribe form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1024px) { .subscribe-form input { max-width: 250px; padding-right: 25px; padding-left: 25px; } .subscribe-form-caption { display: none; } } @media (max-width:768px) { .subscribe-form { margin-right: 0; } .subscribe-form input { font-size: 2.2rem; width: 100%; max-width: 230px; padding-right: 20px; padding-left: 20px; } .subscribe-form input:focus { margin-right: 0; } } @media (max-width:480px) { .subscribe-form input { font-size: 1.6rem; } } /* -------------------------------------------------------------------------- 7.Pagination -------------------------------------------------------------------------- */ .pagination-section { padding-bottom: 3vh; text-align: center; } .pagination-section button { margin-top: 3vh; margin-bottom: 14vh; } /* RWD — Pagination –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1480px) { .pagination-section button { margin-bottom: 8vh; } } /* -------------------------------------------------------------------------- 8.Search function -------------------------------------------------------------------------- */ .search-section { position: absolute; z-index: 997; display: none; } .search-overlay { position: fixed; z-index: 996; background-color: rgba(0, 0, 0, .6); } .search-section, .search-overlay, .search-is-active .global-wrap { top: 0; right: 0; left: 0; min-height: 100%; } .search-wrap, .search-content { position: relative; z-index: 998; max-width: 100%; } .search-wrap, .search-meta { pointer-events: none; } .search-close, .search-form input, .search-results img, .search-results span { pointer-events: auto; } .search-content, .search-form input, .search-results a { color: var(--color-font-three); } /* If search is active –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-is-active { overflow-y: scroll; -webkit-overflow-scrolling: auto; } .search-is-active .global-wrap { position: fixed; overflow: hidden; } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-content { background-color: var(--color-body); } /* Close –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-close { position: absolute; z-index: 999; top: 50%; right: 3vw; cursor: pointer; transform: translateY(-50%); } .search-close svg { width: 22px; height: 22px; fill: var(--color-font-three); } /* Form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-form { position: relative; box-sizing: border-box; width: 100%; padding: 4vh 3vw; } .search-form input { font-family: var(--font-family-one); font-size: 7.6rem; font-weight: var(--font-weight-one-bold); width: 100%; max-width: 1000px; padding: 0; letter-spacing: var(--letter-spacing, normal); word-break: normal; } .search-form input::-moz-placeholder { opacity: 1; color: var(--color-font-three) } .search-form input::placeholder { opacity: 1; color: var(--color-font-three) } /* Meta –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-meta { font-size: 1.6rem; margin-top: 1vh; opacity: var(--opacity-one); } .search-meta .is-hide { display: none; } /* Results –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-results { display: grid; box-sizing: border-box; width: 100%; height: 100%; padding: 0 3vw 7vh; gap: calc(var(--grid-gap) * 2); grid-gap: calc(var(--grid-gap) * 2); grid-template-columns: repeat(7, 1fr); } .search-results:empty { padding-top: 0; padding-bottom: 0; } .search-results a { padding-bottom: var(--grid-gap); } .search-results img { line-height: 0; width: 100%; height: 150px; margin-bottom: 3px; border-radius: calc(var(--border-radius) / 2); } .search-results h5 { margin: 0; } .search-results span { font-family: var(--font-family-two); font-size: 2rem; font-weight: var(--font-weight-two-bold); line-height: 1.3; } .search-results span:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } .search-results time { font-size: 1.3rem; display: block; margin-top: .6vh; } /* Animation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .search-is-active .search-wrap{-webkit-animation:searchOne .6s ease;animation:searchOne .6s ease}.search-is-active .search-overlay{-webkit-animation:searchTwo .6s ease;animation:searchTwo .6s ease}.search-no-active .search-overlay{-webkit-animation:searchThree .4s ease;animation:searchThree .4s ease}.search-no-active .search-wrap{-webkit-animation:searchFour .4s ease;animation:searchFour .4s ease}.search-no-active .search-section{visibility:hidden;-webkit-animation:searchFive .4s ease;animation:searchFive .4s ease} @-webkit-keyframes searchOne{0%{transform:translateY(-120%)}100%{transform:translateY(0)}}@keyframes searchOne{0%{transform:translateY(-120%)}100%{transform:translateY(0)}}@-webkit-keyframes searchTwo{0%{opacity:0}100%{opacity:1}}@keyframes searchTwo{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes searchThree{0%{opacity:1}100%{opacity:0}}@keyframes searchThree{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes searchFour{0%{transform:translateY(0)}100%{transform:translateY(-130%)}}@keyframes searchFour{0%{transform:translateY(0)}100%{transform:translateY(-130%)}}@-webkit-keyframes searchFive{from,to{visibility:visible}}@keyframes searchFive{from,to{visibility:visible}} /* RWD — Search function –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1800px) { .search-form input { font-size: 6.2rem; } .search-results { grid-template-columns: repeat(6, 1fr); } .search-results span { font-size: 2.2rem; } } @media (max-width:1280px) { .search-form { padding-top: 3vh; padding-bottom: 3vh; } .search-form input { font-size: 4.6rem; } .search-results { grid-template-columns: repeat(5, 1fr); } } @media (max-width:1024px) { .search-results { grid-template-columns: repeat(4, 1fr); } } @media (max-width:768px) { .search-form { padding-top: 2vh; padding-bottom: 2vh; } .search-form input { font-size: 3.6rem; max-width: 80%; } .search-meta { margin-top: .8vh; } .search-results { gap: var(--grid-gap); grid-gap: var(--grid-gap); grid-template-columns: repeat(3, 1fr); } .search-results span { font-size: 1.8rem; } } @media (max-width:480px) { .search-form, .search-results { padding-right: var(--margin-wrap-left-right); padding-left: var(--margin-wrap-left-right); } .search-results { padding-bottom: 3vh; gap: 0; grid-gap: 0; grid-template-columns: repeat(1, 1fr); } .search-close { right: var(--margin-wrap-left-right); } .search-meta { font-size: 1.4rem; } .search-results a { display: grid; align-items: start; padding: 10px 0; grid-template-columns: repeat(4, 1fr) } .search-results img { width: 90px; height: 90px; margin-right: 12px; margin-bottom: 0; grid-row: span 3; } .search-results h5, .search-results time { grid-column: span 3; } } /* -------------------------------------------------------------------------- 9.Post — Header -------------------------------------------------------------------------- */ .post-header { width: 100%; color: var(--color-font-one); background-color: var(--color-body-partial); } .post-header-container, .post-meta { display: flex; flex-wrap: wrap; } /* Container –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-header-container { align-items: flex-start; padding-top: 2vh; padding-bottom: 8vh; } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-header-content { flex: 1 0 50%; max-width: 900px; padding-top: 1vh; } .post-header-content > div:first-child { width: 100%; margin-bottom: 4vh; } /* Tags & Members visibility label –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-tags a:last-of-type { margin-bottom: 2vh; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-title { letter-spacing: var(--letter-spacing, normal); } /* Meta –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-meta { font-size: 1.3rem; line-height: 1.35; margin-top: 4vh; } .post-meta > div { align-self: center; margin-bottom: 5px; } .post-meta-content { opacity: var(--opacity-two); } .post-meta time { display: block; } .post-meta a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; } /* Authors */ .post-authors { flex-grow: 0; margin-top: 0; text-align: left; } .post-item-author { width: 40px; height: 40px; margin-right: -14px; margin-left: -5px; border-width: 5px; background-color: var(--color-body-partial); } .post-item-author:last-of-type { margin-right: 5px; } .post-item-author span { font-size: 1.4rem; line-height: 14px; color: var(--color-font-one); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-header-image { width: 33%; margin-left: auto; padding-left: 6vw; } .post-header-image figure { margin: 0; } /* Figcaption */ .post-header-image figcaption { font-size: 1.1rem; margin-top: 7px; text-align: left; opacity: var(--opacity-two); } .post-header-image figcaption a { transition: color .1s ease; text-decoration: underline; } .post-header-image figcaption a:hover { color: var(--ghost-accent-color); } /* RWD — Post — Header –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1480px) { .post-meta { margin-top: 3vh; } } @media (max-width:1280px) { .post-header-content { padding-top: 0; } } @media (max-width:1024px) { .post-header-container { padding-top: 1vh; padding-bottom: 5vh; } .post-header-content { max-width: 700px; } .post-excerpt { max-width: 600px; } } @media (max-width:768px) { .post-header-content { max-width: 660px; } .post-header-content > div:first-child { margin-bottom: 2vh; } .post-header-image { width: 100%; margin-top: 3vh; padding-left: 0; } .post-item-author { width: 33px; height: 33px; margin-left: -4px; border-width: 4px; } .post-item-author span { font-size: 1.2rem; line-height: 12px; } } @media (max-width:480px) { .post-header-container { padding-bottom: 32px; } .post-meta { font-size: 1.2rem; } } @media (min-width:769px) { .post-header-wrap.is-center { text-align: center; } .post-header-wrap.is-center .post-header-content, .post-header-wrap.is-classic .post-header-content { padding-top: 0; } .page-template .post-header-wrap.is-center .post-header-content { padding-top: 2vh; } .post-header-wrap.is-center .post-header-content, .post-header-wrap.is-center .post-header-image, .post-header-wrap.is-center .post-excerpt, .post-header-wrap.is-center .post-meta, .post-header-wrap.is-classic .post-header-content, .post-header-wrap.is-classic .post-header-image { margin-right: auto; margin-left: auto; } .post-header-wrap.is-center .post-tags { justify-content: center; } .post-header-wrap.is-center .post-meta, .post-header-wrap.is-classic .post-header-container { flex-direction: column; } .post-header-wrap.is-center .post-authors { margin-left: 3px; } .post-header-wrap.is-center .post-item-author:last-of-type { margin-right: 0; } .post-header-wrap.is-center .post-header-image, .post-header-wrap.is-classic .post-header-image { margin-top: 4vh; padding-left: 0; } .post-header-wrap.is-center .post-header-image, .post-header-wrap.is-classic .post-header-image, .post-header-wrap.is-classic .post-header-content { width: 100%; } .post-header-wrap.is-classic .post-title { max-width: 88%; } .post-header-wrap.is-center .post-header-image { max-width: 80%; } .post-header-wrap.is-classic .post-excerpt { max-width: 820px; } } @media (min-width:1025px) { .post-header-wrap.is-center .post-header-content { max-width: 1050px; } .post-header-wrap.is-center .post-excerpt { max-width: 780px; } } @media (min-width:1481px) { .post-header-wrap.is-classic .post-header-content, .post-header-wrap.is-classic .post-header-image { max-width: calc(var(--max-width-post-wrap) + 180px + 180px); } .post-title { font-size: 6.6rem; } } @media (max-width:1480px) and (min-width:769px) { .post-header-wrap.is-classic .post-header-content, .post-header-wrap.is-classic .post-header-image { max-width: calc(var(--max-width-post-wrap) + 70px + 70px); } .post-header-wrap.is-center .post-header-image { max-width: calc(var(--max-width-post-wrap) + 180px + 180px); } } @media (min-width:1601px) { .post-title { font-size: 7.4rem; } } /* -------------------------------------------------------------------------- 10.Post — Content -------------------------------------------------------------------------- */ .post-content { font-size: 2rem; max-width: var(--max-width-post-wrap); min-height: 1px; margin: 0 auto 14vh; } /* 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 { margin-top: 0; margin-bottom: 30px; } .post-content hr, .post-content blockquote, .post-content .kg-card.kg-header-card { margin-top: 65px; margin-bottom: 65px; } .post-content pre, .post-content .kg-card { width: 100%; margin-top: 40px; margin-bottom: 40px; } .post-content blockquote, .post-content .kg-card { margin-right: 0; margin-left: 0; } .post-content .kg-card:not(.kg-image-card):not(.kg-gallery-card):not(.kg-embed-card) + .kg-card { margin-top: -20px; } /* Social media –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .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 { line-height: 1.4; margin-top: 1em; margin-bottom: 18px; margin-left: -1px; } .post-content h4, .post-content h5, .post-content h6 { font-family: var(--font-family-three); font-weight: var(--font-weight-three-bold); line-height: 1.55; margin-top: 1.2em; margin-bottom: 10px; } .post-content h1 { font-size: 5.8rem; } .post-content h2 { font-size: 4.5rem; } .post-content h3 { font-size: 3.2rem; } .post-content h4 { font-size: 2.4rem; } .post-content h5 { font-size: 2rem; } .post-content h6 { font-size: 1.4rem; letter-spacing: 1px; text-transform: uppercase; } /* Paragraph –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content p { line-height: 1.62; position: relative; } /* Strong –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content strong { font-weight: var(--font-weight-three-bold); } /* Mark –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content mark a { color: var(--color-font-black) } /* hr –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content hr { border-top: var(--border) var(--color-border-one); border-right: 0; border-bottom: 0; border-left: 0; } /* kbd –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content kbd { font-size: 70%; display: inline-block; padding: 2px 8px 1px; border: 1px solid; border-radius: 4px; } /* iframe –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content iframe { display: block; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content a { transition: color .1s ease; text-decoration: underline; } .post-content a:hover { color: var(--ghost-accent-color); } /* Blockquote –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content blockquote, .post-content blockquote p { line-height: 1.4; } .post-content blockquote p { margin: 0; } .post-content blockquote { font-family: var(--font-family-two); font-size: 2.6rem; font-weight: var(--font-weight-two-bold); box-sizing: border-box; width: 100%; padding-top: 5px; padding-bottom: 5px; padding-left: 1em; border-left: 4px solid var(--ghost-accent-color); } /* Alternative */ .post-content blockquote.kg-blockquote-alt { font-family: var(--font-family-one); font-size: 4.5rem; font-weight: var(--font-weight-one-bold); font-style: normal; line-height: 1.3; padding: 0; padding-top: 2vh; padding-bottom: 2vh; text-align: center; border: 0; } .post-content blockquote.kg-blockquote-alt::before { font-size: 200%; line-height: .4; display: block; content: '“'; color: var(--ghost-accent-color); } /* 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 { 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-size: 1.4rem; display: table; width: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse; text-align: left; background-color: transparent; } .post-content th { font-size: 1.6rem; color: var(--color-font-two); background-color: var(--color-three); } .post-content th, .post-content td { display: table-cell; padding: 10px 12px; } .post-content td { border-bottom: var(--border) var(--color-border-one); } .post-content th:first-child, .post-content td:first-child { padding-left: 10px; } .post-content th:last-child, .post-content td:last-child { padding-right: 10px; } /* 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: 5px; list-style: decimal; } .post-content .footnotes-sep { display: none; } .post-content .footnotes p, .post-content .footnote-item { font-size: 1.4rem; line-height: 1.3; margin-bottom: 10px; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content pre { min-width: 100%; } .post-content code { font-size: 85%; padding: 2px 5px; background-color: var(--color-one); } .post-content blockquote code { font-size: 75%; } .post-content blockquote code, .post-content p code { border-radius: 5px; } .post-content pre > code { display: block; padding: 20px 25px; white-space: pre-wrap; } /* Image & Video –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content img { position: relative; max-width: 100%; height: auto; } .post-content .kg-image-card { line-height: 0; } .post-content .kg-image-card.kg-width-wide img { width: 100%; } .post-content .kg-image-card.kg-width-wide img, .post-content .kg-image-card.kg-width-full img { max-width: initial; } .post-content .kg-video-card.kg-width-full, .post-content .kg-image-card.kg-width-full img { position: relative; right: 50%; left: 50%; width: calc(100vw - var(--margin-wrap-left-right) - var(--margin-wrap-left-right)); margin-left: calc(-50vw + var(--margin-wrap-left-right)); } /* Small image */ .post-content .kg-image-card:not(.kg-width-full):not(.kg-width-wide) { text-align: center; } /* Gallery –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-gallery-card .kg-gallery-image img { border-radius: 0; } .post-content .kg-gallery-card .kg-gallery-row:not(:first-of-type) { margin: 1.1vmin 0 0 0; } .post-content .kg-gallery-card .kg-gallery-image:not(:first-of-type) { margin: 0 0 0 1.1vmin; } /* Callouts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-callout-card .kg-callout-emoji { flex-shrink: 0; } /* Audio & File –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-file-card .kg-file-card-container { padding: 8px; } .post-content .kg-audio-card svg { fill: var(--color-three); } .post-content .kg-audio-card .kg-audio-playback-rate { color: var(--color-font-one); } .post-content .kg-audio-card .kg-audio-title, .post-content .kg-file-card .kg-file-card-title { font-size: 1.8rem; } /* Buttons & Products –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-button-card .kg-btn:hover, .post-content .kg-product-card .kg-product-card-button:hover { opacity: .8; } .kg-card.kg-product-card .kg-product-card-button { font-size: clamp(1.6rem, .3vw + 1.5rem, 2rem); } .kg-card.kg-product-card :is(.kg-product-card-container > div , .kg-product-card-container > div a) { color: var(--color-font-black); } /* NFT –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-nft-card a { text-decoration: none; } /* Headers –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-header-card { position: relative; right: 50%; left: 50%; width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(-50vw + var(--scrollbar-width, 0px) / 2); border-radius: 0; } .post-content .kg-header-card.kg-style-light { background-color: var(--color-eleven); } .post-content .kg-header-card.kg-style-dark { background-color: var(--color-three); } .post-content .kg-header-card.kg-style-dark .kg-header-card-header, .post-content .kg-header-card.kg-style-dark .kg-header-card-subheader { color: var(--color-font-two); } .post-content .kg-header-card.kg-style-image .kg-header-card-button, .post-content .kg-header-card.kg-style-accent:not(.kg-v2) .kg-header-card-button { color: var(--color-font-black); background-color: var(--color-white); } .post-content .kg-header-card.kg-style-dark .kg-header-card-button { color: var(--color-font-one); background-color: var(--color-six); } .post-content .kg-header-card .kg-header-card-header, .post-content .kg-header-card .kg-header-card-header strong { font-weight: var(--font-weight-one-bold); } .post-content .kg-header-card h2 + .kg-header-card-subheader { margin-top: 2.5vh; } .post-content .kg-header-card .kg-header-card-subheader { margin-top: 1vh; margin-bottom: 1vh; opacity: .8; } /* Bookmarks –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-bookmark-card .kg-bookmark-title { font-size: 1.6rem; line-height: 1.3; } .post-content .kg-bookmark-card .kg-bookmark-metadata >:not(img) { opacity: 1; } .post-content .kg-bookmark-card .kg-bookmark-icon { border-radius: 0; } .post-content .kg-bookmark-card .kg-bookmark-thumbnail { min-width: 24%; margin: 10px; } /* Normalize 'Cards' –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .kg-button-card .kg-btn, .post-content .kg-audio-card .kg-audio-title, .post-content .kg-file-card .kg-file-card-title, .post-content .kg-toggle-card .kg-toggle-heading-text, .post-content .kg-product-card .kg-product-card-title, .post-content .kg-product-card .kg-product-card-button, .post-content .kg-product-card .kg-product-card-description p, .post-content .kg-product-card .kg-product-card-description ol, .post-content .kg-product-card .kg-product-card-description ul, .post-content .kg-header-card .kg-header-card-subheader, .post-content .kg-header-card .kg-header-card-button, .post-content .kg-bookmark-card .kg-bookmark-title, .post-content .kg-bookmark-card .kg-bookmark-description, .post-content .kg-bookmark-card .kg-bookmark-metadata >:not(img), .post-content .kg-cta-card .kg-cta-button { font-family: var(--font-family-three); } .post-content .kg-product-card .kg-product-card-description p, .post-content .kg-product-card .kg-product-card-description ol, .post-content .kg-product-card .kg-product-card-description ul, .post-content .kg-header-card .kg-header-card-subheader, .post-content .kg-bookmark-card .kg-bookmark-description { font-weight: var(--font-weight-three-regular); } .post-content .kg-button-card .kg-btn, .post-content .kg-product-card .kg-product-card-button, .post-content .kg-header-card .kg-header-card-button, .post-content .kg-bookmark-card .kg-bookmark-metadata >:not(img), .post-content .kg-cta-card .kg-cta-button { font-weight: var(--font-weight-three-medium); } .post-content .kg-audio-card .kg-audio-title, .post-content .kg-file-card .kg-file-card-title, .post-content .kg-toggle-card .kg-toggle-heading-text, .post-content .kg-product-card .kg-product-card-title, .post-content .kg-bookmark-card .kg-bookmark-title { font-weight: var(--font-weight-three-bold); } .post-content .kg-button-card .kg-btn, .post-content .kg-product-card .kg-product-card-button, .post-content .kg-header-card .kg-header-card-button, .post-content .kg-cta-card .kg-cta-button { transition: opacity .2s ease; border-radius: 100px; } .post-content .kg-button-card .kg-btn, .post-content .kg-callout-card .kg-callout-card-accent, .post-content .kg-product-card .kg-product-card-button, .post-content .kg-header-card.kg-style-accent:not(.kg-v2) .kg-header-card-header, .post-content .kg-header-card.kg-style-accent:not(.kg-v2) .kg-header-card-subheader, .post-content .kg-header-card.kg-style-image .kg-header-card-header, .post-content .kg-header-card.kg-style-image .kg-header-card-subheader, .post-content .kg-header-card.kg-style-light .kg-header-card-button { color: var(--color-white); } .post-content .kg-file-card .kg-file-card-caption, .post-content .kg-bookmark-card .kg-bookmark-description { font-size: 1.4rem; margin-top: 8px; } .post-content .kg-toggle-card, .post-content .kg-product-card .kg-product-card-container, .post-content .kg-bookmark-card .kg-bookmark-content { padding: 16px; } .post-content .kg-file-card .kg-file-card-container, .post-content .kg-toggle-card, .post-content .kg-bookmark-card .kg-bookmark-container, .post-content .kg-bookmark-card .kg-bookmark-container:hover { transition: border-color .15s ease; } .post-content .kg-audio-card, .post-content .kg-file-card .kg-file-card-container, .post-content .kg-toggle-card, .post-content .kg-product-card .kg-product-card-container, .post-content .kg-nft-card .kg-nft-card-container, .post-content .kg-bookmark-card .kg-bookmark-container, .post-content .kg-bookmark-card .kg-bookmark-container:hover { border: var(--border) var(--color-border-one); box-shadow: none; } .post-content .kg-file-card .kg-file-card-container:hover, .post-content .kg-bookmark-card .kg-bookmark-container:hover { border-color: var(--color-border-three); } .post-content img, .post-content code, .post-content .kg-callout-card, .post-content .kg-audio-card, .post-content .kg-file-card .kg-file-card-container, .post-content .kg-toggle-card, .post-content .kg-product-card .kg-product-card-container, .post-content .kg-nft-card .kg-nft-card-container, .post-content .kg-bookmark-card .kg-bookmark-container, .post-content .kg-bookmark-card .kg-bookmark-container:hover, .post-content .kg-cta-card { border-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-gallery-card .kg-gallery-row:first-of-type .kg-gallery-image:first-of-type img { border-top-left-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-gallery-card .kg-gallery-row:first-of-type .kg-gallery-image:last-of-type img { border-top-right-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-gallery-card .kg-gallery-row:last-of-type .kg-gallery-image:first-of-type img { border-bottom-left-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-gallery-card .kg-gallery-row:last-of-type .kg-gallery-image:last-of-type img { border-bottom-right-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-audio-card .kg-audio-thumbnail, .post-content .kg-file-card .kg-file-card-icon::before, .post-content .kg-product-card img, .post-content .kg-nft-card .kg-nft-image, .post-content .kg-bookmark-card .kg-bookmark-thumbnail img { border-radius: calc(var(--border-radius) / 3); } /* Dark mode */ .kg-card.kg-bookmark-card :is(.kg-bookmark-container, .kg-bookmark-container a, .kg-bookmark-container:hover), .kg-card.kg-audio-card, .kg-card.kg-file-card :is(.kg-file-card-container, .kg-file-card-container:hover) { color: var(--color-font-one); background-color: var(--color-body); } /* Figcaption –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content figcaption { font-size: 1.1rem; line-height: 1.2; display: block; width: 100%; margin-top: 10px; text-align: center; } /* CTA –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content .members-cta { position: relative; z-index: 1; box-sizing: border-box; margin-bottom: 10vh; padding: 6vh 3vw; text-align: center; background-color: var(--color-ten); box-shadow: 0 5px 80px -10px rgba(0, 0, 0, .3); } .post-content .members-cta h2 { font-size: 5.2rem; line-height: 1.2; margin: 0 auto 3vh; } .post-content .members-cta p { line-height: 1.5; max-width: 520px; margin: 3vh auto 4vh; } .post-content .members-cta small { margin-top: 4vh; } .post-content .members-cta-teaser { position: relative; } .post-content .members-cta-teaser::after { position: absolute; z-index: 1; right: 50%; bottom: 0; left: 50%; width: calc(100vw - 40px); height: 100%; max-height: 300px; margin-left: calc(-50vw + 20px); content: ''; pointer-events: none; opacity: 1; background-color: var(--color-body); -webkit-mask-image: linear-gradient(to bottom,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(to bottom,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); } /* Beta editor –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-content:first-child, .post-content:first-child .kg-width-full:first-child, .post-content .kg-width-full + .kg-width-full { margin-top: 0; } .post-content:first-child, .post-content:first-child .kg-width-full:first-child, .post-content .kg-width-full:not(.kg-width-full.kg-card-hascaption) { margin-bottom: 0; } .post-content .kg-width-full:not(.kg-width-full.kg-card-hascaption) +:not(.kg-width-full) { margin-top: 5vh !important; } /* Signup card & Header card 'v2' */ .post-content .kg-signup-card.kg-width-full, .post-content .kg-header-card.kg-v2.kg-width-full { position: relative; right: 50%; left: 50%; width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(-50vw + var(--scrollbar-width, 0px) / 2); } .post-content .kg-signup-card.kg-width-regular, .post-content .kg-signup-card.kg-width-wide, .post-content .kg-header-card.kg-v2.kg-width-regular, .post-content .kg-header-card.kg-v2.kg-width-wide { position: relative; right: 0; left: 0; overflow: hidden; width: 100%; margin-left: 0; border-radius: calc(var(--border-radius) / 1.5); } .post-content .kg-signup-card.kg-width-full.kg-content-wide, .post-content .kg-header-card.kg-v2.kg-width-full.kg-content-wide { padding-right: var(--margin-wrap-left-right); padding-left: var(--margin-wrap-left-right); } .post-content .kg-signup-card.kg-width-full.kg-content-wide .kg-signup-card-content, .post-content .kg-header-card.kg-v2.kg-width-full.kg-content-wide .kg-header-card-content { max-width: 100%; margin-right: auto; margin-left: auto; } .post-content .kg-signup-card.kg-width-full .kg-signup-card-image, .post-content .kg-header-card.kg-v2.kg-width-full .kg-header-card-image { width: 100%; border-radius: 0; } .post-content .kg-header-card.kg-v2.kg-layout-split { display: -webkit-box; } .post-content div.kg-signup-card h2, .post-content div.kg-header-card.kg-v2 h2 { font-family: var(--font-family-one); font-weight: var(--font-weight-one-bold); } .post-content .kg-signup-card h3.kg-signup-card-subheading, .post-content .kg-header-card.kg-v2 h3.kg-header-card-subheading, .post-content div.kg-signup-card .kg-signup-card-success { font-family: var(--font-family-two); font-weight: var(--font-weight-two-regular); line-height: 1.2; } .post-content div.kg-signup-card .kg-signup-card-success { font-size: clamp(1.05em, 2vw, 2.4rem); } .post-content .kg-signup-card h2+h3.kg-signup-card-subheading, .post-content .kg-header-card.kg-v2 h2+h3.kg-header-card-subheading { margin: 1em 0 0; } .post-content .kg-signup-card .kg-signup-card-fields { padding: .3em; border: none; border-radius: 100px; } .post-content .kg-signup-card .kg-signup-card-fields, .post-content .kg-signup-card-input { background-color: var(--color-body); } .post-content div.kg-signup-card .kg-signup-card-button, .post-content .kg-header-card.kg-v2 .kg-header-card-button { font-family: var(--font-family-three); font-weight: var(--font-weight-three-medium); padding: 1.3em 1.8em; cursor: pointer; } .post-content div.kg-signup-card .kg-signup-card-button, .post-content div.kg-signup-card .kg-signup-card-input, .post-content div.kg-header-card.kg-v2 .kg-header-card-button { font-size: 1.8rem; border-radius: 100px; } .post-content .kg-signup-card-input { line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .post-content .kg-signup-card-input::-moz-placeholder { opacity: .6; } .post-content .kg-signup-card-input::placeholder { opacity: .6; } .post-content div.kg-signup-card .kg-signup-card-disclaimer, .post-content div.kg-signup-card .kg-signup-card-error { font-size: 1.2rem; margin: 1vh 0 0; } /* RWD — Beta editor */ @media (max-width:1480px) and (min-width:1025px) { .post-content .kg-signup-card.kg-width-wide, .post-content .kg-header-card.kg-v2.kg-width-wide { width: calc(100% + 50px + 50px); margin-left: -50px; } } @media (max-width:480px) { .post-content div.kg-signup-card .kg-signup-card-button, .post-content div.kg-signup-card .kg-signup-card-input, .post-content div.kg-header-card.kg-v2 .kg-header-card-button { font-size: 1.6rem; } } @media (min-width:1481px) { .post-content .kg-signup-card.kg-width-wide, .post-content .kg-header-card.kg-v2.kg-width-wide { width: calc(100% + 70px + 70px); margin-left: -70px; } } @media (min-width:1921px) { .post-content .kg-signup-card.kg-width-full, .post-content .kg-header-card.kg-v2.kg-width-full { border-radius: 0; } } /* RWD — Post - Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (min-width:1921px) { .post-content .kg-header-card, .post-content .kg-video-card.kg-width-full, .post-content .kg-image-card.kg-width-full img { width: var(--max-width-global-wrap); margin-left: calc(0px - var(--max-width-global-wrap) / 2); } .post-content .kg-header-card { border-radius: calc(var(--border-radius)/1.5) } } @media (min-width:1481px) { .post-content .kg-video-card.kg-width-wide, .post-content .kg-image-card.kg-width-wide img, .post-content .kg-gallery-card .kg-gallery-container { width: calc(100% + 70px + 70px); margin-left: -70px; } } @media (max-width:1480px) and (min-width:1025px) { .post-content .kg-video-card.kg-width-wide, .post-content .kg-image-card.kg-width-wide img, .post-content .kg-gallery-card .kg-gallery-container { width: calc(100% + 50px + 50px); margin-left: -50px; } } @media (max-width:1024px) { .post-content { font-size: 1.8rem; max-width: 600px; } .post-content .kg-header-card, .post-content .kg-video-card.kg-width-full, .post-content .kg-image-card.kg-width-full img { width: 100vw; margin-left: -50vw; border-radius: 0; } .post-content blockquote.kg-blockquote-alt { font-size: 3.8rem; } .post-content .members-cta h2 { font-size: 4.2rem; } } @media (max-width:768px) { .post-content { max-width: 100%; } .post-content p { line-height: 1.5; } .post-content h1 { font-size: 4.8rem; } .post-content h2 { font-size: 3.8rem; } .post-content h3 { font-size: 3rem; } .post-content h4 { font-size: 2.2rem; } .post-content h5 { font-size: 1.9rem; } .post-content p, .post-content iframe, .post-content ol, .post-content ul, .post-content table { margin-bottom: 20px; } .post-content hr, .post-content blockquote, .post-content .kg-card.kg-header-card { margin-top: 35px; margin-bottom: 35px; } .post-content pre, .post-content .kg-card { margin-top: 30px; margin-bottom: 30px; } .post-content .kg-card:not(.kg-width-full):not(.kg-image-card):not(.kg-gallery-card):not(.kg-embed-card) + .kg-card { margin-top: -15px; } .post-content .members-cta { padding-top: 4vh; padding-bottom: 4vh; } .post-content .members-cta h2 { font-size: 3.4rem; } } @media (max-width:480px) { .post-content { font-size: 1.6rem; margin-bottom: 6vh; } .post-content h1, .post-content h2, .post-content h3 { margin-bottom: 10px; } .post-content h1 { font-size: 3.4rem; } .post-content h2 { font-size: 2.9rem; } .post-content h3 { font-size: 2.4rem; } .post-content h4 { font-size: 2rem; } .post-content h5 { font-size: 1.8rem; } .post-content blockquote { font-size: 2rem; border-width: 3px; } .post-content blockquote.kg-blockquote-alt { font-size: 3rem; } .post-content img, .post-content code, .post-content .kg-callout-card, .post-content .kg-audio-card, .post-content .kg-file-card .kg-file-card-container, .post-content .kg-toggle-card, .post-content .kg-product-card .kg-product-card-container, .post-content .kg-nft-card .kg-nft-card-container, .post-content .kg-bookmark-card .kg-bookmark-container, .post-content .kg-bookmark-card .kg-bookmark-container:hover, .post-content .kg-cta-card { border-radius: calc(var(--border-radius) / 2); } .post-content .kg-gallery-card .kg-gallery-row:first-of-type .kg-gallery-image:first-of-type img { border-top-left-radius: calc(var(--border-radius) / 2); } .post-content .kg-gallery-card .kg-gallery-row:first-of-type .kg-gallery-image:last-of-type img { border-top-right-radius: calc(var(--border-radius) / 2); } .post-content .kg-gallery-card .kg-gallery-row:last-of-type .kg-gallery-image:first-of-type img { border-bottom-left-radius: calc(var(--border-radius) / 2); } .post-content .kg-gallery-card .kg-gallery-row:last-of-type .kg-gallery-image:last-of-type img { border-bottom-right-radius: calc(var(--border-radius) / 2); } .post-content .kg-audio-card .kg-audio-thumbnail, .post-content .kg-file-card .kg-file-card-icon::before, .post-content .kg-product-card img, .post-content .kg-nft-card .kg-nft-image, .post-content .kg-bookmark-card .kg-bookmark-thumbnail img { border-radius: calc(var(--border-radius) / 4); } .post-content .members-cta-teaser::after { width: 100vw; margin-left: -50vw; } } @media (max-width:320px) { .post-content .kg-bookmark-card .kg-bookmark-container { flex-direction: column; } .post-content .kg-bookmark-card .kg-bookmark-content { order: 2; } .post-content .kg-bookmark-card .kg-bookmark-thumbnail { order: 1; min-height: 140px; margin-bottom: 0; } .post-content .members-cta h2 { font-size: 3.2rem; } } /* -------------------------------------------------------------------------- 11.Post — Share -------------------------------------------------------------------------- */ .post-share-section { width: 100%; padding-top: 30px; } .post-share-section > small { font-family: var(--font-family-three); font-size: 1.4rem; font-weight: var(--font-weight-three-medium); line-height: 1; display: inline-block; margin-bottom: 1.2vh; } .post-share-wrap { position: relative; display: inline-flex; width: 100%; } .post-share-wrap a { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; transition: background-color .15s ease; background-color: var(--color-one); } .post-share-wrap a:hover { background-color: var(--color-two); } .post-share-wrap a:first-of-type { border-radius: calc(var(--border-radius) / 1.5) 0 0 calc(var(--border-radius) / 1.5); } .post-share-wrap a:last-of-type { border-radius: 0 calc(var(--border-radius) / 1.5) calc(var(--border-radius) / 1.5) 0; } .post-share-wrap svg { width: 20px; height: 20px; transition: fill .15s ease; fill: var(--color-font-one); } /* Copy link –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .post-share-wrap + input { display: block; cursor: default; opacity: 0; color: transparent; } .post-share-link { cursor: pointer; } .post-share-link svg { width: 24px; height: 24px; } .post-share-link + small { position: absolute; bottom: -40px; left: 0; display: inline-block; 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:480px) { .post-share-wrap a { width: 60px; height: 60px; } .post-share-wrap a:first-of-type { border-radius: calc(var(--border-radius) / 2) 0 0 calc(var(--border-radius) / 2); } .post-share-wrap a:last-of-type { border-radius: 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0; } .post-share-wrap svg { width: 18px; height: 18px; } } /* -------------------------------------------------------------------------- 12.Post — Navigation -------------------------------------------------------------------------- */ .navigation-wrap { flex-wrap: wrap; padding: 4vh 0; border-top: var(--border) var(--color-border-one); } .navigation-wrap, .navigation-wrap a { display: flex; } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .navigation-content { line-height: 0; display: inline-block; width: 100%; padding: 1vh 0; } .navigation-wrap a { flex: 0 0 50%; box-sizing: border-box; max-width: 640px; min-height: 160px; pointer-events: none; } .navigation-wrap a:first-child:last-child { flex-grow: 1; } .navigation-next { padding-right: 2vw; } .navigation-prev { margin-left: auto; padding-left: 2vw; text-align: right; } /* Label –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .navigation-wrap small { font-family: var(--font-family-three); font-size: 1.4rem; font-weight: var(--font-weight-three-medium); line-height: 1; display: inline-block; margin: 2vh 0 1vh; } .navigation-next small { padding-right: .6vw; } .navigation-prev small { padding-left: .6vw; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .navigation-wrap h3 { font-family: var(--font-family-two); font-size: 2.8rem; font-weight: var(--font-weight-two-bold); display: inline; margin: 5px 0; pointer-events: auto; } .navigation-wrap h3:hover { text-decoration: underline; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .navigation-image { line-height: 0; position: relative; flex: 0 0 auto; width: 160px; height: 160px; transition: transform .3s ease; pointer-events: auto; } .navigation-image:hover { transform: translateY(-3px); } .navigation-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .navigation-next .navigation-image { margin-right: 1.8vw; } .navigation-prev .navigation-image { margin-left: 1.8vw; } /* RWD — Post — Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1280px) { .navigation-wrap small { margin-top: 1.5vh; } .navigation-wrap h3 { font-size: 2.4rem; } .navigation-image { width: 140px; height: 140px; } } @media (max-width:1024px) { .navigation-wrap a { min-height: 100px; } .navigation-wrap small { margin-top: 0; } .navigation-wrap h3 { font-size: 2.2rem; } .navigation-image { width: 100px; height: 100px; } .navigation-next .navigation-image { margin-right: 2.4vw; } .navigation-prev .navigation-image { margin-left: 2.4vw; } } @media (max-width:768px) { .navigation-wrap a { flex-basis: 100%; } .navigation-wrap a + a { margin-top: 4vh; } } @media (max-width:480px) { .navigation-wrap a { min-height: 80px; } .navigation-wrap small { font-size: 1.2rem; } .navigation-wrap h3 { font-size: 1.8rem; } .navigation-image { width: 80px; height: 80px; } } /* -------------------------------------------------------------------------- 13.Post — Comments -------------------------------------------------------------------------- */ .comments-section { min-height: 8vh; } .comments-wrap { border-top: var(--border) var(--color-border-one); } .comments-content { max-width: var(--max-width-post-wrap); margin-right: auto; margin-left: auto; } .comments-content > div:first-of-type { padding-top: 8vh; } .comments-content > div:last-of-type { padding-bottom: 12vh; } /* Header */ .comments-header > span { display: flex; align-items: center; box-sizing: border-box; margin-top: 4vh; margin-bottom: 4vh; padding: 2vh 1.5vw; border-radius: calc(var(--border-radius) / 1.5); background-color: var(--color-fourteen); } .comments-header h3 { font-weight: var(--font-weight-three-bold); flex: 1 0 60%; } .comments-header h3, .comments-header > span > span { font-family: var(--font-family-three); display: block; margin: 0; } .comments-header > span > span { font-weight: var(--font-weight-three-regular); flex: 1 0 40%; text-align: right; opacity: var(--opacity-one); } /* RWD — Post — Comments –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1024px) { .comments-content { max-width: 600px; } } @media (max-width:768px) { .comments-section { min-height: 6vh; } .comments-content { max-width: 100%; } .comments-content > div:first-of-type { padding-top: 4vh; } .comments-content > div:last-of-type { padding-bottom: 8vh; } } @media (max-width:480px) { .comments-header > span { padding: 10px; border-radius: calc(var(--border-radius) / 2); } } /* -------------------------------------------------------------------------- 14.Author & Tag page -------------------------------------------------------------------------- */ .archive-section { padding: 4vh 0 11vh; text-align: center; color: var(--color-font-one); background-color: var(--color-body-partial); } .archive-section.is-image { padding-top: 0; } .archive-social, .archive-excerpt { margin: 3vh auto 0; } .archive-title, .archive-excerpt { box-sizing: border-box; padding: 0 var(--margin-wrap-left-right); } .archive-image img, .archive-title span { background-color: var(--color-one); } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-image { width: 180px; height: 180px; margin: 0 auto 20px; } .archive-image img { box-sizing: border-box; padding: 10px; border-radius: 100%; } /* Title & Counter –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-title { position: relative; display: inline-block; margin-bottom: .5vh; } .archive-title.is-tag { transform: translateX(-5px); } .archive-title.is-tag span { font-family: var(--font-family-three); font-size: 1.8rem; font-weight: var(--font-weight-three-bold); position: absolute; margin-left: 6px; padding: 5px 10px 4px; border-radius: 100px; } /* Excerpt –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-excerpt { max-width: 880px; } /* Author social –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .archive-social { display: inline-flex; flex-wrap: wrap; justify-content: center; } .archive-social a, .archive-social span { font-size: 1.8rem; display: flex; align-items: center; margin: 0 20px 8px; } .archive-social a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .archive-social svg { width: 18px; height: 18px; margin-right: 8px; fill: var(--color-font-one); } /* RWD — Author & Tag page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1280px) { .archive-title.is-tag span { font-size: 1.4rem; padding: 3px 8px 4px; } } @media (max-width:1024px) { .archive-section { padding-top: 3vh; } .archive-image { width: 160px; height: 160px; } .archive-social a, .archive-social span { font-size: 1.6rem; } .archive-excerpt { max-width: 720px; } } @media (max-width:480px) { .archive-section { padding-bottom: 8vh; } .archive-image { width: 140px; height: 140px; } .archive-social { align-items: center; flex-direction: column; } .archive-social a, .archive-social span { font-size: 1.4rem; } .archive-social svg { width: 16px; height: 16px; margin-right: 6px; } } /* -------------------------------------------------------------------------- 15.Footer -------------------------------------------------------------------------- */ .footer-section { width: 100%; color: var(--color-font-one); background-color: var(--color-body-partial); } .footer-wrap { margin-bottom: 3vh; } .footer-container { padding-top: 8vh; border-top: var(--border) var(--color-border-one); } .footer-nav, .footer-container, .footer-subscribe { display: flex; flex-wrap: wrap; } .footer-nav a:hover, .footer-copyright a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .footer-subscribe h3 span, .footer-logo .is-title { font-weight: var(--font-weight-one-bold); } /* Subscribe –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-subscribe { align-items: center; margin: 5vh 0; } .footer-subscribe h3 { font-weight: var(--font-weight-one-light); line-height: 1.1; flex: 1 0 50%; box-sizing: border-box; max-width: 1100px; margin: 5vh auto 0 0; padding-right: 30px; letter-spacing: var(--letter-spacing, normal); } .footer-subscribe h3 + div { margin-top: 5vh; justify-self: flex-end; } .footer-subscribe h3 + div > div { align-items: initial; flex-direction: column; } .footer-subscribe form { margin-top: 1.4vh; margin-right: 0; } /* Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-content { overflow: hidden; flex: 99 0 380px; } .footer-content, .footer-logo { margin-bottom: 3vh; } .footer-logo img { width: auto; height: var(--height-logo-footer); } .footer-logo .is-title { font-family: var(--font-family-one); font-size: 3.6rem; line-height: 1; display: inline-block; max-width: 400px; } /* Description –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-description { font-size: 2rem; font-weight: var(--font-weight-three-medium); line-height: 1.4; max-width: 400px; margin: 0 0 3vh; } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-nav, .footer-nav-column { flex-grow: 1; } .footer-nav-column { width: 170px; margin-bottom: 3vh; padding-right: 2vw; } .footer-nav-column ul { margin: 0; padding: 0; } .footer-nav-column small { font-size: 1.8rem; font-weight: var(--font-weight-three-bold); line-height: 1.2; display: block; margin: 0 0 2.5vh; } .footer-nav-column li { font-size: 1.7rem; font-weight: var(--font-weight-three-medium); margin-bottom: 1.2vh; list-style: none; } .footer-nav-column li svg { width: 17px; height: 17px; margin-right: 10px; transform: translateY(3px); fill: var(--color-font-one); } /* Copyright –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .footer-copyright { font-size: 1.4rem; width: 100%; margin-top: 6vh; } /* RWD — Footer –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1480px) { .footer-container { padding-top: 5vh; } .footer-subscribe { margin-top: 0; } } @media (max-width:1024px) { .footer-subscribe { margin-bottom: 3vh; } .footer-subscribe h3 { flex-basis: 100%; padding-right: 0; } .footer-subscribe h3 + div { margin-top: 1vh; } } @media (max-width:768px) { .footer-description { font-size: 2rem; max-width: 500px; } .footer-nav-column { width: 135px; } .footer-nav-column li { font-size: 1.5rem; } .footer-nav-column li svg { width: 16px; height: 16px; margin-right: 8px; transform: translateY(3px); } } @media (max-width:480px) { .footer-logo .is-title { font-size: 3rem; } .footer-logo img { height: var(--height-logo-mobile-footer); } .footer-content { flex-basis: 230px; } .footer-subscribe h3 + div { margin-top: 2vh; } .footer-nav-column small { margin-bottom: 2vh; } } @media (min-width:769px) { .footer-content { box-sizing: border-box; padding-right: 6vw; } .footer-nav-column:last-child { padding-right: 0; } } /* -------------------------------------------------------------------------- 16.Custom — Pages -------------------------------------------------------------------------- */ .custom-page { height: 100vh; } .custom-wrap { min-height: 100%; color: var(--color-font-one); background-color: var(--color-body-partial); } .custom-container { flex-direction: column; flex-grow: 1; } .custom-content { align-items: center; flex: 1 0 auto; margin: 0 auto 10vh; } .custom-wrap, .custom-container, .custom-content, .custom-logo-wrap { display: flex; } .custom-content, .custom-logo { width: 100%; max-width: 480px; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-image { width: 22%; } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-logo-wrap { align-items: center; min-height: 90px; } .custom-logo { line-height: 0; margin: 6vh auto 0; } .custom-logo img { width: auto; height: var(--height-logo-header); } .custom-logo .is-title { font-family: var(--font-family-one); font-size: 4rem; font-weight: var(--font-weight-one-bold); line-height: 1; max-width: 400px; } /* Title –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-title { line-height: 1.1; margin-bottom: 5vh; } /* Form –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-content form { width: 100%; } .custom-content input { font-size: 2rem; padding: 18px; word-break: break-all; border-radius: 100px; } .custom-content input::-moz-placeholder { opacity: .6 } .custom-content input::placeholder { opacity: .6 } .custom-content input, .custom-content textarea { display: block; box-sizing: border-box; width: 100%; max-width: 410px; margin-bottom: 15px; transition: background-color .2s ease; background-color: var(--color-one); } .custom-content input:hover, .custom-content input:focus, .custom-content textarea:hover, .custom-content textarea:focus { background-color: var(--color-two); } .custom-content input:last-of-type { margin-bottom: 2vh; } .custom-content label { font-size: 1.4rem; display: block; margin-bottom: 5px; opacity: var(--opacity-one); } .custom-content textarea { font-size: 1.6rem; min-height: 120px; padding: 16px; resize: vertical; border-radius: calc(var(--border-radius) / 1.5); } .custom-content button { margin-top: 2vh; } /* Alerts –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .custom-alert-title { font-size: 6.8rem; margin: 0; } .custom-content .alert-loading, .custom-content .alert-error { margin-top: 3vh; } .custom-content form.loading .alert-loading, .custom-content form.success + .alert-success, .custom-content form.error .alert-error { display: inline-block; } /* Success */ .custom-content form.success, .custom-content form + .alert-success { display: none; } .custom-content form.success + .alert-success { width: 100%; } .custom-content .alert-success p { font-size: 2.5rem; margin-bottom: 4vh; } /* RWD — Custom pages –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1024px) { .custom-wrap { padding-right: var(--margin-wrap-left-right); padding-left: var(--margin-wrap-left-right); } .custom-image { display: none; } .custom-alert-title { font-size: 5.8rem; } } @media (max-width:480px) { .custom-logo { margin-top: 10px; margin-bottom: 10px; } .custom-logo .is-logo img { height: var(--height-logo-mobile-header); } .custom-logo .is-title { font-size: 3rem; } .custom-content input { font-size: 1.6rem; padding: 16px; } .custom-content .alert-success p { font-size: 2.2rem; } } @media (max-width:320px) { .custom-alert-title { font-size: 4.8rem; } } @media (min-width:481px) { .custom-title { font-size: 4.5rem; } } @media (min-width:1025px) { .custom-content button { padding: 16px 30px; } } /* -------------------------------------------------------------------------- 17.Custom — Error page -------------------------------------------------------------------------- */ .custom-error { text-align: center; color: var(--color-font-one); background-color: var(--color-body-partial); } .custom-error + .loop-section .item:nth-child(4) { display: none; } .custom-error-content { flex-direction: column; margin-top: 3vh; margin-bottom: 10vh; } .custom-error h1 { font-family: var(--font-family-two); font-size: 20rem; font-weight: var(--font-weight-two-bold); line-height: 1; margin: 0; } .custom-error p { box-sizing: border-box; margin-top: 2vh; margin-bottom: 4vh; padding: 0 20px; } /* RWD — Error page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1024px) { .custom-error + .loop-section .item:nth-child(4) { display: inline-block; } } @media (max-width:768px) { .custom-error h1 { font-size: 16rem; } } @media (max-width:480px) { .custom-error h1 { font-size: 12rem; } } /* -------------------------------------------------------------------------- 18.Custom — Membership page -------------------------------------------------------------------------- */ .membership-section { margin-bottom: 7vh; padding-bottom: 10vh; } .membership-wrap { padding: 8vh 4vw; background-color: var(--color-eleven); } .membership-switch[data-active-price="yearly"] + .membership-cards [data-monthly], .membership-switch[data-active-price="monthly"] + .membership-cards [data-yearly], .membership-switch[data-active-price-plans] { display: none; } .membership-switch[data-active-public-paid-tiers="false"] { display: none!important; } /* Switch –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-switch, .membership-switch::before, .membership-switch-button { border-radius: 100px; } .membership-switch, .membership-switch button { position: relative; } .membership-switch, .membership-switch[data-active-price-plans*="monthly"][data-active-price-plans*="yearly"] { display: flex; } .membership-switch { box-sizing: border-box; width: 100%; max-width: 350px; min-height: 56px; margin: 0 auto 4vh; padding: 6px; background-color: var(--color-body); } .membership-switch[data-active-price="monthly"]::before { transform: translateX(-100%); } .membership-switch::before { position: absolute; top: 6px; right: 6px; bottom: 6px; width: calc(50% - 6px); content: ""; transition: transform .15s ease-in-out; background-color: var(--color-thirteen); } .membership-switch button { font-size: 1.6rem; font-weight: var(--font-weight-three-medium); line-height: 1; width: 50%; padding: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--color-font-three); border: 0; outline: none; background-color: transparent; box-shadow: none; } /* Cards –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-cards, .membership-card { display: flex; flex-wrap: wrap; } .membership-cards { justify-content: center; -webkit-animation: slideTop .8s ease; animation: slideTop .8s ease; } .membership-cards, .membership-card-content { width: 100%; } .membership-card { overflow: hidden; flex: 1 0 calc(33.333% - var(--grid-gap) * 2); box-sizing: border-box; min-width: 280px; max-width: 450px; margin: var(--grid-gap); padding: 3vh 2vw 4vh 2vw; color: var(--color-font-three); border-radius: var(--border-radius); background-color: var(--color-body); } /* Label */ .membership-card-label { font-size: 1.8rem; font-weight: var(--font-weight-three-medium); line-height: 1; display: inline-block; margin-bottom: 3vh; padding: 6px 14px; border-radius: 100px; background-color: var(--color-eight); } /* Price */ .membership-card-price { font-size: 7.8rem; line-height: 1; margin: 0; } .membership-card-price span { font-family: var(--font-family-three); font-size: 2rem; font-weight: var(--font-weight-three-regular); } /* Description */ .membership-card-content p { font-size: 2.4rem; font-weight: var(--font-weight-three-medium); max-width: 500px; margin-top: 3vh; margin-bottom: 0; } /* List */ .membership-card-list ul { margin: 3vh 0 0; padding: 3vh 0 0; border-top: var(--border) var(--color-border-two); } .membership-card-list li { font-size: 2rem; margin: 0 0 16px; list-style: none; } .membership-card-list li::before { font-family: var(--font-family-system); font-size: 2rem; font-weight: bold; margin-right: 7px; content: "✓"; transform: translateY(-3px); } /* Button */ .membership-button { align-self: flex-end; width: 100%; margin: 6vh 0 0; } .membership-button { color: var(--color-font-six); background-color: var(--color-seven); } /* Question –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .membership-wrap + small { margin-top: 2vh; text-align: center; } /* FAQs –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .faq-section { margin-top: -3vh; margin-bottom: 20vh; } .faq-title { font-size: 6.6rem; margin: 0 0 4vh; text-align: center; } .faq-content { max-width: 820px; margin: 0 auto; } .faq-content .kg-toggle-card { padding: 0; border-top: 0; border-bottom: var(--border) var(--color-border-one); border-radius: 0; box-shadow: none; } .faq-content .kg-toggle-card:first-of-type { border-top: var(--border) var(--color-border-one); } .faq-content .kg-toggle-card, .faq-content .kg-toggle-card + .kg-toggle-card { margin-top: 0; } .faq-content .kg-toggle-card .kg-toggle-heading { position: relative; padding: 3.2vh 12vw 3.2vh 0; } .faq-content .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-family-three); font-size: 2.6rem; font-weight: var(--font-weight-three-medium); line-height: 1.3; } .faq-content .kg-toggle-card .kg-toggle-card-icon { position: absolute; top: calc(50% - 10px); right: 10px; margin: 0; padding: 0; cursor: pointer; } .faq-content .kg-toggle-card .kg-toggle-card-icon, .faq-content .kg-toggle-card .kg-toggle-card-icon svg { width: 20px; height: 20px; color: var(--color-three); } .faq-content [data-kg-toggle-state="open"] .kg-toggle-card-icon { transform: rotate(0); } .faq-content .kg-toggle-card .kg-toggle-content p { font-size: 2rem; box-sizing: initial; max-width: 700px; margin-bottom: 5vh; padding: 0 4vw 0 0; } /* RWD — Membership page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:1480px) { .membership-section { padding-bottom: 12vh; } .membership-wrap { padding: 3vh; } .membership-switch { margin-top: 4vh; } .membership-card { margin: calc(var(--grid-gap) / 2); border-radius: calc(var(--border-radius) / 2); } .membership-card-label { font-size: 1.6rem; margin-bottom: 20px; padding-right: 12px; padding-left: 12px; } .membership-card-price { font-size: 7.2rem; } .membership-card-content p { font-size: 2.2rem; } .membership-card-content p, .membership-card-list ul { margin-top: 20px; } .membership-card-list ul { padding-top: 20px; } .membership-card-list li, .membership-card-price span { font-size: 1.8rem; } .membership-card-list li { margin-bottom: 10px; } .membership-card-list li::before { font-size: 1.6rem; margin-right: 6px; transform: translateY(-2px); } } @media (max-width:1280px) { .membership-card-price { font-size: 6.6rem; } } @media (max-width:1024px) { .membership-section { padding-bottom: 5vh; } .membership-card { max-width: calc(100% - var(--grid-gap)); } .faq-section { margin-bottom: 18vh; } } @media (max-width:768px) { .membership-switch { max-width: 300px; min-height: 50px; } .membership-switch button { font-size: 1.4rem; } .membership-card { padding: 30px 20px; border-radius: calc(var(--border-radius) / 3); } .membership-card-price, .faq-title { font-size: 4.8rem; } .faq-section { margin-bottom: 12vh; } .faq-content .kg-toggle-card .kg-toggle-heading-text { font-size: 2rem; } .faq-content .kg-toggle-card .kg-toggle-card-icon { right: 0; } } @media (max-width:480px) { .membership-wrap { padding: calc(var(--grid-gap) / 2); } .membership-switch { max-width: 80%; } .membership-card { min-width: 220px; padding: 20px; border-radius: calc(var(--border-radius) / 4); } .membership-card-content p { font-size: 2rem; } .membership-card-list li, .membership-card-price span { font-size: 1.6rem; } .membership-card-list li::before { transform: translateY(-1px); } .faq-title { font-size: 4.2rem; } .faq-content .kg-toggle-card .kg-toggle-content p { font-size: 1.6rem; } } @media (max-width:320px) { .membership-card { padding: 12px; } .membership-card-content p { font-size: 1.8rem; } .faq-title { font-size: 3.8rem; } } /* -------------------------------------------------------------------------- 19.Custom — Account page -------------------------------------------------------------------------- */ .account-section + .membership-section { padding-bottom: 5vh; } /* Image –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-image { position: relative; } .account-image::before { top: 0; right: 0; bottom: 0; left: 0; content: ''; background-color: var(--color-one); } .account-image, .account-image::before { border-radius: 100%; } .account-image img { position: relative; z-index: 1; background-color: transparent; } .account-image::before, .account-image svg { position: absolute; z-index: 0; } .account-image svg { top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-15px, -15px); fill: var(--color-three); } /* Details –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-details { max-width: 600px; margin: 5vh auto 2vh; padding: 0 var(--margin-wrap-left-right); text-align: left; } .account-details + .account-details { margin-top: 20px; } .account-details-wrap, .account-detail-column > div { box-sizing: border-box; } .account-details-wrap { margin-bottom: 10px; background-color: var(--color-nine); } .account-details-content { display: flex; flex-wrap: wrap; padding: 20px 6%; } .account-detail-column { flex-basis: auto; min-width: 210px; padding-right: 35px; } .account-detail-column > div { padding: 12px 0; } .account-detail-column + small { margin-top: 12px; } .account-details-title { font-family: var(--font-family-three); font-size: 1.8rem; font-weight: var(--font-weight-three-bold); box-sizing: border-box; margin: 0; padding: 30px 6% 0; } .account-detail-heading { font-size: 1.4rem; line-height: 1; display: block; } .account-detail-content { font-size: 1.6rem; font-weight: var(--font-weight-three-medium); display: inline-block; margin-top: 10px; } /* Sign out button */ .account-signout-wrap { width: 100%; margin-top: 2vh; padding-top: 18px; text-align: right; border-top: var(--border) var(--color-border-one); } .account-signout { font-size: 2rem; padding: 12px 26px; } /* Expired */ .account-alert-expired { font-size: 1.2rem; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––––– */ .account-buttons { font-size: 1.2rem; position: relative; display: flex; flex-wrap: wrap; width: 100%; } .account-button { margin-right: 12px; } .account-button:hover { text-decoration: underline; } .account-button-billing span { display: inline-block; transition: transform .2s ease; } .account-button-billing:hover span { transform: translateX(3px); } .account-button + .cancel-error { position: absolute; bottom: -6vh; left: 50%; transform: translateX(-50%); } .account-button.error + .cancel-error { display: inline-table; color: var(--color-font-black); background-color: var(--color-alert-error); } /* RWD — Account page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:768px) { .account-header { padding-bottom: 5vh; } } @media (max-width:480px) { .account-section + .membership-section { padding-bottom: 3vh; } .account-details-title { font-size: 1.6rem; } .account-signout { font-size: 1.8rem; } } /* -------------------------------------------------------------------------- 20.Custom — Authors & Tags page -------------------------------------------------------------------------- */ .custom-archive { margin-bottom: 9vh; } .custom-archive .item-content { padding-right: .2vw; } .custom-archive .item-content small { font-size: 1.4rem; font-weight: var(--font-weight-three-medium); margin-top: .6vh; } .custom-archive .item-image { margin-bottom: .8vh; } .custom-archive .item-title a:hover { text-decoration: none; } .custom-archive .loop-wrap.is-tags .item { margin-bottom: 3vh; } .custom-archive .loop-wrap.is-tags .item-excerpt { -webkit-line-clamp: 3; } /* RWD — Authors & Tags page –––––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (min-width:1481px) { .custom-archive .loop-wrap { grid-template-columns: repeat(6, 1fr); } .custom-archive .loop-wrap.is-authors .item-excerpt { -webkit-line-clamp: 6; } } @media (max-width:1480px) and (min-width:1281px) { .custom-archive .loop-wrap { grid-template-columns: repeat(5, 1fr); } } @media (max-width:1280px) and (min-width:1025px) { .custom-archive .loop-wrap { grid-template-columns: repeat(4, 1fr); } } @media (max-width:1024px) and (min-width:769px) { .custom-archive .loop-wrap { grid-template-columns: repeat(3, 1fr); } } @media (max-width:480px) { .custom-archive { margin-bottom: 6vh; } .custom-archive .loop-wrap { grid-template-columns: repeat(2, 1fr); } .custom-archive .item-title { font-size: 2rem; } } @media (max-width:320px) { .custom-archive .loop-wrap { grid-template-columns: repeat(1, 1fr); } } @media (min-width:1025px) { .custom-archive .item-title { font-size: 2.6rem; } .custom-archive .item-excerpt { font-size: 1.6rem; } }