/* ============================================================ JÂN PLAZA — BASE ------------------------------------------------------------ Reset, typography utilities, the three motifs and the layout primitives. Extracted verbatim from the design system (sections 4–6). Do not edit by hand — re-extract. ============================================================ */ /* ============================================================ 4. RESET & BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)} body{ font-family:var(--font-body); font-weight:var(--fw-regular); font-size:var(--fs-md); line-height:var(--lh-body); color:var(--c-text); background:var(--c-bg); -webkit-font-smoothing:antialiased; transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } img,svg{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:var(--lh-heading);font-weight:var(--w-heading)} :focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-xs)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* Typography utilities */ .t-d1{font-family:var(--font-display);font-size:var(--fs-d1);font-weight:var(--w-display);line-height:var(--lh-heading)} .t-d2{font-family:var(--font-display);font-size:var(--fs-d2);font-weight:var(--w-display);line-height:var(--lh-heading)} .t-h1{font-size:var(--fs-h1)} .t-h2{font-size:var(--fs-h2)} .t-h3{font-size:var(--fs-h3)} .t-h4{font-size:var(--fs-h4)} .t-lg{font-size:var(--fs-lg)} .t-sm{font-size:var(--fs-sm)} .t-xs{font-size:var(--fs-xs)} .t-muted{color:var(--c-text-muted)} .t-sec{color:var(--c-text-secondary)} .t-brand{color:var(--c-text-brand)} .overline{ font-size:var(--fs-xs);font-weight:var(--w-strong); letter-spacing:var(--ls-overline);color:var(--c-text-muted); } html[data-lang="en"] .overline{text-transform:uppercase} /* Script-conditional content */ html[data-lang="fa"] .only-en{display:none!important} html[data-lang="en"] .only-fa{display:none!important} /* ============================================================ 5. MOTIFS — three forms, taken from the building itself. .arch طاق container — the lover's mind .embrace نیم‌طاق جفت welcome — the beloved's presence .xmark شمسه چلیپا marker — the point becoming a plane Rule: one form per element, never two. ============================================================ */ .arch{border-radius:var(--arch);overflow:hidden} .arch-full{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%;overflow:hidden} /* The mihrab: the mirrored arch on the building's central axis. Reserved for the single most important element on a page — never repeated. */ .arch-mihrab{ border-radius:50% 50% 0 0 / 42% 42% 0 0; background:var(--c-brand);position:relative;overflow:hidden; } .arch-mihrab::after{ content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 55%); } /* Twin half-arches reading as an embrace. Wraps content rather than containing an image — reception halls and waiting rooms in the building. */ .embrace{position:relative;padding:var(--sp-7) var(--sp-6);isolation:isolate} .embrace::before,.embrace::after{ content:"";position:absolute;inset-block:0;width:min(22%,140px);z-index:-1; background:var(--c-brand-subtle); } /* Each half curves toward the other, the way two arms close — the rounded corner is on the INNER edge, not the outer one. */ .embrace::before{inset-inline-start:0;border-radius:0 100% 0 0 / 0 78% 0 0} .embrace::after{inset-inline-end:0;border-radius:100% 0 0 0 / 78% 0 0 0} .xmark{width:16px;height:16px;flex:none;fill:currentColor} .xmark-8{width:8px;height:8px} .xmark-12{width:12px;height:12px} .xmark-24{width:24px;height:24px} .xmark-32{width:32px;height:32px} /* Square Kufic (کوفی بنایی) — the script carved into the building's walls. Built on the same square grid as the Shamseh Chalipa, which is why the two sit together without competing. */ .kufic{ font-family:ui-monospace,'Courier New',monospace; letter-spacing:.34em;line-height:2.4;text-transform:uppercase; font-size:var(--fs-xs);color:var(--c-text-brand); } html[dir="rtl"] .kufic{letter-spacing:0;font-family:var(--font-display)} /* Dividers */ .divider{height:1px;background:var(--c-border);border:0} .divider-stepped{ display:flex;align-items:center;gap:var(--sp-4); color:var(--c-border-strong);margin-block:var(--sp-6); } .divider-stepped::before,.divider-stepped::after{ content:"";flex:1;height:1px;background:var(--c-border); } /* 4%-opacity Shamseh Chalipa pattern */ .pattern-stepped{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 5 5'%3E%3Cpath fill='%230F2A12' fill-opacity='.5' fill-rule='evenodd' d='M2 0H3V1H4V2H5V3H4V4H3V5H2V4H1V3H0V2H1V1H2Z M2 2H3V3H2Z'/%3E%3C/svg%3E"); background-size:40px 40px;opacity:.04; } /* ============================================================ 6. LAYOUT ============================================================ */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)} .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center} .grid{display:grid;gap:var(--sp-5)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .g-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .g-auto-lg{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} @media (max-width:1024px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g-4,.g-3,.g-2{grid-template-columns:1fr}}