*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:#f6f8ff;
font-family:Arial,Helvetica,sans-serif;
background:#04070d;
position:relative;
}
body::before{
content:"";
position:fixed;
inset:0;
background:url('assets/design-bg.svg') center/cover no-repeat;
opacity:.72;
z-index:-2;
}
body::after{
content:"";
position:fixed;
inset:0;
background:linear-gradient(180deg,rgba(3,5,10,.36),rgba(3,5,10,.94));
z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1160px,calc(100% - 34px));margin:0 auto;padding:82px 0}
.center{text-align:center}
.maxText{max-width:780px;margin-left:auto;margin-right:auto;color:#cdd7ef;line-height:1.65}
.eyebrow{color:#d8a72e;text-transform:uppercase;letter-spacing:4px;font-size:12px;font-weight:900}
.note,small{color:#aeb8d4;line-height:1.55}
.topNav{
width:min(1200px,calc(100% - 24px));
margin:0 auto;
display:flex;
gap:18px;
justify-content:space-between;
align-items:center;
padding:20px 0;
}
.brandLockup{display:flex;align-items:center;gap:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.brandLockup span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#d8a72e;color:#050505}
.brandLockup b{font-size:14px}
.mobileNav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.mobileNav a{
padding:10px 12px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
color:#f6f8ff;
background:rgba(255,255,255,.04);
font-size:12px;
text-transform:uppercase;
letter-spacing:.9px;
font-weight:900;
}
.mobileNav a:hover{border-color:#d8a72e;background:rgba(216,167,46,.13)}
.mobileNav .navcta{background:#d8a72e;color:#050505;border-color:#d8a72e}
.hero{
min-height:96vh;
background:radial-gradient(circle at 72% 25%,rgba(46,124,255,.24),transparent 34%),linear-gradient(135deg,rgba(2,5,12,.88),rgba(5,8,14,.56));
border-bottom:1px solid rgba(255,255,255,.12)
}
.heroGrid{
width:min(1200px,calc(100% - 34px));
margin:34px auto 0;
display:grid;
grid-template-columns:1.02fr .98fr;
gap:42px;
align-items:center;
padding-bottom:72px;
}
.heroText h1{
font-size:clamp(58px,8vw,116px);
line-height:.86;
margin:16px 0 18px;
text-transform:uppercase;
letter-spacing:3px;
}
.heroText h1 span{color:#d8a72e;display:block}
.tag{
display:inline-block;
margin:0 0 22px;
padding:10px 14px;
color:#050505;
background:#d8a72e;
text-transform:uppercase;
font-weight:900;
letter-spacing:.8px;
}
.lead{font-size:18px;line-height:1.72;color:#dce7ff;max-width:680px}
.heroBadges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.heroBadges span{padding:10px 12px;border-radius:999px;border:1px solid rgba(216,167,46,.45);background:rgba(216,167,46,.10);font-weight:900;color:#ffe7a3}
.btn,.pay,button,#paypalLink{
display:inline-block;
margin:10px 10px 0 0;
border:1px solid #d8a72e;
background:#d8a72e;
color:#050505;
padding:13px 18px;
text-transform:uppercase;
font-weight:900;
letter-spacing:1px;
border-radius:999px;
cursor:pointer;
}
.btn.ghost{background:rgba(255,255,255,.06);color:#f6f8ff;border-color:rgba(255,255,255,.22)}
.btn.blue{background:#2e7cff;border-color:#2e7cff;color:#fff}
.videoShowcase{display:grid;gap:14px}
.videoFrame{
position:relative;
border-radius:30px;
overflow:hidden;
border:1px solid rgba(216,167,46,.54);
box-shadow:0 0 50px rgba(46,124,255,.22),0 25px 70px rgba(0,0,0,.45);
background:#06080d;
}
.videoFrame::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:30px;pointer-events:none}
.videoPoster{width:100%;aspect-ratio:16/9;background:url('assets/video-placeholder.svg') center/cover no-repeat}
.playOverlay{
position:absolute;
inset:50% auto auto 50%;
transform:translate(-50%,-50%);
width:88px;height:88px;border-radius:50%;
display:grid;place-items:center;
font-size:34px;
background:#d8a72e;
box-shadow:0 0 0 16px rgba(216,167,46,.16);
}
.videoNote{text-align:center;color:#aeb8d4;margin:0}
.tickerBar{
display:grid;
grid-template-columns:repeat(6,1fr);
border-top:1px solid rgba(216,167,46,.22);
border-bottom:1px solid rgba(216,167,46,.22);
background:rgba(0,0,0,.62);
}
.tickerBar span{
text-align:center;
padding:17px 10px;
color:#d8a72e;
font-weight:900;
text-transform:uppercase;
border-right:1px solid rgba(216,167,46,.18);
}
.splitSection{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.wrap h2{font-size:clamp(34px,4.5vw,64px);line-height:.98;margin:8px 0 18px}
.wrap p{line-height:1.7;color:#dce7ff}
.impactCard,.calloutSection,.submitSection{
border:1px solid rgba(216,167,46,.32);
background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
border-radius:28px;
padding:30px;
box-shadow:0 20px 65px rgba(0,0,0,.25);
}
.impactCard h3{font-size:28px;margin-top:0}
.impactCard li{margin:12px 0;color:#dce7ff}
.serviceGrid,.processGrid,.priceGrid,.faqGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:32px;
}
.serviceGrid article,.processGrid article,.priceGrid article,.faqGrid details{
border:1px solid rgba(255,255,255,.12);
background:rgba(3,7,16,.74);
border-radius:24px;
padding:24px;
box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.serviceGrid article b,.processGrid span{color:#d8a72e;font-weight:900;letter-spacing:2px}
.serviceGrid h3,.processGrid h3,.priceGrid h3{font-size:24px;margin:12px 0 8px}
.portfolioPreview{
background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.72));
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
}
.sampleGrid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:14px;
margin:34px 0 20px;
}
.sampleGrid img{
aspect-ratio:1/1;
object-fit:cover;
border-radius:20px;
border:1px solid rgba(216,167,46,.32);
box-shadow:0 18px 45px rgba(0,0,0,.32);
}
.sampleGrid img:nth-child(n+4){aspect-ratio:3/4}
.calloutSection{text-align:center}
.calloutSection h2{color:#fff}
.processGrid{grid-template-columns:repeat(5,1fr)}
.processGrid span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#d8a72e;color:#050505}
.priceGrid{grid-template-columns:repeat(4,1fr)}
.priceGrid article{position:relative}
.priceGrid article.featured{border-color:#d8a72e;box-shadow:0 0 55px rgba(216,167,46,.18)}
.priceGrid strong{display:block;font-size:48px;color:#d8a72e;margin:10px 0}
.faqGrid{grid-template-columns:repeat(2,1fr)}
details summary{cursor:pointer;font-weight:900;font-size:18px;color:#fff}
details p{margin-bottom:0;color:#cbd6f0}
.sectionHead{max-width:760px}
.orderForm{margin-top:22px;display:grid;gap:16px}
.formGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
label{display:grid;gap:8px;color:#fff;font-weight:900}
input,select,textarea{
width:100%;
padding:14px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.18);
background:rgba(0,0,0,.44);
color:#fff;
font:inherit;
}
textarea{min-height:150px;resize:vertical}
option{background:#111;color:#fff}
footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:14px;
padding:26px;
border-top:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.82);
color:#cbd6f0;
}
footer a{color:#d8a72e;font-weight:900}
.miniHero{min-height:42vh}
.portfolioGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.portfolioItem{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:18px;background:rgba(0,0,0,.48)}
.portfolioItem h2{font-size:22px;line-height:1.12}
.beforeAfter{display:grid;gap:12px}
.beforeAfter img{border-radius:18px;width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(216,167,46,.25)}
.beforeAfter span{display:block;margin-bottom:8px;color:#d8a72e;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:2px}
.portfolioFilters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.portfolioFilters button{margin:0}
.successBox{max-width:850px;text-align:center}
.receipt{border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:20px;background:rgba(0,0,0,.42);text-align:left;margin:20px auto}
@media(max-width:980px){
.heroGrid,.splitSection{grid-template-columns:1fr}
.serviceGrid,.priceGrid{grid-template-columns:repeat(2,1fr)}
.processGrid{grid-template-columns:repeat(2,1fr)}
.sampleGrid{grid-template-columns:repeat(3,1fr)}
.tickerBar{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.topNav{display:block}
.brandLockup{margin-bottom:12px}
.mobileNav{justify-content:flex-start}
.heroText h1{font-size:54px}
.lead{font-size:16px}
.serviceGrid,.priceGrid,.faqGrid,.processGrid,.formGrid{grid-template-columns:1fr}
.sampleGrid{grid-template-columns:repeat(2,1fr)}
.tickerBar{grid-template-columns:repeat(2,1fr)}
.wrap{padding:58px 0}
}
/* Admin readability overrides for the rebrand */
.adminBrand strong::after{content:"";}
/* Existing backend/admin layout preserved below */
.adminShell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr);background:linear-gradient(135deg,rgba(37,25,18,.95),rgba(11,28,24,.96));color:#fff;}
.adminSidebar{position:sticky;top:0;height:100vh;overflow-y:auto;padding:24px 18px;background:rgba(7,14,13,.92);border-right:1px solid rgba(245,196,94,.22);box-shadow:0 0 40px rgba(0,0,0,.28);z-index:5;}
.adminBrand{display:grid;gap:2px;margin-bottom:22px;padding:16px;border:1px solid rgba(245,196,94,.22);border-radius:18px;background:rgba(245,196,94,.08);}
.adminBrand span{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:#f5c45e;}
.adminBrand strong{font-size:1.25rem;line-height:1.1;}
.adminBrand small{color:rgba(255,255,255,.7);}
.adminSideNav{display:grid;gap:8px;}
.adminSideNav a{display:block;text-decoration:none;color:#f8f2df;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-weight:800;}
.adminSideNav a:hover,.adminSideNav a.active{background:linear-gradient(135deg,rgba(245,196,94,.24),rgba(61,161,128,.18));border-color:rgba(245,196,94,.48);color:#fff;}
.adminSideFooter{display:grid;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:rgba(255,255,255,.68);}
.adminSideFooter a{color:#f5c45e;text-decoration:none;font-weight:800;}
.adminMain{min-width:0;padding:26px clamp(18px,3vw,42px) 48px;overflow-x:hidden;}
.adminMain .backendSection,.adminMain .orderCard{max-width:1280px;margin-left:auto;margin-right:auto;}
.adminPageTop{max-width:1280px;margin:0 auto 18px;}
.dashboardIntroSection .miniCards{margin-top:16px;}
.adminMenuGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px;}
.adminMenuGrid a{display:grid;gap:8px;min-height:120px;padding:18px;border-radius:18px;border:1px solid rgba(245,196,94,.22);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;box-shadow:0 14px 34px rgba(0,0,0,.18);}
.adminMenuGrid a:hover{transform:translateY(-2px);border-color:rgba(245,196,94,.55);background:rgba(245,196,94,.12);}
.adminMenuGrid strong{font-size:1.1rem;color:#f5c45e;}
.adminMenuGrid span{color:rgba(255,255,255,.78);line-height:1.45;}
.portfolioAdminForm{display:grid;gap:16px;max-width:760px;}
.adminMain .adminOrders{max-width:1280px;margin:0 auto;}
.adminMain .ownerSettingsForm,.adminMain .adminUserAddForm{max-width:100%;}
@media (max-width:900px){.adminShell{display:block;}.adminSidebar{position:relative;height:auto;max-height:none;padding:16px;}.adminSideNav{grid-template-columns:repeat(2,minmax(0,1fr));}.adminSideNav a{text-align:center;font-size:.9rem;padding:10px;}.adminMain{padding:18px 14px 36px;}.adminPageTop{display:grid;gap:14px;}.adminBrand{margin-bottom:14px;}}
@media (max-width:560px){.adminSideNav{grid-template-columns:1fr;}.adminMenuGrid{grid-template-columns:1fr;}.adminMain{padding-left:10px;padding-right:10px;}}
/* Backend sidebar layout */
.adminShell{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr);background:linear-gradient(135deg,rgba(37,25,18,.95),rgba(11,28,24,.96));color:#fff;}
.adminSidebar{position:sticky;top:0;height:100vh;overflow-y:auto;padding:24px 18px;background:rgba(7,14,13,.92);border-right:1px solid rgba(245,196,94,.22);box-shadow:0 0 40px rgba(0,0,0,.28);z-index:5;}
.adminBrand{display:grid;gap:2px;margin-bottom:22px;padding:16px;border:1px solid rgba(245,196,94,.22);border-radius:18px;background:rgba(245,196,94,.08);}
.adminBrand span{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:#f5c45e;}
.adminBrand strong{font-size:1.25rem;line-height:1.1;}
.adminBrand small{color:rgba(255,255,255,.7);}
.adminSideNav{display:grid;gap:8px;}
.adminSideNav a{display:block;text-decoration:none;color:#f8f2df;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-weight:800;}
.adminSideNav a:hover,.adminSideNav a.active{background:linear-gradient(135deg,rgba(245,196,94,.24),rgba(61,161,128,.18));border-color:rgba(245,196,94,.48);color:#fff;}
.adminSideFooter{display:grid;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:rgba(255,255,255,.68);}
.adminSideFooter a{color:#f5c45e;text-decoration:none;font-weight:800;}
.adminMain{min-width:0;padding:26px clamp(18px,3vw,42px) 48px;overflow-x:hidden;}
.adminMain .backendSection,.adminMain .orderCard{max-width:1280px;margin-left:auto;margin-right:auto;}
.adminPageTop{max-width:1280px;margin:0 auto 18px;}
.dashboardIntroSection .miniCards{margin-top:16px;}
.adminMenuGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px;}
.adminMenuGrid a{display:grid;gap:8px;min-height:120px;padding:18px;border-radius:18px;border:1px solid rgba(245,196,94,.22);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;box-shadow:0 14px 34px rgba(0,0,0,.18);}
.adminMenuGrid a:hover{transform:translateY(-2px);border-color:rgba(245,196,94,.55);background:rgba(245,196,94,.12);}
.adminMenuGrid strong{font-size:1.1rem;color:#f5c45e;}
.adminMenuGrid span{color:rgba(255,255,255,.78);line-height:1.45;}
.portfolioAdminForm{display:grid;gap:16px;max-width:760px;}
.adminMain .adminOrders{max-width:1280px;margin:0 auto;}
.adminMain .ownerSettingsForm,.adminMain .adminUserAddForm{max-width:100%;}
@media (max-width:900px){.adminShell{display:block;}.adminSidebar{position:relative;height:auto;max-height:none;padding:16px;}.adminSideNav{grid-template-columns:repeat(2,minmax(0,1fr));}.adminSideNav a{text-align:center;font-size:.9rem;padding:10px;}.adminMain{padding:18px 14px 36px;}.adminPageTop{display:grid;gap:14px;}.adminBrand{margin-bottom:14px;}}
@media (max-width:560px){.adminSideNav{grid-template-columns:1fr;}.adminMenuGrid{grid-template-columns:1fr;}.adminMain{padding-left:10px;padding-right:10px;}}
/* Public/admin additions */
.deliveryFrontLink{
border:1px solid rgba(85,194,255,.45)!important;
background:rgba(7,24,39,.55)!important;
color:#dff4ff!important;
padding:10px 14px!important;
border-radius:999px!important;
font-weight:900!important;
text-transform:uppercase!important;
letter-spacing:.8px!important;
}
.deliveryFrontLink:hover{background:rgba(85,194,255,.16)!important;border-color:#55c2ff!important;}
.footerDeliveryLink,.footerAdminLink{color:#dff4ff!important;border:1px solid rgba(85,194,255,.35);padding:8px 12px;border-radius:999px;display:inline-block;margin-left:8px;}
.adminLoginLink{border:1px solid rgba(245,196,94,.42);padding:10px 14px;border-radius:999px;}
.setupChecklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px;}
.setupCheck{border:1px solid rgba(215,167,71,.24);background:#090909;border-radius:16px;padding:16px;display:grid;gap:7px;}
.setupCheck.done{border-color:rgba(58,218,132,.46);background:rgba(18,96,53,.17);}
.setupCheck.todo{border-color:rgba(255,202,87,.55);background:rgba(122,79,12,.20);}
.setupCheck strong{color:#fff4d6;text-transform:uppercase;letter-spacing:1px;}
.setupCheck span{color:#d8d0c0;line-height:1.45;}
.adminBrand strong{font-size:1.1rem;}
@media(max-width:860px){.deliveryFrontLink,.adminLoginLink{width:100%;text-align:center}.footerDeliveryLink,.footerAdminLink{margin-top:14px;margin-left:0;margin-right:8px;}}
/* v8.0 front brand removal */
body.protectedSite > header.hero > nav,
body.protectedSite > header.hero.miniHero > nav{
justify-content:center !important;
}
body.protectedSite > header.hero .brand,
body.protectedSite > header.hero.miniHero .brand{
display:none !important;
}
body.protectedSite > header.hero .mobileNavStatic,
body.protectedSite > header.hero.miniHero .mobileNavStatic{
width:100%;
max-width:1100px;
margin-left:auto;
margin-right:auto;
}
/* --- v1.1 cleanup and polish overrides --- */
.videoShowcase .videoNote{max-width:680px;margin-left:auto;margin-right:auto}
.portfolioItem blockquote{margin:14px 0 0;color:#dce7ff;line-height:1.6;padding:14px 16px;border-left:3px solid rgba(216,167,46,.5);background:rgba(255,255,255,.04);border-radius:0 14px 14px 0}
.beforeAfter img{height:auto;max-height:680px;object-fit:cover}
.deliveries{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.adminShell{position:relative;overflow:hidden}
.adminShell::before{
content:"";
position:fixed;
inset:0;
background:linear-gradient(135deg,rgba(5,8,14,.92),rgba(7,16,29,.85));
z-index:-2;
}
.adminMain,.adminSidebar{backdrop-filter:blur(3px)}
.adminPageTop h1{margin:8px 0 0}
.adminActionRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inlineForm{display:inline-flex;align-items:center;gap:10px;margin:0}
.dangerBtn{
display:inline-block;
padding:12px 16px;
border-radius:999px;
border:1px solid rgba(255,90,90,.55);
background:rgba(255,90,90,.12);
color:#ffd1d1;
font-weight:900;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
}
.portfolioBuilderForm textarea{min-height:140px}
.portfolioManagerList{display:grid;gap:16px;margin-top:20px}
.manageItem{
display:grid;
grid-template-columns:220px 1fr;
gap:18px;
border:1px solid rgba(255,255,255,.12);
background:rgba(5,7,13,.62);
border-radius:24px;
padding:18px;
}
.manageThumb img{
width:100%;
border-radius:18px;
aspect-ratio:4/5;
object-fit:cover;
border:1px solid rgba(216,167,46,.22);
}
.manageHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.manageHead h3{margin:6px 0 0;font-size:26px}
.manageMeta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 16px}
.manageMeta span,.statusPill{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
color:#dbe5fa;
font-size:13px;
font-weight:700;
}
.statusPill.done{background:rgba(46,190,125,.14);border-color:rgba(46,190,125,.35);color:#aaf2cf}
.statusPill.pending{background:rgba(216,167,46,.12);border-color:rgba(216,167,46,.35);color:#ffe39b}
.statusPill.sample{background:rgba(46,124,255,.14);border-color:rgba(46,124,255,.35);color:#bdd7ff}
.checkGrid,.futureIdeas{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:24px;
}
.checkGrid article,.futureIdeas article{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
border-radius:22px;
padding:20px;
}
.cleanList{margin:18px 0 0;padding-left:20px}
.cleanList li{margin:10px 0;line-height:1.6;color:#dbe5fa}
.deliveryLookup{max-width:920px;margin:0 auto}
.deliveryResultCard h3{font-size:26px;margin-top:18px}
.errorNote{color:#ffcbcb}
footer .footerAdminLink, footer .footerDeliveryLink{color:#d8a72e}
@media(max-width:980px){
.manageItem{grid-template-columns:1fr}
.checkGrid,.futureIdeas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.adminActionRow{display:grid}
.checkGrid,.futureIdeas{grid-template-columns:1fr}
.manageHead{display:grid}
}
/* --- Streetwise Design full refresh: desktop/mobile tightening + larger hero + backend polish --- */
.wideWrap{width:min(1500px,calc(100% - 34px));}
.heroGridWide{
width:min(1540px,calc(100% - 34px));
grid-template-columns:minmax(390px,.82fr) minmax(640px,1.38fr);
gap:48px;
align-items:center;
}
.videoShowcaseLarge{align-self:center}
.largeVideoFrame{
width:100%;
min-height:420px;
}
.largeVideoFrame .videoPoster{min-height:420px}
.videoFrame{transform:translateZ(0)}
.portfolioPreviewBig .wrap{padding-top:92px;padding-bottom:92px}
.sampleGridBig{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:18px;
margin-top:38px;
}
.sampleGridBig img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:22px;
border:1px solid rgba(216,167,46,.32);
box-shadow:0 20px 55px rgba(0,0,0,.34);
}
.sampleGridBig img:nth-child(n+6):nth-child(-n+10){aspect-ratio:4/5;}
.priceGridFive{
grid-template-columns:repeat(5,minmax(190px,1fr));
}
.priceGridFive article{min-height:315px}
.serviceGridWide{grid-template-columns:repeat(3,minmax(0,1fr));}
.orderSearchForm{
display:grid;
grid-template-columns:minmax(260px,1fr) auto auto;
gap:14px;
align-items:end;
margin:20px 0 22px;
}
.quickEmailRow{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:14px 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
margin:14px 0;
}
.privateNotesPanel{margin-top:16px}
.privateNotesForm textarea{min-height:120px}
.adminShell{
background:linear-gradient(135deg,rgba(6,8,14,.96),rgba(7,18,33,.95)) !important;
}
.adminMain{
overflow-x:auto;
}
.adminPageTop{
border:1px solid rgba(255,255,255,.10);
border-radius:24px;
padding:18px 20px;
background:rgba(255,255,255,.045);
}
.backendSection,.orderCard{
border:1px solid rgba(255,255,255,.10);
border-radius:26px;
background:rgba(5,7,13,.68);
box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.backendSection{
padding:24px;
margin-bottom:20px;
}
.orderCard{
padding:22px;
margin-bottom:22px;
}
.adminMain h1,.adminMain h2,.adminMain h3{
letter-spacing:-.02em;
}
.adminMain p,.adminMain .note,.adminMain li{
line-height:1.55;
}
.adminMain label{
color:#fff;
}
.adminMain input,.adminMain select,.adminMain textarea{
min-height:48px;
}
.adminMain textarea{
min-height:120px;
}
.adminSideNav a{
line-height:1.2;
}
.orderCardTop{
display:grid;
grid-template-columns:1.2fr .9fr auto;
gap:16px;
align-items:start;
}
.orderCardGrid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:16px;
}
.orderPanel{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
border-radius:20px;
padding:18px;
min-width:0;
}
.uploadThumbs{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(95px,1fr));
gap:10px;
}
.uploadThumb{
position:relative;
display:block;
border-radius:14px;
overflow:hidden;
border:1px solid rgba(216,167,46,.25);
}
.uploadThumb img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
}
.uploadThumb span{
position:absolute;
bottom:6px;
right:6px;
background:rgba(0,0,0,.65);
color:#fff;
border-radius:999px;
padding:4px 8px;
font-size:12px;
}
.finalLinks{
display:grid;
gap:8px;
margin-top:12px;
}
.finalLinks a{
padding:10px 12px;
border-radius:12px;
background:rgba(216,167,46,.10);
border:1px solid rgba(216,167,46,.22);
color:#ffe39b;
font-weight:800;
}
.orderFilters{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.orderFilters a{
padding:10px 13px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
font-weight:900;
}
.orderFilters a.active{
background:#d8a72e;
color:#050505;
border-color:#d8a72e;
}
.portfolioGrid{
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.portfolioItem{
overflow:hidden;
}
.portfolioItem h2{
min-height:56px;
}
.beforeAfter img{
aspect-ratio:1/1;
object-fit:cover;
}
.deliveryResultCard{
max-width:1050px;
margin-left:auto;
margin-right:auto;
}
.deliveryLookup .orderForm{
margin-top:0;
}
@media(max-width:1220px){
.heroGridWide{
grid-template-columns:1fr;
width:min(1100px,calc(100% - 30px));
}
.largeVideoFrame,.largeVideoFrame .videoPoster{min-height:360px}
.priceGridFive{grid-template-columns:repeat(2,minmax(0,1fr));}
.sampleGridBig{grid-template-columns:repeat(4,minmax(0,1fr));}
.orderCardTop,.orderCardGrid{grid-template-columns:1fr;}
}
@media(max-width:820px){
.topNav{padding-top:14px}
.mobileNav a{font-size:11px;padding:9px 10px}
.heroGridWide{gap:26px;margin-top:18px;padding-bottom:46px}
.heroText h1{font-size:clamp(46px,16vw,78px)}
.tag{font-size:13px}
.lead{font-size:16px}
.largeVideoFrame,.largeVideoFrame .videoPoster{min-height:260px}
.serviceGridWide,.serviceGrid,.priceGridFive,.faqGrid,.formGrid,.splitSection{grid-template-columns:1fr}
.sampleGridBig{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tickerBar{grid-template-columns:repeat(2,1fr)}
.orderSearchForm{grid-template-columns:1fr}
.adminShell{display:block}
.adminSidebar{position:relative;height:auto;max-height:none}
.adminMain{padding:16px 12px 32px}
.backendSection,.orderCard{padding:16px;border-radius:20px}
.adminPageTop{display:grid;gap:12px}
.adminSideNav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
.sampleGridBig{grid-template-columns:1fr}
.sampleGridBig img{aspect-ratio:1/1}
.largeVideoFrame,.largeVideoFrame .videoPoster{min-height:205px}
.heroBadges span{width:100%;text-align:center}
.btn,.pay,button,#paypalLink{width:100%;text-align:center;margin-right:0}
.adminSideNav{grid-template-columns:1fr}
}
/* --- v2.1 image viewing area reduction + top ad banner --- */
.topAdBanner{
position:relative;
z-index:50;
background:linear-gradient(90deg,rgba(216,167,46,.96),rgba(46,124,255,.88));
color:#05070d;
border-bottom:1px solid rgba(255,255,255,.18);
}
.topAdInner{
width:min(1500px,calc(100% - 28px));
min-height:54px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:10px 0;
font-weight:900;
text-align:center;
}
.topAdText{
letter-spacing:.3px;
line-height:1.25;
}
.topAdButton{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
padding:9px 14px;
border-radius:999px;
background:rgba(0,0,0,.82);
color:#fff;
text-transform:uppercase;
font-size:12px;
letter-spacing:.8px;
}
.topAdImage{
width:44px;
height:44px;
flex:0 0 44px;
border-radius:12px;
background:center/cover no-repeat;
border:1px solid rgba(0,0,0,.25);
box-shadow:0 8px 18px rgba(0,0,0,.16);
}
/* Public portfolio/image viewing areas reduced roughly 50% */
.sampleGridBig{
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
gap:12px !important;
}
.sampleGridBig img{
border-radius:15px !important;
box-shadow:0 12px 30px rgba(0,0,0,.26) !important;
}
.sampleGrid{
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
gap:12px !important;
}
.sampleGrid img{
border-radius:15px !important;
box-shadow:0 12px 30px rgba(0,0,0,.26) !important;
}
.portfolioGrid{
grid-template-columns:repeat(auto-fit,minmax(185px,1fr)) !important;
gap:14px !important;
}
.portfolioItem{
padding:14px !important;
border-radius:18px !important;
}
.portfolioItem h2{
font-size:18px !important;
min-height:auto !important;
}
.beforeAfter img{
max-height:310px !important;
border-radius:13px !important;
}
.portfolioItem blockquote{
font-size:13px !important;
line-height:1.4 !important;
padding:10px 12px !important;
}
/* Backend portfolio viewing areas also reduced so more final designs fit on screen */
.manageItem{
grid-template-columns:120px 1fr !important;
gap:14px !important;
padding:14px !important;
}
.manageThumb img{
border-radius:14px !important;
max-height:140px !important;
}
.manageHead h3{
font-size:20px !important;
}
.backendSubPanel{
border:1px solid rgba(216,167,46,.24);
background:rgba(216,167,46,.055);
border-radius:20px;
padding:18px;
margin:18px 0;
}
.backendSubPanel h3{
margin:0 0 8px;
font-size:22px;
}
.checkLabel{
display:flex !important;
align-items:center;
gap:10px;
flex-direction:row !important;
}
.checkLabel input{
width:auto !important;
min-height:auto !important;
}
@media(max-width:1220px){
.sampleGridBig,.sampleGrid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
}
@media(max-width:820px){
.topAdInner{display:grid;grid-template-columns:auto 1fr;justify-content:start;text-align:left}
.topAdButton{grid-column:1 / -1;width:100%}
.sampleGridBig,.sampleGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.portfolioGrid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;}
.manageItem{grid-template-columns:1fr !important;}
.manageThumb img{max-height:220px !important;}
}
@media(max-width:520px){
.sampleGridBig,.sampleGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.portfolioGrid{grid-template-columns:1fr 1fr !important;}
.portfolioItem h2{font-size:16px !important;}
.beforeAfter img{max-height:220px !important;}
}
/* --- v2.2 backend spacing / readability cleanup --- */
.adminShell{
font-size:16px;
line-height:1.55;
}
.adminMain{
padding:38px clamp(28px,4vw,70px) 70px !important;
}
.adminPageTop{
max-width:1480px !important;
margin:0 auto 28px !important;
padding:26px 30px !important;
}
.backendSection,
.orderCard{
max-width:1480px !important;
padding:34px !important;
margin:0 auto 30px !important;
}
.sectionTitleRow,
.roomyTitleRow{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:28px;
margin-bottom:28px !important;
}
.sectionTitleRow h2,
.backendSection h2{
margin:8px 0 10px !important;
line-height:1.08;
}
.backendSection .note,
.orderCard .note,
.adminMain p{
max-width:1180px;
line-height:1.72 !important;
}
.eyebrow{
margin:0 0 12px !important;
}
.adminMain label{
display:grid !important;
gap:10px !important;
margin:0 !important;
line-height:1.35 !important;
}
.adminMain input,
.adminMain select,
.adminMain textarea{
margin:0 !important;
padding:15px 17px !important;
min-height:52px !important;
line-height:1.35 !important;
}
.adminMain textarea{
min-height:145px !important;
}
.adminMain button,
.adminMain .btn,
.adminMain .dangerBtn,
.adminMain .ghost{
margin:0 !important;
min-height:48px;
align-items:center;
justify-content:center;
}
.settingsGrid,
.roomyGrid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
gap:22px !important;
}
.formActions{
margin-top:24px !important;
display:flex;
gap:12px;
flex-wrap:wrap;
}
.miniCards,
.dashboardCards,
.analyticsGrid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
gap:18px !important;
margin:26px 0 6px !important;
}
.miniCards > div,
.dashboardCards > div,
.analyticsGrid > div{
display:grid !important;
gap:6px !important;
padding:22px !important;
border:1px solid rgba(216,167,46,.18) !important;
border-radius:20px !important;
background:rgba(255,255,255,.045) !important;
}
.miniCards span,
.dashboardCards span,
.analyticsGrid span{
display:block;
color:#cbd6f0;
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
font-weight:900;
}
.miniCards strong,
.dashboardCards strong,
.analyticsGrid strong{
font-size:34px;
line-height:1;
color:#fff;
}
.orderFilters{
display:flex !important;
flex-wrap:wrap !important;
gap:12px !important;
}
.orderFilters a{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:42px;
padding:10px 16px !important;
}
.orderSearchForm{
display:grid !important;
grid-template-columns:minmax(300px,1fr) auto auto !important;
align-items:end !important;
gap:18px !important;
margin:24px 0 28px !important;
}
.orderCardTop{
display:grid !important;
grid-template-columns:minmax(320px,1.1fr) minmax(260px,.8fr) minmax(220px,.55fr) !important;
gap:26px !important;
align-items:start !important;
margin-bottom:24px !important;
}
.orderCardTop h2{
margin:16px 0 10px !important;
}
.orderMeta{
display:flex !important;
flex-wrap:wrap !important;
gap:10px 14px !important;
align-items:center !important;
margin-top:10px !important;
line-height:1.45 !important;
}
.orderMeta small,
.orderMeta a,
.orderMeta b{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
padding:6px 10px !important;
border-radius:999px !important;
background:rgba(255,255,255,.055) !important;
border:1px solid rgba(255,255,255,.08) !important;
}
.statusForm{
display:grid !important;
gap:12px !important;
}
.quickEmailRow{
display:flex !important;
flex-wrap:wrap !important;
gap:14px !important;
padding:22px 0 !important;
margin:18px 0 26px !important;
}
.quickEmailRow .btn,
.quickEmailRow .dangerBtn{
width:auto !important;
min-width:170px;
}
.orderCardGrid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:22px !important;
margin-top:20px !important;
}
.orderPanel{
padding:24px !important;
border-radius:22px !important;
}
.orderPanel h3{
margin:0 0 18px !important;
line-height:1.2 !important;
}
.uploadThumbs{
gap:14px !important;
}
.portraitNotesText{
line-height:1.7 !important;
padding:16px !important;
border-radius:16px !important;
background:rgba(0,0,0,.22) !important;
min-height:120px;
}
.privateNotesPanel{
margin-top:26px !important;
}
.privateNotesForm{
display:grid !important;
gap:22px !important;
}
.compactUpload{
display:grid !important;
gap:14px !important;
}
.finalLinks{
gap:10px !important;
margin:18px 0 !important;
}
.adminUserAddForm,
.spaciousForm{
display:grid !important;
gap:24px !important;
padding:0 !important;
}
.adminUserList,
.spaciousUserList{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important;
gap:22px !important;
margin-top:24px !important;
}
.adminUserCard,
.spaciousUserCard{
display:grid !important;
gap:22px !important;
padding:26px !important;
border:1px solid rgba(255,255,255,.11) !important;
border-radius:24px !important;
background:rgba(255,255,255,.045) !important;
}
.userCardTop{
display:flex !important;
justify-content:space-between !important;
align-items:flex-start !important;
gap:18px !important;
}
.userCardTop h3{
margin:4px 0 0 !important;
font-size:28px !important;
}
.userMetaGrid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;
gap:14px !important;
}
.userMetaGrid div{
display:grid !important;
gap:5px !important;
padding:14px !important;
border-radius:16px !important;
background:rgba(0,0,0,.22) !important;
border:1px solid rgba(255,255,255,.08) !important;
}
.userMetaGrid span{
color:#cbd6f0;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
font-weight:900;
}
.userMetaGrid strong{
color:#fff;
font-size:15px;
overflow-wrap:anywhere;
}
.userPasswordForm{
display:grid !important;
grid-template-columns:minmax(220px,1fr) auto !important;
gap:16px !important;
align-items:end !important;
}
.userActionRow{
display:flex !important;
flex-wrap:wrap !important;
gap:12px !important;
}
.inlineAdminForm{
display:inline-flex !important;
gap:10px !important;
}
.ownerSettingsForm{
display:grid !important;
gap:26px !important;
}
.backendSubPanel{
padding:24px !important;
margin:26px 0 !important;
}
.backendSubPanel h3{
margin:0 0 12px !important;
}
.manageItem{
padding:22px !important;
gap:20px !important;
}
.manageBody{
display:grid !important;
gap:12px !important;
}
.manageMeta{
gap:10px !important;
margin:8px 0 14px !important;
}
.portfolioBuilderForm{
display:grid !important;
gap:24px !important;
}
@media(max-width:1100px){
.orderCardTop,
.orderCardGrid{
grid-template-columns:1fr !important;
}
.orderSearchForm{
grid-template-columns:1fr !important;
}
.quickEmailRow .btn,
.quickEmailRow .dangerBtn{
width:100% !important;
}
}
@media(max-width:760px){
.adminMain{
padding:22px 14px 45px !important;
}
.adminPageTop,
.backendSection,
.orderCard{
padding:22px !important;
margin-bottom:22px !important;
}
.sectionTitleRow,
.roomyTitleRow,
.userCardTop{
display:grid !important;
gap:16px !important;
}
.settingsGrid,
.roomyGrid,
.adminUserList,
.spaciousUserList,
.userPasswordForm{
grid-template-columns:1fr !important;
}
.miniCards,
.dashboardCards,
.analyticsGrid{
grid-template-columns:1fr 1fr !important;
}
}
@media(max-width:520px){
.miniCards,
.dashboardCards,
.analyticsGrid{
grid-template-columns:1fr !important;
}
.adminUserCard,
.spaciousUserCard{
padding:20px !important;
}
}
/* --- v2.3 examples-only portfolio + live homepage feed --- */
.exampleOnly{
display:block;
}
.exampleOnly img{
width:100%;
border-radius:14px;
aspect-ratio:1 / 1;
object-fit:cover;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.portfolioExampleGrid{
grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
}
.portfolioExampleItem{
display:grid;
gap:14px;
}
.portfolioExampleItem h2{
min-height:auto !important;
font-size:20px !important;
}
.homePortfolioGrid{
align-items:start;
}
.homePortfolioCard{
display:block;
}
.homePortfolioCard img{
width:100%;
border-radius:15px;
border:1px solid rgba(216,167,46,.28);
box-shadow:0 14px 34px rgba(0,0,0,.28);
background:rgba(255,255,255,.02);
}
.portfolioLoadingCard{
grid-column:1 / -1;
padding:28px;
text-align:center;
border-radius:18px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
}
.portfolioManageList{
display:grid;
gap:18px;
}
.portfolioManageList .manageItem{
grid-template-columns:150px 1fr !important;
}
.portfolioManageList .manageThumb img{
width:100%;
aspect-ratio:1 / 1;
object-fit:cover;
}
@media(max-width:700px){
.portfolioManageList .manageItem{
grid-template-columns:1fr !important;
}
}
.checkoutMissingNote{
max-width:850px;
margin:24px auto;
padding:18px 22px;
border-radius:18px;
border:1px solid rgba(216,167,46,.35);
background:rgba(216,167,46,.08);
color:#ffe39b !important;
}
/* --- v2.4 public portfolio title removal + settings fix helpers --- */
.titleFreePortfolioItem h2,
.portfolioExampleItem h2{
display:none !important;
}
.portfolioExampleItem{
padding-top:18px !important;
}
.exampleOnly{
margin-top:8px;
}
/* Streetwise Design real video player + corrected admin upload viewer sizing */
.heroPromoVideo{
display:block;
width:100%;
aspect-ratio:16/9;
min-height:0 !important;
height:auto;
object-fit:cover;
background:#06080d;
}
.heroPromoVideo.videoPoster{background-size:cover;background-position:center;background-repeat:no-repeat;}
.heroPromoVideo[hidden]{display:none;}
.heroVideoFallback{
position:absolute;
inset:auto 18px 18px 18px;
padding:12px 14px;
border-radius:14px;
background:rgba(0,0,0,.72);
color:#dbe7ff;
text-align:center;
font-weight:800;
border:1px solid rgba(68,230,255,.25);
}
.playOverlay{display:none !important;}
.customerUploadThumbs{
grid-template-columns:repeat(auto-fill,minmax(120px,160px)) !important;
justify-content:start !important;
align-items:start !important;
gap:12px !important;
}
.customerUploadThumbs .uploadThumb{
width:100% !important;
max-width:160px !important;
}
.customerUploadThumbs .uploadThumb img{
width:100% !important;
max-width:160px !important;
height:160px !important;
aspect-ratio:1/1 !important;
object-fit:cover !important;
display:block !important;
}
@media (max-width:760px){
.customerUploadThumbs{grid-template-columns:repeat(auto-fill,minmax(96px,120px)) !important;}
.customerUploadThumbs .uploadThumb{max-width:120px !important;}
.customerUploadThumbs .uploadThumb img{max-width:120px !important;height:120px !important;}
}
/* =========================================================
Streetwise Design — Hero Video Overlap Fix
Added 2026-06-18
Purpose: shrink front-page promo video on desktop so it no
longer overlaps the hero headline/text. Mobile remains stacked.
========================================================= */
@media (min-width: 1221px){
.heroGridWide{
grid-template-columns:minmax(430px,1fr) minmax(420px,.78fr) !important;
gap:clamp(34px,4vw,70px) !important;
width:min(1380px,calc(100% - 44px)) !important;
}
.videoShowcaseLarge{
max-width:620px !important;
width:100% !important;
justify-self:end !important;
align-self:center !important;
}
.largeVideoFrame{
width:100% !important;
min-height:0 !important;
}
.largeVideoFrame .videoPoster,
.largeVideoFrame .heroPromoVideo{
min-height:0 !important;
height:auto !important;
aspect-ratio:16 / 9 !important;
}
.heroText{
position:relative !important;
z-index:5 !important;
max-width:680px !important;
}
}
@media (max-width:1220px){
.videoShowcaseLarge{
max-width:760px !important;
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
}
}
/* =========================================================
STREETWISE DESIGN FINAL FRONT HERO CENTER FIX
Use with index.html that has the promo video removed.
Forces the homepage hero into a clean centered sales layout.
========================================================= */
body.streetwiseDesignSite header.designHero {
min-height: calc(100vh - 52px) !important;
display: flex !important;
flex-direction: column !important;
}
body.streetwiseDesignSite header.designHero .topNav {
flex: 0 0 auto !important;
}
body.streetwiseDesignSite header.designHero .heroGrid,
body.streetwiseDesignSite header.designHero .heroGridWide {
display: flex !important;
width: min(1050px, calc(100% - 40px)) !important;
max-width: 1050px !important;
margin: 52px auto 0 auto !important;
padding: 0 0 72px 0 !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.streetwiseDesignSite header.designHero .heroText {
width: 100% !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
justify-self: center !important;
}
body.streetwiseDesignSite header.designHero .heroText h1 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.streetwiseDesignSite header.designHero .heroText .eyebrow,
body.streetwiseDesignSite header.designHero .heroText .tag,
body.streetwiseDesignSite header.designHero .heroText .lead {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.streetwiseDesignSite header.designHero .heroText .lead {
max-width: 740px !important;
}
body.streetwiseDesignSite header.designHero .heroBadges,
body.streetwiseDesignSite header.designHero .heroBtns {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
}
body.streetwiseDesignSite header.designHero .videoShowcase,
body.streetwiseDesignSite header.designHero .videoShowcaseLarge,
body.streetwiseDesignSite header.designHero .videoFrame,
body.streetwiseDesignSite header.designHero .largeVideoFrame,
body.streetwiseDesignSite header.designHero .heroPromoVideo,
body.streetwiseDesignSite header.designHero .videoNote {
display: none !important;
}
@media(max-width: 700px) {
body.streetwiseDesignSite header.designHero .heroGrid,
body.streetwiseDesignSite header.designHero .heroGridWide {
width: min(100% - 28px, 760px) !important;
margin-top: 30px !important;
padding-bottom: 48px !important;
}
body.streetwiseDesignSite header.designHero .heroText h1 {
font-size: clamp(46px, 16vw, 72px) !important;
}
}
/* =========================================================
Streetwise Design v7.23 Birthday Release
Portfolio tools + Refuzionx Records desktop MP3 player
========================================================= */
.v723PortfolioTools,
.featuredPortfolioBlock{
border:1px solid rgba(216,167,46,.28);
background:rgba(0,0,0,.46);
border-radius:28px;
padding:24px;
margin:0 0 24px;
box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.portfolioActionPanel{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);
gap:22px;
align-items:center;
}
.portfolioActionCopy h2,
.featuredPortfolioHead h2{
margin:6px 0 10px;
font-size:clamp(28px,3.4vw,44px);
line-height:1.02;
}
.portfolioActionCopy p{
margin:0;
color:#dce7ff;
}
.portfolioActionControls{
display:grid;
gap:14px;
}
.portfolioCustomWorkBtn{
text-align:center;
margin:0 !important;
}
.portfolioSearchLabel{
display:grid;
gap:8px;
color:#ffe7a3;
text-transform:uppercase;
font-size:12px;
letter-spacing:1px;
font-weight:900;
}
#portfolioSearch{
border:1px solid rgba(216,167,46,.38);
background:rgba(0,0,0,.56);
color:#fff;
border-radius:999px;
padding:14px 16px;
}
.featuredPortfolioGrid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:14px;
margin-top:18px;
}
.portfolioFeaturedItem{
padding:12px !important;
}
.portfolioFeaturedItem .eyebrow{
font-size:10px;
letter-spacing:2px;
}
.portfolioNoResults{
grid-column:1 / -1;
}
/* Refuzionx Records player: desktop only */
.rxDesktopPlayer{
position:fixed;
right:22px;
bottom:22px;
width:360px;
z-index:9998;
border:1px solid rgba(216,167,46,.54);
border-radius:24px;
background:
radial-gradient(circle at 20% 0%, rgba(46,124,255,.28), transparent 35%),
linear-gradient(145deg, rgba(5,7,12,.96), rgba(19,8,8,.96));
color:#fff;
box-shadow:0 24px 80px rgba(0,0,0,.58), 0 0 36px rgba(46,124,255,.15);
overflow:hidden;
backdrop-filter:blur(10px);
}
.rxPlayerTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:15px 16px 12px;
border-bottom:1px solid rgba(216,167,46,.22);
}
.rxKicker{
display:block;
color:#d8a72e;
font-size:10px;
text-transform:uppercase;
letter-spacing:2.4px;
font-weight:900;
}
.rxPlayerTop strong{
display:block;
font-size:14px;
text-transform:uppercase;
letter-spacing:.8px;
}
.rxCollapse{
width:34px !important;
height:34px !important;
min-height:34px !important;
margin:0 !important;
padding:0 !important;
border-radius:50% !important;
border:1px solid rgba(255,255,255,.18) !important;
background:rgba(255,255,255,.08) !important;
color:#fff !important;
}
.rxPlayerBody{
display:grid;
grid-template-columns:92px 1fr;
gap:14px;
padding:16px;
align-items:center;
}
.rxCover{
width:92px;
height:92px;
object-fit:cover;
border-radius:18px;
border:1px solid rgba(216,167,46,.42);
background:#050505;
box-shadow:0 12px 32px rgba(0,0,0,.42);
}
.rxNow{
color:#2e7cff;
font-size:11px;
text-transform:uppercase;
letter-spacing:1.5px;
font-weight:900;
}
.rxTitle{
display:block;
margin:4px 0 2px;
font-size:17px;
line-height:1.15;
}
.rxArtist{
color:#cbd6f0;
}
.rxEq{
display:flex;
gap:4px;
height:18px;
align-items:end;
margin-top:10px;
}
.rxEq i{
display:block;
width:5px;
height:8px;
border-radius:999px;
background:#d8a72e;
opacity:.55;
}
.rxDesktopPlayer.isPlaying .rxEq i:nth-child(1){animation:rxEq .72s infinite ease-in-out;}
.rxDesktopPlayer.isPlaying .rxEq i:nth-child(2){animation:rxEq .6s infinite ease-in-out .08s;}
.rxDesktopPlayer.isPlaying .rxEq i:nth-child(3){animation:rxEq .82s infinite ease-in-out .16s;}
.rxDesktopPlayer.isPlaying .rxEq i:nth-child(4){animation:rxEq .66s infinite ease-in-out .24s;}
@keyframes rxEq{0%,100%{height:6px}50%{height:18px}}
.rxProgressWrap{
padding:0 16px 10px;
}
.rxSeek,
.rxVolume{
width:100%;
accent-color:#2e7cff;
}
.rxControls{
display:grid;
grid-template-columns:1fr 1.2fr 1fr;
gap:9px;
padding:0 16px 12px;
}
.rxControls button{
margin:0 !important;
padding:10px 8px !important;
min-height:40px !important;
border-radius:999px !important;
}
.rxPlay{
background:#d8a72e !important;
color:#050505 !important;
}
.rxVolumeRow{
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
align-items:center;
padding:0 16px 14px;
color:#cbd6f0;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
font-weight:900;
}
.rxStatus{
padding:10px 16px 14px;
color:#ffe7a3;
border-top:1px solid rgba(255,255,255,.08);
font-size:12px;
text-align:center;
}
.rxDesktopPlayer.collapsed .rxPlayerBody,
.rxDesktopPlayer.collapsed .rxProgressWrap,
.rxDesktopPlayer.collapsed .rxControls,
.rxDesktopPlayer.collapsed .rxVolumeRow,
.rxDesktopPlayer.collapsed .rxStatus{
display:none;
}
@media(max-width:1100px){
.featuredPortfolioGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:820px){
.rxDesktopPlayer{display:none !important;}
.portfolioActionPanel{grid-template-columns:1fr;}
.featuredPortfolioGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:520px){
.v723PortfolioTools,.featuredPortfolioBlock{padding:18px;border-radius:22px;}
}