/**
* Base styles — mytio2.com
* Consumes tokens.css only; BEM naming for primitives.
*
* Google Fonts (add to HTML before these stylesheets):
*
*
*
*
*
*
*/
/* --- Reset --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
/* --- Base --- */
html {
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
background-attachment: fixed;
background-color: var(--color-background);
background-image:
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 0),
radial-gradient(ellipse 90% 55% at 8% -8%, color-mix(in srgb, var(--color-secondary) 14%, transparent), transparent 58%),
radial-gradient(ellipse 70% 45% at 96% 102%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 52%),
linear-gradient(
168deg,
var(--color-background) 0%,
color-mix(in srgb, var(--color-background) 88%, var(--color-background-warm)) 100%
);
background-size: 28px 28px, auto, auto, auto;
color: var(--color-on-background);
display: flex;
flex-direction: column;
font-family: var(--font-family-sans);
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body-md);
min-height: 100vh;
}
main {
flex: 1;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
/* --- Typography --- */
h1,
h2,
h3,
h4 {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-headline-md);
}
h1 {
font-size: var(--font-size-display-lg);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-display-lg);
letter-spacing: var(--letter-spacing-display-lg);
}
h2 {
font-size: var(--font-size-headline-md);
}
h3 {
font-size: var(--font-size-headline-sm);
line-height: var(--line-height-headline-sm);
}
h4 {
font-size: var(--font-size-body-lg);
line-height: var(--line-height-body-lg);
}
p {
margin-bottom: var(--space-4);
}
p:last-child {
margin-bottom: 0;
}
.text-body-lg {
font-size: var(--font-size-body-lg);
line-height: var(--line-height-body-lg);
}
.text-body-sm {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
}
.text-label {
color: var(--color-tertiary);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-label-md);
line-height: var(--line-height-label-md);
text-transform: uppercase;
}
.text-mono {
font-family: var(--font-family-mono);
font-size: var(--font-size-mono-data);
line-height: var(--line-height-mono-data);
}
/* --- Links --- */
a {
color: var(--color-primary);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover {
text-decoration: underline;
}
/* --- Focus --- */
:focus {
outline: none;
}
:focus-visible {
outline: var(--focus-ring-width) solid var(--color-primary);
outline-offset: var(--focus-ring-offset);
}
/* --- Layout --- */
.container {
margin-inline: auto;
max-width: var(--container-max-width);
padding-inline: var(--gutter);
width: 100%;
}
.section {
padding-block: var(--section-y);
}
/* --- Button (BEM) --- */
.btn {
align-items: center;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
display: inline-flex;
font-weight: var(--font-weight-semibold);
gap: var(--space-2);
justify-content: center;
padding: var(--btn-padding-y) var(--btn-padding-x);
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
.btn--primary:hover {
filter: brightness(0.95);
text-decoration: none;
}
.btn--secondary {
background-color: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--secondary:hover {
background-color: var(--color-surface-dim);
text-decoration: none;
}
.btn--outline {
background-color: transparent;
border-color: var(--color-outline);
color: var(--color-on-surface);
}
.btn--outline:hover {
background-color: var(--color-surface-dim);
text-decoration: none;
}
/* --- Card (BEM) --- */
.card {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background-color: color-mix(in srgb, var(--color-surface-container) 94%, transparent);
border: 1px solid color-mix(in srgb, var(--color-outline-variant) 75%, transparent);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.card--elevated {
box-shadow: var(--shadow-card);
}
.card__title {
color: var(--color-primary);
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.card__body {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
}
/* --- Badge (BEM) --- */
.badge {
border-radius: var(--radius-sm);
display: inline-block;
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-label-md);
padding: var(--space-1) var(--space-3);
}
.badge--compliance {
background-color: var(--color-secondary);
color: var(--color-on-secondary);
}
/* --- Quick Answer --- */
.quick-answer {
background-color: var(--color-primary-container);
border-left: var(--quick-answer-border-width) solid var(--color-primary);
border-radius: var(--radius-md);
color: var(--color-on-primary-container);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
padding: var(--space-4) var(--space-6);
}
/* --- Table (BEM) --- */
.table-scroll {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
width: 100%;
}
.table {
background-color: var(--color-surface-container);
border-collapse: collapse;
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
width: 100%;
}
.table caption {
caption-side: top;
font-weight: var(--font-weight-semibold);
padding-block: var(--space-2);
text-align: left;
}
.table th,
.table td {
border: 1px solid var(--color-surface-dim);
padding: var(--space-3) var(--space-4);
text-align: left;
}
.table th {
background-color: var(--color-surface);
color: var(--color-on-surface);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-label-md);
text-transform: uppercase;
}
.table tbody tr:nth-child(even) {
background-color: var(--color-surface);
}
.table td.text-mono,
.table th.text-mono {
font-family: var(--font-family-mono);
font-size: var(--font-size-mono-data);
}
/* --- Trust metric (primitive for Story 1.4) --- */
.trust-metric__value {
color: var(--color-primary);
display: block;
font-size: var(--trust-metric-value-size);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-trust-metric);
}
.trust-metric__label {
color: var(--color-tertiary);
display: block;
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-label-md);
line-height: var(--line-height-label-md);
text-transform: uppercase;
}
/* --- Skip link --- */
.skip-link {
background-color: var(--color-surface-container);
border-radius: var(--radius-sm);
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
left: var(--space-4);
padding: var(--space-2) var(--space-4);
position: absolute;
text-decoration: none;
top: var(--space-4);
transform: translateY(-200%);
z-index: 1000;
}
.skip-link:focus-visible {
transform: translateY(0);
}
/* --- Site header & nav --- */
.site-header {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background-color: color-mix(in srgb, var(--color-surface-container) 86%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 65%, transparent);
position: sticky;
top: 0;
z-index: 100;
}
.site-header__inner {
align-items: center;
display: flex;
gap: var(--space-4);
height: var(--nav-height);
justify-content: space-between;
}
.site-header__logo {
align-items: center;
display: flex;
flex-shrink: 0;
line-height: 0;
text-decoration: none;
}
.site-header__logo:hover {
text-decoration: none;
}
.site-header__logo-img {
display: block;
height: 52px;
max-width: min(14rem, 58vw);
width: auto;
}
.site-nav__toggle {
align-items: center;
background-color: transparent;
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius-md);
cursor: pointer;
display: none;
height: 44px;
justify-content: center;
padding: 0;
width: 44px;
}
.site-nav__toggle-icon {
background-color: var(--color-primary);
border-radius: 1px;
display: block;
height: 2px;
position: relative;
width: 20px;
}
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
background-color: var(--color-primary);
border-radius: 1px;
content: "";
height: 2px;
left: 0;
position: absolute;
width: 20px;
}
.site-nav__toggle-icon::before {
top: -6px;
}
.site-nav__toggle-icon::after {
top: 6px;
}
.site-nav__backdrop {
display: none;
}
.site-nav__list {
display: flex;
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__link {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
text-decoration: none;
white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
color: var(--color-primary);
text-decoration: none;
}
.site-nav__link[aria-current="page"] {
font-weight: var(--font-weight-semibold);
}
/* --- Site footer --- */
.site-footer {
background:
linear-gradient(
165deg,
var(--color-primary) 0%,
color-mix(in srgb, var(--color-primary) 78%, var(--color-secondary)) 100%
);
color: var(--color-on-primary);
margin-top: auto;
padding-block: var(--space-12) var(--space-5);
}
.site-footer a {
color: color-mix(in srgb, var(--color-on-primary) 92%, transparent);
text-decoration: none;
}
.site-footer a:hover {
color: var(--color-accent);
text-decoration: none;
}
.site-footer__grid {
align-items: start;
display: grid;
gap: var(--space-8);
grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(150px, 1fr));
margin-bottom: var(--space-8);
}
.site-footer__heading {
color: var(--color-on-primary);
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-6);
position: relative;
}
.site-footer__heading::after {
background-color: var(--color-accent);
bottom: calc(var(--space-2) * -1);
content: "";
height: 2px;
left: 0;
position: absolute;
width: 30px;
}
.site-footer__intro {
color: color-mix(in srgb, var(--color-on-primary) 84%, transparent);
font-size: var(--font-size-body-sm);
line-height: 1.6;
margin: 0;
max-width: 22rem;
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__list li {
font-size: var(--font-size-body-sm);
line-height: 1.5;
margin-bottom: var(--space-3);
}
.site-footer__list li:last-child {
margin-bottom: 0;
}
.site-footer__list--contact li {
color: color-mix(in srgb, var(--color-on-primary) 84%, transparent);
}
.site-footer__contact-link {
display: inline-flex;
}
.site-footer__list a:hover {
padding-left: 4px;
}
.site-footer__contact-link:hover {
padding-left: 0;
}
.site-footer__bottom {
border-top: 1px solid color-mix(in srgb, var(--color-on-primary) 16%, transparent);
color: color-mix(in srgb, var(--color-on-primary) 72%, transparent);
padding-top: var(--space-5);
text-align: center;
}
.site-footer__bottom p {
margin: 0;
}
/* --- Homepage (Story 1.4) --- */
.hero {
align-items: center;
background:
linear-gradient(
to bottom,
color-mix(in srgb, var(--color-primary) 58%, transparent) 0%,
color-mix(in srgb, var(--color-primary) 42%, transparent) 55%,
color-mix(in srgb, var(--color-background) 92%, transparent) 100%
),
url("/assets/img/hero/hero-bg.png") center / cover no-repeat;
color: var(--color-on-primary);
display: flex;
min-height: clamp(320px, 54.5vw, 558px);
padding-block: var(--space-10);
text-align: center;
}
.hero__content {
margin-inline: auto;
max-width: 48rem;
}
.hero__content h1 {
color: var(--color-on-primary);
font-size: clamp(1.75rem, 4.2vw, 2.625rem);
line-height: 1.2;
margin-bottom: var(--space-4);
text-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 85%, transparent);
}
.hero__subline {
color: color-mix(in srgb, var(--color-on-primary) 92%, transparent);
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.5;
margin-bottom: var(--space-6);
text-shadow: 0 1px 8px color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.btn--on-dark {
background-color: transparent;
border-color: var(--color-on-primary);
color: var(--color-on-primary);
}
.btn--on-dark:hover {
background-color: color-mix(in srgb, var(--color-on-primary) 12%, transparent);
}
.page-section-header {
margin-bottom: var(--space-8);
text-align: center;
}
.page-section-header h2 {
margin-bottom: 0;
}
.page-section-intro {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-lg);
line-height: var(--line-height-body-lg);
margin: var(--space-3) auto 0;
max-width: 45rem;
}
.trust-metrics {
margin-top: calc(var(--space-6) * -1);
padding-block: var(--space-10) var(--space-8);
position: relative;
}
.trust-metrics::before {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 75%, transparent),
transparent
);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 0;
}
.trust-metrics .container {
position: relative;
z-index: 1;
}
.trust-metrics__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(5, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.trust-metrics__grid > li {
min-width: 0;
}
.trust-metric {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: color-mix(in srgb, var(--color-surface-container) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--color-outline-variant) 75%, transparent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
min-width: 0;
padding: var(--space-6);
text-align: center;
}
.trust-metric--qualitative .trust-metric__value {
font-size: var(--font-size-headline-sm);
line-height: var(--line-height-headline-sm);
overflow-wrap: break-word;
}
.why-choose__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.why-choose__grid .card {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background-color: color-mix(in srgb, var(--color-surface-container) 94%, transparent);
border-bottom: 4px solid transparent;
box-shadow: var(--shadow-card);
text-align: center;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.why-choose__grid .card:hover {
border-bottom-color: var(--color-accent);
transform: translateY(-4px);
}
/* --- Inner pages (Story 1.5) --- */
.breadcrumb {
margin-bottom: var(--space-6);
}
.breadcrumb a {
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.page-header {
margin-bottom: var(--space-8);
}
.page-header__lead {
color: var(--color-on-surface-variant);
margin-top: var(--space-4);
max-width: 48rem;
}
.page-content {
margin-bottom: var(--space-8);
max-width: 48rem;
}
.page-content h2 {
font-size: var(--font-size-headline-sm);
margin-bottom: var(--space-4);
}
.entity-block {
margin-top: var(--space-4);
}
.breadcrumbs {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: color-mix(in srgb, var(--color-surface) 72%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);
font-size: var(--font-size-body-sm);
padding-block: var(--space-4);
}
.breadcrumbs a {
color: var(--color-on-surface-variant);
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--color-primary);
text-decoration: underline;
}
.breadcrumbs span {
color: var(--color-outline);
margin-inline: var(--space-2);
}
.page-title {
font-size: var(--font-size-headline-md);
line-height: var(--line-height-headline-md);
margin-bottom: 0;
}
.contact-page-intro {
margin-top: var(--space-3);
}
.contact-page,
.about-page {
padding-block: var(--section-y-mobile);
}
.about-intro-grid {
display: flex;
flex-direction: column;
gap: var(--space-8);
min-width: 0;
}
.about-intro-content,
.about-intro-visual {
min-width: 0;
}
.about-intro-visual {
align-items: stretch;
background-color: var(--color-surface-variant);
border-radius: var(--radius-md);
display: flex;
justify-content: center;
min-height: min(52vw, 360px);
order: -1;
overflow: hidden;
padding: 0;
width: 100%;
}
.about-intro-visual__img {
display: block;
height: 100%;
min-height: min(52vw, 360px);
object-fit: cover;
object-position: center;
width: 100%;
}
@media (min-width: 768px) {
.about-intro-grid {
align-items: stretch;
display: grid;
gap: var(--space-10);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}
.about-intro-content .page-title {
text-align: left;
}
.about-intro-visual {
min-height: 480px;
order: 0;
}
.about-intro-visual__img {
min-height: 480px;
}
}
@media (min-width: 1024px) {
.about-intro-visual {
min-height: 560px;
}
.about-intro-visual__img {
min-height: 560px;
}
}
.about-intro-content .page-title {
margin-bottom: var(--space-4);
text-align: center;
}
.about-intro-lead {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-lg);
line-height: var(--line-height-body-lg);
margin-bottom: var(--space-4);
}
.about-intro-content p {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin-bottom: var(--space-4);
}
.about-intro-address {
color: var(--color-on-surface);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
}
.about-section--alt {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--color-surface) 85%, transparent),
color-mix(in srgb, var(--color-surface-dim) 35%, transparent)
);
border-block: 1px solid color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
}
.about-features__grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.about-features__grid .card--feature {
border-bottom: 4px solid transparent;
box-shadow: var(--shadow-card);
min-width: 0;
text-align: center;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.about-features__grid .card--feature:hover {
border-bottom-color: var(--color-accent);
transform: translateY(-4px);
}
.about-stats-intro {
max-width: 50rem;
}
.about-cta {
margin-top: var(--space-8);
text-align: center;
}
.contact-wrapper {
align-items: stretch;
display: grid;
gap: var(--space-12);
grid-template-columns: 1fr 2fr;
}
.contact-wrapper > * {
min-width: 0;
}
.contact-info-card,
.contact-form-container {
display: flex;
flex-direction: column;
}
.contact-info-card {
background-color: var(--color-primary);
border-radius: var(--radius-md);
color: var(--color-on-primary);
padding: var(--space-8);
}
.contact-info-card a {
color: var(--color-on-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-info-card a:hover {
color: var(--color-accent);
}
.contact-info-item {
margin-bottom: var(--space-6);
}
.contact-info-item:last-child {
margin-bottom: 0;
}
.contact-info-item__label {
color: var(--color-accent);
font-size: var(--font-size-body-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body-lg);
margin-bottom: var(--space-2);
}
.contact-info-item p {
color: color-mix(in srgb, var(--color-on-primary) 92%, transparent);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
}
.panel-title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
line-height: var(--line-height-headline-sm);
margin-bottom: var(--space-6);
}
.contact-info-card .panel-title {
color: var(--color-on-primary);
}
.rfq {
padding-block: 0;
}
.rfq__intro {
margin-bottom: var(--space-6);
}
.rfq__form {
display: flex;
flex: 1;
flex-direction: column;
gap: 0;
}
.rfq__row {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr 1fr;
}
.rfq__field {
display: grid;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.rfq__field--grow {
display: flex;
flex: 1;
flex-direction: column;
margin-bottom: var(--space-4);
}
.rfq__field label {
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-semibold);
}
.rfq__control {
background-color: var(--color-surface-container);
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius-md);
color: var(--color-on-surface);
font: inherit;
min-height: 44px;
padding: var(--space-3) var(--space-4);
width: 100%;
}
.rfq__field--grow .rfq__control {
flex: 1;
min-height: 120px;
resize: vertical;
}
.rfq__control:focus-visible {
border-color: var(--color-primary);
outline: var(--focus-ring-width) solid var(--color-primary);
outline-offset: var(--focus-ring-offset);
}
.rfq__submit {
font-size: var(--font-size-body-lg);
margin-top: var(--space-2);
width: 100%;
}
/* --- Form alerts & honeypot --- */
.form-alert {
background-color: var(--color-surface-dim);
border: 1px solid var(--color-accent);
border-radius: var(--radius-sm);
color: var(--color-error);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
}
.honeypot {
display: none !important;
}
.rfq-thankyou {
background-color: var(--color-surface-dim);
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius-md);
padding: var(--space-8);
text-align: center;
}
.rfq-thankyou__title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
margin-bottom: var(--space-3);
}
/* --- Products page (Story 3.1) --- */
.products-page {
padding-block: var(--section-y-mobile);
}
.product-category {
margin-top: var(--space-12);
}
.product-category:first-of-type {
margin-top: var(--space-8);
}
.product-list--cols-3 {
align-items: stretch;
}
.product-category__header {
margin-bottom: var(--space-6);
}
.product-category__title {
color: var(--color-primary);
font-size: var(--font-size-headline-md);
line-height: var(--line-height-headline-md);
margin: 0 0 var(--space-2);
}
.product-category__intro {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
margin: 0;
max-width: 52rem;
}
.product-card__meta {
display: grid;
gap: var(--space-2);
margin: 0;
text-align: left;
width: 100%;
}
.product-card__meta-row {
display: grid;
gap: var(--space-1);
grid-template-columns: 1fr;
}
.product-card__meta dt {
color: var(--color-on-surface-variant);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-label-md);
margin: 0;
}
.product-card__meta dd {
color: var(--color-on-surface);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin: 0;
}
@media (min-width: 480px) {
.product-card__meta-row {
grid-template-columns: 7.5rem 1fr;
gap: var(--space-3);
}
}
.products-page__sds-note {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin-top: var(--space-3);
}
.product-list {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
list-style: none;
margin: 0;
padding: 0;
}
.product-list > li {
display: flex;
}
.product-card {
align-items: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background-color: color-mix(in srgb, var(--color-surface-container) 94%, transparent);
border: 1px solid color-mix(in srgb, var(--color-outline-variant) 75%, transparent);
border-radius: var(--radius-lg);
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-3);
height: 100%;
padding: var(--space-6);
text-align: center;
}
.product-card--featured {
border-color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.product-card--list-only {
background-color: var(--color-surface);
opacity: 0.95;
}
.product-card__header {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
width: 100%;
}
.product-card__title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
line-height: var(--line-height-headline-sm);
margin: 0;
}
.product-card__body {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin: 0;
}
.product-card__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.product-card__chip {
background-color: var(--color-surface-dim);
border-radius: var(--radius-sm);
color: var(--color-on-surface-variant);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-label-md);
padding: var(--space-1) var(--space-3);
}
.product-card__action {
display: flex;
justify-content: center;
margin: auto 0 0;
width: 100%;
}
.badge--phase2 {
background-color: var(--color-surface-dim);
border: 1px solid var(--color-outline-variant);
color: var(--color-on-surface-variant);
flex-shrink: 0;
}
@media (min-width: 640px) {
.product-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.products-page {
padding-block: var(--section-y);
}
.product-category__header {
border-bottom: 1px solid var(--color-outline-variant);
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
text-align: left;
}
.product-category__intro {
max-width: none;
}
.product-list,
.product-list--cols-3 {
gap: var(--space-6);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-list--cols-3 > li {
min-width: 0;
}
.product-card {
align-items: stretch;
gap: var(--space-4);
padding: var(--space-6) var(--space-8);
text-align: left;
}
.product-card__header {
border-bottom: 1px solid var(--color-outline-variant);
justify-content: flex-start;
margin-bottom: var(--space-1);
padding-bottom: var(--space-3);
}
.product-card__title {
font-size: var(--font-size-headline-md);
line-height: var(--line-height-headline-md);
}
.product-card__meta-row {
grid-template-columns: 6.75rem 1fr;
}
.product-card__action {
justify-content: flex-start;
margin-top: auto;
padding-top: var(--space-2);
}
}
/* --- Product detail pages (parity with titantitanium product-mix-p75) --- */
body.page-product-detail {
background-color: var(--color-surface-container);
}
.breadcrumbs--product {
background-color: var(--color-surface);
font-size: var(--font-size-body-sm);
padding-block: 20px;
}
.product-detail-page.section {
background-color: var(--color-surface-container);
padding-block: 40px;
}
.contact-wrapper.product-hero-layout {
align-items: stretch;
gap: 40px;
grid-template-columns: 1fr 1fr;
}
.product-hero-image {
align-items: center;
aspect-ratio: 6 / 5;
background-color: #eee;
border: 0;
border-radius: var(--radius-md);
cursor: default;
display: flex;
justify-content: center;
max-height: 500px;
overflow: hidden;
padding: 0;
width: 100%;
}
.product-hero-image--zoomable {
cursor: zoom-in;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-hero-image--zoomable:hover,
.product-hero-image--zoomable:focus-visible {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
transform: translateY(-1px);
}
.product-hero-image--zoomable:focus-visible {
outline: none;
}
.product-hero-image img {
border-radius: var(--radius-md);
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
width: 100%;
}
.product-hero-image.is-placeholder::after {
color: #999;
content: attr(data-sku) " - product image";
font-weight: var(--font-weight-bold);
padding: 20px;
text-align: center;
}
/* --- Product image lightbox --- */
.product-image-lightbox {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
padding: var(--space-5);
position: fixed;
z-index: 2100;
}
.product-image-lightbox[hidden] {
display: none !important;
}
.product-image-lightbox__backdrop {
background: color-mix(in srgb, var(--color-primary) 62%, transparent);
inset: 0;
position: absolute;
}
.product-image-lightbox__dialog {
background-color: var(--color-surface-container);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
max-height: min(92vh, 960px);
max-width: min(96vw, 1200px);
overflow: auto;
padding: var(--space-4);
position: relative;
width: 100%;
}
.product-image-lightbox__close {
background: transparent;
border: 0;
color: var(--color-on-surface-variant);
cursor: pointer;
font-size: 1.75rem;
line-height: 1;
padding: var(--space-2);
position: absolute;
right: var(--space-2);
top: var(--space-2);
z-index: 1;
}
.product-image-lightbox__close:hover,
.product-image-lightbox__close:focus-visible {
color: var(--color-primary);
}
.product-image-lightbox__img {
display: block;
height: auto;
margin-inline: auto;
max-height: calc(min(92vh, 960px) - var(--space-8));
max-width: 100%;
object-fit: contain;
width: auto;
}
body.product-image-lightbox-open {
overflow: hidden;
}
.product-detail h1 {
color: var(--color-primary);
font-size: 36px;
font-weight: var(--font-weight-bold);
letter-spacing: normal;
line-height: 1.2;
margin: 10px 0 16px;
}
.product-tag {
background-color: var(--color-surface);
border-radius: 20px;
color: var(--color-primary);
display: inline-block;
font-size: 12px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.04em;
margin-bottom: 10px;
padding: 4px 12px;
text-transform: uppercase;
}
.product-detail .quick-answer {
margin-bottom: var(--space-5);
}
.product-applications {
margin-bottom: 20px;
}
.product-applications h3 {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: 12px;
}
.product-applications ul {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
list-style: disc;
margin: 0;
padding-left: 20px;
}
.product-applications li {
margin-bottom: 4px;
}
.product-cta-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product-cta-row .btn {
border-radius: var(--radius-sm);
flex: 1 1 0;
min-width: 12rem;
padding: 12px 30px;
text-align: center;
}
.product-cta-row .btn--secondary {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-on-accent);
}
.product-cta-row .btn--secondary:hover {
background-color: var(--color-accent);
filter: brightness(0.92);
text-decoration: none;
}
.product-cta-row .btn--outline {
background-color: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.product-cta-row .btn--outline:hover {
background-color: var(--color-primary);
color: var(--color-on-primary);
text-decoration: none;
}
.product-detail-page .section-title {
color: var(--color-primary);
font-size: 28px;
font-weight: var(--font-weight-semibold);
line-height: 1.3;
margin-bottom: 20px;
}
.product-detail-page .container {
min-width: 0;
}
.product-page-block {
margin-top: 48px;
min-width: 0;
}
.product-page-block .table-container {
-webkit-overflow-scrolling: touch;
margin: 0;
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
width: 100%;
}
.product-detail-page .data-table {
border-collapse: collapse;
font-size: var(--font-size-body-md);
min-width: 36rem;
width: 100%;
}
.product-page-block--tight {
margin-top: 40px;
}
.product-detail-page .data-table th,
.product-detail-page .data-table td {
border-bottom: 1px solid var(--color-outline-variant);
padding: 15px;
text-align: left;
}
.product-detail-page .data-table th {
background-color: var(--color-primary);
color: var(--color-on-primary);
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-semibold);
letter-spacing: normal;
text-transform: none;
}
.product-detail-page .data-table tbody tr:nth-child(even) {
background-color: var(--color-surface);
}
.product-detail__back {
font-size: var(--font-size-body-sm);
margin: 40px 0 0;
}
.product-detail__back a {
color: var(--color-primary);
text-decoration: none;
}
.product-detail__back a:hover {
text-decoration: underline;
}
.product-detail__callout {
background-color: var(--color-surface-container);
border: 2px solid var(--color-secondary);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
}
.product-detail__callout strong {
color: var(--color-secondary);
display: block;
font-size: var(--font-size-headline-sm);
margin-bottom: var(--space-2);
}
.product-detail__callout p {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
margin: 0;
}
.product-detail__callout p + p {
margin-top: var(--space-4);
}
.product-detail__downloads {
margin-top: var(--space-4);
}
.product-detail__applications {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
margin-top: var(--space-4);
}
.product-detail__rfq {
background-color: var(--color-surface-container);
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius-md);
padding: var(--space-6);
}
.product-detail__rfq p {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
margin: 0 0 var(--space-4);
}
.product-detail__rfq p:last-child {
margin-bottom: 0;
}
/* --- FAQ page (Story 5.1) --- */
.faq-page .page-section-header {
margin-bottom: var(--space-8);
}
.faq-list {
list-style: none;
margin: 0 auto;
max-width: 48rem;
padding: 0;
}
.faq-item {
border: 1px solid var(--color-outline-variant);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
overflow: hidden;
scroll-margin-top: var(--nav-height);
}
.faq-item__trigger {
align-items: center;
background-color: var(--color-surface-container);
border: none;
color: var(--color-on-surface);
cursor: pointer;
display: flex;
font-family: inherit;
font-size: var(--font-size-body-md);
font-weight: var(--font-weight-semibold);
gap: var(--space-4);
justify-content: space-between;
line-height: var(--line-height-body-md);
padding: var(--space-4) var(--space-6);
text-align: left;
width: 100%;
}
.faq-item__trigger::after {
color: var(--color-primary);
content: "+";
flex-shrink: 0;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
line-height: 1;
}
.faq-item__trigger[aria-expanded="true"]::after {
content: "\2212";
}
.faq-item__trigger:hover {
filter: brightness(0.98);
}
.faq-item__trigger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.faq-item__panel {
background-color: var(--color-surface);
border-top: 1px solid var(--color-outline-variant);
padding: var(--space-4) var(--space-6) var(--space-6);
}
.faq-item__panel[hidden] {
display: none;
}
.faq-item__panel p {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-md);
line-height: var(--line-height-body-md);
margin: 0 0 var(--space-4);
}
.faq-item__panel p:last-child {
margin-bottom: 0;
}
.faq-item__panel .quick-answer {
margin-bottom: var(--space-4);
}
@media (prefers-reduced-motion: no-preference) {
.faq-item__panel {
transition: opacity 0.15s ease;
}
}
/* --- Download page (Story 2.2) --- */
.download-page__inner,
.compliance-page__inner {
max-width: 56rem;
}
.doc-download-list {
list-style: none;
margin: 0;
max-width: 56rem;
padding: 0;
}
.doc-download-item {
align-items: center;
border-bottom: 1px solid var(--color-outline-variant);
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
justify-content: space-between;
padding: var(--space-6) 0;
}
.doc-download-item:first-child {
border-top: 1px solid var(--color-outline-variant);
}
.doc-download-item__info {
flex: 1 1 12rem;
min-width: 0;
}
.doc-download-item__title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
line-height: var(--line-height-headline-sm);
margin-block: var(--space-2) var(--space-3);
}
.doc-download-item__meta {
display: grid;
gap: var(--space-3);
}
.doc-download-item__meta-row {
display: grid;
gap: var(--space-1);
}
.doc-download-item__meta-row dt {
color: var(--color-tertiary);
font-size: var(--font-size-label-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-label-md);
text-transform: uppercase;
}
.doc-download-item__meta-row dd {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin: 0;
}
.doc-download-item__action {
flex-shrink: 0;
}
/* --- SDS request modal --- */
.sds-request-modal {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
padding: var(--space-5);
position: fixed;
z-index: 2000;
}
.sds-request-modal[hidden] {
display: none !important;
}
.sds-request-modal__backdrop {
background: color-mix(in srgb, var(--color-primary) 55%, transparent);
inset: 0;
position: absolute;
}
.sds-request-modal__dialog {
background-color: var(--color-surface-container);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
max-height: min(90vh, 720px);
max-width: 32.5rem;
overflow-y: auto;
padding: var(--space-6);
position: relative;
width: 100%;
z-index: 1;
}
.sds-request-modal__close {
background: transparent;
border: none;
border-radius: 50%;
color: var(--color-tertiary);
cursor: pointer;
font-size: 1.75rem;
height: 2.25rem;
line-height: 1;
position: absolute;
right: var(--space-3);
top: var(--space-3);
width: 2.25rem;
}
.sds-request-modal__close:hover,
.sds-request-modal__close:focus-visible {
background-color: var(--color-surface-dim);
color: var(--color-primary);
}
.sds-request-modal__title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
margin: 0 2.25rem var(--space-3) 0;
}
.sds-request-modal__intro {
color: var(--color-on-surface-variant);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
margin-bottom: var(--space-4);
}
.sds-form-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr 1fr;
}
.sds-request-form .sds-request-submit {
margin-top: var(--space-4);
width: 100%;
}
.sds-request-thankyou {
padding: var(--space-4) 0;
text-align: center;
}
.sds-request-thankyou__title {
color: var(--color-primary);
font-size: var(--font-size-headline-sm);
margin-bottom: var(--space-3);
}
body.sds-modal-open {
overflow: hidden;
}
/* --- Utilities --- */
.visually-hidden {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* --- Responsive --- */
@media (max-width: 1023px) {
.trust-metrics__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.site-nav__list {
flex-wrap: wrap;
justify-content: flex-end;
}
}
@media (max-width: 767px) {
html,
body,
.table-scroll,
.product-page-block .table-container,
.sds-request-modal {
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.product-page-block .table-container::-webkit-scrollbar,
.sds-request-modal::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}
h1 {
font-size: var(--font-size-display-lg-mobile);
line-height: var(--line-height-display-lg-mobile);
}
.container {
padding-inline: var(--gutter-mobile);
}
.section {
padding-block: var(--section-y-mobile);
}
.site-footer__grid {
grid-template-columns: 1fr;
}
.site-footer__intro {
max-width: none;
}
.site-nav__toggle {
display: inline-flex;
}
.site-header--nav-open .site-nav__backdrop {
background-color: color-mix(in srgb, var(--color-on-background) 40%, transparent);
display: block;
inset: 0;
position: fixed;
top: var(--nav-height);
z-index: 90;
}
.site-nav {
background-color: var(--color-surface-container);
border-bottom: 1px solid var(--color-outline-variant);
box-shadow: var(--shadow-card);
display: none;
left: 0;
position: fixed;
right: 0;
top: var(--nav-height);
z-index: 95;
}
.site-header--nav-open .site-nav {
display: block;
}
.site-nav__list {
flex-direction: column;
gap: 0;
padding-block: var(--space-2);
}
.site-nav__link {
display: block;
padding: var(--space-3) var(--gutter-mobile);
}
.hero {
min-height: clamp(280px, 58vw, 480px);
padding-block: var(--space-8);
}
.trust-metrics {
padding-block: var(--space-6);
}
.trust-metrics__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-section-header {
margin-bottom: var(--space-6);
}
.about-intro-content .page-title {
text-align: center;
}
.contact-wrapper {
grid-template-columns: 1fr;
}
.contact-wrapper.product-hero-layout {
gap: var(--space-6);
grid-template-columns: 1fr;
}
.product-detail {
min-width: 0;
}
.product-detail h1 {
font-size: 30px;
}
.product-detail-page .section-title {
font-size: 24px;
}
.product-cta-row .btn {
flex: 1 1 100%;
min-width: 0;
}
.rfq__row {
grid-template-columns: 1fr;
}
.contact-form-container .rfq__field--grow {
display: grid;
flex: none;
}
.rfq__field--grow .rfq__control {
min-height: 120px;
}
.doc-download-item {
align-items: stretch;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4) 0;
}
.doc-download-item__action {
width: 100%;
}
.sds-form-grid {
grid-template-columns: 1fr;
}
.sds-request-modal {
align-items: flex-end;
padding: var(--space-3);
}
.sds-request-modal__dialog {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: min(82dvh, 560px);
padding: var(--space-4);
}
}
@media (max-width: 479px) {
.hero__ctas .btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-nav,
.why-choose__grid .card,
.about-features__grid .card--feature {
transition: none;
}
.why-choose__grid .card:hover,
.about-features__grid .card--feature:hover {
transform: none;
}
}