/* ========================================================================== Suria Crestway Sdn. Bhd. — Blog listing Standalone sheet. Everything is scoped under .sc-blogpage and prefixed .sc- so it can be dropped into a WordPress shortcode without fighting the active theme, and so it can be enqueued on the same site as style.css, about.css, contact.css and services.css without any of them colliding. IMAGE RULES ARE PREFIXED `.sc-blogpage` ON PURPOSE — don't "simplify" them. Elementor ships .elementor img { border:none; border-radius:0; box-shadow:none; height:auto; max-width:100% } at (0,1,1) — identical to a plain `.sc-bcard__img`. A plugin stylesheet is enqueued before the theme's and before Elementor's, so an equal-specificity tie goes to the later sheet and every card photo would collapse. The `.sc-blogpage` prefix makes these (0,2,1), which holds regardless of load order. This is the same failure that rendered the header logo at 693x1007 on the first live upload; see the note at the top of style.css. The shared helpers (.sc-container, .sc-i) are prefixed for the same reason about.css and services.css prefix theirs — two sheets defining .sc-container at equal specificity would be decided by load order. ========================================================================== */ .sc-blogpage { /* Brand */ --sc-brand: #262aad; --sc-brand-tint: #eef0fb; --sc-accent: #f42e39; /* Neutrals */ --sc-navy: #070a26; --sc-ink: #0e1130; --sc-ink-2: #474c6d; --sc-ink-3: #7a7f9c; --sc-line: #e3e6f1; --sc-paper: #ffffff; /* Layout */ --sc-w: 1340px; /* Full-viewport white canvas. min-height, not height: the banner plus sixteen cards do not fit in one screen at any sane card size — see the README note. The page fills the viewport when it is short and grows past it when it isn't, rather than clipping rows. */ min-height: 100vh; background: var(--sc-paper); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; color: var(--sc-ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* --- reset (scoped) ------------------------------------------------------ Wrapped in :where() so it carries ZERO specificity, exactly as style.css does. Without this the reset outranks the component classes below. */ .sc-blogpage *, .sc-blogpage *::before, .sc-blogpage *::after { box-sizing: border-box; } :where(.sc-blogpage) :where(h1, h2, h3, p, figure) { margin: 0; } :where(.sc-blogpage) :where(img) { display: block; max-width: 100%; } :where(.sc-blogpage) :where(a) { color: inherit; text-decoration: none; } /* Body copy runs justified. Set on the paragraphs themselves rather than on a wrapper, so headings, eyebrows, labels and buttons keep their own alignment and only prose is affected. Hyphenation is not optional here. Justifying a narrow column without letting words break forces the leftover space into the word gaps — the rivers of white that make justified text look broken. The limits are deliberately loose: 5 2 2 lets any word of 5+ characters break with two letters either side, which is what actually closes the gaps at these measures. The element must carry a lang attribute or the browser has no dictionary and silently does nothing. Kept in step with the same block in style.css — change one, change all. */ .sc-blogpage p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2; hyphenate-limit-chars: 5 2 2; /* Stops the last line landing as a single orphaned word, which reads worse next to justified lines than it does under ragged-right text. */ text-wrap: pretty; } /* The empty-state line is a centred notice, not prose. */ .sc-blogpage .sc-bempty { text-align: center; } :where(.sc-blogpage) :where(h1, h2, h3) { font-family: "Archivo", "Inter", sans-serif; color: var(--sc-ink); font-weight: 600; } /* 1340px fixed, no left/right padding, matching every other surface. Below 1340 the safety inset keeps content off the viewport edge. */ .sc-blogpage .sc-container { width: var(--sc-w); max-width: 100%; margin-inline: auto; } @media (max-width: 1340px) { .sc-blogpage .sc-container { padding-inline: 24px; } } .sc-blogpage .sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ========================================================================== 1. HERO BANNER — 50vh The About banner's recipe and scale, values matched exactly: same 150px top padding to clear the overlaying header, same two-layer scrim, same 50px headline. Reused on purpose so the two pages read as one site. Class names are NEW. about.css calls this `.sc-pagehero`; both stylesheets can be enqueued on the same WordPress site, and sharing the name would put two full banner definitions at equal specificity with load order deciding which wins. Same reason services.css uses `.sc-step` rather than the homepage's `.sc-acc`. No `data-anim` on the headline, unlike the About banner: this page ships no JavaScript, so the attribute would be inert. See the README. ========================================================================== */ .sc-bhero { position: relative; background: var(--sc-navy); min-height: 50vh; min-height: 50svh; display: flex; align-items: flex-end; padding-top: 182px; /* clears the overlaying site header */ padding-bottom: 66px; isolation: isolate; } .sc-bhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* Prefixed — see the Elementor note at the top of this file. Without it the banner photograph stops covering, exactly as the homepage hero did on the first live upload. */ .sc-blogpage .sc-bhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Two-layer scrim: a directional wash that keeps the left-hand type readable, plus a vertical pass so the header sits on something dark at the top and the section joint reads at the bottom. RE-BALANCED 2026-08-17. It used to run .94 -> .24 across and .55 down, which made the banner the single biggest reason the site read dark. The stops are now ASYMMETRIC on purpose: the left two are nearly untouched because the white hero type sits there and that is what the contrast budget buys, while the middle and right are cut hard (.62 -> .26, .34 -> .06, .24 -> .02) because no text sits there — that is where the photograph gets to show. Chosen by measuring, not by eye: candidates were rendered and the contrast under the hero title and the eyebrow read back off the pixels. This one leaves the title 55% and the eyebrow 133% above their AA floors across the worst hero photograph on the site. Lightening the MIDDLE stop is what eats that margin first (the title box runs to 900px, well into it), so re-measure before touching .26. */ .sc-bhero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(98deg, rgba(7,10,38,.86) 0%, rgba(7,10,38,.70) 26%, rgba(8,14,44,.26) 46%, rgba(8,16,48,.06) 64%, rgba(8,18,52,.02) 100%), linear-gradient(to bottom, rgba(7,10,38,.22) 0%, rgba(7,10,38,0) 32%, rgba(7,10,38,.13) 100%); } .sc-bhero__inner { position: relative; } .sc-bhero__sub { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,.82); } .sc-bhero__sub .sc-dot-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex: none; } /* Matches .sc-pagehero__title on the About page exactly — the banner headline is the page's opening statement, so it keeps the hero scale. */ .sc-bhero__title { margin-top: 22px; max-width: 900px; font-size: 68px; line-height: 1.12; font-weight: 500; letter-spacing: -0.028em; color: #fff; } .sc-bhero__title strong { font-weight: 700; } .sc-blogpage .sc-dot { color: var(--sc-accent); } /* ========================================================================== 2. LISTING — 4 across, 4 rows, sixteen cards ========================================================================== */ /* The banner is full-bleed, so the page carries no block padding of its own and the listing owns its spacing. */ .sc-blist { padding-block: 64px; } .sc-bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ========================================================================== CARD White at rest with a hairline, lifting into a brand-tinted rule on hover. This is the .sc-pcard recipe inverted: that one sits on white sections so it rests tinted and turns white; this page IS white, so resting tinted would make sixteen grey slabs. The hover signature — a 2-3px lift and a border that changes rather than a shadow that appears — is kept, because the project uses no drop shadows anywhere and starting here would read as a different site. ========================================================================== */ .sc-bcard { display: flex; flex-direction: column; background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: 8px; overflow: hidden; isolation: isolate; transition: border-color .24s ease, transform .24s ease; } .sc-bcard:hover { border-color: rgba(38, 42, 173, .3); transform: translateY(-3px); } /* --- photograph ---------------------------------------------------------- */ .sc-bcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f5f9; flex: none; } /* Prefixed — see the Elementor note at the top of this file. */ .sc-blogpage .sc-bcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .sc-blogpage .sc-bcard:hover .sc-bcard__img { transform: scale(1.045); } /* Stand-in for a post with no featured image. A tinted frame, not a bundled stock photograph: sixteen cards falling back to the same picture reads as a broken feed, an empty frame reads as a post that has no picture. Fills the 4:3 media box so the card keeps its height and the row baselines hold. */ .sc-bcard__plate { display: block; width: 100%; height: 100%; background: var(--sc-brand-tint); } /* Category plate. Same recipe as the homepage carousel's .sc-scard__idx — white, ink text, not accent. Accent is reserved (headline full stop, the "Core service" flag, eyebrow dots); a red pill on all sixteen cards would spend it on nothing. */ .sc-bcard__cat { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, .94); color: var(--sc-ink); border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; } /* --- body ---------------------------------------------------------------- */ .sc-bcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 18px; } .sc-bcard__title { font-size: 21px; line-height: 1.36; letter-spacing: -0.015em; /* Two lines, hard. Titles arrive from the WP editor at any length and an unclamped third line pushes the meta row down on one card only, which breaks the baseline across the row. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-bcard:hover .sc-bcard__title { color: var(--sc-brand); } .sc-bcard__title { transition: color .24s ease; } .sc-bcard__excerpt { margin-top: 9px; font-size: 14.5px; line-height: 1.68; color: var(--sc-ink-3); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* margin-top:auto pins the meta row to the bottom of the card whatever the title wraps to, so the rules and plus buttons line up across the row. */ .sc-bcard__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Date only. There was a read-time figure beside it behind a dot separator; both are gone — WordPress has no read-time field, so it would have had to be computed from the word count, and it was not worth the branch. */ .sc-bcard__meta { font-size: 13.5px; color: var(--sc-ink-3); letter-spacing: -0.005em; } /* Plus, not an arrow: no arrow icons on any control in this project except the carousel chevrons and the header CTA. Follows .sc-scard__plus — tinted well with a brand glyph, inverting to a brand fill on hover. */ .sc-bcard__plus { width: 34px; height: 34px; border-radius: 50%; background: var(--sc-brand-tint); color: var(--sc-brand); display: grid; place-items: center; flex: none; transition: background-color .24s ease, color .24s ease; } .sc-bcard__plus .sc-i { font-size: 16px; } .sc-bcard:hover .sc-bcard__plus { background: var(--sc-brand); color: #fff; } /* Keyboard parity — the whole card is one link, so the focus ring goes on the card, not the plus. */ .sc-bcard:focus-visible { outline: 2px solid var(--sc-brand); outline-offset: 3px; } /* ========================================================================== EMPTY STATE Shown when the query returns nothing — a new site before the first post. A blank white page looks like a bug; a line of text looks like an empty blog, which is what it is. ========================================================================== */ .sc-bempty { padding-block: 80px; text-align: center; font-size: 16px; color: var(--sc-ink-3); } /* ========================================================================== RESPONSIVE 4 across → 3 → 2 → 1. The card is unchanged at every step; only the column count moves, so a 4:3 frame is all a replacement photo ever needs. ========================================================================== */ @media (max-width: 1200px) { .sc-bgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .sc-bhero__title { font-size: 58px; } } @media (max-width: 860px) { .sc-bgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .sc-blist { padding-block: 48px; } /* min-height released: below this the banner is taller than it needs to be and the fixed 150px clearance already holds the header off the type. */ .sc-bhero { min-height: 0; padding-top: 110px; padding-bottom: 52px; } .sc-bhero__title { font-size: 50px; } } @media (max-width: 560px) { .sc-bgrid { grid-template-columns: 1fr; } .sc-bcard__title { font-size: 19.5px; } .sc-bhero__title { font-size: 40px; } } @media (prefers-reduced-motion: reduce) { .sc-bcard, .sc-blogpage .sc-bcard__img, .sc-bcard__plus, .sc-bcard__title { transition: none; } .sc-bcard:hover { transform: none; } .sc-blogpage .sc-bcard:hover .sc-bcard__img { transform: none; } }