/* ========================================================================== Site header -------------------------------------------------------------------------- Paired with the Elementor theme-builder template "Toti Header", exported to docs/design/templates/header.json. The template supplies structure and the class hooks; every colour, size and box in the header is set here so it stays in version control and can be edited without opening Elementor. Specificity, not decoration: Elementor's generated post CSS targets `.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item` (0,3,0) and its container rules sit at (0,2,0). Those files load before this one but out-rank a single class, so every rule here is anchored on a doubled `.toti-hdr.toti-hdr`, which clears them without !important. Contrast: the whole header sits on --toti-black, the only ground the brand gold is allowed to be text on (8.07:1). Nothing here puts gold on a light ground. The one gold fill — the quote pill — carries #241A04 at 7.25:1. ========================================================================== */ .toti-hdr.toti-hdr { --width: 100%; width: 100%; max-width: none; background: var(--toti-black); font-family: var(--toti-sans); } /* Elementor's kit leaves --e-global-typography-*-font-family empty, so its widget CSS resolves to a bare `Sans-serif`. Pull everything back to ours. */ .toti-hdr.toti-hdr .elementor-heading-title, .toti-hdr.toti-hdr .elementor-nav-menu .elementor-item, .toti-hdr.toti-hdr input, .toti-hdr.toti-hdr button { font-family: var(--toti-sans); } /* ---------- Tier 1, utility bar ---------- */ /* Gaps on these two rows are Elementor's 20px default and are deliberately not set here. `--gap` is NOT the control: Elementor declares `gap: var(--row-gap) var(--column-gap)` and keeps `--gap` only as an unused legacy alias, so a `--gap` line looks like it sets the gutter and sets nothing. Two such lines were removed rather than converted, because the header was reviewed and approved at the 20px it was actually rendering. Use --row-gap / --column-gap if these ever do need changing. */ .toti-hdr.toti-hdr .toti-hdr__utility { border-bottom: 1px solid #262320; } .toti-hdr.toti-hdr .toti-util__line, .toti-hdr.toti-hdr .toti-util__wrap { flex: 0 0 auto; width: auto; } .toti-hdr.toti-hdr .toti-util__line .elementor-heading-title { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: #A7A29A; } .toti-util__links { display: flex; align-items: center; gap: 22px; } .toti-hdr.toti-hdr .toti-util__links a { font-size: 12px; line-height: 1.5; color: #A7A29A; text-decoration: none; transition: color var(--toti-t-fast); } .toti-hdr.toti-hdr .toti-util__links a:hover, .toti-hdr.toti-hdr .toti-util__links a:focus-visible { color: var(--toti-card); } /* The phone number is the one thing on this bar a trade buyer scans for, so it gets the gold. Gold on --toti-black is 8.07:1. The `.toti-util__links a` rule above is (0,3,1) — a bare `.toti-util__tel` at (0,3,0) loses to it and the number silently renders grey. Keep the anchor in the selector so this one wins. */ .toti-hdr.toti-hdr .toti-util__links a.toti-util__tel { color: var(--toti-gold); font-weight: 600; letter-spacing: .01em; } .toti-hdr.toti-hdr .toti-util__links a.toti-util__tel:hover, .toti-hdr.toti-hdr .toti-util__links a.toti-util__tel:focus-visible { color: #F2B02A; } /* ---------- Tier 2, main bar ---------- */ /* No gutter rule here either — see the note on the utility bar above. */ .toti-hdr.toti-hdr .toti-hdr__brand, .toti-hdr.toti-hdr .toti-hdr__actions { flex: 0 0 auto; width: auto; } /* min-width:0 matters: without it the long placeholder sets the field's min-content width and pushes the quote pill off the bar. */ .toti-hdr.toti-hdr .toti-hdr__searchw { flex: 1 1 auto; width: auto; min-width: 0; max-width: 520px; } /* The anchor itself gets a colour too, not just the two spans: left bare it inherits Astra's link blue, so any future change to the lockup — a trailing character, a separator — would arrive blue. */ .toti-logo { color: var(--toti-silver); display: inline-flex; align-items: baseline; font-size: 18px; font-weight: 600; letter-spacing: .055em; line-height: 1; text-decoration: none; white-space: nowrap; } .toti-logo img { display: block; width: auto; height: auto; } .toti-logo--mark { align-items: center; width: 48px; height: 48px; } .toti-logo--mark img { width: 44px; height: 44px; object-fit: contain; } .toti-logo--full { width: 168px; } .toti-logo--full img { width: 168px; height: 168px; object-fit: contain; } /* Colour split follows the real lockup: TOTI is the gold half, MEDIA the silver. Both are dark-ground colours and the header is the dark ground — 8.07:1 and 7.87:1 on --toti-black. Neither may be reused on the paper ground, which is why this pairing only ever appears in the header and footer. */ .toti-logo__a { color: var(--toti-gold); } .toti-logo__b { color: var(--toti-silver); } .toti-search { position: relative; display: block; width: 100%; } .toti-hdr.toti-hdr .toti-search input[type="search"] { width: 100%; box-sizing: border-box; background: #232019; border: 1px solid #332F28; border-radius: var(--toti-r-pill); padding: 10px 42px 10px 18px; font-size: 13px; line-height: 1.3; color: var(--toti-line); -webkit-appearance: none; appearance: none; } .toti-hdr.toti-hdr .toti-search input[type="search"]::placeholder { color: #8D887E; /* 4.77:1 on #232019 */ opacity: 1; } .toti-hdr.toti-hdr .toti-search input[type="search"]:focus { outline: 2px solid var(--toti-gold); outline-offset: 1px; border-color: transparent; } .toti-hdr.toti-hdr .toti-search__go { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 50%; color: #8D887E; cursor: pointer; transition: color var(--toti-t-fast); } /* The submit button had no focus indicator whatever: Astra's reset zeroes the outline and the only thing left on :focus was a 0.05-alpha 1px shadow, which is invisible on this near-black bar. Measured with the state forced. */ .toti-hdr.toti-hdr .toti-search__go:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 2px; } .toti-hdr.toti-hdr .toti-search__go:hover { color: var(--toti-gold); } .toti-hdr.toti-hdr .toti-search__go svg { width: 16px; height: 16px; display: block; } .toti-actions { display: flex; align-items: center; gap: 18px; } .toti-hdr.toti-hdr .toti-actions__link { font-size: 12.5px; color: #BDB8AE; text-decoration: none; white-space: nowrap; transition: color var(--toti-t-fast); } .toti-hdr.toti-hdr .toti-actions__link:hover, .toti-hdr.toti-hdr .toti-actions__link:focus-visible { color: var(--toti-card); } .toti-hdr.toti-hdr .toti-quote { display: inline-block; background: var(--toti-gold); color: #241A04; border-radius: var(--toti-r-pill); padding: 9px 17px; font-size: 12.5px; font-weight: 600; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background var(--toti-t-fast); } .toti-hdr.toti-hdr .toti-quote:hover, .toti-hdr.toti-hdr .toti-quote:focus-visible { background: #F2B02A; color: #241A04; } /* Every other interactive element in this header was falling back to Astra's 1px dotted default — three different focus treatments across one bar, none of them the 2px ring the nav links, the archive and the footer all use. Gold is text-legal on this ground (8.07:1) and is the indicator everywhere else on dark, so the header now matches. Focus rings only paint under keyboard focus, so nothing about the header's resting appearance changes. */ .toti-hdr.toti-hdr a.toti-logo:focus-visible, .toti-hdr.toti-hdr .toti-util__links a:focus-visible, .toti-hdr.toti-hdr .toti-actions__link:focus-visible, .toti-hdr.toti-hdr .toti-quote:focus-visible, .toti-hdr.toti-hdr .elementor-menu-toggle:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 3px; } /* ---------- Tier 3, category nav ---------- */ /* The widget is a flex column holding [main nav][burger][drawer] and Elementor gives it a 20px gap. Once collapsed that gap is pure dead space under the burger, and it also holds the drawer off the header's bottom edge. */ .toti-hdr.toti-hdr .toti-hdr__navw { flex: 1 1 auto; width: auto; gap: 0; } .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-nav-menu { gap: 0; } .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item { padding: 0 0 12px; margin-right: 30px; font-size: 13.5px; font-weight: 500; line-height: 1.2; color: #BDB8AE; fill: currentColor; background: transparent; border-bottom: 2px solid transparent; transition: color var(--toti-t-fast), border-color var(--toti-t-fast); } .toti-hdr.toti-hdr .elementor-nav-menu--main li:last-child .elementor-item { margin-right: 0; } /* The indicator is the gold rule, but the colour lift to white is what carries the state for anyone who cannot separate the gold from the grey. Both. */ .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item:hover, .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item:focus, .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active, .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item.highlighted { color: var(--toti-card); background: transparent; border-bottom-color: var(--toti-gold); } .toti-hdr.toti-hdr .elementor-nav-menu--main .elementor-item:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 2px; } /* Mobile drawer */ .toti-hdr.toti-hdr .elementor-menu-toggle { background: transparent; color: var(--toti-line); padding: 8px 0; } .toti-hdr.toti-hdr .elementor-menu-toggle:hover { color: var(--toti-card); } .toti-hdr.toti-hdr .elementor-menu-toggle svg { fill: currentColor; width: 24px; height: 24px; } /* Elementor lays the drawer out in normal flow inside the nav widget, which sits inside the container's 34px padding — so left alone it renders as a floating panel with a gutter down each side. Pull it back to full bleed with margins, not `left`: it is statically positioned, so offsets are inert. It also carries no top border. The collapsed drawer is a zero-height element still in the flow, and a 1px border is enough to paint a stray hairline under the burger on every mobile page. The background change carries the separation instead. */ .toti-hdr.toti-hdr .elementor-nav-menu--dropdown { background-color: #1B1917; margin-top: 0; margin-left: -34px; width: calc(100% + 68px); max-width: none; } .toti-hdr.toti-hdr .elementor-nav-menu--dropdown .elementor-item { margin-right: 0; padding: 13px 34px; font-size: 14px; color: var(--toti-on-dark); border-bottom: 1px solid #232019; } .toti-hdr.toti-hdr .elementor-nav-menu--dropdown .elementor-item:hover, .toti-hdr.toti-hdr .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background: #232019; color: var(--toti-card); border-bottom-color: #232019; } /* ---------- Responsive ---------- */ /* At and below the tablet breakpoint the nav is a single burger control, so tier 3 no longer needs the room a row of links wanted. */ /* At and below the tablet breakpoint tier 3 is a single burger, and the drawer it opens should run to the header's bottom edge rather than float above a strip of padding — so the row's own bottom padding goes to zero and the toggle's padding provides the 40px touch target. */ @media (max-width: 1000px) { .toti-hdr.toti-hdr .toti-hdr__nav { --padding-bottom: 0px; } } @media (max-width: 768px) { /* The utility bar goes first: its three links all have a home elsewhere and the phone number survives as a tel: link in the footer. */ .toti-hdr.toti-hdr .toti-hdr__utility { display: none; } /* A third dead `--gap: 12px 12px` lived here and is gone for the same reason as the other two: the mobile header has always rendered at Elementor's 20px, which is what was reviewed. */ .toti-hdr.toti-hdr .toti-hdr__main { --padding-left: 16px; --padding-right: 16px; --padding-top: 12px; --padding-bottom: 12px; flex-wrap: wrap; } /* Logo, Account and the quote pill hold the top row; the search drops to a full-width second row rather than collapsing to an icon, because pasting a style code off a supplier PDF is the fastest route into the catalogue and should not cost an extra tap. */ .toti-hdr.toti-hdr .toti-hdr__searchw { order: 3; flex: 1 0 100%; max-width: none; } .toti-hdr.toti-hdr .toti-hdr__actions { margin-left: auto; } .toti-actions { gap: 14px; } .toti-hdr.toti-hdr .toti-hdr__nav { --padding-left: 16px; --padding-right: 16px; } .toti-hdr.toti-hdr .elementor-nav-menu--dropdown { margin-left: -16px; width: calc(100% + 32px); } .toti-hdr.toti-hdr .elementor-nav-menu--dropdown .elementor-item { padding-left: 16px; padding-right: 16px; } } /* Measured, not guessed: logo 108 + Account 55 + pill 91 + gaps and padding is 314px, so all three still fit on a 375px iPhone. Account only gives way on the narrowest phones still in use. */ @media (max-width: 340px) { .toti-hdr.toti-hdr .toti-actions__link { display: none; } } /* ========================================================================== Site footer -------------------------------------------------------------------------- The original version was paired with the Elementor theme-builder template "Toti Footer". From 1.17.8, inc/footer.php replaces that static payload at render time with the data-aware native footer; the class vocabulary remains here so the old database template is a harmless fallback. Contrast: unlike the header, this block sits on --toti-card (white), which is the ground the brand gold FAILS on (2.34:1). Nothing here may set gold as text. The measured pairings actually used: --toti-gold-deep #8A6210 on white 5.53:1 ✓ (logo "TOTI") --toti-ink #232322 on white 15.79:1 ✓ (column headings) --toti-muted #6E6A62 on white 5.45:1 ✓ (links, body, base strip) --toti-silver #A8A7A7 on white 2.40:1 — logotype only, see below The base strip is --toti-muted and not --toti-faint. #95908A is 3.20:1 on white, which fails AA for text at any size; the design's intent there is "quieter than the links", and 12px against the links' 13px carries that without dropping below the threshold. --toti-silver on the "MEDIA" half of the lockup is the one sub-4.5 pairing. WCAG 1.4.3 exempts logotypes, and this is the brand's own two-tone wordmark, so it is not a compliance failure — but it IS the faintest thing on the page and worth revisiting when a proper horizontal logo asset exists. ========================================================================== */ .toti-ftr.toti-ftr { --width: 100%; width: 100%; max-width: none; background: var(--toti-card); border-top: 1px solid var(--toti-line); font-family: var(--toti-sans); } /* Elementor's kit leaves --e-global-typography-*-font-family empty, so its widget CSS resolves to a bare `Sans-serif`. Pull everything back to ours. */ .toti-ftr.toti-ftr .elementor-heading-title, .toti-ftr.toti-ftr h2, .toti-ftr.toti-ftr a { font-family: var(--toti-sans); } /* ---------- Column row ---------- */ /* Grid, not the container's flex, and for a specific reason: Elementor ships `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` at (0,4,0), so capping a flex child's width from a theme rule means either matching that weight or reaching for !important. Grid puts the cap in the track instead, where nothing competes for it. `--display` is Elementor's own hook for this. Gaps go through --row-gap/--column-gap. `--gap` looks like the control and is not: Elementor declares `gap:var(--row-gap) var(--column-gap)` and leaves `--gap` as an unused legacy alias, so setting it changes nothing. The brand column is the widest track, but capped at 34ch — its sentence is set to 32ch and a wider column only pushes the link columns away from it. The link tracks are capped too: left to stretch, a four-word column on a 1920px screen ends up with its heading and its links a hand-span apart. */ .toti-ftr.toti-ftr .toti-ftr__cols { --display: grid; --row-gap: 34px; --column-gap: 56px; grid-template-columns: 34ch repeat(3, minmax(0, 240px)); align-items: start; /* Only bites once the link columns have hit their 240px cap: below that the tracks absorb the free space and the gaps stay at 56px. Above it, the leftover goes into the gaps instead of pooling on the right, so the last column's edge lines up with the header's quote pill rather than stopping 170px short of it. */ --justify-content: space-between; } /* ---------- Brand column ---------- */ /* The light-ground variant of the header lockup. Both halves swap: the base rules set gold (2.34:1 here) and the pale brand silver (2.40:1), neither of which belongs on white. Each needs the two-class weight to beat the `.toti-logo__a` / `.toti-logo__b` rules further up the file. The silver swap is a legibility decision, not a compliance one — WCAG 1.4.3 exempts logotypes either way. At 2.40:1 the "MEDIA" half rendered paler than the sentence underneath it, which reads as a fault rather than a two-tone lockup. The header keeps the true brand silver, where it sits at 7.87:1 on --toti-black and works as drawn. */ .toti-logo--light .toti-logo__a { color: var(--toti-gold-deep); } .toti-logo--light .toti-logo__b { color: var(--toti-silver-on-light); } .toti-fbrand p { margin: 12px 0 0; max-width: 32ch; font-size: 13.5px; line-height: 1.6; color: var(--toti-muted); } /* ---------- Link columns ---------- */ .toti-ftr.toti-ftr .toti-fcol__h { margin: 0 0 12px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-ink); } .toti-fcol__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .toti-ftr.toti-ftr .toti-fcol__list a { font-size: 13px; line-height: 1.4; color: var(--toti-muted); text-decoration: none; transition: color var(--toti-t-fast); } /* Colour AND underline on hover: the colour shift alone is a 1.4 step on a grey and is easy to miss, and this is the one block on the page where a visitor is scanning for a specific word. */ .toti-ftr.toti-ftr .toti-fcol__list a:hover, .toti-ftr.toti-ftr .toti-fcol__list a:focus-visible { color: var(--toti-ink); text-decoration: underline; text-underline-offset: 3px; } .toti-ftr.toti-ftr a:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } /* ---------- Base strip ---------- */ /* Inset margins rather than side padding, so the rule above the strip starts and ends where the columns above it do instead of running edge to edge. `--width: auto` is not cosmetic. Elementor hands every container `width: var(--width)` with `--width: 100%`, and 100% plus a 34px margin on each side is 68px wider than the viewport — a page-wide horizontal scrollbar caused entirely by the footer's base strip. Auto lets the margins come out of the width instead of being added to it. */ .toti-ftr.toti-ftr .toti-ftr__base { --row-gap: 6px; --column-gap: 20px; --margin-top: 34px; --margin-left: 34px; --margin-right: 34px; --width: auto; border-top: 1px solid var(--toti-line); } .toti-ftr.toti-ftr .toti-ftr__baseline { flex: 0 0 auto; width: auto; } .toti-ftr.toti-ftr .toti-ftr__baseline .elementor-heading-title { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--toti-muted); } /* ---------- Responsive ---------- */ /* Two columns, and at 1000 rather than 768 — measured, not copied from the header. Four columns need 34ch for the brand, 3x120px for the link columns and 3x56px of gap: 912px of viewport before "specifications" stops fitting on a line of its own. 768 to 912 would be a band of four columns breaking words mid-air. 1000 is also where the header's nav collapses and the product grid drops to two, so the whole page changes shape at one width. The brand column takes a full row of its own rather than one of the two cells: its paragraph is the only prose in the footer, and half of a 1000px screen leaves it running four words to the line. */ @media (max-width: 1000px) { .toti-ftr.toti-ftr .toti-ftr__cols { --row-gap: 28px; --column-gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .toti-ftr.toti-ftr .toti-ftr__brandw { grid-column: 1 / -1; } } /* Side gutters follow the header's: 34px down to the phone breakpoint, 16px below it, so the footer logo stays aligned under the header logo. */ @media (max-width: 768px) { .toti-ftr.toti-ftr .toti-ftr__cols { --padding-left: 16px; --padding-right: 16px; --padding-top: 34px; } .toti-ftr.toti-ftr .toti-ftr__base { --margin-left: 16px; --margin-right: 16px; } /* The only prose in the footer, and the only thing here that is body copy rather than a link list or a label. 13.5px is under the 14px floor this project holds itself to on phones. Desktop keeps 13.5px, which is what was reviewed. */ .toti-fbrand p { font-size: 14px; } } /* One column. The base strip stacks too: on a 375px screen its two lines add up to 343px against 343px of room, so they sit edge to edge with the second line touching the viewport — and Astra's back-to-top button parks on top of it. Stacked, both lines start at the gutter with room to spare. */ @media (max-width: 480px) { .toti-ftr.toti-ftr .toti-ftr__cols { grid-template-columns: minmax(0, 1fr); } .toti-ftr.toti-ftr .toti-ftr__base { --flex-direction: column; --align-items: flex-start; --justify-content: flex-start; } } /* * Product card. * * No tinted photo panel. Every supplier photographs on white, so a tinted panel * draws a visible white box inside it. The card and the photo area are both pure * white and the card is defined by the cool-grey page ground behind it. */ .toti-card { background: var(--toti-card); border: 1px solid transparent; border-radius: var(--toti-r-card); padding: var(--toti-s4); list-style: none; position: relative; /* Column flex so the quote button can be pushed to the bottom. Without it a two-line product name drops that one button below its neighbours and the row grows a ragged bottom edge. */ display: flex; flex-direction: column; height: 100%; transition: border-color var(--toti-t-fast), box-shadow var(--toti-t-fast), transform var(--toti-t-fast); } /* The three lines above are the ones that make the card work, and inside any Elementor products grid they were silently not applying. Elementor Pro ships `.elementor-products-grid ul.products.elementor-grid li.product { display: var(--button-align-display); flex-direction: var(--button-align-direction); … }` at (0,3,2). Those custom properties are only ever GIVEN a value when the widget's "automatically align buttons" switch is on; with it off they are undefined, the declaration is invalid at computed-value time, and the property falls back to its initial value. The measured result on this site was `display: block` on every card in every Elementor grid — so `margin-top: auto` on the quote button had no flex container to push against, and any card whose name wrapped to one line instead of two, or that had no colour line, sat its button 40px higher than its neighbours. It is the archive's whole product grid and this page's related row, and it reads as sloppiness rather than as a bug, which is why it survived. Four classes and two elements clears Elementor's (0,3,2). */ ul.products li.product.toti-card.toti-card { display: flex; flex-direction: column; height: 100%; /* Elementor's product rule also resets list-item padding to zero. Keep the card content clear of the hover border instead of letting the title, swatches and quote action sit one pixel from its edge. */ padding: var(--toti-s4); box-sizing: border-box; } .toti-card:hover, .toti-card:focus-within { border-color: var(--toti-line); box-shadow: var(--toti-shadow-card); transform: translateY(-2px); } .toti-card__shot { position: relative; aspect-ratio: 1; flex: 0 0 auto; /* keep the square, never let the column squeeze it */ display: flex; align-items: center; justify-content: center; margin-bottom: var(--toti-s3); } .toti-card__shot img { width: 88%; height: 88%; object-fit: contain; } .toti-flag { position: absolute; top: 0; left: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--toti-muted); background: var(--toti-chip); border-radius: 3px; padding: 4px 8px; } .toti-flag--ok { color: var(--toti-ok); background: var(--toti-ok-bg); } /* letter-spacing is restated, not inherited. The element is an h2 on archives and an h3 inside the related-products row (see woocommerce/content-product.php, which picks the level so the page has no skipped heading); tokens.css gives `h2` a -.015em track, so without this the same card name would render with slightly tighter letterfit on an archive than in a related row. */ .toti-card__name { margin: 0 0 3px; font-size: 14px; line-height: 1.32; letter-spacing: normal; } .toti-card__name a { color: var(--toti-ink); text-decoration: none; } /* Stretched hit area, so the whole card is clickable without nesting a button inside an anchor. */ .toti-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* --toti-muted, not --toti-faint. Measured on the rendered card: #95908A on the white card ground is 3.17:1 and fails AA outright — and the single product block's own header in this file already records --toti-faint as "NOT USED FOR TEXT". The card was the one place still using it as type. #6E6A62 is 5.45:1 on white and is the same grey the flag chip and the footer links already use. This is the style code, the string a buyer reads down a phone; it is the last thing on the card that should be the faintest. */ .toti-card__code { margin: 0; font-size: 11.5px; letter-spacing: .02em; color: var(--toti-muted); } /* Shown instead of swatches when the supplier gave us colour names but no hex, which is most of the catalogue. Same weight as the SKU line so the card keeps its vertical rhythm whichever branch renders. */ /* Same 3.17:1 failure and the same fix as .toti-card__code above. */ .toti-card__colours { margin: 10px 0 12px; font-size: 11.5px; letter-spacing: .02em; color: var(--toti-muted); } .toti-sw { display: flex; align-items: center; gap: 5px; margin: 10px 0 12px; padding: 0; list-style: none; } .toti-sw li { display: block; } .toti-sw li span[style] { width: 13px; height: 13px; border-radius: 50%; display: block; border: 1px solid rgba(0, 0, 0, .13); } /* "+10" is a count, not decoration — same 3.17:1 failure as the two rules above. */ .toti-sw__more { font-size: 10.5px; color: var(--toti-muted); } .toti-card__add { position: relative; z-index: 2; /* above the stretched link */ margin-top: auto; /* pin to the bottom, whatever the name wraps to */ display: block; text-align: center; border: 1px solid var(--toti-btn-line); border-radius: var(--toti-r-btn); background: var(--toti-card); padding: 9px; font-size: 12.5px; font-weight: 600; color: var(--toti-ink); text-decoration: none; transition: background var(--toti-t-fast), color var(--toti-t-fast), border-color var(--toti-t-fast); } .toti-card:hover .toti-card__add { background: var(--toti-black); color: var(--toti-card); border-color: var(--toti-black); } .toti-card__name a:focus-visible, .toti-card__add:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } /* Grid */ /* `.woocommerce ul.products.products` is not belt-and-braces, it is the whole point of this block, and it was measured on /shop/ rather than reasoned about. The Elementor archive template is conditioned on `product_cat` only, so the shop page — which is where the first nav item, "All products", actually lands — falls through to Astra's WooCommerce stylesheet. Astra ships `.woocommerce ul.products:not(.elementor-grid)` at (0,2,1), which beats a bare `ul.products` at (0,0,1) and then imposes its OWN breakpoints. The measured result on /shop/ was four columns at 1000px — 225px-wide cards holding a 300px thumbnail — and three at 768px, while every category page beside it was showing two. One catalogue, two grids, depending which link you arrived by. The doubled class takes this to (0,3,1) and settles it. The bare `ul.products` rules are kept underneath for any grid rendered outside a `.woocommerce` wrapper; the archive and related-products blocks restate the same grid at higher weights again, so nothing here disturbs them. */ ul.products, .woocommerce ul.products.products, .woocommerce-page ul.products.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } @media (max-width: 1200px) { ul.products, .woocommerce ul.products.products, .woocommerce-page ul.products.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { ul.products, .woocommerce ul.products.products, .woocommerce-page ul.products.products { grid-template-columns: repeat(2, 1fr); } } /* Astra has a SECOND, heavier rule for the tablet band, and the doubled class above does not reach it. Reading the devtools rule list is what got this wrong the first time. The rule that wins is a three-selector list, and the branch that actually matches is NOT the one that reads as the most specific: .ast-container .woocommerce ul.products:not(.elementor-grid) <- matches nothing, there is no .woocommerce element between .ast-container and the list .woocommerce-page ul.products:not(.elementor-grid) <- (0,3,1), matches .woocommerce.tablet-columns-3 ul.products:not(.elementor-grid) <- (0,4,1), matches Both matching branches hang off classes WooCommerce and Astra put on , inside `@media (max-width: 921px)`, forcing three columns. Measured: /shop/ was right at 1440, 1200, 1000 and 375 and still showed three columns at 921, 768 and 545 while every category page beside it showed two. `:not(.elementor-grid)` is why the archive and related grids never saw any of this — they carry `.elementor-grid`, the shop's list does not. So the bar is (0,4,1) and the anchor has to be on too. Four classes and two elements is (0,4,2), which clears it on weight rather than load order — load order cannot be relied on here, because Astra's customizer prints its WooCommerce CSS inline in the head, after every enqueued stylesheet. */ body.woocommerce-page ul.products.products.products, body.woocommerce ul.products.products.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--toti-s4); } @media (max-width: 1200px) { body.woocommerce-page ul.products.products.products, body.woocommerce ul.products.products.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { body.woocommerce-page ul.products.products.products, body.woocommerce ul.products.products.products { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Product category archive -------------------------------------------------------------------------- Paired with the Elementor theme-builder template "Toti Product Archive", exported to docs/design/templates/archive.json, and with the shortcodes in inc/archive.php. Same division of labour as the header and the footer: the template supplies the skeleton and the class hooks, everything visual is here. ONE template serves every product category. Nothing in this file may name a category, and every rule has to survive its data being absent — no term image, no description, no children, no products. Specificity is the recurring problem in this block, from two directions: - Elementor Pro ships widget-woocommerce-products-archive.min.css, which sets the grid's column count at ITS breakpoints (1025 / 1024 / 767) with `.elementor-widget-wc-archive-products .products` at (0,2,0). This project's breakpoints are 1200 / 1000, so between 1000 and 1024 the two disagree about whether the grid is two columns or three. Every grid rule below is anchored on a doubled `.toti-arch.toti-arch` to settle it. - Astra's WooCommerce compatibility CSS styles the pagination at `.woocommerce-js nav.woocommerce-pagination ul li` (0,2,3), which beats a single class. Same fix. Contrast, measured, not assumed: banner is --toti-black, so gold is text-legal there 8.07:1 ✓ --toti-on-dark #D3CEC4 on --toti-black 11.71:1 ✓ trail #A7A29A on --toti-black (matches the header) 7.62:1 ✓ body of the page is --toti-paper, where gold is DECORATION ONLY — the two gold marks below are a 2px rule and a hairline, never text. --toti-muted #6E6A62 on --toti-paper 5.02:1 ✓ ========================================================================== */ /* Release Astra's content container, so the banner can be full-bleed under a full-bleed header. Astra otherwise caps `.ast-container` at 1240px with 20px of padding, and a black band inset from both sides under a black header reads as a hero card that has come loose rather than as a masthead. Done in CSS and hung off `tax-product_cat` and `post-type-archive-product` — WordPress's own body classes for the category archive and for the catalogue root, present whatever the theme thinks the layout is. Both pages run the same Elementor template, so both have to be released; `/shop/` sat inset to Astra's 1240px container and its H1 landed at x=120 against the logo's x=34. The shop half is deliberately WordPress's class and not Astra's `ast-woo-shop-archive`, which Astra also puts on category archives, or WooCommerce's `woocommerce-shop`, which is a WooCommerce implementation detail. Two routes were tried and rejected first: - `width:100vw; margin-left:calc(50% - 50vw)` on the banner. 100vw includes the scrollbar gutter, so on any platform with classic scrollbars that puts a horizontal scrollbar on every category page. - Filtering `astra_get_content_layout` to `page-builder`. Registered correctly and had no effect: the body class stayed `ast-plain-container`, so something downstream in Astra 4.13 is not reading that value on this path. A layout that depends on winning an argument with the parent theme's internals is a layout that breaks on a theme update. The customizer prints `.ast-woo-shop-archive .site-content > .ast-container {max-width:1240px}` inline in the head, at (0,3,0) and after every enqueued stylesheet, so these rules have to out-weigh it rather than out-order it. */ body.tax-product_cat .site-content > .ast-container, body.post-type-archive-product .site-content > .ast-container { max-width: 100%; padding: 0; } body.tax-product_cat .site-content #primary, body.post-type-archive-product .site-content #primary { margin: 0; padding: 0; } body.tax-product_cat .site-content .ast-woocommerce-container, body.post-type-archive-product .site-content .ast-woocommerce-container { padding: 0; } .toti-arch.toti-arch { --width: 100%; width: 100%; max-width: none; font-family: var(--toti-sans); } /* ---------- Banner ---------- */ /* The header above this is also --toti-black, so without a divider the two run together into one unbroken slab. #262320 is the same hairline the header uses between its own tiers. */ .toti-abnr { position: relative; isolation: isolate; padding: 34px 34px 40px; background-color: var(--toti-silver-wash); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; overflow: hidden; } /* The NORMAL case, not the fallback: terms come from the supplier importer and almost none of them will ever carry an image. The cool silver surface belongs to the logo palette and keeps the band distinct from the charcoal header. */ .toti-abnr--flat { background: var(--toti-silver-wash); background-image: none; } /* With a term image, the gradient is doing real work: it holds the left half of the band at close to solid --toti-black so the H1 and the description keep their measured contrast whatever the photograph happens to be. */ .toti-abnr--shot { background: var(--toti-silver-wash); background-image: none; } .toti-abnr::after { content: ""; position: absolute; z-index: -1; top: 50%; right: max(34px, calc((100% - 1200px) / 2)); width: 360px; height: 360px; background: url("../images/brand/toti-media-mark.png") 50% 50% / contain no-repeat; filter: grayscale(1) brightness(.35); opacity: .075; transform: translateY(-50%); pointer-events: none; } .toti-abnr__in { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin-inline: auto; } .toti-abnr__trail { font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: rgba(35, 35, 34, .68); } .toti-abnr__trail a { color: var(--toti-ink); text-decoration: none; transition: color var(--toti-t-fast); } .toti-abnr__trail a:hover, .toti-abnr__trail a:focus-visible { color: #714B06; } .toti-abnr__sep { display: inline-block; margin: 0 7px; color: rgba(35, 35, 34, .36); } .toti-abnr__h { max-width: 22ch; margin: 14px 0 0; color: var(--toti-ink); } /* Gold as text is legal here and nowhere else on the page: 8.07:1 on --toti-black. It is the count, which is the one number a trade buyer scans a category page for. */ .toti-abnr__count { margin: 11px 0 0; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--toti-gold); } /* Rendered only when the term actually has a description — see toti_child_archive_banner_shortcode(). No rule here may assume it exists. */ .toti-abnr__lede { margin-top: 13px; max-width: 66ch; font-size: 14.5px; line-height: 1.65; color: var(--toti-on-dark); } .toti-abnr__lede p { margin: 0 0 10px; } .toti-abnr__lede p:last-child { margin-bottom: 0; } .toti-abnr a:focus-visible { outline: 2px solid var(--toti-ink); outline-offset: 3px; } /* ---------- Body ---------- */ /* The container's own gap is zero and spacing lives on the blocks instead. That is deliberate: two of the three children render as an empty string on most archives, and a flex gap would still reserve a gutter for a widget that printed nothing — a stray band of whitespace on every leaf category. */ .toti-arch.toti-arch .toti-arch__body { --row-gap: 0px; --column-gap: 0px; /* The Elementor container includes 34px side padding. A 1268px outer cap therefore leaves a deliberate 1200px content measure while the banner and page ground remain full bleed. */ --width: 100%; width: 100%; max-width: 1268px; margin-inline: auto; } /* ---------- Child categories ---------- */ /* A wrapping row of plates, not a grid of image cards. Two reasons: the importer gives child terms no artwork, so an image tile would be a row of identical placeholders; and the count of children is whatever the supplier tree happens to hold — four under Headwear, one under Bags and Travel — which a fixed grid handles badly and a wrapping row handles by doing nothing. */ .toti-atiles { display: block; margin: 0 0 var(--toti-s7); } .toti-atiles__h { margin: 0 0 12px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-muted); } .toti-atiles__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .toti-atiles__list li { display: block; } .toti-atiles__list a { display: inline-flex; align-items: baseline; gap: 9px; background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-btn); padding: 10px 15px; text-decoration: none; transition: border-color var(--toti-t-fast), box-shadow var(--toti-t-fast), transform var(--toti-t-fast); } .toti-atiles__list a:hover, .toti-atiles__list a:focus-visible { border-color: var(--toti-btn-line); box-shadow: var(--toti-shadow-card); transform: translateY(-1px); } .toti-atiles__list a:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } .toti-atiles__n { font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--toti-ink); } .toti-atiles__c { font-size: 11.5px; line-height: 1.2; letter-spacing: .02em; color: var(--toti-muted); } /* ---------- Ordering control ---------- */ /* The result count is turned off in the template: the banner already states the total, and "Showing 1-16 of 28 results" is checkout language on a site that never shows a price. The sort control stays — 28 caps is a real list to work through. */ .toti-arch.toti-arch .woocommerce-ordering { display: flex; justify-content: flex-end; float: none; margin: 0 0 var(--toti-s5); } /* `width: auto` is load-bearing. Astra sets a blanket `select { width: 100% }`, so inside a flex row the sort control stretched the full width of the page and put its own chevron against the right-hand card edge — it read as a search field, not a sort. */ .toti-arch.toti-arch .woocommerce-ordering select { width: auto; background-color: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-btn); padding: 9px 12px; font-family: var(--toti-sans); font-size: 13px; line-height: 1.2; color: var(--toti-ink); max-width: 100%; } .toti-arch.toti-arch .woocommerce-ordering select:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } /* ---------- Product grid ---------- */ /* Elementor Pro's archive stylesheet sets both the column count (at 1025/1024/ 767) and a 20px/40px gutter, at weights that beat a bare `ul.products`. These restate this project's own grid — the same one content-product.php was designed against — at a weight that wins. `ul.products.products` is not a typo. Elementor's gutter rule is `.elementor-products-grid ul.products.elementor-grid` at (0,3,1), which TIES with the obvious selector here and then wins on load order — the measured result was a 40px/20px grid that looked like this file had simply not been read. The repeated class buys the one point of specificity that settles it. */ .toti-arch.toti-arch .elementor-widget-wc-archive-products ul.products.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } @media (max-width: 1200px) { .toti-arch.toti-arch .elementor-widget-wc-archive-products ul.products.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .toti-arch.toti-arch .elementor-widget-wc-archive-products ul.products.products { grid-template-columns: repeat(2, 1fr); } } /* ---------- Pagination ---------- */ .toti-arch.toti-arch nav.woocommerce-pagination { margin-top: var(--toti-s8); } .toti-arch.toti-arch nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; border: 0; list-style: none; } .toti-arch.toti-arch nav.woocommerce-pagination ul li { display: block; margin: 0; border: 0; overflow: visible; } .toti-arch.toti-arch nav.woocommerce-pagination ul li a, .toti-arch.toti-arch nav.woocommerce-pagination ul li span { display: block; min-width: 40px; padding: 10px 12px; background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-btn); font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; color: var(--toti-muted); transition: border-color var(--toti-t-fast), color var(--toti-t-fast), background var(--toti-t-fast); } .toti-arch.toti-arch nav.woocommerce-pagination ul li a:hover, .toti-arch.toti-arch nav.woocommerce-pagination ul li a:focus { background: var(--toti-card); border-color: var(--toti-btn-line); color: var(--toti-ink); } .toti-arch.toti-arch nav.woocommerce-pagination ul li span.current { background: var(--toti-black); border-color: var(--toti-black); color: var(--toti-card); } .toti-arch.toti-arch nav.woocommerce-pagination ul li a:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } /* ---------- Empty category ---------- */ /* No box. A bordered panel in the middle of a page that is otherwise a field of white cards would read as one more card, and this is the one place on the site where the visitor needs to be told to go somewhere else. Type on the page ground, under a short gold rule — gold is decoration here, never text, because this block sits on --toti-paper. */ .toti-aempty { max-width: 54ch; padding: var(--toti-s6) 0 var(--toti-s9); } .toti-aempty::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: var(--toti-s5); background: var(--toti-gold); } .toti-aempty__h { margin: 0; font-size: 23px; line-height: 1.25; letter-spacing: -.015em; color: var(--toti-ink); } .toti-aempty__p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--toti-muted); } .toti-aempty__go { display: inline-block; margin-top: var(--toti-s5); background: var(--toti-black); border: 1px solid var(--toti-black); border-radius: var(--toti-r-btn); padding: 11px 20px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--toti-card); text-decoration: none; transition: background var(--toti-t-fast), border-color var(--toti-t-fast); } .toti-aempty__go:hover, .toti-aempty__go:focus-visible { background: var(--toti-ink); border-color: var(--toti-ink); color: var(--toti-card); } .toti-aempty__go:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } /* ---------- Responsive ---------- */ /* Side gutters follow the header and footer exactly — 34px down to the phone breakpoint, 16px below it — so the H1, the first card and the site logo all sit on one vertical line. */ @media (max-width: 768px) { .toti-abnr { padding: 26px 16px 32px; } .toti-abnr::after { right: -74px; width: 240px; height: 240px; opacity: .055; } .toti-abnr__h { max-width: 84%; } .toti-arch.toti-arch .toti-arch__body { --padding-left: 16px; --padding-right: 16px; } .toti-abnr__lede { font-size: 14px; } } /* ========================================================================== Single product -------------------------------------------------------------------------- Paired with the Elementor theme-builder template "Toti Single Product", exported to docs/design/templates/single.json, and with the shortcodes in inc/single.php. Same division of labour as everything above: the template supplies the skeleton and the class hooks, everything visual is here. ONE template serves every product. Nothing in this file may name a product, a supplier or a category, and every rule has to survive its data being absent — no gallery image, no description, no branding data, no variations, no related products. There is no price rule in this block, and there is nothing to hide: the price is removed in PHP (inc/single.php and the catalogue plugin's Price_Guard), so it never reaches the DOM. A `display:none` here would be a price that is still in view-source, still in the markup a crawler reads, and one CSS regression away from visible. Contrast, measured, not assumed: --toti-ink #232322 on --toti-paper 14.68:1 ✓ headings, names --toti-muted #6E6A62 on --toti-paper 5.02:1 ✓ labels, body, trail --toti-muted #6E6A62 on --toti-card 5.38:1 ✓ inside the panels --toti-ok #2F6B47 on --toti-ok-bg 5.09:1 ✓ the in-stock row #241A04 on --toti-gold 7.25:1 ✓ the quote button --toti-faint #95908A on --toti-paper 2.95:1 ✗ NOT USED FOR TEXT The quote button is the one gold fill on a light page, and it is a fill and not a text colour: gold #DF9D18 as type on paper is 2.24:1 and forbidden. It is gold because it is the same action as the header's gold quote pill and the two should read as one thing. ========================================================================== */ /* Release Astra's content container, exactly as the archive does and for the same reason: the header and footer are full-bleed with 34px gutters, so a product page inset to Astra's 1240px would put the H1 on a different vertical line from the site logo directly above it. Astra prints `.ast-woo-shop-single .site-content > .ast-container` inline in the head at (0,3,0), after every enqueued stylesheet, so these have to out-weigh it rather than out-order it. `body.single-product` is WordPress's own class for this template and is present whatever Astra thinks the layout is. */ body.single-product .site-content > .ast-container { max-width: 100%; padding: 0; } body.single-product .site-content #primary { margin: 0; padding: 0; } body.single-product .site-content .ast-woocommerce-container { padding: 0; } .toti-single.toti-single { --width: 100%; width: 100%; /* The root carries Elementor's 34px gutters. Capping the outer box at 1268px leaves exactly 1200px for its children and centres every major section in one move, including widgets whose generated selectors beat a theme-level max-width on the widget itself. */ max-width: 1268px; margin-inline: auto; font-family: var(--toti-sans); } /* ---------- Breadcrumb ---------- */ /* The archive puts its trail inside a black banner. There is no banner here — a black slab above a white gallery panel would read as a second masthead — so the trail sits on the page ground and needs the light-ground greys. */ .toti-strail { padding: 20px 0 22px; font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: var(--toti-muted); } .toti-strail a { color: var(--toti-muted); text-decoration: none; transition: color var(--toti-t-fast); } .toti-strail a:hover, .toti-strail a:focus-visible { color: var(--toti-ink); } .toti-strail a:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } .toti-strail__sep { display: inline-block; margin: 0 7px; color: var(--toti-btn-line); } /* The product's own name, which is the H1 twenty pixels below it. This was --toti-silver-on-light, and that token is a LOGOTYPE colour: it is 4.54:1 on white, which is why it passes for the footer wordmark, but this trail sits on --toti-paper where the same #767676 measures 4.24:1 and fails AA. WCAG's logotype exemption covers the wordmark and does not travel with the token. --toti-muted is 5.02:1 on paper. The "quieter than the links" intent is carried by this element not being a link at all — it has no hover, no underline and no focus ring — rather than by a colour that cannot pass. */ .toti-strail__here { color: var(--toti-muted); } /* ---------- Two-column split ---------- */ /* Grid, not the container's flex, for the reason the footer's column row is a grid: Elementor ships `.elementor.elementor .e-con>.elementor-widget {max-width:100%}` at (0,4,0), so capping a flex child from a theme rule means matching that weight or reaching for !important. A grid puts the split in the track, where nothing competes for it. `--display` is Elementor's own hook. Gaps go through --row-gap/--column-gap. `--gap` is an unused legacy alias that looks like the control and sets nothing. The 1200px cap matches the archive body and centres the commercial block in the viewport. This keeps the photograph and detail column substantial without allowing either to stretch into the full 1372px canvas at 1440px. */ .toti-single.toti-single .toti-single__top { --display: grid; max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); --column-gap: 56px; --row-gap: 28px; align-items: start; } /* ---------- Gallery ---------- */ /* Every supplier photographs on white, so the panel is white too: a tinted one draws a visible box around the cut-out. Same card treatment as the archive grid, one size up. */ .toti-single .woocommerce-product-gallery { background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); padding: var(--toti-s5); width: 100%; } .toti-single .woocommerce-product-gallery__wrapper { margin: 0; } /* Flexslider measures the slides immediately after DOM ready. During that short initialisation window its viewport can inherit the combined natural height of every gallery image, producing a large blank jump before the script corrects it. The commercial image stage is square by design, so size containment gives it the final geometry from first paint while still allowing Flexslider to translate the slides inside it. */ .toti-single .flex-viewport { aspect-ratio: 1; contain: size; overflow: hidden; } /* Square, and letterboxed inside the square, exactly as the product card does it. Supplier photography arrives in whatever shape the supplier shot it: Captivity's model shots are 600x798 portrait, Amrod's pack shots are square. Left at natural height, a portrait shot makes the gallery 33% taller than the detail column beside it and the page changes shape from product to product. The panel is a fixed square and the photograph sits inside it. */ .toti-single .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 3px; } /* WooCommerce's zoom wraps the image in an anchor. Left bare it inherits Astra's link colour and paints a blue focus box round the photograph. */ .toti-single .woocommerce-product-gallery__image a { display: block; color: inherit; text-decoration: none; } .toti-single .woocommerce-product-gallery__image a:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } /* Thumbnail strip. Flexslider builds this only when there is more than one image, so it is absent on most of the catalogue and no rule here may assume it exists. The doubled `.flex-control-thumbs` on the `li` rule is load-bearing and was measured, not guessed. Astra ships `.woocommerce-js div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: calc(25% - 0.75em) }` at (0,4,3), which beats the obvious selector — and because these li are grid items, that 25% is 25% of the TRACK, not of the strip. The measured result was 17px-wide thumbnails in 116px cells: not broken enough to look like a bug, just a row of specks. Five classes takes the rule to (0,5,1), which wins. */ .toti-single .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: var(--toti-s4) 0 0; padding: 0; list-style: none; } .toti-single.toti-single .woocommerce-product-gallery .flex-control-thumbs.flex-control-thumbs li { display: block; float: none; width: auto; margin: 0; } .toti-single .flex-control-thumbs img { display: block; width: 100%; height: auto; cursor: pointer; opacity: 1; border: 1px solid var(--toti-line); border-radius: 4px; transition: border-color var(--toti-t-fast); } .toti-single .flex-control-thumbs img:hover { border-color: var(--toti-btn-line); } /* Flexslider marks the shown slide with `.flex-active`. Border, not opacity: the strip sits on white and a dimmed thumbnail of a white-background cut-out is not a visible state. */ .toti-single .flex-control-thumbs img.flex-active { border-color: var(--toti-ink); } /* ---------- Name and facts ---------- */ .toti-shead { margin: 0; color: var(--toti-ink); } /* Style code / range / availability. A dl, because that is what it is, laid out as rows rather than as a table: two of the three are absent on a product loaded by hand, and a table with holes in it is worse than a short list. */ .toti-sfacts { margin: var(--toti-s5) 0 0; padding: var(--toti-s4) 0; border-top: 1px solid var(--toti-line); border-bottom: 1px solid var(--toti-line); display: grid; gap: 9px; } .toti-sfacts__row { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: baseline; gap: 12px; } .toti-sfacts dt { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-muted); } .toti-sfacts dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--toti-ink); } /* The style code is the string a buyer pastes into the search field or reads down a phone, so it gets tracking and the code treatment rather than being set as prose. */ .toti-sfacts__row--code dd { font-weight: 600; letter-spacing: .04em; } /* Availability is the one row that carries a state, so it gets the same two chips the product card uses — the green is the card's in-stock flag and the grey is its supplier flag, at the same weights. */ .toti-sfacts__row--ok dd, .toti-sfacts__row--no dd { justify-self: start; border-radius: 3px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; } .toti-sfacts__row--ok dd { color: var(--toti-ok); background: var(--toti-ok-bg); } .toti-sfacts__row--no dd { color: var(--toti-muted); background: var(--toti-chip); } /* ---------- Variations, quantity, quote button ---------- */ .toti-single .elementor-add-to-cart { margin-top: var(--toti-s6); } /* WooCommerce ships the attribute selectors as a table. Unpicked into a stacked list: the label belongs above its select on a 375px screen, and a two-cell table row with a 108px label column puts "Colour" beside a select that has 180px left to show "Charcoal Melange" in. The five-class anchor is measured, not defensive. Astra ships `.woocommerce-js div.product form.cart .variations { border-bottom: 1px solid … }` at (0,4,2) and `… form.cart table { border-width: 0 0 1px }` at (0,3,3), and the obvious `.toti-single table.variations` at (0,2,1) loses to both. The measured result was a stray full-width hairline under the size dropdown that read as a section divider nobody had asked for — and, being one hairline, was the kind of thing that survives a review. */ .toti-single.toti-single .toti-single__cartw table.variations.variations, .toti-single.toti-single .toti-single__cartw table.variations.variations tbody, .toti-single.toti-single .toti-single__cartw table.variations.variations tr, .toti-single.toti-single .toti-single__cartw table.variations.variations th, .toti-single.toti-single .toti-single__cartw table.variations.variations td { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; } .toti-single.toti-single .toti-single__cartw table.variations.variations { margin-bottom: var(--toti-s5); } .toti-single.toti-single .toti-single__cartw table.variations.variations tr + tr { margin-top: var(--toti-s4); } .toti-single table.variations th.label label { display: block; margin: 0 0 7px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-muted); } /* Full width of the detail column, deliberately: it makes the selects, the quantity box and the quote button read as one stack of controls rather than three floating widgets, and colour names in this trade run long ("Charcoal Melange / Navy"). Restated against the archive's sort control so the two look like the same component. */ .toti-single.toti-single .toti-single__cartw .variations select { width: 100%; background-color: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-btn); padding: 11px 12px; font-family: var(--toti-sans); font-size: 14px; line-height: 1.2; color: var(--toti-ink); } /* Measured with the focus state forced, not assumed from reading this file: the quantity box had NO focus ring at all. Astra ships `.woocommerce-js .quantity input[type="number"]:focus { outline: 0 }` at (0,4,1), which beats `.toti-single .quantity input:focus-visible` at (0,3,1), and all that survived was Astra's `input:focus { border-style: dotted }` — a thin grey dashed border on a white box, on the one control in the buy path a keyboard user has to find. The select was fine; only the input lost. The doubled block class takes the input branch to (0,5,1). Kept as two selectors rather than one list so the select does not carry weight it does not need. */ .toti-single .variations select:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } .toti-single.toti-single .toti-single__cartw .quantity input:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; } /* The "Clear" link WooCommerce prints once a selection has been made. It is injected and removed by JS, so it may or may not be in the DOM. */ .toti-single .reset_variations { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--toti-muted); text-decoration: underline; text-underline-offset: 3px; } .toti-single .reset_variations:hover { color: var(--toti-ink); } /* Filled by JS with the chosen variation's description and availability. Its price slot is emptied in PHP, so on this site the div is frequently empty — hence margins on the children rather than on the wrapper. */ .toti-single .woocommerce-variation { margin: 0; } .toti-single .woocommerce-variation-description, .toti-single .woocommerce-variation-availability { font-size: 13.5px; line-height: 1.5; color: var(--toti-muted); } .toti-single .woocommerce-variation-availability { margin-bottom: var(--toti-s3); } .toti-single .woocommerce-variation-availability p { margin: 0; } /* The chosen variation's stock, as the same chip the facts row uses, so the "any of it" answer above and the "this colour, this size" answer here read as one control rather than two unrelated statements. Not decoration. WooCommerce paints `.stock.in-stock` #77A464, which is 2.85:1 on white and fails AA outright — measured on the rendered page, not assumed. --toti-ok is 6.05:1 on the chip ground. */ .toti-single.toti-single .woocommerce-variation-availability .stock.stock { display: inline-block; margin: 0; border-radius: 3px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--toti-ok); background: var(--toti-ok-bg); } .toti-single.toti-single .woocommerce-variation-availability .stock.out-of-stock, .toti-single.toti-single .woocommerce-variation-availability .stock.available-on-backorder { color: var(--toti-muted); background: var(--toti-chip); } /* Quantity beside the button on anything wider than a phone. The two are one control as far as the buyer is concerned. */ .toti-single form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--toti-s3); margin: 0; } /* The variation table and the single_variation wrapper are children of the variations form and must not be dragged into that flex row. */ .toti-single form.variations_form { display: block; } .toti-single form.variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--toti-s3); } .toti-single .quantity { flex: 0 0 auto; } .toti-single .quantity input.qty { width: 84px; height: 100%; min-height: 46px; box-sizing: border-box; background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-btn); padding: 10px 8px 10px 12px; font-family: var(--toti-sans); font-size: 14px; line-height: 1.2; text-align: left; color: var(--toti-ink); } /* The primary action on the page, and the same action as the header's gold quote pill — so it is the same gold, with the same near-black label at 7.25:1. Gold as a FILL, never as type: #DF9D18 on paper is 2.24:1. Six classes, and every one of them is paying for something. Astra's customizer prints `.woocommerce button.button.alt.disabled` AND `.woocommerce button.button.alt.disabled.wc-variation-selection-needed` INLINE IN THE HEAD, at (0,5,1) and after every enqueued stylesheet — so a theme rule that merely ties loses on order. The measured result was the most embarrassing kind of failure available here: the enabled button was correctly gold, and the DISABLED one, which is the state every one of the 44 variable products opens in, was Astra's stock blue. */ .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button { flex: 0 1 auto; min-height: 46px; background: var(--toti-gold); border: 1px solid var(--toti-gold); border-radius: var(--toti-r-btn); padding: 12px 28px; font-family: var(--toti-sans); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: #241A04; text-transform: none; cursor: pointer; transition: background var(--toti-t-fast), border-color var(--toti-t-fast); } .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button:hover, .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button:focus { background: #F2B02A; border-color: #F2B02A; color: #241A04; } .toti-single .single_add_to_cart_button:focus-visible { outline: 2px solid var(--toti-ink); outline-offset: 2px; } /* WooCommerce disables the button until a full combination is chosen. The default `opacity:.5` on gold lands at 3.1:1 for the label, so the disabled state is drawn with real colours instead of a transparency. */ .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button.disabled, .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button:disabled { background: var(--toti-chip); border-color: var(--toti-btn-line); color: var(--toti-silver-on-light); opacity: 1; cursor: not-allowed; } /* ---------- Branding positions ---------- */ /* The block that says what this business actually sells. Everyone in the trade lists the same garments off the same three wholesalers; the decoration is done in house, and this list is the part a catalogue reseller cannot copy. A panel and not loose type, because it has to read as a specification rather than as marketing — and because on the 50 of 90 products with no branding data it is absent entirely, so it cannot be load-bearing for the page's rhythm. */ .toti-sbrand { margin-top: var(--toti-s6); background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); padding: var(--toti-s5); } /* Gold as a rule, not as type: this panel is on white. */ .toti-sbrand__h { position: relative; margin: 0; padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-ink); } .toti-sbrand__h::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--toti-gold); } .toti-sbrand__lede { margin: 8px 0 0; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--toti-muted); } .toti-sbrand__row { margin-top: var(--toti-s4); padding-top: var(--toti-s4); border-top: 1px solid var(--toti-line); } .toti-sbrand__pos { margin: 0 0 9px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--toti-ink); } .toti-sbrand__m { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .toti-sbrand__m li { display: block; background: var(--toti-chip); border-radius: 3px; padding: 5px 10px; font-size: 12px; line-height: 1.3; color: var(--toti-ink); } /* ---------- Description ---------- */ /* Renders only when the supplier sent one — see toti_child_single_details_shortcode(). No rule here may assume it exists, which is why the top rule and the spacing are on this block and not on the container that holds it. */ .toti-sdesc { margin-top: var(--toti-s8); margin-inline: auto; max-width: 900px; padding-block: var(--toti-s7); border-top: 1px solid var(--toti-line); border-bottom: 1px solid var(--toti-line); } .toti-sdesc__h { margin: 0 0 var(--toti-s4); font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-transform: none; color: var(--toti-ink); } .toti-sdesc__body { max-width: 72ch; font-size: 15.5px; line-height: 1.7; color: var(--toti-ink); } .toti-sdesc__body p { margin: 0 0 var(--toti-s3); } .toti-sdesc__body p:last-child { margin-bottom: 0; } .toti-sdesc__body ul, .toti-sdesc__body ol { margin: 0 0 var(--toti-s3); padding-left: 18px; } .toti-sdesc__body li { margin: 0 0 5px; } .toti-sdesc__body li:last-child { margin-bottom: 0; } /* ---------- Related products ---------- */ .toti-single.toti-single .toti-single__relw { margin-top: var(--toti-s8); } .toti-single.toti-single .toti-single__relw .related > h2 { margin: 0 0 var(--toti-s5); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-muted); text-align: left; } /* The same grid as the archive's, restated at a weight that beats Elementor Pro's. Elementor's own rules are `.elementor-products-grid ul.products .elementor-grid` at (0,3,1) for the 20px/40px gutter and `.elementor-grid-4 .elementor-grid` for the column count at ITS breakpoints (1025/1024/767) — this project's are 1200/1000. `ul.products.products` is not a typo: the repeated class buys the one point of specificity that settles the tie, the same trick the archive block uses. */ .toti-single.toti-single .elementor-widget-woocommerce-product-related ul.products.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } @media (max-width: 1200px) { .toti-single.toti-single .elementor-widget-woocommerce-product-related ul.products.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .toti-single.toti-single .elementor-widget-woocommerce-product-related ul.products.products { grid-template-columns: repeat(2, 1fr); } } /* ---------- Responsive ---------- */ /* One column at 1000, which is where the header's nav collapses, the footer drops to two columns and the product grid drops to two — the whole page changes shape at one width. Above it the gallery and the detail column are each about 450px, which is the narrowest a colour select and a quantity plus button row stay on their own lines. */ @media (max-width: 1000px) { .toti-single.toti-single .toti-single__top { grid-template-columns: minmax(0, 1fr); --row-gap: 30px; /* Stacked, the gallery is the full column width and the 1120 cap would otherwise leave the detail column short of the description under it. */ max-width: 640px; margin-inline: auto; } } /* Side gutters follow the header, the footer and the archive exactly, so the H1, the first related card and the site logo sit on one vertical line. */ @media (max-width: 768px) { /* `body.single-product` is not decoration. Elementor writes the container's own padding as `.elementor-2769 .elementor-element.elementor-element-8a63c9c` at (0,3,0) in its per-post stylesheet, so a doubled block class at (0,2,0) loses and the phone keeps the desktop's 34px gutter — measured: the product name sat 18px right of the site logo directly above it. The body class takes this to (0,3,1) and wins on weight rather than on load order. */ body.single-product .toti-single.toti-single { --padding-left: 16px; --padding-right: 16px; } ul.products li.product.toti-card.toti-card { padding: var(--toti-s3); } .toti-sdesc { padding-block: var(--toti-s6); } .toti-single .woocommerce-product-gallery { padding: var(--toti-s3); } .toti-single .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); } /* Full-width button on a phone: at 375px the quantity box plus "Add to quote list" is 84 + 12 + 178 = 274px against 343px of room, which fits — but it leaves the primary action of the page looking like a secondary one. */ .toti-single form.cart, .toti-single form.variations_form .woocommerce-variation-add-to-cart { flex-wrap: nowrap; } .toti-single.toti-single .toti-single__cartw button.single_add_to_cart_button.single_add_to_cart_button { flex: 1 1 auto; } .toti-sfacts__row { grid-template-columns: 96px minmax(0, 1fr); } /* Body copy floor on phones, same reason as the footer's brand paragraph. The chips, eyebrows and the style code stay where they are: those are labels, not prose. */ .toti-sbrand__lede { font-size: 14px; } } /* ========================================================================== Touch targets -------------------------------------------------------------------------- Phone only, at the same 768px breakpoint the rest of this file uses. The desktop layouts are the ones that were reviewed and none of them moves. Every measurement below was taken off the rendered page at 375x812 with touch emulation on, not read off this stylesheet. TWO TECHNIQUES, and which one applies is decided by whether the control paints a box: - Anything with a background, a border or a fill — the quote pill, the card's quote button, pagination pills, category chips, the search submit — grows a transparent ::after instead. Padding would grow the PAINTED box with it, which is a visible change to an approved design; an inset pseudo-element grows only the hit area and moves nothing. - Anything that paints nothing — the logo lockups, the Account link, footer and breadcrumb links — takes padding with a matching negative margin, so the text lands on exactly the pixel it landed on before. WHERE THIS STOPS SHORT, deliberately. Footer link columns and breadcrumb trails are dense lists: their line pitch is 16px of text plus an 8px gap. Taking each to 44px means either overlapping neighbours — which is worse than a small target, because it makes the wrong link fire — or respacing the block, which is a redesign. They are taken to 24px instead, which is WCAG 2.2 AA (2.5.8 Target Size (Minimum)) and exactly fills the existing gap with no overlap. 44px is the AAA / platform-guideline figure and is recorded as outstanding in docs/design/ACCESSIBILITY.md rather than bought with a layout nobody approved. ========================================================================== */ @media (max-width: 768px) { /* Burger: measured 40 x 24. The width is the real problem — 24px is the AA floor exactly, on the control that IS the navigation once the link row collapses. Padding grows it to 44 square; the negative margin pulls the glyph back onto the 16px gutter line it shared with the logo above it, so the icon does not move. */ .toti-hdr.toti-hdr .elementor-menu-toggle { padding: 10px; margin-left: -10px; min-width: 44px; min-height: 44px; } /* Field 40 -> 44. A select and an input cannot carry a pseudo-element, so these four are the only controls here whose painted box does grow, by 4px and 3px respectively. */ .toti-hdr.toti-hdr .toti-search input[type="search"] { min-height: 44px; } .toti-arch.toti-arch .woocommerce-ordering select, .woocommerce-ordering select { min-height: 44px; } .toti-single.toti-single .toti-single__cartw .variations select { min-height: 44px; } /* Search submit: 32 square inside a 44px field. The ::after reaches the full 44 without moving the glyph off centre. */ .toti-hdr.toti-hdr .toti-search__go::after { content: ""; position: absolute; inset: -7px; } /* Quote pill: 31.8 tall. Gold fill, so it has to be the pseudo-element. */ .toti-hdr.toti-hdr .toti-quote { position: relative; } .toti-hdr.toti-hdr .toti-quote::after { content: ""; position: absolute; inset: -7.1px 0; } /* Logo lockups and the Account link paint nothing, so padding is invisible here as long as the margin gives the space back. Logo measured 18 tall, Account 20.6. */ .toti-hdr.toti-hdr a.toti-logo, .toti-fbrand a.toti-logo { padding-block: 13px; margin-block: -13px; } .toti-hdr.toti-hdr .toti-actions__link { display: inline-block; padding-block: 11.7px; margin-block: -11.7px; } /* Card quote button: 40.6 tall, bordered, and it sits above the card's stretched name link at z-index 2 — so its own ::after is above that too and the button still wins the tap that lands on it. */ .toti-card__add::after { content: ""; position: absolute; inset: -2.7px 0; } /* Category chips: 38.2 tall, 10px apart. +2.9 a side clears 44 and still leaves 4.2px between neighbours. */ .toti-atiles__list a { position: relative; } .toti-atiles__list a::after { content: ""; position: absolute; inset: -3.9px 0; } /* Pagination pills: 37.6 x 40, 7px apart. +3.2 a side vertically and +2 a side horizontally clears 44 both ways with 3px still between them. */ .toti-arch.toti-arch nav.woocommerce-pagination ul li a, .woocommerce-pagination ul li a { position: relative; } .toti-arch.toti-arch nav.woocommerce-pagination ul li a::after, .woocommerce-pagination ul li a::after { content: ""; position: absolute; inset: -4.2px -3px; } /* The dense lists. 16px of text in a 24px pitch, so 4px of padding a side takes each row to 24 and the rows meet without overlapping. See the note at the top of this block for why these stop at 24 and not 44. */ /* Footer columns: 18.2px line box in an 18.2 + 8 = 26.2px pitch, so 4px a side lands the targets exactly edge to edge. More would overlap, and an overlapping target fires the wrong link — worse than a small one. */ .toti-ftr.toti-ftr .toti-fcol__list a { display: inline-block; padding-block: 4px; margin-block: -4px; } /* Trails are a single horizontal row, so there is no neighbour above or below to collide with and they can take more than the columns can. */ .toti-abnr__trail a, .toti-strail a { display: inline-block; padding-block: 7px; margin-block: -7px; } } /* ========================================================================== Quote list, and the quote request form -------------------------------------------------------------------------- Two pages, one visual system, so they are one block: /cart/ (the quote list, rendered by woocommerce/cart/cart.php and cart-empty.php) and /checkout/ (the quote request form, rendered by [toti_quote_request] in inc/quote-request.php). Neither page is an Elementor template — they are ordinary WordPress pages inside Astra's container, with the Elementor header and footer above and below. So unlike the archive and single blocks above, nothing here is fighting Elementor's generated CSS; what it IS fighting is Astra's own WooCommerce stylesheet, which styles `table.shop_table`, `.quantity input`, `a.remove`, `.button` and the notice boxes, and which Astra prints partly inline in the head after every enqueued file. There is no price rule anywhere in this block, and nothing to hide. The price columns, the subtotal, the totals panel, the coupon field and the shipping calculator are not styled away — they are never generated. See inc/quote-basket.php. Contrast, measured against the ground each colour actually sits on: --toti-ink #232322 on --toti-card 15.73:1 ✓ names, values, inputs --toti-muted #6E6A62 on --toti-card 5.38:1 ✓ spec labels, help text --toti-muted #6E6A62 on --toti-paper 5.02:1 ✓ the page ground --toti-on-dark #D3CEC4 on --toti-black 10.42:1 ✓ the next-step band #241A04 on --toti-gold 7.25:1 ✓ the primary button --toti-gold-deep #8A6210 on --toti-card 5.13:1 ✓ the style code --toti-faint #95908A on --toti-card 3.20:1 ✗ NOT USED FOR TEXT Gold #DF9D18 appears only as a fill or a rule on these pages, never as type on a light ground, where it is 2.34:1. ========================================================================== */ /* Doubled class names on the paragraph, heading and list rules below are not decoration. These two pages render inside Astra's `.entry-content`, and Astra sets `.entry-content p { margin-bottom: 1.6em }` at (0,1,1) — which out-ranks a bare `.toti-qdone__lede` at (0,1,0). Measured on the rendered confirmation at 375: a declared 12px gap under the lede was rendering at 33.6px, i.e. 1.6 x 21px, and the panel had 50px of dead space under its last line. Repeating the class buys the one point that settles it, which is the same trick the header block above uses against Elementor and for the same reason: it beats the rule without starting an !important war with the next Astra setting. A blanket `.entry-content p { margin: 0 }` reset was the obvious alternative and is worse — at (0,3,1) it would have out-ranked every deliberate margin in this block too, and silently flattened all of them. The measure. Measured on the rendered archive at a 1440px viewport: the product grid is 1200px wide and starts at x=113. These two pages sit in Astra's container instead, which is a different width, so left alone the quote list starts on a different vertical line from the catalogue the visitor just came from. 1268px outer with 34px gutters reproduces the catalogue's 1200px column exactly — verified at x=113 on both. (The header and footer are full-bleed with their own 34px gutters and do NOT share this column. That is deliberate in their own blocks above; matching them here would put the quote list 79px wider than the grid it lists.) Astra prints its container width inline in the head at (0,2,0), so `body. .site-content > .ast-container` at (0,3,0) is what settles it — both body classes are WooCommerce's own. */ body.woocommerce-cart .site-content > .ast-container, body.woocommerce-checkout .site-content > .ast-container { max-width: 1268px; padding-inline: 34px; } /* Vertical air. Astra gives `#primary` a 60px block margin only at a min-width of 1200 — `.ast-plain-container.ast-no-sidebar #primary{margin-top:0}` is the rule below it — so at 375 the page H1 sat hard against the bottom edge of the black header with no gap at all. `#primary.content-area` at (0,2,2) clears Astra's (0,2,1) without depending on which container class the body carries. */ body.woocommerce-cart #primary.content-area, body.woocommerce-checkout #primary.content-area { margin-block: 60px; } body.woocommerce-cart .entry-header, body.woocommerce-checkout .entry-header { margin-bottom: var(--toti-s6); } body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title { margin: 0; color: var(--toti-ink); } /* Astra draws its own hairline under the page title on some layouts. On a page whose first element is a bordered card the two rules stack a few pixels apart and read as a mistake. */ body.woocommerce-cart .entry-header, body.woocommerce-checkout .entry-header { border: 0; padding-bottom: 0; } /* WooCommerce's notice boxes. These carry real information here — "50 x Blizzard Gloves have been added to your quote list", "Quote list updated." — so they are kept and made to look like part of the page rather than like Astra's default alert. */ body.woocommerce-cart .woocommerce-message, body.woocommerce-checkout .woocommerce-message, body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-error { margin: 0 0 var(--toti-s5); padding: var(--toti-s4) var(--toti-s5); border: 1px solid var(--toti-line); border-left: 3px solid var(--toti-gold); border-radius: var(--toti-r-card); background: var(--toti-card); color: var(--toti-ink); font-size: 15px; line-height: 1.55; list-style: none; } body.woocommerce-cart .woocommerce-error, body.woocommerce-checkout .woocommerce-error { border-left-color: #B0361F; } body.woocommerce-cart .woocommerce-message::before, body.woocommerce-checkout .woocommerce-message::before, body.woocommerce-cart .woocommerce-error::before, body.woocommerce-checkout .woocommerce-error::before { content: none; } /* Astra turns the "View quote list" link inside the notice into a filled button that competes with the page's one real call to action. */ body.woocommerce-cart .woocommerce-message a.button, body.woocommerce-checkout .woocommerce-message a.button { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--toti-gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Page grid ---------- */ /* The list left, the next step right, in the place a cart's totals panel normally occupies. Measured before this change: at 1440 the four-column table left roughly 480px of empty cell between the product name and the quantity field, because the two columns a shop puts there — price and line subtotal — do not exist here. That gap read as something having been deleted, which is exactly what happened. `:has(.toti-qlist)` gates it on there being a list at all. The empty state is a single block and would otherwise sit in a 1fr column with 360px of nothing beside it. */ body.woocommerce-cart .entry-content > .woocommerce:has(.toti-qlist) { display: grid; grid-template-columns: minmax(0, 1fr) 348px; align-items: start; gap: var(--toti-s7); } /* Notices are about the page, not about either column. */ body.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* ---------- The list itself ---------- */ .toti-qlist { margin: 0; border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); box-shadow: var(--toti-shadow-card); overflow: hidden; } /* `table.shop_table` carries Astra borders, a collapsed border model and its own radius. Reset the whole thing once here rather than per cell. */ .woocommerce table.shop_table.toti-qlist__table, .woocommerce-page table.shop_table.toti-qlist__table { width: 100%; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; background: transparent; table-layout: fixed; } .woocommerce table.shop_table.toti-qlist__table th, .woocommerce table.shop_table.toti-qlist__table td { border: 0; padding: var(--toti-s5) var(--toti-s4); vertical-align: middle; text-align: left; } .woocommerce table.shop_table.toti-qlist__table thead th { padding-block: var(--toti-s3); border-bottom: 1px solid var(--toti-line); background: var(--toti-chip); color: var(--toti-muted); font-family: var(--toti-sans); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.4; } .woocommerce table.shop_table.toti-qlist__table tbody tr + tr td { border-top: 1px solid var(--toti-line); } /* Column widths. `table-layout: fixed` above means these are honoured rather than negotiated against the longest product name in the list, so a 60 character name cannot squeeze the quantity field to nothing. */ .woocommerce table.shop_table.toti-qlist__table .product-thumbnail { width: 116px; padding-right: 0; } .woocommerce table.shop_table.toti-qlist__table .product-quantity { width: 132px; } .woocommerce table.shop_table.toti-qlist__table .product-remove { width: 60px; text-align: right; } .toti-qlist__table .product-thumbnail img { display: block; width: 92px; height: 92px; margin: 0; border: 1px solid var(--toti-line); border-radius: var(--toti-r-tile); background: var(--toti-chip); object-fit: contain; } .toti-qlist__name { display: block; margin-bottom: var(--toti-s2); color: var(--toti-ink); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-decoration: none; } .toti-qlist__name:hover, .toti-qlist__name:focus-visible { color: var(--toti-ink); text-decoration: underline; text-decoration-color: var(--toti-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* The spec list. A definition list because that is what it is — Style code: W2821, Colour: Black, Size: L / XL — and because a screen reader then reads the pairing rather than six loose words. Laid out as a two-column grid so the values line up down the column whatever the label lengths are. `.variation` is in the class list because WooCommerce and Astra both style that class; the rules below are anchored on the toti class so they win. */ .toti-qlist__spec.toti-qlist__spec { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--toti-s3); margin: 0; padding: 0; font-size: 13px; line-height: 1.5; } .toti-qlist__spec.toti-qlist__spec dt { margin: 0; padding: 0; color: var(--toti-muted); font-weight: 500; } .toti-qlist__spec.toti-qlist__spec dt::after { content: ""; } .toti-qlist__spec.toti-qlist__spec dd { margin: 0; padding: 0; color: var(--toti-ink); font-weight: 500; } .toti-qlist__spec.toti-qlist__spec p { margin: 0; } /* The style code is the field this trade actually transacts on, so it is set apart from the colour and size beside it. Gold-deep, not gold: 5.13:1. */ .toti-qlist__code { color: var(--toti-gold-deep); font-weight: 600; letter-spacing: .02em; } /* ---------- Quantity ---------- */ .toti-qlist__table .quantity { margin: 0; } .woocommerce table.shop_table.toti-qlist__table .quantity input.qty, .woocommerce-page table.shop_table.toti-qlist__table .quantity input.qty { width: 100%; max-width: 108px; height: 46px; padding: 0 var(--toti-s3); border: 1px solid var(--toti-btn-line); border-radius: var(--toti-r-btn); background: var(--toti-card); box-shadow: none; color: var(--toti-ink); font-family: var(--toti-sans); font-size: 16px; font-weight: 600; text-align: center; } .woocommerce table.shop_table.toti-qlist__table .quantity input.qty:focus, .woocommerce table.shop_table.toti-qlist__table .quantity input.qty:focus-visible { border-color: var(--toti-ink); outline: 2px solid var(--toti-gold); outline-offset: 1px; } /* ---------- Remove ---------- */ .woocommerce .toti-qlist__remove, .woocommerce a.remove.toti-qlist__remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--toti-r-pill); background: transparent; color: var(--toti-muted); font-size: 20px; line-height: 1; text-decoration: none; } .woocommerce a.remove.toti-qlist__remove:hover, .woocommerce a.remove.toti-qlist__remove:focus-visible { background: var(--toti-chip); color: #B0361F; } .woocommerce a.remove.toti-qlist__remove svg { width: 20px; height: 20px; } /* Astra draws a 1px ring around the remove control with an `a.remove::before` carrying `content: ""` and a slate border. Measured on the rendered page: it renders as a pale grey circle around a pale grey cross, which reads as a disabled button rather than as a live one. The hover/focus fill below is the affordance instead. */ .woocommerce a.remove.toti-qlist__remove::before, .woocommerce-page a.remove.toti-qlist__remove::before { content: none; } /* ---------- The actions row ---------- */ .woocommerce table.shop_table.toti-qlist__table td.toti-qlist__actions { padding: var(--toti-s4); border-top: 1px solid var(--toti-line); background: var(--toti-chip); text-align: left; } .woocommerce .toti-qlist__update, .woocommerce button.button.toti-qlist__update { min-height: 44px; padding: 0 var(--toti-s5); border: 1px solid var(--toti-ink); border-radius: var(--toti-r-btn); background: transparent; box-shadow: none; color: var(--toti-ink); font-family: var(--toti-sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; } .woocommerce button.button.toti-qlist__update:hover, .woocommerce button.button.toti-qlist__update:focus { background: var(--toti-ink); color: var(--toti-card); } /* WooCommerce's cart.js disables this button until a quantity actually changes — which means disabled is the state it is in when the page loads, and the state most visitors will ever see. Left at Astra's default it is indistinguishable from the enabled one and the button looks broken rather than inactive. The label is --toti-muted and not --toti-silver-on-light. Measured on the rendered page: #767676 on the --toti-chip actions strip is 4.02:1 and fails AA at 14px. WCAG exempts inactive controls from the minimum, but "exempt" and "legible" are different claims and this one is on screen from the first paint. #6E6A62 on the same ground is 4.77:1. The inactive signal is carried by the pale border against the enabled state's solid ink one, which is a contrast difference of its own rather than a colour nobody can read. */ .woocommerce button.button.toti-qlist__update[disabled], .woocommerce button.button.toti-qlist__update:disabled { border-color: var(--toti-btn-line); background: transparent; color: var(--toti-muted); cursor: default; } /* ---------- The next step ---------- */ /* A dark panel rather than a totals panel. There is no total to put in one, and an empty totals panel is precisely the shape a price gets dropped into later. Black is the header and footer ground, so this reads as the site speaking rather than as a third card. Sticky, because the list above it can run to twenty lines and the way on should not require scrolling back. `top` clears nothing in particular — the header does not stick — so it is a plain gutter. */ .toti-qnext { position: sticky; top: var(--toti-s5); padding: var(--toti-s6); border-radius: var(--toti-r-card); background: var(--toti-black); } /* The running figure, in the slot a subtotal would have held. Gold on black is 8.07:1 — this is the one ground the brand gold is allowed to be type on. */ .toti-qnext__count.toti-qnext__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--toti-s2); margin: 0 0 var(--toti-s4); padding-bottom: var(--toti-s4); border-bottom: 1px solid #2A2724; color: var(--toti-gold); font-size: 15px; font-weight: 600; letter-spacing: .01em; } .toti-qnext__sep { color: #5A544B; font-weight: 400; } .toti-qnext__note.toti-qnext__note { margin: 0 0 var(--toti-s6); color: var(--toti-on-dark); font-size: 14px; line-height: 1.65; } .woocommerce .toti-qnext__go, .woocommerce a.button.toti-qnext__go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0 0 var(--toti-s4); padding: 0 var(--toti-s5); border: 0; border-radius: var(--toti-r-btn); background: var(--toti-gold); box-shadow: none; color: #241A04; font-family: var(--toti-sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-align: center; text-decoration: none; } .woocommerce a.button.toti-qnext__go:hover, .woocommerce a.button.toti-qnext__go:focus { background: #F2B02A; color: #241A04; } .woocommerce a.button.toti-qnext__go:focus-visible { outline: 2px solid var(--toti-card); outline-offset: 3px; } .toti-qnext__back { display: inline-block; color: var(--toti-on-dark); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .toti-qnext__back:hover, .toti-qnext__back:focus-visible { color: var(--toti-card); } /* ---------- Empty ---------- */ .toti-qempty { max-width: 56ch; padding: var(--toti-s8) var(--toti-s7); border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); } .toti-qempty__lede.toti-qempty__lede { margin: 0 0 var(--toti-s3); color: var(--toti-ink); font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .toti-qempty__body.toti-qempty__body { margin: 0 0 var(--toti-s6); color: var(--toti-muted); font-size: 15px; line-height: 1.6; } .woocommerce .toti-qempty__go, .woocommerce a.button.toti-qempty__go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--toti-s6); border: 1px solid var(--toti-ink); border-radius: var(--toti-r-btn); background: transparent; box-shadow: none; color: var(--toti-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .woocommerce a.button.toti-qempty__go:hover, .woocommerce a.button.toti-qempty__go:focus { background: var(--toti-ink); color: var(--toti-card); } /* ---------- Narrow ---------- */ /* One column below 1000, the site's own mid breakpoint. Held higher than the table's stacking point on purpose: a 348px panel beside the table leaves the product-name column around 430px at 1000px wide, which is where a two-line product name starts wrapping to three. The panel stops being sticky at the same time — stacked, a sticky dark block would pin itself over the list the visitor is trying to edit. */ @media (max-width: 1000px) { body.woocommerce-cart .entry-content > .woocommerce:has(.toti-qlist) { grid-template-columns: minmax(0, 1fr); gap: var(--toti-s6); } .toti-qnext { position: static; } } @media (max-width: 860px) { /* Each row becomes a card: image and name on the top line, quantity and remove beneath. The table's semantics are given up here deliberately — a four-column table cannot be read on a 375px screen without either a horizontal scroller or type too small to read, and the column headers carry no information a row does not already label. WooCommerce's own `shop_table_responsive` stacked mode is not in play here — the class is deliberately absent from the template; see the note at the top of woocommerce/cart/cart.php for why. */ .woocommerce table.shop_table.toti-qlist__table, .woocommerce table.shop_table.toti-qlist__table tbody, .woocommerce table.shop_table.toti-qlist__table tr, .woocommerce table.shop_table.toti-qlist__table td { display: block; width: auto; } .woocommerce table.shop_table.toti-qlist__table thead { display: none; } .woocommerce table.shop_table.toti-qlist__table tbody tr { display: grid; grid-template-columns: 84px 1fr auto; grid-template-areas: "thumb name remove" "thumb qty qty"; align-items: start; gap: var(--toti-s2) var(--toti-s4); padding: var(--toti-s5) var(--toti-s4); } .woocommerce table.shop_table.toti-qlist__table tbody tr + tr { border-top: 1px solid var(--toti-line); } .woocommerce table.shop_table.toti-qlist__table tbody tr td { padding: 0; } .woocommerce table.shop_table.toti-qlist__table tbody tr + tr td { border-top: 0; } .woocommerce table.shop_table.toti-qlist__table .product-thumbnail { grid-area: thumb; } .woocommerce table.shop_table.toti-qlist__table .product-name { grid-area: name; } .woocommerce table.shop_table.toti-qlist__table .product-quantity { grid-area: qty; align-self: end; padding-top: var(--toti-s3); } .woocommerce table.shop_table.toti-qlist__table .product-remove, .woocommerce-page table.shop_table.toti-qlist__table .product-remove { grid-area: remove; text-align: right; } .toti-qlist__table .product-thumbnail img { width: 84px; height: 84px; } .toti-qlist__table .quantity { display: block; text-align: left; } .woocommerce table.shop_table.toti-qlist__table .quantity input.qty { max-width: 96px; } /* The actions row is a grid child of nothing — it is its own tr — so it has to be pulled back out of the row grid above. */ .woocommerce table.shop_table.toti-qlist__table tbody tr:has(.toti-qlist__actions) { display: block; padding: 0; } .woocommerce table.shop_table.toti-qlist__table td.toti-qlist__actions { display: block; padding: var(--toti-s4); } .woocommerce button.button.toti-qlist__update { width: 100%; } .toti-qnext { padding: var(--toti-s6) var(--toti-s5); } } @media (max-width: 768px) { body.woocommerce-cart #primary.content-area, body.woocommerce-checkout #primary.content-area { margin-block: 34px; } } @media (max-width: 480px) { body.woocommerce-cart .site-content > .ast-container, body.woocommerce-checkout .site-content > .ast-container { padding-inline: 16px; } .woocommerce table.shop_table.toti-qlist__table tbody tr { grid-template-columns: 68px 1fr auto; } .toti-qlist__table .product-thumbnail img { width: 68px; height: 68px; } .toti-qlist__name { font-size: 16px; } .toti-qempty { padding: var(--toti-s7) var(--toti-s5); } } /* -------------------------------------------------------------------------- The quote request form -------------------------------------------------------------------------- /checkout/, rendered by [toti_quote_request]. Same measure, same card and the same dark accent block as the quote list one page back, because it is the same errand continued. Layout is fields left, what-is-being-quoted right, mirroring the list page's list-left / next-step-right. The summary comes FIRST in the document, which is the order it is wanted in on a phone — see what you are about to ask for, then fill the form — and is placed into the second column at wide widths with grid. Nothing depends on source order for meaning. Contrast: --toti-ink #232322 on --toti-card 15.29:1 ✓ labels, input text --toti-muted #6E6A62 on --toti-card 5.45:1 ✓ help text, optional #B0361F on --toti-card 6.19:1 ✓ validation messages --toti-gold-deep #8A6210 on --toti-card 5.13:1 ✓ style codes --toti-on-dark #D3CEC4 on --toti-black 10.42:1 ✓ the summary panel -------------------------------------------------------------------------- */ .toti-qf { display: grid; grid-template-columns: minmax(0, 1fr) 348px; align-items: start; gap: var(--toti-s7); } .toti-qf__fields { grid-column: 1; grid-row: 1; } .toti-qf__actions { grid-column: 1; grid-row: 2; } /* ---------- What is being quoted ---------- */ .toti-qsum { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--toti-s5); padding: var(--toti-s6); border-radius: var(--toti-r-card); background: var(--toti-black); } .toti-qsum__h.toti-qsum__h { margin: 0 0 var(--toti-s2); color: var(--toti-card); font-size: 15px; font-weight: 600; letter-spacing: .01em; } .toti-qsum__count.toti-qsum__count { margin: 0 0 var(--toti-s5); padding-bottom: var(--toti-s4); border-bottom: 1px solid #2A2724; color: var(--toti-gold); font-size: 13px; font-weight: 600; } .toti-qsum__list.toti-qsum__list { margin: 0 0 var(--toti-s5); padding: 0; list-style: none; } .toti-qsum__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--toti-s3); margin: 0; padding: var(--toti-s3) 0; } .toti-qsum__item + .toti-qsum__item { border-top: 1px solid #262320; } /* The quantity leads the line. On a quote it is the number being asked about, and putting it first makes the list scannable as a set of quantities rather than as a set of names. */ .toti-qsum__qty { min-width: 46px; padding: 2px var(--toti-s2); border-radius: var(--toti-r-tile); background: #24211D; color: var(--toti-card); font-size: 13px; font-weight: 700; text-align: center; } .toti-qsum__name { display: block; color: var(--toti-card); font-size: 14px; font-weight: 600; line-height: 1.35; } .toti-qsum__facts { display: flex; flex-wrap: wrap; gap: 2px var(--toti-s3); margin-top: 3px; color: var(--toti-on-dark); font-size: 12px; line-height: 1.5; } .toti-qsum__code { color: var(--toti-gold); font-weight: 600; letter-spacing: .02em; } .toti-qsum__edit, .toti-qsum__edit:visited { display: inline-block; color: var(--toti-on-dark); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .toti-qsum__edit:hover, .toti-qsum__edit:focus-visible { color: var(--toti-card); } /* ---------- The fields ---------- */ .toti-qf__fields { padding: var(--toti-s7); border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); box-shadow: var(--toti-shadow-card); } .toti-qf__h.toti-qf__h { margin: 0 0 var(--toti-s6); padding-bottom: var(--toti-s4); border-bottom: 1px solid var(--toti-line); color: var(--toti-ink); font-size: 19px; } .toti-qf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--toti-s5) var(--toti-s6); } /* Notes is the only field whose answer is a paragraph. */ .toti-qf__field--notes { grid-column: 1 / -1; } /* Inputs line up across a row whatever their labels and help text do. Measured before this: Email carries a help line and Phone does not, so the two inputs in that row sat 22px apart vertically and the form read as misaligned rather than as paired. A grid row already gives both cells the same height; this pushes the control to the bottom of that height, so the controls agree even when the text above them does not. */ .toti-qf__field { display: flex; flex-direction: column; } .toti-qf__field .toti-qf__input { margin-top: auto; } .toti-qf__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--toti-s3); margin: 0 0 var(--toti-s2); color: var(--toti-ink); font-family: var(--toti-sans); font-size: 14px; font-weight: 600; line-height: 1.4; } /* Required is marked and optional is labelled, rather than one of the two being left to inference. A form where most fields are required reads better marking the exceptions, and this one is 5 of 7 required. */ .toti-qf__req { color: var(--toti-gold-deep); } .toti-qf__opt { color: var(--toti-silver-on-light); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; } .toti-qf__help.toti-qf__help { margin: 0 0 var(--toti-s2); color: var(--toti-muted); font-size: 13px; line-height: 1.5; } /* Astra sets input height, padding, radius and a box-shadow globally from the customizer, inline in the head. These match its specificity from the class side rather than reaching for !important. */ .toti-qf .toti-qf__input, .toti-qf input.toti-qf__input, .toti-qf select.toti-qf__input, .toti-qf textarea.toti-qf__input { width: 100%; min-height: 48px; padding: 11px var(--toti-s4); border: 1px solid var(--toti-btn-line); border-radius: var(--toti-r-btn); background: var(--toti-card); box-shadow: none; color: var(--toti-ink); font-family: var(--toti-sans); font-size: 16px; line-height: 1.5; } .toti-qf textarea.toti-qf__input--area { min-height: 130px; padding-block: var(--toti-s3); resize: vertical; } /* The select gets its own arrow: Astra's height and padding rules leave the native control cramped, and a bare appearance reset would remove the arrow without replacing it. The SVG is inlined as a data URI so nothing here needs a network request or an icon font. */ .toti-qf select.toti-qf__input--select { padding-right: 44px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23232322' stroke-width='1.8' d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-position: right var(--toti-s4) center; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; } .toti-qf .toti-qf__input:focus, .toti-qf .toti-qf__input:focus-visible { border-color: var(--toti-ink); outline: 2px solid var(--toti-gold); outline-offset: 1px; } .toti-qf__field.is-invalid .toti-qf__input { border-color: #B0361F; } .toti-qf__error.toti-qf__error { margin: var(--toti-s2) 0 0; color: #B0361F; font-size: 13px; font-weight: 500; line-height: 1.5; } /* ---------- The error summary ---------- */ .toti-qf__summary { margin: 0 0 var(--toti-s6); padding: var(--toti-s5) var(--toti-s6); border: 1px solid #E4C3BB; border-left: 3px solid #B0361F; border-radius: var(--toti-r-card); background: #FDF6F4; } .toti-qf__summaryh.toti-qf__summaryh { margin: 0 0 var(--toti-s2); color: #8C2A17; font-size: 15px; font-weight: 700; } .toti-qf__summary ul { margin: 0; padding-left: var(--toti-s5); color: #8C2A17; font-size: 14px; line-height: 1.6; } .toti-qf__summary a, .toti-qf__summary a:visited { color: #8C2A17; text-underline-offset: 3px; } /* ---------- Submit ---------- */ .toti-qf__actions { margin: 0; } .woocommerce .toti-qf__submit, .toti-qf button.button.toti-qf__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--toti-s8); border: 0; border-radius: var(--toti-r-btn); background: var(--toti-gold); box-shadow: none; color: #241A04; font-family: var(--toti-sans); font-size: 17px; font-weight: 700; letter-spacing: .01em; } .toti-qf button.button.toti-qf__submit:hover, .toti-qf button.button.toti-qf__submit:focus { background: #F2B02A; color: #241A04; } .toti-qf__reassure.toti-qf__reassure { max-width: 52ch; margin: var(--toti-s3) 0 0; color: var(--toti-muted); font-size: 13px; line-height: 1.6; } /* The POPIA collection notice. Same size and colour as the reassurance line above it, because it is the same kind of small print and giving it its own weight would make it look like a warning. --toti-muted is 5.12:1 on the paper ground, so it passes AA at 13px; --toti-faint would not. */ .toti-qf__privacy.toti-qf__privacy { max-width: 52ch; margin: var(--toti-s2) 0 0; color: var(--toti-muted); font-size: 13px; line-height: 1.6; } .toti-qf__privacy.toti-qf__privacy a { color: var(--toti-ink); text-decoration: underline; text-decoration-color: var(--toti-gold); text-underline-offset: 2px; } .toti-qf__privacy.toti-qf__privacy a:hover, .toti-qf__privacy.toti-qf__privacy a:focus { text-decoration-color: currentColor; } /* The honeypot. Taken off the screen rather than `display: none`: a hidden input is trivial for a script to notice and skip, and an off-screen one that is out of the tab order and out of the accessibility tree is not reachable by anybody using the page in any way. */ .toti-qf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Confirmation ---------- */ .toti-qdone { max-width: 760px; border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); box-shadow: var(--toti-shadow-card); overflow: hidden; } .toti-qdone__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--toti-s3) var(--toti-s5); padding: var(--toti-s6) var(--toti-s7); background: var(--toti-black); } .toti-qdone__lede.toti-qdone__lede { margin: 0; color: var(--toti-card); font-size: 21px; font-weight: 600; letter-spacing: -.01em; } .toti-qdone__ref.toti-qdone__ref { margin: 0; color: var(--toti-gold); font-size: 15px; font-weight: 700; letter-spacing: .02em; } .toti-qdone__ref.toti-qdone__ref span { color: var(--toti-on-dark); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .toti-qdone__body { padding: var(--toti-s7); } .toti-qdone__h.toti-qdone__h { margin: 0 0 var(--toti-s4); color: var(--toti-ink); font-size: 17px; } .toti-qdone__h.toti-qdone__h + * { margin-top: 0; } .toti-qdone__facts.toti-qdone__facts + .toti-qdone__h.toti-qdone__h, .toti-qdone__lead.toti-qdone__lead + .toti-qdone__h.toti-qdone__h { margin-top: var(--toti-s7); } .toti-qdone__steps.toti-qdone__steps { margin: 0 0 var(--toti-s5); padding-left: var(--toti-s5); color: var(--toti-ink); font-size: 15px; line-height: 1.65; } .toti-qdone__steps.toti-qdone__steps li { margin-bottom: var(--toti-s2); } /* The turnaround. Unresolved content from the placeholder register, so it is drawn as an outstanding fact rather than as a promise. */ .toti-qdone__lead.toti-qdone__lead { margin: 0 0 var(--toti-s5); padding: var(--toti-s3) var(--toti-s4); border-left: 3px solid var(--toti-gold); background: var(--toti-chip); color: var(--toti-ink); font-size: 14px; } .toti-qdone__leadlabel { color: var(--toti-muted); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .toti-qdone__facts.toti-qdone__facts { display: grid; gap: 0; margin: 0 0 var(--toti-s5); border: 1px solid var(--toti-line); border-radius: var(--toti-r-tile); overflow: hidden; } .toti-qdone__factrow { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--toti-s4); padding: var(--toti-s3) var(--toti-s4); } .toti-qdone__factrow + .toti-qdone__factrow { border-top: 1px solid var(--toti-line); } .toti-qdone__factrow dt { margin: 0; color: var(--toti-muted); font-size: 13px; font-weight: 500; } .toti-qdone__factrow dd { margin: 0; color: var(--toti-ink); font-size: 14px; font-weight: 600; } .toti-qsum--done { position: static; margin-bottom: var(--toti-s5); padding: var(--toti-s5); } .toti-qsum--done .toti-qsum__list.toti-qsum__list { margin-bottom: 0; } .toti-qdone__note.toti-qdone__note { margin: 0 0 var(--toti-s6); color: var(--toti-muted); font-size: 13px; line-height: 1.6; } .woocommerce .toti-qdone__go, .toti-qdone a.button.toti-qdone__go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--toti-s6); border: 1px solid var(--toti-ink); border-radius: var(--toti-r-btn); background: transparent; box-shadow: none; color: var(--toti-ink); font-size: 15px; font-weight: 600; text-decoration: none; } .toti-qdone a.button.toti-qdone__go:hover, .toti-qdone a.button.toti-qdone__go:focus { background: var(--toti-ink); color: var(--toti-card); } /* ---------- Narrow ---------- */ @media (max-width: 1000px) { .toti-qf { grid-template-columns: minmax(0, 1fr); gap: var(--toti-s6); } .toti-qsum { position: static; grid-column: 1; grid-row: 1; } .toti-qf__fields { grid-row: 2; } .toti-qf__actions { grid-row: 3; } } @media (max-width: 768px) { .toti-qf__grid { grid-template-columns: minmax(0, 1fr); } .toti-qf__fields { padding: var(--toti-s6) var(--toti-s5); } .toti-qf button.button.toti-qf__submit { width: 100%; padding-inline: var(--toti-s5); } .toti-qdone__head, .toti-qdone__body { padding: var(--toti-s6) var(--toti-s5); } /* Stack, and stop aligning on the baseline. Measured at 375: with the head still a wrapped flex row, `align-items: baseline` put the reference on its own line and then aligned it to that line's baseline — 45px below the sentence above it against a declared 12px row gap, which read as a gap somebody had forgotten to close. Block layout has one baseline to worry about and none of the arithmetic. */ .toti-qdone__head { display: block; } .toti-qdone__lede.toti-qdone__lede { margin-bottom: var(--toti-s3); } .toti-qdone__factrow { grid-template-columns: minmax(0, 1fr); gap: 0; } } /* ========================================================================== Homepage -------------------------------------------------------------------------- Paired with the Elementor PAGE built by docs/design/templates/build-home.php, exported to docs/design/templates/home.json, and with the shortcodes in inc/home.php. The template supplies one container per section and the class hooks; everything visual is here. Measure: 1268px outer with 34px gutters, which leaves exactly the 1200px content column the archive and the single product page use. The hero, the methods band and the call to action are full bleed against it. Contrast, measured rather than assumed: --toti-gold-deep #8A6210 on --toti-card 5.47:1 ✓ eyebrow --toti-muted #6E6A62 on --toti-card 5.42:1 ✓ hero body --toti-on-dark #D3CEC4 on --toti-black 11.71:1 ✓ dark bands #A7A29A on --toti-black (the archive trail colour) 7.62:1 ✓ counts --toti-gold #DF9D18 on --toti-black 8.07:1 ✓ numerals #241A04 on --toti-gold (the header pill, reused) 7.25:1 ✓ buttons Gold appears as TYPE only on --toti-black grounds. On the white hero and the paper ground it is a rule, a border or a fill and never a word. Text over a photograph is a special case and is handled the same way in all three places it happens: the tile itself is painted --toti-black, the photograph sits on top of it, and a gradient scrim sits on top of that. The ratios above therefore hold even where the scrim is at its most transparent, and they hold for an automated audit too, which resolves a gradient to the nearest solid ancestor. ========================================================================== */ /* Release Astra's content container, exactly as the archive and the single product page do and for the same reason: the hero photograph, the methods band and the call to action are full bleed, and Astra otherwise caps `.ast-container` at 1240px with 20px of padding. Keyed on `home`, which is WordPress's own body class for the front page. `page_on_front` is also set, so the class is present whatever Astra thinks the layout is. */ body.home .site-content > .ast-container { max-width: 100%; padding: 0; } body.home .site-content #primary { margin: 0; padding: 0; } .toti-home.toti-home { --width: 100%; width: 100%; max-width: none; font-family: var(--toti-sans); } /* Astra underlines EVERY link inside `.entry-content` on a singular page, from `.ast-single-post .entry-content a` at (0,2,1), printed inline in the head after the enqueued stylesheets. That is a sensible default for a blog post and wrong on a designed page: measured here it was underlining the hero's two buttons, all four category tile names and every product card name, none of which declares an underline anywhere in this file — each of them already asks for `text-decoration: none` and was losing. Every link in these sections is a button, a tile or a card, and its decoration is set by its own component rule. There is no prose link here to protect, and if one is ever added it has to opt back in. The class is tripled rather than doubled: a tie at (0,2,1) is resolved by source order and Astra's copy is printed later than this file, so matching its weight is not enough. Same reasoning as everywhere else in this stylesheet, and cheaper than an !important. */ .toti-home.toti-home.toti-home a { text-decoration: none; } /* The two sections that sit on the page ground rather than bleeding. Both are Elementor containers carrying 34px of side padding, so the 1268px cap leaves the 1200px column. */ .toti-home.toti-home .toti-home__cats, .toti-home.toti-home .toti-home__grid { --row-gap: 0px; --column-gap: 0px; --width: 100%; width: 100%; max-width: 1268px; margin-inline: auto; } /* ---------- Shared: section headings, buttons ---------- */ /* The heading has to survive its body copy being deleted, so it is a noun a buyer would type into a search box and not a mood. The gold rule above it is decoration on a light ground, which is the only thing gold may be there. */ .toti-sechead { position: relative; margin: 0 0 var(--toti-s6); padding-top: 15px; font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--toti-ink); } .toti-sechead::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--toti-gold); } .toti-sechead--dark { color: var(--toti-card); } .toti-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 26px; border-radius: var(--toti-r-btn); font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-decoration: none; transition: background var(--toti-t-fast), border-color var(--toti-t-fast), color var(--toti-t-fast); } /* The same gold, and the same near-black label, as the header's quote pill and the single product page's Add to quote list. One primary action colour on the site, so a visitor learns it once. */ .toti-home.toti-home a.toti-btn--gold { background: var(--toti-gold); border: 1px solid var(--toti-gold); color: #241A04; } .toti-home.toti-home a.toti-btn--gold:hover, .toti-home.toti-home a.toti-btn--gold:focus { background: #F2B02A; border-color: #F2B02A; color: #241A04; } .toti-home.toti-home a.toti-btn--line { background: transparent; border: 1px solid var(--toti-ink); color: var(--toti-ink); } .toti-home.toti-home a.toti-btn--line:hover, .toti-home.toti-home a.toti-btn--line:focus { background: var(--toti-ink); color: var(--toti-card); } .toti-home.toti-home a.toti-btn:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } /* ---------- Section 1, split hero ---------- */ /* Two equal columns, the right one bleeding to the edge of the viewport. The left column's copy is aligned to the site's 1200px content measure WITHOUT a viewport unit, which is the whole trick here. The obvious `padding-left: calc(50vw - 600px)` is wrong on any platform with classic scrollbars, because `vw` counts the scrollbar gutter and the copy lands up to a scrollbar's width off the measure everything else on the site is on. Instead: the column is exactly half the page, so the copy box only has to be 600px wide and flush to the RIGHT of that column. Its left edge then falls at half the page minus 600, which is (page - 1200) / 2 — the gutter, exactly, with no unit that knows anything about scrollbars. Below 1268 the column is narrower than 600, the box fills it, and the 34px padding takes over. */ .toti-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--toti-card); border-bottom: 1px solid var(--toti-line); } .toti-hero__copy { display: flex; align-items: center; padding: 68px 0 68px 34px; } .toti-hero__inner { width: 100%; max-width: 600px; margin-left: auto; padding-right: 46px; } .toti-hero__eyebrow { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--toti-gold-deep); } .toti-hero__h1 { margin: 0 0 var(--toti-s5); font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--toti-ink); } .toti-hero__body { margin: 0 0 var(--toti-s7); max-width: 34em; font-size: 16.5px; line-height: 1.62; color: var(--toti-muted); } .toti-hero__acts { display: flex; flex-wrap: wrap; gap: var(--toti-s3); margin: 0; } .toti-hero__shot { position: relative; min-height: 520px; background: var(--toti-black); overflow: hidden; } /* Absolute, so the photograph takes the height the copy column sets rather than the height its own aspect ratio would ask for. The intrinsic width and height attributes are still on the tag, so nothing shifts while it loads. */ .toti-hero__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; } /* A physical label pinned to the picture, not a caption bar across it. The gold is the last phrase only, on a solid --toti-black ground where gold is text-legal at 8.07:1, and the block is solid rather than translucent so that ratio does not depend on what the photograph happens to be doing behind it. */ .toti-hero__tag { position: absolute; left: 0; bottom: 42px; max-width: calc(100% - 46px); margin: 0; padding: 13px 22px 13px 19px; border-left: 3px solid var(--toti-gold); background: var(--toti-black); font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--toti-on-dark); } .toti-hero__tag span { color: var(--toti-gold); } /* ---------- Section 2, category tiles ---------- */ .toti-home.toti-home .toti-home__cats { padding: var(--toti-s9) 34px var(--toti-s8); } .toti-cats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } /* Painted --toti-black under the photograph, so the scrim over the label has a solid floor and the measured ratios hold at its most transparent point. */ .toti-ctile { position: relative; display: block; margin: 0; border-radius: var(--toti-r-tile); background: var(--toti-black); overflow: hidden; } .toti-ctile__shot { display: block; aspect-ratio: 3 / 4; } .toti-ctile__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--toti-t-slow) ease; } .toti-ctile:hover .toti-ctile__shot img, .toti-ctile:focus-within .toti-ctile__shot img { transform: scale(1.04); } .toti-ctile__body { position: absolute; right: 0; bottom: 0; left: 0; display: block; padding: 52px var(--toti-s5) var(--toti-s5); background: linear-gradient(to top, rgba(20, 19, 18, .92) 0%, rgba(20, 19, 18, .74) 42%, rgba(20, 19, 18, 0) 100%); } .toti-ctile__name { margin: 0 0 5px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .toti-ctile__name a { color: var(--toti-card); text-decoration: none; } /* Stretched hit area, so the whole tile is clickable while the accessible name stays the category on its own. Same pattern as the product card, and for the same reason: nothing is nested inside an anchor that should not be. */ .toti-ctile__name a::after { content: ""; position: absolute; inset: 0; } .toti-ctile__name a:focus-visible { outline: none; } .toti-ctile:focus-within { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } .toti-ctile__desc { display: block; font-size: 13.5px; line-height: 1.45; color: var(--toti-on-dark); } .toti-ctile__count { display: block; margin-top: 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #A7A29A; } /* ---------- Section 3, product grid ---------- */ .toti-home.toti-home .toti-home__grid { padding: 0 34px var(--toti-s9); } /* The card is content-product.php, reached through Elementor Pro's Products widget, which runs the query through WC_Shortcode_Products. Only the grid around it is restated here, and it has to be restated: Elementor Pro's widget-woocommerce-products stylesheet sets the column count at ITS breakpoints (1025 / 1024 / 767) and a 20px gutter, at (0,3,1). The repeated `.products` is the same one point of specificity the archive buys. */ .toti-home.toti-home .toti-home__gridw ul.products.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } .toti-more { margin: var(--toti-s7) 0 0; text-align: center; } /* ---------- Section 4, branding methods ---------- */ .toti-meth { background: var(--toti-black); } .toti-meth__inner { max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-meth__inner > .toti-sechead { text-align: center; } .toti-meth__inner > .toti-sechead::before { left: 50%; transform: translateX(-50%); } .toti-meth__lede { max-width: 62ch; margin: 0 auto var(--toti-s7); font-size: 15.5px; line-height: 1.62; text-align: center; color: var(--toti-on-dark); } .toti-meth__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--toti-s4); margin: 0; padding: 0; list-style: none; } .toti-mtile { position: relative; display: grid; grid-template-rows: auto minmax(58px, auto); margin: 0; border: 1px solid rgba(223, 162, 25, .24); border-radius: var(--toti-r-tile); background: #0E0D0C; overflow: hidden; transition: border-color var(--toti-t-fast) ease, transform var(--toti-t-fast) ease; } .toti-mtile__shot { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--toti-silver-wash); } .toti-mtile__shot img { display: block; width: 100%; height: 100%; object-fit: contain; } /* The process illustrations use one controlled silver-white field, so no photographic scrim is needed. A hairline at the bottom keeps the image and label distinct. */ .toti-mtile__shot::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(36, 35, 34, .16); } .toti-mtile__num { position: absolute; top: 12px; left: 14px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(223, 162, 25, .52); border-radius: 50%; background: var(--toti-black); font-family: var(--toti-serif); font-size: 17px; font-weight: 400; line-height: 1; letter-spacing: .01em; color: var(--toti-gold); } .toti-mtile__name { position: relative; z-index: 1; display: flex; align-items: center; margin: 0; padding: 13px 14px 14px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1.28; color: var(--toti-card); } /* ---------- Section 5, image-led call to action ---------- */ .toti-hcta { position: relative; border-top: 7px solid var(--toti-gold); background: var(--toti-black); overflow: hidden; } .toti-hcta__shot { position: absolute; inset: 0; display: block; } .toti-hcta__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; } .toti-hcta__panelw { position: relative; display: flex; justify-content: flex-end; max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } /* Solid, not translucent. A frosted panel over a photograph is where contrast quietly stops being measurable, and this panel carries the only call to action below the fold. */ .toti-hcta__panel { width: 100%; max-width: 480px; padding: var(--toti-s7); border-radius: var(--toti-r-card); border-top: 3px solid var(--toti-gold); background: var(--toti-black); } .toti-hcta__h2 { margin: 0 0 var(--toti-s3); font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--toti-card); } .toti-hcta__body { margin: 0 0 var(--toti-s6); font-size: 15px; line-height: 1.6; color: var(--toti-on-dark); } .toti-hcta__acts { margin: 0; } /* ---------- Responsive ---------- */ /* The product grid steps 4 / 3 / 2, the same as the archive's, so a card is the same size on the homepage as on the page it links to. Category tiles step 4 / 2 / 1. Method tiles hold five columns through laptop widths, then step to 3 / 2 on tablet and phone. */ @media (max-width: 1200px) { .toti-home.toti-home .toti-home__gridw ul.products.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toti-hero__h1 { font-size: 38px; } } @media (max-width: 1000px) { /* Stacked, image first. A photograph is what tells somebody arriving on a phone what this company does, and it should not be below the fold. */ .toti-hero { grid-template-columns: minmax(0, 1fr); } .toti-hero__shot { order: -1; min-height: 0; aspect-ratio: 16 / 10; } .toti-hero__copy { padding: var(--toti-s8) 34px var(--toti-s8); } .toti-hero__inner { max-width: none; margin-left: 0; padding-right: 0; } .toti-hero__tag { bottom: 26px; } .toti-cats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toti-home.toti-home .toti-home__gridw ul.products.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toti-hcta__panelw { justify-content: flex-start; } } @media (max-width: 900px) { .toti-meth__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { /* Side gutters follow the header, the footer and the archive exactly: 34px down to this breakpoint, 16px below it. */ .toti-home.toti-home .toti-home__cats { padding: var(--toti-s8) 16px var(--toti-s7); } .toti-home.toti-home .toti-home__grid { padding: 0 16px var(--toti-s8); } .toti-hero__copy { padding: var(--toti-s7) 16px var(--toti-s8); } .toti-hero__tag { max-width: calc(100% - 22px); padding: 11px 16px 11px 14px; } .toti-meth__inner { padding: var(--toti-s8) 16px; } .toti-hcta__panelw { padding: var(--toti-s8) 16px; } .toti-meth__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toti-hero__h1 { font-size: 31px; } .toti-hero__body { font-size: 15.5px; } .toti-hcta__panel { padding: var(--toti-s6) var(--toti-s5); } } @media (max-width: 560px) { /* One category tile per row, and a wider crop with it. A 3:4 tile at full width on a phone is a 375 by 500 tower, and two of them fill the screen without saying anything the row above has not already said. */ .toti-cats__row { grid-template-columns: minmax(0, 1fr); } .toti-ctile__shot { aspect-ratio: 4 / 3; } .toti-hero__acts .toti-btn { flex: 1 1 100%; } } /* ========================================================================== Branding section: the hub at /branding/ and the ten method pages -------------------------------------------------------------------------- Paired with the Elementor PAGES built by docs/design/templates/build-branding.php, exported to branding.json, and with the shortcodes in inc/branding.php. The template supplies one container per section and the class hooks; everything visual is here. Eleven pages, two layouts. The hub is banner / intro / dark closing band; a method page is banner / how it works / what it suits / dark closing band. The ten method pages carry IDENTICAL Elementor data and identical CSS — which method a page is showing is decided from its own slug at render time, so there is no per-method rule anywhere in this block and there must never be one. Measure: 1268px outer with 34px gutters, leaving the same 1200px content column as the homepage, the archive and the single product page. The banner and the closing band are full bleed against it. Contrast, measured rather than assumed: --toti-ink #232322 on --toti-paper 14.68:1 ✓ list items --toti-muted #6E6A62 on --toti-paper 5.02:1 ✓ prose --toti-muted #6E6A62 on --toti-card 5.38:1 ✓ prose --toti-on-dark #D3CEC4 on --toti-black 11.71:1 ✓ dark band --toti-gold #DF9D18 on --toti-black 8.07:1 ✓ kicker #241A04 on --toti-gold 7.25:1 ✓ buttons Gold is type only where the ground is --toti-black. On the white and paper grounds it is the 2px rule over a section heading and nothing else. ========================================================================== */ /* Release Astra's content container, exactly as `body.home` and the archive body classes do, and for the same reason: the banner and the closing band are full bleed and Astra otherwise caps `.ast-container` at 1240px with 20px of padding, which inserts a white margin down both sides of a black band. `toti-branding` is added in inc/branding.php from the page's ANCESTRY, not from a post ID: the hub is rebuilt with whatever ID the database gives it, so a rule keyed on `page-id-2871` would be a rule that is right on this machine and wrong on the live site. */ body.toti-branding .site-content > .ast-container { max-width: 100%; padding: 0; } body.toti-branding .site-content #primary { margin: 0; padding: 0; } .toti-brand.toti-brand { --width: 100%; width: 100%; max-width: none; background: var(--toti-paper); font-family: var(--toti-sans); } /* Astra's `.ast-single-post .entry-content a { text-decoration: underline }` again — see the note in the homepage block, which hits this section the same way and for the same reason. It was underlining the banner's trail, all ten tile names and both buttons in the closing band. */ .toti-brand.toti-brand.toti-brand a { text-decoration: none; } /* Every section container is flush and paints its own measure, so nothing here depends on padding set in _elementor_data. */ .toti-brand.toti-brand > .e-con, .toti-brand.toti-brand .toti-brand__sec { --row-gap: 0px; --column-gap: 0px; --width: 100%; width: 100%; max-width: none; } /* ---------- Banner ---------- */ /* The banner itself is the ARCHIVE's `toti-abnr`, class for class, so a category page and a branding page open with the same black band. The only addition is the micro-label, which holds a word here where the archive holds a product count. Separate class rather than a reuse of `toti-abnr__count`: a count is a number, this is not, and whoever next changes the count's rules should not have to discover that eleven other pages depend on them. */ .toti-abnr__kick { margin: 11px 0 0; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--toti-gold); } /* ---------- Shared: the hairline lists ---------- */ /* Rules between the lines and no box around them. A tinted panel behind a list of five product types is the house style of every promotional-products site in the country and it was rejected on this build for exactly that reason; what a trade buyer is reading here is a specification, so it is set as one. */ .toti-blist { margin: 0; padding: 0; list-style: none; } .toti-blist li { padding: 11px 0; border-top: 1px solid var(--toti-line); font-size: 14.5px; line-height: 1.5; color: var(--toti-ink); } .toti-blist li:last-child { border-bottom: 1px solid var(--toti-line); } /* The label over one of those lists. Same lockup as the single product page's branding panel: uppercase, tracked, with gold as a rule and never as a word on a light ground. */ .toti-bintro__h, .toti-bsuit__h { position: relative; margin: 0 0 var(--toti-s4); padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-ink); } .toti-bintro__h::before, .toti-bsuit__h::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--toti-gold); } /* ---------- Buttons ---------- */ /* The `.toti-btn` shape is defined with the homepage. Only the colours are restated, because the homepage's are scoped to `.toti-home`. Same gold and same near-black label as the header pill and the add-to-quote button: one primary action colour on the site, learned once. */ .toti-brand.toti-brand a.toti-btn--gold { background: var(--toti-gold); border: 1px solid var(--toti-gold); color: #241A04; } .toti-brand.toti-brand a.toti-btn--gold:hover, .toti-brand.toti-brand a.toti-btn--gold:focus { background: #F2B02A; border-color: #F2B02A; color: #241A04; } .toti-brand.toti-brand a.toti-btn--line { background: transparent; border: 1px solid var(--toti-ink); color: var(--toti-ink); } .toti-brand.toti-brand a.toti-btn--line:hover, .toti-brand.toti-brand a.toti-btn--line:focus { background: var(--toti-ink); color: var(--toti-card); } /* The same outline button on the black closing band. An ink border on black is invisible and an ink label on black is unreadable, so the dark ground gets its own pair rather than a filter over the light one. */ .toti-brand.toti-brand .toti-bmore a.toti-btn--line { border-color: rgba(211, 206, 196, .5); color: var(--toti-on-dark); } .toti-brand.toti-brand .toti-bmore a.toti-btn--line:hover, .toti-brand.toti-brand .toti-bmore a.toti-btn--line:focus { background: var(--toti-card); border-color: var(--toti-card); color: var(--toti-ink); } .toti-brand.toti-brand a.toti-btn:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } .toti-brand.toti-brand .toti-bmore a.toti-btn:focus-visible { outline-color: var(--toti-gold); } /* ---------- Hub: introduction ---------- */ .toti-bintro { background: var(--toti-card); border-bottom: 1px solid var(--toti-line); } .toti-bintro__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--toti-s9); max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-bintro__copy p { margin: 0 0 var(--toti-s4); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-bintro__copy p:last-child { margin-bottom: 0; } /* ---------- Method page: how it works ---------- */ /* The image and explanation now share one contained surface. The archive and single-product refinements established 1200px as the readable desktop measure; keeping this pair inside the same measure stops a process image from turning every method page into a full-width billboard. */ .toti-bhow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: calc(100% - 68px); max-width: var(--toti-max); margin: var(--toti-s8) auto; border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); box-shadow: 0 14px 40px rgba(35, 35, 34, .06); overflow: hidden; } .toti-bhow__shot { position: relative; min-height: 480px; background: var(--toti-silver-wash); overflow: hidden; } /* The technical illustration stays fully visible; unlike the former generated photograph, it is explanatory and should never be cropped for drama. */ .toti-bhow__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: clamp(28px, 5vw, 64px); object-fit: contain; object-position: 50% 50%; } .toti-bhow__copy { display: flex; align-items: center; padding: 56px 48px; } .toti-bhow__inner { width: 100%; max-width: 540px; margin-right: auto; padding-left: 0; } .toti-bhow__body p { margin: 0 0 var(--toti-s4); font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-bhow__body p:last-child { margin-bottom: 0; } /* ---------- Method page: what it suits, and the specification ---------- */ .toti-bsuit__in { max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-bsuit__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--toti-s9); } /* A column rather than a block, so the button can be pushed to the FOOT of the grid row. The prose is always shorter than the list of product types beside it, and left to sit under its paragraph the button opened a hole of dead space above the rule that reads as a section that stopped early. Pinned to the bottom it lines up with the end of the list, and the row closes. */ .toti-bsuit__copy { display: flex; flex-direction: column; align-items: flex-start; } .toti-bsuit__copy p { margin: 0 0 var(--toti-s6); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } /* Beats `.toti-bsuit__copy p` on its own weight rather than with an !important, which would only start an argument with the next rule. */ .toti-bsuit__copy p.toti-bsuit__act { margin: auto 0 0; } .toti-bspecw { margin-top: var(--toti-s9); padding-top: var(--toti-s8); border-top: 1px solid var(--toti-line); } /* A dl laid out as rows, the same shape as the single product page's facts block. Two of the three rows are unresolved placeholders and print as such; a row whose value is a sentence and a row whose value is four words have to sit in the same column, which is why the label column is fixed and the value column takes the rest. */ .toti-bspec { display: grid; gap: 0; margin: 0; max-width: 96ch; } .toti-bspec__row { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: var(--toti-s5); padding: var(--toti-s4) 0; border-top: 1px solid var(--toti-line); } .toti-bspec__row:last-child { border-bottom: 1px solid var(--toti-line); } .toti-bspec dt { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-muted); } .toti-bspec dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--toti-ink); } /* ---------- Closing band: the other methods, then the quote call ---------- */ /* The same solid black ground as the homepage methods band. The silver-white process illustrations now provide the visual contrast, so no decorative wash is needed behind them. */ .toti-bmore { background: var(--toti-black); } .toti-bmore__in { max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } /* A tile is a process illustration with a name, and the whole tile is the hit area. Same stretched-anchor pattern as the category tile and the product card: the anchor holds only the method name, so a screen reader reads out ten distinct links rather than ten identical "read more"s, and the ::after does the clicking. */ .toti-mtile__name a { color: var(--toti-card); text-decoration: none; } .toti-mtile__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .toti-mtile__name a:focus-visible { outline: none; } .toti-mtile:focus-within { outline: 2px solid var(--toti-gold); outline-offset: 3px; } .toti-mtile__shot img { transition: transform var(--toti-t-slow) ease; } .toti-mtile:hover { border-color: rgba(223, 162, 25, .72); transform: translateY(-2px); } .toti-mtile:hover .toti-mtile__shot img, .toti-mtile:focus-within .toti-mtile__shot img { transform: scale(1.035); } @media (prefers-reduced-motion: reduce) { .toti-mtile, .toti-mtile__shot img { transition: none; } .toti-mtile:hover { transform: none; } } /* Copy left on the measure, actions right. The copy is capped at 62ch like every other block of prose on the site, and stacking the buttons under it would leave the right half of a full-bleed black band empty at the one point on the page where the visitor is being asked to do something. The heading spans both columns, because it is the heading for both. */ .toti-bcta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--toti-s8); margin-top: var(--toti-s9); padding-top: var(--toti-s8); border-top: 1px solid #262320; } .toti-bcta .toti-sechead { grid-column: 1 / -1; margin-bottom: var(--toti-s5); } .toti-bcta__body { max-width: 62ch; margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--toti-on-dark); } .toti-bcta__acts { display: flex; flex-wrap: wrap; gap: var(--toti-s3); margin: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .toti-bintro__in, .toti-bsuit__cols { gap: var(--toti-s8); } } @media (max-width: 1000px) { /* Stacked, illustration first. It explains the process before the detail. */ .toti-bhow { grid-template-columns: minmax(0, 1fr); } .toti-bhow__shot { min-height: 0; aspect-ratio: 16 / 10; } .toti-bhow__copy { padding: var(--toti-s8) 34px; } .toti-bhow__inner { max-width: none; margin-right: 0; padding-left: 0; } .toti-bintro__in, .toti-bsuit__cols { grid-template-columns: minmax(0, 1fr); } .toti-bintro__in { gap: var(--toti-s7); } .toti-bsuit__cols { gap: var(--toti-s7); } /* Stacked, so there is no row to push the button to the bottom of and the auto margin would leave it floating away from the paragraph it belongs to. */ .toti-bsuit__copy p.toti-bsuit__act { margin: 0; } } @media (max-width: 768px) { /* Side gutters follow the header, the footer, the archive and the homepage exactly: 34px down to this breakpoint, 16px below it, so the H1, the first tile and the site logo all sit on one vertical line. */ .toti-bintro__in { padding: var(--toti-s8) 16px; } .toti-bsuit__in { padding: var(--toti-s8) 16px; } .toti-bmore__in { padding: var(--toti-s8) 16px; } .toti-bhow__copy { padding: var(--toti-s7) 16px var(--toti-s8); } .toti-bhow { width: calc(100% - 32px); margin-block: var(--toti-s6); } .toti-bspecw { margin-top: var(--toti-s8); padding-top: var(--toti-s7); } /* The 176px label column plus a sentence leaves too little for either at this width, so the label goes above its value. */ .toti-bspec__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } } @media (max-width: 900px) { /* Below this the two columns leave the buttons squeezed against a paragraph that has nowhere left to wrap, so the actions drop under the copy. */ .toti-bcta { grid-template-columns: minmax(0, 1fr); } .toti-bcta__acts { margin-top: var(--toti-s6); } } @media (max-width: 560px) { .toti-bcta__acts .toti-btn { flex: 1 1 100%; } } /* ========================================================================== ABOUT AND CONTACT -------------------------------------------------------------------------- Paired with the two Elementor PAGES built by docs/design/templates/build-pages.php, exported to pages.json, and with the shortcodes in inc/pages.php. The template supplies one container per section and the class hooks; everything visual is here. Measure: 1268px outer with 34px gutters, leaving the same 1200px content column as the homepage, the archive, the single product page and the branding section. The banner, the branding block and the closing band are full bleed against it. Contrast, measured rather than assumed: --toti-ink #232322 on --toti-paper 14.68:1 ✓ list items --toti-ink #232322 on --toti-card 15.73:1 ✓ headings --toti-muted #6E6A62 on --toti-paper 5.02:1 ✓ prose --toti-muted #6E6A62 on --toti-card 5.38:1 ✓ prose --toti-muted #6E6A62 on --toti-chip #F1F1F1 4.77:1 ✓ proof strip --toti-gold-deep #8A6210 on --toti-card 5.48:1 ✓ flag chip --toti-gold-deep #8A6210 on --toti-chip #F1F1F1 4.85:1 ✓ proof label --toti-on-dark #D3CEC4 on --toti-black 11.71:1 ✓ dark band --toti-gold #DF9D18 on --toti-black 8.07:1 ✓ kicker #241A04 on --toti-gold 7.25:1 ✓ buttons Gold is type only where the ground is --toti-black. On the white and paper grounds it is either the 2px rule over a section heading or the DEEP gold, and never the bright one. ========================================================================== */ /* Release Astra's content container, exactly as `body.home`, the archive body classes and `body.toti-branding` do, and for the same reason: the banner and the closing band are full bleed and Astra otherwise caps `.ast-container` at 1240px with 20px of padding, which inserts a white margin down both sides of a black band. `toti-page` is added in inc/pages.php from the page's SLUG, not from a post ID: these pages are rebuilt with whatever IDs the database gives them, so a rule keyed on `page-id-2901` would be a rule that is right on this machine and wrong on the live site. */ body.toti-page .site-content > .ast-container { max-width: 100%; padding: 0; } body.toti-page .site-content #primary { margin: 0; padding: 0; } .toti-pg.toti-pg { --width: 100%; width: 100%; max-width: none; font-family: var(--toti-sans); } /* Astra's `.ast-single-post .entry-content a { text-decoration: underline }` again — see the note in the homepage block, which hits these two pages the same way and for the same reason. */ .toti-pg.toti-pg.toti-pg a { text-decoration: none; } /* Except inside prose, where an underline is what tells a reader a word in the middle of a sentence is a link. The buttons, the trail and the list links opt out above because their shape already says it; these do not have one. */ .toti-pg.toti-pg .toti-cx__alt a, .toti-pg.toti-pg .toti-amod__act a { text-decoration: underline; text-underline-offset: 3px; color: var(--toti-gold-deep); } .toti-pg.toti-pg .toti-cx__alt a:hover, .toti-pg.toti-pg .toti-amod__act a:hover, .toti-pg.toti-pg .toti-cx__alt a:focus-visible, .toti-pg.toti-pg .toti-amod__act a:focus-visible { color: var(--toti-ink); } /* Every section container is flush and paints its own measure, so nothing here depends on padding set in _elementor_data. */ .toti-pg.toti-pg > .e-con, .toti-pg.toti-pg .toti-pg__sec { --row-gap: 0px; --column-gap: 0px; --width: 100%; width: 100%; max-width: none; } /* ---------- Buttons ---------- */ /* The `.toti-btn` shape is global. Only the colours are restated, because the homepage's and the branding section's are scoped to their own roots. Same gold and same near-black label as the header pill and the add-to-quote button: one primary action colour on the site, learned once. */ .toti-pg.toti-pg a.toti-btn--gold { background: var(--toti-gold); border: 1px solid var(--toti-gold); color: #241A04; } .toti-pg.toti-pg a.toti-btn--gold:hover, .toti-pg.toti-pg a.toti-btn--gold:focus { background: #F2B02A; border-color: #F2B02A; color: #241A04; } .toti-pg.toti-pg a.toti-btn--line { background: transparent; border: 1px solid var(--toti-ink); color: var(--toti-ink); } .toti-pg.toti-pg a.toti-btn--line:hover, .toti-pg.toti-pg a.toti-btn--line:focus { background: var(--toti-ink); color: var(--toti-card); } /* The same outline button on the black closing band. An ink border on black is invisible and an ink label on black is unreadable, so the dark ground gets its own pair rather than a filter over the light one. */ .toti-pg.toti-pg .toti-pcta a.toti-btn--line { border-color: rgba(211, 206, 196, .5); color: var(--toti-on-dark); } .toti-pg.toti-pg .toti-pcta a.toti-btn--line:hover, .toti-pg.toti-pg .toti-pcta a.toti-btn--line:focus { background: var(--toti-card); border-color: var(--toti-card); color: var(--toti-ink); } .toti-pg.toti-pg a.toti-btn:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } .toti-pg.toti-pg .toti-pcta a.toti-btn:focus-visible { outline-color: var(--toti-gold); } /* ---------- Shared: the side-column label ---------- */ /* The same lockup as the branding section's `toti-bintro__h`: uppercase, tracked, with gold as a rule above it and never as a word on a light ground. Restated rather than added to that selector list because these are H3s inside a section that already has an H2, and the branding ones are not. */ .toti-awhat__h, .toti-abrand__h, .toti-aprice__h, .toti-cx__h { position: relative; margin: 0 0 var(--toti-s4); padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-ink); } .toti-awhat__h::before, .toti-abrand__h::before, .toti-aprice__h::before, .toti-cx__h::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--toti-gold); } /* Two columns of hairline rows, used for the ten method links. Ten single-file rows would run the copy column to twice the height of the photograph beside it; two columns keep the block in proportion without turning the list into a grid of boxes. */ .toti-blist--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--toti-s7); } /* The rule under the last row of a two-column list has to be on the last row of EACH column, not on the last item overall, or one column ends open. */ .toti-blist--two li:last-child, .toti-blist--two li:nth-last-child(2) { border-bottom: 1px solid var(--toti-line); } .toti-blist--two a { color: var(--toti-ink); border-bottom: 1px solid transparent; transition: border-color var(--toti-t-fast); } .toti-blist--two a:hover, .toti-blist--two a:focus-visible { border-bottom-color: var(--toti-gold); } /* ---------- About: the proof strip ---------- */ /* This is NOT page furniture and must never be styled to look like it. It is a proof mark saying the copy underneath has not been approved, it prints for logged-out visitors as well as editors, and it is removed by resolving `about_body` in the placeholder register and by nothing else. Warm chip ground with a gold edge rather than a browser-yellow warning box: it has to read as a note attached to the document by whoever produced it, not as an error the site has thrown. */ .toti-prf { border-bottom: 1px solid var(--toti-line); background: var(--toti-chip); } .toti-prf__in { display: grid; /* 264px, not 210: at 210 the tracked uppercase label breaks at the hyphen in "SIGN-OFF" and the strip's own name reads as a typesetting accident. */ grid-template-columns: minmax(0, 264px) minmax(0, 1fr); gap: var(--toti-s6); max-width: 1268px; margin-inline: auto; padding: var(--toti-s7) 34px; border-left: 3px solid var(--toti-gold); } .toti-prf__tag { margin: 0; padding-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; color: var(--toti-gold-deep); } .toti-prf__body p { margin: 0 0 var(--toti-s3); max-width: 78ch; font-size: 14.5px; line-height: 1.6; color: var(--toti-muted); } .toti-prf__lead { font-weight: 600; color: var(--toti-ink) !important; } .toti-prf__list { margin: 0; padding-left: 20px; max-width: 78ch; font-size: 14.5px; line-height: 1.6; color: var(--toti-muted); } .toti-prf__list li { margin-bottom: 6px; } .toti-prf__list li:last-child { margin-bottom: 0; } /* ---------- About: what the business does ---------- */ .toti-awhat { background: var(--toti-card); border-bottom: 1px solid var(--toti-line); } .toti-awhat__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--toti-s9); max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-awhat__copy p { margin: 0 0 var(--toti-s4); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-awhat__copy p:last-child { margin-bottom: 0; } /* A quotation from the client's own document, set as one. No quote-mark glyph, no italic and no tinted panel: the copy already carries the marks and the source is named underneath, which is all a citation needs. */ .toti-aquote { margin: 0 0 var(--toti-s5); padding: 0 0 0 var(--toti-s4); border-left: 2px solid var(--toti-gold); } .toti-aquote p { margin: 0; font-size: 17.5px; line-height: 1.5; letter-spacing: -.005em; color: var(--toti-ink); text-wrap: pretty; } .toti-aquote__src { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--toti-silver-on-light); } /* ---------- About: source, brand, connect ---------- */ .toti-amod { background: var(--toti-paper); } .toti-amod__in { max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-amod__intro { margin: 0 0 var(--toti-s7); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-amod__rows { margin: 0; padding: 0; list-style: none; } /* A numeral in a column of its own with a rule above each row, rather than three boxes in a row. Three equal cards with an icon in each is what every competitor in this trade puts here, and the numbers matter more than the symmetry: these are steps in an order and they happen in sequence. */ /* Numeral, then the company profile's own definition of the step, then what we have added about where it happens on this site. Three columns rather than two: at two, the note is capped at its reading measure and the right third of a 1200px band is empty, which reads as a section that ran out of things to say — on the one page where that is the specific risk. */ .toti-amod__row { display: grid; grid-template-columns: minmax(0, 76px) minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--toti-s6); align-items: start; padding: var(--toti-s6) 0; border-top: 1px solid var(--toti-line); } .toti-amod__row:last-child { border-bottom: 1px solid var(--toti-line); } .toti-amod__num { margin: 0; font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--toti-gold-deep); } .toti-amod__name { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--toti-ink); } /* The company profile's own one-line definition of the step. Set heavier than the note under it, because it is the client's sentence and the note is ours. */ .toti-amod__lead { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.55; color: var(--toti-ink); } .toti-amod__note { margin: 0; max-width: 66ch; font-size: 15px; line-height: 1.65; color: var(--toti-muted); } .toti-amod__act { margin: var(--toti-s3) 0 0; font-size: 14.5px; font-weight: 600; } /* ---------- About: branding in house ---------- */ /* A contained image-and-copy surface, matching the method-page treatment and the 1200px catalogue measure. The masthead and closing call-to-action remain full bleed; this editorial block does not need to be. */ .toti-abrand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: calc(100% - 68px); max-width: var(--toti-max); margin: var(--toti-s8) auto; background: var(--toti-card); border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); box-shadow: 0 14px 40px rgba(35, 35, 34, .06); overflow: hidden; } .toti-abrand__shot { position: relative; align-self: center; width: 100%; height: 520px; min-height: 0; background: var(--toti-black); overflow: hidden; } /* Absolute, so the photograph takes the height the copy column sets rather than the height its own aspect ratio would ask for. The width and height attributes stay on the tag, so nothing shifts while it loads. */ .toti-abrand__shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--toti-black); } .toti-abrand__copy { display: flex; align-items: center; padding: 56px 48px; } .toti-abrand__inner { width: 100%; max-width: 540px; margin-right: auto; padding-left: 0; } .toti-abrand__inner > p { margin: 0 0 var(--toti-s4); font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-abrand__h { margin-top: var(--toti-s6); } /* ---------- About: no prices ---------- */ .toti-aprice { background: var(--toti-paper); } .toti-aprice__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--toti-s9); max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-aprice__copy p { margin: 0 0 var(--toti-s4); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-aprice__acts { display: flex; flex-wrap: wrap; gap: var(--toti-s3); margin: var(--toti-s6) 0 0 !important; } /* ---------- Contact: the details ---------- */ .toti-cx { background: var(--toti-card); border-bottom: 1px solid var(--toti-line); } .toti-cx__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--toti-s9); max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-cx__copy p { margin: 0 0 var(--toti-s4); max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-cx__acts { display: flex; flex-wrap: wrap; gap: var(--toti-s3); margin: var(--toti-s6) 0 var(--toti-s5) !important; } .toti-cx__alt { margin-bottom: 0 !important; } .toti-cx__dl { margin: 0; } .toti-cx__row { padding: var(--toti-s4) 0; border-top: 1px solid var(--toti-line); } .toti-cx__row:last-child { border-bottom: 1px solid var(--toti-line); } .toti-cx__k { margin: 0 0 5px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--toti-silver-on-light); } .toti-cx__v { margin: 0; font-size: 16px; line-height: 1.5; color: var(--toti-ink); } .toti-cx__v a { color: var(--toti-ink); border-bottom: 1px solid var(--toti-gold); transition: color var(--toti-t-fast), border-color var(--toti-t-fast); } .toti-cx__v a:hover, .toti-cx__v a:focus-visible { color: var(--toti-gold-deep); border-bottom-color: var(--toti-gold-deep); } /* An unresolved value must not be able to pass for a real one. The register still supplies the string — that is what makes this block verifiable — but it is set in the muted grey the rest of the page uses for secondary copy, on a dashed rule, so it reads as a gap in a form rather than as a phone number somebody could dial. The flag beside it says so in words as well, because a visual convention is only a convention. */ .toti-cx__unset { color: var(--toti-muted); border-bottom: 1px dashed var(--toti-faint); } .toti-cx__flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(138, 98, 16, .35); border-radius: var(--toti-r-pill); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; color: var(--toti-gold-deep); } .toti-cx__note { display: block; margin-top: 6px; max-width: 46ch; font-size: 13px; line-height: 1.55; color: var(--toti-muted); } /* ---------- Contact: what to include ---------- */ .toti-cbrief { background: var(--toti-paper); } .toti-cbrief__in { max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-cbrief__intro { margin: 0 0 var(--toti-s7); max-width: 66ch; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-cbrief__rows { margin: 0; } /* Term left on a fixed column, definition right. The same specification shape as the branding method pages' lead time / minimum quantity / artwork table, because it is the same kind of thing: a list of what is required, read by somebody checking whether they have it. */ .toti-cbrief__row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--toti-s6); padding: var(--toti-s5) 0; border-top: 1px solid var(--toti-line); } .toti-cbrief__row:last-child { border-bottom: 1px solid var(--toti-line); } .toti-cbrief__row dt { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--toti-ink); } .toti-cbrief__row dd { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.65; color: var(--toti-muted); } /* ---------- The closing band ---------- */ .toti-pcta { background: var(--toti-gold); } /* Copy left on the measure, actions right, exactly as the branding section's closing band is. Stacking the buttons under the copy would leave the right half of a full-bleed black band empty at the one point on the page where the visitor is being asked to do something. The heading spans both columns, because it is the heading for both. */ .toti-pcta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--toti-s8); max-width: 1268px; margin-inline: auto; padding: var(--toti-s9) 34px; } .toti-pcta .toti-sechead { grid-column: 1 / -1; margin-bottom: var(--toti-s5); } .toti-pcta__body { max-width: 62ch; margin: 0; font-size: 15.5px; line-height: 1.62; color: #3A2907; } .toti-pcta .toti-sechead, .toti-pcta .toti-sechead--dark { color: #241A04; } .toti-pcta .toti-sechead::before { background: #241A04; } .toti-pg.toti-pg .toti-pcta a.toti-btn--gold { background: var(--toti-black); border-color: var(--toti-black); color: var(--toti-card); } .toti-pg.toti-pg .toti-pcta a.toti-btn:focus-visible { outline-color: #241A04; } .toti-pg.toti-pg .toti-pcta a.toti-btn--gold:hover, .toti-pg.toti-pg .toti-pcta a.toti-btn--gold:focus { background: var(--toti-ink); border-color: var(--toti-ink); color: var(--toti-card); } .toti-pg.toti-pg .toti-pcta a.toti-btn--line { border-color: rgba(36, 26, 4, .58); color: #241A04; } .toti-pg.toti-pg .toti-pcta a.toti-btn--line:hover, .toti-pg.toti-pg .toti-pcta a.toti-btn--line:focus { background: #241A04; border-color: #241A04; color: var(--toti-card); } .toti-pcta__acts { display: flex; flex-wrap: wrap; gap: var(--toti-s3); margin: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .toti-awhat__in, .toti-aprice__in, .toti-cx__in { gap: var(--toti-s8); } } @media (max-width: 1000px) { /* Stacked, photograph first. It is what tells somebody arriving on a phone what "done in house" actually looks like, and it should not be below the fold of a section that is mostly prose. */ .toti-abrand { grid-template-columns: minmax(0, 1fr); } .toti-abrand__shot { height: auto; min-height: 0; aspect-ratio: 16 / 10; } .toti-abrand__copy { padding: var(--toti-s8) 34px; } .toti-abrand__inner { max-width: none; margin-right: 0; padding-left: 0; } .toti-awhat__in, .toti-aprice__in, .toti-cx__in { grid-template-columns: minmax(0, 1fr); gap: var(--toti-s7); } /* Two columns, with our note under the profile's definition rather than beside it. The numeral spans both rows so it stays level with the step name it belongs to. */ .toti-amod__row { grid-template-columns: minmax(0, 76px) minmax(0, 1fr); row-gap: var(--toti-s4); } .toti-amod__num { grid-column: 1; grid-row: 1 / span 2; } .toti-amod__what { grid-column: 2; grid-row: 1; } .toti-amod__how { grid-column: 2; grid-row: 2; } .toti-amod__lead { max-width: 62ch; } /* The label column is 210px of a 1268px measure; below this the sentence beside it has nowhere left to wrap. */ .toti-prf__in { grid-template-columns: minmax(0, 1fr); gap: var(--toti-s3); } } @media (max-width: 768px) { /* Side gutters follow the header, the footer, the archive, the homepage and the branding pages exactly: 34px down to this breakpoint, 16px below it, so the H1, the first row and the site logo all sit on one vertical line. */ .toti-prf__in { padding: var(--toti-s6) 16px; } .toti-awhat__in { padding: var(--toti-s8) 16px; } .toti-amod__in { padding: var(--toti-s8) 16px; } .toti-aprice__in { padding: var(--toti-s8) 16px; } .toti-cx__in { padding: var(--toti-s8) 16px; } .toti-cbrief__in { padding: var(--toti-s8) 16px; } .toti-pcta__in { padding: var(--toti-s8) 16px; } .toti-abrand__copy { padding: var(--toti-s7) 16px var(--toti-s8); } .toti-abrand { width: calc(100% - 32px); margin-block: var(--toti-s6); } /* Ten method names in two columns leaves each one wrapping onto three lines at this width, which is less readable than a single file of ten. */ .toti-blist--two { grid-template-columns: minmax(0, 1fr); } .toti-blist--two li:nth-last-child(2) { border-bottom: 0; } .toti-blist--two li:last-child { border-bottom: 1px solid var(--toti-line); } /* The numeral column and the 260px term column both take more than their share of a phone screen, so both drop above what they label. */ .toti-amod__row, .toti-cbrief__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .toti-amod__num, .toti-amod__what, .toti-amod__how { grid-column: 1; grid-row: auto; } .toti-amod__num { font-size: 22px; } } @media (max-width: 1080px) { /* Three buttons plus a 62ch paragraph stop fitting one row here, and the grid answers by squeezing the paragraph rather than the buttons. */ .toti-pcta__in { grid-template-columns: minmax(0, 1fr); } .toti-pcta__acts { margin-top: var(--toti-s6); } } @media (max-width: 560px) { .toti-aprice__acts .toti-btn, .toti-cx__acts .toti-btn, .toti-pcta__acts .toti-btn { flex: 1 1 100%; } /* The chip wraps onto its own line rather than pushing the value it qualifies off the right edge. */ .toti-cx__flag { margin: 6px 0 0; } .toti-cx__val { display: block; } } /* ========================================================================== Corrective editorial, contact and account pass ========================================================================== */ .toti-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; color: var(--toti-gold-deep); } .toti-aboutc { padding: 64px 34px; background: var(--toti-paper); } .toti-aboutc__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: var(--toti-max); margin-inline: auto; border: 1px solid var(--toti-line); border-radius: var(--toti-r-card); background: var(--toti-card); overflow: hidden; } .toti-aboutc__shot { min-height: 460px; background: var(--toti-black); } .toti-aboutc__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .toti-aboutc__copy { align-self: center; padding: 52px 48px; } .toti-aboutc__copy h2, .toti-aboutsteps h2, .toti-aboutbrand h2, .toti-contactc__ways h2, .toti-cform h2 { margin: 0 0 18px; font-size: clamp(27px, 3vw, 39px); line-height: 1.12; color: var(--toti-ink); } .toti-aboutc__copy p:not(.toti-eyebrow), .toti-aboutbrand p:not(.toti-eyebrow), .toti-contactc__ways > p:not(.toti-eyebrow) { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--toti-muted); } .toti-aboutsteps { padding: 16px 34px 72px; background: var(--toti-paper); } .toti-aboutsteps__in { max-width: var(--toti-max); margin-inline: auto; } .toti-aboutsteps ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; } .toti-aboutsteps li { padding: 28px; border-top: 3px solid var(--toti-gold); background: var(--toti-card); box-shadow: 0 10px 28px rgba(35,35,34,.06); } .toti-aboutsteps li > span { display: block; margin-bottom: 34px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--toti-muted); } .toti-aboutsteps h3 { margin: 0 0 10px; font-size: 22px; color: var(--toti-ink); } .toti-aboutsteps li p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--toti-muted); } .toti-aboutbrand { padding: 64px 34px; background: var(--toti-black); } .toti-aboutbrand__in { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 40px; max-width: var(--toti-max); margin-inline: auto; } .toti-aboutbrand h2 { max-width: 760px; color: var(--toti-card); } .toti-aboutbrand p:not(.toti-eyebrow) { max-width: 68ch; color: var(--toti-on-dark); } .toti-aboutbrand .toti-eyebrow { color: var(--toti-gold); } .toti-contactc { padding: 64px 34px 80px; background: var(--toti-paper); } .toti-contactc__in { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 48px; max-width: var(--toti-max); margin-inline: auto; align-items: start; } .toti-contactc__ways { padding-top: 18px; } .toti-contactc__list { display: grid; gap: 12px; margin-top: 32px; } .toti-contactway { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--toti-line); border-radius: 8px; background: var(--toti-card); color: var(--toti-ink); text-decoration: none !important; transition: transform .18s ease, border-color .18s ease; } .toti-contactway:hover { transform: translateY(-2px); border-color: var(--toti-gold-deep); } .toti-contactway:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } .toti-contactway__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--toti-silver-wash); color: var(--toti-ink); } .toti-contactway__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .toti-contactway strong, .toti-contactway small { display: block; } .toti-contactway strong { font-size: 14px; } .toti-contactway small { margin-top: 3px; font-size: 12px; color: var(--toti-muted); } .toti-cform { padding: 34px; border: 1px solid var(--toti-line); border-radius: 10px; background: var(--toti-card); box-shadow: 0 14px 40px rgba(35,35,34,.06); } .toti-cform h2 { font-size: 30px; } .toti-cform__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; } .toti-cform p { margin: 0; } .toti-cform__wide { grid-column: 1/-1; } .toti-cform label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 650; color: var(--toti-ink); } .toti-cform__optional { float: right; font-size: 11px; font-weight: 500; color: var(--toti-muted); } .toti-cform input:not([type=checkbox]), .toti-cform select, .toti-cform textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--toti-line); border-radius: 6px; background: #fff; color: var(--toti-ink); } .toti-cform textarea { min-height: 140px; resize: vertical; } .toti-cform input:focus, .toti-cform select:focus, .toti-cform textarea:focus { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; border-color: var(--toti-gold-deep); } .toti-cform__consent label { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; font-weight: 500; line-height: 1.5; } .toti-cform__consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--toti-gold-deep); } .toti-cform button { width: 100%; min-height: 48px; margin-top: 22px; padding: 0 24px; cursor: pointer; } .toti-pg.toti-pg .toti-cform button.toti-btn--gold { border: 1px solid var(--toti-gold); background: var(--toti-gold); color: #241A04; } .toti-pg.toti-pg .toti-cform button.toti-btn--gold:hover, .toti-pg.toti-pg .toti-cform button.toti-btn--gold:focus { border-color: #F2B02A; background: #F2B02A; color: #241A04; } .toti-cform__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .toti-formnotice { margin: 0 0 20px; padding: 12px 14px; border-radius: 6px; font-size: 14px; } .toti-formnotice--success { border: 1px solid #8fb99c; background: #edf7f0; color: #174e28; } .toti-formnotice--error { border: 1px solid #c98f8f; background: #fff1f1; color: #762020; } body.toti-account .site-content > .ast-container { max-width: 100%; padding: 0; } body.toti-account .site-content #primary { margin: 0; padding: 0; } body.toti-account .entry-header { display: none; } body.toti-account .toti-abnr { width: 100%; max-width: none; } .toti-account__body { padding: 64px 34px 80px; background: var(--toti-paper); } .toti-account__in { max-width: 1040px; margin-inline: auto; } .toti-account__in .woocommerce > h2 { margin: 0 0 18px; text-align: center; font-size: 28px; color: var(--toti-ink); } .toti-account__in .u-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .toti-account__in .u-column1, .toti-account__in .u-column2 { width: auto !important; float: none !important; } .toti-account__in .woocommerce-form-login, .toti-account__in .woocommerce-form-register, .toti-account__in .woocommerce-ResetPassword { max-width: 520px; margin: 0 auto !important; padding: 32px !important; border: 1px solid var(--toti-line) !important; border-radius: 10px !important; background: var(--toti-card); box-shadow: 0 14px 40px rgba(35,35,34,.06); } .toti-account__in .u-columns .woocommerce-form-login, .toti-account__in .u-columns .woocommerce-form-register { max-width: none; height: calc(100% - 54px); } .toti-account__in label { font-size: 13px; font-weight: 650; color: var(--toti-ink); } .toti-account__in input.input-text { min-height: 48px; padding: 10px 12px; border: 1px solid var(--toti-line); border-radius: 6px; background: #fff; box-shadow: none; } .toti-account__in input.input-text:focus { outline: 2px solid var(--toti-gold-deep); outline-offset: 2px; border-color: var(--toti-gold-deep); } .toti-account__in .show-password-input { min-width: 44px; min-height: 44px; } .toti-account__in .woocommerce-button, .toti-account__in button.button { min-height: 48px; padding: 0 24px !important; border-radius: 6px !important; background: var(--toti-black) !important; color: #fff !important; font-weight: 700 !important; } .toti-account__in .woocommerce-button:hover, .toti-account__in button.button:hover { background: #302d29 !important; } .toti-account__in a { color: var(--toti-ink); text-decoration: underline; text-underline-offset: 3px; } .toti-account__in .woocommerce-error, .toti-account__in .woocommerce-message, .toti-account__in .woocommerce-info { margin: 0 auto 24px; border-top-color: var(--toti-gold-deep); background: var(--toti-card); color: var(--toti-ink); } .toti-account__in .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--toti-line); border-radius: 8px; background: var(--toti-card); overflow: hidden; } .toti-account__in .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--toti-line); } .toti-account__in .woocommerce-MyAccount-navigation a { display: block; padding: 13px 16px; text-decoration: none; } .toti-account__in .woocommerce-MyAccount-navigation .is-active a { background: var(--toti-silver-wash); box-shadow: inset 3px 0 0 var(--toti-gold); color: var(--toti-ink) !important; font-weight: 700; } @media (max-width: 900px) { .toti-aboutc__in, .toti-contactc__in { grid-template-columns: minmax(0,1fr); } .toti-aboutc__shot { min-height: 0; aspect-ratio: 16/10; } .toti-aboutsteps ol { grid-template-columns: minmax(0,1fr); } .toti-aboutbrand__in { grid-template-columns: minmax(0,1fr); align-items: start; } .toti-contactc__ways { max-width: 620px; padding-top: 0; } } @media (max-width: 768px) { .toti-aboutc, .toti-aboutsteps, .toti-aboutbrand, .toti-contactc, .toti-account__body { padding-left: 16px; padding-right: 16px; } .toti-aboutc { padding-top: 32px; padding-bottom: 40px; } .toti-aboutc__copy { padding: 28px 22px; } .toti-aboutsteps { padding-bottom: 48px; } .toti-aboutsteps li { padding: 22px; } .toti-aboutsteps li > span { margin-bottom: 22px; } .toti-aboutbrand { padding-top: 44px; padding-bottom: 44px; } .toti-contactc { padding-top: 40px; padding-bottom: 56px; } .toti-contactc__in { gap: 34px; } .toti-cform { padding: 24px 20px; } .toti-cform__grid { grid-template-columns: minmax(0,1fr); } .toti-cform__wide { grid-column: auto; } .toti-account__body { padding-top: 40px; padding-bottom: 56px; } .toti-account__in .u-columns { grid-template-columns: minmax(0,1fr); } .toti-account__in .woocommerce-form-login, .toti-account__in .woocommerce-form-register, .toti-account__in .woocommerce-ResetPassword { padding: 24px !important; } } /* ========================================================================== Policy pages: Privacy, Terms, Returns, Cookies. The only pages on this site that are ordinary WordPress pages rather than Elementor ones, and the only ones that are long-form prose. Everything else here is a 1268px measure holding cards and grids; a policy set at 1268px would run to about 140 characters a line, which is roughly twice what anybody can track back to the start of. So these get their own measure: 72ch, which lands at 70 to 75 characters at this type size. Scoped to `.toti-legal`, which inc/legal.php puts on for these four slugs only. Nothing here can reach the rest of the site. ========================================================================== */ .toti-legal .site-main { background: var(--toti-paper); } .toti-legal .ast-article-single { padding: 0; border: 0; background: transparent; } /* The H1 Astra prints from the entry title, and the prose after it, share one measure so the heading and the first line start on the same axis. */ .toti-legal .entry-header, .toti-legal .entry-content { max-width: 72ch; margin-left: auto; margin-right: auto; } .toti-legal .entry-header { padding: var(--toti-s8) 0 var(--toti-s5); border-bottom: 1px solid var(--toti-line); margin-bottom: var(--toti-s6); } .toti-legal .entry-title { margin: 0; font-family: var(--toti-sans); font-size: 40px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--toti-ink); } .toti-legal .entry-content { padding-bottom: var(--toti-s9); color: var(--toti-ink); font-size: 16.5px; line-height: 1.7; } .toti-legal .entry-content > h2 { margin: var(--toti-s8) 0 var(--toti-s3); font-size: 22px; line-height: 1.3; letter-spacing: -.015em; color: var(--toti-ink); } /* The first heading follows the rule under the title, so it does not need the full section gap on top of it as well. */ .toti-legal .entry-content > h2:first-child, .toti-legal .entry-content > .toti-lnote + h2 { margin-top: var(--toti-s5); } .toti-legal .entry-content > p { margin: 0 0 var(--toti-s4); } .toti-legal .entry-content > ul { margin: 0 0 var(--toti-s4); padding-left: 1.15em; } .toti-legal .entry-content > ul li { margin-bottom: var(--toti-s2); } /* Gold as a marker is decoration, not text, so the contrast floor does not apply to it. The text beside it is --toti-ink at 13.4:1 on paper. */ .toti-legal .entry-content > ul li::marker { color: var(--toti-gold-deep); } .toti-legal .entry-content a { color: var(--toti-gold-deep); text-decoration: underline; text-underline-offset: 3px; } .toti-legal .entry-content a:hover, .toti-legal .entry-content a:focus-visible { color: var(--toti-ink); } .toti-legal a:focus-visible, .toti-legal button:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } /* ---------- The cookie table ---------- `overflow-x: auto` on the figure, not on the page. A four-column table of cookie names cannot be made to fit 375px and should not be squeezed into trying: it scrolls inside its own box, and the box is the only thing on the page that is allowed to be wider than the measure. Without this the table pushes the document wider and `body { overflow-x: hidden }` hides the evidence rather than the problem. */ .toti-legal .entry-content .wp-block-table { margin: 0 0 var(--toti-s6); overflow-x: auto; max-width: 100%; } /* The one thing on the page allowed out of the reading measure. Four columns of cookie facts inside 668px gave a table five lines deep per row, with "How long it lasts" broken across four lines in its own header cell. The prose stays at 72ch, which is what the measure is for; the table takes 908px. 1180px is the floor at which this is safe: below it the content column is less than 120px from the edge of Astra's container and the table would start pushing the page wider. */ @media (min-width: 1180px) { .toti-legal .entry-content .wp-block-table { margin-left: -120px; margin-right: -120px; max-width: none; } } .toti-legal .entry-content table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; background: var(--toti-card); } .toti-legal .entry-content th, .toti-legal .entry-content td { padding: 10px 14px; border: 1px solid var(--toti-line); text-align: left; vertical-align: top; color: var(--toti-ink); } .toti-legal .entry-content thead th { background: var(--toti-chip); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } /* Cookie names are code, and read as code. */ .toti-legal .entry-content tbody td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-word; } /* ---------- The draft strip ---------- Prints on all four pages while `legal_review` is open in the placeholder register, and disappears by itself when it is not. Deliberately the first thing under the title and deliberately not dismissible: unreviewed legal text is the one thing on this site a reader has to be told about every time. */ .toti-lnote { margin: 0 0 var(--toti-s7); padding: 14px 18px; background: var(--toti-chip); border-left: 3px solid var(--toti-gold); border-radius: 0 var(--toti-r-btn) var(--toti-r-btn) 0; } .toti-lnote__h { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--toti-gold-deep); } .toti-lnote__b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--toti-ink); } .toti-lupd { margin: var(--toti-s7) 0 0; padding-top: var(--toti-s4); border-top: 1px solid var(--toti-line); font-size: 13px; color: var(--toti-muted); } @media (max-width: 768px) { .toti-legal .entry-header, .toti-legal .entry-content { max-width: none; } .toti-legal .entry-header { padding-top: var(--toti-s7); } .toti-legal .entry-title { font-size: 30px; } .toti-legal .entry-content > h2 { margin-top: var(--toti-s7); font-size: 20px; } } /* ========================================================================== The cookie notice. POSITION: FIXED, AND THAT IS THE POINT. It is out of flow at every moment of its life, so showing it, hiding it and reopening it move nothing on the page. Nothing below reserves space for it, pads the body for it, or animates a height. A cookie bar that pushes the page down as it arrives is a layout shift on every first visit to every page, and it is the single most common way a consent banner damages a site it was added to protect. COLOUR. The bar is --toti-black. The brand gold is 8.07:1 there and may be text, which is why the button can be solid gold with black on it. On the page grounds elsewhere in this file the same gold would be 2.34:1 and is barred from carrying text at all. ========================================================================== */ .toti-cnotice { position: fixed; z-index: 9000; left: 0; right: 0; bottom: 0; background: var(--toti-black); border-top: 2px solid var(--toti-gold); box-shadow: 0 -18px 40px -24px rgba(20, 19, 18, .55); font-family: var(--toti-sans); } /* `hidden` is an attribute and a great many stylesheets break it by setting display on the same element. Astra and Elementor both ship display rules that can reach here, so state it. */ .toti-cnotice[hidden] { display: none; } .toti-cnotice__in { max-width: 1268px; margin: 0 auto; padding: 16px 34px; display: flex; align-items: center; gap: var(--toti-s6); } /* Takes the room the actions do not. Without `flex: 1` the text block sizes to its own max-content and then shrinks, which left the sentence wrapping to three lines with 340px of empty bar beside it. */ .toti-cnotice__txt { flex: 1 1 auto; min-width: 0; } .toti-cnotice__h { margin: 0 0 3px; font-family: var(--toti-sans); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--toti-gold); } /* The heading takes focus when the notice is reopened from the footer, so a screen reader lands on the label rather than in the middle of a sentence. It is not a tab stop: tabindex is -1 and there is no ring on a programmatic focus. */ .toti-cnotice__h:focus { outline: none; } .toti-cnotice__h:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 4px; } .toti-cnotice__b { margin: 0; font-size: 14px; line-height: 1.6; color: var(--toti-on-dark); } .toti-cnotice__acts { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: var(--toti-s5); } .toti-cnotice__link { font-size: 13.5px; line-height: 1.4; color: var(--toti-on-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .toti-cnotice__link:hover, .toti-cnotice__link:focus-visible { color: #FFFFFF; } .toti-cnotice__btn { padding: 10px 22px; border: 0; border-radius: var(--toti-r-btn); background: var(--toti-gold); color: var(--toti-black); font-family: var(--toti-sans); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background var(--toti-t-fast); } .toti-cnotice__btn:hover { background: #E9AC2E; } /* Gold on black at 8.07:1, and offset so the ring sits on the black rather than on the button it is marking. */ .toti-cnotice a:focus-visible, .toti-cnotice button:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 3px; } /* Stacked below 860px, and tightened: at 375px the bar was 222px tall, which is 27% of a phone viewport handed to somebody who came here to read a catalogue. Trimming the leading and the gaps takes it to 213px without shortening the sentence, which is the honest part and stays as it is. */ @media (max-width: 860px) { .toti-cnotice__in { padding: 13px 16px; flex-direction: column; align-items: flex-start; gap: var(--toti-s3); } .toti-cnotice__b { font-size: 13.5px; line-height: 1.5; } /* Padding trimmed for height, but the tap area is held at 44px. Measured on a 375px viewport: the button was 76x35, which clears the 24x24 WCAG minimum but not the 44x44 that a thumb actually wants, and this is the one control on the bar. Both it and the policy link get the full 44 by growing the box rather than the type, which costs the bar 9px of height. */ .toti-cnotice__btn { padding: 9px 20px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } .toti-cnotice__acts { margin-left: 0; width: 100%; gap: var(--toti-s4); } .toti-cnotice__btn { margin-left: auto; } .toti-cnotice__link { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; } /* The consent notice and Elementor's open mobile drawer are both fixed attention layers. On a first visit the notice otherwise masks the final drawer rows. Temporarily remove it while the navigation is expanded; it returns as soon as the drawer closes, so consent remains available without competing with the primary navigation. */ body:has(.toti-hdr .elementor-menu-toggle[aria-expanded="true"]) .toti-cnotice { display: none; } } /* ========================================================================== The footer's legal row. Its own row above the base strip rather than a fifth column beside Shop, Branding and Company. Two reasons: the column grid is built for three link lists plus the brand block and a fourth breaks it at every width, and these four links are not the same kind of thing as "Corporate Clothing". A reader looking for the privacy policy looks along the bottom. ========================================================================== */ .toti-ftr.toti-ftr .toti-ftr__legalw { --margin-top: 30px; --margin-left: 34px; --margin-right: 34px; --width: auto; } .toti-flegal__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; } .toti-ftr.toti-ftr .toti-flegal__list a, .toti-ftr.toti-ftr .toti-flegal__list button { padding: 0; border: 0; background: none; font-family: var(--toti-sans); font-size: 13px; line-height: 1.4; color: var(--toti-muted); text-decoration: none; cursor: pointer; transition: color var(--toti-t-fast); } .toti-ftr.toti-ftr .toti-flegal__list a:hover, .toti-ftr.toti-ftr .toti-flegal__list a:focus-visible, .toti-ftr.toti-ftr .toti-flegal__list button:hover, .toti-ftr.toti-ftr .toti-flegal__list button:focus-visible { color: var(--toti-ink); text-decoration: underline; text-underline-offset: 3px; } .toti-ftr.toti-ftr .toti-flegal__list button:focus-visible { outline: 2px solid var(--toti-gold-deep); outline-offset: 3px; } @media (max-width: 768px) { .toti-ftr.toti-ftr .toti-ftr__legalw { --margin-left: 16px; --margin-right: 16px; } } /* ========================================================================== Astra's scroll-to-top button. Left at its default it is a 31.5px blue square with a 2px radius, in #046BD2, which is Astra's brand colour and not this site's. It is the only blue pixel on the whole site and it floats over every page, so it reads as something the theme forgot rather than something anybody chose. Rebuilt to match: near-black disc, gold arrow, a gold hairline so it separates from a dark section as well as from the paper ground. 44px because it is a floating control that gets tapped with a thumb; the default was under the 44x44 that needs. Its stacking context is left alone on purpose. Astra gives it z-index 99 and the cookie notice sits at 9000, so while the notice is up the disc is painted behind it and cannot be reached or mistaken for one of the notice's own controls. Measured: at 375px the disc occupies 751-782px and the notice spans 599-812px, so it is entirely covered. ========================================================================== */ #ast-scroll-top.ast-scroll-top-icon { position: fixed; width: 44px; height: 44px; border: 1px solid rgba(223, 157, 24, .45); border-radius: 999px; background: var(--toti-black); color: var(--toti-gold); box-shadow: 0 6px 20px rgba(20, 19, 18, .22); transition: background var(--toti-t-fast), color var(--toti-t-fast), border-color var(--toti-t-fast); } #ast-scroll-top.ast-scroll-top-icon:hover, #ast-scroll-top.ast-scroll-top-icon:focus-visible { border-color: var(--toti-gold); background: var(--toti-gold); color: var(--toti-black); } #ast-scroll-top.ast-scroll-top-icon:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 3px; } /* Centring the chevron took three attempts, so the reasoning is here. Flex is not available: Astra's JS writes `display: block` and `display: none` INLINE on this element to show and hide it, and an inline style beats a stylesheet. `display: flex` is silently ignored, and `!important` would win the show but also break the hide, leaving the button permanently on screen. `inset: 0; margin: auto` on the svg failed too: Astra sets margins on that svg, so `auto` never survived on the left and the icon landed 9px off centre. What works is the span wrapper as a fixed 16px box, positioned by transform, which no margin or width rule elsewhere can interfere with. Measured after: 0px from centre on both axes. */ #ast-scroll-top.ast-scroll-top-icon .ast-icon { position: absolute; top: 50%; left: 50%; display: block; width: 16px; height: 16px; margin: 0; transform: translate(-50%, -50%); line-height: 0; } #ast-scroll-top.ast-scroll-top-icon .ast-icon svg { display: block; width: 16px; height: 16px; margin: 0; fill: currentColor; color: currentColor; } /* ---------- Product mega menu ---------- */ .toti-hdr.toti-hdr, .toti-hdr.toti-hdr .toti-hdr__nav { position: relative; overflow: visible; } .toti-hdr.toti-hdr .toti-hdr__navw, .toti-hdr.toti-hdr .toti-hdr__navw > .elementor-widget-container, .toti-hdr.toti-hdr .toti-meganav { width: 100%; } .toti-meganav__toggle { display: none; } .toti-meganav__mobile-tools { display: none; } .toti-meganav__bar { display: flex; align-items: center; gap: 30px; } .toti-meganav__products-toggle, .toti-hdr.toti-hdr .toti-meganav__link { min-height: 30px; margin: 0; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #e4e1db; font-family: var(--toti-sans); font-size: 13.5px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; } .toti-meganav__products-toggle { display: inline-flex; align-items: center; gap: 7px; } .toti-meganav__products-toggle svg, .toti-meganav__group-head button svg { display: block; width: 15px; height: 15px; transition: transform var(--toti-t-fast); } .toti-meganav__products.is-open .toti-meganav__products-toggle svg, .toti-meganav__group.is-open .toti-meganav__group-head button svg { transform: rotate(180deg); } .toti-meganav__products-toggle:hover, .toti-meganav__products-toggle:focus, .toti-meganav__products-toggle.is-current, .toti-hdr.toti-hdr .toti-meganav__link:hover, .toti-hdr.toti-hdr .toti-meganav__link:focus, .toti-hdr.toti-hdr .toti-meganav__link.is-current { border-bottom-color: var(--toti-gold); background: transparent; color: var(--toti-card); } .toti-meganav__products-toggle:focus-visible, .toti-hdr.toti-hdr .toti-meganav__link:focus-visible, .toti-meganav__toggle:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 3px; } .toti-meganav__panel[hidden] { display: none; } .toti-meganav__panel { position: absolute; z-index: 1200; top: 100%; left: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.12); background: var(--toti-black); box-shadow: 0 22px 40px rgba(0,0,0,.24); } .toti-meganav__panel-in { width: min(1268px, 100%); margin: 0 auto; padding: 28px 34px 32px; } .toti-meganav__panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .toti-meganav__eyebrow, .toti-meganav__intro { margin: 0; } .toti-meganav__eyebrow { margin-bottom: 5px; color: var(--toti-gold); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .toti-meganav__intro { color: #e8e5df; font-size: 17px; } .toti-hdr.toti-hdr .toti-meganav__all { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 4px; background: var(--toti-gold); color: var(--toti-black); font-size: 13px; font-weight: 700; text-decoration: none; } .toti-hdr.toti-hdr .toti-meganav__all:hover, .toti-hdr.toti-hdr .toti-meganav__all:focus { background: #f0b328; color: var(--toti-black); } .toti-meganav__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; } .toti-meganav__group { min-width: 0; } .toti-meganav__group-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; } .toti-hdr.toti-hdr .toti-meganav__group-head > a { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; } .toti-meganav__group-head button { display: none; } .toti-meganav__group-links { display: grid; gap: 8px; margin-top: 12px; } .toti-hdr.toti-hdr .toti-meganav__group-links a { color: #e1ded8; font-size: 13px; line-height: 1.4; text-decoration: none; } .toti-hdr.toti-hdr .toti-meganav__group-head > a:hover, .toti-hdr.toti-hdr .toti-meganav__group-head > a:focus, .toti-hdr.toti-hdr .toti-meganav__group-links a:hover, .toti-hdr.toti-hdr .toti-meganav__group-links a:focus { color: var(--toti-gold); } @media (max-width: 1000px) { .toti-meganav__toggle { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin-left: auto; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: transparent; color: #fff; } .toti-meganav__toggle svg { width: 24px; height: 24px; } .toti-meganav__icon-close { display: none; } .toti-meganav.is-menu-open .toti-meganav__icon-open { display: none; } .toti-meganav.is-menu-open .toti-meganav__icon-close { display: block; } .toti-meganav__bar { position: absolute; z-index: 1200; top: calc(100% + 8px); left: 0; display: none; width: 100%; max-height: calc(100vh - 150px); overflow-y: auto; background: var(--toti-black); box-shadow: 0 22px 40px rgba(0,0,0,.28); } .toti-meganav.is-menu-open .toti-meganav__bar { display: block; } .toti-meganav__products-toggle, .toti-hdr.toti-hdr .toti-meganav__link { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; padding: 12px 34px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 16px; font-weight: 600; text-align: left; } .toti-meganav__products-toggle:hover, .toti-meganav__products-toggle:focus, .toti-meganav__products-toggle.is-current, .toti-hdr.toti-hdr .toti-meganav__link:hover, .toti-hdr.toti-hdr .toti-meganav__link:focus, .toti-hdr.toti-hdr .toti-meganav__link.is-current { border-bottom-color: rgba(255,255,255,.12); color: var(--toti-gold); } .toti-meganav__panel { position: static; width: 100%; border: 0; box-shadow: none; } .toti-meganav__panel-in { padding: 18px 34px 22px; } .toti-meganav__panel-head { display: grid; align-items: start; margin-bottom: 18px; } .toti-hdr.toti-hdr .toti-meganav__all { width: max-content; } .toti-meganav__grid { display: block; } .toti-meganav__group { border-top: 1px solid rgba(255,255,255,.12); } .toti-meganav__group-head { min-height: 46px; } .toti-hdr.toti-hdr .toti-meganav__group-head > a { display: flex; min-height: 48px; flex: 1; align-items: center; font-size: 16px; } .toti-meganav__group-head button { display: inline-grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; } .toti-meganav__group-links { display: none; margin: 0 0 14px; padding-left: 14px; } .toti-meganav__group.is-open .toti-meganav__group-links { display: grid; } .toti-hdr.toti-hdr .toti-meganav__group-links a { display: flex; min-height: 48px; align-items: center; color: #e8e5df; font-size: 15px; line-height: 1.45; } } @media (max-width: 560px) { .toti-meganav__products-toggle, .toti-hdr.toti-hdr .toti-meganav__link { padding-inline: 16px; } .toti-meganav__panel-in { padding-inline: 16px; } .toti-meganav__panel-head { grid-template-columns: 1fr; } .toti-hdr.toti-hdr .toti-meganav__all { width: 100%; } } /* The mobile navigation used to occupy a third full header row even while it was closed, leaving a lone burger underneath the search field. Keep all of Elementor's latest header content, but compose it as two purposeful rows: brand + menu + account actions, then the full-width catalogue search. The opened menu remains anchored to the bottom of the compact header and lays over the page rather than pushing the product content around. */ @media (max-width: 768px) { /* Establish one root stacking context above product gallery controls. A gallery zoom trigger uses z-index:9 and otherwise paints through the open fixed menu even though the menu itself is z-index:1200 inside the header. */ .toti-hdr.toti-hdr { position: relative; z-index: 5000; } .toti-hdr.toti-hdr .toti-hdr__main { position: relative; z-index: 2; min-height: 88px; padding: 12px 18px; flex-wrap: nowrap; } .toti-hdr.toti-hdr .toti-hdr__brand { width: 68px; height: 64px; } .toti-hdr.toti-hdr a.toti-logo--mark { width: 68px; height: 64px; padding-block: 0; margin-block: 0; } .toti-hdr.toti-hdr .toti-logo--mark img { width: 64px; height: 64px; } .toti-hdr.toti-hdr .toti-hdr__main > .toti-hdr__searchw, .toti-hdr.toti-hdr .toti-hdr__main > .toti-hdr__actions { display: none; } .toti-hdr.toti-hdr .toti-hdr__nav { position: absolute; z-index: 3; top: 21px; right: 18px; left: auto; width: 46px; min-width: 46px; height: 46px; padding: 0; } .toti-hdr.toti-hdr .toti-hdr__navw, .toti-hdr.toti-hdr .toti-hdr__navw > .elementor-widget-container, .toti-hdr.toti-hdr .toti-meganav { height: 46px; } .toti-meganav__toggle { margin: 0; border-color: rgba(255, 255, 255, .2); background: #1b1917; } .toti-meganav__toggle:hover, .toti-meganav__toggle:focus, .toti-meganav__toggle[aria-expanded="true"] { border-color: var(--toti-gold); background: #1b1917; color: #fff; } .toti-meganav__bar { position: fixed; top: var(--toti-mobile-menu-top, 129px); right: 0; left: 0; width: 100%; max-height: calc(100dvh - var(--toti-mobile-menu-top, 129px)); } .toti-meganav__mobile-tools { display: grid; gap: 12px; padding: 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); background: #171512; } .toti-meganav__mobile-search { position: relative; display: block; width: 100%; } .toti-hdr.toti-hdr .toti-meganav__mobile-search input[type="search"] { width: 100%; min-height: 48px; padding: 11px 48px 11px 16px; border: 1px solid #3b362e; border-radius: var(--toti-r-pill); background: #232019; color: var(--toti-card); font: 400 14px/1.3 var(--toti-sans); appearance: none; } .toti-hdr.toti-hdr .toti-meganav__mobile-search input[type="search"]::placeholder { color: #a7a29a; opacity: 1; } .toti-hdr.toti-hdr .toti-meganav__mobile-search input[type="search"]:focus { border-color: transparent; outline: 2px solid var(--toti-gold); outline-offset: 1px; } .toti-meganav__mobile-search button { position: absolute; top: 50%; right: 6px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #aaa69e; transform: translateY(-50%); } .toti-meganav__mobile-search button:hover, .toti-meganav__mobile-search button:focus { background: #302b23; color: var(--toti-gold); } .toti-meganav__mobile-search button:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 1px; } .toti-meganav__mobile-search button svg { width: 18px; height: 18px; } .toti-meganav__mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .toti-hdr.toti-hdr .toti-meganav__mobile-actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 4px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; } .toti-hdr.toti-hdr .toti-meganav__mobile-actions a:hover, .toti-hdr.toti-hdr .toti-meganav__mobile-actions a:focus { border-color: var(--toti-gold); color: var(--toti-gold); } .toti-hdr.toti-hdr .toti-meganav__mobile-actions .toti-meganav__mobile-quote { border-color: var(--toti-gold); background: var(--toti-gold); color: #241a04; } .toti-hdr.toti-hdr .toti-meganav__mobile-actions .toti-meganav__mobile-quote:hover, .toti-hdr.toti-hdr .toti-meganav__mobile-actions .toti-meganav__mobile-quote:focus { background: #f2b02a; color: #241a04; } } @media (max-width: 340px) { .toti-hdr.toti-hdr .toti-hdr__main { padding-inline: 14px; } .toti-hdr.toti-hdr .toti-hdr__nav { right: 14px; } } /* Homepage branding-method refinements. */ .toti-meth__inner > .toti-sechead { text-align: center; font-size: clamp(28px, 2.5vw, 34px); } .toti-meth__inner > .toti-sechead::before { margin-inline: auto; } .toti-meth__lede { max-width: 78ch; margin-inline: auto; text-align: center; font-size: 16px; } .toti-meth__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } .toti-contactc__in .toti-cform .toti-btn--gold { width: 100%; } /* ---------- Immersive homepage slider ---------- */ .toti-hslider { position: relative; height: clamp(560px, calc(100svh - 218px), 780px); min-height: 560px; overflow: hidden; background: var(--toti-black); color: var(--toti-card); isolation: isolate; } body.admin-bar .toti-hslider { height: clamp(520px, calc(100svh - 250px), 748px); min-height: 520px; } .toti-hslider__viewport, .toti-hslider__slide { position: absolute; inset: 0; } .toti-hslider__slide { visibility: hidden; opacity: 0; transform: scale(1.012); transition: opacity 620ms ease, transform 900ms ease, visibility 620ms; } .toti-hslider__slide.is-active { visibility: visible; opacity: 1; transform: scale(1); z-index: 1; } .toti-hslider__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; } .toti-hslider__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 31%, rgba(10,10,10,.35) 61%, rgba(10,10,10,.08) 100%), linear-gradient(0deg, rgba(10,10,10,.38), transparent 46%); } .toti-hslider__content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; width: min(1268px, 100%); height: 100%; margin-inline: auto; padding: 62px 34px 118px; pointer-events: none; } .toti-hslider__content > * { pointer-events: auto; } .toti-hslider__eyebrow { margin: 0 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; color: var(--toti-gold); } .toti-hslider__content h1, .toti-hslider__content h2 { max-width: 760px; margin: 0 0 22px; font-size: clamp(45px, 5.15vw, 72px); font-weight: 650; letter-spacing: -.045em; line-height: 1.01; color: #fff; } .toti-hslider__body { max-width: 620px; margin: 0 0 30px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); } .toti-hslider__actions { display: flex; flex-wrap: wrap; gap: 12px; } .toti-hslider__line { border: 1px solid rgba(255,255,255,.7); color: #fff; } .toti-hslider__line:hover, .toti-hslider__line:focus-visible { border-color: #fff; background: #fff; color: var(--toti-black); } .toti-hslider__proof { position: absolute; left: 34px; bottom: 106px; margin: 0; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.74); } .toti-hslider__proof span { display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px solid rgba(255,255,255,.35); font-weight: 700; color: var(--toti-gold); } .toti-hslider__slide--products { background: linear-gradient(124deg, #101010 0%, #101010 48%, var(--toti-silver-wash) 48.1%, #f7f7f7 100%); } .toti-hslider__slide--gifts { background: linear-gradient(124deg, #101010 0%, #101010 48%, #c98700 48.1%, #edaa11 100%); } .toti-hslider__slide--products .toti-hslider__content :is(h1, h2) { max-width: 560px; } .toti-hslider__slide--products .toti-hslider__body { max-width: 520px; } .toti-hslider__product-stage { position: absolute; z-index: 2; top: 7%; right: max(34px, calc((100vw - 1200px) / 2)); bottom: 12%; width: min(48vw, 650px); } .toti-hslider__product { position: absolute; display: grid; grid-template-rows: minmax(0,1fr) auto; width: 41%; overflow: hidden; border: 1px solid rgba(17,17,17,.12); border-radius: 4px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.24); } .toti-hslider__product img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; } .toti-hslider__product span { padding: 10px 13px; border-top: 1px solid #e5e5e5; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--toti-ink); } .toti-hslider__product--1 { top: 7%; left: 1%; height: 49%; transform: rotate(-3deg); } .toti-hslider__product--2 { top: 0; right: 3%; height: 55%; transform: rotate(2deg); } .toti-hslider__product--3 { right: 17%; bottom: 0; height: 48%; transform: rotate(-1deg); } .toti-hslider__controls { position: absolute; z-index: 6; left: 50%; bottom: 24px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; width: min(1200px, calc(100% - 68px)); transform: translateX(-50%); } .toti-hslider__arrows { display: flex; gap: 8px; } .toti-hslider__arrow, .toti-hslider__pause { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(10,10,10,.76); font-size: 18px; color: #fff; cursor: pointer; backdrop-filter: blur(7px); } .toti-hslider__arrow:hover, .toti-hslider__pause:hover { border-color: var(--toti-gold); background: var(--toti-gold); color: var(--toti-black); } .toti-hslider__tabs { justify-self: center; display: flex; align-items: center; padding: 4px; border: 1px solid rgba(255,255,255,.24); border-radius: 3px; background: rgba(10,10,10,.76); backdrop-filter: blur(7px); } .toti-hslider__tabs button { min-height: 44px; padding: 8px 15px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.68); cursor: pointer; } .toti-hslider__tabs button span { margin-right: 7px; color: var(--toti-gold); } .toti-hslider__tabs button[aria-selected="true"] { border-bottom-color: var(--toti-gold); color: #fff; } .toti-hslider button:focus-visible, .toti-hslider a:focus-visible { outline: 2px solid var(--toti-gold); outline-offset: 3px; } @media (min-width: 1001px) and (max-width: 1200px) { .toti-hslider__slide--products .toti-hslider__content :is(h1, h2) { max-width: 430px; font-size: clamp(43px, 4.7vw, 56px); } .toti-hslider__slide--products .toti-hslider__body { max-width: 398px; } .toti-hslider__product-stage { right: 22px; width: 52vw; } } @media (max-width: 1000px) { .toti-hslider { height: clamp(580px, calc(100svh - 218px), 740px); min-height: 580px; } body.admin-bar .toti-hslider { height: clamp(550px, calc(100svh - 250px), 708px); min-height: 550px; } .toti-hslider__content { padding: 48px 34px 112px; } .toti-hslider__content h1, .toti-hslider__content h2 { max-width: 680px; font-size: clamp(42px, 7vw, 58px); } .toti-hslider__shade { background: linear-gradient(90deg, rgba(10,10,10,.93), rgba(10,10,10,.56) 72%, rgba(10,10,10,.2)); } .toti-hslider__slide--products, .toti-hslider__slide--gifts { background: linear-gradient(180deg, #101010 0%, #101010 54%, var(--toti-silver-wash) 54.1%, #f7f7f7 100%); } .toti-hslider__slide--gifts { background: linear-gradient(180deg, #101010 0%, #101010 54%, #c98700 54.1%, #edaa11 100%); } .toti-hslider__slide--products .toti-hslider__content { justify-content: flex-start; padding-top: 42px; } .toti-hslider__slide--products .toti-hslider__content :is(h1, h2) { max-width: 720px; font-size: 43px; } .toti-hslider__slide--products .toti-hslider__body { max-width: 680px; } .toti-hslider__product-stage { top: 55%; right: 8%; bottom: 12%; width: 84%; } .toti-hslider__product { width: 30%; } .toti-hslider__product--1 { top: 6%; left: 1%; height: 78%; } .toti-hslider__product--2 { top: 0; right: 34%; height: 86%; } .toti-hslider__product--3 { top: 8%; right: 1%; bottom: auto; height: 76%; } .toti-meth__row { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 560px) { .toti-hslider { height: clamp(600px, calc(100svh - 210px), 700px); min-height: 600px; } body.admin-bar .toti-hslider { height: clamp(560px, calc(100svh - 256px), 668px); min-height: 560px; } .toti-hslider__content { justify-content: flex-start; padding: 44px 16px 96px; } #toti-hero-slide-1 .toti-hslider__content { align-items: center; justify-content: center; text-align: center; } #toti-hero-slide-1 .toti-hslider__content h1, #toti-hero-slide-1 .toti-hslider__body { margin-inline: auto; } .toti-hslider__content h1, .toti-hslider__content h2 { margin-bottom: 16px; font-size: 37px; line-height: 1.04; } .toti-hslider__body { margin-bottom: 22px; font-size: 15.5px; line-height: 1.55; } .toti-hslider__actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; } .toti-hslider__actions .toti-btn { width: 100%; } .toti-hslider__proof { display: none; } .toti-hslider__photo { object-position: 61% 50%; } .toti-hslider__shade { background: linear-gradient(180deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.68) 58%, rgba(10,10,10,.85) 100%); } .toti-hslider__slide--products .toti-hslider__content { padding: 34px 16px 96px; } .toti-hslider__slide--products .toti-hslider__content :is(h1, h2) { font-size: 33px; } .toti-hslider__slide--products .toti-hslider__body { display: none; } .toti-hslider__slide--products .toti-hslider__actions { grid-template-columns: repeat(2, minmax(0,1fr)); } .toti-hslider__slide--products .toti-hslider__actions .toti-btn { min-height: 44px; padding: 9px 8px; font-size: 12px; text-align: center; } .toti-hslider__product-stage { top: 51%; right: 4%; bottom: 12%; width: 92%; } .toti-hslider__product { width: 31%; border-radius: 2px; } .toti-hslider__product span { padding: 7px 8px; font-size: 9px; } .toti-hslider__controls { bottom: 12px; gap: 7px; width: calc(100% - 32px); } .toti-hslider__arrow, .toti-hslider__pause { width: 44px; height: 44px; } .toti-hslider__arrows { gap: 5px; } .toti-hslider__tabs button { min-width: 44px; min-height: 44px; padding: 8px 10px; font-size: 0; } .toti-hslider__tabs button span { margin: 0; font-size: 11px; } .toti-meth__inner > .toti-sechead { font-size: 27px; } .toti-meth__lede { max-width: 64ch; font-size: 15.5px; } .toti-meth__row { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (prefers-reduced-motion: reduce) { .toti-hslider__slide { transition: none; } } /* ========================================================================== Complete native footer + WhatsApp shortcut (1.17.8) ========================================================================== */ .toti-ftr.toti-ftr { overflow: hidden; } .toti-ftr__cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px max(34px, calc((100% - var(--toti-max)) / 2)); background: var(--toti-gold); color: var(--toti-black); } .toti-ftr__cta p, .toti-ftr__cta h2 { margin: 0; color: inherit; } .toti-ftr__cta p { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .toti-ftr__cta h2 { max-width: 720px; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; } .toti-ftr__cta-actions { flex: 0 0 auto; display: flex; gap: 10px; } .toti-ftr__cta .toti-btn { min-height: 46px; padding: 12px 20px; border-radius: var(--toti-r-btn); font-family: var(--toti-sans); font-size: 13.5px; font-weight: 650; text-decoration: none; } .toti-ftr__cta .toti-btn--gold { background: var(--toti-black); color: #fff; } .toti-ftr__cta .toti-btn--outline-dark { border: 1px solid rgba(20, 19, 18, .58); background: transparent; color: var(--toti-black); } .toti-ftr__cta .toti-btn:hover, .toti-ftr__cta .toti-btn:focus-visible { border-color: var(--toti-black); background: #fff; color: var(--toti-black); } .toti-ftr.toti-ftr .toti-ftr__cols { width: min(100%, calc(var(--toti-max) + 68px)); margin: 0 auto; padding: 50px 34px 16px; display: grid; grid-template-columns: 1.25fr .9fr 1.05fr .85fr 1.45fr; gap: 38px 28px; align-items: start; } .toti-fbrand__logo { display: block; width: 176px; max-width: 100%; } .toti-fbrand__logo img { display: block; width: 100%; height: auto; } .toti-fbrand p { max-width: 30ch; margin-top: 16px; font-size: 14px; } .toti-ftr.toti-ftr .toti-fcol__h { padding-top: 3px; } .toti-ftr.toti-ftr .toti-fcol__list { gap: 7px; } .toti-ftr.toti-ftr .toti-fcol__list a { display: inline-flex; min-height: 24px; align-items: center; } .toti-fcontact ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; } .toti-fcontact li > a, .toti-fcontact li > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--toti-muted); font-size: 12.75px; line-height: 1.45; text-decoration: none; } .toti-fcontact li > a > span:first-child, .toti-fcontact li > div > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--toti-silver-wash); color: var(--toti-ink); } .toti-fcontact svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .toti-fcontact strong { display: block; margin-bottom: 1px; color: var(--toti-ink); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } .toti-fcontact a:hover, .toti-fcontact a:focus-visible { color: var(--toti-ink); text-decoration: underline; text-underline-offset: 3px; } .toti-ftr.toti-ftr .toti-ftr__legalw, .toti-ftr.toti-ftr .toti-ftr__base { width: min(calc(100% - 68px), var(--toti-max)); margin-right: auto; margin-left: auto; } .toti-ftr.toti-ftr .toti-ftr__legalw { margin-top: 28px; } .toti-ftr.toti-ftr .toti-ftr__base { margin-top: 26px; padding: 16px 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; } .toti-ftr__base p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--toti-muted); } .toti-wa { position: fixed; z-index: 7800; right: auto; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding: 7px 18px 7px 8px; border: 1px solid rgba(8, 56, 31, .28); border-radius: var(--toti-r-pill); background: #25D366; box-shadow: 0 12px 30px rgba(20, 19, 18, .24); color: #0B351D; font-family: var(--toti-sans); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform var(--toti-t-fast), box-shadow var(--toti-t-fast), opacity var(--toti-t-fast); } .toti-wa__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0; background: transparent; } .toti-wa svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } /* The floating shortcut uses the actual filled WhatsApp mark. This override is intentionally scoped more tightly than the line icons in the footer. */ .toti-wa .toti-wa__icon svg { width: 28px; height: 28px; fill: #fff; stroke: none; } .toti-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 19, 18, .3); color: #071f12; } .toti-wa:focus-visible { outline: 3px solid var(--toti-black); outline-offset: 3px; } body:has(.toti-cnotice:not([hidden])) .toti-wa, body:has(.toti-meganav__toggle[aria-expanded="true"]) .toti-wa, .toti-wa.is-footer-overlap { opacity: 0; pointer-events: none; } @media (max-width: 1100px) { .toti-ftr.toti-ftr .toti-ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toti-fbrand { grid-column: 1 / -1; display: grid; grid-template-columns: 176px minmax(0, 34ch); gap: 26px; align-items: center; } .toti-fbrand p { margin: 0; } } @media (max-width: 768px) { .toti-ftr__cta { padding: 28px 16px; align-items: flex-start; flex-direction: column; gap: 20px; } .toti-ftr__cta-actions { width: 100%; } .toti-ftr__cta .toti-btn { flex: 1 1 0; justify-content: center; text-align: center; } .toti-ftr.toti-ftr .toti-ftr__cols { width: 100%; padding: 38px 16px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .toti-ftr.toti-ftr .toti-ftr__legalw, .toti-ftr.toti-ftr .toti-ftr__base { width: calc(100% - 32px); } } @media (max-width: 520px) { .toti-ftr__cta-actions { display: grid; } .toti-ftr.toti-ftr .toti-ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .toti-fbrand { grid-column: 1 / -1; display: block; } .toti-fbrand p { margin-top: 14px; } .toti-fcol[aria-labelledby="toti-f-branding"], .toti-fcontact { grid-column: 1 / -1; } .toti-fcol[aria-labelledby="toti-f-branding"] .toti-fcol__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .toti-ftr.toti-ftr .toti-ftr__base { display: grid; justify-content: stretch; } .toti-wa { right: auto; left: 18px; bottom: 20px; width: 54px; height: 54px; min-height: 54px; padding: 0; justify-content: center; } .toti-wa__icon { width: 30px; height: 30px; } .toti-wa__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* --------------------------------------------------------------------------- My account: quote requests Styled here because WooCommerce's own account tables come with its blue default buttons, which is what the Orders tab looked like before this and is the reason the account area read as somebody else's software. --------------------------------------------------------------------------- */ .toti-acctq { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.95rem; } .toti-acctq th, .toti-acctq td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--toti-line); vertical-align: middle; } .toti-acctq thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--toti-muted); border-bottom-width: 2px; } .toti-acctq tbody tr:last-child th, .toti-acctq tbody tr:last-child td { border-bottom: 0; } .toti-acctq td .toti-btn { padding: 0.35rem 0.9rem; font-size: 0.85rem; } .toti-acctq__h { margin: 0 0 1rem; } .toti-acctq__sub { margin: 1.75rem 0 0.75rem; } .toti-acctq__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem 1.5rem; margin: 0 0 1.5rem; } .toti-acctq__fact dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--toti-muted); margin: 0 0 0.2rem; } .toti-acctq__fact dd { margin: 0; font-weight: 500; } .toti-acctq__note { color: var(--toti-muted); font-size: 0.9rem; max-width: 62ch; } /* A table with five columns does not fit a phone, so each row becomes a card and every cell carries its own label from the data-label attribute. */ @media (max-width: 640px) { .toti-acctq thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .toti-acctq tbody tr { display: block; border: 1px solid var(--toti-line); border-radius: 2px; margin: 0 0 0.75rem; padding: 0.35rem 0; } .toti-acctq td { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 0; padding: 0.4rem 0.9rem; } .toti-acctq td::before { content: attr(data-label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--toti-muted); } .toti-acctq td:not([data-label])::before { content: ""; } } /* The account opt-in on the quote form. A checkbox, not a field: it sits before the submit button so it reads as part of sending rather than as one more thing to fill in. */ .toti-qf__field--check { margin-top: 0.5rem; } .toti-qf__check { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-weight: 500; } .toti-qf__check input[type="checkbox"] { /* 44px is the smallest reliable touch target; the box itself is smaller, so the padding on the label carries the rest of it. */ width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; flex: 0 0 auto; accent-color: var(--toti-gold, #DF9D18); } .toti-qf__checktext { line-height: 1.45; } .toti-qf__field--check .toti-qf__help { margin: 0.45rem 0 0 1.8rem; max-width: 60ch; } @media (max-width: 640px) { .toti-qf__field--check .toti-qf__help { margin-left: 0; } } /* Inside the actions block, the checkbox needs a little air above the button it now precedes. */ .toti-qf__actions .toti-qf__field--check { margin: 0 0 1.1rem; }