/* ========================================================================== Al Saad — Reusable UI components Every repeated element in the design has ONE class here. ========================================================================== */ /* ---- Scroll reveal -------------------------------------------------------- Elements marked [data-reveal] fade + slide in when scrolled into view. The hidden start state only applies when JS is active (.js on ), so content is never hidden if JS fails. */ .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Slide-from-left variant (used for the staircase stats) */ .js [data-reveal="left"] { transform: translateX(-48px); } .js [data-reveal="left"].is-visible { transform: none; } /* Staggered cascade for the Operational Excellence stats */ .ops__stats .stat:nth-child(1) { transition-delay: .05s; } .ops__stats .stat:nth-child(2) { transition-delay: .20s; } .ops__stats .stat:nth-child(3) { transition-delay: .35s; } .ops__stats .stat:nth-child(4) { transition-delay: .50s; } /* ---- Eyebrow label (little bar-chart glyph + text) ------------------------ */ .eyebrow { display: inline-flex; align-items: flex-end; gap: var(--space-3); font-size: var(--fs-eyebrow); font-weight: var(--fw-light); color: var(--text-eyebrow); } /* Brand mark used before the eyebrow label (SVG via mask so it recolors) */ .eyebrow__mark { display: inline-block; width: 24px; height: 30px; flex: none; background-color: var(--color-d-brown); -webkit-mask: url("../img/brand-mark.svg") center / contain no-repeat; mask: url("../img/brand-mark.svg") center / contain no-repeat; } /* Color variants for dark / light / ink backgrounds */ .eyebrow--light { color: var(--color-white); } .eyebrow--light .eyebrow__mark { background-color: var(--color-white); } .eyebrow--dark .eyebrow__mark { background-color: var(--color-d-brown); } .eyebrow--ink { color: var(--color-black); } .eyebrow--ink .eyebrow__mark { background-color: var(--color-black); } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.125rem; line-height: 1; white-space: nowrap; transition: transform var(--transition), opacity var(--transition), background var(--transition); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--cta { background: var(--color-cta); color: var(--color-white); } .btn--glass { background: rgba(255,255,255,.14); color: var(--color-white); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--glass:hover { background: rgba(255,255,255,.22); } .btn--stone { background: var(--color-cta); color: var(--color-white); border-radius: var(--radius-sm); } .btn--block { width: 100%; justify-content: center; } /* Small caret used inside buttons (right-pointing chevron) */ .btn__caret { width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); flex: none; } /* Full arrow (line + head) used in the hero CTA */ .btn__arrow { flex: none; } /* ---- Pills / tags --------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-stroke); border-radius: var(--radius-pill); font-weight: var(--fw-light); font-size: 1.25rem; } .pill--dark { border-color: var(--color-stroke-dark); } .pill-list { display: flex; flex-direction: column; gap: var(--space-5); max-width: 520px; } .pill-list .pill { align-self: flex-start; } /* Segmented toggle (Powder Coating / Metal Fabrication) — compact, centered */ .toggle { display: inline-flex; align-self: center; gap: var(--space-3); padding: var(--space-2); background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.05); border-radius: var(--radius-pill); } .toggle__btn { width: 240px; max-width: 40vw; flex: none; padding: var(--space-5) var(--space-8); border-radius: var(--radius-pill); /* inactive: soft raised white pill */ /* background: #fbf6f2; */ box-shadow: 0 2px 2px rgb(255 255 255), 0 -1px 0px rgb(255 255 255); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.125rem; color: var(--color-stone-800); transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .toggle__btn.is-active { background: var(--color-cta); color: var(--color-white); box-shadow: none; } /* Mobile / tablet: full-width toggle, buttons stacked. */ @media (max-width: 1024px) { .toggle { width: 100%; flex-direction: column; padding: 12px; border-radius: 30px; } .toggle__btn { flex: 1 1 0; width: auto; min-width: 0; max-width: none; padding: var(--space-4) var(--space-3); font-size: 1rem; } } /* ---- Service tag strip (hero bottom bar) ---------------------------------- */ .tagstrip { padding-block: var(--space-6); background: rgba(0,0,0,.4); overflow: hidden; } /* Infinite scrolling marquee ------------------------------------------------ */ .marquee { overflow: hidden; /* Soft fade at both edges */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; width: max-content; will-change: transform; /* !important so the intentional ticker survives the global reduced-motion rule in base.css (which zeroes all animation durations). */ animation-name: alsaad-marquee !important; animation-duration: 30s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } .marquee__group { display: flex; align-items: center; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes alsaad-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } /* one full group = seamless */ } .tagstrip__item { display: inline-flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-8); /* even spacing incl. across the loop seam */ color: var(--color-white); font-size: 1.125rem; white-space: nowrap; } /* The ticker is a deliberate design element, so it keeps scrolling even when the OS requests reduced motion — we only drop the edge-fade there. */ @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } } .tagstrip__item::after { content: ""; width: 14px; height: 17px; /* Exact brand shield icon supplied in the design (white outline) */ background: url("../img/tag-shield.png") center / contain no-repeat; flex: none; } /* ---- Stats (Operational Excellence) --------------------------------------- */ .stat { display: flex; flex-direction: column; gap: var(--space-2); } .stat__value { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: var(--fs-stat); line-height: 1; color: var(--color-white); } .stat__unit { font-size: .55em; } .stat__label { font-size: 1.625rem; color: var(--text-caption); font-weight: var(--fw-regular); } /* ---- Accordion (What We Do service list) ---------------------------------- */ .accordion { display: flex; flex-direction: column; gap: var(--space-10); } .accordion__item { display: flex; flex-direction: column; gap: var(--space-10); } .accordion__row { display: flex; gap: var(--space-5); align-items: flex-start; width: 100%; text-align: left; color: var(--color-ink-2); } .accordion__num { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 2rem; line-height: 1.1; flex: none; } .accordion__body { display: flex; flex-direction: column; gap: var(--space-5); } .accordion__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.5rem; line-height: 1.1; } .accordion__text { font-weight: var(--fw-light); font-size: 1.25rem; color: var(--color-d-brown); max-width: 607px; } /* Keep the CTA sized to its content (not stretched by the flex column) */ .accordion__reveal .btn { align-self: flex-start; } /* collapsed state: hide the expanded content */ .accordion__item:not(.is-open) .accordion__reveal { display: none; } /* ---- Contact info cards --------------------------------------------------- */ .info-card { display: flex; gap: var(--space-3); padding: var(--space-6); background: var(--color-white); border: 1px solid #fff3ea; border-radius: var(--radius-md); } .info-card__icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--color-black); border-radius: 24px; color: var(--color-white); } .info-card__title { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: 1.5rem; line-height: 1; color: var(--color-black); margin-bottom: var(--space-3); } .info-card__meta { font-size: 1rem; color: var(--color-black); line-height: 1.3; } .info-card__meta a { color: var(--color-d-brown); } /* ---- Form ----------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: var(--space-3); } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .form__grid--single { grid-template-columns: 1fr; } .field { width: 100%; padding: var(--space-6) var(--space-3); background: var(--color-d-brown); border: 1px solid var(--color-stroke); border-radius: var(--radius-sm); color: var(--color-l-brown); font-size: 1.25rem; } .field::placeholder { color: var(--color-l-brown); opacity: .8; } textarea.field { min-height: 120px; resize: vertical; } /* ---- Contact Form 7 integration ---- */ /* CF7 renders its own
(class .wpcf7-form) — give it the same vertical rhythm as our native .form. */ .contact__form-wrap .wpcf7-form { display: flex; flex-direction: column; gap: var(--space-3); } /* CF7 wraps every field in a . Make that wrapper fill its grid cell so the .field inside stays full-width. */ .wpcf7-form-control-wrap { display: block; width: 100%; } /* CF7 renders