/* * راديوس الذهبي — landing. * * The subject is a neighbourhood ISP: a tower, coverage radiating out, * subscribers at the edge. So the page IS a coverage field — the logo sits at * the centre of gold arcs, and pressing "دخول" collapses the coverage inward * until only the tower and the login card remain. That convergence is the one * bold thing here; everything around it stays quiet on purpose. * * Palette is night + gold because that is the operator's actual world (a mast * at dusk, a router LED), and because the brand mark is gold and a finished * logo should not be repainted to suit a page. */ :root { --night: #0b0e17; --night-2: #131a29; --night-3: #1c2436; --gold: #d8a93f; --gold-hi: #f7df9a; --signal: #37a88b; --paper: #ece6da; --paper-dim: #9aa0ae; --edge: rgba(216, 169, 63, 0.22); --hairline: rgba(255, 255, 255, 0.06); --field-edge: rgba(255, 255, 255, 0.09); --drop: rgba(0, 0, 0, 0.6); --ambient-a: rgba(216, 169, 63, 0.10); --ambient-b: rgba(55, 168, 139, 0.08); --shell: min(1180px, 92vw); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--night); color: var(--paper); font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100svh; } /* The coverage field is deliberately wider than the viewport so the rings run off the edges. Clipping belongs on the scroll container itself — overflow-x on alone still let the document scroll sideways on narrow screens. */ html { overflow-x: clip; } h1, h2, h3, .display { font-family: 'Reem Kufi', 'Tajawal', sans-serif; font-weight: 600; letter-spacing: 0; margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; } /* ── ambient ───────────────────────────────────────────────────────────── Two soft pools of light rather than a flat fill, so the night has depth without a gradient banner announcing itself. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(60rem 40rem at 50% -10%, var(--ambient-a), transparent 60%), radial-gradient(40rem 30rem at 85% 110%, var(--ambient-b), transparent 60%); z-index: 0; } .shell { position: relative; z-index: 1; width: var(--shell); margin-inline: auto; } /* ── top bar ─────────────────────────────────────────────────────────── */ .top { display: flex; align-items: center; gap: 0.75rem; padding-block: 1.5rem; } .top-logo { width: 34px; height: 34px; object-fit: contain; } .top-name { font-family: 'Reem Kufi', sans-serif; font-size: 1.05rem; color: var(--paper); } .top-actions { margin-inline-start: auto; display: flex; gap: 0.5rem; } /* ── hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; display: grid; place-items: center; text-align: center; padding-block: clamp(2rem, 7vh, 5rem) clamp(3rem, 9vh, 6rem); min-height: 68svh; /* Contains the oversized field rather than letting it widen the document. */ overflow: clip; } /* The coverage field. Every ring is the same circle at a different radius and opacity — the falloff IS the signal, so it is drawn, not faked with a blur. */ .field { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: 50% -50%; width: min(74rem, 150vw); aspect-ratio: 1; pointer-events: none; transition: scale 1s var(--ease), opacity 0.7s var(--ease); } html[dir='ltr'] .field { translate: -50% -50%; } .field circle { fill: none; stroke: var(--gold); transform-origin: center; } /* Rings breathe outward, staggered, like a sweep leaving the mast. */ .field circle { animation: sweep 6s var(--ease) infinite; opacity: 0; } .field circle:nth-child(1) { animation-delay: 0s; } .field circle:nth-child(2) { animation-delay: 1.2s; } .field circle:nth-child(3) { animation-delay: 2.4s; } .field circle:nth-child(4) { animation-delay: 3.6s; } .field circle:nth-child(5) { animation-delay: 4.8s; } @keyframes sweep { 0% { opacity: 0; scale: 0.35; } 22% { opacity: 0.55; } 100% { opacity: 0; scale: 1.05; } } .hero-inner { position: relative; display: grid; justify-items: center; gap: 1.15rem; transition: opacity 0.45s var(--ease), translate 0.55s var(--ease); } .hero-logo { width: clamp(104px, 17vw, 168px); height: auto; filter: drop-shadow(0 0 2.5rem rgba(216, 169, 63, 0.35)); transition: scale 0.7s var(--ease), translate 0.7s var(--ease); } .eyebrow { font-size: 0.82rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; } .hero h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.25; max-width: 18ch; } .hero h1 em { font-style: normal; color: var(--gold); } .lede { color: var(--paper-dim); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.9; max-width: 46ch; margin: 0; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-block-start: 0.5rem; } /* ── buttons ────────────────────────────────────────────────────────── */ .btn { appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 0.8rem 1.85rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: translate 0.18s var(--ease), background 0.18s, border-color 0.18s; } .btn:hover { translate: 0 -2px; } .btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a1e05; box-shadow: 0 0.6rem 1.6rem rgba(216, 169, 63, 0.28); } .btn-ghost { border-color: var(--edge); color: var(--paper); background: transparent; } .btn-ghost:hover { border-color: var(--gold); } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.9rem; } /* ── capability grid ────────────────────────────────────────────────── */ .caps { padding-block: clamp(2rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem); transition: opacity 0.4s var(--ease); } .caps-head { display: flex; align-items: baseline; gap: 1rem; margin-block-end: 1.75rem; } .caps-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); } .caps-head span { color: var(--paper-dim); font-size: 0.92rem; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .cap { position: relative; background: linear-gradient(180deg, var(--night-2), var(--night)); border: 1px solid var(--hairline); border-radius: 1.1rem; padding: 1.5rem 1.35rem; overflow: hidden; transition: border-color 0.2s, translate 0.2s var(--ease); } .cap:hover { border-color: var(--edge); translate: 0 -3px; } /* A single arc in the corner of every card: the same coverage motif as the hero, quiet enough to read as texture rather than as another diagram. */ .cap::after { content: ''; position: absolute; inset-block-start: -3.5rem; inset-inline-start: -3.5rem; width: 9rem; height: 9rem; border-radius: 50%; border: 1px solid var(--edge); } .cap i { font-size: 1.35rem; color: var(--gold); display: block; margin-block-end: 0.7rem; } .cap h3 { font-size: 1.05rem; margin-block-end: 0.4rem; } .cap p { margin: 0; color: var(--paper-dim); font-size: 0.92rem; line-height: 1.8; } /* ── foot ───────────────────────────────────────────────────────────── */ .foot { border-block-start: 1px solid var(--hairline); padding-block: 1.5rem 2.5rem; color: var(--paper-dim); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; } .foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0.6rem var(--signal); } /* ── login panel ────────────────────────────────────────────────────── */ .panel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1.25rem; background: rgba(6, 9, 15, 0.72); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .panel-card { width: min(27rem, 100%); max-height: 92svh; overflow-y: auto; background: linear-gradient(180deg, var(--night-2), var(--night)); border: 1px solid var(--edge); border-radius: 1.4rem; padding: 1.9rem 1.6rem; box-shadow: 0 2rem 5rem var(--drop); /* Rises from where the logo sits, which is what the convergence hands over to. */ translate: 0 2.5rem; scale: 0.94; transition: translate 0.5s var(--ease), scale 0.5s var(--ease); } /* The whole page enters "login" state together: coverage collapses to the mast, the pitch steps back, the card takes over. */ body.is-login .field { scale: 0.12; opacity: 0; } body.is-login .hero-inner { opacity: 0; translate: 0 -1.5rem; } body.is-login .caps { opacity: 0; } body.is-login .panel { opacity: 1; visibility: visible; } body.is-login .panel-card { translate: 0 0; scale: 1; } .panel-head { display: grid; justify-items: center; gap: 0.5rem; margin-block-end: 1.4rem; } .panel-head img { width: 76px; height: 76px; object-fit: contain; } .panel-head h2 { font-size: 1.25rem; } .field-row { margin-block-end: 1rem; } .field-row label { display: block; font-size: 0.85rem; color: var(--paper-dim); margin-block-end: 0.4rem; } .control { display: flex; gap: 0.5rem; } input[type='tel'], input[type='password'], input[type='text'], select { width: 100%; background: var(--night-3); border: 1px solid var(--field-edge); border-radius: 0.7rem; padding: 0.75rem 0.9rem; color: var(--paper); font: inherit; transition: border-color 0.18s; } input:focus, select:focus { border-color: var(--gold); outline: none; } select { width: auto; flex: 0 0 auto; } .peek { flex: 0 0 auto; background: var(--night-3); border: 1px solid var(--field-edge); border-radius: 0.7rem; color: var(--paper-dim); padding-inline: 0.8rem; cursor: pointer; } .check { display: flex; align-items: center; gap: 0.5rem; color: var(--paper-dim); font-size: 0.9rem; margin-block-end: 1.2rem; } .check input { accent-color: var(--gold); width: 1rem; height: 1rem; } .panel-links { display: grid; gap: 0.75rem; margin-block-start: 1.1rem; text-align: center; font-size: 0.9rem; } .panel-links a { color: var(--gold); text-decoration: none; } .panel-links a:hover { text-decoration: underline; } .alert { background: rgba(198, 42, 62, 0.15); border: 1px solid rgba(198, 42, 62, 0.4); color: #ffb3bd; border-radius: 0.7rem; padding: 0.7rem 0.9rem; font-size: 0.9rem; margin-block-end: 1rem; } .panel-close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; background: none; border: 0; color: var(--paper-dim); font-size: 1.5rem; cursor: pointer; line-height: 1; } /* ── tablet ─────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } .hero { min-height: 60svh; } .field { width: min(52rem, 165vw); } } /* ── phone ────────────────────────────────────────────────────────────── The login stops being a centred dialog and becomes a sheet off the bottom edge, because that is where a thumb is and what every other app on the device does. */ @media (max-width: 620px) { .grid { grid-template-columns: 1fr; } .hero { min-height: 56svh; padding-block-start: 1rem; } .field { width: 128vw; } .cta-row .btn { flex: 1 1 100%; justify-content: center; } .caps-head { flex-direction: column; gap: 0.25rem; } .panel { place-items: end stretch; padding: 0; } .panel-card { width: 100%; max-height: 94svh; border-radius: 1.5rem 1.5rem 0 0; border-inline: 0; border-block-end: 0; translate: 0 100%; scale: 1; } body.is-login .panel-card { translate: 0 0; } .panel-head img { width: 60px; height: 60px; } } /* ── reduced motion ───────────────────────────────────────────────────── The convergence is decorative; the state change is not. Everything still arrives, it just arrives immediately. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .field circle { opacity: 0.28; } } /* ── standalone auth pages ────────────────────────────────────────────── Register, forgot and reset are their own routes with their own server flows, so they cannot be states of the landing panel. They get the same card on the same night instead, which is what makes them feel like one product rather than two. */ .auth-wrap { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem 1.25rem 3rem; } .auth-card { position: relative; width: min(27rem, 100%); background: linear-gradient(180deg, var(--night-2), var(--night)); border: 1px solid var(--edge); border-radius: 1.4rem; padding: 2rem 1.6rem; box-shadow: 0 2rem 5rem var(--drop); } .auth-head { display: grid; justify-items: center; gap: 0.45rem; text-align: center; margin-block-end: 1.5rem; } .auth-head img { width: 72px; height: 72px; object-fit: contain; } .auth-head h1 { font-size: 1.3rem; } .auth-head p { margin: 0; color: var(--paper-dim); font-size: 0.9rem; line-height: 1.7; } .auth-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 1.5rem; color: var(--paper-dim); font-size: 0.88rem; text-decoration: none; } .auth-back:hover { color: var(--gold); } .alert-ok { background: rgba(55, 168, 139, 0.14); border: 1px solid rgba(55, 168, 139, 0.4); color: #8fe6cd; } /* ── contact ──────────────────────────────────────────────────────────── Placed last on the page, where someone who has read the pitch and still has a question goes looking. */ .contact { border-block-start: 1px solid var(--hairline); padding-block: clamp(2rem, 6vh, 3.5rem); display: grid; gap: 1.25rem; justify-items: center; text-align: center; transition: opacity 0.4s var(--ease); } body.is-login .contact { opacity: 0; } .contact h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); } .contact p { margin: 0; color: var(--paper-dim); max-width: 44ch; line-height: 1.9; } .contact-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .contact-chip { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--edge); border-radius: 999px; padding: 0.65rem 1.25rem; color: var(--paper); text-decoration: none; font-size: 0.93rem; transition: border-color 0.18s, translate 0.18s var(--ease); } .contact-chip:hover { border-color: var(--gold); translate: 0 -2px; } .contact-chip i { color: var(--gold); font-size: 1.05rem; } .contact-chip.whatsapp i { color: #37d68a; } .contact-hours { color: var(--paper-dim); font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.45rem; } @media (max-width: 620px) { .contact-row { flex-direction: column; width: 100%; } .contact-chip { justify-content: center; } } /* The header shortcut to the contact block. It is a convenience, not a headline — on a phone the header only has room for the one button that matters, so it steps out. */ .top-contact { display: inline-flex; align-items: center; gap: 0.4rem; } @media (max-width: 520px) { .top-contact { display: none; } } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ── daylight ─────────────────────────────────────────────────────────── The same page at noon rather than a different page. Every surface still derives from the six tokens above, so switching is a palette swap: the gold darkens enough to hold contrast on white, the night becomes a cool paper, and the coverage field keeps its arcs. Keyed on the same data-bs-theme attribute the panel uses, and the same localStorage key, so a choice made here survives into the dashboard. */ [data-bs-theme='light'] { --night: #f3f5fa; --night-2: #ffffff; --night-3: #eaeef6; --gold: #9a6f12; --gold-hi: #e8c465; --signal: #1f7a63; --paper: #16202f; --paper-dim: #5b6779; --edge: rgba(154, 111, 18, 0.26); --hairline: rgba(22, 32, 47, 0.09); --field-edge: rgba(22, 32, 47, 0.14); --drop: rgba(22, 32, 47, 0.16); --ambient-a: rgba(216, 169, 63, 0.20); --ambient-b: rgba(55, 168, 139, 0.10); } /* The gold button is a filled shape, not a tinted surface — it keeps the brand gradient in both themes and only the ink on it changes. */ [data-bs-theme='light'] .btn-gold { background: linear-gradient(180deg, #f0cf7a, #d8a93f); color: #2a1e05; box-shadow: 0 0.6rem 1.6rem rgba(154, 111, 18, 0.24); } /* Panels sit on paper, so the top-lit gradient that gave them depth at night would read as a smudge. Flat white, edged instead. */ [data-bs-theme='light'] .panel-card, [data-bs-theme='light'] .auth-card, [data-bs-theme='light'] .cap { background: var(--night-2); } [data-bs-theme='light'] .field circle { opacity: 0.5; } /* ── public theme / language controls ─────────────────────────────────── Small, unlabelled, and out of the way: two settings a first-time visitor may need before they can read the page at all. */ .pub-controls { display: inline-flex; align-items: center; gap: 0.4rem; } .pub-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; height: 2.35rem; padding-inline: 0.6rem; border: 1px solid var(--edge); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer; transition: border-color 0.18s, color 0.18s, translate 0.18s var(--ease); } .pub-btn:hover { border-color: var(--gold); color: var(--gold); translate: 0 -2px; } .pub-btn i { font-size: 1rem; } /* On the standalone auth pages there is no header to live in, so they pin themselves to the top corner of the night. */ .pub-controls.is-floating { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 5; } /* The mark is gold on transparent — it was drawn for a dark ground, and at card size its wordmark thins out to nothing on paper. In daylight it keeps the ground it was drawn for instead of being repainted. */ [data-bs-theme='light'] .auth-head img, [data-bs-theme='light'] .panel-head img { box-sizing: content-box; padding: 0.55rem 0.8rem; background: #101725; border-radius: 1rem; } /* At night the scrim is a deeper night. In daylight a near-black wash reads as a grey smudge over paper, so it becomes a warm haze instead — the page recedes without pretending to be dark. */ [data-bs-theme='light'] .panel { background: rgba(232, 226, 213, 0.78); } /* On a phone the card runs the full width, so the pinned controls would sit on its corner. The card starts below them instead. */ @media (max-width: 620px) { .auth-wrap { padding-block-start: 4.5rem; } } /* Both notices were written to glow on a dark card. On paper they need the ink darker than the tint, not lighter. */ [data-bs-theme='light'] .alert { color: #9d1526; } [data-bs-theme='light'] .alert-ok { color: #0f5f4b; }