/** * FerventWord * * @package ferventword * @author Jerry Simmons * @copyright 2025 Jerry Simmons * @license GPL-2.0+ */ @font-face { font-family: 'Apertura'; src: url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/apertura-regular.woff2') format('woff2'), url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/apertura-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Apertura Medium'; src: url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/apertura-medium.woff2') format('woff2'), url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/apertura-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Birds of Paradise'; src: url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/birds-of-paradise.woff2') format('woff2'), url('https://ferventword.s3.us-east-1.amazonaws.com/ferventword/font/birds-of-paradise.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /** * THE PALETTE — all fixed, light-mode values. * * Everything here is a literal color. That matters: the `fwbg` body class is * added to EVERY page, including Divi-built ones (home, marketing), where the * section backgrounds belong to Divi and stay light in both color schemes. * Those pages must keep rendering exactly as they always have. * * Dark mode is opted into per page by `body.fwbg-page` below. * * Two kinds of color live here: * - BOLD hues (--fw-red, --fw-green, …) and --fw-black are fixed in BOTH * schemes. They are dark surfaces carrying white text — nav, footer, * tooltips, progress bars — plus borders and accents. Never make these * theme aware. * - SURFACE tints (--fw-*-light, --fw-*-bg, --fw-surface) and TEXT tokens * (--fw-*-text, --fw-black-rule) get dark counterparts below. **/ --fw-body-font-size: 16px; --fw-h1-font-size: 2em; --fw-h2-font-size: 1.75em; --fw-h3-font-size: 1.5em; /* White */ --fw-white: #F8F8F8; --fw-true-white: #FFFFFF; /* Red */ --fw-red: #7F1518; --fw-red-light: #EDDCDD; /* Orange */ --fw-orange: #BD4B27; --fw-orange-light: #F1D0C7; --fw-orange-bg: #F5E8E4; /* Yellow */ --fw-yellow: #D77C28; --fw-yellow-light: #F7E0C7; /* Green */ --fw-green: #2D5126; --fw-green-light: #E1E4DE; /* Blue */ --fw-blue: #1F2655; --fw-blue-light: #DEDFE7; --fw-blue-bg: #EBE8EC; /* Purple */ --fw-purple: #522D55; --fw-purple-light: #E5E0E6; /* Black */ --fw-black: #282528; --fw-black-light: #E0E0DF; /* Page canvas and neutral panel surfaces */ --fw-page-bg: #FFFFFF; --fw-surface: #FFFFFF; /* Accent text — the hue used for links, icons and small headings */ --fw-red-text: #7F1518; --fw-orange-text: #BD4B27; --fw-yellow-text: #D77C28; --fw-green-text: #2D5126; --fw-blue-text: #1F2655; --fw-purple-text: #522D55; /* Body text, and the muted/hairline variants of it */ --fw-black-text: #282528; --fw-black-text-85: rgba(0,0,0,.85); --fw-black-text-65: rgba(0,0,0,.65); --fw-black-rule: rgba(0,0,0,.45); /* Overlay scrim — the ::backdrop behind a modal-maker dialog or popover. Not a surface: nothing sits on it but the overlay itself. */ --fw-scrim: rgba(0,0,0,.85); } /** * DARK MODE * * `fwbg` is on every page, so the dark palette applies site wide — plugin * templates and Divi-built pages alike. Divi's own surfaces (the header and * .et_pb_section backgrounds) are not theme aware on their own; they are * handled in the dark-only block further down. * * color-scheme is required here: without it every light-dark() below silently * returns its light value no matter what the visitor's OS is set to. * * The dark canvas matches FerventWord-Reading's #282528 so the two plugins * agree on the background. Divi hardcodes `body { background: #fff }` with no * dark variant, which body.fwbg out-specifies. **/ body.fwbg { color-scheme: light dark; /* Surfaces: light tint in light mode, dark tint of the same hue in dark */ --fw-red-light: light-dark( #EDDCDD, #3A2A2B ); --fw-orange-light: light-dark( #F1D0C7, #452F28 ); --fw-orange-bg: light-dark( #F5E8E4, #3A2E2A ); --fw-yellow-light: light-dark( #F7E0C7, #3E3227 ); --fw-green-light: light-dark( #E1E4DE, #2C3A2A ); --fw-blue-light: light-dark( #DEDFE7, #2A2C3A ); --fw-blue-bg: light-dark( #EBE8EC, #2E2C33 ); --fw-purple-light: light-dark( #E5E0E6, #352A36 ); --fw-black-light: light-dark( #E0E0DF, #353235 ); --fw-page-bg: light-dark( #FFFFFF, #282528 ); --fw-surface: light-dark( #FFFFFF, #302D30 ); /** * Accent text. The BOLD hues are tuned for dark-on-light and go invisible on * a dark surface, so each gets a lightened counterpart that clears 4.5:1 on * the surfaces above. **/ --fw-red-text: light-dark( #7F1518, #D98E8E ); --fw-orange-text: light-dark( #BD4B27, #D98E70 ); --fw-yellow-text: light-dark( #D77C28, #E0A868 ); --fw-green-text: light-dark( #2D5126, #86A87E ); --fw-blue-text: light-dark( #1F2655, #9096C4 ); --fw-purple-text: light-dark( #522D55, #B08FB3 ); /* Body text, and the muted/hairline variants of it */ --fw-black-text: light-dark( #282528, #E0E0DF ); --fw-black-text-85: light-dark( rgba(0,0,0,.85), rgba(224,224,223,.85) ); --fw-black-text-65: light-dark( rgba(0,0,0,.65), rgba(224,224,223,.65) ); --fw-black-rule: light-dark( rgba(0,0,0,.45), rgba(224,224,223,.35) ); /* Heavier in dark mode: the overlay content is the only lit thing on screen, so the scrim has to do more work to separate it from a canvas that is already dark. */ --fw-scrim: light-dark( rgba(0,0,0,.85), rgba(0,0,0,.92) ); background-color: var( --fw-page-bg ); } /** * DIVI SURFACES IN DARK MODE * * The theme paints the header and every .et_pb_section a fixed light color that * does not respond to prefers-color-scheme, so plugin text set with * --fw-black-text would go light on a white panel. * * Deliberately wrapped in a dark-only media query rather than driven by * light-dark() tokens: in light mode these rules do not exist at all, so a * section given a brand background in the Divi builder keeps it. In dark mode * every section flattens to the page canvas — if a section ever needs to keep * its own color there, except it by its .et_pb_section_N class. * * The header logo is a JPG, so its white matte cannot go transparent. Swap in * the white SVG the footer already uses. **/ @media ( prefers-color-scheme: dark ) { body.fwbg #main-header, body.fwbg #main-header .nav li ul, body.fwbg #main-header .et_mobile_menu, body.fwbg .et_pb_section { background-color: var( --fw-page-bg ); } body.fwbg #main-header, body.fwbg #main-header a, body.fwbg #top-menu a { color: var( --fw-black-text ); } body.fwbg #logo { content: url( 'https://ferventword.s3.us-east-1.amazonaws.com/ferventword/logos/FerventWord-Logo_wide-white.svg' ); } } html .fwbg, body.fwbg, .fwbg p { font-family: 'Apertura', sans-serif; font-size: var( --fw-body-font-size ); font-weight: 400; line-height: 1.35em; color: var( --fw-black-text ); } body.fwbg h1 { font-family: 'Apertura Medium', sans-serif; font-size: var( --fw-h1-font-size ); font-weight: 600; } /* Headings emitted by jswj_ferventword_heading() sit on the page canvas — on Divi pages they would otherwise inherit the theme's fixed #333. Scoped to this wrapper on purpose: a blanket `body.fwbg h2` would tie on specificity with `.fwui_book_nav h2` and, loading later than fwbg-ui.css, would win and undo the white text on the dark nav bar. */ body.fwbg .ferventword_single_heading_div h1, body.fwbg .ferventword_single_heading_div h2, body.fwbg .ferventword_single_heading_div h3, body.fwbg .ferventword_single_heading_div h4, body.fwbg .ferventword_single_heading_div h5, body.fwbg .ferventword_single_heading_div h6 { color: var( --fw-black-text ); } /* body.fwbg h2, body.fwbg h3, body.fwbg h4, body.fwbg h5, body.fwbg h6 { */ body h2, body h3, body h4, body h5, body h6 { margin-top: 20px; font-family: 'Apertura Medium', sans-serif; font-weight: 400; } body.fwbg h2 { font-size: var(--fw-h2-font-size); } body.fwbg h3 { font-size: var(--fw-h3-font-size); } body.fwbg a { font-family: 'Apertura Medium', sans-serif; font-weight: 600; } .ferventword_motto { margin: 10px !important; font-family: 'Birds of Paradise', serif !important; font-size: 250% !important; line-height: 125%; letter-spacing: 1px; text-align: center; }