/* Bloomed - responsive layer. * * Loaded from each page's REAL , not the block: is * injected by support.js at runtime, so rules placed there would only apply * after React boots and phones would flash the desktop layout first. * * The pages style themselves with inline `style` attributes, which outrank * every class selector. So this file works two ways: * 1. custom properties (--pad, --logo-scale) that inline styles read, and * 2. class-based media queries with !important, for the residue that * fluid/intrinsic CSS cannot express. * * Breakpoints: 900px "stacked", 600px "phone". Support floor 320px. * Rationale for each decision below lives in design.md. */ /* ---------------------------------------------------------------- tokens */ :root { /* Horizontal page padding. Appears in 13 places across the five pages and the closing skyline's negative margin is derived from it, so it is a single knob rather than 13 overrides. */ --pad: 56px; /* Institution logos have very different aspect ratios (3.4:1 wordmarks vs a 1.57:1 stacked lockup vs a 1:1 crest), so their differing pixel heights are deliberate optical balancing, not an inconsistency. Scaling them together preserves that balance at every width. */ --logo-scale: 1; } @media (max-width: 900px) { :root { --pad: 32px; --logo-scale: 0.85; } } @media (max-width: 600px) { :root { --pad: 20px; --logo-scale: 0.7; } } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img { max-width: 100%; } /* ------------------------------------------------------------------ page */ /* `clip` rather than `hidden`: it still contains the decorative card sheets, but does not establish a scroll container - which is what would otherwise silently break the sticky nav. */ .bl-page { overflow-x: clip; } @media (max-width: 600px) { /* The nav goes out of flow on phones (below), so the page reclaims its height here. Overflow returns to visible so the fixed nav can never be clipped by an ancestor, and so that genuine horizontal overflow shows up in testing instead of being hidden - the original bug on this page was a whole column clipped out of sight by overflow:hidden. */ .bl-page { overflow: visible !important; padding-top: 62px; } } /* ------------------------------------------------------------------- nav */ @media (max-width: 600px) { .bl-nav { /* !important throughout: index.html's nav carries an inline position:relative, which would otherwise win. */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50; min-height: 62px; box-sizing: border-box; padding: 9px var(--pad) !important; /* Translucent rather than solid: the hero's 108deg gradient would show a seam against a flat #F9FAFB bar, and the near-black "how it works" section scrolls underneath. */ background: rgba(249, 250, 251, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 0.5px solid rgba(10, 12, 16, 0.08); } /* "How it works" / "Contact" / "Home" drop out below 600px. Both remain reachable: the first is an on-page anchor, the others sit in the footer. */ .bl-nav-extra { display: none !important; } .bl-navlinks { gap: 14px !important; } } /* Sticky bar + smooth scrolling would otherwise land the anchor with its heading underneath the bar. */ #how-it-works { scroll-margin-top: 74px; } /* --------------------------------------------------------- touch targets */ /* Nav and footer links are 13-14.5px text with no padding (~18px tall). WCAG 2.5.8 wants 24x24 minimum; Apple HIG wants 44x44. */ @media (max-width: 600px) { .bl-navlinks a, .bl-footlinks a { display: inline-flex; align-items: center; min-height: 44px; /* Without this the "Start free" button's 10px/18px padding is added to the 44px minimum, making it 66px tall. */ box-sizing: border-box; } } /* ------------------------------------------------------------------ hero */ @media (max-width: 900px) { .bl-hero { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 600px) { .bl-hero { gap: 26px !important; } /* The card is allowed to size to its content on phones; the reason panel's own min-height keeps it from collapsing. */ .bl-mcard { min-height: 0 !important; margin-right: 10px !important; } /* The desktop treatment is a hard crease at 46%, which reads as a deliberate diagonal on a wide viewport. On a tall narrow one that same crease is near-horizontal and reads as an accidental seam, so soften it into a wash instead of merely rotating it. */ .bl-herobg { background: linear-gradient(176deg, #F9FAFB 0%, #F9FAFB 26%, #FBFFF0 58%, #F4FBE4 100%) !important; } /* CTA stacks and centres on a phone: the button on its own line with the Early Access note centred beneath it. The copy above stays left-aligned. */ .bl-cta-row { flex-direction: column !important; align-items: center !important; gap: 12px !important; align-self: stretch; text-align: center; } /* A little more air around the subheading than the column's shared 28px gap gives on its own. */ .bl-hero-sub { margin-top: 10px; } .bl-cta-row { margin-top: 12px; } /* Export leftover: an empty flex row whose only content is a 1px divider, contributing 108px of blank space. */ .bl-deadspace { display: none !important; } } /* The circle row is absolutely positioned from computed pixels; clipping lets the ends fade off the edge on narrow cards rather than forcing page overflow. Circles at the extremes are already near-zero opacity. */ .bl-qstream { overflow: hidden; } /* ------------------------------------------------------------ logo strip */ @media (max-width: 600px) { /* Five logos in a 2-up grid gives 2 + 2 + 1, last one centred across. */ .bl-logos { display: grid !important; grid-template-columns: 1fr 1fr; gap: 26px 14px !important; } .bl-logos > *:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 78px is ~24% of a 320px screen - reads as a pill, not a soft corner. */ .bl-round-top { border-radius: 36px 36px 0 0 !important; } .bl-round-bottom { border-radius: 0 0 36px 36px !important; } } /* -------------------------------------------------------------- contact */ @media (max-width: 900px) { .bl-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 600px) { .bl-field-2 { grid-template-columns: 1fr !important; } /* iOS Safari force-zooms any focused input below 16px and does not zoom back out, which makes the form feel broken rather than merely small. */ .bl-input { font-size: 16px !important; } } /* -------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bl-page *, .bl-page *::before, .bl-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }