/* ========================================================================== AL RIQQA CORNER COMMERCIAL BROKER (L.L.C) Holding page. A single, confident, premium screen. Committed dark treatment. A holding page for a heritage trading house should feel like one considered object, not a themeable document, so it does not switch with the system light/dark setting. Logical properties throughout, so an Arabic RTL edition is dir="rtl". ========================================================================== */ @font-face { font-family: "Source Serif 4"; src: url("../fonts/sourceserif4-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Default: committed dark treatment. */ --ink-0: #0b0c0e; /* deepest ground */ --ink-1: #101215; --paper: #f3efe6; /* warm white text */ --paper-dim: #b8b2a6; --paper-faint: #6f6a61; --gold: #c6a15b; --gold-bright: #dcbd85; --hair: rgba(232, 224, 208, 0.14); --hair-strong: rgba(232, 224, 208, 0.28); --bg: #0b0c0e; --surface: radial-gradient(120% 90% at 78% -10%, rgba(198, 161, 91, 0.16), transparent 55%), radial-gradient(90% 70% at 0% 110%, rgba(198, 161, 91, 0.07), transparent 60%), linear-gradient(180deg, #101215, #0b0c0e); --grain-opacity: 0.04; --font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-arabic: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", var(--font-text); --gutter: clamp(1.5rem, 6vw, 6rem); --wrap: 82rem; } /* Warm ivory treatment. Set data-theme="light" on to use it. */ :root[data-theme="light"] { --ink-0: #f5f0e5; --ink-1: #efe8d9; --paper: #221c14; /* now the ink */ --paper-dim: #5f584b; --paper-faint: #948b7b; --gold: #9a7430; --gold-bright: #7e5d22; --hair: rgba(34, 28, 20, 0.14); --hair-strong: rgba(34, 28, 20, 0.30); --bg: #f6f1e6; --surface: radial-gradient(120% 90% at 80% -12%, rgba(154, 116, 47, 0.10), transparent 55%), radial-gradient(90% 70% at -5% 112%, rgba(154, 116, 47, 0.06), transparent 60%), linear-gradient(180deg, #faf6ec, #f1ebdd); --grain-opacity: 0.05; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-block-size: 100svh; display: flex; flex-direction: column; background-color: var(--bg); /* Layered warmth: a low gold glow off the top, settling into the ground. */ background-image: var(--surface); color: var(--paper); font-family: var(--font-text); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.65; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; position: relative; overflow-x: hidden; } /* Fine film grain, so large flat dark areas read as material rather than flat fill. Pure inline SVG, no network request. */ body::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: inherit; text-decoration: none; } ::selection { background: rgba(198, 161, 91, 0.28); color: var(--paper); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 1px; } .wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* -------------------------------------------------------------------------- Masthead -------------------------------------------------------------------------- */ .top { position: relative; z-index: 3; padding-block: clamp(1.5rem, 3vw, 2.4rem); } .top__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.85rem; } .brand__mark { inline-size: 2.15rem; block-size: 2.15rem; color: var(--gold); flex: none; } .brand__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; } .top__enquire { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); padding-block-end: 0.2rem; border-block-end: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; } .top__enquire:hover { color: var(--gold-bright); border-block-end-color: var(--gold); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; z-index: 3; flex: 1 1 auto; display: flex; align-items: center; padding-block: clamp(3rem, 9vh, 8rem); } .hero__inner { max-inline-size: 52rem; } .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; max-inline-size: 100%; font-size: clamp(0.62rem, 0.56rem + 0.3vw, 0.72rem); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 clamp(1.5rem, 3vw, 2.4rem); } .eyebrow::before { content: ""; inline-size: clamp(1.75rem, 4vw, 3rem); block-size: 1px; background: var(--gold); opacity: 0.7; } h1 { margin: 0; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: clamp(2.55rem, 1rem + 8.5vw, 7.2rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; } .h1__firm { display: block; margin-block-start: 1.1rem; font-family: var(--font-text); font-size: clamp(0.72rem, 0.64rem + 0.5vw, 0.95rem); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--paper-dim); overflow-wrap: break-word; } .lead { margin: clamp(2rem, 4vw, 3rem) 0 0; max-inline-size: 34ch; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); font-weight: 300; line-height: 1.45; letter-spacing: -0.01em; color: var(--paper); } /* -------------------------------------------------------------------------- Contact rail -------------------------------------------------------------------------- */ .rule { border: 0; block-size: 1px; background: var(--hair); margin-block: clamp(2.5rem, 5vw, 3.75rem) 0; } .contact { position: relative; z-index: 3; padding-block: clamp(2.25rem, 4vw, 3.25rem); } .contact__grid { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; } @media (min-width: 46rem) { .contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .field__label { display: block; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-block-end: 0.7rem; } .field__value { font-family: var(--font-display); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); font-weight: 400; line-height: 1.45; color: var(--paper); font-variant-numeric: tabular-nums; } .field__value a { border-block-end: 1px solid var(--hair-strong); padding-block-end: 0.12em; transition: border-color 160ms ease, color 160ms ease; } .field__value a:hover { color: var(--gold-bright); border-block-end-color: var(--gold); } .field__note { display: block; margin-block-start: 0.35rem; font-family: var(--font-text); font-size: 0.85rem; color: var(--paper-faint); letter-spacing: 0; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { position: relative; z-index: 3; border-block-start: 1px solid var(--hair); padding-block: clamp(1.75rem, 3vw, 2.5rem); } .foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; font-size: 0.78rem; color: var(--paper-faint); letter-spacing: 0.02em; } .foot__record { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-variant-numeric: tabular-nums; } .foot__ar { font-family: var(--font-arabic); font-size: 0.95rem; color: var(--paper-dim); direction: rtl; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { [data-rise] { opacity: 0; transform: translateY(1.1rem); animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) forwards; } [data-rise="1"] { animation-delay: 0.05s; } [data-rise="2"] { animation-delay: 0.16s; } [data-rise="3"] { animation-delay: 0.28s; } [data-rise="4"] { animation-delay: 0.42s; } [data-rise="5"] { animation-delay: 0.56s; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } } .uline { border-block-end: 1px solid var(--hair-strong); padding-block-end: 0.1em; transition: border-color 160ms ease, color 160ms ease; } .uline:hover { color: var(--gold-bright); border-block-end-color: var(--gold); } .skip { position: absolute; inset-block-start: -100vh; inset-inline-start: 1rem; z-index: 10; background: var(--paper); color: var(--ink-0); padding: 0.6rem 1rem; font-size: 0.85rem; } .skip:focus { inset-block-start: 1rem; }