/* === Valaris Label — Design Contract v1 === */
@import url(‘https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap’);
:root {
–vl-accent: #C27D4A;
–vl-accent-hover: #A86838;
–vl-bg: #FAF7F2;
–vl-dark: #2C2420;
–vl-text: #3A3330;
–vl-text-light: #6B6560;
–vl-border: #E5DDD5;
–vl-white: #FFFFFF;
}
/* === Global === */
body {
background-color: var(–vl-bg) !important;
color: var(–vl-text) !important;
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif !important;
font-weight: 400;
line-height: 1.7;
}
/* === Typography === */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.woocommerce-loop-product__title,
.product_title,
.entry-title {
font-family: ‘DM Serif Display’, Georgia, serif !important;
color: var(–vl-dark) !important;
font-weight: 400 !important;
letter-spacing: -0.01em;
}
h1, .wp-block-heading:where(h1) { font-size: clamp(2rem, 4vw, 3.2rem) !important; }
h2, .wp-block-heading:where(h2) { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; }
h3, .wp-block-heading:where(h3) { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; }
/* === Links & Buttons === */
a {
color: var(–vl-accent) !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
a:hover {
color: var(–vl-accent-hover) !important;
}
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.button,
button[type=”submit”] {
background-color: var(–vl-accent) !important;
color: var(–vl-white) !important;
border: none !important;
border-radius: 3px !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 12px 28px !important;
transition: background-color 0.2s ease !important;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.button:hover,
button[type=”submit”]:hover {
background-color: var(–vl-accent-hover) !important;
color: var(–vl-white) !important;
}
/* === Header === */
.wp-block-site-title a,
header .wp-block-site-title {
font-family: ‘DM Serif Display’, Georgia, serif !important;
font-size: 1.8rem !important;
color: var(–vl-dark) !important;
text-decoration: none !important;
letter-spacing: 0.02em;
}
/* === Navigation === */
.wp-block-navigation a,
nav a {
font-family: ‘Inter’, sans-serif !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(–vl-text) !important;
}
.wp-block-navigation a:hover,
nav a:hover {
color: var(–vl-accent) !important;
}
/* === WooCommerce Product Grid === */
.woocommerce ul.products li.product {
text-align: center;
border: 1px solid var(–vl-border);
border-radius: 4px;
padding: 20px;
background: var(–vl-white);
transition: box-shadow 0.3s ease;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 4px 20px rgba(44, 36, 32, 0.08);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1rem !important;
padding: 8px 0 4px !important;
}
.woocommerce ul.products li.product .price {
color: var(–vl-accent) !important;
font-weight: 500 !important;
font-size: 1.05rem !important;
}
/* === Single Product === */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(–vl-accent) !important;
font-size: 1.4rem !important;
font-weight: 500 !important;
}
.woocommerce div.product .product_meta {
color: var(–vl-text-light) !important;
font-size: 0.85rem !important;
}
/* === Product placeholder (no image) === */
.woocommerce ul.products li.product a img,
.woocommerce-product-gallery img {
border-radius: 3px;
background: #F0EBE4;
}
.woocommerce .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
background: #F0EBE4;
border-radius: 4px;
}
/* === Footer === */
footer, .wp-block-template-part footer {
background-color: var(–vl-dark) !important;
color: #C4BBB4 !important;
padding: 40px 20px !important;
}
footer a {
color: var(–vl-accent) !important;
}
footer h2, footer h3, footer h4 {
color: var(–vl-white) !important;
}
/* === Cart & Checkout === */
.woocommerce table.shop_table {
border-color: var(–vl-border) !important;
}
.woocommerce table.shop_table th {
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
font-size: 12px !important;
letter-spacing: 0.05em !important;
}
/* === Breadcrumbs === */
.woocommerce .woocommerce-breadcrumb {
font-size: 0.8rem !important;
color: var(–vl-text-light) !important;
}
.woocommerce .woocommerce-breadcrumb a {
color: var(–vl-text-light) !important;
}
/* === Sale Badge === */
.woocommerce span.onsale {
background-color: var(–vl-accent) !important;
color: var(–vl-white) !important;
border-radius: 2px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
}
/* === Dark Sections (exception from design contract) === */
.dark-section {
background-color: var(–vl-dark) !important;
color: #C4BBB4 !important;
padding: 60px 20px !important;
}
.dark-section h2, .dark-section h3 {
color: var(–vl-white) !important;
}
/* === Utility === */
.wp-block-separator {
border-color: var(–vl-border) !important;
opacity: 1 !important;
}
/* === Remove sample page default styling artifacts === */
.wp-block-post-content > *:first-child {
margin-top: 0 !important;
}
Leave a Reply