form {
display:inline
}
/* Ben Or theme stylesheet - ported VERBATIM from the approved static slice
build/css/style.css (stage 1,verified 2026-09-28). The slice is the visual
source of truth:change it first,then re-port. The only rewrite on port is
the webfont directory,../fonts/ -> ../Fonts/ (the SDK theme keeps fonts in
design/<theme>/Fonts/). Everything below the "SDK additions" marker is new.
url(../../../design/default/css/) rule:the SDK CSS bundler (system/plugins/css) copies this file into
cache/css/<theme>/cache__*.css and prefixes every RELATIVE url(../../../design/default/css/) with
../../../design/<theme>/ so it resolves from the cache directory. Keep url(../../../design/default/css/)s
relative (../Fonts/...,../files/...);
never absolutise them to /design/... */
/* Ben Or Architecture — static slice. Sections in page order. */
@font-face { font-family:Assistant;
font-weight:300;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Light.woff2) format(woff2)
}
@font-face { font-family:Assistant;
font-weight:400;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Regular.woff2) format(woff2)
}
@font-face { font-family:Assistant;
font-weight:600;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-SemiBold.woff2) format(woff2)
}
:root {
--c-gold:#a78041;
--c-ink:#080808;
--c-text:#000;
--c-muted:#6b6b6b;
--c-rule:#ccc;
--c-rule-2:#ddd;
--c-beige:#f8f6f3;
--c-beige-2:#f4f1ec;
--c-band:#f4f5f8;
--c-bg:#fff;
--f-sans:"Assistant",system-ui,sans-serif;
--fs-display:clamp(36px,3vw,58px);
--fs-h2:clamp(28px,2.4vw,44px);
--fs-h3:clamp(20px,1.5vw,24px);
--fs-body:clamp(17px,0.95vw,18px);
--fs-meta:15px;
--fs-chip:14px;
--space-section:clamp(36px,2.3vw,44px);
--gutter:24px;
--col-max:904px;
--sb:0px;
--header-h:72px
}
*,*::before,*::after { box-sizing:border-box
}
html { -webkit-text-size-adjust:100%;
scroll-behavior:smooth
}
body { margin:0;
background:var(--c-bg);
color:var(--c-text);
font:400 var(--fs-body)/1.6 var(--f-sans);
overflow-x:clip
}
img { max-width:100%;
height:auto;
display:block
}
a { color:inherit;
text-decoration:none
}
h1,h2,h3,h4,p { margin:0
}
ul { margin:0;
padding:0;
list-style:none
}
button,input,textarea { font:inherit;
color:inherit
}
.container { width:min(100% - 2 * var(--gutter),var(--col-max));
margin-inline:auto
}
.bleed { background:var(--bleed,transparent);
box-shadow:0 0 0 100vmax var(--bleed,transparent);
clip-path:inset(0 -100vmax)
}
svg[hidden] { display:none
}
.visually-hidden { position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto
} *,*::before,*::after { animation:none !important;
transition:none !important
} }
/* base type */
.skip-link { position:absolute;
inset-inline-start:8px;
top:-48px;
background:var(--c-ink);
color:#fff;
padding:8px 12px;
z-index:100
}
.skip-link:focus { top:8px
}
.display { font-size:var(--fs-display);
font-weight:300;
line-height:1.12;
letter-spacing:-0.01em
}
.h2 { font-size:var(--fs-h2);
font-weight:400;
line-height:1.15
}
.h3 { font-size:var(--fs-h3);
font-weight:600;
line-height:1.3
}
.meta { font-size:var(--fs-meta);
color:var(--c-muted)
}
.chip { display:inline-block;
font-size:var(--fs-chip);
background:var(--c-beige-2);
padding:4px 12px;
line-height:1.4
}
.u-gold { color:var(--c-gold)
}
.underline-gold { padding-block-end:14px;
position:relative
}
.underline-gold::after { content:"";
position:absolute;
inset-inline-start:0;
bottom:0;
width:120px;
height:3px;
background:var(--c-gold)
}
.section { padding-block:var(--space-section)
}
/* header */
.site-header { position:sticky;
top:0;
z-index:50;
background:var(--c-bg);
transition:box-shadow .2s
}
.site-header.is-scrolled { box-shadow:0 4px 20px rgb(0,0,0,.06)
}
.site-header__row { display:flex;
align-items:center;
justify-content:space-between;
min-height:var(--header-h);
gap:16px
}
.site-header__logo img { width:140px;
height:auto
}
.site-nav { display:none
}
.site-nav__list { display:flex;
gap:clamp(16px,2vw,32px)
}
.site-nav__list a { display:inline-block;
padding:6px 0;
font-size:17px;
position:relative
}
.site-nav__list a::after { content:"";
position:absolute;
inset-inline:0;
bottom:0;
height:2px;
background:var(--c-gold);
transform:scaleX(0);
transition:transform .2s
}
.site-nav__list a:hover::after,.site-nav__list a[aria-current]::after { transform:scaleX(1)
}
.site-header__burger { width:44px;
height:44px;
border:0;
background:none;
display:grid;
place-content:center;
gap:6px;
cursor:pointer
}
.site-header__burger span { display:block;
width:26px;
height:2px;
background:var(--c-ink)
}
@media (min-width:1024px) {
.site-nav { display:block;
margin-inline-end:auto
}
/* source order nav → logo → burger already places the menu at inline-start (right) and logo + burger at the left in RTL,per PDF */
.site-header__logo img { width:200px
}
}
/* drawer */
.drawer { position:fixed;
inset:0;
z-index:60
}
.drawer[hidden] { display:none
}
.drawer__backdrop { position:absolute;
inset:0;
background:rgb(0,0,0,.45)
}
.drawer__panel { position:absolute;
inset-block:0;
inset-inline-end:0;
width:min(320px,85vw);
background:var(--c-bg);
padding:72px 28px 28px;
overflow-y:auto;
animation:drawer-in .3s
}
@keyframes drawer-in { from { transform:translateX(-100%)
} }
.drawer__close { position:absolute;
top:14px;
inset-inline-end:14px;
width:44px;
height:44px;
border:0;
background:none;
font-size:32px;
line-height:1;
cursor:pointer
}
.drawer__list a { display:block;
padding:12px 0;
font-size:20px;
border-bottom:1px solid var(--c-rule-2)
}
.drawer__contact { margin-block-start:28px;
display:grid;
gap:10px;
color:var(--c-gold)
}
body.has-drawer-open { overflow:hidden;
padding-inline-end:var(--sb)
}
/* footer */
.site-footer { margin-block-start:var(--space-section);
padding-block:48px 0;
font-size:17px
}
.site-footer__grid { display:grid;
gap:32px
}
.site-footer__brand img { width:180px;
margin-block-end:16px
}
.site-footer__brand p { max-width:36ch;
line-height:1.5
}
.site-footer h3 { font-size:18px;
font-weight:600;
margin-block-end:20px
}
.site-footer__col li { padding-block:6px
}
.site-footer__social { display:flex;
gap:16px;
margin-block-start:16px;
direction:ltr;
justify-content:flex-end
}
.site-footer__social svg { fill:var(--c-gold)
}
.site-footer__bottom { text-align:center;
font-size:14px;
color:var(--c-muted);
padding-block:20px;
margin-block-start:40px;
border-top:1px solid var(--c-rule-2)
}
@media (min-width:768px) { .site-footer__grid { grid-template-columns:1.4fr 1fr 1.2fr 1fr
} }
/* wa-btn */
.wa-btn { position:fixed;
left:20px;
bottom:20px;
width:56px;
height:56px;
border-radius:50%;
background:var(--c-gold);
display:grid;
place-content:center;
z-index:40;
box-shadow:0 10px 24px -8px rgb(0,0,0,.35)
}
.wa-btn svg { fill:#fff
}
/* hero */
.hero__text { display:grid;
gap:20px;
padding-block:clamp(24px,4.65vw,89px) clamp(24px,2vw,41px)
}
.hero__sub { font-size:clamp(17px,1.1vw,20px);
line-height:1.5
}
.hero__media { position:relative;
aspect-ratio:4 / 3;
overflow:hidden;
margin-block-end:12px
}
.hero__img { position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.2s
}
.hero__img:first-child { opacity:1
}
.hero__img.is-active { opacity:1
}
@media (min-width:1024px) {
.hero__text { grid-template-columns:1fr 1fr;
align-items:end
}
.hero__sub { padding-block-end:8px
}
.hero__media { aspect-ratio:1920 / 703
}
}
/* story */
.story__grid { display:grid;
gap:28px
}
.story__media img { aspect-ratio:3 / 2;
object-fit:cover;
width:100%
}
.story__text { display:grid;
gap:20px;
justify-items:start
}
.link-more { position:relative;
padding-block-end:2px;
border-bottom:1px solid currentcolor
}
.js [data-reveal] { opacity:0;
transform:translateY(16px);
transition:opacity .6s,transform .6s
}
.js [data-reveal].is-visible { opacity:1;
transform:none
}
@media (min-width:1024px) {
.story__grid { grid-template-columns:1fr 1.6fr;
align-items:center
}
}
@media (prefers-reduced-motion:reduce) { .js [data-reveal] { opacity:1;
transform:none
} }
/* section-head,btn,cards */
.section-head { display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
margin-block-end:28px
}
.section-foot { display:flex;
justify-content:center;
margin-block-start:36px
}
.btn { display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:10px 28px;
font-size:16px;
font-weight:600;
line-height:1;
border:1px solid var(--c-gold)
}
.btn--gold { background:var(--c-gold);
color:#fff
}
.btn--gold:hover { background:var(--c-ink);
border-color:var(--c-ink)
}
.cards { display:grid;
gap:12px 24px
}
@media (min-width:768px) { .cards--2 { grid-template-columns:1fr 1fr
} .cards--3 { grid-template-columns:repeat(3,1fr)
} }
/* project-card */
.project-card img { width:100%;
aspect-ratio:8 / 5;
object-fit:cover;
transition:transform .35s
}
.project-card a:hover img { transform:scale(1.03)
}
.project-card a { display:block;
overflow:hidden
}
.project-card__body { display:grid;
gap:8px;
padding-block-start:12px
}
.project-card__title { font-size:17px;
font-weight:600;
text-decoration:underline;
text-underline-offset:6px;
text-decoration-thickness:1px
}
.project-card__meta { display:grid;
gap:2px;
font-size:14px
}
.project-card__meta span { display:block
}
@media (min-width:768px) {
.project-card--home .project-card__body { grid-template-columns:1fr auto;
align-items:start
}
.project-card--home .project-card__title { margin-inline-end:12px
}
}
/* article-card */
.article-card img { width:100%;
aspect-ratio:1.45;
object-fit:cover
}
.article-card__cat { margin-block:12px 6px;
padding-block-end:6px;
border-bottom:1px solid var(--c-rule-2);
font-size:14px
}
.article-card__title { font-size:17px;
font-weight:600;
line-height:1.4
}
.article-card__author { margin-block-start:10px;
font-size:14px
}
/* page-banner + breadcrumbs */
.page-banner { position:relative;
min-height:clamp(220px,19vw,365px);
display:grid;
align-items:center;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
color:#fff;
isolation:isolate
}
.page-banner::before { content:"";
position:absolute;
inset:0;
background:rgb(0,0,0,.3);
z-index:-1
}
.page-banner__title { font-size:clamp(32px,3.4vw,64px);
font-weight:300;
line-height:1.1
}
.breadcrumbs { border-bottom:1px solid var(--c-rule-2);
font-size:15px
}
.breadcrumbs ol { display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding-block:14px;
padding-inline:0;
list-style:none
}
.breadcrumbs li + li::before { content:"/";
margin-inline-end:8px;
color:var(--c-muted)
}
.breadcrumbs [aria-current] { color:var(--c-gold)
}
/* services */
.services__grid { display:grid;
gap:36px
}
.services__intro { display:grid;
gap:16px;
justify-items:start;
align-content:start
}
.services__list { display:grid;
gap:32px
}
.service__head { display:flex;
align-items:center;
gap:12px;
margin-block-end:10px
}
.service__head svg { fill:var(--c-ink);
flex:none
}
.service p { font-size:17px;
line-height:1.6;
color:var(--c-muted);
max-width:30ch
}
@media (min-width:768px) { .services__list { grid-template-columns:1fr 1fr
} }
@media (min-width:1024px) { .services__grid { grid-template-columns:1fr 1.9fr
} }
/* contact + form */
.contact__grid { display:grid;
gap:36px
}
.contact__intro { display:grid;
gap:16px;
align-content:start
}
.contact__form { display:grid;
gap:12px
}
.field { position:relative;
display:grid
}
.field input,.field textarea { width:100%;
border:0;
border-block-end:1px solid var(--c-rule);
background:none;
padding-block:16px 8px;
padding-inline:0;
font-size:17px;
resize:vertical
}
.field input:focus,.field textarea:focus { outline:none;
border-block-end:2px solid var(--c-gold)
}
.field label { position:absolute;
inset-inline-start:0;
top:16px;
font-size:17px;
color:var(--c-muted);
pointer-events:none;
transition:top .15s,font-size .15s,color .15s
}
.field input:focus ~ label,.field textarea:focus ~ label,.field input:not(:placeholder-shown) ~ label,.field textarea:not(:placeholder-shown) ~ label { top:-6px;
font-size:14px;
color:var(--c-gold)
}
.contact__submit { width:100%
}
.contact { padding-block-end:calc(var(--space-section) + 64px)
}
@media (min-width:1024px) { .contact__grid { grid-template-columns:1fr 1fr
} .contact { padding-block-end:var(--space-section)
} }
/* projects list */
.projects__intro { display:grid;
gap:24px;
margin-block-end:102px
}
.projects__intro p { max-width:45ch;
line-height:1.7
}
@media (min-width:1024px) { .projects__intro { grid-template-columns:1fr 1.2fr;
align-items:start;
column-gap:64px
} }
.project-card--list img { aspect-ratio:4 / 3
}
.project-card--list .project-card__cat { margin-block:12px 6px;
padding-block-end:6px;
border-bottom:1px solid var(--c-rule-2);
font-size:14px
}
.project-card--list .project-card__title { text-decoration:none;
font-weight:600;
line-height:1.4
}
.project-card--list .project-card__name { margin-block-start:10px;
font-size:14px
}
/* project overview */
.overview__grid { display:grid;
gap:32px;
margin-block-end:40px
}
.overview__text { display:grid;
gap:16px;
align-content:start
}
.id-table { width:100%;
border-collapse:collapse;
font-size:16px;
align-self:start
}
.id-table th,.id-table td { padding:9px 14px;
border:1px solid var(--c-rule-2);
text-align:start
}
.id-table th { font-weight:600;
width:44%
}
.id-table tr:nth-child(even) { background:var(--c-beige)
}
@media (min-width:1024px) { .overview__grid { grid-template-columns:393px 300px;
gap:100px
} }
/* gallery */
.gallery { display:grid;
gap:24px
}
.gallery img { width:100%;
aspect-ratio:3 / 2;
object-fit:cover
}
@media (min-width:768px) { .gallery { grid-template-columns:1fr 1fr
} }
/* band */
.band { margin-block-start:var(--space-section)
}
.band .section-head { align-items:flex-start
}
.project-card--band .project-card__title { text-decoration:none;
font-weight:400;
margin-block:12px 4px
}
.project-card--band .project-card__more { font-size:15px
}
/* article */
.article__grid { display:grid;
gap:40px
}
.article__body { display:grid;
gap:18px;
max-width:70ch
}
.article__body img { margin-block:8px 16px
}
.article__body h2 { margin-block-start:20px
}
.article__list { display:grid;
gap:6px;
padding-inline-start:20px;
list-style:disc
}
.article__tip { border-inline-start:3px solid var(--c-gold);
padding:12px 16px;
background:var(--c-beige)
}
.article__aside { align-self:start
}
.article__aside h2 { margin-block-end:16px
}
.article__others { gap:28px
}
.articles-list { padding-block-start:calc(var(--space-section) + 36px)
}
.article__body h3 { font-size:17px;
font-weight:600;
margin-block-start:8px
}
@media (min-width:1024px) { .article__grid { grid-template-columns:2fr 1fr;
gap:64px
} .article__aside { position:sticky;
top:calc(var(--header-h) + 24px)
} }
/* story--about */
.story--about .story__media img { aspect-ratio:3 / 4
}
.story--about .story__text { gap:14px
}
.story--about .story__text h3 { margin-block-start:12px
}
.story__signature { justify-self:end;
margin-block-start:8px
}
@media (min-width:1024px) { .story--about .story__grid { grid-template-columns:1fr 1.55fr;
gap:48px;
align-items:start
} }
@media (min-width:1024px) { .story--about .story__media { position:sticky;
top:calc(var(--header-h) + 24px)
} }
/* process */
.process__track { display:grid;
grid-auto-flow:column;
grid-auto-columns:86%;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
padding-block-end:8px
}
.process__track::-webkit-scrollbar { display:none
}
.process__card { scroll-snap-align:start;
border:1px solid var(--c-ink);
padding:24px;
display:grid;
gap:40px;
align-content:space-between;
min-height:260px
}
.process__num { font-size:32px;
font-weight:300
}
.process__card p { font-size:17px;
line-height:1.6;
color:var(--c-muted)
}
.process__dots { display:flex;
justify-content:center;
gap:8px;
margin-block-start:24px
}
.process__dots button { width:44px;
height:24px;
border:0;
background:none;
cursor:pointer;
padding:10px 8px;
display:grid
}
.process__dots button::before { content:"";
display:block;
height:4px;
background:var(--c-rule-2)
}
.process__dots button[aria-current="true"]::before { background:var(--c-ink)
}
@media (min-width:768px) { .process__track { grid-auto-columns:calc(50% - 8px)
} }
@media (min-width:1024px) { .process__track { grid-auto-columns:calc((100% - 32px) / 3)
} .process__dots { display:none
} }
/* final fix wave */
body.has-drawer-open .site-header { padding-inline-end:var(--sb)
}
/* ---- SDK additions ---- */
/* PEOPLE credit (delivery-baseline signature). Replaces the slice's
.site-footer__bottom "Design & Development by People" strip and sits in the
same place inside <footer>,so it inherits the beige bleed;
the rules below
are .site-footer__bottom + .container verbatim,plus the gold link. */
.site-credit { width:min(100% - 2 * var(--gutter),var(--col-max));
margin-inline:auto;
text-align:center;
font-size:14px;
color:var(--c-muted);
padding-block:20px;
margin-block-start:40px;
border-top:1px solid var(--c-rule-2)
}
.site-credit a { color:var(--c-gold)
}
/* Admin state. When an operator is connected the SDK adds body.sys_connected and
system/plugins/admin/content/parts/body.php injects only positioned elements
(the .sys_admin_button / .sys_show_admin_button anchors and the #aifr_full
iframe overlay,styled fixed by admin.panel.css inside its own document);
nothing enters the normal flow above the page,and nothing in box 15.1 styles
.sys_connected / .tutorial_body. So .site-header keeps position:sticky and
top:0 unchanged. No rule needed;
documented here so nobody re-checks. */
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
/* ============================================================
MagmaSDK 15.1 · admin design tokens — CANONICAL,GLOBAL HOME.
This file is concatenated into every admin CSS bundle by the
per-plugin css.css loop in css/content/parts/header.php,so the
:root tokens below are in scope for every admin document:the
admin panel (admin.panel.css) AND the on-page editor context
(ifs/oper.css,wysiwyg connected.css) AND the plugin maker.
Single source of truth — change a value here and every admin
surface that consumes var(--mg-*) moves with it.
Neutral gray ramp is faintly cool so it harmonizes with the
indigo accent without visibly bluing any gray (ad-hoc grays
across the admin were snapped to the nearest step). Accent
chosen on WCAG grounds:#4f46e5 = 6.29:1 on white (passes AA);
the legacy cyan hue would fail AA. See magmasdk-15-1-box memory.
============================================================ */
:root {
--mg-accent:#4f46e5;
/* house UI accent (Indigo) */
--mg-accent-weak:#ecebfb;
/* faint accent fill — active tabs/buttons on white */
--mg-accent-strong:#3b34c4;
/* darker accent — filled-button hover/pressed */
--mg-gray-50:#f7f8fa;
--mg-gray-100:#ececef;
--mg-gray-200:#e2e2e6;
--mg-gray-300:#d5d5da;
--mg-gray-400:#b6b6bb;
--mg-gray-500:#8b8b90;
--mg-gray-600:#6f6f75;
--mg-gray-700:#47474c;
--mg-gray-800:#303034;
--mg-gray-900:#1f1f23;
/* radius scale (consolidates the scattered 4/5/7/10px radii) */
--mg-radius-sm:4px;
--mg-radius:8px;
--mg-radius-lg:12px;
--mg-radius-pill:999px;
/* elevation — flat & modern;
replaces the stacked skeuomorphic
inset "bevel" shadows the admin chrome used to fake 3D depth */
--mg-shadow-sm:0 1px 2px rgba(17,17,26,.06);
--mg-shadow:0 2px 6px rgba(17,17,26,.10);
--mg-shadow-md:0 4px 12px rgba(17,17,26,.12);
--mg-shadow-lg:0 10px 30px rgba(17,17,26,.16);
/* spacing scale (defined for the system;
consumed incrementally) */
--mg-space-1:4px;
--mg-space-2:8px;
--mg-space-3:12px;
--mg-space-4:16px;
--mg-space-6:24px
}
/* 15.1 · visible keyboard focus (WCAG 2.4.7). Uses the house accent.
!important defeats the legacy `outline:0` scattered through the admin,
so keyboard users can always see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline:2px solid var(--mg-accent) !important;
outline-offset:2px !important
}
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}