:root {
--brand: #056e37;
--ink: #0c1411;
--ink-2: #141f1b;
--ink-3: #1d2a25;
--gold: #c9a24b;
--gold-2: #e2c887;
--gold-soft: rgba(201, 162, 75, 0.14);
--ivory: #f7f4ec;
--sand: #ede6d6;
--paper: #ffffff;
--text: #1b2420;
--muted: #5d6a64;
--line: rgba(12, 20, 17, 0.12);
--line-light: rgba(247, 244, 236, 0.14);
--radius: 18px;
--radius-lg: 28px;
--container: 1200px;
--gutter: clamp(18px, 4vw, 32px);
--font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--font-head: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--header-h: 84px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 12px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.8;
color: var(--text);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.lang-en body,
body.lang-en {
line-height: 1.7;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s var(--ease);
}
h1,
h2,
h3,
h4 {
margin: 0;
font-family: var(--font-head);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: inherit;
}
p {
margin: 0 0 1em;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 6px;
}
::selection {
background: var(--gold);
color: var(--ink);
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link {
position: absolute;
inset-inline-start: 12px;
top: -60px;
z-index: 100;
padding: 10px 18px;
background: var(--gold);
color: var(--ink);
border-radius: 10px;
font-weight: 600;
}
.skip-link:focus {
top: 12px;
}
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: calc(860px + var(--gutter) * 2);
}
.icon {
width: 1.25em;
height: 1.25em;
flex: none;
}
[dir="rtl"] .icon--flip {
transform: scaleX(-1);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 52px;
padding: 0 26px;
border: 1.5px solid transparent;
border-radius: 999px;
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn--gold {
background: var(--gold);
color: var(--ink);
}
.btn--gold:hover {
background: var(--gold-2);
}
.btn--ghost {
border-color: var(--line-light);
color: var(--ivory);
}
.btn--ghost:hover {
border-color: var(--gold);
color: var(--gold-2);
}
.btn--outline {
border-color: var(--line);
color: var(--ink);
}
.btn--outline:hover {
border-color: var(--ink);
background: var(--ink);
color: var(--ivory);
}
.btn--sm {
min-height: 42px;
padding: 0 18px;
font-size: 14px;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-head);
font-size: 14px;
font-weight: 500;
color: var(--brand);
} .eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
font-family: var(--font-head);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
}
.eyebrow::before {
content: "";
width: 34px;
height: 1.5px;
background: var(--gold);
}
.eyebrow--light {
color: var(--gold-2);
}
.section-head {
max-width: 680px;
margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-head--center .eyebrow {
justify-content: center;
}
.section-head-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head-row .section-head {
margin-bottom: 0;
}
.section-title {
font-size: clamp(30px, 4.2vw, 48px);
font-weight: 600;
color: var(--ink);
}
.section-title--light,
.section--ink .section-title {
color: var(--ivory);
}
.section-lead {
margin: 18px 0 0;
font-size: 18px;
color: var(--muted);
}
.section-lead--light,
.section--ink .section-lead {
color: rgba(247, 244, 236, 0.72);
} .site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(247, 244, 236, 0.92);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid var(--line);
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.site-header--over {
position: fixed;
inset-inline: 0;
background: transparent;
border-color: transparent;
color: var(--ivory);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header--over.is-scrolled,
.site-header.is-scrolled {
background: rgba(12, 20, 17, 0.94);
border-color: var(--line-light);
color: var(--ivory);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.admin-bar .site-header {
top: 32px;
}
.site-header__inner {
display: flex;
align-items: center;
gap: 28px;
height: var(--header-h);
}
.brand {
display: inline-flex;
color: var(--brand);
transition: color 0.3s var(--ease);
}
.brand svg {
width: 168px;
}
.site-header--over .brand,
.site-header.is-scrolled .brand,
.brand--light {
color: var(--ivory);
}
.main-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.main-nav__list {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav__list > li {
position: relative;
}
.main-nav__list a {
display: block;
padding: 10px 16px;
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
border-radius: 999px;
opacity: 0.86;
}
.main-nav__list a:hover,
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a {
opacity: 1;
color: var(--gold);
}
.main-nav__list .sub-menu {
position: absolute;
top: 100%;
inset-inline-start: 0;
min-width: 220px;
margin: 0;
padding: 10px;
list-style: none;
background: var(--ink);
color: var(--ivory);
border: 1px solid var(--line-light);
border-radius: var(--radius);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.2s var(--ease);
}
.main-nav__list li:hover > .sub-menu,
.main-nav__list li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.main-nav__extra {
display: none;
}
.site-header__actions {
display: flex;
align-items: center;
gap: 12px;
}
.lang-switch {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border: 1.5px solid currentColor;
border-radius: 50%;
font-family: var(--font-head);
font-size: 14px;
font-weight: 600;
opacity: 0.8;
}
.lang-switch:hover {
opacity: 1;
color: var(--gold);
}
.nav-toggle {
display: none;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
cursor: pointer;
}
.nav-toggle .icon {
margin: auto;
width: 22px;
height: 22px;
}
.nav-toggle__close {
display: none;
}
.nav-open .nav-toggle__open {
display: none;
}
.nav-open .nav-toggle__close {
display: block;
} .hero {
position: relative;
overflow: hidden;
padding: calc(var(--header-h) + clamp(40px, 7vw, 90px)) 0 clamp(64px, 8vw, 110px);
background: var(--ink);
color: var(--ivory);
}
.hero__shapes span,
.page-hero__shapes span {
position: absolute;
display: block;
border-radius: 50%;
pointer-events: none;
}
.hero__shapes span:nth-child(1) {
width: 620px;
height: 620px;
inset-inline-end: -180px;
top: -220px;
border: 1px solid rgba(201, 162, 75, 0.22);
}
.hero__shapes span:nth-child(2) {
width: 380px;
height: 380px;
inset-inline-start: -140px;
bottom: -200px;
background: var(--brand);
opacity: 0.35;
}
.hero__shapes span:nth-child(3) {
width: 10px;
height: 10px;
inset-inline-start: 46%;
top: 22%;
background: var(--gold);
}
.hero__grid {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: clamp(40px, 6vw, 80px);
}
.hero__slide[hidden] {
display: none;
}
.hero__slide.is-active {
animation: rise 0.8s var(--ease) both;
}
.hero__title {
margin: 0 0 22px;
font-family: var(--font-head);
font-size: clamp(36px, 5.6vw, 68px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ivory);
}
.hero__text {
max-width: 560px;
font-size: 18px;
color: rgba(247, 244, 236, 0.74);
}
.hero__text p:last-child {
margin-bottom: 0;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.hero__dots {
display: flex;
gap: 10px;
margin-top: 44px;
}
.hero__dot {
width: 34px;
height: 4px;
padding: 0;
border: 0;
border-radius: 4px;
background: var(--line-light);
cursor: pointer;
transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.hero__dot.is-active {
width: 56px;
background: var(--gold);
}
.hero__visual {
position: relative;
}
.hero__arch {
position: relative;
aspect-ratio: 4 / 5;
max-width: 460px;
margin-inline-start: auto;
overflow: hidden;
border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
background: var(--ink-3);
outline: 1px solid rgba(201, 162, 75, 0.4);
outline-offset: 12px;
}
.hero__arch img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__badges {
position: absolute;
inset-inline-start: 0;
bottom: 8%;
display: grid;
gap: 12px;
}
.stat-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-radius: var(--radius);
background: var(--gold);
color: var(--ink);
}
.stat-badge strong {
font-family: var(--font-head);
font-size: 30px;
font-weight: 700;
line-height: 1;
}
.stat-badge span {
max-width: 110px;
font-size: 14px;
line-height: 1.4;
}
.stat-badge--dark {
background: var(--ivory);
} .section {
position: relative;
padding: clamp(72px, 9vw, 120px) 0;
background: var(--paper);
}
.section--ivory {
background: var(--ivory);
}
.section--sand {
background: var(--sand);
}
.section--ink {
background: var(--ink);
color: var(--ivory);
}
.grid {
display: grid;
gap: clamp(18px, 2.4vw, 28px);
}
.grid--services {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid--works {
grid-template-columns: repeat(3, 1fr);
}
.grid--posts {
grid-template-columns: repeat(3, 1fr);
} .service-card {
position: relative;
display: flex;
flex-direction: column;
padding: 30px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--paper);
transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.service-card:hover {
transform: translateY(-6px);
border-color: var(--ink);
background: var(--ink);
color: var(--ivory);
}
.service-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 34px;
}
.service-card__icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 20px;
background: var(--gold-soft);
color: var(--brand);
transition: background 0.35s var(--ease);
}
.service-card__icon img {
width: 34px;
height: 34px;
object-fit: contain;
}
.service-card__icon .icon {
width: 30px;
height: 30px;
}
.service-card:hover .service-card__icon {
background: var(--gold);
}
.service-card__index {
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
color: var(--gold);
}
.service-card__title {
margin-bottom: 12px;
font-size: 22px;
}
.service-card__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.service-card__text {
flex: 1;
margin-bottom: 26px;
font-size: 15.5px;
color: var(--muted);
transition: color 0.35s var(--ease);
}
.service-card:hover .service-card__text {
color: rgba(247, 244, 236, 0.72);
}
.service-card:hover .link-arrow {
color: var(--gold);
} .about {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: clamp(36px, 6vw, 90px);
align-items: end;
padding-bottom: clamp(48px, 6vw, 72px);
border-bottom: 1px solid var(--line-light);
}
.about__text {
font-size: 17px;
line-height: 1.95;
color: rgba(247, 244, 236, 0.74);
}
.about__headline {
margin-bottom: 22px;
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 600;
line-height: 1.45;
color: var(--ivory);
}
.about__text {
columns: 2 280px;
column-gap: 40px;
}
.about__text p {
break-inside: avoid;
margin-bottom: 0.7em;
}
.about__text p:last-child {
margin-bottom: 0;
}
.about__stats {
display: grid;
gap: 28px;
margin: 0;
}
.about__stats div {
padding-inline-start: 22px;
border-inline-start: 2px solid var(--gold);
}
.about__stats dd {
order: -1;
margin: 0;
font-family: var(--font-head);
font-size: clamp(54px, 7vw, 84px);
font-weight: 600;
line-height: 1;
color: var(--gold);
}
.about__stats dd::after {
content: "+";
font-size: 0.5em;
vertical-align: top;
}
.about__stats dt {
margin-top: 10px;
color: rgba(247, 244, 236, 0.72);
}
.about__stats div {
display: flex;
flex-direction: column;
}
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
padding-top: clamp(48px, 6vw, 72px);
}
.pillar__index {
font-family: var(--font-head);
font-size: 14px;
color: var(--gold);
}
.pillar__title {
margin: 10px 0 14px;
font-size: 22px;
color: var(--ivory);
}
.pillar__text {
font-size: 15.5px;
color: rgba(247, 244, 236, 0.7);
} .work-card__link {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--ink);
}
.work-card__media {
display: block;
aspect-ratio: 4 / 3;
}
.work-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease), opacity 0.4s var(--ease);
}
.work-card__placeholder {
display: block;
width: 100%;
height: 100%;
background: var(--ink-3);
}
.work-card__body {
position: absolute;
inset-inline: 14px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-radius: var(--radius);
background: var(--ivory);
color: var(--ink);
transform: translateY(8px);
opacity: 0.96;
transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.work-card__title {
font-family: var(--font-head);
font-size: 17px;
font-weight: 600;
}
.work-card__more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--brand);
white-space: nowrap;
}
.work-card__link:hover img {
transform: scale(1.06);
}
.work-card__link:hover .work-card__body {
transform: none;
background: var(--gold);
}
.work-card__link:hover .work-card__more {
color: var(--ink);
} .testimonials {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(300px, calc((100% - 56px) / 3));
gap: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 12px;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
}
.testimonial {
display: flex;
flex-direction: column;
margin: 0;
padding: 34px;
border-radius: var(--radius-lg);
background: var(--paper);
scroll-snap-align: start;
}
.testimonial__quote {
width: 42px;
height: 42px;
margin-bottom: 18px;
color: var(--gold);
}
.testimonial__text {
flex: 1;
margin: 0 0 26px;
font-size: 16.5px;
color: var(--text);
}
.testimonial__author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.testimonial__author strong {
display: block;
font-family: var(--font-head);
font-weight: 600;
}
.testimonial__author small {
color: var(--muted);
}
.testimonial__avatar {
display: grid;
place-items: center;
width: 48px;
height: 48px;
flex: none;
border-radius: 50%;
background: var(--ink);
color: var(--gold);
font-family: var(--font-head);
font-weight: 600;
}
.stars {
display: flex;
margin-inline-start: auto;
color: var(--line);
}
.stars .icon {
width: 16px;
height: 16px;
}
.stars .is-on {
color: var(--gold);
fill: var(--gold);
} .post-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--paper);
transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.post-card:hover {
transform: translateY(-6px);
border-color: var(--gold);
}
.post-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.post-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease);
}
.post-card:hover .post-card__media img {
transform: scale(1.05);
}
.post-card__placeholder {
display: block;
height: 100%;
background: var(--sand);
}
.post-card__body {
padding: 26px 28px 30px;
}
.post-card__meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13.5px;
color: var(--muted);
}
.post-card__meta .icon {
width: 16px;
height: 16px;
color: var(--gold);
}
.post-card__title {
margin-bottom: 10px;
font-size: 20px;
}
.post-card__title a:hover {
color: var(--brand);
}
.post-card__excerpt {
margin: 0;
font-size: 15px;
color: var(--muted);
} .contact {
overflow: hidden;
}
.contact__shape {
position: absolute;
inset-inline-start: -160px;
top: -160px;
width: 480px;
height: 480px;
border-radius: 50%;
border: 1px solid rgba(201, 162, 75, 0.2);
pointer-events: none;
}
.contact__grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(36px, 6vw, 90px);
align-items: start;
}
.contact__channels,
.contact__promises {
margin: 34px 0 0;
padding: 0;
list-style: none;
}
.contact__channels a {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 12px 20px;
border: 1px solid var(--line-light);
border-radius: 999px;
font-family: var(--font-head);
font-weight: 500;
}
.contact__channels a:hover {
border-color: var(--gold);
color: var(--gold-2);
}
.contact__channels .icon {
color: var(--gold);
}
.contact__promises li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
color: rgba(247, 244, 236, 0.8);
}
.contact__promises .icon {
padding: 3px;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
}
.contact__form {
padding: clamp(26px, 4vw, 44px);
border-radius: var(--radius-lg);
background: var(--ivory);
color: var(--text);
} .wpcf7 form p {
margin: 0 0 16px;
}
.wpcf7 label {
display: block;
font-family: var(--font-head);
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select,
.search-form input {
width: 100%;
margin-top: 6px;
padding: 14px 18px;
border: 1.5px solid var(--line);
border-radius: 14px;
background: var(--paper);
font: inherit;
font-size: 15.5px;
color: var(--text);
transition: border-color 0.2s var(--ease);
}
.wpcf7 textarea {
min-height: 140px;
resize: vertical;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.search-form input:focus {
outline: none;
border-color: var(--gold);
}
.wpcf7 input[type="submit"],
.search-form button {
min-height: 52px;
padding: 0 34px;
border: 0;
border-radius: 999px;
background: var(--ink);
color: var(--ivory);
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.wpcf7 input[type="submit"]:hover,
.search-form button:hover {
background: var(--gold);
color: var(--ink);
}
.wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 13px;
color: #b3261e;
}
.wpcf7 form .wpcf7-response-output {
margin: 16px 0 0;
padding: 12px 16px;
border-radius: 12px;
font-size: 14px;
}
.wpcf7-spinner {
vertical-align: middle;
} .page-hero,
.not-found {
position: relative;
overflow: hidden;
padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 90px);
background: var(--ink);
color: var(--ivory);
}
.page-hero__shapes span:nth-child(1) {
width: 460px;
height: 460px;
inset-inline-end: -120px;
top: -200px;
border: 1px solid rgba(201, 162, 75, 0.25);
}
.page-hero__shapes span:nth-child(2) {
width: 220px;
height: 220px;
inset-inline-end: 12%;
bottom: -150px;
background: var(--brand);
opacity: 0.45;
}
.page-hero .container {
position: relative;
}
.crumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
font-size: 14px;
color: rgba(247, 244, 236, 0.6);
}
.crumbs a:hover {
color: var(--gold-2);
}
.crumbs [aria-current] {
color: var(--gold-2);
}
.page-hero__title {
max-width: 900px;
font-size: clamp(34px, 5vw, 60px);
letter-spacing: -0.02em;
color: var(--ivory);
}
.page-hero__lead {
max-width: 680px;
margin: 18px 0 0;
font-size: 18px;
color: rgba(247, 244, 236, 0.72);
}
.feature-image {
margin: 0 0 40px;
overflow: hidden;
border-radius: var(--radius-lg);
}
.feature-image img {
width: 100%;
}
.feature-image--framed {
padding: 14px;
background: var(--sand);
}
.feature-image--framed img {
border-radius: var(--radius);
}
.prose {
font-size: 18px;
line-height: 1.95;
}
.prose--intro {
max-width: 760px;
margin-bottom: 48px;
}
.prose > * + * {
margin-top: 1.1em;
}
.prose h2,
.prose h3,
.prose h4 {
margin-top: 1.8em;
color: var(--ink);
}
.prose h2 {
font-size: clamp(24px, 3vw, 32px);
}
.prose h3 {
font-size: 22px;
}
.prose a {
color: var(--brand);
text-decoration: underline;
text-decoration-color: var(--gold);
text-underline-offset: 4px;
}
.prose img {
border-radius: var(--radius);
}
.prose ul,
.prose ol {
padding-inline-start: 1.3em;
}
.prose li::marker {
color: var(--gold);
}
.prose blockquote {
margin-inline: 0;
padding: 20px 26px;
border-inline-start: 3px solid var(--gold);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--sand);
font-family: var(--font-head);
}
[dir="rtl"] .prose blockquote {
border-radius: var(--radius) 0 0 var(--radius);
}
.detail {
display: grid;
grid-template-columns: 1fr 340px;
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
.detail__aside {
position: sticky;
top: calc(var(--header-h) + 24px);
display: grid;
gap: 20px;
}
.aside-card {
padding: 28px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--paper);
}
.aside-card--ink {
border-color: var(--ink);
background: var(--ink);
color: var(--ivory);
}
.aside-card--ink p {
color: rgba(247, 244, 236, 0.72);
}
.aside-card__title {
margin-bottom: 16px;
font-size: 19px;
}
.aside-list {
margin: 0;
padding: 0;
list-style: none;
}
.aside-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
font-weight: 500;
}
.aside-list li:last-child a {
border-bottom: 0;
}
.aside-list a:hover {
color: var(--brand);
}
.aside-list .icon {
width: 16px;
color: var(--gold);
}
.post-navigation {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.post-navigation .nav-links {
display: flex;
justify-content: space-between;
gap: 24px;
}
.post-navigation .nav-next {
margin-inline-start: auto;
text-align: end;
}
.nav-label {
display: block;
font-size: 13px;
color: var(--gold);
}
.nav-title {
font-family: var(--font-head);
font-weight: 600;
}
.pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 56px 0 0;
padding: 0;
list-style: none;
}
.pagination a,
.pagination span {
display: inline-grid;
place-items: center;
min-width: 46px;
height: 46px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-head);
}
.pagination .current {
border-color: var(--ink);
background: var(--ink);
color: var(--ivory);
}
.pagination a:hover {
border-color: var(--gold);
color: var(--brand);
}
.empty {
padding: 48px 0;
text-align: center;
color: var(--muted);
}
.search-box {
max-width: 560px;
margin: 0 auto 48px;
}
.search-form {
display: flex;
gap: 10px;
}
.search-form input {
margin: 0;
}
.search-box--dark .search-form input {
border-color: var(--line-light);
background: var(--ink-2);
color: var(--ivory);
}
.search-box--dark .search-form button {
background: var(--gold);
color: var(--ink);
}
.not-found__inner {
position: relative;
display: grid;
justify-items: center;
gap: 18px;
text-align: center;
}
.not-found__code {
margin: 0;
font-family: var(--font-head);
font-size: clamp(110px, 20vw, 220px);
font-weight: 700;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1.5px var(--gold);
}
.not-found .page-hero__lead {
margin: 0;
}
.not-found .search-box {
width: 100%;
margin: 12px 0;
} .site-footer {
padding: clamp(56px, 7vw, 90px) 0 28px;
background: var(--ink-2);
color: rgba(247, 244, 236, 0.72);
font-size: 15.5px;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
padding-bottom: 44px;
border-bottom: 1px solid var(--line-light);
}
.site-footer__about .brand {
margin-bottom: 22px;
}
.site-footer__about p {
max-width: 420px;
}
.site-footer__title {
margin-bottom: 20px;
font-size: 16px;
color: var(--gold-2);
}
.site-footer__links,
.site-footer__contact,
.socials {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__links a,
.site-footer__contact a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 0;
}
.site-footer__links a:hover,
.site-footer__contact a:hover {
color: var(--gold-2);
}
.site-footer__contact .icon {
color: var(--gold);
}
.socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.socials a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--line-light);
border-radius: 50%;
color: var(--ivory);
}
.socials a:hover {
border-color: var(--gold);
background: var(--gold);
color: var(--ink);
}
.socials .icon {
width: 18px;
height: 18px;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
padding-top: 24px;
font-size: 14px;
}
.site-footer__bottom p {
margin: 0;
}
.wa-float {
position: fixed;
inset-inline-end: 22px;
bottom: 22px;
z-index: 40;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: #25d366;
color: #fff;
transition: transform 0.25s var(--ease);
}
.wa-float:hover {
transform: scale(1.08);
}
.wa-float .icon {
width: 30px;
height: 30px;
} @keyframes rise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
.js [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js [data-reveal].is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.js [data-reveal] {
opacity: 1;
transform: none;
}
} @media (max-width: 1080px) {
.site-header__cta {
display: none;
}
.nav-toggle {
display: grid;
}
.main-nav {
position: fixed;
inset: var(--header-h) 0 0;
z-index: 49;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 24px;
padding: 28px var(--gutter) 40px;
overflow-y: auto;
background: var(--ink);
color: var(--ivory);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: all 0.3s var(--ease);
}
.nav-open .main-nav {
opacity: 1;
visibility: visible;
transform: none;
}
.nav-open {
overflow: hidden;
}
.main-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.main-nav__list a {
padding: 16px 0;
border-bottom: 1px solid var(--line-light);
border-radius: 0;
font-size: 20px;
opacity: 1;
}
.main-nav__list .sub-menu {
position: static;
padding: 0 18px;
border: 0;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
}
.main-nav__list .sub-menu a {
font-size: 17px;
}
.main-nav__extra {
display: block;
}
.main-nav__extra .btn {
width: 100%;
}
.hero__grid,
.contact__grid,
.about,
.detail {
grid-template-columns: 1fr;
}
.hero__arch {
max-width: 420px;
margin-inline: auto;
}
.detail__aside {
position: static;
}
.grid--works,
.grid--posts {
grid-template-columns: repeat(2, 1fr);
}
.pillars {
grid-template-columns: 1fr;
}
.site-footer__grid {
grid-template-columns: 1fr 1fr;
}
.site-footer__about {
grid-column: 1 / -1;
}
.testimonials {
grid-auto-columns: minmax(280px, 70%);
}
}
@media (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
}
@media (max-width: 640px) {
:root {
--header-h: 72px;
}
body {
font-size: 16px;
}
.brand svg {
width: 134px;
}
.grid--works,
.grid--posts,
.site-footer__grid {
grid-template-columns: 1fr;
}
.hero__actions .btn {
flex: 1 1 100%;
}
.hero__shapes span:nth-child(3) {
display: none;
}
.hero__badges {
position: static;
grid-template-columns: 1fr 1fr;
margin-top: 22px;
}
.stat-badge {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.testimonials {
grid-auto-columns: 86%;
}
.section-head-row {
align-items: flex-start;
}
.search-form {
flex-direction: column;
}
}