296 lines
8.9 KiB
CSS
296 lines
8.9 KiB
CSS
/**
|
|
* OTS Theme - Editor-specific overrides
|
|
* Loaded only inside the Gutenberg block editor.
|
|
*/
|
|
|
|
/* ── Font variables for editor preview ── */
|
|
.editor-styles-wrapper {
|
|
--font-heading: var(--wp--preset--font-family--heading, var(--font-sans));
|
|
--font-sans: var(--wp--preset--font-family--sans, 'Inter', system-ui, -apple-system, sans-serif);
|
|
}
|
|
.editor-styles-wrapper h1,
|
|
.editor-styles-wrapper h2,
|
|
.editor-styles-wrapper h3,
|
|
.editor-styles-wrapper h4,
|
|
.editor-styles-wrapper h5,
|
|
.editor-styles-wrapper h6 {
|
|
font-family: var(--font-heading, var(--font-sans));
|
|
}
|
|
|
|
/* Full-width blocks fill the editor canvas */
|
|
.editor-styles-wrapper [data-type^="oribi/"] {
|
|
max-width: none !important;
|
|
margin-left: calc(-1 * var(--wp--custom--spacing--outer, 0px)) !important;
|
|
margin-right: calc(-1 * var(--wp--custom--spacing--outer, 0px)) !important;
|
|
}
|
|
|
|
/* Decorative overlays must not eat pointer events */
|
|
.editor-styles-wrapper .hero-bg-grid,
|
|
.editor-styles-wrapper .hero-glow,
|
|
.editor-styles-wrapper .hero-glow-2 {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* RichText placeholders inside dark sections */
|
|
.editor-styles-wrapper .hero [data-rich-text-placeholder]::after,
|
|
.editor-styles-wrapper .cta-banner [data-rich-text-placeholder]::after,
|
|
.editor-styles-wrapper .page-hero [data-rich-text-placeholder]::after {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Force hero container to be clickable above decorative layers */
|
|
.editor-styles-wrapper .hero .container,
|
|
.editor-styles-wrapper .cta-banner .container,
|
|
.editor-styles-wrapper .page-hero .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Prevent cursor issues on static elements used as RichText wrappers */
|
|
.editor-styles-wrapper .btn.btn-primary,
|
|
.editor-styles-wrapper .btn.btn-ghost {
|
|
cursor: text;
|
|
}
|
|
|
|
/* Inline-editable stat values and labels */
|
|
.editor-styles-wrapper .hero-stat-value[contenteditable],
|
|
.editor-styles-wrapper .hero-stat-label[contenteditable] {
|
|
cursor: text;
|
|
min-width: 40px;
|
|
outline: none;
|
|
}
|
|
.editor-styles-wrapper .hero-stat-value:focus,
|
|
.editor-styles-wrapper .hero-stat-label:focus {
|
|
outline: 1px dashed rgba(255,255,255,.25);
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Secondary button placeholder visibility */
|
|
.editor-styles-wrapper .btn.btn-ghost[data-rich-text-placeholder]::after {
|
|
color: rgba(255,255,255,.3);
|
|
}
|
|
|
|
/* Device visual shouldn't eat clicks from editable text */
|
|
.editor-styles-wrapper .hero-devices {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Grid / card hover effects are distracting while editing */
|
|
.editor-styles-wrapper .oribi-card:hover,
|
|
.editor-styles-wrapper .feature-card:hover,
|
|
.editor-styles-wrapper .pricing-card:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Ensure platform-row visuals don't overlap editable text */
|
|
.editor-styles-wrapper .platform-visual {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Animated hero editor overrides ───────────────────────── */
|
|
.editor-styles-wrapper .hero-animated .hero-particles,
|
|
.editor-styles-wrapper .page-hero-animated .hero-particles,
|
|
.editor-styles-wrapper .hero-animated__glow {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.editor-styles-wrapper .hero-animated .container,
|
|
.editor-styles-wrapper .page-hero-animated .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.editor-styles-wrapper .hero-animated [data-rich-text-placeholder]::after,
|
|
.editor-styles-wrapper .page-hero-animated [data-rich-text-placeholder]::after {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Contact form placeholder in editor */
|
|
.editor-styles-wrapper .contact-form-wrap {
|
|
min-height: 180px;
|
|
}
|
|
|
|
/* Remove default block outline in favour of section styling */
|
|
.editor-styles-wrapper [data-type^="oribi/"] > .block-editor-block-list__block-edit > [data-block] {
|
|
outline: none;
|
|
}
|
|
|
|
/* ── InnerBlocks child styling ─────────────────────────────────────────── */
|
|
|
|
/* Child blocks inside grids: remove block-list spacing */
|
|
.editor-styles-wrapper [data-type="oribi/feature-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/value-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/addon-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/image-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/stat-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/link-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/pricing-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/platform-section"] .block-editor-inner-blocks,
|
|
.editor-styles-wrapper [data-type="oribi/trust-section"] .block-editor-inner-blocks {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Feature cards grid: children lay out inline */
|
|
.editor-styles-wrapper .grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
|
.editor-styles-wrapper .grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout,
|
|
.editor-styles-wrapper .grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
display: grid;
|
|
gap: 2rem;
|
|
}
|
|
.editor-styles-wrapper .grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.editor-styles-wrapper .grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.editor-styles-wrapper .grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Pricing cards grid */
|
|
.editor-styles-wrapper .pricing-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* Trust items: stack vertically with gap */
|
|
.editor-styles-wrapper [data-type="oribi/trust-section"] .grid-2 > div:first-child .block-editor-block-list__layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* ── Oribi Icon Picker ─────────────────────────────────────── */
|
|
.oribi-icon-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.oribi-icon-current {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 10px;
|
|
background: #f0f0f1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #1e1e1e;
|
|
min-height: 36px;
|
|
}
|
|
.oribi-icon-current i {
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
.oribi-icon-current-label {
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
color: #555;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.oribi-icon-clear {
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: 1px solid #cc1818;
|
|
border-radius: 3px;
|
|
color: #cc1818;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
line-height: 1.4;
|
|
}
|
|
.oribi-icon-clear:hover {
|
|
background: #cc1818;
|
|
color: #fff;
|
|
}
|
|
.oribi-icon-search {
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: 1px solid #949494;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
}
|
|
.oribi-icon-search:focus {
|
|
border-color: #3858e9;
|
|
box-shadow: 0 0 0 2px rgba(56, 88, 233, .2);
|
|
}
|
|
.oribi-icon-count {
|
|
font-size: 11px;
|
|
color: #757575;
|
|
text-align: right;
|
|
line-height: 1;
|
|
}
|
|
.oribi-icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 3px;
|
|
max-height: 252px;
|
|
overflow-y: auto;
|
|
padding: 4px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
background: #fafafa;
|
|
}
|
|
.oribi-icon-grid::-webkit-scrollbar { width: 6px; }
|
|
.oribi-icon-grid::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
|
|
.oribi-icon-grid::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
|
|
.oribi-icon-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 3px;
|
|
padding: 7px 2px 5px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
transition: background .12s, border-color .12s, color .12s;
|
|
color: #1e1e1e;
|
|
}
|
|
.oribi-icon-cell:hover {
|
|
background: #e8f0fe;
|
|
border-color: #3858e9;
|
|
color: #3858e9;
|
|
}
|
|
.oribi-icon-cell.is-active {
|
|
background: #3858e9;
|
|
border-color: #3858e9;
|
|
color: #fff;
|
|
}
|
|
.oribi-icon-cell i {
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
}
|
|
.oribi-icon-cell span {
|
|
font-size: 8.5px;
|
|
color: inherit;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
opacity: 0.75;
|
|
line-height: 1.2;
|
|
}
|
|
.oribi-icon-empty {
|
|
font-size: 12px;
|
|
color: #757575;
|
|
text-align: center;
|
|
padding: 16px;
|
|
grid-column: 1 / -1;
|
|
}
|