.speedking-theme{color:var(--spk-text);background:var(--spk-bg);font-family:var(--spk-font-body);font-weight:400;line-height:1.7;margin:0;-webkit-font-smoothing:antialiased}.speedking-theme :is(h1,h2,h3,h4,h5,h6){font-family:var(--spk-font-heading);font-weight:300;line-height:1.2;color:var(--spk-text)}.speedking-theme .spk-container{margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:var(--spk-container)}.speedking-theme .spk-section{padding-block:var(--spk-lg)}.speedking-theme .spk-skip{position:absolute;left:-9999px}.speedking-theme .spk-skip:focus{left:var(--spk-sm);top:var(--spk-sm);background:var(--spk-primary);color:var(--spk-bg);padding:var(--spk-xs) var(--spk-sm);border-radius:var(--spk-radius-sm)}.speedking-theme .spk-label{display:block;font-family:var(--spk-font-body);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-secondary);margin-bottom:var(--spk-xs)}.speedking-theme .spk-header{position:sticky;top:0;z-index:50;background:transparent;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--spk-border)}.speedking-theme .spk-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--spk-sm);padding-block:.875rem}.speedking-theme .spk-brand{display:flex;align-items:center;gap:var(--spk-xs);min-width:0}.speedking-theme .spk-brand__link{text-decoration-line:none;font-family:var(--spk-font-heading);font-weight:400;color:var(--spk-primary);font-size:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.speedking-theme .spk-nav{justify-self:center}.speedking-theme .spk-nav__toggle{cursor:pointer;display:none;font-family:var(--spk-font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--spk-border);background:transparent;color:var(--spk-primary);border-radius:var(--spk-radius-sm);padding:.5em 1em}.speedking-theme .spk-nav__list{margin:0;display:flex;list-style-type:none;padding:0;gap:var(--spk-lg);align-items:center}.speedking-theme .spk-nav__list a{text-decoration-line:none;display:inline-flex;align-items:center;gap:.4em;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-text);transition:color .2s ease}.speedking-theme .spk-nav__list a:after{content:"↗";font-size:10px;opacity:0;transform:translate(-4px,4px);transition:opacity .2s ease,transform .2s ease;color:var(--spk-secondary)}.speedking-theme .spk-nav__list a:hover{color:var(--spk-primary)}.speedking-theme .spk-nav__list a:hover:after{opacity:1;transform:none}.speedking-theme .spk-header__cta{justify-self:end}.speedking-theme .spk-btn{display:inline-block;text-decoration-line:none;background:var(--spk-primary);color:var(--spk-bg);padding:.8em 1.75em;border:1px solid var(--spk-primary);border-radius:var(--spk-radius-sm);font-family:var(--spk-font-body);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}.speedking-theme .spk-btn:hover{background:var(--spk-bg);color:var(--spk-primary)}.speedking-theme .spk-btn--ghost,.speedking-theme .spk-hero__btn--ghost{background:transparent;color:var(--spk-primary);border:1px solid var(--spk-primary)}.speedking-theme .spk-btn--ghost:hover,.speedking-theme .spk-hero__btn--ghost:hover{background:var(--spk-primary);color:var(--spk-bg)}.speedking-theme .spk-hero{position:relative;isolation:isolate;overflow:hidden;background-color:var(--spk-bg);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 0);background-size:40px 40px;padding-block:clamp(4rem,6vw,6rem)}.speedking-theme .spk-hero>.spk-container,.speedking-theme .spk-hero__grid{position:relative;z-index:1}.speedking-theme .spk-hero--minimal{padding-block:var(--spk-lg)}.speedking-theme .spk-hero__pill{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-primary);background:#fff;border:1px solid var(--spk-border);border-radius:999px;padding:.45em 1.1em;margin:0 0 var(--spk-md)}.speedking-theme .spk-hero__title{color:var(--spk-text);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:300;line-height:1.08;letter-spacing:-.01em;margin:0 0 var(--spk-sm)}.speedking-theme .spk-hero__title em{font-style:italic;font-weight:400;color:var(--spk-primary)}.speedking-theme .spk-hero__sub{margin:0;color:var(--spk-muted);max-width:52ch;font-size:1.0625rem}.speedking-theme .spk-hero--split .spk-hero__grid{display:grid;align-items:center;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}.speedking-theme .spk-hero__actions{display:flex;flex-wrap:wrap;gap:var(--spk-sm);margin-top:var(--spk-md)}.speedking-theme .spk-hero__media{margin:0}.speedking-theme .spk-hero__media img{height:auto;width:100%;border-radius:var(--spk-radius-md);border:1px solid var(--spk-border)}.speedking-theme .spk-hero__visual{margin:0;display:grid;place-items:center;min-height:320px}.speedking-theme .spk-hero__visual .spk-breath{width:min(500px,100%);height:auto;animation:spk-breath 8s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.speedking-theme .spk-breath__icon{animation:spk-pulse 8s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.speedking-theme .spk-hero--image{position:relative;background-size:cover;background-position:50%;background-color:var(--spk-primary)}.speedking-theme .spk-hero--image,.speedking-theme .spk-hero--image .spk-hero__title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.speedking-theme .spk-hero--image .spk-hero__sub{color:hsla(0,0%,100%,.85)}.speedking-theme .spk-blob{position:absolute;width:340px;height:340px;background:var(--spk-surface);border-radius:60% 40% 30% 70%/60% 30% 70% 40%;filter:blur(40px);opacity:.6;z-index:0;pointer-events:none}.speedking-theme .spk-blob--hero{top:-100px;right:-60px}.speedking-theme .spk-blob--spin{background:hsla(0,0%,100%,.1);animation:spk-spin 40s linear infinite}.speedking-theme .spk-band{padding-block:clamp(4rem,6vw,6rem)}.speedking-theme .spk-band+.spk-band{border-top:1px solid var(--spk-border)}.speedking-theme .spk-band--alt{background:var(--spk-surface)}.speedking-theme .spk-section-head{max-width:60ch;margin-bottom:var(--spk-md)}.speedking-theme .spk-section-head__title{color:var(--spk-text);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:300;margin:0 0 var(--spk-xs)}.speedking-theme .spk-section-head__title em{font-style:italic;color:var(--spk-primary)}.speedking-theme .spk-card{background:var(--spk-surface);border:1px solid var(--spk-border);border-radius:var(--spk-radius-md);padding:var(--spk-md);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}.speedking-theme .spk-card:hover{border-color:var(--spk-secondary);transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}.speedking-theme .spk-card__index{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--spk-surface);color:var(--spk-primary);font-size:12px;font-weight:600;letter-spacing:.1em;margin-bottom:var(--spk-sm);transition:background-color .3s ease,color .3s ease}.speedking-theme .spk-card:hover .spk-card__index{background:var(--spk-primary);color:var(--spk-bg)}.speedking-theme .spk-card__title{font-family:var(--spk-font-heading);font-weight:400;font-size:1.5rem;line-height:1.25;margin:0 0 var(--spk-xs)}.speedking-theme .spk-card__title a{text-decoration-line:none;color:var(--spk-text);transition:color .2s ease}.speedking-theme .spk-card__title a:hover{color:var(--spk-primary)}.speedking-theme .spk-card__excerpt{color:var(--spk-muted);font-size:.9375rem}.speedking-theme .spk-card__more{display:flex;align-items:center;justify-content:space-between;gap:var(--spk-xs);margin-top:var(--spk-md);padding-top:var(--spk-sm);border-top:1px solid var(--spk-border);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-primary);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}.speedking-theme .spk-card:hover .spk-card__more{opacity:1;transform:none}.speedking-theme .spk-card__plus{font-size:1rem;line-height:1;transition:transform .3s ease}.speedking-theme .spk-card:hover .spk-card__plus{transform:rotate(90deg)}.speedking-theme .spk-card--icon .spk-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--spk-surface);font-size:1.25rem;margin-bottom:var(--spk-sm);transition:background-color .3s ease,color .3s ease}.speedking-theme .spk-card--icon:hover .spk-card__icon{background:var(--spk-primary);color:var(--spk-bg)}.speedking-theme .spk-card--image{overflow:hidden;padding:0}.speedking-theme .spk-card--image .spk-card__body{padding:var(--spk-md)}.speedking-theme .spk-card__media{overflow:hidden;margin:0}.speedking-theme .spk-card__media img{display:block;height:auto;width:100%;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;transition:transform .7s ease}.speedking-theme .spk-card--image:hover .spk-card__media img{transform:scale(1.05)}.speedking-theme .spk-card__cta{display:block;text-align:center;padding:.8em;border-top:1px solid var(--spk-border);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-primary);background:transparent;text-decoration-line:none;transition:background-color .3s ease,color .3s ease}.speedking-theme .spk-card__cta:hover{background:var(--spk-primary);color:var(--spk-bg)}.speedking-theme .spk-card--horizontal{display:grid;align-items:center;grid-template-columns:160px 1fr;gap:var(--spk-sm)}.speedking-theme .spk-cta{text-align:center;border:1px solid var(--spk-border);border-radius:var(--spk-radius-md);background:var(--spk-bg);padding:clamp(2rem,5vw,3.5rem)}.speedking-theme .spk-cta__title{color:var(--spk-text);margin:0 0 var(--spk-xs);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:300}.speedking-theme .spk-cta__text{margin:0 0 var(--spk-md);color:var(--spk-muted)}.speedking-theme .spk-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spk-sm)}.speedking-theme .spk-cta--dark{background:var(--spk-primary);border-color:var(--spk-primary)}.speedking-theme .spk-cta--dark .spk-cta__title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-style:italic}.speedking-theme .spk-cta--dark .spk-cta__text{color:hsla(0,0%,100%,.8)}.speedking-theme .spk-cta--dark .spk-btn{background:#fff;color:var(--spk-primary);border-color:#fff}.speedking-theme .spk-cta--dark .spk-btn:hover{background:transparent;color:#fff}.speedking-theme .spk-cta--split{text-align:left}.speedking-theme .spk-cta--split .spk-cta__grid{display:grid;align-items:center;grid-template-columns:1fr 1fr;gap:var(--spk-md)}.speedking-theme .spk-cta--image{background-size:cover;background-position:50%}.speedking-theme .spk-cta--image,.speedking-theme .spk-cta--image .spk-cta__title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.speedking-theme .spk-cta--image .spk-cta__text{color:hsla(0,0%,100%,.85)}.speedking-theme .spk-faq{display:grid;gap:var(--spk-sm)}.speedking-theme .spk-faq__item{background:var(--spk-surface);border:1px solid var(--spk-border);border-radius:var(--spk-radius-md)}.speedking-theme .spk-faq__q{width:100%;cursor:pointer;border-width:0;background-color:transparent;text-align:left;padding:var(--spk-sm) var(--spk-md);font-family:var(--spk-font-heading);font-size:1.125rem;font-weight:400;color:var(--spk-text);transition:color .2s ease}.speedking-theme .spk-faq__q:hover{color:var(--spk-primary)}.speedking-theme .spk-faq__a{padding:0 var(--spk-md) var(--spk-md);color:var(--spk-muted)}.speedking-theme .spk-faq__item:not(.is-open) .spk-faq__a{display:none}.speedking-theme .spk-testimonials{display:grid;gap:var(--spk-md);grid-template-columns:repeat(3,1fr)}.speedking-theme .spk-testimonial{background:var(--spk-bg);border:1px solid var(--spk-border);border-radius:var(--spk-radius-md);padding:var(--spk-md);display:flex;flex-direction:column}.speedking-theme .spk-testimonials .spk-testimonial:nth-child(2){border-color:var(--spk-secondary)}.speedking-theme .spk-testimonial__quote-icon{display:block;font-family:var(--spk-font-heading);font-size:3rem;line-height:.8;color:var(--spk-secondary);margin-bottom:var(--spk-xs)}.speedking-theme .spk-testimonial__quote{font-family:var(--spk-font-heading);font-style:italic;font-size:1.125rem;margin:0 0 var(--spk-md);color:var(--spk-text)}.speedking-theme .spk-testimonial__foot{display:flex;align-items:center;gap:var(--spk-xs);margin-top:auto}.speedking-theme .spk-testimonial__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--spk-surface);color:var(--spk-primary);font-size:12px;font-weight:600;letter-spacing:.05em;flex-shrink:0}.speedking-theme .spk-testimonial__name{font-style:normal;font-weight:600;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--spk-text)}.speedking-theme .spk-testimonial__role{display:block;color:var(--spk-muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.speedking-theme .spk-editorial{position:relative;overflow:hidden;background:var(--spk-primary);color:#fff;border-radius:var(--spk-radius-md);padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.2fr 1fr;gap:var(--spk-lg);align-items:center}.speedking-theme .spk-editorial .spk-label{color:var(--spk-secondary)}.speedking-theme .spk-editorial__title{color:#fff;font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:300;margin:0 0 var(--spk-md)}.speedking-theme .spk-editorial__quote{border-left:2px solid var(--spk-secondary);margin:0 0 var(--spk-md);padding-left:var(--spk-md)}.speedking-theme .spk-editorial__quote p{font-family:var(--spk-font-heading);font-style:italic;font-size:clamp(1.125rem,2vw,1.375rem);margin:0 0 var(--spk-xs);color:#fff}.speedking-theme .spk-editorial__quote cite{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-secondary)}.speedking-theme .spk-editorial__side{position:relative;min-height:260px;display:grid;place-items:center;z-index:1}.speedking-theme .spk-editorial .spk-blob{width:220px;height:220px;top:10%;right:5%;background:hsla(0,0%,100%,.1)}.speedking-theme .spk-glass{background:hsla(0,0%,100%,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.2);border-radius:var(--spk-radius-md);padding:var(--spk-sm) var(--spk-md);display:flex;align-items:center;gap:var(--spk-xs)}.speedking-theme .spk-glass .spk-testimonial__avatar{background:var(--spk-secondary);color:var(--spk-primary)}.speedking-theme .spk-glass .spk-testimonial__name{color:#fff}.speedking-theme .spk-glass .spk-testimonial__role{color:hsla(0,0%,100%,.7)}.speedking-theme .spk-split{display:grid;align-items:center;grid-template-columns:1fr 1fr;gap:var(--spk-lg)}.speedking-theme .spk-split__media{margin:0}.speedking-theme .spk-split__media img{height:auto;width:100%;border-radius:var(--spk-radius-md);border:1px solid var(--spk-border)}.speedking-theme .spk-gallery{display:grid;gap:var(--spk-sm);grid-template-columns:repeat(3,1fr)}.speedking-theme .spk-gallery__item{overflow:hidden;border-radius:var(--spk-radius-sm);margin:0}.speedking-theme .spk-gallery img{height:auto;width:100%;aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover;transition:transform .7s ease}.speedking-theme .spk-gallery__item:hover img{transform:scale(1.05)}.speedking-theme .spk-feature-grid{display:grid;gap:var(--spk-md);grid-template-columns:repeat(3,1fr)}.speedking-theme .spk-article__meta{color:var(--spk-muted);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.speedking-theme .spk-article__media img{height:auto;width:100%;border-radius:var(--spk-radius-md);border:1px solid var(--spk-border)}.speedking-theme .spk-tags{color:var(--spk-muted);font-size:.875rem}.speedking-theme .spk-related{margin-top:var(--spk-lg)}.speedking-theme .spk-content{max-width:75ch}.speedking-theme .spk-content img{height:auto;max-width:100%;border-radius:var(--spk-radius-sm)}.speedking-theme .spk-content figure{margin:0;margin-block:var(--spk-md)}.speedking-theme .spk-content p{margin:0 0 var(--spk-sm)}.speedking-theme .spk-content h2{color:var(--spk-text);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:300;line-height:1.2;margin:var(--spk-lg) 0 var(--spk-sm)}.speedking-theme .spk-content h3{font-size:1.375rem;font-weight:400;line-height:1.3}.speedking-theme .spk-content h3,.speedking-theme .spk-content h4,.speedking-theme .spk-content h5,.speedking-theme .spk-content h6{color:var(--spk-text);margin:var(--spk-md) 0 var(--spk-xs)}.speedking-theme .spk-content ol,.speedking-theme .spk-content ul{margin:0 0 var(--spk-sm);padding-left:1.375rem}.speedking-theme .spk-content li{margin-bottom:var(--spk-xs)}.speedking-theme .spk-content li::marker{color:var(--spk-secondary)}.speedking-theme .spk-content a{color:var(--spk-primary);text-decoration:underline;text-underline-offset:2px}.speedking-theme .spk-content blockquote{border-left:3px solid var(--spk-secondary);margin:var(--spk-md) 0;padding:var(--spk-xs) var(--spk-md);background:var(--spk-surface);border-radius:0 var(--spk-radius-sm) var(--spk-radius-sm) 0}.speedking-theme .spk-content blockquote p:last-child{margin-bottom:0}.speedking-theme .spk-content table{width:100%;border-collapse:collapse;margin-block:var(--spk-md);font-size:.9375rem}.speedking-theme .spk-content th{background:var(--spk-surface);color:var(--spk-primary);text-align:left}.speedking-theme .spk-content td,.speedking-theme .spk-content th{border:1px solid var(--spk-border);padding:var(--spk-xs) var(--spk-sm)}.speedking-theme .spk-content code{background:var(--spk-surface);border-radius:var(--spk-radius-sm);font-size:.875em;padding:.125rem .375rem}.speedking-theme .spk-content pre{background:#09090B;color:#E7E1EA;border-radius:var(--spk-radius-md);margin-block:var(--spk-md);overflow-x:auto;padding:var(--spk-sm) var(--spk-md)}.speedking-theme .spk-content pre code{background:none;color:inherit;padding:0}.speedking-theme .spk-content hr{border:0;border-top:1px solid var(--spk-border);margin-block:var(--spk-md)}.speedking-theme .spk-content iframe{height:auto;max-width:100%;aspect-ratio:16/9}.speedking-theme .spk-content .wp-caption-text,.speedking-theme .spk-content figcaption{color:var(--spk-muted);font-size:.875rem;margin-top:var(--spk-xs);text-align:center}.speedking-theme .spk-breadcrumbs{padding-block:var(--spk-sm);color:var(--spk-muted);font-size:.875rem}.speedking-theme .spk-breadcrumbs__list{margin:0;display:flex;list-style-type:none;flex-wrap:wrap;padding:0;gap:var(--spk-xs)}.speedking-theme .spk-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--spk-xs)}.speedking-theme .spk-breadcrumbs__item+.spk-breadcrumbs__item:before{content:"›";margin-right:var(--spk-xs);color:var(--spk-muted)}.speedking-theme .spk-breadcrumbs__link{color:var(--spk-muted);text-decoration:none}.speedking-theme .spk-footer{border-top:1px solid var(--spk-border);margin-top:var(--spk-xl);background:var(--spk-bg)}.speedking-theme .spk-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--spk-lg);padding-block:var(--spk-xl) var(--spk-lg)}.speedking-theme .spk-footer__brand{display:block;font-family:var(--spk-font-heading);font-size:1.5rem;color:var(--spk-primary);margin-bottom:var(--spk-xs);text-decoration:none}.speedking-theme .spk-footer__desc{color:var(--spk-muted);margin:0 0 var(--spk-sm);max-width:34ch;font-size:.9375rem}.speedking-theme .spk-footer .spk-label{color:var(--spk-primary);opacity:.75}.speedking-theme .spk-footer__list{margin:0;display:flex;list-style-type:none;padding:0;flex-direction:column;gap:var(--spk-xs)}.speedking-theme .spk-footer__list a{text-decoration-line:none;color:var(--spk-text);font-size:13px;transition:color .2s ease}.speedking-theme .spk-footer__list a:hover{color:var(--spk-primary)}.speedking-theme .spk-footer__contact{display:grid;gap:var(--spk-xs)}.speedking-theme .spk-footer__row{display:flex;gap:var(--spk-xs);align-items:center;color:var(--spk-text);font-size:13px}.speedking-theme .spk-footer__row svg{width:14px;height:14px;stroke:var(--spk-secondary);flex-shrink:0}.speedking-theme .spk-footer__row a{text-decoration-line:none;color:inherit}.speedking-theme .spk-footer__row a:hover{color:var(--spk-primary)}.speedking-theme .spk-footer__social{display:flex;flex-wrap:wrap;gap:var(--spk-sm)}.speedking-theme .spk-footer__social a{text-decoration-line:none;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-primary)}.speedking-theme .spk-footer__bar{border-top:1px solid var(--spk-border);padding-block:var(--spk-sm);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--spk-xs);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-muted)}.collapse{visibility:collapse}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.isolate{isolation:isolate}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-auto{height:auto}.w-full{width:100%}.flex-shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.flex-wrap{flex-wrap:wrap}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-0{border-width:0}.bg-transparent{background-color:transparent}.bg-cover{background-size:cover}.bg-center{background-position:50%}.p-0{padding:0}.uppercase{text-transform:uppercase}.italic{font-style:italic}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.speedking-theme{--spk-primary:#fff;--spk-secondary:#888;--spk-text:#e5e5e5;--spk-muted:#888;--spk-surface:#18181b;--spk-bg:#000;--spk-border:#262626;--spk-container:1200px;--spk-xs:0.5rem;--spk-sm:1rem;--spk-md:1.5rem;--spk-lg:2.5rem;--spk-xl:4rem;--spk-radius-sm:0;--spk-radius-md:0;--spk-radius-lg:0;--spk-font-heading:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--spk-font-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;--spk-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}.speedking-theme .spk-brand__logo img{display:block;height:auto;max-height:40px;width:auto}@keyframes spk-breath{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.15);opacity:.6}}@keyframes spk-pulse{0%,to{opacity:.15}50%{opacity:.3}}@keyframes spk-spin{to{transform:rotate(1turn)}}.speedking-theme [data-reveal].is-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.speedking-theme [data-reveal].is-reveal.is-visible{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.speedking-theme [data-reveal].is-reveal{opacity:1;transform:none;transition:none}.speedking-theme .spk-blob--spin,.speedking-theme .spk-breath__icon,.speedking-theme .spk-hero__visual .spk-breath{animation:none}}.speedking-theme .navigation .nav-links,.speedking-theme .spk-pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spk-xs);margin-top:var(--spk-md)}.speedking-theme .nav-links .page-numbers{display:inline-block;padding:.5em .9em;border:1px solid var(--spk-border);border-radius:var(--spk-radius-sm);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--spk-text);text-decoration:none;background:#fff;transition:border-color .2s ease,color .2s ease}.speedking-theme .nav-links .page-numbers.current{background:var(--spk-primary);color:#fff;border-color:var(--spk-primary)}.speedking-theme .nav-links a.page-numbers:hover{border-color:var(--spk-primary);color:var(--spk-primary)}.speedking-theme .post-navigation .nav-links{display:flex;justify-content:space-between;gap:var(--spk-sm);border-top:1px solid var(--spk-border);padding-top:var(--spk-md);margin-top:var(--spk-md);width:100%}.speedking-theme .post-navigation a{color:var(--spk-primary);text-decoration:none;font-family:var(--spk-font-heading);font-size:1.0625rem}.speedking-theme .post-navigation a:hover{color:var(--spk-text)}.speedking-theme .comment-list{list-style:none;margin:0;padding:0}.speedking-theme .comment-list .comment{border-bottom:1px solid var(--spk-border);padding-block:var(--spk-sm)}.speedking-theme .comment-list .children{list-style:none;margin:0;padding-left:var(--spk-md)}.speedking-theme .comment-respond label{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--spk-muted);margin-bottom:.35em}.speedking-theme .comment-respond input:not([type=submit]),.speedking-theme .comment-respond textarea{width:100%;border:1px solid var(--spk-border);background:#fff;border-radius:var(--spk-radius-sm);padding:.7em .9em;font-family:var(--spk-font-body);font-size:.9375rem;margin-bottom:var(--spk-sm)}.speedking-theme .comment-respond input[type=submit]{cursor:pointer;background:var(--spk-primary);color:#fff;border:1px solid var(--spk-primary);border-radius:var(--spk-radius-sm);padding:.8em 1.75em;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease}.speedking-theme .comment-respond input[type=submit]:hover{background:var(--spk-bg);color:var(--spk-primary)}@media (max-width:900px){.speedking-theme .spk-feature-grid,.speedking-theme .spk-footer__grid,.speedking-theme .spk-gallery,.speedking-theme .spk-grid,.speedking-theme .spk-testimonials{grid-template-columns:repeat(2,1fr)}.speedking-theme .spk-editorial{grid-template-columns:1fr}}@media (max-width:640px){.speedking-theme .spk-feature-grid,.speedking-theme .spk-gallery,.speedking-theme .spk-grid,.speedking-theme .spk-testimonials{grid-template-columns:1fr}.speedking-theme .spk-header__inner{grid-template-columns:1fr auto;row-gap:.5rem}.speedking-theme .spk-header__cta{display:none}.speedking-theme .spk-nav__toggle{display:inline-block;justify-self:end}.speedking-theme .spk-nav{display:none;width:100%;grid-column:1/-1}.speedking-theme .spk-nav.is-open{display:block}.speedking-theme .spk-nav__list{flex-direction:column;align-items:stretch;gap:0}.speedking-theme .spk-nav__list a{padding-block:.75rem;border-bottom:1px solid var(--spk-border)}.speedking-theme .spk-hero--split .spk-hero__grid{grid-template-columns:1fr}.speedking-theme .spk-hero__visual{min-height:240px}.speedking-theme .spk-card--horizontal,.speedking-theme .spk-cta--split .spk-cta__grid,.speedking-theme .spk-split{grid-template-columns:1fr}.speedking-theme .spk-band{padding-block:var(--spk-lg)}.speedking-theme .spk-footer__grid{grid-template-columns:1fr;gap:var(--spk-md);padding-block:var(--spk-lg)}} /* === spk-append: section primitives ====================================== Plain CSS (no @apply) so it is valid in BOTH this source file and the compiled assets/css/tailwind.css. There is no build toolchain on the server, so the identical block lives in both files and `npm run build:css` is a no-op for it. Keep the two copies in sync. ------------------------------------------------------------------------ */ /* Standalone figure with caption (component-level, outside .spk-content). */ .speedking-theme .spk-figure { margin: var(--spk-md) 0; } .speedking-theme .spk-figure img { width: 100%; height: auto; display: block; border-radius: var(--spk-radius-md); } .speedking-theme .spk-figure figcaption { font-size: .82rem; line-height: 1.5; color: var(--spk-muted); margin-top: var(--spk-xs); } .speedking-theme .spk-figure--tight { margin: 0 0 var(--spk-sm); } /* Data table. */ .speedking-theme .spk-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .speedking-theme .spk-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; } .speedking-theme .spk-table caption { caption-side: top; text-align: left; font-size: .82rem; color: var(--spk-muted); padding-bottom: var(--spk-xs); } .speedking-theme .spk-table th, .speedking-theme .spk-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--spk-border); } .speedking-theme .spk-table thead th { font-family: var(--spk-font-body); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--spk-secondary); border-bottom-width: 2px; } .speedking-theme .spk-table tbody tr:last-child td { border-bottom: 0; } .speedking-theme .spk-table__index { font-family: var(--spk-font-heading); font-variant-numeric: tabular-nums; color: var(--spk-primary); font-weight: 600; } .speedking-theme .spk-table__hint { font-size: .78rem; color: var(--spk-muted); margin-top: var(--spk-xs); } /* Meter list. */ .speedking-theme .spk-meters__title { font-family: var(--spk-font-heading); font-size: 1.05rem; font-weight: 400; margin: 0 0 var(--spk-sm); } .speedking-theme .spk-meter { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: var(--spk-sm); margin-bottom: .55rem; } .speedking-theme .spk-meter__label { font-family: var(--spk-font-body); font-size: .82rem; font-weight: 600; } .speedking-theme .spk-meter__track { display: block; height: 8px; border-radius: 999px; background: var(--spk-border); overflow: hidden; } .speedking-theme .spk-meter__track i { display: block; height: 100%; background: var(--spk-secondary); border-radius: inherit; } .speedking-theme .spk-meter--poor .spk-meter__track i { background: var(--spk-primary); opacity: .45; } .speedking-theme .spk-meters__note { font-size: .8rem; color: var(--spk-muted); margin: var(--spk-sm) 0 0; } /* Spec list. */ .speedking-theme .spk-specs__grid { display: grid; gap: var(--spk-md); } .speedking-theme .spk-spec { position: relative; border: 1px solid var(--spk-border); border-radius: var(--spk-radius-md); background: var(--spk-bg); padding: var(--spk-md); } .speedking-theme .spk-spec__index { position: absolute; top: var(--spk-md); right: var(--spk-md); font-family: var(--spk-font-heading); font-size: 1.6rem; line-height: 1; color: var(--spk-secondary); opacity: .5; } .speedking-theme .spk-spec__title { font-family: var(--spk-font-heading); font-size: 1.15rem; font-weight: 400; margin: 0 2.5rem .75rem 0; } .speedking-theme .spk-spec__rows { margin: 0; display: grid; gap: .6rem; } .speedking-theme .spk-spec__rows dt { font-family: var(--spk-font-body); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--spk-secondary); } .speedking-theme .spk-spec__rows dd { margin: .2rem 0 0; font-size: .92rem; line-height: 1.6; } .speedking-theme .spk-spec__note { margin: var(--spk-sm) 0 0; padding-top: var(--spk-sm); border-top: 1px solid var(--spk-border); font-size: .9rem; color: var(--spk-muted); } .speedking-theme .spk-spec__note strong { color: var(--spk-primary); } /* Plain bullet list rendered by a component (outside .spk-content). */ .speedking-theme .spk-list { margin: 0 0 var(--spk-md); padding-left: 1.1rem; } .speedking-theme .spk-list li { margin-bottom: .45rem; line-height: 1.65; } /* Figures form: four particulars assembled into a WhatsApp message. */ .speedking-theme .spk-figures { border: 1px solid var(--spk-border); border-radius: var(--spk-radius-md); background: var(--spk-surface); padding: var(--spk-md); } .speedking-theme .spk-figures__title { font-family: var(--spk-font-heading); font-size: 1.15rem; font-weight: 400; margin: 0 0 .5rem; } .speedking-theme .spk-figures__text { font-size: .88rem; color: var(--spk-muted); margin: 0 0 var(--spk-sm); } .speedking-theme .spk-figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spk-xs) var(--spk-sm); } .speedking-theme .spk-figures__grid label { display: block; font-family: var(--spk-font-body); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--spk-muted); margin-bottom: .25rem; } .speedking-theme .spk-figures__grid input, .speedking-theme .spk-figures__grid select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--spk-border); border-radius: var(--spk-radius-sm); background: var(--spk-bg); color: var(--spk-text); font-family: var(--spk-font-body); font-size: .9rem; font-variant-numeric: tabular-nums; } .speedking-theme .spk-figures__grid input:focus-visible, .speedking-theme .spk-figures__grid select:focus-visible { outline: 2px solid var(--spk-primary); outline-offset: 1px; } .speedking-theme .spk-figures__send { grid-column: 1 / -1; margin-top: var(--spk-xs); text-align: center; } .speedking-theme .spk-figures__note { font-size: .76rem; color: var(--spk-muted); margin: var(--spk-sm) 0 0; } /* Pull quote rendered by a component. */ .speedking-theme .spk-quote { margin: var(--spk-md) 0 0; padding-left: var(--spk-sm); border-left: 2px solid var(--spk-secondary); font-family: var(--spk-font-heading); font-size: 1.1rem; font-style: italic; line-height: 1.5; color: var(--spk-primary); } /* Callout strip (hold point, inline advisory). */ .speedking-theme .spk-callout { display: grid; grid-template-columns: auto 1fr; gap: var(--spk-sm); align-items: start; margin-top: var(--spk-md); padding: var(--spk-sm) var(--spk-md); border: 1px solid var(--spk-border); border-left: 3px solid var(--spk-primary); border-radius: var(--spk-radius-md); background: var(--spk-surface); } .speedking-theme .spk-callout__dot { width: 10px; height: 10px; margin-top: .55rem; border-radius: 50%; background: var(--spk-primary); } .speedking-theme .spk-callout p { margin: 0; font-size: .94rem; line-height: 1.6; } @media (max-width: 640px) { .speedking-theme .spk-meter { grid-template-columns: 1fr; gap: .25rem; } .speedking-theme .spk-figures__grid { grid-template-columns: 1fr; } } .speedking-theme .spk-hero__note { font-size: .8rem; line-height: 1.6; color: var(--spk-muted); margin: var(--spk-sm) 0 0; max-width: 56ch; } .speedking-theme .spk-hero__media figcaption { font-size: .8rem; line-height: 1.5; color: var(--spk-muted); margin-top: var(--spk-xs); } /* Body copy and "read more" links rendered by components. */ .speedking-theme .spk-prose { font-size: 1rem; line-height: 1.7; max-width: 72ch; margin: 0 0 var(--spk-md); } .speedking-theme .spk-more { margin: var(--spk-md) 0 0; font-family: var(--spk-font-body); font-size: .88rem; } .speedking-theme .spk-more a { color: var(--spk-primary); text-underline-offset: .2em; } .speedking-theme .spk-entity__text a { color: var(--spk-primary); } .speedking-theme .spk-cta--dark .spk-label { color: var(--spk-secondary); } .speedking-theme .spk-cta--dark .spk-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .speedking-theme .spk-cta--dark .spk-btn--ghost:hover { background: #fff; color: var(--spk-primary); border-color: #fff; } .speedking-theme .spk-split__media figcaption { font-size: .8rem; line-height: 1.5; color: var(--spk-muted); margin-top: var(--spk-xs); } /* === /spk-append ======================================================== */ /* === spk-noir: Cinematic Noir layer ====================================== High-contrast monochrome, red only for ::selection, sharp edges, grain. Plain CSS so it is valid in BOTH src/css/main.css and the compiled assets/css/tailwind.css — keep the two copies identical. ------------------------------------------------------------------------ */ .speedking-theme ::selection { background: var(--spk-accent, #ef4444); color: #fff; } /* Sharp, architectural edges everywhere. */ .speedking-theme :where(.spk-card, .spk-cta, .spk-spec, .spk-btn, .spk-figures, .spk-callout, .spk-figure img, .spk-card__media img, .spk-hero__media img, .spk-split__media img, input, select, textarea, button) { border-radius: 0; } /* Grain overlay over the whole page, never intercepting clicks. */ .speedking-theme .spk-grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .15; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* --- light ("inverted") sections -------------------------------------- */ .speedking-theme .spk-invert { --spk-bg: #FFFFFF; --spk-surface: #FAFAFA; --spk-text: #000000; --spk-primary: #000000; --spk-secondary: #555555; --spk-muted: #555555; --spk-border: rgba(0, 0, 0, .14); background: var(--spk-bg); color: var(--spk-text); } .speedking-theme .spk-invert--paper { --spk-bg: #FAFAFA; } .speedking-theme .spk-invert :is(h1, h2, h3, h4, h5, h6) { color: var(--spk-text); } /* --- navigation: readable over both black and white -------------------- */ .speedking-theme .spk-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; mix-blend-mode: difference; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } .speedking-theme .spk-header__inner { padding-block: 2rem; } .speedking-theme .spk-header, .speedking-theme .spk-header a, .speedking-theme .spk-header button { color: #fff; } .speedking-theme .spk-brand__link { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; text-transform: uppercase; } .speedking-theme .spk-nav__list { gap: 3rem; } .speedking-theme .spk-nav__list a { font-size: 18px; font-weight: 500; letter-spacing: -.01em; text-transform: none; } .speedking-theme .spk-nav__list a::after { content: none; } .speedking-theme .spk-nav__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; } .speedking-theme .spk-header__cta { border-color: #fff; color: #fff; background: transparent; } .speedking-theme .spk-main { padding-top: 0; } /* --- type scale -------------------------------------------------------- */ .speedking-theme :is(h1, h2, h3) { letter-spacing: -.03em; } .speedking-theme .spk-hero__title { font-size: clamp(1.9rem, 5.5vw, 4rem); font-weight: 900; line-height: .96; letter-spacing: -.03em; text-transform: uppercase; } .speedking-theme .spk-hero__title em { font-weight: 100; font-style: italic; text-transform: none; } .speedking-theme .spk-section-head__title { font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; } .speedking-theme .spk-section-head__title em { font-weight: 100; font-style: italic; text-transform: none; } .speedking-theme .spk-hero__sub { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; letter-spacing: -.01em; max-width: 44rem; } .speedking-theme .spk-label { font-family: var(--spk-font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; } .speedking-theme .spk-btn { font-family: var(--spk-font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; } /* --- immersive hero (spec: Immersive Hero + Scroll-Linked Zoom Header) -- */ .speedking-theme .spk-cine { position: relative; min-height: 640px; height: 100vh; display: grid; align-items: center; overflow: hidden; isolation: isolate; background: #000; color: #e5e5e5; } .speedking-theme .spk-cine__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; transform: scale(var(--spk-bg-scale, 1)); transform-origin: center; will-change: transform; transform-style: preserve-3d; } .speedking-theme .spk-cine__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .speedking-theme .spk-cine__tint { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(139, 69, 69, .4) 0%, rgba(20, 20, 20, .8) 60%, rgba(0, 0, 0, .95) 100%); } .speedking-theme .spk-cine__inner { position: relative; width: 100%; padding-block: 8rem 4rem; } .speedking-theme .spk-cine__headwrap { position: relative; } .speedking-theme .spk-cine__title { margin: 0; color: #e5e5e5; font-size: clamp(2rem, 6.5vw, 5rem); font-weight: 900; line-height: .86; letter-spacing: -.03em; text-transform: uppercase; transform: scale(var(--spk-title-scale, 1)); transform-origin: left center; will-change: transform; transform-style: preserve-3d; } .speedking-theme .spk-cine__title em { font-weight: 100; font-style: italic; text-transform: none; } .speedking-theme .spk-cine__aside { display: block; margin-top: var(--spk-sm); font-family: var(--spk-font-mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #888; opacity: var(--spk-aside-opacity, 1); } .speedking-theme .spk-cine__desc { max-width: 44rem; margin: var(--spk-md) 0 0; color: rgba(255, 255, 255, .7); font-size: 1.0625rem; font-weight: 300; line-height: 1.5; } .speedking-theme .spk-cine__notes { margin-top: var(--spk-md); display: grid; gap: .4rem; max-width: 48rem; } .speedking-theme .spk-cine__notes p { margin: 0; font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .45); } .speedking-theme .spk-cine__actions { display: flex; flex-wrap: wrap; gap: var(--spk-sm); margin-top: var(--spk-md); } .speedking-theme .spk-cine .spk-btn { background: #fff; color: #000; border-color: #fff; } .speedking-theme .spk-cine .spk-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); } .speedking-theme .spk-cine .spk-btn--ghost:hover { background: #fff; color: #000; border-color: #fff; } .speedking-theme .spk-cine__caption { margin: var(--spk-sm) 0 0; font-size: .78rem; color: rgba(255, 255, 255, .4); } @media (min-width: 1024px) { .speedking-theme .spk-cine__aside { position: absolute; top: .4em; left: calc(100% + 1rem); margin: 0; width: max-content; font-size: 20px; letter-spacing: -.02em; text-transform: none; } } /* --- works grid (spec: Project Grid / Interactive Project Card) -------- */ .speedking-theme .spk-works { padding-block: 6rem; } .speedking-theme .spk-works__title { font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: 900; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 3rem; } .speedking-theme .spk-works__title em { font-weight: 100; font-style: italic; } .speedking-theme .spk-works__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .speedking-theme .spk-work { position: relative; display: block; overflow: hidden; background: #18181b; aspect-ratio: 16 / 10; text-decoration: none; color: #fff; } .speedking-theme .spk-work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-work:hover img, .speedking-theme .spk-work:focus-visible img { transform: scale(1.05); } .speedking-theme .spk-work__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .1) 55%, transparent 100%); } .speedking-theme .spk-work__info { position: absolute; inset: auto 0 0 0; padding: 2.5rem; } .speedking-theme .spk-work__name { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.6rem); font-weight: 900; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: #fff; } .speedking-theme .spk-work__meta { margin: .5rem 0 0; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .7); transform: translateY(4px); transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-work:hover .spk-work__meta, .speedking-theme .spk-work:focus-visible .spk-work__meta { transform: translateY(0); } .speedking-theme .spk-work__go { position: absolute; top: 2rem; right: 2rem; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; opacity: 0; transition: opacity .3s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-work:hover .spk-work__go, .speedking-theme .spk-work:focus-visible .spk-work__go { opacity: 1; } .speedking-theme .spk-work__go svg { width: 1.25rem; height: 1.25rem; } /* --- manifesto (spec: Manifesto Section) ------------------------------- */ .speedking-theme .spk-manifesto { background: #09090b; color: #e5e5e5; display: grid; place-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); padding-inline: var(--spk-sm); text-align: center; } .speedking-theme .spk-manifesto__text { max-width: 54rem; margin: 0 auto; font-size: clamp(1.3rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; } .speedking-theme .spk-manifesto__rule { width: 100%; max-width: 320px; height: 1px; margin: 1.75rem auto 0; background: rgba(255, 255, 255, .3); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-manifesto.is-in .spk-manifesto__rule { transform: scaleX(1); } .speedking-theme .spk-manifesto__text { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-manifesto.is-in .spk-manifesto__text { opacity: 1; transform: translateY(0); } /* --- closing "start a project" (spec: Project Contact Footer) ---------- */ .speedking-theme .spk-start { padding-block: 5rem; } .speedking-theme .spk-start__head { display: block; margin: 0 0 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--spk-border); font-size: clamp(1.9rem, 6.5vw, 5rem); font-weight: 900; line-height: .88; letter-spacing: -.03em; text-transform: uppercase; color: var(--spk-text); text-decoration: none; } .speedking-theme .spk-start__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: end; } .speedking-theme .spk-start__mail { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; color: var(--spk-text); text-decoration: none; word-break: break-word; } .speedking-theme .spk-start__mail:hover { text-decoration: underline; text-underline-offset: .2em; } .speedking-theme .spk-start__links { display: grid; gap: .5rem; font-size: .95rem; } .speedking-theme .spk-start__links a { color: var(--spk-text); text-decoration: none; } .speedking-theme .spk-start__links a:hover { text-decoration: underline wavy; text-underline-offset: .25em; } .speedking-theme .spk-start__fine { font-family: var(--spk-font-mono); font-size: 13px; color: var(--spk-muted); text-align: right; } /* --- Z-pattern sections (inner pages) --------------------------------- */ .speedking-theme .spk-z { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); } .speedking-theme .spk-z + .spk-z { border-top: 1px solid var(--spk-border); } .speedking-theme .spk-z__media { position: relative; margin: 0; overflow: hidden; background: var(--spk-surface); aspect-ratio: 4 / 3; } .speedking-theme .spk-z__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-z:hover .spk-z__media img { transform: scale(1.04); } .speedking-theme .spk-z__index { position: absolute; top: 0; left: 0; padding: .5rem .9rem; background: var(--spk-bg); color: var(--spk-text); font-family: var(--spk-font-mono); font-size: 13px; } .speedking-theme .spk-z__body > :first-child { margin-top: 0; } .speedking-theme .spk-z__title { font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--spk-sm); } .speedking-theme .spk-z--flip .spk-z__media { order: 2; } .speedking-theme .spk-z--wide { grid-template-columns: 1fr; } .speedking-theme .spk-z--wide .spk-z__body { max-width: 72ch; } /* --- FAQ tabs (spec: focused, architectural) --------------------------- */ .speedking-theme .spk-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--spk-border); margin-bottom: var(--spk-lg); } .speedking-theme .spk-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; padding: .9rem 1.2rem; font-family: var(--spk-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--spk-muted); } .speedking-theme .spk-tab:hover { color: var(--spk-text); } .speedking-theme .spk-tab[aria-selected="true"] { color: var(--spk-text); border-bottom-color: var(--spk-primary); } .speedking-theme .spk-tabpanel[hidden] { display: none; } .speedking-theme .spk-drop { border-bottom: 1px solid var(--spk-border); } .speedking-theme .spk-drop__q { appearance: none; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--spk-sm); border: 0; background: transparent; cursor: pointer; padding: 1.4rem 0; text-align: left; color: var(--spk-text); font-family: var(--spk-font-heading); font-size: clamp(.98rem, 1.2vw, 1.12rem); font-weight: 500; letter-spacing: -.02em; } .speedking-theme .spk-drop__q::after { content: "+"; flex: none; font-family: var(--spk-font-mono); font-size: 1.2rem; color: var(--spk-muted); } .speedking-theme .spk-drop.is-open .spk-drop__q::after { content: "–"; } .speedking-theme .spk-drop__a { padding: 0 0 1.4rem; max-width: 72ch; color: var(--spk-muted); } .speedking-theme .spk-drop__a > :last-child { margin-bottom: 0; } .speedking-theme .spk-drop:not(.is-open) .spk-drop__a { display: none; } /* --- about: statement-led ---------------------------------------------- */ .speedking-theme .spk-statement { padding-block: clamp(4rem, 10vw, 9rem); } .speedking-theme .spk-statement__text { max-width: 50rem; margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; } .speedking-theme .spk-statement__text strong { font-weight: 900; } .speedking-theme .spk-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--spk-border); } .speedking-theme .spk-pillar__n { font-family: var(--spk-font-mono); font-size: 13px; color: var(--spk-muted); } .speedking-theme .spk-pillar__t { margin: .6rem 0 .4rem; font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; } .speedking-theme .spk-pillar p { margin: 0; font-size: .95rem; color: var(--spk-muted); } /* --- shared page chrome ------------------------------------------------ */ .speedking-theme .spk-pagehead { padding-block: clamp(6rem, 10vw, 8.5rem) clamp(1.75rem, 4vw, 3rem); } .speedking-theme .spk-pagehead__title { margin: 0; font-size: clamp(1.85rem, 5vw, 3.6rem); font-weight: 900; line-height: .88; letter-spacing: -.03em; text-transform: uppercase; } .speedking-theme .spk-pagehead__title em { font-weight: 100; font-style: italic; text-transform: none; } .speedking-theme .spk-pagehead__lede { max-width: 46rem; margin: var(--spk-md) 0 0; font-size: 1.0625rem; font-weight: 300; line-height: 1.5; color: var(--spk-muted); } .speedking-theme .spk-eyebrow { font-family: var(--spk-font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--spk-muted); margin: 0 0 var(--spk-sm); } /* reveal: entrance easing per spec */ .speedking-theme [data-reveal] { transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); } @media (max-width: 900px) { .speedking-theme .spk-works__grid, .speedking-theme .spk-start__grid, .speedking-theme .spk-pillars { grid-template-columns: 1fr; } .speedking-theme .spk-start__fine { text-align: left; } .speedking-theme .spk-z { grid-template-columns: 1fr; } .speedking-theme .spk-z--flip .spk-z__media { order: 0; } .speedking-theme .spk-cine { min-height: 100vh; height: auto; } } @media (prefers-reduced-motion: reduce) { .speedking-theme .spk-cine__bg, .speedking-theme .spk-cine__title { transform: none !important; } .speedking-theme .spk-manifesto__text { opacity: 1; transform: none; } .speedking-theme .spk-manifesto__rule { transform: scaleX(1); } .speedking-theme .spk-work img, .speedking-theme .spk-z__media img { transition: none; } } .speedking-theme .spk-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .speedking-theme .spk-footer__list a { color: var(--spk-text); text-decoration: none; } .speedking-theme .spk-footer__list a:hover { text-decoration: underline wavy; text-underline-offset: .25em; } .speedking-theme .spk-footer__brand { color: var(--spk-text); text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; } .speedking-theme .spk-pagehead__rest { max-width: 72ch; margin-top: var(--spk-md); color: var(--spk-muted); } .speedking-theme .spk-pagehead__rest > :last-child { margin-bottom: 0; } /* --- carousel: native scroll-snap, swipeable on touch, buttons on desktop -- */ .speedking-theme .spk-carousel { position: relative; } .speedking-theme .spk-carousel__track { display: flex; gap: var(--spk-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: .25rem; } .speedking-theme .spk-carousel__track::-webkit-scrollbar { display: none; } .speedking-theme .spk-carousel__track > * { flex: 0 0 min(100%, 26rem); scroll-snap-align: start; } .speedking-theme .spk-carousel__track:focus-visible { outline: 2px solid var(--spk-primary); outline-offset: 4px; } .speedking-theme .spk-carousel .spk-spec { height: 100%; } .speedking-theme .spk-carousel__nav { display: flex; align-items: center; gap: .5rem; margin-top: var(--spk-sm); } .speedking-theme .spk-carousel__count { margin-right: auto; font-family: var(--spk-font-mono); font-size: 12px; color: var(--spk-muted); } .speedking-theme .spk-carousel__btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--spk-border); background: transparent; color: var(--spk-text); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .speedking-theme .spk-carousel__btn:hover:not(:disabled) { background: var(--spk-primary); color: var(--spk-bg); border-color: var(--spk-primary); } .speedking-theme .spk-carousel__btn:disabled { opacity: .28; cursor: default; } .speedking-theme .spk-carousel__btn svg { width: 1.1rem; height: 1.1rem; } .speedking-theme .spk-carousel[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .speedking-theme .spk-carousel__track { scroll-behavior: auto; } } /* === /spk-noir ========================================================== */ /* === spk-append: legibility + layout repair ============================== Plain CSS (no @apply) so it is valid in BOTH src/css/main.css and the compiled assets/css/tailwind.css — there is no build toolchain on the server, so this identical block lives in both files. Root cause: the palette was inverted to dark (--spk-bg #000, --spk-text #E5E5E5, --spk-primary #FFF) but several surfaces still hard-coded the old light-theme #fff, so dark-theme text landed on a white box at 1:1 contrast. Pointing those surfaces at --spk-surface fixes every child at once, and stays correct inside .spk-invert where the token resolves light. ========================================================================= */ /* 1. Surfaces that still hard-coded #fff under the dark palette. */ .speedking-theme .spk-card { background: var(--spk-surface); } .speedking-theme .spk-faq__item { background: var(--spk-surface); } .speedking-theme .spk-hero__pill { background: var(--spk-surface); color: var(--spk-text); } .speedking-theme .spk-hero--image { background-color: var(--spk-surface); } .speedking-theme .nav-links .page-numbers { background: var(--spk-surface); color: var(--spk-text); } .speedking-theme .nav-links .page-numbers.current { background: var(--spk-primary); color: var(--spk-bg); border-color: var(--spk-primary); } .speedking-theme .comment-respond input:not([type="submit"]), .speedking-theme .comment-respond textarea { background: var(--spk-surface); color: var(--spk-text); } .speedking-theme .comment-respond input[type="submit"] { color: var(--spk-bg); } /* 2. Editorial panel is painted --spk-primary, so its text must be --spk-bg. */ .speedking-theme .spk-editorial { color: var(--spk-bg); } .speedking-theme .spk-editorial__title, .speedking-theme .spk-editorial__quote p { color: var(--spk-bg); } /* 3. .spk-work is a dark photo tile sitting inside the light .spk-invert band. ".spk-invert :is(h1..h6)" (0,2,1) outranks ".spk-work__name" (0,2,0), so the name rendered #000 on #18181b. Re-scope the tokens rather than fight specificity — every child of the tile then resolves light. */ .speedking-theme .spk-work { --spk-text: #FFFFFF; --spk-primary: #FFFFFF; --spk-secondary: rgba(255, 255, 255, .72); --spk-muted: rgba(255, 255, 255, .72); --spk-border: rgba(255, 255, 255, .18); } /* 4. Micro-type floor — 10/11px uppercase at .2em tracking is not readable. */ .speedking-theme .spk-card__more, .speedking-theme .spk-card__cta, .speedking-theme .spk-testimonial__name, .speedking-theme .spk-testimonial__role, .speedking-theme .spk-editorial__quote cite, .speedking-theme .spk-article__meta, .speedking-theme .spk-footer__social a, .speedking-theme .spk-nav__toggle, .speedking-theme .nav-links .page-numbers, .speedking-theme .comment-respond label, .speedking-theme .spk-table thead th, .speedking-theme .spk-spec__rows dt, .speedking-theme .spk-figures__grid label, .speedking-theme .spk-card__index, .speedking-theme .spk-footer__bar { font-size: 12px; letter-spacing: .12em; } /* 5. Header brand was crushed to 6px (it needs 135px): .spk-brand carries min-width:0 while the ten-item 18px nav overflowed the middle column. */ .speedking-theme .spk-brand { min-width: max-content; } .speedking-theme .spk-brand__link { overflow: visible; text-overflow: clip; } .speedking-theme .spk-nav__list { gap: clamp(.6rem, 1.6vw, 1.5rem); } .speedking-theme .spk-nav__list a { white-space: nowrap; font-size: 16px; } /* 6. The desktop row only fits inside the 1200px container; below that the hamburger has to take over. It previously waited until 640px, leaving 641-1200px with a wrapped nav and no visible brand. */ @media (max-width: 1200px) { .speedking-theme .spk-header__inner { grid-template-columns: 1fr auto; row-gap: .5rem; } .speedking-theme .spk-header__cta { display: none; } .speedking-theme .spk-nav__toggle { display: inline-block; justify-self: end; } .speedking-theme .spk-nav { display: none; width: 100%; grid-column: 1 / -1; } .speedking-theme .spk-nav.is-open { display: block; } .speedking-theme .spk-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .speedking-theme .spk-nav__list a { padding-block: .75rem; border-bottom: 1px solid var(--spk-border); } } /* 7. Editor tables have no scroll wrapper (the theme's own .spk-table does), so one wide content table dragged the whole page sideways on mobile. */ @media (max-width: 900px) { .spk-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* === /spk-append: legibility + layout repair ============================= */ /* === spk-append: link + panel defaults =================================== Preflight is off and the theme set no base link colour, so any link a component does not style fell through to the UA blue (#0000EE) — 2.23:1 on black. This base rule is (0,1,1), below every .spk-* component rule, so it only catches those fall-through links and resolves per band via the token. ========================================================================= */ .speedking-theme a { color: var(--spk-primary); } /* .spk-cta--dark paints itself var(--spk-primary) — black inside .spk-invert — but its label kept the light band's --spk-secondary (#555 on #000, 2.8:1). Match the light-on-dark value the panel already uses for its own text. */ .speedking-theme .spk-cta--dark .spk-label { color: rgba(255, 255, 255, .75); } /* === /spk-append: link + panel defaults ================================== */ /* === spk-append: grid blowout ============================================ The single-column mobile overrides use "1fr", whose implicit min-width:auto lets a wide child (a content table) stretch the column past the viewport — that was the horizontal scroll on /contact/. minmax(0, 1fr) lets the column shrink so the child's own overflow-x:auto does the scrolling instead. ========================================================================= */ @media (max-width: 900px) { .speedking-theme .spk-z, .speedking-theme .spk-works__grid, .speedking-theme .spk-start__grid, .speedking-theme .spk-pillars { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .speedking-theme .spk-grid, .speedking-theme .spk-testimonials, .speedking-theme .spk-feature-grid, .speedking-theme .spk-gallery, .speedking-theme .spk-split, .speedking-theme .spk-card--horizontal, .speedking-theme .spk-cta--split .spk-cta__grid { grid-template-columns: minmax(0, 1fr); } } /* === /spk-append: grid blowout =========================================== */ /* === spk-append: photo caption legibility ================================ .spk-work__meta sits on a photograph, so no contrast checker can clear it — over a bright hull the .7 white washed out. Lift the text and deepen the scrim where the caption actually sits, keeping the gradient cinematic. ========================================================================= */ .speedking-theme .spk-work__shade { background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .15) 68%, transparent 100%); } .speedking-theme .spk-work__meta { color: rgba(255, 255, 255, .92); } /* === /spk-append: photo caption legibility =============================== */ /* === spk-append: card chrome + manifesto rhythm ========================== Plain CSS (no @apply) so it is valid in BOTH src/css/main.css and the compiled assets/css/tailwind.css — no build toolchain on the server, so this identical block lives in both files. Three defects this repairs: 1. .spk-card__index was a fixed 48px circle sized for "01". Cards that pass a word ("Cluster two", "Haul-out") overflowed it, printing text across the card. It is now a tag that grows with its label — and sharp-edged, which the design calls for anyway. 2. .spk-cta--dark filled itself with --spk-primary. That token is white in this palette, so the panel's white title sat on a white panel. 3. The manifesto reserved a whole viewport for one sentence, leaving the gap above and below it far larger than any other section. ========================================================================= */ /* 1. Index/tag: grows with its label, sharp edges. */ .speedking-theme .spk-card__index { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 2.25rem; min-height: 1.75rem; padding: .25rem .6rem; border-radius: 0; border: 1px solid var(--spk-border); background: transparent; color: var(--spk-muted); white-space: nowrap; font-family: var(--spk-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--spk-sm); } .speedking-theme .spk-card:hover .spk-card__index { background: var(--spk-primary); color: var(--spk-bg); border-color: var(--spk-primary); } .speedking-theme .spk-card--icon .spk-card__icon { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--spk-border); background: transparent; } /* 2. Dark CTA panel: explicit noir values, not the (now white) primary token. */ .speedking-theme .spk-cta--dark { background: #09090b; border-color: #262626; color: #e5e5e5; } .speedking-theme .spk-cta--dark .spk-cta__title { color: #fff; } .speedking-theme .spk-cta--dark .spk-cta__text { color: rgba(255, 255, 255, .72); } .speedking-theme .spk-cta--dark .spk-btn { background: #fff; color: #000; border-color: #fff; } .speedking-theme .spk-cta--dark .spk-btn:hover { background: transparent; color: #fff; } /* 3. Manifesto: a section, not a viewport. */ .speedking-theme .spk-manifesto { min-height: 0; padding-block: clamp(3rem, 7vw, 5.5rem); padding-inline: var(--spk-sm); } .speedking-theme .spk-manifesto__rule { margin-top: 1.75rem; } /* 4. Hover affordance: an arrow that leans out as the card is pointed at. */ .speedking-theme .spk-card__more { color: var(--spk-muted); } .speedking-theme .spk-card__go { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .speedking-theme .spk-card__go svg { width: 100%; height: 100%; stroke: currentColor; } .speedking-theme .spk-card:hover .spk-card__go { transform: translate(3px, -3px); } .speedking-theme .spk-card__cta { display: flex; align-items: center; justify-content: center; gap: .5rem; } .speedking-theme .spk-card__cta .spk-card__go { width: 1rem; height: 1rem; } .speedking-theme .spk-card--image:hover .spk-card__go { transform: translate(3px, -3px); } .speedking-theme .spk-z__media .spk-card__go, .speedking-theme .spk-work__go svg { stroke: currentColor; } @media (prefers-reduced-motion: reduce) { .speedking-theme .spk-card__go { transition: none; } } /* === /spk-append ========================================================= */ /* === spk-append: card grid base ========================================== .spk-grid only ever had responsive column overrides inside media queries — it never declared `display: grid`, so above 900px the archive and journal card lists rendered as stacked full-width blocks. ========================================================================= */ .speedking-theme .spk-grid { display: grid; gap: var(--spk-md); grid-template-columns: repeat(3, minmax(0, 1fr)); } .speedking-theme .spk-grid > * { min-width: 0; } /* === /spk-append ========================================================= */ /* === spk-append: logo ==================================================== The mark is a square PNG with a solid white background, so it gets a white rounded tile rather than floating on the black page. .spk-header carries mix-blend-mode: difference so the nav stays readable over both black and white bands. A blended layer cannot be opted out of by a child, and difference would invert the logo (navy -> orange over a light section), so the blend moves off the header onto the text that needs it. ========================================================================= */ .speedking-theme .spk-header { mix-blend-mode: normal; } .speedking-theme .spk-brand__link, .speedking-theme .spk-nav, .speedking-theme .spk-nav__toggle, .speedking-theme .spk-header__cta { mix-blend-mode: difference; } .speedking-theme .custom-logo-link { box-sizing: border-box; display: inline-grid; place-items: center; overflow: hidden; flex-shrink: 0; background: #fff; border-radius: 14px; padding: 2px; line-height: 0; } .speedking-theme .custom-logo-link img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 9px; } .speedking-theme .spk-brand .custom-logo-link { width: 56px; height: 56px; } /* Footer sits on the paper band, so the white tile needs an edge to read. */ .speedking-theme .spk-footer__logo { display: inline-block; margin-bottom: .6rem; } .speedking-theme .spk-footer__logo .custom-logo-link { width: 64px; height: 64px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10); } /* === /spk-append: logo =================================================== */ /* === spk-append: homepage rhythm + duo layout ============================ Measured with Playwright at 1440px against the 1200px container: - .spk-figures sat 0px above the stage cards that follow it, so the grid read as part of the form rather than a new block. - "Constraint three" stacked a 1200x747 photo, a 1200px rule-quote and a 1200px meter chart under a 660px paragraph: four different measures in one section, with the fourth term card orphaned on its own grid row. The duo layout restores the two-column reading this section was written for, which halves the photo and puts every line on one measure. ========================================================================= */ /* Blocks stacked inside one band need air between them. */ .speedking-theme .spk-figures { margin-bottom: var(--spk-lg); } .speedking-theme .spk-feature-grid { gap: 2rem; } .speedking-theme .spk-grid { gap: 2rem; } /* A standalone photo should not outrun the text it illustrates. */ .speedking-theme .spk-figure { max-width: 46rem; margin-inline: auto; } .speedking-theme .spk-figure img { max-height: 30rem; object-fit: cover; } /* Two-column section: argument on the left, evidence on the right. */ .speedking-theme .spk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .speedking-theme .spk-duo > * { min-width: 0; } .speedking-theme .spk-duo .spk-prose { max-width: none; } .speedking-theme .spk-duo .spk-figure { max-width: none; margin: 0 0 var(--spk-md); } .speedking-theme .spk-duo .spk-figure img { max-height: 22rem; } .speedking-theme .spk-duo .spk-quote { margin-top: var(--spk-md); } /* Definition list — the terms read as a list, not as four orphaned cards. */ .speedking-theme .spk-deflist { margin: var(--spk-md) 0 0; display: grid; gap: var(--spk-sm); } .speedking-theme .spk-deflist > div { padding-top: var(--spk-sm); border-top: 1px solid var(--spk-border); } .speedking-theme .spk-deflist dt { font-family: var(--spk-font-body); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .2rem; } .speedking-theme .spk-deflist dd { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--spk-muted); } @media (max-width: 900px) { .speedking-theme .spk-duo { grid-template-columns: 1fr; } .speedking-theme .spk-figure img { max-height: 22rem; } } /* === /spk-append ========================================================= */ /* === spk-append: logo tile sizing ======================================== The logo tile itself (white rounded square, mark centred inside it) is defined in the "logo" block above: inline-grid + place-items:center with the image filling the tile. Only the responsive size belongs here — do not re-declare display or image dimensions, or the centring is lost. ========================================================================= */ @media (max-width: 640px) { .speedking-theme .spk-brand .custom-logo-link { width: 44px; height: 44px; border-radius: 11px; } } /* === /spk-append ========================================================= */ /* === spk-append: stacked-block rhythm + box sizing ======================= Playwright found the same 0px join in three more places: the works grid sat flush under its lede, and in the constraint sections a data table butted straight against the split above it and the card grid below it. Blocks stacked inside one band now always get air between them. Preflight is deliberately off (it would leak into plugin markup), which also means `box-sizing: border-box` is never set. Anything with an explicit width plus padding therefore overflowed — .spk-cine__inner measured 422px inside a 390px viewport. Scoping the reset to .speedking-theme fixes that without touching anything the theme does not own. ========================================================================= */ .speedking-theme, .speedking-theme *, .speedking-theme *::before, .speedking-theme *::after { box-sizing: border-box; } .speedking-theme .spk-band > .spk-container > section + section, .speedking-theme .spk-band > .spk-container > section + div, .speedking-theme .spk-band > .spk-container > div + section, .speedking-theme .spk-band > .spk-container > div + div { margin-top: var(--spk-lg); } .speedking-theme .spk-works__grid { margin-top: var(--spk-lg); } .speedking-theme .spk-split + .spk-table-section, .speedking-theme .spk-table-section + .spk-features, .speedking-theme .spk-features + .spk-figure, .speedking-theme .spk-specs + .spk-figure { margin-top: var(--spk-lg); } /* The duo's two columns are one block each — no extra rule between them. */ .speedking-theme .spk-duo > * + * { margin-top: 0; } /* === /spk-append ========================================================= */ /* === spk-append: hero label + small-print legibility ===================== The floating locality label is positioned just past the right edge of the heading. That works for a few-word display heading; this one is a full sentence 1168px wide, so the label was being clipped by 147px at 1440 and 227px at 1280 (measured). It now only floats where it actually fits, and otherwise sits under the heading as a mono strap. The hero small print was rgba(255,255,255,.45) over a photograph — legible on the dark half of the image, invisible on the bright hull. ========================================================================= */ .speedking-theme .spk-cine__aside { position: static; left: auto; top: auto; margin-top: var(--spk-sm); } @media (min-width: 1700px) { .speedking-theme .spk-cine__headwrap { max-width: calc(100% - 20rem); } .speedking-theme .spk-cine__aside { position: absolute; top: .35em; left: calc(100% + 1rem); margin: 0; width: max-content; max-width: 18rem; font-size: 20px; letter-spacing: -.02em; text-transform: none; } } .speedking-theme .spk-cine__notes p { color: rgba(255, 255, 255, .62); } .speedking-theme .spk-cine__caption { color: rgba(255, 255, 255, .55); } .speedking-theme .spk-cine__desc { color: rgba(255, 255, 255, .82); } /* === /spk-append ========================================================= */ /* === spk-append: mega menu =============================================== Ten flat links became four silos. A silo heading is a disclosure, not a destination, so it is a