/* Theme Name: LCN Native Theme URI: https://lemahcreeknaturals.com/ Author: 76 Design Solutions Author URI: https://76designsolutions.com/ Description: Lightweight theme for Lemah Creek Naturals, replacing Divi. Built to reproduce the existing chrome exactly - top bar, header, navigation and footer - with WooCommerce support and no page builder. Version: 1.0 Requires at least: 6.0 Requires PHP: 8.0 License: Proprietary Text Domain: lcn */ /* 🔴 EVERY VALUE BELOW IS MEASURED FROM THE LIVE PRODUCTION PAGE, NOT CHOSEN. The first version of this theme invented a palette and a type scale, and the result looked nothing like the site: production's h1 is 50px bold PURPLE, the rebuild's was 33.6px near-black; body text is 18px/30.6px Lato #666, the rebuild had 16px/1.7 Open Sans. Those two differences alone are most of why the page read as wrong. Divi held all of this in its theme options and in its generated CSS the whole time. Measured on https://lemahcreeknaturals.com/ at 1440px: h1 50px / 60px w700 rgb(148,42,151) Open Sans h2 24px / 31.2px w700 rgb(148,42,151) Open Sans h3 32px / 32px w700 rgb(51,51,51) Open Sans h4 20px / 32px w700 #fff Open Sans body p 18px / 30.6px w500 rgb(102,102,102) Lato button 20px w500 #fff on #63bc4d, radius 5px, padding 6px 20px content width 1140px */ :root{ --lcn-purple:#942a97; /* headings, measured rgb(148,42,151) */ --lcn-purple-bar:#952394; /* the top contact bar */ --lcn-purple-dark:#7a3187; --lcn-green:#63bc4d; /* buttons, measured rgb(99,188,77) */ --lcn-green-dark:#16a800; --lcn-ink:#666666; /* body copy, measured rgb(102,102,102) */ --lcn-ink-strong:#333333; /* h3, measured rgb(51,51,51) */ --lcn-rule:#e6e6e6; --lcn-max:1140px; --lcn-body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --lcn-head:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--lcn-body); font-size:18px;line-height:1.7;font-weight:500;color:var(--lcn-ink);background:#fff; } img{max-width:100%;height:auto} a{color:var(--lcn-purple);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4,h5,h6{font-family:var(--lcn-head);font-weight:700;margin:0 0 10px;padding-bottom:10px} h1{font-size:50px;line-height:1.2;color:var(--lcn-purple)} h2{font-size:24px;line-height:1.3;color:var(--lcn-purple)} h3{font-size:32px;line-height:1;color:var(--lcn-ink-strong)} h4{font-size:20px;line-height:1.6;color:var(--lcn-ink-strong)} h5,h6{font-size:18px;line-height:1.5;color:var(--lcn-ink-strong)} p{margin:0 0 1em} /* Divi scales headings down on small screens - measured 30px at phone and tablet. */ @media (max-width:980px){ h1{font-size:30px} h3{font-size:24px} body{font-size:16px} } /* content-box, deliberately: production's container measures 1140px of CONTENT, with the gutter outside it. With the global border-box the same rule gave 1100px of content and shifted every section inward by 20px against production. */ .lcn-wrap{max-width:var(--lcn-max);margin:0 auto;padding:0 20px;box-sizing:content-box} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* ---- top bar (phone, email, social, account, cart) ---- */ .lcn-topbar{background:var(--lcn-purple);color:#fff;font-size:14px} .lcn-topbar a{color:#fff} .lcn-topbar .lcn-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:39px;flex-wrap:wrap} .lcn-topbar-left,.lcn-topbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap} /* Inline SVG glyphs, replacing Divi's ETmodules icon font (removed with Divi). 15px matches the bar's own font size; the icon sits on the text baseline the same way the font glyph did. */ .lcn-ico{width:15px;height:15px;fill:currentColor;vertical-align:-2px;margin-right:7px;flex:0 0 auto} .lcn-topbar a{display:inline-flex;align-items:center} .lcn-social-top{display:inline-flex;align-items:center;gap:10px} .lcn-social-top .lcn-ico{margin-right:0;width:16px;height:16px} .lcn-cart .lcn-ico{width:17px;height:17px} .lcn-topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:14px} /* ---- header ---- */ /* Measured on production: #main-header is position:fixed, 120px tall, white, with a 1px rgba(0,0,0,.1) shadow rather than a border; its inner container is 1354px (94%), NOT the 1140px the top bar uses - which is why production's logo sits at x=40 and the build's sat at x=170. The bars above it scroll away, so the fixed header is offset by their height at the top of the page and pinned once they have gone. */ .lcn-header{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);position:sticky;top:0;z-index:90} /* The logo is pushed left and everything else sits right, as production does - a plain space-between spreads three children evenly and left the nav stranded mid-header. */ .lcn-header .lcn-wrap{max-width:none;width:94%;padding:0;display:flex;align-items:center; gap:24px;min-height:120px} .lcn-logo{margin-right:auto} .lcn-logo img{display:block;max-height:108px;width:auto} /* ---- search ---- Collapsed by default, exactly as production's is: the control is a button, and the field is revealed by it. Hidden with max-width rather than display:none so it stays focusable-by-script and animates; it is also aria-hidden off-screen for assistive tech until opened. */ .lcn-search{position:relative;display:flex;align-items:center} .lcn-search-toggle{background:none;border:0;padding:6px;cursor:pointer;color:var(--lcn-purple); display:flex;align-items:center;justify-content:center} .lcn-search-toggle svg{width:22px;height:22px;fill:currentColor;display:block} .lcn-search-form{position:absolute;right:100%;margin-right:8px;overflow:hidden;max-width:0; transition:max-width .2s ease;pointer-events:none} .lcn-search.is-open .lcn-search-form{max-width:260px;pointer-events:auto} .lcn-search-form input[type=search]{width:240px;border:1px solid var(--lcn-rule);border-radius:4px; padding:7px 12px;font-family:var(--lcn-body);font-size:15px;color:var(--lcn-ink)} /* ---- primary navigation: matches the reorganised 5-item menu ---- */ .lcn-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:30px} .lcn-nav li{position:relative} .lcn-nav > ul > li > a{ display:inline-block;position:relative;line-height:1.4; font-size:15.5px;font-weight:500;letter-spacing:.005em;color:var(--lcn-purple); text-transform:none;transition:color .18s ease;padding:10px 0; } /* the growing underline, carried over from the Divi build */ .lcn-nav > ul > li > a::before{ content:"";position:absolute;left:0;top:1.9em;width:0;height:2px; background:var(--lcn-green-dark);transition:width .22s cubic-bezier(.22,.61,.36,1); } .lcn-nav > ul > li > a:hover::before, .lcn-nav > ul > li.current-menu-item > a::before, .lcn-nav > ul > li.current-menu-ancestor > a::before{width:100%} .lcn-nav > ul > li.current-menu-item > a{font-weight:600} /* parent indicator */ .lcn-nav > ul > li.menu-item-has-children > a::after{content:"\25be";margin-left:7px;font-size:15px;line-height:1;opacity:.75} /* Shop mega panel - the four categories as columns, their children listed inline */ /* 🔴 align-items:start IS LOAD-BEARING. The rule above sets align-items:center on EVERY ul in the nav, for the horizontal bar, and a grid inherits nothing from that - it is the same declaration matching this element too. Centered grid items sit each column on its own vertical middle, so four categories with 4, 1, 0 and 2 products started at y=193, 250, 268 and 231: four headings on four different lines. Measured, not guessed. start puts every heading on the same baseline. */ .lcn-nav ul ul{ position:absolute;right:0;top:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:2px 16px;min-width:790px;max-width:min(860px,calc(100vw - 48px)); padding:24px 26px 20px;background:#fff;border-radius:14px; box-shadow:0 20px 56px rgba(16,24,20,.16),0 2px 8px rgba(16,24,20,.07); opacity:0;visibility:hidden;transition:opacity .16s ease;z-index:1000; /* 🔴 pointer-events:none IS THE GUARD, NOT A TIDY-UP. visibility:hidden alone is not enough, because visibility INHERITS and a descendant can set itself back to visible - which the third-level rule below used to do. That left an invisible but fully hit-testable 790x234 block hanging under the header: mousing anywhere in it opened the Shop menu, from x=316 all the way across, while the Shop link itself is only 54px wide at x=1051. pointer-events also inherits, and nothing inside re-enables it, so the closed panel cannot catch the pointer however its descendants are styled. */ pointer-events:none; } /* 🔴 THE NESTED LIST MUST BE RE-SHOWN TOO, NOT JUST THE PANEL. `.lcn-nav ul ul` matches BOTH the Shop panel and the product lists inside it, so both are hidden while closed - which is what finally killed the phantom hover area. But `li:hover > ul` only reaches the DIRECT child, so re-showing the panel alone left every product link visibility:hidden inside a visible panel: measured, the menu opened and a click on "Mint" never left the home page. The second selector hands visibility and the pointer back to the whole subtree, and only while the item is hovered. */ .lcn-nav li:hover > ul, .lcn-nav li:hover > ul ul{opacity:1;visibility:visible;pointer-events:auto} .lcn-nav ul ul > li > a{ display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--lcn-purple-dark);padding:2px 10px 9px;margin:0 0 6px;border-bottom:1px solid #eee4f0; } /* Third level: always open INSIDE the panel, stacked under its heading rather than a fly-out. ⚠ It must NOT declare visibility:visible. That was meant to say "never fly out", but visibility inherits, so it also un-hid these lists while the panel above them was closed - and an element that is visible is hit-testable even at opacity 0. Nesting handles it on its own: when the panel opens, these inherit visible with it. */ .lcn-nav ul ul ul{ position:static;display:block;opacity:1;min-width:0;padding:0;margin:0; background:none;box-shadow:none;border-radius:0;grid-template-columns:none; } .lcn-nav ul ul ul > li > a{ font-size:14px;font-weight:400;text-transform:none;letter-spacing:0; padding:7px 10px;border:0;border-radius:7px;margin:0;color:var(--lcn-ink); } .lcn-nav ul ul ul > li > a:hover{background:#f1f8ef;color:var(--lcn-green-dark);text-decoration:none} /* ---- mobile ---- */ .lcn-nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--lcn-purple)} .lcn-nav-toggle svg{display:block} @media (max-width:980px){ /* 120px of header is a desktop measure; on a phone it costs a quarter of the screen. */ .lcn-header .lcn-wrap{min-height:76px;width:90%} .lcn-logo img{max-height:62px} .lcn-nav-toggle{display:block} .lcn-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--lcn-green-dark); border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.12);display:none;z-index:999} .lcn-header{position:relative} .lcn-header.is-open .lcn-nav{display:block} .lcn-nav ul{display:block} .lcn-nav > ul > li > a{display:block;padding:13px 5%;font-size:15.5px} .lcn-nav > ul > li > a::before{display:none} /* 🔴 pointer-events:auto IS REQUIRED HERE. The desktop panel is now pointer-events:none while closed, and that inherits - without this the mobile menu's category and product links would render perfectly and refuse every tap. There is no hover on a phone: the panel is simply open, so it must take the pointer. */ .lcn-nav ul ul,.lcn-nav ul ul ul{position:static;display:block;opacity:1;visibility:visible; pointer-events:auto; box-shadow:none;padding:0;min-width:0;grid-template-columns:none;border-radius:0} .lcn-nav ul ul > li > a{padding-left:10%;border:0;margin:0} .lcn-nav ul ul ul > li > a{padding-left:16%;opacity:.9} } /* ---- content ---- Sections are FULL BLEED so a background image or gradient spans the viewport, exactly as Divi rendered them; the inner wrapper is what constrains the content to the 1140px measure. The converter writes background and padding inline on .lcn-section from the Divi attributes. */ /* No bottom padding: every section carries its own, and 40px here put a white band between the wave divider at the foot of the last section (ending 5226px) and the footer (starting 5266px), breaking the curve production runs straight into the gray. */ .lcn-main{padding:0} /* 🔴 THE MEASURE FOR CONTENT THAT IS NOT CONVERTED DIVI CONTENT. * * `.lcn-main > .lcn-wrap` is deliberately unconstrained, because converted pages supply their own * full-bleed sections and the ROW carries the measure. That is right for converted content and * wrong for everything else - and "everything else" turned out to be most of the site. Measured * at 1440px, content should start at x=143; it was starting at x=0, flush against the viewport * edge, on: * /shop/ /cart/ /my-account/ /blog/ /?s= 404 and every product taxonomy archive * plus the template-printed

on every converted page that is not the front page. * * Production's own WooCommerce pages were measured rather than guessed at: the breadcrumb, the * result count and the product grid all sit at x=143 with width 1140, inside a row padded 2% top * and bottom with no extra section padding. These numbers mirror that exactly, and match .lcn-row * so converted and non-converted pages share one rhythm. */ .lcn-measure{width:80%;max-width:var(--lcn-max);margin:0 auto;padding:2% 0;box-sizing:border-box} @media (max-width:980px){ .lcn-measure{width:90%} } .lcn-main > .lcn-wrap{max-width:none;padding:0} /* 🔴 SECTION AND ROW PADDING ARE PERCENTAGES, NOT PIXELS - THIS IS WHERE THE PAGE FELT CRAMPED. Divi spaces its structure with `.et_pb_section{padding:4% 0}` and `.et_pb_row{padding:2% 0}`. I had hardcoded 28px on the section and nothing at all on the row, which is barely a third of production's breathing room. Measured side by side at 1440px: production section 57px top/bottom + row 28.5px top/bottom = 171px per band build section 28px top/bottom + row 0 = 56px per band Across the six content bands that accounted for ~610px of the height difference, and it read as every section being squeezed against the next. ⚠ A PERCENTAGE PADDING RESOLVES AGAINST THE CONTAINING BLOCK'S WIDTH, NOT THE ELEMENT'S OWN. That is why production's 1425px row and its 1140px row both measure exactly 28.5px: both resolve 2% against the 1425px section. Using the percentages reproduces production at every viewport width; a pixel value would only ever be right at one. */ .lcn-section{margin:0;padding:4% 0;background-position:center;background-size:cover} /* Full width: the ROW carries the measure (see .lcn-row). */ .lcn-section-inner{max-width:none;margin:0;padding:0} /* 🔴 Divi's shape dividers. These are reproduced from the SVG production actually serves (read out of the live page's computed background-image and decoded), not redrawn: a 100px purple arrow3 under the hero and a 74px #eeeeee curve2 above the footer. The converter writes the height and the data URI inline from the section's own attributes; this rule only positions them. ⚠ NOT .lcn-divider - that class is already the small green accent rule. */ .lcn-shape-divider{position:absolute;left:0;right:0;width:100%;z-index:1;pointer-events:none; background-repeat:no-repeat;background-size:100% 100%;background-position:center} .lcn-shape-divider-top{top:0} .lcn-shape-divider-bottom{bottom:0} .lcn-section > .lcn-section-inner{position:relative;z-index:2} /* Divi's per-device hiding, at Divi's own breakpoints: phone <=767, tablet 768-980, desktop >=981. The converter emits these classes from disabled_on="phone|tablet|desktop". */ @media (max-width:767px){ .lcn-hide-phone{display:none !important} } @media (min-width:768px) and (max-width:980px){ .lcn-hide-tablet{display:none !important} } @media (min-width:981px){ .lcn-hide-desktop{display:none !important} } /* Rows are flex; the converter writes each column's width inline from Divi's type attribute (4_4 / 1_2 / 1_3 / 1_4), which is what makes a row read as a row instead of a stack. 🔴 NO `gap` HERE, DELIBERATELY. gap is ADDED to a percentage basis, so four 25% columns plus three 24px gaps exceed 100% and the fourth wraps to its own line - which is exactly what orphaned the fourth product and left a large hole in the page. Gutters are done with padding inside the column and a negative margin on the row, which is how Divi does it and which keeps the percentages exact. */ /* 🔴 THE ROW IS THE MEASURE, NOT THE SECTION. Divi constrains the ROW (80%, max 1140px) and leaves the section full-bleed, which is how a row that declares width:100%;max-width:none - the hero's - can reach the page edges. Constraining .lcn-section-inner instead made that impossible: the hero copy started at 150px where production starts it at 30px, and no row could ever escape. Gutters are now the inline margin-right the converter writes from the row's own gutter setting, so no negative margin is needed and the percentages stay exact. */ /* padding 2% 0 matches Divi (see the note on .lcn-section); the 8px bottom margin it replaces was my own invention and production's rows carry none. */ .lcn-row{display:flex;flex-wrap:wrap;align-items:flex-start;width:80%;max-width:var(--lcn-max); margin:0 auto;padding:2% 0;box-sizing:border-box} .lcn-row > .lcn-col{flex:1 1 0;min-width:0;box-sizing:border-box} /* The last column in a row never carries a trailing gutter. */ .lcn-row > .lcn-col:last-child{margin-right:0 !important} /* Divi's make_equal: the columns in this row are all as tall as the tallest, which is what keeps paired boxes - testimonials, product cards, the colored panels - reading as a set rather than as a ragged edge. The converter adds .lcn-row-equal from the row's own attribute. The :only-child rule stretches a column's sole visible box to fill the equalized height; it is deliberately scoped that way, because a column holding several stacked modules should keep them at their natural heights and simply sit in a taller box, exactly as Divi does. ⚠ The stretch has to reach the element that actually DRAWS the box. Stretching only the column left the two testimonial panels visibly different heights while the columns behind them were identical - the equalization was real and invisible, because the module wrapper grew and the bordered panel inside it did not. Production equalizes the drawn panel: both testimonial bodies measure 185px there, the shorter one simply carrying more empty space. */ .lcn-row-equal{align-items:stretch} .lcn-row-equal > .lcn-col{display:flex;flex-direction:column} .lcn-row-equal > .lcn-col > *:only-child{flex:1 1 auto;display:flex;flex-direction:column} .lcn-row-equal > .lcn-col > *:only-child > *{flex:1 1 auto} /* 🔴 COLUMNS STACK AT 980px, WHICH IS DIVI'S BREAKPOINT - NOT A STYLISTIC CHOICE. The converter writes each column's width inline (flex:0 0 22.75% and so on), and an inline style beats a stylesheet rule, so these need !important to take effect. Measured at a real 390px iPhone viewport before this rule: the four-product row rendered as four 71px columns side by side, with the bottle images and their "Buy Now" buttons crushed into strips. Divi collapses every column to full width at 980px and below, and so does this. */ @media (max-width:980px){ .lcn-row{width:90%} .lcn-row > .lcn-col{flex:0 0 100% !important;max-width:100% !important;margin-right:0 !important;margin-bottom:30px} .lcn-row > .lcn-col:last-child{margin-bottom:0} /* A module's inline max_width (the hero's 600px) must not out-measure a narrow screen. */ .lcn-mod-box{max-width:100% !important} } .lcn-text > :first-child{margin-top:0} .lcn-text > :last-child{margin-bottom:0} .lcn-figure{margin:0 0 18px} .lcn-figure img,.lcn-img{display:block;max-width:100%;height:auto} /* Divider is an accent rule, not a page-wide line: color, width and alignment come inline. */ .lcn-divider{border:0;border-top:3px solid var(--lcn-green-dark);width:80px;margin:18px 0 22px} .lcn-spacer{height:28px} /* Button measured on production: 20px, weight 500, white on #63bc4d, radius 5px, padding 6px 20px */ .lcn-btn{display:inline-block;background:var(--lcn-green);color:#fff;font-family:var(--lcn-body); font-size:20px;line-height:1.7;font-weight:500;padding:6px 20px;border-radius:5px} .lcn-btn:hover{background:var(--lcn-green-dark);text-decoration:none;color:#fff} .lcn-btn-wrap{margin:0 0 18px} .lcn-quote{margin:0 0 20px;padding:18px 22px;border-left:4px solid var(--lcn-green);background:#f7faf5} .lcn-cite{display:block;margin-top:10px;font-style:normal;font-weight:600} .lcn-acc-item{border-bottom:1px solid var(--lcn-rule);padding:12px 0} .lcn-acc-item summary{cursor:pointer;font-weight:600;color:var(--lcn-ink-strong)} .lcn-blurb{margin:0 0 20px} .lcn-blurb-title{font-size:1.15rem;margin-bottom:.35em} /* 🔴 IMAGE SIZING IS PER MODULE, NOT A BLANKET CAP. My first attempt at this rule capped every blurb image at 210px from one measurement, which would have been wrong for two of the three sets on this page. Divi sizes each blurb image from its OWN attributes - image_max_width in px, or image_icon_width in px or as a percentage OF THE COLUMN - and the home page uses three different values, measured on production: flavour bottles image_max_width 210px -> rendered 210x315 in a 259px column process icons image_icon_width 30% -> rendered 101x101 in a 338px column trust icons image_max_width 150px -> rendered 150x150 in a 338px column The converter now writes each module's own width inline, so this rule only handles the parts that are genuinely common: block display, centering, and never exceeding the column. Without any cap at all the 512px source icons printed at 348px and swamped the copy beside them. */ .lcn-blurb-img{display:block;max-width:100%;height:auto;margin:0 auto 14px} .lcn-blurb{text-align:center} .lcn-blurb .lcn-text,.lcn-blurb p{text-align:center} /* ⚠ NO BLANKET BUTTON CENTERING HERE, AND NO GUESSING FROM CONTEXT EITHER. Two earlier versions of this file got this wrong: one centered every .lcn-btn-wrap in a column, which centered the hero's BUY NOW that production puts hard left; the next centered any button following a blurb, which missed the product buttons because a title module sits between. A button's alignment is its own module's button_alignment attribute, per device, and the converter writes it - as an inline text-align for desktop and as these classes for the two smaller breakpoints. */ @media (max-width:980px) and (min-width:768px){ .lcn-btn-tablet-center{text-align:center} .lcn-btn-tablet-right{text-align:right} .lcn-btn-tablet-left{text-align:left} } @media (max-width:767px){ .lcn-btn-phone-center{text-align:center} .lcn-btn-phone-right{text-align:right} .lcn-btn-phone-left{text-align:left} } .lcn-social{list-style:none;display:flex;gap:14px;padding:0;margin:0} /* ---- footer ---- 🔴 EVERY VALUE HERE WAS READ OFF PRODUCTION, because the first version was invented and came out a dark charcoal panel against production's light gray one - the single biggest visual mismatch on the page, and it also dropped the Consumer Advisory to gray-on-dark, which is a contrast problem on compliance text. Measured on lemahcreeknaturals.com: section background rgb(238,238,238) color rgb(102,102,102) padding 20px top/bottom h3 20px/20px rgb(51,51,51) weight 700 Open Sans text-transform NONE links rgb(149,35,148) 18px weight 500 list items margin-bottom 8px line-height 26px advisory 15px/22.5px rgb(102,102,102) bottom strip white, 45px, rgb(102,102,102) - OUTSIDE the gray block */ .lcn-footer{background:#eee;color:var(--lcn-ink);padding:20px 0 0;font-size:18px} .lcn-footer a{color:var(--lcn-purple-bar);font-weight:500} .lcn-footer a:hover{color:var(--lcn-purple)} .lcn-footer h3{color:var(--lcn-ink-strong);font-family:var(--lcn-head);font-size:20px;line-height:20px; font-weight:700;text-transform:none;letter-spacing:0;margin:0 0 .9em} .lcn-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;padding-bottom:20px} .lcn-footer ul{list-style:none;margin:0;padding:0} .lcn-footer ul li{margin-bottom:8px;line-height:26px} .lcn-footer-logo img{max-width:220px;margin-bottom:16px;height:auto} .lcn-advisory{font-size:15px;line-height:22.5px;color:var(--lcn-ink);margin:0} /* The newsletter signup band, at the top of the footer. The shortcode ships its own base styles; these only fit it to the footer: the title inherits .lcn-footer h3, the field is held to a readable measure instead of running the full 1140px, and a rule separates it from the columns. The Turnstile widget sits on its own line (the shortcode's own flex-basis:100% does that). */ .lcn-footer .lcn-signup{margin:0 0 26px;padding:0 0 24px;border-bottom:1px solid #dcdcdc;max-width:620px} .lcn-footer .lcn-signup-desc{margin:0 0 14px;color:var(--lcn-ink)} .lcn-footer .lcn-signup-email{background:#fff;flex:1 1 260px;max-width:340px} .lcn-footer .lcn-signup-submit{color:#fff} @media (max-width:767px){ .lcn-footer .lcn-signup{max-width:none} .lcn-footer .lcn-signup-email{max-width:none} } /* Social buttons: production renders two 40x32 icon links under the footer logo. */ .lcn-footer-social{display:flex;gap:10px;margin:0 0 18px;padding:0;list-style:none} .lcn-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:32px;color:var(--lcn-purple-bar)} .lcn-footer-social a:hover{color:var(--lcn-purple)} .lcn-footer-social svg{width:20px;height:20px;fill:currentColor} /* The copyright strip is white and sits BELOW the gray block, as on production. */ /* No negative margin: this strip is now a sibling of .lcn-wrap, not inside it, so the -20px that used to cancel the wrap's padding made it 40px wider than the viewport and was the cause of horizontal scrolling at 390px (document scrollWidth 410 against a 390 viewport). */ .lcn-footer-bottom{background:#fff;margin:0;padding:0;color:var(--lcn-ink);font-size:15px} .lcn-footer-bottom-inner{max-width:var(--lcn-max);box-sizing:content-box;margin:0 auto;padding:0 20px; min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .lcn-payment img{max-width:300px;height:auto;display:block} /* Agency attribution strip - 76DS standard, centered, ~11px, weight 300 */ .lcn-attribution{text-align:center;padding:14px 0 20px;font-size:11px;font-weight:300} .lcn-attribution a{color:inherit;text-decoration:none} /* ---- WooCommerce archive header band ---- Measured on production's /flavor/mint/: a full-bleed rgb(238,238,238) strip, the title in Open Sans 700 at 40px in rgb(0,100,0) - a dark green, deliberately not the site's button green - and the breadcrumb beneath it at 16.56px in rgb(118,118,118). */ .lcn-archhead{background:#eee} .lcn-archhead .lcn-measure{padding:2% 0} .lcn-archtitle{font-family:var(--lcn-head);font-size:40px;line-height:40px;font-weight:700; color:#006400;margin:0 0 .4em} .lcn-archhead .lcn-crumbs,.lcn-archhead .breadcrumb,.lcn-archhead .breadcrumbs,.lcn-archhead .woocommerce-breadcrumb{ font-size:16.56px;line-height:1.5;color:#767676;margin:0} .lcn-archhead a{color:var(--lcn-purple-bar)} @media (max-width:767px){ .lcn-archtitle{font-size:30px;line-height:1.15} } /* The sorting control: production draws it borderless on a light fill, not as a raw browser select. */ .woocommerce-ordering select{border:0;padding:4px 8px;background:#ececec;font-size:12px; color:var(--lcn-ink);font-family:var(--lcn-body);border-radius:3px} /* ---- WooCommerce controls ---- Left at the plugin's defaults these were visibly off-brand, measured against production's own product page: production build before this add to cart rgb(99,188,77), radius 5px, rgb(127,84,179) - WooCommerce's purple - padding 6px 20px, 20px/500 radius 3px, padding 11px 18px, 18px/700 price rgb(149,35,148), 26px/700 rgb(149,142,9) - an olive yellow The button values are the same ones .lcn-btn already uses, so the shop matches the rest of the site rather than approximating it. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button, .woocommerce a.added_to_cart{ background:var(--lcn-green);color:#fff;border:0;border-radius:5px; font-family:var(--lcn-body);font-size:20px;line-height:1.7;font-weight:500; padding:6px 20px;text-decoration:none } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .single_add_to_cart_button:hover{background:var(--lcn-green-dark);color:#fff} /* The disabled state has to stay visibly disabled rather than inheriting the green. */ .woocommerce button.button:disabled, .woocommerce button.button.disabled{background:#cfd4d0;color:#fff;cursor:not-allowed} .woocommerce .price, .woocommerce p.price, .woocommerce span.price, .woocommerce ul.products li.product .price{ color:var(--lcn-purple-bar);font-family:var(--lcn-head);font-size:26px;font-weight:700 } /* In the product grid the price sits under a title and should not out-shout it. */ .woocommerce ul.products li.product .price{font-size:20px} /* The quantity box next to Add to cart, so the pair read as one control. */ .woocommerce .quantity input.qty{ padding:8px 6px;border:1px solid var(--lcn-rule);border-radius:5px; font-family:var(--lcn-body);font-size:18px;color:var(--lcn-ink) } /* 🔴 WooCommerce drives its own colors through CSS VARIABLES, and overriding the selectors alone does not reach them. Read off the live page before changing anything: --wc-primary #720eec (and .button.alt separately computes to #7f54b3) --wc-highlight #958e09 <- the olive yellow the PRICE was rendering in The price color sits on a child inside p.price, which is why a rule on .price missed it entirely. Setting the variables fixes both at source, so anything else WooCommerce colors from them follows automatically instead of needing its own override later. */ :root{ --wc-primary:#63bc4d; /* the site green - .button.alt, primary actions */ --wc-primary-text:#ffffff; --wc-highlight:#952394; /* the site purple - prices */ --wc-subtext:#666666; } /* .alt carries its own background in WooCommerce's stylesheet, so it is named explicitly. */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt{background:var(--lcn-green);color:#fff} .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{background:var(--lcn-green-dark);color:#fff} /* The amount is a nested span/bdi; the color has to be set there, not only on the wrapper. */ .woocommerce .price .woocommerce-Price-amount, .woocommerce .price bdi, .woocommerce .price span{color:var(--lcn-purple-bar)} .woocommerce .summary p.price, .woocommerce .summary p.price .woocommerce-Price-amount{font-size:26px;font-weight:700} /* Divi's background_layout="dark": the module sits on a dark band, so its text is light. Without this the About page's "Our Mission and Values" rendered purple on purple at a 1.03:1 contrast ratio - invisible. The converter adds .lcn-on-dark from the module's own attribute. */ .lcn-on-dark, .lcn-on-dark p, .lcn-on-dark li, .lcn-on-dark h1,.lcn-on-dark h2,.lcn-on-dark h3, .lcn-on-dark h4,.lcn-on-dark h5,.lcn-on-dark h6, .lcn-on-dark .lcn-text, .lcn-on-dark .lcn-blurb-title{color:#fff} .lcn-on-dark a{color:#fff;text-decoration:underline} /* ====================================================================== PRODUCT TABS - Description / Additional information / Reviews Joe 2026-10-08: "on the product page, you need to fix the formatting of the information in the description and other tabs". 🔴 EVERY RULE HERE IS SCOPED TO .woocommerce-Tabs-panel, DELIBERATELY. The same .lcn-blurb and .lcn-col classes carry the design on 22 pages that were verified pixel-identical earlier today. Widening these rules would quietly re-lay-out those pages to fix a product page. If a change belongs site-wide it gets made site-wide on purpose, not as a side effect. ====================================================================== */ /* ---- 1. A TEXT-ONLY BLURB IS A BULLET, NOT A CARD ---------------------- The converter emits every Divi blurb as .lcn-blurb and the theme centers it, which is right for the six icon fact-cards (SIZE / VOLUME, TOTAL CBD ...) and wrong for the feature list, which is blurbs with no icon. Production renders that list LEFT - measured on lemahcreeknaturals.com, the same column, the same product: text-align "left", x=784 in a 544px half-column. The build was centering it, so every line started at a different place. An icon blurb still centers; only the icon-less ones change. */ .woocommerce-Tabs-panel .lcn-blurb:not(:has(.lcn-blurb-img)), .woocommerce-Tabs-panel .lcn-blurb:not(:has(.lcn-blurb-img)) p, .woocommerce-Tabs-panel .lcn-blurb:not(:has(.lcn-blurb-img)) .lcn-text{ text-align:left; } /* ---- 2. THE EMPTY HALF OF THE FIRST ROW ------------------------------- Production's first description row is two half columns: Divi's product gallery module on the left, the feature list on the right. The gallery is a Divi module with no equivalent here, so the converter left a genuinely empty column -
- holding 539px of nothing, which pushed the whole list into the right half of the tab. 45 of the published products carry that pattern. The gallery already appears above the tabs, so inside a tab that column is dead space: it is collapsed and its sibling takes the full width. :empty is exact here - the converter writes no whitespace inside it, verified on the stored markup, so this cannot catch a column that merely looks empty. */ .woocommerce-Tabs-panel .lcn-row > .lcn-col:empty{display:none} .woocommerce-Tabs-panel .lcn-row:has(> .lcn-col:empty) > .lcn-col:not(:empty){ flex:1 1 100% !important;max-width:100% !important;margin-right:0 !important; } /* ---- 3. ADDITIONAL INFORMATION ---------------------------------------- Three defects, all inherited from WooCommerce's own stylesheet rather than ours: - `table.shop_attributes td{font-style:italic}` put every value in italics, which reads like an error state rather than data; - the label cell is a , so the BROWSER centers it - in a 150px cell that leaves the label floating away from the value it belongs to; - the table is width:100%, so four short values were spread over 1140px. A two-column data table wants a readable measure and a straight left edge. */ .woocommerce-Tabs-panel table.shop_attributes{ width:auto;min-width:min(560px,100%);max-width:100%; border-collapse:collapse; } .woocommerce-Tabs-panel table.shop_attributes th{ text-align:left;width:190px;padding:10px 18px 10px 0;font-weight:600; color:var(--lcn-purple-dark);vertical-align:top; } .woocommerce-Tabs-panel table.shop_attributes td{ font-style:normal;text-align:left;padding:10px 0;vertical-align:top; } .woocommerce-Tabs-panel table.shop_attributes td p{padding:0;margin:0} /* ---- 4. Panel rhythm -------------------------------------------------- The panel heading sat hard against the tab strip and the content hard against the heading. */ .woocommerce-Tabs-panel > h2:first-child{margin:6px 0 18px} /* ---- 5. The feature list's rhythm ------------------------------------- Each feature is its own blurb, and .lcn-blurb carries a 20px bottom margin meant for cards, which spaced the list at a 50px pitch - it read as eight separate statements rather than one list. Production sets the same list at 40px (measured: lines at y=207, 247, 288, 328, 369). 10px brings it to that. */ .woocommerce-Tabs-panel .lcn-blurb:not(:has(.lcn-blurb-img)){margin-bottom:10px} .woocommerce-Tabs-panel .lcn-blurb:not(:has(.lcn-blurb-img)) p:last-child{margin-bottom:0} /* ==== LCN-CHECKOUT START (2026-10-11) ========================================================= The checkout page. Measured before this block: the checkout's content had no page column (it began at x=0 while the title sat at x=143), every field was 31px tall with 13px text, and the order summary ran the full width under the form. Scoped to body.woocommerce-checkout, which WooCommerce sets on the checkout and order-received pages only. Colors and fonts are the theme's own variables. Remove this block to return to the previous rendering. */ body.woocommerce-checkout .lcn-text > .woocommerce{width:80%;max-width:var(--lcn-max);margin:0 auto;padding:0 0 4%;box-sizing:border-box} @media (max-width:980px){ body.woocommerce-checkout .lcn-text > .woocommerce{width:90%} } /* notices: login, coupon, messages, errors */ body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-error{background:#f7f7f7;border:0;border-left:4px solid var(--lcn-purple-bar); border-radius:5px;padding:14px 18px;margin:0 0 14px;color:var(--lcn-ink-strong);font-size:16px;line-height:1.5;list-style:none} body.woocommerce-checkout .woocommerce-error{border-left-color:#b32d2e} body.woocommerce-checkout .woocommerce-info::before, body.woocommerce-checkout .woocommerce-message::before, body.woocommerce-checkout .woocommerce-error::before{display:none} body.woocommerce-checkout .woocommerce-info a, body.woocommerce-checkout .woocommerce-message a{text-decoration:underline} body.woocommerce-checkout form.checkout_coupon, body.woocommerce-checkout form.woocommerce-form-login{border:1px solid var(--lcn-rule);border-radius:8px;padding:18px 20px;margin:0 0 18px;background:#fff} /* two columns on a wide screen: details left, order and payment right */ body.woocommerce-checkout form.checkout{margin-top:26px} @media (min-width:981px){ body.woocommerce-checkout form.checkout::after{content:"";display:table;clear:both} body.woocommerce-checkout form.checkout > #customer_details{float:left;width:52%} body.woocommerce-checkout form.checkout > #order_review_heading, body.woocommerce-checkout form.checkout > #order_review{float:right;width:43%;clear:right} } body.woocommerce-checkout form.checkout > wc-order-attribution-inputs{position:absolute;width:0;height:0;overflow:hidden} body.woocommerce-checkout #customer_details.col2-set .col-1, body.woocommerce-checkout #customer_details.col2-set .col-2{float:none;width:100%;max-width:none;margin:0;padding:0} body.woocommerce-checkout #customer_details.col2-set .col-2{margin-top:10px} body.woocommerce-checkout form.checkout h3{font-family:var(--lcn-head);font-size:22px;line-height:1.25;color:var(--lcn-ink-strong);margin:0 0 14px;padding:0} body.woocommerce-checkout #ship-to-different-address{font-size:18px;margin:18px 0 12px} body.woocommerce-checkout #ship-to-different-address label{display:inline-flex;align-items:center;gap:10px;font-weight:700;cursor:pointer} /* fields: one size, readable, a visible edge and a visible focus */ body.woocommerce-checkout .woocommerce form .form-row{margin:0 0 14px;padding:0} body.woocommerce-checkout .woocommerce form .form-row label{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--lcn-ink-strong);margin:0 0 5px} body.woocommerce-checkout .woocommerce form .form-row label.checkbox, body.woocommerce-checkout .woocommerce form .form-row label.woocommerce-form__label-for-checkbox{display:block;position:relative;padding-left:30px;font-weight:400;font-size:16px;line-height:1.45;cursor:pointer} body.woocommerce-checkout .woocommerce form .form-row label.checkbox input[type=checkbox], body.woocommerce-checkout .woocommerce form .form-row label.woocommerce-form__label-for-checkbox input[type=checkbox]{position:absolute;left:0;top:1px;margin:0} body.woocommerce-checkout .woocommerce form .form-row .required{color:#b32d2e;text-decoration:none} body.woocommerce-checkout .woocommerce form .form-row input.input-text, body.woocommerce-checkout .woocommerce form .form-row textarea, body.woocommerce-checkout .woocommerce form .form-row select, body.woocommerce-checkout .woocommerce form.checkout_coupon input.input-text, body.woocommerce-checkout .woocommerce form.woocommerce-form-login input.input-text{width:100%;min-height:46px;padding:10px 12px; font-family:var(--lcn-body);font-size:16px;line-height:1.4;color:var(--lcn-ink-strong);background:#fff; border:1px solid #8a8a8a;border-radius:5px;box-sizing:border-box;margin:0} body.woocommerce-checkout .woocommerce form .form-row textarea{min-height:96px;resize:vertical} body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus, body.woocommerce-checkout .woocommerce form .form-row textarea:focus, body.woocommerce-checkout .woocommerce form .form-row select:focus, body.woocommerce-checkout .select2-container--focus .select2-selection, body.woocommerce-checkout .select2-container--open .select2-selection{outline:3px solid var(--lcn-purple-bar);outline-offset:1px;border-color:var(--lcn-purple-bar)} body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text, body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select{border-color:#b32d2e} body.woocommerce-checkout .select2-container .select2-selection--single{height:46px;border:1px solid #8a8a8a;border-radius:5px} body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{line-height:44px;padding:0 34px 0 12px;font-size:16px;color:var(--lcn-ink-strong)} body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{height:44px;right:6px} body.woocommerce-checkout .woocommerce form .form-row-first, body.woocommerce-checkout .woocommerce form .form-row-last{width:calc(50% - 8px);float:left;clear:none} body.woocommerce-checkout .woocommerce form .form-row-last{float:right} body.woocommerce-checkout .woocommerce form .form-row-wide{clear:both} body.woocommerce-checkout .woocommerce form input[type=checkbox], body.woocommerce-checkout .woocommerce form input[type=radio]{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#16773d} body.woocommerce-checkout .woocommerce-account-fields{margin-top:6px} @media (max-width:480px){ body.woocommerce-checkout .woocommerce form .form-row-first, body.woocommerce-checkout .woocommerce form .form-row-last{width:100%;float:none} } /* order summary and payment, as one card */ body.woocommerce-checkout #order_review_heading{margin-top:0} @media (max-width:980px){ body.woocommerce-checkout #order_review_heading{margin-top:26px} } body.woocommerce-checkout #order_review{background:#fff;border:1px solid var(--lcn-rule);border-radius:10px;padding:6px 20px 20px;box-sizing:border-box} body.woocommerce-checkout #order_review table.shop_table{width:100%;border:0;border-radius:0;border-collapse:collapse;margin:0;font-size:16px;color:var(--lcn-ink-strong)} body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td{padding:12px 0;border:0;border-bottom:1px solid var(--lcn-rule);text-align:left;vertical-align:top;font-weight:400;background:none} body.woocommerce-checkout #order_review table.shop_table th{font-weight:700;padding-right:14px} body.woocommerce-checkout #order_review table.shop_table thead th{font-size:14px;color:var(--lcn-ink)} body.woocommerce-checkout #order_review table.shop_table tfoot th{width:42%} body.woocommerce-checkout #order_review table.shop_table td.product-total, body.woocommerce-checkout #order_review table.shop_table thead th.product-total, body.woocommerce-checkout #order_review table.shop_table tfoot td{text-align:right} body.woocommerce-checkout #order_review table.shop_table tr.order-total th, body.woocommerce-checkout #order_review table.shop_table tr.order-total td{font-size:19px;font-weight:700} body.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th, body.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td{border-bottom:0} body.woocommerce-checkout #order_review ul#shipping_method{list-style:none;margin:0;padding:0;text-align:left} body.woocommerce-checkout #order_review ul#shipping_method li{margin:0 0 8px;display:flex;align-items:flex-start;gap:8px} body.woocommerce-checkout #order_review ul#shipping_method li label{font-weight:400;margin:0} body.woocommerce-checkout #payment{background:#f7f7f7;border-radius:8px;padding:16px;margin-top:16px} body.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 12px;padding:0;border:0} body.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 10px} body.woocommerce-checkout #payment div.payment_box{background:#fff;border:1px solid var(--lcn-rule);border-radius:6px;padding:12px 14px;margin:8px 0 0;color:var(--lcn-ink-strong)} body.woocommerce-checkout #payment div.payment_box::before{display:none} body.woocommerce-checkout #payment .woocommerce-info{background:#fff;margin:0 0 12px} body.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:0} body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{font-size:14px;line-height:1.5;color:var(--lcn-ink);margin:0 0 12px} body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{margin:0 0 4px} body.woocommerce-checkout #payment #place_order{display:block;float:none;width:100%;min-height:54px;margin:14px 0 0;font-size:20px;line-height:1.3;text-align:center} /* ==== LCN-CHECKOUT END ==== */