/* DexMat UI: blog overview page (/blog/). Loaded only on the Blog category archive. v1.3.0 */ /* ---- Shared ---------------------------------------------------------- */ /* Beaver Builder rows carrying the page (class dm-blog-row): no builder spacing, our containers set their own. */ .dm-blog-row .fl-module, .dm-blog-row .fl-module-content { margin: 0; } .dm-blog-row .fl-col-content, .dm-blog-row .fl-row-content-wrap { padding: 0; } .dm-blog-row .fl-col-group::before, .dm-blog-row .fl-col-group::after { display: none; } .dm-blog-masthead, .dm-blog-featured__inner, .dm-blog-recent, .dm-blog-more { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding-left: 56px; padding-right: 56px; } .dm-blog-eyebrow, .dm-blog-featured .dm-eyebrow { display: inline-block; align-self: flex-start; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #3D3D3D; border-bottom: 2px solid #000; padding-bottom: 7px; line-height: 1.2; } .dm-blog-featured .dm-eyebrow { color: #2AD2C9; border-bottom-color: #2AD2C9; } /* ---- Masthead -------------------------------------------------------- */ .dm-blog-masthead { background: #fff; padding-top: calc(var(--dm-header, 84px) + 92px); padding-bottom: 88px; display: grid; grid-template-columns: 1fr 400px; align-items: end; gap: 96px; } .dm-blog-masthead__left { display: flex; flex-direction: column; gap: 20px; } .dm-blog-masthead h1.dm-blog-title { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 92px; line-height: 0.98; letter-spacing: -0.01em; color: #000; } .dm-blog-masthead .dm-blog-intro { margin: 0; font-family: 'Noto Sans', sans-serif; font-size: 20px; line-height: 1.6; color: #3D3D3D; max-width: 46ch; text-wrap: pretty; } .dm-blog-search { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; } .dm-blog-search__help { font-family: 'Noto Sans', sans-serif; font-size: 13px; line-height: 1.5; color: #7A7A78; } /* WP Grid Builder search facet, restyled to the mockup field */ .dm-blog-search .wpgb-facet { margin: 0; } .dm-blog-search .wpgb-search-facet, .dm-blog-search .wpgb-input-wrapper { position: relative; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #000; padding-bottom: 13px; } .dm-blog-search .wpgb-search-facet::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,") no-repeat center / 18px; } .dm-blog-search .wpgb-search-facet label { flex: 1; display: flex; min-width: 0; margin: 0; padding: 0; } .dm-blog-search .wpgb-search-facet input[type="search"], .dm-blog-search .wpgb-search-facet input[type="text"] { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: #000; } .dm-blog-search .wpgb-search-facet input::placeholder { color: #7A7A78; opacity: 1; } .dm-blog-search .wpgb-search-facet input::-webkit-search-cancel-button { -webkit-appearance: none; } .dm-blog-search .wpgb-search-facet .wpgb-input-icon, .dm-blog-search .wpgb-search-facet svg { display: none; } .dm-blog-search .wpgb-search-facet button.wpgb-input-clear, .dm-blog-search .wpgb-search-facet .wpgb-input-clear { display: none; } .dm-blog-search .wpgb-search-facet:focus-within { border-bottom-color: #2AD2C9; } /* ---- Featured band --------------------------------------------------- */ .dm-blog-featured { position: relative; min-height: 620px; overflow: hidden; background: #000; } /* grows for long titles so nothing clips */ .dm-blog-featured__media { position: absolute; inset: 0; background-size: cover; background-position: 62% 42%; background-repeat: no-repeat; } .dm-blog-featured__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.80) 38%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.10) 100%); } .dm-blog-featured__inner { position: relative; min-height: 620px; display: flex; align-items: center; } .dm-blog-featured__content { display: flex; flex-direction: column; gap: 24px; max-width: 880px; padding: 72px 0; } .dm-blog-featured__title { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 60px; line-height: 1.06; color: #fff; max-width: 18ch; text-wrap: pretty; } .dm-blog-featured__title a { color: #fff; text-decoration: none; } .dm-blog-featured__title a:hover { color: #2AD2C9; } .dm-blog-featured__excerpt { margin: 0; font-family: 'Noto Sans', sans-serif; font-size: 18px; line-height: 1.64; color: rgba(255,255,255,0.86); max-width: 58ch; text-wrap: pretty; } .dm-blog-featured__meta { margin: 0; font-family: 'Noto Sans', sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); } body.dm-blog-searching .dm-blog-featured { display: none; } /* Buttons (square, outline) */ .dm-blog-featured .dm-btn, .dm-blog-more .wpgb-load-more-facet button, .dm-blog-more .wpgb-facet button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; min-height: 44px; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; border: 1px solid currentColor; border-radius: 0; background: transparent; box-shadow: none; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; } .dm-blog-featured .dm-btn { color: #2AD2C9; padding: 17px 33px; margin-top: 10px; } .dm-blog-featured .dm-btn:hover { background: #2AD2C9; color: #000; } .dm-blog-featured .dm-btn__arrow { font-size: 18px; line-height: 1; } /* ---- Recent posts ---------------------------------------------------- */ .dm-blog-recent { background: #fff; padding-top: 80px; padding-bottom: 0; } .dm-blog-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; border-bottom: 1px solid #E4E4E1; padding-bottom: 18px; margin-bottom: 44px; } .dm-blog-recent__label { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #000; } .dm-blog-recent__sort { font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #7A7A78; } /* Grid: WPGB handles columns/gaps (3 cols, 32px x 56px set in the grid settings); these neutralise card chrome. */ .dm-blog-grid .wpgb-card, .dm-blog-grid .wpgb-card-wrapper, .dm-blog-grid .wpgb-card-inner { background: transparent; border: 0; border-radius: 0; box-shadow: none; } .dm-blog-grid .wpgb-card-inner, .dm-blog-grid .wpgb-card-content, .dm-blog-grid .wpgb-card-body, .dm-blog-grid .wpgb-card-body > div { display: flex; flex-direction: column; height: 100%; padding: 0; margin: 0; } .dm-blog-grid .wpgb-card-body > div { flex: 1; } .dm-blog-grid .wpgb-card-wrapper { padding-bottom: 24px; } /* WPGB gutter is 32px both ways; this makes the row gap 56px */ .dm-blog-grid .wpgb-card .dm-card > .dm-card__meta { margin-top: auto !important; } /* WPGB's card reset zeroes block margins; pin the meta to the bottom */ .dm-blog-grid .wpgb-card .dm-card { display: flex; flex-direction: column; gap: 18px; height: 100%; color: inherit; text-decoration: none; } .dm-blog-grid .wpgb-card .dm-card__media { position: relative; display: block; width: 100%; height: 232px; background: #F4F4F2 center / cover no-repeat; } .dm-blog-grid .wpgb-card .dm-card__play { position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; background: rgba(0,0,0,0.75); } .dm-blog-grid .wpgb-card .dm-card__play::after { content: ""; position: absolute; left: 17px; top: 15px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; } .dm-blog-grid .wpgb-card .dm-card__label { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #004851; } .dm-blog-grid .wpgb-card .dm-card__title { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.2; color: #000; text-wrap: pretty; transition: color .15s; } .dm-blog-grid .wpgb-card .dm-card:hover .dm-card__title { color: #004851; } .dm-blog-grid .wpgb-card .dm-card__excerpt { font-family: 'Noto Sans', sans-serif; font-size: 15px; line-height: 1.62; color: #3D3D3D; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dm-blog-grid .wpgb-card .dm-card__meta { margin-top: auto; padding-top: 14px; border-top: 1px solid #E4E4E1; font-family: 'Noto Sans', sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: #7A7A78; min-height: calc(14px + 3em); box-sizing: border-box; } /* two lines reserved: long dates or names wrap without moving the rule */ /* No results line */ .dm-blog-grid .wpgb-content .wpgb-message, .dm-blog-grid .wpgb-no-results, .dm-blog-grid .wpgb-error { font-family: 'Noto Sans', sans-serif; font-size: 15px; color: #3D3D3D; text-align: left; padding: 0; } /* ---- Load more ------------------------------------------------------- */ .dm-blog-more { background: #fff; padding-top: 56px; padding-bottom: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; } .dm-blog-more::before, .dm-blog-more::after { content: ""; display: block; height: 1px; background: #E4E4E1; } .dm-blog-more__center { display: flex; flex-direction: column; align-items: center; gap: 16px; } .dm-blog-more .wpgb-facet { margin: 0; } .dm-blog-more .wpgb-facet button.wpgb-button { color: #000 !important; background: transparent !important; border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; padding: 17px 36px !important; font-family: 'Oswald', sans-serif !important; font-weight: 300 !important; font-size: 15px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; } /* !important: WPGB's facet stylesheet styles .wpgb-button with its own colours */ .dm-blog-more .wpgb-facet button.wpgb-button::after { content: "\2193"; font-size: 18px; line-height: 1; } .dm-blog-more .wpgb-facet button.wpgb-button:hover, .dm-blog-more .wpgb-facet button.wpgb-button:focus-visible { background: #000 !important; color: #fff !important; } .dm-blog-more .wpgb-facet button .wpgb-remaining { display: none; } .dm-blog-counter { margin: 0; font-family: 'Noto Sans', sans-serif; font-size: 13px; color: #7A7A78; min-height: 1em; } /* ---- Tablet (below 1024px) ------------------------------------------- */ @media (max-width: 1023px) { .dm-blog-masthead, .dm-blog-featured__inner, .dm-blog-recent, .dm-blog-more { padding-left: 32px; padding-right: 32px; } /* same gutter as dexmat-ui.css below 992px */ .dm-blog-masthead { grid-template-columns: 1fr; gap: 40px; padding-top: calc(var(--dm-header, 84px) + 64px); padding-bottom: 56px; } .dm-blog-masthead h1.dm-blog-title { font-size: 64px; } .dm-blog-featured, .dm-blog-featured__inner { min-height: 520px; } .dm-blog-featured__title { font-size: 44px; } } /* ---- Phone (below 640px) --------------------------------------------- */ @media (max-width: 639px) { .dm-blog-masthead, .dm-blog-featured__inner, .dm-blog-recent, .dm-blog-more { padding-left: 20px; padding-right: 20px; } .dm-blog-masthead { padding-top: calc(var(--dm-header, 84px) + 48px); padding-bottom: 40px; } .dm-blog-masthead h1.dm-blog-title { font-size: 52px; } .dm-blog-masthead .dm-blog-intro { font-size: 17px; } .dm-blog-featured, .dm-blog-featured__inner { min-height: 0; } .dm-blog-featured__media::after { background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.86) 60%, rgba(0,0,0,0.80) 100%); } .dm-blog-featured__content { padding: 40px 0; max-width: none; gap: 18px; } .dm-blog-featured__title { font-size: 34px; max-width: none; } .dm-blog-featured__excerpt { font-size: 16px; } .dm-blog-grid .wpgb-card .dm-card__media { height: 200px; } .dm-blog-more { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 64px; } .dm-blog-more::before, .dm-blog-more::after { display: none; } .dm-blog-more .wpgb-facet button { width: 100%; } } /* keyboard focus on blog cards and the featured band */ .dm-blog-grid .wpgb-card .dm-card:focus-visible, .dm-blog-featured a:focus-visible { outline: 1px solid #2AD2C9 !important; outline-offset: 4px; } /* ===== 1.6.0: single blog post template (Blog Post Build Brief, option 1A). Loaded on single Blog posts, the builder and Themer previews only. Layout rows carry these classes (Advanced > Class): dm-post-head, dm-post-body, dm-post-recent. Post content styling is scoped to .fl-module-fl-post-content (the Themer Post Content module; its output has no inner wrapper class), so existing posts pick it up without edits. Values are the brief's; tokens from dexmat-ui.css where one exists. */ /* ============================================================ rows: 1440 content width, 56px gutters */ .fl-row.dm-post-head .fl-row-content-wrap, .fl-row.dm-post-body .fl-row-content-wrap, .fl-row.dm-post-recent .fl-row-content-wrap { padding-left: 56px; padding-right: 56px; } .fl-row.dm-post-head .fl-row-content, .fl-row.dm-post-body .fl-row-content, .fl-row.dm-post-recent .fl-row-content { max-width: 1328px; margin: 0 auto; } .fl-row.dm-post-head .fl-col, .fl-row.dm-post-body .fl-col, .fl-row.dm-post-recent .fl-col { padding: 0; } .fl-row.dm-post-head .fl-module, .fl-row.dm-post-body .fl-module, .fl-row.dm-post-recent .fl-module { margin: 0; } /* Three-column grid shared by the header text block and the body: 260 · 720 · 260, 44px gaps (brief 6). */ .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-of-type, .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group { display: grid; grid-template-columns: 260px 720px 260px; column-gap: 44px; justify-content: start; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col, .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col { width: auto !important; max-width: none; min-width: 0; } /* Beaver Builder does not render empty columns on the front end, so the header text column is placed explicitly in the middle track. */ .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-of-type > .fl-col:first-child { grid-column: 1; grid-row: 1; } .fl-row.dm-post-head .fl-col.dm-post-head__text { grid-column: 2; grid-row: 1; } .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:first-child { grid-column: 1; grid-row: 1; } .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:nth-child(2) { grid-column: 2; grid-row: 1; } .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:nth-child(3) { grid-column: 3; grid-row: 1; } /* ============================================================ 7.1 post header */ .fl-row.dm-post-head .fl-row-content-wrap { padding-top: calc(var(--dm-header, 84px) + 80px); padding-bottom: 0; } /* transparent header sits over the page */ .dm-post-head__text { display: flex; flex-direction: column; gap: 24px; } .dm-post-head__text .fl-module + .fl-module { margin: 0; } .dm-crumb { display: flex; align-items: center; gap: 12px; font-family: var(--dm-oswald); font-weight: 400; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; } .dm-crumb a { text-decoration: none; transition: color .15s; } .dm-crumb__parent { color: #7A7A78; } .dm-crumb__parent:hover { color: var(--dm-deep-sea); } .dm-crumb__sep { color: #B4B4B0; } .dm-crumb__current { color: var(--dm-black); border-bottom: 2px solid var(--dm-black); padding-bottom: 7px; margin-bottom: -9px; } .fl-row.dm-post-head h1.dm-post-title, .fl-row.dm-post-head .dm-post-title h1 { margin: 8px 0 0; font-family: var(--dm-oswald); font-weight: 300; font-size: 64px; line-height: 1.05; letter-spacing: -0.005em; color: var(--dm-black); max-width: 24ch; text-wrap: balance; } .dm-post-meta { margin: 0; font-family: var(--dm-sans); font-size: 13px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: #7A7A78; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group + .fl-col-group { margin-top: 56px; } /* text block to image */ .dm-post-hero { margin: 0; height: 640px; overflow: hidden; } .dm-post-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ============================================================ 7.3 contents rail */ .fl-row.dm-post-body .fl-row-content-wrap { padding-top: 80px; padding-bottom: 112px; } /* Sticky lives on the rail column's module so it can travel the full height of the body row (the grid stretches the column). */ .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:first-child > .fl-col-content { display: block; height: 100%; } .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:first-child > .fl-col-content > .fl-module { position: sticky; top: calc(var(--dm-header-h, 84px) + 32px); } .dm-toc[hidden] { display: none; } .dm-toc__label { display: block; font-family: var(--dm-oswald); font-weight: 400; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-black); padding-bottom: 14px; border-bottom: 1px solid #E4E4E1; margin-bottom: 20px; } .dm-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .dm-toc__item { margin: 0; padding: 0; } .dm-toc__link { display: block; padding-left: 14px; border-left: 2px solid transparent; font-family: var(--dm-sans); font-size: 14px; line-height: 1.5; color: #7A7A78; text-decoration: none; transition: color .15s, border-color .15s; } .dm-toc__link:hover { color: var(--dm-deep-sea); } .dm-toc__link.is-active { color: var(--dm-black); font-weight: 700; border-left-color: var(--dm-black); } .dm-toc__link:focus-visible { outline: 1px solid var(--dm-teal); outline-offset: 4px; } /* ============================================================ 7.4 post content (Post Content module) */ .fl-row.dm-post-body .fl-module-fl-post-content { font-family: var(--dm-sans); font-size: 18px; line-height: 1.72; color: var(--dm-text); } /* Neutralise the post's own Beaver Builder row, column and module spacing so blocks sit 26px apart in the 720 column. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-row-content-wrap { padding: 0; margin: 0; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-row-content { max-width: none; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-col { padding: 0; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module { margin: 0 0 26px; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-row:last-child .fl-col-group:last-child .fl-col:last-child .fl-module:last-child { margin-bottom: 0; } .fl-row.dm-post-body .fl-module-fl-post-content p { margin: 0 0 26px; font-size: 18px; line-height: 1.72; color: var(--dm-text); } .fl-row.dm-post-body .fl-module-fl-post-content .fl-rich-text > :last-child { margin-bottom: 0; } .fl-row.dm-post-body .fl-module-fl-post-content ul, .fl-row.dm-post-body .fl-module-fl-post-content ol { margin: 0 0 26px; padding-left: 24px; } .fl-row.dm-post-body .fl-module-fl-post-content li { margin: 0 0 10px; } .fl-row.dm-post-body .fl-module-fl-post-content a { color: var(--dm-deep-sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fl-row.dm-post-body .fl-module-fl-post-content a:hover { color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content strong { font-weight: 700; } /* Old posts with fixed-width tables: scroll inside the module rather than the page. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-rich-text { overflow-x: auto; } .fl-row.dm-post-body .fl-module-fl-post-content table { max-width: 100%; } .fl-row.dm-post-body .fl-module-fl-post-content img { max-width: 100%; height: auto; } /* Lead paragraph: the first paragraph of the post (first rich-text module), or any paragraph/module with .dm-lead. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-row:first-child .fl-col-group:first-child .fl-col:first-child .fl-module.fl-module-rich-text:first-child .fl-rich-text > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content .dm-lead > .fl-rich-text > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content > .fl-module-content > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content p.dm-lead { font-size: 21px; line-height: 1.62; color: var(--dm-black); } /* Headings: H2 66px above (40 + the 26 block gap), H3 default gap. */ .fl-row.dm-post-body .fl-module-fl-post-content h2, .fl-row.dm-post-body .fl-module-fl-post-content .fl-heading h2.fl-heading, .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading h2 { margin: 40px 0 26px; font-family: var(--dm-oswald); font-weight: 300; font-size: 38px; line-height: 1.14; letter-spacing: 0; color: var(--dm-black); text-wrap: balance; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading { margin-top: 40px; } /* Heading module: the 40px lives on the module */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading h2 { margin-top: 0; } .fl-row.dm-post-body .fl-module-fl-post-content h3, .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading h3 { margin: 0 0 16px; font-family: var(--dm-oswald); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: 0; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content h4 { margin: 0 0 12px; font-family: var(--dm-oswald); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .fl-row:first-child .fl-col-group:first-child .fl-col:first-child .fl-module:first-child h2 { margin-top: 0; } /* Existing posts that put an H1 in the body: show it as an H2 (the layout owns the H1). */ .fl-row.dm-post-body .fl-module-fl-post-content h1 { margin: 40px 0 26px; font-family: var(--dm-oswald); font-weight: 300; font-size: 38px; line-height: 1.14; color: var(--dm-black); } /* "In brief" block: Text Editor module with class dm-brief (saved module "DexMat: In brief"). */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-brief { margin-top: 22px; padding-top: 22px; border-top: 2px solid var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .dm-brief__label, .fl-row.dm-post-body .fl-module-fl-post-content .dm-brief p.dm-brief__label { margin: 0 0 4px; font-family: var(--dm-oswald); font-weight: 400; font-size: 13px; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .dm-brief ol { list-style: none; margin: 0; padding: 0; counter-reset: dm-brief; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-brief li { counter-increment: dm-brief; display: grid; grid-template-columns: 40px 1fr; margin: 0; padding: 16px 0; border-bottom: 1px solid #E4E4E1; font-family: var(--dm-sans); font-size: 17px; line-height: 1.64; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .dm-brief li::before { content: counter(dm-brief, decimal-leading-zero); font-family: var(--dm-oswald); font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--dm-deep-sea); } /* Figures: Photo module. Full column width, 16:9 crop, caption below. Add dm-figure--natural to keep an image's own ratio (charts). */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-photo { text-align: left; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-photo-content { display: block; width: 100%; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-figure--natural .fl-photo-img { aspect-ratio: auto; object-fit: contain; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-photo-caption { display: block; margin: 12px 0 0; font-family: var(--dm-sans); font-size: 14px; line-height: 1.55; color: #7A7A78; text-align: left; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading + .fl-module-rich-text + .fl-module-photo { margin-bottom: 48px; } /* H3 + paragraph + figure groups (brief 7.4) */ /* Data tables: Text Editor module with class dm-data (saved module "DexMat: Data table"). th/td with class dm-data__hi highlight a column. */ .fl-row.dm-post-body .fl-module-fl-post-content .dm-data .fl-rich-text { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--dm-black); margin: 0; font-family: var(--dm-sans); font-size: 16px; line-height: 1.5; color: var(--dm-text); font-variant-numeric: tabular-nums; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data th { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--dm-black); font-family: var(--dm-oswald); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dm-black); text-align: right; vertical-align: bottom; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data td { padding: 16px 12px 16px 0; border-bottom: 1px solid #E4E4E1; text-align: right; vertical-align: top; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data th:first-child, .fl-row.dm-post-body .fl-module-fl-post-content .dm-data td:first-child { text-align: left; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data td:first-child { color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data th:last-child, .fl-row.dm-post-body .fl-module-fl-post-content .dm-data td:last-child { padding-right: 0; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data .dm-data__hi { color: var(--dm-deep-sea); } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data td.dm-data__hi { font-weight: 700; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data table caption { caption-side: bottom; padding-top: 12px; font-size: 14px; line-height: 1.55; color: #7A7A78; text-align: left; } /* FAQ accordion: Beaver Builder Accordion module with class dm-faq (saved module "DexMat: FAQ accordion"; dexmat-ui.css has the base rules). Post-specific: + / − glyphs at 28px Oswald 200, 48px right padding on answers. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-item { border-top: 1px solid #DADAD6; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-item:last-child { border-bottom: 0; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-button { padding: 22px 0; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-button-label { font-family: var(--dm-oswald); font-weight: 300; font-size: 22px; line-height: 1.3; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-button-icon { font-size: 0; width: 20px; text-align: right; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-button-icon::before { content: "+"; font-family: var(--dm-oswald); font-weight: 200; font-size: 28px; line-height: 1; color: var(--dm-black); } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-item-active .fl-accordion-button-icon::before { content: "\2212"; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-content { padding: 0 48px 26px 0; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-content, .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-content p { font-size: 17px; line-height: 1.65; color: var(--dm-text); max-width: none; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-content p + p { margin-top: 14px; } /* Closing paragraph: Text Editor module (or paragraph) with class dm-closing. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-closing { margin-top: 32px; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-closing p, .fl-row.dm-post-body .fl-module-fl-post-content p.dm-closing { font-size: 20px; line-height: 1.6; color: var(--dm-black); } /* Video modules (UABB and Beaver Builder) keep their own aspect ratio; just clear the margin. */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-video, .fl-row.dm-post-body .fl-module-fl-post-content .uabb-video { margin: 0; } /* ============================================================ 7.5 recent posts */ .fl-row.dm-post-recent { background: var(--dm-band, #F4F4F2); } .fl-row.dm-post-recent .fl-row-content-wrap { padding-top: 80px; padding-bottom: 96px; } .dm-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--dm-rule, #DADAD6); margin-bottom: 44px; } .dm-recent__label { margin: 0; font-family: var(--dm-oswald); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-black); } .dm-recent__all { display: inline-flex; align-items: center; gap: 10px; font-family: var(--dm-oswald); font-weight: 300; font-size: 14px; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dm-black); text-decoration: none; } .dm-recent__all span { font-size: 16px; } .dm-recent__all:hover { color: var(--dm-deep-sea); } .dm-recent__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .dm-recent__card { display: flex; flex-direction: column; gap: 18px; color: inherit; text-decoration: none; } .dm-recent__media { position: relative; display: block; width: 100%; height: 232px; background: #E4E4E1 center / cover no-repeat; } .dm-recent__play { position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; background: rgba(0,0,0,0.75); } .dm-recent__play::after { content: ""; position: absolute; left: 17px; top: 15px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; } .dm-recent__cat { font-family: var(--dm-oswald); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dm-deep-sea); } .dm-recent__title { margin: 0; font-family: var(--dm-oswald); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--dm-black); text-wrap: pretty; transition: color .15s; } .dm-recent__card:hover .dm-recent__title { color: var(--dm-deep-sea); } .dm-recent__card:focus-visible { outline: 1px solid var(--dm-teal); outline-offset: 4px; } /* ============================================================ 9. tablet (below 1024) */ @media (max-width: 1023px) { .fl-row.dm-post-head .fl-row-content-wrap, .fl-row.dm-post-body .fl-row-content-wrap, .fl-row.dm-post-recent .fl-row-content-wrap { padding-left: 32px; padding-right: 32px; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-of-type, .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group { display: block; max-width: 720px; margin-left: auto; margin-right: auto; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group:first-of-type > .fl-col:first-child, .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:first-child, .fl-row.dm-post-body > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col:last-child { display: none; } /* rail and the empty right column */ .dm-toc { display: none; } .fl-row.dm-post-head .fl-row-content-wrap { padding-top: calc(var(--dm-header, 84px) + 56px); } .fl-row.dm-post-head h1.dm-post-title, .fl-row.dm-post-head .dm-post-title h1 { font-size: 48px; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group + .fl-col-group { margin-top: 40px; } .dm-post-hero { height: 420px; } .fl-row.dm-post-body .fl-row-content-wrap { padding-top: 56px; padding-bottom: 80px; } .dm-recent__grid { grid-template-columns: 1fr; gap: 28px; } .dm-recent__card { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 10px; align-items: start; } .dm-recent__media { grid-row: 1 / 3; height: 180px; } .dm-recent__cat { align-self: end; } } /* ============================================================ 9. phone (below 640) */ @media (max-width: 639px) { .fl-row.dm-post-head .fl-row-content-wrap, .fl-row.dm-post-body .fl-row-content-wrap, .fl-row.dm-post-recent .fl-row-content-wrap { padding-left: 20px; padding-right: 20px; } .fl-row.dm-post-head .fl-row-content-wrap { padding-top: calc(var(--dm-header, 84px) + 40px); } .dm-crumb a { display: inline-flex; align-items: center; min-height: 44px; } .dm-crumb__current { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--dm-black); } .dm-post-head__text { gap: 16px; } .fl-row.dm-post-head h1.dm-post-title, .fl-row.dm-post-head .dm-post-title h1 { font-size: 36px; } .fl-row.dm-post-head > .fl-row-content-wrap > .fl-row-content > .fl-col-group + .fl-col-group { margin-top: 28px; } .dm-post-hero { height: 240px; } .fl-row.dm-post-body .fl-row-content-wrap { padding-top: 40px; padding-bottom: 64px; } .fl-row.dm-post-body .fl-module-fl-post-content, .fl-row.dm-post-body .fl-module-fl-post-content p { font-size: 17px; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-row:first-child .fl-col-group:first-child .fl-col:first-child .fl-module.fl-module-rich-text:first-child .fl-rich-text > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content .dm-lead > .fl-rich-text > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content > .fl-module-content > p:first-child, .fl-row.dm-post-body .fl-module-fl-post-content p.dm-lead { font-size: 18px; } .fl-row.dm-post-body .fl-module-fl-post-content h2, .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading h2, .fl-row.dm-post-body .fl-module-fl-post-content h1 { font-size: 30px; } .fl-row.dm-post-body .fl-module-fl-post-content h3, .fl-row.dm-post-body .fl-module-fl-post-content .fl-module-heading h3 { font-size: 22px; } .fl-row.dm-post-body .fl-module-fl-post-content .dm-data table { min-width: 560px; } /* scrolls inside .fl-rich-text; the page does not */ .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-button { min-height: 44px; } .fl-row.dm-post-body .fl-module-fl-post-content .fl-module.dm-faq .fl-accordion-content { padding-right: 0; } .fl-row.dm-post-recent .fl-row-content-wrap { padding-top: 56px; padding-bottom: 64px; } .dm-recent__head { margin-bottom: 28px; } .dm-recent__card { display: flex; flex-direction: column; gap: 14px; } .dm-recent__media { height: 200px; } .dm-recent__title { font-size: 22px; } }