/* Theme Name: Divi Child — Griff To Go Template: Divi Version: 1.0 */ /* ============================================================================ Griff To Go — Divi stylesheet Paste into Divi → Theme Options → Custom CSS or save as wp-content/themes/divi-child/style.css (recommended). Contains: brand tokens, Divi structural overrides, and the brand components that have no native Divi module (callouts, key takeaways, fact box, cost table, photo credits). The Code modules in the imported layouts reference these class names — without this file they will render unstyled. ============================================================================ */ /* ---- 1. Fonts ---------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Poppins:wght@400;500;600;700&display=swap"); /* ---- 2. Tokens --------------------------------------------------------- */ :root{ --font-display:"Poppins","Century Gothic",sans-serif; --font-body:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif; --brand-50:#F2F6FC; --brand-100:#E1EBF7; --brand-200:#C6D9EF; --brand-300:#A3C0E3; --brand-400:#7DA5D6; --brand-500:#578AC8; --brand-600:#4571A8; --brand-700:#375A86; --brand-800:#2C4667; --brand-900:#21344B; --ink-50:#F6F8FA; --ink-100:#EDF0F3; --ink-200:#DEE3E8; --ink-300:#C3CAD2; --ink-400:#9AA4B0; --ink-500:#74808E; --ink-600:#566373; --ink-700:#3A4757; --ink-800:#253141; --ink-900:#16202C; --sunset-100:#FBEEE4; --sunset-300:#EDB98F; --sunset-500:#D08A5E; --sunset-600:#B87246; --success-100:#E8F4EF; --success-500:#3E8E6E; --success-700:#2E6B52; --warning-100:#FBF1DC; --warning-500:#C08A2E; --warning-700:#8F6620; --danger-100:#FAE9E7; --danger-500:#C0544A; --danger-700:#933F37; --surface-warm:var(--brand-50); --surface-warm-strong:var(--brand-100); --border-warm:var(--brand-100); --border-warm-strong:var(--brand-200); --border-subtle:var(--ink-200); --rule-hairline:rgba(22,32,44,.10); --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px; --shadow-xs:0 1px 2px rgba(22,32,44,.06); --shadow-sm:0 1px 3px rgba(22,32,44,.07),0 1px 2px rgba(22,32,44,.05); --shadow-lg:0 12px 28px rgba(22,32,44,.10),0 2px 6px rgba(22,32,44,.05); --ease-out:cubic-bezier(.22,.61,.36,1); } /* ---- 3. Divi structural defaults --------------------------------------- */ .et_pb_row{max-width:1200px} body,.et_pb_text,.et_pb_blurb_content,.et_pb_toggle_content{font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--ink-700)} h1,h2,h3,h4,h5,h6,.et_pb_module_header,.et_pb_toggle_title,.et_pb_accordion .et_pb_toggle_title{ font-family:var(--font-display);font-weight:600;color:var(--ink-900);letter-spacing:-.012em} h1{font-size:44px;line-height:1.12} h2{font-size:32px;line-height:1.2} h3{font-size:24px;line-height:1.3} h4{font-size:20px;line-height:1.35} a{color:var(--brand-600);text-underline-offset:3px;transition:color .14s var(--ease-out)} a:hover{color:var(--brand-800)} ::selection{background:var(--brand-200);color:var(--ink-900)} /* Buttons */ .et_pb_button{font-family:var(--font-display)!important;font-weight:600!important;letter-spacing:.01em!important; border-radius:var(--radius-md)!important;transition:background-color .14s var(--ease-out),border-color .14s var(--ease-out),transform .08s var(--ease-out)!important} .et_pb_button:active{transform:scale(.985)} .et_pb_button:after{font-size:1em!important} /* ---- 4. Brand utility classes ------------------------------------------ */ .gtg-eyebrow{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.2; letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);margin-bottom:12px} .gtg-eyebrow-light{color:var(--brand-300)} .gtg-lede{font-family:var(--font-body);font-size:21px;line-height:1.6;color:var(--ink-600);max-width:56ch} .gtg-caption{font-size:13px;line-height:1.5;color:var(--ink-500)} .gtg-measure{max-width:68ch} /* Section tones */ .gtg-section-warm{background-color:var(--surface-warm);border-top:1px solid var(--border-warm);border-bottom:1px solid var(--border-warm)} .gtg-section-dark{background-color:var(--ink-900)} .gtg-section-dark,.gtg-section-dark .et_pb_text{color:var(--ink-300)} .gtg-section-dark h1,.gtg-section-dark h2,.gtg-section-dark h3,.gtg-section-dark h4{color:#fff} /* ---- 5. Brand components (Code modules) -------------------------------- */ /* Callout — tone via modifier class */ .gtg-callout{display:flex;gap:16px;border-radius:var(--radius-lg);padding:20px 24px; background:var(--surface-warm);border:1px solid var(--border-warm)} .gtg-callout__label{display:block;font-family:var(--font-display);font-weight:600;font-size:13px; line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);margin-bottom:6px} .gtg-callout__body{font-size:15px;line-height:1.6;color:var(--ink-700)} .gtg-callout__body p:last-child{margin-bottom:0} .gtg-callout--budget{background:var(--sunset-100);border-color:var(--sunset-300)} .gtg-callout--budget .gtg-callout__label{color:var(--sunset-600)} .gtg-callout--warning{background:var(--warning-100);border-color:var(--warning-500)} .gtg-callout--warning .gtg-callout__label{color:var(--warning-700)} .gtg-callout--note{background:var(--ink-50);border-color:var(--border-subtle)} .gtg-callout--note .gtg-callout__label{color:var(--ink-700)} .gtg-callout__icon{flex:0 0 auto;width:20px;height:20px;margin-top:2px;opacity:.9} .gtg-callout__icon svg{width:100%;height:100%;display:block} /* Key takeaways — the article's opening summary, one step stronger than a callout */ .gtg-takeaways{background:var(--surface-warm-strong);border:1px solid var(--border-warm-strong); border-radius:var(--radius-lg);padding:24px} .gtg-takeaways__title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.35; color:var(--brand-900);margin:0 0 16px;display:flex;align-items:center;gap:10px} .gtg-takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .gtg-takeaways li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--ink-700)} .gtg-takeaways li:before{content:"";position:absolute;left:0;top:5px;width:14px;height:9px; border-left:2px solid var(--brand-500);border-bottom:2px solid var(--brand-500);transform:rotate(-45deg)} /* Fact box */ .gtg-factbox{background:var(--surface-warm);border:1px solid var(--border-warm); border-radius:var(--radius-lg);padding:24px} .gtg-factbox__title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.35; color:var(--ink-900);margin:0 0 20px} .gtg-factbox dl{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:12px;margin:0} .gtg-factbox dt{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.5;color:var(--ink-600)} .gtg-factbox dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-800)} /* Cost table */ .gtg-costs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gtg-costs__tier{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden} .gtg-costs__tier--on{background:var(--surface-warm);border-color:var(--border-warm-strong)} .gtg-costs__head{padding:16px 20px;border-bottom:1px solid var(--border-subtle)} .gtg-costs__tier--on .gtg-costs__head{border-bottom-color:var(--border-warm-strong)} .gtg-costs__label{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.2; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)} .gtg-costs__tier--on .gtg-costs__label{color:var(--brand-600)} .gtg-costs__price{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2; letter-spacing:-.01em;color:var(--ink-900);margin-top:6px} .gtg-costs ul{list-style:none;margin:0;padding:16px 20px;display:flex;flex-direction:column;gap:8px} .gtg-costs li{display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:1.6} .gtg-costs li span:first-child{color:var(--ink-600)} .gtg-costs li span:last-child{color:var(--ink-900);font-weight:700;white-space:nowrap} .gtg-costs__caption{font-size:13px;line-height:1.5;color:var(--ink-500);margin-top:12px} @media (max-width:980px){.gtg-costs{grid-template-columns:1fr}} /* Quick-fact strip */ .gtg-fact{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg); padding:20px;display:flex;flex-direction:column;gap:8px;height:100%} .gtg-fact__label{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.2; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)} .gtg-fact__value{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3; letter-spacing:-.01em;color:var(--ink-900)} /* Photo credit under an image */ .gtg-credit{font-size:13px;line-height:1.5;color:var(--ink-500);margin-top:12px} /* Data table inside prose */ .gtg-table{width:100%;border-collapse:collapse;font-size:15px} .gtg-table th{text-align:left;font-family:var(--font-display);font-weight:600;color:var(--ink-900); background:var(--surface-warm);padding:12px 16px;border-bottom:1px solid var(--border-warm)} .gtg-table td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);vertical-align:top} .gtg-table tr{cursor:default} /* Pull quote */ .gtg-quote{margin:0;padding-left:24px;border-left:3px solid var(--brand-500); font-size:21px;line-height:1.6;color:var(--ink-800)} /* ---- 6. Divi module skins ---------------------------------------------- */ /* Blog module → the brand's ArticleCard */ .gtg-blog .et_pb_post{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg); overflow:hidden;padding:0 0 24px;margin-bottom:28px;box-shadow:var(--shadow-xs); transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)} .gtg-blog .et_pb_post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .gtg-blog .et_pb_image_container{margin:0 0 20px} .gtg-blog .et_pb_image_container img{width:100%;aspect-ratio:16/10;object-fit:cover; transition:transform .36s var(--ease-out)} .gtg-blog .et_pb_post:hover .et_pb_image_container img{transform:scale(1.04)} .gtg-blog .entry-title{font-size:20px;line-height:1.35;padding:0 24px;margin:0 0 12px} .gtg-blog .entry-title a{color:var(--ink-900)} .gtg-blog .et_pb_post:hover .entry-title a{text-decoration:underline;text-decoration-color:var(--brand-300)} .gtg-blog .post-content,.gtg-blog .post-meta{padding:0 24px} .gtg-blog .post-meta{font-size:13px;color:var(--ink-500)} .gtg-blog .post-content p{font-size:15px;line-height:1.6;color:var(--ink-600)} .gtg-blog .more-link{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--brand-600)} /* Blurb → destination tile with a photo background */ .gtg-tile .et_pb_blurb_content{max-width:none} .gtg-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px; display:flex;align-items:flex-end;box-shadow:var(--shadow-sm); transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)} .gtg-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .gtg-tile:before{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(11,16,23,.78) 0%,rgba(11,16,23,.42) 38%,rgba(11,16,23,0) 78%)} .gtg-tile .et_pb_blurb_container{position:relative;padding:20px} .gtg-tile .et_pb_module_header,.gtg-tile .et_pb_module_header a{color:#fff!important;font-size:20px} .gtg-tile .et_pb_blurb_description{color:rgba(255,255,255,.82);font-size:13px} /* Toggle → key takeaways look */ .gtg-toggle.et_pb_toggle{background:var(--surface-warm-strong);border:1px solid var(--border-warm-strong); border-radius:var(--radius-lg);padding:24px} .gtg-toggle .et_pb_toggle_title{color:var(--brand-900);font-size:20px} .gtg-toggle .et_pb_toggle_content{padding-top:16px} /* Accordion → FAQ rows: hairlines, no boxes */ .gtg-faq .et_pb_toggle{background:transparent!important;border:0;border-bottom:1px solid var(--border-subtle); border-radius:0;padding:20px 0} .gtg-faq .et_pb_toggle_title{font-size:17px;line-height:1.45;color:var(--ink-900);padding-right:44px} .gtg-faq .et_pb_toggle_content{font-size:15px;line-height:1.6;color:var(--ink-600);padding-top:0} /* Contact form → brand fields */ .gtg-form .et_pb_contact_field input,.gtg-form .et_pb_contact_field textarea, .gtg-form .et_pb_contact_field select{background:#fff!important;border:1px solid var(--border-subtle)!important; border-radius:var(--radius-md)!important;font-family:var(--font-body)!important;font-size:15px!important; color:var(--ink-900)!important;padding:13px 16px!important} .gtg-form .et_pb_contact_field input:focus,.gtg-form .et_pb_contact_field textarea:focus{ border-color:var(--brand-500)!important;box-shadow:0 0 0 3px rgba(87,138,200,.38)!important;outline:none!important} .gtg-form .et_pb_contact_submit{border-radius:var(--radius-md)!important} /* Email optin / newsletter band */ .gtg-optin{background:var(--surface-warm);border:1px solid var(--border-warm);border-radius:var(--radius-xl);padding:40px} .gtg-optin-dark{background:var(--ink-900);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-xl);padding:40px} .gtg-optin-dark h2,.gtg-optin-dark h3{color:#fff} /* Sticky table of contents rail */ .gtg-toc{position:sticky;top:100px} .gtg-toc__title{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-500);margin-bottom:16px} .gtg-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--border-subtle)} .gtg-toc li a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent; font-size:15px;line-height:1.45;color:var(--ink-600);text-decoration:none} .gtg-toc li a:hover{color:var(--ink-900)} .gtg-toc li.is-active a{border-left-color:var(--brand-500);color:var(--brand-700);font-weight:600} .gtg-toc li.lvl-3 a{padding-left:30px;font-size:14px} /* ============================================================================ 7. GUTENBERG POST CONTENT Post bodies are written in the block editor and rendered by the Divi Theme Builder "Post Content" module. Everything below styles core blocks so a post written in Gutenberg comes out looking like the design system. ============================================================================ */ /* --- 7.1 Base prose inside the Post Content module --- */ .et_pb_post_content{font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--ink-700)} .et_pb_post_content > *{max-width:68ch} .et_pb_post_content > .alignwide, .et_pb_post_content > .alignfull, .et_pb_post_content > .wp-block-table, .et_pb_post_content > .wp-block-columns, .et_pb_post_content > .wp-block-image, .et_pb_post_content > .gtg-factbox, .et_pb_post_content > .gtg-costs{max-width:none} .et_pb_post_content h2{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.2; letter-spacing:-.012em;color:var(--ink-900);margin:40px 0 0;scroll-margin-top:100px} .et_pb_post_content h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.3; letter-spacing:-.012em;color:var(--ink-900);margin:32px 0 0;scroll-margin-top:100px} .et_pb_post_content h4{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.35; color:var(--ink-900);margin:24px 0 0;scroll-margin-top:100px} .et_pb_post_content p{margin:20px 0 0} .et_pb_post_content strong{font-weight:700;color:var(--ink-900)} .et_pb_post_content ul,.et_pb_post_content ol{margin:20px 0 0;padding-left:1.3em} .et_pb_post_content li{margin-bottom:8px} .et_pb_post_content li::marker{color:var(--brand-500)} /* Image block + credit caption */ .et_pb_post_content .wp-block-image{margin:40px 0 0} .et_pb_post_content .wp-block-image img{border-radius:var(--radius-lg)} .et_pb_post_content .wp-block-image figcaption, .et_pb_post_content .wp-element-caption{font-size:13px;line-height:1.5;color:var(--ink-500);margin-top:12px;text-align:left} /* Table block */ .et_pb_post_content .wp-block-table{margin:32px 0 0} .et_pb_post_content .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px} .et_pb_post_content .wp-block-table th{text-align:left;font-family:var(--font-display);font-weight:600; color:var(--ink-900);background:var(--surface-warm);padding:12px 16px;border:0;border-bottom:1px solid var(--border-warm)} .et_pb_post_content .wp-block-table td{padding:12px 16px;border:0;border-bottom:1px solid var(--border-subtle);vertical-align:top} /* Separator */ .et_pb_post_content .wp-block-separator{border:0;border-top:1px solid var(--rule-hairline);margin:40px 0 0;max-width:none} /* --- 7.2 Quote blocks = the brand's callouts --------------------------------- Write a Quote block, put the body in the quote and the label in the citation field, then pick a style from the block sidebar. Registered in functions-snippet.php as: Griff's tip · Budget hack · Heads up · Pull quote. */ .et_pb_post_content .wp-block-quote{margin:40px 0 0;padding:20px 24px;border:1px solid var(--border-warm); border-left:1px solid var(--border-warm);border-radius:var(--radius-lg);background:var(--surface-warm); display:flex;flex-direction:column-reverse;align-items:flex-start;gap:6px;font-style:normal} .et_pb_post_content .wp-block-quote p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-700);font-style:normal} .et_pb_post_content .wp-block-quote p + p{margin-top:10px} .et_pb_post_content .wp-block-quote cite, .et_pb_post_content .wp-block-quote .wp-block-quote__citation{font-family:var(--font-display);font-weight:600; font-size:13px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);font-style:normal} /* Citation renders above the body — the label sits on top, as in the design system */ .et_pb_post_content .wp-block-quote > cite{order:-1} .et_pb_post_content .wp-block-quote.is-style-gtg-budget{background:var(--sunset-100);border-color:var(--sunset-300)} .et_pb_post_content .wp-block-quote.is-style-gtg-budget cite{color:var(--sunset-600)} .et_pb_post_content .wp-block-quote.is-style-gtg-warning{background:var(--warning-100);border-color:var(--warning-500)} .et_pb_post_content .wp-block-quote.is-style-gtg-warning cite{color:var(--warning-700)} .et_pb_post_content .wp-block-quote.is-style-gtg-note{background:var(--ink-50);border-color:var(--border-subtle)} .et_pb_post_content .wp-block-quote.is-style-gtg-note cite{color:var(--ink-700)} /* Pull quote style — a rule, not a box */ .et_pb_post_content .wp-block-quote.is-style-gtg-pull{background:transparent;border:0; border-left:3px solid var(--brand-500);border-radius:0;padding:0 0 0 24px;flex-direction:column} .et_pb_post_content .wp-block-quote.is-style-gtg-pull p{font-size:21px;line-height:1.6;color:var(--ink-800)} .et_pb_post_content .wp-block-quote.is-style-gtg-pull cite{color:var(--ink-500);letter-spacing:.04em;margin-top:10px} .et_pb_post_content .wp-block-pullquote{border:0;padding:0;margin:40px 0 0;background:transparent} .et_pb_post_content .wp-block-pullquote blockquote{border-left:3px solid var(--brand-500);padding-left:24px;text-align:left} .et_pb_post_content .wp-block-pullquote p{font-family:var(--font-body);font-size:21px;line-height:1.6;color:var(--ink-800)} /* --- 7.3 Fact box = a Group block containing a heading + table --------------- */ .et_pb_post_content .gtg-factbox{background:var(--surface-warm);border:1px solid var(--border-warm); border-radius:var(--radius-lg);padding:24px;margin:40px 0 0} .et_pb_post_content .gtg-factbox > *{max-width:none} .et_pb_post_content .gtg-factbox .gtg-factbox__title, .et_pb_post_content .gtg-factbox h3{font-family:var(--font-display);font-weight:600;font-size:20px; line-height:1.35;color:var(--ink-900);margin:0 0 16px} .et_pb_post_content .gtg-factbox .wp-block-table{margin:0} .et_pb_post_content .gtg-factbox table{font-size:15px} .et_pb_post_content .gtg-factbox td{padding:9px 0;border-bottom:1px solid var(--border-warm-strong);color:var(--ink-800)} .et_pb_post_content .gtg-factbox tr:last-child td{border-bottom:0} .et_pb_post_content .gtg-factbox td:first-child{font-family:var(--font-display);font-weight:600;font-size:13px; color:var(--ink-600);width:42%;padding-right:20px} /* --- 7.4 Cost table = a 3-column Columns block ------------------------------- */ .et_pb_post_content .gtg-costs.wp-block-columns{margin:32px 0 0;gap:16px} .et_pb_post_content .gtg-costs .wp-block-column{background:#fff;border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:16px 20px 20px} .et_pb_post_content .gtg-costs .wp-block-column.gtg-costs__tier--on{background:var(--surface-warm);border-color:var(--border-warm-strong)} .et_pb_post_content .gtg-costs .gtg-costs__label{font-family:var(--font-display);font-weight:600;font-size:13px; line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:0} .et_pb_post_content .gtg-costs .gtg-costs__tier--on .gtg-costs__label{color:var(--brand-600)} .et_pb_post_content .gtg-costs .gtg-costs__price{font-family:var(--font-display);font-weight:600;font-size:22px; line-height:1.2;letter-spacing:-.01em;color:var(--ink-900);margin:6px 0 16px; padding-bottom:16px;border-bottom:1px solid var(--border-subtle)} .et_pb_post_content .gtg-costs .gtg-costs__tier--on .gtg-costs__price{border-bottom-color:var(--border-warm-strong)} .et_pb_post_content .gtg-costs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .et_pb_post_content .gtg-costs li{display:flex;justify-content:space-between;gap:12px;font-size:15px; line-height:1.6;color:var(--ink-600);margin:0} .et_pb_post_content .gtg-costs li strong{color:var(--ink-900);white-space:nowrap} @media (max-width:980px){.et_pb_post_content .gtg-costs.wp-block-columns{flex-direction:column}} /* --- 7.5 WPSummarize = key takeaways ---------------------------------------- Set the plugin's own theme to the plainest option and let this take over. If the box doesn't pick up the styling, inspect it and add its wrapper class to THIS selector list — it is the only line you should need to change. */ .wpsummarize,.wpsummarize-box,.wp-summarize,#wpsummarize, [class*="wpsummarize"],[id*="wpsummarize"],.gtg-takeaways{ background:var(--surface-warm-strong)!important; border:1px solid var(--border-warm-strong)!important; border-radius:var(--radius-lg)!important; padding:24px!important; margin:40px 0!important; box-shadow:none!important; font-family:var(--font-body)!important} [class*="wpsummarize"] h2,[class*="wpsummarize"] h3,[class*="wpsummarize"] h4, [class*="wpsummarize"] .wpsummarize-title,.gtg-takeaways h3{ font-family:var(--font-display)!important;font-weight:600!important;font-size:20px!important; line-height:1.35!important;color:var(--brand-900)!important;margin:0 0 16px!important;letter-spacing:-.012em!important} [class*="wpsummarize"] ul,.gtg-takeaways ul{list-style:none!important;margin:0!important;padding:0!important; display:flex;flex-direction:column;gap:12px} [class*="wpsummarize"] li,.gtg-takeaways li{position:relative;padding-left:26px!important;margin:0!important; font-size:15px!important;line-height:1.6!important;color:var(--ink-700)!important;list-style:none!important} [class*="wpsummarize"] li:before,.gtg-takeaways li:before{content:"";position:absolute;left:0;top:5px; width:14px;height:9px;border-left:2px solid var(--brand-500);border-bottom:2px solid var(--brand-500); transform:rotate(-45deg);background:none} [class*="wpsummarize"] li::marker,.gtg-takeaways li::marker{content:""} [class*="wpsummarize"] p{font-size:15px!important;line-height:1.6!important;color:var(--ink-700)!important} /* Collapsed / unfold-on-click state */ [class*="wpsummarize"] button,[class*="wpsummarize"] summary{font-family:var(--font-display)!important; font-weight:600!important;color:var(--brand-600)!important;cursor:pointer} /* --- 7.6 Easy Table of Contents --------------------------------------------- Auto-generated from the post's headings. Styled as the design system's rail. */ #ez-toc-container{background:transparent!important;border:0!important;box-shadow:none!important; padding:0!important;margin:0!important;width:100%!important;position:sticky;top:100px} #ez-toc-container .ez-toc-title-container{margin-bottom:16px} #ez-toc-container .ez-toc-title{font-family:var(--font-display)!important;font-weight:600!important; font-size:13px!important;letter-spacing:.14em!important;text-transform:uppercase!important; color:var(--ink-500)!important} #ez-toc-container .ez-toc-toggle,#ez-toc-container .ez-toc-js-toggle{color:var(--ink-400)!important} #ez-toc-container nav > ul,#ez-toc-container ul.ez-toc-list{list-style:none!important;margin:0!important; padding:0!important;border-left:1px solid var(--border-subtle)} #ez-toc-container ul li{margin:0!important} #ez-toc-container ul ul{border-left:0;padding-left:0!important} #ez-toc-container a.ez-toc-link{display:block;padding:6px 0 6px 16px;margin-left:-1px; border-left:2px solid transparent;font-family:var(--font-body)!important;font-size:15px!important; line-height:1.45!important;color:var(--ink-600)!important;text-decoration:none!important; transition:color .14s var(--ease-out),border-color .14s var(--ease-out)} #ez-toc-container a.ez-toc-link:hover{color:var(--ink-900)!important} #ez-toc-container ul ul a.ez-toc-link{padding-left:30px;font-size:14px!important} #ez-toc-container a.ez-toc-link.active, #ez-toc-container li.active > a.ez-toc-link{border-left-color:var(--brand-500);color:var(--brand-700)!important;font-weight:600} #ez-toc-container .ez-toc-page-1 counter-reset,#ez-toc-container .ez-toc-list-level-3{counter-reset:none} #ez-toc-container .ez-toc-list li::before{display:none} @media (max-width:980px){#ez-toc-container{position:static}} /* --- 7.7 Post title + comments in the Theme Builder body -------------------- */ .et_pb_post_title .entry-title{font-family:var(--font-display);font-weight:600;font-size:52px; line-height:1.05;letter-spacing:-1px} .et_pb_post_title .et_pb_title_meta_container{font-family:var(--font-body);font-size:13px} .gtg-comments .comment-reply-title,.gtg-comments h1,.gtg-comments h2,.gtg-comments h3{ font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--ink-900)} .gtg-comments .comment-form input[type="text"],.gtg-comments .comment-form input[type="email"], .gtg-comments .comment-form input[type="url"],.gtg-comments .comment-form textarea{ background:#fff!important;border:1px solid var(--border-subtle)!important;border-radius:var(--radius-md)!important; font-family:var(--font-body)!important;font-size:15px!important;padding:13px 16px!important;color:var(--ink-900)!important} .gtg-comments .comment-form input:focus,.gtg-comments .comment-form textarea:focus{ border-color:var(--brand-500)!important;box-shadow:0 0 0 3px rgba(87,138,200,.38)!important;outline:none!important} .gtg-comments .form-submit .et_pb_button{background:var(--brand-500)!important;color:#fff!important; border-color:var(--brand-500)!important} /* --- 7.8 Details block = the FAQ accordion ---------------------------------- Gutenberg's Details block is the native equivalent of the design system's FAQ rows: a rhythm of hairlines with a +/- toggle, never a stack of boxes. */ .et_pb_post_content .wp-block-details{margin:0;padding:20px 0;border-bottom:1px solid var(--border-subtle); background:transparent;max-width:68ch} .et_pb_post_content h2 + .wp-block-details{border-top:1px solid var(--border-subtle);margin-top:24px} .et_pb_post_content .wp-block-details summary{list-style:none;cursor:pointer;position:relative; padding-right:44px;font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.45; letter-spacing:-.012em;color:var(--ink-900)} .et_pb_post_content .wp-block-details summary::-webkit-details-marker{display:none} .et_pb_post_content .wp-block-details summary:after{content:"";position:absolute;right:12px;top:50%; width:14px;height:2px;background:var(--brand-600);transform:translateY(-50%)} .et_pb_post_content .wp-block-details summary:before{content:"";position:absolute;right:18px;top:50%; width:2px;height:14px;background:var(--brand-600);transform:translateY(-50%);transition:opacity .14s var(--ease-out)} .et_pb_post_content .wp-block-details[open] summary:before{opacity:0} .et_pb_post_content .wp-block-details p{font-size:15px;line-height:1.6;color:var(--ink-600);padding-right:44px} /* --- 7.9 The TOC column wrapper in the Theme Builder body ------------------- */ .gtg-toc-wrap{position:sticky;top:100px} .gtg-breadcrumb p{margin:0} .gtg-breadcrumb a{color:var(--ink-500);text-decoration:none} .gtg-breadcrumb a:hover{color:var(--brand-600)} /* --- 7.10 Byline: author, published date, updated pill, reading time -------- Rendered by the [gtg_byline] shortcode in the Theme Builder post body. The "Updated" pill is deliberately the loudest thing in the row — freshness is the brand's core credibility claim, so it should not read as fine print. */ .gtg-byline-wrap{margin-bottom:32px!important} .gtg-byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .gtg-byline__avatar img{width:40px;height:40px;border-radius:50%;display:block} .gtg-byline__stack{display:flex;flex-direction:column;gap:3px;min-width:0} .gtg-byline__author{font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.2;color:var(--ink-900)} .gtg-byline__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--ink-500)} .gtg-byline__dot{width:3px;height:3px;border-radius:50%;background:var(--ink-300);flex:0 0 auto} .gtg-byline__updated{display:inline-flex;align-items:center;gap:5px;padding:3px 9px; border-radius:var(--radius-pill);background:var(--brand-100);color:var(--brand-800); font-family:var(--font-display);font-weight:600;font-size:12px;line-height:1.25;letter-spacing:.02em} .gtg-byline__updated time{color:inherit} .gtg-byline__cat{margin-left:auto;display:inline-flex;align-items:center;height:30px;padding:0 14px; border-radius:var(--radius-pill);background:var(--brand-50);border:1px solid var(--brand-100); color:var(--brand-700)!important;font-family:var(--font-display);font-weight:500;font-size:13px; line-height:1;text-decoration:none!important;transition:var(--transition-control)} .gtg-byline__cat:hover{background:var(--brand-100)} @media (max-width:980px){.gtg-byline__cat{margin-left:0}} /* --- 7.11 Takeaways slot: the shortcode's own placement in the template ---- The Theme Builder body calls [wpsummarize] in a Text module directly above the Post Content module, so turn the plugin's own auto-insert OFF. */ .gtg-takeaways-wrap{margin-bottom:40px!important} .gtg-takeaways-wrap p:empty{display:none} /* --- 7.12 Header: logo hard left, menu hard right -------------------------- No Divi setting does this. Keep the Menu module on "Left Aligned" and let these rules push the nav to the far edge. Note the `nav` in the selector chain — .et_pb_menu__menu > nav > ul — Divi wraps the list in a