/* ========================================================================= Rize theme overrides. Applied as one stylesheet loaded last rather than by rewriting the thousands of inline Elementor declarations in index.html. The generated CSS is minified, machine-written and interdependent; editing it in place is how you silently break a layout you cannot then diff. Everything here is additive and can be removed in one line to get the original back. Section order and their grounds, alternating from a dark hero: df69c85 nav dark d2a8dc8 hero (sm) dark a659b95 hero (lg) dark 79ae169 missions light 35a120f reviews dark d18002c faq light 8a40f5f cta dark aba2f50 footer light ========================================================================= */ :root { --rize-dark: #130e09; --rize-light: #e1d1c9; --rize-on-dark: #ffffff; --rize-on-light: #000000; --rize-mark-dark: #221b15; --rize-mark-light: #9f562b; } /* The page itself is dark, which is what shows during an elastic overscroll above the very first section (the nav) - it should read as more of the same hero, not a flash of the light ground the page ends on. The FAQ section is the one place that would otherwise show this dark page colour through its own transparent background, so it gets its own explicit light override below rather than depending on the page underneath it. */ html { scroll-behavior: smooth; } html, body, .site, #page, #content { background-color: var(--rize-dark) !important; } /* ---------------------------------------------------------------- grounds */ .elementor-element-df69c85, .elementor-element-d2a8dc8, .elementor-element-a659b95, .elementor-element-35a120f, .elementor-element-8a40f5f { background-color: var(--rize-dark) !important; } .elementor-element-79ae169, .elementor-element-d18002c, .elementor-element-aba2f50 { background-color: var(--rize-light) !important; } /* ------------------------------------------------------------------- ink */ .elementor-element-df69c85, .elementor-element-df69c85 *, .elementor-element-d2a8dc8, .elementor-element-d2a8dc8 *, .elementor-element-a659b95, .elementor-element-a659b95 *, .elementor-element-35a120f, .elementor-element-35a120f *, .elementor-element-8a40f5f, .elementor-element-8a40f5f * { color: var(--rize-on-dark) !important; border-color: rgba(255, 255, 255, 0.16) !important; } .elementor-element-79ae169, .elementor-element-79ae169 *, .elementor-element-d18002c, .elementor-element-d18002c *, .elementor-element-aba2f50, .elementor-element-aba2f50 * { color: var(--rize-on-light) !important; border-color: rgba(0, 0, 0, 0.14) !important; } /* --------------------------------------------------------------- marks Stars and icons, exactly as specified: dark sections carry the mark at #221b15, light sections at #9f562b. No other treatment invented. The star ratings on this page are literal "★" characters typed into plain text, not an icon-font widget, so there is no `.elementor-star-rating` or `.elementor-icon` class to hook. `.rize-star` is a marker span wrapped around every run of them (see index.html) so they can be targeted at all; the `.elementor-icon*` selectors stay alongside it for the handful of real icon widgets (the feature icon-boxes) that do carry those classes. */ .elementor-element-df69c85 .rize-star, .elementor-element-df69c85 .elementor-star-rating i, .elementor-element-df69c85 .elementor-icon, .elementor-element-df69c85 .elementor-icon i, .elementor-element-df69c85 .elementor-icon svg, .elementor-element-d2a8dc8 .rize-star, .elementor-element-d2a8dc8 .elementor-star-rating i, .elementor-element-d2a8dc8 .elementor-icon, .elementor-element-d2a8dc8 .elementor-icon i, .elementor-element-d2a8dc8 .elementor-icon svg, .elementor-element-a659b95 .rize-star, .elementor-element-a659b95 .elementor-star-rating i, .elementor-element-a659b95 .elementor-icon, .elementor-element-a659b95 .elementor-icon i, .elementor-element-a659b95 .elementor-icon svg, .elementor-element-35a120f .rize-star, .elementor-element-35a120f .elementor-star-rating i, .elementor-element-35a120f .elementor-icon, .elementor-element-35a120f .elementor-icon i, .elementor-element-35a120f .elementor-icon svg, .elementor-element-8a40f5f .rize-star, .elementor-element-8a40f5f .elementor-star-rating i, .elementor-element-8a40f5f .elementor-icon, .elementor-element-8a40f5f .elementor-icon i, .elementor-element-8a40f5f .elementor-icon svg { color: var(--rize-mark-dark) !important; fill: var(--rize-mark-dark) !important; } .elementor-element-79ae169 .rize-star, .elementor-element-79ae169 .elementor-star-rating i, .elementor-element-79ae169 .elementor-icon, .elementor-element-79ae169 .elementor-icon i, .elementor-element-79ae169 .elementor-icon svg, .elementor-element-d18002c .rize-star, .elementor-element-d18002c .elementor-star-rating i, .elementor-element-d18002c .elementor-icon, .elementor-element-d18002c .elementor-icon i, .elementor-element-d18002c .elementor-icon svg, .elementor-element-aba2f50 .rize-star, .elementor-element-aba2f50 .elementor-star-rating i, .elementor-element-aba2f50 .elementor-icon, .elementor-element-aba2f50 .elementor-icon i, .elementor-element-aba2f50 .elementor-icon svg { color: var(--rize-mark-light) !important; fill: var(--rize-mark-light) !important; } /* ---------------------------------------------------------------- display Playpen Sans on headings only. Body copy keeps the face it already had. */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-price-table__heading, .elementor-toggle-title, .elementor-image-box-title { font-family: "Playpen Sans", "MacroSans", ui-rounded, system-ui, sans-serif !important; font-weight: 700; letter-spacing: -0.01em; } /* The hero headline is set in a condensed display face at a size tuned for it. Playpen Sans is wider, so it needs a touch less size and more leading or it overflows its two lines on a laptop. */ .elementor-element-a659b95 h1, .elementor-element-a659b95 .elementor-heading-title, .elementor-element-d2a8dc8 h1, .elementor-element-d2a8dc8 .elementor-heading-title { font-size: clamp(1.9rem, 4.2vw, 3.6rem) !important; line-height: 1.14 !important; } /* The heading widget's own box is what was 952px wide inside an 1152px column; the headline can only use what this gives it. */ .elementor-element-a659b95 .elementor-widget-heading, .elementor-element-a659b95 .elementor-widget-heading > .elementor-widget-container, .elementor-element-d2a8dc8 .elementor-widget-heading, .elementor-element-d2a8dc8 .elementor-widget-heading > .elementor-widget-container { width: calc(100% + 96px) !important; max-width: none !important; margin-left: -48px !important; margin-right: -48px !important; padding-left: 0 !important; padding-right: 0 !important; } @media (max-width: 1320px) { .elementor-element-a659b95 .elementor-widget-heading, .elementor-element-a659b95 .elementor-widget-heading > .elementor-widget-container, .elementor-element-d2a8dc8 .elementor-widget-heading, .elementor-element-d2a8dc8 .elementor-widget-heading > .elementor-widget-container { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Store badges: no white pill behind them, at any screen size. */ .elementor-element-d2a8dc8 img[src*="app-store"], .elementor-element-a659b95 img[src*="app-store"], .elementor-element-8a40f5f img[src*="app-store"], .elementor-element-d2a8dc8 img[src*="google-play"], .elementor-element-a659b95 img[src*="google-play"], .elementor-element-8a40f5f img[src*="google-play"] { background: transparent !important; border-radius: 0; } /* Badge row: the two buttons stay tight together at every width instead of spreading out as the row narrows. */ .elementor-element-a659b95 section.elementor-element-6dd32eb .elementor-container, .elementor-element-d2a8dc8 section.elementor-element-f1f6aa9 .elementor-container { display: flex !important; justify-content: center !important; gap: 8px !important; } .elementor-element-a659b95 section.elementor-element-6dd32eb .elementor-column, .elementor-element-d2a8dc8 section.elementor-element-f1f6aa9 .elementor-column { width: auto !important; flex: 0 0 auto !important; } /* ------------------------------------------------------------- wordmark The drawn Rize mark is reserved for the app icon, so the site says the name instead. Sized to sit where the old logo image sat. */ .rize-wordmark { font-family: "Playpen Sans", ui-rounded, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1; display: inline-block; } .rize-wordmark--dark { font-size: 2.1rem; color: var(--rize-on-dark) !important; } .rize-wordmark--light { font-size: 2rem; color: var(--rize-on-light) !important; } /* ----------------------------------------------------------------- nav -- Rize sits flush against the section's own left padding already (the section has 36px of its own). Home sat far from the matching right edge because the nav widget centres itself in a 50%-width column; pushing it to that column's own right edge is what makes the two feel symmetric, not a margin value, since there is nothing to add margin to on a single-item menu that already fills its row. */ .elementor-element-df69c85 .elementor-nav-menu__container { justify-content: flex-end; } /* Bottom-aligned within the 64px bar rather than centred in it - the column itself (not just the text inside it) is what needs to sit low. */ @media (min-width: 1025px) { .elementor-element-df69c85 .elementor-column .elementor-widget-wrap { align-items: flex-end !important; } } .elementor-element-df69c85 { overflow: visible; } @media (min-width: 1025px) { /* Both sit low in the 64px bar. Desktop only: on mobile the same negative margins collapse the dropdown the toggle opens. */ .elementor-element-df69c85 .elementor-nav-menu .elementor-item { padding-bottom: 0; margin-bottom: -18px; } /* Moved with a transform, not a margin: the wordmark is a span inside the widget's own container, so the flex item that `align-items: flex-end` positions is the widget, not this. A negative bottom margin therefore only shrank the widget and left the text where it was (measured: bottom stuck at 47px however large the margin got). A transform moves the painted glyphs and cannot be clamped by the wrapper. */ .elementor-element-df69c85 .rize-wordmark { padding-bottom: 0; margin-bottom: 0; transform: translateY(12px); } } .elementor-element-df69c85 .rize-wordmark { font-size: 2rem !important; } @media (max-width: 640px) { .elementor-element-df69c85 .rize-wordmark { font-size: 1.4rem !important; } } /* No underline, ever, on nav links - default, hover, or after click - and no focus outline box either. */ .elementor-element-df69c85 .elementor-nav-menu .elementor-item, .elementor-element-df69c85 .elementor-nav-menu .elementor-item:hover, .elementor-element-df69c85 .elementor-nav-menu .elementor-item:focus, .elementor-element-df69c85 .elementor-nav-menu .elementor-item:active, .elementor-element-df69c85 .elementor-nav-menu .elementor-item.elementor-item-active { text-decoration: none !important; outline: none !important; box-shadow: none !important; } .elementor-element-df69c85 .elementor-item.elementor-item-active::after, .elementor-element-df69c85 .elementor-item.elementor-item-active::before { display: none !important; } /* --------------------------------------------------------- hero, desktop The whole first screen - nav plus hero - has to fit without scrolling, so the hero's own height is the viewport minus the nav's fixed 64px rather than a flat 100vh, which would push the hero past the fold by exactly the nav's height. */ @media (min-width: 1025px) { .elementor-element-a659b95 { min-height: calc(100vh - 64px) !important; /* height, not just min-height: percentage heights on the container / column / widget-wrap chain below need a definite parent height to resolve against, and min-height alone does not count as definite - without this they silently fell back to their content's natural height (608px) instead of the section's real 836px, which is why the margin-top: auto push-to-bottom had no spare height to consume and computed to a flat 0. */ height: calc(100vh - 64px) !important; /* Elementor's own rule pads this section 72px on top and 0 on the bottom; zeroed so the height below is the true usable box. */ padding-top: 0 !important; padding-bottom: 0 !important; display: flex; } .elementor-element-a659b95 > .elementor-container, .elementor-element-a659b95 > .elementor-container > .elementor-column, .elementor-element-a659b95 > .elementor-container > .elementor-column > .elementor-widget-wrap { width: 100%; height: 100%; } /* The actual "push to bottom" mechanism. Every Elementor wrapper between here and the section carries its own position:relative (checked in the browser, not assumed), which is what defeated an earlier attempt at position:absolute + bottom:0 on the phone column - it kept anchoring to whichever immediate wrapper was "relative" rather than the section, and landed short of the fold by however tall that wrapper's own content was. This needs no positioning context at all: the widget-wrap becomes the flex column holding subtitle/headline/buttons/reviews in normal order, and margin-top: auto on the last of them (the reviews + phone row) consumes all remaining height in that column, which is exactly what pins it flush to the section's own bottom edge. */ .elementor-element-a659b95 > .elementor-container > .elementor-column > .elementor-widget-wrap { display: flex; flex-direction: column; /* Elementor ships every widget-wrap as flex-wrap: wrap, which is harmless while the wrap has no definite height. This one has one (the hero is pinned to the viewport), so the moment the children's total height exceeded it the last child - the reviews + phone row - wrapped into a *second column* and rendered off the right-hand edge of the screen. It looked like the row had been positioned wrongly; it had simply been wrapped. */ flex-wrap: nowrap !important; justify-content: flex-start; padding-top: 80px; } .elementor-element-a659b95 .elementor-inner-section.elementor-element-6d3e3a1 { margin-top: auto !important; } } /* The headline is a hard line break now (see index.html), not a fluid wrap - after three different container widths still wrapped it to three lines on someone's actual monitor, forcing the exact break Rize/DESIGNED/ACTUALLY is the only way to guarantee two lines on every desktop width rather than most of them. Sized a hair bigger per the latest note. */ .elementor-element-a659b95 .elementor-heading-title, .elementor-element-d2a8dc8 .elementor-heading-title { /* The headline needs a wider box than the boxed 1152px container gives it, or "TO ACTUALLY GET YOU OUT OF BED" cannot hold one line at this size and spills onto a third. Widened past the container deliberately and pulled back by half on each side so it stays centred. */ max-width: none; /* Symmetric negative margins rather than a wider width plus auto margins: auto did not resolve symmetrically here (the box came out 100px right of its widget and 200px past its right edge, which is what pushed the page into a horizontal scrollbar). Equal negative margins on a block-level heading widen it evenly about its own centre with no centring maths. */ width: 100%; /* The section is boxed at a fixed 1152px, not fluid, so the vw-based clamp that measured fine at one window width still overflowed line two onto a third at this fixed container: 55px was too wide for "TO ACTUALLY GET YOU OUT OF BED" inside 1152px regardless of viewport. Capped in real px against the actual container instead of vw. */ font-size: 3.5rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } @media (max-width: 1200px) { .elementor-element-a659b95 .elementor-heading-title, .elementor-element-d2a8dc8 .elementor-heading-title { font-size: 2.6rem !important; } } @media (max-width: 480px) { .elementor-element-a659b95 .elementor-heading-title, .elementor-element-d2a8dc8 .elementor-heading-title { font-size: 2.1rem !important; } } /* ------------------------------------------------------------ hero photo A real photographed phone now (Carlos's own image, bezel and all), not a CSS-built frame around a flat screenshot - so no wrapper, no black bezel div, no border-radius here, just the image at a size that reads as a detail rather than the dominant thing on the screen. The row that holds it (reviews + phone) is what gets pushed to the bottom of the hero (see the margin-top: auto rule above); the image just sits in that row's normal flow. */ @media (max-width: 1024px) { .elementor-element-d2a8dc8 .elementor-column.elementor-element-cbc4c32 { align-self: auto !important; } .elementor-element-d2a8dc8 .elementor-column.elementor-element-cbc4c32 img { width: 240px !important; } } .elementor-element-a659b95 .elementor-column.elementor-element-fae5167, .elementor-element-d2a8dc8 .elementor-column.elementor-element-cbc4c32 { /* The row centres its columns vertically (elementor-section-content-middle), which is right for the two taller text columns either side but leaves this shorter image column floating with dead space under it instead of touching the row's own bottom edge, which is the section's bottom edge. */ align-self: flex-end !important; } .elementor-element-a659b95 .elementor-column.elementor-element-fae5167 img, .elementor-element-d2a8dc8 .elementor-column.elementor-element-cbc4c32 img { width: 300px; height: auto; margin-inline: auto; display: block; } /* ------------------------------------------------------------- reviews The two testimonial cards flanking the phone, pulled up close to the top of their row rather than the deeper padding an earlier, much taller phone treatment needed. Stars at the specified colour and a size that reads at a glance. */ @media (min-width: 1025px) { .elementor-element-a659b95 .elementor-column.elementor-element-c03ae05, .elementor-element-a659b95 .elementor-column.elementor-element-6ce3259 { align-self: flex-start !important; padding-top: 0 !important; margin-top: -56px; } } /* On a phone the three columns stack, so the pull-up above would drag each review up over the photo above it. They read in normal order instead. */ @media (max-width: 1024px) { .elementor-element-d2a8dc8 .elementor-column.elementor-element-a50e4a0, .elementor-element-d2a8dc8 .elementor-column.elementor-element-43a13ac, .elementor-element-a659b95 .elementor-column.elementor-element-c03ae05, .elementor-element-a659b95 .elementor-column.elementor-element-6ce3259 { align-self: auto !important; margin-top: 0 !important; padding-top: 56px !important; } } .elementor-element-a659b95 .rize-star, .elementor-element-d2a8dc8 .rize-star { color: #54361e !important; fill: #54361e !important; font-size: 1.05em; letter-spacing: 0.06em; } .elementor-element-a659b95 .elementor-column.elementor-element-c03ae05 .elementor-widget-text-editor p, .elementor-element-a659b95 .elementor-column.elementor-element-6ce3259 .elementor-widget-text-editor p, .elementor-element-d2a8dc8 .elementor-column.elementor-element-a50e4a0 .elementor-widget-text-editor p, .elementor-element-d2a8dc8 .elementor-column.elementor-element-43a13ac .elementor-widget-text-editor p { font-size: 1.3em !important; } .elementor-element-e3a193e p, .elementor-element-a16d58a p, .elementor-element-5ae55da p, .elementor-element-00ee843 p, .elementor-element-6bb246b p, .elementor-element-e1d331f p, .elementor-element-f7b11a7 p, .elementor-element-47ee6b5 p { font-family: "DM Sans", sans-serif !important; } .elementor-element-a16d58a p, .elementor-element-00ee843 p, .elementor-element-e1d331f p, .elementor-element-47ee6b5 p { font-weight: 700 !important; } /* --------------------------------------------------------------- missions The screenshots are gone from this section, so the heading needs its own breathing room rather than sitting flush under the previous section's edge. */ .elementor-element-79ae169 { padding-top: 64px !important; } /* --------------------------------------------------------- scroll-to-top Astra's own floating arrow, not part of this design. */ #ast-scroll-top { display: none !important; } /* No focus outline/dotted box on the FAQ question row when clicked. */ .elementor-tab-title, .elementor-tab-title:focus, .elementor-tab-title a, .elementor-tab-title a:focus, .elementor-toggle-title:focus { outline: none !important; box-shadow: none !important; } /* ------------------------------------------------------- mobile nav menu The toggle opens Elementor's own dropdown. Two things make it read as a plain menu rather than the boxed panel it defaults to on this dark ground: the panel takes the section's own colour instead of the theme's white, and nothing in it carries the desktop bar's negative margins (scoped above), which would otherwise collapse the rows into each other. */ .elementor-element-df69c85 .elementor-menu-toggle, .elementor-element-df69c85 .elementor-menu-toggle:focus, .elementor-element-df69c85 .elementor-menu-toggle:hover, .elementor-element-df69c85 .elementor-menu-toggle:active { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; } .elementor-element-df69c85 .elementor-menu-toggle i, .elementor-element-df69c85 .elementor-menu-toggle svg { color: var(--rize-on-dark) !important; fill: var(--rize-on-dark) !important; } /* The dropdown sits under the hamburger it belongs to, not as a full-width band across the page. Elementor's own stylesheet paints this panel and its items white (which is what made the first row read as a solid white box on this dark nav), and paints a white hover/active state on every row, so all of that is overridden explicitly rather than tinted. */ .elementor-element-df69c85 .elementor-nav-menu--dropdown { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; width: max-content !important; min-width: 190px !important; max-width: 78vw !important; background-color: var(--rize-dark) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important; z-index: 100 !important; } .elementor-element-df69c85 .elementor-nav-menu__container.elementor-nav-menu--dropdown { margin-top: 6px !important; } /* The nav widget is the positioning context, so the panel hangs off the toggle rather than off the page. */ .elementor-element-df69c85 .elementor-widget-nav-menu, .elementor-element-df69c85 .elementor-nav-menu--toggle { position: relative !important; } /* Every state, one colour. The default, hover, focus, active and current-page rules all had their own white in the generated CSS. */ .elementor-element-df69c85 .elementor-nav-menu--dropdown li, .elementor-element-df69c85 .elementor-nav-menu--dropdown ul, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item:hover, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item:focus, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item:active, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item.highlighted, .elementor-element-df69c85 .elementor-nav-menu--dropdown a.elementor-item { background-color: transparent !important; background-image: none !important; color: var(--rize-on-dark) !important; fill: var(--rize-on-dark) !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item { padding: 14px 20px !important; margin: 0 !important; font-size: 1rem; text-align: right; } .elementor-element-df69c85 .elementor-nav-menu--dropdown li + li .elementor-item { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Elementor's active-item marker is a white bar; there is no room for it in a panel this small and it was reading as the white box. */ .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item::before, .elementor-element-df69c85 .elementor-nav-menu--dropdown .elementor-item::after { display: none !important; } /* The headline is four lines on a narrow phone at the desktop size. */ @media (max-width: 600px) { .elementor-element-d2a8dc8 .elementor-heading-title { font-size: 2.05rem !important; } } /* An opened FAQ question turned white and vanished into its own light ground. Elementor paints the active row with `--e-global-color-text`, which is the theme's light-on-dark ink, and the FAQ section is one of the light ones - so opening a question made it unreadable. Pinned to the light-section ink for every part of the row, including the +/- icon. */ .elementor-element-d18002c .elementor-tab-title, .elementor-element-d18002c .elementor-tab-title a, .elementor-element-d18002c .elementor-tab-title.elementor-active, .elementor-element-d18002c .elementor-tab-title.elementor-active a, .elementor-element-d18002c .elementor-tab-title.elementor-active .elementor-toggle-icon, .elementor-element-d18002c .elementor-tab-title.elementor-active .elementor-toggle-icon i, .elementor-element-d18002c .elementor-tab-title .elementor-toggle-icon, .elementor-element-d18002c .elementor-tab-title .elementor-toggle-icon i, .elementor-element-d18002c .elementor-tab-content, .elementor-element-d18002c .elementor-tab-content * { color: var(--rize-on-light) !important; fill: var(--rize-on-light) !important; }