/* * Hand-written additions on top of style.css. This file is linked AFTER * style.css in front/layouts/main.blade.php, so anything here survives the * theme file being replaced and wins ties on equal specificity. * * Palette / scale mirror style.css: 1rem = 18px, cream #f8f7ec, ink #171410, * hairline #d9d6c8, error #d64545, display font "DM Serif Display". */ /* ===================================================================== * Pre-Order by kilo dialog — markup in Modules/Requests _preorder.blade.php. * Teleported to , outside Locomotive's transformed container, so * position:fixed here really is the viewport. * ===================================================================== */ .preorder { position: fixed; inset: 0; /* Above the header stack (~111), below the toast stack (140 in the layout's inline styles) so the submit toast still shows over it. */ z-index: 130; display: flex; align-items: center; justify-content: center; padding: 1rem; } .preorder__backdrop { position: absolute; inset: 0; background: rgba(23, 20, 16, 0.55); } .preorder__panel { position: relative; width: 100%; max-width: 24rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: #f8f7ec; border: 2px solid #171410; padding: 1.7777777778rem; animation: preorder-pop 0.25s ease-out; } @keyframes preorder-pop { from { opacity: 0; transform: translateY(0.6666666667rem); } to { opacity: 1; transform: none; } } .preorder__close { position: absolute; top: 0.5555555556rem; right: 0.6666666667rem; border: 0; background: none; padding: 0.2222222222rem; font-size: 1.3333333333rem; line-height: 1; color: #171410; cursor: pointer; } .preorder__close:hover { opacity: 0.6; } .preorder__eyebrow { margin: 0; font-size: 0.6111111111rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(23, 20, 16, 0.55); } .preorder__title { margin: 0.2222222222rem 0 0; font-size: 1.4444444444rem; line-height: 1.2; } .preorder__intro { margin: 0.4444444444rem 0 1.1111111111rem; font-size: 0.7222222222rem; color: rgba(23, 20, 16, 0.7); } .preorder__optional { font-weight: 400; color: rgba(23, 20, 16, 0.55); } .preorder__form .btn-full { margin-top: 0.4444444444rem; } .preorder__done { text-align: center; padding-block: 0.8888888889rem; } .preorder__done-title { margin: 0 0 0.4444444444rem; font-size: 1.2222222222rem; } .preorder__done .btn { margin-top: 1rem; } /* Per-field validation line — the blades render it, style.css never styled it. */ .field-error { margin: 0.2222222222rem 0 0; font-size: 0.6111111111rem; color: #d64545; } /* ===================================================================== * Product weight (grams) — printed under the price by * resources/views/front/partials/_product_card.blade.php and the PDP * purchase bar. `products.weight` is nullable, so a product with no weight * renders no element here at all. * ===================================================================== */ /* Card header is a flex row (name | price). Wrapping the price in this column keeps the price exactly where it was and stacks the weight beneath it. */ .product-card__pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1111111111rem; } .product-card__weight { margin: 0; font-family: "DM Serif Display"; font-style: italic; font-size: 0.6666666667rem; line-height: 1.2; color: rgba(23, 20, 16, 0.55); white-space: nowrap; } /* Carousel cards are narrower — style.css steps the name and price down there, so the weight steps down with them. */ .product-carousel .slider .product-card__weight { font-size: 0.5555555556rem; } /* PDP purchase bar: this block is the centre cell of the 1fr/auto/1fr grid the bare price used to occupy, so the three-column layout is unchanged. */ .pdp-purchase__pricing { display: flex; flex-direction: column; align-items: center; gap: 0.1111111111rem; } .pdp-purchase__weight { margin: 0; font-family: "DM Serif Display"; font-style: italic; font-size: 1.3rem; line-height: 1.1; color: rgba(23, 20, 16, 0.55); } button:disabled { opacity: 0.9 !important; }