/* Theme Name: EthicsCPE Theme URI: https://ethicscpe.com Author: CPE Solutions, LLC Author URI: https://cpecredit.com Description: Storefront and course delivery theme for EthicsCPE.com — state ethics CPE for CPAs. Includes styled cart, checkout, order confirmation, course player and My Account. Presentation only; jurisdiction data, CPE records and certificate fields live in the EthicsCPE Core plugin so compliance records survive a theme change. Requires WooCommerce, LearnDash and EthicsCPE Core. Version: 2.10.1 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ethicscpe Tags: e-commerce, education, custom-menu, translation-ready */ /* ========================================================================== 1. Design tokens Brand colours sampled from the EthicsCPE.com logo. ========================================================================== */ :root{ --ink:#08243F; --brand:#003060; --brand-600:#00243F; --brand-050:#E9F0F7; --accent:#3CC09C; --accent-600:#0F7A5C; --accent-050:#E6F6F1; --text:#16232E; --muted:#57666F; --muted-2:#8093A0; --line:#D6DFE6; --line-2:#E7EDF2; --paper:#F5F8FA; --card:#FFFFFF; --red:#A32A20; --amber:#B45309; --r:3px; --maxw:1200px; --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:"Source Serif 4",Georgia,"Times New Roman",serif; } /* ========================================================================== 2. Base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--card);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0} .wrap,.ec-wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;background:#fff;padding:.6rem 1rem;border:2px solid var(--accent)} .ec-kicker{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-600);display:inline-block;margin-bottom:.5rem} .ec-kicker::before{content:"";display:inline-block;width:18px;height:2px;background:var(--accent);vertical-align:middle;margin-right:.55rem} /* ========================================================================== 3. Buttons ========================================================================== */ .ec-btn, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; background:var(--brand);color:#fff;border:1px solid var(--brand);border-radius:var(--r); padding:.62rem 1.15rem;font:inherit;font-weight:600;font-size:.92rem;line-height:1.3; cursor:pointer;text-decoration:none;transition:background .13s,border-color .13s; } .ec-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff} .ec-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ec-btn--accent, .woocommerce button.button.alt, .woocommerce #payment #place_order, .woocommerce .single_add_to_cart_button{background:var(--accent-600);border-color:var(--accent-600)} .ec-btn--accent:hover, .woocommerce button.button.alt:hover, .woocommerce #payment #place_order:hover{background:#0C6349;border-color:#0C6349} .ec-btn--out{background:#fff;color:var(--brand);border-color:var(--line)} .ec-btn--out:hover{background:var(--paper);border-color:var(--brand);color:var(--brand)} .ec-btn--block{width:100%} .ec-btn--sm{padding:.42rem .8rem;font-size:.84rem} .ec-btn[disabled],.ec-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .ec-link{color:var(--accent-600);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(60,192,156,.4);cursor:pointer} .ec-link:hover{border-bottom-color:var(--accent)} /* ========================================================================== 4. Tags ========================================================================== */ .ec-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:2px;background:var(--brand-050);color:var(--brand)} .ec-tag--accent{background:var(--accent-050);color:var(--accent-600)} .ec-tag--state{background:#FBEAE7;color:var(--red)} .ec-tag--general{background:#EEF0F4;color:var(--muted)} /* ========================================================================== 5. Header ========================================================================== */ .ec-util{background:var(--ink);color:#98a2af;font-size:.78rem} .ec-util .ec-wrap{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:1rem;flex-wrap:wrap} .ec-util b{color:#fff;font-weight:600} .ec-util a{color:#98a2af;text-decoration:none} .ec-util a:hover{color:#fff} .ec-util .ec-util-nav{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0} .ec-mast{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .admin-bar .ec-mast{top:32px} .ec-mast .ec-wrap{display:flex;align-items:center;gap:2rem;min-height:88px} .ec-logo{flex:0 0 auto;display:flex;align-items:center;gap:.62rem;text-decoration:none} .ec-logo .ec-mark{width:46px;height:46px;flex:0 0 auto} .ec-logo .ec-mark svg{width:100%;height:100%;display:block} .ec-logo .ec-wm{font-family:var(--font-display);font-weight:700;font-size:1.92rem;letter-spacing:-.015em;color:var(--brand);white-space:nowrap;display:block;line-height:1} .ec-logo .ec-wm em{font-style:normal;color:var(--accent)} .ec-logo .ec-wm i{font-style:normal;color:var(--accent);font-size:.62em} .ec-logo .ec-ltag{display:flex;align-items:center;gap:.45rem;margin-top:.24rem;font-size:.55rem;letter-spacing:.138em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap} .ec-logo .ec-ltag::before,.ec-logo .ec-ltag::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.55;min-width:10px} .ec-nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center;list-style:none;padding:0} .ec-nav a{font-size:.9rem;font-weight:600;color:var(--text);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;display:inline-block} .ec-nav a:hover,.ec-nav .current-menu-item>a{color:var(--accent-600);border-bottom-color:var(--accent)} .ec-cart-btn{position:relative;background:var(--brand);color:#fff;border:0;border-radius:var(--r);padding:.5rem .85rem;cursor:pointer;font:inherit;font-weight:600;font-size:.86rem;text-decoration:none} .ec-cart-btn:hover{color:#fff;background:var(--brand-600)} .ec-cart-btn .n{background:var(--accent);color:#04241A;border-radius:2px;padding:0 .3rem;margin-left:.3rem;font-size:.76rem} .ec-burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r);padding:.45rem .6rem;cursor:pointer} /* ========================================================================== 6. Page furniture ========================================================================== */ .ec-crumbs{background:var(--paper);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)} .ec-crumbs .ec-wrap{padding-top:.7rem;padding-bottom:.7rem} .ec-crumbs a{color:var(--muted);text-decoration:none} .ec-crumbs a:hover{color:var(--accent-600)} .ec-pghead{border-bottom:1px solid var(--line);padding:2.2rem 0 1.8rem} .ec-pghead h1{font-size:2.1rem;margin-bottom:.5rem} .ec-pghead .sub{color:var(--muted);max-width:62ch;margin:0} .ec-metarow{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem} .ec-section{padding:3.4rem 0} .ec-section--alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* ========================================================================== 7. Data tables ========================================================================== */ .ec-tablewrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:auto} table.ec-dt{width:100%;border-collapse:collapse;font-size:.9rem;margin:0} table.ec-dt thead th{background:var(--brand);color:#fff;text-align:left;font-family:var(--font-ui);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:.7rem .85rem;white-space:nowrap;border-right:1px solid rgba(255,255,255,.09)} table.ec-dt thead th:last-child{border-right:0} table.ec-dt th.num,table.ec-dt td.num{text-align:right} table.ec-dt tbody td{padding:.68rem .85rem;border-bottom:1px solid var(--line-2);vertical-align:middle} table.ec-dt tbody tr:nth-child(even){background:#FBFCFD} table.ec-dt tbody tr:hover{background:var(--accent-050)} table.ec-dt tbody tr:last-child td{border-bottom:0} table.ec-dt .st{font-weight:700;color:var(--brand);white-space:nowrap} table.ec-dt .st .ab{display:inline-block;width:30px;font-size:.72rem;color:var(--muted-2);font-weight:700} .ec-tabletools{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap} .ec-search{position:relative;flex:1;min-width:220px;max-width:340px} .ec-search input{width:100%;font:inherit;font-size:.9rem;border:1px solid var(--line);border-radius:var(--r);padding:.55rem .75rem .55rem 2rem;background:#fff} .ec-search::before{content:"\2315";position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--muted-2)} .ec-filt{font:inherit;font-size:.88rem;border:1px solid var(--line);border-radius:var(--r);padding:.55rem .7rem;background:#fff;cursor:pointer} .ec-count{margin-left:auto;font-size:.82rem;color:var(--muted)} /* ========================================================================== 8. Two column layout + aside panel ========================================================================== */ .ec-cols{display:grid;grid-template-columns:1fr 330px;gap:2.6rem;align-items:start;padding:2.2rem 0 3.4rem} .ec-block{margin-bottom:2.2rem} .ec-block h2{font-size:1.3rem;padding-bottom:.5rem;border-bottom:2px solid var(--brand);margin-bottom:.9rem} .ec-spec{width:100%;border-collapse:collapse;font-size:.92rem} .ec-spec th{text-align:left;font-family:var(--font-ui);font-weight:600;color:var(--muted);padding:.6rem 0;border-bottom:1px solid var(--line-2);width:44%;vertical-align:top} .ec-spec td{padding:.6rem 0;border-bottom:1px solid var(--line-2);font-weight:600;text-align:right} .ec-aside{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);background:#fff;padding:1.3rem;position:sticky;top:126px} .ec-aside .lab{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-600);font-weight:700} .ec-aside h3{font-size:1.15rem;margin:.4rem 0 .5rem} .ec-aside .price{font-family:var(--font-display);font-size:2rem;font-weight:600;margin:.5rem 0 .1rem} .ec-aside .price small{font-family:var(--font-ui);font-size:.82rem;color:var(--muted);font-weight:400} .ec-aside .note{font-size:.8rem;color:var(--muted);margin:.3rem 0 1rem} .ec-facts{width:100%;border-collapse:collapse;font-size:.84rem;margin:1rem 0 0} .ec-facts th{text-align:left;font-family:var(--font-ui);font-weight:400;color:var(--muted);padding:.42rem 0;border-bottom:1px solid var(--line-2)} .ec-facts td{text-align:right;font-weight:600;padding:.42rem 0;border-bottom:1px solid var(--line-2)} /* NASBA sponsor block */ .ec-sponsor{display:flex;gap:.7rem;align-items:center;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-2);font-size:.74rem;line-height:1.45;color:var(--muted)} .ec-sponsor img{height:40px;width:auto;flex:0 0 auto} .ec-nasba-banner{display:flex;gap:1.1rem;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:1.2rem 1.3rem;margin:1.6rem 0} .ec-nasba-banner img{height:58px;width:auto;flex:0 0 auto} .ec-nasba-banner h4{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-600);margin-bottom:.4rem;font-weight:700} .ec-nasba-banner .facts{display:flex;gap:2rem;flex-wrap:wrap;margin-top:.7rem;font-size:.82rem;color:var(--muted)} .ec-nasba-banner .facts b{color:var(--brand);display:block;font-size:.92rem} /* ========================================================================== 9. Forms ========================================================================== */ .ec-fld{margin:.55rem 0} .ec-fld label, .woocommerce form .form-row label{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.25rem} .ec-fld input,.ec-fld select,.ec-fld textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection--single{ width:100%;font:inherit;font-size:.92rem;border:1px solid var(--line);border-radius:var(--r);padding:.55rem .7rem;background:#fff;color:var(--text); } .ec-fld textarea{min-height:130px;resize:vertical} .ec-fld input:focus-visible,.ec-fld select:focus-visible,.ec-fld textarea:focus-visible, .woocommerce form .form-row input.input-text:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--brand)} .ec-frow{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} /* ========================================================================== 10. Notices ========================================================================== */ .ec-notice{border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff;padding:1.1rem 1.3rem;font-size:.88rem} .ec-notice--warn{border-left-color:#C9A227;background:#FDF8EC} .ec-gate{display:flex;gap:.7rem;align-items:center;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper);padding:.85rem 1rem;font-size:.88rem;margin-top:.9rem} .woocommerce-message,.woocommerce-info,.woocommerce-error{border-top:0!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent)!important;background:#fff!important;border-radius:var(--r);padding:1rem 1.2rem!important;color:var(--text)!important} .woocommerce-error{border-left-color:var(--red)!important} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none!important} .woocommerce-message,.woocommerce-info{padding-left:1.2rem!important} /* ========================================================================== 10b. My Account dashboard ========================================================================== */ .ec-statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff;margin:1.2rem 0 1.6rem} .ec-stat{padding:1.1rem 1.3rem;border-left:1px solid var(--line-2)} .ec-stat:first-child{border-left:0} .ec-stat .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700} .ec-stat .v{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--brand);line-height:1.1;margin-top:.2rem} .ec-stat .v em{font-style:normal;color:var(--accent-600)} .ec-prog{height:6px;background:var(--brand-050);width:110px;display:inline-block;vertical-align:middle;margin-right:.4rem} .ec-prog span{display:block;height:100%;background:var(--accent)} .ec-pct{font-size:.8rem;color:var(--muted);font-weight:600} .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff} .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line-2)} .woocommerce-MyAccount-navigation li:last-child{border-bottom:0} .woocommerce-MyAccount-navigation a{display:block;padding:.7rem 1rem;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--text)} .woocommerce-MyAccount-navigation a:hover{background:var(--paper);color:var(--accent-600)} .woocommerce-MyAccount-navigation li.is-active a{background:var(--brand);color:#fff} .woocommerce-account .woocommerce-MyAccount-content{padding-left:1rem} @media (max-width:900px){.ec-statrow{grid-template-columns:1fr 1fr}.ec-stat{border-left:0}.woocommerce-account .woocommerce-MyAccount-content{padding-left:0;padding-top:1.4rem}} @media print{.ec-mast,.ec-util,.ec-foot,.woocommerce-MyAccount-navigation,.ec-btn{display:none!important}} /* ========================================================================== 10c. Cart & checkout ========================================================================== */ .ec-cart-grid{display:grid;grid-template-columns:1fr 340px;gap:2.2rem;align-items:start} .ec-cart-item{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);padding:.9rem 1rem;margin-bottom:.7rem;background:#fff} .ec-cart-badge{width:46px;height:46px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;flex:0 0 auto} .ec-cart-info{flex:1;min-width:0} .ec-cart-info .t{font-weight:700;font-size:.96rem} .ec-cart-info .t a{text-decoration:none;color:var(--text)} .ec-cart-info .t a:hover{color:var(--accent-600)} .ec-cart-info .s{display:flex;gap:.35rem;flex-wrap:wrap;margin:.35rem 0 .3rem} .ec-cart-price{font-weight:700;white-space:nowrap;font-size:1.02rem} .ec-cart-remove{background:none;border:0;color:var(--red);cursor:pointer;font-size:.8rem;font-weight:600;text-decoration:none;display:inline-block} .ec-cart-remove:hover{text-decoration:underline} .ec-cart-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line-2)} .ec-coupon{display:flex;gap:.5rem;align-items:center;flex:1;min-width:240px} .ec-coupon input{font:inherit;font-size:.9rem;border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;flex:1;max-width:190px} .ec-cart-empty{text-align:center;border:1px dashed var(--line);padding:3rem 2rem;background:var(--paper)} .ec-cart-empty h2{font-size:1.5rem;margin-bottom:.5rem} .ec-cart-empty p{color:var(--muted);max-width:52ch;margin:0 auto 1.2rem} .ec-sumbox{border:1px solid var(--line);border-top:3px solid var(--brand);padding:1.3rem;background:#fff;position:sticky;top:126px} .ec-sumbox h3{font-size:1.1rem;margin-bottom:.9rem} .ec-sumline{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.9rem} .ec-sumline--item{align-items:flex-start;border-bottom:1px solid var(--line-2);padding-bottom:.6rem;margin-bottom:.2rem} .ec-sumline--item small{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem} .ec-sumtotal{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem;font-weight:700;font-size:1.12rem} .ec-secure-note{font-size:.76rem;color:var(--muted);text-align:center;margin:.8rem 0 0} .wc-proceed-to-checkout{margin-top:1rem} .wc-proceed-to-checkout .checkout-button{width:100%;background:var(--accent-600);border-color:var(--accent-600)} .ec-panel{border:1px solid var(--line);background:#fff;padding:1.5rem;margin-bottom:1.3rem} .ec-panel h3{font-size:1.15rem;margin-bottom:.5rem} .ec-panel-note{font-size:.84rem;color:var(--muted);margin:.2rem 0 1rem} /* payment methods */ .wc_payment_methods{list-style:none;margin:1.2rem 0 1rem;padding:0;border:1px solid var(--line)} .wc_payment_methods li{border-bottom:1px solid var(--line-2);padding:.8rem 1rem} .wc_payment_methods li:last-child{border-bottom:0} .wc_payment_methods label{font-weight:600;font-size:.92rem;cursor:pointer} .payment_box{background:var(--paper);padding:.9rem 1rem;margin-top:.7rem;font-size:.88rem;border-left:3px solid var(--accent)} .place-order{margin-top:1rem} /* order received */ .ec-confirm{border:1px solid #CBE8DB;border-top:3px solid var(--accent);background:#fff;padding:2rem;text-align:center;margin-bottom:1.4rem} .ec-confirm--failed{border-color:#EFCBC6;border-top-color:var(--red)} .ec-confirm-tick{width:52px;height:52px;border-radius:50%;background:var(--accent-600);color:#fff;display:grid;place-items:center;font-size:1.5rem;margin:0 auto .9rem} .ec-confirm h2{font-size:1.55rem;margin-bottom:.4rem} .ec-confirm p{color:var(--muted);margin:0;max-width:56ch;margin-inline:auto} .ec-start-courses h3{margin-bottom:.9rem} .ec-start-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line);padding:1rem 1.1rem;margin-bottom:.7rem;flex-wrap:wrap} .ec-start-row .t{font-weight:700;font-size:1rem} .ec-start-row .s{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem} .ec-order-details{border:1px solid var(--line);background:#fff;margin-bottom:1.2rem} .ec-order-details summary{cursor:pointer;padding:.9rem 1.2rem;font-weight:600;font-size:.94rem;list-style:none} .ec-order-details summary::-webkit-details-marker{display:none} .ec-order-details summary::after{content:"+";float:right;color:var(--accent-600);font-size:1.1rem} .ec-order-details[open] summary::after{content:"\2212"} .ec-order-meta{list-style:none;margin:0;padding:0 1.2rem 1.1rem} .ec-order-meta li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--line-2);font-size:.9rem} .ec-order-meta li:last-child{border-bottom:0} .ec-order-meta .k{color:var(--muted)} .ec-order-meta .v{font-weight:600;text-align:right} .ec-confirm-actions{display:flex;gap:.6rem;flex-wrap:wrap} @media (max-width:1000px){ .ec-cart-grid{grid-template-columns:1fr} .ec-sumbox{position:static} .ec-start-row{flex-direction:column;align-items:flex-start} } /* ========================================================================== 10d. Front page & product ========================================================================== */ .ec-hero{background:linear-gradient(155deg,var(--brand),var(--brand-600));color:#fff;border-bottom:3px solid var(--accent)} .ec-hero .ec-wrap{padding-top:3.2rem;padding-bottom:3.2rem} .ec-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center} .ec-hero .ec-kicker{color:#7FE3C4} .ec-hero .ec-kicker::before{background:var(--accent)} .ec-hero h1{font-size:clamp(2rem,3.8vw,2.9rem);color:#fff;margin-bottom:.8rem;letter-spacing:-.01em} .ec-hero p{color:#b7c0cc;max-width:46ch;margin:0 0 1.5rem;font-size:1.02rem} .ec-hero-pts{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;gap:1.6rem;flex-wrap:wrap} .ec-hero-pts li{font-size:.86rem;color:#d5dce4;position:relative;padding-left:1.1rem} .ec-hero-pts li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--accent)} .ec-finder{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);padding:1.4rem;color:var(--text)} .ec-finder h3{font-size:1.12rem;margin-bottom:.15rem} .ec-finder .sm{font-size:.83rem;color:var(--muted);margin:0 0 1rem} .ec-finder .lab{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.3rem} .ec-sel{position:relative} .ec-sel select{width:100%;font:inherit;font-size:.98rem;font-weight:600;appearance:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.68rem 2.2rem .68rem .75rem;cursor:pointer;color:var(--text)} .ec-sel::after{content:"\25BE";position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:.8rem} .ec-finder-out{border-top:1px solid var(--line-2);margin-top:1rem;padding-top:.9rem} .ec-finder-out dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0 0 .9rem;font-size:.88rem} .ec-finder-out dt{color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;align-self:center} .ec-finder-out dd{margin:0;font-weight:600;text-align:right} .ec-finder-detail{font-size:.8rem;color:var(--muted);background:var(--paper);border-left:2px solid var(--accent);padding:.55rem .7rem;margin:0 0 .9rem} .ec-cred{border-bottom:1px solid var(--line);background:#fff} .ec-cred .ec-wrap{display:flex;padding:0} .ec-cred .c{flex:1;padding:1.15rem 1.4rem;border-left:1px solid var(--line-2)} .ec-cred .c:first-child{border-left:0;padding-left:0} .ec-cred .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:.15rem} .ec-cred .v{font-family:var(--font-display);font-size:1.22rem;font-weight:600;color:var(--brand)} .ec-cred .v em{font-style:normal;color:var(--accent-600)} .ec-steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:#fff} .ec-steps .s{padding:1rem;border-left:1px solid var(--line-2)} .ec-steps .s:first-child{border-left:0} .ec-steps .s .n{font-family:var(--font-display);font-size:1.5rem;color:var(--accent-600);font-weight:600;line-height:1} .ec-steps .s h4{font-family:var(--font-ui);font-size:.88rem;font-weight:700;margin:.3rem 0 .15rem} .ec-steps .s p{font-size:.8rem;color:var(--muted);margin:0} .ec-incl{width:100%;border-collapse:collapse;font-size:.92rem} .ec-incl td{padding:.5rem 0;border-bottom:1px solid var(--line-2);vertical-align:top} .ec-incl td:first-child{width:26px;color:var(--accent-600);font-weight:700} .ec-curr{width:100%;border-collapse:collapse;font-size:.92rem;border:1px solid var(--line)} .ec-curr td{padding:.68rem .85rem;border-bottom:1px solid var(--line-2)} .ec-curr tr:last-child td{border-bottom:0} .ec-curr .n{width:38px;color:var(--muted-2);font-weight:700;font-size:.82rem} .ec-curr .lk{width:40px;text-align:right;color:var(--muted-2)} .ec-curr tr.ex td{background:var(--paper);font-weight:600} .ec-enrolled{background:var(--accent-050);border:1px solid #CBE8DB;color:var(--accent-600);font-weight:700;padding:.6rem;text-align:center;font-size:.9rem;margin-bottom:.8rem;border-radius:var(--r)} .ec-aside form.cart{margin:0} .ec-aside form.cart button{width:100%} .ec-aside .quantity{display:none} @media (max-width:1000px){ .ec-hero-grid{grid-template-columns:1fr;gap:2rem} .ec-cred .ec-wrap{flex-wrap:wrap} .ec-cred .c{flex:1 1 46%;border-left:0;padding-left:0} .ec-steps{grid-template-columns:1fr 1fr} } /* ========================================================================== 10e. LearnDash course player ========================================================================== */ .ec-plbar{background:var(--brand);color:#fff;border-bottom:3px solid var(--accent)} .ec-plbar .ec-wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:1.1rem;padding-bottom:1.1rem;flex-wrap:wrap} .ec-plbar h2{font-size:1.28rem;color:#fff;margin:0} .ec-plbar .s{font-size:.8rem;color:#aeb8c4;margin-top:.15rem} .ec-meter{min-width:190px} .ec-meter .t{font-size:.74rem;color:#aeb8c4;text-align:right;margin-bottom:.3rem} .ec-meter .bar{height:6px;background:rgba(255,255,255,.18)} .ec-meter .bar span{display:block;height:100%;background:var(--accent);transition:width .3s} .ec-player{max-width:880px;padding:1.8rem 26px 3.4rem} .ec-step{border:1px solid var(--line);border-radius:var(--r);margin-bottom:1.1rem;background:#fff} .ec-step.is-locked{opacity:.55} .ec-step>header{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.15rem;border-bottom:1px solid var(--line-2);background:var(--paper)} .ec-step .num{width:26px;height:26px;border-radius:2px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:700;flex:0 0 auto} .ec-step.is-done .num{background:var(--accent-600)} .ec-step.is-locked .num{background:var(--muted-2)} .ec-step h3{flex:1;font-size:1.08rem;margin:0} .ec-step .stat{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)} .ec-step.is-done .stat{color:var(--accent-600)} .ec-step .body{padding:1.15rem} .ec-step-note{font-size:.86rem;color:var(--muted);margin:.6rem 0 0} .ec-pdfrow{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);padding:.9rem 1rem;background:var(--paper);flex-wrap:wrap} .ec-pdfrow .ic{width:38px;height:46px;border:1.5px solid var(--red);color:var(--red);display:grid;place-items:center;font-size:.64rem;font-weight:700;background:#fff;flex:0 0 auto} .ec-pdfrow .i{flex:1;min-width:180px} .ec-pdfrow .i .t{font-weight:700;font-size:.94rem} .ec-pdfrow .i .s{font-size:.8rem;color:var(--muted)} .ec-lesson-list{list-style:none;counter-reset:l;margin:.9rem 0 0;padding:0} .ec-lesson-list li{counter-increment:l;display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);padding:.7rem 1rem;margin-bottom:.4rem} .ec-lesson-list li::before{content:counter(l);width:24px;height:24px;background:var(--brand-050);color:var(--brand);display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:0 0 auto} .ec-lesson-list li.is-done{border-color:#CBE8DB;background:var(--accent-050)} .ec-lesson-list li.is-done::before{background:var(--accent-600);color:#fff} .ec-lesson-list a{flex:1;text-decoration:none;font-weight:600;font-size:.94rem;color:var(--text)} .ec-lesson-list a:hover{color:var(--accent-600)} .ec-lesson-list .mark{color:var(--accent-600);font-weight:700} .ec-certbox{border:1px solid var(--brand);padding:1.6rem;text-align:center;background:#fff;position:relative} .ec-certbox::after{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none} .ec-certbox .top{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700} .ec-certbox h4{font-family:var(--font-display);font-size:1.45rem;margin:.5rem 0;color:var(--brand)} .ec-certbox p{font-size:.88rem;color:var(--muted);max-width:52ch;margin:0 auto} .ec-certbox .no{margin-top:.9rem;font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--muted)} .ec-locked{max-width:520px;margin:2rem auto;border:1px solid var(--line);border-top:3px solid var(--accent);padding:2.4rem;text-align:center;background:#fff} .ec-locked .ic{font-size:1.7rem;color:var(--muted-2)} .ec-locked h2{font-size:1.4rem;margin:.6rem 0 .5rem} .ec-locked p{color:var(--muted);margin:0 0 1.4rem;font-size:.94rem} .ec-player-legal{font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:2rem} /* ========================================================================== 11. Footer ========================================================================== */ .ec-foot{background:var(--ink);color:#c3cdd8;padding:3rem 0 1.8rem;font-size:.88rem;border-top:3px solid var(--accent)} .ec-fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid #2b3340} .ec-fmark{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.01em} .ec-fmark span{color:var(--accent)} .ec-ftag{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:.35rem 0 .7rem;font-weight:700} .ec-foot h4{font-family:var(--font-ui);color:#fff;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.7rem;font-weight:700} .ec-foot ul{list-style:none;margin:0;padding:0} .ec-foot a{display:block;color:#98a2af;text-decoration:none;margin:.32rem 0} .ec-foot a:hover{color:#fff} .ec-legal{padding-top:1.3rem;font-size:.76rem;color:#6f7a88;line-height:1.65;max-width:105ch} /* ========================================================================== 12. Responsive ========================================================================== */ @media (max-width:1000px){ .ec-cols{grid-template-columns:1fr} .ec-aside{position:static} .ec-fgrid{grid-template-columns:1fr 1fr} .ec-frow{grid-template-columns:1fr} .ec-nav{position:absolute;top:88px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 26px 1rem;display:none} .ec-nav.is-open{display:flex} .ec-nav a{padding:.7rem 0;border-bottom:1px solid var(--line-2)} .ec-burger{display:block} .ec-util .ec-util-nav{display:none} table.ec-dt{font-size:.82rem} .ec-hidecol{display:none} } @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}} /* ========================================================================== FAQ, contact, sign-in and verification Added for the pages the original build did not cover. Uses the same tokens as everything above so it reads as one system. ========================================================================== */ .ec-faq { max-width: 820px; } .ec-faq-group { margin-bottom: 2rem; } .ec-faq-group h2 { font-size: 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--brand); margin-bottom: .2rem; } details.ec-q { border-bottom: 1px solid var(--line-2); } details.ec-q summary { list-style: none; cursor: pointer; padding: .95rem 2rem .95rem 0; font-weight: 600; font-size: .98rem; position: relative; } details.ec-q summary::-webkit-details-marker { display: none; } details.ec-q summary::after { content: "+"; position: absolute; right: .4rem; top: .85rem; font-size: 1.2rem; color: var(--accent-600); font-weight: 400; } details.ec-q[open] summary::after { content: "\2212"; } .ec-a { padding: 0 2rem 1.1rem 0; color: var(--muted); font-size: .94rem; } .ec-a p { margin: 0 0 .6rem; } .ec-a p:last-child { margin: 0; } .ec-contact-grid { display: grid; grid-template-columns: 1fr 330px; gap: 2.4rem; align-items: start; padding: 2.2rem 0 3.4rem; } @media (max-width: 900px) { .ec-contact-grid { grid-template-columns: 1fr; } } .ec-infoblock { border: 1px solid var(--line); border-top: 3px solid var(--accent); background: #fff; padding: 1.3rem; margin-bottom: 1.2rem; } .ec-infoblock h3 { font-size: 1.05rem; margin-bottom: .6rem; } .ec-infoblock dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; font-size: .9rem; } .ec-infoblock dt { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; align-self: center; } .ec-infoblock dd { margin: 0; font-weight: 600; } .ec-auth { max-width: 420px; } .ec-auth .login-username, .ec-auth .login-password { margin-bottom: .9rem; } .ec-auth label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; } .ec-auth input[type="text"], .ec-auth input[type="password"] { width: 100%; font: inherit; font-size: .95rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; } .ec-auth .login-submit input { display: inline-flex; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--r); padding: .62rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer; } .ec-auth .login-remember { font-size: .88rem; margin-bottom: .9rem; } .ec-auth .login-remember label { display: inline; font-weight: 400; } .ec-verifybox { max-width: 620px; } .ec-verifybox dl { margin: 0; } .ec-verifybox dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-top: .9rem; } .ec-verifybox dd { margin: .1rem 0 0; font-weight: 600; } .ec-verifybox input[type="text"] { flex: 1 1 260px; font: inherit; font-size: .95rem; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .7rem; } /* ========================================================================== Classes referenced by templates that had no rule yet ========================================================================== */ /* Cart and checkout column layout. */ .ec-cart-items { min-width: 0; } .ec-cart-side { min-width: 0; } .ec-checkout-main { min-width: 0; } .ec-review { min-width: 0; } @media (max-width: 900px) { .ec-cart-items, .ec-cart-side, .ec-checkout-main { grid-column: 1 / -1; } } /* Header logo type stack and the cart menu item. */ .ec-ltype { display: block; } .ec-menu-cart { list-style: none; } /* Small text and page subtitles, both prefixed and bare. */ .ec-sm, .sm { font-size: .88rem; color: var(--muted); } .ec-sub, .sub { color: var(--muted); font-size: 1.02rem; margin: .4rem 0 0; } /* Post/page content rendered through the_content(). */ .ec-entry > :first-child { margin-top: 0; } .ec-entry > :last-child { margin-bottom: 0; } .ec-entry p { margin: 0 0 .9rem; } .ec-entry ul, .ec-entry ol { margin: 0 0 .9rem 1.15rem; padding: 0; } .ec-entry li { margin-bottom: .35rem; } .ec-entry h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; } .ec-entry h3 { font-size: 1.05rem; margin: 1.3rem 0 .5rem; } .ec-entry a { color: var(--accent-600); font-weight: 600; } .ec-entry blockquote { margin: 1.2rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent); color: var(--muted); } /* Unconfirmed requirement marker. Amber is a warning colour here — do not reuse it decoratively. */ .ec-tbc { color: var(--amber); font-weight: 600; font-size: .85em; } /* ========================================================================== 18. Phones The layout already collapses at 1000px, but nothing below that was tuned. On a 412px-wide handset — an S24 Ultra, a Pixel, most iPhones — the two tiers below take over. Written mobile-last to sit on top of everything above without touching the desktop rules. ========================================================================== */ @media (max-width: 640px) { /* Reclaim horizontal space. 26px each side costs 13% of a 412px screen. */ .ec-wrap { padding: 0 18px; } /* Display sizes tuned for desktop are oppressive on a phone. */ h1, .ec-pghead h1 { font-size: 1.62rem; line-height: 1.22; } h2 { font-size: 1.28rem; } .ec-hero h1 { font-size: 1.75rem; } .ec-hero p { font-size: .96rem; } .ec-hero .ec-wrap { padding-top: 2.2rem; padding-bottom: 2.2rem; } .ec-pghead { padding: 1.4rem 0; } /* Anchor the nav dropdown to the masthead instead of a hardcoded offset, which breaks the moment the logo wraps to two lines. */ .ec-nav { top: 100%; } /* Touch targets. 38px was under the 44px minimum. */ .ec-btn { min-height: 44px; padding: .7rem 1.1rem; } .ec-btn--sm { min-height: 40px; padding: .55rem .9rem; } .ec-burger { min-width: 44px; min-height: 44px; } .ec-nav a { padding: .85rem 0; } /* 16px is the threshold below which iOS Safari zooms on focus. Android does not, but a US CPA audience is heavily iPhone. */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select, textarea, .ec-sel select, .ec-fld input, .ec-fld select, .ec-fld textarea { font-size: 16px; } /* Credential strip: four flex columns become two rows of two. */ .ec-cred .ec-wrap { flex-wrap: wrap; } .ec-cred .c { flex: 1 1 50%; min-width: 50%; padding: .85rem 1rem; border-left: 0; border-top: 1px solid var(--line-2); } .ec-cred .c:first-child { padding-left: 1rem; } .ec-cred .v { font-size: 1.05rem; } /* Footer: two columns is too narrow for link lists at this width. */ .ec-fgrid { grid-template-columns: 1fr; gap: 1.6rem; } /* Hero proof points stack rather than wrapping raggedly. */ .ec-hero-pts { flex-direction: column; gap: .5rem; } /* Requirement finder result: labels above values reads better than a two-column dl at this width. */ .ec-finder-out dl { grid-template-columns: 1fr; gap: .15rem; } .ec-finder-out dd { text-align: left; margin-bottom: .5rem; } /* Spec tables: same reasoning. */ .ec-spec th, .ec-specs th { width: 50%; font-size: .84rem; } .ec-spec td, .ec-specs td { font-size: .88rem; } /* Data tables scroll horizontally rather than crushing columns. The shadow hints there is more to the right. */ .ec-tablewrap { -webkit-overflow-scrolling: touch; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat, linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat, #fff; } table.ec-dt { font-size: .84rem; } .ec-dt th, .ec-dt td { padding: .6rem .55rem; white-space: nowrap; } .ec-dt td.st { white-space: normal; min-width: 9rem; } /* Course player steps stack; the number sits inline with the heading. */ .ec-step { margin-bottom: .8rem; } .ec-plbar .ec-wrap { flex-direction: column; align-items: flex-start; gap: .6rem; } .ec-plbar h1 { font-size: 1.15rem; } /* Cart and checkout summary boxes go full width. */ .ec-cart-grid, .ec-cols, .ec-contact-grid { gap: 1.6rem; } .ec-aside { position: static; } /* Table tools stack instead of squeezing onto one line. */ .ec-tabletools { flex-direction: column; align-items: stretch; gap: .6rem; } .ec-tabletools .ec-search input, .ec-tabletools .ec-filt { width: 100%; } .ec-metarow { gap: .35rem; } .price { font-size: 1.65rem; } } @media (max-width: 430px) { /* Very narrow handsets. The logo wordmark is the first thing to give. */ .ec-mark { width: 38px; height: 38px; } .ec-util { font-size: .72rem; } h1, .ec-pghead h1 { font-size: 1.45rem; } .ec-hero h1 { font-size: 1.55rem; } /* One credential per row rather than two cramped ones. */ .ec-cred .c { flex: 1 1 100%; min-width: 100%; } /* Buttons that sit side by side wrap to full width instead of overflowing the viewport. */ .ec-pghead .ec-btn, .ec-block .ec-btn { width: 100%; justify-content: center; } } /* Nothing should ever scroll sideways. If a long unbroken string appears — a certificate number, a board URL — break it rather than widen the page. */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .ec-entry a, .ec-verifybox dd, code { overflow-wrap: anywhere; } } /* Anchor the mobile nav to the masthead at every width, not just on phones — the 88px offset above assumes a logo that never wraps. */ @media (max-width: 1000px) { .ec-nav { top: 100%; } } /* ========================================================================== 19. NASBA badge sizing The badge is a portrait lockup roughly 3:4. Constrain by height and let width follow, or it stretches. ========================================================================== */ .ec-nasba-banner img, .ec-sponsor img { object-fit: contain; max-width: 100%; } /* Sidebar sponsor line: the badge was competing with the text beside it. */ .ec-sponsor { align-items: flex-start; } .ec-sponsor img { height: 46px; } @media (max-width: 640px) { /* Banner stacks so the badge is not squeezed against wrapping text. */ .ec-nasba-banner { flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1rem; } .ec-nasba-banner img { height: 64px; } .ec-nasba-banner .facts { gap: 1.1rem; } .ec-sponsor img { height: 42px; } } /* ========================================================================== 20. Contrast and badge legibility ========================================================================== */ /* The requirement text is the whole point of the finder — it was the palest thing in the card at 12.8px and 5.6:1. Full ink, larger, more room. Now ~15:1, which reads cleanly on a phone in daylight. */ .ec-finder-detail { font-size: .875rem; line-height: 1.5; color: var(--text); border-left-width: 3px; padding: .7rem .85rem; } /* Same problem, smaller: the sidebar sponsor note. */ .ec-sponsor { color: #4A5A66; } /* The NASBA lockup carries a flag, two lines of type and the QAS swoosh. Below about 70px tall it stops being a badge and becomes a smudge. */ .ec-nasba-banner img { height: 82px; } .ec-sponsor img { height: 58px; } @media (max-width: 640px) { .ec-nasba-banner img { height: 76px; } .ec-sponsor img { height: 54px; } } /* ========================================================================== 21. Cart button in the nav The button lives inside the menu, so `.ec-nav a` (0,1,1) outranked `.ec-cart-btn` (0,1,0) and repainted the label near-black on navy — invisible. Match the nav's specificity and neutralise the link styling the button never wanted. ========================================================================== */ .ec-nav a.ec-cart-btn { display: inline-flex; align-items: center; gap: .4rem; color: #fff; background: var(--brand); border: 0; border-bottom: 0; border-radius: var(--r); padding: .5rem .85rem; font-size: .86rem; font-weight: 600; line-height: 1.2; text-decoration: none; } .ec-nav a.ec-cart-btn:hover, .ec-nav a.ec-cart-btn:focus-visible { color: #fff; background: var(--brand-600); border-bottom: 0; } /* The count sits as a pill on the button. */ .ec-nav a.ec-cart-btn .n { display: inline-block; min-width: 1.4em; text-align: center; background: var(--accent); color: #04241A; border-radius: 999px; padding: .05rem .35rem; margin: 0; font-size: .74rem; font-weight: 700; line-height: 1.5; } /* On mobile the nav is a stacked dropdown, so the button goes full width rather than sitting oddly inline with the text links. */ @media (max-width: 1000px) { .ec-nav a.ec-cart-btn { justify-content: center; width: 100%; margin-top: .6rem; min-height: 44px; } } /* ========================================================================== 22. Masthead on phones The burger was being pushed outside the container in portrait. Cause: the tagline carries `white-space: nowrap` and is ~280px wide, wider than the wordmark itself, and `.ec-logo { flex: 0 0 auto }` means the logo never shrinks. My earlier `.ec-ltag { display: none }` never applied because the base rule is `.ec-logo .ec-ltag` (0,2,0) and outranked it. In landscape there was room, so the menu appeared — which is why this only showed up in portrait. ========================================================================== */ @media (max-width: 640px) { /* Match the base rule's specificity so this actually wins. */ .ec-logo .ec-ltag { display: none; } /* Smaller wordmark buys back another ~50px. */ .ec-wm { font-size: 1.45rem; } /* Tighten the row and let the logo give way if it still needs to. */ .ec-mast .ec-wrap { gap: .75rem; min-height: 64px; } .ec-logo { flex: 0 1 auto; min-width: 0; } /* The burger must never be the thing that gets squeezed out. */ .ec-burger { flex: 0 0 auto; margin-left: auto; } /* Sticky header on a phone eats a lot of a short viewport. Relative, not static — the nav dropdown is absolutely positioned against this, and static would send it to the wrong ancestor. */ .ec-mast { position: relative; top: auto; } } @media (max-width: 430px) { .ec-wm { font-size: 1.3rem; } .ec-mast .ec-wrap { min-height: 58px; } } /* ========================================================================== 23. Readability The base was 15px at 1.55 line-height. That is fine for UI chrome but punishing for the long regulatory prose these pages actually carry — a course description running several hundred words, and requirement text quoting statute. Raised across the board, with the biggest lift on the prose itself and on the small print that carries compliance meaning. ========================================================================== */ body { font-size: 16.5px; line-height: 1.62; } /* Long-form reading: course descriptions, requirement detail, editor content. Slightly larger than the UI and noticeably more open. */ .ec-entry, .ec-block p, .ec-block li { font-size: 1.0625rem; line-height: 1.72; } .ec-entry li { margin-bottom: .45rem; } .ec-entry p { margin: 0 0 1.05rem; } /* Measure: prose set the full width of a 1200px container is hard to track back from one line to the next. Cap it. */ .ec-block .ec-entry, .ec-block > p, .ec-block > ul, .ec-block > ol { max-width: 74ch; } /* Intro paragraphs and page subtitles. */ .ec-lede { font-size: 1.12rem; line-height: 1.6; } .ec-sub { font-size: 1.06rem; line-height: 1.55; } .ec-sm { font-size: .94rem; } /* Data tables — these carry hours, cycles and prices, so they need to be read accurately rather than merely fitted. */ table.ec-dt { font-size: .95rem; } .ec-dt th, .ec-dt td { padding: .78rem .7rem; } table.ec-dt thead th { font-size: .74rem; } /* Spec and requirement tables in the sidebar and detail pages. */ .ec-spec, .ec-specs { font-size: .95rem; } .ec-spec th, .ec-spec td, .ec-specs th, .ec-specs td { padding: .6rem 0; } /* Small print that carries compliance meaning — the sponsor disclosure, the board caveat, the certificate number. Legibility here is not optional. */ .ec-legal { font-size: .84rem; line-height: 1.65; } .ec-sponsor { font-size: .82rem; line-height: 1.55; } .ec-player-legal { font-size: .84rem; } .ec-secure-note { font-size: .84rem; } .ec-facts { font-size: .9rem; } .ec-nasba-banner .facts { font-size: .9rem; } /* Form fields and buttons follow the base up. */ .ec-btn { font-size: .95rem; } .ec-btn--sm { font-size: .88rem; } .ec-nav a { font-size: .95rem; } .ec-search input, .ec-filt { font-size: .95rem; } .ec-fld label, .woocommerce form .form-row label { font-size: .9rem; } /* Course player. */ .ec-step-note { font-size: .95rem; } .ec-gate { font-size: .98rem; } /* Headings scale with the body so the hierarchy holds. */ h2 { font-size: 1.42rem; } h3 { font-size: 1.2rem; } .ec-block h2 { font-size: 1.42rem; } @media (max-width: 640px) { /* Phones want a touch more, not less — reading conditions are worse. */ body { font-size: 16.5px; line-height: 1.6; } .ec-entry, .ec-block p, .ec-block li { font-size: 1.03rem; line-height: 1.7; } .ec-lede { font-size: 1.05rem; } .ec-sub { font-size: 1rem; } .ec-block .ec-entry, .ec-block > p { max-width: none; } } /* ========================================================================== 24. Course write-up on the player The description and learning objectives were written into the course and then never rendered — the player replaced the content entirely. They belong in both views: a learner should see the objectives at the start of the program, and someone who lands here without access should see what the course is rather than only a padlock. ========================================================================== */ .ec-about { max-width: 78ch; margin: 2.6rem auto 0; padding-top: 2.2rem; border-top: 1px solid var(--line); } .ec-about h2 { font-size: 1.35rem; margin-bottom: 1rem; } .ec-about--intro { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 2.2rem; } .ec-about--intro h1 { margin-bottom: 1rem; } /* Numbered learning objectives read better with room between them. */ .ec-about .ec-entry ol { margin-left: 1.3rem; } .ec-about .ec-entry ol li { margin-bottom: .7rem; } @media (max-width: 640px) { .ec-about { margin-top: 1.8rem; padding-top: 1.6rem; } } /* ========================================================================== 25. LearnDash container reset LearnDash 5 ships global CSS that constrains the page container on its own post types, which squeezed the whole course page — header and footer included — into a narrow column. The theme owns page width through .ec-wrap and nothing above it should set a width. Scoped to LearnDash singles so it cannot leak onto the store or the marketing pages. ========================================================================== */ body.single-sfwd-courses, body.single-sfwd-lessons, body.single-sfwd-topic, body.single-sfwd-quiz { max-width: none; width: auto; margin: 0; padding: 0; } body.single-sfwd-courses > *:not(.ec-player), body.single-sfwd-lessons > *:not(.ec-player), body.single-sfwd-topic > *:not(.ec-player), body.single-sfwd-quiz > *:not(.ec-player) { max-width: none; width: auto; margin-left: 0; margin-right: 0; float: none; } /* Common wrappers a plugin or block theme may insert between body and our markup. Harmless if they are not present. */ body.single-sfwd-courses #page, body.single-sfwd-courses #content, body.single-sfwd-courses .site, body.single-sfwd-courses .site-content, body.single-sfwd-courses .site-main, body.single-sfwd-courses .content-area, body.single-sfwd-courses .wp-site-blocks, body.single-sfwd-courses .entry-content, body.single-sfwd-quiz #page, body.single-sfwd-quiz #content, body.single-sfwd-quiz .site-main, body.single-sfwd-quiz .entry-content { max-width: none; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Re-assert the one wrapper that should be constrained, after the resets above have widened everything around it. */ body.single-sfwd-courses #primary.ec-player, body.single-sfwd-lessons #primary.ec-player, body.single-sfwd-courses .ec-player, body.single-sfwd-lessons .ec-player { max-width: 880px; width: auto; margin-left: auto; margin-right: auto; padding-left: 26px; padding-right: 26px; } body.single-sfwd-courses .ec-wrap:not(.ec-player), body.single-sfwd-lessons .ec-wrap:not(.ec-player), body.single-sfwd-topic .ec-wrap:not(.ec-player), body.single-sfwd-quiz .ec-wrap:not(.ec-player) { max-width: var(--maxw); width: auto; margin-left: auto; margin-right: auto; padding-left: 26px; padding-right: 26px; } @media (max-width: 640px) { body.single-sfwd-courses .ec-wrap, body.single-sfwd-lessons .ec-wrap, body.single-sfwd-topic .ec-wrap, body.single-sfwd-quiz .ec-wrap, body.single-sfwd-courses .ec-player { padding-left: 18px; padding-right: 18px; } } /* LearnDash's own quiz UI renders inside our pages; keep it in the grid. */ .learndash-wrapper { max-width: none; } /* ========================================================================== 26. Finder requirement box This paragraph is the answer the visitor came for. It was styled as an aside — small, muted, on a pale fill — which reads as a footnote. Give it the weight of a finding: full ink, a tinted panel rather than grey, and a solid accent rule. ========================================================================== */ .ec-finder-detail { color: var(--text); background: var(--accent-050); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; font-size: .9rem; line-height: 1.55; padding: .8rem .9rem; margin: .9rem 0 1rem; } /* ========================================================================== 26. Product page overflow on phones ========================================================================== Symptom: on a 390px iPhone or a 412px Galaxy, the course description ran off the right edge of the screen and was clipped — with no way to scroll to the missing words. Cause: `.ec-cols` is a grid. A grid item's default `min-width` is `auto`, which means it refuses to shrink below the widest thing inside it. The left column contains `.ec-curr` and `.ec-incl`, so the column sized itself to those tables and pushed past the viewport, carrying the prose with it. `html, body { overflow-x: hidden }` in section 18 then hid the overflow, turning a scroll into a clip. The cart and checkout grids were already given `min-width: 0` further up; `.ec-cols` was missed. This closes that gap and hardens what sits inside. ========================================================================== */ /* The fix. Harmless at desktop widths, where content fits anyway. */ .ec-cols > *, .ec-hero-grid > *, .ec-contact-grid > *, .ec-cart-grid > * { min-width: 0; } .ec-block, .ec-entry, .ec-aside { min-width: 0; } /* Pasted descriptions carry whatever the editor produced. Nothing inside the prose block may exceed its column. */ .ec-entry { overflow-wrap: break-word; } .ec-entry img, .ec-entry iframe, .ec-entry video { max-width: 100%; height: auto; } .ec-entry pre { max-width: 100%; overflow-x: auto; } /* A pasted table shouldn't be able to widen the page. The scroll has to go on a wrapper, not the table: display:block on a table collapses its own layout, so the header cells run together on one line and nothing aligns. Where there is no wrapper — content pasted into the editor — the table keeps proper table layout and simply wraps within the column. */ .ec-entry table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; } .ec-entry table th, .ec-entry table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; } .ec-entry table thead th { background: var(--paper); border-bottom: 2px solid var(--line); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; } /* First column is usually the row label, so let it carry the weight. */ .ec-entry table tbody td:first-child { font-weight: 600; } .ec-entry table tbody tr:last-child td { border-bottom: 0; } /* On a phone the scroll is worth the trade, and there it goes on a wrapper the table sits inside rather than on the table itself. */ @media (max-width: 640px) { .ec-entry table { display: block; overflow-x: auto; white-space: nowrap; } } @media (max-width: 640px) { /* Fixed layout stops one long cell dictating the column width. Scoped to phones so the desktop proportions are untouched. */ .ec-incl, .ec-curr, .ec-facts { table-layout: fixed; width: 100%; } .ec-incl td, .ec-curr td, .ec-facts th, .ec-facts td { overflow-wrap: break-word; } /* Two columns of step text is too tight below 640px. */ .ec-steps { grid-template-columns: 1fr; } .ec-steps .s { border-left: 0; border-top: 1px solid var(--line-2); } .ec-steps .s:first-child { border-top: 0; } /* Sponsor block and gate notice wrap rather than push. */ .ec-gate, .ec-sponsor { overflow-wrap: break-word; } } /* ========================================================================== 27. Button text contrast ========================================================================== Buttons that inherit the theme's link colour rendered emerald text on a dark fill — notably "Download" in My Account → Certificates and Woo's block-based "Proceed to Checkout". Dark buttons carry white text. ========================================================================== */ .ec-btn--brand, .ec-btn--accent, .ec-btn--dark, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content .ec-btn, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-element-button, .wp-block-button__link { color: #fff; } .ec-btn--brand:hover, .ec-btn--accent:hover, .ec-btn--dark:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content .ec-btn:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wp-element-button:hover, .wp-block-button__link:hover { color: #fff; } /* Woo's block cart button ships slate grey. Use the brand emerald. */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background-color: var(--accent-600, #0F7A5C); border-color: var(--accent-600, #0F7A5C); } /* WooCommerce Blocks wraps the label in `.wc-block-components-button__text`, which carries its own colour — so setting colour on the button alone left emerald text on an emerald fill. Its stylesheet also loads after the theme at a higher specificity, which is why `!important` is warranted here and almost nowhere else in this file. */ .wc-block-cart__submit-button, .wc-block-cart__submit-button span, .wc-block-components-checkout-place-order-button, .wc-block-components-checkout-place-order-button span, .wc-block-cart__submit-button .wc-block-components-button__text, .wc-block-components-checkout-place-order-button .wc-block-components-button__text, .wc-block-components-button:not(.is-link), .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: #fff !important; } .wc-block-cart__submit-button:hover, .wc-block-cart__submit-button:hover span, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-checkout-place-order-button:hover span { color: #fff !important; } /* ========================================================================== 28. Requirement note contrast ========================================================================== The requirement summary on the front-page finder and the state pages was set in --muted on a tinted panel, which is too faint to read comfortably and fails WCAG AA. Body ink on that background passes. ========================================================================== */ /* The real class is .ec-finder-detail. Sections 20 and 24 already raised it to --text; this restates it last so nothing later can pale it out again. */ .ec-finder-detail, .ec-finder-out .ec-finder-detail { color: var(--text); background: var(--accent-050); } /* Sidebar notes were also set in --muted on tinted panels. */ .ec-aside .note, .ec-sponsor { color: var(--muted); } /* Buttons inside data tables — the Download control in My Account → Certificates. Restricted to elements that are actually buttons. An earlier attempt used `a:not(.ec-link)` and caught the plain Verify link beside it, turning it white on white. Never match bare anchors here. */ .ec-dt .ec-btn:not(.ec-btn--out), .ec-dt a.button, .ec-dt button.button, .woocommerce-MyAccount-content table .ec-btn:not(.ec-btn--out), .woocommerce-MyAccount-content table a.button { color: #fff; } /* Plain links in data tables stay emerald and legible, whatever class the plugin gives them. */ .ec-dt a:not(.ec-btn):not(.button), .woocommerce-MyAccount-content table a:not(.ec-btn):not(.button) { color: var(--accent-600); font-weight: 600; text-decoration: none; } .ec-dt a:not(.ec-btn):not(.button):hover, .woocommerce-MyAccount-content table a:not(.ec-btn):not(.button):hover { color: var(--accent-600); text-decoration: underline; } /* ========================================================================== 29. The outline button is white-on-white bait ========================================================================== `.ec-btn--out` is a white fill with brand text. Three separate rules in sections 27 and 28 set `color: #fff` on buttons to fix dark controls, and each time the outline variant was caught too — the Detail buttons in the shop table vanished. Rather than keep adding `:not()` in every new rule, the variant is restated here, last in the cascade, so it cannot be whitened by anything above. If you add a rule that whitens button text, you do not need to exclude `.ec-btn--out`. This section already does it. ========================================================================== */ .ec-btn--out, .ec-btn--out:hover, .ec-btn--out:focus, .ec-dt .ec-btn--out, .woocommerce-MyAccount-content .ec-btn--out, .woocommerce-MyAccount-content table .ec-btn--out { color: var(--brand); background: #fff; } .ec-btn--out:hover, .ec-dt .ec-btn--out:hover { background: var(--paper); border-color: var(--brand); } /* ========================================================================== 30. Add to cart buttons in block-based product grids ========================================================================== The "New in store" cross-sell on the empty cart, and any block product grid, renders its button as `.wp-block-button__link` or `.wc-block-components-product-button__button`. Section 27 set those to white without `!important`, which Woo's own stylesheet outranks, so the label kept the emerald link colour on a dark fill. This is the same failure as the checkout button in 2.5.1 — the earlier fix listed `.wc-block-components-button` in the `!important` group but left `.wp-block-button__link` behind in the ordinary group. `.ec-btn--out` is excluded throughout: it is a white fill with brand text, and whitening it makes it invisible. Section 29 restates it afterwards as a second line of defence. ========================================================================== */ .wp-block-button__link:not(.ec-btn--out), .wp-block-button__link:not(.ec-btn--out) span, .wc-block-components-product-button__button:not(.ec-btn--out), .wc-block-components-product-button__button:not(.ec-btn--out) span, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wc-block-grid__product-add-to-cart .wp-block-button__link span, .wp-block-woocommerce-cart .wp-block-button__link, .wp-block-woocommerce-empty-cart-block .wp-block-button__link, .woocommerce a.button.add_to_cart_button, .woocommerce button.button.add_to_cart_button, .wc-block-components-product-button a, .wc-block-components-product-button button { color: #fff !important; } .wp-block-button__link:not(.ec-btn--out):hover, .wp-block-button__link:not(.ec-btn--out):focus, .wc-block-components-product-button__button:not(.ec-btn--out):hover, .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .woocommerce a.button.add_to_cart_button:hover, .wc-block-components-product-button a:hover, .wc-block-components-product-button button:hover { color: #fff !important; } /* Match the brand rather than Woo's default slate. */ .wc-block-components-product-button__button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .woocommerce a.button.add_to_cart_button { background-color: var(--accent-600); border-color: var(--accent-600); } /* ========================================================================== 31. Course cover image on the product page ========================================================================== The product template never output a featured image — covers appeared only in the shop grid and cart, both of which use WooCommerce's own templates. The cover now sits at the top of the sidebar, above the price. Sidebar rather than the reading column, for three reasons: it does not push the description below the fold, it sits directly above the Add to cart button where it does the most work, and it needs no change to the .ec-cols grid — so nothing about the existing layout moves. ========================================================================== */ .ec-cover { margin: 0 0 1rem; line-height: 0; border: 1px solid var(--line); background: var(--paper); overflow: hidden; } .ec-cover img { display: block; width: 100%; height: auto; max-width: 100%; } @media (max-width: 1000px) { /* Below 1000px .ec-cols is a single column and the sidebar drops beneath the description, which would bury the cover. Cap the height so it reads as a banner rather than a full-width slab on a phone. */ .ec-cover img { max-height: 260px; object-fit: contain; object-position: center; } } /* ========================================================================== 32. Product lists — related products, cross-sells, shop grid ========================================================================== WooCommerce outputs these as a plain