/* ===================================================================== AOC — DENSITY & SCALE LAYER (v8.5.0) Client brief: "too much white space, fonts too small, logo too small — make it look filled and premium." Everything here is driven by four variables so the whole site can be re-dialled from Settings → AOC Density without another release: --k type scale (1 = original 8.4.3 sizing) --ks space scale (1 = original; lower = tighter) --kl logo scale (1 = original 32px mark) --maxw content width Loaded AFTER aoc-brand.css, so equal-specificity rules win on order. Brand tokens (colours, families, radius, pill) are untouched. ===================================================================== */ .aoc-scope{ --k:1.12; --ks:.74; --ksm:1; --kl:1.32; --maxw:1280px; } /* --------------------------------------------------------------- 1. BASE TYPE — lift the whole system off a single scale factor --------------------------------------------------------------- */ .aoc-scope{ font-size:calc(15px * var(--k)); line-height:1.55; } .aoc-scope .eyebrow{ font-size:calc(11px * var(--k)); } .aoc-scope .btn{ font-size:calc(14.5px * var(--k)); padding:calc(13px * var(--k)) calc(24px * var(--k)); } .aoc-scope .btn-lg{ font-size:calc(15.5px * var(--k)); padding:calc(15px * var(--k)) calc(28px * var(--k)); } .aoc-scope .link{ font-size:calc(13px * var(--k)); } /* headings — grow the floor faster than the ceiling so small screens gain the most (that's where "too small" is felt hardest) */ .aoc-scope .sh h2{ font-size:clamp(calc(24px * var(--k)),3.5vw,calc(36px * var(--k))); } .aoc-scope .hero h1{ font-size:clamp(calc(36px * var(--k)),5.9vw,calc(64px * var(--k))); } .aoc-scope .pp-info h1{ font-size:clamp(calc(26px * var(--k)),3.7vw,calc(38px * var(--k))); } .aoc-scope .pd-cols h3{ font-size:calc(20px * var(--k)); } .aoc-scope .step h4{ font-size:calc(17px * var(--k)); } .aoc-scope .qpanel h3{ font-size:calc(19px * var(--k)); } .aoc-scope .co-card h3{ font-size:calc(17px * var(--k)); } .aoc-scope .summary h3{ font-size:calc(16px * var(--k)); } .aoc-scope .cd-head h3{ font-size:calc(18px * var(--k)); } .aoc-scope .fin h3{ font-size:calc(16px * var(--k)); } .aoc-scope .sc-body h3{ font-size:clamp(calc(20px * var(--k)),2.7vw,calc(26px * var(--k))); } /* body / UI text */ .aoc-scope .sh .lead{ font-size:calc(14.5px * var(--k)); max-width:46ch; } .aoc-scope .hero .sub{ font-size:clamp(calc(15.5px * var(--k)),1.8vw,calc(18px * var(--k))); max-width:48ch; } .aoc-scope .hero-note{ font-size:calc(11.5px * var(--k)); } .aoc-scope .step p{ font-size:calc(14px * var(--k)); } .aoc-scope .trust-in{ font-size:calc(12px * var(--k)); } .aoc-scope .biz p{ font-size:calc(14.5px * var(--k)); } .aoc-scope .biz-r .row{ font-size:calc(12.5px * var(--k)); } .aoc-scope .bizstrip p{ font-size:calc(14px * var(--k)); } .aoc-scope .pp-desc{ font-size:calc(15px * var(--k)); max-width:52ch; } .aoc-scope .pp-madeorder{ font-size:calc(12.5px * var(--k)); } .aoc-scope .pd-ship .r{ font-size:calc(13px * var(--k)); } .aoc-scope .spec{ font-size:calc(13px * var(--k)); } .aoc-scope .rev p{ font-size:calc(13.5px * var(--k)); } .aoc-scope .rev .who{ font-size:calc(14px * var(--k)); } .aoc-scope .qpanel p{ font-size:calc(13.5px * var(--k)); } .aoc-scope .tiers .t{ font-size:calc(13px * var(--k)); } .aoc-scope .cd-corp p,.aoc-scope .cd-corp .clist{ font-size:calc(14px * var(--k)); } /* product tiles — the densest, most-scanned text on the site */ .aoc-scope .pname{ font-size:calc(14.5px * var(--k)); } .aoc-scope .ptheme{ font-size:calc(10.5px * var(--k)); } .aoc-scope .pfrom{ font-size:calc(13.5px * var(--k)); } .aoc-scope .pbadge{ font-size:calc(9px * var(--k)); } .aoc-scope .cat .cn{ font-size:calc(15px * var(--k)); } .aoc-scope .cat .ck{ font-size:calc(11px * var(--k)); } .aoc-scope .ncard .nn{ font-size:calc(14.5px * var(--k)); } .aoc-scope .ncard .nc{ font-size:calc(10px * var(--k)); } .aoc-scope .ncard .nr{ font-size:calc(13px * var(--k)); } .aoc-scope .st-tile .sn{ font-size:calc(14px * var(--k)); } .aoc-scope .st-tile .sp{ font-size:calc(12.5px * var(--k)); } .aoc-scope .pr-card .pn{ font-size:calc(14px * var(--k)); } .aoc-scope .pr-card .pp2{ font-size:calc(12.5px * var(--k)); } .aoc-scope .ac-item .an{ font-size:calc(15px * var(--k)); } .aoc-scope .ac-item .ap{ font-size:calc(13.5px * var(--k)); } /* forms, cart, checkout */ .aoc-scope .field input,.aoc-scope .field select,.aoc-scope .field textarea{ font-size:calc(14px * var(--k)); padding:calc(11px * var(--k)) calc(13px * var(--k)); } .aoc-scope .field label{ font-size:calc(10.5px * var(--k)); } .aoc-scope .selc{ font-size:calc(14px * var(--k)); } .aoc-scope .pills button{ font-size:calc(13.5px * var(--k)); padding:calc(9px * var(--k)) calc(15px * var(--k)); } .aoc-scope .ci-name{ font-size:calc(14px * var(--k)); } .aoc-scope .ci-price{ font-size:calc(13.5px * var(--k)); } .aoc-scope .ci-opt{ font-size:calc(10.5px * var(--k)); } .aoc-scope .sum-line{ font-size:calc(13.5px * var(--k)); } .aoc-scope .sum-line.tot{ font-size:calc(17px * var(--k)); } .aoc-scope .pay label{ font-size:calc(14px * var(--k)); } .aoc-scope .cd-sub{ font-size:calc(17px * var(--k)); } /* footer */ .aoc-scope .foot li{ font-size:calc(13.5px * var(--k)); margin-bottom:calc(9px * var(--ks) * var(--ksm) * 1.15); } .aoc-scope .foot .bl{ font-size:calc(13.5px * var(--k)); max-width:32ch; } .aoc-scope .foot h4{ font-size:calc(10px * var(--k)); } .aoc-scope .foot-bot{ font-size:calc(11px * var(--k)); } /* --------------------------------------------------------------- 2. LOGO — client called this out directly --------------------------------------------------------------- */ .aoc-scope .logo{ gap:calc(10px * var(--kl)); } .aoc-scope .logo .mk{ width:calc(32px * var(--kl)); height:calc(32px * var(--kl)); border-radius:calc(8px * var(--kl)); } .aoc-scope .logo .mk::before{ width:calc(16px * var(--kl)); height:1.5px; } .aoc-scope .logo .mk::after{ width:1.5px; height:calc(16px * var(--kl)); } .aoc-scope .logo .mk i{ width:calc(8px * var(--kl)); height:calc(8px * var(--kl)); } .aoc-scope .logo .wm{ font-size:calc(17px * var(--kl)); } .aoc-scope .logo .wm small{ font-size:calc(8px * var(--kl)); margin-top:calc(3px * var(--kl)); } /* --------------------------------------------------------------- 3. WHITESPACE — tighten the vertical rhythm, widen the canvas. This is what actually makes the page read as "filled". --------------------------------------------------------------- */ /* IMPORTANT: vertical padding only. These used the `padding` shorthand with 0 for the sides. Every one of these elements ALSO carries .wrap, whose `padding:0 var(--pad)` gives the page its side gutter — and because this file loads after aoc-brand.css, the shorthand was resetting that gutter to zero. On a wide screen the max-width centring hid it; on a phone there is no spare width, so hero text sat flush against both edges of the screen. Setting only the block axis leaves --pad intact. */ .aoc-scope .sec{ padding-block:calc(clamp(46px,7vw,80px) * var(--ks) * var(--ksm)); } .aoc-scope .sh{ margin-bottom:calc(clamp(22px,4vw,34px) * var(--ks) * var(--ksm)); } .aoc-scope .hero{ padding-top:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)); padding-bottom:calc(clamp(40px,6vw,66px) * var(--ks) * var(--ksm)); } .aoc-scope .sg-hero{ padding-block:calc(clamp(40px,6vw,72px) * var(--ks) * var(--ksm)); } .aoc-scope .st-hero{ padding-top:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)); padding-bottom:calc(clamp(20px,3vw,30px) * var(--ks) * var(--ksm)); } .aoc-scope .dc-hero,.aoc-scope .wa-hero{ padding-block:calc(clamp(30px,4vw,50px) * var(--ks) * var(--ksm)); } .aoc-scope .cd-hero,.aoc-scope .uv-hero{ padding-block:calc(clamp(30px,4vw,52px) * var(--ks) * var(--ksm)); } .aoc-scope .ac-hero{ padding-block:calc(clamp(36px,5vw,64px) * var(--ks) * var(--ksm)); } .aoc-scope .pr-hero{ padding-block:calc(clamp(34px,5vw,60px) * var(--ks) * var(--ksm)); } .aoc-scope .pp{ padding-top:calc(clamp(18px,3vw,28px) * var(--ks) * var(--ksm)); padding-bottom:calc(clamp(40px,6vw,68px) * var(--ks) * var(--ksm)); } .aoc-scope .pd-cols{ padding-top:calc(clamp(36px,5vw,58px) * var(--ks) * var(--ksm)); margin-top:calc(clamp(18px,3.5vw,36px) * var(--ks) * var(--ksm)); } .aoc-scope .foot-top{ padding:calc(clamp(40px,5vw,56px) * var(--ks) * var(--ksm)) var(--pad) calc(32px * var(--ks) * var(--ksm)); } .aoc-scope .formpage{ padding:calc(clamp(24px,4vw,44px) * var(--ks) * var(--ksm)) var(--pad) calc(80px * var(--ks) * var(--ksm)); } /* denser grids — more product per screen, less dead gutter */ .aoc-scope .pgrid{ gap:calc(16px * var(--ks) * var(--ksm) * 1.15); } .aoc-scope .cats{ gap:calc(14px * var(--ks) * var(--ksm) * 1.15); } .aoc-scope .cat{ padding:calc(22px * var(--ks) * var(--ksm) * 1.2) calc(20px * var(--ks) * var(--ksm) * 1.2); min-height:calc(150px * var(--ks) * var(--ksm) * 1.12); } .aoc-scope .pbody{ padding:calc(14px * var(--ks) * var(--ksm) * 1.2) calc(15px * var(--ks) * var(--ksm) * 1.2) calc(16px * var(--ks) * var(--ksm) * 1.2); } .aoc-scope .st-grid{ gap:calc(18px * var(--ks) * var(--ksm) * 1.15); } /* wider canvas — 1280 fills a laptop screen without breaking the 1180 reading measure on text blocks (those are capped in ch above) */ .aoc-scope .wrap,.aoc-scope .head-in,.aoc-scope .trust-in, .aoc-scope .foot-top,.aoc-scope .foot-bot,.aoc-scope .crumb, .aoc-scope .pd-lower,.aoc-scope .aoc-account-page{ max-width:var(--maxw); } /* header sits taller to carry the bigger logo */ .aoc-scope .head-in{ padding-top:calc(12px * var(--kl) * .9); padding-bottom:calc(12px * var(--kl) * .9); } .aoc-scope .nav a{ font-size:calc(14px * var(--k)); padding:calc(9px * var(--k)) calc(12px * var(--k)); } /* --------------------------------------------------------------- 4. MOBILE — keep the type gain, drop the width gain --------------------------------------------------------------- */ @media(max-width:900px){ .aoc-scope .logo .wm{ font-size:calc(16px * var(--kl)); } } @media(max-width:620px){ .aoc-scope{ font-size:calc(14.5px * var(--k)); } /* on phones the page is already full-bleed — restore a little air so it doesn't read as cramped */ .aoc-scope{ --ksm:1.04; } .aoc-scope .logo .mk{ width:calc(32px * var(--kl) * .88); height:calc(32px * var(--kl) * .88); } } /* ===================================================================== HYBRID MEGA MENU (v8.5.0) Level 1 nav bar + body-level floating panel. The panel is moved to by aoc.js so no Elementor overflow:hidden ancestor can clip it. ===================================================================== */ /* ---- level 1 bar ---- */ .aoc-scope .aoc-wpnav-ul{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:2px; flex-wrap:wrap; } .aoc-scope .aoc-wpnav-ul .aoc-l1{ list-style:none; margin:0; position:relative; } .aoc-scope .aoc-wpnav-ul .aoc-l1 > a{ display:flex; align-items:center; gap:6px; font-size:calc(14px * var(--k)); font-weight:600; color:var(--ink-2); padding:calc(11px * var(--k)) calc(13px * var(--k)); border-bottom:2.5px solid transparent; white-space:nowrap; transition:.14s; } .aoc-scope .aoc-wpnav-ul .aoc-l1 > a:hover, .aoc-scope .aoc-wpnav-ul .aoc-l1.aoc-open > a{ color:var(--a2); border-bottom-color:var(--a2); } .aoc-scope .aoc-chev{ width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.5; } .aoc-scope.aoc-dark .aoc-wpnav-ul .aoc-l1 > a{ color:#CFC9BE; } /* ---- mega menu ---- The whole floating-panel stylesheet that used to live here has been removed in 9.8.2. It was written for the old single-panel menu and, because this file loads AFTER aoc-brand.css, it was silently overriding the current one. Two rules in particular were breaking multi-column menus: .aoc-scope .aoc-mega{ display:none; } -> killed the in-place CSS fallback, so the panel only ever worked once JavaScript had run. .aoc-mega-pop .aoc-mega-in{ grid-template-columns:repeat(var(--mg-cols,4),minmax(180px,1fr)); } -> turned the plain list's wrapper into a 2-column grid, then the list inside it split into 2 more columns, inside a panel capped at 300px. That is why "Half Circle Side Business Cards" wrapped to one word per line. aoc-brand.css now owns the mega menu completely. Density still controls type and spacing scale through --k / --ks, which the menu picks up normally. */ /* ---- mobile drawer: 3-level accordion ---- */ .aoc-scope .aoc-wpnav-drawer ul{ list-style:none; margin:0; padding:0; } .aoc-scope .aoc-wpnav-drawer li{ list-style:none; position:relative; } .aoc-scope .aoc-wpnav-drawer > ul > li > a{ font-size:calc(15.5px * var(--k)); font-weight:600; } .aoc-scope .aoc-wpnav-drawer a{ display:block; padding:11px 34px 11px 10px; border-radius:9px; color:var(--ink-2); } .aoc-scope .aoc-wpnav-drawer a:hover{ background:var(--paper-2); } .aoc-scope .aoc-wpnav-drawer ul ul{ display:none; padding-left:12px; border-left:2px solid var(--line); margin:2px 0 2px 10px; } .aoc-scope .aoc-wpnav-drawer li.open > ul{ display:block; } .aoc-scope .aoc-wpnav-drawer ul ul a{ font-size:calc(13.5px * var(--k)); font-weight:500; color:var(--muted); } .aoc-scope .dsub-toggle{ position:absolute; top:4px; right:2px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--muted); border-radius:8px; z-index:2; } .aoc-scope .dsub-toggle:hover{ background:var(--paper-2); color:var(--ink); } /* ---- phone header ------------------------------------------------------ --kl scales the logo 32% up, which is right on a desktop and far too big on a phone: it left no room for search / cart / menu and pushed them onto a second row. Dropping --kl on small screens rescales the mark, the wordmark and their gaps together, rather than fighting each rule individually. */ @media(max-width:620px){ .aoc-scope{ --kl:0.98; } .aoc-scope .logo .wm{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .aoc-scope .logo .wm small{ display:none; } } @media(max-width:430px){ .aoc-scope{ --kl:0.9; } } /* ---- phone type caps ----------------------------------------------------- The three headings re-declared above scale with --k, which was tuned on a desktop: at 390px they come out far larger than the layout can carry. These cap them on small screens. They are here rather than in aoc-brand.css because this file loads last and would otherwise win. */ @media(max-width:620px){ .aoc-scope .sh h2{ font-size:clamp(20px,5.6vw,25px); } .aoc-scope .hero h1{ font-size:clamp(30px,8.4vw,40px); } .aoc-scope .pp-info h1{ font-size:clamp(21px,6vw,26px); } } @media(max-width:430px){ .aoc-scope .sh h2{ font-size:clamp(19px,5.8vw,23px); } .aoc-scope .hero h1{ font-size:clamp(27px,8.6vw,34px); } .aoc-scope .pp-info h1{ font-size:clamp(20px,6vw,24px); } }