/*
Theme Name: Sabini Tile
Description: Lightweight, flexbox-based, dependency-free theme for Sabini Tile LLC. Colors, logo, company info, disclaimer and all homepage content are editable under Appearance > Theme Options.
Version: 1.0.0
Theme URI: https://www.linkedin.com/in/ryan-lopez-415a8013/?isSelfProfile=true
Author: Ryan Lopez
Author URI: https://www.linkedin.com/in/ryan-lopez-415a8013/?isSelfProfile=true
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: sabini
*/
:root{--bg:#080c24;--surface:#141a3a;--accent:#e3b82b;--text:#fff;--heading:#f6ecd2;--muted:#cdbf92;--btntext:#10142e;--line:#2a3160;--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--wrap:1200px}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--btntext);padding:8px 12px;z-index:99}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--btntext);font:700 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 24px;border:1px solid var(--accent);cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.65)}
.btn-sm{padding:13px 18px}
.btn-block{display:block;width:100%;margin-top:22px;padding:18px 24px}
/* header */
.site-header{background:var(--bg);border-bottom:2px solid var(--accent);position:relative;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--heading)}
.brand img{height:56px;width:auto}
.brand b{display:block;font:700 1.35rem/1.1 var(--serif)}
.brand small{display:block;color:var(--accent);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.nav{display:flex;align-items:center;gap:32px}
.nav ul{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.nav a:not(.btn){text-decoration:none;font-size:.9rem;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover,.nav .current-menu-item>a,.nav .current_page_item>a{border-bottom-color:var(--accent)}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{height:2px;background:var(--text);display:block}
.nav-toggle:focus-visible+.burger{outline:2px solid var(--accent)}
/* hero */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.slides{position:absolute;inset:0}.slide{position:absolute;inset:0;opacity:0}.slide:only-child{opacity:1}.slide img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.slide{animation:none!important}.slide:first-child{opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,36,.82),rgba(8,12,36,.6))}
.hero-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:48px;min-height:772px;padding-top:72px;padding-bottom:72px}
.hero-copy{flex:1 1 0;max-width:600px}
h1{font:700 clamp(2.3rem,5vw,3.5rem)/1.1 var(--serif);margin:0 0 24px;color:#fff}
.lead{font-size:1.05rem;max-width:560px;margin:0 0 32px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.stats{display:flex;flex-wrap:wrap;gap:20px 44px;list-style:none;margin:56px 0 0;padding:32px 0 0;border-top:1px solid rgba(255,255,255,.25)}
.stats b{display:block;font:600 1.6rem/1.2 var(--sans)}
.stats span{font-size:.8rem;color:#d7d7e4}
/* quote form */
.panel,.quote{background:var(--surface);border-top:4px solid var(--accent);padding:32px}
.quote{flex:0 0 484px;max-width:100%}
.panel h2,.quote h2{font:700 1.3rem/1.2 var(--serif);color:var(--heading);margin:0 0 8px}
.panel>p,.quote>p{margin:0;color:var(--muted);font-size:.82rem}
.f label{display:block;font:700 .72rem var(--sans);margin:18px 0 6px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:0;padding:13px 14px;font:inherit;font-size:.85rem}
.f textarea{min-height:92px;resize:vertical}
.f ::placeholder{color:#8e93b0}
.f .note{text-align:center;font-size:.72rem;margin-top:16px}
.hp{position:absolute;left:-9999px}
.msg{background:var(--bg);border-left:3px solid var(--accent);padding:10px 14px;margin-top:16px;font-size:.85rem}
/* sections */
.sec{padding:96px 0}
.alt{background:var(--surface)}
.title{font:700 clamp(1.7rem,3.4vw,2.5rem)/1.2 var(--serif);color:var(--heading);text-align:center;margin:0 0 16px}
.intro{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 56px}
.title+.cards,.title+.steps,.title+.gal,.title+.tq{margin-top:56px}
.cards,.steps{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin:0;padding:0}
.card{flex:0 0 calc(25% - 18px)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card h3,.step h3{font:700 1.1rem/1.3 var(--serif);color:var(--heading);margin:16px 0 8px}
.card p,.step p{margin:0 0 12px;color:var(--muted);font-size:.9rem}
.more{display:inline-block;font:700 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--heading);border-bottom:2px solid var(--accent);padding-bottom:2px}
.steps{counter-reset:s}
.step{flex:0 0 calc(25% - 18px);border-top:3px solid var(--accent);padding-top:14px;counter-increment:s}
.step h3{margin-top:0}
.step h3::before{content:counter(s) ". "}
.gal{display:flex;gap:16px}
.gal-main{flex:1 1 0;min-width:0;display:flex;margin:0}
.gal-main img{width:100%;flex:1;min-height:0;object-fit:cover}
.gal-side{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:16px}
.gal-side figure{flex:1 1 calc(50% - 8px);margin:0;min-width:0}
.gal-side img{width:100%;height:100%;aspect-ratio:190/149;object-fit:cover}
.tq{max-width:780px;margin:0 auto;text-align:center}
.tq blockquote{margin:0;font:700 clamp(1.3rem,2.6vw,1.9rem)/1.45 var(--serif);color:var(--heading)}
.tq cite{display:block;margin-top:24px;font-style:normal;font-size:.82rem;color:var(--muted)}
.cta{border-top:2px solid var(--accent);padding:64px 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font:700 clamp(1.5rem,3vw,2rem)/1.2 var(--serif);margin:0;color:#fff}
/* footer */
.site-footer{background:var(--surface);border-top:2px solid var(--accent);padding:64px 0 24px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 64px}
.foot-brand{flex:1 1 260px;max-width:340px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{margin:0;font-size:.85rem}
.foot-col{flex:0 1 220px}
.foot h4{margin:0 0 14px;color:var(--accent);font:700 .75rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--accent)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
/* inner pages */
.banner{background:var(--surface);border-bottom:1px solid var(--line);padding:72px 0;text-align:center}
.banner h1{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 14px;color:var(--heading)}
.banner p{max-width:640px;margin:0 auto;color:var(--muted)}
.banner .meta{font-size:.82rem;margin:0 0 14px}.banner .meta span+span::before{content:"";display:inline-block;width:4px;height:4px;background:var(--accent);margin:0 12px;vertical-align:middle}
.banner .meta a{text-decoration:none}
.narrow{max-width:840px}
.rows{display:flex;flex-direction:column;gap:72px}
.row{display:flex;align-items:center;gap:56px}
.rows .row:nth-child(even){flex-direction:row-reverse}
.row-img{flex:1 1 0;min-width:0}.row-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.row-body{flex:1 1 0;min-width:0}
.row-body h2{font:700 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif);color:var(--heading);margin:0 0 14px}
.row-body p{margin:0 0 16px;color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.ticks li{padding-left:22px;position:relative}.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:3px;background:var(--accent)}
.band{background:var(--surface);border-block:1px solid var(--line);padding:48px 0}
.band .stats{margin:0;padding:0;border:0;justify-content:space-around;text-align:center}
.band .stats b{font:700 2.4rem/1.2 var(--serif);color:var(--accent)}
.vals .step h3::before{content:none}
.contact{display:flex;gap:56px;align-items:flex-start}
.ct-info{flex:1 1 0}.ct-info h2{font:700 1.7rem/1.2 var(--serif);color:var(--heading);margin:0 0 12px}.ct-info>p{color:var(--muted);margin:0 0 28px}
.info{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.info b{display:block;color:var(--accent);font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.info a{text-decoration:none}.info a:hover{text-decoration:underline}
.contact .panel{flex:1 1 0;min-width:0}
.qsec{background:var(--bg);border-top:2px solid var(--accent)}
.qs{display:flex;gap:56px;align-items:flex-start}
.qs-copy{flex:1 1 0}.qs-copy h2{font:700 clamp(1.7rem,3.2vw,2.4rem)/1.2 var(--serif);color:var(--heading);margin:0 0 16px}.qs-copy>p{color:var(--muted);margin:0 0 28px;max-width:460px}
.qs .panel{flex:0 0 484px;max-width:100%}
.posts{display:flex;flex-wrap:wrap;gap:40px 32px;list-style:none;margin:0;padding:0}
.pcard{flex:0 0 calc(33.333% - 22px);display:flex;flex-direction:column}
.pc-img{display:block;background:var(--surface);aspect-ratio:16/10;overflow:hidden}.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{padding-top:16px;display:flex;flex-direction:column;flex:1}
.pc-body time{font-size:.78rem;color:var(--muted)}
.pc-body h2{font:700 1.2rem/1.3 var(--serif);margin:6px 0 10px;color:var(--heading)}.pc-body h2 a{text-decoration:none}.pc-body h2 a:hover{color:var(--accent)}
.pc-body p{margin:0 0 14px;color:var(--muted);font-size:.9rem}.pc-body .more{align-self:flex-start;margin-top:auto}
.pagination{margin-top:56px}.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.page-numbers{display:inline-block;min-width:42px;text-align:center;padding:10px 14px;border:1px solid var(--line);text-decoration:none;font-size:.85rem}
.page-numbers.current,a.page-numbers:hover{background:var(--accent);border-color:var(--accent);color:var(--btntext)}
.feat{margin:0 0 40px}.feat img{width:100%;height:auto}
.entry{font-size:1.05rem;line-height:1.8}
.entry>*{margin:0 0 1.3em}.entry h2,.entry h3,.entry h4{font-family:var(--serif);color:var(--heading);line-height:1.3;margin:1.8em 0 .6em}
.entry h2{font-size:1.7rem}.entry h3{font-size:1.35rem}
.entry a{color:var(--accent)}.entry img{height:auto}.entry ul,.entry ol{padding-left:1.4em}
.entry blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 22px;font:italic 1.15rem/1.6 var(--serif);color:var(--heading)}
.entry pre,.entry table{display:block;overflow-x:auto}.entry table{border-collapse:collapse}.entry td,.entry th{border:1px solid var(--line);padding:8px 12px}
.entry .alignright{float:right;margin:0 0 1em 1.5em}.entry .alignleft{float:left;margin:0 1.5em 1em 0}.entry::after{content:"";display:table;clear:both}
.pn{display:flex;gap:24px;justify-content:space-between;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.pn a{display:block;text-decoration:none;max-width:48%}.pn small{display:block;color:var(--accent);font:700 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.pn a:hover b{color:var(--accent)}.pn .nx{margin-left:auto;text-align:right}
.back{margin-top:32px;text-align:center}
/* responsive */
@media (max-width:1000px){
.pcard{flex-basis:calc(50% - 16px)}
.qs,.contact{flex-direction:column;align-items:stretch}.qs .panel{flex-basis:auto;width:100%}
.hero-in{flex-direction:column;align-items:stretch;min-height:0}
.hero-copy{max-width:none}.quote{flex-basis:auto;width:100%}
.card,.step{flex-basis:calc(50% - 12px)}
}
@media (max-width:860px){
.row,.rows .row:nth-child(even){flex-direction:column;align-items:stretch;gap:24px}.rows{gap:56px}
.burger{display:flex}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--accent);flex-direction:column;align-items:flex-start;gap:20px;padding:24px}
.nav ul{flex-direction:column;gap:14px}
.nav-toggle:checked~.nav{display:flex}
.sec{padding:64px 0}
.gal{flex-direction:column}.gal-main img{aspect-ratio:16/10;flex:none}
}
@media (max-width:560px){
.pcard{flex-basis:100%}.pn{flex-direction:column}.pn a{max-width:none}.pn .nx{text-align:left;margin-left:0}
.banner{padding:48px 0}
.card,.step{flex-basis:100%}
.quote,.panel{padding:24px 20px}
.hero-in{padding-top:48px;padding-bottom:48px}
.cta .btn{width:100%}
.legal{flex-direction:column}
}