/* ========================================================================== SCRUB PLUG 2020 Paste into: Customize Design > Advanced > CSS HOW THE SEASONS WORK The layout puts data-season="..." on . Every colour in this file comes from a variable, so changing that one word repaints the whole store. To invent a new season, copy a block from SECTION 2 and rename it. ========================================================================== */ /* 1 — TOKENS ============================================================== */ :root { /* Neutrals stay put across every season */ --ink: #14181a; --ink-soft: #5a6467; --ink-faint: #8b9396; --paper: #f4f6f5; --card: #ffffff; --line: #dde3e0; --line-firm: #c3ccc8; /* Season-driven colours (defaults = "core") */ --brand: #0f6e62; --brand-deep: #0a4f46; --on-brand: #ffffff; --wash: #e6efec; --sale: #c62f2f; --chip-1: #0f6e62; --chip-2: #7fb8ac; --chip-3: #d8e5e0; --chip-4: #2b3a3f; --chip-5: #b9c9c2; /* Type */ --display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif; --body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: clamp(2.5rem, 6.4vw, 4.4rem); --fs-h1: clamp(1.9rem, 4vw, 2.8rem); --fs-h2: clamp(1.4rem, 2.6vw, 1.9rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.6875rem; /* Space + shape */ --wrap: 1240px; /* Header runs edge to edge. Set this to a length (1720px is a good starting point) if it feels too stretched on very wide monitors. */ --wrap-header: none; --gutter: clamp(1rem, 4vw, 2.5rem); --section: clamp(3.5rem, 8vw, 6rem); --radius: 6px; --radius-sm: 3px; /* Thickness of the colourway strip under the header. 6px is a quiet accent; 12–16px makes it a real design element. */ --colorway-height: 6px; --shadow: 0 1px 2px rgba(20, 24, 26, .06), 0 8px 24px rgba(20, 24, 26, .05); } /* 2 — SEASONS ============================================================= */ [data-season="spring"] { --brand: #6a5fd0; --brand-deep: #4f45ab; --wash: #edeafb; --sale: #c62f2f; --chip-1: #6a5fd0; --chip-2: #a8dfc1; --chip-3: #f7e9b0; --chip-4: #efd4e6; --chip-5: #d9d6f4; } [data-season="summer"] { --brand: #0d8ba6; --brand-deep: #086b81; --wash: #e0f0f5; --sale: #d94f1e; --chip-1: #0d8ba6; --chip-2: #ffd166; --chip-3: #ff8a5b; --chip-4: #92dbe8; --chip-5: #f2f7f8; } [data-season="autumn"] { --brand: #9c5324; --brand-deep: #753d19; --wash: #f4e9df; --sale: #a32020; --chip-1: #9c5324; --chip-2: #d99b4e; --chip-3: #6b7f45; --chip-4: #3f2d24; --chip-5: #e8d5be; } [data-season="winter"] { --brand: #2c4c8c; --brand-deep: #1e3768; --wash: #e7ecf7; --sale: #b32b3f; --chip-1: #2c4c8c; --chip-2: #8ba7d9; --chip-3: #dfe7f2; --chip-4: #1b2436; --chip-5: #b7c6dd; } [data-season="holiday"] { --brand: #a8202c; --brand-deep: #7d151f; --wash: #f6e8e8; --sale: #1d6b3f; --chip-1: #a8202c; --chip-2: #1d6b3f; --chip-3: #e8d7a8; --chip-4: #f6f1e6; --chip-5: #123a25; } [data-season="valentines"] { --brand: #b3123f; --brand-deep: #8a0d30; --wash: #fae7ec; --sale: #7d1030; --chip-1: #b3123f; --chip-2: #f2a2b8; --chip-3: #fbe3ea; --chip-4: #3d0a18; --chip-5: #e8c3cd; } [data-season="pink-october"] { --brand: #c8397f; --brand-deep: #9d2a62; --wash: #fbe9f2; --sale: #9d2a62; --chip-1: #c8397f; --chip-2: #f4a8cb; --chip-3: #fce4ef; --chip-4: #4a2136; --chip-5: #e7c2d6; } [data-season="nurses-week"] { --brand: #0f6e62; --brand-deep: #0a4f46; --wash: #eef0e4; --sale: #b5892b; --chip-1: #0f6e62; --chip-2: #c9a227; --chip-3: #f3ecd6; --chip-4: #2b3a3f; --chip-5: #a7c4bc; } [data-season="pride"] { --brand: #7a2fa3; --brand-deep: #5d2380; --wash: #f1e8f7; --sale: #d62828; --chip-1: #d62828; --chip-2: #f28c28; --chip-3: #f7d716; --chip-4: #2a9d5c; --chip-5: #3a5fcd; } [data-season="new-year"] { --brand: #1b1b1f; --brand-deep: #000000; --wash: #ecebe8; --sale: #a8842c; --chip-1: #1b1b1f; --chip-2: #c9a227; --chip-3: #e8e3d5; --chip-4: #4a4a52; --chip-5: #f6f4ee; } [data-season="blackout"] { --brand: #14181a; --brand-deep: #000000; --wash: #e6e8e8; --sale: #d92121; --chip-1: #14181a; --chip-2: #d92121; --chip-3: #ffffff; --chip-4: #5a6467; --chip-5: #b0b6b6; } /* 3 — BASE =============================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1em; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 .5em; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--section) 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1rem; } .skip-link:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* Small uppercase mono labels carry the garment-tag voice */ .label, .mono { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0; } /* 4 — BUTTONS + FORM CONTROLS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--body); font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; padding: .85rem 1.5rem; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: var(--on-brand); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-firm); } .btn-quiet:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-block { width: 100%; } .btn[disabled] { opacity: .45; cursor: not-allowed; } input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea, select { width: 100%; font-family: var(--body); font-size: var(--fs-small); color: var(--ink); background: var(--card); border: 1px solid var(--line-firm); border-radius: var(--radius); padding: .75rem .85rem; } textarea { min-height: 160px; resize: vertical; } select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* 5 — HEADER ============================================================= */ .announce { background: var(--ink); color: #fff; text-align: center; padding: .55rem 1rem; } .announce p { margin: 0; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; } .masthead { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; } .masthead.is-stuck { box-shadow: 0 6px 20px rgba(20, 24, 26, .07); } .masthead-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; width: 100%; max-width: var(--wrap-header); margin-inline: auto; padding-inline: var(--gutter); } .wordmark { display: inline-flex; align-items: flex-start; gap: .3rem; } .wordmark-name { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.035em; line-height: 1; } .wordmark-year { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; color: var(--brand); padding-top: .15rem; } .nav-main { display: flex; gap: 1.4rem; margin-left: 1rem; flex: 1; } .nav-main a { font-size: var(--fs-small); font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; } .nav-main a:hover { border-bottom-color: var(--brand); } .masthead-tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; } /* Info dropdown — everything that isn't a product link */ .nav-drop { position: relative; } .nav-drop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-small); font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; } .nav-drop summary::-webkit-details-marker { display: none; } .nav-drop summary:hover { border-bottom-color: var(--brand); } .nav-drop summary svg { transition: transform .18s ease; color: var(--ink-soft); } .nav-drop[open] summary { border-bottom-color: var(--brand); } .nav-drop[open] summary svg { transform: rotate(180deg); } .nav-drop-panel { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60; min-width: 200px; display: grid; padding: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .nav-drop-panel a { font-size: var(--fs-small); padding: .55rem .7rem; border-radius: var(--radius-sm); } .nav-drop-panel a:hover { background: var(--wash); color: var(--brand-deep); } .search { position: relative; width: 200px; } .search-input { padding: .5rem 2.2rem .5rem .75rem; background: var(--paper); } .search-go { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; } .search-go:hover { color: var(--brand); } .cart-link { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; } .cart-count { font-family: var(--mono); font-size: .6875rem; min-width: 22px; height: 22px; padding: 0 .35rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--brand); color: var(--on-brand); } /* The colorway strip — the season, made literal */ .colorway { display: flex; width: 100%; height: var(--colorway-height); } .colorway i { flex: 1 1 0; min-width: 0; } /* Mobile nav (no JS:

) */ .nav-mobile { display: none; margin-left: auto; } .nav-mobile summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: grid; align-content: center; gap: 5px; padding: 0 4px; } .nav-mobile summary::-webkit-details-marker { display: none; } .nav-mobile summary span { display: block; height: 2px; background: var(--ink); } .nav-mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 1.5rem; display: grid; gap: .25rem; box-shadow: var(--shadow); } .nav-mobile-panel a { font-family: var(--display); font-size: 1.25rem; font-weight: 600; padding: .55rem 0; border-bottom: 1px solid var(--line); } .nav-mobile-panel .label { margin-top: 1.25rem; padding-bottom: .35rem; color: var(--brand-deep); } .nav-mobile-panel .label:first-child { margin-top: .25rem; } .search-mobile { width: 100%; margin-top: 1rem; } /* 6 — HERO =============================================================== */ .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--wash); border-bottom: 1px solid var(--line); } .hero-copy { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); align-self: center; max-width: 620px; margin-left: auto; } .hero-eyebrow { color: var(--brand-deep); margin-bottom: 1.25rem; } .hero h1 { font-size: var(--fs-display); margin-bottom: .6rem; } .hero-lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 42ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .hero-media { position: relative; min-height: 420px; background: var(--wash); overflow: hidden; display: grid; place-items: center; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Cutout mode — for product shots on a white background. The whole garment stays in frame and `multiply` drops the white backdrop into the season wash, so there's no visible photo box. */ .hero-media.is-cutout { padding: clamp(1.25rem, 3vw, 2.5rem); } .hero-media.is-cutout img { width: auto; height: auto; max-width: 100%; max-height: min(66vh, 620px); object-fit: contain; mix-blend-mode: multiply; } /* Spec bar: real garment facts, not decoration */ .specbar { background: var(--ink); color: #fff; border-bottom: 1px solid var(--ink); } .specbar-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding-block: .9rem; } .specbar span { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .82; } /* 7 — SECTIONS =========================================================== */ .section { padding-block: var(--section); } .section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .section-head h2 { font-size: var(--fs-h2); margin: 0; } .section-head a { font-size: var(--fs-small); font-weight: 600; border-bottom: 2px solid var(--brand); } .page-head { padding-block: clamp(2rem, 5vw, 3.25rem) 1.5rem; } .page-head h1 { font-size: var(--fs-h1); margin-bottom: .35rem; } .page-head .label { color: var(--brand-deep); margin-bottom: .9rem; } /* Category tiles */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; } .tile { display: flex; align-items: flex-end; min-height: 132px; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-family: var(--display); font-weight: 600; font-size: 1.1rem; transition: background .18s ease, color .18s ease, border-color .18s ease; } .tile:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* Three-up value band */ .band { background: var(--card); border-block: 1px solid var(--line); } .band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding-block: var(--section); } .band-grid h3 { font-size: 1.15rem; margin-bottom: .4rem; } .band-grid p { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; } .band-grid .label { color: var(--brand-deep); margin-bottom: .9rem; } /* 8 — PRODUCT GRID ======================================================= */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); } .card { position: relative; } .card-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--wash); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease, transform .5s ease; } .card-media .card-alt { position: absolute; inset: 0; opacity: 0; } .card:hover .card-alt { opacity: 1; } .card:hover .card-media img { transform: scale(1.02); } .card-body { padding-top: .8rem; display: flex; justify-content: space-between; gap: 1rem; } .card-name { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.25; } .card-price { font-family: var(--mono); font-size: var(--fs-small); white-space: nowrap; } .card-variants { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: .2rem; } .tag { position: absolute; top: .6rem; left: .6rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; padding: .3rem .5rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; } .tag-sale { background: var(--sale); } .tag-soon { background: var(--brand); color: var(--on-brand); } .tag-sold { background: var(--card); color: var(--ink-soft); border: 1px solid var(--line-firm); } .empty { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; border: 1px dashed var(--line-firm); border-radius: var(--radius); } .empty h2 { font-size: var(--fs-h2); } .empty p { color: var(--ink-soft); max-width: 40ch; margin-inline: auto; } /* 9 — PRODUCTS PAGE ====================================================== */ .filters { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 2rem; } .filters a { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; padding: .5rem .8rem; border: 1px solid var(--line-firm); border-radius: 999px; background: var(--card); } .filters a:hover, .filters a.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; font-family: var(--mono); font-size: var(--fs-small); } .pagination a, .pagination span { padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); } .pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); } /* 10 — PRODUCT PAGE ===================================================== */ .product { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); align-items: start; } .gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--wash); aspect-ratio: 4 / 5; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; } .gallery-thumb { width: 68px; height: 68px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--wash); padding: 0; cursor: pointer; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .product-info { position: sticky; top: 100px; } .product-info h1 { font-size: var(--fs-h1); margin-bottom: .35rem; } .price-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; } .price { font-family: var(--mono); font-size: 1.25rem; } .price-note { font-size: var(--fs-small); color: var(--ink-soft); } .buy { display: grid; gap: .75rem; margin-bottom: 2rem; } .buy-row { display: grid; grid-template-columns: 96px 1fr; gap: .75rem; align-items: end; } .buy label { display: block; margin-bottom: .35rem; } .buy input[type="text"] { text-align: center; } .sold-note { padding: .9rem 1rem; border: 1px solid var(--line-firm); border-radius: var(--radius); background: var(--card); font-size: var(--fs-small); color: var(--ink-soft); } .product-desc { border-top: 1px solid var(--line); padding-top: 1.5rem; } .product-desc p { color: var(--ink-soft); } .spec-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); } .spec-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); } .spec-list dt, .spec-list .spec-key { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .product-nav { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1.5rem; font-size: var(--fs-small); font-weight: 600; } /* 11 — CART ============================================================= */ .cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .cart-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); } .cart-item-img { border-radius: var(--radius-sm); overflow: hidden; background: var(--wash); } .cart-item-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; } .cart-item-option { font-size: var(--fs-small); color: var(--ink-soft); } .cart-item-end { display: flex; align-items: center; gap: 1.25rem; } .cart-item-end input[type="text"] { width: 62px; text-align: center; } .cart-item-price { font-family: var(--mono); font-size: var(--fs-small); min-width: 76px; text-align: right; } .cart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding-top: 1.75rem; } .cart-total { font-family: var(--display); font-weight: 700; font-size: 1.5rem; } .cart-total .label { display: block; margin-bottom: .2rem; } .cart-actions { display: flex; gap: .75rem; flex-wrap: wrap; } /* 12 — CONTACT + MAINTENANCE ============================================ */ .contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 5vw, 4rem); padding-bottom: var(--section); } .contact-form { display: grid; gap: 1rem; max-width: 640px; } .contact-form label { display: block; margin-bottom: .35rem; } .contact-aside p { color: var(--ink-soft); font-size: var(--fs-small); } .notice { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--wash); border: 1px solid var(--brand); color: var(--brand-deep); font-size: var(--fs-small); margin-bottom: 1.5rem; } .maintenance { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: .5rem; padding: var(--section) var(--gutter); } .maintenance h1 { font-size: var(--fs-display); } .maintenance p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; } /* 13 — FOOTER =========================================================== */ .footer { background: var(--card); border-top: 1px solid var(--line); margin-top: var(--section); } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-block: var(--section) 2.5rem; } .footer-brand .wordmark-name { font-size: 1.25rem; } .footer-blurb { color: var(--ink-soft); font-size: var(--fs-small); max-width: 38ch; margin-top: .75rem; } .footer-col { display: grid; align-content: start; gap: .5rem; } .footer-col .label { margin-bottom: .35rem; } .footer-col a { font-size: var(--fs-small); color: var(--ink-soft); } .footer-col a:hover { color: var(--brand); } .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); } .footer-base p { margin: 0; font-size: var(--fs-small); color: var(--ink-faint); } /* 14 — RESPONSIVE ======================================================= */ @media (max-width: 1000px) { .nav-main, .masthead-tools { display: none; } .nav-mobile { display: block; } .masthead-inner { min-height: 62px; } .product { grid-template-columns: 1fr; } .product-info { position: static; } .contact { grid-template-columns: 1fr; } .band-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-copy { margin-left: 0; padding-block: 2.5rem; } .hero-media { min-height: 320px; order: -1; } .grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .cart-item { grid-template-columns: 68px 1fr; } .cart-item-end { grid-column: 1 / -1; justify-content: space-between; } .footer-inner { grid-template-columns: 1fr; } .buy-row { grid-template-columns: 1fr; } } @media (max-width: 420px) { .grid { grid-template-columns: 1fr; } } /* 15 — MOTION PREFERENCES =============================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .card:hover .card-media img { transform: none; } }