/* =================================================================== GAMRY REDESIGN — Phase 1: Header / navigation Design language: blue #003e69, IBM Plex Sans/Mono + Space Grotesk =================================================================== */ :root { /* blog article content width: rail 210 + gap 56 + prose. Fixed px (not em) so it resolves identically regardless of an element's own font-size. 1040 → prose ≈ 774px (~85 chars/line, the upper edge of a comfortable measure). Tune this one number. */ --rd-blog-shell: 1040px; /* Featured photo width — deliberately INDEPENDENT of --rd-blog-shell so changing the column measure never resizes the hero image. Capped to the column only so it can't overflow when the column is narrower than this. Tune this one number for photo size. */ --rd-blog-img: 900px; /* ---- Type system ------------------------------------------------------ Three faces, the pairing the homepage carousel already used: a display face for headings, a text face for everything read in sentences, and a monospace for labels, spec values and code (it is what keeps figures aligned in columns). A fourth face, 'Alegreya Sans', used to be the base font on body (layout.css). It was a text face designed for literary prose - it sets old-style figures, so digits sat below cap height and varied in height, which is poor on a site built out of spec numbers. It was inherited by every page, so it sat under the redesigned components in a different face. Removed 2026-08-13. Change the font site-wide by editing these three values. Note that roughly 270 declarations still name the families literally rather than through these tokens; swapping those is a mechanical follow-up that changes nothing visually. Until then, edit these AND search for the literal names. */ --gm-font-display: 'Space Grotesk', sans-serif; --gm-font-body: 'IBM Plex Sans', sans-serif; --gm-font-mono: 'IBM Plex Mono', monospace; --gm-navy: #003e69; --gm-navy-hover: #00567f; --gm-ink: #17242b; --gm-body: #47535b; --gm-muted: #5f6b72; /* WCAG 1.4.3: was #6c7981, which measured 4.06:1 on --gm-panel #f2f4f5, 4.32:1 on --gm-bg #fbfbfa and 4.48:1 on #fff — all under 4.5:1, and it is the colour of every small mono meta label on the site (none of which is large-text exempt). #636f77 is the same hue darkened until the WORST background it actually renders on (#f2f4f5) clears 4.5:1 → 4.68 / 4.98 / 5.16. Still lighter than --gm-muted, so the token hierarchy is intact. Verified it renders on light backgrounds ONLY — dark sections use --gm-on-dark-faint, so darkening this is safe. */ --gm-faint: #636f77; --gm-border: #e6eaec; --gm-bg: #fbfbfa; --gm-panel: #f2f4f5; /* on dark backgrounds only — do NOT use in light sections */ --gm-on-dark: #c3cdd2; --gm-on-dark-muted: #aeb9be; --gm-on-dark-faint: #8a969c; --gm-on-dark-accent: #7bb8dd; /* ---- header tokens (design_handoff_header) ---- The navy is sampled from the logo SVG's own fills: logo and utility bar are the SAME #003e69 by design. Do not lighten one to "match" the other. */ --gm-surface: #ffffff; --gm-border-ctl: #d5dcdf; --gm-border-soft: #eef1f2; --gm-onnavy: #d3e0ea; /* utility labels on navy — AA on #003e69 */ --gm-onnavy-rule: rgba(255,255,255,.28); /* language divider */ --gm-onnavy-pill: rgba(255,255,255,.45); /* registration pill border (decorative) */ --gm-onnavy-open: rgba(255,255,255,.16); /* open utility trigger fill */ } /* Shared by the restyled store pages: product (body.store-pdp), category (body.store-plp), cart (body.store-cart), checkout (body.store-checkout) and account pages (body.store-account), and home / information / 404 pages (body.store-cms). Page margins, breadcrumb and page-title type, from the website's product and listing pages. */ :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .page-main { max-width: 1440px; padding-left: 40px; padding-right: 40px; } /* orders-gamry.css zeroes the side padding by ID (#maincontent { padding: 50px 0 }) */ :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent { padding: 0 40px 64px; } /* Breadcrumb: small grey text, no box */ :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs { width: 100%; box-sizing: border-box; /* else it shrink-wraps and centres in .page-wrapper's flex column */ max-width: 1440px; margin: 0 auto; padding: 26px 40px 0; text-align: left; background: none; border: 0; box-shadow: none; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs .items { display: flex; flex-wrap: wrap; justify-content: flex-start; font-family: var(--gm-font-body); font-size: 13px; color: var(--gm-muted); background: none; border: 0; padding: 0; margin: 0; text-align: left; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs .item, :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs .item strong { font-size: 13px; font-weight: 400; color: var(--gm-ink); } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs .item a { color: var(--gm-muted); text-decoration: none; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs .item a:hover { color: var(--gm-navy); } /* Page title: the website's display heading */ :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .columns-top, :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .page-main > .page-title-wrapper { margin: 0; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .page-title-wrapper .page-title { margin: 0; font-family: var(--gm-font-display); font-style: normal; font-size: clamp(34px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--gm-ink); text-wrap: balance; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .page-title-wrapper .page-title span { font: inherit; color: inherit; } /* ---- Form fields and primary buttons (cart, checkout, account pages) ---- */ :is(.store-cart, .store-checkout, .store-account) input[type="text"], :is(.store-cart, .store-checkout, .store-account) input[type="email"], :is(.store-cart, .store-checkout, .store-account) input[type="tel"], :is(.store-cart, .store-checkout, .store-account) input[type="number"], :is(.store-cart, .store-checkout, .store-account) input[type="password"], :is(.store-cart, .store-checkout, .store-account) select { height: 44px; padding: 0 12px; border: 1px solid var(--gm-border-ctl); border-radius: 8px; background-color: #fff; font-family: var(--gm-font-body); font-size: 15px; color: var(--gm-ink); box-shadow: none; } :is(.store-cart, .store-checkout, .store-account) textarea { border: 1px solid var(--gm-border-ctl); border-radius: 8px; font-family: var(--gm-font-body); } :is(.store-cart, .store-checkout, .store-account) :is(input, select, textarea):focus { border-color: var(--gm-navy); outline: 0; box-shadow: 0 0 0 3px rgba(0, 62, 105, .15); } /* Primary actions: the website's .rd-btn-primary */ :is(.store-cart, .store-checkout, .store-account) .action.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 1px solid var(--gm-navy); border-radius: 10px; background: var(--gm-navy); font-family: var(--gm-font-body); font-size: 16px; font-weight: 600; line-height: 1.1; box-shadow: none; text-shadow: none; transition: background .15s ease, border-color .15s ease; } :is(.store-cart, .store-checkout, .store-account) .action.primary:hover { background: var(--gm-navy-hover); border-color: var(--gm-navy-hover); } :is(.store-cart, .store-checkout, .store-account) .action.primary span { font: inherit; } @media (max-width: 900px) { :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .page-main, :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) .breadcrumbs { padding-left: 20px; padding-right: 20px; } :is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent { padding: 0 20px 48px; } } /* ---- Consistency pass (2026-10-01): one value for each thing, on every restyled page ---- */ /* Links: the website's navy (orders-gamry.css colours links #0a65a2). Buttons, chips and product links keep their own colours. */ body:is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent a:not([class*="action"]):not(.rd-btn):not(.button):not(.store-chip):not(.product-item-link):not(.product-item-photo):not(.store-pd-eyebrow) { color: var(--gm-navy); } body:is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent a:not([class*="action"]):not(.rd-btn):not(.button):not(.store-chip):not(.product-item-link):not(.product-item-photo):not(.store-pd-eyebrow):hover { color: var(--gm-navy-hover); } body:is(.store-cart, .store-checkout, .store-account) #maincontent .actions-toolbar .secondary a.action, body.store-account #maincontent .box-actions a.action { color: var(--gm-navy) !important; } /* Body copy: the website's body colour, not the old theme's #444 */ body:is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent p { color: var(--gm-body); } /* Form fields: the old theme's Arial / #ccc wins on the account forms at normal weight */ body:is(.store-cart, .store-checkout, .store-account) #maincontent :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select) { font-family: var(--gm-font-body); border-color: var(--gm-border-ctl); } /* Secondary section headings (Magento "step-title" / admin__legend, e.g. "Additional Settings"): as legends */ body:is(.store-account, .store-checkout) #maincontent :is(.step-title, .admin__legend) { font-family: var(--gm-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink); } /* typography.css (website) forces .typography a { color: #0a65a2 !important } and the store's
has class="typography" (Logicbrush default.xml). Same weight back. */ body:is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent.typography a:not([class*="action"]):not(.rd-btn):not(.button):not(.store-chip):not(.product-item-link):not(.product-item-photo):not(.store-pd-eyebrow):not(.store-cat):not(.store-top-name), body:is(.store-pdp, .store-plp, .store-cart, .store-checkout, .store-account, .store-cms) #maincontent.typography a:not([class*="action"]):not(.rd-btn):not(.button):not(.store-chip):not(.product-item-link):not(.product-item-photo):not(.store-pd-eyebrow):not(.store-cat):not(.store-top-name) * { color: var(--gm-navy) !important; } /* The "labels above fields" rules set width:auto, which also un-hid Magento's visually hidden labels (street lines 2 and 3: clip + 1px width) - invisible, but 390px wide on phones, so the page scrolled sideways. */ body:is(.store-account, .store-checkout, .store-cart) .field.additional > .label { width: 1px !important; } /* ---- "Related Products" / "Related Items & Individual Components" ---- */ :is(.store-pdp,.store-plp,.checkout-cart-index) :is(.block.related,.block.upsell,[data-related-block] .block) { margin: 56px 0 0; padding: 40px 0 0; border-top: 1px solid var(--gm-border); } :is(.store-pdp,.store-plp,.checkout-cart-index) :is(.block.related,.block.upsell,[data-related-block] .block) .block-title { margin: 0 0 22px; padding: 0; background: none; border: 0; } :is(.store-pdp,.store-plp,.checkout-cart-index) :is(.block.related,.block.upsell,[data-related-block] .block) .block-title strong { font-family: var(--gm-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--gm-ink); } :is([data-related-block]) .productsList-list-item { padding: 0 !important; }