/* =========================================================================== Clarify Kitchen - site-wide theme Brings every page that still uses the Wix header/footer into line with the 2026 homepage design (which is a custom element and carries its own styling). WHERE THIS LIVES IN WIX NOT in the Velo CSS panel - that section does not exist in this site's code panel (checked 2026-09-08). It is served from Cloudflare and loaded by a Custom Code snippet on every page: Dashboard > Settings > Custom Code (URL: /dashboard//code-embed) snippet "Clarify Kitchen site theme (CSS)", head, all pages, Essential: Deploy with redesign/deploy.sh (see DEPLOY.md). Do not paste this into Velo as well: a second copy with different load timing defeats the themeLoaded() gate in site-theme.js. MAINTENANCE WARNING Wix component IDs (#comp-xxxx) are stable across publishes - safe to target. Wix's utility CLASS names (.sNp9JN etc) are hashed and DO change - never target those. Every selector below is keyed to an ID or a real HTML tag. Source of truth for this file: redesign/site-css/global.css =========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap"); /* A metric-matched stand-in for Nunito Sans. The Google Fonts CSS is served with display=swap, so text paints in the system face first and then re-lays-out when the real font lands - four small shifts on the homepage, and the same jump on every Wix page. Matching the metrics removes the reflow without hiding the text (font-display:optional would, at the cost of most visitors never seeing the brand face at all). Measured in Chrome 2026-09-09: a mixed sample string is 1.0102x wider in Nunito Sans than in Arial/Helvetica, and Nunito's ascent+descent is 1.364em against Arial's 1.15em. The overrides are expressed against the size-adjusted em, per CSS Fonts 5: ascent 1.011/1.0102, descent 0.353/1.0102. Keep this in step with the copy inside customel/build_element.py, which injects the identical face for the homepage element and the test harness. */ @font-face { font-family: 'Nunito Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 101.02%; ascent-override: 100.08%; descent-override: 34.94%; line-gap-override: 0%; } :root { --ck-charcoal: #2E2A28; --ck-stone: #6E6862; --ck-sand: #E3D3C6; --ck-caramel: #CE8134; --ck-caramel-text: #96551A; /* caramel that passes AA on white */ --ck-font: 'Nunito Sans', 'Nunito Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- 0. THE HOMEPAGE CUSTOM ELEMENT - reserving its box before first paint --------------------------------------------------------------------------- The homepage is one Wix Custom Element. Until its script has loaded and run, Wix lays the placeholder out where the editor left it: on desktop a 636px column, 1412px down the page (the offset is a plain margin on the wrapper); on the mobile document a 280px box 169px tall. The element's own _place() and _fit() then move it to full-bleed at the top and size it to its content - and THAT is the layout shift. PSI desktop measured CLS 2.006 (2026-09-09): the whole viewport's worth of content arriving where there had been nothing. The fix is to say the same thing declaratively, from a stylesheet that is a render-blocking in , so the box is already correct at first paint and the script's later pass changes nothing. Measured after: desktop CLS 2.006 -> 0.01, emulated mobile 0.236 -> 0.12. The script still owns the exact heights (it writes them inline with !important, which beats these rules) - this is the pre-JS floor, not a replacement for it. Ids: #comp-mtrp9hd3 is the element's wrapper and #comp-mtqlpscf its section, and both carry the same ids in the desktop and the mobile document (verified 2026-09-09). They exist only on the homepage. --------------------------------------------------------------------------- */ wix-default-custom-element:not(:defined) { display: block !important; width: 100% !important; /* at least a viewport tall, at any width, so the wrapper's on-screen rectangle is the same before and after the element renders */ min-height: 100vh !important; } #comp-mtrp9hd3 { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; left: 0 !important; right: auto !important; top: 0 !important; position: relative !important; transform: none !important; } [data-mesh-id="comp-mtqlpscfinlineContent-gridContainer"] { grid-template-rows: auto !important; height: auto !important; min-height: 0 !important; } [data-mesh-id="comp-mtqlpscfinlineContent"], #comp-mtqlpscf { height: auto !important; min-height: 0 !important; } /* If the element's script never upgrades the placeholder - a crawler that skips it, a CDN failure, a blocker - the browser shows the light-DOM seoMarkup Velo put inside the tag: the real copy, with every style attribute stripped out. Googlebot's rendered screenshot was exactly this (GSC live test, 2026-09-09): Times New Roman on white with blue underlined links. Give that fallback the brand's type and spacing so the page still reads as Clarify Kitchen. Scoped to :not(:defined), so it can never touch what real visitors see. */ wix-default-custom-element:not(:defined) { font-family: var(--ck-font); color: var(--ck-charcoal); max-width: 1360px; margin: 0 auto !important; padding: 32px 20px !important; font-size: 17px; line-height: 1.7; } wix-default-custom-element:not(:defined) h1, wix-default-custom-element:not(:defined) h2, wix-default-custom-element:not(:defined) h3 { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-charcoal); line-height: 1.3; } wix-default-custom-element:not(:defined) h1 { font-size: 34px; margin: 0 0 20px; } wix-default-custom-element:not(:defined) h2 { font-size: 20px; margin: 40px 0 12px; } wix-default-custom-element:not(:defined) a { color: var(--ck-caramel-text); } wix-default-custom-element:not(:defined) nav a { margin-right: 20px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; } wix-default-custom-element:not(:defined) header { border-bottom: 1px solid var(--ck-sand); padding-bottom: 20px; margin-bottom: 28px; display: block; } wix-default-custom-element:not(:defined) footer { border-top: 1px solid var(--ck-sand); margin-top: 48px; padding-top: 24px; font-size: 15px; } wix-default-custom-element:not(:defined) img { display: block; max-width: min(100%, 720px); height: auto; margin: 18px 0; } /* the apron lockup, in the header and again in the hero. The SEO markup keeps only src and alt, so the alt text is the only handle on it. */ wix-default-custom-element:not(:defined) img[alt="Clarify Kitchen"] { width: 56px; margin: 0 0 10px; } /* the skip link stays a skip link here: off screen until it is focused */ wix-default-custom-element:not(:defined) a[href="#ck-main"] { position: absolute; left: -9999px; } wix-default-custom-element:not(:defined) a[href="#ck-main"]:focus { position: static; left: auto; } /* --------------------------------------------------------------------------- 1. HEADER The homepage has no header (it is a landing-page layout). Every other page still uses SITE_HEADER, so this is what visitors see on About, Summer Camps, the Bookings pages and the Events pages. TWO DOCUMENTS, NOT TWO WIDTHS (rewritten 2026-09-08 after code review) Wix serves a DIFFERENT DOCUMENT on phones, chosen by User-Agent, with different component ids and a grid header instead of the absolute one. Earlier versions of this file switched the header rules on viewport width (@media 900px), which is the wrong axis: a phone held sideways (926-932px) still gets the mobile document but was getting the desktop rules, and an iPad (768-834px) gets the desktop document but was getting the mobile rules. Both rendered a broken header. So every rule that touches header GEOMETRY is now keyed on which document is present, using an id that exists only in that document: desktop document #SITE_HEADER:has(#comp-k7j5lrt4) mobile document #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) The only width-dependent choice left is whether #ck-nav shows the link row or the hamburger, and that is a class the script sets (section 1d). THE iPAD CASE IS ONLY HALF SOLVED BY THAT. iPadOS reports a Macintosh UA, so an iPad gets the desktop document, and that document is 980px wide (#site-root min-width, no scaling). In portrait (768-834px) the viewport is narrower than the header, and a bar anchored "40px from the right of the header" sits at x 740-940: mostly off screen until the reader scrolls sideways. The desktop #ck-nav rule below therefore anchors to the VISIBLE edge when the viewport is narrower than the header: right: max(40px, calc(100% - 100vw + 40px)) 100% is the header (980px), 100vw the viewport; on a desktop wider than 980px the calc goes negative and the plain 40px wins. Verified against the live desktop document 2026-09-09. THE ID MAP - verified 2026-09-08 by fetching /event-list with both UAs: element desktop mobile BusyButternut logo #comp-mkaetf9a #comp-mkaein0t header wrappers #comp-k7j5lrt4/lrv3 (grid, no equivalent) Wix menu #comp-k7j7ai45 #MENU_AS_CONTAINER_TOGGLE + #MENU_AS_CONTAINER (inside SITE_HEADER, after inlineContent) cart #comp-mlhgt7g7 #comp-mlhgt7g7 (same) CK apron #comp-mk4rw7zh #comp-mk4rw7zh (same) tagline (does not exist) #comp-l42cvm5y --------------------------------------------------------------------------- */ /* BRAND RULE: Betty Butternut / the BusyButternut mascot must never share a surface with the Clarify Kitchen apron mark. The header had both side by side. Hide the BusyButternut lockup; CK is "the room", it stands alone. Unconditional on purpose - this is a brand rule, not part of the nav swap. */ #comp-mkaetf9a, #comp-mkaein0t { display: none !important; } #SITE_HEADER { border-bottom: 1px solid var(--ck-sand) !important; } /* Wix's own menu, cart and mobile hamburger are REPLACED by #ck-nav, which site-theme.js builds. They are hidden only while #ck-nav is actually in the header, so if the script ever fails to load (CDN outage, consent blocker, bad deploy) Wix's menu comes straight back and the site is never left with no navigation at all. The :has() test is what makes that fallback real. */ body:has(#SITE_HEADER > #ck-nav) #comp-k7j7ai45, body:has(#SITE_HEADER > #ck-nav) #comp-mlhgt7g7, body:has(#SITE_HEADER > #ck-nav) #MENU_AS_CONTAINER_TOGGLE, body:has(#SITE_HEADER > #ck-nav) #MENU_AS_CONTAINER { display: none !important; } /* --- 1a. DESKTOP DOCUMENT geometry -------------------------------------- */ /* The header was 230px tall with roughly 100px of dead space under the logo. #ck-nav is a direct div child of SITE_HEADER, so "#SITE_HEADER > div" would match it too; hence :not(#ck-nav). */ #SITE_HEADER:has(#comp-k7j5lrt4), #SITE_HEADER:has(#comp-k7j5lrt4) > div:not(#ck-nav), #SITE_HEADER:has(#comp-k7j5lrt4) > div:not(#ck-nav) > div, #SITE_HEADER:has(#comp-k7j5lrt4) #comp-k7j5lrt4, #SITE_HEADER:has(#comp-k7j5lrt4) #comp-k7j5lrv3 { height: 94px !important; min-height: 94px !important; } #SITE_HEADER:has(#comp-k7j5lrt4) #comp-k7j5lrt4, #SITE_HEADER:has(#comp-k7j5lrt4) #comp-k7j5lrv3 { top: 0 !important; } /* CK apron lockup, left aligned and vertically centred */ #SITE_HEADER:has(#comp-k7j5lrt4) #comp-mk4rw7zh { height: 62px !important; width: 150px !important; top: 16px !important; left: 40px !important; } #SITE_HEADER:has(#comp-k7j5lrt4) #comp-mk4rw7zh img { height: 62px !important; width: 150px !important; object-fit: contain !important; object-position: left center !important; } /* the bar sits on the right of the 94px band - or 40px inside the VIEWPORT's right edge when the viewport is narrower than the 980px document (iPad portrait); see the header comment. */ #SITE_HEADER:has(#comp-k7j5lrt4) > #ck-nav { right: 40px; right: max(40px, calc(100% - 100vw + 40px)); top: 0; height: 94px; } /* --- 1b. MOBILE DOCUMENT geometry --------------------------------------- */ /* The mobile header is a CSS GRID (grid-area: 3 / 1 / 4 / 2 on the tagline). Flatten it to a flex column and lay the surviving pieces out explicitly. The mobile DOM order is toggle, tagline, apron, so a plain block stack puts the tagline on top and the bar lands on it: row 1 is the apron plus the bar, row 2 the tagline. */ #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #FFFFFF !important; } #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) [data-mesh-id="SITE_HEADERinlineContent"] { display: block !important; height: auto !important; min-height: 0 !important; } #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] { display: flex !important; flex-direction: column !important; align-items: flex-start !important; height: auto !important; min-height: 0 !important; position: relative !important; padding: 10px 16px 12px !important; } /* The apron shares its id across both documents, so the desktop absolute positioning must be explicitly undone here. */ /* The mobile document serves a different CROP of the lockup than desktop: a near-square 908x1024 cut (apron above the wordmark) with object-fit:cover. Forcing that into a 120x46 landscape box cut "KITCHEN" clean off (Greg's phone screenshot, 2026-09-09). The box now matches the image's own shape and the image is contained, never cropped; Wix's editor mask is cleared for the same reason. The bar below is re-centred on the taller row. */ #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) #comp-mk4rw7zh { position: static !important; display: block !important; order: 1; align-self: flex-start !important; width: 64px !important; height: 72px !important; top: auto !important; left: auto !important; margin: 0 !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) #comp-mk4rw7zh a, #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) #comp-mk4rw7zh img { display: block !important; width: 64px !important; height: 72px !important; object-fit: contain !important; object-position: left top !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Cindy's mobile-only tagline. Kept - it is her copy, not header chrome. Moved below the bar and centred so it cannot collide with the page title. */ #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) #comp-l42cvm5y { position: static !important; display: block !important; order: 2; grid-area: auto !important; margin: 10px 0 0 !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; text-align: center !important; } #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) #comp-l42cvm5y * { font-size: 13px !important; line-height: 1.4 !important; } /* the bar, vertically centred on the 72px logo row (10px padding + 13px) */ #SITE_HEADER:has(#MENU_AS_CONTAINER_TOGGLE) > #ck-nav { top: 23px; right: 12px; height: 46px; } /* --------------------------------------------------------------------------- 1c. THE SHARED HEADER NAV (built by site-theme.js as #ck-nav) Values are copied from the header inside the custom element so the two match: links 12px / 600 / 2.64px tracking, CTA 11px / 800 / 0.88px, 26px gap. Position within the header is set per document above; everything here is the same in both. --------------------------------------------------------------------------- */ #ck-nav { position: absolute !important; display: flex !important; align-items: center; gap: 26px; z-index: 5; } #ck-nav nav { position: relative; display: flex; align-items: center; gap: 26px; } #ck-nav .ck-nav-link { font-family: var(--ck-font) !important; font-size: 12px; font-weight: 600; letter-spacing: 2.64px; text-transform: uppercase; color: var(--ck-charcoal); text-decoration: none; padding: 0 0 4px; white-space: nowrap; transition: color .18s ease; } #ck-nav .ck-nav-link:hover, #ck-nav .ck-nav-link[data-current="true"] { color: var(--ck-caramel-text); } /* the sliding rule */ #ck-nav .ck-nav-rule { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--ck-caramel); opacity: 0; transition: transform .22s ease, width .22s ease, opacity .18s ease; pointer-events: none; } /* 12px text in a 40px-high button. It was 11px in a 35px button on desktop and 10px in a 32px one on phones - under every tap-target guideline on the page that carries 64% of the traffic (audit 2026-09-09 #7/#18). */ #ck-nav .ck-nav-cta { font-family: var(--ck-font) !important; font-size: 12px; font-weight: 800; letter-spacing: .88px; text-transform: uppercase; color: #FFFFFF; background: var(--ck-charcoal); padding: 0 18px; display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; white-space: nowrap; transition: background .18s ease; } #ck-nav .ck-nav-cta:hover { background: var(--ck-caramel-text); } /* The hamburger exists in the DOM at all widths; it is only ever shown when the row does not fit. */ #ck-nav .ck-nav-toggle { display: none; } /* --- 1d. COLLAPSED NAV: the link row folds into the hamburger --------------- site-theme.js sets .ck-collapsed on #ck-nav when EITHER - the viewport is 900px or narrower (an iPad on the desktop document), or - the header is the mobile document, whose content column is a fixed 320px wide, so the row can never fit there at any width (a phone held sideways is the case that proved it, 2026-09-08). The script owns the class because it owns the nav; both tests live there, next to the resize handling that closes the menu and hides the slider. */ #ck-nav.ck-collapsed { gap: 10px !important; } #ck-nav.ck-collapsed .ck-nav-cta { font-size: 12px; padding: 0 14px; min-height: 44px; } /* At 320px (the width Wix lays the mobile document out at) "CALL (630) 338-5447" at a legible size no longer fits beside the logo and the hamburger. Drop the word, keep the number - site-theme.js wraps it in .ck-cta-word for this. */ @media (max-width: 640px) { #ck-nav .ck-cta-word { display: none; } } #ck-nav.ck-collapsed .ck-nav-toggle { display: flex !important; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 9px; background: none; border: 1px solid var(--ck-sand); cursor: pointer; box-sizing: border-box; } #ck-nav.ck-collapsed .ck-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ck-charcoal); transition: transform .18s ease, opacity .18s ease; } #ck-nav.ck-open .ck-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #ck-nav.ck-open .ck-nav-toggle span:nth-child(2) { opacity: 0; } #ck-nav.ck-open .ck-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* The dropdown. position:fixed so a clipping ancestor cannot cut it off; its top is set by the script from the header's real measured bottom edge. */ #ck-nav.ck-collapsed nav { display: none; position: fixed !important; left: 0; right: 0; top: 0; flex-direction: column; align-items: stretch; gap: 0; background: #FFFFFF; border-top: 1px solid var(--ck-sand); border-bottom: 1px solid var(--ck-sand); padding: 4px 0; z-index: 9999; box-shadow: 0 12px 24px rgba(46, 42, 40, .10); } #ck-nav.ck-collapsed.ck-open nav { display: flex !important; } #ck-nav.ck-collapsed nav .ck-nav-link { padding: 15px 20px !important; font-size: 13px; letter-spacing: 2px; border-bottom: 1px solid rgba(227, 211, 198, .5); } #ck-nav.ck-collapsed nav .ck-nav-link:last-of-type { border-bottom: none; } #ck-nav.ck-collapsed .ck-nav-rule { display: none !important; } /* slider is row-only */ /* --------------------------------------------------------------------------- 2. EVENTS - the month grid The calendar led the page showing an entirely empty month, which reads as "nothing happens here". Rather than delete it, hide it ONLY while it has no events in view. The :has() test means it brings itself back automatically the moment Cindy publishes an event in the displayed month - no code change. --------------------------------------------------------------------------- */ #comp-mlhn877k:not(:has(a[href*="event-details"])) { display: none !important; } /* --------------------------------------------------------------------------- 3. EVENTS - the upcoming list --------------------------------------------------------------------------- */ #comp-mk4wkrt9 h1, #comp-mk4wkrt9 h2, #comp-mk4wkrt9 h3, #comp-mk4wkrt9 h4, #comp-mk4wkrt9 p, #comp-mk4wkrt9 a, #comp-mk4wkrt9 span, #comp-mk4wkrt9 div, #comp-mk4wkrt9 button { font-family: var(--ck-font) !important; } #comp-mk4wkrt9 h1, #comp-mk4wkrt9 h2, #comp-mk4wkrt9 h3 { color: var(--ck-charcoal) !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* Square charcoal CTA, to match the homepage's CHECK DATES button. The Buy Tickets link is the inside the card's last block. Addressed by structure + href, never by Wix's hashed button class. */ #comp-mk4wkrt9 li > div > div > div:last-child a[href*="event-details"] { background: var(--ck-charcoal) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: .1em !important; font-weight: 600 !important; font-size: 12px !important; padding: 14px 28px !important; } #comp-mk4wkrt9 li > div > div > div:last-child a[href*="event-details"]:hover { background: var(--ck-caramel-text) !important; } /* --------------------------------------------------------------------------- 3b. EVENT PAGE - "About the event" paragraph spacing Wix renders the description's paragraphs with no gap at all, so on a phone a five-paragraph event reads as one wall of text (Greg's screenshot of the Highlands Table page, 2026-09-09). Space every paragraph after the first. Keyed on Wix's own data-hook, not a hashed class, and it applies to every event Cindy writes from now on - no blank lines needed in the editor. --------------------------------------------------------------------------- */ [data-hook="about-section"] p + p { margin-top: 0.9em !important; } /* --------------------------------------------------------------------------- 4. EVENTS - cards with no image Wix renders a solid ~658px colour block where the event photo would be. On a page with one event that is most of the screen, and it reads as broken. Collapse it - but ONLY on cards that genuinely have no . The :has() test means the rule stops applying by itself the moment a photo is added to the event in the dashboard, and the real image shows normally. Selector uses real tags (ul > li > div) plus :empty, never Wix's hashed utility classes, so it survives a republish. --------------------------------------------------------------------------- */ #comp-mk4wkrt9 li:not(:has(img)) > div > div > div:first-child:empty { display: none !important; } /* keep the now text-only card from looking cramped */ #comp-mk4wkrt9 li:not(:has(img)) > div > div { padding-top: 8px !important; } /* --------------------------------------------------------------------------- 5. FOOTER - address, phone, email and hours on every Wix page The homepage's own footer (inside the custom element) carries all four. Every other page's footer was one line: "2026 (c) Web Design by Hyett Consulting." A phone-first visitor on an event or booking page had no visible address or email anywhere on the page - the number lives only in the JS-injected header (audit 2026-09-09 #14). site-theme.js appends #ck-footer to SITE_FOOTER, the same way it appends #ck-nav to SITE_HEADER, and for the same reason: Wix's Pages panel is not usable in this site and this channel updates without a publish. If the script fails to load, nothing here applies and the old footer is unchanged. --------------------------------------------------------------------------- */ #SITE_FOOTER:has(#ck-footer) { height: auto !important; min-height: 0 !important; } #ck-footer { position: relative; z-index: 2; font-family: var(--ck-font); color: var(--ck-charcoal); background: #FFFFFF; border-top: 1px solid var(--ck-sand); padding: 26px 40px 30px; display: flex; flex-wrap: wrap; gap: 10px 48px; align-items: flex-start; font-size: 15px; line-height: 1.9; } #ck-footer .ck-foot-col { min-width: 0; } #ck-footer .ck-foot-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ck-stone); margin-bottom: 2px; line-height: 1.6; } #ck-footer a { color: var(--ck-charcoal); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--ck-sand); } #ck-footer a:hover { color: var(--ck-caramel-text); border-bottom-color: var(--ck-caramel-text); } @media (max-width: 900px) { #ck-footer { padding: 20px 16px 24px; gap: 4px 24px; font-size: 15px; } #ck-footer .ck-foot-col { flex: 1 1 100%; } }