/* ============================================================================
RANCO — coming-soon page
ranco.com.sa · built by IBIX Digital · 2026-07-31
PART 1 is IBIX Studio base/ibix-base.css, copied in verbatim per the playbook
guardrail rule. Do not edit part 1 here — edit the studio base and re-copy.
PART 2 is RANCO's own theme, layered on top.
========================================================================= */
/* ══ PART 1 ═════════════════════════════ IBIX base — the non-negotiables ══ */
/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
* { margin: 0; padding: 0 }
/* `height:auto` is load-bearing. An , ,
, . Scope to an id/class instead. This comment is the rule;
there is deliberately no bare landmark block here. */
/* A portable component must reset its own landmarks so it survives being
dropped into a page whose CSS you haven't audited. */
#site-footer nav { max-width: none; margin: 0; padding: 0; display: block }
/* --- controls ------------------------------------------------------------- */
/* A header CTA that wraps to two lines grows taller than the fixed nav row, so
it stops matching its neighbours and reads as "misaligned and a different
size" — the owner's exact words on East Hope. The cause is the wrap, not the
alignment. nowrap is the fix, and it belongs in the BASE rule. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
white-space: nowrap; line-height: 1.15; cursor: pointer;
border: 1.5px solid transparent; transition: .18s;
}
/* Full-screen hero headline: size it by the SMALLER of viewport width AND
height. A width-only headline grows so tall on a wide-but-short laptop that
it pushes the sub-head + CTA below the fold. */
.hero-display { font-size: clamp(2.5rem, min(11vw, 15vh), 8rem); line-height: .98 }
@media (max-height: 820px) {
.hero-fit-pad { padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(28px, 5vh, 60px) }
}
/* WCAG 2.2 AA (2.5.8) target size. Cheap to honour, awkward to retrofit. */
@media (hover: none) and (pointer: coarse) {
a, button, [role="button"], input[type="submit"] { min-height: 24px }
/* Only ever set `cursor` in a blanket a,button rule. Setting
`pointer-events:auto` here re-enables links inside CLOSED overlays. */
* { -webkit-tap-highlight-color: transparent }
}
/* Note the SPACES in the media query above: writing the combinator "and" with
NO space before the next bracket makes the whole query DEAD in every browser —
the parser reads it as a function token. */
/* --- degradation: never ship a blank page --------------------------------- */
/* This page ships ZERO JavaScript on purpose (see index.html head comment), so
nothing here is ever gated behind a script. The .reveal rules are kept intact
from the base so that anything added later inherits the safe behaviour. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: .6s ease }
html.js .reveal.in { opacity: 1; transform: none }
/* Reduced-motion users must SEE the content, not a blank page. Both selectors
are listed because `html.js .reveal` (0,2,0) outranks a bare `.reveal`. */
@media (prefers-reduced-motion: reduce) {
html.js .reveal, .reveal { opacity: 1; transform: none; transition: none }
html { scroll-behavior: auto }
*, *::before, *::after { animation-duration: .001ms !important;
animation-iteration-count: 1 !important; transition-duration: .001ms !important }
}
/* --- mobile menu scroll lock ---------------------------------------------- */
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden }
/* --- cross-browser -------------------------------------------------------- */
/* Safari needs the -webkit- twin or the effect silently does nothing. */
.glass {
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
/* Blur is expensive: a grid of many blurred panels janks mid-range Android,
which is what Gulf clients actually browse on. Drop it at phone widths. */
@media (max-width: 720px) {
.glass { -webkit-backdrop-filter: none; backdrop-filter: none }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.glass { background-color: rgba(18, 32, 63, .88) }
}
/* Decorative fixed canvases NEVER take pointer events. */
canvas[data-decorative] { pointer-events: none }
/* --- RTL / bilingual ------------------------------------------------------ */
/* letter-spacing breaks Arabic letter joining outright. */
[dir="rtl"] * { letter-spacing: normal !important }
/* Latin display faces have NO Arabic glyphs, so Arabic headings silently fall
back to an ugly default. Same trap for Cyrillic. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--body) }
[dir="rtl"] .carousel-track { direction: ltr }
/* --- print ---------------------------------------------------------------- */
@media print {
.no-print, .wa-float, .cookie-banner { display: none !important }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em }
}
/* ══ PART 2 ══════════════════════════════════════ RANCO's own theme ═══════ */
/* --- fonts (self-hosted — never a third-party CDN, COMPLIANCE.md §6) ------- */
@font-face {
font-family: 'Schibsted Grotesk';
src: url('../fonts/schibsted-grotesk-var-latin.woff2') format('woff2');
font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('../fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
/* --- tokens ---------------------------------------------------------------
Palette is RANCO's own, sampled from their vector logo and darkened for a
dark treatment — see CLIENT-FACTS.md "Brand". Contrast measured against
--navy: pearl 15.7:1 · soft 12.1:1 · faint 6.6:1 · blue-lift 7.8:1.
-------------------------------------------------------------------------- */
:root {
--navy: #0C1730; /* page base — brand navy #223566, darkened */
--navy-2: #12203F; /* panels */
--blue: #328FCE; /* brand blue, verbatim from the logo */
--blue-lift: #5CB3EF; /* the same blue lifted to clear AA on --navy */
--white: #FFFFFF;
--pearl: rgba(255,255,255,.94);
--soft: rgba(255,255,255,.82);
--faint: rgba(255,255,255,.66);
--hair: rgba(255,255,255,.15);
--body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
--ease: cubic-bezier(.16, 1, .3, 1);
}
html, body { min-height: 100% }
body {
font-family: var(--body);
color: var(--pearl);
background: var(--navy);
line-height: 1.55;
position: relative;
}
/* Firefox ignores ::-webkit-scrollbar entirely — ship both, in RANCO's navy
rather than the base file's warm beige. */
html { scrollbar-width: thin; scrollbar-color: #2C4270 transparent }
::-webkit-scrollbar { width: 11px; height: 8px }
::-webkit-scrollbar-thumb { background: #2C4270; border-radius: 9px }
::selection { background: var(--blue-lift); color: var(--navy) }
/* Visible keyboard focus on a dark page. */
a:focus-visible {
outline: 2px solid var(--blue-lift); outline-offset: 3px; border-radius: 4px;
}
.vh {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* --- backdrop -------------------------------------------------------------
Fixed, so it never scrolls away on a short screen where the shell has to
scroll. Decorative only — the accessible description lives on the img alt.
-------------------------------------------------------------------------- */
.bg {
position: fixed; inset: 0; z-index: 0;
background: url('../assets/hero.webp') center 46% / cover no-repeat;
animation: settle 5s var(--ease) both;
}
@keyframes settle { from { transform: scale(1.055) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .bg { animation: none } }
/* Mobile gets a portrait crop — a 16:9 landscape file centre-cropped into a
9:19 viewport throws away the subject entirely. */
@media (max-width: 720px) {
.bg { background-image: url('../assets/hero-mobile.webp'); background-position: center 42% }
}
.scrim {
position: fixed; inset: 0; z-index: 1;
background:
linear-gradient(180deg,
rgba(12,23,48,.90) 0%,
rgba(12,23,48,.66) 30%,
rgba(12,23,48,.72) 62%,
rgba(12,23,48,.97) 100%),
linear-gradient(96deg, rgba(12,23,48,.72) 0%, rgba(12,23,48,.10) 62%);
}
/* --- shell ----------------------------------------------------------------
min-height, NOT height: on a short screen the page scrolls rather than
clipping the contact details, which are the entire point of the page.
-------------------------------------------------------------------------- */
.shell {
position: relative; z-index: 2;
width: 100%; max-width: 1180px; margin: 0 auto;
min-height: 100svh;
padding: clamp(16px, 2.6svh, 34px) clamp(22px, 5vw, 60px);
display: flex; flex-direction: column;
}
/* --- top bar --------------------------------------------------------------- */
.top {
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-bottom: clamp(12px, 1.8svh, 20px);
border-bottom: 1px solid var(--hair);
font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
color: var(--faint);
}
.top .place { display: inline-flex; align-items: center; gap: 10px }
.top .place b { color: var(--soft); font-weight: 500 }
.top .place .ar {
font-family: var(--arabic); letter-spacing: normal; text-transform: none;
font-size: .84rem; color: var(--faint);
}
.soon { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap }
.soon .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--blue-lift); flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(92,179,239,.16);
}
/* --- middle: logo column + information column ------------------------------ */
.mid {
flex: 1 1 auto; min-height: 0;
display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
align-items: center; gap: clamp(30px, 5vw, 80px);
padding: clamp(20px, 3.4svh, 52px) 0;
}
.brandmark { display: flex; flex-direction: column; align-items: flex-start }
.brandmark-h1 { font: inherit; margin: 0 }
.brandmark .logo {
width: auto;
height: clamp(148px, min(30vw, 34svh), 320px);
filter: drop-shadow(0 14px 40px rgba(0,0,0,.5));
}
.tagline {
margin-top: clamp(14px, 2.2svh, 26px);
font-size: clamp(.68rem, 1.1vw, .78rem);
font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
color: var(--soft);
display: flex; align-items: center; gap: 14px;
}
.tagline::before {
content: ""; width: 30px; height: 1px; background: var(--blue-lift); flex-shrink: 0;
}
/* --- activities — the client's own bilingual wording ----------------------- */
.acts { list-style: none }
.act {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: clamp(14px, 1.6vw, 20px);
padding: clamp(10px, 1.7svh, 17px) 0;
border-bottom: 1px solid var(--hair);
}
.act:first-child { padding-top: 0 }
/* nudge the motif onto the English line's optical centre, not the centre of
the two-line EN+AR block */
.act .bars { margin-top: .34em }
/* The bar motif is lifted from RANCO's own logo (the rising skyline), so the
list marker is the brand rather than a generic bullet. Pure CSS. */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 20px; flex-shrink: 0 }
.bars i { display: block; width: 2px; background: var(--blue-lift); border-radius: 1px }
.bars i:nth-child(1) { height: 8px; opacity: .55 }
.bars i:nth-child(2) { height: 13px; opacity: .75 }
.bars i:nth-child(3) { height: 17px; opacity: .9 }
.bars i:nth-child(4) { height: 20px }
.act-en {
display: block;
font-size: clamp(1.02rem, 1.62vw, 1.35rem);
font-weight: 500; letter-spacing: -.005em; color: var(--white);
text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.act-ar {
display: block; direction: rtl; text-align: right;
font-family: var(--arabic); font-weight: 400;
font-size: clamp(.92rem, 1.32vw, 1.08rem);
line-height: 1.75; color: var(--blue-lift);
text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
/* --- contact card ---------------------------------------------------------- */
.card {
margin-top: clamp(20px, 3svh, 34px);
background: rgba(18, 32, 63, .62);
border: 1px solid rgba(255,255,255,.17);
border-radius: 18px;
padding: clamp(16px, 2.4svh, 26px) clamp(18px, 2.2vw, 30px);
box-shadow: 0 18px 46px rgba(0,0,0,.34);
transition: transform .35s var(--ease), border-color .35s var(--ease),
box-shadow .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translateY(-6px);
border-color: rgba(92,179,239,.5);
box-shadow: 0 28px 62px rgba(0,0,0,.44), 0 0 54px rgba(50,143,206,.14);
}
}
@media (prefers-reduced-motion: reduce) {
.card, .card:hover { transform: none; transition: none }
}
.card .role {
font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
color: var(--faint); margin-bottom: clamp(7px, 1.1svh, 12px);
}
.card h2 {
font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600; color: var(--white);
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.card h2 .ar {
font-family: var(--arabic); font-weight: 400; font-size: .92em; color: var(--soft);
direction: rtl;
}
.card .pos { font-size: .88rem; color: var(--faint); margin-top: 1px }
.tel {
display: inline-block;
margin: clamp(8px, 1.4svh, 14px) 0 clamp(12px, 1.9svh, 20px);
font-size: clamp(1.28rem, 2.1vw, 1.68rem); font-weight: 300;
color: var(--white); direction: ltr; unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
transition: color .25s var(--ease);
}
.tel:hover { color: var(--blue-lift) }
.actions { display: flex; gap: 10px; flex-wrap: wrap }
.actions .btn {
padding: clamp(9px, 1.4svh, 12px) 22px;
font-size: .87rem; font-weight: 500; border-radius: 999px;
min-height: 44px; /* WCAG 2.5.8 target size */
}
.btn-call { background: var(--white); color: var(--navy) }
.btn-call:hover { background: rgba(255,255,255,.84) }
.btn-wa { color: var(--pearl); border-color: rgba(255,255,255,.32) }
.btn-wa:hover { border-color: var(--white); color: var(--white) }
.btn-wa .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #1EBE57; flex-shrink: 0 }
.btn-mail { color: var(--pearl); border-color: rgba(255,255,255,.32) }
.btn-mail:hover { border-color: var(--white); color: var(--white) }
.card .mail {
display: inline-block; margin-top: clamp(10px, 1.6svh, 16px);
font-size: .87rem; color: var(--faint);
border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 1px;
transition: color .25s var(--ease), border-color .25s var(--ease);
overflow-wrap: anywhere;
}
.card .mail:hover { color: var(--pearl); border-color: var(--pearl) }
/* --- footer ---------------------------------------------------------------- */
.foot {
flex-shrink: 0;
padding-top: clamp(12px, 1.8svh, 20px);
border-top: 1px solid var(--hair);
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px 22px; flex-wrap: wrap;
font-size: .78rem; color: var(--faint);
}
.foot .ar { font-family: var(--arabic); direction: rtl }
/* The IBIX credit is styled in the CLIENT SITE'S theme — same font, same muted
colour as the copyright line. Never IBIX brand colours (playbook rule). */
.foot a {
color: var(--faint);
border-bottom: 1px solid rgba(255,255,255,.24); padding-bottom: 1px;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.foot a:hover { color: var(--pearl); border-color: var(--pearl) }
/* --- 404 ------------------------------------------------------------------ */
.code-404 {
font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 600; line-height: 1;
color: var(--blue-lift); letter-spacing: -.02em;
}
.h1-404 { margin-top: .4em; font-size: clamp(1.15rem, 2vw, 1.5rem) }
.lost-ar {
margin-top: .3em; font-family: var(--arabic); direction: rtl;
font-size: clamp(.95rem, 1.4vw, 1.1rem); color: var(--soft);
}
.mid-404 .card { margin-top: clamp(20px, 3svh, 34px) }
/* --- responsive -----------------------------------------------------------
One column below 900px. Everything stays visible; nothing is hidden that a
visitor needs, because the whole page is a phone number.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.mid {
grid-template-columns: minmax(0, 1fr);
gap: clamp(16px, 2.4svh, 30px);
align-items: start;
padding: clamp(14px, 2.2svh, 34px) 0;
}
.brandmark { align-items: center; text-align: center }
/* The whole point of this page is the phone number, so on a phone the layout
is budgeted backwards from "the Call button must be above the fold". The
logo is the one element that can give up height without costing the
visitor information, so it yields first. Measured at 360/375/414. */
.brandmark .logo { height: clamp(112px, 21svh, 186px) }
.tagline { justify-content: center; margin-top: clamp(10px, 1.5svh, 18px) }
.card { margin-top: clamp(14px, 2svh, 24px) }
}
@media (max-width: 560px) {
.top { font-size: .66rem; letter-spacing: .2em; gap: 6px 10px }
.actions .btn { flex: 1 1 auto }
.foot { flex-direction: column; align-items: flex-start; gap: 8px }
.act { padding: clamp(9px, 1.4svh, 14px) 0 }
.card { padding: clamp(14px, 2svh, 22px) 18px }
.tel { margin: clamp(6px, 1.1svh, 11px) 0 clamp(10px, 1.5svh, 16px) }
}
/* Short screens: the logo yields height first — it is the one element that can
shrink without costing the visitor information. */
@media (max-height: 700px) {
.brandmark .logo { height: clamp(104px, 22svh, 170px) }
.tagline { letter-spacing: .22em }
}
@media (max-width: 900px) and (max-height: 720px) {
.tagline { display: none }
}