/* ============================================================ REVORA NFC — live profile pages One stylesheet, six looks. Each page sets a look class on (look-ledger, look-creator, look-cafe, look-studio, look-property, look-care) and the tokens below do the rest. Mobile first at real phone size; on a wide screen the page sits in a phone shaped column. The dashboard imports this file too, scoped under .pf at build time by dashboard/vite.config.ts. So: keep the lines that plugin rewrites exactly as they are, start every rule on its own line, never put a comma inside :is() or :not(), and write @media blocks over several lines. Text floor: 12px everywhere, in both languages. ============================================================ */ :root{ --sans:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Georgia,"Times New Roman",serif; --mono:'Space Mono',ui-monospace,Menlo,monospace; --arabic:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif; --pad:24px; --ink:#1f2526; --bg:#f7f5ef; --line:rgba(27,37,37,.14); --action-bg:#172d2b; --action-ink:#fff; --action-r:10px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--bg)} body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.45; color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} html[dir="rtl"] body{font-family:var(--arabic)} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} img{display:block;max-width:100%} :focus-visible{outline:2px solid currentColor;outline-offset:3px} /* the page column ------------------------------------------------ */ .page{position:relative;max-width:430px;margin:0 auto;min-height:100svh; display:flex;flex-direction:column;overflow:hidden; padding-top:max(env(safe-area-inset-top),34px); padding-bottom:max(env(safe-area-inset-bottom),18px)} @media(min-width:640px){ body{background:color-mix(in srgb,var(--bg) 86%,#000 14%);min-height:100vh; display:grid;place-items:center;padding:36px 0} .page{width:430px;min-height:0;margin:0;border-radius:40px;background:var(--bg); box-shadow:0 50px 110px -50px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05); padding-top:34px} } /* shared parts --------------------------------------------------- */ .top{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:12px var(--pad) 16px;font-size:12px;font-weight:700;letter-spacing:.04em; text-transform:uppercase} .top button{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12px} .pad{padding:0 var(--pad)} .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} h1{font-family:var(--sans);font-size:46px;font-weight:600;line-height:1.03; letter-spacing:-.045em;margin:16px 0;color:inherit} html[dir="rtl"] h1{letter-spacing:0;line-height:1.3} .page p{font-size:15.5px;line-height:1.55;margin:10px 0 18px;opacity:.82} .action{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 20px;margin:18px 0;border-radius:var(--action-r); background:var(--action-bg);color:var(--action-ink); font-size:14px;font-weight:600; transition:transform .15s ease,filter .15s ease} .action>span{font-size:21px;line-height:1} .action:active{transform:scale(.985);filter:brightness(.94)} .social{display:flex;gap:10px;margin:14px 0 24px} .social>a{flex:1;text-align:center;padding:14px 10px;border:1px solid var(--line); border-radius:8px;font-size:13px;font-weight:500;transition:background .15s ease} .social>a:active{background:rgba(0,0,0,.05)} .foot{display:flex;justify-content:space-between;gap:12px;margin-top:auto; padding-top:14px;border-top:1px solid var(--line); font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .foot a{opacity:.9} /* the maker's mark, on every page ------------------------------- */ .powered{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 6px; margin-top:18px;padding:0 var(--pad);min-height:44px;font-family:var(--mono);font-size:12px; letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--ink);opacity:.9} .powered b{font-weight:700} .powered{direction:ltr} /* arrows point the other way when the page reads the other way */ html[dir="rtl"] .action>span,html[dir="rtl"] .service>span:last-child, html[dir="rtl"] .feature a b,html[dir="rtl"] .drop a b,html[dir="rtl"] .intro>span:last-child{ display:inline-block;transform:scaleX(-1)} /* photos --------------------------------------------------------- */ .photo{position:relative;background-size:cover;background-position:center; background-color:#889} .ph-creator{background-image:url("../assets/creator.webp");background-position:center 35%;background-color:#2865bb} .ph-cafe{background-image:url("../assets/cafe.webp");background-color:#ce5332} .ph-property{background-image:url("../assets/property.webp");background-color:#bdbaac} /* the toast for "copied" ---------------------------------------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px); background:#111;color:#fff;font-size:13px;padding:11px 16px;border-radius:999px; opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:9} .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ═══ LEDGER, for founders and consultants ═══════════════════════ */ .look-ledger{--bg:#e8eee4;--ink:#193d32;--line:rgba(25,61,50,.2); --action-bg:#193d32;--action-ink:#e6f3d1} .monogram{position:relative;height:168px;margin:6px var(--pad) 30px;border-radius:12px; background:#183f32;color:#d1eb9e;font-family:var(--serif);font-style:italic; font-size:148px;line-height:1;letter-spacing:-.11em;padding-left:20px;overflow:hidden} html[dir="rtl"] .monogram{letter-spacing:0;padding-left:0;padding-right:20px;font-size:120px} .monogram>span{position:absolute;right:26px;top:26px;font-family:var(--sans); font-style:normal;font-size:56px;letter-spacing:0} html[dir="rtl"] .monogram>span{right:auto;left:26px;transform:scaleX(-1)} .look-ledger h1{font-size:52px;margin:14px 0} .dot{color:#719645} .feature{border-top:1px solid var(--line);padding-top:20px} .feature strong{display:block;font-family:var(--serif);font-weight:400;font-size:35px; line-height:1.08;margin:12px 0 16px} .feature a{display:flex;justify-content:space-between;font-size:13px;font-weight:600} /* ═══ CREATOR, for creators and talent ════════════════════════════ */ .look-creator{--bg:#fff6e8;--ink:#442525;--line:rgba(68,37,37,.2); --action-bg:#ae3a29;--action-ink:#fff} .look-creator .page{padding-top:0} .look-creator .photo{height:315px;flex:none;color:#fff} .look-creator .photo .top{padding-top:max(env(safe-area-inset-top),44px); text-shadow:0 1px 6px rgba(0,0,0,.4)} .photo-label{position:absolute;bottom:18px;left:var(--pad);border:1px solid rgba(255,255,255,.65); border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase} .look-creator .pad{padding-top:24px} .look-creator h1{font-family:var(--serif);font-weight:400;letter-spacing:-.03em} .drop{position:relative;overflow:hidden;padding:18px 21px;border-radius:10px;background:#ffc5a8} .drop::after{content:"✳";position:absolute;right:10px;top:16px;font-size:110px;line-height:1; color:#cb5134;opacity:.9} .drop>*{position:relative;z-index:1} .drop strong{display:block;font-size:32px;line-height:1.04;letter-spacing:-.03em;margin:10px 0} .drop a{display:flex;justify-content:space-between;font-size:13px;font-weight:600} /* ═══ CAFE, for cafes and restaurants ═════════════════════════════ */ .look-cafe{--bg:#fff8e9;--ink:#ad361f;--line:rgba(173,54,31,.18); --action-bg:#b63820;--action-ink:#fff6d9;--action-r:0} .look-cafe h1{font-family:var(--serif);font-style:italic;font-weight:400;text-align:center; font-size:74px;letter-spacing:-.06em;margin:0 0 22px} .look-cafe h1>span{display:block;font-family:var(--sans);font-style:normal;font-size:12px; font-weight:700;letter-spacing:.16em;margin-top:12px} .look-cafe .photo{height:248px;flex:none;margin:0 18px;border-radius:8px} .sticker{position:absolute;right:14px;bottom:16px;width:82px;height:82px;border-radius:50%; background:#ffe496;border:1px solid #ac3622;display:grid;place-content:center; text-align:center;font-size:15px;font-weight:800;line-height:1.05;transform:rotate(12deg)} .menu-title{display:flex;justify-content:space-between;align-items:center;margin:24px 0 6px} .menu-title strong{font-family:var(--serif);font-size:32px;font-weight:400} .menu-title span{font-size:12px;font-weight:700;letter-spacing:.1em} .menu-item{display:flex;justify-content:space-between;gap:14px;padding:15px 0; border-bottom:1px solid var(--line);font-size:14px;font-weight:600; font-variant-numeric:tabular-nums} .menu-item small{display:block;font-size:12px;font-weight:400;margin-top:5px;opacity:.9} .open{display:inline-flex;align-items:center;gap:6px} .open i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal} .open.closed{opacity:1} .open.closed i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor} /* ═══ STUDIO, for photographers and studios ═══════════════════════ */ .look-studio{--bg:#191b18;--ink:#ececdf;--line:rgba(255,255,255,.22); --action-bg:#d4df8f;--action-ink:#1e2516;--action-r:0} .look-studio h1{font-size:67px;font-weight:500;line-height:.92;letter-spacing:-.055em; padding:8px var(--pad) 16px;margin:0} .look-studio h1 i{font-family:var(--serif);font-weight:400;color:#d4df8f;letter-spacing:-.04em} .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:7px;padding:0 17px;height:262px;flex:none} .grid>a{position:relative;overflow:hidden} .grid span{position:absolute;bottom:10px;left:9px;background:rgba(22,26,25,.78);color:#fff; font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 7px} .intro{display:flex;justify-content:space-between;align-items:flex-start;margin:22px 0; font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.55;text-transform:uppercase} .intro>span:last-child{font-size:38px;line-height:1;letter-spacing:0} /* ═══ PROPERTY, for brokers and realtors ══════════════════════════ */ .look-property{--bg:#f1efe8;--ink:#293631;--line:rgba(41,54,49,.2); --action-bg:#293f37;--action-ink:#fff;--action-r:4px} .look-property .top{font-size:12px;padding-bottom:18px} .look-property .photo{height:314px;flex:none;margin:0 14px;border-radius:4px} .tag{position:absolute;left:14px;bottom:16px;background:#f5f1e7;color:#293631;padding:8px 11px; font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .look-property .pad{padding-top:22px} .look-property h1{font-family:var(--serif);font-weight:400;font-size:43px;letter-spacing:-.03em;margin:12px 0} .look-property .page p{margin-bottom:12px;font-size:13px} .spec{display:flex;justify-content:space-between;border-block:1px solid var(--line); padding:15px 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; font-variant-numeric:tabular-nums} .spec b{display:block;font-size:22px;font-weight:500;letter-spacing:0;margin-bottom:4px} .price{font-family:var(--serif);font-size:27px;margin-top:16px;font-variant-numeric:tabular-nums} .price span{display:block;font-family:var(--sans);font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;margin-top:5px} .look-property .action{margin-top:16px} /* ═══ CARE, for clinics and salons ════════════════════════════════ */ .look-care{--bg:#f2ede9;--ink:#454639;--line:rgba(69,70,57,.18); --action-bg:#646f55;--action-ink:#fff;--action-r:999px} .art{position:relative;height:196px;margin:0 18px 26px;flex:none;overflow:hidden; border-radius:110px 110px 12px 12px;background:#e1dfce; display:flex;align-items:center;justify-content:center} .art .symbol{font-size:154px;line-height:1;color:#7f8f70} .art .orbit{position:absolute;left:42px;right:42px;top:31px;bottom:31px; border:1px solid #f9f5e7;border-radius:50%;transform:rotate(-25deg)} .art>span:last-child{position:absolute;bottom:14px;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .look-care h1{font-family:var(--serif);font-weight:400;font-size:55px;letter-spacing:-.03em} .look-care .page p{max-width:24ch} .service{display:flex;justify-content:space-between;gap:14px;align-items:center; border-top:1px solid var(--line);padding:20px 0;font-size:12px;font-weight:700;letter-spacing:.06em} .service strong{flex:1;font-size:14px;font-weight:500;letter-spacing:0} .service>span:last-child{font-size:18px} /* ═══ ADDED 29 SEP 2026: shared by all six looks ════════════════════ */ /* photos are real on the static pages, so the browser fetches them early; the dashboard keeps its inline backgrounds and the .ph-* classes above */ .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:0} .photo>:not(img){z-index:1} .photo>.top{position:relative} .look-creator .photo>img{object-position:center 35%} .look-creator .photo{background-color:#2865bb} .look-cafe .photo{background-color:#ce5332} .look-property .photo{background-color:#bdbaac} /* a top row can hold three things: the first pushes the rest to the far side (physical margins: a child with its own dir="ltr" would flip a logical one) */ .top>:first-child{margin-right:auto} html[dir="rtl"] .top>:first-child{margin-right:0;margin-left:auto} .top a{padding-block:14px;margin-block:-14px} /* the language toggle and the share button: 44px targets that do not grow the row */ [data-lang],.top [data-share]{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;margin:-14px -8px;padding:0 8px} [data-lang][lang="ar"]{font-size:14px;letter-spacing:0;text-transform:none} /* bigger hit areas for the small links, with no visible change */ .foot a{padding:14px 6px;margin:-14px -6px} .feature a,.drop a{min-height:44px;align-items:center;margin-block:-10px} /* arrows point outward: up and right in English, up and left in Arabic */ .arr{display:inline-block} html[dir="rtl"] .arr{transform:scaleX(-1)} /* sample pages say so, in both languages */ .sample{position:absolute;top:max(env(safe-area-inset-top),6px);left:50%;transform:translateX(-50%);z-index:4; padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink); font-family:var(--mono);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap;pointer-events:none} .look-creator .sample{background:rgba(24,12,10,.62);border-color:rgba(255,255,255,.5);color:#fff} /* the save bar: Save contact plus the page's main action, one tap away on the first screen. It sits at the end of the page and sticks to the bottom of the screen, so the last lines are never covered. profile.js tucks it away while another Save button is on screen. */ .page{overflow:clip} .page.has-bar{padding-bottom:max(env(safe-area-inset-bottom),10px)} .savebar{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:6; display:flex;gap:6px;margin:14px 12px 0;padding:6px; border-radius:calc(var(--action-r) + 6px);background:var(--bg); background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 0 0 1px var(--line),0 16px 34px -18px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.215,.61,.355,1),opacity .2s ease} .savebar>a{flex:1 1 0;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px; padding:6px 12px;border-radius:var(--action-r);border:1px solid var(--line); font-size:14px;font-weight:600;line-height:1.2;text-align:center} .savebar>a[data-save]{background:var(--action-bg);color:var(--action-ink);border-color:transparent} .savebar>a:active{transform:scale(.98)} .savebar[hidden]{display:none} .savebar.away{transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden; transition:transform .3s ease,opacity .2s ease,visibility 0s linear .3s} .look-cafe .savebar,.look-studio .savebar{border-radius:0} body>.toast{bottom:calc(92px + env(safe-area-inset-bottom));z-index:9} /* Arabic picked before first paint: keep the page hidden until profile.js has put the Arabic in (the head script lifts this after 1.5s whatever happens) */ html.i18n-wait .page{visibility:hidden} /* ═══ ARABIC, right to left ══════════════════════════════════════════ */ /* headings and heading like lines use the Arabic face, never a system fallback */ html[dir="rtl"] h1,html[dir="rtl"] .feature strong,html[dir="rtl"] .drop strong,html[dir="rtl"] .menu-title strong,html[dir="rtl"] .price,html[dir="rtl"] .price span,html[dir="rtl"] .look-cafe h1>span,html[dir="rtl"] .look-studio h1 i,html[dir="rtl"] .sticker,html[dir="rtl"] .sample,html[dir="rtl"] .powered{font-family:var(--arabic)} html[dir="rtl"] .feature strong{line-height:1.35} html[dir="rtl"] .drop strong{line-height:1.3} html[dir="rtl"] .menu-title strong{line-height:1.4} html[dir="rtl"] .look-studio h1{line-height:1.2} html[dir="rtl"] .look-studio h1 i{font-style:normal} html[dir="rtl"] .page p{line-height:1.75} /* the cafe's name stays Latin, in its own serif, in both languages */ html[dir="rtl"] .look-cafe h1{font-family:var(--serif);letter-spacing:-.06em;line-height:1.03} /* the Arabic under it and on the sticker gets room above and below its letters */ html[dir="rtl"] .look-cafe h1>span{line-height:1.5} html[dir="rtl"] .sticker{line-height:1.3} /* the wordmark is Latin: same face and tracking as in English, never the Arabic face */ html[dir="rtl"] .top>[dir="ltr"]{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em} /* no tracking and no capitals in Arabic */ html[dir="rtl"] .top,html[dir="rtl"] .top button,html[dir="rtl"] .eyebrow,html[dir="rtl"] .foot,html[dir="rtl"] .powered,html[dir="rtl"] .photo-label,html[dir="rtl"] .look-cafe h1>span,html[dir="rtl"] .menu-title span,html[dir="rtl"] .grid span,html[dir="rtl"] .intro,html[dir="rtl"] .spec,html[dir="rtl"] .price span,html[dir="rtl"] .tag,html[dir="rtl"] .art>span:last-child,html[dir="rtl"] .service,html[dir="rtl"] .sample,html[dir="rtl"] .drop strong,html[dir="rtl"] .look-studio h1 i,html[dir="rtl"] .savebar>a{letter-spacing:0;text-transform:none} /* small Arabic reads better a size up */ html[dir="rtl"] .top,html[dir="rtl"] .eyebrow,html[dir="rtl"] .foot,html[dir="rtl"] .photo-label,html[dir="rtl"] .look-cafe h1>span,html[dir="rtl"] .menu-title span,html[dir="rtl"] .menu-item small,html[dir="rtl"] .grid span,html[dir="rtl"] .intro,html[dir="rtl"] .spec,html[dir="rtl"] .price span,html[dir="rtl"] .tag,html[dir="rtl"] .art>span:last-child,html[dir="rtl"] .service,html[dir="rtl"] .powered{font-size:13px} html[dir="rtl"] .savebar>a{font-size:15px} /* two Arabic weights, 400 and 600, so a page loads two Arabic files, not four */ html[dir="rtl"] .top,html[dir="rtl"] .top button,html[dir="rtl"] .eyebrow,html[dir="rtl"] .foot,html[dir="rtl"] .powered b,html[dir="rtl"] .photo-label,html[dir="rtl"] .look-cafe h1>span,html[dir="rtl"] .menu-title span,html[dir="rtl"] .menu-item b,html[dir="rtl"] .grid span,html[dir="rtl"] .intro,html[dir="rtl"] .spec,html[dir="rtl"] .price span,html[dir="rtl"] .tag,html[dir="rtl"] .art>span:last-child,html[dir="rtl"] .service,html[dir="rtl"] .service strong,html[dir="rtl"] .sample,html[dir="rtl"] .sticker,html[dir="rtl"] .social>a,html[dir="rtl"] .drop strong,html[dir="rtl"] .action b{font-weight:600} html[dir="rtl"] .look-studio h1,html[dir="rtl"] .spec b{font-weight:400} /* overlays sit at the start edge, which is the right in Arabic */ html[dir="rtl"] .photo-label{left:auto;right:var(--pad)} html[dir="rtl"] .tag{left:auto;right:14px} html[dir="rtl"] .grid span{left:auto;right:9px} html[dir="rtl"] .sticker{right:auto;left:14px;transform:rotate(-12deg)} html[dir="rtl"] .drop::after{right:auto;left:10px} html[dir="rtl"] .powered{direction:rtl} @media(prefers-reduced-motion:reduce){*{transition:none!important}}