/* =============================================================================
blog-fixes.css - loaded LAST (after styles.css, theme.css, premium.css and
the theme's own style.css) so these rules always get the final say.
Everything here came out of a device sweep at 360 / 375 / 390 / 412 / 430 /
480 / 600 / 768 / 820 / 900 / 1024 / 1100 / 1280 / 1366 / 1920 px.
========================================================================== */
/* --- iOS ------------------------------------------------------------------
Safari inflates body text when a phone is rotated to landscape unless this
is pinned, which made the article column jump a size mid-read. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* --- Mobile drawer scroll lock -------------------------------------------
The blog sets html,body{overflow-y:visible !important} to keep the sticky
sidebar working, so `body.style.overflow='hidden'` could not lock the page
and the article kept scrolling behind the open drawer. */
html.ok-drawer-open,
html.ok-drawer-open body { overflow: hidden !important; touch-action: none; }
/* --- Post cards ----------------------------------------------------------- */
/* Posts with no featured image fell back to the logo, which is white artwork:
on a white card in light mode the whole 200px thumbnail read as empty space.
Give the fallback its own dark panel and let the mark sit inside it. */
.post-thumbnail .ok-fallback-thumb {
object-fit: contain !important;
padding: 34px 22px;
background: linear-gradient(135deg, #0b1220 0%, #142033 55%, #0b1220 100%);
}
.ok-feature-card .post-thumbnail .ok-fallback-thumb { padding: 60px 22px; }
/* Two lines of a 1.18rem title is ~22 characters on a 360px phone, so most
headlines were cut at "Offshore Hosting…". Three lines fits them. */
@media (max-width: 480px) {
.post-title { -webkit-line-clamp: 3; line-clamp: 3; }
.post-info { padding: 1.1rem 1.1rem 1.2rem; }
.ok-feature-card .post-title { font-size: 1.25rem !important; }
}
/* The category chip and read time sat on one line and the chip wrapped to two
rows mid-word on narrow phones. */
.post-meta { flex-wrap: wrap; row-gap: .25rem; }
/* --- Tap targets ---------------------------------------------------------
Everything a finger has to hit gets 44px of height on a touch device.
Only under (pointer: coarse) so the desktop layout keeps its tight rhythm. */
@media (hover: none) and (pointer: coarse) {
.ok-read-more,
.ok-section-link,
.ok-topic-chips a,
.ok-side-list a,
.ok-article-cat,
.ok-article-content .ok-toc a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.ok-card-footer .post-date { min-height: 44px; }
/* A one-line card headline is only ~24px of text; letting the anchor fill the
h2 gives the thumb the whole line to aim at without changing how it looks. */
.post-title a { display: block; min-height: 44px; }
.ok-index-pagination .page-numbers { min-width: 44px; height: 44px; }
.drawer-menu a { min-height: 48px; }
}
/* --- Comment form --------------------------------------------------------
iOS Safari zooms the whole page in when a focused input is under 16px, and
the reader then has to pinch back out. */
@media (max-width: 768px) {
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.ok-blog-sidebar .search-field,
.ok-blog-sidebar input[type="search"] { font-size: 16px; }
#respond, .comment-respond { padding: 1.2rem; }
}
/* --- Article tables ------------------------------------------------------
Wide comparison tables scroll sideways on phones, but nothing said so - the
cut-off column just looked broken. A fading edge plus momentum scrolling
makes it read as a scroller. */
@media (max-width: 760px) {
.ok-article-content table,
.single-post-content table {
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.ok-article-content th,
.ok-article-content td { padding: 10px 11px; font-size: .9rem; }
}
/* --- Section head --------------------------------------------------------
"Explore OffshoreKaka" is nowrap and was pushed onto its own cramped row. */
@media (max-width: 600px) {
.ok-section-head { align-items: flex-start; gap: .5rem; }
.ok-section-head h2 { font-size: 1.35rem; }
}
/* --- Notch / home indicator ---------------------------------------------- */
.mobile-drawer .drawer-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.mobile-drawer .drawer-footer .btn { width: 100%; text-align: center; }
/* --- Landscape phones ----------------------------------------------------
Short viewports made the drawer taller than the screen with no way to reach
Sign In. */
@media (max-height: 480px) and (orientation: landscape) {
.mobile-drawer { overflow-y: auto; }
.ok-index-hero { padding: 28px 0 20px; }
}
/* --- Header logo parity ---------------------------------------------------
styles.css ends with @media(max-width:420px){.logo-img{height:auto}}, which on
the main site is undone again by the critical CSS it inlines after every
. The blog has no such block, so the phone logo came out 43px tall next
to the main site's 56px. Same breakpoint set as styles.css: 52 / 44 / 56. */
@media (max-width: 420px) { header .logo-img { height: 56px; } }
/* =============================================================================
Related guides + prev/next
Added because 38 of the 44 posts had no internal links at all, in or out.
========================================================================== */
.ok-related { margin: 2.6rem 0 0; }
.ok-related h2 {
font-size: 1.3rem; font-weight: 800; margin: 0 0 1.1rem;
padding-bottom: .7rem; border-bottom: 1px solid var(--glass-border);
color: var(--text-main);
}
.ok-related h2:after { display: none; } /* the article h2 gradient rule does not belong here */
.ok-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.ok-related-card {
display: flex; flex-direction: column; gap: .45rem;
padding: 1rem 1.1rem; border-radius: 14px;
background: var(--glass-bg); border: 1px solid var(--glass-border);
text-decoration: none; transition: border-color .2s, transform .2s;
}
.ok-related-card:hover { border-color: rgba(90,162,255,.4); transform: translateY(-2px); }
.ok-related-cat {
font-size: .68rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--primary);
}
.ok-related-card .ok-related-title {
font-size: .97rem; font-weight: 600; line-height: 1.4; color: var(--text-main);
}
.ok-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1.6rem; }
.ok-prevnext-item {
display: flex; flex-direction: column; gap: .3rem;
padding: .95rem 1.1rem; border-radius: 14px;
border: 1px solid var(--glass-border); background: var(--glass-bg); text-decoration: none;
}
.ok-prevnext-item:hover { border-color: rgba(90,162,255,.4); }
.ok-next { text-align: right; }
.ok-prevnext-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ok-prevnext-title { font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--text-main); }
/* A single prev or next must not stretch across both columns */
.ok-prevnext .ok-next:only-child { grid-column: 2; }
html[data-theme="light"] .ok-related-card,
html[data-theme="light"] .ok-prevnext-item { background: #fff; border-color: rgba(0,0,0,.09); box-shadow: 0 4px 16px rgba(15,23,42,.05); }
html[data-theme="light"] .ok-related h2,
html[data-theme="light"] .ok-related-card .ok-related-title,
html[data-theme="light"] .ok-prevnext-title { color: #0f172a; }
@media (max-width: 600px) {
.ok-related-grid, .ok-prevnext { grid-template-columns: 1fr; }
.ok-next { text-align: left; }
.ok-prevnext .ok-next:only-child { grid-column: 1; }
}
@media (hover: none) and (pointer: coarse) {
.ok-related-card, .ok-prevnext-item { min-height: 64px; }
}
/* --- Breadcrumbs ---------------------------------------------------------
These carry the BreadcrumbList markup, so they need to be real text in the
page, not decoration. Kept small and above the headline. */
.ok-crumbs { margin: 0 0 .9rem; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.ok-crumbs a { color: var(--text-muted); text-decoration: none; }
.ok-crumbs a:hover { color: var(--primary); text-decoration: underline; }
.ok-crumbs .separator { margin: 0 .45rem; opacity: .55; }
.ok-crumbs .last { color: var(--text-main); font-weight: 600; }
html[data-theme="light"] .ok-crumbs,
html[data-theme="light"] .ok-crumbs a { color: #64748b; }
html[data-theme="light"] .ok-crumbs .last { color: #0f172a; }
@media (max-width: 600px) {
/* On a phone the post title is long enough to wrap three times already, so the
trail sits on one line and scrolls rather than stacking above it. */
.ok-crumbs { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .78rem; }
.ok-crumbs::-webkit-scrollbar { display: none; }
}
@media (hover: none) and (pointer: coarse) {
/* padding alone left these at 27px. The trail is one nowrap line, so the links
get real height rather than the row getting taller. */
.ok-crumbs { line-height: 44px; }
.ok-crumbs a { display: inline-block; min-height: 44px; line-height: 44px; }
.ok-crumbs .separator { line-height: 44px; }
}
/* =============================================================================
Code blocks
The copy button used to sit inside the
, which is the element that
scrolls sideways, so on a phone it slid away with a long command. It now sits
on the wrapper, which does not scroll.
========================================================================== */
.ok-code-wrap { position: relative; }
/* The button has to beat the .ok-article-content pre rules that set position on
the old markup, hence the specificity here. */
.ok-article-content .ok-code-wrap .ok-copy-btn,
.single-post-content .ok-code-wrap .ok-copy-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
}
/* Room for the button so it never lands on top of the first line of code. */
.ok-article-content .ok-code-wrap pre,
.single-post-content .ok-code-wrap pre { padding-top: 2.9rem !important; }
/* A long command is scrollable but nothing said so. This fades the right edge
while there is more to see, and the class is removed at the end of the scroll. */
.ok-code-wrap.ok-has-more:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 42px;
pointer-events: none;
background: linear-gradient(to right, rgba(5,11,20,0), rgba(5,11,20,.92));
border-radius: 0 14px 14px 0;
}
@media (hover: none) and (pointer: coarse) {
.ok-article-content .ok-code-wrap .ok-copy-btn,
.single-post-content .ok-code-wrap .ok-copy-btn {
min-height: 34px;
padding: .45rem .7rem;
}
/* Sideways scrolling inside the block must not drag the page with it. */
.ok-code-wrap pre { overscroll-behavior-x: contain; }
}
/* --- Header Sign In on a touch tablet -------------------------------------
Between 1024 and 1099px the shared CSS shrinks the Sign In button to 38px
tall. On a mouse that is fine; on an iPad in portrait it is under the 44px
a finger needs. Only lifted where the pointer is coarse, so the desktop
header keeps the exact proportions the main site has. */
@media (hover: none) and (pointer: coarse) and (min-width: 1024px) and (max-width: 1099px) {
header .btn.header-signin { min-height: 44px; display: inline-flex; align-items: center; }
}
/* --- Header Sign In on a touch tablet ------------------------------------
Between 1024 and 1099px the shared styles.css shrinks .header-signin to 38px
high. On a desktop that is fine and it is what the main site looks like, so
the rule is gated to coarse pointers only: an iPad in portrait gets a 44px
target, a mouse at the same width sees no change and stays identical to
offshorekaka.in. The main site has the same 38px on touch and would benefit
from the same rule. */
@media (hover: none) and (pointer: coarse) and (min-width: 1024px) {
header .btn.header-signin { min-height: 44px; display: inline-flex; align-items: center; }
}
/* --- Card grid -----------------------------------------------------------
The first post used to be a "feature card" spanning both columns with a
taller image. Next to a tidy two column grid that reads as a misaligned row
rather than as emphasis, so every card is now the same shape. The rules that
built the feature card live in style.css and the shared styles.css, hence the
overrides here rather than an edit there. */
.ok-enhanced-grid > .post-card { grid-column: auto !important; flex-direction: column !important; }
.ok-enhanced-grid > .post-card .post-thumbnail,
.ok-enhanced-grid > .post-card .post-thumbnail img {
height: 200px !important;
max-height: 200px !important;
flex: 0 0 auto !important;
}
.ok-enhanced-grid > .post-card .post-info { padding: 1.3rem 1.4rem 1.5rem !important; }
.ok-enhanced-grid > .post-card .post-title { font-size: 1.18rem !important; }
.ok-enhanced-grid > .post-card .ok-card-excerpt { font-size: .92rem !important; }
@media (max-width: 768px) {
.ok-enhanced-grid > .post-card .post-thumbnail,
.ok-enhanced-grid > .post-card .post-thumbnail img { height: 190px !important; max-height: 190px !important; }
}
/* Paginated pages have no hero, so the first section needs its own top spacing
rather than inheriting the gap the hero used to provide. */
.ok-blog-home > .ok-index-posts:first-child { padding-top: 2.4rem; }
/* --- Page heading --------------------------------------------------------
The tall hero section is gone. Its H1 now sits at the top of the posts
section, so the page still has exactly one H1 and a correct heading order,
without the banner pushing the first post below the fold. */
.ok-section-head { align-items: flex-start; }
.ok-page-title {
font-size: clamp(1.6rem, 3vw, 2.15rem);
font-weight: 800; line-height: 1.18; margin: .2rem 0 0;
letter-spacing: -.02em; color: var(--text-main);
}
.ok-page-title:after { display: none; } /* the article h2 underline does not belong here */
.ok-page-intro {
margin: .6rem 0 0; max-width: 640px;
font-size: .95rem; line-height: 1.55; color: var(--text-muted);
}
.ok-index-posts { padding-top: 2.2rem !important; }
html[data-theme="light"] .ok-page-title { color: #0f172a; }
html[data-theme="light"] .ok-page-intro { color: #475569; }
@media (max-width: 600px) {
.ok-section-head { gap: .35rem; }
.ok-page-intro { font-size: .9rem; }
.ok-index-posts { padding-top: 1.6rem !important; }
}
/* --- Light theme contrast -------------------------------------------------
Two roles inherit the light theme's blue link colour and land on an amber
background, which measures 2.55:1 and 2.03:1 against a 4.5:1 requirement.
Both are fine in dark theme, so only the light palette missed the override.
The CTA button is the primary conversion element on all 44 posts, so this is
not cosmetic. Ratios after the change are noted beside each rule. */
/* Dark ink on the gold button instead of the inherited blue. 10.4:1 */
html[data-theme="light"] .ok-article-content .ok-cta-box a,
html[data-theme="light"] .single-post-content .ok-cta-box a {
color: #14181f !important;
text-decoration: none;
}
html[data-theme="light"] .ok-article-content .ok-cta-box a:hover {
background: var(--gold-hover, #f0c065) !important;
color: #14181f !important;
}
/* The kicker pill sits on a 10 percent amber wash over white, so the amber text
all but vanishes. A deep amber keeps the same family and reads properly. 6.6:1 */
html[data-theme="light"] .ok-article-content .ok-pro-kicker {
color: #8a4d05 !important;
background: rgba(233, 180, 76, .16) !important;
border-color: rgba(138, 77, 5, .30) !important;
}