*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbf8f1;color:#211b17;font-family:Arial,Helvetica,sans-serif}.site-header{min-height:106px;display:flex;align-items:center;justify-content:space-between;padding:10px 7%;border-bottom:1px solid #dfd2bd;background:#fffdf8;position:sticky;top:0;z-index:10}.brand img{display:block;width:280px;max-height:84px;object-fit:contain}.site-header nav{display:flex;gap:32px}.site-header nav a{color:#2d211a;text-decoration:none;font-size:16px}.hero{min-height:690px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:70px;padding:70px 8.5%;background:radial-gradient(circle at 77% 42%,#fff 0,#f8f0e2 35%,#f4ecdf 72%)}.eyebrow{letter-spacing:3.5px;font-weight:700;font-size:12px;color:#a66f28;margin-bottom:20px}.hero h1,.archive-section h2,.inside h2,.advertise h2,.admin-card h1{font-family:Georgia,serif}.hero h1{font-size:76px;line-height:.97;margin:0 0 28px;font-weight:600}.hero h1 em{color:#b47a2b;font-weight:400}.hero p{font-size:19px;line-height:1.7;max-width:670px;color:#65574c}.actions{display:flex;gap:14px;margin-top:34px}.actions a,.light{padding:18px 25px;text-decoration:none;font-weight:700;border-radius:2px}.primary{background:#8b5a22;color:#fff}.secondary{border:1px solid #8b5a22;color:#4c321b}.cover-wrap{position:relative;text-align:center}.cover{display:block;width:min(430px,90%);height:auto;max-height:none;object-fit:contain;margin:auto;box-shadow:0 24px 55px #3d2b1b33;transform:rotate(1deg);border:1px solid #ddcfbb;background:white}.new{position:absolute;z-index:2;right:4%;top:-18px;background:#8b5a22;color:white;padding:10px 15px;font-size:11px;letter-spacing:2px}.issue-meta{margin-top:20px;display:flex;flex-direction:column;gap:5px}.issue-meta strong{font-family:Georgia,serif;font-size:23px}.issue-meta span{color:#75675c}.gold-strip{background:#b97a25;color:#fff;display:flex;justify-content:center;gap:60px;padding:18px;font-size:20px;direction:rtl}.archive-section,.inside{padding:90px 8.5%}.archive-section{background:#fff}.section-head{text-align:center;max-width:720px;margin:0 auto 42px}.archive-section h2,.inside h2,.advertise h2{font-size:50px;margin:0 0 16px}.section-head p,.inside p,.advertise p{color:#6b5c50;line-height:1.6}.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.archive-card{background:#f7efe2;padding:16px}.archive-card img{width:100%;aspect-ratio:8.5/11;object-fit:cover;object-position:top;background:white;box-shadow:0 8px 18px #0002}.archive-card h3{font-family:Georgia,serif;margin:15px 0 5px}.archive-card small{color:#75675c}.archive-card a{display:inline-block;margin-top:12px;color:#8b5a22;font-weight:700;text-decoration:none}.empty{text-align:center;padding:35px;color:#83776c}.inside{text-align:center}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:45px;text-align:left}.grid div{background:white;border-top:4px solid #b97a25;padding:28px;min-height:150px}.grid b{font-family:Georgia,serif;font-size:21px}.advertise{padding:75px 8.5%;background:#4a2e1f;color:white;display:flex;align-items:center;justify-content:space-between}.advertise .eyebrow{color:#dfb778}.advertise p{color:#eadfd5}.contact{display:flex;flex-direction:column;align-items:flex-end;gap:14px}.light{background:#fff8ed;color:#4a2e1f}footer{padding:34px 8.5%;display:flex;justify-content:space-between;align-items:center;background:#17120f;color:#cdbda9}footer img{width:180px;max-height:60px;object-fit:contain}
/* Admin */
.admin-body{background:#f4ecdf}.admin-shell{max-width:1050px;margin:55px auto 90px;padding:0 24px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px}.admin-card{background:white;border:1px solid #e1d4c1;padding:34px;box-shadow:0 12px 30px #573b1810}.admin-card h1{font-size:40px;margin:0 0 8px}.admin-note{color:#75675c;line-height:1.6;margin-bottom:30px}.admin-card label{display:block;font-weight:700;margin:18px 0 8px}.admin-card input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #cdbda9;background:#fffdf8;font:inherit}.preview-box{margin:24px 0;padding:18px;background:#f8f1e6;border:1px dashed #cfb894}.preview-box img{display:none;width:150px;height:auto;max-height:210px;object-fit:contain;margin-bottom:12px}.preview-box div{color:#76695e;font-size:14px}.publish-btn{width:100%;background:#8b5a22;color:#fff;border:0;padding:16px;font-size:16px;font-weight:700;cursor:pointer}.status{margin-top:14px;min-height:20px;color:#6d512e}.current-admin img{width:160px;height:auto;object-fit:contain;display:block;margin-bottom:15px}.current-admin strong{display:block;font-family:Georgia,serif;font-size:22px}.current-admin span{display:block;color:#776a5f;margin-top:5px}.danger{margin-top:28px;border:1px solid #9f4e43;background:white;color:#8d3d34;padding:10px 14px;cursor:pointer}
@media(max-width:850px){.site-header{min-height:84px;padding:8px 5%}.brand img{width:205px;max-height:64px}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding:55px 7%;gap:50px}.hero h1{font-size:50px}.gold-strip{gap:20px;flex-wrap:wrap}.archive-grid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr 1fr}.advertise{display:block}.contact{align-items:flex-start;margin-top:25px}.admin-shell{grid-template-columns:1fr}}@media(max-width:520px){.archive-grid,.grid{grid-template-columns:1fr}.actions{flex-direction:column}.hero h1{font-size:43px}}
.pricing{padding:90px 8.5%;background:#fffdf8}.rate-tabs{display:flex;justify-content:center;gap:10px;margin:0 auto 38px}.rate-tab{padding:14px 26px;border:1px solid #b97a25;background:white;color:#5b3a1b;font-weight:700;font-size:16px;cursor:pointer}.rate-tab.active{background:#b97a25;color:white}.rate-panel{display:none}.rate-panel.active{display:block}.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;max-width:1100px;margin:auto;align-items:start}.sheet-grid.one{grid-template-columns:minmax(0,620px);justify-content:center}.sheet-card{background:#f8f1e5;border:1px solid #ddc89f;padding:15px;box-shadow:0 10px 25px #573b1812}.sheet-card img{display:block;width:100%;height:auto}.sheet-actions{display:flex;gap:12px;justify-content:center;padding:16px 5px 4px}.sheet-actions a{background:#8b5a22;color:white;text-decoration:none;padding:11px 17px;font-weight:700}.yt-note{text-align:center;color:#6b5c50;margin:-15px 0 28px}@media(max-width:850px){.sheet-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.contact-grid{grid-template-columns:1fr}.rate-tabs{flex-direction:column}}
.archive-upload-card{grid-column:1/-1}
@media(min-width:900px){.archive-upload-card form{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.archive-upload-card .preview-box,.archive-upload-card .publish-btn,.archive-upload-card .status{grid-column:1/-1}}
.minyan-section{padding:90px 8.5%;background:#f4ecdf}
.minyan-current{max-width:760px;margin:0 auto;background:#fff;display:flex;align-items:center;gap:35px;padding:34px;border:1px solid #ddc89f;box-shadow:0 12px 30px #573b1812}
.minyan-icon{width:190px;min-height:145px;background:#b97a25;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:30px;font-weight:700;direction:rtl;padding:20px}
.minyan-current h3{font-family:Georgia,serif;font-size:30px;margin:0 0 8px}
.minyan-current p{color:#75675c;margin:0 0 25px}
.minyan-open{display:inline-block;text-decoration:none;padding:14px 20px}
.minyan-open.disabled{pointer-events:none;opacity:.45}
.minyan-admin-card{grid-column:1/-1}
.current-minyan-admin{margin-top:25px;padding-top:20px;border-top:1px solid #e1d4c1}
.current-minyan-admin strong,.current-minyan-admin span,.current-minyan-admin a{display:block;margin:7px 0}
.current-minyan-admin a{color:#8b5a22;font-weight:700}
@media(max-width:650px){.minyan-current{display:block}.minyan-icon{width:100%;margin-bottom:25px}}
.minyan-logo-box{width:240px;min-width:240px;background:#fff;display:flex;align-items:center;justify-content:center;padding:15px}
.minyan-logo-box img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:650px){.minyan-logo-box{width:100%;min-width:0;margin-bottom:25px}}
.site-footer{background:#17120f;color:#d7c7b5;padding:55px 8.5% 0}
.footer-top{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:45px;align-items:start}
.footer-brand img{width:210px;max-height:82px;object-fit:contain;display:block;margin-bottom:16px}
.footer-brand p{margin:0;color:#bca995;font-size:14px;letter-spacing:.4px}
.footer-col h4{color:#fff;margin:0 0 16px;font-family:Georgia,serif;font-size:18px}
.footer-col a,.footer-col p{display:block;color:#cdbda9;text-decoration:none;line-height:1.8;font-size:14px;margin:0}
.footer-col a:hover{color:#e0b66d}
.footer-bottom{margin-top:42px;padding:20px 0;border-top:1px solid #3b312b;display:flex;justify-content:space-between;gap:20px;color:#948577;font-size:12px}
@media(max-width:850px){.footer-top{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr}.site-footer{padding-left:7%;padding-right:7%}}
.poster-service{padding:90px 8.5%;background:#fbf8f1}
.poster-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1180px;margin:45px auto 0}
.poster-service-card{background:#fff;border:1px solid #e0d2bd;overflow:hidden;box-shadow:0 12px 28px #573b1810}
.poster-service-card>img{display:block;width:100%;height:420px;object-fit:cover}
.poster-service-copy{padding:28px}
.poster-service-copy h3{font-family:Georgia,serif;font-size:29px;margin:0 0 12px}
.poster-price{font-family:Georgia,serif;font-size:38px;font-weight:700;color:#a66f28;margin:5px 0 12px}
.poster-price.contact-price{font-size:28px}
.poster-service-copy p{color:#6b5c50;line-height:1.6;margin:0 0 20px}
.poster-service-copy a{display:inline-block;color:#fff;background:#8b5a22;text-decoration:none;font-weight:700;padding:12px 17px;margin:4px 8px 4px 0}
.poster-links{display:flex;flex-wrap:wrap}
@media(max-width:800px){.poster-service-grid{grid-template-columns:1fr}.poster-service-card>img{height:auto;max-height:520px;object-fit:cover}}
.poster-service-card>img{
width:100%;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
object-position:center !important;
background:#fff;
}
.poster-service-card{
display:flex;
flex-direction:column;
}
.poster-service-copy{
margin-top:auto;
}
/* Island Media brand update */
.footer-brand img{width:235px;max-height:120px;object-fit:contain;background:#000}
.footer-subhead{margin-top:20px!important}
/* Poster Hanging + Gilyonos Distribution on one row */
.poster-service-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
max-width:1380px !important;
}
.poster-service-card>img{
width:100%;
height:auto !important;
object-fit:contain !important;
}
.gilyonos-visual{
aspect-ratio:4/5;
min-height:360px;
background:#17120f;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:30px;
}
.gilyonos-hebrew{
font-family:Georgia,serif;
font-size:54px;
direction:rtl;
color:#d7b067;
margin-bottom:12px;
}
.gilyonos-english{
font-size:19px;
letter-spacing:5px;
font-weight:700;
}
@media(max-width:1050px){
.poster-service-grid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:700px){
.poster-service-grid{grid-template-columns:1fr !important}
}
/* Island Media corporate first page + Hakehilla second page */
.hakehilla-intro{
min-height:720px;
padding:100px 8.5%;
display:grid;
grid-template-columns:1.25fr .75fr;
gap:70px;
align-items:center;
background:#fff;
border-top:1px solid #eadfce;
border-bottom:1px solid #eadfce;
}
.hakehilla-intro-copy{max-width:780px}
.hakehilla-intro h2{
font-family:Georgia,serif;
font-size:clamp(48px,5.6vw,88px);
line-height:.98;
letter-spacing:-2.5px;
margin:24px 0 28px;
color:#211914;
}
.hakehilla-intro h2 em{
color:#b97a25;
font-weight:400;
}
.hakehilla-intro-copy>p{
font-size:20px;
line-height:1.65;
color:#665547;
max-width:760px;
}
.hakehilla-intro-brand{
display:flex;
justify-content:center;
align-items:center;
}
.hakehilla-intro-brand img{
width:min(100%,430px);
height:auto;
object-fit:contain;
}
.hakehilla-intro-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:32px;
}
.hakehilla-intro-actions a{
text-decoration:none;
padding:15px 22px;
font-weight:700;
}
.hakehilla-intro-actions .secondary{
border:1px solid #8b5a22;
color:#6a431c;
background:#fff;
}
@media(max-width:850px){
.hakehilla-intro{grid-template-columns:1fr;min-height:auto;padding-top:75px;padding-bottom:75px}
.hakehilla-intro-brand{justify-content:flex-start}
.hakehilla-intro-brand img{max-width:320px}
}
.gilyonos-image{background:#fff;display:flex;align-items:center;justify-content:center;width:100%}
.gilyonos-image img{display:block;width:100%;height:auto;object-fit:contain}
.minyan-publication{
padding:100px 8.5%;
min-height:760px;
display:grid;
grid-template-columns:1.15fr .85fr;
gap:80px;
align-items:center;
background:#f4ecdf;
overflow:hidden;
}
.minyan-publication-copy{max-width:760px}
.minyan-publication h2{
font-family:Georgia,serif;
font-size:clamp(50px,5.5vw,84px);
line-height:.98;
letter-spacing:-2.5px;
color:#211914;
margin:24px 0 28px;
}
.minyan-publication h2 em{
display:block;
color:#b97a25;
font-weight:400;
}
.minyan-publication-copy>p{
max-width:720px;
color:#665547;
font-size:20px;
line-height:1.65;
margin:0 0 34px;
}
.minyan-meta{
border-top:1px solid #d8c4a5;
padding-top:24px;
}
.minyan-meta h3{
font-family:Georgia,serif;
font-size:25px;
margin:0 0 7px;
}
.minyan-meta p{margin:0 0 20px;color:#75675c}
.minyan-cover-wrap{
display:flex;
justify-content:center;
align-items:center;
padding:25px;
}
.minyan-cover-paper{
width:min(100%,430px);
background:#fff;
padding:12px;
box-shadow:0 28px 50px #5b422326;
transform:rotate(2deg);
}
.minyan-cover-paper img{
display:block;
width:100%;
height:auto;
max-height:620px;
object-fit:contain;
background:#fff;
}
@media(max-width:850px){
.minyan-publication{grid-template-columns:1fr;gap:45px;min-height:auto;padding-top:75px;padding-bottom:75px}
.minyan-cover-wrap{justify-content:flex-start}
.minyan-cover-paper{max-width:360px}
}
.footer-contact-label{
margin:12px 0 3px !important;
opacity:.72;
font-size:14px;
}
.hakehilla-heading-logo{
margin-bottom:24px;
}
.hakehilla-heading-logo img{
display:block;
width:230px;
max-width:55%;
height:auto;
object-fit:contain;
}
/* Island Media WhatsApp Groups */
.whatsapp-groups-section{
min-height:760px;
padding:105px 8.5%;
background:#f5eee3;
border-top:1px solid #e2d4c0;
display:flex;
flex-direction:column;
justify-content:center;
}
.whatsapp-groups-heading{
max-width:900px;
margin:0 auto 58px;
text-align:center;
}
.whatsapp-groups-heading h2{
font-family:Georgia,serif;
font-size:clamp(50px,5.6vw,84px);
line-height:.98;
letter-spacing:-2.5px;
color:#211914;
margin:22px 0 26px;
}
.whatsapp-groups-heading h2 em{
color:#b97a25;
font-weight:400;
}
.whatsapp-groups-heading>p{
font-size:20px;
line-height:1.6;
color:#665547;
max-width:760px;
margin:0 auto;
}
.whatsapp-groups-grid{
width:100%;
max-width:1320px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.whatsapp-group-card{
background:#fff;
border-top:4px solid #b97a25;
padding:38px 34px 34px;
min-height:330px;
display:flex;
flex-direction:column;
box-shadow:0 18px 40px rgba(72,49,27,.06);
}
.whatsapp-group-icon{
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f0e3d1;
color:#8c581e;
font-size:24px;
font-weight:700;
margin-bottom:25px;
}
.whatsapp-group-card h3{
font-family:Georgia,serif;
font-size:28px;
margin:0 0 15px;
color:#211914;
}
.whatsapp-group-card p{
color:#6a594b;
font-size:17px;
line-height:1.55;
margin:0 0 28px;
}
.whatsapp-join{
margin-top:auto;
align-self:flex-start;
background:#211914;
color:#fff;
text-decoration:none;
font-weight:700;
padding:14px 19px;
}
.whatsapp-join:hover{background:#b97a25}
@media(max-width:900px){
.whatsapp-groups-grid{grid-template-columns:1fr}
.whatsapp-group-card{min-height:auto}
}
.poster-service-heading-simple h2{
font-family:Georgia,serif;
font-size:clamp(46px,5vw,76px) !important;
line-height:1.05 !important;
letter-spacing:-1.5px;
margin:0 0 50px !important;
color:#211914;
text-align:center;
}
/* Keep publication issue links grouped closely in the top navigation */
header nav, .site-header nav{
column-gap:28px !important;
gap:28px !important;
}
/* V29: Island Media and Hakehilla are separate sections */
.island-media-hero{
position:relative;
min-height:760px;
padding:105px 8.5%;
display:flex;
align-items:center;
overflow:hidden;
color:#fff;
background-image:url("https://upload.wikimedia.org/wikipedia/commons/6/64/Verrazano_Narrows_Bridge_Staten_Island.jpg");
background-size:cover;
background-position:center;
}
.island-media-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(12,10,8,.80) 0%,rgba(12,10,8,.55) 48%,rgba(12,10,8,.18) 100%);
}
.island-media-hero-content{
position:relative;
z-index:2;
width:min(760px,65%);
}
.island-media-hero .eyebrow{
color:#e2b56d;
}
.island-media-hero h1{
font-family:Georgia,serif;
font-size:clamp(62px,7vw,108px);
line-height:.92;
letter-spacing:-4px;
margin:25px 0 30px;
color:#fff;
}
.island-media-hero h1 em{
color:#e2b56d;
font-weight:400;
}
.island-media-hero-content>p{
max-width:720px;
font-size:21px;
line-height:1.6;
color:rgba(255,255,255,.9);
}
.island-weather-card{
position:absolute;
z-index:3;
right:7%;
bottom:60px;
width:310px;
padding:25px 28px;
background:rgba(255,255,255,.94);
color:#211914;
box-shadow:0 18px 50px rgba(0,0,0,.2);
backdrop-
}
.weather-kicker{
font-size:12px;
font-weight:800;
letter-spacing:3px;
color:#a66820;
margin-bottom:12px;
}
.weather-main{
display:flex;
align-items:flex-end;
gap:15px;
margin-bottom:10px;
}
#weatherTemp{
font-family:Georgia,serif;
font-size:58px;
line-height:.9;
font-weight:700;
}
#weatherCondition{
font-size:18px;
padding-bottom:5px;
}
.weather-detail{
border-top:1px solid #dfd2c2;
padding-top:11px;
color:#6b5b4e;
font-size:14px;
}
.hakehilla-separate-page{
min-height:760px;
}
@media(max-width:900px){
.island-media-hero{min-height:820px;align-items:flex-start;padding-top:95px}
.island-media-hero-content{width:100%}
.island-weather-card{left:8.5%;right:auto;bottom:55px;width:min(83%,330px)}
.island-media-hero h1{letter-spacing:-2px}
}
/* V30: Hakehilla logo belongs in the Hakehilla heading, not as a separate side graphic */
.hakehilla-intro{
display:block !important;
}
.hakehilla-intro-copy{
max-width:980px !important;
margin:0 auto;
}
.hakehilla-heading-logo{
margin:0 0 34px !important;
}
.hakehilla-heading-logo img{
display:block;
width:min(100%,520px) !important;
max-width:520px !important;
height:auto;
object-fit:contain;
}
.whatsapp-group-icon{
overflow:hidden;
background:#fff !important;
border:1px solid #eadbc7;
}
.whatsapp-group-icon img{
width:88%;
height:88%;
object-fit:contain;
display:block;
}
/* V34: restore Hakehilla cover and reduce Hakehilla logo size */
.hakehilla-separate-page{
grid-template-columns:1.05fr .95fr !important;
}
.hakehilla-heading-logo img{
width:140px !important;
max-width:140px !important;
}
.hakehilla-cover-side{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.hakehilla-cover-side>img{
width:min(100%,430px);
height:auto;
max-height:none;
object-fit:contain;
box-shadow:0 24px 55px rgba(61,43,27,.18);
border:1px solid #ddcfbb;
background:#fff;
}
.hakehilla-cover-meta{
margin-top:18px;
display:flex;
flex-direction:column;
gap:5px;
text-align:center;
}
.hakehilla-cover-meta strong{
font-family:Georgia,serif;
font-size:22px;
}
.hakehilla-cover-meta span{
color:#75675c;
}
@media(max-width:850px){
.hakehilla-separate-page{grid-template-columns:1fr !important}
.hakehilla-heading-logo img{width:120px !important;max-width:120px !important}
.hakehilla-cover-side{align-items:flex-start}
}
/* V35 archive restoration fix: archive cards remain visible from saved browser data */
.archive-grid{position:relative;z-index:1}
/* =========================================================
V36 — ISLAND MEDIA BRAND PALETTE
Deep navy + Island lime + white/light gray
========================================================= */
:root{
--island-navy:#172d50;
--island-navy-dark:#0d1c33;
--island-green:#8bcf22;
--island-green-dark:#6fac12;
--island-white:#ffffff;
--island-offwhite:#f7f9f5;
--island-soft:#edf2e9;
--island-text:#111820;
--island-muted:#56616c;
--island-border:#dce5d7;
}
/* Main surfaces */
body{background:var(--island-white);color:var(--island-text)}
section{border-color:var(--island-border)}
.eyebrow,
.weather-kicker{
color:var(--island-green-dark) !important;
}
/* Headlines and brand accents */
h1,h2,h3,h4,
.hakehilla-cover-meta strong,
.whatsapp-group-card h3{
color:var(--island-navy-dark);
}
h1 em,h2 em,h3 em{
color:var(--island-green-dark) !important;
}
/* Header / navigation */
.site-header,
header{
background:rgba(255,255,255,.97) !important;
border-color:var(--island-border) !important;
}
header a,
.site-header a,
nav a{
color:var(--island-navy-dark) !important;
}
header a:hover,
.site-header a:hover,
nav a:hover{
color:var(--island-green-dark) !important;
}
/* Buttons */
.primary,
.whatsapp-join,
button,
.btn-primary{
background:var(--island-navy) !important;
border-color:var(--island-navy) !important;
color:#fff !important;
}
.primary:hover,
.whatsapp-join:hover,
button:hover,
.btn-primary:hover{
background:var(--island-green-dark) !important;
border-color:var(--island-green-dark) !important;
}
.secondary,
.btn-secondary{
background:#fff !important;
border-color:var(--island-navy) !important;
color:var(--island-navy) !important;
}
.secondary:hover,
.btn-secondary:hover{
background:var(--island-soft) !important;
}
/* Island Media opening hero */
.island-media-hero-overlay{
background:linear-gradient(
90deg,
rgba(8,22,42,.88) 0%,
rgba(12,35,65,.70) 48%,
rgba(12,35,65,.24) 100%
) !important;
}
.island-media-hero .eyebrow{
color:var(--island-green) !important;
}
.island-media-hero h1{
color:#fff !important;
}
.island-media-hero h1 em{
color:var(--island-green) !important;
}
.island-weather-card{
border-top:5px solid var(--island-green);
}
#weatherTemp{
color:var(--island-navy);
}
/* Hakehilla section stays visually compatible but follows the overall site palette */
.hakehilla-intro,
.hakehilla-separate-page,
.whatsapp-groups-section{
background:var(--island-offwhite) !important;
}
.hakehilla-cover-side>img{
border-color:var(--island-border) !important;
}
/* WhatsApp / network cards */
.whatsapp-group-card{
border-top-color:var(--island-green) !important;
box-shadow:0 18px 40px rgba(23,45,80,.08) !important;
}
.whatsapp-group-icon{
border-color:var(--island-border) !important;
background:#fff !important;
}
/* Poster/distribution/service areas */
.poster-service-heading-simple h2{
color:var(--island-navy-dark) !important;
}
.service-card,
.archive-card,
.issue-card{
border-color:var(--island-border) !important;
}
.service-card::before,
.archive-card::before,
.issue-card::before{
background:var(--island-green) !important;
}
/* Archive */
.archive-section .eyebrow,
.archive-page .eyebrow{
color:var(--island-green-dark) !important;
}
/* Footer */
footer,
.site-footer{
background:var(--island-navy-dark) !important;
color:#fff !important;
}
footer a,
.site-footer a{
color:#fff !important;
}
footer a:hover,
.site-footer a:hover{
color:var(--island-green) !important;
}
footer .footer-contact-label{
color:#b8c5d3 !important;
}
/* Generic old brown/gold decorative borders/backgrounds */
[style*="#b97a25"],
[style*="#a66820"]{
border-color:var(--island-green) !important;
}
/* Form focus accents */
input:focus,
select:focus,
textarea:focus{
outline-color:var(--island-green) !important;
border-color:var(--island-green) !important;
}
/* V37 footer layout: four balanced columns */
.footer-top{
grid-template-columns:1.15fr 1fr 1fr 1fr !important;
gap:42px !important;
}
.footer-col h4{
margin-bottom:14px !important;
}
.footer-contact-label{
margin-top:10px !important;
}
@media(max-width:900px){
.footer-top{grid-template-columns:1fr 1fr !important}
}
@media(max-width:560px){
.footer-top{grid-template-columns:1fr !important}
}
/* V38 Island Media hero */
.island-slogan{
margin:12px 0 18px;
font-size:clamp(18px,1.45vw,27px);
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--island-green,#7ac943);
}
.island-hero-side{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
padding:36px;
min-width:0;
}
.island-hero-side img{
display:block;
width:min(430px,82%);
height:auto;
object-fit:contain;
background:transparent;
}
@media(max-width:850px){
.island-hero-side{padding:12px 24px 34px}
.island-hero-side img{width:min(340px,72%)}
}
/* V40 — corrected Island Media hero */
.island-media-hero{
display:grid !important;
grid-template-columns:1.05fr .95fr !important;
align-items:center !important;
gap:60px !important;
}
.island-media-hero-content{
width:100% !important;
max-width:760px !important;
}
.island-media-hero h1{
font-family:Georgia,serif !important;
font-size:clamp(62px,6.5vw,104px) !important;
line-height:.95 !important;
letter-spacing:-3px !important;
margin:18px 0 0 !important;
color:#fff !important;
}
.island-media-hero h1 em{
color:var(--island-green,#8bcf22) !important;
font-weight:400 !important;
}
.island-hero-side{
position:relative !important;
z-index:2 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
padding:20px !important;
}
.island-hero-side img{
display:block !important;
width:min(520px,92%) !important;
height:auto !important;
object-fit:contain !important;
background:transparent !important;
}
@media(max-width:900px){
.island-media-hero{
grid-template-columns:1fr !important;
}
.island-hero-side{
justify-content:flex-start !important;
}
.island-hero-side img{
width:min(360px,78%) !important;
}
}
/* V42 — use original Island Media black-background logo in hero */
.island-hero-side img{
width:min(520px,90%) !important;
height:auto !important;
object-fit:contain !important;
background:#000 !important;
box-shadow:0 20px 50px rgba(0,0,0,.18);
}
/* V43 — slogan left, Island Media logo on the RIGHT */
.island-media-hero{
grid-template-columns: 1.08fr .92fr !important;
}
.island-media-hero-content{
grid-column:1 !important;
grid-row:1 !important;
}
.island-hero-side{
grid-column:2 !important;
grid-row:1 !important;
justify-content:center !important;
align-items:center !important;
padding:20px 35px !important;
}
.island-hero-side img{
display:block !important;
width:min(500px,88%) !important;
max-height:360px !important;
height:auto !important;
object-fit:contain !important;
background:transparent !important;
box-shadow:none !important;
}
@media(max-width:900px){
.island-media-hero{grid-template-columns:1fr !important;}
.island-media-hero-content{grid-column:1 !important;grid-row:1 !important;}
.island-hero-side{grid-column:1 !important;grid-row:2 !important;justify-content:flex-start !important;}
}
.whatsapp-join{
text-transform:none !important;
letter-spacing:normal !important;
}
/* V50 — Hakehilla cover fixed on RIGHT side */
.hakehilla-intro,
.hakehilla-separate-page{
display:grid !important;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important;
gap:72px !important;
align-items:center !important;
padding:90px 8.5% !important;
min-height:720px !important;
}
.hakehilla-intro-copy{
grid-column:1 !important;
min-width:0 !important;
}
.hakehilla-cover-side{
grid-column:2 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.hakehilla-cover-side > img{
display:block !important;
width:min(430px,100%) !important;
max-width:430px !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
margin:0 auto !important;
position:static !important;
}
.hakehilla-intro-actions{
margin-top:32px !important;
}
@media(max-width:900px){
.hakehilla-intro,
.hakehilla-separate-page{
grid-template-columns:1fr !important;
gap:44px !important;
}
.hakehilla-intro-copy,
.hakehilla-cover-side{
grid-column:1 !important;
}
.hakehilla-cover-side{
align-items:flex-start !important;
}
}
/* V52 — latest Hakehilla cover opens the current PDF */
#latestCoverLink {
display: block;
width: min(430px, 100%);
margin: 0 auto;
cursor: pointer;
}
#latestCoverLink #latestCover {
width: 100% !important;
max-width: 430px !important;
height: auto !important;
display: block !important;
}
/* V53 — Hakehilla issue info above buttons + tilted cover like Minyan Meniyan */
.hakehilla-current-info{
margin-top:28px;
margin-bottom:20px;
padding-top:20px;
border-top:1px solid var(--island-border,#dce5d7);
display:flex;
flex-direction:column;
gap:6px;
}
.hakehilla-current-info strong{
font-family:Georgia,serif;
font-size:27px;
line-height:1.25;
color:var(--island-navy-dark,#0d1c33);
}
.hakehilla-current-info span{
font-size:18px;
color:#75675c;
}
#latestCoverLink{
display:block;
width:min(430px,100%);
margin:0 auto;
transform:rotate(2deg);
transform-origin:center center;
transition:transform .2s ease;
}
#latestCoverLink:hover{
transform:rotate(2deg) translateY(-3px);
}
#latestCoverLink #latestCover{
width:100% !important;
max-width:430px !important;
height:auto !important;
display:block !important;
box-shadow:0 26px 55px rgba(23,45,80,.16);
border:1px solid var(--island-border,#dce5d7);
background:#fff;
}
/* V56 — Island Media brand palette only */
:root{
--island-black:#000000;
--island-white:#ffffff;
--island-green:#8fd400;
--island-green-dark:#72aa00;
--island-soft:#f7f9f3;
--island-border:#dce6d2;
}
/* Main page text and headings */
body{
color:var(--island-black) !important;
}
h1,h2,h3,h4,h5,h6,
.hakehilla-current-info strong{
color:var(--island-black) !important;
}
/* All primary buttons: black like logo, green interaction */
a.primary,
button.primary,
.whatsapp-card a,
.rate-tabs a,
.rate-tabs button,
.price-sheet-actions a,
.issue-actions a,
.btn-primary{
background:var(--island-black) !important;
border-color:var(--island-black) !important;
color:var(--island-white) !important;
}
a.primary:hover,
button.primary:hover,
.whatsapp-card a:hover,
.rate-tabs a:hover,
.rate-tabs button:hover,
.price-sheet-actions a:hover,
.issue-actions a:hover,
.btn-primary:hover{
background:var(--island-green) !important;
border-color:var(--island-green) !important;
color:var(--island-black) !important;
}
/* Secondary buttons */
a.secondary,
button.secondary,
.btn-secondary{
background:transparent !important;
border-color:var(--island-black) !important;
color:var(--island-black) !important;
}
a.secondary:hover,
button.secondary:hover,
.btn-secondary:hover{
background:var(--island-green) !important;
border-color:var(--island-green) !important;
color:var(--island-black) !important;
}
/* Green brand accents */
.eyebrow,
.kicker,
.section-label,
.hero em,
.hakehilla-intro h2 em{
color:var(--island-green-dark) !important;
}
/* Cards / borders */
.whatsapp-card,
.rate-card,
.service-card,
.issue-card{
border-color:var(--island-border) !important;
}
/* Footer: logo-black background */
footer,
.site-footer{
background:var(--island-black) !important;
color:var(--island-white) !important;
}
footer h2, footer h3, footer h4,
.site-footer h2, .site-footer h3, .site-footer h4{
color:var(--island-white) !important;
}
footer a,
.site-footer a{
color:var(--island-white) !important;
}
footer a:hover,
.site-footer a:hover{
color:var(--island-green) !important;
}
footer .muted,
.site-footer .muted,
footer small,
.site-footer small{
color:#c7c7c7 !important;
}
/* Remove old navy/gold from common backgrounds */
nav a:hover,
.main-nav a:hover{
color:var(--island-green-dark) !important;
}
/* V59 — center navigation labels */
header nav a,
.main-nav a,
.site-nav a,
nav a {
text-align: center !important;
justify-content: center !important;
}
/* V60 — sentence case across the public website */
nav a,
button,
a.primary,
a.secondary,
.whatsapp-join,
.rate-tab,
.eyebrow,
.section-label,
.kicker {
text-transform:none !important;
}
/* V61 — admin archive deletion */
.archive-admin-list{display:grid;gap:12px;margin-top:22px}
.archive-admin-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px;border:1px solid rgba(0,0,0,.12);background:#fff}
.archive-admin-info{display:flex;align-items:center;gap:14px;min-width:0}
.archive-admin-info img{width:62px;height:82px;object-fit:cover;flex:0 0 auto}
.archive-admin-info div{display:flex;flex-direction:column;gap:5px;min-width:0}
.archive-admin-info strong{font-size:17px}
.archive-admin-info span{font-size:14px;opacity:.7}
.archive-delete{white-space:nowrap}
@media(max-width:650px){
.archive-admin-row{align-items:flex-start;flex-direction:column}
}
/* V62 — reorder past Hakehilla issues in admin */
.archive-admin-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
.archive-move{
border:1px solid #000 !important;
background:#fff !important;
color:#000 !important;
padding:9px 12px;
cursor:pointer;
}
.archive-move:hover:not(:disabled){
background:#8fd400 !important;
border-color:#8fd400 !important;
}
.archive-move:disabled{
opacity:.35;
cursor:not-allowed;
}
@media(max-width:650px){
.archive-admin-actions{justify-content:flex-start}
}
/* V64 — all buttons use Island Media green */
:root{
--island-green:#8fd400;
--island-green-dark:#72aa00;
--island-black:#000;
--island-white:#fff;
}
button,
input[type="button"],
input[type="submit"],
a.primary,
a.secondary,
.btn,
.btn-primary,
.btn-secondary,
.whatsapp-join,
.rate-tab,
.sheet-actions a,
.issue-actions a,
.poster-service-copy a,
.archive-card a,
.publish-btn,
.archive-move,
.danger,
.light {
background:var(--island-green) !important;
border-color:var(--island-green) !important;
color:var(--island-black) !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.primary:hover,
a.secondary:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.whatsapp-join:hover,
.rate-tab:hover,
.sheet-actions a:hover,
.issue-actions a:hover,
.poster-service-copy a:hover,
.archive-card a:hover,
.publish-btn:hover,
.archive-move:hover:not(:disabled),
.danger:hover,
.light:hover {
background:var(--island-green-dark) !important;
border-color:var(--island-green-dark) !important;
color:var(--island-white) !important;
}
/* Keep inactive/disabled controls visibly disabled */
button:disabled,
.archive-move:disabled {
opacity:.4 !important;
cursor:not-allowed !important;
}
/* V65 — footer bottom row moved up/left and made white */
.footer-bottom{
margin-top:24px !important;
padding-top:14px !important;
justify-content:flex-start !important;
gap:70px !important;
color:#ffffff !important;
border-top:1px solid rgba(255,255,255,.22) !important;
}
.footer-bottom span{
color:#ffffff !important;
}
@media(max-width:700px){
.footer-bottom{
gap:18px !important;
flex-direction:column !important;
}
}
/* V66 — edit past Hakehilla issues */
.archive-edit{
border:1px solid #000 !important;
background:#8fd400 !important;
color:#000 !important;
padding:9px 12px;
cursor:pointer;
}
.archive-edit:hover{
background:#72aa00 !important;
color:#fff !important;
}
.archive-edit-panel{
margin-top:28px;
padding:24px;
border:1px solid rgba(0,0,0,.16);
background:#f7f9f3;
}
.archive-edit-panel[hidden]{display:none !important}
.archive-edit-panel h2{
margin:0 0 18px;
font-size:28px;
}
.archive-edit-panel label{
display:block;
margin:14px 0;
}
.archive-edit-panel input{
width:100%;
margin-top:7px;
}
.archive-edit-buttons{
display:flex;
gap:10px;
margin-top:18px;
}
.archive-edit-cancel{
padding:11px 16px;
border:1px solid #000 !important;
background:#fff !important;
color:#000 !important;
}
.optional{
font-weight:400;
opacity:.65;
font-size:.9em;
}
/* V69 visual website editor */
.universal-editor-card{margin-top:28px}
.universal-editor-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.visual-editor-panel{margin-top:24px;padding:0;overflow:hidden}
.visual-editor-panel[hidden]{display:none!important}
.visual-editor-toolbar{display:flex;gap:16px;align-items:center;padding:14px 16px;background:#000;color:#fff}
.visual-editor-toolbar span{flex:1;opacity:.8}
.visual-editor-toolbar button{background:#8fd400!important;color:#000!important;border:0!important;padding:9px 14px}
#visualEditorFrame{display:block;width:100%;height:900px;border:0;background:#fff}
.site-visual-editing .visual-edit-target{cursor:pointer!important;outline:2px dashed transparent;outline-offset:2px}
.site-visual-editing .visual-edit-target:hover{outline-color:#8fd400!important}
/* V70 — clicking Minyan Meniyan cover opens its current PDF */
#minyanCoverLink{
display:block;
width:100%;
cursor:pointer;
}
#minyanCoverLink #minyanCover{
display:block;
width:100%;
height:auto;
}
/* V71 — past Hakehilla issues in one compact horizontal carousel */
.archive-carousel-wrap{
position:relative;
display:flex;
align-items:center;
gap:10px;
width:100%;
}
.archive-scroll-window{
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
flex:1;
scrollbar-width:none;
}
.archive-scroll-window::-webkit-scrollbar{display:none}
.archive-scroll-window .archive-grid,
.archive-scroll-window #archiveGrid{
display:flex !important;
flex-wrap:nowrap !important;
gap:18px !important;
width:max-content !important;
align-items:stretch !important;
}
.archive-scroll-window .archive-card,
.archive-scroll-window #archiveGrid > *{
flex:0 0 210px !important;
width:210px !important;
max-width:210px !important;
margin:0 !important;
}
.archive-scroll-window .archive-card img,
.archive-scroll-window #archiveGrid > * img{
width:100% !important;
height:270px !important;
object-fit:cover !important;
}
.archive-scroll-window .archive-card h3,
.archive-scroll-window #archiveGrid > * h3{
font-size:18px !important;
line-height:1.2 !important;
margin:10px 0 6px !important;
}
.archive-scroll-window .archive-card p,
.archive-scroll-window #archiveGrid > * p,
.archive-scroll-window .archive-card span,
.archive-scroll-window #archiveGrid > * span{
font-size:14px !important;
}
.archive-scroll-window .archive-card a,
.archive-scroll-window #archiveGrid > * a{
font-size:14px !important;
}
.archive-arrow{
flex:0 0 44px;
width:44px;
height:44px;
border-radius:50%;
border:0 !important;
background:#8fd400 !important;
color:#000 !important;
font-size:32px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0 !important;
z-index:2;
}
.archive-arrow:hover{
background:#72aa00 !important;
color:#fff !important;
}
@media(max-width:700px){
.archive-scroll-window .archive-card,
.archive-scroll-window #archiveGrid > *{
flex-basis:180px !important;
width:180px !important;
max-width:180px !important;
}
.archive-scroll-window .archive-card img,
.archive-scroll-window #archiveGrid > * img{
height:235px !important;
}
.archive-arrow{
flex-basis:38px;
width:38px;
height:38px;
font-size:28px;
}
}
/* V72 — full-screen visual editor with reliable text/image controls */
body.visual-editor-open{overflow:hidden!important}
.visual-editor-panel{
position:fixed!important; inset:0!important; z-index:999999!important;
margin:0!important; padding:0!important; width:100vw!important; height:100vh!important;
background:#fff!important; border:0!important;
}
.visual-editor-toolbar{height:64px;box-sizing:border-box}
.visual-editor-workspace{display:flex;height:calc(100vh - 64px);min-height:0}
.visual-edit-controls{
flex:0 0 280px;width:280px;padding:18px;background:#fff;border-right:1px solid #ddd;
overflow:auto;box-sizing:border-box;color:#000
}
.visual-edit-controls textarea{width:100%;box-sizing:border-box;margin:14px 0 10px;padding:10px;font:inherit}
.visual-edit-controls button{width:100%;margin:6px 0;background:#8fd400!important;color:#000!important;border:0!important;padding:12px!important}
#visualEditorFrame{flex:1;width:auto!important;height:100%!important;min-width:0;border:0;background:#fff}
.site-visual-editing .visual-edit-target{cursor:pointer!important}
.site-visual-editing .visual-edit-target:hover{outline:3px solid #8fd400!important;outline-offset:2px}
.site-visual-editing .visual-selected{outline:4px solid #8fd400!important;outline-offset:2px}
@media(max-width:800px){
.visual-edit-controls{flex-basis:210px;width:210px}
}
/* V73 full-page WYSIWYG layout editor */
.layout-editor-mode body{padding-top:64px!important}
#layoutEditorBar{
position:fixed;top:0;left:0;right:0;height:64px;z-index:2147483647;
display:flex;align-items:center;gap:18px;padding:0 22px;box-sizing:border-box;
background:#000;color:#fff;font-family:Arial,sans-serif;
}
#layoutEditorBar strong{font-size:20px}
#layoutEditorBar span{flex:1;font-size:14px}
#layoutEditorBar button{
background:#8fd400!important;color:#000!important;border:0!important;
padding:11px 16px!important;font-weight:700!important;cursor:pointer!important;
}
.layout-editor-mode .layout-movable{cursor:move!important}
.layout-editor-mode .layout-movable:hover{
outline:2px dashed #8fd400!important;outline-offset:3px!important;
}
.layout-editor-mode .layout-dragging{
outline:3px solid #8fd400!important;outline-offset:3px!important;
z-index:99999!important;position:relative;
}
/* ============================================================
V75 — Zoho Backstage-style admin:
actual website preview + fixed management sidebar
============================================================ */
.backstage-admin-body{
margin:0!important;
overflow:hidden!important;
background:#fff!important;
font-family:Arial,Helvetica,sans-serif!important;
}
.backstage-admin{
display:grid;
grid-template-columns:360px minmax(0,1fr);
width:100vw;
height:100vh;
overflow:hidden;
}
.backstage-sidepanel{
display:flex;
flex-direction:column;
min-width:0;
height:100vh;
background:#fff;
border-right:1px solid #d9ded6;
box-shadow:4px 0 18px rgba(0,0,0,.05);
z-index:5;
}
.backstage-brand{
display:flex;
align-items:center;
gap:12px;
padding:16px 18px;
border-bottom:1px solid #e4e7e1;
}
.backstage-brand img{
width:98px;
height:58px;
object-fit:contain;
background:#000;
}
.backstage-brand div{display:flex;flex-direction:column;gap:3px}
.backstage-brand strong{font-size:17px}
.backstage-brand span{font-size:12px;color:#6c746c}
.backstage-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
padding:12px;
border-bottom:1px solid #e4e7e1;
}
.backstage-nav-btn,
.backstage-view-site{
border:0!important;
background:#f4f6f1!important;
color:#111!important;
padding:11px 10px!important;
font-size:13px!important;
line-height:1.25;
text-align:left!important;
text-decoration:none;
cursor:pointer;
border-radius:5px;
}
.backstage-nav-btn.active{
background:#8fd400!important;
color:#000!important;
font-weight:700;
}
.backstage-view-site{
display:flex;
align-items:center;
}
.backstage-panel-area{
flex:1;
overflow:auto;
padding:16px;
background:#fafbf8;
}
.backstage-panel{display:none}
.backstage-panel.active{display:block}
.backstage-panel-heading{
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid #dfe4db;
}
.backstage-panel-heading h2{
margin:0 0 5px!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:22px!important;
line-height:1.15!important;
}
.backstage-panel-heading p{
margin:0!important;
color:#677067!important;
font-size:13px!important;
}
.backstage-form-section{
margin:0 0 18px!important;
padding:0 0 18px!important;
border:0!important;
border-bottom:1px solid #e1e5de!important;
background:transparent!important;
box-shadow:none!important;
}
.backstage-form-section:last-child{border-bottom:0!important}
.backstage-form-section h1{
font-family:Arial,Helvetica,sans-serif!important;
font-size:18px!important;
line-height:1.2!important;
margin:8px 0!important;
}
.backstage-form-section .eyebrow{
font-size:10px!important;
letter-spacing:2px!important;
}
.backstage-form-section .admin-note,
.backstage-form-section p{
font-size:12px!important;
line-height:1.45!important;
}
.backstage-form-section label{
display:block!important;
font-size:12px!important;
margin:10px 0!important;
}
.backstage-form-section input,
.backstage-form-section textarea,
.backstage-form-section select{
width:100%!important;
box-sizing:border-box!important;
font-size:13px!important;
padding:8px!important;
margin-top:5px!important;
}
.backstage-form-section button{
font-size:12px!important;
padding:9px 11px!important;
}
.backstage-form-section .preview-box{
padding:8px!important;
margin:10px 0!important;
}
.backstage-form-section .preview-box img{
max-width:120px!important;
max-height:160px!important;
}
.current-admin img,
.current-minyan-admin img{
max-width:120px!important;
height:auto!important;
}
.archive-admin-row{
padding:8px!important;
gap:8px!important;
}
.archive-admin-info img{
width:40px!important;
height:54px!important;
}
.archive-admin-actions{
gap:5px!important;
}
.archive-admin-actions button{
font-size:10px!important;
padding:6px 7px!important;
}
.archive-edit-panel{
padding:12px!important;
}
.archive-edit-panel h2{
font-family:Arial,Helvetica,sans-serif!important;
font-size:16px!important;
}
.backstage-preview-area{
display:flex;
flex-direction:column;
min-width:0;
height:100vh;
background:#ecefeb;
}
.backstage-preview-toolbar{
height:42px;
flex:0 0 42px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 14px;
background:#111;
color:#fff;
font-size:13px;
}
.backstage-preview-toolbar button{
background:#8fd400!important;
color:#000!important;
border:0!important;
padding:7px 12px!important;
font-size:12px!important;
}
#backstagePreview{
flex:1;
width:100%;
min-width:0;
border:0;
background:#fff;
}
.editor-mode-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
margin-bottom:14px;
}
.editor-mode{
background:#ecefe9!important;
color:#111!important;
border:1px solid #d7dbd3!important;
padding:9px 5px!important;
font-size:11px!important;
}
.editor-mode.active{
background:#8fd400!important;
border-color:#8fd400!important;
font-weight:700!important;
}
.sidebar-editor-controls{
background:#fff;
border:1px solid #dde2d8;
padding:12px;
margin:0 0 12px;
}
.sidebar-editor-controls[hidden]{display:none!important}
.sidebar-editor-controls h3{
font-family:Arial,Helvetica,sans-serif!important;
font-size:15px!important;
margin:0 0 6px!important;
}
.sidebar-editor-controls p{
font-size:12px!important;
color:#616a61!important;
}
.sidebar-editor-controls textarea{
width:100%;
box-sizing:border-box;
resize:vertical;
padding:8px;
}
.sidebar-editor-controls button{
width:100%;
margin:5px 0;
background:#8fd400!important;
color:#000!important;
border:0!important;
padding:9px!important;
font-size:12px!important;
}
.sidebar-save-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
margin-top:8px;
}
.sidebar-save-row .secondary-admin{
background:#fff!important;
border:1px solid #111!important;
}
.backstage-tip{
background:#f0f4eb;
border-left:4px solid #8fd400;
padding:10px 12px;
}
.backstage-tip strong{font-size:12px}
.backstage-tip p{font-size:11px;line-height:1.45;margin:5px 0 0}
/* Styles injected into the iframe by shared CSS classes */
.admin-content-mode .admin-edit-target{cursor:pointer!important}
.admin-content-mode .admin-edit-target:hover{
outline:2px dashed #8fd400!important;
outline-offset:2px!important;
}
.admin-content-mode .admin-edit-selected{
outline:4px solid #8fd400!important;
outline-offset:3px!important;
}
.admin-layout-mode .admin-layout-target{cursor:move!important}
.admin-layout-mode .admin-layout-target:hover{
outline:2px dashed #8fd400!important;
outline-offset:2px!important;
}
.admin-layout-mode .admin-layout-dragging{
outline:4px solid #8fd400!important;
outline-offset:3px!important;
position:relative!important;
z-index:99999!important;
}
@media(max-width:900px){
.backstage-admin{grid-template-columns:285px minmax(0,1fr)}
.backstage-nav{grid-template-columns:1fr}
}
/* V76 — each archived Hakehilla is an independent manageable item */
.archive-track .archive-card[data-archive-item="true"]{
flex:0 0 264px!important;
width:264px!important;
min-width:264px!important;
box-sizing:border-box!important;
margin:0 10px!important;
}
.individual-issue-manager{
background:#fff;
border:1px solid #dfe4db;
padding:12px;
margin:0 0 18px;
}
.individual-issue-manager h3{
margin:0 0 5px;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
}
.individual-issue-manager>p{
margin:0 0 10px;
color:#687168;
font-size:12px;
line-height:1.4;
}
.individual-archive-row{
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
gap:9px;
align-items:center;
padding:9px 0;
border-top:1px solid #e5e9e2;
}
.individual-archive-row:first-child{border-top:0}
.individual-archive-thumb{
width:42px;height:55px;background:#f1f2ee;overflow:hidden;
}
.individual-archive-thumb img{
width:100%;height:100%;object-fit:cover;
}
.individual-archive-meta{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.individual-archive-meta strong{
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.individual-archive-meta span{font-size:10px;color:#777}
.individual-archive-controls{
display:flex;
gap:4px;
align-items:center;
}
.individual-archive-controls button{
border:0!important;
background:#8fd400!important;
color:#000!important;
min-width:30px!important;
width:auto!important;
padding:7px!important;
font-size:11px!important;
margin:0!important;
}
.individual-archive-controls .delete-one{
background:#111!important;
color:#fff!important;
}
.individual-archive-controls button:disabled{
opacity:.28;
cursor:not-allowed;
}
.individual-empty{font-size:12px;color:#777}
/* V77 footer corrections */
.site-footer .footer-bottom,
.site-footer .footer-bottom *,
.site-footer .footer-tagline,
.site-footer .footer-location,
.site-footer .footer-copyright {
color:#fff !important;
}
.site-footer .footer-location,
.site-footer .footer-copyright {
white-space:nowrap !important;
}
.site-footer .footer-bottom {
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
gap:34px !important;
}
.site-footer .footer-bottom > * {
width:auto !important;
max-width:none !important;
flex:0 0 auto !important;
}
/* V78 — discreet admin sign-in link in header */
.admin-signin-link{
font-size:13px !important;
padding:7px 10px !important;
border:1px solid #8fd400 !important;
color:#000 !important;
background:#8fd400 !important;
border-radius:4px;
white-space:nowrap;
}
.admin-signin-link:hover{
background:#72aa00 !important;
border-color:#72aa00 !important;
color:#fff !important;
}
/* V79 — Sign in beside Island Media logo */
.header-brand-signin{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex:0 0 auto !important;
}
.header-brand-signin .admin-signin-link{
margin:0 !important;
white-space:nowrap !important;
}
.admin-signin-link{
font-size:13px !important;
padding:7px 11px !important;
border:1px solid #8fd400 !important;
background:#8fd400 !important;
color:#000 !important;
border-radius:4px !important;
text-decoration:none !important;
}
.admin-signin-link:hover{
background:#72aa00 !important;
border-color:#72aa00 !important;
color:#fff !important;
}
/* V82 — advertising rate buttons use Island Media green */
.rates-tabs button,
.rate-tabs button,
.rates-toggle button,
.rates-nav button,
a[href*="regular"][class*="btn"],
a[href*="yom"][class*="btn"]{
background:#8fd400 !important;
border-color:#8fd400 !important;
color:#000 !important;
}
.rates-tabs button:hover,
.rate-tabs button:hover,
.rates-toggle button:hover,
.rates-nav button:hover,
a[href*="regular"][class*="btn"]:hover,
a[href*="yom"][class*="btn"]:hover{
background:#78b900 !important;
border-color:#78b900 !important;
color:#000 !important;
}
/* V84 — footer Island Media tagline must be white */
.site-footer .footer-brand p {
color: #fff !important;
}
/* V85 — Verrazzano Bridge replaces the Island Media hero logo */
.hero img[src$="verrazzano-bridge.jpg"],
.home-hero img[src$="verrazzano-bridge.jpg"],
img[src$="verrazzano-bridge.jpg"] {
object-fit: cover;
}
/* V86 — Zoho Backstage-inspired admin console */
.backstage-admin-body{background:#f5f7fa!important;color:#17233c!important}
.backstage-admin{grid-template-columns:300px minmax(0,1fr)!important;min-height:100vh!important}
.backstage-sidepanel{
background:#fff!important;border-right:1px solid #e4e8ef!important;
box-shadow:0 0 24px rgba(25,42,70,.06)!important;padding:0!important;
height:100vh!important;position:sticky!important;top:0!important;overflow:auto!important
}
.backstage-brand{
min-height:78px!important;padding:16px 20px!important;border-bottom:1px solid #e8ebf0!important;
background:#fff!important;gap:12px!important
}
.backstage-brand img{width:64px!important;height:42px!important;object-fit:contain!important;background:#000!important}
.backstage-brand strong{font-family:Arial,sans-serif!important;font-size:16px!important;color:#17233c!important}
.backstage-brand span{font-family:Arial,sans-serif!important;font-size:12px!important;color:#7a8495!important}
.backstage-nav{display:flex!important;flex-direction:column!important;gap:3px!important;padding:14px 10px!important;border-bottom:1px solid #edf0f4!important}
.backstage-nav-btn,.backstage-view-site{
width:100%!important;text-align:left!important;border:0!important;border-radius:7px!important;
padding:11px 13px!important;background:transparent!important;color:#465268!important;
font:600 14px/1.2 Arial,sans-serif!important;text-decoration:none!important
}
.backstage-nav-btn:hover,.backstage-view-site:hover{background:#f2f5f9!important;color:#17233c!important}
.backstage-nav-btn.active{
background:#edf8df!important;color:#4f7900!important;
box-shadow:inset 3px 0 0 #8fd400!important
}
.backstage-panel-area{padding:14px 18px 30px!important}
.backstage-panel-heading{padding:10px 4px 16px!important;border-bottom:1px solid #edf0f4!important;margin-bottom:12px!important}
.backstage-panel-heading h2{font:700 20px/1.2 Arial,sans-serif!important;color:#17233c!important;margin:0 0 5px!important}
.backstage-panel-heading p{font:400 13px/1.45 Arial,sans-serif!important;color:#7a8495!important;margin:0!important}
.editor-mode-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:5px!important;background:#f2f4f7!important;padding:4px!important;border-radius:8px!important;margin:12px 0!important}
.editor-mode{border:0!important;border-radius:6px!important;background:transparent!important;padding:9px 5px!important;font:600 12px Arial,sans-serif!important;color:#697386!important}
.editor-mode.active{background:#fff!important;color:#17233c!important;box-shadow:0 1px 4px rgba(25,42,70,.12)!important}
.sidebar-editor-controls,.backstage-tip,.individual-issue-manager,.backstage-form-section{
background:#fff!important;border:1px solid #e6eaf0!important;border-radius:9px!important;
box-shadow:none!important;padding:15px!important;margin:12px 0!important
}
.backstage-form-section{border-bottom:1px solid #e6eaf0!important}
.backstage-form-section h1{font-family:Arial,sans-serif!important;font-size:22px!important;color:#17233c!important}
.backstage-form-section .eyebrow{color:#69a900!important;font:700 11px Arial,sans-serif!important;letter-spacing:.12em!important}
.backstage-form-section input,.backstage-form-section textarea,.backstage-form-section select{
border:1px solid #d8dee8!important;border-radius:6px!important;background:#fff!important;padding:10px 11px!important;
font-family:Arial,sans-serif!important
}
.backstage-form-section button,.sidebar-editor-controls button,.archive-admin-actions button{
border-radius:6px!important;border:1px solid #d8dee8!important;font-family:Arial,sans-serif!important
}
.publish-btn,#saveContentEdits,#saveLayoutEdits{
background:#8fd400!important;border-color:#8fd400!important;color:#102000!important;font-weight:700!important
}
.backstage-preview-area{background:#eef1f5!important;min-width:0!important;position:relative!important}
.backstage-topbar{
height:64px!important;background:#fff!important;border-bottom:1px solid #e3e7ed!important;
display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 22px!important;
position:sticky!important;top:0!important;z-index:20!important;font-family:Arial,sans-serif!important
}
.backstage-topbar>div:first-child{display:flex!important;flex-direction:column!important;gap:2px!important}
.backstage-topbar strong{font-size:15px!important;color:#17233c!important}
.backstage-topbar span{font-size:11px!important;color:#8791a1!important}
.backstage-topbar-actions{display:flex!important;gap:7px!important;align-items:center!important}
.backstage-topbar-actions button,.backstage-topbar-actions a{
border:1px solid #dce1e8!important;background:#fff!important;color:#334056!important;border-radius:6px!important;
padding:8px 11px!important;text-decoration:none!important;font:600 12px Arial,sans-serif!important
}
.backstage-preview-toolbar{
background:#f7f8fa!important;border-bottom:1px solid #e0e5ec!important;padding:9px 18px!important;
font-family:Arial,sans-serif!important
}
#backstagePreview{
display:block!important;width:calc(100% - 36px)!important;height:calc(100vh - 112px)!important;
margin:18px!important;background:#fff!important;border:1px solid #dfe4eb!important;border-radius:8px!important;
box-shadow:0 5px 18px rgba(27,42,67,.08)!important;transition:.2s ease!important
}
#backstagePreview.admin-mobile-preview{width:390px!important;max-width:calc(100% - 36px)!important;margin-left:auto!important;margin-right:auto!important}
.archive-admin-row{
background:#fff!important;border:1px solid #e5e9ef!important;border-radius:8px!important;padding:10px!important;
margin-bottom:8px!important
}
@media(max-width:900px){
.backstage-admin{grid-template-columns:1fr!important}
.backstage-sidepanel{height:auto!important;position:relative!important}
.backstage-preview-area{min-height:700px!important}
}
/* V87 — homepage hero: copy stays left, bridge becomes a large right-side panel */
.home-hero,
.hero.home-hero,
section.home-hero {
min-height: 760px !important;
display: grid !important;
grid-template-columns: minmax(420px, 43%) minmax(0, 57%) !important;
align-items: stretch !important;
padding: 0 !important;
overflow: hidden !important;
background: linear-gradient(90deg,#26384d 0%,#66788d 100%) !important;
}
.home-hero > .hero-copy,
.home-hero > .home-hero-copy,
.home-hero .hero-content {
position: relative !important;
z-index: 3 !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 72px clamp(42px,6vw,110px) !important;
background: linear-gradient(90deg,rgba(31,48,68,.98),rgba(63,82,104,.94)) !important;
}
.home-hero img[src$="verrazzano-bridge.jpg"] {
width: 100% !important;
height: 100% !important;
min-height: 760px !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Keep the existing hero wording on the side rather than over the bridge */
.home-hero h1,
.home-hero h2 {
max-width: 680px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.home-hero .eyebrow {
align-self: flex-start !important;
}
/* If the current markup wraps the bridge in a media container, make it fill the entire right column */
.home-hero .hero-media,
.home-hero .home-hero-media,
.home-hero .hero-image {
height: 100% !important;
min-height: 760px !important;
overflow: hidden !important;
margin: 0 !important;
}
.home-hero .hero-media img,
.home-hero .home-hero-media img,
.home-hero .hero-image img {
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
@media (max-width: 900px) {
.home-hero,
.hero.home-hero,
section.home-hero {
grid-template-columns: 1fr !important;
min-height: auto !important;
}
.home-hero > .hero-copy,
.home-hero > .home-hero-copy,
.home-hero .hero-content {
padding: 54px 28px !important;
}
.home-hero img[src$="verrazzano-bridge.jpg"],
.home-hero .hero-media,
.home-hero .home-hero-media,
.home-hero .hero-image {
min-height: 520px !important;
height: 520px !important;
}
}
/* V88 — pull footer tagline closer to Island Media logo */
.site-footer .footer-brand img { margin-bottom: 4px !important; }
.site-footer .footer-brand p { margin-top: 0 !important; }
/* V90 — Verrazzano image fills the entire right half of the Island Media hero */
.island-media-hero{
min-height:760px !important;
display:grid !important;
grid-template-columns:44% 56% !important;
padding:0 !important;
overflow:hidden !important;
align-items:stretch !important;
}
.island-media-hero-content{
grid-column:1 !important;
grid-row:1 !important;
position:relative !important;
z-index:2 !important;
align-self:stretch !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
padding:70px clamp(42px,6vw,105px) !important;
}
.island-hero-side{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
height:100% !important;
min-height:760px !important;
padding:0 !important;
margin:0 !important;
display:block !important;
overflow:hidden !important;
}
.island-hero-side img,
.island-media-hero .island-hero-side img,
.island-media-hero img[src$="verrazzano-bridge.jpg"]{
display:block !important;
width:100% !important;
max-width:none !important;
height:100% !important;
min-height:760px !important;
max-height:none !important;
object-fit:cover !important;
object-position:center center !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
box-shadow:none !important;
}
@media(max-width:900px){
.island-media-hero{grid-template-columns:1fr !important;min-height:auto !important;}
.island-media-hero-content{grid-column:1 !important;grid-row:1 !important;padding:55px 28px !important;}
.island-hero-side{grid-column:1 !important;grid-row:2 !important;min-height:560px !important;height:560px !important;}
.island-hero-side img,.island-media-hero .island-hero-side img{min-height:560px !important;height:560px !important;}
}
/* V91 — add spacing between archive date and “Open issue” */
.archive-card .archive-date + a,
.archive-card .date + a,
.archive-card time + a,
.archive-card span + a {
margin-left: 10px !important;
}
/* Fallback for archive footer/meta rows */
.archive-card .archive-meta a,
.archive-card .issue-meta a {
margin-left: 10px !important;
}
/* V92 — collapsible public left-side navigation */
.site-menu-toggle{
position:fixed;
top:18px;
left:18px;
z-index:10002;
width:48px;
height:48px;
border:0!important;
border-radius:7px!important;
background:#8fd400!important;
color:#000!important;
font-size:25px!important;
line-height:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
box-shadow:0 4px 18px rgba(0,0,0,.15);
cursor:pointer;
}
.site-menu-toggle.menu-open{
opacity:0;
pointer-events:none;
}
.site-side-menu{
position:fixed;
inset:0 auto 0 0;
width:265px;
z-index:10003;
box-sizing:border-box;
padding:18px 14px;
background:#0d1b2b;
color:#fff;
transform:translateX(-100%);
transition:transform .25s ease;
box-shadow:10px 0 30px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
overflow-y:auto;
}
.site-side-menu.open{transform:translateX(0)}
.site-side-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}
.site-side-head img{
width:128px;
height:76px;
object-fit:contain;
background:#000;
}
.site-menu-close{
width:36px!important;
height:36px!important;
min-width:36px!important;
padding:0!important;
border:0!important;
border-radius:6px!important;
background:#182a3d!important;
color:#fff!important;
font-size:26px!important;
cursor:pointer;
}
.site-side-signin{
display:block;
background:#8fd400;
color:#000!important;
text-align:center;
text-decoration:none;
padding:11px 12px;
border-radius:6px;
font-weight:700;
margin-bottom:20px;
}
.site-side-label{
color:#8f9bac;
text-transform:uppercase;
letter-spacing:.11em;
font-size:10px;
margin:4px 8px 7px;
}
.site-side-menu > a:not(.site-side-signin){
display:block;
color:#fff!important;
text-decoration:none;
padding:11px 12px;
margin:2px 0;
border-radius:6px;
font-size:14px;
}
.site-side-menu > a:not(.site-side-signin):hover{
background:#192c40;
color:#8fd400!important;
}
.site-side-footer{
margin-top:auto;
padding:18px 8px 2px;
border-top:1px solid rgba(255,255,255,.12);
color:#fff;
font-size:12px;
}
.site-menu-backdrop{
position:fixed;
inset:0;
z-index:10001;
background:rgba(0,0,0,.36);
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
}
.site-menu-backdrop.open{
opacity:1;
pointer-events:auto;
}
/* Header remains only for the logo; old horizontal links are gone */
.site-header{
min-height:92px!important;
justify-content:center!important;
}
.site-header .header-brand-signin{
margin:0 auto!important;
}
@media(max-width:600px){
.site-side-menu{width:min(86vw,285px)}
}
/* V93 — hero fits comfortably in one screen without scrolling */
.island-media-hero{
height:clamp(500px, calc(100vh - 92px), 700px) !important;
min-height:0 !important;
max-height:700px !important;
}
.island-media-hero-content{
height:100% !important;
box-sizing:border-box !important;
}
.island-hero-side{
height:100% !important;
min-height:0 !important;
max-height:700px !important;
}
.island-hero-side img,
.island-media-hero .island-hero-side img,
.island-media-hero img[src$="verrazzano-bridge.jpg"]{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:700px !important;
object-fit:cover !important;
object-position:center center !important;
}
@media(max-width:900px){
.island-media-hero{
height:auto !important;
max-height:none !important;
}
.island-hero-side,
.island-hero-side img,
.island-media-hero .island-hero-side img{
height:clamp(360px, 62vh, 520px) !important;
min-height:0 !important;
max-height:520px !important;
}
}
/* V94 — sidebar open by default, labeled Menu, logo next to it */
.site-menu-toggle{
width:auto !important;
min-width:92px !important;
height:48px !important;
gap:9px !important;
padding:0 14px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:15px !important;
font-weight:700 !important;
}
.site-menu-toggle .menu-icon{
font-size:25px;
line-height:1;
}
.site-menu-toggle .menu-label{
display:inline-block;
}
.site-menu-toggle.menu-open{
opacity:0 !important;
pointer-events:none !important;
}
.site-side-menu{
width:265px !important;
}
/* Keep the logo immediately beside the side panel */
.site-header{
justify-content:flex-start !important;
padding-left:285px !important;
padding-right:24px !important;
}
.header-logo-next-to-menu,
.site-header .header-brand-signin{
margin:0 !important;
}
.site-header .header-brand-signin{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
}
/* When panel is closed, menu button reappears and header can shift left */
body:not(.public-menu-open) .site-header{
padding-left:128px !important;
}
/* Backdrop should not darken the site while panel is simply open by default */
.site-menu-backdrop.open{
opacity:0 !important;
pointer-events:none !important;
}
/* Panel close button remains visible and obvious */
.site-menu-close::after{
content:" Hide";
font-size:12px;
margin-left:3px;
}
.site-menu-close{
width:auto !important;
min-width:70px !important;
padding:0 10px !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:22px !important;
}
@media(max-width:700px){
.site-header{
padding-left:18px !important;
justify-content:center !important;
}
body.public-menu-open .site-header{
padding-left:18px !important;
}
.site-side-menu{
width:min(86vw,285px) !important;
}
}
/* V95 — sidebar pushes the website instead of covering it */
:root{
--public-side-menu-width:265px;
}
/* When the side panel is open, the whole public site moves right and gets narrower */
body.public-menu-open > .site-header,
body.public-menu-open > main,
body.public-menu-open > footer{
margin-left:var(--public-side-menu-width) !important;
width:calc(100% - var(--public-side-menu-width)) !important;
max-width:calc(100% - var(--public-side-menu-width)) !important;
transition:margin-left .25s ease,width .25s ease,max-width .25s ease !important;
}
/* When it is closed, the site expands back to full width */
body:not(.public-menu-open) > .site-header,
body:not(.public-menu-open) > main,
body:not(.public-menu-open) > footer{
margin-left:0 !important;
width:100% !important;
max-width:100% !important;
transition:margin-left .25s ease,width .25s ease,max-width .25s ease !important;
}
/* Keep header logo immediately beside the panel, never underneath it */
.site-header{
padding-left:20px !important;
padding-right:24px !important;
justify-content:flex-start !important;
}
body.public-menu-open .site-header{
padding-left:20px !important;
}
body:not(.public-menu-open) .site-header{
padding-left:126px !important;
}
/* No overlay at all — the panel changes the site width instead */
.site-menu-backdrop,
.site-menu-backdrop.open{
display:none !important;
}
/* Hero sized so the whole first screen can be seen comfortably */
.island-media-hero{
height:min(610px, calc(100vh - 92px)) !important;
min-height:500px !important;
max-height:610px !important;
grid-template-columns:44% 56% !important;
overflow:hidden !important;
}
/* Keep all hero wording visible inside the left panel */
.island-media-hero-content{
height:100% !important;
padding:44px clamp(28px,4vw,68px) !important;
justify-content:center !important;
overflow:hidden !important;
}
.island-media-hero h1{
font-size:clamp(52px,5.2vw,82px) !important;
line-height:.96 !important;
margin:0 !important;
}
/* Show the ENTIRE Verrazzano photo — no zoom/crop and no scrolling needed */
.island-hero-side{
height:100% !important;
min-height:0 !important;
max-height:610px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
background:linear-gradient(90deg,#53667b,#c8d1db) !important;
}
.island-hero-side img,
.island-media-hero .island-hero-side img,
.island-media-hero img[src$="verrazzano-bridge.jpg"]{
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:610px !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
}
/* Desktop sidebar width stays fixed */
.site-side-menu{
width:var(--public-side-menu-width) !important;
}
@media(max-width:900px){
:root{--public-side-menu-width:min(82vw,285px);}
/* On smaller screens the side panel may overlay rather than crush the page */
body.public-menu-open > .site-header,
body.public-menu-open > main,
body.public-menu-open > footer,
body:not(.public-menu-open) > .site-header,
body:not(.public-menu-open) > main,
body:not(.public-menu-open) > footer{
margin-left:0 !important;
width:100% !important;
max-width:100% !important;
}
.island-media-hero{
height:auto !important;
min-height:0 !important;
max-height:none !important;
grid-template-columns:1fr !important;
}
.island-media-hero-content{
min-height:390px !important;
}
.island-hero-side{
height:min(520px,65vh) !important;
max-height:520px !important;
}
.island-hero-side img,
.island-media-hero .island-hero-side img{
height:100% !important;
max-height:520px !important;
object-fit:contain !important;
}
}
/* V96 — remove top header logo; move logo into hero */
.site-header{
display:none !important;
}
/* Hero now starts at the top of the public page */
body.public-menu-open > main{
margin-top:0 !important;
}
body:not(.public-menu-open) > main{
margin-top:0 !important;
}
/* Island Media logo replaces the green ISLAND MEDIA wording */
.hero-island-logo{
display:block !important;
width:170px !important;
height:auto !important;
max-height:105px !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 0 24px 0 !important;
background:#000 !important;
}
/* Remove any remaining hero eyebrow text */
.island-media-hero .eyebrow{
display:none !important;
}
/* With the header gone, let the hero fit the viewport comfortably */
.island-media-hero{
height:min(650px,100vh) !important;
max-height:650px !important;
}
.island-hero-side,
.island-hero-side img,
.island-media-hero .island-hero-side img{
max-height:650px !important;
}
/* V99 — move the footer copyright/location row closer to the bottom edge */
.site-footer .footer-bottom,
footer .footer-bottom{
margin-top:6px !important;
padding-top:6px !important;
padding-bottom:2px !important;
}
.site-footer,
footer{
padding-bottom:4px !important;
}
/* V101 — remove decorative white line from hero */
.island-media-hero .hero-line,
.island-media-hero .divider,
.island-media-hero hr{
display:none !important;
}
/* V102 — user's new Verrazzano photo fills the entire hero behind the wording */
.island-media-hero{
position:relative !important;
display:block !important;
grid-template-columns:none !important;
height:min(650px,100vh) !important;
min-height:520px !important;
max-height:650px !important;
overflow:hidden !important;
background:
linear-gradient(90deg, rgba(8,25,43,.82) 0%, rgba(8,25,43,.62) 42%, rgba(8,25,43,.18) 72%, rgba(8,25,43,.05) 100%),
url("assets/verrazzano-hero-background.jpg?v=2") center center / cover no-repeat !important;
}
.island-media-hero-content{
position:relative !important;
z-index:2 !important;
width:min(760px,62%) !important;
height:100% !important;
box-sizing:border-box !important;
padding:42px clamp(36px,5vw,78px) !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
background:transparent !important;
}
/* Logo and all hero wording sit directly on top of the bridge photo */
.hero-island-logo{
width:170px !important;
margin-bottom:22px !important;
}
.island-media-hero h1,
.island-media-hero .hero-title{
position:relative !important;
z-index:3 !important;
color:#fff !important;
text-shadow:0 2px 12px rgba(0,0,0,.25) !important;
}
.island-media-hero .accent,
.island-media-hero em{
color:#8fd400 !important;
}
/* Old separate bridge panel must never show */
.island-hero-side{
display:none !important;
}
@media(max-width:900px){
.island-media-hero{
min-height:600px !important;
height:min(700px,100vh) !important;
max-height:700px !important;
background-position:center center !important;
}
.island-media-hero-content{
width:100% !important;
min-height:0 !important;
padding:38px 28px !important;
background:linear-gradient(90deg,rgba(8,25,43,.78),rgba(8,25,43,.30)) !important;
}
}
/* V104 — the open sidebar must take up its own space, never cover website content */
@media (min-width: 901px){
body.menu-open{
padding-left:330px !important;
box-sizing:border-box !important;
}
body.menu-open .site-shell,
body.menu-open main,
body.menu-open .site-footer{
width:100% !important;
max-width:none !important;
}
.side-menu{
width:330px !important;
}
}
/* When hidden, the website immediately expands back to full width */
body:not(.menu-open){
padding-left:0 !important;
}
/* Mobile can still use the panel as an overlay */
@media (max-width:900px){
body.menu-open{
padding-left:0 !important;
}
}
/* V105 — Minyan Meniyan section uses the logo instead of text */
.minyan-section-logo{
display:block !important;
width:190px !important;
max-width:42vw !important;
height:auto !important;
object-fit:contain !important;
margin:0 0 18px 0 !important;
}
/* V106 — hero divider and “It’s Us” on the same line */
.hero-line-us{
display:flex !important;
align-items:center !important;
gap:22px !important;
flex-wrap:nowrap !important;
margin-top:10px !important;
}
.hero-line-us .hero-line,
.hero-line-us .divider{
display:block !important;
flex:0 0 100px !important;
width:100px !important;
height:5px !important;
background:#fff !important;
margin:0 !important;
}
.hero-line-us .accent,
.hero-line-us .hero-accent,
.hero-line-us .hero-tagline{
margin:0 !important;
white-space:nowrap !important;
}
/* V108 — move footer bottom text farther to the right */
.site-footer .footer-bottom,
footer .footer-bottom{
padding-left:70px !important;
justify-content:flex-start !important;
gap:70px !important;
box-sizing:border-box !important;
}
.site-footer .footer-bottom > *,
footer .footer-bottom > *{
margin-left:0 !important;
}
/* V109 — sidebar NEVER covers public content on desktop/tablet */
:root{
--public-side-menu-width:265px;
}
/* Fix the actual sidebar selector */
.site-side-menu{
width:var(--public-side-menu-width) !important;
}
/* Starting at tablet width, the sidebar occupies real layout space */
@media (min-width:650px){
html, body{
overflow-x:hidden !important;
}
body.menu-open{
padding-left:var(--public-side-menu-width) !important;
box-sizing:border-box !important;
}
body.menu-open > main,
body.menu-open > footer,
body.menu-open > .site-header{
margin-left:0 !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
body:not(.menu-open){
padding-left:0 !important;
}
body:not(.menu-open) > main,
body:not(.menu-open) > footer,
body:not(.menu-open) > .site-header{
margin-left:0 !important;
width:100% !important;
max-width:100% !important;
}
/* Prevent wide sections/cards from sliding underneath the sidebar */
main,
section,
.whatsapp-groups-section,
.whatsapp-groups-grid,
.site-footer,
.footer-inner{
min-width:0 !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.whatsapp-groups-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
width:100% !important;
}
}
/* Only truly small phones may use overlay behavior */
@media (max-width:649px){
body.menu-open{
padding-left:0 !important;
}
.site-side-menu{
width:min(86vw,285px) !important;
}
}
/* V110 — dedicated phone layout. Desktop/tablet styling remains unchanged. */
@media (max-width:649px){
html, body{
width:100% !important;
max-width:100% !important;
overflow-x:hidden !important;
}
body{
padding-left:0 !important;
}
/* Mobile menu button: smaller and less intrusive */
.side-menu-toggle,
.menu-toggle,
button[aria-label*="menu" i]{
position:fixed !important;
top:14px !important;
left:14px !important;
width:auto !important;
min-width:105px !important;
height:52px !important;
padding:0 16px !important;
font-size:17px !important;
z-index:9999 !important;
border-radius:10px !important;
}
/* Mobile drawer may overlay only while intentionally opened */
.site-side-menu{
width:min(82vw,290px) !important;
max-width:290px !important;
z-index:10000 !important;
}
/* Every public section must fit the phone width */
main,
main > *,
section,
.section,
.container,
.content,
.site-footer,
.footer-inner{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
/* General phone typography */
h1{
font-size:clamp(46px,13vw,64px) !important;
line-height:.94 !important;
overflow-wrap:normal !important;
}
h2{
font-size:clamp(38px,10vw,50px) !important;
line-height:1 !important;
}
h3{
font-size:clamp(27px,8vw,38px) !important;
line-height:1.05 !important;
}
p{
font-size:18px !important;
line-height:1.55 !important;
}
/* Hakehilla intro */
.hakehilla-intro,
.hakehilla-separate-page{
padding:82px 30px 45px !important;
min-height:0 !important;
}
.hakehilla-intro h1,
.hakehilla-separate-page h1{
font-size:clamp(48px,13vw,62px) !important;
line-height:.93 !important;
max-width:100% !important;
}
.hakehilla-intro .accent,
.hakehilla-separate-page .accent{
font-size:clamp(43px,12vw,58px) !important;
line-height:1 !important;
}
/* Current Hakehilla image must fit cleanly */
.current-hakehilla,
.latest-hakehilla,
.current-issue{
padding-left:24px !important;
padding-right:24px !important;
}
.current-hakehilla img,
.latest-hakehilla img,
.current-issue img{
max-width:100% !important;
width:auto !important;
height:auto !important;
}
/* Archive: one centered card at a time, no horizontal page scrollbar */
.archive-section{
padding:70px 18px !important;
overflow:hidden !important;
}
.archive-carousel,
.archive-track,
.issues-track{
width:100% !important;
max-width:100% !important;
overflow:hidden !important;
box-sizing:border-box !important;
}
.archive-card,
.issue-card{
flex:0 0 min(72vw,290px) !important;
width:min(72vw,290px) !important;
max-width:min(72vw,290px) !important;
}
.archive-card img,
.issue-card img{
width:100% !important;
max-width:100% !important;
height:auto !important;
}
/* Minyan Meniyan */
.minyan-section,
.minyan-meniyan-section{
padding:70px 30px !important;
min-height:0 !important;
}
.minyan-section-logo{
width:150px !important;
max-width:42vw !important;
margin-bottom:28px !important;
}
.minyan-section h2,
.minyan-meniyan-section h2{
font-size:clamp(44px,12vw,58px) !important;
line-height:.96 !important;
}
/* Distribution heading and content */
.distribution-section{
padding:70px 22px !important;
overflow:hidden !important;
}
.distribution-section .eyebrow{
font-size:13px !important;
line-height:1.25 !important;
letter-spacing:5px !important;
text-align:center !important;
}
.distribution-section h2{
font-size:30px !important;
line-height:1.12 !important;
text-align:center !important;
max-width:390px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.distribution-section img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
object-fit:contain !important;
}
/* Distribution service cards stack cleanly */
.distribution-grid,
.services-grid,
.distribution-cards{
display:grid !important;
grid-template-columns:1fr !important;
gap:28px !important;
width:100% !important;
max-width:100% !important;
padding:0 !important;
}
.distribution-grid > *,
.services-grid > *,
.distribution-cards > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
/* WhatsApp cards: one per row */
.whatsapp-groups-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:22px !important;
width:100% !important;
max-width:100% !important;
}
/* Footer stacks instead of overflowing */
.site-footer .footer-inner,
footer .footer-inner{
display:grid !important;
grid-template-columns:1fr !important;
gap:28px !important;
padding:38px 28px !important;
}
.site-footer .footer-bottom,
footer .footer-bottom{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:8px !important;
padding:16px 28px 8px !important;
}
/* Never show a page-level horizontal scrollbar on phone */
*{
max-width:100%;
}
}
/* V111 — reliable admin editor states */
.admin-editor-status{
margin-top:14px;
padding:10px 12px;
border-radius:7px;
background:#eef2f6;
color:#334056;
font:600 12px/1.4 Arial,sans-serif;
}
.admin-editor-status.ok{
background:#edf8df;
color:#426b00;
}
.admin-editor-status.bad{
background:#fff0f0;
color:#a40000;
}
.backstage-panel-area button{
cursor:pointer !important;
}
#contentEditorControls:not([hidden]),
#layoutEditorControls:not([hidden]){
display:block !important;
}
/* V113 — compact footer, preserving all content except Quick links */
.site-footer{
padding-top:24px !important;
padding-bottom:6px !important;
}
.site-footer .footer-top{
display:grid !important;
grid-template-columns:minmax(220px,1.15fr) minmax(220px,1fr) minmax(220px,1fr) !important;
gap:34px !important;
align-items:start !important;
padding-top:0 !important;
padding-bottom:14px !important;
}
.site-footer .footer-brand,
.site-footer .footer-col{
margin:0 !important;
padding:0 !important;
}
.site-footer .footer-brand img{
margin-bottom:8px !important;
}
.site-footer .footer-col h4{
margin:0 0 8px !important;
}
.site-footer .footer-col a,
.site-footer .footer-col p{
margin-top:3px !important;
margin-bottom:3px !important;
line-height:1.3 !important;
}
.site-footer .footer-bottom{
margin-top:0 !important;
padding-top:8px !important;
padding-bottom:0 !important;
}
@media(max-width:700px){
.site-footer .footer-top{
grid-template-columns:1fr !important;
gap:18px !important;
padding-left:24px !important;
padding-right:24px !important;
}
}
/* V114 — local downloaded admin preview */
.local-backstage-preview{
display:block;
width:calc(100% - 36px);
height:calc(100vh - 112px);
margin:18px;
background:#fff;
border:1px solid #dfe4eb;
border-radius:8px;
box-shadow:0 5px 18px rgba(27,42,67,.08);
overflow:auto;
}
.local-public-page{
width:100%;
min-height:100%;
background:#fff;
}
.local-preview-help{
margin:30px;
padding:22px;
border:1px solid #e4e8ef;
border-radius:9px;
background:#fff;
color:#17233c;
font:14px/1.55 Arial,sans-serif;
}
/* V116.1 — editable hero image is the real hero background */
.island-media-hero{
background:#16283a !important;
}
.island-media-hero .island-hero-side{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-height:none !important;
z-index:0 !important;
display:block !important;
background:none !important;
overflow:hidden !important;
}
.island-media-hero .island-hero-side img,
#heroBridgeImage{
width:100% !important;
height:100% !important;
max-height:none !important;
object-fit:cover !important;
object-position:center center !important;
display:block !important;
}
.island-media-hero .island-media-hero-overlay{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:linear-gradient(90deg,rgba(8,25,43,.84) 0%,rgba(8,25,43,.62) 42%,rgba(8,25,43,.20) 72%,rgba(8,25,43,.06) 100%) !important;
pointer-events:none !important;
}
.island-media-hero .island-media-hero-content{
position:relative !important;
z-index:2 !important;
}
/* V116.1 — real phone rebuild for the lower half */
@media (max-width:649px){
.minyan-publication{
display:flex !important;
flex-direction:column !important;
gap:34px !important;
padding:58px 22px !important;
min-height:0 !important;
}
.minyan-publication-copy,
.minyan-cover-wrap{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.minyan-publication-copy{
text-align:center !important;
}
.minyan-publication-copy h2{
font-size:clamp(38px,11vw,52px) !important;
line-height:.98 !important;
}
.minyan-cover-paper{
width:min(82vw,330px) !important;
max-width:100% !important;
margin:0 auto !important;
}
.minyan-cover-paper img{
width:100% !important;
height:auto !important;
max-height:none !important;
object-fit:contain !important;
}
.poster-service{
padding:56px 18px !important;
overflow:hidden !important;
}
.poster-service .section-head{
width:100% !important;
max-width:100% !important;
margin-bottom:30px !important;
}
.poster-service .section-head h2{
font-size:clamp(31px,8.7vw,42px) !important;
line-height:1.05 !important;
}
.poster-service-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:22px !important;
width:100% !important;
max-width:100% !important;
}
.poster-service-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
margin:0 !important;
}
.poster-service-card > img,
.gilyonos-image img{
width:100% !important;
height:auto !important;
max-height:none !important;
object-fit:cover !important;
}
.poster-service-copy{
padding:20px !important;
}
.pricing{
padding:56px 18px !important;
overflow:hidden !important;
}
.pricing .section-head h2{
font-size:clamp(32px,9vw,43px) !important;
line-height:1.04 !important;
}
.rate-tabs{
display:flex !important;
width:100% !important;
gap:8px !important;
}
.rate-tab{
flex:1 1 0 !important;
min-width:0 !important;
padding:12px 8px !important;
font-size:14px !important;
}
.sheet-grid,
.sheet-grid.one{
display:grid !important;
grid-template-columns:1fr !important;
gap:18px !important;
width:100% !important;
}
.sheet-card,
.sheet-card img{
width:100% !important;
max-width:100% !important;
height:auto !important;
}
.whatsapp-groups-section{
padding:56px 18px !important;
overflow:hidden !important;
}
.whatsapp-groups-heading{
width:100% !important;
max-width:100% !important;
text-align:center !important;
}
.whatsapp-groups-heading h2{
font-size:clamp(38px,11vw,50px) !important;
}
.whatsapp-groups-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:16px !important;
width:100% !important;
max-width:100% !important;
}
.whatsapp-group-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
padding:24px 20px !important;
}
.whatsapp-join{
display:block !important;
width:100% !important;
max-width:100% !important;
text-align:center !important;
white-space:normal !important;
}
.site-footer{
padding:28px 20px 6px !important;
}
.site-footer .footer-top{
display:grid !important;
grid-template-columns:1fr !important;
gap:22px !important;
padding:0 !important;
}
.site-footer .footer-brand,
.site-footer .footer-col{
width:100% !important;
max-width:100% !important;
}
.site-footer .footer-bottom{
display:block !important;
width:100% !important;
padding:16px 0 4px !important;
text-align:left !important;
}
}
#pageBuilderPanel{font-family:Arial,sans-serif}
.builder-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.builder-toolbar button,.builder-list-btn,.builder-row button{border:1px solid #bbb;background:#fff;padding:8px 10px;border-radius:6px;cursor:pointer}
.builder-list-btn{display:block;width:100%;text-align:left;margin:5px 0}.builder-list-btn.active,.builder-row.active{outline:2px solid #169b62}
.builder-grid{display:grid;grid-template-columns:220px 1fr;gap:18px}.builder-card{border:1px solid #ddd;border-radius:10px;padding:14px;margin:12px 0;background:#fff}
.builder-row{display:flex;gap:5px;align-items:center;margin:6px 0}.builder-grow{flex:1;text-align:left}.builder-field{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;margin:9px 0}
.builder-field input[type=text],.builder-field input[type=number],.builder-field select,.builder-field textarea{width:100%;box-sizing:border-box;padding:8px;border:1px solid #bbb;border-radius:5px}
@media(max-width:800px){.builder-grid{grid-template-columns:1fr}.builder-field{grid-template-columns:1fr}}
/* V117 sidebar Page Builder */
.sidebar-builder-block .builder-toolbar{
display:flex !important;
flex-wrap:wrap !important;
gap:6px !important;
margin:8px 0 !important;
}
.sidebar-builder-block .builder-toolbar button,
.sidebar-builder-block .builder-list-btn,
.sidebar-builder-block .builder-row button{
font-size:12px !important;
padding:7px 8px !important;
}
.sidebar-builder-block .builder-field{
display:block !important;
margin:8px 0 !important;
}
.sidebar-builder-block .builder-field label{
display:block !important;
font-size:11px !important;
font-weight:700 !important;
margin-bottom:4px !important;
}
.sidebar-builder-block .builder-field input,
.sidebar-builder-block .builder-field textarea,
.sidebar-builder-block .builder-field select{
width:100% !important;
box-sizing:border-box !important;
font-size:12px !important;
padding:7px !important;
}
.sidebar-builder-block .builder-row{
display:flex !important;
gap:4px !important;
align-items:center !important;
margin:5px 0 !important;
}
.sidebar-builder-block .builder-grow{
flex:1 1 auto !important;
min-width:0 !important;
}
.sidebar-builder-block #builderPages,
.sidebar-builder-block #builderSections,
.sidebar-builder-block #builderElements{
max-height:180px !important;
overflow:auto !important;
}
.sidebar-builder-block #pageBuilderPanel{
max-height:58vh !important;
overflow:auto !important;
padding-right:4px !important;
}
/* Keep website preview dominant */
.admin-preview,
.preview-pane,
.website-preview,
.admin-main-preview{
min-width:0 !important;
width:auto !important;
flex:1 1 auto !important;
}
/* V119 — resizable admin editing panel */
:root{ --admin-sidebar-width: 340px; }
.admin-sidebar,
body.admin-page aside{
width:var(--admin-sidebar-width) !important;
flex:0 0 var(--admin-sidebar-width) !important;
max-width:min(650px, calc(100vw - 420px)) !important;
min-width:240px !important;
position:relative !important;
}
#adminSidebarResizeHandle{
position:absolute;
top:0;
right:-5px;
width:10px;
height:100%;
cursor:col-resize;
z-index:100000;
background:transparent;
touch-action:none;
}
#adminSidebarResizeHandle::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:4px;
width:2px;
background:rgba(0,0,0,.12);
}
#adminSidebarResizeHandle:hover::after,
body.admin-sidebar-resizing #adminSidebarResizeHandle::after{
width:4px;
left:3px;
background:rgba(0,0,0,.35);
}
body.admin-sidebar-resizing{
cursor:col-resize !important;
user-select:none !important;
}
@media(max-width:800px){
.admin-sidebar,
body.admin-page aside{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:0 0 auto !important;
}
#adminSidebarResizeHandle{display:none !important;}
}
/* V120 — working resizable Backstage sidebar */
:root{
--backstage-sidebar-width:360px;
}
.backstage-admin{
grid-template-columns:var(--backstage-sidebar-width) minmax(0,1fr) !important;
}
.backstage-sidepanel{
width:100% !important;
min-width:0 !important;
max-width:none !important;
flex:none !important;
position:relative !important;
}
#adminSidebarResizeHandle{
display:block !important;
position:absolute !important;
top:0 !important;
right:-6px !important;
width:12px !important;
height:100vh !important;
z-index:999999 !important;
cursor:col-resize !important;
touch-action:none !important;
background:transparent !important;
}
#adminSidebarResizeHandle::before{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:5px !important;
width:2px !important;
background:#c8cec5 !important;
}
#adminSidebarResizeHandle:hover::before,
body.admin-sidebar-resizing #adminSidebarResizeHandle::before{
left:4px !important;
width:4px !important;
background:#7b8379 !important;
}
body.admin-sidebar-resizing,
body.admin-sidebar-resizing *{
cursor:col-resize !important;
user-select:none !important;
}
@media(max-width:800px){
.backstage-admin{
grid-template-columns:1fr !important;
}
#adminSidebarResizeHandle{
display:none !important;
}
}
/* V121 admin sign-in */
.admin-login-gate{
position:fixed;inset:0;z-index:2147483647;background:#f4f5f2;
display:flex;align-items:center;justify-content:center;padding:24px;
font-family:Arial,sans-serif;
}
.admin-login-box{
width:min(390px,100%);background:#fff;border:1px solid #d9ddd6;border-radius:14px;
padding:28px;box-sizing:border-box;
}
.admin-login-box img{display:block;max-width:190px;max-height:70px;object-fit:contain;margin:0 auto 20px}
.admin-login-box h1{text-align:center;margin:0 0 22px;font-size:25px}
.admin-login-box label{display:block;font-weight:700;margin:14px 0 5px}
.admin-login-box input{display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid #aaa;border-radius:7px;font-size:16px;margin-top:6px}
.admin-login-box button{width:100%;padding:12px;margin-top:20px;border:0;border-radius:7px;background:#111;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
#adminLoginError{min-height:20px;margin-top:12px;text-align:center;color:#a40000;font-size:14px}
/* V123 — polished Admin Login Settings */
.admin-security-card{
margin-top:18px;
border:1px solid #dfe4dc;
border-radius:12px;
background:#fff;
overflow:hidden;
}
.admin-security-toggle{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:13px 14px;
border:0;
background:#f7f8f6;
color:#111;
font-weight:700;
cursor:pointer;
text-align:left;
}
.admin-security-toggle:hover{background:#f0f3ee}
.admin-security-arrow{transition:transform .2s ease}
.admin-security-toggle.open .admin-security-arrow{transform:rotate(180deg)}
#securitySettingsPanel{padding:14px}
.admin-security-stepper{
display:grid;
grid-template-columns:26px 1fr 26px 1fr 26px;
align-items:center;
gap:6px;
margin-bottom:16px;
}
.admin-security-stepper span:nth-child(odd){
width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#e7ebe4;color:#6a7168;font-size:12px;font-weight:700;
}
.admin-security-stepper span:nth-child(even){
height:2px;background:#e1e5df;
}
.admin-security-stepper span.active{
background:#15945f;color:#fff;
}
.admin-security-step h3{
margin:0 0 4px;
font-size:15px;
}
.admin-security-step p{
margin:0 0 12px;
font-size:12px;
color:#687067;
}
.admin-security-step label{
display:block;
margin:10px 0;
font-size:12px;
font-weight:700;
}
.admin-security-step input{
display:block;
width:100%;
box-sizing:border-box;
margin-top:5px;
padding:10px 11px;
border:1px solid #cfd5cc;
border-radius:8px;
font-size:14px;
background:#fff;
}
.admin-security-step input:focus{
outline:2px solid rgba(21,148,95,.18);
border-color:#15945f;
}
.admin-security-primary{
width:100%;
margin-top:8px;
padding:10px 12px;
border:0;
border-radius:8px;
background:#15945f;
color:#fff;
font-weight:700;
cursor:pointer;
}
.admin-security-primary:hover{filter:brightness(.96)}
.admin-security-status{
min-height:18px;
margin-top:10px;
font-size:12px;
font-weight:700;
}
.admin-security-status.error{color:#a40000}
.admin-security-status.ok{color:#176b3a}
/* V124 text-style controls */
.text-style-controls{
margin-top:12px;
padding:12px;
border:1px solid #dde2da;
border-radius:10px;
background:#f8f9f7;
}
.text-style-controls label{
display:block;
margin:9px 0;
font-size:12px;
font-weight:700;
}
.text-style-controls select,
.text-style-controls input[type="number"]{
width:100%;
box-sizing:border-box;
margin-top:5px;
padding:8px;
border:1px solid #cbd2c8;
border-radius:7px;
background:#fff;
}
.text-style-controls input[type="color"]{
display:block;
width:100%;
height:38px;
margin-top:5px;
padding:2px;
border:1px solid #cbd2c8;
border-radius:7px;
background:#fff;
}
/* ============================================================
V125 — Island Media Backstage redesign
Inspired by the clean dock + settings drawer structure used
by modern event/website builders such as Zoho Backstage.
============================================================ */
:root{
--bz-rail:76px;
--bz-drawer:360px;
--backstage-sidebar-width:calc(var(--bz-rail) + var(--bz-drawer));
--bz-navy:#15114b;
--bz-purple:#6d35d7;
--bz-purple-soft:#f2edff;
--bz-panel:#ffffff;
--bz-page:#f3f4f8;
--bz-line:#e7e8ee;
--bz-text:#202331;
--bz-muted:#7d8190;
--bz-green:#15945f;
}
.backstage-admin-body{
background:var(--bz-page)!important;
color:var(--bz-text)!important;
font-family:Inter,Arial,sans-serif!important;
}
.backstage-admin{
display:grid!important;
grid-template-columns:var(--backstage-sidebar-width) minmax(0,1fr)!important;
min-height:100vh!important;
background:var(--bz-page)!important;
}
/* Sidebar becomes a two-column Backstage-style dock */
.backstage-sidepanel{
display:grid!important;
grid-template-columns:var(--bz-rail) minmax(0,var(--bz-drawer))!important;
grid-template-rows:auto 1fr!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
height:100vh!important;
position:sticky!important;
top:0!important;
overflow:hidden!important;
background:var(--bz-panel)!important;
border-right:1px solid var(--bz-line)!important;
box-shadow:none!important;
}
.backstage-brand{
grid-column:1 / -1!important;
min-height:58px!important;
padding:8px 14px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
background:var(--bz-navy)!important;
color:white!important;
border:0!important;
}
.backstage-brand img{
width:36px!important;
height:36px!important;
border-radius:7px!important;
object-fit:cover!important;
background:#fff!important;
}
.backstage-brand strong{
display:block!important;
font:700 14px/1.2 Arial,sans-serif!important;
color:#fff!important;
}
.backstage-brand span{
display:block!important;
margin-top:2px!important;
font:400 10px/1.2 Arial,sans-serif!important;
color:rgba(255,255,255,.65)!important;
}
/* Left icon dock */
.backstage-nav{
grid-column:1!important;
grid-row:2!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:4px!important;
padding:10px 7px!important;
background:#fafafe!important;
border-right:1px solid var(--bz-line)!important;
border-bottom:0!important;
overflow-y:auto!important;
}
.backstage-nav-btn,
.backstage-view-site{
min-height:64px!important;
padding:7px 3px!important;
border:0!important;
border-radius:8px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
background:transparent!important;
color:#626777!important;
text-decoration:none!important;
font:500 10px/1.1 Arial,sans-serif!important;
text-align:center!important;
cursor:pointer!important;
box-shadow:none!important;
}
.backstage-nav-btn:hover,
.backstage-view-site:hover{
background:#f0eefb!important;
color:var(--bz-purple)!important;
}
.backstage-nav-btn.active{
background:var(--bz-purple-soft)!important;
color:var(--bz-purple)!important;
}
.bz-icon{
width:22px!important;
height:22px!important;
display:grid!important;
place-items:center!important;
}
.bz-icon svg{
width:21px!important;
height:21px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.bz-nav-label{
display:block!important;
max-width:64px!important;
}
/* Secondary drawer */
.backstage-panel-area{
grid-column:2!important;
grid-row:2!important;
padding:0!important;
overflow-y:auto!important;
background:#fff!important;
border:0!important;
}
.bz-drawer-head{
height:42px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
padding:0 14px!important;
border-bottom:1px solid var(--bz-line)!important;
position:sticky!important;
top:0!important;
background:#fff!important;
z-index:20!important;
}
.bz-drawer-kicker{
font:700 10px/1 Arial,sans-serif!important;
letter-spacing:.1em!important;
color:#8a8e9c!important;
}
#bzCollapseDrawer{
width:27px!important;
height:27px!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border:1px solid var(--bz-line)!important;
border-radius:6px!important;
background:#fff!important;
color:#666b79!important;
font-size:18px!important;
cursor:pointer!important;
}
/* Panel content */
.backstage-panel{
padding:0 16px 22px!important;
}
.backstage-panel-heading{
padding:18px 0 14px!important;
margin:0!important;
border-bottom:1px solid var(--bz-line)!important;
}
.backstage-panel-heading h2{
margin:0 0 5px!important;
font:700 18px/1.2 Arial,sans-serif!important;
color:var(--bz-text)!important;
}
.backstage-panel-heading p{
margin:0!important;
color:var(--bz-muted)!important;
font:400 12px/1.45 Arial,sans-serif!important;
}
/* Zoho-like segmented edit modes */
.editor-mode-row{
display:flex!important;
gap:0!important;
margin:14px 0!important;
padding:0!important;
border:1px solid var(--bz-line)!important;
border-radius:7px!important;
overflow:hidden!important;
background:#fff!important;
}
.editor-mode{
flex:1!important;
border:0!important;
border-right:1px solid var(--bz-line)!important;
border-radius:0!important;
background:#fff!important;
color:#777c8b!important;
font:600 11px Arial,sans-serif!important;
padding:9px 6px!important;
box-shadow:none!important;
}
.editor-mode:last-child{border-right:0!important}
.editor-mode.active{
background:var(--bz-purple-soft)!important;
color:var(--bz-purple)!important;
box-shadow:inset 0 -2px 0 var(--bz-purple)!important;
}
/* Setting groups */
.sidebar-editor-controls,
.backstage-tip,
.backstage-form-section,
.admin-security-card,
.sidebar-builder-block{
border:1px solid var(--bz-line)!important;
border-radius:8px!important;
background:#fff!important;
box-shadow:none!important;
}
.sidebar-editor-controls{
padding:13px!important;
margin:0 0 12px!important;
}
.sidebar-editor-controls h3{
margin:0 0 5px!important;
font:700 13px Arial,sans-serif!important;
color:var(--bz-text)!important;
}
.sidebar-editor-controls p,
.backstage-tip p{
color:var(--bz-muted)!important;
font:400 11px/1.45 Arial,sans-serif!important;
}
.text-style-controls{
border:0!important;
border-top:1px solid var(--bz-line)!important;
border-radius:0!important;
background:#fff!important;
padding:12px 0 0!important;
margin-top:12px!important;
}
.text-style-controls label,
.admin-security-step label,
.builder-field label,
.backstage-form-section label{
color:#555b69!important;
font:600 11px Arial,sans-serif!important;
}
.text-style-controls select,
.text-style-controls input,
.admin-security-step input,
.builder-field input,
.builder-field textarea,
.builder-field select,
.backstage-form-section input,
.backstage-form-section textarea,
.backstage-form-section select{
border:1px solid #d7d9e0!important;
border-radius:6px!important;
background:#fff!important;
color:var(--bz-text)!important;
box-shadow:none!important;
}
.text-style-controls select:focus,
.text-style-controls input:focus,
.admin-security-step input:focus,
.builder-field input:focus,
.builder-field textarea:focus,
.builder-field select:focus,
.backstage-form-section input:focus,
.backstage-form-section textarea:focus,
.backstage-form-section select:focus{
outline:2px solid rgba(109,53,215,.13)!important;
border-color:#9c7be6!important;
}
/* Main action buttons */
.sidebar-editor-controls button,
.backstage-form-section button,
.builder-toolbar button,
.admin-security-primary,
#saveBuilderChanges,
#publishBuilderChanges{
border:1px solid #d9dbe2!important;
border-radius:6px!important;
background:#fff!important;
color:#3e4351!important;
box-shadow:none!important;
font:600 11px Arial,sans-serif!important;
}
#applySidebarText,
#saveContentEdits,
#saveLayoutEdits,
#publishBuilderChanges,
.admin-security-primary{
background:var(--bz-purple)!important;
border-color:var(--bz-purple)!important;
color:#fff!important;
}
/* Publication panels */
.backstage-form-section{
padding:14px!important;
margin:12px 0!important;
}
.backstage-form-section h1{
font:700 17px/1.25 Arial,sans-serif!important;
}
.backstage-form-section .eyebrow{
color:var(--bz-purple)!important;
font:700 9px Arial,sans-serif!important;
letter-spacing:.11em!important;
}
/* Bottom tool modules */
.bz-tools-label{
margin:16px 0 7px!important;
color:#9397a5!important;
font:700 9px Arial,sans-serif!important;
letter-spacing:.12em!important;
}
.admin-security-card,
.sidebar-builder-block{
margin:0 0 9px!important;
overflow:hidden!important;
}
.bz-tool-toggle{
width:100%!important;
min-height:42px!important;
display:grid!important;
grid-template-columns:25px 1fr 20px!important;
align-items:center!important;
gap:8px!important;
padding:9px 11px!important;
border:0!important;
border-radius:0!important;
background:#fff!important;
color:#3e4350!important;
font:600 12px Arial,sans-serif!important;
text-align:left!important;
}
.bz-tool-toggle:hover{background:#faf9fe!important}
.bz-tool-icon{
width:24px!important;height:24px!important;border-radius:6px!important;
display:grid!important;place-items:center!important;
background:var(--bz-purple-soft)!important;color:var(--bz-purple)!important;
font-size:13px!important;
}
.bz-tool-chevron{
justify-self:end!important;
color:#979ba8!important;
font-size:17px!important;
}
#securitySettingsPanel,
#pageBuilderPanel{
border-top:1px solid var(--bz-line)!important;
padding:12px!important;
margin:0!important;
}
/* Preview side */
.backstage-preview-area{
min-width:0!important;
background:#e9ebf1!important;
}
.backstage-topbar{
height:58px!important;
padding:0 16px!important;
background:var(--bz-navy)!important;
color:white!important;
border:0!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
box-shadow:none!important;
}
.backstage-topbar strong{
color:#fff!important;
font:700 14px Arial,sans-serif!important;
}
.backstage-topbar span{
color:rgba(255,255,255,.62)!important;
font:400 10px Arial,sans-serif!important;
}
.backstage-topbar-actions button,
.backstage-topbar-actions a{
min-height:30px!important;
padding:7px 10px!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:6px!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font:600 10px Arial,sans-serif!important;
text-decoration:none!important;
}
.backstage-preview-toolbar{
height:40px!important;
padding:0 12px!important;
background:#fff!important;
border-bottom:1px solid var(--bz-line)!important;
color:#777c89!important;
font:600 10px Arial,sans-serif!important;
}
.backstage-preview-toolbar button{
border:1px solid var(--bz-line)!important;
border-radius:5px!important;
background:#fff!important;
color:#656a78!important;
font-size:10px!important;
}
#backstagePreview{
display:block!important;
width:calc(100% - 28px)!important;
height:calc(100vh - 118px)!important;
margin:14px!important;
border:1px solid #d7d9e0!important;
border-radius:7px!important;
background:#fff!important;
box-shadow:0 2px 8px rgba(37,40,55,.08)!important;
}
/* Resizing still works: resize the whole dock+drawer width */
#adminSidebarResizeHandle{
right:-5px!important;
width:10px!important;
z-index:1000000!important;
}
#adminSidebarResizeHandle::before{
background:#cfd1d8!important;
}
body.admin-sidebar-resizing #adminSidebarResizeHandle::before,
#adminSidebarResizeHandle:hover::before{
background:var(--bz-purple)!important;
}
/* Collapse only the settings drawer, leaving the icon rail */
body.bz-drawer-collapsed{
--backstage-sidebar-width:var(--bz-rail)!important;
}
body.bz-drawer-collapsed .backstage-sidepanel{
grid-template-columns:var(--bz-rail) 0!important;
}
body.bz-drawer-collapsed .backstage-brand>div,
body.bz-drawer-collapsed .backstage-panel-area{
display:none!important;
}
body.bz-drawer-collapsed .backstage-brand{
grid-column:1!important;
justify-content:center!important;
padding:8px!important;
}
body.bz-drawer-collapsed .backstage-brand img{
margin:0!important;
}
/* Phone */
@media(max-width:850px){
:root{
--bz-rail:62px;
--bz-drawer:280px;
--backstage-sidebar-width:342px;
}
.backstage-admin{
grid-template-columns:var(--backstage-sidebar-width) minmax(0,1fr)!important;
}
}
@media(max-width:650px){
.backstage-admin{display:block!important}
.backstage-sidepanel{
position:relative!important;
width:100%!important;
height:auto!important;
min-height:0!important;
grid-template-columns:62px minmax(0,1fr)!important;
}
#adminSidebarResizeHandle{display:none!important}
#backstagePreview{height:720px!important}
}
/* V126 — existing-page visual editor */
.v126-inspector,.v126-add-card{
margin:12px 0;border:1px solid var(--bz-line);border-radius:9px;background:#fff;overflow:hidden;
}
.v126-inspector-head{padding:12px 13px;border-bottom:1px solid var(--bz-line)}
.v126-kicker{display:block;margin-bottom:4px;font:700 9px Arial,sans-serif;letter-spacing:.12em;color:#9296a4}
.v126-inspector-head strong{font:700 13px Arial,sans-serif;color:var(--bz-text)}
.v126-empty{padding:18px 13px;color:var(--bz-muted);font:400 11px/1.5 Arial,sans-serif}
.v126-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--bz-line)}
.v126-tab{padding:9px 4px;border:0;border-right:1px solid var(--bz-line);background:#fff;font:600 10px Arial,sans-serif;color:#777c8a;cursor:pointer}
.v126-tab:last-child{border-right:0}.v126-tab.active{background:var(--bz-purple-soft);color:var(--bz-purple);box-shadow:inset 0 -2px var(--bz-purple)}
.v126-tabpane{padding:12px}.v126-tabpane label{display:block;margin:8px 0;font:600 10px Arial,sans-serif;color:#5d6270}
.v126-tabpane input,.v126-tabpane textarea,.v126-tabpane select{width:100%;box-sizing:border-box;margin-top:5px;padding:8px;border:1px solid #d7d9e0;border-radius:6px;background:#fff;font:400 12px Arial,sans-serif}
.v126-tabpane input[type=color]{height:35px;padding:2px}.v126-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v126-actions{display:grid;grid-template-columns:1fr auto;gap:7px;padding:0 12px 12px}
.v126-actions button{padding:9px 10px;border:1px solid #d9dbe2;border-radius:6px;background:#fff;font:600 10px Arial,sans-serif;cursor:pointer}
#v126Save{background:var(--bz-purple);border-color:var(--bz-purple);color:#fff}
.v126-add-card{padding:12px}.v126-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v126-add-grid button{padding:9px 6px;border:1px solid #dedfe5;border-radius:6px;background:#fff;color:#454a58;font:600 10px Arial,sans-serif;cursor:pointer}
.v126-add-grid button:hover{border-color:#a88be8;background:#faf8ff;color:var(--bz-purple)}
.v126-add-card p{margin:8px 0 0;color:var(--bz-muted);font:400 10px/1.4 Arial,sans-serif}
#backstagePreview{scroll-behavior:auto!important}
.v126-selected-live{outline:2px solid #6d35d7!important;outline-offset:2px!important;}
/* V127 — approved Backstage-style three-pane builder */
:root{--v127-right:310px;--bz-navy:#15151d;--bz-purple:#6c36d8;--bz-purple-soft:#2b2145}
.backstage-admin{grid-template-columns:var(--backstage-sidebar-width) minmax(0,1fr) var(--v127-right)!important}
.backstage-preview-area{grid-column:2!important}
.v127-properties{grid-column:3;position:fixed;right:0;top:0;width:var(--v127-right);height:100vh;box-sizing:border-box;background:#1b1c22;color:#e9e9ed;border-left:1px solid #303139;z-index:900;overflow:auto;font-family:Arial,sans-serif}
.v127-prop-top{height:58px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303139;font-size:11px}.v127-saved{color:#55b98c;font-size:10px}
.v127-prop-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #303139}.v127-prop-tabs button{padding:13px 4px;border:0;background:transparent;color:#b9bac2;font-size:11px;cursor:pointer}.v127-prop-tabs button.active{color:#fff;box-shadow:inset 0 -2px #7b42e5}
.v127-prop-body{padding:14px}.v127-prop-body label{display:block;margin:12px 0;color:#c7c8ce;font-size:10px}.v127-prop-body input,.v127-prop-body textarea,.v127-prop-body select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:9px;border:1px solid #373840;border-radius:5px;background:#202127;color:#f2f2f4;font-size:11px}.v127-prop-body input[type=color]{height:36px;padding:3px}.v127-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.v127-range-row{display:grid;grid-template-columns:1fr 58px;gap:8px;align-items:center}.v127-group-title{margin:14px 0 2px;color:#fff;font-size:11px;font-weight:700}.v127-apply{width:100%;margin-top:15px;padding:10px;border:0;border-radius:5px;background:#6c36d8;color:#fff;font-weight:700;cursor:pointer}
.backstage-sidepanel{background:#1d1e24!important;border-right:1px solid #303139!important}.backstage-brand{background:#15151d!important}.backstage-nav{background:#18191f!important;border-right:1px solid #303139!important}.backstage-nav-btn,.backstage-view-site{color:#b5b7c0!important}.backstage-nav-btn:hover,.backstage-view-site:hover{background:#24212f!important;color:#fff!important}.backstage-nav-btn.active{background:#39255e!important;color:#fff!important}
.backstage-panel-area{background:#202127!important;color:#e8e8ec!important}.bz-drawer-head{background:#202127!important;border-bottom:1px solid #303139!important}.bz-drawer-kicker{color:#e5e5e8!important}.backstage-panel{color:#e5e5e8!important}.backstage-panel-heading{border-bottom:0!important}.backstage-panel-heading h2{color:#fff!important}.backstage-panel-heading p{color:#999ba5!important}
.v127-page-select{padding:0 0 12px}.v127-page-select label{font-size:10px;color:#aaaeb8}.v127-page-select select{width:100%;margin-top:6px;padding:9px;border:1px solid #3a3b43;border-radius:5px;background:#25262d;color:#fff}
.v127-drawer-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #35363e;margin-bottom:12px}.v127-drawer-tabs button{padding:10px;border:0;background:transparent;color:#aaaeb8;font-size:11px}.v127-drawer-tabs button.active{color:#fff;box-shadow:inset 0 -2px #7440df}
.v127-add-elements>span{font-size:10px;color:#aaaeb8}.v127-add-elements>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 14px}.v127-add-elements button{min-height:58px;border:1px solid #383941;border-radius:5px;background:#25262d;color:#ddd;font-size:9px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.v127-add-elements b{font-size:18px;font-weight:400}
.editor-mode-row{background:#202127!important;border-color:#383941!important}.editor-mode{background:#25262d!important;border-color:#383941!important;color:#aaaeb8!important}.editor-mode.active{background:#39255e!important;color:#fff!important}
.v126-inspector{display:none!important}.v126-add-card{display:none!important}
.backstage-topbar{background:#15151d!important}.backstage-preview-area{background:#292a31!important}.backstage-preview-toolbar{background:#202127!important;border-color:#303139!important;color:#b8bac3!important}
#backstagePreview{width:calc(100% - 24px)!important;margin:12px!important;height:calc(100vh - 116px)!important;border-color:#383941!important;border-radius:3px!important}
@media(max-width:1050px){:root{--v127-right:270px}}
@media(max-width:850px){.v127-properties{display:none!important}.backstage-admin{grid-template-columns:var(--backstage-sidebar-width) minmax(0,1fr)!important}}
/* Corrected hero image: ONLY the main hero container */
.hero{
background-image:url("assets/verrazzano-hero-background.jpg?v=4") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
filter:none !important;
}
/* FINAL ACTUAL ISLAND HERO FIX — one image, full width */
.island-media-hero{
position:relative !important;
display:flex !important;
align-items:center !important;
min-height:760px !important;
padding:105px 8.5% !important;
overflow:hidden !important;
background-image:url("assets/verrazzano-hero-background.jpg?v=5") !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
filter:none !important;
}
.island-media-hero-content{
position:relative !important;
z-index:2 !important;
width:min(760px,65%) !important;
max-width:760px !important;
}
.island-media-hero-overlay{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background:linear-gradient(90deg,rgba(8,22,42,.68) 0%,rgba(8,22,42,.38) 48%,rgba(8,22,42,.10) 100%) !important;
filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.island-media-hero .hero-media,
.island-media-hero .island-hero-side,
#heroBridgeImage{
display:none !important;
}
@media(max-width:900px){
.island-media-hero{
min-height:720px !important;
padding:80px 7% !important;
background-position:center center !important;
}
.island-media-hero-content{
width:100% !important;
}
}
/* V129 — Targeted Email Blasts service card */
@media (min-width:1101px){
.poster-service-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
max-width:1540px !important;
}
}
.targeted-email-card > img{
width:100% !important;
height:auto !important;
object-fit:contain !important;
object-position:center !important;
background:#fff;
}