/* ========================================================================== Suria Crestway Sdn. Bhd. — About Us page Standalone from the homepage stylesheet on purpose: this ships as its own WordPress plugin, so it carries its own tokens, reset and entrance rules rather than depending on css/style.css being enqueued. Everything is scoped under .sc-about and prefixed .sc- so it can be dropped into a shortcode without fighting the active theme. IMAGE RULES ARE PREFIXED `.sc-about` ON PURPOSE — don't "simplify" them. Page builders ship a blanket image reset at the same specificity as a plain component rule. Elementor's is .elementor img { border:none; border-radius:0; box-shadow:none; height:auto; max-width:100% } which is (0,1,1) — identical to `.sc-pagehero__media img`. A plugin stylesheet is enqueued before the theme's and before Elementor's, so on an equal-specificity tie the later sheet wins and every image depending on a CSS height collapses. The `.sc-about` prefix makes these (0,2,1), which wins on specificity and so holds regardless of load order. ========================================================================== */ .sc-about { /* Brand */ --sc-brand: #262aad; --sc-brand-dark: #1c1f8a; --sc-brand-tint: #eef0fb; --sc-brand-tint2:#e3e7f8; --sc-accent: #f42e39; /* Neutrals */ --sc-navy: #070a26; --sc-ink: #0e1130; --sc-ink-2: #474c6d; --sc-ink-3: #7a7f9c; --sc-line: #e3e6f1; --sc-cream: #f8f7f4; --sc-paper: #ffffff; /* Layout */ --sc-w: 1340px; 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. Without this the reset outranks the component classes below (and would, for example, repaint .sc-pagehero__title with the default heading colour). */ .sc-about *, .sc-about *::before, .sc-about *::after { box-sizing: border-box; } :where(.sc-about) :where(h1, h2, h3, p, figure) { margin: 0; } :where(.sc-about) :where(img) { display: block; max-width: 100%; } :where(.sc-about) :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-about 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; } :where(.sc-about) :where(h1, h2, h3) { font-family: "Archivo", "Inter", sans-serif; color: var(--sc-ink); font-weight: 600; } /* The helpers below (.sc-container, .sc-i, .sc-h2, .sc-eyebrow, .sc-dot) share their names with css/style.css in the header/home/footer plugin. They are PREFIXED `.sc-about` on purpose so the two stylesheets can coexist on one page: unprefixed, the two sheets would be an equal-specificity tie that load order decides, and their responsive overrides differ (this page takes .sc-h2 to 22px on mobile, the homepage sheet takes it to 23px) — so whichever loaded last would silently restyle the other plugin's sections. Don't unprefix them. */ /* 1340px fixed, matching the homepage. Below that the safety inset keeps content off the viewport edge. */ .sc-about .sc-container { width: var(--sc-w); max-width: 100%; margin-inline: auto; } @media (max-width: 1379px) { .sc-about .sc-container { padding-inline: 24px; } } .sc-about .sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* --- shared type --------------------------------------------------------- */ .sc-about .sc-h2 { font-size: 44px; line-height: 1.36; font-weight: 500; letter-spacing: -0.02em; } .sc-about .sc-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink); } .sc-about .sc-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex: none; } /* ========================================================================== 1. PAGE HERO BANNER — 50vh ========================================================================== */ .sc-pagehero { position: relative; background: var(--sc-navy); min-height: 50vh; min-height: 50svh; display: flex; align-items: flex-end; padding-top: 182px; /* clears the fixed site header */ padding-bottom: 66px; isolation: isolate; } .sc-pagehero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .sc-about .sc-pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Same two-layer recipe as the homepage hero: 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. */ .sc-pagehero__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-pagehero__inner { position: relative; } .sc-pagehero__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-pagehero__sub .sc-dot-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); flex: none; } /* Matches .sc-hero__title on the homepage exactly — the banner headline is the page's opening statement, so it keeps the hero scale rather than dropping to the 33px .sc-h2 used by the section headings below it. */ .sc-pagehero__title { margin-top: 22px; max-width: 900px; font-size: 68px; line-height: 1.12; font-weight: 500; letter-spacing: -0.028em; color: #fff; } .sc-pagehero__title strong { font-weight: 700; } .sc-about .sc-dot { color: var(--sc-accent); } /* ========================================================================== 2. CAPABILITIES — heading left / notes right, then three cards ========================================================================== */ .sc-abfeat { background: #fff; padding: 104px 0 96px; } /* Left column is slightly wider so the two-line heading breaks where it's written to, and the notes column still starts past the halfway mark. */ .sc-abfeat__top { display: grid; grid-template-columns: 1.08fr 1fr; gap: 80px; align-items: start; } .sc-abfeat__head .sc-h2 { margin-top: 18px; } /* Three compact notes, no icons and no rules between them — the colour shift on each title is what separates them. */ .sc-abfeat__list { display: grid; gap: 26px; padding-top: 6px; } .sc-abnote h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.006em; color: var(--sc-brand); } /* No max-width: the grid column already sets the measure, and capping it here left a dead gutter between the text and the column's right edge — which is also the right edge of the card grid below, so the misalignment showed. */ .sc-abnote p { margin-top: 8px; font-size: 14.5px; line-height: 1.68; color: var(--sc-ink-3); } .sc-abfeat__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Column flex with the body pushed down by margin-top:auto, so the icon stays at the top and the copy sits on the bottom edge of all three cards. The photograph is hidden at rest and only fades in on hover, so all three read as plain cards until you point at one. */ .sc-abcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; background: var(--sc-cream); border: 1px solid #efeee9; border-radius: 8px; padding: 26px 26px 30px; transition: border-color .24s ease, transform .24s ease; } .sc-abcard:hover { border-color: transparent; transform: translateY(-3px); } .sc-abcard__media { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .4s ease; } .sc-about .sc-abcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); transition: transform .6s cubic-bezier(.22,.61,.36,1); } .sc-abcard:hover .sc-abcard__media { opacity: 1; } .sc-abcard:hover .sc-abcard__media img { transform: scale(1); } /* Bottom-heavy scrim so the copy stays legible over the photo once it fades in; hidden at rest right alongside the image. */ .sc-abcard::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease; background: linear-gradient(to top, rgba(7,10,38,.96) 0%, rgba(7,10,38,.9) 34%, rgba(7,10,38,.6) 62%, rgba(7,10,38,.34) 100%); } .sc-abcard:hover::after { opacity: 1; } .sc-abcard__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--sc-brand); color: #fff; display: grid; place-items: center; flex: none; transition: background-color .24s ease; } .sc-abcard__icon .sc-i { font-size: 21px; } .sc-abcard:hover .sc-abcard__icon { background: var(--sc-accent); } .sc-abcard__body { margin-top: auto; padding-top: 40px; } .sc-abcard__label { font-size: 13px; font-weight: 600; letter-spacing: -0.002em; color: var(--sc-brand); transition: color .3s ease; } .sc-abcard:hover .sc-abcard__label { color: var(--sc-accent); } /* Two lines of space are reserved whether or not the heading fills them. The body is anchored to the bottom of the card, so a heading that runs to one line makes its whole block shorter and its top edge drops below the top edge of the two-line headings in the cards beside it — the label no longer starts on the same line across the row. Holding every heading box at two lines lifts the short one back into place without padding the copy out to two lines. 2.84em is exactly two lines: line-height is the unitless 1.42 below, and em here resolves against this element's own font-size, so the two track together if the size ever changes. */ .sc-abcard h3 { margin-top: 5px; min-height: 2.84em; font-size: 21px; line-height: 1.42; letter-spacing: -0.012em; transition: color .3s ease; } .sc-abcard:hover h3 { color: #fff; } /* ========================================================================== 3. OUR STORY — image left, content right ========================================================================== */ .sc-story { background: var(--sc-cream); padding: 100px 0 108px; } .sc-story__grid { display: grid; grid-template-columns: 560px 1fr; gap: 72px; align-items: center; } /* Positioning context for the floating readout panel, which is a sibling of the figure rather than a child of it. */ .sc-story__media { position: relative; } .sc-story__visual { border-radius: 8px; overflow: hidden; background: #eceef5; aspect-ratio: 1 / 1; } .sc-about .sc-story__visual img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ story slider The slides are stacked in the same square the single photograph used to occupy, so the section's height does not move as they cross-fade. Only opacity animates — no transform, no layout — which keeps the fade cheap and stops it fighting the [data-anim] entrance on the wrapper. The resting state is the one in the markup (.--on on the first slide), so with JS off the section shows a photograph rather than an empty square or five images piled on top of one another. */ .sc-storyslide { position: relative; } .sc-about .sc-storyslide__img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .sc-about .sc-storyslide__img--on { opacity: 1; } /* The dots carry their own ground: the slides run from a bright tank farm to a dark panelled room, and a plain white bar vanishes on the first. A short scrim under the row does the work, kept to the bottom sixth so it reads as a control strip rather than a tint over the photograph. */ .sc-storyslide__dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 40px 0 18px; background: linear-gradient(to top, rgba(7,10,38,.5), rgba(7,10,38,0)); pointer-events: none; /* the strip is decorative; the buttons re-enable it */ } .sc-storyslide__dots:empty { display: none; } .sc-storyslide__dot { width: 26px; height: 4px; border-radius: 2px; border: 0; padding: 0; background: rgba(255,255,255,.5); box-shadow: 0 1px 4px rgba(7,10,38,.6); cursor: pointer; pointer-events: auto; transition: background-color .25s ease, width .25s ease; } .sc-storyslide__dot:hover { background: rgba(255,255,255,.8); } .sc-storyslide__dot--on { width: 42px; background: var(--sc-accent); } .sc-storyslide__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .sc-about .sc-storyslide__img { transition: none; } } /* Floating readout panel over the photograph — the reference layout's inset card. Frosted rather than solid so the image still reads behind it. */ .sc-readout { position: absolute; left: 26px; right: 26px; top: 26px; padding: 20px 22px 22px; border-radius: 8px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 18px 40px -22px rgba(7,10,38,.5); } .sc-readout__title { font-family: "Archivo", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink); } .sc-readout__rows { margin-top: 16px; display: grid; gap: 11px; } .sc-readout__row { display: grid; grid-template-columns: 1fr 100px 40px; align-items: center; gap: 12px; font-size: 13.5px; color: var(--sc-ink-2); } .sc-readout__track { height: 5px; border-radius: 3px; background: #e6e8f1; overflow: hidden; } .sc-readout__fill { display: block; height: 100%; border-radius: 3px; background: var(--sc-brand); } .sc-readout__val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--sc-ink-3); } /* No max-width: the column already sets the measure. Capping it here left a dead gutter on the right and stopped the stats rule short of the column edge. */ .sc-story__body .sc-h2 { margin-top: 18px; } .sc-story__lede { margin-top: 22px; font-size: 16px; line-height: 1.78; color: var(--sc-ink-3); } .sc-checks { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; } .sc-check { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } /* Scoped to .sc-about, not just .sc-check, so the color wins against the WordPress theme's own span/li color rules once this ships as a plugin — a bare .sc-check lost that fight and rendered white-on-cream. */ .sc-about .sc-check { color: var(--sc-ink); } .sc-check__mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; } .sc-about .sc-check__mark { background: var(--sc-brand); color: #fff; } .sc-check__mark .sc-i { font-size: 13px; stroke-width: 2.6; } .sc-story__stats { margin-top: 46px; padding-top: 34px; border-top: 1px solid #e7e6e0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sc-story__stat .sc-story__num { display: block; font-family: "Archivo", sans-serif; font-size: 50px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--sc-ink); } .sc-story__stat .sc-story__label { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--sc-ink-3); } /* ========================================================================== Responsive — the design width is 1340px; these keep it usable below that ========================================================================== */ @media (max-width: 1200px) { .sc-pagehero__title { font-size: 58px; } .sc-abfeat__top { gap: 48px; } .sc-abcard { min-height: 300px; padding: 22px 22px 26px; } .sc-story__grid { grid-template-columns: 1fr; gap: 44px; } .sc-story__visual { aspect-ratio: 16 / 10; } } @media (max-width: 900px) { .sc-pagehero { min-height: 0; padding-top: 110px; padding-bottom: 52px; } .sc-pagehero__title { font-size: 50px; } .sc-about .sc-pagehero__media img { object-position: 70% 50%; } .sc-abfeat { padding: 72px 0 66px; } /* Stack the two top columns. */ .sc-abfeat__top { grid-template-columns: 1fr; gap: 34px; } .sc-abfeat__list { padding-top: 0; } .sc-abfeat__grid { margin-top: 40px; grid-template-columns: 1fr; } /* Nothing to line up once they're stacked, so let each card size to its copy. */ .sc-abcard { min-height: 0; } .sc-abcard__body { padding-top: 26px; } .sc-story { padding: 72px 0 78px; } /* Stop floating the panel over the photo. Overlaid, it grew taller than the image and hid it completely — a four-row readout simply doesn't fit inside a narrow 16:10 frame. Below the photo it gets its own space and the photograph stays fully visible. */ .sc-readout { position: static; margin-top: 14px; background: #fff; border: 1px solid var(--sc-line); box-shadow: 0 2px 10px -4px rgba(14, 17, 48, .1); } } @media (max-width: 620px) { /* Banner headline stays the largest type on the page at 30px; every section heading drops to 22px. */ .sc-pagehero__title { font-size: 40px; } .sc-about .sc-h2 { font-size: 29px; } .sc-checks { grid-template-columns: 1fr; } .sc-readout { padding: 16px 18px 18px; } /* Narrower bar so label, bar and value still share one row at 390px. */ .sc-readout__row { grid-template-columns: 1fr 68px 34px; gap: 10px; } .sc-story__stats { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .sc-story__stat .sc-story__num { font-size: 39px; } } /* ========================================================================== ENTRANCE ANIMATION [data-anim] elements rise/fade in as they scroll into view. The resting state here is fully VISIBLE — the hidden state only exists under .sc-anim-on, which js/about.js adds. So with JS off, JS broken, or IntersectionObserver missing, every element just renders normally. Stagger comes from --sc-d, set per element by the same module. ========================================================================== */ .sc-about.sc-anim-on [data-anim] { opacity: 0; } .sc-about.sc-anim-on [data-anim="up"] { transform: translateY(22px); } .sc-about.sc-anim-on [data-anim="left"] { transform: translateX(-26px); } .sc-about.sc-anim-on [data-anim="scale"] { transform: scale(.965); } /* Transition lives on the "in" state only, so applying the hidden state at startup can't animate backwards from visible. */ .sc-about.sc-anim-on [data-anim].sc-anim-in { opacity: 1; transform: none; transition: opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms), transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms); } @media (prefers-reduced-motion: reduce) { .sc-about *, .sc-about *::before, .sc-about *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } /* Never leave anything hidden waiting on a transition that won't run. */ .sc-about.sc-anim-on [data-anim] { opacity: 1 !important; transform: none !important; } }