/* ================================================================ GRAPHISION THEME Wires the Graphision brand system onto the Orisa template. Load order in : ...vendors → main.css → graphision-theme.css ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap'); @import url('graphision-tokens.css'); /* ---- 1 · remap Orisa design variables to Graphision tokens ----- */ :root{ --at-ff-heading: var(--font-display); /* Jost */ --at-ff-body: var(--font-body); /* DM Sans */ --at-theme-primary: var(--color-red-600); /* #CB2129 */ --at-gradient-primary: linear-gradient(95deg, var(--color-red-700) 0%, var(--color-red-500) 100%); } /* ---- 2 · typography — Jost headings with brand tracking -------- */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6, .display-1,.display-2,.display-3, .fw-700,.fw-600{ font-family:'Jost','Century Gothic',sans-serif; } h1,h2,.h1,.h2,.display-1,.display-2,.display-3{ letter-spacing:-0.02em; } /* ---- 3 · brand accent across common Orisa utilities ----------- */ .text-primary{ color:var(--color-red-600)!important; } .bg-primary,.bg-theme-primary{ background-color:var(--color-red-600)!important; } ::selection{ background:var(--color-red-600); color:#fff; } /* ---- 4 · brand-tuned buttons ---------------------------------- */ .at-btn{ font-family:var(--font-body); font-weight:700; letter-spacing:.02em; } /* ============================================================ POLISH - service cards: uniform dark image cards, legible text ============================================================ */ .at-service-card{ position:relative; overflow:hidden; min-height:430px; background-color:var(--color-ink-900); background-size:cover; background-position:center; } .at-service-card img{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover; } .at-service-card a.p-absolute{ position:absolute!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:100%!important; } .at-service-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(9,9,12,.97) 6%, rgba(9,9,12,.72) 40%, rgba(9,9,12,.34) 100%); } .at-service-card .at-service-card-content{ position:absolute!important; z-index:2; left:0!important; right:0!important; bottom:0!important; top:auto!important; margin:0!important; padding:30px!important; transform:none!important; } .at-service-card-content h4, .at-service-card-content h4 a, .at-service-card-content .at-service-card-description p{ color:#ffffff!important; } .at-service-card-content .at-service-card-icon{ color:var(--color-red-500); margin-bottom:10px; } .at-service-card-content .at-service-card-icon svg{ width:32px; height:32px; } /* ============================================================ RED-FORWARD - carry the brand red through the UI ============================================================ */ /* primary CTA buttons - solid brand red */ a.at-btn:not(.bg-transparent), button.at-btn:not(.bg-transparent){ background-color:var(--color-red-600)!important; border-color:var(--color-red-600)!important; color:#ffffff!important; } a.at-btn:not(.bg-transparent):hover, button.at-btn:not(.bg-transparent):hover{ background-color:var(--color-red-700)!important; border-color:var(--color-red-700)!important; } a.at-btn:not(.bg-transparent) span, a.at-btn:not(.bg-transparent) .text-1, a.at-btn:not(.bg-transparent) .text-2, button.at-btn:not(.bg-transparent) span{ color:#ffffff!important; } a.at-btn:not(.bg-transparent) i svg path, button.at-btn:not(.bg-transparent) i svg path{ fill:#ffffff!important; } /* circular arrow buttons - red */ .at-btn-circle{ background-color:var(--color-red-600)!important; border-color:var(--color-red-600)!important; color:#ffffff!important; } .at-btn-circle:hover{ background-color:var(--color-red-700)!important; } .at-btn-circle svg path{ fill:#ffffff!important; } /* section eyebrows / labels - red */ span.at-btn, span.at-btn .text-1, span.at-btn .text-2{ color:var(--color-red-600)!important; } span.at-btn i svg path{ fill:var(--color-red-600)!important; } /* hero & footer - red accents */ .sec-1-home-4__tagline{ color:var(--color-red-500)!important; } .sec-1-home-4__brand-suffix, .footer-4-connect-title sup{ color:var(--color-red-500)!important; } /* links - red on hover */ a:hover{ color:var(--color-red-600); } .sec-1-home-4__tag:hover{ border-color:var(--color-red-500)!important; color:var(--color-red-500)!important; } /* ============================================================ CONFORMANCE - brand type scale, heading alignment, nav fit ============================================================ */ /* base body text -> brand 16px */ body{ font-size:16px; } /* heading scale - Graphision brand guidelines (fluid clamp) */ h1,.h1{ font-size:clamp(1.9rem,1.35rem+1.7vw,2.75rem)!important; line-height:1.12; letter-spacing:-.02em; } h2,.h2{ font-size:clamp(1.6rem,1.25rem+1.1vw,2.25rem)!important; line-height:1.16; letter-spacing:-.015em; } h3,.h3{ font-size:clamp(1.55rem,1.15rem+1.35vw,2.25rem)!important; line-height:1.2; letter-spacing:-.012em; } h4,.h4{ font-size:1.25rem!important; line-height:1.35; letter-spacing:-.005em; } h5,.h5{ font-size:1.0625rem!important; line-height:1.45; } h6,.h6{ font-size:1rem!important; line-height:1.5; } /* hero & footer display headings keep a larger, deliberate scale */ .sec-1-home-4__headline{ font-size:clamp(2rem,1.25rem+2.4vw,3.25rem)!important; line-height:1.12; } .sec-1-home-4__brand{ font-size:clamp(3.25rem,1rem+9vw,8.5rem)!important; line-height:1; } .footer-4-connect-title{ font-size:clamp(2.75rem,1rem+8vw,7.5rem)!important; } /* section eyebrows - brand overline */ span.at-btn .text-1, span.at-btn .text-2{ font-size:13px!important; font-weight:700!important; letter-spacing:.12em!important; } /* primary navigation - keep all 7 links on one row */ .at-main-menu nav ul, .at-mobile-menu-active > ul{ display:flex!important; flex-wrap:nowrap!important; gap:0!important; justify-content:center; } .at-main-menu nav ul li a, .at-mobile-menu-active > ul > li > a{ padding-left:13px!important; padding-right:13px!important; font-size:15px!important; white-space:nowrap; } /* registered mark - small superscript, not inherited huge */ .sec-1-home-4__brand-suffix{ font-size:.22em!important; } .sec-1-home-4__brand-suffix sup{ vertical-align:super; } .footer-4-connect-title sup{ font-size:.2em!important; } /* full logo lockup - full colour on light, white reverse on dark. max-width:none keeps the natural aspect ratio — without it a narrow header column clamps the width while height stays fixed (squish). */ .gr-logo{ height:36px; width:auto!important; max-width:none!important; display:block; filter:none!important; } [data-bs-theme="dark"] .gr-logo{ filter:brightness(0) invert(1)!important; } /* registered mark v2 - small superscript at the wordmark cap height */ .sec-1-home-4__brand-suffix{ font-size:.2em!important; vertical-align:2.85em!important; } .sec-1-home-4__brand-suffix sup{ font-size:1em!important; vertical-align:baseline!important; } .footer-4-connect-title sup{ font-size:.2em!important; vertical-align:2.85em!important; } /* ============================================================ GUIDELINE CONFORMANCE - final audit pass light surfaces, heading sizes, overline tracking -> exact tokens ============================================================ */ /* light surfaces -> exact brand Neutral scale. IMPORTANT: scoped to the light theme only — pinning these on :root clobbered the template's [data-bs-theme=dark] remapping and stopped dark mode from ever applying. In dark mode the template's own neutral-dark tokens take over. */ [data-bs-theme="light"]{ --at-neutral-0: #FFFFFF; --at-neutral-50: #F7F7F8; --at-neutral-100: #EEEEF0; --at-neutral-200: #E3E3E7; --at-neutral-500: #51515A; --at-neutral-700: #2A2A33; --at-neutral-800: #1C1C23; --at-neutral-900: #17171B; --at-neutral-950: #09090C; } /* headings -> exact brand type-scale steps */ h1,.h1{ font-size:clamp(1.875rem,1.42rem+1.5vw,2.75rem)!important; } h2,.h2,h3,.h3{ font-size:clamp(1.625rem,1.40rem+0.8vw,2.125rem)!important; } .sec-1-home-4__headline{ font-size:clamp(2.125rem,1.42rem+2.3vw,3.5rem)!important; } /* section eyebrow -> brand overline tracking (+14%) */ span.at-btn .text-1, span.at-btn .text-2{ letter-spacing:.14em!important; } /* ============================================================ BRAND IMAGERY - cinematic dark grade Unifies stock photography of varying brightness to the brand's dark, single-light-source art direction (per the guidelines). ============================================================ */ .at-service-card img{ filter:brightness(.72) contrast(1.05) saturate(.96); } /* ============================================================ DARK MODE - Graphision component touch-ups Surfaces flip automatically via the template's neutral tokens; these cover the few brand-specific components. ============================================================ */ [data-bs-theme="dark"] .ind-card:hover{ box-shadow:0 16px 40px rgba(0,0,0,.55); } [data-bs-theme="dark"] .sec-1-home-4__tag{ border-color:rgba(255,255,255,.16); } /* ============================================================ MOBILE & RESPONSIVE - alignment + brand conformance ============================================================ */ body{ overflow-x:hidden; } h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{ overflow-wrap:break-word; } @media (max-width:991px){ /* trim the largest desktop section padding to a sane tablet rhythm */ .sec-3-home-4.pt-130{ padding-top:84px!important; } } @media (max-width:767px){ /* hero CTAs - equal width, stacked, text-left / arrow-right */ .sec-1-home-4__btns{ flex-direction:column; align-items:stretch; } .sec-1-home-4__btns .at-btn{ width:100%; justify-content:space-between; } /* section rhythm - trimmed for small screens */ .sec-2-home-4.pt-80{ padding-top:60px!important; } .sec-2-home-4.pb-80{ padding-bottom:60px!important; } .sec-3-home-4.pt-130{ padding-top:60px!important; } .sec-industries{ padding-top:60px!important; padding-bottom:60px!important; } /* cards */ .at-service-card{ min-height:300px; } .at-service-card .at-service-card-content{ padding:24px!important; } .sec-industries .ind-card{ padding:26px 22px; } .sec-industries .ind-card__title{ font-size:19px; } /* logo */ .gr-logo{ height:30px; } }