/* ============================================================================
editor-content.css — SINGLE SOURCE OF TRUTH for TinyMCE-authored content.
This file is loaded TWICE, deliberately:
1. In the admin TinyMCE iframe, via `content_css` in assets/js/tinymce-config.js
(the iframe carries the class .mce-content-body).
2. On the public site, via in layouts/frontend/header.blade.php
(the content is wrapped in
).
That is why every rule below is written as a pair of selectors. Do NOT add a
rule to only one of the two prefixes — if the pair drifts, the editor stops
being WYSIWYG, which is the exact bug this file exists to kill.
WHY !important: assets/css/style.css lines 63-182 are a Meyer-style reset that
applies `font: inherit; margin: 0; padding: 0; font-size: 100%` to every tag
and `list-style: none` to ol/ul. It erases bold, italic, bullets, numbering,
sub/sup and table borders from authored HTML. Several site rules that partially
undo it (e.g. `.group-collapse-expand .card.card-body p`) have specificity 0,3,1
— higher than `.tinymce-content p` at 0,1,1 — so specificity alone cannot win.
!important is the correct tool here: this is a scoped, opt-in content region.
Deliberately NOT set here: `text-align` and `color` on inline elements. TinyMCE
writes those as inline styles (alignment buttons, forecolor/backcolor) and an
author !important would beat the admin's own choice.
========================================================================== */
@font-face {
font-family: "DIN Next LT Pro Regular";
/* .woff only - the din-regular.woff2 sitting beside it is a byte-identical copy of
the WOFF1 file, so claiming format("woff2") just bought a failed download first. */
src: url("/assets/fonts/din-regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ---------------------------------------------------------------- container */
/* The site font wins, per requirement — but it is stated explicitly rather than
inherited so the editor iframe (which inherits from nothing) resolves to the
identical stack instead of falling back to Times.
`var(--bs-neutral-800, #333)`: the Bootstrap variable exists on the frontend and
tracks light/dark theme; inside the editor iframe it is undefined, so the #333
fallback applies. One declaration, correct in both contexts. */
.tinymce-content,
.mce-content-body {
font-family: "DIN Next LT Pro Regular", "Manrope", sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--bs-neutral-800, #333);
}
/* Wide authored tables scroll inside the content block instead of blowing out
the page. This replaces the old `table { display: block }` hack in mystyle.css,
which produced scrolling at the cost of destroying column alignment. */
.tinymce-content {
overflow-x: auto;
}
/* --------------------------------------------------------------- paragraphs */
/* font-size is intentionally left alone: it inherits from the container above,
which lets the existing responsive overrides (e.g. the blog's mobile bump)
keep working. line-height and rhythm ARE pinned, since those must match. */
.tinymce-content p,
.mce-content-body p {
margin: 0 0 1em 0 !important;
line-height: 1.6 !important;
}
.tinymce-content p:last-child,
.mce-content-body p:last-child {
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------------- headings */
/* Sizes are the site's own scale (style.css:515-555) pulled INTO the editor,
rather than the editor's browser-default em scale pushed onto the site. That
direction keeps every live page pixel-identical to how it renders today and
changes only the admin preview — the low-risk way to converge the two. */
.tinymce-content h1, .mce-content-body h1,
.tinymce-content h2, .mce-content-body h2,
.tinymce-content h3, .mce-content-body h3,
.tinymce-content h4, .mce-content-body h4,
.tinymce-content h5, .mce-content-body h5,
.tinymce-content h6, .mce-content-body h6 {
font-family: "DIN Next LT Pro Regular", "Manrope", sans-serif !important;
font-weight: 600 !important;
color: inherit;
margin: 1.2em 0 0.5em 0 !important;
}
.tinymce-content h1:first-child, .mce-content-body h1:first-child,
.tinymce-content h2:first-child, .mce-content-body h2:first-child,
.tinymce-content h3:first-child, .mce-content-body h3:first-child,
.tinymce-content h4:first-child, .mce-content-body h4:first-child,
.tinymce-content h5:first-child, .mce-content-body h5:first-child,
.tinymce-content h6:first-child, .mce-content-body h6:first-child {
margin-top: 0 !important;
}
.tinymce-content h1, .mce-content-body h1 { font-size: 32px !important; line-height: 40px !important; }
.tinymce-content h2, .mce-content-body h2 { font-size: 24px !important; line-height: 32px !important; }
.tinymce-content h3, .mce-content-body h3 { font-size: 19px !important; line-height: 26px !important; }
.tinymce-content h4, .mce-content-body h4 { font-size: 16px !important; line-height: 22px !important; }
.tinymce-content h5, .mce-content-body h5 { font-size: 14px !important; line-height: 20px !important; }
.tinymce-content h6, .mce-content-body h6 { font-size: 13px !important; line-height: 18px !important; }
/* ----------------------------------------------------------------- emphasis */
/* The reset's `font: inherit` silently flattened all of these. `` and ``/``
were rendering as plain text — `` in particular is what Word and Google Docs
paste in, so pasted bold was disappearing while typed bold survived. */
.tinymce-content strong, .mce-content-body strong,
.tinymce-content b, .mce-content-body b {
font-weight: 700 !important;
}
.tinymce-content em, .mce-content-body em,
.tinymce-content i, .mce-content-body i {
font-style: italic !important;
}
.tinymce-content u, .mce-content-body u {
text-decoration: underline !important;
}
.tinymce-content s, .mce-content-body s,
.tinymce-content strike, .mce-content-body strike,
.tinymce-content del, .mce-content-body del {
text-decoration: line-through !important;
}
/* The reset forced `vertical-align: baseline; font-size: 100%`, which rendered
sub/sup as ordinary inline text. */
.tinymce-content sub, .mce-content-body sub,
.tinymce-content sup, .mce-content-body sup {
font-size: 0.75em !important;
line-height: 0 !important;
position: relative !important;
vertical-align: baseline !important;
}
.tinymce-content sup, .mce-content-body sup { top: -0.5em !important; }
.tinymce-content sub, .mce-content-body sub { bottom: -0.25em !important; }
.tinymce-content mark, .mce-content-body mark {
background-color: #fff3cd !important;
color: inherit !important;
}
/* -------------------------------------------------------------------- lists */
/* `list-style: none` in the reset stripped bullets AND numbers. The site only
ever restored `ul` (style.css:13947) and only inside collapse cards, so ordered
lists lost their numbering on every page. */
.tinymce-content ul, .mce-content-body ul,
.tinymce-content ol, .mce-content-body ol {
display: block !important;
margin: 1em 0 !important;
padding-left: 40px !important;
}
.tinymce-content ul, .mce-content-body ul { list-style-type: disc !important; }
.tinymce-content ol, .mce-content-body ol { list-style-type: decimal !important; }
/* Browser-default nesting cues, also lost to the reset. */
.tinymce-content ul ul, .mce-content-body ul ul { list-style-type: circle !important; }
.tinymce-content ul ul ul, .mce-content-body ul ul ul { list-style-type: square !important; }
.tinymce-content ol ol, .mce-content-body ol ol { list-style-type: lower-alpha !important; }
.tinymce-content ol ol ol, .mce-content-body ol ol ol { list-style-type: lower-roman !important; }
.tinymce-content ul ul, .mce-content-body ul ul,
.tinymce-content ul ol, .mce-content-body ul ol,
.tinymce-content ol ol, .mce-content-body ol ol,
.tinymce-content ol ul, .mce-content-body ol ul {
margin: 0.5em 0 !important;
}
.tinymce-content li, .mce-content-body li {
display: list-item !important;
line-height: 1.6 !important;
margin-bottom: 0.5em !important;
}
.tinymce-content li p, .mce-content-body li p {
margin: 0 !important;
}
/* ------------------------------------------------------------------- tables */
/* The brief: a table is 100% wide on EVERY screen and the type shrinks with the device,
rather than the table keeping its natural width and scrolling sideways.
Four copies of these rules existed (here, mystyle.css, post/detail, rental/types) and
three of them did the opposite - `display: block; overflow-x: auto`. That takes the
element out of table layout altogether, so `width: 100%` stops distributing across the
columns and the row scrolls instead of fitting. Those three are gone; this is now the
only definition, and it is the file the admin TinyMCE iframe loads via `content_css`,
so the editor preview and the published page cannot drift apart again. */
.tinymce-content table, .mce-content-body table {
display: table !important;
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse !important;
margin: 15px 0 !important;
/* Fluid, not one hard step at 576px: the type reduces continuously with the
viewport - 360px -> ~11px, 768px -> ~13px, 992px and up -> 14px. */
font-size: clamp(11px, 9.3px + 0.48vw, 14px) !important;
color: inherit;
}
/* Fixed layout below 992px is what makes "always 100%, never overflows" a guarantee
rather than a hope: under auto layout every column keeps a min-content width, so a
six-column table still runs off a phone no matter how small the type gets. Desktop
keeps auto layout, where there is room for columns to size to their content. */
@media (max-width: 991.98px) {
.tinymce-content table, .mce-content-body table {
table-layout: fixed !important;
}
}
.tinymce-content table th, .mce-content-body table th,
.tinymce-content table td, .mce-content-body table td {
border: 1px solid #dee2e6 !important;
/* Fixed 15px padding on a 360px screen is a third of the width gone to gutters
before a single character is drawn; this shrinks on the same curve as the type. */
padding: clamp(6px, 1.4vw, 15px) !important;
vertical-align: middle !important;
text-align: left;
line-height: 1.5 !important;
/* A long URL or product code is one unbreakable token: without these it sets the
column's minimum width and drags the table past the screen edge by itself. */
word-break: break-word;
overflow-wrap: anywhere;
}
/* Anything with an intrinsic width has to be told to fit the cell too. */
.tinymce-content table img, .mce-content-body table img,
.tinymce-content table iframe, .mce-content-body table iframe {
max-width: 100% !important;
height: auto !important;
}
.tinymce-content table th, .mce-content-body table th {
background-color: #f8f9fa !important;
font-weight: 600 !important;
color: #2c3e50 !important;
}
.tinymce-content table td p, .mce-content-body table td p,
.tinymce-content table th p, .mce-content-body table th p {
margin: 0 !important;
padding: 0 !important;
}
/* The 576px step that used to sit here (13px type, 10px padding) is replaced by the
clamp() curve above, which reduces continuously instead of jumping at one width -
and, critically, also covers 577-991px, where the old rule left tables at full 14px
and 15px padding and let them overflow tablets. */
/* ------------------------------------------------------------ block content */
.tinymce-content blockquote, .mce-content-body blockquote {
margin: 1em 0 1em 0 !important;
padding: 0.5em 0 0.5em 1em !important;
border-left: 3px solid #dee2e6 !important;
font-style: italic !important;
}
/* `font: inherit` in the reset also killed the monospace default on code. */
.tinymce-content pre, .mce-content-body pre,
.tinymce-content code, .mce-content-body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 0.9em !important;
}
.tinymce-content pre, .mce-content-body pre {
display: block !important;
padding: 12px !important;
margin: 1em 0 !important;
background-color: #f8f9fa !important;
border-radius: 4px !important;
overflow-x: auto !important;
white-space: pre !important;
}
.tinymce-content hr, .mce-content-body hr {
display: block !important;
height: 1px !important;
border: 0 !important;
border-top: 1px solid #dee2e6 !important;
margin: 1.5em 0 !important;
}
.tinymce-content img, .mce-content-body img {
max-width: 100% !important;
height: auto !important;
}
.tinymce-content figure, .mce-content-body figure {
display: block !important;
margin: 1em 0 !important;
}
/* Links must be stated here, not left to inherit. On the frontend they would fall
through to the global `a` rule in style.css, but the editor iframe has no such rule
and would render browser-default blue — so the admin preview would disagree with the
live page on every single link.
The fallbacks are what make one declaration work in both places: --bs-neutral-1000
and --bs-warning resolve on the site (and follow the dark theme), and are undefined
inside the iframe, where the literals below take over. Keep the literals in step with
:root in style.css if those tokens are ever re-valued. */
.tinymce-content a, .mce-content-body a {
color: var(--bs-neutral-1000, #000000);
text-decoration: underline;
}
.tinymce-content a:hover, .mce-content-body a:hover {
color: var(--bs-warning, #6169ba);
}