div.yyi-rinker-contents {
margin: 2em 0;
padding: 0;
border: solid 1px #dbdbdb;
background-color: #fff;
box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25);
position: relative;
overflow: visible;
}
div.yyi-rinker-contents a {
border: none;
}
div.yyi-rinker-contents div.yyi-rinker-box{
display: flex;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
box-sizing: border-box;
padding: 12px;
}
div.yyi-rinker-contents div.yyi-rinker-image {
padding: 0;
display: flex;
vertical-align: middle;
justify-content: center;
align-items: center;
}
.yyi-rinker-img-s .yyi-rinker-image {
width: 75px;
min-width: 75px;
}
.yyi-rinker-img-m .yyi-rinker-image {
width: 175px;
min-width: 175px;
}
.yyi-rinker-img-l div.yyi-rinker-image{
width: 200px;
min-width: 200px;
}
.yyi-rinker-images {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 5px;
}
div.yyi-rinker-image img.yyi-rinker-main-img.hidden {
display: none;
}
.yyi-rinker-images-arrow {
cursor: pointer;
position: absolute;
top: 50%;
display: block;
margin-top: -11px;
opacity: 0.6;
width: 22px;
}
.yyi-rinker-images-arrow-left{
left: -10px;
}
.yyi-rinker-images-arrow-right{
right: -10px;
}
.yyi-rinker-images-arrow-left.hidden {
display: none;
}
.yyi-rinker-images-arrow-right.hidden {
display: none;
} div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{
width: calc(100% - 75px);
}
div.yyi-rinker-contents div.yyi-rinker-info{
width: calc(100% - 175px);
}
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{
width: calc(100% - 200px);
}
div.yyi-rinker-contents div.yyi-rinker-title a {
color: #333;
text-decoration: none;
}
div.yyi-rinker-contents div.yyi-rinker-title p{
margin: 5px;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
font-size: 0.8em;
color: #999;
padding-left: 15px;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
text-decoration: underline;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
color: #aaa;
}
div.yyi-rinker-contents div.yyi-rinker-detail .free-text {
color: #aaa;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
border: none;
list-style-type: none;
display: inline-flex;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 10px auto;
padding: 0;
width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
content: '';
position: static;
margin: 2px 5px;
padding: 0;
border-radius: 2px;
border: none;
box-shadow: 0 6px 12px -5px rgba(0, 0, 0, .30);
-ms-flex: 0 0 auto;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:before {
content: '';
position: static;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
box-shadow: 0 5px 8px -5px rgba(0, 0, 0, .30);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
background: #f6a306;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
position: relative;
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
height: 30px;
line-height: 30px;
padding: 0 18px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
border: none;
opacity: 0.7;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:before {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: white;
text-align: center;
border: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
order: 20;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before{
content: '';
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink {
background: #666;
order: 15;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:before{
content: '';
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
background: #cf4944;
order: 30;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before{
content: '';
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background: #51a7e8;
order: 40;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before{
content: '';
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {
background: #4072B3;
order: 10;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
background: #4DC0B2;
order: 50;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3 {
background: #6f63ad;
order: 15;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink4 {
background: #63ad87;
order: 55;
}
div.yyi-rinker-contents ul.yyi-rinker-links img,
div.yyi-rinker-contents div.yyi-rinker-title img,
div.yyi-rinker-contents div.yyi-rinker-image a + img{
display: none;
}
div.yyi-rinker-detail .credit-box {
font-size: 75%;
}
ul.yyi-rinker-links li::before {
background-color: transparent;
}
@media all and (max-width: 420px) {
.yyi-rinker-images {
margin: auto;
}
}
@media all and (max-width: 420px) and (min-width: 321px) {
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0 0 15px;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
-webkit-flex-flow: column;
flex-direction: column;
}
.yyi-rinker-img-s .yyi-rinker-image {
width: 75px;
min-width: 75px;
}
.yyi-rinker-img-m .yyi-rinker-image {
width: 125px;
min-width: 125px;
}
.yyi-rinker-img-l div.yyi-rinker-image{
width: 150px;
min-width: 150px;
}
div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{
width: calc(100% - 75px);
}
div.yyi-rinker-contents div.yyi-rinker-info {
width: calc(100% - 125px);
}
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{
width: calc(100% - 150px);
}
}
@media all and (max-width: 320px) {
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0 0 7px;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
-webkit-flex-flow: column;
flex-direction: column;
}
.yyi-rinker-img-s .yyi-rinker-image {
width: 75px;
min-width: 75px;
}
.yyi-rinker-img-m .yyi-rinker-image {
width: 100px;
min-width: 100px;
}
.yyi-rinker-img-l div.yyi-rinker-image{
width: 125px;
min-width: 125px;
}
div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{
width: calc(100% - 75px);
}
div.yyi-rinker-contents div.yyi-rinker-info {
width: calc(100% - 100px);
}
div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{
width: calc(100% - 125px);
}
}
body div.yyi-rinker-contents ul.yyi-rinker-links li {
list-style: none;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li:before {
position: absolute;
}
div.yyi-rinker-contents p{
padding: 0;
}
div.yyi-rinker-contents img{
margin-bottom: 0;
} div.yyi_rinker-gutenberg input.rinkerg-richtext{
width: 300px;
}
input.rinkerg-richtext {
width: 70%;
} div.yyi-rinker-contents div.yyi-rinker-detail .free-text .count-in{
color: #333;
} .editor-styles-wrapper div.yyi-rinker-contents .count-top p {
margin-top: 0;
}
div.yyi-rinker-contents.yyi-rinker-design-tate  div.yyi-rinker-box{
flex-direction: column;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box .yyi-rinker-links {
flex-direction: column;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info {
width: 100%;
}
div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-title {
text-align: center;
}
div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-links {
text-align: center;
}
div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-image {
margin: auto;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info ul.yyi-rinker-links li {
align-self: stretch;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info {
padding: 0;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box {
flex-direction: column;
padding: 14px 5px 0;
}
.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info {
text-align: center;
}
.yyi-rinker-design-slim div.price-box span.price {
display: block;
}
div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info div.yyi-rinker-title a{
font-size:16px;
}
div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonkindlelink:before,  div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonlink:before,  div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.rakutenlink:before,  div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.yahoolink:before {
font-size:12px;
}
div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li a {
font-size: 13px;
} .yyi-rinker-contents .yyi-rinker-info {
padding-left: 10px;
}
.yyi-rinker-img-s .yyi-rinker-image .yyi-rinker-images img{
max-height: 75px;
}
.yyi-rinker-img-m .yyi-rinker-image .yyi-rinker-images img{
max-height: 175px;
}
.yyi-rinker-img-l .yyi-rinker-image .yyi-rinker-images img{
max-height: 200px;
}
div.yyi-rinker-contents div.yyi-rinker-image {
flex-direction: column;
align-items: center;
}
div.yyi-rinker-contents ul.yyi-rinker-thumbnails {
display: flex;
flex-direction: row;
flex-wrap : wrap;
list-style: none;
border:none;
padding: 0;
margin: 5px 0;
}
div.yyi-rinker-contents ul.yyi-rinker-thumbnails li{
cursor: pointer;
height: 32px;
text-align: center;
vertical-align: middle;
width: 32px;
border:none;
padding: 0;
margin: 0;
box-sizing: content-box;
}
div.yyi-rinker-contents ul.yyi-rinker-thumbnails li img {
vertical-align: middle;
}
div.yyi-rinker-contents ul.yyi-rinker-thumbnails li {
border: 1px solid #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-thumbnails li.thumb-active {
border: 1px solid #eee;
} div.yyi-rinker-contents.yyi-rinker-design-mini {
border: none;
box-shadow: none;
background-color: transparent;
} .yyi-rinker-design-mini div.yyi-rinker-info ul.yyi-rinker-links,
.yyi-rinker-design-mini div.yyi-rinker-info .brand,
.yyi-rinker-design-mini div.yyi-rinker-info .price-box {
display: none;
}
div.yyi-rinker-contents.yyi-rinker-design-mini .credit-box{
text-align: right;
}
div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-info {
width:100%;
}
.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-title {
line-height: 1.2;
min-height: 2.4em;
margin-bottom: 0;
}
.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-title a {
font-size: 12px;
text-decoration: none;
text-decoration: underline;
}
div.yyi-rinker-contents.yyi-rinker-design-mini {
position: relative;
max-width: 100%;
border: none;
border-radius: 12px;
box-shadow: 0 1px 6px rgb(0 0 0 / 12%);
background-color: #fff;
}
div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box {
border: none;
}
.yyi-rinker-design-mini div.yyi-rinker-image {
width: 60px;
min-width: 60px;
}
.yyi-rinker-design-mini div.yyi-rinker-image img{
max-height: 3.6em;
}
.yyi-rinker-design-mini div.yyi-rinker-detail div.credit-box {
font-size: 10px;
}
.yyi-rinker-design-mini div.yyi-rinker-detail div.brand,
.yyi-rinker-design-mini div.yyi-rinker-detail div.price-box {
font-size: 10px;
}
.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-detail {
padding: 0;
}
.yyi-rinker-design-mini div.yyi-rinker-detail div:not(:last-child) {
padding-bottom: 0;
}
.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-image a {
margin-bottom: 16px;
}
@media (min-width: 768px){
div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box {
padding: 12px;
}
.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-info {
justify-content: center;
padding-left: 24px;
}
}
@media (max-width: 767px){
div.yyi-rinker-contents.yyi-rinker-design-mini {
max-width:100%;
}
div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box {
flex-direction: row;
padding: 12px;
}
.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-info {
justify-content: center;
margin-bottom: 16px;
padding-left: 16px;
text-align: left;
}
}
div.yyi-rinker-contents .yyi-rinker-attention {
display: inline;
line-height: 30px;
position: absolute;
top: -5px;
left: -9px;
min-width: 60px;
padding: 0;
height: 30px;
text-align: center;
color: #ffffff;
background: #fea724;
z-index: 10;
}
div.yyi-rinker-contents .yyi-rinker-attention span{
padding: 0 15px;
}
.yyi-rinker-attention:before, .yyi-rinker-attention:after {
position: absolute;
content: '';
}
.yyi-rinker-attention:before {
bottom: -8px;
left: 0.1px;
width: 0;
height: 0;
border-top: 9px solid #e39620;
border-left: 9px solid transparent;
z-index: 1;
}
.yyi-rinker-attention:after {
right: -14.5px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #fea724;
}:root {
--ink: #121619;
--muted: #68705f;
--paper: #f4f1ea;
--paper-strong: #fff9ed;
--line: rgba(17, 20, 24, .12);
--night: #07131d;
--night-soft: #132738;
--blue: #0c6d9b;
--gold: #eba933;
--green: #496f5c;
--wood: #7b4b17;
--teal: #0b6969;
--radius: 8px;
--max: 1180px;
--shadow: 0 18px 45px rgba(22, 29, 38, .13);
--shadow-soft: 0 10px 28px rgba(22, 29, 38, .08);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background:
radial-gradient(circle at 12% 8%, rgba(235, 169, 51, .1), transparent 26%),
radial-gradient(circle at 88% 26%, rgba(11, 105, 105, .1), transparent 30%),
linear-gradient(180deg, #f8f6f0 0%, var(--paper) 48%, #efede6 100%);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
line-height: 1.75;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
.site-hero {
position: relative;
min-height: 720px;
background:
linear-gradient(90deg, rgba(3, 8, 15, .82) 0%, rgba(5, 12, 20, .43) 38%, rgba(5, 12, 20, .05) 74%),
linear-gradient(180deg, rgba(4, 8, 14, .16), rgba(4, 8, 14, .02) 55%, rgba(4, 8, 14, .48)),
var(--hero-image, url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png)) center / cover no-repeat;
color: #fff;
overflow: hidden;
}
.site-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 170px;
background: linear-gradient(180deg, transparent, rgba(244, 241, 234, .96));
pointer-events: none;
}
.global-nav {
position: relative;
z-index: 2;
width: min(var(--max), calc(100% - 56px));
margin: 0 auto;
padding: 26px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.global-nav::before {
content: "";
position: absolute;
inset: 14px -18px;
z-index: -1;
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(7, 19, 29, .18);
backdrop-filter: blur(10px);
border-radius: 8px;
opacity: .82;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 900;
letter-spacing: 0;
}
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 2px solid currentColor;
font-size: 12px;
line-height: 1;
transform: skew(-10deg);
background: rgba(255, 255, 255, .06);
}
.brand-mark-image {
overflow: hidden;
border: 0;
transform: none;
background: rgba(255, 255, 255, .08);
}
.brand-mark-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-name {
font-size: 27px;
line-height: 1;
}
.brand .custom-logo {
width: auto;
max-width: 190px;
max-height: 44px;
object-fit: contain;
}
.nav-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 11px;
font-weight: 800;
}
.nav-group {
display: inline-flex;
align-items: center;
gap: 14px;
}
.nav-group-label {
color: rgba(255, 255, 255, .54);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
}
.nav-divider {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .28);
}
.global-nav-compact .nav-group-label {
color: rgba(18, 22, 25, .42);
}
.global-nav-compact .nav-divider {
background: rgba(18, 22, 25, .16);
}
.nav-links a {
opacity: .92;
}
.nav-links a:hover {
color: var(--gold);
}
.nav-toggle {
display: none;
}
.hero-content {
position: relative;
z-index: 1;
width: min(var(--max), calc(100% - 56px));
margin: 86px auto 0;
}
.eyebrow,
.section-heading p,
.section-kicker {
margin: 0 0 12px;
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
}
.hero-content h1 {
margin: 0;
font-size: clamp(58px, 7vw, 96px);
line-height: 1.12;
letter-spacing: 0;
font-weight: 900;
text-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.hero-copy {
margin: 24px 0 0;
font-size: clamp(16px, 2vw, 22px);
font-weight: 700;
max-width: 580px;
text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 34px;
}
.button {
min-width: 176px;
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, .62);
padding: 13px 20px;
font-size: 13px;
font-weight: 900;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover,
.text-button:hover {
transform: translateY(-2px);
}
.button-primary {
border-color: var(--gold);
background: var(--gold);
color: #16120a;
}
.button-ghost {
color: #fff;
background: rgba(4, 8, 14, .22);
backdrop-filter: blur(8px);
}
.scroll-cue {
position: absolute;
left: max(28px, calc((100vw - var(--max)) / 2));
bottom: 38px;
display: grid;
gap: 8px;
color: #fff;
font-size: 11px;
font-weight: 800;
}
.scroll-line {
width: 1px;
height: 42px;
background: #fff;
position: relative;
margin-left: 18px;
}
.scroll-line::after {
content: "";
position: absolute;
left: -5px;
bottom: 0;
width: 10px;
height: 10px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
.section {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 72px 0;
}
.section-heading {
text-align: center;
margin-bottom: 30px;
}
.section-heading span {
display: block;
margin: 10px auto 0;
max-width: 560px;
color: var(--muted);
font-size: 15px;
line-height: 1.7;
}
.section-heading h2,
.about-copy h2,
.series-copy h2 {
margin: 0;
font-size: clamp(28px, 4vw, 46px);
line-height: 1.22;
letter-spacing: 0;
}
.section-pickup {
width: 100%;
max-width: none;
padding: 58px max(20px, calc((100vw - var(--max)) / 2)) 66px;
background:
linear-gradient(180deg, rgba(248, 246, 241, .72), rgba(244, 241, 234, .94)),
radial-gradient(circle at 84% 10%, rgba(11, 105, 105, .15), transparent 24%),
radial-gradient(circle at 18% 88%, rgba(235, 169, 51, .13), transparent 28%),
#f8f6f1;
}
.pickup-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 34px;
align-items: center;
}
.post-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.post-card {
min-width: 0;
background: rgba(255, 255, 255, .88);
border: 1px solid rgba(17, 20, 24, .07);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(22, 29, 38, .14);
}
.section-pickup .post-card {
display: grid;
grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
min-height: 172px;
}
.post-image {
position: relative;
aspect-ratio: 1.55;
overflow: hidden;
}
.section-pickup .post-image {
grid-row: 1 / 3;
height: 100%;
aspect-ratio: auto;
}
.brainde-safe-image {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
background: #111b1d;
isolation: isolate;
}
.brainde-safe-image::before {
content: "";
position: absolute;
inset: -18px;
z-index: 0;
background: var(--thumb-image) center / cover no-repeat;
filter: blur(18px) saturate(.9);
opacity: .58;
transform: scale(1.08);
}
.brainde-safe-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .04), transparent 48%),
linear-gradient(180deg, rgba(7, 19, 29, .04), rgba(7, 19, 29, .16));
pointer-events: none;
}
.brainde-safe-image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.category-card img,
.about-image img,
.pickup-feature-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-label {
position: absolute;
left: 10px;
top: 10px;
background: rgba(12, 109, 155, .94);
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 10px;
line-height: 1;
font-weight: 900;
}
.post-card h3 {
min-height: 0;
margin: 16px 16px 8px;
font-size: 16px;
line-height: 1.55;
}
.section-pickup .post-card h3 {
align-self: end;
margin: 18px 16px 8px;
font-size: 16px;
line-height: 1.5;
}
.post-card time {
display: block;
margin: 0 16px 16px;
color: var(--muted);
font-size: 12px;
}
.section-pickup .post-card time {
align-self: start;
}
.pickup-feature-card {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(17, 20, 24, .08);
background: var(--night);
color: #fff;
isolation: isolate;
transition: transform .25s ease, box-shadow .25s ease;
}
.pickup-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(22, 29, 38, .16);
}
.pickup-feature-card img {
position: absolute;
inset: 0;
z-index: -2;
}
.pickup-feature-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(7, 19, 29, .08), rgba(7, 19, 29, .82)),
linear-gradient(90deg, rgba(7, 19, 29, .72), rgba(7, 19, 29, .12));
}
.pickup-feature-card span,
.pickup-feature-card strong,
.pickup-feature-card small {
display: block;
margin-inline: 20px;
}
.pickup-feature-card span {
width: fit-content;
margin-bottom: 10px;
border-radius: 4px;
padding: 4px 8px;
background: var(--gold);
color: #17130a;
font-size: 10px;
line-height: 1;
font-weight: 900;
}
.pickup-feature-card strong {
font-size: 19px;
line-height: 1.5;
}
.pickup-feature-card small {
margin-top: 12px;
margin-bottom: 20px;
color: rgba(255, 255, 255, .76);
font-size: 12px;
font-weight: 900;
}
.about-panel {
display: grid;
gap: 30px;
align-items: start;
max-width: 1040px;
padding-top: 86px;
}
.about-image {
aspect-ratio: 1.62;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, .72);
}
.about-copy {
max-width: 920px;
padding-left: 2px;
}
.about-copy p {
margin: 18px 0 0;
color: #313b38;
font-size: 17px;
}
.text-button {
display: inline-flex;
margin-top: 22px;
padding: 10px 18px;
border: 1px solid var(--ink);
border-radius: 4px;
font-size: 13px;
font-weight: 900;
background: rgba(255, 255, 255, .55);
transition: transform .2s ease, background .2s ease;
}
.bridge-section {
width: min(var(--max), calc(100% - 40px));
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr);
gap: 42px;
align-items: start;
padding: 34px;
border: 1px solid rgba(17, 20, 24, .08);
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 249, 237, .74)),
radial-gradient(circle at 12% 10%, rgba(235, 169, 51, .14), transparent 26%),
radial-gradient(circle at 88% 80%, rgba(11, 105, 105, .12), transparent 28%);
box-shadow: var(--shadow-soft);
}
.bridge-section h2 {
margin: 0;
font-size: clamp(26px, 3.5vw, 44px);
line-height: 1.25;
}
.bridge-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.bridge-grid article {
min-height: 190px;
padding: 22px;
border-radius: var(--radius);
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
}
.bridge-grid span {
display: inline-block;
margin-bottom: 18px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.bridge-grid strong {
display: block;
font-size: 20px;
line-height: 1.35;
}
.bridge-grid p {
margin: 12px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.65;
}
.categories {
padding-top: 64px;
}
.category-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 230px;
gap: 18px;
}
.category-card {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--night);
color: #fff;
box-shadow: var(--shadow);
min-height: 0;
}
.category-card.large {
grid-column: span 2;
grid-row: span 2;
}
.category-card.wide {
grid-column: span 2;
}
.category-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 12, 20, .03), rgba(5, 12, 20, .78)),
linear-gradient(90deg, rgba(5, 12, 20, .26), transparent 70%);
}
.category-card img {
transition: transform .5s ease;
}
.category-card:hover img {
transform: scale(1.05);
}
.category-card span,
.category-card small {
position: absolute;
z-index: 1;
left: 22px;
}
.category-card span {
bottom: 48px;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1;
font-weight: 900;
}
.category-card small {
bottom: 22px;
font-size: 13px;
font-weight: 800;
color: rgba(255, 255, 255, .82);
}
.series-section {
display: grid;
grid-template-columns: 390px minmax(0, 1fr);
gap: 52px;
align-items: start;
border-top: 1px solid rgba(17, 20, 24, .08);
}
.series-copy p {
color: #313b38;
}
.series-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.series-list a {
min-height: 132px;
padding: 22px;
border-radius: var(--radius);
background:
linear-gradient(135deg, rgba(255, 255, 255, .93), rgba(255, 249, 237, .86));
border: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(22, 29, 38, .07);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.series-list a:hover {
transform: translateY(-3px);
border-color: rgba(11, 105, 105, .26);
box-shadow: 0 16px 40px rgba(22, 29, 38, .12);
}
.series-list span {
display: block;
color: var(--blue);
font-size: 12px;
font-weight: 900;
}
.series-list strong {
display: block;
margin-top: 12px;
font-size: 20px;
line-height: 1.35;
}
.site-footer {
width: 100%;
padding: 52px max(20px, calc((100vw - var(--max)) / 2));
display: flex;
justify-content: space-between;
gap: 30px;
color: #fff;
background:
linear-gradient(180deg, rgba(7, 17, 29, .88), rgba(7, 17, 29, .98)),
radial-gradient(circle at 75% 30%, rgba(235, 169, 51, .18), transparent 22%),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center bottom / cover no-repeat;
}
.footer-brand {
color: #fff;
}
.site-footer p {
max-width: 420px;
color: rgba(255, 255, 255, .72);
}
.site-footer nav {
display: grid;
gap: 10px;
min-width: 210px;
font-size: 13px;
font-weight: 900;
}
.page-category {
min-height: 100vh;
}
.compact-header {
position: sticky;
top: 0;
z-index: 10;
background:
linear-gradient(180deg, rgba(244, 241, 234, .92), rgba(244, 241, 234, .74));
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(17, 20, 24, .08);
}
.global-nav-compact {
color: var(--ink);
}
.global-nav-compact::before {
background: rgba(255, 255, 255, .52);
border-color: rgba(17, 20, 24, .08);
}
.global-nav-compact .nav-links a:hover,
.global-nav-compact .nav-links .is-current {
color: var(--teal);
}
.category-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 62px 0 92px;
}
.category-hero {
min-height: 350px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: end;
margin-bottom: 46px;
padding: 42px;
color: #fff;
border-radius: 12px;
overflow: hidden;
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
var(--category-hero-image, url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/field_gear_category.png)) center / cover no-repeat;
box-shadow: var(--shadow);
}
.category-hero-apple {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/apple_mac_category.png) center / cover no-repeat;
}
.category-hero-desk {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/desk_gear_category.png) center / cover no-repeat;
}
.category-hero-home {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/home_teck.png) center / cover no-repeat;
}
.category-hero-ai {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/ai_workflow_category.png) center / cover no-repeat;
}
.category-hero h1 {
margin: 0;
font-size: clamp(54px, 8vw, 98px);
line-height: .95;
}
.category-hero p {
max-width: 760px;
margin: 22px 0 0;
font-size: 17px;
line-height: 1.9;
color: rgba(255, 255, 255, .9);
font-weight: 700;
}
.category-hero-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.category-hero-meta span {
display: inline-flex;
min-height: 34px;
align-items: center;
border-radius: 999px;
padding: 7px 13px;
background: rgba(255, 255, 255, .78);
color: var(--ink);
font-size: 12px;
font-weight: 900;
}
.category-hero-meta span:last-child {
background: rgba(160, 237, 236, .88);
color: #003737;
}
.category-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 42px;
align-items: start;
}
.category-main {
min-width: 0;
}
.featured-category-card {
position: relative;
display: grid;
min-height: 430px;
overflow: hidden;
border-radius: 12px;
color: #fff;
box-shadow: var(--shadow);
}
.featured-category-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-category-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent, rgba(7, 19, 29, .82)),
linear-gradient(90deg, rgba(7, 19, 29, .42), transparent 72%);
}
.featured-category-card > div {
position: relative;
z-index: 1;
align-self: end;
max-width: 760px;
padding: 32px;
}
.featured-category-card .post-label {
position: static;
display: inline-flex;
margin-bottom: 14px;
background: var(--gold);
color: #15110a;
}
.featured-category-card h2 {
margin: 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.22;
}
.featured-category-card p {
margin: 16px 0 0;
color: rgba(255, 255, 255, .86);
font-weight: 700;
}
.featured-category-card time {
display: block;
margin-top: 16px;
font-size: 13px;
color: rgba(255, 255, 255, .72);
}
.article-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 28px;
}
.category-article-card {
min-width: 0;
}
.category-card-image {
display: block;
aspect-ratio: 1.5;
overflow: hidden;
border-radius: 8px;
box-shadow: var(--shadow-soft);
}
.category-article-card img {
width: 100%;
height: 100%;
}
.category-article-card p {
margin: 16px 0 8px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.category-article-card h3 {
margin: 0;
font-size: 24px;
line-height: 1.45;
}
.category-article-card span {
display: block;
margin-top: 10px;
color: #434a43;
font-size: 14px;
}
.category-article-card time {
display: block;
margin-top: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.category-sidebar {
display: grid;
gap: 22px;
}
.sidebar-card {
padding: 24px;
border-radius: 12px;
background: rgba(255, 255, 255, .74);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.trending-list {
list-style: none;
display: grid;
gap: 18px;
margin: 0;
padding: 0;
}
.trending-list a {
display: grid;
grid-template-columns: 54px 1fr;
gap: 12px;
align-items: start;
font-weight: 800;
line-height: 1.55;
}
.trending-list span {
color: rgba(123, 75, 23, .28);
font-size: 34px;
line-height: 1;
font-weight: 900;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-cloud a {
display: inline-flex;
border-radius: 999px;
padding: 8px 12px;
background: rgba(11, 105, 105, .08);
color: #064f4f;
font-size: 12px;
font-weight: 900;
}
.sidebar-dark {
background:
linear-gradient(180deg, rgba(7, 19, 29, .88), rgba(7, 19, 29, .96)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
color: #fff;
}
.sidebar-dark h3 {
margin: 0;
font-size: 24px;
line-height: 1.35;
}
.sidebar-dark p:last-child {
margin: 14px 0 0;
color: rgba(255, 255, 255, .76);
}
.article-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 52px;
align-items: start;
}
.article-main {
min-width: 0;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px;
color: var(--muted);
font-size: 12px;
font-weight: 900;
}
.breadcrumb a:hover {
color: var(--teal);
}
.article-header {
max-width: 860px;
}
.article-label {
display: inline-flex;
margin-bottom: 16px;
padding: 6px 10px;
border-radius: 4px;
background: var(--teal);
color: #fff;
font-size: 12px;
font-weight: 900;
}
.article-header h1 {
margin: 0;
font-size: clamp(38px, 6vw, 72px);
line-height: 1.12;
letter-spacing: 0;
}
.article-header > p {
max-width: 760px;
margin: 22px 0 0;
color: #37413e;
font-size: 18px;
line-height: 1.9;
font-weight: 700;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(17, 20, 24, .1);
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.article-eyecatch {
margin: 34px 0 0;
overflow: hidden;
border-radius: 12px;
box-shadow: var(--shadow);
aspect-ratio: 1.72;
background: #111b1d;
}
.article-eyecatch img {
width: 100%;
height: 100%;
}
.share-row {
display: flex;
gap: 10px;
margin: 22px 0 0;
}
.share-row a {
display: inline-flex;
min-width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(17, 20, 24, .08);
color: var(--ink);
font-size: 12px;
font-weight: 900;
}
.article-summary-box,
.toc-box,
.note-card,
.gear-card {
margin-top: 34px;
border-radius: 12px;
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.article-summary-box {
padding: 28px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 249, 237, .82)),
radial-gradient(circle at 90% 10%, rgba(235, 169, 51, .18), transparent 26%);
}
.article-summary-box h2 {
margin: 0;
font-size: 28px;
line-height: 1.35;
}
.article-summary-box ul {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.article-summary-box li {
position: relative;
padding-left: 22px;
color: #313b38;
font-weight: 700;
}
.article-summary-box li::before {
content: "";
position: absolute;
left: 0;
top: .78em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
.toc-box {
display: grid;
gap: 12px;
padding: 24px;
background: rgba(255, 255, 255, .72);
}
.toc-box h2 {
margin: 0 0 4px;
font-size: 22px;
}
.toc-box a {
padding: 12px 14px;
border-radius: 8px;
background: rgba(244, 241, 234, .72);
color: #303935;
font-weight: 800;
}
.article-body {
margin-top: 44px;
display: block;
max-width: 748px;
letter-spacing: 0;
}
.article-body section {
scroll-margin-top: 120px;
}
.article-body h2 {
margin: 2.15em 0 .72em;
border-bottom: 1px solid rgba(17, 20, 24, .1);
padding-bottom: .42em;
font-size: clamp(27px, 3.6vw, 40px);
line-height: 1.34;
letter-spacing: 0;
}
.article-body h3 {
margin: 1.8em 0 .62em;
font-size: clamp(21px, 2.6vw, 27px);
line-height: 1.45;
letter-spacing: 0;
}
.article-body p {
margin: 0 0 1.05em;
color: #2f3835;
font-size: 17px;
line-height: 1.76;
letter-spacing: 0;
}
.note-card {
padding: 24px;
background:
linear-gradient(135deg, rgba(7, 19, 29, .92), rgba(19, 39, 56, .9)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
color: #fff;
}
.note-card strong {
display: block;
margin-bottom: 10px;
color: var(--gold);
}
.note-card p {
margin: 0;
color: rgba(255, 255, 255, .86);
}
.article-body .is-style-brainde-lead,
.article-body .brainde-lead {
margin: 0 0 28px;
color: #18211f;
font-size: 19px;
line-height: 1.82;
font-weight: 800;
}
.article-body .is-style-brainde-note,
.article-body .brainde-box,
.article-body .brainde-quick-summary,
.article-body .brainde-decision-box,
.article-body .brainde-point-box,
.article-body .brainde-experience-box,
.article-body .brainde-step-card,
.article-body .brainde-verdict-card,
.article-body .information-box,
.article-body .memo-box,
.article-body .alert-box {
margin: 30px 0;
border: 1px solid rgba(11, 105, 105, .18);
border-left: 5px solid var(--teal);
border-radius: 8px;
padding: 22px 24px;
background: #fffdf7;
box-shadow: var(--shadow-soft);
}
.article-body ul,
.article-body ol {
display: grid;
gap: 9px;
margin: 1.2em 0 1.6em;
padding: 0;
list-style: none;
}
.article-body li {
position: relative;
padding: 10px 12px 10px 36px;
border: 1px solid rgba(17, 20, 24, .07);
border-radius: 8px;
background: rgba(255, 255, 255, .62);
color: #25302c;
font-size: 16px;
line-height: 1.68;
font-weight: 700;
}
.article-body ul li::before {
content: "";
position: absolute;
left: 15px;
top: 1.02em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 5px rgba(11, 105, 105, .1);
}
.article-body ol {
counter-reset: brainde-list;
}
.article-body ol li {
counter-increment: brainde-list;
}
.article-body ol li::before {
content: counter(brainde-list);
position: absolute;
left: 11px;
top: .82em;
display: grid;
place-items: center;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--night);
color: #fff;
font-size: 11px;
font-weight: 900;
}
.article-body .brainde-speech {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 16px;
align-items: start;
margin: 34px 0;
}
.article-body .brainde-speech-avatar {
display: grid;
place-items: center;
overflow: hidden;
width: 74px;
height: 74px;
border: 1px solid rgba(17, 20, 24, .08);
border-radius: 50%;
background: #fff;
box-shadow: var(--shadow-soft);
}
.article-body .brainde-speech-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-body .brainde-speech-name {
display: block;
margin-top: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 900;
text-align: center;
}
.article-body .brainde-speech-body {
position: relative;
border: 1px solid rgba(11, 105, 105, .14);
border-radius: 8px;
padding: 18px 22px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(250, 247, 239, .94)),
radial-gradient(circle at 100% 0%, rgba(11, 105, 105, .08), transparent 26%);
box-shadow: var(--shadow-soft);
}
.article-body .brainde-speech-body::before {
content: "";
position: absolute;
left: -9px;
top: 26px;
width: 16px;
height: 16px;
border-left: 1px solid rgba(11, 105, 105, .14);
border-bottom: 1px solid rgba(11, 105, 105, .14);
background: rgba(255, 255, 255, .96);
transform: rotate(45deg);
}
.article-body .brainde-speech-body p {
margin: 0;
color: #24302c;
font-weight: 750;
line-height: 1.72;
}
.article-body .brainde-decision-box {
border-left-color: var(--gold);
background:
linear-gradient(135deg, rgba(255, 249, 237, .98), rgba(255, 253, 247, .98)),
radial-gradient(circle at 92% 12%, rgba(235, 169, 51, .16), transparent 24%);
}
.article-body .brainde-quick-summary {
position: relative;
border-left-color: var(--night);
padding: 24px 26px;
background:
linear-gradient(135deg, rgba(7, 19, 29, .96), rgba(16, 39, 50, .92)),
radial-gradient(circle at 92% 8%, rgba(235, 169, 51, .2), transparent 24%);
color: #fff;
}
.article-body .brainde-quick-summary h3,
.article-body .brainde-quick-summary p,
.article-body .brainde-quick-summary li {
color: #fff;
}
.article-body .brainde-quick-summary h3 {
font-size: 20px;
}
.article-body .brainde-quick-summary li {
border-color: rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .08);
}
.article-body .brainde-quick-summary ul li::before {
background: var(--gold);
box-shadow: 0 0 0 5px rgba(235, 169, 51, .14);
}
.article-body .brainde-point-box,
.article-body .memo-box {
border-left-color: var(--teal);
}
.article-body .alert-box {
border-left-color: #b05b30;
background: #fff7ef;
}
.article-body .brainde-experience-box {
border-left-color: var(--green);
background:
linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 241, 234, .82)),
radial-gradient(circle at 100% 0%, rgba(73, 111, 92, .13), transparent 28%);
}
.article-body .brainde-step-card {
border-left-color: var(--blue);
background:
linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 247, .92)),
radial-gradient(circle at 96% 0%, rgba(12, 109, 155, .12), transparent 28%);
}
.article-body .brainde-verdict-card {
border: 1px solid rgba(235, 169, 51, .38);
border-left: 0;
padding: 18px 22px;
background:
linear-gradient(90deg, rgba(235, 169, 51, .2), rgba(255, 253, 247, .96) 32%),
rgba(255, 255, 255, .92);
}
.article-body .brainde-verdict-card p {
margin: 0;
color: #18211f;
font-size: 17px;
line-height: 1.68;
font-weight: 850;
}
.article-body .brainde-marker {
background: linear-gradient(transparent 58%, rgba(235, 169, 51, .34) 0);
font-weight: 850;
}
.article-body .brainde-related-link {
display: grid;
gap: 4px;
margin: 30px 0;
border: 1px solid rgba(11, 105, 105, .18);
border-radius: 8px;
padding: 16px 18px;
background: rgba(255, 255, 255, .78);
box-shadow: var(--shadow-soft);
}
.article-body .brainde-related-link small {
color: var(--teal);
font-size: 11px;
font-weight: 900;
}
.article-body .brainde-related-link a {
color: #17211f;
font-size: 16px;
font-weight: 900;
text-decoration: underline;
text-decoration-color: rgba(11, 105, 105, .28);
text-underline-offset: 4px;
}
.article-body .is-style-brainde-gear,
.article-body .brainde-gear-card,
.after-content-widgets .widget {
margin: 30px 0;
border: 1px solid rgba(235, 169, 51, .35);
border-radius: 8px;
padding: 22px 24px;
background:
linear-gradient(135deg, rgba(255, 249, 237, .98), rgba(244, 241, 234, .96)),
radial-gradient(circle at 92% 18%, rgba(235, 169, 51, .16), transparent 26%);
box-shadow: var(--shadow-soft);
}
.article-body .brainde-affiliate-card {
display: grid;
grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
gap: 18px;
align-items: center;
margin: 34px 0;
border: 1px solid rgba(17, 20, 24, .09);
border-radius: 8px;
padding: 18px;
background: rgba(255, 255, 255, .86);
box-shadow: var(--shadow-soft);
}
.article-body .brainde-affiliate-card img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: 8px;
background: #f4f1ea;
}
.article-body .brainde-affiliate-card h3 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.45;
}
.article-body .brainde-affiliate-card p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.75;
}
.article-body .brainde-affiliate-card a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border-radius: 4px;
padding: 8px 14px;
background: var(--gold);
color: #18130a;
font-size: 13px;
font-weight: 900;
}
.article-body .brainde-compare-table {
width: 100%;
overflow-x: auto;
margin: 34px 0;
border: 1px solid rgba(17, 20, 24, .09);
border-radius: 8px;
background: rgba(255, 255, 255, .82);
box-shadow: var(--shadow-soft);
}
.article-body .brainde-compare-table table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
}
.article-body .brainde-compare-table th,
.article-body .brainde-compare-table td {
border-bottom: 1px solid rgba(17, 20, 24, .08);
padding: 14px 16px;
text-align: left;
vertical-align: top;
}
.article-body .brainde-compare-table th {
background: rgba(7, 19, 29, .92);
color: #fff;
font-size: 13px;
}
.article-body .brainde-compare-table tr:last-child td {
border-bottom: 0;
}
.article-body .is-style-brainde-note > :first-child,
.article-body .is-style-brainde-gear > :first-child,
.article-body .brainde-box > :first-child,
.article-body .brainde-quick-summary > :first-child,
.article-body .brainde-decision-box > :first-child,
.article-body .brainde-point-box > :first-child,
.article-body .brainde-experience-box > :first-child,
.article-body .brainde-gear-card > :first-child,
.article-body .brainde-step-card > :first-child,
.article-body .brainde-verdict-card > :first-child,
.article-body .information-box > :first-child,
.article-body .memo-box > :first-child,
.article-body .alert-box > :first-child {
margin-top: 0;
}
.article-body .is-style-brainde-note > :last-child,
.article-body .is-style-brainde-gear > :last-child,
.article-body .brainde-box > :last-child,
.article-body .brainde-quick-summary > :last-child,
.article-body .brainde-decision-box > :last-child,
.article-body .brainde-point-box > :last-child,
.article-body .brainde-experience-box > :last-child,
.article-body .brainde-gear-card > :last-child,
.article-body .brainde-step-card > :last-child,
.article-body .brainde-verdict-card > :last-child,
.article-body .information-box > :last-child,
.article-body .memo-box > :last-child,
.article-body .alert-box > :last-child {
margin-bottom: 0;
}
.article-body .wp-block-image.alignwide,
.article-body .alignwide {
width: min(100%, 980px);
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.article-body .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.wp-caption,
.gallery-caption {
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.bypostauthor {
border-left: 3px solid var(--gold);
}
.page-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0;
font-weight: 900;
}
.page-links a,
.page-links span {
display: inline-flex;
min-width: 36px;
min-height: 36px;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 6px;
padding: 4px 10px;
background: #fffdf7;
}
.widget-title {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.35;
}
.sidebar-card .widget-title + * {
margin-top: 0;
}
.footer-widgets {
display: grid;
gap: 16px;
min-width: min(100%, 280px);
}
.footer-widgets .widget {
color: rgba(255, 255, 255, .8);
}
.comments-area {
margin-top: 46px;
border-top: 1px solid var(--line);
padding-top: 34px;
}
.comments-title {
margin: 0 0 22px;
font-size: 24px;
line-height: 1.35;
}
.comment-list {
display: grid;
gap: 18px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.comment-body {
border: 1px solid var(--line);
border-radius: 8px;
padding: 18px;
background: rgba(255, 253, 247, .9);
}
.comment-respond {
margin-top: 28px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 22px;
background: rgba(255, 253, 247, .92);
}
.comment-form input:not([type="submit"]),
.comment-form textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 6px;
padding: 11px 12px;
font: inherit;
}
.comment-form input[type="submit"] {
border: 0;
border-radius: 4px;
padding: 12px 18px;
background: var(--teal);
color: #fff;
font-weight: 900;
}
.check-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.check-list div {
padding: 18px;
border-radius: 10px;
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
}
.check-list span {
display: block;
color: rgba(123, 75, 23, .34);
font-size: 34px;
line-height: 1;
font-weight: 900;
}
.check-list p {
margin: 10px 0 0;
font-weight: 900;
line-height: 1.5;
}
.gear-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 28px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 249, 237, .84)),
radial-gradient(circle at 6% 0%, rgba(11, 105, 105, .13), transparent 28%);
}
.gear-card h2 {
margin: 0;
font-size: 28px;
}
.gear-card p:last-child {
margin-bottom: 0;
}
.gear-card a {
display: inline-flex;
min-width: 150px;
min-height: 48px;
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--gold);
color: #16120a;
font-weight: 900;
}
.related-posts {
margin-top: 70px;
}
.related-grid {
grid-template-columns: 1fr 1fr;
}
.article-sidebar {
position: sticky;
top: 102px;
display: grid;
gap: 22px;
}
.author-card {
overflow: hidden;
border-radius: 12px;
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.author-card img {
width: 100%;
aspect-ratio: 1.4;
object-fit: cover;
}
.author-card h2,
.author-card p {
margin-left: 22px;
margin-right: 22px;
}
.author-card h2 {
margin-top: 20px;
margin-bottom: 8px;
font-size: 22px;
}
.author-card p {
margin-top: 0;
margin-bottom: 24px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}
.about-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.about-hero {
display: grid;
gap: 34px;
}
.about-hero-image {
overflow: hidden;
border-radius: 12px;
box-shadow: var(--shadow);
}
.about-hero-image img {
width: 100%;
aspect-ratio: 2.05;
object-fit: cover;
}
.about-hero-copy {
max-width: 940px;
}
.about-hero-copy h1 {
margin: 0;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.18;
}
.about-hero-copy p {
margin: 22px 0 0;
color: #303936;
font-size: 18px;
line-height: 1.95;
font-weight: 700;
}
.about-mission {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 52px;
margin-top: 72px;
padding: 34px;
border-radius: 12px;
border: 1px solid rgba(17, 20, 24, .08);
background:
linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 249, 237, .74)),
radial-gradient(circle at 90% 16%, rgba(11, 105, 105, .13), transparent 28%);
box-shadow: var(--shadow-soft);
}
.about-mission h2 {
margin: 0;
font-size: clamp(30px, 4.4vw, 52px);
line-height: 1.22;
}
.about-mission > p {
margin: 0;
color: #303936;
font-size: 17px;
line-height: 2;
font-weight: 700;
}
.about-values-section,
.about-profile,
.about-themes,
.about-value-grid,
.profile-card-large,
.theme-strip {
margin-top: 72px;
}
.about-value-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.about-value-grid article {
min-height: 230px;
padding: 24px;
border-radius: 12px;
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.about-value-grid span {
color: rgba(123, 75, 23, .28);
font-size: 42px;
line-height: 1;
font-weight: 900;
}
.about-value-grid h2,
.about-value-grid h3 {
margin: 18px 0 10px;
font-size: 23px;
line-height: 1.35;
}
.about-value-grid p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.75;
font-weight: 700;
}
.profile-card-large {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 34px;
align-items: center;
padding: 28px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(7, 19, 29, .9), rgba(19, 39, 56, .88)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
color: #fff;
box-shadow: var(--shadow);
}
.profile-card-large img {
width: 100%;
aspect-ratio: 1.35;
object-fit: cover;
border-radius: 8px;
}
.profile-card-large h2 {
margin: 0;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.1;
}
.profile-card-large p {
margin: 18px 0 0;
color: rgba(255, 255, 255, .82);
font-size: 17px;
line-height: 1.9;
font-weight: 700;
}
.profile-card-large ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.profile-card-large li {
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 8px;
padding: 10px 12px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .88);
font-size: 13px;
font-weight: 900;
}
.profile-card-large .text-button {
color: #fff;
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .08);
}
.theme-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.theme-strip a {
min-height: 92px;
display: grid;
align-content: center;
gap: 8px;
justify-content: center;
text-align: center;
padding: 14px;
border-radius: 10px;
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
color: var(--ink);
font-size: 14px;
font-weight: 900;
}
.theme-strip span {
color: var(--teal);
font-size: 11px;
letter-spacing: .06em;
}
.theme-strip strong {
font-size: 14px;
line-height: 1.5;
}
.series-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.series-hero {
min-height: 440px;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 42px;
align-items: end;
padding: 42px;
border-radius: 12px;
color: #fff;
background:
linear-gradient(90deg, rgba(7, 19, 29, .88), rgba(7, 19, 29, .42) 62%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .06), rgba(7, 19, 29, .62)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
box-shadow: var(--shadow);
}
.series-hero h1 {
max-width: 820px;
margin: 0;
font-size: clamp(42px, 6vw, 76px);
line-height: 1.13;
}
.series-hero p {
max-width: 760px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.series-hero-note {
padding: 24px;
border-radius: 12px;
background: rgba(255, 255, 255, .78);
color: var(--ink);
box-shadow: var(--shadow-soft);
}
.series-hero-note span,
.series-card-large span {
display: block;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.series-hero-note strong {
display: block;
margin-top: 14px;
font-size: 24px;
line-height: 1.45;
}
.series-feature {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 34px;
align-items: center;
margin-top: 54px;
padding: 28px;
border-radius: 12px;
border: 1px solid rgba(17, 20, 24, .08);
background:
linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 249, 237, .74)),
radial-gradient(circle at 96% 12%, rgba(235, 169, 51, .16), transparent 28%);
box-shadow: var(--shadow-soft);
}
.series-feature img {
width: 100%;
aspect-ratio: 1.45;
object-fit: cover;
border-radius: 8px;
}
.series-feature h2 {
margin: 0;
font-size: clamp(32px, 4.8vw, 58px);
line-height: 1.18;
}
.series-feature p {
margin: 18px 0 0;
color: #303936;
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.series-shelf {
display: grid;
gap: 24px;
margin-top: 54px;
}
.series-card-large {
scroll-margin-top: 120px;
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 28px;
align-items: stretch;
padding: 22px;
border-radius: 12px;
background: rgba(255, 255, 255, .76);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.series-card-large img {
width: 100%;
height: 100%;
min-height: 250px;
object-fit: cover;
border-radius: 8px;
}
.series-card-large > div {
padding: 8px 8px 8px 0;
}
.series-card-large h2 {
margin: 10px 0 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.22;
}
.series-card-large p {
margin: 16px 0 0;
color: #303936;
font-size: 16px;
line-height: 1.85;
font-weight: 700;
}
.series-card-large ol {
display: grid;
gap: 8px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.series-card-large li {
position: relative;
padding-left: 24px;
color: #3b463f;
font-size: 14px;
font-weight: 900;
}
.series-card-large li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
}
.archive-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.archive-hero {
min-height: 390px;
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 42px;
align-items: end;
padding: 42px;
border-radius: 12px;
color: #fff;
background:
linear-gradient(90deg, rgba(7, 19, 29, .9), rgba(7, 19, 29, .56) 58%, rgba(7, 19, 29, .22)),
linear-gradient(180deg, rgba(7, 19, 29, .08), rgba(7, 19, 29, .62)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/desk_gear_category.png) center / cover no-repeat;
box-shadow: var(--shadow);
}
.archive-hero h1 {
max-width: 820px;
margin: 0;
font-size: clamp(42px, 6vw, 76px);
line-height: 1.13;
}
.archive-hero p {
max-width: 720px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.search-panel {
display: grid;
gap: 12px;
padding: 22px;
border-radius: 12px;
background: rgba(255, 255, 255, .84);
color: var(--ink);
box-shadow: var(--shadow-soft);
}
.search-panel label {
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.search-panel div {
display: grid;
grid-template-columns: minmax(0, 1fr) 82px;
gap: 10px;
}
.search-panel input,
.search-panel button {
min-height: 48px;
border-radius: 6px;
font: inherit;
font-weight: 800;
}
.search-panel input {
min-width: 0;
border: 1px solid rgba(17, 20, 24, .14);
padding: 0 14px;
background: rgba(255, 255, 255, .92);
color: var(--ink);
}
.search-panel button {
border: 0;
background: var(--gold);
color: #16120a;
cursor: pointer;
}
.archive-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 28px 0 36px;
}
.archive-filters a {
min-height: 38px;
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 8px 14px;
background: rgba(255, 255, 255, .72);
border: 1px solid rgba(17, 20, 24, .08);
color: #303936;
font-size: 12px;
font-weight: 900;
box-shadow: 0 8px 20px rgba(22, 29, 38, .05);
}
.archive-filters .is-active {
background: var(--night);
color: #fff;
}
.archive-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 42px;
align-items: start;
}
.archive-main {
min-width: 0;
}
.archive-featured {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 26px;
align-items: center;
padding: 24px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 249, 237, .78)),
radial-gradient(circle at 96% 10%, rgba(235, 169, 51, .14), transparent 26%);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: var(--shadow-soft);
}
.archive-featured img {
width: 100%;
aspect-ratio: 1.42;
object-fit: cover;
border-radius: 8px;
box-shadow: var(--shadow-soft);
}
.archive-featured span,
.archive-row p {
display: block;
margin: 0 0 10px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.archive-featured h2 {
margin: 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.25;
}
.archive-featured p {
margin: 16px 0 0;
color: #303936;
font-size: 16px;
line-height: 1.85;
font-weight: 700;
}
.archive-featured time,
.archive-row time {
display: block;
margin-top: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.archive-list {
display: grid;
gap: 18px;
margin-top: 26px;
}
.archive-row {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 20px;
align-items: center;
padding: 16px;
border-radius: 12px;
background: rgba(255, 255, 255, .74);
border: 1px solid rgba(17, 20, 24, .08);
box-shadow: 0 10px 28px rgba(22, 29, 38, .06);
transition: transform .2s ease, box-shadow .2s ease;
}
.archive-row:hover {
transform: translateY(-3px);
box-shadow: 0 18px 42px rgba(22, 29, 38, .1);
}
.archive-row img {
width: 100%;
height: 100%;
}
.archive-row-image {
display: block;
aspect-ratio: 1.45;
overflow: hidden;
border-radius: 8px;
}
.archive-row h2 {
margin: 0;
font-size: 24px;
line-height: 1.4;
}
.archive-row span {
display: block;
margin-top: 10px;
color: #47514b;
font-size: 14px;
line-height: 1.7;
font-weight: 700;
}
.archive-sidebar {
position: sticky;
top: 102px;
display: grid;
gap: 22px;
}
.purpose-list {
display: grid;
gap: 14px;
}
.purpose-list a {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 10px;
background: rgba(244, 241, 234, .72);
}
.purpose-list span {
color: rgba(123, 75, 23, .28);
font-size: 28px;
line-height: 1;
font-weight: 900;
}
.purpose-list strong {
font-size: 14px;
line-height: 1.45;
}
@media (max-width: 860px) {
.site-hero {
min-height: 660px;
}
.global-nav {
width: min(var(--max), calc(100% - 32px));
}
.global-nav::before {
inset: 14px 0;
}
.nav-links {
display: none;
}
.nav-toggle {
display: inline-flex;
border: 1px solid rgba(255, 255, 255, .45);
background: rgba(4, 8, 14, .2);
color: #fff;
border-radius: 4px;
padding: 9px 12px;
font-weight: 900;
}
.brand-name {
font-size: 22px;
}
.hero-content {
width: min(var(--max), calc(100% - 32px));
margin-top: 62px;
}
.pickup-layout,
.bridge-section,
.series-section {
grid-template-columns: 1fr;
}
.post-grid,
.bridge-grid,
.series-list {
grid-template-columns: 1fr 1fr;
}
.section-pickup .post-card {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.section-pickup .post-image {
grid-row: auto;
aspect-ratio: 1.55;
}
.pickup-feature-card {
min-height: 280px;
}
.category-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 220px;
}
.category-hero,
.category-layout,
.article-layout,
.about-mission,
.profile-card-large,
.series-hero,
.series-feature,
.series-card-large,
.archive-hero,
.archive-layout,
.archive-featured {
grid-template-columns: 1fr;
}
.category-hero-meta {
justify-content: flex-start;
}
.category-sidebar {
grid-template-columns: 1fr 1fr;
}
.sidebar-dark {
grid-column: 1 / -1;
}
.article-sidebar {
position: static;
grid-template-columns: 1fr 1fr;
}
.archive-sidebar {
position: static;
grid-template-columns: 1fr 1fr;
}
.about-value-grid {
grid-template-columns: 1fr 1fr;
}
.theme-strip {
grid-template-columns: 1fr 1fr;
}
.author-card {
grid-column: 1 / -1;
}
.category-card.large,
.category-card.wide {
grid-column: span 1;
grid-row: span 1;
}
}
@media (max-width: 620px) {
.site-hero {
min-height: 640px;
background-position: 60% center;
}
.hero-content h1 {
font-size: 48px;
}
.hero-copy br {
display: none;
}
.hero-copy {
max-width: 340px;
line-height: 1.85;
}
.button {
width: 100%;
}
.section {
width: min(var(--max), calc(100% - 28px));
padding: 54px 0;
}
.section-pickup {
padding: 48px 14px;
}
.bridge-section {
width: min(var(--max), calc(100% - 28px));
padding: 24px;
}
.post-grid,
.bridge-grid,
.category-grid,
.series-list {
grid-template-columns: 1fr;
}
.article-body .brainde-speech {
grid-template-columns: 1fr;
}
.article-body .brainde-speech-avatar {
width: 58px;
height: 58px;
}
.article-body .brainde-speech-name {
text-align: left;
}
.article-body .brainde-speech-body::before {
left: 22px;
top: -8px;
border: 0;
border-left: 1px solid rgba(11, 105, 105, .14);
border-top: 1px solid rgba(11, 105, 105, .14);
}
.category-grid {
grid-auto-rows: 230px;
}
.site-footer {
display: grid;
}
.category-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.article-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.about-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.series-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.archive-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.category-hero {
min-height: 440px;
padding: 26px;
}
.category-hero h1 {
font-size: 48px;
}
.article-grid,
.category-sidebar,
.article-sidebar,
.archive-sidebar,
.archive-row,
.check-list,
.gear-card,
.related-grid,
.about-value-grid,
.theme-strip {
grid-template-columns: 1fr;
}
.about-hero-image img {
aspect-ratio: 1.25;
}
.about-mission,
.profile-card-large,
.series-hero,
.series-feature,
.archive-hero,
.archive-featured {
padding: 24px;
}
.series-card-large {
padding: 18px;
}
.search-panel div {
grid-template-columns: 1fr;
}
.archive-row {
padding: 14px;
}
.article-body .brainde-affiliate-card {
grid-template-columns: 1fr;
}
.featured-category-card {
min-height: 460px;
}
.featured-category-card > div {
padding: 24px;
}
}.amazonjs_item {
font-size: 14px;
margin: .5em 0 1em 0;
padding: 25px 10px 25px 10px;
border: 1px solid #ddd;
position: relative;
display: block;
background: white url(//brain-node.com/wp-content/plugins/amazonjs/images/amazonjs.png) no-repeat right bottom;
color: #333;
}
.amazonjs_item a {
color: #e47911;
text-decoration: none;
}
.amazonjs_item a:hover {
color: #996633;
}
.amazonjs_item * {
margin: 0;
padding: 0;
border: 0;
}
.amazonjs_item .amazonjs_indicator {
margin: 0 10px;
clear: both;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_img {
float: left;
display: block;
width: 32px;
height: 32px;
background: transparent url(//brain-node.com/wp-content/plugins/amazonjs/images/ajax-loader.gif) no-repeat center;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_title {
display: block;
line-height: 32px;
margin-left: 42px;
}
.amazonjs_item .amazonjs_indicator .amazonjs_indicator_footer {
clear: both;
}
.amazonjs_item .amazonjs_image {
display: block;
float: left;
margin-right: 10px;
}
.amazonjs_item .amazonjs_info {
display: block;
}
.amazonjs_item .amazonjs_info h4 {
margin: 0 0 5px;
padding: 0;
font-size: 1.2em;
font-weight: bold;
clear: none;
border: none;
}
.amazonjs_item .amazonjs_info ul {
list-style: none;
margin: 0;
padding: 0;
}
.amazonjs_item .amazonjs_info ul li {
list-style: none;
line-height: 1.5em;
font-size: 1em;
margin: 0;
padding: 0;
}
.amazonjs_item .amazonjs_info ul li b {
margin-right: .5em;
color: #555;
font-weight: normal;
}
.amazonjs_item .amazonjs_info .amazonjs_price {
color: #900;
}
.amazonjs_item .amazonjs_info .amazonjs_price span {
color: #666;
margin-left: .5em;
}
.amazonjs_item .amazonjs_info .amazonjs_listprice {
text-decoration: line-through;
}
.amazonjs_item .amazonjs_review {
padding: 0;
font-size: 0.7em;
position: absolute;
right: 34px;
bottom: 4px;
}
#preview .amazonjs_item .amazonjs_review {
display: none;
}
.amazonjs_item .amazonjs_footer {
clear: both;
}
.amazonjs_book .amazonjs_info ul,
.amazonjs_music .amazonjs_info ul {
margin-top: 0.5em;
}
.amazonjs_book .amazonjs_info ul li,
.amazonjs_music .amazonjs_info ul li {
line-height: 1.6em;
}
@media (max-width: 720px) {
.amazonjs_item .amazonjs_info {
margin-bottom: 10px;
}
}
@media (max-width: 480px) {
.amazonjs_item img {
width: 60px;
max-width: 60px;
}
.amazonjs_item .amazonjs_info {
margin-left: 70px !important;
}
.amazonjs_item .amazonjs_info h4 a {
font-size: 0.9em;
}
.amazonjs_item .amazonjs_info ul li {
font-size: 0.9em;
}
}