/* ============================================================ Octoflow Brand — Components Layer v1.3 (native-widget mode) ============================================================ All brand classes target Elementor's NATIVE widget HTML output (.elementor-widget-*, .elementor-icon-list-items, .elementor-alert, .elementor-accordion, .elementor-button, .elementor-column). Templates ship with widgets only — no raw blocks. Naming: brand__[--] ============================================================ */ /* ── Section backgrounds + spacing ─────────────────────────────── */ .brand__section--paper { background-color: var(--paper); color: var(--fg-1); padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .brand__section--ink { background-color: var(--ink); color: var(--fg-on-ink); padding-top: var(--section-pad); padding-bottom: var(--section-pad); position: relative; overflow: hidden; } .brand__section--warm { background-color: var(--warm-paper); color: var(--fg-1); padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .brand__section--navy { background-color: var(--navy-ink); color: var(--navy-paper); padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .brand__section--hairline-top { border-top: 1px solid var(--border); } .brand__section--hairline-bottom { border-bottom: 1px solid var(--border); } .brand__section--ink h1, .brand__section--ink h2, .brand__section--ink h3, .brand__section--ink h4, .brand__section--ink .elementor-heading-title, .brand__hero h1, .brand__hero h2, .brand__hero h3, .brand__hero .elementor-heading-title { color: var(--paper); } .brand__section--ink p, .brand__section--ink .elementor-widget-text-editor, .brand__hero p, .brand__hero .elementor-widget-text-editor { color: color-mix(in oklch, var(--paper) 80%, var(--ink)); } /* ── Container width clamp ─────────────────────────────────────── */ .brand__container > .elementor-container, .brand__container.elementor-section .elementor-container, .elementor-section.brand__container > .elementor-container { max-width: var(--max-w); } .brand__container--narrow > .elementor-container, .brand__container--narrow.elementor-section .elementor-container { max-width: 980px; } /* ── Eyebrow (mono caps label) ────────────────────────────────── */ .brand__eyebrow .elementor-heading-title, .brand__eyebrow.elementor-widget-heading .elementor-heading-title, .brand__eyebrow { font-family: var(--font-accent); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-deep); font-weight: 500; line-height: 1.6; } .brand__eyebrow--lg .elementor-heading-title, .brand__eyebrow--lg { font-size: 14px; letter-spacing: 0.16em; } .brand__eyebrow--xl .elementor-heading-title, .brand__eyebrow--xl { font-size: 18px; letter-spacing: 0.14em; line-height: 1.4; } .brand__eyebrow--dash .elementor-heading-title, .brand__eyebrow--dash { display: inline-flex !important; align-items: center; gap: 12px; } .brand__eyebrow--dash .elementor-heading-title::before, .brand__eyebrow--dash::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .brand__section--ink .brand__eyebrow .elementor-heading-title, .brand__section--ink .brand__eyebrow, .brand__hero .brand__eyebrow .elementor-heading-title, .brand__hero .brand__eyebrow { color: var(--teal-glow); } /* ── Display + heading scale ──────────────────────────────────── */ .brand__display-1 .elementor-heading-title, .brand__display-1 { font-family: var(--font-display); font-size: clamp(64px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.04em; font-weight: var(--display-weight); } .brand__display-2 .elementor-heading-title, .brand__display-2 { font-family: var(--font-display); font-size: clamp(48px, 5.8vw, 72px); line-height: 1.0; letter-spacing: -0.03em; font-weight: var(--display-weight); } .brand__h1 .elementor-heading-title, .brand__h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--display-weight); } .brand__h2 .elementor-heading-title, .brand__h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; font-weight: var(--display-weight); } /* ── Lede paragraph (applied via Elementor text-editor _css_classes) */ .brand__lede, .brand__lede .elementor-widget-container, .brand__lede p { font-family: var(--font-body); font-size: var(--fs-lede); line-height: 1.45; letter-spacing: -0.005em; color: color-mix(in oklch, var(--ink) 78%, var(--paper)); font-weight: 400; } .brand__section--ink .brand__lede, .brand__section--ink .brand__lede p, .brand__hero .brand__lede, .brand__hero .brand__lede p { color: color-mix(in oklch, var(--paper) 82%, var(--ink)); } /* ── Body text ─────────────────────────────────────────────────── */ .brand__body, .brand__body p { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; } /* ── Stat number ──────────────────────────────────────────────── */ .brand__stat-number .elementor-heading-title, .brand__stat-number { font-family: var(--font-display); font-size: var(--fs-display-1); line-height: 0.95; letter-spacing: -0.04em; font-weight: 700; color: var(--ink); } .brand__stat-label .elementor-heading-title, .brand__stat-label { font-family: var(--font-accent); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--neutral-3); margin-top: var(--space-2); } .brand__section--ink .brand__stat-number .elementor-heading-title, .brand__section--ink .brand__stat-number, .brand__hero .brand__stat-number .elementor-heading-title, .brand__hero .brand__stat-number { color: var(--teal-glow); } /* ── Section head row num (mono caps section number) ─────────── */ .brand__head-row-num .elementor-heading-title, .brand__head-row-num { font-family: var(--font-accent); font-size: 13px; color: var(--neutral-3); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; } /* ── Step number BIG (72px tabular figures) ──────────────────── */ .brand__step-num-big .elementor-heading-title, .brand__step-num-big { font-family: var(--font-display); font-weight: 600; font-size: 72px; letter-spacing: -0.04em; color: var(--ink); line-height: 0.95; font-feature-settings: "tnum"; } .brand__step-num-label .elementor-heading-title, .brand__step-num-label { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.18em; color: var(--teal-deep); text-transform: uppercase; line-height: 1.4; } .brand__step-num-est .elementor-heading-title, .brand__step-num-est { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.12em; color: var(--neutral-3); text-transform: uppercase; line-height: 1.4; } /* ── Button styles ────────────────────────────────────────────── */ .elementor-widget-button.brand__btn-primary .elementor-button { background-color: var(--ink) !important; color: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: var(--radius) !important; padding: 14px 24px !important; font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.005em !important; transition: opacity var(--dur-fast) var(--ease-shift); } .elementor-widget-button.brand__btn-primary .elementor-button:hover { opacity: 0.85; } .elementor-widget-button.brand__btn-ghost .elementor-button { background-color: transparent !important; color: var(--ink) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius) !important; padding: 14px 24px !important; font-family: var(--font-display) !important; font-weight: 500 !important; } .elementor-widget-button.brand__btn-ghost .elementor-button:hover { background-color: var(--neutral-5); border-color: var(--ink); } .brand__section--ink .elementor-widget-button.brand__btn-primary .elementor-button, .brand__hero .elementor-widget-button.brand__btn-primary .elementor-button { background-color: var(--teal) !important; color: var(--ink) !important; border-color: var(--teal) !important; } .brand__section--ink .elementor-widget-button.brand__btn-ghost .elementor-button, .brand__hero .elementor-widget-button.brand__btn-ghost .elementor-button { color: var(--paper) !important; border-color: color-mix(in oklch, var(--paper) 30%, transparent) !important; } /* ── Icon-list as hero meta (horizontal mono caps) ────────────── */ .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-items { display: flex; gap: 28px; flex-wrap: wrap; margin: 0; padding: 0; } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; border: none !important; } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-4); line-height: 1.4; } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-icon { color: var(--teal-glow); } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-icon svg, .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-icon i { width: 8px !important; height: 8px !important; } /* ── Icon-list as magnet checklist ────────────────────────────── */ .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-items { display: grid; gap: 8px; margin: 18px 0 0 0; padding: 0; } .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; border: none !important; } .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-text { font-size: 13px; color: var(--neutral-4); line-height: 1.45; } .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-text strong, .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-text b { color: var(--paper); font-weight: 500; font-family: var(--font-display); } .elementor-widget-icon-list.brand__magnet-list .elementor-icon-list-icon { color: var(--teal-glow); } /* ── Icon-list as generic brand list (teal-deep bullets) ─────── */ .elementor-widget-icon-list.brand__list .elementor-icon-list-icon { color: var(--teal-deep); } .elementor-widget-icon-list.brand__list .elementor-icon-list-text { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; } /* ── Icon-list as footer link column ──────────────────────────── */ .elementor-widget-icon-list.brand__footer-links .elementor-icon-list-items { display: grid; gap: 10px; } .elementor-widget-icon-list.brand__footer-links .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; border: none !important; } .elementor-widget-icon-list.brand__footer-links .elementor-icon-list-text { font-size: 14px; color: var(--paper); } .elementor-widget-icon-list.brand__footer-links .elementor-icon-list-icon { display: none; } .elementor-widget-icon-list.brand__footer-links a:hover .elementor-icon-list-text { color: var(--teal-glow); } /* ── Hero (ink + radial glow) ─────────────────────────────────── */ .brand__hero { background: var(--ink); color: var(--paper); padding-top: clamp(80px, 9vw, 144px); padding-bottom: clamp(96px, 11vw, 168px); position: relative; overflow: hidden; } .brand__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 78% 30%, color-mix(in oklch, var(--teal) 28%, transparent), transparent 70%), radial-gradient(40% 60% at 12% 95%, color-mix(in oklch, var(--teal) 12%, transparent), transparent 70%); pointer-events: none; z-index: 0; } .brand__hero > .elementor-container { position: relative; z-index: 2; } /* ── Bottom CTA (full-bleed ink centred) ─────────────────────── */ .brand__bottom-cta { background: var(--ink); color: var(--paper); padding-top: clamp(72px, 9vw, 144px); padding-bottom: clamp(72px, 9vw, 144px); position: relative; overflow: hidden; text-align: center; } .brand__bottom-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 50% 100%, color-mix(in oklch, var(--teal) 26%, transparent), transparent 70%); pointer-events: none; z-index: 0; } .brand__bottom-cta > .elementor-container { position: relative; z-index: 2; } .brand__bottom-cta .elementor-widget-heading, .brand__bottom-cta .elementor-widget-text-editor { text-align: center; } .brand__bottom-cta .brand__display-2, .brand__bottom-cta .brand__h1 .elementor-heading-title { max-width: 18ch; margin-left: auto; margin-right: auto; } .brand__bottom-cta .brand__lede, .brand__bottom-cta .brand__lede p { max-width: 56ch; margin-left: auto; margin-right: auto; } /* ── Magnet card (applied on COLUMN containing the form widgets) */ .elementor-column.brand__magnet-card, .elementor-section.brand__magnet-card { background: color-mix(in oklch, var(--paper) 4%, var(--ink)); border: 1px solid color-mix(in oklch, var(--teal-glow) 24%, transparent); border-radius: var(--radius-md); padding: 28px 28px 24px !important; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in oklch, var(--teal) 14%, transparent) inset; color: var(--paper); } .elementor-column.brand__magnet-card::before, .elementor-section.brand__magnet-card::before { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: 0.45; background: linear-gradient(to right, var(--teal-glow) 0 16px, transparent 16px) top left/100% 1px no-repeat, linear-gradient(to bottom, var(--teal-glow) 0 16px, transparent 16px) top left/1px 100% no-repeat, linear-gradient(to left, var(--teal-glow) 0 16px, transparent 16px) top right/100% 1px no-repeat, linear-gradient(to bottom, var(--teal-glow) 0 16px, transparent 16px) top right/1px 100% no-repeat, linear-gradient(to right, var(--teal-glow) 0 16px, transparent 16px) bottom left/100% 1px no-repeat, linear-gradient(to top, var(--teal-glow) 0 16px, transparent 16px) bottom left/1px 100% no-repeat, linear-gradient(to left, var(--teal-glow) 0 16px, transparent 16px) bottom right/100% 1px no-repeat, linear-gradient(to top, var(--teal-glow) 0 16px, transparent 16px) bottom right/1px 100% no-repeat; z-index: 0; } .brand__magnet-card > .elementor-widget-wrap, .brand__magnet-card > .elementor-element-populated { position: relative; z-index: 2; } /* Magnet head (mono caps row) */ .brand__magnet-head .elementor-heading-title, .brand__magnet-head { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-4); font-weight: 500; } /* Magnet title */ .brand__magnet-card .brand__magnet-title .elementor-heading-title, .brand__magnet-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; color: var(--paper); } /* Magnet sub */ .brand__magnet-card .brand__magnet-sub, .brand__magnet-card .brand__magnet-sub p, .brand__magnet-sub, .brand__magnet-sub p { font-size: 13px; color: var(--neutral-4); line-height: 1.5; } /* Brevo form auto-restyle inside magnet card */ .brand__magnet-card .sib-form, .brand__magnet-card form { background: transparent !important; padding: 0 !important; border: none !important; margin-top: 20px !important; } .brand__magnet-card input[type="email"], .brand__magnet-card input[type="text"] { background: rgba(0,0,0,0.32) !important; border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent) !important; color: var(--paper) !important; font-family: var(--font-mono) !important; font-size: 14px !important; padding: 14px !important; border-radius: var(--radius) !important; outline: none !important; width: 100% !important; } .brand__magnet-card input:focus-visible { border-color: var(--teal-glow) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--teal) 40%, transparent) !important; } .brand__magnet-card input::placeholder { color: var(--neutral-3) !important; } .brand__magnet-card button[type="submit"] { background: var(--teal) !important; color: var(--ink) !important; font-family: var(--font-display) !important; font-weight: 600 !important; border: 0 !important; border-radius: var(--radius) !important; padding: 14px 22px !important; cursor: pointer; width: 100%; margin-top: 10px; } .brand__magnet-card button[type="submit"]:hover { background: var(--teal-glow) !important; } /* ── Flow node (applied on COLUMN) ───────────────────────────── */ .elementor-column.brand__flow-node { padding: 24px 20px !important; border-right: 1px solid var(--border); position: relative; min-height: 200px; transition: background 0.15s; } .elementor-column.brand__flow-node:hover { background: color-mix(in oklch, var(--teal) 4%, var(--paper)); } .elementor-column.brand__flow-node::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-top: 1px solid var(--teal); border-right: 1px solid var(--teal); transform: translateY(-50%) rotate(45deg); background: var(--paper); z-index: 2; } .elementor-column.brand__flow-node--last { border-right: 0; } .elementor-column.brand__flow-node--last::after { display: none; } @media (max-width: 980px) { .elementor-column.brand__flow-node::after { display: none; } .elementor-column.brand__flow-node { border-right: 0; border-bottom: 1px solid var(--border); } } .brand__flow-node-num .elementor-heading-title, .brand__flow-node-num { font-family: var(--font-accent); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); } .brand__flow-node-title .elementor-heading-title, .brand__flow-node-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); } .brand__flow-node-desc, .brand__flow-node-desc p { font-size: 12px; color: var(--neutral-3); line-height: 1.5; } .brand__flow-node-badge .elementor-heading-title, .brand__flow-node-badge { font-family: var(--font-accent); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-3); } .elementor-widget-icon.brand__flow-node-icon .elementor-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink); } /* Flow row container — applies on the inner section holding 6 flow-node columns */ .elementor-section.brand__flow { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; } /* ── Tutorial step row (applies on inner section + columns) ──── */ .elementor-section.brand__step { border-top: 1px solid var(--border-soft); padding-top: 56px !important; padding-bottom: 56px !important; } .elementor-section.brand__step--first { border-top: 0; padding-top: 0 !important; } .elementor-column.brand__step-num-col { padding-right: 24px; } .elementor-column.brand__step-side-col .elementor-widget-text-editor + .elementor-widget-alert { margin-top: 16px; } .brand__step-body-what .elementor-heading-title, .brand__step-body-what { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); } .brand__step-body-title .elementor-heading-title, .brand__step-body-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); } .brand__step-body-p, .brand__step-body-p p { font-size: 15px; color: var(--neutral-2); line-height: 1.65; } /* ── Code block (applied on text-editor widget content) ───────── */ .elementor-widget-text-editor.brand__code-block .elementor-widget-container, .brand__code-block .elementor-widget-container { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 18px; font-family: var(--font-mono) !important; font-size: 12px; line-height: 1.65; overflow-x: auto; white-space: pre-wrap; } .brand__code-block p, .brand__code-block pre { font-family: var(--font-mono) !important; color: var(--paper); margin: 0; white-space: pre-wrap; } /* ── Note callout (Elementor alert widget) ───────────────────── */ .elementor-widget-alert.brand__note .elementor-alert { background: var(--accent-soft) !important; border: 1px solid color-mix(in oklch, var(--teal) 24%, transparent) !important; border-radius: var(--radius) !important; color: var(--fg-2) !important; padding: 14px 16px !important; } .elementor-widget-alert.brand__note .elementor-alert-title { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--teal-deep) !important; margin-bottom: 4px !important; font-weight: 500 !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-family: var(--font-body) !important; font-size: 13px !important; line-height: 1.55 !important; color: var(--fg-2) !important; } .elementor-widget-alert.brand__note .elementor-alert-dismiss { display: none !important; } /* ── Kit card (applied on COLUMN) ─────────────────────────────── */ .elementor-column.brand__kit-card { padding: 32px 28px !important; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); position: relative; } .brand__kit-ribbon .elementor-heading-title, .brand__kit-ribbon { font-family: var(--font-accent); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); } .brand__kit-filename .elementor-heading-title, .brand__kit-filename { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .elementor-widget-icon-list.brand__kit-meta .elementor-icon-list-items { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--border); } .elementor-widget-icon-list.brand__kit-meta .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; border: none !important; } .elementor-widget-icon-list.brand__kit-meta .elementor-icon-list-icon { display: none; } .elementor-widget-icon-list.brand__kit-meta .elementor-icon-list-text { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-3); } /* ── Accordion (Elementor FAQ) ───────────────────────────────── */ .elementor-widget-accordion.brand__faq .elementor-accordion-item { border: none !important; border-bottom: 1px solid var(--border) !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title { font-family: var(--font-display) !important; font-weight: 500 !important; font-size: 19px !important; padding: 20px 0 !important; background: transparent !important; color: var(--ink) !important; letter-spacing: -0.01em !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title:hover { color: var(--teal-deep) !important; } .elementor-widget-accordion.brand__faq .elementor-accordion-icon { color: var(--teal-deep) !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { font-family: var(--font-body) !important; font-size: var(--fs-body) !important; line-height: 1.65 !important; color: var(--neutral-2) !important; padding: 4px 60px 20px 0 !important; border-top: none !important; } /* ── Anchor link ──────────────────────────────────────────────── */ a.brand__link, .brand__link a { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-shift); } a.brand__link:hover, .brand__link a:hover { color: var(--ink); } .brand__section--ink a.brand__link, .brand__section--ink .brand__link a { color: var(--teal-glow); } /* ── Footer ───────────────────────────────────────────────────── */ .brand__footer { background: var(--ink); color: color-mix(in oklch, var(--paper) 70%, var(--ink)); padding-top: var(--space-7); padding-bottom: var(--space-7); font-size: var(--fs-small); } .brand__footer .elementor-heading-title, .brand__footer h1, .brand__footer h2, .brand__footer h3, .brand__footer h4, .brand__footer h5, .brand__footer h6 { color: var(--paper); } .brand__footer p { color: color-mix(in oklch, var(--paper) 70%, var(--ink)); font-size: 13px; line-height: 1.55; } .brand__footer .brand__footer-title .elementor-heading-title, .brand__footer .brand__footer-title { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neutral-4); margin-bottom: 16px; } /* ── CJK helpers ──────────────────────────────────────────────── */ .brand__cjk, .brand__cjk * { font-family: var(--font-cjk); } .brand__cjk-serif, .brand__cjk-serif * { font-family: var(--font-cjk-serif); font-weight: 500; } /* ── Section head row layout ─────────────────────────────────── */ .elementor-section.brand__head-row { margin-bottom: 56px !important; } /* ── Reduced-motion respect ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .elementor-widget-button.brand__btn-primary .elementor-button, .elementor-widget-button.brand__btn-ghost .elementor-button, .elementor-column.brand__flow-node { transition: none !important; } } /* ============================================================ v1.4 (2026-06-05) - Long-form article + tutorial additions Native-widget targets only (text-editor / icon-list / image / accordion). No raw HTML-widget blocks. ============================================================ */ .brand__prose .elementor-widget-container, .brand__prose p { font-size: var(--fs-body); line-height: 1.85; color: var(--neutral-2); } .brand__prose strong, .brand__prose b { color: var(--ink); font-weight: 600; } .brand__prose a { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .brand__prose a:hover { color: var(--ink); } .brand__takeaways, .elementor-column.brand__takeaways > .elementor-element-populated { background: var(--accent-soft); border: 1px solid color-mix(in oklch, var(--teal) 24%, transparent); border-radius: var(--radius-md); padding: 26px 30px !important; } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-icon { color: var(--teal-deep); } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text { font-size: 15px; line-height: 1.6; color: var(--neutral-2); } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text strong { color: var(--ink); } .brand__table table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; } .brand__table th, .brand__table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; } .brand__table thead th { font-family: var(--font-accent); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-3); border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .brand__table tbody tr:last-child td { border-bottom: 0; } .brand__table td strong { color: var(--ink); } .brand__table--boxed table { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .brand__table--boxed tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--ink) 2.5%, transparent); } .brand__figcaption, .brand__figcaption p { font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.04em; color: var(--neutral-3); text-align: center; margin-top: 10px; } .brand__cover .elementor-widget-container img { border-radius: var(--radius-md); border: 1px solid color-mix(in oklch, var(--paper) 12%, transparent); box-shadow: var(--shadow); } .brand__flow-node-tag { font-family: var(--font-mono); font-size: 11px; color: var(--teal-deep); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-sm); display: inline-block; margin-top: 8px; } /* ============================================================ v1.5 (2026-06-05) - size + density tuning (founder feedback) Bigger eyebrow / prose / notes / tables / FAQ; tighter flow. ============================================================ */ .brand__eyebrow--lg .elementor-heading-title, .brand__eyebrow--lg { font-size: 15px; letter-spacing: 0.14em; } .brand__eyebrow--xl .elementor-heading-title, .brand__eyebrow--xl { font-size: 24px; letter-spacing: 0.1em; line-height: 1.35; } .brand__prose .elementor-widget-container, .brand__prose p { font-size: var(--fs-body); line-height: 1.85; } .brand__list .elementor-icon-list-text { font-size: var(--fs-body); line-height: 1.7; } .elementor-widget-alert.brand__note .elementor-alert { padding: 18px 20px !important; } .elementor-widget-alert.brand__note .elementor-alert-title { font-size: 12px !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-size: 16px !important; line-height: 1.62 !important; } .brand__table table { font-size: 15.5px; } .brand__table th, .brand__table td { padding: 13px 16px; } .brand__table thead th { font-size: 12px; } .brand__table thead th { background: var(--ink); color: var(--paper); border-bottom: none; } .brand__table--boxed tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, var(--paper)); } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text { font-size: 17px; line-height: 1.66; } .elementor-widget-accordion.brand__faq .elementor-tab-title { font-size: 20px !important; padding: 18px 0 !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { font-size: var(--fs-body) !important; line-height: 1.7 !important; } .elementor-column.brand__flow-node { min-height: 150px; padding: 18px 18px !important; } .brand__flow-node-title .elementor-heading-title, .brand__flow-node-title { font-size: 18px; } .brand__flow-node-desc, .brand__flow-node-desc p { font-size: 14px; } .elementor-section.brand__head-row { margin-bottom: 40px !important; } /* ============================================================ v1.6 (2026-06-05) - eyebrow specificity fix (base rule was 0,3,0 and beat --lg/--xl at 0,2,0, so they never applied) ============================================================ */ .elementor-widget-heading.brand__eyebrow--lg .elementor-heading-title { font-size: 16px !important; letter-spacing: 0.14em !important; } .elementor-widget-heading.brand__eyebrow--xl .elementor-heading-title { font-size: 30px !important; letter-spacing: 0.06em !important; line-height: 1.3 !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-size: var(--fs-body) !important; line-height: 1.62 !important; } .elementor-widget-alert.brand__note .elementor-alert-title { font-size: 13px !important; } /* ============================================================ v1.7 (2026-06-05) - density collapse, links, mobile, TOC, diagrams ============================================================ */ html { scroll-behavior: smooth; } .elementor-top-section[id] { scroll-margin-top: 92px; } /* collapse top padding when a paper section follows another paper section that is NOT a hairline divider -> groups sub-parts of one topic */ .elementor-top-section.brand__section--paper + .elementor-top-section.brand__section--paper:not(.brand__section--hairline-top):not(.art2) { padding-top: 0 !important; } /* stronger links (default was too light) */ .brand__prose a, .brand__lede a, .brand__body a, .brand__list .elementor-icon-list-text a { color: #0A746A; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(10,116,106,.5); } .brand__prose a:hover, .brand__prose a:active, .brand__lede a:hover, .brand__lede a:active, .brand__body a:hover, .brand__list .elementor-icon-list-text a:hover { color: #0A0D0E; text-decoration-color: #14B8AC; text-decoration-thickness: 2px; } /* diagram image frame (full-width, lighter than cover) */ .brand__diagram .elementor-widget-container img { border: 1px solid rgba(10,13,14,.10); border-radius: 12px; box-shadow: 0 2px 14px rgba(10,13,14,.05); display:block; width:100%; } /* table can scroll on small screens */ .brand__table .elementor-widget-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* TOC chips */ .elementor-widget-icon-list.brand__toc .elementor-icon-list-items { display:flex; flex-wrap:wrap; gap:8px; margin:0; } .elementor-widget-icon-list.brand__toc .elementor-icon-list-item { margin:0 !important; padding:0 !important; border:0 !important; } .elementor-widget-icon-list.brand__toc .elementor-icon-list-icon { display:none !important; } .elementor-widget-icon-list.brand__toc .elementor-icon-list-text a { display:inline-block; padding:7px 14px; border:1px solid var(--border); border-radius:999px; color:var(--ink); text-decoration:none; font-weight:500; font-size:14px; background:#fff; transition:color .15s, background-color .15s, border-color .15s; } .elementor-widget-icon-list.brand__toc .elementor-icon-list-text a:hover { border-color:var(--teal); color:var(--teal-deep); background:var(--accent-soft); } /* mobile */ @media (max-width: 767px){ .brand__table table { min-width: 480px; } .elementor-widget-heading.brand__eyebrow--xl .elementor-heading-title { font-size:21px !important; line-height:1.3 !important; } .brand__display-2 .elementor-heading-title, .brand__display-2 { font-size:30px !important; line-height:1.12 !important; } .brand__h1 .elementor-heading-title, .brand__h1 { font-size:26px !important; } .brand__lede, .brand__lede p { font-size:17px !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { padding-right: 0 !important; } } /* v1.8 (2026-06-06) - tutorial sub-section eyebrow (teal bar, no //) */ .elementor-widget-heading.brand__eyebrow--sub .elementor-heading-title{ font-family: var(--font-accent); font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase; color:var(--teal-deep) !important; font-weight:600; display:inline-flex !important; align-items:center; gap:10px; line-height:1.4 !important; } .elementor-widget-heading.brand__eyebrow--sub .elementor-heading-title::before{ content:""; width:22px; height:2px; background:var(--teal); border-radius:2px; flex:0 0 auto; } /* v1.9 (2026-06-06) - bigger reading size + bottom CTA */ .brand__prose .elementor-widget-container, .brand__prose p { font-size: 22px !important; line-height: 1.85 !important; } .brand__list .elementor-icon-list-text { font-size: 22px !important; line-height: 1.75 !important; } .brand__lede, .brand__lede p { font-size: 24px !important; line-height: 1.6 !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title { font-size: 22px !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { font-size: 22px !important; line-height: 1.75 !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-size: 19px !important; } .brand__table table { font-size: 17px; } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text { font-size: 19px; } .brand__bottom-cta .elementor-heading-title { color: var(--paper) !important; } .brand__bottom-cta .brand__lede, .brand__bottom-cta .brand__lede p { color: color-mix(in oklch, var(--paper) 82%, var(--ink)) !important; } .brand__bottom-cta .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-items { justify-content: center; } .brand__bottom-cta .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { color: var(--neutral-4); } .brand__bottom-cta .elementor-widget-icon-list.brand__hero-meta a { color: var(--teal-glow); } .brand__bottom-cta .elementor-widget-button { text-align: center; } @media (max-width:767px){ .brand__prose p, .brand__list .elementor-icon-list-text { font-size:19px !important; } .brand__lede, .brand__lede p { font-size:20px !important; } } /* v2.0 (2026-06-06) - bigger section labels/captions/notes + fix icon-list inline links */ .elementor-widget-heading.brand__eyebrow--lg .elementor-heading-title { font-size: 19px !important; letter-spacing: 0.1em !important; } .elementor-widget-heading.brand__eyebrow--sub .elementor-heading-title { font-size: 15px !important; } .brand__figcaption, .brand__figcaption p { font-size: 15px !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-size: 21px !important; line-height: 1.65 !important; } .elementor-widget-icon-list.brand__list .elementor-icon-list-text a { display: inline !important; } /* v2.1 (2026-06-06) - larger reading sizes (prose/list/lede/faq/table/button/quote) */ .brand__prose .elementor-widget-container, .brand__prose p { font-size: 24px !important; line-height: 1.85 !important; } .brand__list .elementor-icon-list-text { font-size: 24px !important; line-height: 1.75 !important; } .brand__lede, .brand__lede p { font-size: 26px !important; line-height: 1.55 !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title { font-size: 24px !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { font-size: 23px !important; line-height: 1.75 !important; } .elementor-widget-alert.brand__note .elementor-alert-description { font-size: 23px !important; line-height: 1.65 !important; } .elementor-widget-alert.brand__note .elementor-alert-title { font-size: 14px !important; } .brand__table table { font-size: 19px !important; } .brand__table th, .brand__table td { padding: 15px 18px !important; } .brand__table thead th { font-size: 13px !important; } .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text { font-size: 21px !important; } .elementor-widget-button .elementor-button { font-size: 18px !important; padding: 17px 30px !important; } .elementor-widget-heading.brand__eyebrow--lg .elementor-heading-title { font-size: 20px !important; } @media (max-width:767px){ .brand__prose p, .brand__list .elementor-icon-list-text { font-size:20px !important; } .brand__lede, .brand__lede p { font-size:22px !important; } .elementor-widget-accordion.brand__faq .elementor-tab-content { font-size:20px !important; } } /* v2.2 (2026-06-06) - takeaways label + author meta row were too small */ .brand__takeaways .elementor-widget-heading.brand__magnet-head .elementor-heading-title { font-size: 17px !important; letter-spacing: 0.1em !important; } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { font-size: 15px !important; } .brand__bottom-cta .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { font-size: 15px !important; } /* v2.3 (2026-06-06) - enlarge label/title elements (note titles, table header, takeaways label, author meta) */ .elementor-widget-alert.brand__note .elementor-alert-title { font-size: 18px !important; letter-spacing: 0.05em !important; line-height: 1.4 !important; } .brand__table thead th { font-size: 16px !important; } .brand__takeaways .elementor-widget-heading.brand__magnet-head .elementor-heading-title { font-size: 19px !important; } .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { font-size: 17px !important; } .brand__bottom-cta .elementor-widget-icon-list.brand__hero-meta .elementor-icon-list-text { font-size: 17px !important; } /* dark-bg text legibility fixes (2026-06-07) */ .brand__bottom-cta .brand__lede, .brand__bottom-cta .brand__lede p, .brand__bottom-cta .elementor-widget-text-editor, .brand__bottom-cta .elementor-widget-text-editor p { color: color-mix(in oklch, var(--paper) 82%, var(--ink)); } /* brand__body consistency 24 (2026-06-07, match M1 reading size) */ .brand__body, .brand__body p { font-size: 24px !important; line-height: 1.7 !important; } @media (max-width:767px){ .brand__body, .brand__body p { font-size: 20px !important; } } /* Home grid text enlarge (2026-06-07, match 24 reading) */ .brand__step-body-p, .brand__step-body-p p { font-size: 24px !important; line-height: 1.6 !important; } .brand__flow-node-desc, .brand__flow-node-desc p { font-size: 24px !important; line-height: 1.6 !important; } .brand__flow-node-title .elementor-heading-title, .brand__flow-node-title { font-size: 28px !important; } @media (max-width:767px){ .brand__step-body-p, .brand__step-body-p p, .brand__flow-node-desc, .brand__flow-node-desc p { font-size: 20px !important; } .brand__flow-node-title .elementor-heading-title, .brand__flow-node-title { font-size: 24px !important; } } /* 2026-06-08 Kenny review: 重點整理 head 太淡 + 本文目錄太細 */ .brand__takeaways .elementor-widget-heading.brand__magnet-head .elementor-heading-title { color: var(--ink) !important; } .elementor-widget-heading.brand__toc-head .elementor-heading-title { font-size:19px !important; letter-spacing:0.1em !important; color: var(--ink) !important; } .elementor-widget-icon-list.brand__toc .elementor-icon-list-text a { font-size:18px !important; padding:9px 16px !important; } /* ── Blog index kit-card grid wrap fix (2026-06-09) ── */ .brand__kit-grid .elementor-container{flex-wrap:wrap!important;row-gap:24px;align-items:stretch;} .elementor-column.brand__kit-card{flex-shrink:0!important;} @media (max-width:1024px){.elementor-column.brand__kit-card{width:50%!important;}} @media (max-width:767px){.elementor-column.brand__kit-card{width:100%!important;}} /* ============ HOME SECTIONS redesign 2026-06-09 ============ */ .ocs{width:100%;} .ocs__in{max-width:1240px;margin:0 auto;padding:clamp(64px,9vw,120px) clamp(20px,4vw,64px);} .ocs__ey{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;} .ocs__h2{font-family:'Outfit','Noto Sans TC',system-ui,sans-serif;font-weight:800;font-size:clamp(30px,4.2vw,52px);line-height:1.14;letter-spacing:-.02em;margin:0;} .ocs--paper{background:#F4F2EC;color:#0A0D0E;} .ocs--paper .ocs__ey{color:#0E8F86;} .ocs--ink{background:#0A0D0E;color:#F4F2EC;} .ocs--ink .ocs__ey{color:#5EEAD4;} .ocs--ink .ocs__h2{color:#F4F2EC;} .ocstats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;} .ocstat{padding:22px 0 0;border-top:2px solid #14B8AC;} .ocstat__n{display:block;font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:800;font-size:clamp(38px,4.6vw,58px);line-height:1;color:#0E8F86;letter-spacing:-.03em;} .ocstat__l{display:block;font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:700;font-size:17px;margin:14px 0 10px;color:#0A0D0E;} .ocstat__d{font-family:'Noto Sans TC',sans-serif;font-size:14px;line-height:1.65;color:#5C6770;margin:0;} .occards{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px);row-gap:0;margin-top:50px;} .occard{padding:32px 0 30px;border-top:1px solid rgba(244,242,236,.16);transition:border-color .18s ease;} .occard:hover{border-color:#14B8AC;} .occard h3{font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:700;font-size:21px;margin:0 0 10px;color:#F4F2EC;} .occard p{font-family:'Noto Sans TC',sans-serif;font-size:14.5px;line-height:1.7;color:#A8B0B6;margin:0 0 18px;} .octag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;color:#5EEAD4;background:rgba(20,184,172,.1);border:1px solid rgba(20,184,172,.25);padding:6px 12px;border-radius:999px;} .ocsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;} .ocstep{padding-top:18px;border-top:2px solid #14B8AC;} .ocstep__n{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:#0E8F86;letter-spacing:.1em;} .ocstep__t{font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:800;font-size:30px;margin:8px 0 12px;color:#0A0D0E;} .ocstep__d{font-family:'Noto Sans TC',sans-serif;font-size:14.5px;line-height:1.7;color:#5C6770;margin:0;} .ocprom{display:grid;grid-template-columns:repeat(3,1fr);margin-top:50px;border-top:1px solid rgba(244,242,236,.14);} .ocprom__c{padding:34px 30px 8px;border-left:1px solid rgba(244,242,236,.14);} .ocprom__c:first-child{border-left:none;padding-left:0;} .ocprom__t{font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:700;font-size:20px;margin:0 0 12px;color:#F4F2EC;display:flex;align-items:center;gap:10px;} .ocprom__t::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#14B8AC;} .ocprom__d{font-family:'Noto Sans TC',sans-serif;font-size:14.5px;line-height:1.7;color:#A8B0B6;margin:0;} .occta{position:relative;overflow:hidden;background:linear-gradient(135deg,#0E8F86 0%,#0A0D0E 68%);color:#F4F2EC;} .occta__in{position:relative;max-width:900px;margin:0 auto;padding:clamp(72px,10vw,128px) clamp(20px,4vw,64px);text-align:center;} .occta__h2{font-family:'Outfit','Noto Sans TC',sans-serif;font-weight:800;font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-.03em;margin:0 0 22px;} .occta__p{font-family:'Noto Sans TC',sans-serif;font-size:clamp(15px,1.4vw,18px);line-height:1.8;color:rgba(244,242,236,.82);max-width:600px;margin:0 auto 36px;} .occta__btn{display:inline-flex;align-items:center;font-family:'Noto Sans TC','Outfit',sans-serif;font-weight:700;font-size:17px;padding:17px 34px;border-radius:999px;background:#F4F2EC;color:#0A0D0E;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;} .occta__btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,0,0,.3);} .occta__social{margin:28px 0 0;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.05em;} .occta__social a{color:#5EEAD4;text-decoration:none;margin:0 6px;} .occta__social a:hover{color:#F4F2EC;} @media(max-width:880px){.ocstats,.occards,.ocsteps,.ocprom{grid-template-columns:1fr;}.ocprom__c{border-left:none;border-top:1px solid rgba(244,242,236,.14);padding-left:0;}.ocprom__c:first-child{border-top:none;}} .occta__h2{color:#FFFFFF} /* ════════════════════════════════════════════════════════════ ARTICLE SKIN v3.1 (2026-06-10) — opt-in per page Top-level sections carry .art2 (+ .art2-hero / .art2-band / .art2-cta + brand__section--ink). Pilot = page 103 (template flipped to elementor_header_footer for full-bleed). v3.1: srgb mixes (oklch ink/paper mix drifted pink), tighter spacing, hero/takeaways breathing gap. ════════════════════════════════════════════════════════════ */ /* ── Dark editorial hero (full-bleed via page template) ── */ .elementor-top-section.art2-hero { background-color: var(--ink); position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(44px, 5vw, 72px); counter-reset: art2sec; } .elementor-top-section.art2-hero::before { content: ""; position: absolute; top: -28%; right: -10%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(94,234,212,.15), transparent 62%); pointer-events: none; } .elementor-top-section.art2-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(94,234,212,.4), transparent); } .art2-hero > .elementor-container { position: relative; z-index: 2; } .art2-hero .elementor-widget-heading .elementor-heading-title { color: #FFFFFF; } /* Article hero title: dial display-2 down — long CJK title reads huge at 72px */ .art2-hero .brand__display-2 .elementor-heading-title, .art2-hero .brand__display-2 { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.16 !important; letter-spacing: -0.02em; } .elementor-section.art2-hero .brand__eyebrow .elementor-heading-title { color: var(--teal-glow); } .art2-hero .brand__lede, .art2-hero .brand__lede p { color: color-mix(in srgb, var(--paper) 80%, var(--ink)); } .art2-hero .brand__diagram img { border-radius: 16px; border: 1px solid rgba(244,242,236,.14); box-shadow: 0 30px 80px -28px rgba(0,0,0,.65); } /* ── Section numbering: mono counter above each chapter H ── */ .art2:not(.art2-cta) .brand__h1 .elementor-heading-title::before { counter-increment: art2sec; content: counter(art2sec, decimal-leading-zero) " /"; display: block; font-family: var(--font-accent); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; color: var(--teal-deep); margin-bottom: 12px; } /* ── Chapter spacing (sections already contain spacer widgets — keep section padding modest so the two don't stack up) ── */ .art2.brand__section--hairline-top { padding-top: clamp(32px, 3.6vw, 48px); padding-bottom: clamp(20px, 2.4vw, 32px); } .art2.brand__section--paper:not(.art2-hero):not(.art2-cta):not(.brand__takeaways):not(.art2-band):not(.brand__section--hairline-top) { padding-top: clamp(20px, 2.4vw, 32px); padding-bottom: clamp(20px, 2.4vw, 32px); } /* ── Takeaways card (clear gap below dark hero) ── */ .elementor-top-section.art2.brand__takeaways { background: transparent; border-left: none; border-radius: 0; padding: clamp(72px, 8vw, 128px) 0 8px !important; } .elementor-top-section.art2.brand__takeaways > .elementor-container { background: color-mix(in srgb, var(--teal) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--teal-deep) 26%, transparent); border-radius: var(--radius-md); padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px); box-shadow: 0 16px 40px -28px rgba(10,13,14,.35); } .art2 .elementor-widget-icon-list.brand__takeaways-list .elementor-icon-list-text { font-size: 18px; line-height: 1.65; } /* ── Figure band ── */ .elementor-top-section.art2-band { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(48px, 5vw, 72px); } .art2 .brand__diagram img { border-radius: 14px; } .art2-band .brand__diagram img { border: 1px solid var(--border); box-shadow: 0 24px 60px -30px rgba(10,13,14,.4); } /* ── Table: ink header + srgb zebra ── */ .art2 .brand__table thead th { background: var(--ink); color: var(--paper); border-bottom: none; padding: 14px 16px; } .art2 .brand__table--boxed table { border-color: var(--border-strong); } .art2 .brand__table--boxed tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 3%, var(--paper)); } /* ── Note callout ── */ .art2 .elementor-widget-alert.brand__note .elementor-alert { background: color-mix(in srgb, var(--teal) 7%, var(--paper)) !important; border: 1px solid color-mix(in oklch, var(--teal-deep) 30%, transparent) !important; border-radius: var(--radius-md) !important; padding: 18px 22px !important; } /* ── FAQ: brand hairline rows + mono toggle (matches design-system) ── */ .elementor-widget-accordion.brand__faq .elementor-accordion-item { border: none !important; border-top: 1px solid var(--border-soft) !important; border-radius: 0 !important; background: transparent !important; margin-bottom: 0 !important; overflow: visible; } .elementor-widget-accordion.brand__faq .elementor-accordion-item:last-child { border-bottom: 1px solid var(--border-soft) !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title { position: relative; font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.01em; color: var(--ink) !important; padding: 22px 56px 22px 0 !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title a { color: inherit !important; text-decoration: none !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title:hover, .elementor-widget-accordion.brand__faq .elementor-tab-title:hover a { color: var(--teal-deep) !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title.elementor-active, .elementor-widget-accordion.brand__faq .elementor-tab-title.elementor-active a { color: var(--teal-deep) !important; } /* hide Elementor's default fa icon, draw a mono + that rotates to × when open */ .elementor-widget-accordion.brand__faq .elementor-accordion-icon { display: none !important; } .elementor-widget-accordion.brand__faq .elementor-tab-title::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 26px; font-weight: 400; line-height: 1; color: var(--teal-deep); transition: transform 0.2s ease; } .elementor-widget-accordion.brand__faq .elementor-tab-title.elementor-active::after { transform: translateY(-50%) rotate(45deg); } .elementor-widget-accordion.brand__faq .elementor-tab-content { padding: 4px 56px 22px 0 !important; border-top: none !important; background: transparent !important; } /* ── Compact hero title (opt-in) — long CJK display-2 reads huge at 72px ── */ .brand__hero-compact .elementor-heading-title, .brand__hero-compact { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.16 !important; letter-spacing: -0.02em; } /* ── page 100 (auto-posting) landing — wider columns, less side whitespace on large monitors ── */ .page-id-100 .brand__container > .elementor-container { max-width: 1440px !important; } .page-id-100 .brand__container--narrow > .elementor-container { max-width: 1100px !important; } /* mobile: hero title a notch smaller than the desktop clamp (long CJK title wrapped cramped at 30px) */ @media (max-width: 767px){ .brand__hero-compact .elementor-heading-title, .brand__hero-compact { font-size: 24px !important; line-height: 1.25 !important; } } /* Tables scroll inside their own box — min-width:480 must not widen the whole page (mobile h-overflow fix) */ .brand__table, .brand__table .elementor-widget-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── CTA ink band ── */ .art2-cta.brand__section--ink { position: relative; overflow: hidden; border-top: none; padding-top: clamp(44px, 5.4vw, 72px); padding-bottom: clamp(44px, 5.4vw, 72px); } .art2-cta.brand__section--ink::before { content: ""; position: absolute; bottom: -35%; left: -10%; width: 55vw; height: 55vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(20,184,172,.16), transparent 60%); pointer-events: none; } .art2-cta > .elementor-container { position: relative; z-index: 2; } .art2-cta .elementor-icon-list-text { color: color-mix(in srgb, var(--paper) 82%, var(--ink)) !important; } .art2-cta .elementor-icon-list-icon { color: var(--teal-glow) !important; } .art2-cta .brand__prose, .art2-cta .brand__prose p { color: color-mix(in srgb, var(--paper) 80%, var(--ink)); } .art2-cta .brand__prose a { color: var(--teal-glow); } .art2-cta .brand__prose strong, .art2-cta .brand__prose b { color: #FFFFFF; } /* ════════════════════════════════════════════════════════════ ARTICLE SKIN — MAGAZINE LAYER v3.3 (2026-06-10, sans editorial) Masthead byline · drop cap · pull quote · chapter opener. ════════════════════════════════════════════════════════════ */ /* ── Masthead byline (under standfirst in dark hero) ── */ .art2-hero .art2-byline { padding-top: 18px; margin-top: 10px; border-top: 1px solid rgba(244,242,236,.18); } .art2-hero .art2-byline, .art2-hero .art2-byline p { font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 60%, var(--ink)); margin: 0; } /* ── Drop cap on opening paragraph ── */ .art2-dropcap > p:first-of-type::first-letter, .art2-dropcap .elementor-widget-container > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 700; font-size: 3.4em; line-height: 0.9; margin: 6px 14px 0 0; color: var(--teal-deep); } /* ── Chapter opener: larger mono number ── */ .art2:not(.art2-cta) .brand__h1 .elementor-heading-title::before { font-size: 15px; margin-bottom: 16px; } /* ── Pull quote (breakout, sans display + teal bar) ── */ .art2-pullquote-sec { padding-top: clamp(16px, 2.4vw, 32px) !important; padding-bottom: clamp(16px, 2.4vw, 32px) !important; } .art2-pullquote .elementor-heading-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); border-left: 4px solid var(--teal); padding: 4px 0 4px 28px; max-width: 22em; /* ch unit is Latin-calibrated — too narrow for CJK, wrapped early */ } @media (max-width:767px){ .art2-dropcap > p:first-of-type::first-letter, .art2-dropcap .elementor-widget-container > p:first-of-type::first-letter { font-size: 2.8em; } .art2-pullquote .elementor-heading-title, .art2-pullquote { font-size: 24px; padding-left: 20px; } } /* ===================================================================== OCTOFLOW — Article system (art2 live + art3 redesign) · 2026-06-15 Consolidated; supersedes the prior P2/P3 + art3 v1/v2/v3 + elevation appended blocks. art2 = current live articles; art3 = redesign system. Sidebar is demo-scoped to page-id-183 (redesign-a); generalise when the reusable article template ships. ===================================================================== */ /* ---- Table of Contents (shared: .brand__toc) ---- */ .brand__toc.elementor-widget-table-of-contents .elementor-widget-container{border:1px solid color-mix(in srgb,var(--teal-deep) 22%,transparent);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 14px 36px -28px rgba(10,13,14,.40);} .brand__toc .elementor-toc__header{background:color-mix(in srgb,var(--teal) 9%,var(--paper));border-bottom:1px solid color-mix(in srgb,var(--teal-deep) 20%,transparent);padding:13px 22px;} .brand__toc .elementor-toc__header-title{font-family:var(--font-accent);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600;} .brand__toc .elementor-toc__body{background:var(--paper);padding:10px 22px 18px;} .brand__toc .elementor-toc__list-item-text{color:var(--neutral-2);font-size:15px;line-height:1.7;transition:color .15s ease;} .brand__toc .elementor-toc__list-item-text:hover,.brand__toc .elementor-toc__list-item-text.elementor-item-active{color:var(--teal-deep);} .brand__toc .elementor-toc__list-item.elementor-toc__top-level>.elementor-toc__list-item-body>.elementor-toc__list-item-text,.brand__toc .elementor-toc__top-level>.elementor-toc__list-item-text{font-weight:600;color:var(--ink);} .brand__toc .elementor-toc__toggle-button i,.brand__toc .elementor-toc__toggle-button svg{color:var(--teal-deep);fill:var(--teal-deep);} .brand__toc ol.elementor-toc__list-items{color:var(--teal-deep);} /* ---- Key Takeaways callout ---- */ /* base box — art2 (live) keeps the teal accent bar */ .brand__takeaways>.elementor-container{background:color-mix(in srgb,var(--teal) 12%,var(--paper)) !important;border:1px solid color-mix(in srgb,var(--teal-deep) 30%,transparent) !important;border-left:3px solid var(--teal) !important;} /* art3 — section transparent (tint only inside box); drop side-stripe -> full border + dot header */ .art3.brand__takeaways{background:transparent !important;border:none !important;border-radius:0 !important;padding:clamp(18px,2vw,28px) 0 6px !important;} .art3 .brand__takeaways>.elementor-container{border-left:1px solid color-mix(in srgb,var(--teal-deep) 30%,transparent) !important;} .art3 .brand__takeaways .brand__magnet-head .elementor-heading-title{position:relative;padding-left:22px;} .art3 .brand__takeaways .brand__magnet-head .elementor-heading-title:before{content:'';position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 20%,transparent);} .art3 .brand__takeaways-list .elementor-icon-list-text{font-size:17px !important;line-height:1.62 !important;} /* ---- art3 compact editorial type scale ---- */ .art3.brand__container--narrow>.elementor-container,.art3.brand__container--narrow.elementor-section>.elementor-container{max-width:720px;} .art3 .brand__display-2,.art3 .brand__display-2 .elementor-heading-title{font-size:clamp(30px,3.4vw,40px) !important;line-height:1.18 !important;letter-spacing:-.02em !important;} .art3 .brand__h1,.art3 .brand__h1 .elementor-heading-title,.art3 .brand__h2,.art3 .brand__h2 .elementor-heading-title{font-size:28px !important;line-height:1.32 !important;letter-spacing:-.01em !important;} .art3 .brand__h3,.art3 .brand__h3 .elementor-heading-title{font-size:21px !important;line-height:1.4 !important;} .art3 .brand__lede,.art3 .brand__lede p{font-size:20px !important;line-height:1.62 !important;} .art3 .elementor-widget-text-editor,.art3 .elementor-widget-text-editor p{font-size:19px !important;line-height:1.9 !important;} .art3 .elementor-icon-list-text{font-size:19px;line-height:1.7;} .art3 .brand__list .elementor-icon-list-text{font-size:18px !important;line-height:1.8 !important;} .art3 .brand__list .elementor-icon-list-item{margin-bottom:4px !important;} /* ---- art3 rhythm/spacing (margin-driven; spacers neutralised) ---- */ .art3.brand__section--paper{padding-top:clamp(12px,1.4vw,20px) !important;padding-bottom:clamp(12px,1.4vw,20px) !important;} .art3.art3-hero{padding-top:clamp(40px,5vw,64px) !important;padding-bottom:6px !important;} .art3 .elementor-widget-spacer .elementor-spacer-inner{height:5px !important;} .art3 .elementor-widget-text-editor{margin-bottom:0 !important;} .art3 .elementor-widget-text-editor p{margin:0 0 .7em !important;} .art3 .elementor-widget-text-editor p:last-child{margin-bottom:0 !important;} .art3 .brand__h1,.art3 .brand__h2,.art3 .brand__h3{margin-top:18px !important;margin-bottom:4px !important;} /* ---- dark (ink) sections: all text incl icon-list reads light ---- */ .brand__section--ink .elementor-icon-list-text{color:color-mix(in oklch,var(--paper) 82%,var(--ink)) !important;} .brand__section--ink .elementor-icon-list-icon i,.brand__section--ink .elementor-icon-list-icon svg{color:var(--teal-glow) !important;fill:var(--teal-glow) !important;} .brand__section--ink .brand__prose,.brand__section--ink .brand__prose p{color:color-mix(in oklch,var(--paper) 82%,var(--ink)) !important;} /* ---- Editorial sticky sidebar TOC ---- MOVED 2026-06-16 -> the TOC container's per-element Custom CSS (Elementor Pro, Advanced -> Custom CSS) on page 183, using `selector` so it generalises to any article page without a .page-id-NNN scope. When the reusable article template ships, the Custom CSS travels with the saved template automatically. */ /* oc-faq accordion (dark) */ .oc-faq .e-n-accordion{display:flex;flex-direction:column;gap:12px} .oc-faq .e-n-accordion-item{background:#10151A;border:1px solid #1E262C;border-radius:12px;overflow:hidden} .oc-faq .e-n-accordion-item-title{color:#F4F2EC;font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:16.5px;padding:18px 22px;cursor:pointer} .oc-faq .e-n-accordion-item-title:hover{color:#5EEAD4} .oc-faq .e-n-accordion-item-title-icon,.oc-faq .e-n-accordion-item-title-icon svg{color:#5EEAD4;fill:#5EEAD4} .oc-faq .e-n-accordion-item-content,.oc-faq .e-n-accordion-item-content p{color:#AEB6BC;font-size:15.5px;line-height:1.75} .oc-faq .e-n-accordion-item-content{padding:0 22px 18px} /* oc-faq icon cap */ .oc-faq .e-n-accordion-item-title-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .oc-faq .e-n-accordion-item-title-icon i{font-size:16px;line-height:1} .oc-faq .e-n-accordion-item-title-icon svg{width:16px;height:16px} /* oc-faq title flex */ .oc-faq .e-n-accordion-item-title{display:flex;align-items:center;justify-content:space-between;gap:14px} .oc-faq .e-n-accordion-item-title-text{flex:1 1 auto} /* oc-grid card gap + faq text */ .oc-grid .elementor-column > .elementor-element-populated{margin:10px} .oc-grid .elementor-row{align-items:stretch} .oc-faq .e-n-accordion-item-content,.oc-faq .e-n-accordion-item-content *,.oc-faq .elementor-widget-text-editor,.oc-faq .elementor-widget-text-editor p{color:#B4BBC1 !important} /* oc-faq title force light */ .oc-faq .e-n-accordion-item-title,.oc-faq .e-n-accordion-item-title-header,.oc-faq .e-n-accordion-item-title-text,.oc-faq summary,.oc-faq summary h1,.oc-faq summary h2,.oc-faq summary h3,.oc-faq summary h4{color:#F4F2EC !important} .oc-faq .e-n-accordion-item-title:hover,.oc-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:#5EEAD4 !important} /* oc-tut tutorial + oc-shot */ .oc-tut,.oc-tut p,.oc-tut li,.oc-tut td{color:#C2C8CC;line-height:1.8} .oc-tut strong{color:#F4F2EC} .oc-tut ol,.oc-tut ul{padding-left:1.3em;margin:10px 0} .oc-tut li{margin-bottom:8px} .oc-tut p{margin:0 0 12px} .oc-tut table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px} .oc-tut th{background:#10151A;color:#5EEAD4;text-align:left;padding:10px 12px;border:1px solid #1E262C;font-weight:600} .oc-tut td{padding:10px 12px;border:1px solid #1E262C;vertical-align:top} .oc-shot{margin:10px auto 14px} .oc-shot img{border:1px solid #1E262C;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.3)} /* oc-toc list */ .oc-toc ol{counter-reset:t;list-style:none;padding:0;margin:0} .oc-toc li{counter-increment:t;margin:0;border-bottom:1px solid #1A2026} .oc-toc li:last-child{border-bottom:0} .oc-toc a{display:block;padding:11px 0;color:#C2C8CC;text-decoration:none;font-size:15.5px;transition:color .15s} .oc-toc a:before{content:counter(t,decimal-leading-zero);color:#5EEAD4;font-family:'JetBrains Mono',monospace;font-size:13px;margin-right:12px} .oc-toc a:hover{color:#5EEAD4} /* oc-faq bigger */ .oc-faq .e-n-accordion-item-title{font-size:18px !important;padding:22px 26px !important} .oc-faq .e-n-accordion-item-content,.oc-faq .e-n-accordion-item-content p{font-size:16px !important;line-height:1.8 !important} .oc-faq .e-n-accordion-item-content{padding:0 26px 22px !important} /* oc-faq flush consistent (override cards) */ .oc-faq .e-n-accordion{gap:0 !important} .oc-faq .e-n-accordion-item{background:transparent !important;border:0 !important;border-bottom:1px solid #1E262C !important;border-radius:0 !important;overflow:visible !important} .oc-faq .e-n-accordion-item-title{font-size:19px !important;font-weight:500 !important;padding:20px 0 !important} .oc-faq .e-n-accordion-item-content{padding:2px 0 20px !important} .oc-faq .e-n-accordion-item-content,.oc-faq .e-n-accordion-item-content p{font-size:16px !important;line-height:1.7 !important} /* oc-paper light theme */ .oc-paper.oc-grid .elementor-column>.elementor-element-populated{margin:10px} .oc-paper .oc-tut,.oc-paper .oc-tut p,.oc-paper .oc-tut li,.oc-paper .oc-tut td{color:#2D3438} .oc-paper .oc-tut strong{color:#0A0D0E} .oc-paper .oc-tut th{background:#F4F2EC;color:#0E8F86;border:1px solid #E5E2DA} .oc-paper .oc-tut td{border:1px solid #E5E2DA} .oc-paper .oc-shot img{border:1px solid #E5E2DA;box-shadow:0 8px 30px rgba(10,13,14,.10)} .oc-paper .oc-toc li{border-bottom:1px solid #E5E2DA} .oc-paper .oc-toc a{color:#2D3438} .oc-paper .oc-toc a:before{color:#0E8F86} .oc-paper .oc-toc a:hover{color:#0E8F86} .oc-paper .oc-faq .e-n-accordion-item{border-bottom:1px solid #E5E2DA !important} .oc-paper .oc-faq .e-n-accordion-item-title{color:#0A0D0E !important} .oc-paper .oc-faq .e-n-accordion-item-title:hover{color:#0E8F86 !important} .oc-paper .oc-faq .e-n-accordion-item-title-icon,.oc-paper .oc-faq .e-n-accordion-item-title-icon svg{color:#0E8F86 !important;fill:#0E8F86 !important} .oc-paper .oc-faq .e-n-accordion-item-content,.oc-paper .oc-faq .e-n-accordion-item-content p{color:#54606A !important} /* oc-paper faq title fix (target text element) */ .oc-paper .oc-faq .e-n-accordion-item-title,.oc-paper .oc-faq .e-n-accordion-item-title-header,.oc-paper .oc-faq .e-n-accordion-item-title-text,.oc-paper .oc-faq summary,.oc-paper .oc-faq summary h1,.oc-paper .oc-faq summary h2,.oc-paper .oc-faq summary h3{color:#0A0D0E !important} .oc-paper .oc-faq .e-n-accordion-item-title:hover,.oc-paper .oc-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:#0E8F86 !important} /* brand__list icon cap */ .brand__list .elementor-icon-list-icon{width:auto !important} .brand__list .elementor-icon-list-icon i{font-size:7px !important;line-height:1.6 !important} .brand__list .elementor-icon-list-icon svg{width:7px !important;height:7px !important} /* oc-darkfaq (brand__faq on dark) */ .oc-darkfaq .brand__faq .elementor-tab-title{color:#F4F2EC !important} .oc-darkfaq .brand__faq .elementor-tab-title:hover{color:#5EEAD4 !important} .oc-darkfaq .brand__faq .elementor-tab-content,.oc-darkfaq .brand__faq .elementor-tab-content *{color:#AEB6BC !important} .oc-darkfaq .brand__faq .elementor-accordion-item{border-bottom-color:#1E262C !important} .oc-darkfaq .brand__faq .elementor-accordion-icon{color:#5EEAD4 !important}