.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.wp_automatic_gallery_main{
width:500px;
height:500px;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
border:1px solid #eee;
margin-bottom:10px;	
max-width: 100%;
}
.wp_automatic_gallery_btn{
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #eee;
height: 80px;
width: 80px;
float:left;
cursor:pointer;
margin-right:1px;
}
.wp_automatic_gallery_btn:last-child{
clear:right;
}
.wp_automatic_fb_img{
margin-bottom:10px;
}
.wp_automatic_amazon_disclaimer{
text-decoration: underline;
cursor:default;
}
.wp_automatic_demo_btn{
-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
box-shadow:inset 0px 1px 0px 0px #f5978e;
background-color:#f24537;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #d02718;
display:inline-block;
color:#ffffff !important;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:200px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
margin:20px 10px 20px 0;
}
.wp_automatic_demo_btn:hover{
background-color:#c62d1f;
text-decoration:none !important;
}
.wp_automatic_buy_btn{
margin:20px 10px 20px 0;
-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
box-shadow:inset 0px 1px 0px 0px #c1ed9c;
background-color:#9dce2c;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #83c41a;
display:inline-block;
color:#ffffff !important;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:200px;
text-decoration:none !important;
text-align:center;
text-shadow:1px 1px 0px #689324;
}
.wp_automatic_buy_btn:hover{
background-color:#8cb82b;
text-decoration:none !important;
}:root {
--bg-color: #ffffff;
--text-color: #111111;
--text-muted: #666666;
--border-color: #eeeeee;
--accent-color: #000000;
--card-radius: 16px;
--container-width: 1400px;
--blog-container-width: 800px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
} .container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.site-header {
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
z-index: 1000;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img.site-logo {
height: 42px;
width: auto;
display: block;
transition: transform 0.3s ease;
}
.logo a:hover img.site-logo {
transform: scale(1.05);
}
.nav-links {
display: flex;
gap: 24px;
font-weight: 600;
font-size: 14px;
}
.nav-links a.active {
color: var(--accent-color);
}
.nav-links a:not(.active) {
color: var(--text-muted);
}
.search-bar {
flex-grow: 1;
max-width: 500px;
margin: 0 40px;
}
.search-bar input {
width: 100%;
padding: 10px 20px;
border-radius: 20px;
border: 1px solid var(--border-color);
background: #f1f1f1;
font-size: 14px;
} .masonry-gallery {
margin: 0 auto;
width: auto;
max-width: var(--container-width);
padding-bottom: 60px;
position: relative;
}
.masonry-card {
width: 300px;
margin-bottom: 25px;
}
@media (max-width: 420px) {
.grid-sizer,
.masonry-card {
width: 100%;
margin-bottom: 20px;
}
}
.grid-item {
break-inside: avoid;
margin-bottom: 20px;
} .masonry-image-wrapper {
position: relative;
background: #f4f4f5;
border-radius: 20px;
overflow: hidden;
min-height: 200px; }
.masonry-image-wrapper img {
display: block;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.masonry-image-wrapper.is-loaded img {
opacity: 1;
} .skeleton-loading {
position: relative;
overflow: hidden;
background-color: #f4f4f5;
}
.skeleton-loading::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0));
animation: shimmer 2s infinite;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
.card-title {
font-size: 14px;
font-weight: 600;
margin-top: 8px;
}
.card-meta {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
} .page-header {
text-align: center;
padding: 60px 0 20px;
}
.page-header h1 {
font-size: 72px;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: -2px;
}
.page-header p {
color: var(--text-muted);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 40px;
} .search-bar {
display: block;
margin: 20px 0 30px;
width: 100%;
max-width: 100%;
}
.header-inner {
flex-wrap: wrap;
gap: 10px;
}
.logo {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 0;
transition: margin 0.3s ease;
}
.logo img.site-logo {
margin: 0 auto;
}
.nav-links {
justify-content: center;
width: 100%;
align-items: center;
gap: 20px;
}
.nav-links a {
display: flex; align-items: center;
}
} .blog-post-card {
display: grid;
grid-template-columns: 350px 1fr;
gap: 40px;
margin-bottom: 80px;
align-items: center;
}
.blog-post-image {
border-radius: 20px;
overflow: hidden;
line-height: 0;
}
.blog-post-image img {
width: 100%;
height: 350px;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-post-card:hover .blog-post-image img {
transform: scale(1.05);
}
.blog-post-content h2 {
font-size: 36px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 15px;
letter-spacing: -1px;
}
.blog-post-content .excerpt {
font-size: 18px;
line-height: 1.6;
color: #444;
margin-bottom: 20px;
}
.blog-featured-card {
grid-template-columns: 1fr;
margin-bottom: 100px;
}
.blog-featured-card .blog-post-image img {
height: 500px;
}
.blog-featured-card h2 {
font-size: 56px;
letter-spacing: -2px;
font-weight: 900;
}
.article-content {
font-family: var(--font-serif);
font-size: 21px;
line-height: 1.65;
color: #1a1a1a;
letter-spacing: -0.01em;
}
.article-header h1 {
font-family: var(--font-sans);
font-weight: 800;
} #reading-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--accent-color);
z-index: 5000;
transition: width 0.1s ease;
} .search-bar {
position: relative; }
.search-bar form {
position: relative;
display: flex;
align-items: center;
}
.search-bar input {
width: 100%;
padding: 10px 110px 10px 20px; border-radius: 20px;
border: 1px solid var(--border-color);
background: #f1f1f1;
font-size: 14px;
} .search-bar input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
} .clear-search-btn {
position: absolute;
right: 105px; top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
z-index: 3;
color: #666;
}
.clear-search-btn:hover {
background: #ffffff;
transform: translateY(-50%) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.color-picker-input-wrapper {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: auto;
height: 32px;
cursor: pointer;
border-radius: 999px;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08); padding: 0 14px 0 12px;
display: flex;
align-items: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); }
.color-picker-input-wrapper:hover {
transform: translateY(-50%) scale(1.02);
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
} .color-picker-input-wrapper input[type="color"] {
position: absolute;
top: -10px;
left: -10px;
width: 200%;
height: 200%;
opacity: 0;
cursor: pointer;
padding: 0;
margin: 0;
z-index: 2;
}
.picker-content {
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: #111;
white-space: nowrap;
}
.picker-content svg {
transition: transform 0.3s ease;
}
.color-picker-input-wrapper:hover .picker-content svg {
transform: rotate(90deg); }
.picker-label {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 11px;
font-weight: 700;
} .custom-picker-popup {
position: absolute;
top: calc(100% + 15px);
right: 0;
width: 240px;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 12px;
z-index: 1000;
display: none;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.custom-picker-popup.active {
display: block;
animation: fadeInScale 0.2s ease-out;
} .picker-presets {
margin-bottom: 12px;
}
.preset-title {
font-size: 10px;
text-transform: uppercase;
color: #888;
font-weight: 700;
margin-bottom: 8px;
display: block;
letter-spacing: 0.5px;
}
.preset-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.preset-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
transition: transform 0.1s;
}
.preset-swatch:hover {
transform: scale(1.2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.picker-divider {
height: 1px;
background: #f0f0f0;
margin: 12px 0;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: translateY(-5px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.picker-saturation {
width: 100%;
height: 150px;
position: relative;
border-radius: 8px;
overflow: hidden;
background: red; cursor: crosshair;
margin-bottom: 12px;
}
.picker-saturation .white-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.picker-saturation .black-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.picker-hue {
width: 100%;
height: 12px;
position: relative;
border-radius: 6px;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
cursor: pointer;
}
.saturation-handle {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hue-handle {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.picker-search-btn {
width: 100%;
margin-top: 15px;
padding: 10px;
background: #111;
color: #fff;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
}
.picker-search-btn:hover {
background: #333;
}
.search-overlay {
position: absolute;
top: calc(100% + 15px);
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 20px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 5000;
}
.search-overlay.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-overlay-inner {
padding: 24px;
}
.search-section-label {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
margin-bottom: 15px;
}
.color-bubbles {
display: flex;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.color-bubble,
.insde-color-bubble {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
transition: transform 0.2s ease;
cursor: pointer;
flex-shrink: 0;
}
.insde-color-bubble:hover {
transform: scale(1.2);
}
.border-light {
border: 1px solid #ddd;
}
.search-results-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.search-result-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
border-radius: 12px;
transition: background 0.2s;
text-decoration: none;
color: inherit;
}
.search-result-item:hover {
background: #f8f8f8;
}
.search-result-item img,
.thumb-placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
background: #eee;
}
.result-type {
display: block;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--text-muted);
}
.result-title {
font-size: 14px;
font-weight: 700;
margin: 2px 0 0;
color: #000;
}
.search-placeholder {
text-align: center;
color: #ccc;
padding: 20px 0;
}
.search-placeholder p {
font-size: 13px;
margin-top: 10px;
}
.search-loading,
.no-results {
padding: 20px;
text-align: center;
font-size: 13px;
color: #999;
} .trending-tags-section {
margin-bottom: 30px;
}
.trending-tags-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.trending-tag-pill {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #f8f8f8;
border: 1px solid #e5e5e5;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #333;
text-decoration: none;
transition: all 0.2s ease;
}
.trending-tag-pill:hover {
background: #000;
color: #fff;
border-color: #000;
transform: translateY(-1px);
} .recent-searches-section {
margin-bottom: 30px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.recent-searches-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.recent-search-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
transition: background 0.2s;
}
.recent-search-item:hover {
background: #f8f8f8;
}
.recent-icon {
flex-shrink: 0;
color: #999;
}
.recent-search-link {
flex: 1;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
}
.recent-search-link:hover {
color: #000;
}
.recent-remove-btn {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all 0.2s;
color: #999;
}
.recent-search-item:hover .recent-remove-btn {
opacity: 1;
}
.recent-remove-btn:hover {
background: #f0f0f0;
color: #000;
}
@media (max-width: 768px) {
.search-header {
padding: 15px 20px;
}
.search-bar {
width: 100%;
margin: 0;
}
.search-overlay {
position: fixed;
top: 110px;
left: 0;
width: 100vw;
height: calc(100vh - 110px);
border-radius: 0;
overflow-y: auto;
}
} .article-palette-section {
width: 100%;
}
.palette-label {
display: block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #999;
letter-spacing: 1.5px;
margin-bottom: 20px;
}
.premium-palette {
display: flex;
width: 100%;
height: 60px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
}
.swatch-item {
flex: 1;
height: 100%;
background-color: var(--swatch-color);
position: relative;
transition: flex 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.2s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid rgba(0, 0, 0, 0.03);
min-width: 0;
}
.swatch-item:last-child {
border-right: none;
}
.swatch-item:hover {
flex: 2.5;
z-index: 2;
}
.swatch-hex {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 800;
color: #fff;
opacity: 0;
transform: translateY(5px);
transition: all 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.no-results-found .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
} .pagination-wrapper {
padding: 60px 0 100px;
display: flex;
justify-content: center;
}
.pagination {
display: flex;
gap: 10px;
align-items: center;
}
.pagination .nav-links {
display: flex;
gap: 8px;
align-items: center;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 15px;
border-radius: 12px;
border: 1px solid var(--border-color);
font-weight: 700;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
background: #fff;
color: var(--text-color);
}
.pagination .page-numbers:hover:not(.current) {
border-color: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.pagination .page-numbers.current {
background: #000;
color: #fff;
border-color: #000;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
background: #f8f8f8;
border: 1px solid #eee;
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
background: #000;
color: #fff;
border-color: #000;
}
.pagination .page-numbers svg {
margin: 0 -5px;
}
.pagination .page-numbers.dots {
border: none;
background: transparent;
cursor: default;
}
.swatch-item:hover .swatch-hex {
opacity: 1;
transform: translateY(0);
} .swatch-item[style*="#FFFFFF"] .swatch-hex,
.swatch-item[style*="#ffffff"] .swatch-hex,
.swatch-item[style*="rgb(255, 255, 255)"] .swatch-hex {
color: #000;
text-shadow: none;
} .palette-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
color: #fff;
padding: 12px 24px;
border-radius: 50px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
z-index: 10000;
opacity: 0;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
white-space: nowrap;
pointer-events: none;
display: flex;
align-items: center;
}
.palette-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
} .skeleton-container {
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow: hidden;
border-radius: inherit; } .skeleton-shimmer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: translateX(-100%);
animation: shimmer 1.5s infinite;
z-index: 1;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
} .lazy-img {
opacity: 0;
filter: blur(10px);
transition: opacity 0.4s ease-out, filter 0.4s ease-out, transform 0.3s ease; will-change: opacity, filter;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 2; }
.lazy-img.loaded {
opacity: 1;
filter: blur(0);
}  .editorial-hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
padding: 120px 80px;
align-items: center;
background: #fff;
}
.hero-typography h1 {
font-family: var(--font-serif);
font-size: clamp(8rem, 15vw, 12rem);
line-height: 0.85;
font-weight: 900;
color: #000;
margin-bottom: 0.2em;
}
.hero-tagline {
font-family: var(--font-sans);
font-size: 1.1rem;
color: var(--text-muted);
margin-top: 40px;
max-width: 400px;
line-height: 1.6;
}
.hero-collage {
position: relative;
height: 600px;
animation: float 8s ease-in-out infinite;
}
.collage-image {
position: absolute;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
animation: floatItem 6s ease-in-out infinite;
}
.collage-image:nth-child(1) {
width: 280px;
top: 0;
left: 0;
z-index: 4;
}
.collage-image:nth-child(2) {
width: 240px;
top: 120px;
right: 60px;
z-index: 3;
animation-delay: 1s;
}
.collage-image:nth-child(3) {
width: 200px;
bottom: 100px;
left: 80px;
z-index: 2;
animation-delay: 2s;
}
.collage-image:nth-child(4) {
width: 180px;
bottom: 0;
right: 0;
z-index: 1;
animation-delay: 3s;
}
.collage-image img {
width: 100%;
height: auto;
display: block;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
@keyframes floatItem {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
} .container-editorial {
max-width: 1600px;
margin: 0 auto;
padding: 0 80px;
} .section-title {
font-family: var(--font-serif);
font-size: 4rem;
font-weight: 900;
margin-bottom: 60px;
color: #000;
} .journal-section {
padding: 200px 0;
background: #fff;
} .editorial-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
}
.featured-post {
grid-column: span 12;
margin-bottom: 2rem;
}
.grid-posts {
grid-column: span 12;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
} .journal-card {
border-radius: 3rem;
overflow: hidden;
background: #fff;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.journal-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.featured-post .journal-image {
height: 500px;
overflow: hidden;
}
.journal-image {
height: 280px;
overflow: hidden;
background: #f5f5f5;
}
.journal-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.journal-card:hover .journal-image img {
transform: scale(1.05);
}
.journal-content {
padding: 2rem;
}
.featured-post .journal-content {
padding: 3rem;
}
.journal-meta {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 1rem;
}
.journal-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1rem;
}
.featured-post .journal-title {
font-size: 3rem;
margin-bottom: 1.5rem;
} .author-header-v2 {
overflow: hidden;
}
.author-main-title {
font-size: clamp(3.5rem, 8vw, 7rem);
line-height: 0.9;
}
.author-bio-text {
font-family: var(--font-sans);
font-weight: 300;
}
.author-avatar-large .avatar-ring {
display: inline-block;
padding: 10px;
border: 2px dashed rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.author-header-v2:hover .avatar-ring {
border-color: #000;
transform: rotate(5deg);
} .author-tabs-nav {
display: flex;
align-items: center;
gap: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin-top: 40px;
}
.author-tab-btn {
background: none !important;
border: none !important;
padding: 20px 0 !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #a1a1aa !important;
cursor: pointer !important;
position: relative;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
outline: none !important;
box-shadow: none !important;
}
.author-tab-btn:hover {
color: #000 !important;
}
.author-tab-btn.active {
color: #000 !important;
}
.author-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
}
.journal-title a {
color: #000;
transition: color 0.2s ease;
}
.author-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: #000;
}
.tab-count {
font-size: 10px;
background: #f4f4f5;
padding: 2px 8px;
border-radius: 20px;
color: #71717a;
font-weight: 700;
transition: all 0.3s ease;
}
.author-tab-btn:hover .tab-count {
background: #e4e4e7;
color: #3f3f46;
}
.author-tab-btn.active .tab-count {
background: #000;
color: #fff;
}
.author-tab-content {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.author-tab-content.active {
display: block;
opacity: 1;
}
.no-results-premium {
padding: 120px 0;
text-align: center;
font-size: 20px;
font-weight: 300;
color: #a1a1aa;
width: 100%;
}
.journal-title a:hover {
color: var(--text-muted);
}
.journal-excerpt {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.read-more {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform 0.2s ease;
display: inline-block;
}
.read-more:hover {
transform: translateX(4px);
} .inspiration-section {
padding: 200px 0;
background: #fafafa;
} @media (max-width: 1200px) {
.editorial-hero {
grid-template-columns: 1fr;
padding: 80px 40px;
min-height: auto;
}
.hero-collage {
height: 400px;
margin-top: 60px;
}
.container-editorial {
padding: 0 40px;
}
.grid-posts {
grid-template-columns: repeat(2, 1fr);
}
.section-title {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.hero-typography h1 {
font-size: 6rem;
}
.grid-posts {
grid-template-columns: 1fr;
}
.journal-section,
.inspiration-section {
padding: 100px 0;
}
.section-title {
font-size: 2.5rem;
}
.featured-post .journal-title {
font-size: 2rem;
}
}  .design-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 60px;
} .design-hero {
min-height: 90vh;
display: flex;
align-items: center;
padding: 100px 0;
background: #fff;
}
.design-hero .design-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.hero-write {
font-family: var(--font-serif);
font-size: clamp(6rem, 10vw, 9rem);
font-weight: 700;
line-height: 0.9;
margin-bottom: 30px;
color: #000;
}
.hero-desc {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.7;
color: #666;
margin-bottom: 40px;
max-width: 450px;
}
.hero-btn {
display: inline-block;
padding: 14px 32px;
background: #000;
color: #fff;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 50px;
transition: all 0.3s ease;
margin-bottom: 30px;
}
.hero-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.hero-meta {
font-family: var(--font-sans);
font-size: 0.75rem;
color: #999;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.hero-image-card {
border-radius: 3rem;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
aspect-ratio: 4/5;
background: #f5f5f5;
}
.hero-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
} .design-journal {
padding: 120px 0;
background: #fff;
}
.journal-header {
max-width: 800px;
margin-bottom: 80px;
}
.journal-label {
font-family: var(--font-serif);
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
color: #000;
}
.journal-desc {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.7;
color: #666;
margin-bottom: 30px;
}
.journal-link-all {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
color: #000;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: underline;
transition: color 0.3s ease;
}
.journal-link-all:hover {
color: #666;
} .journal-grid-2col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
}
.journal-card-grid {
display: flex;
flex-direction: column;
}
.journal-card-image {
border-radius: 2rem;
overflow: hidden;
background: #f5f5f5;
aspect-ratio: 4/5;
margin-bottom: 24px;
}
.journal-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.journal-card-grid:hover .journal-card-image img {
transform: scale(1.05);
}
.journal-card-content {
flex: 1;
display: flex;
flex-direction: column;
}
.journal-card-meta {
margin-bottom: 12px;
}
.journal-category {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #999;
}
.journal-card-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 12px;
}
.journal-card-title a {
color: #000;
transition: color 0.3s ease;
}
.journal-card-title a:hover {
color: #666;
}
.journal-card-excerpt {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: #666;
margin-bottom: 1.5rem;
}
.journal-card-footer {
margin-top: auto;
}
.journal-date {
font-family: var(--font-sans);
font-size: 0.75rem;
color: #999;
text-transform: uppercase;
letter-spacing: 0.1em;
} .design-quote {
padding: 150px 0;
background: #fff;
text-align: center;
}
.quote-large {
font-family: var(--font-serif);
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 700;
font-style: italic;
line-height: 1.2;
color: #000;
margin-bottom: 40px;
}
.quote-meta {
font-family: var(--font-sans);
font-size: 0.85rem;
color: #999;
text-transform: uppercase;
letter-spacing: 0.2em;
} .design-dark {
padding: 150px 0;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 30%, #2d1b4e 70%, #1a1a2e 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.dark-labels {
display: flex;
gap: 30px;
margin-bottom: 60px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.5);
}
.dark-label-special {
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.dark-label-archive {
padding-bottom: 8px;
}
.dark-content-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 100px;
align-items: start;
}
.dark-heading-new {
font-family: var(--font-serif);
font-size: clamp(4rem, 8vw, 7rem);
font-weight: 400;
line-height: 1;
margin-bottom: 40px;
color: #fff;
}
.dark-heading-new em {
font-style: italic;
font-weight: 400;
}
.dark-quote {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 50px;
max-width: 400px;
}
.dark-author {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 60px;
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
color: #fff;
}
.author-role {
font-family: var(--font-sans);
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.material-palette {
display: flex;
flex-direction: column;
gap: 16px;
}
.palette-label {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.5);
}
.palette-swatches {
display: flex;
gap: 12px;
}
.swatch {
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-right {
position: relative;
height: 600px;
}
.dark-image-card {
position: absolute;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
}
.dark-image-card:hover {
transform: translateY(-8px) !important;
}
.dark-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dark-card-1 {
width: 350px;
height: 450px;
top: 50px;
left: 50px;
z-index: 3;
transform: rotate(-3deg);
}
.dark-card-2 {
width: 200px;
height: 200px;
top: 0;
right: 0;
z-index: 4;
transform: rotate(8deg);
}
.dark-card-3 {
width: 280px;
height: 200px;
bottom: 80px;
left: 0;
z-index: 2;
transform: rotate(-5deg);
}
.card-label {
position: absolute;
bottom: 20px;
left: 20px;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 20px;
} .design-see {
padding: 150px 0;
background: #fff;
}
.see-heading {
font-family: var(--font-serif);
font-size: clamp(6rem, 10vw, 9rem);
font-weight: 700;
line-height: 0.9;
margin-bottom: 80px;
color: #000;
}
.see-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.see-card {
border-radius: 2rem;
overflow: hidden;
background: #f5f5f5;
transition: transform 0.3s ease;
}
.see-card:hover {
transform: scale(1.02);
}
.see-card img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
}
.see-title {
padding: 20px;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
color: #000;
} @media (max-width: 1200px) {
.design-container {
padding: 0 40px;
}
.design-hero .design-container {
grid-template-columns: 1fr;
gap: 60px;
}
.journal-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.dark-images {
grid-template-columns: repeat(2, 1fr);
}
.see-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.design-container {
padding: 0 30px;
}
.design-hero,
.design-journal,
.design-quote,
.design-dark,
.design-see {
padding: 80px 0;
}
.hero-write,
.see-heading {
font-size: 5rem;
}
.dark-images {
grid-template-columns: 1fr;
}
.see-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
} body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
opacity: 0.03;
pointer-events: none;
z-index: 9999;
} .luxury-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 80px;
} .floating-badge {
position: fixed;
top: 120px;
right: 80px;
z-index: 100;
animation: organicFloat 6s ease-in-out infinite;
}
.badge-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #000;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
animation: spin 20s linear infinite;
}
@keyframes organicFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} .aperture-hero {
min-height: 100vh;
display: flex;
align-items: center;
background: #fafafa;
padding: 120px 0;
}
.hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.hero-massive {
font-family: var(--font-serif);
font-size: 11vw;
font-weight: 700;
line-height: 0.9;
margin-bottom: 40px;
}
.hero-massive .solid {
display: block;
color: #000;
}
.hero-massive .stroke {
display: block;
-webkit-text-stroke: 2px #000;
-webkit-text-fill-color: transparent;
transition: -webkit-text-fill-color 0.5s ease;
}
.hero-massive .stroke:hover {
-webkit-text-fill-color: #4f46e5;
}
.hero-tagline {
font-family: var(--font-sans);
font-size: 1.1rem;
color: #666;
margin-bottom: 50px;
max-width: 500px;
line-height: 1.7;
}
.luxury-cta {
display: inline-block;
padding: 18px 48px;
background: #000;
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.luxury-cta:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: #4f46e5;
}
.aperture-window {
border-radius: 4rem;
overflow: hidden;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.12);
aspect-ratio: 4/5;
background: #fff;
}
.aperture-window img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.aperture-window:hover img {
transform: scale(1.05);
} .editorial-journal {
padding: 200px 0;
background: #fff;
}
.section-label-luxury {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5em;
color: #999;
margin-bottom: 80px;
}
.staggered-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.editorial-card {
transition: transform 0.3s ease;
animation: slideUp 0.6s ease forwards;
opacity: 0;
}
.editorial-card:nth-child(1) {
animation-delay: 0.1s;
}
.editorial-card:nth-child(2) {
animation-delay: 0.2s;
}
.editorial-card:nth-child(3) {
animation-delay: 0.3s;
}
.editorial-card:nth-child(4) {
animation-delay: 0.4s;
}
.editorial-card:nth-child(5) {
animation-delay: 0.5s;
}
.editorial-card:nth-child(6) {
animation-delay: 0.6s;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-offset {
margin-top: 24px;
}
.featured-wide {
grid-column: span 2;
}
.featured-wide .editorial-image {
aspect-ratio: 16/10;
}
.editorial-image {
position: relative;
border-radius: 3rem;
overflow: hidden;
background: #f5f5f5;
aspect-ratio: 3/4;
margin-bottom: 20px;
filter: grayscale(100%);
transition: filter 0.5s ease;
}
.editorial-card:hover .editorial-image {
filter: grayscale(0%);
}
.editorial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-badge {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 20px;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
color: #000;
}
.editorial-meta {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #999;
}
.editorial-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 12px;
}
.featured-wide .editorial-title {
font-size: 2.5rem;
}
.editorial-title a {
color: #000;
transition: color 0.3s ease;
}
.editorial-title a:hover {
color: #4f46e5;
}
.editorial-excerpt {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.6;
color: #666;
} .glass-manifesto {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f5f5f5" width="1200" height="600"/></svg>') center/cover;
overflow: hidden;
}
.manifesto-blur {
backdrop-filter: blur(150px);
background: rgba(255, 255, 255, 0.1);
padding: 100px 60px;
border-radius: 40px;
text-align: center;
max-width: 900px;
}
.manifesto-quote {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
font-style: italic;
line-height: 1.2;
color: #000;
margin-bottom: 30px;
}
.manifesto-author {
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #666;
} .visual-archive {
padding: 200px 0;
background: #fafafa;
}
.masonry-lift {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.lift-card {
border-radius: 3rem;
overflow: hidden;
background: #fff;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: grayscale(100%);
}
.lift-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
filter: grayscale(0%);
}
.lift-image {
overflow: hidden;
aspect-ratio: 3/4;
background: #f5f5f5;
}
.lift-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.lift-card:hover .lift-image img {
transform: scale(1.1);
}
.lift-info {
padding: 24px;
}
.lift-category {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #4f46e5;
display: block;
margin-bottom: 8px;
}
.lift-title {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
color: #000;
} @media (max-width: 1400px) {
.luxury-container {
padding: 0 60px;
}
.floating-badge {
right: 60px;
}
}
@media (max-width: 1200px) {
.hero-split {
grid-template-columns: 1fr;
gap: 60px;
}
.staggered-grid {
grid-template-columns: repeat(2, 1fr);
}
.masonry-lift {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.luxury-container {
padding: 0 30px;
}
.aperture-hero {
padding: 80px 0;
}
.hero-massive {
font-size: 15vw;
}
.floating-badge {
top: 80px;
right: 30px;
}
.badge-circle {
width: 80px;
height: 80px;
font-size: 0.6rem;
}
.editorial-journal,
.visual-archive {
padding: 100px 0;
}
.staggered-grid {
grid-template-columns: 1fr;
}
.featured-wide {
grid-column: span 1;
}
.stagger-offset {
margin-top: 0;
}
.masonry-lift {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
} @media (max-width: 1200px) {
.dark-content-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.dark-right {
height: 500px;
}
.dark-card-1 {
width: 300px;
height: 380px;
left: 30px;
}
.dark-card-2 {
width: 180px;
height: 180px;
}
.dark-card-3 {
width: 240px;
height: 180px;
}
}
@media (max-width: 768px) {
.design-dark {
padding: 100px 0;
}
.dark-labels {
flex-direction: column;
gap: 15px;
margin-bottom: 40px;
}
.dark-heading-new {
font-size: 4rem;
}
.dark-right {
height: 400px;
}
.dark-card-1 {
width: 220px;
height: 280px;
top: 30px;
left: 20px;
transform: rotate(-2deg);
}
.dark-card-2 {
width: 140px;
height: 140px;
top: 10px;
right: 10px;
transform: rotate(5deg);
}
.dark-card-3 {
width: 180px;
height: 140px;
bottom: 40px;
left: 10px;
transform: rotate(-3deg);
}
.palette-swatches {
gap: 8px;
}
.swatch {
width: 32px;
height: 32px;
}
} .latest-observations {
padding: 120px 0;
background: #fff;
}
.observations-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
margin-bottom: 80px;
align-items: end;
}
.observations-title {
font-family: var(--font-serif);
font-size: clamp(4rem, 8vw, 6rem);
font-weight: 700;
line-height: 1;
color: #000;
}
.observations-title em {
font-style: italic;
}
.observations-meta {
display: flex;
flex-direction: column;
gap: 20px;
}
.observations-desc {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.7;
color: #666;
}
.all-articles-link {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #000;
align-self: flex-start;
transition: opacity 0.3s ease;
}
.all-articles-link:hover {
opacity: 0.6;
}
.featured-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 80px;
}
.featured-main {
position: relative;
}
.featured-image {
position: relative;
border-radius: 3rem;
overflow: hidden;
aspect-ratio: 4/5;
background: #f5f5f5;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.featured-image:hover img {
transform: scale(1.05);
}
.featured-label {
position: absolute;
bottom: 30px;
left: 30px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 20px;
}
.featured-side {
display: flex;
flex-direction: column;
gap: 30px;
}
.side-post {
display: flex;
gap: 20px;
}
.side-post-image {
flex-shrink: 0;
width: 180px;
height: 180px;
border-radius: 2rem;
overflow: hidden;
background: #f5f5f5;
}
.side-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.side-post:hover .side-post-image img {
transform: scale(1.05);
}
.side-post-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.side-post-category {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #999;
margin-bottom: 10px;
}
.side-post-title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.side-post-title a {
color: #000;
transition: color 0.3s ease;
}
.side-post-title a:hover {
color: #666;
}
.observations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.observation-card {
display: flex;
flex-direction: column;
}
.observation-image {
border-radius: 2rem;
overflow: hidden;
aspect-ratio: 4/5;
background: #f5f5f5;
margin-bottom: 20px;
}
.observation-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.observation-card:hover .observation-image img {
transform: scale(1.05);
}
.observation-content {
flex: 1;
}
.observation-category {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #999;
display: block;
margin-bottom: 10px;
}
.observation-title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 10px;
}
.observation-title a {
color: #000;
transition: color 0.3s ease;
}
.observation-title a:hover {
color: #666;
}
.observation-excerpt {
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.6;
color: #666;
}
.inspiration-masonry {
padding: 120px 0;
background: #fafafa;
}
.masonry-title {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 30px;
color: #000;
}
.masonry-grid-inspiration {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.masonry-item {
border-radius: 2rem;
overflow: hidden;
background: #fff;
transition: transform 0.3s ease;
}
.masonry-item:hover {
transform: translateY(-5px);
}
.masonry-item img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
}
@media (max-width: 1200px) {
.observations-header {
grid-template-columns: 1fr;
gap: 40px;
}
.featured-layout {
grid-template-columns: 1fr;
}
.observations-grid {
grid-template-columns: repeat(2, 1fr);
}
.masonry-grid-inspiration {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.latest-observations,
.inspiration-masonry {
padding: 80px 0;
}
.observations-title {
font-size: 4rem;
}
.side-post {
flex-direction: column;
}
.side-post-image {
width: 100%;
height: 250px;
}
.observations-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.masonry-grid-inspiration {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
} .masonry-item {
border-radius: 2rem;
overflow: hidden;
background: #fff;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.masonry-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.masonry-link {
display: block;
}
.masonry-image {
position: relative;
overflow: hidden;
}
.masonry-image img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.masonry-item:hover .masonry-image img {
transform: scale(1.05);
}
.masonry-info {
padding: 20px;
}
.masonry-category {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #999;
display: block;
margin-bottom: 8px;
}
.masonry-item-title {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color: #000;
transition: color 0.3s ease;
}
.masonry-item:hover .masonry-item-title {
color: #666;
}  body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: 9999;
} .editorial-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 80px;
} .editorial-observations {
padding: 120px 0;
background: #FFFFFF;
} .editorial-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 120px;
margin-bottom: 100px;
align-items: end;
}
.editorial-headline {
font-family: var(--font-serif);
font-size: clamp(6rem, 10vw, 12rem);
font-style: italic;
font-weight: 400;
line-height: 0.8;
letter-spacing: -0.02em;
color: #000000;
}
.editorial-headline em {
font-style: italic;
}
.editorial-meta {
display: flex;
flex-direction: column;
gap: 30px;
}
.meta-description {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.8;
color: #000000;
max-width: 500px;
}
.meta-link,
.label-tracking {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: #000000;
transition: opacity 0.3s ease;
}
.meta-link:hover {
opacity: 0.5;
} .bento-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
gap: 1px;
background: #f4f4f5;
border: 1px solid #f4f4f5;
margin-bottom: 1px;
}
.bento-featured {
grid-row: span 2;
background: #FFFFFF;
display: flex;
flex-direction: column;
}
.bento-side {
background: #FFFFFF;
display: flex;
flex-direction: column;
} .bento-featured-image {
aspect-ratio: 16/10;
overflow: hidden;
background: #f5f5f5;
}
.bento-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.bento-featured:hover .bento-featured-image img {
transform: scale(1.02);
}
.bento-featured-content {
padding: 60px;
flex: 1;
display: flex;
flex-direction: column;
}
.bento-featured-title {
font-family: var(--font-serif);
font-size: clamp(3rem, 5vw, 6rem);
font-style: italic;
font-weight: 400;
line-height: 0.9;
margin: 20px 0;
}
.bento-featured-title a {
color: #000000;
transition: opacity 0.3s ease;
}
.bento-featured-title a:hover {
opacity: 0.6;
}
.bento-featured-excerpt {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.7;
color: #000000;
max-width: 600px;
margin-top: auto;
} .bento-side-image {
aspect-ratio: 4/5;
overflow: hidden;
background: #f5f5f5;
}
.bento-side-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.bento-side:hover .bento-side-image img {
transform: scale(1.02);
}
.bento-side-content {
padding: 40px;
flex: 1;
}
.bento-side-title {
font-family: var(--font-serif);
font-size: 2rem;
font-style: italic;
font-weight: 400;
line-height: 1.1;
margin-top: 15px;
}
.bento-side-title a {
color: #000000;
transition: opacity 0.3s ease;
}
.bento-side-title a:hover {
opacity: 0.6;
} .editorial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: #f4f4f5;
border: 1px solid #f4f4f5;
margin-top: 1px;
}
.editorial-card {
background: #FFFFFF;
display: flex;
flex-direction: column;
}
.editorial-card-image {
aspect-ratio: 4/5;
overflow: hidden;
background: #f5f5f5;
}
.editorial-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.editorial-card:hover .editorial-card-image img {
transform: scale(1.02);
}
.editorial-card-content {
padding: 40px;
flex: 1;
}
.editorial-card-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
font-weight: 400;
line-height: 1.2;
margin-top: 15px;
}
.editorial-card-title a {
color: #000000;
transition: opacity 0.3s ease;
}
.editorial-card-title a:hover {
opacity: 0.6;
} .visual-archive {
padding: 120px 0;
background: #FFFFFF;
}
.archive-headline {
font-family: var(--font-serif);
font-size: clamp(5rem, 8vw, 8rem);
font-style: italic;
font-weight: 400;
line-height: 0.8;
letter-spacing: -0.02em;
color: #000000;
margin-bottom: 80px;
}
.archive-headline em {
font-style: italic;
}  @media (max-width: 1400px) {
.editorial-container {
padding: 0 60px;
}
.editorial-headline {
font-size: 8rem;
}
.archive-headline {
font-size: 6rem;
}
}
@media (max-width: 1200px) {
.editorial-container {
padding: 0 40px;
}
.editorial-header {
grid-template-columns: 1fr;
gap: 60px;
}
.bento-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.bento-featured {
grid-row: span 1;
}
.editorial-grid {
grid-template-columns: repeat(2, 1fr);
}
.archive-masonry {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.editorial-container {
padding: 0 30px;
}
.editorial-observations,
.visual-archive {
padding: 80px 0;
}
.editorial-headline {
font-size: 5rem;
}
.archive-headline {
font-size: 4rem;
}
.bento-featured-content,
.bento-side-content,
.editorial-card-content,
.archive-info {
padding: 30px;
}
.bento-featured-title {
font-size: 3rem;
}
.editorial-grid {
grid-template-columns: 1fr;
}
.archive-masonry {
grid-template-columns: repeat(2, 1fr);
}
} .bento-side {
background: #FFFFFF;
display: flex;
flex-direction: column;
border-bottom: 1px solid #f4f4f5;
}
.bento-side:last-child {
border-bottom: none;
}
.bento-side-content {
padding: 50px;
flex: 1;
}
.bento-side-title {
font-family: var(--font-serif);
font-size: 2rem;
font-style: italic;
font-weight: 400;
line-height: 1.2;
margin: 15px 0;
}
.bento-side-title a {
color: #000000;
transition: opacity 0.3s ease;
}
.bento-side-title a:hover {
opacity: 0.6;
}
.bento-side-excerpt {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.7;
color: #666666;
margin-top: 15px;
}  .featured-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.featured-date {
font-family: var(--font-sans);
font-size: 0.75rem;
color: #999999;
text-transform: uppercase;
letter-spacing: 0.1em;
} .bento-featured-title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 4vw, 4.5rem);
font-style: italic;
font-weight: 400;
line-height: 1.1;
margin: 0 0 25px 0;
} .bento-featured-excerpt {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.8;
color: #666666;
max-width: 600px;
margin-top: auto;
} .bento-side-content {
padding: 45px 50px;
flex: 1;
}
.bento-side-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-style: italic;
font-weight: 400;
line-height: 1.25;
margin: 12px 0 15px 0;
}
.bento-side-excerpt {
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.7;
color: #666666;
margin-top: 12px;
} .label-tracking {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #000000;
} .bento-featured-content {
padding: 50px 60px;
flex: 1;
display: flex;
flex-direction: column;
} .bento-side {
background: #FFFFFF;
display: flex;
flex-direction: column;
border-bottom: 1px solid #e5e5e5;
}
.bento-side:last-child {
border-bottom: none;
}
@media (max-width: 768px) {
.bento-featured-content {
padding: 40px;
}
.bento-side-content {
padding: 35px 40px;
}
.bento-featured-title {
font-size: 2.5rem;
}
.bento-side-title {
font-size: 1.5rem;
}
} .bento-grid-new {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
border-top: 1px solid #f4f4f5;
padding-top: 60px;
align-items: start;
} .bento-featured-new {
display: flex;
flex-direction: column;
gap: 50px;
}
.featured-image-new {
position: relative;
aspect-ratio: 16/9;
border-radius: 3rem;
overflow: hidden;
background: #fafafa;
border: 1px solid #f4f4f5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 1s ease;
}
.bento-featured-new:hover .featured-image-new {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.featured-image-new img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4);
transition: all 2s ease;
}
.bento-featured-new:hover .featured-image-new img {
filter: grayscale(0);
transform: scale(1.05);
}
.image-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.02);
}
.featured-content-new {
max-width: 900px;
display: flex;
flex-direction: column;
gap: 30px;
}
.featured-meta-new {
display: flex;
align-items: center;
gap: 25px;
}
.category-badge {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5em;
color: #000000;
background: #fafafa;
padding: 8px 20px;
border-radius: 50px;
}
.post-date {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #d4d4d8;
}
.featured-headline {
font-family: var(--font-serif);
font-size: clamp(3rem, 5vw, 5rem);
font-style: italic;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
transition: color 0.3s ease;
}
.featured-headline a {
color: #000000;
}
.bento-featured-new:hover .featured-headline a {
color: #71717a;
}
.featured-excerpt-new {
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
max-width: 700px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .bento-sidebar-new {
display: flex;
flex-direction: column;
gap: 100px;
padding-top: 30px;
}
.sidebar-post {
display: flex;
flex-direction: column;
gap: 25px;
border-left: 1px solid #f4f4f5;
padding-left: 40px;
cursor: pointer;
}
.sidebar-category {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #d4d4d8;
transition: color 0.3s ease;
}
.sidebar-post:hover .sidebar-category {
color: #000000;
}
.sidebar-headline {
font-family: var(--font-serif);
font-size: 1.875rem;
font-style: italic;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
}
.sidebar-headline a {
color: #000000;
}
.sidebar-excerpt {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-excerpt {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.animated-underline {
width: 24px;
height: 1px;
background: #000000;
transition: width 0.5s ease;
}
.sidebar-post:hover .animated-underline {
width: 100%;
} @media (max-width: 1200px) {
.bento-grid-new {
grid-template-columns: 1fr;
gap: 80px;
}
.bento-sidebar-new {
gap: 60px;
}
}
@media (max-width: 768px) {
.bento-grid-new {
gap: 60px;
padding-top: 40px;
}
.featured-content-new {
gap: 20px;
}
.featured-headline {
font-size: 2.5rem;
}
.sidebar-headline {
font-size: 1.5rem;
}
.sidebar-post {
padding-left: 30px;
}
}  .scroll-progress-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 250;
pointer-events: none;
}
.progress-fill {
height: 100%;
background: #000000;
width: 0%;
transition: width 0.1s ease;
} .editorial-hero {
position: relative;
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 120px 40px;
overflow: hidden;
border-bottom: 1px solid #fafafa;
}
.hero-content {
max-width: 1400px;
width: 100%;
display: flex;
flex-direction: column;
gap: 60px;
}
.hero-issue {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.2em;
color: #d4d4d8;
display: block;
animation: slideUp 1s ease;
}
.hero-headline {
font-family: var(--font-serif);
font-size: clamp(8rem, 14vw, 12rem);
font-weight: 700;
font-style: italic;
line-height: 0.75;
letter-spacing: -0.02em;
color: #000000;
}
.hero-outline {
-webkit-text-stroke: 1px #000000;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-tagline {
font-family: var(--font-sans);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
max-width: 700px;
margin: 0 auto;
}
.scroll-indicator {
position: absolute;
bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
animation: bounce 2s infinite;
opacity: 0.2;
}
.scroll-line {
width: 1px;
height: 50px;
background: #000000;
}
.scroll-text {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
transform: rotate(90deg);
transform-origin: left;
translate: 6px 8px;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} .journal-section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 100px;
gap: 50px;
}
.section-label {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1em;
color: #d4d4d8;
display: block;
margin-bottom: 15px;
}
.section-headline {
font-family: var(--font-serif);
font-size: clamp(4rem, 8vw, 8rem);
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -0.02em;
color: #000000;
}
.view-index-link {
display: flex;
align-items: center;
gap: 15px;
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #000000;
border-bottom: 1px solid #000000;
padding-bottom: 8px;
transition: opacity 0.3s ease;
}
.view-index-link:hover {
opacity: 0.5;
} .newsletter-signup {
max-width: 700px;
margin: 100px auto 0;
text-align: center;
display: flex;
flex-direction: column;
gap: 30px;
padding-top: 100px;
border-top: 1px solid #fafafa;
}
.newsletter-title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
font-style: italic;
color: #000000;
}
.newsletter-form {
position: relative;
}
.newsletter-input {
width: 100%;
background: #fafafa;
border: none;
padding: 24px 48px;
border-radius: 50px;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
color: #000000;
outline: none;
transition: all 0.3s ease;
}
.newsletter-input::placeholder {
color: #d4d4d8;
}
.newsletter-input:focus {
background: #FFFFFF;
box-shadow: 0 0 0 1px #000000;
}
.newsletter-button {
position: absolute;
right: 8px;
top: 8px;
bottom: 8px;
padding: 0 32px;
background: #000000;
color: #FFFFFF;
border: none;
border-radius: 50px;
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
cursor: pointer;
transition: background 0.3s ease;
}
.newsletter-button:hover {
background: #27272a;
} .quote-section {
padding: 250px 60px;
background: #fafafa;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.quote-large {
font-family: var(--font-serif);
font-size: clamp(4rem, 8vw, 7rem);
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -0.02em;
color: #000000;
max-width: 1200px;
}
.text-outline {
-webkit-text-stroke: 1px #000000;
-webkit-text-fill-color: transparent;
color: transparent;
} .archive-section {
padding: 200px 0;
background: #FFFFFF;
} .paged .archive-section {
padding-top: 80px;
}
.archive-header {
text-align: center;
margin-bottom: 120px;
display: flex;
flex-direction: column;
gap: 50px;
}
.category-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.filter-btn {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #d4d4d8;
background: none;
border: none;
padding-bottom: 8px;
position: relative;
cursor: pointer;
transition: color 0.3s ease;
}
.filter-btn:hover,
.filter-btn.active {
color: #000000;
}
.filter-btn.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #000000;
animation: slideInLeft 0.5s ease;
}
@keyframes slideInLeft {
from {
width: 0;
}
to {
width: 100%;
}
} .masonry-gallery {
margin: 0 auto;
position: relative; width: 100%;
}
.grid-sizer,
.masonry-card {
width: 300px; margin-bottom: 25px; break-inside: avoid;
opacity: 0; transition: transform 0.3s ease;
position: relative;
overflow: visible;
border-radius: 0;
background: transparent;
border: none;
transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.masonry-card:hover {
border-color: transparent;
transform: translateY(-5px);
}
.masonry-image-wrapper {
position: relative;
overflow: hidden;
background: #fafafa;
border-radius: 16px;
}
.card-image-link {
display: block;
width: 100%;
}
.masonry-image-wrapper img {
width: 100%;
height: auto;
object-fit: cover;
transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.masonry-card:hover .masonry-image-wrapper img {
transform: none;
} .card-actions-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2));
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding: 24px;
gap: 12px;
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
}
.masonry-card:hover .card-actions-overlay {
opacity: 1;
}
.card-action-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
padding: 0;
pointer-events: auto;
}
.card-action-btn:hover {
background: rgba(255, 255, 255, 0.95);
color: #000000;
transform: scale(1.1);
}
.card-action-btn.like-btn.active {
background: #FF3B30;
color: #FFFFFF;
border-color: #FF3B30;
}
.card-action-btn.like-btn.active svg {
fill: #FFFFFF;
}
.masonry-card-content {
padding: 12px 0 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.masonry-category {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5em;
color: #a1a1aa;
transition: color 0.5s ease;
}
.masonry-card:hover .masonry-category {
color: #000000;
}
.masonry-title {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.masonry-title a {
color: #000000;
text-decoration: none;
}
.masonry-card:hover .masonry-title a {
color: #71717a;
} @media (max-width: 1400px) {
.editorial-container {
padding: 0 40px;
}
.masonry-gallery { }
}
@media (max-width: 1024px) {
.editorial-hero {
min-height: 70vh;
padding: 100px 30px;
}
.hero-headline {
font-size: 8rem;
}
.journal-section-header {
flex-direction: column;
align-items: flex-start;
}
.masonry-gallery { }
.quote-section {
padding: 150px 40px;
}
}
@media (max-width: 768px) {
.editorial-container {
padding: 0 20px;
}
.hero-headline {
font-size: 5rem;
}
.section-headline {
font-size: 3rem;
}
.quote-large {
font-size: 3rem;
}
.masonry-gallery { }
.masonry-card { }
}
@media (max-width: 420px) {
.masonry-gallery {
width: 100% !important;
height: auto !important;
padding: 0 15px !important;
}
.grid-sizer,
.masonry-card {
width: 100% !important;
position: static !important; margin-bottom: 25px !important;
}
.masonry-card {
margin-bottom: 40px;
}
.category-filters {
gap: 20px;
}
.newsletter-input {
padding: 20px 40px;
}
} .journal-main-title {
font-family: var(--font-serif);
font-size: clamp(4rem, 10vw, 9rem);
font-style: italic;
font-weight: 700;
letter-spacing: -0.05em;
margin-top: 120px;
margin-bottom: 80px;
line-height: 0.8;
}
.bento-grid-journal {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 60px;
align-items: start;
border-top: 1px solid #f4f4f5;
padding-top: 60px;
} .journal-featured {
grid-column: span 8;
display: flex;
flex-direction: column;
gap: 40px;
}
.journal-featured-image-wrapper {
position: relative;
aspect-ratio: 16/9;
border-radius: 3rem;
overflow: hidden;
background: #fafafa;
border: 1px solid #f4f4f5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 1s ease;
}
.journal-featured:hover .journal-featured-image-wrapper {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.journal-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4);
transition: all 2s ease;
}
.journal-featured:hover .journal-img {
filter: grayscale(0);
transform: scale(1.05);
}
.image-overlay-light {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.02);
}
.journal-featured-content {
max-width: 900px;
display: flex;
flex-direction: column;
gap: 30px;
}
.journal-meta {
display: flex;
align-items: center;
gap: 25px;
}
.journal-category-badge a {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5em;
color: #000000;
background: #fafafa;
padding: 8px 20px;
border-radius: 50px;
display: inline-block;
}
.journal-date {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #d4d4d8;
}
.journal-featured-headline {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-style: italic;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
transition: color 0.3s ease;
}
.journal-featured-headline a {
color: #000000;
}
.journal-featured:hover .journal-featured-headline a {
color: #71717a;
}
.journal-featured-excerpt {
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
max-width: 700px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .journal-sidebar {
grid-column: span 4;
display: flex;
flex-direction: column;
gap: 80px;
padding-top: 30px;
}
.journal-sidebar-post {
display: flex;
flex-direction: column;
gap: 20px;
border-left: 1px solid #f4f4f5;
padding-left: 40px;
cursor: pointer;
}
.sidebar-cat-label a {
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #d4d4d8;
transition: color 0.3s ease;
}
.journal-sidebar-post:hover .sidebar-cat-label a {
color: #000000;
}
.sidebar-post-title {
font-family: var(--font-serif);
font-size: 1.875rem;
font-style: italic;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
.sidebar-post-title a {
color: #000000;
}
.sidebar-post-excerpt {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-underline {
width: 24px;
height: 1px;
background: #000000;
transition: width 0.5s ease;
}
.journal-sidebar-post:hover .sidebar-underline {
width: 100%;
} .observations-section-new {
margin-top: 100px;
padding-top: 80px;
border-top: 1px solid #f4f4f5;
}
.observations-divider {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 80px;
}
.divider-line {
flex-grow: 1;
height: 1px;
background: #f4f4f5;
}
.divider-text {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.6em;
color: #d4d4d8;
white-space: nowrap;
}
.observations-grid-new {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px 40px;
}
.observation-card-new {
display: flex;
flex-direction: column;
gap: 25px;
cursor: pointer;
}
.observation-img-wrapper {
position: relative;
aspect-ratio: 4/5;
border-radius: 2.5rem;
overflow: hidden;
background: #fafafa;
border: 1px solid #fafafa;
transition: all 0.7s ease;
}
.observation-card-new:hover .observation-img-wrapper {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
.observation-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.6);
transition: all 1.5s ease;
}
.observation-card-new:hover .observation-img {
filter: grayscale(0);
}
.observation-meta-new {
display: flex;
justify-content: space-between;
align-items: center;
}
.obs-cat-label a {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #d4d4d8;
}
.obs-date-label {
font-family: var(--font-sans);
font-size: 0.5rem;
font-weight: 700;
text-transform: uppercase;
color: #e4e4e7;
}
.observation-title-new {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
font-weight: 700;
line-height: 1.2;
transition: color 0.3s ease;
}
.observation-title-new a {
color: #000;
}
.observation-card-new:hover .observation-title-new a {
color: #71717a;
}
.observation-excerpt-new {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .journal-newsletter {
margin-top: 150px;
padding: 100px 0;
border-top: 1px solid #f4f4f5;
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.newsletter-headline {
font-family: var(--font-serif);
font-size: 1.75rem;
font-style: italic;
font-weight: 700;
}
.newsletter-box {
position: relative;
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.newsletter-field {
width: 100%;
padding: 24px 40px;
border-radius: 50px;
background: #fafafa;
border: none;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
outline: none;
transition: all 0.3s ease;
}
.newsletter-field:focus {
background: #fff;
box-shadow: 0 0 0 1px #000;
}
.newsletter-btn {
position: absolute;
right: 8px;
top: 8px;
bottom: 8px;
padding: 0 32px;
background: #000;
color: #fff;
border-radius: 50px;
border: none;
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.25em;
cursor: pointer;
transition: background 0.3s ease;
}
.newsletter-btn:hover {
background: #27272a;
} .editorial-pagination {
margin-top: 100px;
text-align: center;
display: flex;
justify-content: center;
gap: 15px;
}
.editorial-pagination a,
.editorial-pagination span {
padding: 10px 20px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
color: #d4d4d8;
border: 1px solid #f4f4f5;
border-radius: 50px;
transition: all 0.3s ease;
}
.editorial-pagination .current,
.editorial-pagination a:hover {
color: #000;
border-color: #000;
background: #fafafa;
}
@media (max-width: 1200px) {
.bento-grid-journal {
grid-template-columns: 1fr;
}
.journal-featured {
grid-column: span 1;
}
.journal-sidebar {
grid-column: span 1;
flex-direction: row;
gap: 30px;
overflow-x: auto;
padding-bottom: 20px;
}
.journal-sidebar-post {
min-width: 300px;
}
.observations-grid-new {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.journal-main-title {
font-size: 4rem;
margin-bottom: 40px;
}
.journal-sidebar {
flex-direction: column;
}
.observations-grid-new {
grid-template-columns: 1fr;
}
} .blog-single-v2 {
background: #ffffff;
} .header-progress-bar {
z-index: 200;
} .journal-back-btn {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
color: #9ca3af;
transition: all 0.3s ease;
}
.journal-back-btn:hover {
color: #000000;
}
.share-utility-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.share-utility-btn:hover {
background: #000000;
color: #ffffff;
} @media (min-width: 1024px) {
.editorial-main-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 80px;
}
.editorial-sidebar {
grid-column: span 3;
}
.lg\:col-span-9 {
grid-column: span 9;
}
} .meta-label {
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #9ca3af;
margin-bottom: 8px;
}
.meta-value {
font-family: var(--font-sans);
font-size: 1.125rem;
font-weight: 700;
color: #000000;
margin-bottom: 40px;
}
.share-links-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.share-link-item {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
color: #9ca3af;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s ease;
}
.share-link-item:hover {
color: #000000;
} .single-post-title {
font-family: var(--font-serif);
font-size: clamp(3rem, 7vw, 7.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: #000000;
}
.author-avatar-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background: #f3f4f6;
overflow: hidden;
border: 4px solid #ffffff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.author-name {
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 700;
color: #000000;
}
.author-title {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 500;
font-style: italic;
color: #9ca3af;
} .article-lead-text {
font-family: var(--font-serif);
font-style: italic;
}
.article-body-content p {
margin-bottom: 2.5rem;
}
.article-body-content h2 {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-top: 4rem;
margin-bottom: 1rem;
color: #000000;
} .blog-single-v2 blockquote {
background: #fafafa;
border-radius: 2rem;
padding: 3.5rem;
border: none;
margin: 4rem 0;
position: relative;
overflow: hidden;
}
.blog-single-v2 blockquote::before {
content: "“";
position: absolute;
top: -1rem;
left: -0.5rem;
font-size: 8rem;
font-family: var(--font-serif);
color: rgba(0, 0, 0, 0.05);
line-height: 1;
pointer-events: none;
} .author-btn-primary {
display: inline-block;
background: #000000;
color: #ffffff;
padding: 14px 32px;
border-radius: 50px;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.author-btn-secondary {
display: inline-block;
border: 1px solid #e5e7eb;
color: #000000;
padding: 14px 32px;
border-radius: 50px;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
transition: all 0.3s ease;
} .form-input,
.form-textarea {
width: 100%;
background: #ffffff;
border: 1px solid #f3f4f6;
border-radius: 1.5rem;
padding: 1.25rem 2rem;
font-family: var(--font-sans);
font-size: 1.125rem;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus,
.form-textarea:focus {
border-color: #000000;
}
.comment-submit-v2 {
background: #000000;
color: #ffffff;
padding: 1.25rem 2.5rem;
border-radius: 1.25rem;
font-family: var(--font-sans);
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.comment-submit-v2:hover {
background: #27272a;
} .grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
.gap-8 {
gap: 2rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
@media (min-width: 768px) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lg\:grid {
display: grid;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:gap-20 {
gap: 5rem;
}
.lg\:col-span-9 {
grid-column: span 9 / span 9;
}
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.sticky {
position: sticky;
}
.top-0 {
top: 0;
}
.top-16 {
top: 4rem;
}
.top-32 {
top: 8rem;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
.h-1 {
height: 0.25rem;
}
.h-fit {
height: fit-content;
}
.z-\[60\] {
z-index: 60;
}
.bg-gray-100 {
background-color: #f3f4f6;
}
.bg-black {
background-color: #000000;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
} .mx-auto {
margin-left: auto;
margin-right: auto;
}
.max-w-screen-xl {
max-width: 1280px;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-xl {
max-width: 36rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.p-8 {
padding: 2rem;
}
.p-10 {
padding: 2.5rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-24 {
padding-top: 6rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-12 {
padding-left: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-20 {
margin-bottom: 5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-32 {
margin-top: 8rem;
}
.-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.space-y-1>*+* {
margin-top: 0.25rem;
}
.space-y-2>*+* {
margin-top: 0.5rem;
}
.space-y-3>*+* {
margin-top: 0.75rem;
}
.space-y-5>*+* {
margin-top: 1.25rem;
}
.space-y-6>*+* {
margin-top: 1.5rem;
}
.space-y-8>*+* {
margin-top: 2rem;
}
.space-y-10>*+* {
margin-top: 2.5rem;
}
.space-y-12>*+* {
margin-top: 3rem;
}
.space-y-16>*+* {
margin-top: 4rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-full {
border-radius: 9999px;
}
.md\:rounded-\[3rem\] {
border-radius: 3rem;
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-black\/5 {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
}
.shadow-black\/10 {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}
.w-full {
width: 100%;
}
.h-auto {
height: auto;
}
.w-24 {
width: 6rem;
}
.h-24 {
height: 6rem;
}
.md\:w-32 {
width: 8rem;
}
.md\:h-32 {
height: 8rem;
}
.aspect-\[4\/3\] {
aspect-ratio: 4 / 3;
}
.object-cover {
object-fit: cover;
}
.overflow-hidden {
overflow: hidden;
}
.flex-col {
flex-direction: column;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.justify-center {
justify-content: center;
}
.items-end {
align-items: flex-end;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.md\:text-3xl {
font-size: 1.875rem;
}
.md\:text-4xl {
font-size: 2.25rem;
}
.md\:text-\[1\.3125rem\] {
font-size: 1.3125rem;
}
.text-\[10px\] {
font-size: 10px;
}
.font-bold {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.italic {
font-style: italic;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-tight {
line-height: 1.25;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.8\] {
line-height: 1.8;
}
.text-gray-400 {
color: #9ca3af;
}
.text-gray-500 {
color: #6b7280;
}
.text-gray-600 {
color: #4b5563;
}
.text-gray-700 {
color: #374151;
}
.text-gray-800 {
color: #1f2937;
}
.text-indigo-600 {
color: #4f46e5;
}
.bg-white {
background-color: #ffffff;
}
.bg-zinc-50 {
background-color: #fafafa;
}
.border-gray-100 {
border-color: #f3f4f6;
}
.border-dashed {
border-style: dashed;
}
.border-2 {
border-width: 2px;
}
.animate-in {
animation-duration: 0.6s;
animation-fill-mode: both;
}
.fade-in {
animation-name: editorialFadeIn;
}
@keyframes editorialFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.group:hover .group-hover\:-translate-x-1 {
transform: translateX(-0.25rem);
}
.group:hover .group-hover\:scale-105 {
transform: scale(1.05);
} .prose-content {
font-size: 1.125rem;
line-height: 1.8;
}  .single-post-title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 7vw, 4.5rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #000000;
}
@media (max-width: 1024px) {
.editorial-main-grid {
display: block !important;
}
.editorial-sidebar {
display: none !important;
}
.single-post-title {
margin-bottom: 2rem;
}
.author-info-header {
margin-bottom: 3rem;
}
} .editorial-main-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4rem;
}
.lg\:col-span-9 {
grid-column: span 9 / span 9;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
} .share-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 10000; display: none;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.share-modal-overlay.active {
display: flex;
}
.share-modal {
width: 90%;
max-width: 500px;
transform: translateY(20px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.share-modal-overlay.active .share-modal {
transform: translateY(0);
}
.share-modal-premium-wrapper {
background: #ffffff;
border-radius: 3.5rem;
overflow: hidden;
position: relative;
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.3);
} .modal-premium-header {
height: 100px;
position: relative;
overflow: hidden;
}
.modal-header-bg {
position: absolute;
inset: 0;
background: #fafafa;
}
.modal-header-accent-1 {
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: rgba(99, 102, 241, 0.1);
filter: blur(40px);
border-radius: 50%;
transform: translate(30%, -30%);
}
.modal-header-accent-2 {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: rgba(168, 85, 247, 0.1);
filter: blur(40px);
border-radius: 50%;
transform: translate(-30%, -30%);
}
.modal-header-content {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
}
.modal-title-text {
font-size: 24px;
font-family: var(--font-serif);
font-weight: 800;
letter-spacing: -0.5px;
margin: 0;
}
.modal-close-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.modal-close-btn:hover {
background: #000;
color: #fff;
transform: rotate(90deg);
} .modal-preview-section {
padding: 0 40px;
margin-top: -30px;
margin-bottom: 40px;
}
.modal-preview-card {
background: #fff;
padding: 6px;
border-radius: 2.5rem;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.modal-preview-content {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 2.2rem;
background: #f8f9fa;
}
.modal-preview-img-wrapper {
width: 80px;
height: 80px;
border-radius: 1.5rem;
overflow: hidden;
flex-shrink: 0;
border: 4px solid #fff;
}
.modal-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-preview-details {
flex-grow: 1;
min-width: 0;
}
.cat-pill-indigo {
display: inline-block;
padding: 4px 10px;
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
border-radius: 20px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.modal-preview-title {
font-weight: 800;
font-size: 16px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-preview-url {
font-size: 10px;
color: #999;
margin: 0;
font-style: italic;
} .modal-networks-section {
padding: 0 40px;
margin-bottom: 40px;
}
.modal-section-label {
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
color: #ccc;
margin-bottom: 20px;
}
.modal-networks-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.network-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-decoration: none;
transition: transform 0.3s;
}
.network-item:hover {
transform: translateY(-5px);
}
.network-icon-box {
width: 60px;
height: 60px;
border-radius: 1.8rem;
background: #f9f9f9;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: all 0.3s;
}
.network-label {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
color: #bbb;
transition: color 0.3s;
}
.network-item:hover .network-label {
color: #111;
}
.x-hover:hover {
background: #000;
color: #fff;
border-color: #000;
}
.linkedin-hover:hover {
background: #0077b5;
color: #fff;
border-color: #0077b5;
}
.pinterest-hover:hover {
background: #bd081c;
color: #fff;
border-color: #bd081c;
}
.whatsapp-hover:hover {
background: #25d366;
color: #fff;
border-color: #25d366;
} .modal-clipboard-section {
padding: 0 40px 50px;
}
.clipboard-box {
display: flex;
align-items: center;
padding: 6px;
background: #f9f9f9;
border: 2px solid #eee;
border-radius: 2.2rem;
}
.clipboard-icon-wrapper {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.clipboard-input {
flex-grow: 1;
border: none;
background: transparent;
padding: 0 15px;
font-size: 11px;
font-weight: 700;
color: #777;
outline: none;
}
.clipboard-btn {
padding: 12px 25px;
background: #000;
color: #fff;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.clipboard-btn:hover {
background: #333;
transform: scale(1.05);
}
.clipboard-btn:active {
transform: scale(0.95);
}
.share-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
border: 1px solid #f4f4f5;
border-radius: 1.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.share-option:hover {
background: #fafafa;
border-color: #000;
} .editorial-hero {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0;
border-bottom: 1px solid #f4f4f5;
text-align: center;
}
.hero-headline {
font-family: var(--font-serif);
font-size: clamp(4rem, 15vw, 12rem);
line-height: 0.75;
font-weight: 700;
font-style: italic;
letter-spacing: -0.02em;
margin-bottom: 2rem;
}
.hero-outline {
-webkit-text-stroke: 2px #000;
-webkit-text-fill-color: transparent;
}
.bento-grid-new {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3rem;
}
.bento-featured-new {
grid-column: span 8;
}
.bento-sidebar-new {
grid-column: span 4;
} .comments-area {
margin-top: 4rem;
padding-top: 4rem;
border-top: 1px solid #f4f4f5;
}
.comments-title {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: #000;
}
.comment-list {
list-style: none;
padding: 0;
margin-bottom: 5rem;
}
.comment {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid #fafafa;
}
.comment-body {
display: flex;
gap: 1.5rem;
}
.comment-author img {
border-radius: 50%;
width: 60px;
height: 60px;
background: #f3f4f6;
}
.comment-meta {
margin-bottom: 0.5rem;
}
.comment-author .fn {
font-family: var(--font-sans);
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
}
.comment-metadata a {
font-size: 0.875rem;
color: #9ca3af;
}
.comment-content {
font-family: var(--font-sans);
font-size: 1.125rem;
line-height: 1.6;
color: #374151;
margin-top: 1rem;
}
.reply {
margin-top: 1rem;
}
.comment-reply-link {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #000;
} .comment-respond {
background: #fafafa;
padding: 4rem;
border-radius: 3rem;
}
.comment-reply-title {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
margin-bottom: 2rem;
}
.comment-form-v2 .comment-form-comment label,
.comment-form-v2 .comment-form-author label,
.comment-form-v2 .comment-form-email label {
display: block;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-left: 1rem;
margin-bottom: 0.5rem;
color: #9ca3af;
}
.comment-form-v2 textarea,
.comment-form-v2 input[type="text"],
.comment-form-v2 input[type="email"],
.comment-form-v2 input[type="url"] {
width: 100%;
padding: 1.5rem 2rem;
border: 1px solid #e5e7eb;
border-radius: 1.5rem;
background: #fff;
font-family: var(--font-sans);
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.comment-form-v2 textarea:focus,
.comment-form-v2 input:focus {
border-color: #000;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.comment-submit-v2 {
background: #000;
color: #fff;
border: none;
padding: 1.25rem 3rem;
border-radius: 50px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.comment-submit-v2:hover {
background: #27272a;
transform: translateY(-2px);
} .container--narrow {
max-width: 800px;
margin: 0 auto;
}
.static-page-layout .page-title {
margin-bottom: 3rem;
letter-spacing: -0.01em;
}
.static-page-layout .page-content {
color: #374151;
font-size: 1.125rem;
line-height: 1.8;
}
.static-page-layout .page-content p {
margin-bottom: 2rem;
}
.static-page-layout .page-content h2 {
font-family: var(--font-serif);
font-size: 2rem;
margin-top: 3rem;
margin-bottom: 1rem;
color: #000;
} .rounded-\[3\.5rem\] {
border-radius: 3.5rem;
}
.rounded-\[2\.5rem\] {
border-radius: 2.5rem;
}
.rounded-\[2\.2rem\] {
border-radius: 2.2rem;
}
.rounded-\[1\.8rem\] {
border-radius: 1.8rem;
}
.shadow-\[0_50px_100px_-20px_rgba\(0\,0\,0\,0\.3\)\] {
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.3);
}
.bg-zinc-50\/50 {
background-color: rgba(250, 250, 251, 0.5);
}
.bg-indigo-600\/10 {
background-color: rgba(79, 70, 229, 0.1);
}
.bg-indigo-500\/10 {
background-color: rgba(99, 102, 241, 0.1);
}
.bg-purple-500\/10 {
background-color: rgba(168, 85, 247, 0.1);
}
.blur-3xl {
filter: blur(64px);
}
.text-\[8px\] {
font-size: 8px;
}
.text-\[9px\] {
font-size: 9px;
}
.text-\[11px\] {
font-size: 11px;
}
.tracking-\[0\.4em\] {
letter-spacing: 0.4em;
}
.ring-1 {
box-shadow: 0 0 0 1px rgba(244, 244, 245, 1);
}
.ring-zinc-100 {
--tw-ring-color: #f4f4f5;
box-shadow: 0 0 0 1px #f4f4f5;
}
.ring-white {
box-shadow: 0 0 0 4px #ffffff;
} .share-modal-premium-wrapper {
position: relative;
width: 100%;
max-width: 500px;
background: #ffffff;
border-radius: 3.5rem;
overflow: hidden;
transition: all 0.5s ease;
transform: scale(1) translateY(0);
}
.share-modal-overlay .share-modal {
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
max-width: 500px !important;
}
.share-modal-overlay.active .share-modal-premium-wrapper {
opacity: 1;
transform: scale(1) translateY(0);
} .related-articles-editorial {
margin-top: 8rem;
padding-top: 6rem;
border-top: 1px solid #f4f4f5;
}
.related-articles-headline {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-style: italic;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 15px;
}
.related-articles-subtext {
font-family: var(--font-sans);
font-size: 1.1rem;
font-weight: 300;
font-style: italic;
color: #a1a1aa;
margin-bottom: 60px;
}
.related-posts-list {
display: flex;
flex-direction: column;
gap: 80px;
}
.journal-sidebar-post {
border-left: 1px solid #f4f4f5;
padding-left: 40px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 20px;
transition: all 0.3s ease;
}
.journal-sidebar-post:hover {
border-left-color: #000;
transform: translateX(5px);
}
.sidebar-post-title {
font-family: var(--font-serif);
font-size: 1.875rem;
font-style: italic;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
}
.sidebar-post-excerpt {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 300;
font-style: italic;
line-height: 1.6;
color: #a1a1aa;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-underline {
width: 24px;
height: 1px;
background: #000000;
transition: width 0.5s ease;
}
.journal-sidebar-post:hover .sidebar-underline {
width: 100px;
}
@media (max-width: 768px) {
.related-articles-editorial {
margin-top: 5rem;
padding-top: 4rem;
}
.related-articles-subtext {
margin-bottom: 40px;
}
.related-posts-list {
gap: 50px;
}
.journal-sidebar-post {
padding-left: 25px;
}
.sidebar-post-title {
font-size: 1.5rem !important;
}
} .transition-all {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.duration-500 {
transition-duration: 500ms;
}
.hover\:-translate-y-1\.5:hover {
transform: translateY(-0.375rem);
}
.active\:scale-90:active {
transform: scale(0.9);
}
.active\:scale-95:active {
transform: scale(0.95);
}
.translate-y-0 {
transform: translateY(0);
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translateY(-50%);
}
.translate-x-1\/2 {
--tw-translate-y: 50%;
transform: translateX(50%);
}
.-translate-x-1\/2 {
--tw-translate-y: -50%;
transform: translateX(-50%);
} .main-footer {
padding: 60px 0;
border-top: 1px solid var(--border-color);
margin-top: 100px;
background: #fff;
color: var(--text-muted);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.footer-links {
display: flex;
gap: 30px;
font-weight: 600;
}
.footer-links a {
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--accent-color);
}
@media (max-width: 768px) {
.main-footer {
padding: 40px 0;
margin-top: 60px;
}
.footer-inner {
flex-direction: column;
gap: 25px;
text-align: center;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px 20px;
}
.footer-copyright {
order: 2;
opacity: 0.8;
}
.footer-links {
order: 1;
}
}
.group:hover .group-hover\:text-white {
color: #ffffff;
}
.group:hover .group-hover\:border-transparent {
border-color: transparent;
}
.group:hover .group-hover\:shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.group:hover .group-hover\:text-black {
color: #000000;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.leading-tight {
line-height: 1.25;
}
.bg-black {
background-color: #000000;
}
.hover\:bg-black:hover {
background-color: #000000;
}
.hover\:text-white:hover {
color: #ffffff;
}
.hover\:bg-zinc-800:hover {
background-color: #27272a;
}
.ring-4 {
box-shadow: 0 0 0 4px #ffffff;
} .share-options-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
} .blog-fab-group {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #fff;
padding: 8px 12px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
z-index: 3000;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #f0f0f0;
}
.blog-fab-group.visible {
transform: translateX(-50%) translateY(0);
}
.fab-progress-ring {
position: relative;
width: 36px;
height: 36px;
margin-right: 4px;
}
.fab-circle-bg {
fill: none;
stroke: #f0f0f0;
stroke-width: 3;
}
.fab-circle-active {
fill: none;
stroke: #000;
stroke-width: 3;
stroke-dasharray: 100.5;
stroke-dashoffset: 100.5;
stroke-linecap: round;
transition: stroke-dashoffset 0.1s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.fab-actions {
display: flex;
align-items: center;
background: #f8f8f8;
padding: 4px 8px;
border-radius: 30px;
}
.fab-item {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
border: none;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.fab-item:hover {
color: #000;
transform: scale(1.1);
}
.fab-item.disabled {
opacity: 0.2;
pointer-events: none;
}
.fab-item.active {
color: #ff4757;
}
.fab-item.active svg {
fill: #ff4757;
stroke: #ff4757;
}
.fab-divider {
width: 1px;
height: 20px;
background: #e0e0e0;
}
.fab-nav-btns {
display: flex;
gap: 4px;
}
.fab-view {
display: none;
align-items: center;
gap: 8px;
}
.fab-view.active {
display: flex;
animation: fabViewIn 0.3s ease forwards;
}
@keyframes fabViewIn {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fab-top-btn {
width: 36px;
height: 36px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
}
.fab-top-btn:hover {
transform: scale(1.1);
}
@media (max-width: 768px) {
.blog-fab-group {
bottom: 20px;
scale: 0.9;
}
} .single-post-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: start;
}
.post-info-column {
position: sticky;
top: 100px;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #000;
color: #fff;
padding: 18px 25px;
border-radius: 40px;
font-weight: 700;
font-size: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
color: #000;
padding: 18px 25px;
border-radius: 40px;
font-weight: 700;
font-size: 15px;
border: 2px solid #000;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: #f1f1f1;
} .spec-sheet a[rel="tag"] {
display: inline-block;
padding: 6px 14px;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 30px;
font-size: 12px;
font-weight: 700;
color: #111;
transition: all 0.2s ease;
}
.spec-sheet a[rel="tag"]:hover {
background: #000;
color: #fff;
border-color: #000;
}
@media (max-width: 1024px) {
.single-post-layout {
grid-template-columns: 1fr;
}
.post-info-column {
position: static;
}
} .editorial-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 60px 0;
font-family: var(--font-sans);
}
.editorial-pagination .page-numbers {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0.9rem;
font-weight: 700;
color: #a1a1aa;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #f4f4f5;
background: #fff;
}
.editorial-pagination .page-numbers:hover {
color: #000;
border-color: #000;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.editorial-pagination .page-numbers.current {
background: #000;
color: #fff;
border-color: #000;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.editorial-pagination .page-numbers.dots {
border: none;
background: transparent;
cursor: default;
}
.editorial-pagination .page-numbers.dots:hover {
transform: none;
box-shadow: none;
}
.editorial-pagination .prev,
.editorial-pagination .next {
background: #fafafa;
}
.editorial-pagination .prev:hover,
.editorial-pagination .next:hover {
background: #000;
color: #fff;
}  .archive-header-ad {
text-align: center;
margin: 0 auto;
padding: 20px 0;
background: #f9f9f9;
border-bottom: 1px solid #eee;
}
.archive-premium-header {
position: relative;
padding-top: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid #f4f4f5;
background-color: #fafafa;
overflow: hidden;
}
.archive-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-serif);
font-weight: 700;
font-size: 30vw;
font-style: italic;
color: rgba(0, 0, 0, 0.02);
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 1;
}
.archive-header-container {
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
position: relative;
z-index: 10;
}
.back-to-archive-btn {
display: flex;
align-items: center;
gap: 1rem;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #a1a1aa;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 3rem;
}
.back-to-archive-btn:hover {
color: #000;
}
.back-to-archive-btn:hover svg {
transform: translateX(-4px);
}
.header-accent-line {
width: 3rem;
height: 1px;
background-color: #000;
}
.header-label-text {
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.8em;
color: #d4d4d8;
}
.archive-main-h1 {
font-family: var(--font-serif);
font-size: clamp(4rem, 12vw, 9rem);
font-weight: 700;
font-style: italic;
letter-spacing: -0.05em;
line-height: 1;
color: #000;
margin: 2rem 0;
}
.archive-main-desc {
font-size: clamp(1.1rem, 2vw, 1.5rem);
color: #a1a1aa;
font-weight: 300;
font-style: italic;
line-height: 1.6;
max-width: 42rem;
}
.stat-item-label {
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #d4d4d8;
}
.stat-item-value {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
font-style: italic;
color: #000;
} .insde-ad-container {
padding: 30px 0;
margin: 40px auto;
text-align: center;
border-top: 1px solid #f4f4f5;
border-bottom: 1px solid #f4f4f5;
position: relative;
max-width: 100%;
}
.ad-label {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 0 15px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: #d1d1d6;
pointer-events: none;
}
.sidebar-ad {
margin-top: 60px;
padding: 40px 0;
border: none;
border-top: 1px solid #f4f4f5;
}
.sidebar-ad .ad-label {
left: 0;
transform: none;
padding-left: 0;
}
.after-title-ad,
.before-related-ad {
border-left: none;
border-right: none;
}
.mid-content-ad {
border: 1px solid #f4f4f5;
border-left: none;
border-right: none;
padding: 40px 0;
}
.wpcf7-form p {
margin-bottom: 25px;
}
.wpcf7-form label {
display: block;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-muted);
margin-bottom: 10px;
}
.wpcf7-form-control:not(.wpcf7-submit) {
width: 100%;
padding: 15px 0;
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-color);
background: transparent;
border: none;
border-bottom: 1px solid #e5e5e5;
transition: border-color 0.3s ease;
border-radius: 0;
}
.wpcf7-form-control:not(.wpcf7-submit):focus {
outline: none;
border-bottom-color: var(--accent-color);
}
.wpcf7-textarea {
height: 120px;
resize: none;
}
.wpcf7-submit {
appearance: none;
background: #000;
color: #fff;
border: none;
padding: 18px 40px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
width: 100%;
}
.wpcf7-submit:hover {
background: #222;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
} .wpcf7-not-valid-tip {
font-size: 11px;
font-weight: 600;
margin-top: 5px;
}
.wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 15px !important;
border: 1px solid #eee !important;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13px;
text-align: center;
}
.wpcf7-mail-sent-ok {
border-color: #4ade80 !important;
color: #166534;
}
.wpcf7-validation-errors {
border-color: #f87171 !important;
color: #991b1b;
}
.wpcf7-spinner {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
} .article-body-content h2 {
font-family: var(--font-sans);
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
margin-top: 1.8em !important; margin-bottom: 0.5em !important; color: #111;
}
.article-body-content h3 {
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin-top: 1.6em !important;
margin-bottom: 0.4em !important;
color: #222;
}
.article-body-content p {
margin-bottom: 1.2em; margin-top: 0;
} .article-body-content p:empty {
display: none !important;
}
.article-body-content br {
display: inline; content: ""; margin: 0;
} .article-body-content ul,
.article-body-content ol {
margin-top: 1.5em !important;
margin-bottom: 2em !important;
padding-left: 0;
list-style: none; counter-reset: editorial-counter;
} .article-body-content a {
color: #111;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
padding-bottom: 1px;
}
.article-body-content a:hover {
border-bottom-color: #000;
background-color: rgba(0, 0, 0, 0.03);
} .article-body-content ol>li {
position: relative;
padding-left: 3rem;
margin-bottom: 1.5em !important;
counter-increment: editorial-counter;
}
.article-body-content ol>li::before {
content: counter(editorial-counter);
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
background: #111;
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 1;
} .article-body-content ul>li {
position: relative;
padding-left: 2rem;
margin-bottom: 1em !important;
}
.article-body-content ul>li::before {
content: "";
position: absolute;
left: 0.5rem;
top: 0.65em; width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
}
.article-body-content li {
margin-bottom: 0.5em !important; padding-left: 5px;
} .article-body-content ul>li+li,
.article-body-content ol>li+li {
margin-top: 0.5em !important;
} .article-body-content>*:first-child {
margin-top: 0 !important;
}