/* ========================================================================= fitmentry.com · layout composition Everything here is `.fmy-*`. This file may compose FDS and may never override it -- the same rule floor/index.html states about its `.flr-*` block, for the same reason: an override is a second design system with one rule in it. No colour literal, no type-scale literal, no spacing literal that FDS already owns. If a value below is not a var(--fds-*), it is a layout number and there is a comment saying why it could not be a token. ========================================================================= */ /* `class="fds"` on is REQUIRED, not decorative, and every page here carries it. FDS deliberately does not reset the page — it "sets what it owns and leaves the rest, so it can be dropped into an Odoo view without fighting Odoo's own CSS" (fds.css §, above the rule). Four things are therefore scoped to that class and are simply absent without it: · the border-box reset, whose absence made every .fds-input on the access form 26px wider than the field containing it — found by measuring, not by looking, because a form can overflow its column and still look deliberate; · the base type and colour; · the shared :focus-visible ring, so every control silently loses the system focus indicator; · [hidden] at a specificity that survives a component setting display. The three declarations below are the page frame, which FDS does not own. */ body.fds{ margin:0; /* --fds-page rather than the --fds-canvas the class sets: this is the page behind a full-surface loader, and .fds-loader fills its own canvas with --fds-page every frame. Two different greys either side of the stage edge is visible during overscroll and below the fold. */ background:var(--fds-page); /* The field is drawn on a canvas that fills the viewport. Rubber-band overscroll on iOS drags the page off that canvas and shows white below it for the length of the bounce. */ overscroll-behavior-y:none; } /* --- the stage ------------------------------------------------------- .fds-loader--inline is `position:relative;width:100%;height:100%`, so it needs a box with a height to fill. min-height rather than height, and a stretched grid row rather than a fixed one, because the mark grows: nine of the twenty locales are longer than English, and Finnish and Polish are the usual failures (glossary.meta.yaml assumes +35% on sentences). When the content outgrows the viewport the stage grows and the page scrolls, which is the correct outcome and the reason this is not the fixed, full-viewport `.fds-loader` on its own. 100dvh, not 100vh: on a phone with a retracting browser chrome, vh is the tallest the viewport ever gets, so the field would be cropped at rest. */ .fmy-stage{min-height:100dvh;display:grid} /* --- the mark -------------------------------------------------------- The reading column. The loader measures this element to decide where to carve the field, so its box IS the clearing -- padding here becomes breathing room in the motion, and the region behind everything inside it is --fds-page rather than the product ramp. That is what lets this page carry controls at all; see README. The width cap is the one number that is not a token: it is the measure of the tagline, and FDS has no measure token. 34rem holds roughly 70 characters of the source language at body size, and the +35% expansion still wraps to three lines rather than four. */ .fmy-mark{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--fds-sp-6); width:min(34rem,100%); box-sizing:border-box; padding:var(--fds-sp-8); padding-block-start:max(var(--fds-sp-8),env(safe-area-inset-top)); padding-block-end:max(var(--fds-sp-8),env(safe-area-inset-bottom)); } /* The access form is a column of labelled fields and reads left-aligned even though the header above it is centred. */ .fmy-mark--form{width:min(26rem,100%)} /* The lockup has its own internal gap and sits tighter to the tagline than the rest of the stack: a brand and the line that explains it are one unit, and a full stack gap between them reads as two. */ .fmy-mark .fds-lockup{margin-block-end:calc(var(--fds-sp-5) * -1)} .fmy-tagline{ margin:0; color:var(--fds-text); font-size:var(--fds-ui-heading); font-weight:500; letter-spacing:-.008em; line-height:var(--fds-lh-snug); /* The tagline is the one line on this page that must not break badly. Balanced wrapping is a progressive nicety -- an engine without it just wraps normally, which is the behaviour this replaced. */ text-wrap:balance; } .fmy-intro{ margin:0; color:var(--fds-text-muted); font-size:var(--fds-ui-body-size); line-height:var(--fds-lh-body); text-wrap:pretty; } /* --- sign in --------------------------------------------------------- The address and the button that acts on it, as one unit. A row while there is room for the button to keep its own width, a column the moment there is not -- the break is on content rather than on a device guess, which is what makes it hold in German and Finnish as well as English. No panel, no border, no second surface. The loader's mask already guarantees this area is bare --fds-page, so the input and the button are measured against the same ground they are measured against everywhere else in the system, and the chrome that used to say so was saying it twice. */ .fmy-signin{ display:flex; flex-wrap:wrap; gap:var(--fds-sp-5); width:100%; } .fmy-signin .fds-input{ /* 14rem is the width below which an email address stops being readable while it is being typed; under that the button wraps instead. */ flex:1 1 14rem; min-inline-size:0; } .fmy-signin .fds-btn{flex:0 1 auto} @media (max-width:26rem){ .fmy-signin .fds-btn{flex:1 1 100%} } .fmy-invite{margin:0;text-wrap:pretty} /* --- the access form -------------------------------------------------- A plain block, NOT a flex column with a gap. FDS already spaces stacked fields with `.fds-field + .fds-field{margin-top}`, so a gap here was added to it rather than replacing it and every field sat 32px from the last instead of 16. Let the system's own rule do the work; the button is the only thing that needs a margin, because it is not a field. */ .fmy-form{width:100%;text-align:start} .fmy-form .fds-btn{margin-block-start:var(--fds-sp-7)} /* Off-screen rather than hidden: `display:none` and `hidden` are the first two things a form-filling bot checks for, so a honeypot that uses either is a honeypot the bot walks past. Kept out of the tab order and out of the accessibility tree by the markup, not by this rule. */ .fmy-hp{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* --- the wordmark, as the way home ------------------------------------ */ .fmy-home{ display:inline-block; text-decoration:none; border-radius:var(--fds-r-mark); } .fmy-home:focus-visible{ outline:var(--fds-focus-w) solid var(--fds-focus); outline-offset:4px; } .fmy-home:hover .fds-lockup__parent{color:var(--fds-text)} /* --- the foot --------------------------------------------------------- */ .fmy-foot{ display:flex; flex-direction:column; align-items:center; gap:var(--fds-sp-6); width:100%; } .fmy-status{margin:0} .fmy-foot__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--fds-sp-4) var(--fds-sp-6); } /* FDS ships no inline-link class, so this is built from the same tokens a link would be built from if it did. It is not an override -- there is nothing to override -- and it should be deleted the day FDS grows one. */ .fmy-link{ color:var(--fds-accent); font-size:var(--fds-ui-small-size); text-decoration:underline; /* The underline clears the descenders rather than cutting them, which is the difference between a link that reads and one that looks struck out in Devanagari and Arabic. */ text-underline-offset:.18em; text-decoration-thickness:from-font; border-radius:var(--fds-r-mark); } .fmy-link:hover{color:var(--fds-text)} .fmy-link:focus-visible{ outline:var(--fds-focus-w) solid var(--fds-focus); outline-offset:2px; } /* --- the document page ------------------------------------------------ privacy.html. No field: a full-surface motion field behind a wall of text is decoration fighting the reading, and the mask is built to clear one block of content rather than a scrolling document. */ .fmy-doc{ max-width:42rem; margin:0 auto; padding:var(--fds-sp-8); padding-block-start:max(var(--fds-sp-8),env(safe-area-inset-top)); padding-block-end:max(var(--fds-sp-8),env(safe-area-inset-bottom)); font-size:var(--fds-ui-body-size); line-height:var(--fds-lh-body); color:var(--fds-text-muted); } .fmy-doc p{margin:0 0 var(--fds-sp-6);text-wrap:pretty} .fmy-doc strong{color:var(--fds-text);font-weight:500} .fmy-doc__title{ margin:var(--fds-sp-8) 0 var(--fds-sp-6); color:var(--fds-text); font-size:var(--fds-ui-display); font-weight:600; letter-spacing:-.022em; line-height:1.08; } .fmy-doc__lede{color:var(--fds-text);font-size:var(--fds-fs-600)} .fmy-doc__h{ margin:var(--fds-sp-8) 0 var(--fds-sp-5); color:var(--fds-text); font-size:var(--fds-ui-heading); font-weight:500; letter-spacing:-.008em; line-height:var(--fds-lh-snug); } .fmy-doc__list{margin:0 0 var(--fds-sp-6);padding-inline-start:var(--fds-sp-8)} .fmy-doc__list li{margin-block-end:var(--fds-sp-5)} .fmy-doc__foot{ justify-content:flex-start; margin-block-start:var(--fds-sp-8); padding-block-start:var(--fds-sp-7); border-block-start:var(--fds-border-w) solid var(--fds-border); } /* --- noscript --------------------------------------------------------- Not styled to look like the page. It is the failure state and looking finished would hide that. */ .fmy-noscript{ max-width:34rem; margin:0 auto; padding:var(--fds-sp-8); text-align:center; color:var(--fds-text-muted); font-size:var(--fds-ui-body-size); line-height:var(--fds-lh-body); } /* The stage is hidden without script -- a full-viewport canvas with nothing drawn on it is a dead grey rectangle above the fallback text. That rule cannot live here: