/* ---- tokens.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
tokens.css — pulls in the two already-built, already-approved token
sources rather than duplicating them. Signal Emerald colors/glass
tokens and the self-hosted type system both already live in branding/
(built and reviewed before Phase 4) — this file is the ONE place the
live site declares "these are the tokens," so a future palette/font
change happens in branding/ and is inherited everywhere, never
copy-pasted into a second location that can drift out of sync.
*/
/* These two used to be @import'd from here (real perf bug, fixed
2026-08-22, Phase 16: a CSS @import forces the browser to fetch and
parse THIS file first before it can even discover the imported
ones, serializing what should be parallel requests — directly
delays font/color-token discovery, which is exactly what the font
preload item below exists to prevent). Now loaded as real sibling
gets the same treatment as .container directly, rather than
layout.php wrapping every page's $bodyContent in an extra div — it
never had ANY width/padding rule before this (header/footer opted
into .container explicitly in their own markup; just never
did), which was invisible on the old single-paragraph stub homepage
but would have put a full bento grid flush against the browser
edge at every viewport size the moment real content landed here. */
.container,
main {
width: 100%;
max-width: 1120px;
margin-inline: auto;
padding-inline: var(--space-md);
container-type: inline-size; /* enables container queries on children */
}
.grid-auto {
display: grid;
gap: var(--space-md);
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
/* ---- Touch targets ---- */
button,
a.button,
.touch-target {
min-height: var(--touch-target-min);
min-width: var(--touch-target-min);
}
/* ---- Section head — shared eyebrow/title pattern used by any
homepage (or future page) section that needs one, so it's defined
once instead of duplicated per component stylesheet. ---- */
.section-head {
max-width: 60ch;
margin-bottom: var(--space-lg);
}
.section-head__eyebrow {
margin: 0;
font-family: var(--font-utility);
font-size: var(--step-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-brand-green);
}
.section-head__title {
margin: 6px 0 0;
font-family: var(--font-display);
font-weight: 500;
}
/* ---- Buttons — structural base only (box model, type). Color,
glass, and the molten-glass hover treatment for .btn--primary/
--ghost/--link live in their own file, assets/css/buttons.css,
loaded after this one. ---- */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 22px;
border-radius: 999px;
font-family: var(--font-utility);
font-size: var(--step-caption);
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
}
/* ---- Page-to-page navigation (Phase 16, PERFORMANCE.md's "page-to-
page navigation speed" section) — cross-document View Transitions.
One rule, progressive enhancement: browsers that support it get an
automatic cross-fade between any two same-origin pages on this site;
unsupported browsers just navigate normally, no fallback code
needed. Shared-element morphing DONE 2026-08-23 (direct instruction)
— a real per-slug `view-transition-name: post-hero-{slug}` pairing
between an archive/homepage card's thumbnail (archive-listing.php)
and that same post's own featured image (post.php): the card visibly
morphs into the hero across the navigation instead of getting the
plain cross-fade every other element gets. Every OTHER element on
the page (nav, footer, body text) still just gets the ordinary
cross-fade from this one sitewide rule — shared-element pairing is
deliberately scoped to just that one card↔hero relationship, not
applied everywhere. */
@view-transition {
navigation: auto;
}
/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* The universal selector above does NOT reach the browser-generated
::view-transition-* pseudo-elements (they sit in their own top
layer, outside the normal DOM tree) — needs its own explicit kill
switch so a reduced-motion visitor gets an instant page swap, not
a suppressed-everywhere-except-this cross-fade. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* ---- buttons.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
buttons.css — molten-glass treatment for every button/link-button on
the site: .btn--primary (filled), .btn--ghost (secondary/outlined),
and .btn--link (a new variant for inline "arrow" CTAs — archive row
links, the terminal's "Browse the archive", footer's "Work with
me"). Structural box model lives in base.css's plain .btn rule;
everything here is color, glass, and hover motion.
"Molten glass": a real glossy surface — layered gradients standing
in for refracted light (a bright specular highlight, a warmer
under-glow), a slow ambient shimmer even at rest, and on hover a
bright sheen sweeps across like light catching liquid glass, plus a
soft color-matched glow bloom. Uses ::before/::after with empty
content:"" for the decorative layers — this project's established
rule is that pseudo-element GENERATED TEXT doesn't reliably render
here, not that pseudo-elements can't carry background/gradient
layers (glass.css's own ::before proves that works fine).
This is a deliberate, scoped exception to the sitewide Clear Glass
simplification (see [[feedback_liquid_glass_technique]] in project
memory, and glass.css's own comment) — that decision retired the
rim+bend-filter treatment for GLASS PANELS (header, cards). Buttons
are a different, much smaller surface where the user explicitly
asked for "impressive molten-glass" specifically, so this doesn't
reopen that panel decision.
*/
.btn {
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid transparent;
transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.2s ease, background-color 0.2s ease;
}
.btn:hover,
.btn:focus-visible {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(-1px) scale(0.98);
}
/* Sheen — a bright diagonal bar that sweeps left-to-right on hover.
Sits above the gradient background, below the label text. */
.btn--primary::after,
.btn--ghost::after {
content: "";
position: absolute;
top: -20%;
left: -60%;
width: 35%;
height: 140%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-18deg);
transition: left 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.btn--ghost:hover::after,
.btn--ghost:focus-visible::after {
left: 130%;
}
/* ---- Primary — filled molten emerald glass ---- */
.btn--primary {
color: #fff;
background:
radial-gradient(120% 160% at 20% -20%, rgba(255, 255, 255, 0.5), transparent 55%),
linear-gradient(155deg, #17C989 0%, #0E8F5E 45%, #0A6B45 100%);
background-size: 100% 100%, 220% 220%;
border-color: rgba(255, 255, 255, 0.35);
box-shadow:
0 4px 18px rgba(14, 143, 94, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -8px 14px rgba(0, 0, 0, 0.18);
animation: molten-drift 7s ease-in-out infinite;
}
.btn--primary span,
.btn--primary {
position: relative;
}
.btn--primary:hover,
.btn--primary:focus-visible {
box-shadow:
0 8px 28px rgba(14, 143, 94, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -8px 14px rgba(0, 0, 0, 0.16);
}
@keyframes molten-drift {
0%, 100% { background-position: 0% 0%, 0% 50%; }
50% { background-position: 0% 0%, 100% 50%; }
}
/* ---- Ghost/secondary — translucent molten glass, colored rim glow
on hover rather than a flat border-color swap. ---- */
.btn--ghost {
color: var(--color-ink);
background:
radial-gradient(120% 160% at 25% -10%, rgba(255, 255, 255, 0.14), transparent 55%),
linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(14, 143, 94, 0.07));
border-color: var(--color-border);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
color: var(--color-brand-green);
border-color: rgba(14, 143, 94, 0.6);
box-shadow:
0 0 0 1px rgba(14, 143, 94, 0.25),
0 8px 24px rgba(14, 143, 94, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* ---- Link — inline "arrow" CTAs (archive row links, the terminal's
browse-archive link, footer emphasis link). Resets .btn's pill
chrome: no fill, no border, no padding — just text with a molten
underline that fills in and an arrow that nudges forward. ---- */
.btn--link {
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--color-brand-green);
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1.5px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease, color 0.2s ease, text-shadow 0.3s ease, transform 0.2s ease;
}
.btn--link:hover,
.btn--link:focus-visible {
background-size: 100% 1.5px;
text-shadow: 0 0 12px rgba(14, 143, 94, 0.55);
transform: none;
}
.btn--link .btn--link__arrow {
display: inline-block;
transition: transform 0.25s ease;
}
.btn--link:hover .btn--link__arrow,
.btn--link:focus-visible .btn--link__arrow {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none !important;
animation: none !important;
}
.btn:hover,
.btn:focus-visible,
.btn:active {
transform: none !important;
}
.btn--primary::after,
.btn--ghost::after {
display: none !important;
}
.btn--link .btn--link__arrow {
transition: none !important;
}
}
/* ---- header.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
header.css — the site header: a plain, usual centered nav pill.
Clear Glass secondary tier (see glass.css) — thin, light, no bend
filter. NEVER stretches full width and NEVER sticky, at any viewport
size (that's the whole point of this shape, not a mobile-only rule) —
it's a compact pill that scrolls away with the page like any other
element.
Full nav links (Categories/About/Contact) hide below 900px in
portrait — a hamburger button takes their place instead, opening a
vertical Clear Glass panel with the same links (the fixed bottom
nav's icons are shortcuts, not full nav parity). This 900px/portrait
breakpoint MUST stay in sync with bottom-nav.css/back-to-top.css's
own breakpoints.
*/
.site-header {
position: relative;
z-index: 200; /* glass.css's .glass-content sets position:relative +
z-index:1 on every glass wrapper, which creates its own stacking
context — that silently trapped the mobile drawer's z-index:200
inside a context that itself only counted as "1" against the root
(bottom-nav/back-to-top compare directly in the root context, so
they were winning at 46/45 against an effectively-1 header). Real
bug, not a guess — verified via elementFromPoint showing bottom-nav
painting over an "open" drawer. Promoting the header itself fixes
it for the whole subtree without fighting glass.css's own rule. */
display: flex;
justify-content: center;
padding-block: var(--space-sm);
}
.site-header__pill {
--glass-radius: 999px;
display: inline-flex;
max-width: calc(100% - var(--space-md) * 2); /* never edge-to-edge, even on narrow screens */
border-radius: 999px;
}
/* Direct-child combinator, not a bare descendant selector — the pill
also CONTAINS other .glass-content wrappers (the dropdown menu, the
mobile hamburger panel), nested several levels deep. A descendant
selector here would silently match those too and stomp their own
vertical/left-aligned layout with this row-flex one — that was a
real bug (dropdown items rendering centered instead of left-aligned
and losing their column stacking). `>` scopes this to the pill's own
immediate content wrapper only. */
.site-header__pill > .glass-content {
display: flex;
align-items: center;
gap: calc(var(--space-md) + 4px); /* a touch wider now the logo reads bigger */
padding-inline: calc(var(--space-md) + 2px);
padding-block: 10px;
}
.site-header__logo {
display: flex;
align-items: center;
min-height: var(--touch-target-min);
text-decoration: none;
/* Real bug, confirmed via getBoundingClientRect on a live mobile
viewport: without this, the anchor was a default flex-shrink:1
item inside .site-header__pill > .glass-content's row — on
narrow screens where the pill got tight (logo + nav-replacement
icons + mute toggle all competing for space), it shrank well
below the logo image's natural width, and base.css's global
`img { max-width: 100% }` then capped the can show a callout menu instead
of navigating on a slightly-too-long tap. */
-webkit-touch-callout: none;
}
/* Real `text-decoration` + `color`, not a ::after/::before pseudo-
element sweep — this environment (confirmed in both the preview
pane AND the user's actual Edge browser) does not reliably paint
generated pseudo-element content/transforms on these elements even
though getComputedStyle reports the values as applied; a plain DOM
span with the same styling rendered fine in the same spot, so real
elements/properties are what's actually reliable here. The active
page's own link/summary gets the SAME underline as hover, just
permanently on. */
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a.is-active,
.site-header__nav summary:hover,
.site-header__nav summary:focus-visible,
.nav-dropdown.is-active summary,
.nav-dropdown[open] summary {
color: var(--color-brand-green);
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a.is-active {
text-decoration-line: underline;
text-decoration-color: var(--color-brand-green);
}
.nav-dropdown:hover .nav-dropdown__label,
.nav-dropdown.is-active .nav-dropdown__label,
.nav-dropdown[open] .nav-dropdown__label {
text-decoration-line: underline;
text-decoration-color: var(--color-brand-green);
}
/* Flat category dropdown — /, no JS required, no
sub-category nesting per the taxonomy override. Secondary-tier Clear
Glass menu (this is a bounded card, exactly what glass.css's
secondary tier is for). The indicator is a real monospace [+]/[–]
toggle (two real s, one shown at a time via the native [open]
attribute — NOT ::after generated content, per the reliability note
above) — ties into the same ui-monospace/"techy console" motif as
the mobile drawer's "/menu" tag and numbered link index. */
.nav-dropdown {
position: relative;
}
.nav-dropdown summary {
list-style: none;
}
.nav-dropdown summary::-webkit-details-marker {
display: none;
}
.nav-dropdown__indicator {
margin-left: 6px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
letter-spacing: -0.02em;
color: var(--color-ink-muted);
}
.nav-dropdown__indicator-open {
display: none;
}
.nav-dropdown[open] .nav-dropdown__indicator-closed {
display: none;
}
.nav-dropdown[open] .nav-dropdown__indicator-open {
display: inline;
color: var(--color-brand-green);
}
.nav-dropdown__menu {
--glass-radius: 14px;
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 200px;
/* Grows to fit the longest category label instead of wrapping it —
real bug, confirmed live: "Workflow Optimization" (nav_label,
config/site.config.php) wrapped to two lines inside the old fixed
200px min-width. width: max-content plus nowrap on the links
below means the menu's own width always matches whatever the
longest current category label needs, not a number tuned for
today's labels that breaks again the next time one gets longer. */
width: max-content;
max-width: calc(100vw - var(--space-md) * 2);
border-radius: var(--glass-radius);
}
/* Items stack vertically — a plain , one per line, not a row. */
.nav-dropdown__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 8px;
list-style: none;
}
.nav-dropdown__list li + li {
margin-top: 2px;
}
.nav-dropdown__list a {
position: relative;
display: flex;
align-items: center;
min-height: var(--touch-target-min);
padding-inline: 10px;
border-radius: 8px;
color: var(--color-ink);
text-decoration: none;
font-family: var(--font-body);
white-space: nowrap; /* pairs with .nav-dropdown__menu's width: max-content above — every label stays on one line */
}
.nav-dropdown__list a:hover,
.nav-dropdown__list a.is-active {
background: rgba(14, 143, 94, 0.12);
color: var(--color-brand-green);
}
.nav-dropdown__list a.is-active {
font-weight: 600;
}
/* ---- Mobile menu (<900px portrait only) — a real full-screen drawer,
not a small anchored card, replacing the full nav there. Pure
/[open] CSS, zero extra JS: the panel goes from `display:
none` to a fixed full-viewport primary-tier Clear Glass sheet purely
off the native [open] attribute. The hamburger icon (three bars)
morphs into an × via CSS transforms and pins itself to the corner
while open, so the same control opens and closes it. ---- */
.site-header__mobile-menu {
display: none;
position: relative;
}
.site-header__hamburger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: 999px;
color: var(--color-ink);
cursor: pointer;
list-style: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.site-header__hamburger::-webkit-details-marker {
display: none;
}
/* ---- Sound mute toggle (assets/js/ui-sound.js) — same 40px circular
footprint/hover language as the hamburger button above, so it reads
as part of the same control family rather than a bolted-on extra.
Two real SVGs crossfade instead of redrawing a path on toggle (this
project's established rule: pseudo-element/generated content is
unreliable here, and swapping opacity on two already-rendered real
elements sidesteps that entirely). The on-state's sound-wave arcs
pulse gently and continuously — the one place on the header this
animates without a hover, since it's the visual confirmation that
sound is actually live, not just a static icon. ---- */
.site-header__sound-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 999px;
background: transparent;
color: var(--color-ink);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.site-header__sound-toggle:hover,
.site-header__sound-toggle:focus-visible {
color: var(--color-brand-green);
background: rgba(14, 143, 94, 0.14);
}
.site-header__sound-icon {
position: absolute;
width: 19px;
height: 19px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-header__sound-icon--on {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.site-header__sound-icon--off {
opacity: 0;
transform: scale(0.7) rotate(-12deg);
}
.site-header__sound-toggle.is-muted .site-header__sound-icon--on {
opacity: 0;
transform: scale(0.7) rotate(12deg);
}
.site-header__sound-toggle.is-muted .site-header__sound-icon--off {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* The two outer sound-wave arcs (2nd/3rd ) in the "on" icon —
a slow, continuous, alternating pulse so an unmuted state visibly
reads as "live" rather than a dead icon. */
.site-header__sound-icon--on path:nth-child(2) {
animation: sound-wave-pulse 2.4s ease-in-out infinite;
}
.site-header__sound-icon--on path:nth-child(3) {
animation: sound-wave-pulse 2.4s ease-in-out infinite 0.3s;
}
@keyframes sound-wave-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
.site-header__hamburger-bar {
width: 19px;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}
/* Three equal bars stay unmistakably "hamburger menu" at a glance —
the middle one is always brand green (not just on hover), a small
on-brand/techy signature rather than three flat identical lines. */
.site-header__hamburger-bar:nth-child(2) {
background: var(--color-brand-green);
}
.site-header__hamburger:hover,
.site-header__hamburger:focus-visible {
color: var(--color-brand-green);
background: rgba(14, 143, 94, 0.14);
}
.site-header__mobile-panel {
display: none;
}
.site-header__mobile-menu[open] .site-header__hamburger {
position: fixed;
top: max(16px, env(safe-area-inset-top, 0px));
right: max(16px, env(safe-area-inset-right, 0px));
z-index: 201;
color: var(--color-brand-green);
background: var(--color-surface);
box-shadow: var(--glass-shadow);
}
.site-header__mobile-menu[open] .site-header__hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.site-header__mobile-menu[open] .site-header__hamburger-bar:nth-child(2) {
opacity: 0;
}
.site-header__mobile-menu[open] .site-header__hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.site-header__mobile-menu[open] .site-header__mobile-panel {
display: block;
position: fixed;
inset: 0;
z-index: 200;
border-radius: 0;
}
.site-header__mobile-panel-inner {
height: 100dvh;
overflow-y: auto;
display: flex;
flex-direction: column;
/* Top padding cleared to 112px (was 64px) — real overlap, confirmed
via screenshot: the theme-cord (theme-toggle.css, z-index 210,
ABOVE this panel's 200) rests its knob at y 34-78px, which sat
directly on top of this panel's own "/menu"/"Categories" text
when padding-top only cleared 64px. The cord is a persistent
top-left control at every breakpoint (by design), so this panel's
own content has to start below it, not the other way around. */
padding: calc(112px + env(safe-area-inset-top, 0px)) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
}
.site-header__mobile-tag {
margin: 0 0 var(--space-md);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
letter-spacing: 0.02em;
color: var(--color-brand-green);
}
.site-header__mobile-eyebrow {
margin: 0 0 var(--space-xs);
font-family: var(--font-utility);
font-size: var(--step-caption);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.site-header__mobile-list {
display: flex;
flex-direction: column;
}
.site-header__mobile-link {
display: flex;
align-items: baseline;
gap: 16px;
min-height: 56px;
padding-block: 12px;
border-bottom: 1px solid var(--color-border);
color: var(--color-ink);
text-decoration: none;
font-family: var(--font-display);
font-size: var(--step-h3);
font-weight: 500;
transition: color 0.2s ease, padding-left 0.2s ease;
/* Same iOS Safari long-press-preview issue noted in bottom-nav.css. */
-webkit-touch-callout: none;
}
.site-header__mobile-link-index {
flex: none;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
color: var(--color-ink-muted);
}
.site-header__mobile-link--plain {
font-family: var(--font-utility);
font-size: var(--step-lead);
}
.site-header__mobile-link:hover,
.site-header__mobile-link:focus-visible,
.site-header__mobile-link.is-active {
color: var(--color-brand-green);
padding-left: 8px;
}
.site-header__mobile-link.is-active .site-header__mobile-link-index {
color: var(--color-brand-green);
}
.site-header__mobile-divider {
height: 1px;
margin-block: var(--space-md);
background: var(--color-border);
}
@media (max-width: 900px) and (orientation: portrait) {
.site-header__nav {
display: none;
}
.site-header__mobile-menu {
display: block;
}
/* Real overlap bug, confirmed via screenshot + measured rects: at
narrow phone widths a CENTERED 320px pill leaves only ~27px clear
on either side, but the theme-cord (theme-toggle.css, persistent
top-left at every breakpoint by design) needs ~78px of clearance
for its 44px knob. Reserving that as padding-left — rather than
centering — means this pill no longer sits pixel-aligned with
bottom-nav.css's independently-centered capsule at the very
narrowest widths, which is a real but minor cosmetic tradeoff
against an actual icon-on-top-of-nav-text bug. */
.site-header {
padding-left: 78px;
}
/* Collapsed to logo + hamburger here, the pill would naturally size
to whatever those two need (~315px once the logo is legible-sized)
while the bottom nav's own capsule sizes to its 4 icons (~250px) —
two "floating pills" on the same screen, different widths, reading
as unrelated. Force an identical explicit width (the SAME formula
as bottom-nav.css's own portrait rule, so they resolve to the
literal same pixel value at any given viewport width) and let the
pill's content spread to fill it edge-to-edge instead of bunching
left with dead space on the right. */
.site-header__pill {
width: min(320px, 100% - 32px);
}
/* Real bug, confirmed via getBoundingClientRect: .glass-content has
no width of its own anywhere (glass.css), so as the pill's only
flex child it was shrinking to its OWN content's size (~260px)
instead of filling the pill's explicit 320px, and sitting
flush-left inside the leftover space — a visible dead gap between
the hamburger and the pill's right edge. `width: 100%` here is
safe (no circular-sizing risk) because the pill's width is a
concrete pixel value in this branch, not auto/content-based like
the desktop rule. With this, `justify-content: space-between`
below finally has real room to push logo/hamburger to the two
edges, which also means the hamburger can no longer get pushed
off-screen by a wide logo (the earlier bug that .site-header__
logo-img's 30px mobile height was a workaround for) — the box
itself now always matches the pill, so content just spreads
within it instead of overflowing past it. */
.site-header__pill > .glass-content {
width: 100%;
justify-content: space-between;
/* Tighter than the desktop pill's own padding/gap (which was sized
for logo + full nav + sound toggle) — with only logo+hamburger
left here, that generous spacing was wasted width the logo
could use instead. Freeing it is what makes a real size bump
possible below, instead of trimming the logo down further. */
padding-inline: 14px;
gap: 12px;
}
/* Moved to the bottom app-nav at this breakpoint (bottom-nav.php) —
see header.php's comment. Freeing this ~40px + gap is also what
lets the logo render at a sane size instead of getting squeezed. */
.site-header__sound-toggle--pill {
display: none;
}
/* 32px — bigger than the previous 26px, made possible by trimming
.glass-content's own padding/gap above rather than shrinking the
logo further. The `min(320px, 100% - 32px)` pill-width formula's
"100%" resolves against .site-header's CONTENT box — which the
cord clearance above already shrank by 78px — so the pill is NOT
a flat 320px on an actual phone the way it is at a wider "portrait
tablet" test width: at a real 375px-wide phone it measures ~256px
(confirmed live via getBoundingClientRect). Checked against the
narrower ~355px case too (not just 375px) since that's the
tighter constraint: still real safety margin there. */
.site-header__logo-img {
height: 32px;
}
}
/* Extreme-narrow tier — checked down to 320px CSS width (iPhone SE 1st
gen and similar) since "verified at 375px" isn't the same claim as
"verified at the actual narrowest realistic width," a mistake this
exact spot has made before. 32px overflows there (confirmed live:
-14px clearance), so this steps back down just for ≤340px, while
the more common 355px+ range keeps the bigger 32px above. */
@media (max-width: 340px) and (orientation: portrait) {
.site-header__logo-img {
height: 24px;
}
}
/* Local safety net — see glass-shards.css's identical comment for why
this is redundant-but-cheap alongside base.css's global rule. */
@media (prefers-reduced-motion: reduce) {
.site-header__nav a,
.site-header__nav summary,
.site-header__hamburger-bar,
.site-header__mobile-link,
.site-header__sound-toggle,
.site-header__sound-icon {
transition: none !important;
}
.site-header__sound-icon--on path {
animation: none !important;
opacity: 1 !important;
}
}
/* ---- footer.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
footer.css — Phase 5 site footer. Solid base but NOT flat: a radial
brand-glow sits under the surface color. A plain, usual top border —
the earlier angled clip-path divider was reverted per direction. All
four nav columns (Explore/Legal/Connect) are plain links, same
weight — a footer is wayfinding, not a second CTA bank; "Work with
me" gets a color/weight bump via .site-footer__link--emphasis, not a
button treatment.
*/
.site-footer {
position: relative;
isolation: isolate;
margin-top: var(--space-xl);
overflow: clip;
color: var(--color-ink);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
/* Reserves the fixed back-to-top button's own footprint (see
back-to-top.css's top comment) — kept INSIDE the footer's own
padding box, not as body padding, so .site-footer::before's tinted
glow extends through it instead of exposing the plain page
background as a visibly different shade at the very bottom. */
padding-bottom: calc(48px + 20px + 16px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) and (orientation: portrait) {
.site-footer {
/* Back-to-top is display:none here (back-to-top.css) and
bottom-nav.css's own body padding-bottom reserves space for the
bottom nav bar instead — this footer doesn't need its own. */
padding-bottom: 0;
}
}
.site-footer::before {
/* Brand glow — ties the footer to the palette without being a
decorative card blur; it's a background tint, not a UI surface. */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(60% 140% at 12% 0%, rgba(14, 143, 94, 0.16), transparent 60%),
var(--color-surface);
}
.site-footer__grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
padding-block: var(--space-xl) var(--space-lg);
}
@media (max-width: 860px) {
.site-footer__grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}
.site-footer__col--brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.site-footer__mark {
display: block;
margin-bottom: var(--space-xs);
}
.site-footer__mark img {
width: 44px;
height: 44px;
}
.site-footer__brand-name {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-lead);
font-weight: 500;
color: var(--color-ink);
}
.site-footer__brand-role {
margin: 0;
max-width: 30ch;
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.site-footer__heading {
margin: 0 0 var(--space-xs);
font-family: var(--font-utility);
font-size: var(--step-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.site-footer__col nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.site-footer__col nav a {
display: flex;
align-items: center;
min-height: var(--touch-target-min);
color: var(--color-ink);
text-decoration: none;
font-size: var(--step-body);
transition: color 0.15s ease;
/* Same iOS Safari long-press-preview issue as bottom-nav.css's
.bottom-nav__item — a plain can show a callout menu instead
of navigating on a slightly-too-long tap. */
-webkit-touch-callout: none;
}
.site-footer__col nav a:hover {
color: var(--color-brand-green);
}
/* Active marker — same underline language as the header's active nav
items, not just a hover-only color change. */
.site-footer__col nav a.is-active {
color: var(--color-brand-green);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--color-brand-green);
text-underline-offset: 3px;
}
/* The molten underline/glow itself is .btn--link (buttons.css); this
just keeps the deliberate green→ink color-flip on hover (not a
shade-of-green tweak) — the underline follows via currentColor
since it's drawn from the same property. */
.site-footer__link--emphasis {
align-self: flex-start; /* .site-footer__col nav is a column flexbox (align-items: stretch by
default) — without this, the anchor stretches to the column's full
width, and .btn--link's background-size:100% underline then spans
that whole width instead of just the text, reading as a stray line
disconnected from the label. */
color: var(--color-brand-green) !important;
font-weight: 600;
}
.site-footer__link--emphasis:hover,
.site-footer__link--emphasis:focus-visible {
color: var(--color-ink) !important;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding-block: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.site-footer__credit {
margin: 0;
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.site-footer__credit a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--color-border);
text-underline-offset: 2px;
}
.site-footer__credit a:hover {
color: var(--color-brand-green);
text-decoration-color: currentColor;
}
/* Deploy build badge — deliberately quiet (smaller than the credit
text it sits next to, muted, no border/pill/background) since it's
a diagnostic for the operator, not something a visitor needs to
notice. The title attribute (footer.php) carries the explanation;
nothing here calls attention to it visually. */
.site-footer__version {
font-size: 11px;
color: var(--color-ink-muted);
opacity: 0.6;
cursor: help;
}
.site-footer__socials {
display: flex;
align-items: center;
gap: var(--space-xs);
margin: 0;
padding: 0;
list-style: none;
}
/* CLEAR glass, not the dark-tinted --glass-secondary-bg token (that
tint reads as "shadow" on a dark page, not "glass"). Same translucent
white/brand-green recipe as glass-shards.css's clear-pane look —
bright specular blob + thin bright rim — scaled to icon-button size,
with a soft brand-green glow that blooms in on hover. */
.site-footer__social {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
color: var(--color-ink);
text-decoration: none;
background:
radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.55), transparent 55%),
linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(14, 143, 94, 0.12) 60%, rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.38);
backdrop-filter: blur(6px) saturate(160%);
-webkit-backdrop-filter: blur(6px) saturate(160%);
box-shadow: 0 0 0 0 rgba(14, 143, 94, 0);
transition: color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
}
.site-footer__socials svg {
width: 17px;
height: 17px;
position: relative;
z-index: 1;
}
.site-footer__social:hover {
color: var(--color-brand-green);
border-color: rgba(14, 143, 94, 0.6);
transform: translateY(-2px);
box-shadow:
0 0 16px 4px rgba(14, 143, 94, 0.45),
0 6px 18px rgba(0, 0, 0, 0.25);
}
.site-footer__social-pending {
opacity: 0.4;
cursor: default;
color: var(--color-ink-muted);
}
/* Dark mode specifically: the light-mode tint/border values above read
as near-invisible against the dark page background (too little
contrast between the button's own translucent fill and what's
behind it) — brighten both for dark without touching light, which
already has plenty of contrast against a white/near-white page. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-footer__social {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.5);
background:
radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.4), transparent 55%),
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(14, 143, 94, 0.22) 60%, rgba(255, 255, 255, 0.06));
}
/* The icons currently ON the page are in this pending state (no
FOOTER_SOCIAL_LINKS URL yet) — that's what was actually "hard to
see," not the (not-yet-reachable) linked-state color above. Keep
it visibly distinct from an active icon (still dimmer, still
cursor:default) but make the glyph itself legible against dark. */
:root:not([data-theme="light"]) .site-footer__social-pending {
color: rgba(255, 255, 255, 0.75);
opacity: 0.65;
}
}
:root[data-theme="dark"] .site-footer__social {
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.5);
background:
radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.4), transparent 55%),
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(14, 143, 94, 0.22) 60%, rgba(255, 255, 255, 0.06));
}
:root[data-theme="dark"] .site-footer__social-pending {
color: rgba(255, 255, 255, 0.75);
opacity: 0.65;
}
/* Local safety net — see glass-shards.css's identical comment for why
this is redundant-but-cheap alongside base.css's global rule. */
@media (prefers-reduced-motion: reduce) {
.site-footer__col nav a,
.site-footer__social {
transition: none !important;
}
}
/* ---- back-to-top.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
back-to-top.css — floating action button, bottom-left, primary-tier
Clear Glass (see glass.css). Only shown on non-portrait-mobile/tablet
devices; the fixed bottom nav's own "Top" item covers portrait
mobile/tablet instead. This 900px/portrait breakpoint MUST stay in
sync with header.css's nav-hide breakpoint — both encode the same
"bottom nav is in charge below here" rule.
Non-obstruction: footer.css's .site-footer gets bottom padding
reserving this button's own footprint (48px + its 20px offset + a
little breathing room) so scrolling to the true bottom of a long
page never puts the footer's own copyright row underneath the fixed
button. This used to be an UNSCOPED `body { padding-bottom }` rule
instead — moved onto the footer itself (2026-08-14) because a plain
body background doesn't carry the footer's own tinted
background/glow (.site-footer::before), so that reserved strip
showed as a visibly different, flatter shade right at the bottom of
the page in dark mode. Putting the padding INSIDE the footer's own
padding box means its ::before (inset: 0) naturally extends through
it instead. Scoped to the same breakpoint as the button itself
(see footer.css) — on portrait mobile/tablet, the button is hidden
and bottom-nav.css's own body padding handles that case separately.
*/
.back-to-top {
--glass-radius: 999px;
position: fixed;
left: max(20px, env(safe-area-inset-left, 0px));
bottom: max(20px, env(safe-area-inset-bottom, 0px));
z-index: 45;
width: 48px;
height: 48px;
border-radius: 999px;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
color: var(--color-ink);
}
.back-to-top .glass-content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.back-to-top svg {
width: 20px;
height: 20px;
}
.back-to-top:hover {
color: var(--color-brand-green); /* dark is the default/primary theme */
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .back-to-top:hover {
color: var(--color-brand-green-safe);
}
}
:root[data-theme="light"] .back-to-top:hover {
color: var(--color-brand-green-safe);
}
@media (max-width: 900px) and (orientation: portrait) {
.back-to-top {
display: none !important;
}
}
/* ---- glass-shards.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
glass-shards.css — sitewide floating Clear Glass shards. Small,
clear, unevenly-shaped panes drifting slowly and widely over every
page, fixed to the viewport. Non-interactive by design (drag was
tried and removed — floating alone is the feature). Built from
translucent white/brand-green tints, not new colors.
Layering: fixed + z-index -1. A NEGATIVE z-index is the whole trick —
by the CSS stacking spec, negative-z children paint below their
parent's own in-flow content (text, links, cards), but above that
parent's plain background. Since this partial is included as a direct
child of before header/main/footer, that means shards render
behind literally every real element on the page (any text they'd
otherwise sit under wins automatically, no per-position tuning
needed) while still showing up in the page's empty margins/gutters —
"not obstructive" enforced structurally.
*/
.glass-shards {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.shard {
position: fixed;
display: block;
background:
radial-gradient(120% 120% at 22% 18%, rgba(255, 255, 255, 0.6), transparent 50%),
linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(14, 143, 94, 0.14) 55%, rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(3px) saturate(150%);
-webkit-backdrop-filter: blur(3px) saturate(150%);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
will-change: transform;
animation-name: shard-float;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Each shard wanders a real fraction of the viewport (vw/vh, not fixed
px) across several waypoints rather than jittering ±10px in place —
"moving more freely" means an actual walk, not a shiver. */
@keyframes shard-float {
0% { transform: translate(0, 0) rotate(var(--shard-rot, 0deg)); }
25% { transform: translate(var(--shard-x1, 8vw), var(--shard-y1, -6vh)) rotate(calc(var(--shard-rot, 0deg) + 10deg)); }
50% { transform: translate(var(--shard-x2, -6vw), var(--shard-y2, 9vh)) rotate(calc(var(--shard-rot, 0deg) - 8deg)); }
75% { transform: translate(var(--shard-x3, 10vw), var(--shard-y3, 7vh)) rotate(calc(var(--shard-rot, 0deg) + 4deg)); }
100% { transform: translate(0, 0) rotate(var(--shard-rot, 0deg)); }
}
/* Sizes are one third of the original set. */
.shard-1 {
top: 9%; left: 7%;
width: 16px; height: 16px;
clip-path: polygon(20% 0%, 100% 15%, 85% 100%, 0% 75%);
--shard-rot: -12deg;
--shard-x1: 10vw; --shard-y1: -8vh;
--shard-x2: 4vw; --shard-y2: 14vh;
--shard-x3: 16vw; --shard-y3: 4vh;
animation-duration: 34s;
animation-delay: -2s;
}
.shard-2 {
top: 16%; right: 12%;
width: 21px; height: 21px;
clip-path: polygon(0% 20%, 70% 0%, 100% 60%, 40% 100%, 0% 80%);
--shard-rot: 20deg;
--shard-x1: -12vw; --shard-y1: 8vh;
--shard-x2: -20vw; --shard-y2: -5vh;
--shard-x3: -8vw; --shard-y3: 12vh;
animation-duration: 42s;
animation-delay: -9s;
}
.shard-3 {
top: 46%; left: 15%;
width: 11px; height: 11px;
clip-path: polygon(10% 0%, 100% 25%, 75% 100%, 0% 90%);
--shard-rot: 8deg;
--shard-x1: 14vw; --shard-y1: 10vh;
--shard-x2: 22vw; --shard-y2: -6vh;
--shard-x3: 9vw; --shard-y3: -14vh;
animation-duration: 27s;
animation-delay: -5s;
}
.shard-4 {
top: 58%; right: 22%;
width: 15px; height: 15px;
clip-path: polygon(0% 0%, 100% 10%, 90% 100%, 15% 85%);
--shard-rot: -18deg;
--shard-x1: -16vw; --shard-y1: -10vh;
--shard-x2: -6vw; --shard-y2: -18vh;
--shard-x3: -20vw; --shard-y3: 6vh;
animation-duration: 38s;
animation-delay: -12s;
}
.shard-5 {
bottom: 22%; left: 9%;
width: 13px; height: 13px;
clip-path: polygon(15% 0%, 100% 30%, 80% 100%, 0% 60%);
--shard-rot: 15deg;
--shard-x1: 12vw; --shard-y1: -12vh;
--shard-x2: 18vw; --shard-y2: -20vh;
--shard-x3: 6vw; --shard-y3: -8vh;
animation-duration: 30s;
animation-delay: -7s;
}
.shard-6 {
bottom: 8%; right: 6%;
width: 19px; height: 19px;
clip-path: polygon(0% 15%, 60% 0%, 100% 70%, 45% 100%, 0% 55%);
--shard-rot: -6deg;
--shard-x1: -10vw; --shard-y1: -14vh;
--shard-x2: -18vw; --shard-y2: -24vh;
--shard-x3: -7vw; --shard-y3: -10vh;
animation-duration: 46s;
animation-delay: -14s;
}
.shard-7 {
top: 33%; right: 38%;
width: 7px; height: 7px;
clip-path: polygon(25% 0%, 100% 40%, 60% 100%, 0% 70%);
--shard-rot: 30deg;
--shard-x1: 9vw; --shard-y1: 11vh;
--shard-x2: -11vw; --shard-y2: 16vh;
--shard-x3: 5vw; --shard-y3: 22vh;
animation-duration: 25s;
animation-delay: -3s;
opacity: 0.55;
}
/* Small viewports: fewer, smaller shards — still safe (negative
z-index) at any size, this is purely about not over-decorating a
screen that's mostly text edge-to-edge. */
@media (max-width: 640px) {
.shard-2, .shard-4, .shard-7 {
display: none;
}
.shard-1, .shard-3, .shard-5, .shard-6 {
width: 10px;
height: 10px;
}
}
/* Local safety net — base.css's global `*` rule already zeroes
animation-duration/iteration-count sitewide, so this is redundant in
practice, but an explicit local guard means the float stops even if
that global rule is ever scoped down later. */
@media (prefers-reduced-motion: reduce) {
.shard {
animation: none;
}
}
/* ---- cursor-fx.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
cursor-fx.css — the reticle cursor-follower. Fixed, 26px box, moved
via translate3d in cursor-fx.js (transform only — GPU-cheap, no
layout thrash). Hidden by default; JS adds .is-active once it has a
real mouse position, and .is-hover while over an interactive element.
Themed per mode (not just recolored):
- Dark (default/primary): a soft glowing filled center dot + a thin
outer ring — reads well against a dark page.
- Light (opt-in): a crisp plain outline only, no glow — a glow blooms
into a muddy halo on a white background, so light mode drops it
rather than fight that.
*/
.cursor-fx {
position: fixed;
top: 0;
left: 0;
width: 26px;
height: 26px;
margin-left: -13px;
margin-top: -13px;
pointer-events: none;
z-index: 60; /* above page content, below nothing critical — purely decorative */
opacity: 0;
transition: opacity 0.2s ease;
will-change: transform;
}
.cursor-fx.is-active {
opacity: 1;
}
/* Scale-on-hover is applied by cursor-fx.js as part of the same
translate3d() string it already sets every frame — an inline
style always wins over a class rule here, so a separate
`.is-hover { transform: ... }` rule would silently never apply. */
.cursor-fx__corner {
position: absolute;
width: 7px;
height: 7px;
border: 1.5px solid var(--color-brand-green);
opacity: 0.85;
}
.cursor-fx__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.cursor-fx__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.cursor-fx__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.cursor-fx__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }
.cursor-fx__dot {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
border-radius: 999px;
background: var(--color-brand-green);
}
/* ---- Dark mode: glow ---- */
.cursor-fx__dot {
box-shadow: 0 0 8px 2px rgba(14, 143, 94, 0.6);
}
.cursor-fx.is-hover .cursor-fx__dot {
box-shadow: 0 0 12px 3px rgba(14, 143, 94, 0.8);
}
/* ---- Light mode: crisp, no glow ---- */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .cursor-fx__dot {
box-shadow: none;
}
:root:not([data-theme="dark"]) .cursor-fx__corner {
border-color: var(--color-brand-green-safe);
opacity: 1;
}
}
:root[data-theme="light"] .cursor-fx__dot {
box-shadow: none;
}
:root[data-theme="light"] .cursor-fx__corner {
border-color: var(--color-brand-green-safe);
opacity: 1;
}
/* Reduced motion / touch: cursor-fx.js never adds .is-active in these
cases, but belt-and-suspenders — force it invisible regardless. */
@media (prefers-reduced-motion: reduce) {
.cursor-fx {
display: none !important;
}
}
/* ---- bottom-nav.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
bottom-nav.css — the "Floating Capsule" bottom nav. Portrait
mobile/tablet ONLY — hidden everywhere else, same 900px/portrait
breakpoint as header.css/back-to-top.css (all three encode the same
"who's in charge of navigation here" rule; keep them in sync).
Secondary-tier Clear Glass (see glass.css) — plain thin border, real
blur, no chromatic rim (that technique was retired sitewide, see
[[feedback_liquid_glass_technique]] in project memory).
Non-obstruction: gets extra bottom padding, scoped to the
same breakpoint this nav shows in, sized to the nav's own reserved
footprint — so scrolling all the way down on a portrait device
always clears the footer's own content above the fixed bar, never
underneath it. If the item height/padding/bottom-offset numbers
below ever change, the body padding-bottom sum at the end of this
file MUST change with them.
*/
.bottom-nav {
--glass-radius: 999px;
display: none; /* shown only inside the breakpoint below */
position: fixed;
left: 50%;
bottom: max(16px, env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 46;
max-width: calc(100% - 32px); /* floats clear of both screen edges, never flush */
border-radius: 999px; /* the actual fix — --glass-radius alone did nothing;
glass.css's ::before reads the element's own border-radius via
`inherit`, not the custom property, so the outer capsule was
rendering square while each item stayed pill-shaped individually.
Same treatment as .site-header__pill now, genuinely synced. */
}
.bottom-nav .glass-content {
display: flex;
align-items: center;
gap: 4px;
padding: 6px;
}
.bottom-nav__item {
display: flex;
align-items: center;
gap: 6px;
min-width: 44px;
min-height: 44px;
padding-inline: 11px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--color-ink-muted);
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition: color 0.2s ease, background-color 0.2s ease;
/* Real bug, found post-launch (2026-08-24) — reported as the bottom
nav's label text getting cut off on a real mobile device (not
reproducible in this project's own test tooling). At the time
each item still had a hover/active label-reveal span (since
removed — see the comment where .bottom-nav__label used to be
defined, below), and nothing declared flex-shrink, so the flex
row was free to silently squeeze an item below its content width
the moment a label expanded. The label itself is gone now
(icon-only, permanently), but flex-shrink: 0 stays as a correct
defensive default regardless. */
flex-shrink: 0;
/* Explicit, not assumed — without this, some mobile browsers hold a
tap briefly to disambiguate it from the start of a double-tap-to-
zoom gesture before firing the real click, which can read as "the
first tap did nothing." Belt-and-suspenders alongside the
width=device-width viewport meta tag (head-meta.php), which
already disables that gesture site-wide in evergreen browsers. */
touch-action: manipulation;
/* iOS Safari specifically: an (unlike a ) shows a
long-press preview/context menu (Open, Copy Link, etc.) by
default — if a tap lands even slightly like a long-press, the
menu appears instead of navigating, and the real navigation only
happens on a second, cleaner tap. Home/Archive here are real
tags while Categories/Sound/Top are s, which never get
this treatment — a plausible explanation for taps on the first
two needing to be repeated. Harmless on the button items too. */
-webkit-touch-callout: none;
}
.bottom-nav__item svg {
width: 20px;
height: 20px;
flex: none;
}
/* The sound-toggle item reuses header.css's crossfading on/off icon
pair (.site-header__sound-icon) instead of a single static svg —
same visual language as the header's own mute button, just sized
to match this row's 20px icons. */
.bottom-nav__sound-icons {
position: relative;
width: 20px;
height: 20px;
flex: none;
}
.bottom-nav__sound-icons .site-header__sound-icon {
width: 20px;
height: 20px;
}
/* .bottom-nav__label (the hover/active label-reveal span) REMOVED
2026-08-24 — real bug reported post-launch (text clipping on a real
mobile device, not reproducible in this project's own test tooling)
led first to a defensive fix (flex-shrink: 0 above, a bigger max-
width, an ellipsis fallback), then a simpler direct instruction:
drop the label entirely, icon-only is sufficient. The markup no
longer emits the span at all (templates/partials/bottom-nav.php) —
every item still carries a real `aria-label` for the accessible
name. Only the color/background hover-and-active state remains.
No text-clipping class of bug can recur here — the "flex-shrink:0
found missing while investigating an unreproducible max-width
squeeze" lesson stays live above though, since that's a correct
defensive pattern independent of this specific label. */
.bottom-nav__item.is-active,
.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
color: var(--color-brand-green);
background: rgba(14, 143, 94, 0.14);
}
@media (max-width: 900px) and (orientation: portrait) {
.bottom-nav {
display: block;
/* Same explicit width, same formula, as header.css's portrait rule
for .site-header__pill — the two floating pills on this screen
are meant to read as one system, not two coincidentally-similar
capsules. */
width: min(320px, 100% - 32px);
}
.bottom-nav .glass-content {
justify-content: space-between;
}
body {
/* item min-height(44) + glass-content padding(6+6) + nav bottom
offset(16) + a little breathing room, plus the safe-area inset. */
padding-bottom: calc(44px + 12px + 16px + 12px + env(safe-area-inset-bottom, 0px));
}
}
/* ---- Category sheet — opens from the bottom nav's Categories
button (bottom-nav.php/bottom-nav.js). A real bottom sheet, not a
dead link: dedicated per-category pages don't exist as content yet,
so every card here jumps into the real /blog-archive/ page's matching
section instead (#slug anchors — see archive-listing.php's row
ids). Solid tinted surfaces throughout, no backdrop-filter — same
page-wide reasoning as the Breakout game modal and the FAQ items. */
.category-sheet {
position: fixed;
inset: 0;
z-index: 250; /* above the bottom nav (46) and the theme-cord (210), below the game modal (300) */
display: flex;
align-items: flex-end;
justify-content: center;
}
.category-sheet[hidden] {
display: none;
}
.category-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 8, 9, 0.7);
opacity: 0;
transition: opacity 0.25s ease;
}
.category-sheet__panel {
position: relative;
width: 100%;
max-width: 480px;
max-height: min(78vh, 640px);
overflow-y: auto;
padding: var(--space-sm) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
border: 1px solid var(--color-border);
border-bottom: none;
border-radius: 22px 22px 0 0;
background: var(--color-surface);
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.category-sheet.is-open .category-sheet__backdrop {
opacity: 1;
}
.category-sheet.is-open .category-sheet__panel {
transform: translateY(0);
}
.category-sheet__handle {
width: 36px;
height: 4px;
margin: 0 auto var(--space-sm);
border-radius: 999px;
background: var(--color-border);
}
.category-sheet__head {
position: relative;
margin-bottom: var(--space-md);
padding-right: 40px;
}
.category-sheet__title {
margin: 4px 0 0;
font-family: var(--font-display);
font-size: var(--step-h3);
font-weight: 500;
}
.category-sheet__close {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border);
border-radius: 8px;
background: transparent;
color: var(--color-ink-muted);
cursor: pointer;
}
.category-sheet__close svg {
width: 16px;
height: 16px;
}
.category-sheet__close:hover,
.category-sheet__close:focus-visible {
color: var(--color-brand-green);
border-color: rgba(14, 143, 94, 0.55);
}
/* Single column, not the earlier 2-column grid — real bug, confirmed
live: at 2 columns each card was only ~220px wide (480px panel /
2), which wrapped "Workflow Optimization" (nav_label,
config/site.config.php) onto two lines. One column gives every
card the panel's near-full ~430px width, comfortably fitting any
category name on one line, current or future, without needing a
number re-tuned per label. */
.category-sheet__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.category-sheet__card-name {
white-space: nowrap;
}
.category-sheet__card {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--space-sm) var(--space-md);
border-radius: 16px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 70%, var(--color-brand-green) 6%);
color: inherit;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.category-sheet.is-open .category-sheet__card {
animation: category-card-in 0.35s ease-out forwards;
animation-delay: calc(var(--i, 0) * 0.06s);
}
.category-sheet__card:hover,
.category-sheet__card:focus-visible {
border-color: rgba(14, 143, 94, 0.55);
transform: translateY(-2px);
}
.category-sheet__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(14, 143, 94, 0.14);
color: var(--color-brand-green);
}
.category-sheet__card-icon svg {
width: 18px;
height: 18px;
}
.category-sheet__card-name {
font-family: var(--font-display);
font-size: var(--step-body);
font-weight: 500;
}
.category-sheet__card-desc {
font-size: 12px;
line-height: 1.4;
color: var(--color-ink-muted);
}
@keyframes category-card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.bottom-nav__item {
transition: none !important;
}
.category-sheet__backdrop,
.category-sheet__panel,
.category-sheet__card {
transition: none !important;
animation: none !important;
}
.category-sheet.is-open .category-sheet__card {
opacity: 1 !important;
transform: none !important;
}
}
/* ---- theme-toggle.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
theme-toggle.css — the pull-cord light/dark toggle. Fixed to the
viewport top, present at every screen size (unlike the bottom nav/
back-to-top, this isn't breakpoint-gated — "on all kinds of devices/
screen sizes"). z-index 210, above the header's own 200 (see
header.css's comment on why the header needed that) and everything
else fixed on the page — it's a persistent global control.
The knob starts at its CSS rest position (translate(0,34px), matching
REST_Y in theme-toggle.js) so it's in the right place even before JS
runs; the script takes over from there every frame.
*/
.theme-cord {
position: fixed;
top: 0;
/* Left, not right — the mobile drawer's × close button pins itself
to top-right (see header.css), and both are persistent/high
z-index fixed elements, so sharing a corner meant they overlapped
whenever the drawer was open. Top-left is empty at every
breakpoint (the header pill is centered). */
left: max(28px, env(safe-area-inset-left, 0px));
width: 40px;
height: 150px; /* tall enough for REST_Y(56) + the drag pull range */
z-index: 210;
pointer-events: none;
}
.theme-cord__rope {
position: absolute;
inset: 0;
overflow: visible;
pointer-events: none;
}
.theme-cord__rope path {
stroke: var(--color-border);
}
.theme-cord__knob {
--glass-radius: 999px;
position: absolute;
left: 50%;
top: 0;
width: 44px;
height: 44px;
margin-left: -22px;
/* Real size is 44px (matches the touch-target-min used sitewide —
back-to-top is 48px, footer socials are 40px — 44 fits right in),
NOT the 26px this was first written with: base.css's generic
`button { min-width/min-height: 44px }` accessibility rule was
silently overriding an explicit 26px width/height, so the actual
rendered knob was already 44px while the JS math assumed a 13px
radius — that mismatch was the real source of the visible gap
between the rope and the bead, not just a rope-endpoint bug.
34 = REST_Y(56) - KNOB_R(22): this is the static fallback shown
before JS's own render() call overrides it, so it must use the
same center-alignment math or there'd be a 1-frame jump. REST_Y
itself was dropped from 90 to 56 separately — see theme-toggle.js —
to stop the knob sitting on top of page H1s on some layouts. */
transform: translate(0, 34px);
border: none;
border-radius: 999px;
padding: 0;
cursor: grab;
pointer-events: auto;
color: var(--color-brand-green);
touch-action: none; /* dragging owns vertical touch gestures on the knob itself */
will-change: transform;
}
.theme-cord__knob:active {
cursor: grabbing;
}
.theme-cord__knob:hover,
.theme-cord__knob:focus-visible {
color: var(--color-ink);
}
.theme-cord__knob .glass-content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.theme-cord__icon {
width: 18px;
height: 18px;
}
/* Icon shows the CURRENT theme (sun when light is active, moon when
dark is) — same three-way dark-default/light-opt-in pattern as the
header logo swap. */
.theme-cord__icon--sun {
display: none;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-cord__icon--moon { display: none; }
:root:not([data-theme="dark"]) .theme-cord__icon--sun { display: block; }
}
:root[data-theme="light"] .theme-cord__icon--moon { display: none; }
:root[data-theme="light"] .theme-cord__icon--sun { display: block; }
/* The theme cross-fade itself (View Transitions API, triggered from
theme-init.js). Custom duration/easing instead of the browser
default so it reads as a deliberate "scene change," not a flicker. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
.theme-cord__knob {
transition: none !important;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
/* ---- homepage-intro.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
homepage-intro.css — the single identity card that opens the
homepage (see homepage-intro.php). Single-column text now — the
earlier side-by-side text+portrait layout is gone along with the
Game of Life; the wireframe globe (assets/js/hero-globe-bg.js) runs
as a full-bleed background layer behind the text instead of sharing
a row with it.
*/
.intro {
--glass-radius: 24px;
position: relative;
border-radius: 24px;
/* No overflow: hidden — hero-globe-bg.js fits the sphere fully
inside the card on both axes (see its own comment), so nothing
should ever overflow. Deliberately not relying on clipping to
enforce that: overflow:hidden + a WebGL canvas + border-radius is
a known WebKit/mobile combo that fails to re-clip correctly
during scroll — confirmed live as a white "ghost" box appearing
below the card while scrolling on mobile/tablet. */
margin-block: var(--space-lg) var(--space-xl);
}
.intro__layout {
padding: var(--space-lg);
}
@media (max-width: 640px) {
.intro__layout {
padding: var(--space-md);
}
}
/* Wireframe scan-reveal globe, full-bleed behind the text. Sits above
the card's own glass-primary::before tint (glass.css) in DOM order
but below .glass-content (z-index: 1 there) — low opacity so the
green wireframe/solid reads as background texture, not something
competing with the headline for attention. */
.intro__globe-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Desktop/laptop/widescreen only: anchor the globe's mount to the
card's right side instead of stretching full-width behind the text
— per direct feedback, centering it across the whole (very wide)
card read as unnecessarily centered rather than intentionally
placed. hero-globe-bg.js reads this element's own width/height for
its camera fit, so shrinking it here is enough on its own — no JS
change needed, and the fit-both-axes math (see hero-globe-bg.js)
still guarantees nothing clips inside this smaller box. Left full-
width on tablet/mobile, where there's no spare horizontal room to
separate it from the text anyway. */
@media (min-width: 900px) {
.intro__globe-bg {
left: auto;
width: min(48%, 460px);
}
}
.intro__globe-canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease;
}
.intro__globe-bg--live .intro__globe-canvas {
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
.intro__globe-canvas {
transition: none !important;
}
}
.intro__text {
position: relative;
max-width: 62ch;
}
.intro__eyebrow {
margin: 0;
font-family: var(--font-utility);
font-size: var(--step-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-brand-green);
}
.intro__title {
margin: 6px 0 var(--space-sm);
font-family: var(--font-display);
font-size: var(--step-h2);
font-weight: 500;
line-height: 1.15;
}
.intro__bio {
margin: 0 0 var(--space-xs);
max-width: 58ch;
color: var(--color-ink-muted);
}
@media (max-width: 640px) {
.intro__bio {
max-width: none;
}
}
.intro__stat {
margin: 0 0 var(--space-sm);
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.intro__stat strong {
color: var(--color-brand-green);
font-family: var(--font-display);
}
.intro__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
/* ---- homepage-archive-preview.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
homepage-archive-preview.css — shared by the homepage's flat "Latest
posts" 2x2 grid (homepage-archive-preview.php) and the full
per-category rows on /blog-archive/ (archive-page.php) — both
include archive-listing.php for the actual card markup. Uses the
shared .section-head component (base.css) for its own heading.
*/
.archive-preview {
margin-block: var(--space-xl);
scroll-margin-top: var(--space-lg); /* so #latest-posts doesn't land flush under the fixed header on anchor-scroll */
}
/* The homepage's own "Browse the full archive" link, replacing the
per-category "View all X posts" links that don't apply to a flat
grid — .section-head (base.css) is a plain block shared by other
homepage sections with no link of their own, so this stays scoped
here rather than changing that shared component. */
.archive-preview .section-head__link {
display: inline-flex;
margin-top: var(--space-sm);
font-family: var(--font-utility);
font-size: var(--step-caption);
}
.archive-preview__row {
margin-bottom: var(--space-lg);
scroll-margin-top: calc(var(--space-lg) + 60px); /* clears the fixed header/bottom-nav on #slug anchor-scroll from the category sheet */
}
.archive-preview__row-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
flex-wrap: wrap;
}
.archive-preview__row-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-h3);
font-weight: 500;
}
/* Per direct feedback (2026-08-20): each category row heading on
/blog-archive/ gets its own color, not the same brand green
repeated six times — real visual distinction scanning down a long
page of category rows, not just the icon/name changing. Signal
Emerald itself is deliberately monochrome (see
branding/colors/signal-emerald.md — "the site moved 100% to
Clear Glass... single brand hue"), so this is a small, scoped
extension for large-text headings only (WCAG's 3:1 large-text
threshold, not the stricter 4.5:1 body-text rule these row titles
don't need to clear) — every other heading/link sitewide stays
plain brand green, unaffected. Order matches CATEGORIES' own
insertion order (config/site.config.php), so a row's color stays
stable as long as that order doesn't change; nth-of-type is safe
here since .archive-preview__row-title only ever appears in this
one grouped context (the homepage's own "Latest posts" grid is
flat now, no row titles at all). */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(1) .archive-preview__row-title { color: #13A876; } /* AI Blogs — emerald */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(2) .archive-preview__row-title { color: #C79A3E; } /* Workflow Optimization Blogs — amber */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(3) .archive-preview__row-title { color: #4E9BD1; } /* Windows Blogs — sky blue */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(4) .archive-preview__row-title { color: #D1724E; } /* Linux Blogs — burnt orange */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(5) .archive-preview__row-title { color: #8F7AD9; } /* Self-Hosting Blogs — violet */
.archive-page__body ~ .archive-preview .archive-preview__row:nth-of-type(6) .archive-preview__row-title { color: #D1608F; } /* Tech Journey Blogs — rose */
/* Color/underline hover now comes from .btn--link (buttons.css) — this
just fits it into the row-head's layout. */
.archive-preview__row-link {
font-family: var(--font-utility);
font-size: var(--step-caption);
white-space: nowrap;
}
.archive-preview__cards {
display: grid;
gap: var(--space-sm);
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
/* The homepage's flat "Latest posts" grid — exactly 2 columns (a
real 2x2 for 4 cards), not the per-category rows' auto-fit flow
above. Comes after that rule so it wins at equal specificity.
Single column under 560px, same breakpoint reasoning as this
card's own min-width elsewhere on the site. */
.archive-preview__cards--flat {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
.archive-preview__cards--flat {
grid-template-columns: 1fr;
}
}
/* Hover: a real Clear Glass response (the tint's own border/blur
tokens brighten — not a fake color swap) plus a "targeting
reticle" of four corner brackets and a one-shot scanline, echoing
the scan/reveal language used elsewhere on the homepage. These
cards aren't links yet (no real posts to point at), so the effect
is polish, not a click affordance — hence aria-hidden on every
decorative element. */
.archive-card {
--glass-radius: 14px;
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
transition: transform 0.25s ease;
/* A real card is an now (archive-listing.php), an for
pure placeholders — reset link styling for the former so both
render identically; nothing here should look like default browser
link text since the whole card is the click target. */
color: inherit;
text-decoration: none;
}
.archive-card:hover {
transform: translateY(-4px);
--glass-secondary-border: rgba(14, 143, 94, 0.6);
--glass-secondary-blur: 11px;
}
/* ---- Featured image (dummy for now — see archive-listing.php's
iitc_render_card_thumb()) — a "circuit board" panel instead of a
stock photo: PCB-trace lines, the category's own icon glowing at
the center like a chip, a monospace HUD tag. Real inline SVG, not
a raster placeholder, so it inherits currentColor/theme tokens like
any other on-brand graphic and costs zero image requests. ---- */
.archive-card__thumb {
display: block;
aspect-ratio: 16 / 9;
color: var(--color-brand-green);
}
/* A real 's 1120px container so these
sections read as distinct panel strips, per direct feedback ("make
this entire section full width"). NO margin at all — every bit of
breathing room is the band's OWN padding-block, so a boundary
between two adjacent bands is always bounded by a visible border on
both sides, never a floating unbordered gap. (Two earlier attempts
— a decorative divider between sections, then a margin-bottom-only
approach — both still left "unnecessary big gaps" per direct
feedback; padding-block was xl, up to 80px, stacking with the next
band's own xl top padding for up to ~160px of dead-feeling space.
Turned down to space-lg here for exactly that reason.) Content
inside is re-centered via .container (base.css). */
.explore-services {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding-block: var(--space-lg);
background:
radial-gradient(ellipse 60% 100% at 85% 0%, rgba(14, 143, 94, 0.07), transparent 70%),
var(--color-surface);
border-block: 1px solid var(--color-border);
}
.explore-audience {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding-block: var(--space-lg);
background:
radial-gradient(ellipse 60% 100% at 15% 0%, rgba(14, 143, 94, 0.08), transparent 70%),
var(--color-surface);
border-block: 1px solid var(--color-border);
}
/* ---- Terminal block ----
Deliberately theme-INDEPENDENT — always dark, like a real terminal,
regardless of the site's light/dark mode. Fix for a real contrast
bug: this block used to mix --color-surface (which flips to white
in light mode) with a fixed-dark COLOR_SUPPORT tint, while its text
used --color-ink/--color-ink-muted (which ALSO flip, to near-black,
assuming a light background) — in light mode that produced dark
text on a background that was no longer reliably dark, sometimes
unreadable. Redeclaring the ink/border tokens locally, scoped to
.terminal, means every descendant that reads var(--color-ink) etc.
automatically gets the fixed dark-mode values instead, with zero
changes needed to the child rules themselves. */
.terminal {
--color-ink: #D8DEDA;
--color-ink-muted: #8FA69A;
--color-border: #26312B;
width: 100%;
border-radius: 16px;
border: 1px solid var(--color-border);
background: #0F1713;
box-shadow: var(--glass-shadow);
}
.terminal__body {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--space-lg);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--step-body);
}
.terminal__titlebar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.terminal__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-border);
}
.terminal__dot--a { background: #E4664A; }
.terminal__dot--b { background: #E4B14A; }
.terminal__dot--c { background: var(--color-brand-green); }
.terminal__filename {
margin-left: 8px;
color: var(--color-ink-muted);
font-size: 11px;
letter-spacing: 0.03em;
}
.terminal__line {
position: relative;
color: var(--color-ink-muted);
line-height: 1.6;
opacity: 0;
transform: translateX(-8px);
animation: terminal-boot-in 0.4s ease-out forwards;
animation-delay: calc(var(--i, 0) * 0.35s);
}
.terminal__line--cmd {
color: var(--color-ink);
}
.terminal__cursor {
display: inline-block;
width: 8px;
height: 1em;
margin-left: 4px;
vertical-align: text-bottom;
background: var(--color-brand-green);
animation: terminal-blink 1s step-end infinite;
}
.terminal__link {
align-self: flex-start;
margin-top: 4px;
color: var(--color-brand-green);
font-family: var(--font-utility);
text-decoration: none;
opacity: 0;
transform: translateX(-8px);
animation: terminal-boot-in 0.4s ease-out forwards;
animation-delay: calc(var(--i, 0) * 0.35s);
}
/* Hover styling (underline/glow) now comes from .btn--link (buttons.css). */
@keyframes terminal-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
@keyframes terminal-boot-in {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
/* Slow ambient scanline across the whole terminal — plays
continuously, low-opacity, GPU-cheap (transform + opacity only, no
extra blur layer — see the backdrop-filter budget note above). */
.terminal__scan {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(14, 143, 94, 0.08), transparent);
transform: translateY(-100%);
animation: terminal-scan-sweep 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes terminal-scan-sweep {
0% { transform: translateY(-100%); }
50% { transform: translateY(250%); }
100% { transform: translateY(-100%); }
}
/* ---- Services pipeline diagram ---- */
.explore-services__lede {
max-width: 68ch;
color: var(--color-ink-muted);
}
.pipeline {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-lg) 0;
}
@media (max-width: 700px) {
.pipeline {
flex-direction: column;
align-items: stretch;
}
}
.pipeline__node {
flex: 1;
position: relative;
padding: var(--space-md);
border-radius: 16px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 70%, var(--color-brand-green) 6%);
}
.pipeline__node--end {
border-color: rgba(14, 143, 94, 0.5);
}
.pipeline__node-label {
display: block;
font-family: var(--font-display);
font-size: var(--step-lead);
font-weight: 500;
margin-bottom: 4px;
}
.pipeline__node-desc {
display: block;
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.pipeline__connector {
flex: none;
width: 48px;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--color-brand-green) 0 6px, transparent 6px 12px);
background-size: 24px 2px;
animation: pipeline-flow 1.2s linear infinite;
}
@media (max-width: 700px) {
.pipeline__connector {
width: 2px;
height: 24px;
margin-inline: auto;
background-image: repeating-linear-gradient(180deg, var(--color-brand-green) 0 6px, transparent 6px 12px);
background-size: 2px 24px;
animation: pipeline-flow-vertical 1.2s linear infinite;
}
}
@keyframes pipeline-flow {
to { background-position: 24px 0; }
}
@keyframes pipeline-flow-vertical {
to { background-position: 0 24px; }
}
.explore-services__cta {
margin-top: var(--space-md);
}
@media (prefers-reduced-motion: reduce) {
.terminal__cursor {
animation: none !important;
opacity: 1;
}
.terminal__line,
.terminal__link {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.terminal__scan {
animation: none !important;
display: none;
}
.pipeline__connector {
animation: none !important;
}
}
/* ---- homepage-craft.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
homepage-craft.css — "How this actually gets written" section
layout. Single-column text (like homepage-explore.css's
.explore-services), not a second two-column glass+text block — the
shared "broken glass" panel (shatter-glass.css) sits as a small
corner accent behind the heading instead, mirrored horizontally via
`transform: scaleX(-1)` so it doesn't read as a copy-pasted repeat
of homepage-journey.css's own panel.
*/
.craft {
margin-block: var(--space-xl);
}
.craft__inner {
position: relative;
}
.craft__shatter {
position: absolute;
top: -12px;
right: 0;
width: min(200px, 40vw);
aspect-ratio: 1;
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--color-border);
transform: scaleX(-1);
opacity: 0.9;
z-index: 0;
}
.craft__shatter-svg {
display: block;
width: 100%;
height: 100%;
}
/* On narrow screens the corner panel has no room beside the heading
text without crowding it — drop it rather than let it collide with
the read, per the explicit "not obstructing the read" requirement. */
@media (max-width: 640px) {
.craft__shatter {
display: none;
}
}
/* Explicit reserved space matching the panel's own footprint, not a
ch-based max-width guess — at some in-between viewport widths a
character-count estimate and the panel's actual min(200px, 40vw)
box can disagree enough to overlap by a few pixels. This can't.
Real bug, confirmed live via getBoundingClientRect at 700px width:
an earlier version only reserved this space on .section-head, not
.craft__body — a short one-line heading left the panel's full
~200px height still overlapping the body paragraph directly below
it. Both need the reservation, not just the heading. */
.craft .section-head {
position: relative;
z-index: 1;
padding-right: min(220px, 42vw);
}
.craft__body {
position: relative;
z-index: 1;
max-width: 72ch;
padding-right: min(220px, 42vw);
color: var(--color-ink-muted);
}
@media (max-width: 640px) {
.craft .section-head,
.craft__body {
padding-right: 0;
}
}
/* ---- homepage-faq.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
homepage-faq.css — the FAQ accordion. Same details/summary +
real-DOM [+]/[–] indicator pattern as header.css's category
dropdown.
NO backdrop-filter here on purpose — see homepage-explore.css's top
comment on the page's backdrop-filter budget. Each faq-item uses a
solid tinted background + an animated left accent bar instead of
glass, which is what keeps it actually painting after 20+ other
Clear Glass layers earlier on this same page.
*/
/* Plain contained section — NOT a full-bleed tinted band. That
treatment (100vw + padding-block + its own background/border) was
tried and is what kept producing a reported "unnecessary big gap"
right before the footer, however much the padding got turned down:
a boxed section with visible top/bottom borders and a tinted
background inherently reads as "space", even when the numbers are
modest. Matches homepage-about.css's .about-strip pattern instead —
a plain top border for the "new section" cue, everything else is
just normal document flow straight into the footer.
margin-TOP only, no margin-bottom — confirmed via DevTools that
.site-footer (footer.css) already carries its own sitewide
margin-top: var(--space-xl). This is the LAST homepage section, so
adding a matching bottom margin here just doubled that same gap
again, the identical stacking bug as the earlier full-bleed bands,
just from a sitewide rule this time instead of another homepage
partial. Not touching footer.css itself since other pages (About,
Contact, posts) rely on that margin as their only pre-footer
spacing. */
.homepage-faq {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
}
.homepage-faq__layout {
display: flex;
align-items: center;
gap: var(--space-xl);
}
@media (max-width: 860px) {
.homepage-faq__layout {
flex-direction: column;
align-items: stretch;
}
}
.homepage-faq__main {
flex: 1;
min-width: 0;
}
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 820px;
}
/* ---- Second "game-like thing" — a self-playing brick-breaker,
vertically centered against the FAQ list via the layout's own
align-items: center. No caption, no score display, purely ambient —
see the top-of-file comment. The expand button opens a real,
player-controlled version in .game-modal (below). ---- */
.homepage-faq__game {
position: relative;
flex: none;
display: flex;
justify-content: center;
}
@media (max-width: 860px) {
.homepage-faq__game {
margin-top: var(--space-lg);
}
}
.game-breakout-frame {
width: 200px;
height: 240px;
border-radius: 16px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 60%, var(--color-brand-green) 8%);
box-shadow: var(--glass-shadow);
overflow: hidden;
}
.game-breakout-canvas {
display: block;
width: 100%;
height: 100%;
}
.game-breakout-expand {
position: absolute;
top: 8px;
right: calc(50% - 100px + 8px); /* frame is centered + fixed 200px wide */
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
color: var(--color-ink-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.game-breakout-expand svg {
width: 15px;
height: 15px;
}
.game-breakout-expand:hover,
.game-breakout-expand:focus-visible {
color: var(--color-brand-green);
border-color: rgba(14, 143, 94, 0.55);
transform: scale(1.06);
}
/* ---- Full playable game modal — a real, player-controlled Breakout,
separate from the ambient board above (assets/js/breakout-game.js).
Fixed dark backdrop + a centered "boxed" panel (not the native
Fullscreen API — that needs a permission gesture and has patchy
mobile support; a full-viewport overlay reads as "full screen" to a
visitor without either problem). Solid backgrounds throughout, no
backdrop-filter — same page-wide reasoning as everywhere else here. */
.game-modal {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
background: rgba(4, 8, 9, 0.78);
}
.game-modal[hidden] {
display: none;
}
.game-modal__box {
width: 100%;
max-width: 420px;
border-radius: 18px;
border: 1px solid var(--color-border);
background: var(--color-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.game-modal__hud {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.game-modal__stat strong {
color: var(--color-brand-green);
font-weight: 600;
}
.game-modal__close {
margin-left: auto;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-ink-muted);
cursor: pointer;
}
.game-modal__close svg {
width: 16px;
height: 16px;
}
.game-modal__close:hover,
.game-modal__close:focus-visible {
color: var(--color-brand-green);
border-color: rgba(14, 143, 94, 0.55);
}
.game-modal__stage {
position: relative;
width: 100%;
aspect-ratio: 5 / 6;
touch-action: none; /* the stage owns touch-drag for the paddle — don't let the page scroll under a finger dragging here */
}
#bkCanvas {
display: block;
width: 100%;
height: 100%;
}
.game-modal__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-lg);
text-align: center;
background: rgba(11, 18, 21, 0.85);
}
.game-modal__overlay[hidden] {
display: none;
}
/* Fixed light text, NOT var(--color-ink)/--color-ink-muted — this
overlay's scrim (rgba(11,18,21,0.85)) is deliberately dark
regardless of site theme, but those tokens flip to near-black in
light mode (they assume a light page background), which produced
unreadable near-black-on-near-black text there. Same bug, same fix
as the terminal panel in homepage-explore.css: text tied to a
fixed-dark surface has to be fixed-light too, not theme-reactive. */
.game-modal__overlay-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-h3);
font-weight: 500;
color: #F2F5F3;
}
.game-modal__overlay-sub {
margin: 0 0 var(--space-xs);
max-width: 32ch;
font-size: var(--step-caption);
color: #AFC0B8;
}
@media (prefers-reduced-motion: reduce) {
.game-breakout-expand {
transition: none !important;
}
}
.faq-item {
position: relative;
border-radius: 14px;
overflow: hidden;
background: color-mix(in srgb, var(--color-surface) 65%, var(--color-brand-green) 5%);
border: 1px solid var(--color-border);
opacity: 0;
transform: translateY(10px);
animation: faq-boot-in 0.4s ease-out forwards;
animation-delay: calc(var(--i, 0) * 0.08s);
transition: border-color 0.2s ease;
}
.faq-item:hover {
border-color: rgba(14, 143, 94, 0.45);
}
/* Animated left accent — a thin bar that's dim while closed, and
pulses brand-green while the item is open. Real element, not a
pseudo (this project's convention), and cheap (background-color +
box-shadow only, no blur). */
.faq-item__accent {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--color-border);
transition: background 0.2s ease;
}
.faq-item[open] .faq-item__accent {
background: var(--color-brand-green);
animation: faq-accent-pulse 2s ease-in-out infinite;
}
.faq-item__summary {
cursor: pointer;
list-style: none;
}
.faq-item__summary::-webkit-details-marker {
display: none;
}
.faq-item__summary-inner {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 6px);
}
.faq-item__index {
flex: none;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--step-caption);
color: var(--color-brand-green);
}
.faq-item__question {
flex: 1;
margin: 0;
font-family: var(--font-display);
font-size: var(--step-body);
font-weight: 500;
}
.faq-item__indicator-closed,
.faq-item__indicator-open {
flex: none;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.faq-item__indicator-open {
display: none;
}
.faq-item[open] .faq-item__indicator-closed {
display: none;
}
.faq-item[open] .faq-item__indicator-open {
display: inline;
color: var(--color-brand-green);
}
.faq-item__answer {
margin: 0;
padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 34px + 6px);
color: var(--color-ink-muted);
max-width: 62ch;
}
@keyframes faq-boot-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes faq-accent-pulse {
0%, 100% { box-shadow: 0 0 0 rgba(14, 143, 94, 0); }
50% { box-shadow: 0 0 10px rgba(14, 143, 94, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
.faq-item {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.faq-item[open] .faq-item__accent {
animation: none !important;
}
}
/* ---- error-404.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
error-404.css — Phase 5a. The 404 page: a live drifting three.js
particle field (assets/js/error-particles.js) instead of a static
graphic — replaced the earlier Game of Life per direct feedback, to
keep this page's interactive visual distinct from both the homepage
hero and the About page orbit rather than repeating either. Framed
with the site's own corner-bracket "targeting reticle" motif (see
homepage-archive-preview.css), a monospace "/404" tag (matching
header.php's "/menu" drawer tag), and a CONTINUOUS looping
chromatic-glitch flicker on the heading (a recurring burst every 4s,
not a nonstop shake — see the animation's own comment below) —
gated behind prefers-reduced-motion like every other animation on
the site. A second section below used to continue the homepage's
"broken glass" motif (shatter-glass.css) as this page's own
explanation of why 404s happen here; that's now a second live Game
of Life instance instead, per direct feedback.
Layout mirrors homepage-intro.css's intro card on purpose (text
first in the DOM/reading order on every screen size, portrait
second — same reasoning: decorative content can't come before the
real heading/text, not just visually) but this is its own full
section, not a glass card — the 404 page IS the page, not a card on
a page with other things above/below it.
*/
.error404 {
display: flex;
align-items: center;
/* Capped at 620px — plain calc(100dvh - 320px) was fine on typical
desktop heights but on tall tablet/portrait viewports (e.g. iPad
Pro at 1366px tall) it demanded ~1000px+ of vertical centering
room the actual content never filled, confirmed live as huge
equal blank space above and below the card. The cap keeps the
"reads as one deliberate screen" intent on normal heights without
that runaway growth on unusually tall viewports. */
min-height: min(calc(100dvh - 320px), 620px);
/* Top matches every other page's nav-to-hero gap (var(--space-lg) —
about/contact/archive/category pages all use it); bottom stays
the wider var(--space-xl) for this page's own vertical-centering
feel before the footer. Was padding-block: var(--space-xl) on
both sides, which made 404's nav-to-hero gap visibly bigger than
every other page's — confirmed live, ~81px vs ~65px at the same
viewport — direct feedback (2026-08-20). */
padding-block: var(--space-lg) var(--space-xl);
}
.error404__layout {
display: flex;
align-items: center;
gap: var(--space-xl);
width: 100%;
}
@media (max-width: 720px) {
.error404__layout {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: var(--space-lg);
}
}
.error404__text {
flex: 1;
min-width: 0;
}
.error404__tag {
margin: 0 0 var(--space-sm);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--color-brand-green);
}
.error404__title {
margin: 0 0 var(--space-sm);
font-size: var(--step-display, var(--step-h1));
line-height: 1.05;
}
@media (prefers-reduced-motion: no-preference) {
.error404__title {
/* Continuous, not one-shot — but a recurring BURST every 4s, not a
constant nonstop jitter: "Lost signal" reads as a signal that
periodically drops out and recovers, and holding still for most
of each cycle keeps the heading actually readable rather than
permanently shaking. */
animation: error404-glitch 4s steps(1, end) infinite;
}
}
@keyframes error404-glitch {
0% { text-shadow: -3px 0 rgba(230, 90, 90, 0.7), 3px 0 rgba(14, 143, 94, 0.7); }
3% { text-shadow: 3px 0 rgba(230, 90, 90, 0.7), -3px 0 rgba(14, 143, 94, 0.7); }
6% { text-shadow: -2px 0 rgba(230, 90, 90, 0.6), 2px 0 rgba(14, 143, 94, 0.6); }
9% { text-shadow: 2px 0 rgba(230, 90, 90, 0.55), -2px 0 rgba(14, 143, 94, 0.55); }
12% { text-shadow: -1px 0 rgba(230, 90, 90, 0.4), 1px 0 rgba(14, 143, 94, 0.4); }
16%, 100% { text-shadow: none; }
}
.error404__body {
max-width: 52ch;
color: var(--color-ink-muted);
}
.error404__stat {
margin: 0 0 var(--space-md);
font-size: var(--step-caption);
color: var(--color-ink-muted);
}
.error404__stat strong {
color: var(--color-brand-green);
font-family: var(--font-display);
}
.error404__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
/* ---- Portrait: the live particle field, bigger than the homepage's
148px hero slot since this IS the page's main visual, not a small
accent next to a lot of text. Hand-rolled Clear Glass surface
(matches homepage-intro.css's old .intro__life-frame recipe exactly
— not the .glass-primary/.glass-content wrapper pattern, since this
is a single canvas-holding button, not a multi-child card). ---- */
.error404__portrait {
position: relative;
flex: none;
width: min(320px, 80vw);
aspect-ratio: 1;
}
@media (max-width: 720px) {
/* .error404__layout switches to flex-direction: column at this same
breakpoint, and `aspect-ratio` on a flex item whose own axis is
now the flex container's cross axis is a known unreliable
combination on some mobile browsers — confirmed live as the box
stretching tall instead of staying square. An explicit height
(identical formula to the width above) sidesteps aspect-ratio
entirely rather than fighting the flex interaction. */
.error404__portrait {
height: min(320px, 80vw);
}
}
.error404__particles-frame {
width: 100%;
height: 100%;
padding: 0;
border: 1px solid var(--glass-primary-border);
border-radius: 20px;
/* No overflow: hidden — error-particles.js fits its camera to both
axes so nothing should ever bleed past this frame; see
hero-globe-bg.js's own comment for why relying on clipping a
WebGL canvas inside a border-radius container is a real
mobile/WebKit bug, confirmed live on the homepage hero. */
cursor: pointer;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(14, 143, 94, 0.18) 60%, rgba(11, 18, 21, 0.32));
backdrop-filter: blur(var(--glass-primary-blur));
-webkit-backdrop-filter: blur(var(--glass-primary-blur));
box-shadow: var(--glass-shadow);
transition: transform 0.15s ease, border-color 0.15s ease;
}
.error404__particles-frame:hover,
.error404__particles-frame:focus-visible {
transform: scale(1.015);
border-color: rgba(14, 143, 94, 0.55);
}
.error404__particles-mount {
/* No overflow: hidden here either (see .error404__particles-frame's
own comment) — the canvas is transparent (renderer alpha:true)
and error-particles.js fits its scene fully inside this box, so
the rounded frame corners never need to clip anything; they'd
just be transparent canvas pixels showing the frame's own
background gradient through, same visual result without the
WebKit clipping-bug risk. */
position: relative;
display: block;
width: 100%;
height: 100%;
}
.error404__particles-canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.error404__particles-mount--live .error404__particles-canvas {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.error404__particles-canvas {
transition: none !important;
}
}
/* Targeting-reticle corners — same shape/motion language as
.archive-card__corner (homepage-archive-preview.css), scaled up and
ALWAYS visible here (not hover-only — this page has no hover state
to reveal them from, the frame IS the whole point of the page). */
.error404__corner {
position: absolute;
width: 22px;
height: 22px;
border: 0 solid var(--color-brand-green);
pointer-events: none;
}
.error404__corner--tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
.error404__corner--tr { top: -8px; right: -8px; border-width: 2px 2px 0 0; }
.error404__corner--bl { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; }
.error404__corner--br { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }
@media (prefers-reduced-motion: reduce) {
.error404__title {
animation: none !important;
text-shadow: none !important;
}
.error404__particles-frame {
transition: none !important;
}
}
/* ---- "Why this actually happens" — a second live Game of Life sits
as a corner accent behind the heading (replaced the earlier
shatter-glass panel per direct feedback), same reserved-space
technique as homepage-craft.css's .craft__shatter (explicit
padding-right matching the panel's own footprint, not a ch-based
guess that can disagree with the panel's real box at in-between
widths), and drops entirely on narrow screens rather than crowd the
read. Same box footprint/position the shatter panel had — just the
content inside changed. ---- */
.error404-why {
position: relative;
margin-block: var(--space-xl);
padding-block: var(--space-lg);
border-top: 1px solid var(--color-border);
}
.error404-why__life {
position: absolute;
top: var(--space-lg);
right: 0;
width: min(200px, 40vw);
aspect-ratio: 1;
z-index: 0;
}
.error404-why__life-frame {
width: 100%;
height: 100%;
padding: 0;
border: 1px solid var(--glass-primary-border);
border-radius: 18px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(14, 143, 94, 0.18) 60%, rgba(11, 18, 21, 0.32));
backdrop-filter: blur(var(--glass-primary-blur));
-webkit-backdrop-filter: blur(var(--glass-primary-blur));
box-shadow: var(--glass-shadow);
transition: transform 0.15s ease, border-color 0.15s ease;
}
.error404-why__life-frame:hover,
.error404-why__life-frame:focus-visible {
transform: scale(1.02);
border-color: rgba(14, 143, 94, 0.55);
}
.error404-why__life-canvas {
display: block;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.error404-why__life-frame {
transition: none !important;
}
}
@media (max-width: 640px) {
.error404-why__life {
display: none;
}
}
.error404-why__text {
position: relative;
z-index: 1;
padding-right: min(220px, 42vw);
}
@media (max-width: 640px) {
.error404-why__text {
padding-right: 0;
}
}
.error404-why__title {
margin: 0 0 var(--space-sm);
font-size: var(--step-h2);
}
.error404-why__body {
max-width: 68ch;
color: var(--color-ink-muted);
}
/* ---- about-page.css ---- */
/*!
* Author: Md. Istiqur Rahman
* Profession: Remote SEO Consultant & GTM Manager
* Experience: 18+ Years
* Website: https://istiquritconsultant.com
* Email: contact@istiquritconsultant.com
*
* This stylesheet is authored and maintained by the above for Istiqur IT Consultant.
*/
/*
about-page.css — Phase 8. Layout for templates/partials/about.php.
Journey section mirrors homepage-journey.css's two-column text +
shatter-glass-panel shape (text first in DOM/reading order on every
screen size, same reasoning as everywhere else that pattern is
used). Services render as two link-list tiers rather than a 10-card
grid — this site already avoids stacking card grids (see
homepage-explore.css's own comment on that), and a plain list of
name+description rows reads faster for 10 items than 10 cards would.
*/
/* Real bug, confirmed live: this had its own max-width:900px +
margin-inline:auto on top of the sitewide container's own
1120px cap (base.css) — making this page narrower than the
homepage's own sections, which rely on that single sitewide cap
with no second one layered on. Removed per direct feedback ("this
page and everything in it should be properly full width like
homepage") — no extra constraint here now, same as
homepage-intro.php's .intro section. */
.about-page {
/* Top was --space-xl (up to 5rem), now --space-lg — fine as top
breathing room below the header. Bottom went further per direct
feedback ("reduce bottom gap more") — it stacks with the
newsletter banner's own bottom margin below (nothing collapses
through this padding), so it needed to be smaller than the top. */
padding-top: var(--space-lg);
padding-bottom: var(--space-sm);
}
/* ---- Hero: text + the orbit mascot (assets/js/about-mascot.js) ---- */
.about-page__hero {
display: flex;
/* flex-start, NOT center — real bug, confirmed live via screenshot
(2026-08-20): the mascot mount's aspect-ratio is 4/5 (up to 525px
tall), noticeably taller than Contact's equivalent 1:1 beacon
frame (max 380px), so centering the shorter text column against
it pushed the tag/H1 well below the header, reading as a much
bigger nav-to-hero gap than every other page. Top-aligning both
columns removes that push regardless of how tall the mascot ever
renders. */
align-items: flex-start;
gap: var(--space-xl);
}
@media (max-width: 720px) {
.about-page__hero {
/* Real bug, confirmed live: DOM order is already text-then-photo,
so `column-reverse` was flipping that to show the photo FIRST —
the opposite of the intended "text stays first" reasoning this
comment used to have. Plain `column` keeps DOM order (text,
then photo), per direct feedback. */
flex-direction: column;
gap: var(--space-lg);
}
}
.about-page__hero-text {
/* Narrowed from flex: 1.3, per direct feedback ("shorten the width
of hero textual section to give the orbit more room to shine") —
the orbit's pointer-tracking effect needs real on-screen area to
read, so the text column gives up space rather than the two
staying evenly split. */
flex: 0.85;
min-width: 0;
}
/* Bare mount for the orbit mascot — no glass frame, no corner
brackets, no card background, per direct feedback ("only place the
orbit with all its animated glory and not any background
div/section or text"). The