/* Super Arc Projects – front-end design (single project page + listing grid) */ /* Fonts are bundled with the plugin (Barlow, SIL Open Font License) so they always load. */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); } .sac { --sac-red: #FF0000; --sac-red-text: #B80000; --sac-ink: #111111; --sac-mid: #4A4A4A; --sac-line: #D9D9D5; --sac-bg: #F5F5F2; font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.65; color: var(--sac-ink); background: #ffffff; width: 100%; } .sac *, .sac *::before, .sac *::after { box-sizing: border-box; } .sac h1, .sac h2, .sac h3, .sac p, .sac ul, .sac ol, .sac figure { margin: 0; padding: 0; } .sac ul, .sac ol { list-style: none; } .sac a { text-decoration: none; color: inherit; } .sac [hidden] { display: none !important; } .sac img { max-width: 100%; display: block; } .sac-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .sac .sac-display, .sac .sac-card-hl b, .sac .sac-stat b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important; font-weight: 700 !important; font-stretch: normal; letter-spacing: .01em; } .sac .sac-display { text-transform: uppercase; line-height: 1.05; color: var(--sac-ink); } .sac-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sac-red-text); } .sac-eyebrow::before { content: ""; display: block; width: 40px; height: 4px; background: var(--sac-red); } .sac-tag { display: inline-block; background: var(--sac-ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; } .sac-placeholder { background: repeating-linear-gradient(135deg, #E3E3DF 0, #E3E3DF 14px, #EDEDE9 14px, #EDEDE9 28px); display: flex; align-items: center; justify-content: center; color: var(--sac-mid); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } /* ---------- Hero ---------- */ .sac-hero { background: var(--sac-bg); border-top: 6px solid var(--sac-red); } .sac-hero .sac-wrap { padding-top: 28px; } .sac-crumbs { font-size: 15px; color: var(--sac-mid); } .sac-crumbs a { color: var(--sac-mid); } .sac-crumbs a:hover { color: var(--sac-red-text); } .sac-crumbs span { color: var(--sac-ink); } .sac-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; padding: 36px 0 44px; } .sac-hero__title { flex: 1 1 560px; min-width: 0; } .sac-hero__title h1 { margin-top: 18px; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: .01em; } .sac-hero__summary { flex: 1 1 300px; max-width: 440px; font-size: 19px; line-height: 1.55; color: #333; } .sac-hero__img { width: 100%; height: clamp(260px, 40vw, 540px); object-fit: cover; } .sac-hero__ph { height: clamp(260px, 40vw, 540px); } /* ---------- Facts ---------- */ .sac-facts { background: var(--sac-ink); color: #fff; } .sac-facts .sac-wrap { display: flex; flex-wrap: wrap; gap: 24px 16px; padding-top: 28px; padding-bottom: 28px; } .sac-fact { flex: 1 1 180px; min-width: 0; } .sac-fact dt { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FF5A5A; } .sac-fact dd { margin: 0; font-size: 20px; font-weight: 600; } /* ---------- Body ---------- */ .sac-body .sac-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px 72px; padding-top: 80px; padding-bottom: 80px; } .sac-main { flex: 999 1 560px; min-width: 0; } .sac-side { flex: 1 1 300px; max-width: 380px; min-width: 0; position: sticky; top: 24px; } /* Spacing rules are prefixed with .sac so they beat the reset at the top (which zeroes h/p margins). */ .sac .sac-lead { margin-top: 24px; font-size: 22px; line-height: 1.55; } .sac .sac-text { margin-top: 18px; color: #333; } .sac .sac-h2 { margin-top: 80px; font-size: 44px; line-height: 1.1; } .sac .sac-h2--first { margin-top: 0; } .sac .sac-intro { margin: 16px 0 28px; color: #333; line-height: 1.6; } .sac-label { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sac-red-text); } .sac-checks { border-top: 1px solid var(--sac-line); } .sac-checks li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--sac-line); } .sac-checks svg { flex: none; margin-top: 3px; } .sac-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sac-cards[data-n="1"] { grid-template-columns: minmax(0, 1fr); } .sac-cards[data-n="3"], .sac-cards[data-n="6"], .sac-cards[data-n="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .sac-cards, .sac-cards[data-n] { grid-template-columns: minmax(0, 1fr); } } .sac-card-hl { min-width: 0; background: var(--sac-bg); border-top: 4px solid var(--sac-red); padding: 22px 24px 26px; } .sac-card-hl b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: var(--sac-red); } .sac-card-hl span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.55; color: #333; } .sac-card-hl b + span { margin-top: 10px; } .sac-card-hl--plain { padding-top: 22px; } .sac-card-hl--plain > span { margin-top: 0; } .sac-card-hl span.is-plain { font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--sac-ink); } .sac-card-hl span.is-plain.is-long { font-weight: 400; font-size: 16px; line-height: 1.55; color: #333; } .sac .sac-lbl { display: block; font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--sac-ink); margin-bottom: 4px; } .sac-checks li > span { color: #333; } .sac-checks .sac-lbl { font-size: 17px; margin-bottom: 2px; } .sac-cards[data-n="5"] .sac-card-hl:last-child, .sac-cards[data-n="7"] .sac-card-hl:last-child { grid-column: 1 / -1; } @media (max-width: 640px) { .sac-cards[data-n="5"] .sac-card-hl:last-child, .sac-cards[data-n="7"] .sac-card-hl:last-child { grid-column: auto; } } .sac-legacy { min-width: 0; } /* ---------- Sidebar ---------- */ .sac-box { border: 1px solid var(--sac-line); padding: 28px; } .sac-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .sac-chip { border: 1px solid var(--sac-ink); padding: 8px 14px; font-size: 15px; font-weight: 500; color: var(--sac-ink); } .sac-chip:hover { background: var(--sac-ink); color: #fff; } .sac-cta-box { background: var(--sac-ink); color: #fff; padding: 32px 28px; margin-top: 16px; } .sac-cta-box .sac-display { color: #fff; font-size: 34px; line-height: 1.1; } .sac-cta-box p { margin: 12px 0 22px; font-size: 16px; color: #E5E5E0; line-height: 1.55; } .sac-btn { display: inline-block; background: var(--sac-red); color: #fff !important; font-size: 19px; font-weight: 700; padding: 12px 26px; } .sac-btn:hover { background: #cc0000; } .sac-btn--dark { background: var(--sac-ink); font-size: 20px; padding: 16px 40px; } .sac-btn--dark:hover { background: #333; } /* ---------- Outcome ---------- */ .sac-outcome { background: var(--sac-ink); color: #fff; } .sac-outcome .sac-wrap { display: flex; flex-wrap: wrap; gap: 40px 72px; padding-top: 80px; padding-bottom: 80px; } .sac-outcome__l { flex: 1 1 420px; min-width: 0; } .sac-outcome__r { flex: 1 1 420px; min-width: 0; font-size: 18px; color: #E5E5E0; } .sac-outcome .sac-eyebrow { color: #FF5A5A; } .sac-outcome h2 { margin-top: 20px; font-size: clamp(34px, 4.4vw, 56px); color: #fff; } .sac-outcome__r p + p { margin-top: 16px; } /* ---------- Gallery ---------- */ .sac-gallery .sac-wrap { padding-top: 80px; padding-bottom: 80px; } .sac-gallery h2 { margin-bottom: 28px; font-size: 44px; } .sac-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .sac-gallery__grid a { display: block; height: 300px; overflow: hidden; } .sac-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .sac-gallery__grid a:hover img { transform: scale(1.04); } /* ---------- Cards (related + listing) ---------- */ .sac-related { background: var(--sac-bg); } .sac-related .sac-wrap { padding-top: 80px; padding-bottom: 80px; } .sac-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .sac-related__head h2 { font-size: 44px; } .sac-related__head a { font-weight: 600; border-bottom: 3px solid var(--sac-red); padding: 10px 0; } .sac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; } .sac-pcard { background: #fff; border: 1px solid var(--sac-line); display: flex; flex-direction: column; } .sac-pcard__img { height: 220px; width: 100%; object-fit: cover; } .sac-pcard__ph { height: 220px; } .sac-pcard__body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; } .sac-pcard__tag { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sac-red-text); } .sac-pcard h3 { margin-top: 8px; font-size: 29px; line-height: 1.12; } .sac-pcard p { margin: 10px 0 18px; font-size: 16px; line-height: 1.55; color: #333; flex: 1 1 auto; } .sac-pcard__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding: 8px 0; } .sac-pcard:hover h3 { color: var(--sac-red-text); } /* ---------- Listing ---------- */ .sac-list-hero { background: var(--sac-bg); border-top: 6px solid var(--sac-red); } .sac-list-hero .sac-wrap { padding-top: 28px; padding-bottom: 56px; } .sac-list-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; padding-top: 36px; } .sac-list-hero h1 { font-size: clamp(48px, 8vw, 104px); line-height: .98; } .sac-list-hero p { margin-top: 20px; max-width: 620px; font-size: 21px; line-height: 1.55; color: #333; } .sac-stat { display: flex; align-items: flex-end; gap: 16px; } .sac-stat b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 120px; line-height: .85; color: var(--sac-red); } .sac-stat span { font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; padding-bottom: 6px; } .sac-listing .sac-wrap { padding-top: 48px; padding-bottom: 80px; } .sac-filters { display: flex; flex-wrap: wrap; gap: 10px; } .sac-filters button { min-height: 44px; padding: 8px 20px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; background: #fff; color: var(--sac-ink); border: 2px solid var(--sac-line); border-radius: 0; } .sac-filters button:hover { border-color: var(--sac-ink); } .sac-filters button[aria-pressed="true"] { background: var(--sac-ink); color: #fff; border-color: var(--sac-ink); } .sac-count { margin: 20px 0 28px; font-size: 15px; color: var(--sac-mid); } .sac-more { margin-top: 48px; text-align: center; } .sac-more button { background: var(--sac-ink); color: #fff; border: 0; border-radius: 0; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 700; padding: 14px 40px; } .sac-more button:hover { background: #333; } /* ---------- Closing call to action ---------- */ .sac-cta { background: var(--sac-red); color: #fff; } .sac-cta .sac-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; padding-top: 80px; padding-bottom: 80px; } .sac-cta__text { flex: 1 1 480px; min-width: 0; } .sac-cta h2 { font-size: clamp(40px, 5.5vw, 68px); line-height: 1.02; color: #fff; } .sac-cta p { margin-top: 16px; font-size: 24px; font-weight: 500; line-height: 1.4; color: #fff; } /* ---------- Added in 1.1 ---------- */ .sac .sac-text--first { margin-top: 24px; } .sac-hero--noimg .sac-wrap { padding-bottom: 12px; } .sac-hero--noimg .sac-hero__row { padding-bottom: 36px; } /* Card tile when a project has no photo */ .sac-brandtile { background: var(--sac-ink); color: #fff; gap: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: .12em; text-transform: uppercase; } .sac-brandtile .sac-mark { display: block; width: 28px; height: 28px; background: var(--sac-red); } /* Outcome band without a headline */ .sac-outcome--notitle .sac-outcome__l { flex: 0 0 200px; } .sac-outcome--notitle .sac-outcome__r { flex: 1 1 560px; } /* ---------- Service pages ---------- */ .sac-svc-body .sac-wrap { display: block; padding-top: 80px; padding-bottom: 80px; } .sac-svc-section + .sac-svc-section { margin-top: 80px; } .sac .sac-svc-section__text { margin-bottom: 8px; } .sac .sac-svc-section .sac-h2 + .sac-svc-section__text, .sac .sac-svc-section .sac-h2 + .sac-cards { margin-top: 20px; } .sac .sac-svc-section--intro .sac-lead { max-width: 860px; } .sac .sac-svc-section--intro .sac-text { max-width: 860px; } .sac .sac-svc-section .sac-cards { margin-top: 28px; } .sac-more-services .sac-chips { margin-top: 20px; } .sac-body .sac-wrap.sac-more-services { display: block; padding-top: 56px; padding-bottom: 72px; } /* Services grid ([sac_services]) */ .sac-svc-wrap { background: transparent; } .sac-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 960px) { .sac-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sac-svc-grid { grid-template-columns: minmax(0, 1fr); } } .sac a.sac-svc { display: flex; flex-direction: column; background: #fff; color: var(--sac-ink); border: 1px solid var(--sac-line); border-top: 4px solid var(--sac-red); padding: 28px 28px 24px; transition: border-color .2s, transform .2s; } .sac a.sac-svc:hover { border-color: var(--sac-ink); border-top-color: var(--sac-red); transform: translateY(-3px); } .sac-svc__n { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: var(--sac-red); } .sac-svc h3 { margin-top: 14px; font-size: 30px; line-height: 1.1; } .sac-svc p { margin: 12px 0 24px; font-size: 16px; line-height: 1.55; color: #333; flex: 1 1 auto; } .sac-svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--sac-line); padding-top: 16px; } .sac-svc__count { font-size: 14px; color: var(--sac-mid); } .sac-svc__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } /* Headings on dark/red bands must stay white (beats the .sac .sac-display colour rule) */ .sac .sac-outcome h2.sac-display, .sac .sac-cta h2.sac-display, .sac .sac-cta-box .sac-display { color: #fff; } .sac .sac-cta p { color: #fff; } /* ---------- 1.2: keep theme / Elementor accent colours (e.g. orange) out of the design ---------- */ body .sac a, body .sac a:visited { color: inherit; text-decoration: none; } body .sac a:hover, body .sac a:focus, body .sac a:active { color: inherit; text-decoration: none; } body .sac .sac-crumbs a { color: var(--sac-mid); } body .sac .sac-crumbs a:hover, body .sac .sac-crumbs a:focus { color: var(--sac-red-text); } body .sac .sac-chip, body .sac .sac-chip:visited { color: var(--sac-ink); } body .sac .sac-chip:hover, body .sac .sac-chip:focus { background: var(--sac-ink); color: #fff; } body .sac a.sac-btn, body .sac a.sac-btn:visited, body .sac a.sac-btn:hover, body .sac a.sac-btn:focus { color: #fff !important; } body .sac a.sac-btn { background: var(--sac-red); } body .sac a.sac-btn:hover, body .sac a.sac-btn:focus { background: #cc0000; } body .sac a.sac-btn--dark { background: var(--sac-ink); } body .sac a.sac-btn--dark:hover, body .sac a.sac-btn--dark:focus { background: #333; } body .sac .sac-pcard:hover h3 { color: var(--sac-red-text); } body .sac .sac-related__head a { border-bottom-color: var(--sac-red); } /* Buttons (filters, Load more): themes usually colour every