/* Single Project detail page (single-projects.php) — custom classes
with real CSS instead of copied Tailwind utility strings. Matches the
real project-detail-N.html pages at this project's real breakpoints:
sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */
.orion-proj-detail {
position: relative;
}
/* Theme/Elementor often zero or halve `.container` padding; HTML uses px-4 (16px). */
.orion-proj-detail .container {
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
/* Shared "section bottom margin" schedule used by every section on this
page (40/50/70/80/100 at base/sm/lg/1xl/2xl).
Hero has NO bottom margin — spacing to Overview comes from the stats
band only (HTML wraps hero+stats+overview in one section). */
.orion-proj-detail__overview,
.orion-proj-detail__gallery,
.orion-proj-detail__milestones,
.orion-proj-detail__related {
position: relative;
margin-bottom: 40px;
}
@media (min-width: 640px) {
.orion-proj-detail__overview, .orion-proj-detail__gallery,
.orion-proj-detail__milestones, .orion-proj-detail__related { margin-bottom: 50px; }
}
@media (min-width: 992px) {
.orion-proj-detail__overview, .orion-proj-detail__gallery,
.orion-proj-detail__milestones, .orion-proj-detail__related { margin-bottom: 70px; }
}
@media (min-width: 1380px) {
.orion-proj-detail__overview, .orion-proj-detail__gallery,
.orion-proj-detail__milestones { margin-bottom: 80px; }
}
@media (min-width: 1752px) {
.orion-proj-detail__overview, .orion-proj-detail__gallery,
.orion-proj-detail__milestones, .orion-proj-detail__related { margin-bottom: 100px; }
}
/* Related Projects section: HTML omits 1xl mb bump (mb-10 / sm:50 / lg:70 / 2xl:100). */
.orion-proj-detail__related { margin-bottom: 40px; }
@media (min-width: 640px) { .orion-proj-detail__related { margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-proj-detail__related { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-proj-detail__related { margin-bottom: 70px; } }
@media (min-width: 1752px) { .orion-proj-detail__related { margin-bottom: 100px; } }
.orion-proj-detail__hero {
position: relative;
overflow: hidden;
margin-bottom: 0;
}
/* Shell mirrors HTML `lg:container mx-auto lg:px-4 p-0` wrapping media + stats. */
.orion-proj-detail__hero-inner {
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
@media (min-width: 992px) {
.orion-proj-detail__hero-inner {
max-width: 992px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
}
@media (min-width: 1199px) { .orion-proj-detail__hero-inner { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-proj-detail__hero-inner { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-proj-detail__hero-inner { max-width: 1752px; } }
.orion-proj-detail__hero-frame {
width: 100%;
max-width: none;
padding: 0;
margin: 0;
}
/* Title pill: pt-3 pb-2 px-3 / sm:p-6 / md:py-7 px-7 / lg:px-7.5 / 1xl:px-8 / 2xl:py-[50px] px-16 */
.orion-proj-detail__hero-title {
position: relative;
left: 50%;
transform: translateX(-50%);
bottom: -1px;
z-index: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
padding: 12px 12px 8px;
}
@media (min-width: 640px) {
.orion-proj-detail__hero-title {
position: absolute;
left: auto;
right: 0;
transform: none;
width: fit-content;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 24px;
}
}
@media (min-width: 769px) { .orion-proj-detail__hero-title { padding: 28px; } }
@media (min-width: 992px) { .orion-proj-detail__hero-title { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 1380px) { .orion-proj-detail__hero-title { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1752px) { .orion-proj-detail__hero-title { padding: 50px 64px; } }
/* Use shared responsive h3 scale — do not lock to 45px. */
.orion-proj-detail__hero-title h3 {
margin: 0;
font-weight: 500;
}
@media (max-width: 500px) {
.orion-proj-detail__hero-title h3 { font-size: 22px; }
}
/* Stats band fills the shell; no second max-width. */
.orion-proj-detail__stats {
width: 100%;
max-width: none;
box-sizing: border-box;
background: var(--orion-primary);
padding: 16px;
margin-bottom: 40px;
}
@media (min-width: 640px) { .orion-proj-detail__stats { padding: 36px; margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-proj-detail__stats { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-proj-detail__stats { padding: 44px; margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-proj-detail__stats { padding: 53px 74px; margin-bottom: 100px; } }
/* HTML: grid 2 / sm:3, then lg:flex (stays flex through xl — `lg:flex` wins over xl:grid-cols-5). */
.orion-proj-detail__stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
justify-content: space-between;
}
@media (min-width: 640px) { .orion-proj-detail__stats-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 992px) {
.orion-proj-detail__stats-grid {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: 16px;
}
}
@media (min-width: 1199px) {
.orion-proj-detail__stats-grid { gap: 16px; }
}
.orion-proj-detail__stat { text-align: center; }
@media (min-width: 640px) { .orion-proj-detail__stat { text-align: left; } }
/* HTML stats band: white h4 labels + Lexend h6 values on primary bg.
Beat later `.orion-proj-detail h4 { color:#000 }` typography block. */
html body .orion-proj-detail__stat h4,
html body .orion-proj-detail__stat-label,
.orion-proj-detail__stat h4,
.orion-proj-detail__stat-label {
color: #fff !important;
margin: 0 0 4px;
font-family: var(--orion-font-heading, "El Messiri", serif);
font-weight: 500;
line-height: 1.4;
text-transform: none;
}
@media (min-width: 640px) {
html body .orion-proj-detail__stat h4,
html body .orion-proj-detail__stat-label,
.orion-proj-detail__stat h4,
.orion-proj-detail__stat-label { margin-bottom: 8px; }
}
@media (min-width: 1199px) {
html body .orion-proj-detail__stat h4,
html body .orion-proj-detail__stat-label,
.orion-proj-detail__stat h4,
.orion-proj-detail__stat-label { line-height: 36px; }
}
html body .orion-proj-detail__stat h6,
html body .orion-proj-detail__stat-value,
.orion-proj-detail__stat h6,
.orion-proj-detail__stat-value {
color: #fff !important;
margin: 0;
font-family: var(--orion-font-body, Lexend, sans-serif);
font-weight: 400;
line-height: 1.375;
text-transform: none;
}
@media (min-width: 1199px) {
html body .orion-proj-detail__stat h6,
html body .orion-proj-detail__stat-value,
.orion-proj-detail__stat h6,
.orion-proj-detail__stat-value { line-height: 32px; }
}
/* ---------- Overview ---------- */
.orion-proj-detail__overview-heading {
margin: 0 0 20px;
font-weight: 500;
}
/* Overview body keeps HTML p.mb-5 (20px) at all breakpoints. */
.orion-proj-detail__overview > .container > p {
margin: 0 0 20px;
}
.orion-proj-detail__highlights { margin-top: 16px; }
@media (min-width: 769px) { .orion-proj-detail__highlights { margin-top: 36px; } }
@media (min-width: 1380px) { .orion-proj-detail__highlights { margin-top: 45px; } }
.orion-proj-detail__highlights-heading {
margin: 0 0 20px;
font-weight: 500;
}
.orion-proj-detail__highlights-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 640px) { .orion-proj-detail__highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.orion-proj-detail__highlights-grid ul {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding-left: 24px;
list-style: none;
}
@media (min-width: 640px) {
.orion-proj-detail__highlights-grid ul { padding-left: 33px; }
}
.orion-proj-detail__highlights-grid li {
position: relative;
list-style: none;
}
.orion-proj-detail__highlights-grid li p { margin: 0; }
.orion-proj-detail__highlights-grid li p b,
.orion-proj-detail__highlights-grid li p strong {
color: #000;
font-family: var(--orion-font-body, Lexend, sans-serif);
font-weight: 700 !important;
}
/* HTML .custom-list checkmark (primary mask icon) beside bold text */
.orion-proj-detail__highlights-grid li::before {
content: "" !important;
position: absolute;
top: 0.25em;
left: -23px;
width: 16.5px;
height: 16.5px;
display: block;
background-color: var(--orion-primary, #186f65) !important;
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@media (min-width: 640px) {
.orion-proj-detail__highlights-grid li::before {
left: -28.8px;
width: 18px;
height: 18px;
}
}
@media (min-width: 1199px) {
.orion-proj-detail__highlights-grid li::before { width: 19px; height: 19px; }
}
@media (min-width: 1380px) {
.orion-proj-detail__highlights-grid li::before { width: 20px; height: 20px; }
}
/* ---------- Gallery ---------- */
.orion-proj-detail__gallery-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 25px;
}
@media (min-width: 769px) { .orion-proj-detail__gallery-header { padding-bottom: 35px; } }
.orion-proj-detail__gallery-header h2 {
margin: 0;
font-weight: 500;
}
.orion-proj-detail__gallery-nav {
display: flex;
gap: 8px;
position: relative;
width: 75px;
}
@media (min-width: 992px) { .orion-proj-detail__gallery-nav { width: 85px; } }
@media (min-width: 1380px) { .orion-proj-detail__gallery-nav { width: 100px; } }
.orion-proj-detail__gallery-slide {
position: relative;
overflow: hidden;
height: 280px;
}
@media (min-width: 640px) { .orion-proj-detail__gallery-slide { height: 350px; } }
@media (min-width: 769px) { .orion-proj-detail__gallery-slide { height: 400px; } }
@media (min-width: 992px) { .orion-proj-detail__gallery-slide { height: 350px; } }
@media (min-width: 1199px) { .orion-proj-detail__gallery-slide { height: 420px; } }
@media (min-width: 1380px) { .orion-proj-detail__gallery-slide { height: 510px; } }
@media (min-width: 1752px) { .orion-proj-detail__gallery-slide { height: 680px; } }
.orion-proj-detail__gallery-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
transition: all 0.5s ease;
}
/* ---------- Milestones ---------- */
.orion-proj-detail__milestones-heading {
margin: 0 0 30px;
font-weight: 500;
}
@media (min-width: 1199px) { .orion-proj-detail__milestones-heading { margin-bottom: 50px; } }
/* Project-detail timeline dots: lg+ always 31px (HTML lg:w-[31px]). */
.orion-proj-detail .orion-history__dot {
width: 24px;
height: 24px;
}
@media (min-width: 992px) {
.orion-proj-detail .orion-history__dot {
width: 31px;
height: 31px;
}
}
/* ---------- Related Projects ---------- */
.orion-proj-detail__related { overflow: hidden; }
.orion-proj-detail__related-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.orion-proj-detail__related-header {
flex-direction: row;
align-items: center;
margin-bottom: 28px;
}
}
@media (min-width: 769px) { .orion-proj-detail__related-header { margin-bottom: 36px; } }
@media (min-width: 1199px) { .orion-proj-detail__related-header { margin-bottom: 40px; } }
.orion-proj-detail__related-header h2 {
margin: 0;
font-weight: 500;
}
/* HTML: btn-primary-reverse, hidden below sm */
.orion-proj-detail__related-header .btn {
display: none;
}
@media (min-width: 640px) {
.orion-proj-detail__related-header .btn { display: inline-flex; }
}
/* Related card image ratios: 61% / md:56.5% / xl:59% / 2xl:56.5% */
.orion-proj-detail__related .project-box {
background: #F6F6F6;
}
.orion-proj-detail__related .project-img-before::before,
.orion-proj-detail__related .project .project-box .project-img-before::before,
.orion-proj-detail__related .projects-2 .project .project-box .project-img-before::before {
content: '';
display: block;
padding-top: 61%;
}
@media (min-width: 769px) {
.orion-proj-detail__related .project-img-before::before,
.orion-proj-detail__related .project .project-box .project-img-before::before,
.orion-proj-detail__related .projects-2 .project .project-box .project-img-before::before {
padding-top: 56.5%;
}
}
@media (min-width: 1199px) {
.orion-proj-detail__related .project-img-before::before,
.orion-proj-detail__related .project .project-box .project-img-before::before,
.orion-proj-detail__related .projects-2 .project .project-box .project-img-before::before {
padding-top: 59%;
}
}
@media (min-width: 1752px) {
.orion-proj-detail__related .project-img-before::before,
.orion-proj-detail__related .project .project-box .project-img-before::before,
.orion-proj-detail__related .projects-2 .project .project-box .project-img-before::before {
padding-top: 56.5%;
}
}
/* ---------- Typography ----------
Real heading + body-text font-size schedule for single-projects.php,
single-services.php, and single-team.php, measured directly
from the reference project-detail-N.html / services-detail-N.html /
team-detail-N.html pages. */
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 {
font-family: var(--orion-font-heading, "El Messiri", serif);
font-size: 26px;
font-weight: 500;
color: #000;
line-height: 36px;
}
.orion-svc-detail h3, .orion-proj-detail h3, .orion-team-detail h3 { font-size: 22px; font-weight: 500; color: #000; }
/* Let's Connect sits on the primary panel — keep its title white. */
.orion-svc-detail .orion-cf__left-title,
.orion-proj-detail .orion-cf__left-title,
.orion-team-detail .orion-cf__left-title { color: #fff; }
.orion-svc-detail h4, .orion-proj-detail h4, .orion-team-detail h4 {
font-family: var(--orion-font-heading, "El Messiri", serif);
font-size: 20px;
font-weight: 500;
color: #000;
line-height: 28px;
}
.orion-svc-detail h6, .orion-proj-detail h6, .orion-team-detail h6 { font-size: 15px; }
.orion-svc-detail p, .orion-proj-detail p, .orion-team-detail p { font-size: 14px; margin: 0 0 16px; }
.orion-team-detail .orion-team-detail__details-list p { margin: 0 !important; }
@media (min-width: 640px) {
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 { font-size: 30px; line-height: 40px; }
.orion-svc-detail h3, .orion-proj-detail h3, .orion-team-detail h3 { font-size: 26px; }
.orion-svc-detail h6, .orion-proj-detail h6, .orion-team-detail h6 { font-size: 16px; }
}
@media (min-width: 769px) {
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 { font-size: 35px; line-height: 40px; }
.orion-svc-detail h3, .orion-proj-detail h3, .orion-team-detail h3 { font-size: 30px; }
.orion-svc-detail h4, .orion-proj-detail h4, .orion-team-detail h4 { font-size: 22px; }
}
@media (min-width: 992px) {
.orion-svc-detail h6, .orion-proj-detail h6, .orion-team-detail h6 { font-size: 17px; }
.orion-svc-detail p, .orion-proj-detail p, .orion-team-detail p { font-size: 15px; margin-bottom: 25px; }
/* Overview paragraphs stay at 20px mb like HTML mb-5 */
.orion-proj-detail__overview > .container > p { margin-bottom: 20px; }
}
@media (min-width: 1199px) {
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 { font-size: 40px; line-height: 50px; }
.orion-svc-detail h4, .orion-proj-detail h4, .orion-team-detail h4 { font-size: 24px; line-height: 32px; }
.orion-svc-detail h6, .orion-proj-detail h6, .orion-team-detail h6 { font-size: 18px; }
}
@media (min-width: 1380px) {
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 { font-size: 46px; line-height: 55px; }
.orion-svc-detail h3, .orion-proj-detail h3, .orion-team-detail h3 { font-size: 36px; }
.orion-svc-detail h4, .orion-proj-detail h4, .orion-team-detail h4 { line-height: 36px; }
}
@media (min-width: 1752px) {
.orion-svc-detail h2, .orion-proj-detail h2, .orion-team-detail h2 { font-size: 60px; line-height: 70px; }
.orion-svc-detail h3, .orion-proj-detail h3, .orion-team-detail h3 { font-size: 45px; }
.orion-svc-detail h4, .orion-proj-detail h4, .orion-team-detail h4 { font-size: 30px; line-height: 42px; }
.orion-svc-detail h6, .orion-proj-detail h6, .orion-team-detail h6 { font-size: 22px; }
.orion-svc-detail p, .orion-proj-detail p, .orion-team-detail p { font-size: 18px; }
}
/* project-detail-1.html refinements */
html body .orion-proj-detail .orion-history__headline {
font-weight: 400;
color: #000;
}
html body .orion-proj-detail .orion-history__desc,
.orion-proj-detail .orion-history__desc {
margin: 0;
color: #464343;
}
html body .orion-proj-detail .orion-history__tag {
font-family: var(--orion-font-body, Lexend, sans-serif);
font-weight: 400;
color: var(--orion-primary);
}
.orion-proj-detail__highlights-grid li p,
.orion-proj-detail__highlights-grid li p b,
.orion-proj-detail__highlights-grid li p strong {
color: #000;
font-family: var(--orion-font-body, Lexend, sans-serif);
}
.orion-proj-detail__highlights-grid li p b,
.orion-proj-detail__highlights-grid li p strong {
font-weight: 700 !important;
}
/* Overview body: HTML .p line-height schedule */
.orion-proj-detail__overview > .container > p {
font-family: var(--orion-font-body, Lexend, sans-serif);
font-weight: 300;
line-height: 23px;
color: #464343;
}
@media (min-width: 992px) {
.orion-proj-detail__overview > .container > p { line-height: 25px; }
}
@media (min-width: 1199px) {
.orion-proj-detail__overview > .container > p { line-height: 26px; }
}
@media (min-width: 1380px) {
.orion-proj-detail__overview > .container > p { line-height: 28px; }
}
@media (min-width: 1752px) {
.orion-proj-detail__overview > .container > p { line-height: 32px; }
}
/* Related cards: location = text-primary-900 */
.orion-proj-detail__related .orion-proj2__location,
.orion-proj-detail__related p.orion-proj2__location {
color: var(--orion-primary);
}
/* Hero title pill is bg-white (HTML) — heading must be dark, not white. */
html body .orion-proj-detail__hero-heading,
.orion-proj-detail__hero-title h3,
.orion-proj-detail__hero-title .orion-proj-detail__hero-heading {
color: #000 !important;
font-weight: 500;
margin: 0;
}