/* ============================================================================ الركين · alrakeen.co — v3 shared stylesheet Style contract: «نور × ليل» carried forward from v2 (index.html / pos.html). Light premium foundation (نور) + dark product islands (ليل) for every UI fragment and the closing band. Token NAMES are the v2 ones on purpose — --ink / --paper / --card / --line / --blue / --pos-* / --r-* / --ease. Self-hosted Graphik Arabic only. Zero external requests. RTL-first. Loaded by every generated v3 page; nothing here may depend on page order. ========================================================================== */ /* ------------------------------------------------------- brand webfont --- */ @font-face{font-family:'Graphik Arabic';font-weight:400;font-display:swap;src:url(/assets/fonts/graphik-regular.woff2?v=3) format('woff2');} @font-face{font-family:'Graphik Arabic';font-weight:500;font-display:swap;src:url(/assets/fonts/graphik-medium.woff2?v=3) format('woff2');} @font-face{font-family:'Graphik Arabic';font-weight:600;font-display:swap;src:url(/assets/fonts/graphik-semibold.woff2?v=3) format('woff2');} @font-face{font-family:'Graphik Arabic';font-weight:900;font-display:swap;src:url(/assets/fonts/graphik-black.woff2?v=3) format('woff2');} /* -------------------------------------------------------------- tokens --- */ :root { --ink: #0E1116; --ink-2: #464E5C; --ink-3: #757E8C; --ink-4: #9BA2AE; --page: #FAFBFC; --paper: #FAFBFC; --paper-2: #F5F6F8; --paper-3: #EDEFF3; --card: #FFFFFF; --line: #E6E8EC; --line-2: #EFF1F4; --blue: #3283FF; --blue-deep: #1E63D6; --blue-wash: rgba(50,131,255,.07); --blue-line: rgba(50,131,255,.22); --green: #1DA45A; --red: #E5484D; --amber: #B0730A; /* ليل — the cockpit palette every UI fragment is drawn in */ --pos-0: #0A0C10; --pos-1: #0E1219; --pos-2: #141A22; --pos-3: #1C232D; --pos-line: rgba(255,255,255,.08); --pos-line-2: rgba(255,255,255,.15); --pos-ink: #EAEDF2; --pos-dim: #8B94A2; --pos-dim-2: #697487; --pos-blue: #8FB9FF; --pos-green: #3ED08A; --pos-amber: #F0B24A; --pos-red: #FF9A9C; --r-s: 12px; --r-m: 18px; --r-l: 26px; --r-xl: 34px; --ease: cubic-bezier(.22,.61,.36,1); --hd-h: 68px; } /* ---------------------------------------------------------------- base --- */ /* NOTE: the root deliberately does NOT clip — `overflow` on makes the viewport a clipping context and breaks headless full-page capture (the Playwright rig in P5 needs it). Decorative bleed is clipped per section. */ html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; background: var(--page); color-scheme: light; } body.page { font-family: 'Graphik Arabic', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; } .page *, .page *::before, .page *::after { box-sizing: border-box; } .page h1, .page h2, .page h3, .page h4, .page p, .page ul, .page ol, .page figure { margin: 0; } .page ul, .page ol { padding: 0; list-style: none; } .page a { color: inherit; text-decoration: none; } .page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .page img, .page svg { max-width: 100%; } ::selection { background: rgba(50,131,255,.2); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .skip { position: fixed; inset-inline-start: 14px; top: 14px; z-index: 300; background: var(--blue-deep); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14.5px; transform: translateY(-250%); transition: transform .2s; } .skip:focus { transform: none; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; unicode-bidi: isolate; direction: ltr; display: inline-block; } .lat { direction: ltr; unicode-bidi: isolate; display: inline-block; } .ic { width: 18px; height: 18px; flex: none; } /* -------------------------------------------------------------- layout --- */ .wrap { width: min(1180px, 100% - 36px); margin-inline: auto; position: relative; z-index: 2; } .wrap-narrow { width: min(820px, 100% - 36px); } @media (max-width: 560px) { .wrap { width: min(1180px, 100% - 26px); } .wrap-narrow { width: min(820px, 100% - 26px); } } .sec { padding-block: clamp(60px, 7.6vw, 122px); position: relative; overflow: clip; } .sec-tight { padding-block: clamp(26px, 3.4vw, 46px); position: relative; } .center { text-align: center; } /* ---------------------------------------------------------------- type --- */ .display { font-weight: 900; line-height: 1.08; color: var(--ink); letter-spacing: -.004em; text-wrap: balance; } .d-hero { font-size: clamp(35px, 5.6vw, 66px); line-height: 1.08; } .d-sec { font-size: clamp(27px, 3.7vw, 46px); line-height: 1.14; } .d-sm { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.22; } .hl { color: var(--blue); } .lead { font-size: clamp(16.5px, 1.3vw, 19px); color: var(--ink-2); line-height: 1.82; text-wrap: pretty; } .small { font-size: 14px; color: var(--ink-3); line-height: 1.72; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--blue-deep); background: var(--blue-wash); border: 1px solid var(--blue-line); border-radius: 999px; padding: 6px 15px; margin-bottom: 20px; } .eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: block; flex: none; } .sh { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(34px, 4.6vw, 58px); } .sh .lead { margin-top: 14px; } .sh.start { margin-inline: 0; text-align: start; } /* ------------------------------------------------------------- buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-weight: 600; font-size: 15.5px; padding: 13px 24px; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; transition: transform .3s var(--ease), background-color .22s, border-color .22s, color .22s; } .btn .ic { width: 17px; height: 17px; } /* `.page a { color: inherit }` outranks a single-class color — the filled buttons must pin white at matching specificity or they render ink-on-blue (owner-reported). */ .btn-primary, .page a.btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); } .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: #CDD3DC; transform: translateY(-2px); } .btn-wa, .page a.btn-wa { background: #1FA855; color: #fff; } .btn-wa:hover { background: #17924A; transform: translateY(-2px); } .btn-lg { font-size: 16.5px; padding: 16px 30px; } .btn-sm { font-size: 14px; padding: 9px 17px; } .cta-row { display: flex; flex-wrap: wrap; gap: 11px; } .center-row { justify-content: center; } /* ================================================================ header = */ .hd { position: sticky; top: 0; z-index: 70; padding-block: 12px; transition: transform .38s var(--ease), opacity .28s var(--ease); } .hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(250,251,252,.84); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } html.hd-stuck .hd::before { background: rgba(250,251,252,.94); border-bottom-color: var(--line); } html.sub-on .hd { transform: translateY(-104%); opacity: 0; pointer-events: none; } .hd-in { width: min(1180px, 100% - 36px); margin-inline: auto; display: flex; align-items: center; gap: 10px; } @media (max-width: 560px) { .hd-in { width: min(1180px, 100% - 22px); } } .hd-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 900; font-size: 19px; letter-spacing: -.01em; } .hd-brand .mark { height: 22px; width: auto; color: var(--ink); } .hd-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 14px; } .hd-l { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .18s, background-color .18s; } .hd-l:hover { color: var(--ink); background: var(--paper-3); } .hd-l .cv { width: 15px; height: 15px; opacity: .6; transition: transform .22s var(--ease); } .hd-t[aria-expanded="true"] { color: var(--ink); background: var(--paper-3); } .hd-t[aria-expanded="true"] .cv { transform: rotate(180deg); } .hd-cta { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; } .hd-wa { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #157A43; background: rgba(29,164,90,.09); border: 1px solid rgba(29,164,90,.24); transition: background-color .2s, transform .3s var(--ease); } .hd-wa .ic { width: 16px; height: 16px; } .hd-wa:hover { background: rgba(29,164,90,.16); transform: translateY(-1px); } @media (max-width: 900px) { .hd-nav .hd-l:not(.hd-t) { display: none; } } @media (max-width: 700px) { .hd-brand span { display: none; } .hd-wa span { display: none; } .hd-wa { padding: 8px 10px; } .hd-nav { margin-inline-start: 6px; } .hd-l { padding: 8px 10px; font-size: 14px; } } /* ============================================================= takeovers = */ html.tk-open, html.tk-open body { overflow: hidden; } .tk { position: fixed; inset: 0; z-index: 200; } .tk[hidden] { display: none; } .tk-scrim { position: absolute; inset: 0; background: rgba(14,17,22,.44); opacity: 0; transition: opacity .32s var(--ease); } .tk.is-open .tk-scrim { opacity: 1; } /* full-screen takeover — it owns the whole chrome while open (Daftra model) */ .tk-panel { position: absolute; inset: 0; background: var(--page); display: flex; flex-direction: column; transform: translateX(-14%); opacity: 0; transition: transform .44s var(--ease), opacity .3s var(--ease); } [dir="rtl"] .tk-panel { transform: translateX(14%); } .tk.is-open .tk-panel { transform: none; opacity: 1; } /* content sits in the same 1180 measure as the page; the rules go full bleed */ .tk-top, .tk-scroll { padding-inline: max((100% - 1180px) / 2, 18px); } .tk-top { flex: none; display: flex; align-items: center; gap: 12px; padding-block: 15px; border-bottom: 1px solid var(--line); background: rgba(250,251,252,.9); } .tk-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; } .tk-title .ic { width: 19px; height: 19px; color: var(--blue); } .tk-x { margin-inline-start: auto; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); background: var(--card); transition: background-color .18s, color .18s; } .tk-x:hover { background: var(--paper-3); color: var(--ink); } .tk-scroll { flex: 1; overflow-y: auto; padding-block: clamp(22px, 3vw, 42px) 46px; overscroll-behavior: contain; } .tk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 38px) clamp(18px, 2.4vw, 34px); } @media (max-width: 900px) { .tk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .tk-cols { grid-template-columns: 1fr; } } .tk-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; letter-spacing: .01em; color: var(--ink-3); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .tk-h .ic { width: 15px; height: 15px; color: var(--blue); } .tk-item > a, .tk-item > span { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 13px; transition: background-color .18s, transform .25s var(--ease); } .tk-item > a:hover { background: var(--card); transform: translateX(-3px); } [dir="rtl"] .tk-item > a:hover { transform: translateX(3px); } .tk-item .ic { width: 19px; height: 19px; margin-top: 3px; color: var(--blue-deep); } .tk-txt { min-width: 0; } .tk-txt b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; } .tk-txt i { display: block; font-style: normal; font-size: 12.8px; color: var(--ink-3); line-height: 1.5; } .tk-item.is-soon { opacity: .62; } .tk-item.is-soon .ic { color: var(--ink-4); } .tk-item.is-soon .tk-txt b { color: var(--ink-2); font-weight: 500; } .tk-soon { align-self: center; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-4); white-space: nowrap; } .tk-soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); opacity: .75; } .tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; } .tk-tile > a, .tk-tile > span { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); height: 100%; transition: border-color .2s, transform .28s var(--ease), background-color .2s; } .tk-tile > a:hover { border-color: var(--blue-line); background: var(--blue-wash); transform: translateY(-3px); } .tk-tile .ic { width: 20px; height: 20px; color: var(--blue-deep); } .tk-tile b { font-size: 14.5px; font-weight: 600; } .tk-tile.is-soon > span { background: var(--paper-2); border-style: dashed; opacity: .74; } .tk-tile.is-soon .ic { color: var(--ink-4); } .tk-note { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); } .tk-rail { margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; } .tk-rail-i { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .18s, color .18s, border-color .18s; } a.tk-rail-i:hover { background: var(--card); color: var(--ink); border-color: #D6DBE2; } .tk-rail-i.is-soon { opacity: .6; } .tk-rail-i i { font-style: normal; font-size: 11px; color: var(--ink-4); } /* staggered reveal — pure CSS, driven by --i on each item */ .tk-item, .tk-tile, .tk-rail-i { opacity: 0; transform: translateY(9px); } .tk.is-open .tk-item, .tk.is-open .tk-tile, .tk.is-open .tk-rail-i { animation: tkIn .46s var(--ease) both; animation-delay: calc(var(--i, 0) * 26ms + 90ms); } @keyframes tkIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .tk.is-open .tk-h { animation: tkIn .4s var(--ease) both; } /* ========================================================= product subnav = */ .sub { position: fixed; inset-inline: 0; top: 0; z-index: 68; background: rgba(250,251,252,.94); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--line); transform: translateY(-104%); opacity: 0; pointer-events: none; transition: transform .38s var(--ease), opacity .28s var(--ease); } html.sub-on .sub { transform: none; opacity: 1; pointer-events: auto; } .sub-in { width: min(1180px, 100% - 36px); margin-inline: auto; display: flex; align-items: center; gap: 14px; padding-block: 10px; } .sub-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; } .sub-brand .mark { height: 19px; width: auto; color: var(--ink); } .sub-brand b { font-weight: 900; } .sub-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 8px; overflow-x: auto; scrollbar-width: none; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav a { padding: 8px 13px; border-radius: 999px; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; transition: color .18s, background-color .18s; } .sub-nav a:hover, .sub-nav a.on { color: var(--ink); background: var(--paper-3); } .sub-in .btn { margin-inline-start: auto; } .sub-sentinel { display: block; height: 1px; margin-top: -1px; } @media (max-width: 700px) { .sub-brand b { display: none; } } /* ================================================================= hero == */ .hero { padding-block: clamp(46px, 6vw, 92px) clamp(52px, 6.6vw, 104px); overflow: clip; } .hero-wash { position: absolute; inset: -18% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none; } .hero-wash i { position: absolute; display: block; border-radius: 50%; filter: blur(72px); } .hero-wash i:first-child { inset-inline-end: 4%; top: -6%; width: 46vw; height: 46vw; background: radial-gradient(closest-side, rgba(50,131,255,.16), transparent); } .hero-wash i:last-child { inset-inline-start: 8%; top: 16%; width: 34vw; height: 34vw; background: radial-gradient(closest-side, rgba(124,96,255,.10), transparent); } .hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(26px, 4vw, 62px); align-items: center; } .hero-wide .hero-in { grid-template-columns: 1fr; max-width: 860px; text-align: center; } .hero-wide .cta-row, .hero-wide .risk { justify-content: center; } @media (max-width: 940px) { .hero-in { grid-template-columns: 1fr; } } .hero-copy { max-width: 620px; } .hero-sub { margin-top: 18px; font-size: clamp(16.5px, 1.4vw, 19.5px); color: var(--ink-2); line-height: 1.8; max-width: 560px; text-wrap: pretty; } .hero-wide .hero-copy, .hero-wide .hero-sub { max-width: none; margin-inline: auto; } .hero .cta-row { margin-top: 26px; } .hero-art { position: relative; } .risk { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; } .risk li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); } .risk .tick { width: 15px; height: 15px; color: var(--green); } .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .pills li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink-2); } .pills .tick { width: 13px; height: 13px; color: var(--blue); } /* ====================================================== domain sections == */ .dom-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(26px, 4vw, 64px); align-items: center; } @media (max-width: 940px) { .dom-in { grid-template-columns: 1fr; } } .dom.flip .dom-copy { order: 2; } @media (max-width: 940px) { .dom.flip .dom-copy { order: 0; } } .dom-eye { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 5px 13px 5px 11px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 16px; } .dom-eye .ic { width: 15px; height: 15px; color: var(--blue-deep); } .claim { margin-top: 22px; padding-inline-start: 15px; border-inline-start: 2px solid var(--line); } .claim h3 { font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 600; color: var(--ink); line-height: 1.5; } .claim p { margin-top: 7px; font-size: 15.5px; color: var(--ink-2); line-height: 1.8; text-wrap: pretty; } .dom-art { position: relative; } .dom-art::before { content: ""; position: absolute; inset: -8% -5%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(58% 58% at 32% 28%, rgba(50,131,255,.16), transparent 72%); filter: blur(42px); } .dom-dark { background: var(--pos-0); color: var(--pos-ink); } .dom-dark .display, .dom-dark .claim h3 { color: var(--pos-ink); } .dom-dark .claim { border-inline-start-color: var(--pos-line-2); } .dom-dark .claim p { color: var(--pos-dim); } .dom-dark .dom-eye { background: rgba(255,255,255,.05); border-color: var(--pos-line); color: var(--pos-dim); } .dom-dark .dom-eye .ic { color: var(--pos-blue); } .dom-dark .pills li { background: rgba(255,255,255,.04); border-color: var(--pos-line); color: var(--pos-ink); } .dom-dark .pills .tick { color: var(--pos-blue); } /* ==================================================== interrupt banner === */ .itr-wrap { z-index: 3; } .itr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--r-l); background: linear-gradient(100deg, rgba(50,131,255,.09), rgba(50,131,255,.03)); border: 1px solid var(--blue-line); } .itr-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; } .itr-ic .ic { width: 19px; height: 19px; } .itr p { flex: 1; min-width: 220px; font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.7; } .itr-go { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--blue-deep); padding: 9px 17px; border-radius: 999px; background: var(--card); border: 1px solid var(--blue-line); transition: transform .28s var(--ease); } .itr-go .ic { width: 15px; height: 15px; } .itr-go:hover { transform: translateY(-2px); } /* ============================================================== hardware = */ .hw-sec { background: var(--paper-2); border-block: 1px solid var(--line); } .hw { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; } .hw-i { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px 16px; text-align: center; transition: transform .3s var(--ease), border-color .22s; } .hw-i:hover { transform: translateY(-3px); border-color: #D8DDE4; } .hw-ic { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 14px; display: grid; place-items: center; background: var(--paper-3); color: var(--ink-2); } .hw-ic .ic { width: 21px; height: 21px; } .hw-i b { display: block; font-size: 15px; font-weight: 600; } .hw-i i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 3px; } /* ================================================================== tabs = */ .tb { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); overflow: hidden; } .tb-bar { display: flex; gap: 4px; padding: 8px; background: var(--paper-2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tb-bar::-webkit-scrollbar { display: none; } .tb-bar button { padding: 9px 17px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color .18s, color .18s; } .tb-bar button:hover { color: var(--ink); } .tb-bar button[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 600; border: 1px solid var(--line); } .tb-panes { padding: clamp(18px, 2.4vw, 30px); } .tb-p { font-size: 15.5px; color: var(--ink-2); line-height: 1.82; animation: tbIn .32s var(--ease) both; } @keyframes tbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* =================================================================== FAQ = */ .acc { border-top: 1px solid var(--line); } .acc-i { border-bottom: 1px solid var(--line); } .acc-i summary { display: flex; align-items: center; gap: 14px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; color: var(--ink); line-height: 1.6; } .acc-i summary::-webkit-details-marker { display: none; } .acc-i summary span { flex: 1; } .acc-i summary .cv { width: 20px; height: 20px; flex: none; color: var(--ink-3); transition: transform .3s var(--ease); } .acc-i[open] summary .cv { transform: rotate(180deg); } .acc-i summary:hover { color: var(--blue-deep); } .acc-b { padding: 0 4px 22px; } .acc-b p { font-size: 15.5px; color: var(--ink-2); line-height: 1.86; max-width: 68ch; text-wrap: pretty; } .acc-i[open] .acc-b { animation: tbIn .34s var(--ease) both; } /* ============================================================ CTA close == */ .ctab { background: var(--pos-0); color: var(--pos-ink); overflow: clip; } .ctab::before { content: ""; position: absolute; inset: auto 0 -46% 0; height: 70%; z-index: 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 100%, rgba(50,131,255,.30), transparent 72%); filter: blur(10px); } .ctab .display { color: #fff; } .ctab .lead { color: var(--pos-dim); margin-top: 16px; } .ctab .small { color: var(--pos-dim-2); margin-top: 20px; } .ctab .cta-row { margin-top: 28px; } .ctab .btn-ghost { background: rgba(255,255,255,.05); color: var(--pos-ink); border-color: var(--pos-line-2); } .ctab .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); } /* ============================================================ stat block = */ .stat { text-align: center; } .stat b { font-size: clamp(30px, 4vw, 50px); font-weight: 900; line-height: 1.1; color: var(--ink); } .stat em { font-style: normal; font-size: .6em; font-weight: 900; color: var(--blue); } .stat i { display: block; font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: 6px; } /* ============================================================== footer === */ .ft { background: var(--pos-0); color: var(--pos-ink); padding-block: clamp(48px, 6vw, 84px) 34px; } .ft-in { width: min(1180px, 100% - 36px); margin-inline: auto; } @media (max-width: 560px) { .ft-in { width: min(1180px, 100% - 26px); } } .ft-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 24px; padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid var(--pos-line); } @media (max-width: 860px) { .ft-head { grid-template-columns: 1fr; } } .ft-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; color: #fff; } .ft-brand .mark { height: 23px; width: auto; color: #fff; } .ft-say { font-size: 14.5px; color: var(--pos-dim); max-width: 420px; } .ft-act { display: flex; gap: 9px; flex-wrap: wrap; } .ft-act .hd-wa { background: rgba(62,208,138,.12); border-color: rgba(62,208,138,.3); color: var(--pos-green); } .ft-act .hd-wa:hover { background: rgba(62,208,138,.2); } .ft-act .hd-wa span { display: inline; } .ft-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 38px); } @media (max-width: 860px) { .ft-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .ft-map { grid-template-columns: 1fr; } } .ft-col h3 { font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: var(--pos-dim); margin-bottom: 12px; } .ft-col li { line-height: 1.9; } .ft-col a, .ft-col span { font-size: 14px; color: #C2C9D4; transition: color .18s; } .ft-col a:hover { color: #fff; } .ft-col span { color: #626C7B; } .ft-legal { margin-top: clamp(30px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--pos-line); font-size: 12.5px; color: #6B7484; line-height: 1.9; } /* ==================================================== UI-fragment slots == */ .fr { position: relative; z-index: 1; border-radius: var(--r-l); overflow: hidden; background: var(--pos-0); border: 1px solid rgba(0,0,0,.55); color: var(--pos-ink); box-shadow: 0 40px 80px -52px rgba(10,12,16,.6); } .fr-bar { display: flex; align-items: center; gap: 8px; padding: 12px 15px; background: var(--pos-1); border-bottom: 1px solid var(--pos-line); } .fr-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); display: block; flex: none; } .fr-bar i:first-child { background: rgba(50,131,255,.62); } .fr-bar b { font-size: 13px; font-weight: 600; margin-inline-start: 6px; white-space: nowrap; } .fr-tag { font-size: 11.5px; font-weight: 600; color: var(--pos-blue); padding: 3px 10px; border-radius: 999px; background: rgba(50,131,255,.13); border: 1px solid rgba(50,131,255,.28); white-space: nowrap; } .fr-meta { margin-inline-start: auto; font-size: 11.5px; color: var(--pos-dim); white-space: nowrap; } .fr-bar .fr-tag + .fr-meta { margin-inline-start: auto; } .fr-body { padding: 15px; } /* a real capture fills its shell edge to edge — the frame IS the padding */ .fr-shot .fr-body { padding: 0; } .fr-shot img { display: block; width: 100%; height: auto; border-radius: inherit; } /* portrait crops (the till column) would tower over the copy at full width */ .fr-shot-tall { max-width: 372px; margin-inline: auto; } .fr-slot { display: grid; place-items: center; min-height: 260px; background: var(--pos-1); border-style: dashed; border-color: var(--pos-line-2); box-shadow: none; } .fr-slot-in { text-align: center; color: var(--pos-dim); } .fr-slot-in .ic { width: 26px; height: 26px; margin: 0 auto 10px; opacity: .7; } .fr-slot-in b { font-size: 14px; font-weight: 600; } /* rows shared by several fragments */ .fr-lines li, .fr-stock li, .fr-shift li { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); margin-bottom: 7px; font-size: 13.5px; } .fr-lines .q { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(50,131,255,.15); color: var(--pos-blue); font-size: 12px; font-weight: 900; } .fr-lines .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fr-lines .v { font-weight: 600; color: #CBD3DF; } .fr-lines .is-new { border-color: rgba(50,131,255,.3); background: rgba(50,131,255,.07); } .fr-total { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 13px 14px; border-radius: 13px; background: rgba(50,131,255,.1); border: 1px solid rgba(50,131,255,.26); } .fr-total span { font-size: 13px; color: var(--pos-dim); } .fr-total b { margin-inline-start: auto; font-size: 20px; font-weight: 900; color: #fff; } .fr-total em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pos-blue); } .fr-keys { display: flex; gap: 7px; margin-top: 11px; } .fr-keys span { flex: 1; text-align: center; padding: 9px 6px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid var(--pos-line); color: var(--pos-dim); } .fr-keys .on { background: rgba(50,131,255,.16); border-color: rgba(50,131,255,.34); color: var(--pos-blue); } .fr-kds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .kt { border-radius: 13px; background: var(--pos-2); border: 1px solid var(--pos-line); padding: 11px 12px; } .kt header { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--pos-line); } .kt header b { font-weight: 900; } .kt header span { color: var(--pos-dim); font-size: 11.5px; } .kt li { font-size: 12.8px; color: #CBD3DF; line-height: 1.75; } .kt footer { margin-top: 9px; font-size: 11px; color: var(--pos-dim); } .kt.is-late { border-color: rgba(240,178,74,.4); box-shadow: inset 0 0 0 1px rgba(240,178,74,.1); } .kt.is-late header span { color: var(--pos-amber); font-weight: 600; } .kt.is-done { opacity: .62; } .kt.is-done header span { color: var(--pos-green); font-weight: 600; } .fr-floor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .fr-floor .tl { border: 1px solid var(--pos-line); border-radius: 13px; background: var(--pos-2); padding: 14px 8px; display: grid; place-items: center; gap: 3px; text-align: center; } .fr-floor .tl b { font-size: 15px; font-weight: 900; } .fr-floor .tl i { font-style: normal; font-size: 11.5px; color: var(--pos-dim); } .fr-floor .is-busy { background: rgba(50,131,255,.1); border-color: rgba(50,131,255,.3); } .fr-floor .is-busy i { color: var(--pos-blue); font-weight: 600; } .fr-floor .is-split { background: rgba(240,178,74,.09); border-color: rgba(240,178,74,.32); } .fr-floor .is-split i { color: var(--pos-amber); font-weight: 600; } .fr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; } .fr-kpis span { border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--pos-line); padding: 11px 10px; text-align: center; } .fr-kpis i { display: block; font-style: normal; font-size: 11px; color: var(--pos-dim); } .fr-kpis b { display: block; font-size: 15px; font-weight: 900; margin-top: 3px; } .fr-bars li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; } .fr-bars span { color: var(--pos-dim); } .fr-bars i { height: 7px; border-radius: 999px; background: rgba(255,255,255,.06); position: relative; display: block; } .fr-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w, 40%); border-radius: 999px; background: linear-gradient(90deg, var(--blue), #7FB0FF); } .fr-bars b { font-weight: 600; color: #CBD3DF; } .fr-aud article { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); margin-bottom: 7px; } .fr-aud .k { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 7px; white-space: nowrap; background: rgba(229,72,77,.14); color: var(--pos-red); border: 1px solid rgba(229,72,77,.3); } .fr-aud .k.d { background: rgba(240,178,74,.13); color: var(--pos-amber); border-color: rgba(240,178,74,.3); } .fr-aud b { display: block; font-size: 13px; font-weight: 600; } .fr-aud i { display: block; font-style: normal; font-size: 11.5px; color: var(--pos-dim); margin-top: 2px; } .fr-aud .v { font-size: 13px; font-weight: 900; color: var(--pos-red); white-space: nowrap; } .fr-aud .v.d { color: var(--pos-amber); } .fr-stock li span { flex: 1; } .fr-stock b { font-weight: 600; color: #CBD3DF; } .fr-stock i { font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: 999px; } .fr-stock .ok { background: rgba(62,208,138,.12); color: var(--pos-green); } .fr-stock .warn { background: rgba(240,178,74,.13); color: var(--pos-amber); } .fr-stock .low { border-color: rgba(240,178,74,.28); } .fr-shift li span { flex: 1; color: var(--pos-dim); } .fr-shift b { font-weight: 600; color: #CBD3DF; } .fr-shift .exp { border-color: var(--pos-line-2); } .fr-shift .exp b, .fr-shift .cnt b { color: #fff; font-weight: 900; } .fr-shift .cnt { background: rgba(50,131,255,.08); border-color: rgba(50,131,255,.26); } .fr-ok { margin-top: 11px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; background: rgba(62,208,138,.1); border: 1px solid rgba(62,208,138,.26); color: var(--pos-green); font-size: 13px; font-weight: 600; } .fr-ok .ic { width: 15px; height: 15px; } .fr-menu { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; } .fr-qr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 10px; border-radius: 13px; background: #fff; } .fr-qr i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--pos-0); } .fr-qr i:nth-child(2), .fr-qr i:nth-child(4), .fr-qr i:nth-child(6), .fr-qr i:nth-child(8) { background: #C8CFDA; } .fr-menu ul li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); margin-bottom: 7px; font-size: 13px; } .fr-menu ul li b { font-weight: 600; } .fr-menu ul li span { color: var(--pos-dim); font-size: 12px; } .fr-dev { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; } .fr-dev .dv { border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid var(--pos-line); padding: 13px 11px; display: grid; place-items: center; gap: 3px; text-align: center; } .fr-dev .dv .ic { width: 20px; height: 20px; color: var(--pos-dim); margin-bottom: 4px; } .fr-dev .dv b { font-size: 12.8px; font-weight: 600; } .fr-dev .dv i { font-style: normal; font-size: 11px; color: var(--pos-dim); } .fr-dev .is-main { background: rgba(50,131,255,.11); border-color: rgba(50,131,255,.32); } .fr-dev .is-main .ic { color: var(--pos-blue); } /* ================================================== motion (v2 pack) ===== */ /* Reveal-on-scroll is PROGRESSIVE: content is visible by default and only hides once the script ARMS it (html.rva) with a live IntersectionObserver + a safety reveal timer. Any context where JS or IO never runs (crawlers, throttled background tabs, headless renders) gets the full page — an SEO site must never render blank. */ html.rva .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); } html.rva .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .page *, .page *::before, .page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .rv { opacity: 1; transform: none; } .tk-item, .tk-tile, .tk-rail-i { opacity: 1; transform: none; } }