/* ===================================================================== TRUGS — Read Successfully site style (v1.2.8, Oct 2026) For Divi 4.27.x. Paste into: Divi > Theme Options > General > Custom CSS (replace the old font rules — see INSTALL.md step 2). Font: Poppins (already loaded on the site). Palette taken from the live site panels, Trugs logo and card frames. HOW TO USE THE CLASSES In any Divi Section / Row / Module: open its settings > Advanced > CSS ID & Classes > CSS Class, and type one of the class names below. ===================================================================== */ /* ---------- 1. Colours & sizes (change these to restyle everything) -- */ :root{ --tr-ink:#1B2A4A; /* headings, body text, dark bands */ --tr-ink-soft:#3F4B63; /* body copy */ --tr-cream:#FFF8EC; /* page background (easier for dyslexic readers than pure white) */ --tr-white:#FFFFFF; --tr-sky:#E8F7FD; /* pale cyan band */ --tr-cyan:#00AEEF; /* Trugs logo cyan — decoration / bands */ --tr-cyan-deep:#0071B9; /* links & buttons (white text passes AA) */ --tr-green:#00A650; /* Trugs card frame green — decoration */ --tr-leaf:#70B75C; /* site's green panels */ --tr-blue:#439CDC; /* site's blue panels */ --tr-green-deep:#007A3D; /* green text / buttons */ --tr-sun:#F9B300; /* Trugs yellow (site panels) — highlight / CTA */ --tr-coral:#E83223; /* Trugs red (site panels) */ --tr-plum:#8300E9; /* Trugs purple */ --tr-line:#E6DCC8; /* hairlines on cream */ --tr-radius:18px; --tr-radius-sm:10px; --tr-shadow:0 1px 2px rgba(27,42,74,.06),0 8px 24px rgba(27,42,74,.08); --tr-shadow-lift:0 2px 4px rgba(27,42,74,.08),0 16px 36px rgba(27,42,74,.14); --tr-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ---------- 2. Base type & page ------------------------------------- */ html body, html body #page-container, html body #main-content{ background-color:var(--tr-cream); } html body, html body p, html body li, html body .et_pb_module, html body .et_pb_text_inner{ font-family:var(--tr-font)!important; color:var(--tr-ink-soft); font-size:17px; line-height:1.75; letter-spacing:.005em; } html body p{ padding-bottom:1em; } html body .et_pb_text_inner p:last-of-type{ padding-bottom:0; } html body .et_pb_text_inner{ max-width:70ch; } /* comfortable line length */ html body .et_pb_text_align_center .et_pb_text_inner{ margin-left:auto; margin-right:auto; } /* The old repeating wavy-line background. Delete this rule to keep it. */ html body.custom-background{ background-image:none!important; } /* Paragraphs were set to semi-bold module by module; normal weight reads better */ html body .et_pb_text_inner p, html body .et_pb_text_inner li{ font-weight:400; } /* Headings — Poppins everywhere (replaces Amatic SC on H1) */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .et_pb_module h1, html body .et_pb_module h2, html body .et_pb_module h3, html body .et_pb_module h4, html body .et_pb_module_header, html body .entry-title{ font-family:var(--tr-font)!important; color:var(--tr-ink); font-weight:700; line-height:1.2; letter-spacing:-.01em; padding-bottom:.45em; } html body h1, html body .et_pb_module h1{ font-size:clamp(34px,4.6vw,54px)!important; font-weight:800; letter-spacing:-.02em; } html body h2, html body .et_pb_module h2{ font-size:clamp(26px,3.2vw,38px); } html body h3, html body .et_pb_module h3{ font-size:clamp(20px,2.2vw,25px); } html body h4{ font-size:19px; } html body h5, html body h6{ font-size:16px; } html body a{ color:var(--tr-cyan-deep); text-underline-offset:3px; } html body .et_pb_text_inner a:not(.et_pb_button){ text-decoration:underline; text-decoration-thickness:2px; } html body a:hover{ color:var(--tr-ink); } html body :focus-visible{ outline:3px solid var(--tr-sun); outline-offset:3px; border-radius:4px; } html body ul:not(.sub-menu):not(.products):not(.et_mobile_menu) li::marker{ color:var(--tr-green); } html body strong{ color:var(--tr-ink); } /* Text stays dark by default (the old site forced black so white text could not vanish on white). Light text is allowed only inside sections given a dark class: tr-dark, tr-baize, tr-fill-coral. */ html #et-boc .et-l .tr-dark :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,label,a:not(.et_pb_button)), html body .tr-dark :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,label,a:not(.et_pb_button)){ color:#fff!important; } html body .tr-dark p, html body .tr-dark li{ color:#E3E8F2!important; } html #et-boc .et-l--post :is(h1,h2,h3,h4,h5,h6){ color:var(--tr-ink)!important; } html #et-boc .et-l--post :is(p,li,span,label){ color:var(--tr-ink-soft)!important; } /* ---------- 3. Header & menu (default Divi header) ------------------- */ html body #main-header{ background:#fff!important; box-shadow:none!important; border-bottom:3px solid var(--tr-cyan); } html body #main-header::after{ /* thin rainbow of Trugs colours */ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:linear-gradient(90deg,var(--tr-green) 0 20%,var(--tr-sun) 20% 40%,var(--tr-coral) 40% 60%,var(--tr-plum) 60% 80%,var(--tr-cyan-deep) 80% 100%); } html body #logo{ max-height:62%!important; } html body #top-menu li a, html body .et-menu-nav li a, html body .et_pb_menu .et-menu > li > a{ font-family:var(--tr-font)!important; font-weight:600!important; font-size:15px!important; color:var(--tr-ink)!important; letter-spacing:0; } html body #top-menu > li > a:hover, html body #top-menu > li.current-menu-item > a, html body #top-menu > li.current-menu-ancestor > a{ color:var(--tr-cyan-deep)!important; opacity:1!important; } html body #top-menu > li.current-menu-item > a, html body #top-menu > li.current-menu-ancestor > a{ box-shadow:inset 0 -3px 0 var(--tr-sun); } html body #top-menu li ul, html body .nav li ul, html body .et_pb_menu .et-menu li ul{ border-top:3px solid var(--tr-cyan)!important; border-radius:0 0 var(--tr-radius-sm) var(--tr-radius-sm); box-shadow:var(--tr-shadow-lift)!important; padding:10px 0!important; width:250px; } html body #top-menu li li a, html body .nav li li a{ font-weight:500!important; font-size:14px!important; padding:8px 20px!important; width:250px; border-radius:6px; } html body #top-menu li li a:hover{ background:var(--tr-sky)!important; } html body .et_mobile_menu{ border-top:3px solid var(--tr-cyan)!important; border-radius:0 0 var(--tr-radius-sm) var(--tr-radius-sm); } html body .et_mobile_menu li a{ font-weight:600!important; color:var(--tr-ink)!important; border-bottom:1px solid #eef1f6!important; } html body .mobile_menu_bar::before{ color:var(--tr-ink)!important; } html body .et-cart-info span{ font-weight:600; } /* Theme Builder header (what readsuccessfully.com actually uses): white bar, no orange menu box, dark Poppins links */ html body .et-l--header .et_pb_section{ background:#fff!important; border-bottom:3px solid var(--tr-cyan); position:relative; padding:10px 0!important; } html body .et-l--header .et_pb_section::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; z-index:2; background:linear-gradient(90deg,var(--tr-green) 0 20%,var(--tr-sun) 20% 40%,var(--tr-coral) 40% 60%,var(--tr-plum) 60% 80%,var(--tr-blue) 80% 100%); } html body .et-l--header .et_pb_menu{ background:transparent!important; } html body .et-l--header .et_pb_menu ul li a{ font-family:var(--tr-font)!important; font-weight:600!important; font-size:15px!important; color:var(--tr-ink)!important; } html body .et-l--header .et_pb_menu ul li.current-menu-item > a, html body .et-l--header .et_pb_menu ul li.current-menu-ancestor > a, html body .et-l--header .et_pb_menu .et-menu > li > a:hover{ color:var(--tr-cyan-deep)!important; opacity:1!important; } html body .et-l--header .et_pb_menu .et-menu > li.current-menu-item > a, html body .et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a{ box-shadow:inset 0 -3px 0 var(--tr-sun); } html body .et-l--header .et_pb_menu .nav li ul{ background:#fff!important; border-top:3px solid var(--tr-cyan)!important; border-color:var(--tr-cyan)!important; border-radius:0 0 var(--tr-radius-sm) var(--tr-radius-sm); box-shadow:var(--tr-shadow-lift)!important; padding:10px 0!important; width:250px; } html body .et-l--header .et_pb_menu .nav li li a{ font-weight:500!important; font-size:14px!important; width:250px; padding:8px 20px!important; border-radius:6px; } html body .et-l--header .et_pb_menu .nav li li a:hover{ background:var(--tr-sky)!important; } html body .et-l--header .et_pb_menu .et_mobile_menu, html body .et-l--header .et_pb_menu .et_mobile_menu ul{ background:#fff!important; border-color:var(--tr-cyan)!important; } html body .et-l--header .et_pb_menu .mobile_nav .mobile_menu_bar::before, html body .et-l--header .et_pb_menu .et_pb_menu__icon{ color:var(--tr-ink)!important; } /* ---------- 4. Buttons ------------------------------------------------ */ html body #page-container .et_pb_section .et_pb_button, html body .et_pb_button, html body.woocommerce a.button, html body.woocommerce button.button, html body.woocommerce input.button, html body.woocommerce #respond input#submit, html body.woocommerce-page a.button, html body.woocommerce-page button.button, html body .woocommerce a.button, html body .woocommerce button.button, html body .wpforms-submit{ font-family:var(--tr-font)!important; font-weight:600!important; font-size:16px!important; line-height:1.2!important; color:#fff!important; background:var(--tr-cyan-deep)!important; border:0!important; border-radius:999px!important; padding:.85em 1.6em!important; box-shadow:0 3px 0 #00528A!important; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } html body #page-container .et_pb_section .et_pb_button:hover, html body .et_pb_button:hover, html body.woocommerce a.button:hover, html body.woocommerce button.button:hover, html body .woocommerce a.button:hover, html body .woocommerce button.button:hover, html body .wpforms-submit:hover{ background:#005F9E!important; transform:translateY(-2px); box-shadow:0 5px 0 #00436F!important; padding:.85em 1.6em!important; /* stop Divi's hover padding jump */ } html body #page-container .et_pb_section .et_pb_button::after, html body .et_pb_button::after{ display:none!important; } /* remove Divi's sliding arrow */ /* Button variants — put the class on the Button module */ html body .tr-btn-sun .et_pb_button, html body #page-container .et_pb_section .et_pb_button.tr-btn-sun{ background:var(--tr-sun)!important; color:var(--tr-ink)!important; box-shadow:0 3px 0 #B98500!important; } html body .tr-btn-sun .et_pb_button:hover, html body #page-container .et_pb_section .et_pb_button.tr-btn-sun:hover{ background:#FFC633!important; } html body .tr-btn-green .et_pb_button, html body #page-container .et_pb_section .et_pb_button.tr-btn-green{ background:var(--tr-green-deep)!important; box-shadow:0 3px 0 #005A2D!important; } html body .tr-btn-ghost .et_pb_button, html body #page-container .et_pb_section .et_pb_button.tr-btn-ghost{ background:transparent!important; color:var(--tr-ink)!important; box-shadow:inset 0 0 0 2px var(--tr-ink)!important; } html body .tr-btn-ghost .et_pb_button:hover, html body #page-container .et_pb_section .et_pb_button.tr-btn-ghost:hover{ background:var(--tr-ink)!important; color:#fff!important; } html body .tr-dark .tr-btn-ghost .et_pb_button, html body #page-container .tr-dark .et_pb_button.tr-btn-ghost{ color:#fff!important; box-shadow:inset 0 0 0 2px #fff!important; } html body #page-container .tr-dark .et_pb_button.tr-btn-ghost:hover{ background:#fff!important; color:var(--tr-ink)!important; } /* Buttons sitting side by side: give the COLUMN the class tr-btnrow */ html body .tr-btnrow .et_pb_button_module_wrapper{ display:inline-block!important; margin:0 12px 14px 0!important; } html body .tr-center.tr-btnrow .et_pb_button_module_wrapper, html body .tr-btnrow.tr-center .et_pb_button_module_wrapper{ margin:0 6px 14px!important; } /* ---------- 5. Section backgrounds (Section > CSS Class) ------------- */ html body .et_pb_section.tr-cream{ background:var(--tr-cream)!important; } html body .et_pb_section.tr-white{ background:#fff!important; } html body .et_pb_section.tr-sky{ background:var(--tr-sky)!important; } html body .et_pb_section.tr-sun{ background:var(--tr-sun)!important; } html body .et_pb_section.tr-dark{ background:var(--tr-ink)!important; } html body .et_pb_section.tr-cyan{ background:var(--tr-cyan)!important; } html body .et_pb_section.tr-cyan :is(h1,h2,h3,h4,p,li){ color:var(--tr-ink)!important; } /* Hero: cream with soft coloured blobs */ html body .et_pb_section.tr-hero{ background: radial-gradient(520px 320px at 92% 8%, rgba(0,174,239,.16), transparent 70%), radial-gradient(420px 300px at 4% 96%, rgba(255,194,14,.22), transparent 70%), var(--tr-cream)!important; padding:64px 0 72px!important; } html body .tr-wave-top{ position:relative; } html body .tr-wave-top::before{ content:""; position:absolute; left:0; right:0; top:-28px; height:30px; background:inherit; -webkit-mask:radial-gradient(30px 30px at 50% 100%,#000 98%,transparent) 0 0/60px 30px repeat-x; mask:radial-gradient(30px 30px at 50% 100%,#000 98%,transparent) 0 0/60px 30px repeat-x; } /* Small label above a heading (Text module class) */ html body .tr-kicker, html body .tr-kicker p{ font-size:13px!important; font-weight:700!important; letter-spacing:.12em!important; text-transform:uppercase; color:var(--tr-green-deep)!important; padding-bottom:.3em!important; } html body .tr-dark .tr-kicker p, html #et-boc .et-l .tr-dark .tr-kicker p{ color:var(--tr-sun)!important; } html body .tr-lead p{ font-size:19px!important; line-height:1.7!important; color:var(--tr-ink-soft); } /* ---------- 6. Cards (Column or Blurb/Text module class) ------------- */ html body .tr-card{ background:#fff; border-radius:var(--tr-radius); box-shadow:var(--tr-shadow); padding:28px 28px 30px!important; border-top:8px solid var(--tr-cyan); transition:transform .2s ease, box-shadow .2s ease; } html body .et_pb_column.tr-card{ display:flex; flex-direction:column; } html body .et_pb_column.tr-card > .et_pb_module:last-child:not(:first-child){ margin-top:auto; } html body .et_pb_column.tr-card > .et_pb_module:last-child{ margin-bottom:0!important; } html body .tr-card:hover{ transform:translateY(-3px); box-shadow:var(--tr-shadow-lift); } html body .tr-card.tr-c-green{ border-top-color:var(--tr-green); } html body .tr-card.tr-c-sun{ border-top-color:var(--tr-sun); } html body .tr-card.tr-c-coral{ border-top-color:var(--tr-coral); } html body .tr-card.tr-c-plum{ border-top-color:var(--tr-plum); } html body .tr-card .et_pb_image{ margin-bottom:20px!important; } html body .tr-card .et_pb_image_wrap{ display:block; border-radius:var(--tr-radius-sm); overflow:hidden; background:var(--tr-sky); aspect-ratio:4/3; } html body .tr-card .et_pb_image_wrap img{ width:100%; height:100%; object-fit:cover; } html body .tr-card.tr-contain .et_pb_image_wrap img{ object-fit:contain; padding:12px; } /* transparent box shots */ /* Filled colour cards — the site's current yellow / green / red / blue panels, kept but tidied: column class tr-card tr-fill-sun (etc.) */ html body .tr-card[class*="tr-fill-"]{ border-top:0; } html body .tr-card.tr-fill-sun{ background:var(--tr-sun)!important; } html body .tr-card.tr-fill-leaf{ background:var(--tr-leaf)!important; } html body .tr-card.tr-fill-blue{ background:var(--tr-blue)!important; } html body .tr-card.tr-fill-coral{ background:#D02A1C!important; } /* a shade deeper than Trugs red so white text passes AA */ html body .tr-card[class*="tr-fill-"] :is(h2,h3,h4,p,li,strong){ color:var(--tr-ink)!important; } html body .tr-card.tr-fill-coral :is(h2,h3,h4,p,li,strong){ color:#fff!important; } html body #et-boc .et-l .tr-card[class*="tr-fill-"] :is(h2,h3,h4,p,li,strong){ color:var(--tr-ink)!important; } html body #et-boc .et-l .tr-card.tr-fill-coral :is(h2,h3,h4,p,li,strong){ color:#fff!important; } html body .tr-card[class*="tr-fill-"] .et_pb_image_wrap{ background:rgba(255,255,255,.55); } html body .tr-card[class*="tr-fill-"] ul:not(.sub-menu) li::marker{ color:var(--tr-ink); } html body .tr-card.tr-fill-coral ul:not(.sub-menu) li::marker{ color:#fff; } /* buttons on filled cards: navy pill, readable on every fill colour */ html body #page-container .et_pb_section .tr-card[class*="tr-fill-"] .et_pb_button, html body .tr-card[class*="tr-fill-"] .et_pb_button{ background:var(--tr-ink)!important; color:#fff!important; box-shadow:0 3px 0 rgba(0,0,0,.35)!important; } html body #page-container .et_pb_section .tr-card[class*="tr-fill-"] .et_pb_button:hover{ background:#000!important; } /* Rows of equal-height cards: Row class tr-equal */ html body .et_pb_row.tr-equal{ display:flex; flex-wrap:wrap; align-items:stretch; } html body .et_pb_row.tr-equal::after{ display:none; } html body .et_pb_row.tr-equal > .et_pb_column{ display:flex; flex-direction:column; } @media (max-width:980px){ html body .et_pb_row.tr-equal > .et_pb_column{ width:100%!important; margin-right:0!important; margin-bottom:24px!important; } } /* ---------- 7. Hero media: a real card photo, GIF or video in the hero */ html body .tr-hero-media .et_pb_image_wrap{ display:block; } html body .tr-hero-media .et_pb_image_wrap img{ width:100%; height:auto; image-rendering:auto; } /* Hero video (Code module class tr-hero-media): the sharp 1280 px card clip, framed like a photo */ html body .tr-hero-video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#fff; border:6px solid #fff; border-radius:var(--tr-radius); box-shadow:var(--tr-shadow-lift); cursor:pointer; } @media (prefers-reduced-motion:reduce){ html body *{ transition:none!important; } } /* Stage chips / quick facts strip (Text module) */ html body .tr-facts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0; margin:0; list-style:none; } html body .tr-facts li{ list-style:none; background:#fff; border-radius:999px; padding:10px 18px!important; font-weight:600; font-size:15px!important; color:var(--tr-ink)!important; box-shadow:var(--tr-shadow); } html body .tr-facts li::before{ content:"●"; margin-right:8px; color:var(--tr-green); } html body .tr-facts li:nth-child(2)::before{ color:var(--tr-cyan); } html body .tr-facts li:nth-child(3)::before{ color:var(--tr-coral); } html body .tr-facts li:nth-child(4)::before{ color:var(--tr-plum); } /* Quote / testimonial (Text module class tr-quote) */ html body .tr-quote{ background:#fff; border-radius:var(--tr-radius); padding:34px 36px 30px 36px!important; box-shadow:var(--tr-shadow); position:relative; border-left:8px solid var(--tr-sun); } html body .tr-quote p{ font-size:20px!important; line-height:1.6!important; color:var(--tr-ink)!important; font-weight:500; } html body .tr-quote cite, html body .tr-quote .tr-cite{ display:block; font-style:normal; font-size:15px!important; color:var(--tr-ink-soft)!important; font-weight:600; margin-top:10px; } /* ---------- 8. Images — make the existing photos look tidier -------- */ html body .et_pb_image .et_pb_image_wrap{ border-radius:var(--tr-radius-sm); overflow:hidden; } html body .tr-photo .et_pb_image_wrap{ box-shadow:var(--tr-shadow-lift); border:6px solid #fff; border-radius:var(--tr-radius); } html body .tr-tilt .et_pb_image_wrap{ transform:rotate(-2deg); } html body .tr-frame{ max-width:200px; margin-left:0!important; } html body .tr-frame .et_pb_image_wrap{ background:#fff; padding:16px; box-shadow:var(--tr-shadow); border-radius:var(--tr-radius); } html body .tr-badges{ display:flex; gap:12px; flex-wrap:wrap; } html body .tr-badges img{ height:44px; width:auto; } /* App tile (Image module + Text below, column class tr-app) */ html body .tr-app .et_pb_image_wrap{ border-radius:24%; box-shadow:var(--tr-shadow-lift); max-width:160px; margin:0 auto; } html body .tr-app{ text-align:center; } html body .tr-app .et_pb_image{ margin-left:auto!important; margin-right:auto!important; max-width:160px; } html body .tr-app .et_pb_image_wrap{ display:block; overflow:hidden; aspect-ratio:1/1; } html body .tr-app .et_pb_image_wrap img{ width:100%; height:100%; object-fit:cover; } html body .tr-app h3, html body .tr-app p{ text-align:center!important; } html body .tr-app .et_pb_text_inner{ margin-left:auto; margin-right:auto; } /* ---------- 9. WooCommerce ------------------------------------------ */ html body.woocommerce ul.products li.product, html body .woocommerce ul.products li.product, html body .et_pb_shop ul.products li.product{ background:#fff; border-radius:var(--tr-radius); box-shadow:var(--tr-shadow); padding:18px 18px 22px!important; text-align:center; transition:transform .2s, box-shadow .2s; } html body ul.products li.product:hover{ transform:translateY(-3px); box-shadow:var(--tr-shadow-lift); } html body ul.products li.product .et_shop_image, html body ul.products li.product a img{ border-radius:var(--tr-radius-sm); background:var(--tr-sky); } html body ul.products li.product .woocommerce-loop-product__title{ font-size:18px!important; color:var(--tr-ink)!important; padding:12px 0 4px!important; } html body .woocommerce .price, html body.woocommerce .price, html body .woocommerce-Price-amount{ color:var(--tr-green-deep)!important; font-weight:700!important; } html body .woocommerce span.onsale, html body.woocommerce span.onsale{ background:var(--tr-coral)!important; border-radius:999px!important; font-weight:700; padding:6px 14px!important; } html body .stock.out-of-stock{ display:inline-block; background:#FDECEE; color:#A3162A!important; font-weight:600; border-radius:999px; padding:4px 14px!important; font-size:14px!important; } html body .stock.in-stock{ color:var(--tr-green-deep)!important; font-weight:600; } html body.single-product div.product .woocommerce-product-gallery__image img{ border-radius:var(--tr-radius); } html body .woocommerce-tabs ul.tabs li{ border-radius:10px 10px 0 0!important; } html body .woocommerce-message, html body .woocommerce-info{ border-top-color:var(--tr-cyan)!important; border-radius:var(--tr-radius-sm); background:#fff!important; } html body .woocommerce form .form-row input.input-text, html body .woocommerce form .form-row select, html body .wpforms-form input, html body .wpforms-form textarea, html body .wpforms-form select{ border:2px solid #D8DEE9!important; border-radius:10px!important; padding:12px 14px!important; font-family:var(--tr-font)!important; font-size:16px!important; background:#fff!important; } html body .woocommerce form .form-row input.input-text:focus, html body .wpforms-form input:focus{ border-color:var(--tr-cyan-deep)!important; } /* ---------- 10. Footer (default Divi footer and Theme Builder footer) */ html body #main-footer, html body .et-l--footer .et_pb_section{ background:var(--tr-ink)!important; } html body #main-footer :is(h4,.title), html body .et-l--footer :is(h2,h3,h4){ color:#fff!important; font-size:16px!important; } html body #main-footer :is(p,li,a,span), html body .et-l--footer :is(p,li,span){ color:#C9D1E0!important; font-size:15px!important; } html body #main-footer a:hover, html body .et-l--footer a:hover{ color:var(--tr-sun)!important; } html body .et-l--footer a{ color:#fff!important; text-decoration:none!important; } html body .et-l--footer .et_pb_section:first-child{ border-top:6px solid; border-image:linear-gradient(90deg,var(--tr-green) 0 20%,var(--tr-sun) 20% 40%,var(--tr-coral) 40% 60%,var(--tr-plum) 60% 80%,var(--tr-cyan) 80% 100%) 1; } html body #footer-bottom{ background:#121D35!important; } html body .tr-footer-links{ list-style:none!important; padding:0!important; margin:0; } html body .tr-footer-links li{ list-style:none!important; padding:4px 0!important; } html body .tr-footer-links li::marker{ content:""; } html body .tr-footer-small p{ font-size:13px!important; color:#93A0B8!important; } html body .tr-social{ display:flex; gap:10px; } html body .tr-social a{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.1); font-weight:600; font-size:14px!important; } html body .tr-social a:hover{ background:var(--tr-sun); color:var(--tr-ink)!important; } /* ---------- 11. Spacing helpers ------------------------------------- */ html body .et_pb_section[class*=" tr-"]{ padding-top:64px; padding-bottom:64px; } html body .tr-tight{ padding-top:36px!important; padding-bottom:36px!important; } html body .tr-center, html body .tr-center p, html body .tr-center h1, html body .tr-center h2, html body .tr-center h3, html body .tr-center h4, html body .tr-center h5, html body .tr-center h6{ text-align:center!important; } html body .tr-center .et_pb_text_inner{ margin-left:auto; margin-right:auto; } @media (max-width:980px){ html body .et_pb_section[class*=" tr-"]{ padding-top:44px; padding-bottom:44px; } html body .et_pb_section.tr-hero{ padding:36px 0 44px!important; } html body p, html body li{ font-size:16px; } } /* ---------- 12. Card Table sections (v1.2) -------------------------- */ /* Green baize band, like the Card Table itself: Section class "tr-dark tr-baize" */ html body .et_pb_section.tr-baize{ background: radial-gradient(1100px 600px at 70% 20%, rgba(255,255,255,.07), transparent 60%), radial-gradient(900px 700px at 10% 100%, rgba(0,0,0,.25), transparent 60%), linear-gradient(160deg,#17703F 0%,#0F5A31 55%,#0A4325 100%)!important; } /* chips and white cards keep dark text inside dark bands */ html body .tr-dark .tr-facts li, html #et-boc .et-l .tr-dark .tr-facts li{ color:var(--tr-ink)!important; } html body .tr-dark .tr-card :is(h2,h3,h4,p,li,strong,span), html #et-boc .et-l .tr-dark .tr-card :is(h2,h3,h4,p,li,strong,span){ color:var(--tr-ink)!important; } html body .tr-dark .tr-card p, html #et-boc .et-l .tr-dark .tr-card p{ color:var(--tr-ink-soft)!important; } html #page-container .tr-dark .tr-card .et_pb_button.tr-btn-ghost{ color:var(--tr-ink)!important; box-shadow:inset 0 0 0 2px var(--tr-ink)!important; } html body .tr-baize a:not(.et_pb_button){ color:#FFE08A!important; } /* Screens: videos and screenshots framed like a device */ html body .tr-screen video, html body .tr-screen img, html body .tr-shot .et_pb_image_wrap{ display:block; width:100%; height:auto; border-radius:16px; overflow:hidden; border:6px solid rgba(255,255,255,.92); box-shadow:0 24px 48px rgba(0,0,0,.30); background:#0F5A31; } html body .tr-card .tr-screen video{ border-width:4px; box-shadow:0 10px 24px rgba(0,0,0,.18); margin-top:8px; } html body .tr-caption, html body .tr-caption p{ font-size:14px!important; color:var(--tr-ink-soft)!important; margin-top:10px; text-align:center; } /* Game cards with app icon */ html body .tr-icon{ width:84px!important; margin:0 0 14px!important; } html body .tr-icon .et_pb_image_wrap{ border-radius:22%; overflow:hidden; box-shadow:0 6px 16px rgba(27,42,74,.18); background:none!important; aspect-ratio:auto!important; } html body .tr-icon .et_pb_image_wrap img{ object-fit:cover; } html body .tr-game .et_pb_code{ margin-top:auto!important; } /* Big evidence numbers */ html body .tr-stat, html body p.tr-stat, html #et-boc .et-l p.tr-stat{ font:800 44px/1.05 var(--tr-font)!important; color:var(--tr-ink)!important; letter-spacing:-.02em; padding-bottom:.15em!important; } html body .tr-stat-label, html body p.tr-stat-label, html #et-boc .et-l p.tr-stat-label{ font-weight:600!important; color:var(--tr-ink)!important; font-size:16px!important; line-height:1.5!important; } html body .tr-card p.tr-kicker{ font-size:12px!important; } /* Sources */ html body .tr-sources-h, html body p.tr-sources-h, html #et-boc .et-l p.tr-sources-h{ font-size:13px!important; font-weight:700!important; letter-spacing:.1em; text-transform:uppercase; color:var(--tr-ink)!important; } html body ul.tr-sources{ list-style:none!important; padding:0!important; margin:0; } html body .tr-sources-row ul.tr-sources{ columns:3 240px; column-gap:32px; } html body .tr-sources-row ul.tr-sources li{ break-inside:avoid; } html body ul.tr-sources li{ list-style:none!important; font-size:13px!important; line-height:1.55!important; padding:0 0 7px!important; color:var(--tr-ink-soft)!important; } html body ul.tr-sources li::marker{ content:""; } /* Feature grid: Text module with a list given class tr-features (each item: a heading and a paragraph) */ html body ul.tr-features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; list-style:none!important; padding:0!important; margin:0; } html body ul.tr-features li{ list-style:none!important; background:#fff; border-radius:var(--tr-radius); padding:22px 22px 20px!important; box-shadow:var(--tr-shadow); position:relative; } html body ul.tr-features li::marker{ content:""; } html body ul.tr-features li::before{ content:"★"; display:block; font-size:18px; line-height:1; margin-bottom:10px; color:var(--tr-cyan-deep); } html body ul.tr-features li:nth-child(4n+2)::before{ content:"◆"; color:var(--tr-coral); } html body ul.tr-features li:nth-child(4n+3)::before{ content:"▲"; color:var(--tr-plum); } html body ul.tr-features li:nth-child(4n+4)::before{ content:"●"; color:var(--tr-ink); } html body ul.tr-features h4{ font-size:17px!important; padding-bottom:.3em!important; } html body ul.tr-features p{ font-size:15px!important; line-height:1.6!important; padding:0!important; } /* Roadmap list with status pills */ html body ul.tr-roadmap{ list-style:none!important; padding:0!important; margin:0; } html body ul.tr-roadmap li, html #et-boc .et-l ul.tr-roadmap li{ display:flex; gap:12px; align-items:baseline; list-style:none!important; padding:14px 0!important; border-bottom:1px solid var(--tr-line); font-weight:500; color:var(--tr-ink)!important; } html body ul.tr-roadmap li::marker{ content:""; } html body .tr-pill{ flex:none; display:inline-block; padding:3px 10px; margin-right:0; border-radius:999px; font-size:12px!important; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--tr-sky); color:var(--tr-cyan-deep)!important; vertical-align:2px; } html body .tr-wide .et_pb_text_inner, html body .et_pb_text_inner:has(> .tr-features), html body .et_pb_text_inner:has(> .tr-facts){ max-width:none!important; } html body .tr-shot .et_pb_image_wrap{ aspect-ratio:4/3; } html body .tr-shot .et_pb_image_wrap img{ width:100%; height:100%; object-fit:cover; object-position:center top; } /* Embedded walkthrough / animation (Code module class tr-embed) */ html body .tr-embed iframe{ display:block; width:100%; height:1090px; border:0; border-radius:16px; box-shadow:var(--tr-shadow-lift); background:#FFF8EC; } @media (min-width:1200px){ html body .tr-embed iframe{ height:900px; } } /* the pop-out walkthrough needs about 890px at full width, 1080px when narrower */ /* ---------- 13. Help pages (v1.2) ------------------------------------ */ /* Numbered steps: Text module with a numbered list given class tr-steps (each item: a heading and a paragraph) */ html body ol.tr-steps{ list-style:none!important; counter-reset:trstep; padding:0!important; margin:0; } html body ol.tr-steps > li{ counter-increment:trstep; position:relative; padding:4px 0 22px 64px!important; list-style:none!important; } html body ol.tr-steps > li::marker{ content:""; } html body ol.tr-steps > li::before{ content:counter(trstep); position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; background:var(--tr-cyan-deep); color:#fff; font:800 19px/44px var(--tr-font); text-align:center; box-shadow:0 3px 0 #00528A; } html body ol.tr-steps > li:not(:last-child)::after{ content:""; position:absolute; left:21px; top:50px; bottom:4px; width:2px; background:var(--tr-line); } html body ol.tr-steps h4{ font-size:18px!important; padding-bottom:.25em!important; } html body ol.tr-steps p{ padding:0!important; } /* FAQ: a block with class tr-faq containing details/summary pairs (question, then answer) */ html body .tr-faq details{ background:#fff; border-radius:var(--tr-radius-sm); box-shadow:var(--tr-shadow); margin:0 0 12px; padding:0 22px; } html body .tr-faq summary{ cursor:pointer; list-style:none; font-weight:700; color:var(--tr-ink); padding:18px 30px 18px 0; position:relative; } html body .tr-faq summary::-webkit-details-marker{ display:none; } html body .tr-faq summary::after{ content:"+"; position:absolute; right:0; top:14px; font-size:24px; color:var(--tr-cyan-deep); } html body .tr-faq details[open] summary::after{ content:"–"; } html body .tr-faq details p{ padding:0 0 18px!important; } /* "Teach Reading Using GameS" with the T R U G S picked out, as in the Card Table and apps. Heading with class tr-trugs, each of the five letters wrapped in bold tags. */ html body .tr-trugs b, html #et-boc .et-l .tr-trugs b{ color:var(--tr-cyan-deep)!important; font-weight:800; } html body .tr-dark .tr-trugs b, html #et-boc .et-l .tr-dark .tr-trugs b{ color:var(--tr-cyan)!important; } /* ---------- v1.2.1 fixes (10 Oct 2026, after first staging check) ---- */ /* Existing pages (sections without a tr- class) keep the black body text the old site used, so it stays readable on the bright yellow, green and red panels. New tr- sections are unchanged. */ html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) p, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) li, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) span, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) label{ color:#000!important; } /* Header: the logo module had a -45px top margin, which clipped the logo under the slimmer bar */ html body .et-l--header .et_pb_image{ margin-top:0!important; margin-bottom:0!important; } @media (max-width:980px){ html body .et-l--header .et_pb_image{ max-width:170px!important; margin-left:auto!important; margin-right:auto!important; } } /* Header: keep the search icon on the same line as the menu at laptop widths */ html body .et-l--header .et_pb_menu .et-menu > li > a{ font-size:14px!important; } html body .et-l--header .et_pb_menu .et-menu > li{ padding-left:9px!important; padding-right:9px!important; } /* ---------- v1.2.2 fixes (10 Oct 2026, second staging check) -------- */ /* Existing pages: headings black too, so they read on the purple, pink and red shop tiles */ html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h1, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h2, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h3, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h4, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h5, html #et-boc .et-l--post .et_pb_section:not([class*="tr-"]) h6{ color:#000!important; } /* Phone and tablet header: less empty space between the logo and the menu icons */ @media (max-width:980px){ html body .et-l--header .et_pb_column{ margin-bottom:6px!important; } } /* ---------- v1.2.6 (10 Oct 2026): slimmer desktop header, menu centred on the logo ---- */ @media (min-width:981px){ html body .et-l--header .et_pb_section{ padding:14px 0!important; } html body .et-l--header .et_pb_row{ display:flex!important; align-items:center; } html body .et-l--header .et_pb_row > .et_pb_column{ padding-top:0!important; padding-bottom:0!important; } html body .et-l--header .et_pb_image{ max-width:150px!important; } } /* ---------- v1.2.7 (10 Oct 2026): 20px side margins on phones and tablets ---- */ @media (max-width:980px){ html body .et-l--post .et_pb_row, html body .et-l--footer .et_pb_row{ width:calc(100% - 40px)!important; max-width:none!important; } } /* ---------- v1.2.8 (10 Oct 2026): Tutor Pack pages and the licence page ---------- */ /* Tutor sub-navigation: Text module with