/* Theme Name: SepoDesk Theme URI: https://sepodesk.com Author: Euneolink Solutions Author URI: https://sepodesk.com Description: Product theme for SepoDesk — a marketing and documentation front end that sits alongside the SepoDesk engine running as a WordPress plugin. Elementor-ready, no build step, no external dependencies. Version: 1.4.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 8.1 License: Proprietary — Euneolink Solutions License URI: https://sepodesk.com/sepodesk/docs/license Text Domain: sepodesk Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { --sd-ink: #0b3d33; /* brand green — same value the Chart component leads with */ --sd-ink-soft: #123f35; --sd-green: #12855f; --sd-lime: #3ed598; --sd-body: #4b5b56; --sd-muted: #7a8b85; --sd-line: #e4ebe8; --sd-line-soft: #edf3f0; --sd-mint: #eaf6f0; --sd-paper: #f7faf8; --sd-white: #ffffff; --sd-amber: #f2b33d; --sd-danger: #c0392b; --sd-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sd-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sd-width: 1180px; --sd-width-read: 720px; --sd-radius: 18px; --sd-radius-sm: 12px; --sd-shadow: 0 28px 54px -34px rgba(11, 61, 51, 0.45); --sd-shadow-sm: 0 2px 8px rgba(11, 61, 51, 0.06); --sd-header-h: 72px; --sd-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* Mobile drawer. All four are overwritten by the Customizer; these are the fallbacks if that inline style ever fails to print. */ --sd-menu-h: calc(100vh - var(--sd-header-h)); --sd-menu-max-h: calc(100vh - var(--sd-header-h)); --sd-menu-item-pad: 14px; --sd-menu-font: 16px; --sd-menu-gap: 2px; /* Role tokens. Light mode points them at the palette above; dark mode repoints them at the bottom of this file. Anything whose meaning flips between modes (a colour used as text here and as a background there) goes through one of these. */ --sd-bg: var(--sd-white); --sd-surface: var(--sd-white); --sd-surface-2: var(--sd-paper); --sd-heading: var(--sd-ink); --sd-text: var(--sd-body); --sd-border: var(--sd-line); --sd-btn-bg: var(--sd-ink); --sd-btn-fg: var(--sd-white); --sd-btn-bg-h: var(--sd-ink-soft); --sd-header-bg: rgba(255, 255, 255, 0.82); --sd-hero-from: #eef8f3; --sd-hero-grid: rgba(11, 61, 51, 0.045); --sd-footer-bg: var(--sd-ink); --sd-cta-bg: var(--sd-ink); } /* Dark mode is opt-in per document: the no-flash script in writes data-theme on before first paint, so there is no light flash and the page cache can still store one HTML response for everyone. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } @supports (height: 100dvh) { :root { --sd-menu-h: calc(100dvh - var(--sd-header-h)); --sd-menu-max-h: calc(100dvh - var(--sd-header-h)); } } /* ========================================================================== 2. Reset and base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sd-font); font-size: 16.5px; line-height: 1.7; color: var(--sd-text); background: var(--sd-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } body.sd-nav-open { overflow: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; color: var(--sd-heading); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.035em; } h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.03em; } h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); } h4 { font-size: 1.15rem; } h5, h6 { font-size: 1rem; } /* The accent treatment: an inside a heading becomes serif italic. Same rule the Elementor landing page uses, so headings match across both. */ h1 em, h2 em, h3 em, .sd-em { font-family: var(--sd-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: var(--sd-green); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--sd-ink); } img, svg, video, iframe { max-width: 100%; height: auto; } img { display: block; } hr { border: 0; border-top: 1px solid var(--sd-border); margin: 2.5rem 0; } blockquote { margin: 1.8rem 0; padding: 0.3rem 0 0.3rem 1.4rem; border-left: 3px solid var(--sd-lime); color: var(--sd-heading); font-size: 1.1rem; } blockquote cite { display: block; margin-top: 0.6rem; font-size: 0.85rem; font-style: normal; color: var(--sd-muted); } code, kbd, pre, samp { font-family: var(--sd-mono); font-size: 0.9em; } code { background: var(--sd-mint); color: var(--sd-heading); padding: 0.15em 0.4em; border-radius: 5px; } pre { background: var(--sd-ink); color: #dff0e8; padding: 1.2rem 1.4rem; border-radius: var(--sd-radius-sm); overflow-x: auto; line-height: 1.6; } pre code { background: none; color: inherit; padding: 0; } table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; } th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--sd-border); } th { color: var(--sd-heading); font-weight: 600; background: var(--sd-surface-2); } ul, ol { padding-left: 1.3rem; } li { margin-bottom: 0.4rem; } ::selection { background: var(--sd-lime); color: var(--sd-ink); } /* Focus — visible, and never removed */ :focus-visible { outline: 2px solid var(--sd-green); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== 3. Layout helpers ========================================================================== */ .sd-wrap { width: 100%; max-width: var(--sd-width); margin: 0 auto; padding: 0 24px; } .sd-wrap--read { max-width: var(--sd-width-read); } .sd-section { padding: 76px 0; } .sd-section--tight { padding: 48px 0; } .sd-section--paper { background: var(--sd-surface-2); border-block: 1px solid var(--sd-border); } .sd-center { text-align: center; } .sd-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-green); } .sd-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; } .sd-lede { font-size: 1.12rem; color: var(--sd-body); max-width: 62ch; } .sd-center .sd-lede { margin-inline: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100000; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--sd-ink); color: #fff; border-radius: 999px; font-weight: 600; } /* ========================================================================== 4. Buttons ========================================================================== */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 28px; border: 1px solid transparent; border-radius: 999px; background: var(--sd-btn-bg); color: var(--sd-btn-fg); font-family: var(--sd-font); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--sd-ease), box-shadow 0.2s ease; } .sd-btn:hover { background: var(--sd-btn-bg-h); color: var(--sd-btn-fg); transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(11, 61, 51, 0.6); } .sd-btn--sm { padding: 11px 20px; font-size: 13.5px; } .sd-btn--lime { background: var(--sd-lime); color: var(--sd-ink); } .sd-btn--lime:hover { background: #2fc489; color: var(--sd-ink); } .sd-btn--ghost { background: transparent; color: var(--sd-heading); border-color: var(--sd-border); } .sd-btn--ghost:hover { background: var(--sd-mint); color: var(--sd-heading); } .sd-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); } .sd-btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ========================================================================== 5. Announcement bar ========================================================================== */ .sd-announce { background: var(--sd-ink); color: rgba(255, 255, 255, 0.88); font-size: 13.5px; text-align: center; padding: 9px 24px; } .sd-announce a { color: var(--sd-lime); font-weight: 600; } .sd-announce a:hover { color: #fff; text-decoration: underline; } /* ========================================================================== 6. Header ========================================================================== */ .sd-header { position: sticky; top: 0; z-index: 900; background: var(--sd-header-bg); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .sd-header.is-stuck { border-bottom-color: var(--sd-border); box-shadow: 0 6px 24px -18px rgba(11, 61, 51, 0.5); } .admin-bar .sd-header { top: 32px; } @media (max-width: 782px) { .admin-bar .sd-header { top: 46px; } } .sd-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--sd-header-h); } .sd-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .sd-brand img { max-height: 34px; width: auto; } .sd-brand__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--sd-ink); color: var(--sd-lime); display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -0.04em; } .sd-brand__text { font-size: 17.5px; font-weight: 700; color: var(--sd-heading); letter-spacing: -0.03em; } .sd-brand__tag { display: block; font-size: 11px; font-weight: 500; color: var(--sd-muted); letter-spacing: 0.02em; } .sd-nav { margin-left: auto; } .sd-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .sd-nav li { margin: 0; position: relative; } .sd-nav a { display: block; padding: 9px 14px; border-radius: 999px; color: var(--sd-heading); font-size: 14.5px; font-weight: 500; } .sd-nav a:hover { background: var(--sd-mint); } .sd-nav .current-menu-item > a, .sd-nav .current_page_item > a, .sd-nav .current-menu-ancestor > a { background: var(--sd-mint); font-weight: 600; } /* Dropdowns */ .sd-nav ul ul { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 14px; box-shadow: var(--sd-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .sd-nav li:hover > ul, .sd-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; } .sd-nav ul ul a { border-radius: 9px; font-size: 14px; } .sd-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .sd-header__link { font-size: 14.5px; font-weight: 600; color: var(--sd-heading); padding: 9px 6px; } .sd-header__link:hover { color: var(--sd-green); } .sd-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--sd-border); border-radius: 12px; cursor: pointer; } .sd-burger span { position: relative; display: block; width: 17px; height: 1.6px; background: var(--sd-heading); border-radius: 2px; transition: transform 0.22s var(--sd-ease), opacity 0.18s ease; } .sd-burger span::before, .sd-burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--sd-heading); border-radius: 2px; transition: transform 0.22s var(--sd-ease), top 0.22s var(--sd-ease); } .sd-burger span::before { top: -5.5px; } .sd-burger span::after { top: 5.5px; } .sd-burger[aria-expanded="true"] span { background: transparent; } .sd-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .sd-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 979px) { .sd-burger { display: flex; } .sd-header__actions .sd-header__link { display: none; } /* The drawer is absolute, not fixed. .sd-header carries backdrop-filter, and a filtered element becomes the containing block for its fixed-position descendants — which is why the old fixed drawer collapsed to the height of the header bar instead of filling the screen. Absolute positioning against the sticky header is the reliable way to sit underneath it. */ .sd-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 0; padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)); height: var(--sd-menu-h); max-height: var(--sd-menu-max-h); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--sd-surface); border-top: 1px solid var(--sd-border); box-shadow: 0 24px 40px -28px rgba(11, 61, 51, 0.45); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s var(--sd-ease), visibility 0.22s; } .sd-nav.is-open { opacity: 1; visibility: visible; transform: none; } /* "Fit content" mode — the drawer is only as tall as its links. */ .sd-menu--auto .sd-nav { height: auto; } .sd-nav ul { flex-direction: column; align-items: stretch; gap: var(--sd-menu-gap); } .sd-nav a { padding: var(--sd-menu-item-pad) 16px; border-radius: 12px; font-size: var(--sd-menu-font); } .sd-nav ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--sd-border); border-radius: 0; margin: 2px 0 6px 16px; padding: 0 0 0 8px; } /* Anything the theme wants at the bottom of the open drawer. */ .sd-nav__extra { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sd-border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .sd-nav__extra .sd-btn { flex: 1 1 auto; justify-content: center; } } @media (min-width: 980px) { .sd-nav__extra { display: none; } } /* ========================================================================== 7. Page hero ========================================================================== */ .sd-hero { position: relative; overflow: hidden; padding: 84px 0 64px; background: linear-gradient(180deg, var(--sd-hero-from) 0%, var(--sd-bg) 72%); } .sd-hero::before { content: ""; position: absolute; left: 50%; top: -600px; width: 1300px; height: 1050px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient( closest-side, rgba(62, 213, 152, 0.34), rgba(62, 213, 152, 0.08) 55%, rgba(62, 213, 152, 0) 78% ); } .sd-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--sd-hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sd-hero-grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); } .sd-hero > * { position: relative; z-index: 2; } .sd-hero__title { margin-bottom: 0.35em; } .sd-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13.5px; color: var(--sd-muted); } /* ========================================================================== 8. Cards and post grid ========================================================================== */ .sd-grid { display: grid; gap: 26px; } .sd-grid--3 { grid-template-columns: repeat(3, 1fr); } .sd-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 979px) { .sd-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .sd-grid--3, .sd-grid--2 { grid-template-columns: 1fr; } } .sd-card { display: flex; flex-direction: column; background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; transition: transform 0.3s var(--sd-ease), box-shadow 0.3s ease, border-color 0.3s ease; } .sd-card:hover { transform: translateY(-5px); box-shadow: var(--sd-shadow); border-color: #c9e3d8; } .sd-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sd-mint); overflow: hidden; } .sd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--sd-ease); } .sd-card:hover .sd-card__media img { transform: scale(1.04); } .sd-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .sd-card__title { font-size: 1.16rem; margin-bottom: 0.5rem; line-height: 1.35; } .sd-card__title a { color: var(--sd-heading); } .sd-card__title a:hover { color: var(--sd-green); } .sd-card__excerpt { font-size: 14.8px; margin-bottom: 1rem; } .sd-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--sd-muted); } .sd-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--sd-mint); color: var(--sd-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .sd-tag--lime { background: var(--sd-lime); } /* ========================================================================== 9. Single post / page content ========================================================================== */ .sd-content { font-size: 17px; } .sd-content > * + * { margin-top: 1.2em; } .sd-content h2 { margin-top: 2.2em; } .sd-content h3 { margin-top: 1.8em; } .sd-content figure { margin: 2rem 0; } .sd-content figcaption { margin-top: 0.7rem; font-size: 13.5px; color: var(--sd-muted); text-align: center; } .sd-content img { border-radius: var(--sd-radius-sm); } .sd-content ul li::marker { color: var(--sd-green); } .sd-content .alignwide { width: min(100vw - 48px, 1040px); margin-inline: calc(50% - min(50vw - 24px, 520px)); } .sd-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; } .alignleft { float: left; margin: 0.4rem 1.6rem 1rem 0; } .alignright { float: right; margin: 0.4rem 0 1rem 1.6rem; } .aligncenter { margin-inline: auto; } .wp-caption { max-width: 100%; } .sd-featured { margin: 0 0 40px; border-radius: var(--sd-radius); overflow: hidden; box-shadow: var(--sd-shadow); } .sd-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13.5px; color: var(--sd-muted); } .sd-entry-meta a { color: var(--sd-muted); } .sd-entry-meta a:hover { color: var(--sd-green); } .sd-post-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--sd-border); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .sd-tags { display: flex; flex-wrap: wrap; gap: 8px; } .sd-postnav { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 40px; } @media (max-width: 639px) { .sd-postnav { grid-template-columns: 1fr; } } .sd-postnav a { display: block; padding: 20px 22px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); background: var(--sd-surface); transition: border-color 0.2s ease, transform 0.2s var(--sd-ease); } .sd-postnav a:hover { border-color: #c9e3d8; transform: translateY(-2px); } .sd-postnav small { display: block; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-muted); margin-bottom: 6px; } .sd-postnav strong { color: var(--sd-heading); font-size: 15.5px; font-weight: 600; line-height: 1.4; } .sd-postnav .is-next { text-align: right; } /* ========================================================================== 10. Changelog / releases ========================================================================== */ .sd-release { position: relative; padding: 0 0 40px 30px; border-left: 2px solid var(--sd-border); } .sd-release:last-child { border-left-color: transparent; padding-bottom: 0; } .sd-release::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sd-lime); box-shadow: 0 0 0 4px rgba(62, 213, 152, 0.22); } .sd-release__ver { font-family: var(--sd-mono); font-size: 13px; color: var(--sd-green); font-weight: 600; } .sd-release__title { font-size: 1.3rem; margin: 4px 0 6px; } .sd-release__date { font-size: 12.5px; color: var(--sd-muted); } /* ========================================================================== 11. Sidebar and widgets ========================================================================== */ .sd-layout { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .sd-layout--single { grid-template-columns: minmax(0, 1fr); max-width: var(--sd-width-read); margin-inline: auto; } @media (max-width: 979px) { .sd-layout { grid-template-columns: 1fr; } } .sd-sidebar { position: sticky; top: calc(var(--sd-header-h) + 24px); } .widget { padding: 24px; margin-bottom: 20px; background: var(--sd-surface-2); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); font-size: 14.8px; } .widget:last-child { margin-bottom: 0; } .widget-title { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-heading); margin-bottom: 14px; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--sd-border); } .widget li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .widget a { color: var(--sd-body); } .widget a:hover { color: var(--sd-green); } /* ========================================================================== 12. Forms ========================================================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea { width: 100%; padding: 12px 15px; font-family: var(--sd-font); font-size: 15px; color: var(--sd-heading); background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 11px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sd-green); box-shadow: 0 0 0 3px rgba(18, 133, 95, 0.14); } textarea { min-height: 150px; resize: vertical; } label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--sd-heading); } input[type="submit"], button[type="submit"], .wp-block-search__button { width: auto; padding: 13px 26px; background: var(--sd-btn-bg); color: var(--sd-btn-fg); border: 0; border-radius: 999px; font-family: var(--sd-font); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } input[type="submit"]:hover, button[type="submit"]:hover { background: var(--sd-ink-soft); } .sd-searchform { display: flex; gap: 8px; } .sd-searchform input[type="search"] { flex: 1; } /* ========================================================================== 13. Comments ========================================================================== */ .sd-comments { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--sd-border); } .comment-list { list-style: none; padding: 0; margin: 0 0 40px; } .comment-list ol.children { list-style: none; padding-left: 26px; margin-top: 20px; } .comment-body { padding: 22px 24px; margin-bottom: 18px; background: var(--sd-surface-2); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); } .comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .comment-author img { border-radius: 50%; } .comment-author .fn { font-weight: 600; color: var(--sd-ink); font-style: normal; } .comment-metadata { font-size: 12.5px; color: var(--sd-muted); } .comment-reply-link { font-size: 13px; font-weight: 600; } .comment-form p { margin-bottom: 16px; } .comment-form .comment-form-cookies-consent { display: flex; gap: 9px; align-items: flex-start; } .comment-form .comment-form-cookies-consent input { width: auto; } .comment-form .comment-form-cookies-consent label { font-weight: 400; font-size: 13.5px; } /* ========================================================================== 14. Pagination ========================================================================== */ .sd-pagination { margin-top: 48px; display: flex; justify-content: center; } .sd-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; } .sd-pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--sd-border); border-radius: 11px; color: var(--sd-heading); font-size: 14.5px; font-weight: 500; transition: border-color 0.18s ease, background 0.18s ease; } .sd-pagination .page-numbers:hover { background: var(--sd-mint); } .sd-pagination .page-numbers.current { background: var(--sd-btn-bg); border-color: var(--sd-btn-bg); color: var(--sd-btn-fg); font-weight: 600; } .sd-pagination .dots { border-color: transparent; } /* ========================================================================== 15. Call to action band ========================================================================== */ .sd-cta { position: relative; overflow: hidden; padding: 88px 0; background: var(--sd-cta-bg); color: rgba(255, 255, 255, 0.78); text-align: center; } .sd-cta::before { content: ""; position: absolute; right: -160px; bottom: -260px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient( closest-side, rgba(62, 213, 152, 0.3), rgba(62, 213, 152, 0) ); pointer-events: none; } .sd-cta > * { position: relative; z-index: 2; } .sd-cta h2 { color: #fff; } .sd-cta .sd-eyebrow { color: var(--sd-lime); } .sd-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; } /* ========================================================================== 16. Footer ========================================================================== */ .sd-footer { background: var(--sd-footer-bg); color: rgba(255, 255, 255, 0.68); padding: 68px 0 0; font-size: 14.8px; } .sd-footer a { color: rgba(255, 255, 255, 0.68); } .sd-footer a:hover { color: var(--sd-lime); } .sd-footer__cols { display: grid; gap: 40px; grid-template-columns: 1.6fr repeat(3, 1fr); } @media (max-width: 979px) { .sd-footer__cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 519px) { .sd-footer__cols { grid-template-columns: 1fr; } } .sd-footer .sd-brand__text { color: #fff; } .sd-footer .sd-brand__mark { background: rgba(255, 255, 255, 0.1); } .sd-footer__about { margin-top: 16px; max-width: 34ch; } .sd-footer .widget, .sd-footer__col { background: none; border: 0; padding: 0; margin: 0; } .sd-footer .widget-title, .sd-footer__heading { color: #fff; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; } .sd-footer .widget li { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; } .sd-footer ul { list-style: none; padding: 0; margin: 0; } .sd-footer li { margin-bottom: 10px; } .sd-footer__bottom { margin-top: 56px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: 13.5px; } .sd-footer__social { display: flex; gap: 8px; } .sd-footer__social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; transition: background 0.2s ease, border-color 0.2s ease; } .sd-footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .sd-footer__social svg { width: 15px; height: 15px; fill: currentColor; } /* ========================================================================== 17. 404 and empty states ========================================================================== */ .sd-empty { text-align: center; padding: 80px 0; } .sd-empty__code { font-family: var(--sd-serif); font-style: italic; font-size: clamp(5rem, 3rem + 12vw, 11rem); line-height: 0.9; color: var(--sd-heading); opacity: 0.12; margin-bottom: -0.15em; } /* ========================================================================== 18. Elementor and block editor interop ========================================================================== */ /* Elementor sets its own container width; keep the theme out of its way. */ .elementor-page .sd-main { padding: 0; } .elementor-page .sd-hero { display: none; } .sd-template-canvas .sd-header, .sd-template-canvas .sd-footer, .sd-template-canvas .sd-announce { display: none; } .wp-block-button__link { border-radius: 999px; font-weight: 600; } .wp-block-quote { border-left: 3px solid var(--sd-lime); } .has-sd-ink-color { color: var(--sd-ink); } .has-sd-ink-background-color { background-color: var(--sd-ink); } .has-sd-lime-color { color: var(--sd-lime); } .has-sd-lime-background-color { background-color: var(--sd-lime); } .has-sd-mint-background-color { background-color: var(--sd-mint); } .has-sd-paper-background-color { background-color: var(--sd-paper); } /* ========================================================================== 19. Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== 20. Print ========================================================================== */ @media print { .sd-header, .sd-footer, .sd-announce, .sd-cta, .sd-sidebar, .sd-postnav, .sd-comments { display: none !important; } body { font-size: 12pt; color: #000; } .sd-layout { display: block; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } } /* ========================================================================== 21. Theme toggle control ========================================================================== */ .sd-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--sd-border); border-radius: 12px; color: var(--sd-heading); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .sd-theme-toggle:hover { background: var(--sd-mint); border-color: var(--sd-green); } .sd-theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Show the sun in dark mode, the moon in light mode. */ .sd-theme-toggle .sd-icon-sun { display: none; } html[data-theme="dark"] .sd-theme-toggle .sd-icon-sun { display: block; } html[data-theme="dark"] .sd-theme-toggle .sd-icon-moon { display: none; } /* Inside the mobile drawer it reads as a labelled row, not a bare icon. */ .sd-nav__extra .sd-theme-toggle { width: auto; height: auto; gap: 9px; padding: 13px 18px; border-radius: 999px; font-family: var(--sd-font); font-size: 14.5px; font-weight: 600; } .sd-theme-toggle__label { display: none; } .sd-nav__extra .sd-theme-toggle__label { display: inline; } .sd-nav__extra .sd-theme-toggle .sd-theme-toggle__label::after { content: attr(data-light); } html[data-theme="dark"] .sd-nav__extra .sd-theme-toggle .sd-theme-toggle__label::after { content: attr(data-dark); } /* Theme swaps are instant, deliberately. Changing data-theme on already invalidates the computed style of every node in the document. The previous version layered a 280ms colour transition on top of that with a `*` selector, so every element on the page started animating in the same frame — under a backdrop-filtered sticky header, which has to recomposite for every one of those frames. On a long page that locks the main thread. Suppressing transitions for the single frame of the swap costs nothing and stops anything half-animating into the new palette. */ html.sd-theme-switching, html.sd-theme-switching *, html.sd-theme-switching *::before, html.sd-theme-switching *::after { transition: none !important; } /* ========================================================================== 22. Dark mode -------------------------------------------------------------------------- Only the role tokens are repointed here, plus the handful of rules whose colour means something different in the dark (a green that was a page background is now a text colour). Everything else inherits. ========================================================================== */ html[data-theme="dark"] { --sd-ink: #d9ece4; --sd-ink-soft: #cfe5db; --sd-green: #4cc79a; --sd-lime: #3ed598; --sd-body: #9fb5ae; --sd-muted: #7d938c; --sd-line: rgba(255, 255, 255, 0.1); --sd-line-soft: rgba(255, 255, 255, 0.06); --sd-mint: rgba(62, 213, 152, 0.12); --sd-paper: #0e1c19; --sd-bg: #08110f; --sd-surface: #0e1c19; --sd-surface-2: #0b1714; --sd-heading: #eaf6f0; --sd-text: #9fb5ae; --sd-border: rgba(255, 255, 255, 0.1); --sd-btn-bg: #3ed598; --sd-btn-fg: #06231c; --sd-btn-bg-h: #63e0ae; --sd-header-bg: rgba(8, 17, 15, 0.78); --sd-hero-from: #0c1b18; --sd-hero-grid: rgba(255, 255, 255, 0.035); --sd-footer-bg: #060e0c; --sd-cta-bg: #0c1b18; --sd-shadow: 0 28px 54px -34px rgba(0, 0, 0, 0.8); --sd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .sd-announce { background: #060e0c; border-bottom: 1px solid var(--sd-border); } html[data-theme="dark"] .sd-brand__mark { background: rgba(62, 213, 152, 0.14); color: var(--sd-lime); } html[data-theme="dark"] .sd-hero::before { background: radial-gradient( closest-side, rgba(62, 213, 152, 0.17), rgba(62, 213, 152, 0.05) 55%, rgba(62, 213, 152, 0) 78% ); } html[data-theme="dark"] .sd-card:hover { border-color: rgba(62, 213, 152, 0.32); } html[data-theme="dark"] .sd-card__media { background: #12231f; } html[data-theme="dark"] .sd-btn--on-dark { border-color: rgba(255, 255, 255, 0.28); } html[data-theme="dark"] pre { background: #04100d; border: 1px solid var(--sd-border); } html[data-theme="dark"] code { background: rgba(62, 213, 152, 0.12); } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(62, 213, 152, 0.2); } html[data-theme="dark"] ::selection { background: var(--sd-lime); color: #06231c; } html[data-theme="dark"] .sd-empty__code { opacity: 0.16; } html[data-theme="dark"] .sd-featured { box-shadow: 0 28px 54px -34px rgba(0, 0, 0, 0.85); } /* Media sits a touch bright against a dark page, but a filter on every image re-rasterises each one and gives it its own compositing layer — paid on the same frame as the theme swap. A cheaper border does the same job visually. If you do want the filter back, apply it to a single wrapper, not to img. */ html[data-theme="dark"] .sd-card__media, html[data-theme="dark"] .sd-featured { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } /* The footer and CTA are dark in both modes, so they only need the surround softening — their own text colours already assume a dark background. */ html[data-theme="dark"] .sd-footer { border-top: 1px solid var(--sd-border); } html[data-theme="dark"] .sd-cta::before { background: radial-gradient( closest-side, rgba(62, 213, 152, 0.16), rgba(62, 213, 152, 0) ); } /* Elementor pages carry their own light palette. Anything the page author has not themed keeps working; these two stop the theme's chrome clashing. */ html[data-theme="dark"] .elementor-page .sd-cta, html[data-theme="dark"] .elementor-page .sd-hero { background: var(--sd-bg); } /* One toggle at a time: when the drawer repeats the header actions, the header's own icon button steps aside on small screens. */ @media (max-width: 979px) { .sd-menu-actions .sd-header__actions .sd-theme-toggle { display: none; } } /* ========================================================================== 23. Editor-applied dark-mode overrides -------------------------------------------------------------------------- Four classes you can type into any block or Elementor element's CSS Classes field. They do nothing in light mode — whatever colour you picked in the editor stands. They only take effect once is set. on-dark-mode-light-text text goes light on-dark-mode-dark-text text goes dark on-dark-mode-light-background background goes light on-dark-mode-dark-background background goes dark Combine them. A section you gave a light background in the editor, which should stay light in dark mode, needs its text forced dark too: class="on-dark-mode-light-background on-dark-mode-dark-text" The text classes reach the element and its text descendants, so putting one on a wrapper fixes the heading and the paragraph inside it in one go. !important is deliberate, not laziness: the block editor writes custom colours as inline style attributes, and nothing but !important outranks an inline style. It's safe here because every rule is scoped to dark mode, so light mode is never touched. ========================================================================== */ html[data-theme="dark"] { --sd-on-dark-light-text: #eaf6f0; --sd-on-dark-dark-text: #0a1613; --sd-on-dark-light-bg: #f2f7f5; --sd-on-dark-dark-bg: #0c1815; } /* --- text, on the element and everything textual inside it --------------- */ /* :where() contributes no specificity, so this stays at the weight of `html[data-theme="dark"] .class` and is easy to override if you need to. */ html[data-theme="dark"] .on-dark-mode-light-text :where( h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, strong, b, em, i, small, blockquote, figcaption, label, td, th, summary, cite, address, .elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-image-box-title, .elementor-image-box-description ) { color: var(--sd-on-dark-light-text) !important; } html[data-theme="dark"] .on-dark-mode-dark-text :where( h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, strong, b, em, i, small, blockquote, figcaption, label, td, th, summary, cite, address, .elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-image-box-title, .elementor-image-box-description ) { color: var(--sd-on-dark-dark-text) !important; } /* Links inside a forced block take the forced colour and keep their underline, so they stay legible and still read as links. Delete these two rules if you'd rather links kept the theme accent. */ html[data-theme="dark"] .on-dark-mode-light-text :where(a), html[data-theme="dark"] .on-dark-mode-dark-text :where(a) { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; } /* List markers and the icon-list ticks follow the text. */ html[data-theme="dark"] .on-dark-mode-light-text :where(li)::marker, html[data-theme="dark"] .on-dark-mode-light-text :where(.elementor-icon-list-icon) i, html[data-theme="dark"] .on-dark-mode-light-text :where(.elementor-icon-list-icon) svg { color: var(--sd-on-dark-light-text) !important; fill: var(--sd-on-dark-light-text) !important; } html[data-theme="dark"] .on-dark-mode-dark-text :where(li)::marker, html[data-theme="dark"] .on-dark-mode-dark-text :where(.elementor-icon-list-icon) i, html[data-theme="dark"] .on-dark-mode-dark-text :where(.elementor-icon-list-icon) svg { color: var(--sd-on-dark-dark-text) !important; fill: var(--sd-on-dark-dark-text) !important; } /* --- background, on the element only ------------------------------------- */ /* Elementor paints section and column backgrounds on a child overlay, so the nested selectors below are needed as well as the element itself. */ html[data-theme="dark"] .on-dark-mode-light-background, html[data-theme="dark"] .on-dark-mode-light-background > .elementor-widget-wrap, html[data-theme="dark"] .on-dark-mode-light-background > .elementor-container, html[data-theme="dark"] .on-dark-mode-light-background > .elementor-background-overlay { background-color: var(--sd-on-dark-light-bg) !important; background-image: none !important; } html[data-theme="dark"] .on-dark-mode-dark-background, html[data-theme="dark"] .on-dark-mode-dark-background > .elementor-widget-wrap, html[data-theme="dark"] .on-dark-mode-dark-background > .elementor-container, html[data-theme="dark"] .on-dark-mode-dark-background > .elementor-background-overlay { background-color: var(--sd-on-dark-dark-bg) !important; background-image: none !important; } /* --- the element itself, declared last ----------------------------------- */ /* Same specificity as the descendant rules above but later in the file, so a nested element carrying its own class beats the wrapper's rule. That covers one level of nesting, which is as far as source order can take it: a grandchild still follows the outermost wrapper. Put the class directly on the element if you need to break out deeper than that. */ html[data-theme="dark"] .on-dark-mode-light-text { color: var(--sd-on-dark-light-text) !important; } html[data-theme="dark"] .on-dark-mode-dark-text { color: var(--sd-on-dark-dark-text) !important; }