/* ============================================================ Frostline theme — freezer-labels.com Clean & modern, ice-blue accents. Brand colours are injected as --c-primary/--c-accent/--c-dark by the layout (editable from the admin). ============================================================ */ :root{ --c-primary:#3b6bb3; --c-accent:#274a78; --c-dark:#16202b; /* Brand spectrum (from the lasvegaslabels logo) */ --brand-1:#8e2522; --brand-2:#b52d26; --brand-3:#d36036; --brand-4:#e4a563; --brand-5:#edd0ae; --brand-6:#a6b6ad; --brand-7:#3482ae; --brand-8:#3b6bb3; --ink:#0f1b28; --ink-soft:#48586a; --line:#e4ecf3; --bg:#ffffff; --bg-tint:#f3f8fc; --bg-frost:#eaf4fb; --white:#fff; --radius:16px; --radius-sm:10px; --radius-lg:26px; --shadow-sm:0 1px 2px rgba(12,38,64,.06),0 2px 8px rgba(12,38,64,.05); --shadow:0 8px 30px rgba(12,38,64,.10); --shadow-lg:0 24px 60px rgba(11,59,96,.18); --font-head:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --container:1160px; --gap:clamp(1.4rem,4vw,2.6rem); /* Vertical rhythm — ONE knob for the whole site. A band pads top and bottom, so two stacked bands sit 2x --space-band apart (~97px at 1200px, ~128px at 1600px). Raise these two values to loosen the whole page, lower to tighten. */ --space-band:clamp(2.4rem,4vw,4rem); --space-band-lg:clamp(3rem,4.8vw,4.8rem); /* hero / CTA / quote bands */ --space-head:clamp(1.5rem,2.6vw,2.3rem); /* heading block -> its content */ /* Header geometry — two rows (brand/search/phone + nav). Anything that needs to sit under the header (slider, mega panels, mobile drawer) reads --header-h, which follows the rows automatically (the brand row collapses on scroll). */ --topbar-h:74px; --navbar-h:56px; --util-h:40px; --header-h:calc(var(--topbar-h) + var(--navbar-h)); /* space the page reserves for the fixed header — always the EXPANDED height of all three rows. .scrolled zeroes --topbar-h/--util-h on the header element only, so :root (and therefore this) never changes and the document never reflows while you scroll. See the note on .site-header. */ --header-total:calc(var(--topbar-h) + var(--navbar-h) + var(--util-h)); /* the header rows are full-bleed (logo hard left, phone hard right) — this is the shared edge padding so logo, nav and the mega panels line up */ --edge:clamp(1rem,2.6vw,2.4rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden; padding-top:var(--header-total); /* the header is fixed — reserve its row */ } img{max-width:100%;display:block} a{color:var(--c-primary);text-decoration:none;transition:color .18s} a:hover{color:var(--c-accent)} /* overflow-wrap on headings: at 320px a single long word ("Manufacturing" in "Learn About Manufacturing & Logistics Labels") is wider than the column and spilled out of its box. Only breaks words that cannot fit on a line of their own. */ h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em; overflow-wrap:break-word} h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:800} /* 320-400px: the 2.3rem floor makes a 13-letter word ("Manufacturing") wider than the column, and overflow-wrap then splits it mid-word — "Manufacturin / g". A slightly smaller floor lets the longest title words stay whole; break-word above stays as the backstop for things that genuinely cannot fit, like a URL. */ @media (max-width:400px){ h1{font-size:1.95rem} } h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700} h3{font-size:1.25rem;font-weight:600} p{margin:0 0 1rem} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)} /* ---------- Buttons ---------- */ .btn{ --btn-bg:var(--c-primary);--btn-fg:#fff; display:inline-flex;align-items:center;gap:.5rem;justify-content:center; font-family:var(--font-head);font-weight:600;font-size:.98rem; padding:.72rem 1.4rem;border-radius:999px;border:1.5px solid transparent; cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,color .2s,border-color .2s; background:var(--btn-bg);color:var(--btn-fg);white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn-primary{box-shadow:0 8px 20px rgba(43,143,214,.32)} .btn-primary:hover{box-shadow:0 12px 26px rgba(43,143,214,.42);color:#fff} .btn-lg{padding:.95rem 1.8rem;font-size:1.05rem} .btn-sm{padding:.5rem 1rem;font-size:.9rem} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--bg-tint);color:var(--ink);border-color:var(--c-primary)} .btn-outline{background:transparent;color:var(--c-primary);border-color:var(--c-primary)} .btn-outline:hover{background:var(--c-primary);color:#fff} /* ---------- Header ---------- Row 1 (.topbar) : Etiquette Systems logo (far left) · search · LVL flag lockup (far right) Row 2 (.navbar) : mega menu · CTAs Row 3 (.utilbar) : made in USA · phone · email · hours · samples · contact The whole header is sticky; rows 1 and 3 fold away on scroll and the search comes back as an icon in row 2 (which opens .searchbar). backdrop-filter also makes the header the containing block for the fixed mega panels / mobile drawer. --header-h is deliberately rows 1+2 only: it is what dropdowns anchor to, and they are meant to open over the util bar. */ /* FIXED, not sticky, and on purpose: a sticky header sits in the document flow, so folding rows 1+3 away removed ~114px of flow height above the viewport. Chrome's scroll anchoring then compensated by pulling scrollY down by the same amount — one wheel tick went 0 -> 100 -> 79 -> 0, which dropped back under the collapse threshold and re-expanded the header, so the bars flickered and the page bounced back to the top. Out of flow + body padding-top:var(--header-total) means the document height never changes and there is nothing to anchor to. */ .site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent; transition:border-color .2s,box-shadow .2s} .site-header.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)} /* brand + util rows fold away on scroll — --header-h has to be restated, a var() inside a custom property is substituted where it is declared, not where it inherits */ .site-header.scrolled{--topbar-h:0px;--util-h:0px;--header-h:var(--navbar-h)} /* --- row 1: brand / search / brand --- */ /* no overflow:hidden here — it would clip the search suggestions panel; the folded state is handled by height 0 + opacity 0 */ .topbar{height:var(--topbar-h);transition:height .3s cubic-bezier(.4,0,.2,1),opacity .22s} .site-header.scrolled .topbar{opacity:0;pointer-events:none} /* full-bleed row: the ETI logo sits hard left, the LVL flag lockup hard right */ .topbar-inner{display:flex;align-items:center;gap:clamp(.9rem,2.6vw,2.2rem);height:var(--topbar-h); width:100%;padding-inline:var(--edge)} .brand{flex:none;display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;color:var(--ink)} .brand:hover{color:var(--ink)} .brand-logo{height:48px;width:auto;max-width:none;transition:height .25s} /* the flag lockup is a very wide 9:1 strip, so it steps down earlier than the ETI mark */ .lvl-logo{height:34px;width:auto;max-width:none;transition:height .25s} @media (max-width:1280px){.lvl-logo{height:30px}} @media (max-width:1100px){.brand-logo{height:42px}.lvl-logo{height:26px}} .brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px; color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));box-shadow:0 6px 16px rgba(43,143,214,.35)} .brand-name{font-size:1.15rem;letter-spacing:-.01em} /* --- row 2: navigation --- */ .navbar{height:var(--navbar-h);border-top:1px solid var(--line);transition:border-color .2s} .site-header.scrolled .navbar{border-top-color:transparent} /* the nav row stays inside the centred container (only the brand row is full-bleed) */ .navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--navbar-h)} .main-nav{display:flex;align-items:center;min-width:0} /* -.78rem pulls the first link's own padding back so the nav text starts on the same vertical line as the logo */ .nav-list{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0 0 0 -.78rem;padding:0} /* full-height items => a panel at the row's bottom edge lines up exactly */ .nav-list>li{display:flex;align-items:center;height:var(--navbar-h)} .nav-actions{flex:none;display:flex;align-items:center;gap:.5rem} /* Top-level links only — mega/dropdown links style themselves */ .nav-list>li>a{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-head);font-weight:500; font-size:.95rem;line-height:1;white-space:nowrap;color:var(--ink-soft); padding:.6rem .78rem;border-radius:10px;transition:color .15s,background .15s} .nav-list>li>a:hover{color:var(--ink);background:var(--bg-tint)} .nav-list>li>a.is-active{color:var(--c-accent)} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer} .nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s} .nav-sub{display:none} /* mobile-only submenu arrow — see the 720px block */ .caret{flex:none;transition:transform .2s;opacity:.5} .has-mega:hover>a .caret,.has-mega:focus-within>a .caret, .has-dropdown:hover>a .caret{transform:rotate(180deg)} /* ---------- Site search (header pill + suggestions) ---------- */ .site-search{position:relative;flex:1 1 auto;min-width:0;max-width:520px;margin-inline:auto;display:flex;align-items:center;gap:.5rem; background:var(--bg-tint);border:1.5px solid var(--line);border-radius:999px;padding:.26rem .3rem .26rem 1rem; transition:border-color .18s,box-shadow .18s,background .18s} .site-search:focus-within{background:#fff;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(59,107,179,.13)} .sf-icon{flex:none;color:var(--ink-soft)} .site-search:focus-within .sf-icon{color:var(--c-primary)} .site-search input[type=search]{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none; font-family:var(--font-body);font-size:.95rem;color:var(--ink);padding:.5rem 0;appearance:none} .site-search input[type=search]::placeholder{color:#94a4b6} .site-search input[type=search]::-webkit-search-cancel-button, .site-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none} .sf-clear{flex:none;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%; background:#dbe6f0;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s} .sf-clear:hover{background:#c8d7e6;color:var(--ink)} .sf-clear[hidden]{display:none} /* display:grid would otherwise beat [hidden] */ .sf-go{flex:none} .search-suggest{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff; border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); padding:.4rem;max-height:min(66vh,480px);overflow:auto;z-index:70;overscroll-behavior:contain} .search-suggest[hidden]{display:none} .ss-group{font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-soft);padding:.6rem .75rem .3rem} .ss-item{display:flex;align-items:center;gap:.7rem;padding:.56rem .75rem;border-radius:11px;color:var(--ink);cursor:pointer} .ss-item:hover,.ss-item.is-active{background:var(--bg-tint);color:var(--c-accent)} .ss-item-t{font-weight:600;font-size:.94rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-item-t mark{background:#fff2b8;color:inherit;border-radius:3px;padding:0 .1em} .ss-item-l{flex:none;margin-left:auto;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-soft);background:var(--bg-frost);border-radius:999px;padding:.16rem .5rem} .ss-ic{flex:none;color:var(--c-primary);opacity:.75} .ss-all{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.25rem;padding:.65rem; border-top:1px solid var(--line);font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--c-primary)} .ss-all:hover,.ss-all.is-active{background:var(--bg-tint)} .ss-empty{padding:1rem .8rem;text-align:center;color:var(--ink-soft);font-size:.92rem} /* ---------- Row 3: utility bar (dark strip under the nav) ---------- */ .utilbar{height:var(--util-h);overflow:hidden;background:var(--c-dark);color:#b9c9d8; transition:height .3s cubic-bezier(.4,0,.2,1),opacity .22s} .site-header.scrolled .utilbar{opacity:0;pointer-events:none} .utilbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem; height:var(--util-h);width:100%;padding-inline:var(--edge)} .utilbar-tag{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:#fff;white-space:nowrap} .utilbar-links{display:flex;align-items:center;gap:.2rem;min-width:0} .utilbar-item{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .62rem;border-radius:8px; font-size:.82rem;line-height:1;white-space:nowrap;color:#b9c9d8;transition:color .15s,background .15s} .utilbar-item svg{flex:none;opacity:.75} .utilbar-item strong{color:#fff;font-weight:600;letter-spacing:.01em} a.utilbar-item:hover{color:#fff;background:rgba(255,255,255,.08)} a.utilbar-item:hover svg{opacity:1} .utilbar-hours{cursor:default} /* the brand's own yellow — same accent etiquettesystems.com uses for "Order Free Samples" */ /* .82rem, not .76rem: at 16px root this was rendering at 12.16px, and it is a tappable CTA in a dark bar, not a caption. Uppercase + letter-spacing makes a small size read smaller still. */ .utilbar-samples{display:inline-flex;align-items:center;margin-inline:.35rem;padding:.32rem .8rem;border-radius:999px; background:#ffc72c;color:#1b1205;font-family:var(--font-head);font-weight:700;font-size:.82rem; letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:background .15s,transform .15s} .utilbar-samples:hover{background:#ffd45c;color:#1b1205;transform:translateY(-1px)} /* Icon button (search in the nav row) */ .icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--line);border-radius:50%; background:#fff;color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s,background .15s} .icon-btn:hover{border-color:var(--c-primary);color:var(--c-primary)} .nav-search{display:none} /* only while the brand row is folded */ .site-header.scrolled .nav-search{display:grid} .site-header.searchbar-open .nav-search{border-color:var(--c-primary);color:var(--c-primary);background:var(--bg-tint)} /* Slide-down search row (used when the brand row is folded, and on mobile) */ .searchbar{position:absolute;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line); box-shadow:var(--shadow);padding:.85rem 0;display:none;z-index:64} .site-header.searchbar-open .searchbar{display:block} .searchbar-inner{width:100%;padding-inline:var(--edge)} .searchbar .site-search{max-width:820px} /* Header responsive — trim in this order: samples CTA → search width → util-bar tag/email/hours → topbar search (moves into the nav icon) → flag lockup */ @media (max-width:1280px){ .nav-action-consult{display:none} .site-search{max-width:380px} } @media (max-width:1140px){ .nav-list>li>a{padding:.6rem .58rem;font-size:.9rem} .site-search{max-width:300px} .utilbar-tag{display:none} } @media (max-width:900px){ .topbar-inner>.site-search{display:none} /* moves into the nav-row icon */ .brand--lvl{margin-left:auto} .nav-search{display:grid} .utilbar-inner{justify-content:center} .utilbar-hours{display:none} } @media (max-width:720px){ .utilbar-links a[href^="mailto"]{display:none} } /* Mobile keeps ONE lockup — the Las Vegas Labels flag logo (client's call) — so the brand row stays a single slim line. Both logos link home, so nothing is lost. Note: .brand--lvl also carries .brand, hence the :not() to hide only the ETI mark. The `.topbar` prefix is load-bearing: the FOOTER lockup is `.brand.brand--footer`, which also matches `.brand:not(.brand--lvl)`, so the unscoped selector was hiding the Las Vegas Labels colour-bars logo out of the footer on every phone — measured 0x0 at 320-720px. Three logos is the client's rule; keep this scoped to the row it is about. */ @media (max-width:720px){ :root{--topbar-h:52px;--navbar-h:54px} .topbar .brand:not(.brand--lvl){display:none} /* only child left in the row => auto margins both sides centre it */ .brand--lvl{margin-inline:auto} /* sized by WIDTH here, not height: the lockup is a 9.1:1 strip, so a fixed height overflows a 320px phone. min(316px,78vw) keeps it bigger than the old 26px-tall version at every width and still fits inside --edge on the narrowest screens. The row is 52px so the strip nearly fills it — that is the point. */ .lvl-logo{width:min(316px,78vw);height:auto} } /* Narrow phones: the bar keeps every item, but "Call" and "Contact" drop to their icons — otherwise the last item was clipped by .utilbar's overflow:hidden */ @media (max-width:440px){ .utilbar-lbl{display:none} .utilbar-samples{margin-inline:.2rem;padding:.32rem .6rem} } /* 320px (iPhone SE and friends): even icon-only, phone + Free samples! + Contact come to ~293px of content in a 303px bar, so the Contact icon was left sliced in half by .utilbar's overflow:hidden — a half-drawn, half-tappable target. Drop it; Contact is still in the nav under Company and in the footer. */ @media (max-width:380px){ .utilbar-links a[href$="/contact"]{display:none} } @media (max-width:560px){ .utilbar-item{padding:.3rem .45rem;font-size:.78rem} } /* ---------- Search results page ---------- */ .page-hero--search{padding-bottom:clamp(1.2rem,2.4vw,2rem)} .page-hero--search+.section{padding-top:clamp(1.8rem,3vw,2.6rem)} .searchpage-form{display:flex;align-items:center;gap:.6rem;max-width:640px;margin-top:1.6rem; background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.3rem .35rem .3rem 1.15rem; box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s} .searchpage-form:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(59,107,179,.13)} .searchpage-form .sf-icon{flex:none;color:var(--ink-soft)} .searchpage-form input[type=search]{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent; font-family:var(--font-body);font-size:1.02rem;color:var(--ink);padding:.62rem 0;appearance:none} .searchpage-form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none} .search-group-title{font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-soft);margin:2.4rem 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)} .search-group-title:first-child{margin-top:0} .search-results{list-style:none;margin:0;padding:0;display:grid;gap:.15rem} .search-hit{padding:.95rem 1.05rem;border-radius:var(--radius);transition:background .15s} .search-hit:hover{background:var(--bg-tint)} .search-hit-title{font-family:var(--font-head);font-weight:600;font-size:1.1rem;color:var(--c-accent)} .search-hit-title:hover{color:var(--c-primary)} .search-hit-tag{display:inline-block;margin-left:.6rem;font-size:.66rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--c-primary);background:var(--bg-frost);border-radius:999px; padding:.18rem .55rem;vertical-align:2px} .search-hit-tag--blog{color:#8a5a12;background:#fdf1dc} .search-hit-text{margin:.35rem 0 .25rem;color:var(--ink-soft);font-size:.96rem} .search-hit-text mark,.search-hit-title mark{background:#fff2b8;color:inherit;border-radius:3px;padding:0 .1em} .search-hit-url{font-size:.8rem;color:#8fa1b4} .search-help{margin-top:1.6rem;color:var(--ink-soft)} /* Simple dropdown */ .has-dropdown{position:relative} .dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#fff;border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow);padding:.4rem;margin:0;list-style:none; opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60} .dropdown li{margin:0} .dropdown a{display:block;padding:.5rem .7rem;border-radius:9px;color:var(--ink-soft);font-size:.92rem;white-space:nowrap} .dropdown a:hover{background:var(--bg-tint);color:var(--c-primary)} .has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0)} /* ---------- Mega menu ---------- */ .has-mega{position:relative} .mega{position:absolute;background:#fff;z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s} .has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:translateY(0)} /* Column heading: plain label, no box, no underline */ .mega-h{display:block;font-family:var(--font-head);font-weight:700;font-size:.74rem;line-height:1.2; letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--c-primary); padding:0 .65rem;margin:0 0 .7rem;background:none;border:0} a.mega-h:hover{color:var(--c-accent);background:none} /* Column links: hover pill with real padding */ .mega-col ul{list-style:none;margin:0;padding:0} .mega-col ul li{margin:0} .mega-col ul a{display:block;padding:.42rem .65rem;border-radius:9px;font-size:.9rem;line-height:1.35; color:var(--ink-soft);transition:background .14s,color .14s} .mega-col ul a:hover{background:var(--bg-tint);color:var(--c-primary)} .mega-col ul a.is-active{color:var(--c-accent);font-weight:600} /* Wide mega = full-bleed bar flush under the header, columns aligned to the container */ /* fixed → resolves against the header (backdrop-filter containing block), i.e. edge-to-edge */ .mega-wide{position:fixed;top:var(--header-h);left:0;right:0;width:auto; border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius); box-shadow:0 26px 60px -22px rgba(16,32,48,.28),0 1px 0 rgba(16,32,48,.05); padding:1.9rem 0 2.1rem} .mega-wide .mega-grid{display:flex;gap:1rem;align-items:flex-start; width:100%;max-width:var(--container);margin:0 auto;padding-inline:clamp(1.1rem,4vw,2rem)} .mega-wide .mega-col{flex:1 1 0;min-width:0} /* Narrow mega = anchored card */ .mega-narrow{top:calc(100% + 6px);left:0;min-width:266px;padding:.7rem; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)} .has-mega:nth-last-child(-n+3) .mega-narrow{left:auto;right:0} .mega-narrow .mega-grid{display:block} .mega-narrow .mega-h{padding-top:.3rem} /* two-column card: keeps a long list (Custom Labels is 13 items) from running off the bottom of the viewport as a single stack */ .mega-narrow.mega-cols-2{min-width:min(540px,92vw)} .mega-narrow.mega-cols-2 .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;align-items:start} /* Hover bridge so the pointer can cross the gap into the card */ .mega-narrow::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background: radial-gradient(1200px 600px at 80% -10%,var(--bg-frost),transparent 60%), linear-gradient(180deg,#fff 0%,var(--bg-tint) 100%)} .hero-bg{position:absolute;inset:0;pointer-events:none} .frost{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5} .frost-1{width:420px;height:420px;background:#bfe2fb;top:-120px;right:-80px} .frost-2{width:320px;height:320px;background:#d7ecfa;bottom:-120px;left:-60px;opacity:.6} .frost-3{width:240px;height:240px;background:#e9f5ff;top:40%;left:50%} .hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center; padding-block:var(--space-band-lg)} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600; font-size:.82rem;letter-spacing:.02em;color:var(--c-accent);background:#fff;border:1px solid var(--line); padding:.4rem .85rem;border-radius:999px;box-shadow:var(--shadow-sm)} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 0 4px rgba(43,143,214,.18)} .hero-title{margin:1.1rem 0 .8rem} .hero-lead{font-size:1.18rem;color:var(--ink-soft);max-width:32ch} .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 2rem} /* when the buttons are the last thing in a block (CTA panel, slider copy) the trailing margin is just dead space */ .hero-actions:last-child{margin-bottom:0} .hero-trust{display:flex;gap:2rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.3rem} .hero-trust div{display:flex;flex-direction:column} .hero-trust strong{font-family:var(--font-head);font-size:1.5rem;color:var(--c-accent);line-height:1} .hero-trust span{font-size:.85rem;color:var(--ink-soft)} /* Mobile CTA rows. Measured at 390px across every route: all 251 button rows on the site wrap to one button per line, and because the pills are content-width you get a 162px button sitting above a 235px one, ragged down the left edge. Below 520px the pair never fits side by side anyway ("Get a Quote" + "Order Free Samples" needs ~460px with the gutters), so stack them deliberately and give them the full column — that reads as one CTA block instead of a mistake. .btn keeps white-space:nowrap, which is why the labels never wrap inside. */ @media (max-width:520px){ .hero-actions,.cat-cta{flex-direction:column;align-items:stretch} .hero-actions>.btn,.cat-cta>.btn{width:100%} /* A form's own submit button is not in either row, and .btn is white-space:nowrap — "Send my sample request" was 9px wider than the column at 320px and pushed the whole page into horizontal scroll. Full width, and let it wrap if it must. */ .form button[type=submit],.form input[type=submit]{width:100%;white-space:normal} } /* Hero visual — label card */ .hero-visual{display:grid;place-items:center} .label-card{position:relative;width:min(360px,80vw);background:#fff;border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:0;overflow:hidden;border:1px solid var(--line)} .label-card-strip{height:74px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent))} .label-card-body{padding:1.6rem} .lc-row{height:14px;border-radius:6px;background:var(--bg-tint);margin-bottom:.8rem} .lc-title{height:22px;width:70%;background:#dceaf6} .lc-row.short{width:45%} .lc-barcode{height:52px;margin-top:1.2rem;border-radius:6px; background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 7px)} .snowflake{position:absolute;top:14px;right:18px;color:#fff;font-size:1.5rem;opacity:.9} .floaty{animation:floaty 6s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}} /* ---------- Full-screen slider ---------- */ /* Banner height is deliberately NOT full-screen — the client wants a shorter band (and the artwork is not proportional, so cover-cropping does the rest). */ /* The band is a flex column: a fixed page heading on top, the rotating slides filling whatever is left. `.slides` must be a flex item with min-height:0 — the slides inside it are position:absolute;inset:0 and need a definite box to fill, and without min-height:0 a flex child refuses to shrink below its content. */ .hero-slider{position:relative;height:clamp(468px,58svh,600px);overflow:hidden;background:var(--c-dark); display:flex;flex-direction:column} .slides{position:relative;flex:1 1 auto;min-height:0} /* Static

, pinned above the carousel and outside it, so the one heading that tells Google (and a screen reader) what this page is does not change every six seconds. Slide headlines are h2 beneath it. */ /* The page heading, as its own band directly under the slider and above the stat band. Centred — not the container's left edge — because it is a standalone banner line rather than the start of a column of copy; left-aligned inside a centred container is what reads as "half-centred". `text-wrap:balance` keeps the two lines it wraps to on a phone roughly even instead of leaving one orphan word. */ .hero-hgroup{background:var(--bg);border-bottom:1px solid var(--line); padding-block:clamp(1.15rem,2.4vw,1.7rem);text-align:center} .hero-hgroup h1{margin:0;color:var(--ink);font-weight:700;line-height:1.3; font-size:clamp(1.08rem,2.05vw,1.5rem);letter-spacing:-.005em;text-wrap:balance} .hero-hgroup h1 span{color:var(--c-primary);opacity:.7;padding-inline:.4em} /* On a phone the heading wraps to two lines and its row costs 69px out of a band that is already the tightest thing on the site. Trimming the padding and the type buys back ~16px without making it hard to read, and keeps the page heading from competing with the slide headline directly beneath it. */ @media (max-width:560px){ .hero-hgroup{padding-block:1rem} .hero-hgroup h1{font-size:1.05rem} /* The heading always wraps to two lines here, and the separator was landing as a lone bullet at the head of the second line. The line break already does the separating, so drop it — display:none rather than visibility, or it still reserves the space it was sitting in. */ .hero-hgroup h1 span{display:none} } /* The artwork and its crop point come in as custom properties (--slide-img / --slide-pos) rather than a full inline background shorthand, so the gradient lives here once and a modifier can still change background-size per breakpoint. With the old inline `background-image:...;background-position:...` nothing in CSS could ever win against it. */ .slide{position:absolute;inset:0;display:flex;align-items:center; background-image:linear-gradient(90deg,rgba(11,20,32,.82),rgba(11,20,32,.35) 60%,rgba(11,20,32,.15)),var(--slide-img); background-size:cover;background-position:var(--slide-pos,50% 50%);background-repeat:no-repeat; opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease;transform:scale(1.04)} /* `visibility` MUST be in that transition list, or the crossfade is not a crossfade. Without it the outgoing slide snapped straight to visibility:hidden while its opacity was still 1, so for the whole .8s the band showed nothing but its own dark background and the incoming slide fading up from zero — a black flash on every advance. Sampled mid-transition before the fix: slide A "hidden opacity 1", slide B "visible opacity 0". visibility interpolates discretely in a way that suits this exactly: leaving `visible` it stays visible for the full duration, and arriving at `visible` it applies at once. .is-active overrides `transition` wholesale and deliberately omits visibility, which is what makes the incoming slide appear immediately. */ /* Cut-out packshot (transparent PNG/WebP): never crop it — size it to the band and let it sit on the slider's dark background instead of filling the frame. */ .slide--packshot{background-size:cover,auto 82%} @media (max-width:820px){.slide--packshot{background-size:cover,auto 48%}} .slide.is-active{opacity:1;visibility:visible;transform:scale(1);transition:opacity .8s ease,transform 6s ease} .slide-inner{width:100%;padding-bottom:1.4rem} /* keeps the copy clear of the dots */ .slide-copy{max-width:600px;color:#fff} .eyebrow--light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(6px)} /* sized for the shorter band — the old 4rem title needed three lines and crowded the dots */ .slide-title{font-size:clamp(1.9rem,3.8vw,3.2rem);color:#fff;margin:.9rem 0 .7rem;line-height:1.08; text-shadow:0 2px 30px rgba(0,0,0,.35)} .slide-lead{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.92);max-width:46ch;text-shadow:0 1px 12px rgba(0,0,0,.3)} .slide .hero-actions{margin-top:1.4rem;margin-bottom:0} .btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(6px)} .btn-glass:hover{background:#fff;color:var(--c-accent)} .slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:52px;height:52px;border-radius:50%; border:1px solid rgba(255,255,255,.4);background:rgba(11,20,32,.35);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer; display:grid;place-items:center;transition:.2s;backdrop-filter:blur(4px)} .slider-arrow:hover{background:var(--c-primary);border-color:var(--c-primary)} .slider-arrow.prev{left:clamp(.6rem,3vw,2rem)} .slider-arrow.next{right:clamp(.6rem,3vw,2rem)} /* The prev arrow and the slide copy both hug the left edge, so until the centred container has grown wide enough to push the copy clear of the arrow they sit on top of each other — the 52px blurred disc lands in the middle of .slide-lead and the first words of a wrapped line disappear under it. Measured worst overlap across all five slides: 721px 45px · 1024px 51px · 1200px 52px · 1240px 34px · 1280px 14px · 1300px 4px · 1330px+ clean. The arithmetic: the copy starts at the container's left edge, (W - 1160) / 2, and the arrow ends at 2rem + 52px = 84px, so they separate at W > 1328. Below that the dots (and swipe) are the control — the same call the mobile rule already makes, for the same reason. */ @media (max-width:1330px){ .slider-arrow{display:none} } .slider-dots{position:absolute;bottom:1.6rem;left:0;right:0;z-index:4;display:flex;gap:.6rem;justify-content:center} .slider-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;transition:.2s;opacity:.7} .slider-dots button.is-active{background:#fff;opacity:1;width:30px;border-radius:6px} @media (max-width:720px){ .hero-slider{height:clamp(348px,52svh,470px)} /* there was a `.slide{background-position:center right}` here. It never did anything — the inline background-position always beat it — and now that the position comes from --slide-pos it WOULD suddenly start reshuffling every slide's crop on mobile. Per-slide framing belongs in the slides array. */ .slider-arrow{display:none} /* hide arrows on mobile — they cover the text; swipe + dots remain */ /* Dot clearance, sized deliberately. .slide centres this box, so every pixel of padding-bottom pushes the INK up by half that much. The dots sit 27.6px above the band floor, so 1.75rem (28px) is exactly the value that makes the gap above the eyebrow and the gap below the last button come out equal. It used to be 3.5rem here and 5.6/6.4rem further down, which shoved the copy 45-51px off the top of an overflow:hidden band — see the note on the height rules below. */ .slide-inner{padding-bottom:1.75rem} .slider-dots{bottom:1.1rem} .slider-dots button{width:10px;height:10px} .slider-dots button.is-active{width:26px} } /* The band is sized from the viewport (svh), the copy inside it is not, and the band is overflow:hidden — so whenever the copy is taller than the band it is silently clipped, and because .slide centres it the loss is split top AND bottom. The top is where the eyebrow pill lives, so the eyebrow is what goes. That is exactly what happened once the "keep the copy clear of the dots" padding grew to 5.6/6.4rem: half of that padding came straight off the top. Measured on the live page before this rule (topGap = eyebrow top minus band top; negative means clipped), across all five slides: 360x740 band 400 topGap -41 .. -58 eyebrow 36px tall -> entirely gone 390x844 band 439 topGap -15 .. -32 -> half to fully gone 414x896 band 460 topGap -9 -> a quarter sliced off Two knobs fix it together: the padding above (28px, which centres the ink properly) and a floor tall enough for the tallest slide's ink plus ~20px of daylight at each end. Tallest ink measured: 410px at 360-430 wide, 444px at 320 wide (the eyebrow wraps to two lines there, and the lead to six). If a new slide gets longer copy, re-measure — do not just trim the padding. */ @media (max-width:560px){ .hero-slider{height:clamp(516px,55svh,548px)} } @media (max-width:340px){ .hero-slider{height:clamp(540px,60svh,566px)} } /* On a genuinely short screen (an SE is ~560px) a 476px band is most of the page, so drop the descriptive line as well — the eyebrow, the headline and the two CTAs are what the slide is there for — and the 400px floor is enough again. */ @media (max-width:560px) and (max-height:680px){ .slide-lead{display:none} .hero-slider{height:clamp(418px,52svh,470px)} } /* ---------- Page banner (static sibling of the slider, see front/_banner.php) ---------- */ .pbanner{position:relative;display:flex;align-items:center;height:clamp(320px,44svh,460px); background-color:var(--c-dark);background-size:cover;background-position:center} .pbanner-inner{width:100%} .pbanner .crumbs--light{color:rgba(255,255,255,.75);margin-bottom:.9rem} .pbanner .crumbs--light a{color:#fff} .pbanner .crumbs--light a:hover{color:#bfe2fb} .pbanner .slide-title{margin:.9rem 0 .7rem} .pbanner .hero-actions{margin-bottom:0} @media (max-width:720px){ .pbanner{height:clamp(300px,42svh,400px);background-position:center right} } /* ---------- Attributes strip ---------- */ .attr-strip{background:#fff;border-bottom:1px solid var(--line)} .attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.5rem} .attr{display:flex;align-items:center;gap:.8rem} .attr-ic{font-size:1.6rem;width:48px;height:48px;display:grid;place-items:center;background:var(--bg-frost);border-radius:12px;flex-shrink:0} .attr strong{display:block;font-family:var(--font-head);font-size:1rem;color:var(--ink)} .attr span{font-size:.86rem;color:var(--ink-soft)} @media (max-width:820px){.attr-grid{grid-template-columns:1fr 1fr}} /* ---------- Feature rows (alternating) ---------- */ .feature-rows{padding-block:var(--space-band)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center;margin-bottom:clamp(2rem,3.6vw,3.4rem)} .frow:last-child{margin-bottom:0} .frow--reverse .frow-media{order:2} .frow-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/2} .frow-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .frow:hover .frow-media img{transform:scale(1.04)} .frow-copy .kicker{margin-top:0} .frow-copy h2{margin-bottom:.6rem} .frow-copy p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:1.4rem} @media (max-width:820px){ .frow{grid-template-columns:1fr} .frow--reverse .frow-media{order:0} } /* ---------- Product-type cards (with image) ---------- */ .ptype{overflow:hidden;display:flex;flex-direction:column;color:var(--ink)} .ptype:hover{color:var(--ink)} .ptype-media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-frost)} .ptype-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .ptype:hover .ptype-media img{transform:scale(1.06)} .ptype-body{padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center} .ptype-body h3{margin:0;font-size:1.1rem} .ptype-body .read-more{color:var(--c-primary);font-weight:600;font-size:.9rem} /* ---------- Category hero image + side badges ---------- */ .cat-hero-img{margin:0 0 1.6rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:16/9} .cat-hero-img img{width:100%;height:100%;object-fit:cover} .side-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem} .side-badges span{font-size:.82rem;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem} /* ---------- Strip ---------- */ .strip{border-block:1px solid var(--line);background:#fff} .strip-inner{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding-block:1.3rem;justify-content:space-between} .strip-inner>span{font-family:var(--font-head);font-weight:600;color:var(--ink-soft);font-size:.92rem} .strip-tags{display:flex;gap:1.6rem;flex-wrap:wrap} .strip-tags em{font-style:normal;font-weight:600;color:var(--ink);opacity:.55;font-size:.95rem} /* ---------- Sections ---------- */ .section{padding-block:var(--space-band)} .section--tint{background:var(--bg-tint)} .section-head{max-width:720px;margin:0 auto var(--space-head);text-align:center} .section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;text-align:left;max-width:none} .section-head p{color:var(--ink-soft);font-size:1.1rem} .kicker{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.14em; text-transform:uppercase;color:var(--c-primary);margin-bottom:.6rem} /* ---------- Grid & cards ---------- */ .grid{display:grid;gap:1.5rem} .grid-2{grid-template-columns:repeat(2,1fr)} @media(max-width:720px){.grid-2{grid-template-columns:1fr}} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid-4{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5e6f3} .feature{padding:1.7rem} .feature-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:1rem; color:var(--c-primary);background:var(--bg-frost)} .feature h3{margin-bottom:.4rem} .feature p{color:var(--ink-soft);margin:0;font-size:.98rem} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step} .step{position:relative;padding:2rem 1.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} .step-num{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-accent)); width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem} .step p{color:var(--ink-soft);margin:0} /* ---------- Split / freezer panel ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center} .split-copy .kicker{margin-top:0} .check-list{list-style:none;margin:1.2rem 0 1.8rem;padding:0;display:grid;gap:.7rem} .check-list li{position:relative;padding-left:2rem;color:var(--ink);font-weight:500} .check-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%; background:var(--bg-frost);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232b8fd6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center} .freezer-panel{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;padding:1.4rem; background:linear-gradient(160deg,#cfe8fa,#eaf5fd);border:1px solid #d5e9f6;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:1rem;justify-content:center} .fp-shelf{display:flex;gap:1rem;background:rgba(255,255,255,.55);border-radius:12px;padding:1rem;backdrop-filter:blur(4px)} .fp-tag{height:44px;width:70px;border-radius:8px;background:#fff;box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .fp-tag::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))} .fp-tag.wide{width:120px} .fp-frost{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6),transparent 40%);pointer-events:none} /* ---------- Tags & chips ---------- */ .tag{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.04em; text-transform:uppercase;color:var(--c-accent);background:var(--bg-frost);padding:.3rem .7rem;border-radius:999px} .cat-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem} .chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-head);font-weight:500;font-size:.92rem; color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:.5rem 1rem;border-radius:999px} .chip:hover{border-color:var(--c-primary);color:var(--ink)} .chip.is-active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)} .chip-count{font-size:.78rem;opacity:.75} /* ---------- Post cards ---------- */ .post-card{position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:pointer} /* whole card clickable via stretched link on the title */ .post-card .stretched-link::after{content:"";position:absolute;inset:0;z-index:1} .post-card .tag{position:relative;z-index:2} .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5e6f3} .post-card:hover .read-more{text-decoration:underline} .post-card-media{display:block;aspect-ratio:16/10;background:var(--bg-frost);overflow:hidden} .post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .post-card:hover .post-card-media img{transform:scale(1.05)} .post-card-placeholder{display:grid;place-items:center;height:100%;font-size:3rem;color:#bcdcf1} .post-card-body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .post-card-body h3{margin:0;font-size:1.15rem} .post-card-body h3 a{color:var(--ink)} .post-card-body h3 a:hover{color:var(--c-primary)} .post-card-body p{color:var(--ink-soft);font-size:.95rem;margin:0;flex:1} .post-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--ink-soft);margin-top:.3rem} .read-more{color:var(--c-primary);font-weight:600} /* ---------- Type cards (label categories) ---------- */ .type-card{display:flex;flex-direction:column;gap:.5rem;padding:1.6rem;color:var(--ink)} .type-card:hover{color:var(--ink)} .type-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--bg-frost);color:var(--c-primary);font-size:1.3rem} .type-card h3{margin:.4rem 0 0} .type-card p{color:var(--ink-soft);font-size:.95rem;margin:0;flex:1} .type-card .read-more{color:var(--c-primary);font-weight:600;font-size:.9rem} /* Icon variant for the resources hubs (/labels-101, /label-design): the imported artwork is a set of round 266px PNGs on transparency, so the card centres a contained circle instead of the .type-ic glyph tile. */ .type-card--icon{align-items:center;text-align:center} .type-card--icon .type-img{width:112px;height:112px;max-width:100%;object-fit:contain;transition:transform .3s} .type-card--icon:hover .type-img{transform:scale(1.06)} /* ---------- Category / hub layout ---------- */ .cat-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--gap);align-items:start} .cat-children{margin-bottom:2rem} /* same 760px column as .prose, so the buttons line up under the text instead of the page gutter — and left-aligned like it, not centred, or the rule above the buttons floats away from the copy it belongs to */ .cat-cta{display:flex;flex-wrap:wrap;gap:.8rem;max-width:760px;margin:2rem 0 0; padding-top:1.6rem;border-top:1px solid var(--line)} .cat-side{position:sticky;top:96px} .quote-card{background:linear-gradient(160deg,var(--bg-frost),#fff);border:1px solid #d8ebf8;border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm)} .quote-card h3{margin:0 0 .5rem} .quote-card p{color:var(--ink-soft);font-size:.95rem} .quote-phone{margin:.8rem 0 0;font-size:.9rem;text-align:center} @media (max-width:960px){.cat-layout{grid-template-columns:1fr}.cat-side{position:static}.cat-children{grid-template-columns:1fr}} /* ---------- Content banner ---------- */ .content-banner{margin:0 auto;max-width:940px;border-radius:var(--radius-lg);overflow:hidden; box-shadow:var(--shadow);aspect-ratio:21/9;border:6px solid #fff} .content-banner img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:640px){.content-banner{aspect-ratio:16/9}} /* ---------- Category hero (2026, image-led) ---------- */ .cat-hero{position:relative;overflow:hidden; background:radial-gradient(900px 500px at 85% -10%,var(--bg-frost),transparent 60%),linear-gradient(180deg,#fff,var(--bg-tint))} .cat-hero-bg{position:absolute;inset:0;pointer-events:none} .cat-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.5rem); align-items:center;padding-block:var(--space-band)} .cat-hero-copy .crumbs{margin-bottom:1rem} .cat-hero-copy .kicker{margin-top:0} .cat-hero-copy h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:.4rem 0 .7rem} .cat-lead{font-size:clamp(1.08rem,1.8vw,1.28rem);color:var(--ink-soft);max-width:44ch;margin-bottom:1.6rem} .cat-trust{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.2rem} .cat-trust span{font-size:.9rem;color:var(--ink-soft)} .cat-trust strong{font-family:var(--font-head);color:var(--c-accent);font-size:1.15rem} .cat-hero-media{position:relative;justify-self:center;width:100%;max-width:480px} .cat-photo{margin:0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3; border:6px solid #fff;transform:rotate(1.4deg);transition:transform .4s} .cat-hero-media:hover .cat-photo{transform:rotate(0)} .cat-photo img{width:100%;height:100%;object-fit:cover;display:block} .cat-photo-badge{position:absolute;left:-.6rem;bottom:1.2rem;background:#fff;color:var(--c-accent);font-family:var(--font-head); font-weight:600;font-size:.86rem;padding:.55rem 1rem;border-radius:999px;box-shadow:var(--shadow);border:1px solid var(--line)} /* $heroLarge — the photo takes the bigger half and loses the tilt/white frame, so the artwork reads at full size instead of being cropped into a small card. Used on /freezer-labels, where the popsicle shot IS the pitch. */ /* wider than the 1160px container on purpose — this hero is the page. Capped at 1320 so the 1000px-wide source still renders above 1x on a retina screen. */ .cat-hero-grid--lg{max-width:1320px;grid-template-columns:1fr 1.3fr;align-items:center} .cat-hero-media--lg{max-width:100%;justify-self:stretch} .cat-photo--lg{transform:none;border-width:0;border-radius:22px;box-shadow:var(--shadow-lg)} .cat-hero-media--lg:hover .cat-photo--lg{transform:none} @media (max-width:900px){ /* the media column is already order:-1 above; go edge-to-edge inside the gutter */ .cat-hero-grid--lg{grid-template-columns:1fr} .cat-hero-media--lg{max-width:100%} .cat-photo--lg{border-radius:18px} } /* square studio product shot (peptide vials): show the whole bottle, no crop, no tilt */ .cat-photo--product{aspect-ratio:1;transform:none;background:#fff} .cat-photo--product img{object-fit:contain} .cat-hero-media:hover .cat-photo--product{transform:none} /* ---------- How-to steps (the sliced freezer infographic) ---------- Each box is one panel of the original artwork with its heading and copy underneath. The panels are ~3.2:1 strips, so two-up is the widest that keeps them legible; they go full width below 820px. */ .howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,1.8rem)} .howto-step{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s} .howto-step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5e6f3} .howto-media{margin:0;background:var(--bg-frost);line-height:0} /* height:auto — the width/height attributes would otherwise pin it to 374px */ .howto-media img{width:100%;height:auto;display:block} .howto-body{padding:1.3rem 1.5rem 1.6rem} .howto-num{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary);margin-bottom:.35rem} .howto-body h3{margin:0 0 .5rem;font-size:1.18rem} .howto-body p{margin:0;color:#33455a;font-size:.98rem} .howto-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px; margin-bottom:1rem;font-size:1.6rem;background:var(--bg-frost);line-height:1} /* the two "ways to buy" cards are links — keep body colour, not link blue */ a.card.feature{color:var(--ink);display:flex;flex-direction:column;gap:.15rem} a.card.feature:hover{color:var(--ink)} a.card.feature .read-more{margin-top:.7rem} @media (max-width:820px){.howto-grid{grid-template-columns:1fr}} /* ---------- Comparison table (conventional vs freezer labels) ---------- */ .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius); border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)} .cmp-table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:640px} .cmp-table th,.cmp-table td{padding:1rem 1.15rem;text-align:left;vertical-align:top; border-bottom:1px solid var(--line)} .cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0} .cmp-table thead th{font-family:var(--font-head);font-size:.82rem;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-soft);background:var(--bg-tint);border-bottom:1px solid var(--line)} .cmp-table tbody th{font-family:var(--font-head);font-weight:600;color:var(--ink);width:24%} .cmp-table td{color:#33455a} .cmp-table thead .cmp-bad{color:#a3543f} .cmp-table thead .cmp-good{color:var(--c-accent)} .cmp-table tbody td.cmp-good{background:var(--bg-frost)} .cmp-dim{opacity:.7} /* Narrow screens: drop the grid, restack each row as its own labelled card — a 3-column table at 375px is unreadable however much you scroll it. */ @media (max-width:720px){ .cmp-wrap{overflow-x:visible;border:0;background:none;box-shadow:none;border-radius:0} .cmp-table{min-width:0} .cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table th,.cmp-table td{display:block;width:auto} .cmp-table tr{background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm);margin-bottom:1rem;overflow:hidden} .cmp-table tbody th{width:auto;background:var(--bg-tint);font-size:1.02rem;border-bottom:1px solid var(--line)} .cmp-table td{padding-top:.65rem} .cmp-table td::before{content:attr(data-label);display:block;font-family:var(--font-head); font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.25rem} .cmp-table tbody tr:last-child td{border-bottom:0} } /* ---------- Vial gallery (peptide labels) ---------- */ .vial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} .vial-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s} .vial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5e6f3} /* height:auto is required — the width/height attributes on the (there to reserve space and avoid CLS) map to a presentational height:900px that would otherwise beat aspect-ratio and letterbox the vial in a 900px-tall box */ .vial-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;display:block} .vial-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem; padding:.9rem 1.1rem;border-top:1px solid var(--line)} .vial-card figcaption strong{font-family:var(--font-head);font-size:1.02rem;color:var(--ink)} .vial-card figcaption span{font-size:.86rem;color:var(--ink-soft)} @media (max-width:900px){.vial-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.vial-grid{grid-template-columns:1fr}} /* ---------- Review cards (/reviews) ---------- */ /* The 38 testimonials run 93 to 631 characters, so grid rows would be mostly dead space under the short ones. The card is a flex column and .review-by takes margin-top:auto, which pins every attribution to the card foot and turns the ragged gap into deliberate breathing room. */ .review-card{display:flex;flex-direction:column;gap:1rem;padding:1.6rem;margin:0} /* the cards are not links — a wall of 38 tiles lifting under the cursor reads as clickable, so the shared .card hover is switched off here */ .review-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)} .review-quote{margin:0;color:#33455a;font-size:.98rem;line-height:1.62} .review-by{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)} .review-by strong{display:block;font-family:var(--font-head);font-size:1.02rem;color:var(--ink)} .review-by span{font-size:.86rem;color:var(--ink-soft)} .review-stars{display:flex;gap:.15rem} .review-star{width:17px;height:17px;fill:#f2a93b;flex:none} .review-star.is-empty{fill:var(--line)} .review-summary{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap; justify-content:center;margin-bottom:var(--space-head);color:var(--ink-soft)} .review-summary p{margin:0} .review-summary strong{color:var(--ink)} /* ---------- Product formats strip ---------- */ .product-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem} .product-chip{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden; aspect-ratio:1;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s} .product-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .product-chip img{width:100%;height:100%;object-fit:contain;padding:1rem;background:#fff} @media (max-width:900px){ .cat-hero-grid{grid-template-columns:1fr;gap:2rem} .cat-hero-media{order:-1;max-width:420px} .product-strip{grid-template-columns:repeat(3,1fr)} } @media (max-width:560px){ .product-strip{grid-template-columns:repeat(2,1fr)} } /* ---------- Pager ---------- */ .pager{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:3rem} .pager-btn{font-family:var(--font-head);font-weight:600;padding:.6rem 1.2rem;border:1px solid var(--line);border-radius:999px;color:var(--ink)} .pager-btn:hover{border-color:var(--c-primary)} .pager-info{color:var(--ink-soft);font-size:.92rem} /* ---------- CTA ---------- */ .cta{padding-block:var(--space-band-lg);background: radial-gradient(800px 400px at 20% 0%,rgba(43,143,214,.25),transparent 60%), linear-gradient(135deg,var(--c-accent),var(--c-dark));color:#fff;text-align:center} .cta-inner{max-width:640px;margin-inline:auto} .cta h2{color:#fff} .cta p{color:rgba(255,255,255,.82);font-size:1.15rem;margin-bottom:1.8rem} /* ---------- Page hero / prose ---------- */ .page-hero{padding-block:var(--space-band) clamp(1.4rem,2.4vw,2rem); background:linear-gradient(180deg,var(--bg-frost),#fff)} .page-hero--blog{text-align:center} .page-hero h1{margin:.3rem 0 0} /* margin-inline was auto, which centred the lead under a left-aligned h1 — the paragraph started ~200px right of its own heading on every page that sets one (/contact, /freezer-labels-how-to). Only the centred blog hero wants auto. */ .page-hero-lead{color:var(--ink-soft);font-size:1.15rem;max-width:60ch;margin:.8rem 0 0} /* the "prefer to talk? call us" line under a form lead — a step quieter than the lead itself so it reads as an aside, but the number still has to be tappable */ .page-hero-note{color:var(--ink-soft);font-size:1rem;max-width:60ch;margin:.7rem 0 0} .page-hero-note a{color:var(--c-accent);text-decoration:none} .page-hero-note a:hover{color:var(--c-primary);text-decoration:underline} .page-hero--blog .page-hero-lead{margin-inline:auto} .crumbs{font-size:.9rem;color:var(--ink-soft);margin-bottom:.4rem;display:flex;gap:.5rem;flex-wrap:wrap} .crumbs span{opacity:.6} .prose{max-width:760px;font-size:1.08rem;color:var(--ink)} /* A .container that is ALSO .prose (the guide/legal/FAQ body) took max-width:760px from .prose and margin-inline:auto from .container, so the copy centred itself in the window while the

above it stayed on the container's left edge — about 170px apart at 1536px, which reads as a broken layout with a wide empty gutter on the left. Keep the 760px reading measure, but hang it off the children so the column starts exactly where the heading starts. */ .container.prose{max-width:var(--container)} .container.prose>*{max-width:760px} .prose h2{margin-top:2.2rem} .prose h3{margin-top:1.8rem} .prose p{color:#33455a} .prose img{border-radius:var(--radius);margin:1.5rem 0;box-shadow:var(--shadow-sm);max-width:100%;height:auto} .prose iframe,.prose video,.prose table{max-width:100%} /* WordPress pasted its YouTube players in as a fixed 560x315