/* ========================================================================== RentOS Microsite — design tokens -------------------------------------------------------------------------- Source of truth: Figma "RentOS Microsite" file 763yuvTNplEp4kJc22OWSD page 123:6200 · desktop frame 123:6202 (1920) · mobile frame 123:7560 (390) Colours below are the file's own Figma variables, pulled verbatim via get_variable_defs on 123:6202 — they are not eyeballed. Anything tagged "measured @ " came from get_design_context on that node. Nothing in this file is estimated. Rule: do not add a token by eye. Measure it in Figma, cite the node. ========================================================================== */ :root { /* ---------------------------------------------------------------- Brand */ --brand-dark-green: #193308; --brand-accent: #aadd7b; --brand-black: #1e1b18; --brand-primary-soft: #ebece7; --brand-pill-grey: #efefed; --brand-bg-lt-green: #f3f8f4; /* Page canvas. Desktop root 123:6202 is #f3f8f4; the mobile root 123:7560 is a warmer #f9faf6 (same as the mobile popup shell). */ --page-bg: #f3f8f4; --page-bg-mobile: #f9faf6; --white: #ffffff; /* ------------------------------------------------------------ Semantic */ --primary: #1e1b18; --text: #1e1b18; --primary-text: #2a2724; --icon: #193308; --border: #dcdcdc; --nav-bar: #ffffffb2; /* translucent sticky nav background */ --alert: #a21f0d; --danger: #a21f0d; --tab-highlighted: #afe57e; /* -------------------------------------------------------------- Status */ --status-won-bg: #aadd7b; --status-won-dot: #193308; --status-new-bg: #e6fae6; --status-new-dot: #193308; --status-in-progress-bg: #dcf8fc; --status-in-progress-dot: #35586d; --status-loaded-bg: #f4eafd; --status-loaded-dot: #581d6f; --status-lost-bg: #f3e5e4; --status-lost-dot: #703330; /* ---------------------------------------------------------- Typography */ /* Three families with distinct jobs — see the header note in fonts.css. --font microsite chrome (Inter) --font-ui the RentOS product UI inside the device mockups (Urbanist) --font-screen-title product screen titles only (Tomorrow) */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-ui: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-screen-title: 'Tomorrow', 'Urbanist', Helvetica, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Microsite type scale. Desktop @1920 / mobile @390. ---- H1 is Tomorrow; everything else is Inter. Line-heights are the Figma values, not ratios — do not "tidy" them into unitless numbers. */ /* H1 — Tomorrow Medium. measured @ 123:6225 (d) / 123:7581 (m) */ --fs-h1: 80px; --lh-h1: 80px; --fs-h1-mobile: 48px; --lh-h1-mobile: 54px; /* Lead paragraph. measured @ 123:6224 (d) / 123:7580 (m) */ --fs-lead: 26px; --lh-lead: 36px; --fs-lead-mobile: 20px; --lh-lead-mobile: 28px; /* Nav link — Inter SemiBold. measured @ 123:7323 */ --fs-nav: 17px; /* Inline text link — Inter Medium, underlined. @ 123:6230 / 123:7582 */ --fs-link: 18px; --lh-link: 18px; --fs-link-mobile: 15px; /* Primary CTA — Inter Bold. measured @ 123:6227 / 123:7584 */ --fs-cta: 20px; --fs-cta-mobile: 14px; --lh-cta-mobile: 17px; /* Popup / form. measured @ 123:8150, 123:8136, 123:8139 */ --fs-modal-title: 32px; /* w600 */ --fs-button: 20px; /* w600 */ --lh-button: 25.5px; --fs-input: 18px; /* w400 */ /* Product-UI type (Urbanist), measured @ 123:7481. These are authored at mockup scale — the card is 319.37px wide in a 1920 frame. Scale the whole mockup with a transform or a container query rather than rounding each value, or the layout will drift. */ --ui-fs-hero-number: 28.6px; /* $148.2k, w600, lh 34.161px */ --ui-fs-card-title: 15.889px; /* "Store Performance", w700, lh 19.067px */ --ui-fs-stat: 15.889px; /* 1,289 / 8.4%, w600, lh 19.067px */ --ui-fs-row: 12.711px; /* leaderboard amounts, w600, lh 15.095px */ --ui-fs-label: 11.122px; /* labels + chips, w400/600, lh 13.506px */ --ui-fs-micro: 8.739px; /* badges, axis letters, lh 10.328px */ --ui-fs-screen-title: 17.478px;/* Tomorrow 500, lh 22.245px, @ 123:7557 */ /* -------------------------------------------------------------- Radius */ --radius-field: 10px; /* measured @ 123:8118 (mobile form) */ --radius-card: 10px; /* measured @ 123:8134 (popup shell) */ --radius-button: 45px; /* measured @ 123:8135 / 123:8115 */ --radius-pill: 999px; /* Figma var --r-pill */ --radius: var(--radius-card); /* default for .rounded-* utilities */ /* ------------------------------------------------------------- Spacing */ /* The form/popup work on a 20px rhythm — field rows sit at 0/80/160/240 with 60px field heights, and the two-column gap is 20px. measured @ 123:8137 (desktop) and 123:8117 (mobile). */ --space-4: 4px; --space-8: 8px; --space-15: 15px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --gutter-mobile: 20px; /* 390 frame, content box = 350px */ /* ---- Desktop layout ---- Derived from the section boxes in the 1920 frame: Product sits at left 239 w1441 (right edge 1680), Features 239/1437, Ask RentOS 244/1432 — i.e. a 1440 container with 240 gutters. Two sections are deliberately narrower and two are full-bleed; they are exceptions, not the container. */ --content-width: 1440px; --gutter-desktop: 240px; --content-width-narrow: 1302px; /* FAQs @ 123:6510 */ --content-width-cta: 920px; /* Download @ 123:6562 */ --nav-width: 825px; /* NAV pill @ 123:7321 */ /* ---- Section offsets in the 1920 frame (for cross-checking builds) ---- nav 35 · hero 222 · product 983 · features 2051 · ask-rentos 3160 · customers 3680 · faqs 4659 · download 5715 · footer 6125 */ /* ---------------------------------------------------- Component tokens */ /* Form — measured @ 123:8137 (desktop 700px popup) and 123:8117 (mobile) */ --field-height: 60px; --field-padding-x: 16px; --field-bg: var(--white); --field-border-width: 1px; --field-border: #e1e1e3; --field-text: #262626; --field-required: #ff3c00; /* Button — measured @ 123:8135 / 123:8115. Identical on both frames. */ --button-width: 192px; --button-height: 50px; --button-padding-x: 18px; --button-bg: var(--brand-dark-green); --button-text: var(--white); /* Popup shell — measured @ 123:8134 (desktop) / 123:8106 (mobile) */ --popup-width: 700px; --popup-bg: var(--white); --popup-bg-mobile: #f9faf6; --popup-border: #e1e1e3; --popup-shadow: 0 0 9px 2px rgba(0, 0, 0, .07); /* -------------------------------------------------------------- Motion */ /* The device mockups are built as live DOM, so these are the real build spec. Read from Figma's keyframe data via get_motion_context on 123:6202 (recursive). The percentages in Figma resolve to round millisecond values, so the designer authored in ms — use these, don't re-derive them from percentages. */ --motion-loop: 7.4s; /* master timeline, loops forever */ --motion-bar-grow: 700ms; /* chart bar 1px -> full height */ --motion-bar-stagger: 120ms; /* delay between consecutive bars */ --motion-chip-pop: 450ms; /* chat chip scale 0 -> 1.08 -> 1 */ --motion-chip-stagger: 120ms; --motion-counter-step: 111ms; /* stat counter tick, 0 -> ... -> 1,289 */ --motion-screen-fade: 400ms; /* carousel screen cross-fade */ --motion-screen-hold: 2600ms; /* dwell before the next screen */ /* Easing curves, verbatim from the Figma timeline */ --ease-out-quint: cubic-bezier(.22, 1, .36, 1); /* bar growth */ --ease-overshoot: cubic-bezier(.22, 1.2, .36, 1); /* chip pop */ --ease-anticipate: cubic-bezier(.6, 0, .9, 1); /* squash wind-up */ --ease-release: cubic-bezier(.22, 1.15, .44, 1); /* squash release */ /* ------------------------------------------------------------ Viewport */ --full-height: calc(var(--vh, 1vh) * 100); } /* Respect the OS reduced-motion setting — the mockup loops forever, which is exactly the kind of motion this media query exists for. */ @media (prefers-reduced-motion: reduce) { :root { --motion-loop: 0s; --motion-bar-grow: 0s; --motion-bar-stagger: 0s; --motion-chip-pop: 0s; --motion-chip-stagger: 0s; --motion-counter-step: 0s; --motion-screen-fade: 0s; } } /* ========================================================================== Section node IDs — desktop / mobile. Measure from these. nav 123:7321 / 123:8062 product 123:6760 / 123:9957 hero 123:9943 / 123:9968 features 123:6231 / 123:9958 ask-rentos 123:6483 / 123:9959 customers 123:6776 / 123:9962 faqs 123:6510 / 123:9964 download 123:6562 / 123:9965 footer 123:6827 / 123:9966 Desktop-only: Download Pop Up 123:9744 (QR). Per the Figma annotation on 123:6228, the Download CTA opens that QR popup on desktop only; on mobile (123:7584) it deep-links straight to the device's app store. HOW TO MEASURE — the page frames exceed the MCP's inline response limit, so get_design_context returns sparse metadata by default. Pass forceCode:true; the oversized result is written to a file that can be mined with python rather than read into context. No Figma selection needed. Still unmeasured — do NOT fill these in by eye. Per section, as each is built: card/image/testimonial radii outside the popup, grid column counts and gaps, and per-section vertical padding (section offsets are recorded in the layout block above as a cross-check). Known design inconsistency to raise with the designer before building the form: the desktop popup fields use border #d9d9d0, radius 5px and text #373737 with a #fc5147 asterisk, while the mobile popup fields use border #e1e1e3, radius 10px and text #262626 with a #ff3c00 asterisk. The tokens above adopt the mobile values, which are the clean unscaled ones (the desktop instance is scaled ~111%, which is why it reports 1.111px borders and 5.556px radii). Confirm which is intended. ========================================================================== */