/* ============================================================================ Shared sub-brand site styles (TAO, WOOMET, Structures...). Consumes tokens.css + base.css. Every component is accent-driven, so it retints to whatever .theme-* the page sets. No brand is hard-coded here. ========================================================================== */ /* Accent-driven hero wash (overrides portal.css's Studio/Structures gradient on single-brand pages - resolves to the page's own --accent). */ .hero__bg { background: radial-gradient(60% 50% at 75% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(50% 45% at 8% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); } /* --- Section rhythm + brand bands --------------------------------------- */ .tw-band { position: relative; } .tw-band--alt { background: var(--bg-raised); } .tw-band__head { max-width: 60ch; margin-bottom: var(--space-16); } .tw-band__head .accent-rule { margin-bottom: var(--space-6); } .tw-logo-lockup { height: clamp(40px, 6vw, 60px); width: auto; margin-bottom: var(--space-8); } .tw-logo-lockup img { height: 100%; width: auto; } /* --- Generic feature grid (pillars / services / process) ----------------- */ .feature-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 640px){ .feature-grid--2 { grid-template-columns: repeat(2,1fr); } } @media (min-width: 880px){ .feature-grid--3 { grid-template-columns: repeat(3,1fr); } .feature-grid--2 { grid-template-columns: repeat(2,1fr); } } .tw-card { border: var(--hairline); border-radius: var(--radius); background: var(--surface); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-emph); } .tw-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tw-card__step { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--accent-ink); } .tw-card__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--text); } .tw-card__body { color: var(--text-muted); font-size: var(--step-0); } /* --- DMI strip (Design / Manufacture / Install) -------------------------- */ .dmi { display: grid; grid-template-columns: 1fr; gap: var(--space-4); border-block: var(--hairline); padding-block: var(--space-8); } @media (min-width: 720px){ .dmi { grid-template-columns: repeat(3,1fr); } } .dmi__item { display: flex; align-items: baseline; gap: var(--space-4); } .dmi__n { font-family: var(--font-display); color: var(--accent-ink); font-size: var(--step-1); } .dmi__t { font-size: var(--step-1); font-family: var(--font-display); color: var(--text); } /* --- Chips (industries / project roster) --------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .chip { font-size: var(--step--1); color: var(--text-muted); border: var(--hairline); border-radius: var(--radius-pill); padding: .45em 1em; transition: color var(--dur-2), border-color var(--dur-2); } .chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .chip--gcc { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* --- Materials matrix ---------------------------------------------------- */ .materials { display: grid; gap: var(--space-6); grid-template-columns: repeat(2,1fr); } @media (min-width: 760px){ .materials { grid-template-columns: repeat(5,1fr); } } .material h4 { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-3); } .material ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; } .material li { color: var(--text-muted); font-size: var(--step-0); } /* --- Product cards (specs) ----------------------------------------------- */ .products { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 760px){ .products { grid-template-columns: repeat(3,1fr); } } .product { border: var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; } .product__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--text); padding: var(--space-6) var(--space-6) 0; } .product__specs { list-style: none; padding: var(--space-4) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: .3rem; } .product__specs li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--step--1); color: var(--text-muted); border-bottom: 1px dotted var(--border); padding-block: .35rem; } .product__specs li b { color: var(--text); font-weight: var(--weight-med); } /* --- Image placeholder (per-company "visual to follow") ------------------ */ .tw-figure { border: 1px dashed var(--border); border-radius: var(--radius); background: repeating-linear-gradient(45deg, transparent, transparent 10px, color-mix(in srgb, var(--accent) 6%, transparent) 10px, color-mix(in srgb, var(--accent) 6%, transparent) 20px), var(--surface); min-height: clamp(180px, 26vw, 320px); display: grid; place-items: center; text-align: center; color: var(--text-faint); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-8); } /* --- Real figure (image) ------------------------------------------------- */ .tw-photo { border-radius: var(--radius); overflow: hidden; border: var(--hairline); } .tw-photo img { display: block; width: 100%; height: auto; } /* Uniform 3:4 sign tiles (TAO wayfinding gallery) */ .tw-photo--sign img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; } /* CP phase icons — process stage cards + DMI tiles (TAO) */ .tw-stagecard__icon { width: 56px; height: 56px; object-fit: contain; object-position: left center; margin-bottom: var(--space-4); } .tw-stagecard__step { color: var(--accent-ink); font-family: var(--font-display); margin-right: .45em; } .dmi-tile { text-align: center; border: var(--hairline); border-radius: var(--radius); background: var(--surface); padding: var(--space-8) var(--space-6); } .dmi-tile__icon { width: 76px; height: 76px; object-fit: contain; margin-bottom: var(--space-5); } .dmi-tile__n { color: var(--accent-ink); font-family: var(--font-display); font-size: var(--step-0); } .dmi-tile__t { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--text); margin-top: var(--space-1); } .tw-signgroup { margin-bottom: var(--space-16); } .tw-signgroup__head { margin-bottom: var(--space-6); } .tw-signgroup__head .eyebrow { margin: 0; } /* --- Form ---------------------------------------------------------------- */ .form { display: grid; gap: var(--space-6); max-width: 40rem; } .form__row { display: grid; gap: var(--space-6); } @media (min-width: 600px){ .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { font-size: var(--step--1); color: var(--text-muted); letter-spacing: .02em; } .field input, .field select, .field textarea { font: inherit; color: var(--text); background: var(--surface); border: var(--hairline); border-radius: var(--radius-sm); padding: .8em 1em; width: 100%; transition: border-color var(--dur-2); } .field textarea { min-height: 8.5rem; resize: vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .form__note { font-size: var(--step--1); color: var(--text-faint); } /* --- Contact / office detail rows ---------------------------------------- */ .office { display: grid; gap: var(--space-2); } .office a { color: var(--accent-ink); } .office__label { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); } .map-embed { border: var(--hairline); border-radius: var(--radius); overflow: hidden; min-height: clamp(220px, 32vw, 380px); background: repeating-linear-gradient(45deg, transparent, transparent 12px, color-mix(in srgb, var(--accent) 6%, transparent) 12px, color-mix(in srgb, var(--accent) 6%, transparent) 24px), var(--surface); display: grid; place-items: center; text-align: center; padding: var(--space-8); color: var(--text-faint); font-size: var(--step--1); } /* --- Section divider ----------------------------------------------------- */ .tw-rule { border: 0; border-top: var(--hairline); margin: 0; }