/* ========================================================================== founder.css — Founder & CEO page (/founder-ceo-engr-mejba-ahmed) Page-scoped. Nothing here may leak: every token is defined on .fdr rather than :root, and every rule is prefixed with .fdr so it also outranks the theme's `[data-theme="light-mode"] body p` (0,1,2) selectors. Colours are LITERALS, not var(--thm-*) references. style.css and custom-style.css are owned by a separate workflow; a literal cannot be moved out from under a measured contrast ratio. Each token names the theme colour it mirrors and its measured ratio against the surface it sits on. Load order matters: this file must come AFTER responsive.css, or generic responsive rules win at 768px only. It is also loaded after custom-style.css, which still carries the previous generation of .fdr- rules; every property this file cares about is therefore restated explicitly rather than left to inherit from a rule that is on its way out. Order: tokens -> reveal -> primitives -> components -> sections 1..11 -> responsive -> reduced motion -> theme chrome. Responsive is mobile-first, min-width only: a bare rule is the small-screen value and min-width blocks step up. Nothing bare may be restated after a media query — media queries add no specificity, so the bare rule would win at every width. ========================================================================== */ /* ========================================================================== TOKENS ========================================================================== */ .fdr { /* --- Light-mode defence ------------------------------------------------- The theme repaints headings by selector — [data-theme="light-mode"] h1..h6 { color: var(--dark-color) } (style.css:9762) — which rendered this page's h1 at 1.00:1 on its own dark surface. Re-pinning the one token that rule consumes covers every heading with no parallel selector list to maintain. */ --dark-color: #ffffff; /* --- Surfaces ---------------------------------------------------------- 0 = canvas (mirrors --thm-body-background) 1 = lifted section band (mirrors --thm-black-bg) 2 = card / chip / tile 3 = card hover, monogram tile, inner well */ --fdr-surface-0: #141416; --fdr-surface-1: #1A1A1C; --fdr-surface-2: #212127; --fdr-surface-3: #2A2A31; /* --- Ink --------------------------------------------------------------- Ratios are against --fdr-surface-0. ink-4 is also 5.40:1 on surface-2 and 4.84:1 on surface-3, so it is safe as card meta everywhere. ink-5 is LARGE TEXT ONLY (>=24px bold / >=32px regular): 4.55:1. */ --fdr-ink-1: #FFFFFF; /* 18.4:1 — headings, stat numbers */ --fdr-ink-2: #E4E2DF; /* 14.3:1 — decks, leads, reviews */ --fdr-ink-3: #BEBEBE; /* 10.0:1 — body copy (=--thm-paragraph-color) */ --fdr-ink-4: #9A9591; /* 6.2:1 — eyebrows, meta, labels */ --fdr-ink-5: rgba(255, 255, 255, 0.45); /* 4.6:1 — oversized numerals only */ /* --- Lines ------------------------------------------------------------- line = hairline between rows / section edges (=--thm-border) strong = a card's own edge, so the card reads as an object ctl = any CONTROL's boundary. 0.38 alpha, not 0.22: the border is the only thing identifying a secondary button and 0.22 measured 2.01:1 against WCAG 1.4.11's 3:1 floor. Now 3.58:1. accent = featured plan, hover edges */ --fdr-line: rgba(255, 255, 255, 0.10); --fdr-line-strong: rgba(255, 255, 255, 0.20); --fdr-line-ctl: rgba(255, 255, 255, 0.38); --fdr-line-accent: rgba(245, 77, 61, 0.55); /* --- Accent ------------------------------------------------------------ accent-fill is the brand red (=--thm-primary-color). White on it is 6.78:1, so it is a valid BUTTON FILL — but it is only 2.76:1 against the canvas, so it can never be red TEXT and never a 1px red BORDER. That is what --fdr-accent is for: a lifted tint of the same hue at 5.26:1. Hover goes BRIGHTER, not darker: on a dark UI a darkening hover reads as "disabled". White on #D2170A is 5.45:1. */ --fdr-accent: #F54D3D; --fdr-accent-fill: #B91202; --fdr-accent-fill-hover: #D2170A; --fdr-accent-fill-active: #9D0F02; /* --- WhatsApp ---------------------------------------------------------- Used in exactly two places: the availability dot and the WhatsApp glyph in micro-copy. NEVER a button fill — white on #25D366 is 1.98:1, and a second filled colour would undo the accent rationing. */ --fdr-wa: #25D366; --fdr-wa-dim: rgba(37, 211, 102, 0.14); /* --- Focus ------------------------------------------------------------- focus-on-accent exists because a red ring on a red fill is invisible. */ --fdr-focus: #F54D3D; --fdr-focus-on-accent: #FFFFFF; /* --- Type scale — 1.25 on mobile, 1.333 on desktop --------------------- step-5 is the hero h1 (was 44->75.8px; the new outcome-led h1 is longer and needs to land on two lines at 1200+). step-6 is decorative index numerals only — never a heading. */ --fdr-step--2: clamp(0.75rem, 0.735rem + 0.07vw, 0.8125rem); /* 12 -> 13 */ --fdr-step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); /* 13 -> 14 */ --fdr-step-0: clamp(1.0625rem, 1.02rem + 0.20vw, 1.125rem); /* 17 -> 18 */ --fdr-step-1: clamp(1.328rem, 1.24rem + 0.42vw, 1.5rem); /* 21 -> 24 */ --fdr-step-2: clamp(1.66rem, 1.50rem + 0.78vw, 2rem); /* 27 -> 32 */ --fdr-step-3: clamp(2.075rem, 1.80rem + 1.32vw, 2.664rem); /* 33 -> 43 */ --fdr-step-4: clamp(2.594rem, 2.15rem + 2.10vw, 3.553rem); /* 42 -> 57 */ --fdr-step-5: clamp(2.5rem, 1.55rem + 4.05vw, 4.25rem); /* 40 -> 68 */ --fdr-step-6: clamp(3.5rem, 2.20rem + 5.60vw, 6.5rem); /* 56 -> 104 */ /* --- Spacing ----------------------------------------------------------- */ --fdr-s0: 0.25rem; --fdr-s1: 0.5rem; --fdr-s2: 0.75rem; --fdr-s3: 1rem; --fdr-s4: 1.5rem; --fdr-s5: 2rem; --fdr-s6: 3rem; --fdr-s7: 4rem; --fdr-s8: 5.5rem; /* --- Section padding tiers --------------------------------------------- THE RHYTHM TOKENS. lg is used by sections 4, 8 and 11 ONLY; sm by section 2 ONLY; md by everything else. Three sections carrying twice the air of their neighbours is what stops the page reading as one long uniform column. */ --fdr-pad-lg: clamp(4.5rem, 3.10rem + 5.80vw, 8rem); /* 72 -> 128 */ --fdr-pad-md: clamp(3.25rem, 2.40rem + 3.50vw, 5.5rem); /* 52 -> 88 */ --fdr-pad-sm: clamp(2rem, 1.60rem + 1.70vw, 3rem); /* 32 -> 48 */ /* --- Gutter ------------------------------------------------------------- 15px at >=992 is not a typo: the theme masthead's logo sits at container-left + 15px, and anything wider breaks the alignment between the hero copy and the header. */ --fdr-gutter: 20px; /* --- Radii -------------------------------------------------------------- 2px on everything structural — the brand is squared. The pill radius is permitted on exactly two components, .fdr-status and .fdr-rating, which are live-status objects; the pill is what makes them read that way. */ --fdr-r: 2px; --fdr-r-lg: 4px; --fdr-r-pill: 100px; /* --- Elevation ---------------------------------------------------------- */ --fdr-shadow-1: 0 10px 28px rgba(0, 0, 0, 0.35); --fdr-shadow-2: 0 18px 48px rgba(0, 0, 0, 0.45); --fdr-glow-accent: 0 8px 26px rgba(185, 18, 2, 0.38); /* --- Texture ------------------------------------------------------------ Zero requests. Used on .fdr-trust and .fdr-band ONLY, to give the two full-bleed strips a surface the contained sections do not have. */ --fdr-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 9px); /* --- Motion ------------------------------------------------------------- */ --fdr-ease: cubic-bezier(0.22, 1, 0.36, 1); --fdr-in: 520ms; --fdr-hover: 160ms; /* --- Typefaces and measure ---------------------------------------------- */ --fdr-display: 'Rajdhani', 'Rajdhani Fallback', sans-serif; --fdr-body: 'Rubik', sans-serif; --fdr-measure: 66ch; --fdr-measure-tight: 52ch; background-color: var(--fdr-surface-0); display: block; overflow-x: clip; } @media only screen and (min-width: 576px) { .fdr { --fdr-gutter: 24px; } } @media only screen and (min-width: 992px) { .fdr { --fdr-gutter: 15px; } } /* Metric-matched fallback for the display face. Rajdhani is font-display:swap and rajdhani-latin-600 — the h1's face — is fetched, not preloaded, so this fallback paints the LCP block on every cold load and its metrics decide whether the swap reflows. 86%, not 92%. size-adjust was swept live at 1440 by substituting the fallback into the h1 and reading its height against settled Rajdhani (144.16px, two lines): 96/94/92% all render 216px (three lines, a 72px upward reflow of the LCP block); 90/88/86/84/82% all render 144px. The boundary sits between 90 and 92, so 86 is chosen four points inside it — close enough to keep glyph widths honest, far enough that a different local() substitute or a hinting change cannot push the h1 over the wrap. min-height reserves a floor and cannot stop growth, so the wrap count has to match here first. This face backs --fdr-display, so it also governs every h2, stat number and index numeral: the block heights of all of them were re-measured against settled Rajdhani after the change and none moved. */ @font-face { font-family: 'Rajdhani Fallback'; src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'); size-adjust: 86%; ascent-override: 102%; descent-override: 25%; line-gap-override: 0%; } /* 0,2,0 beats Bootstrap's .container (0,1,0) without !important. */ .fdr .container { padding-inline: var(--fdr-gutter); } /* Anchor and find-in-page jumps used to park headings under the header. */ .fdr section, .fdr .fdr-hero, .fdr .fdr-band { scroll-margin-top: 110px; } /* ========================================================================== REVEAL ON SCROLL Driven by the page's own IntersectionObserver (pages/founder.blade.php). This page deliberately does NOT use the theme's `wow fadeInUp`: WOW writes inline `visibility: hidden` until an element scrolls into view, which removes descendants from the tab order — 14 of the 16 in-page controls were unreachable by keyboard at load (WCAG 2.1.1). Opacity keeps them focusable throughout, and WOW never sees these nodes, so it no longer walks them on every scroll tick. .fdr-armed is applied by JS only to elements below the fold, so nothing on screen at load is ever hidden — and nothing inside .fdr-hero is ever armed. ========================================================================== */ .fdr .fdr-rise.fdr-armed { opacity: 0; transform: translate3d(0, 18px, 0); } .fdr .fdr-rise.fdr-armed.fdr-in { opacity: 1; transform: none; transition: opacity var(--fdr-in) var(--fdr-ease) var(--fdr-delay, 0ms), transform var(--fdr-in) var(--fdr-ease) var(--fdr-delay, 0ms); } /* ========================================================================== FOCUS Every interactive control on this page owes a visible ring. The primary button overrides the colour: a red ring on a red fill is invisible. ========================================================================== */ .fdr a:focus-visible, .fdr button:focus-visible, .fdr summary:focus-visible, .fdr .fdr-btn:focus-visible { outline: 2px solid var(--fdr-focus); outline-offset: 3px; } /* ========================================================================== TYPOGRAPHIC PRIMITIVES ========================================================================== */ .fdr .fdr-eyebrow { font-family: var(--fdr-body); font-size: var(--fdr-step--1); font-weight: 500; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; /* Not accent-coloured: red means "this is the action" and nothing else, so it lands on the primary button, the lead card, hover edges and the one rule that opens the closing band. */ color: var(--fdr-ink-4); margin: 0 0 var(--fdr-s3); } .fdr .fdr-h2 { font-family: var(--fdr-display); font-weight: 600; font-size: var(--fdr-step-3); line-height: 1.06; letter-spacing: -0.005em; color: var(--fdr-ink-1); margin: 0; text-wrap: balance; /* em, not ch: a ch cap resolves against the parent's body size, not the display size inside it, which collapsed the heading to a two-word column. Rajdhani also sets ~15% narrower than a serif at the same size, hence 16em rather than 20ch. */ max-width: 16em; } /* The theme's .section-title ships padding-bottom:55px; stacked on this margin it produced a uniform 119px void under every section heading. */ .fdr .fdr-head { padding-bottom: 0; margin-bottom: var(--fdr-s6); } .fdr .fdr-head__main { min-width: 0; } .fdr .fdr-head--deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fdr-s4); align-items: start; } .fdr .fdr-deck { font-size: var(--fdr-step-0); line-height: 1.6; color: var(--fdr-ink-2); max-width: 42ch; margin: 0; } .fdr .fdr-prose { font-size: var(--fdr-step-0); line-height: 1.7; color: var(--fdr-ink-3); max-width: var(--fdr-measure); margin: 0; } .fdr .fdr-list { list-style: none; margin: 0; padding: 0; } .fdr .fdr-list__item { position: relative; padding-left: var(--fdr-s4); margin-bottom: var(--fdr-s2); font-size: var(--fdr-step-0); line-height: 1.6; color: var(--fdr-ink-3); } .fdr .fdr-list__item::before { content: "—"; position: absolute; left: 0; color: var(--fdr-accent); } .fdr .fdr-rule { width: 100%; height: 1px; background-color: var(--fdr-line); border: 0; opacity: 1; margin: 0; } /* The fourth and last permitted red element on the page. */ .fdr .fdr-rule--accent { height: 2px; width: 56px; background-color: var(--fdr-accent); } /* ========================================================================== SECTION RHYTHM Surfaces alternate strictly by section index — odd sections sit on the canvas, even sections on the lifted band. Padding tiers do the rest: lg on 4/8/11, sm on 2, md everywhere else. Three sections carrying twice the air of their neighbours is what creates a beat. The concrete section classes are named here as well as the generic utilities, so the rhythm holds whether or not the markup carries .fdr-sec. ========================================================================== */ /* Padding tier md — sections 3, 5, 6, 7, 9, 10. .fdr-section is listed as a compatibility alias only: the previous build's root class carried an 8.5rem tier that would silently break the rhythm if a partial kept it. It is not the class to write in new markup. */ .fdr .fdr-sec, .fdr .fdr-section, .fdr .fdr-say, .fdr .fdr-cap, .fdr .fdr-vent, .fdr .fdr-proc, .fdr .fdr-depth, .fdr .fdr-faq { padding-block: var(--fdr-pad-md); } /* Padding tier lg — sections 4, 8, 11 */ .fdr .fdr-sec--lg, .fdr .fdr-pos, .fdr .fdr-eng, .fdr .fdr-band { padding-block: var(--fdr-pad-lg); } /* Padding tier sm — section 2 only */ .fdr .fdr-sec--sm, .fdr .fdr-trust { padding-block: var(--fdr-pad-sm); } /* Canvas — odd sections. Restated rather than inherited because the previous generation of rules in custom-style.css painted three of these surface-1. */ .fdr .fdr-say, .fdr .fdr-cap, .fdr .fdr-proc, .fdr .fdr-depth, .fdr .fdr-band { background-color: var(--fdr-surface-0); } /* Lifted band — even sections */ .fdr .fdr-lift, .fdr .fdr-trust, .fdr .fdr-pos, .fdr .fdr-vent, .fdr .fdr-eng, .fdr .fdr-faq { background-color: var(--fdr-surface-1); border-top: 1px solid var(--fdr-line); border-bottom: 1px solid var(--fdr-line); } /* ========================================================================== COMPONENT · BUTTONS ========================================================================== */ .fdr .fdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 var(--fdr-s5); font-family: var(--fdr-body); font-size: var(--fdr-step-0); font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; color: var(--fdr-ink-1); background-color: transparent; border: 1px solid transparent; border-radius: var(--fdr-r); cursor: pointer; transition: background-color var(--fdr-hover) var(--fdr-ease), border-color var(--fdr-hover) var(--fdr-ease), box-shadow var(--fdr-hover) var(--fdr-ease), color var(--fdr-hover) var(--fdr-ease); } /* THE WHATSAPP BUTTON. WCAG 1.4.11: the fill IS this control's boundary, and #B91202 measures 2.76:1 against the canvas. The brand fill stays; the lighter edge of the same hue gives it a 5.26:1 boundary. */ .fdr .fdr-btn--primary { background-color: var(--fdr-accent-fill); border-color: var(--fdr-accent); color: #ffffff; } .fdr .fdr-btn--primary:hover { background-color: var(--fdr-accent-fill-hover); box-shadow: var(--fdr-glow-accent); } .fdr .fdr-btn--primary:active { background-color: var(--fdr-accent-fill-active); } /* White, not red: the ring has to survive on top of the red fill. */ .fdr .fdr-btn--primary:focus-visible { outline: 2px solid var(--fdr-focus-on-accent); outline-offset: 3px; } /* THE "BOOK A CALL" BUTTON, everywhere. 0.38 alpha, not 0.22: the border is the only thing identifying this control and 0.22 measured 2.01:1 against WCAG 1.4.11's 3:1 floor. Now 3.58:1. */ .fdr .fdr-btn--secondary { background-color: transparent; border-color: var(--fdr-line-ctl); color: var(--fdr-ink-1); } .fdr .fdr-btn--secondary:hover { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.06); } /* Tertiary only. Max one per section, never adjacent to --secondary. */ .fdr .fdr-btn--ghost { background-color: transparent; border-color: transparent; color: var(--fdr-ink-2); padding-inline: 0; justify-content: flex-start; text-align: left; } .fdr .fdr-btn--ghost:hover { color: var(--fdr-ink-1); background-color: transparent; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .fdr .fdr-btn--lg { min-height: 60px; padding: 0 var(--fdr-s6); font-size: var(--fdr-step-1); } .fdr .fdr-btn--sm { min-height: 44px; padding: 0 var(--fdr-s4); font-size: var(--fdr-step--1); } .fdr .fdr-btn--ghost.fdr-btn--sm { padding-inline: 0; } .fdr .fdr-btn--block { width: 100%; } .fdr .fdr-btn__icon { flex: none; width: 20px; height: 20px; color: currentColor; } .fdr .fdr-btn__arrow { flex: none; transition: transform var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-btn:hover .fdr-btn__arrow { transform: translateX(2px); } /* ========================================================================== COMPONENT · CARD ========================================================================== */ .fdr .fdr-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: var(--fdr-s5); overflow: hidden; background-color: var(--fdr-surface-2); border: 1px solid var(--fdr-line-strong); border-radius: var(--fdr-r); transition: border-color var(--fdr-hover) var(--fdr-ease), background-color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-card:hover { border-color: var(--fdr-line-accent); background-color: var(--fdr-surface-3); } /* Featured is signalled by the accent edge, not a lighter fill: surface-2 already means "card", so re-using a fill for "featured" would make the elevation system contradict itself. */ .fdr .fdr-card--lead { border-color: var(--fdr-line-accent); } /* THE GRAPHIC. This page has one portrait and one treated field and no other photography, so the oversized numerals are the imagery. Clipped by the card's overflow so it reads as a watermark rather than a label. */ .fdr .fdr-card__index { position: absolute; top: var(--fdr-s3); right: var(--fdr-s4); font-family: var(--fdr-display); font-weight: 600; font-size: var(--fdr-step-4); line-height: 0.8; color: var(--fdr-ink-5); pointer-events: none; } .fdr .fdr-card__title { position: relative; font-family: var(--fdr-body); font-size: var(--fdr-step-1); font-weight: 500; line-height: 1.25; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s3); } .fdr .fdr-card__body { margin: 0 0 var(--fdr-s4); hyphens: none; text-wrap: pretty; } .fdr .fdr-card__meta { margin: auto 0 0; padding-top: var(--fdr-s3); border-top: 1px solid var(--fdr-line); font-size: var(--fdr-step--1); line-height: 1.6; color: var(--fdr-ink-4); } /* .fdr-card__foot follows .fdr-card__meta in some cards and precedes it in others, so it cannot rely on margin-top:auto for its own alignment. */ .fdr .fdr-card__foot { margin-top: var(--fdr-s4); } .fdr .fdr-card__meta + .fdr-card__foot { margin-top: var(--fdr-s4); } .fdr .fdr-card__foot + .fdr-card__meta { margin-top: var(--fdr-s3); padding-top: 0; border-top: 0; } /* Card gutters must exceed card padding or the grid loses its separation. */ .fdr .fdr-grid { --bs-gutter-x: 40px; row-gap: var(--fdr-s4); } .fdr .fdr-grid--tight { --bs-gutter-x: 32px; } .fdr .fdr-grid > [class*="col-"] { display: flex; } /* ========================================================================== COMPONENT · STAT The value is a plain text node written by the author. There is no data-to, no .fdr-count, no observer and no odometer on this page: the previous build rendered the real numbers server-side and then had JavaScript overwrite all four with "0" until an IntersectionObserver counted them back up, so the strongest credibility signal on the page read zero to every visitor at scrollY 0. Never reintroduce that. ========================================================================== */ .fdr .fdr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fdr-s4) var(--fdr-s3); margin: 0; padding: 0; list-style: none; } .fdr .fdr-stat { display: flex; flex-direction: column; gap: var(--fdr-s1); min-width: 0; } .fdr .fdr-stat__num { font-family: var(--fdr-display); font-size: var(--fdr-step-4); font-weight: 600; line-height: 1; color: var(--fdr-ink-1); /* Without this the row shatters at 200% text zoom: "2,000" and "+" split across lines and the labels lose their shared baseline. */ white-space: nowrap; } .fdr .fdr-stat__label { font-size: var(--fdr-step--1); letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); } /* ========================================================================== COMPONENT · PILLS, CHIPS, TAGS The pill radius is permitted on .fdr-status and .fdr-rating only. They are live-status objects and the pill is what makes them read that way; using it anywhere else breaks the squared brand. ========================================================================== */ .fdr .fdr-status { display: inline-flex; align-items: center; gap: var(--fdr-s2); margin: 0; padding: 7px 14px 7px 12px; font-size: var(--fdr-step--2); letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-2); background-color: var(--fdr-surface-2); border: 1px solid var(--fdr-line); border-radius: var(--fdr-r-pill); } .fdr .fdr-status__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background-color: var(--fdr-wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.16); } .fdr .fdr-rating { display: inline-flex; align-items: center; gap: var(--fdr-s2); margin: 0; padding: 7px 14px; font-size: var(--fdr-step--2); letter-spacing: 0.02em; line-height: 1.4; color: var(--fdr-ink-2); background-color: transparent; border: 1px solid var(--fdr-line); border-radius: var(--fdr-r-pill); } .fdr .fdr-rating__stars { flex: none; letter-spacing: 0.12em; color: #F0B429; } .fdr .fdr-chip { display: inline-flex; align-items: center; padding: 9px 18px; font-size: var(--fdr-step--1); line-height: 1.4; color: var(--fdr-ink-2); background-color: var(--fdr-surface-2); border: 1px solid var(--fdr-line); border-radius: var(--fdr-r); } .fdr .fdr-tag { display: inline-block; font-size: var(--fdr-step--2); letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); } /* ========================================================================== COMPONENT · QUOTE AND REVIEW ========================================================================== */ .fdr .fdr-quote { margin: 0; padding-left: var(--fdr-s5); border-left: 2px solid var(--fdr-line-ctl); } .fdr .fdr-quote__text { font-family: var(--fdr-display); font-size: var(--fdr-step-2); font-weight: 500; line-height: 1.22; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s4); padding: 0; border: 0; /* 18em, not the 15em the component spec names. At 15em the one quote on the page set to four lines and put S4 at 862px against a 600-720px budget; 18em balances the same words to three and returns 39px without touching the copy, which is verbatim. Nothing else uses .fdr-quote. */ max-width: 18em; text-wrap: balance; } .fdr .fdr-quote__cite { display: block; font-size: var(--fdr-step--1); letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); font-style: normal; } /* .fdr-review is a .fdr-card variant: it carries both classes in the markup and only overrides what differs. */ .fdr .fdr-review { height: 100%; margin: 0; } /* Cancel the card hover. Nothing inside a review is interactive — no link, no button — so lighting the edge with the accent promises a click that does not exist, and it spends the rationed red two sections before the engagement cards need it to mean "this is the action". Restated rather than reset to "revert" because the transition on .fdr-card still animates the properties. */ .fdr .fdr-review:hover { border-color: var(--fdr-line-strong); background-color: var(--fdr-surface-2); } /* The glyph run is one unbreakable token, so at 200% text it needed 155px in a 111px clipped card and the row truncated to three and a half stars — which reads as a three-star review. On a section whose entire claim is that these are quoted exactly, a rating that visibly loses stars is a misstatement, not a cosmetic clip. Wrapping keeps all five visible on two lines. */ .fdr .fdr-review__stars { letter-spacing: 0.12em; font-size: var(--fdr-step--1); color: #F0B429; margin-bottom: var(--fdr-s3); overflow-wrap: break-word; } .fdr .fdr-review__text { font-size: var(--fdr-step-0); line-height: 1.6; color: var(--fdr-ink-2); margin: 0 0 var(--fdr-s4); padding: 0; border: 0; text-wrap: pretty; /* WCAG 1.4.4, content loss not cosmetics. At a 200% text setting in the 2-up grid the card content box is 111px while the quotes need 133-251px, and .fdr-card clips with overflow: hidden — so words were cut mid-glyph. text-wrap: pretty governs ragging, not break opportunities; this is the declaration that lets a word too long for the line break inside itself. */ overflow-wrap: break-word; } /* Wraps to a second row rather than overflowing. The monogram is a fixed 44px and the gap scales with the root font size, so at 992-1199 (147px of card) and at 200% text (111px) the name has 87px and 35px left respectively — less than "tempoaudiogroup" needs. With flex-wrap the identity block drops below the monogram and gets the full width instead of being clipped. */ .fdr .fdr-review__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fdr-s3); margin-top: auto; padding-top: var(--fdr-s3); border-top: 1px solid var(--fdr-line); } /* min-width: 0 defeats the flex item's automatic minimum size, which is what otherwise pins this block to the width of an unbreakable username and pushes it past the card edge. It does not affect the wrap decision above (that uses the flex base size), only whether the box may shrink once wrapped. */ .fdr .fdr-review__id { min-width: 0; } /* A marketplace username is one unbreakable token and the country name has a 9-character word in it; both sit in a clipped card. Same reasoning as the quote above. */ .fdr .fdr-review__name, .fdr .fdr-review__meta { overflow-wrap: break-word; } /* A monogram, not a photograph. In the source testimonials the avatar filenames and the displayed usernames do not correspond, so those faces are not the reviewers' — publishing one beside a named review would fabricate a likeness. Swap for a 44x44 only if verified reviewer photos are ever supplied. */ .fdr .fdr-review__mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--fdr-r); background-color: var(--fdr-surface-3); font-family: var(--fdr-display); font-size: var(--fdr-step-1); font-weight: 600; line-height: 1; color: var(--fdr-ink-2); } .fdr .fdr-review__name { display: block; font-family: var(--fdr-body); font-size: var(--fdr-step--1); font-weight: 500; line-height: 1.3; color: var(--fdr-ink-1); } .fdr .fdr-review__meta { display: block; font-size: var(--fdr-step--2); line-height: 1.4; color: var(--fdr-ink-4); } /* ========================================================================== COMPONENT · LOGO TILE No logo files exist for these companies. Fabricating a wordmark, or substituting the generic brand/*.png files that belong to other clients, would both be false claims — so the tile is set type. If a real SVG wordmark ever lands in assets/img/founder/, swap the text node for an at 24px height and nothing else changes. ========================================================================== */ .fdr .fdr-logos { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--fdr-s3); margin: 0; padding: 0; list-style: none; } .fdr .fdr-logo { flex: 1 1 auto; min-width: 180px; display: grid; place-items: center; gap: 2px; min-height: 68px; padding: var(--fdr-s2) var(--fdr-s4); text-decoration: none; background-color: var(--fdr-surface-2); border: 1px solid var(--fdr-line); border-radius: var(--fdr-r); transition: border-color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-logo:hover { border-color: var(--fdr-line-accent); } .fdr .fdr-logo__mark { font-family: var(--fdr-display); font-size: var(--fdr-step-1); font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; color: var(--fdr-ink-2); white-space: nowrap; transition: color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-logo:hover .fdr-logo__mark { color: var(--fdr-ink-1); } /* ========================================================================== S1 · HERO Painted and settled at first paint: nothing in here animates, nothing in here is ever armed by the reveal observer. ========================================================================== */ /* The theme header only overlays the hero from 1200 up. Below that it is a 90px bar in normal flow, so the hero's own padding-top IS the whole gap between the header and the first thing in the hero — and a single clamp written for the overlaying case put 112px at 390, 117px at 768 and 127px at 1024 of empty band there against 34px at 1440. At 390 that void was pushing "Book a call" to y=886, past the bottom of a bare 844px viewport and far past the ~700px a real phone browser leaves after its chrome. The two cases are different problems and now have different rules; only the >=1200 tier carries the 110px header offset. */ .fdr .fdr-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--fdr-s3); /* Both tiers were pulled in to land the section inside its 780-880px budget at 1440 without touching the final hero copy or --fdr-step-5: 152/90 measured a 958px section. 144px still clears the 110px header with 34px of air, and 65px at the bottom meets the trust band's own 48px pad — 113px between the proof rule and the first logo tile. */ padding-bottom: clamp(3.25rem, 2.1rem + 2.2vw, 4rem); background-color: var(--fdr-surface-0); } .fdr .fdr-hero__field, .fdr .fdr-hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* Below 992px the field carries no image at all: a CSS background is invisible to the preload scanner, and this one was the mobile LCP element at 3,180ms. The header's preload hint is scoped to the same breakpoint. Its radial falloff is baked into the asset's alpha — as a runtime mask-image it cost 323ms of raster, 38% of the page's budget. */ .fdr .fdr-hero__field { background-image: none; background-size: cover; background-position: 72% 42%; opacity: 0.62; } .fdr .fdr-hero__veil { background: linear-gradient(180deg, rgba(20, 20, 22, 0.34) 0%, rgba(20, 20, 22, 0.62) 58%, var(--fdr-surface-0) 100%); } /* Flat CSS-Grid children, not a Bootstrap row: the portrait has to move between the strip and the h1 at 992px, and a Bootstrap row cannot do that without a second in the DOM (two downloads, duplicate alt). */ .fdr .fdr-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "strip strip" "portrait id" "copy copy" "proof proof"; align-items: center; column-gap: var(--fdr-s4); /* s3, not s4. Four rows means three gaps, and two of them sit above the CTA pair — the cheapest 16px available on the way to getting both hero buttons inside a phone's first screen. */ row-gap: var(--fdr-s3); } .fdr .fdr-hero__strip { grid-area: strip; } .fdr .fdr-hero__portrait { grid-area: portrait; } .fdr .fdr-hero__id { grid-area: id; } .fdr .fdr-hero__copy { grid-area: copy; } .fdr .fdr-hero__proof { grid-area: proof; } .fdr .fdr-hero__strip { display: flex; flex-wrap: wrap; align-items: center; /* Asymmetric on purpose: below 576 the two pills stack, and the row gap is then vertical hero height rather than horizontal separation. */ gap: var(--fdr-s1) var(--fdr-s3); margin: 0; } /* The element is the crop window and the inside it is oversized: see the >=992 block for the arithmetic. At 991 and below the window is a circle. object-fit:cover cannot do this job — cover on a 1:1 frame is width-driven for a 1000x1339 source, so it fitted the WHOLE 1000px width into a 112px disc and the head came out 49% of it. */ .fdr .fdr-hero__portrait { position: relative; isolation: isolate; overflow: hidden; width: 112px; height: 112px; border-radius: 50%; /* padding/border/margin are a defence, not a reset — same case as the max-width:none on .fdr-hero__copy below. The old stacked hero put the portrait under a divider, and that rule is still on the page at custom-style.css:2104 inside @media (max-width: 991.98px): `padding-top: var(--fdr-s5); border-top: 1px solid var(--thm-border)`. It painted a stray hairline above the face and pushed it 32px down its own grid cell. A media query carries no extra specificity, so this bare 0,2,0 rule beats that 0,1,0 one at every width without needing a matching query. Remove it only when the .fdr- block leaves custom-style.css. */ margin: 0; padding: 0; border: 0; } /* Source rect x[95,795] y[110,810] — a 700px square centred on the head, which leaves it 105px of margin on both sides and sits it slightly above the circle's centre the way a portrait crop wants. scale = 112 / 700; the width is 1000 * scale and the offsets are -rect-origin * scale, all expressed as percentages of the 112px frame. A tighter 545px square put the chin and the crown outside the disc. */ /* object-fit, not a percentage crop: the frame changes shape between breakpoints (circle below 992, 3:4 above) and cover follows it, so one untreated file serves both without three offsets hard-coded to one asset's pixel dimensions. object-position holds the face on the frame's centre line — it sits at ~50% across and ~29% down this source. No filter and no key light. Both existed only to rescue a duotoned, seam-ridden asset; this photograph is already correctly exposed, and lifting it further only clips the highlights on the shirt and the wall. */ .fdr .fdr-hero__portrait img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 29%; /* The disc is 112px and the source is a whole desk scene, so cover alone leaves the face about 12% of the frame — an avatar has to be a face. cover already draws the source at 0.295x here, which puts the face centre at 48%/22% of the disc; scaling 2.71x about that point shows a ~140px-square region of the source instead of the full 380px width. The 3:4 frame at >=992 wants the wider read and resets this. */ transform: scale(2.71); transform-origin: 48% 22%; } /* A circle needs no vignette: the disc edge already ends the frame. */ .fdr .fdr-hero__portrait::after { display: none; } .fdr .fdr-hero__id { margin: 0; min-width: 0; } /* The name is this page's target query, so it gets real display type as visible text rather than living only in alt text and the . */ .fdr .fdr-hero__name { display: block; font-family: var(--fdr-display); font-size: var(--fdr-step-1); font-weight: 600; line-height: 1.2; color: var(--fdr-ink-1); } /* balance, with the last two words bound by an   in the markup: beside a 112px avatar this line has a 214px column at 390, and greedy wrapping left "Engineer" alone on a third line. */ .fdr .fdr-hero__roles { display: block; margin-top: 4px; font-size: var(--fdr-step--1); letter-spacing: 0.04em; line-height: 1.5; color: var(--fdr-ink-4); text-wrap: balance; } /* max-width:none is load-bearing, not a reset. The legacy `.fdr-hero__copy { max-width: 40rem }` at custom-style.css:1254 is still on the page and capped this block at 640px, inside a 7fr track that measures 724.5px at 1440 — so the h1 wrapped to three lines (216px) and pushed the proof strip below a 900px fold. That file is owned by another workflow and must not be edited; 0,2,0 here outranks its 0,1,0 at every width. Measured: at 660/680/700px the h1 is 3 lines; at 724px it settles to 2 lines (144px), which is exactly what the 7fr track already provides — so the 2.12em reserve in the min-width:1200px block is correct and becomes live once the cap goes. Remove this line only when the .fdr- block leaves custom-style.css. */ .fdr .fdr-hero__copy { min-width: 0; max-width: none; } .fdr .fdr-hero__title { font-family: var(--fdr-display); font-weight: 600; font-size: var(--fdr-step-5); line-height: 1.06; letter-spacing: -0.005em; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s3); text-wrap: balance; } .fdr .fdr-hero__sub { font-size: var(--fdr-step-0); line-height: 1.7; color: var(--fdr-ink-2); max-width: 54ch; /* s3, not s5. The hero measured 958px against a 780-880px budget and the spec forbids shrinking --fdr-step-5 or rewriting the final hero copy, so the overrun came out of the spacing tiers that were carrying the most air: this one, the h1's, the grid's row gaps and the proof strip's. */ margin: 0 0 var(--fdr-s3); } .fdr .fdr-hero__actions { display: flex; flex-wrap: wrap; /* s1 while they are stacked and full width: at 8px the pair reads as one control group, which is what it is, and every pixel here is a pixel of a phone's first screen. It goes back to s3 at 768, where the buttons sit inline and 8px would read as a mistake. */ gap: var(--fdr-s1); } .fdr .fdr-hero__actions .fdr-btn { width: 100%; } /* s5, not the component's s6. From 992 the copy column is 533px and the two --lg buttons at their natural 320px + 221px need 557px, so they wrapped into a left-aligned stack of two DIFFERENT widths — the worst of both layouts — everywhere between 992 and ~1056. Trimming 16px of padding from each side brings the pair to 493px, which fits at 992 with 40px to spare and holds at every width above it. The alternative, widening the copy column in that band, would have cost the portrait 76px exactly where it is narrowest. */ .fdr .fdr-hero__actions .fdr-btn--lg { padding-inline: var(--fdr-s5); } .fdr .fdr-hero__micro { margin: var(--fdr-s3) 0 0; font-size: var(--fdr-step--2); line-height: 1.5; color: var(--fdr-ink-4); } /* No margin-top: the grid row-gap already separates this from the copy block, and stacking s5 on top of it put 88px between the micro-line and the stat numbers. The rule now sits centred in a 32px band — 16px of row-gap above, 16px of padding below — which is what a hairline wants and 48px of the hero's height budget cheaper. The four labels are broken to two lines in the markup rather than left to wrap. One line for all four is unreachable: at 992 the 7fr copy column gives each stat 119px against labels that measure 132-171px, so every label wraps there; at 1100/1200 three of four wrap; at 1366+ only "Companies founded" (170.6px against a 169.1px column) does. Every intermediate width is a different ragged edge under the page's strongest credibility signal. Two lines is the only state that holds from 390 to 1920, and at >=1366 it costs nothing — the row was already that tall because of the fourth label. */ .fdr .fdr-hero__proof { padding-top: var(--fdr-s3); border-top: 1px solid var(--fdr-line); } /* A type guard, not a layout change. From 992 to 1339 the proof row lives in the 7fr copy column, so its four tracks measure 121-152px while "2,000+" at the full --fdr-step-4 measures 156-160px — the widest two numbers ran into each other, which is a poor look for the row this rebuild exists to rescue. Each stat becomes its own query container so the ceiling can be stated as a share of the track rather than of the viewport: "2,000+" is a fixed 2.81em whatever the width, so 34cqw is the largest size that always clears it. The guard binds only where it must — at 768 and from 1340 up the min() resolves to --fdr-step-4 unchanged. Engines without container query units drop the declaration and fall back to the component's own size. */ .fdr .fdr-hero__proof .fdr-stat { container-type: inline-size; } .fdr .fdr-hero__proof .fdr-stat__num { font-size: min(var(--fdr-step-4), 34cqw); } /* ========================================================================== S2 · TRUST BAND A ~180px horizontal beat. Revealed as one block, never tile by tile. ========================================================================== */ .fdr .fdr-trust { background-image: var(--fdr-hatch); } /* s3, not s4: below 992 the label stacks above the row, and the extra 8px was the difference between a 198px band and a 206px one at 991. */ .fdr .fdr-trust__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fdr-s3); align-items: center; } /* An eyebrow-styled h2, so the heading level stays honest without a 42px heading inside a 180px band. */ .fdr .fdr-trust__label { margin: 0; } /* Every tile in this band now holds one line, so the component's own 68px floor is the right one — but stated as max(px, rem), not raw px. A px min-height cannot grow when the user raises the root font size, and that is exactly how the old employer caption ended up 3.4px INSIDE the wordmark's line box at 200% text zoom (WCAG 1.4.4). The rem branch takes over above a 16px root and the tile grows with its contents. The symmetric padding-block is load-bearing — place-items centres the mark inside the CONTENT box, so any asymmetry pushes the mark off the tile's optical centre. */ .fdr .fdr-trust .fdr-logo { min-height: max(68px, 4.25rem); padding-block: var(--fdr-s2); } /* THE EMPLOYER IS NOT A TILE. Four visually identical tiles under "Companies I founded and run", separated only by a caption at half the wordmark's size, skim as four foundings and contradicted the hero's own "3 Companies founded". It was also the reason the row's type was small: at equal tracks the longest string sets the size for every tile, and the longest string — ElectronicFirst.com, 7.85em — was the one item that is not a venture. Removing it from the row hands the type guard below the 7.25em of xCyberSecurity.io instead, which is what lifts the marks from ~17px to their full token across 768–1200. A flex column rather than another grid: only two children, and the scroller below 768 needs to keep its negative inline margins working against the container's content box. */ .fdr .fdr-trust__main { display: flex; flex-direction: column; gap: var(--fdr-s2); min-width: 0; } /* Baseline alignment, not centre: the label, the link and the role line are three different sizes on one reading line. The row gap is s0 because when this wraps at ≤575 the three parts are still one sentence. */ .fdr .fdr-trust__role { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fdr-s0) var(--fdr-s2); margin: 0; font-size: var(--fdr-step--2); line-height: 1.4; color: var(--fdr-ink-4); } /* The .fdr-tag token carries the type; the hairline is what separates the label from the company name without spending a middot that a screen reader would read out. */ .fdr .fdr-trust__role-label { padding-inline-end: var(--fdr-s2); border-right: 1px solid var(--fdr-line); } /* ink-2 and underlined — a text link, deliberately not a tile. Hover goes to white rather than to the accent: red on this page means "this is the action", and the accent budget is spent on the four WhatsApp surfaces. */ .fdr .fdr-trust__role-link { color: var(--fdr-ink-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.22); text-underline-offset: 4px; transition: color var(--fdr-hover) var(--fdr-ease), text-decoration-color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-trust__role-link:hover { color: var(--fdr-ink-1); text-decoration-color: var(--fdr-ink-1); } /* A DELIBERATE EXCEPTION to this file's mobile-first, min-width-only rule. It is scoped downward precisely because what it carries must not leak upward: a scroll container with no scrollbar, no edge fade and no drag affordance is only honest where the input is a finger. From 768 up the row is a grid that always fits — see the min-width: 768px block — so the scroller is bounded on both sides rather than running to 991 and clipping its last tile against a mouse. Below 768 the tiles cannot share one line at any type size worth reading, and every way of wrapping them leaves an orphan row, which reads as a layout bug in a band whose entire job is looking orderly. Every tile is a link, so keyboard users reach them all regardless of the overflow. padding-block and margin-block cancel to zero layout height and exist only so the focus ring has somewhere to paint. A scroll container clips at its padding box, and setting overflow-x alone computes overflow-y to auto, so without the reserve the ring — outline-offset 3px + outline-width 2px — is cut off above and below every tile. scroll-padding-inline covers the same ring horizontally, and it is not optional. The default snapport is the scrollport, so on load the proximity snap pulled the first tile's scroll-snap-align:start flush to the clip edge — scrollLeft settled at 20px, the padding-inline was scrolled out of existence, and tile one's ring was clipped down its left side before the user touched anything. Insetting the snapport by the same gutter makes scrollLeft 0 the snap position. */ @media only screen and (max-width: 767.98px) { .fdr .fdr-trust .fdr-logos { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--fdr-gutter); scrollbar-width: none; margin-block: -5px; margin-inline: calc(var(--fdr-gutter) * -1); padding-block: 5px; padding-inline: var(--fdr-gutter); } .fdr .fdr-trust .fdr-logos::-webkit-scrollbar { display: none; } .fdr .fdr-trust .fdr-logo { flex: 0 0 auto; min-width: 168px; scroll-snap-align: start; } } /* ========================================================================== S3 · REVIEWS Four light cards on the dark canvas — the first proof on this page that is not self-asserted. ========================================================================== */ .fdr .fdr-say__grid { --bs-gutter-x: 32px; row-gap: var(--fdr-s4); } .fdr .fdr-say__grid > [class*="col-"] { display: flex; } /* ========================================================================== S4 · POSITIONING The rest point: the fewest elements on the page and twice the air. ========================================================================== */ .fdr .fdr-pos__beats { row-gap: var(--fdr-s6); } .fdr .fdr-beat { padding-left: var(--fdr-s4); border-left: 1px solid var(--fdr-line); } .fdr .fdr-beat__title { font-family: var(--fdr-body); font-size: var(--fdr-step-1); font-weight: 500; line-height: 1.3; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s2); text-wrap: balance; } .fdr .fdr-pos .fdr-quote { margin-top: var(--fdr-s7); } /* ========================================================================== S5 · CAPABILITIES ========================================================================== */ .fdr .fdr-cap__grid { --bs-gutter-x: 40px; row-gap: var(--fdr-s4); } .fdr .fdr-cap__grid > [class*="col-"] { display: flex; } /* The index numeral is anchored to the BOTTOM-right here, not the top-right the base component uses, and it is the only section that renders one. At --fdr-step-6 the numeral measures 67-110px wide and 83px tall. Anchored top-right it lands squarely on the card's first three text lines: measured overlap was 4-56px of body line 1 on all four cards at 1440, and at 768 the "Security Engineering" title crossed it by 42x28px. Reserving space instead does not work — clearing a 110px numeral offset --fdr-s4 from the edge needs 134px of padding-right, and at 768 that leaves a 168px measure and adds three wrapped lines to every card. Low, the numeral occupies the one band no text does: the card's foot row is a single left-aligned ghost button 150px wide, so the smallest horizontal gap between button and numeral is 43px, at 768, and grows with the card. The negative bottom offset lets the card's own overflow:hidden crop the glyph, which is what makes it read as a watermark and not a label. */ .fdr .fdr-cap .fdr-card__index { top: auto; bottom: calc(var(--fdr-s3) * -1); } /* ========================================================================== S6 · VENTURES Wide, edge-to-edge rows — horizontal motion after a card grid. ========================================================================== */ .fdr .fdr-vent__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fdr-line); } .fdr .fdr-vent__row, .fdr .fdr-vent__credential { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: var(--fdr-s4); row-gap: var(--fdr-s2); padding: var(--fdr-s4) var(--fdr-s3); /* The transparent left edge is reserved at rest so the hover state cannot shift the row by 2px. */ border-left: 2px solid transparent; border-bottom: 1px solid var(--fdr-line); margin-inline: calc(var(--fdr-s3) * -1); transition: background-color var(--fdr-hover) var(--fdr-ease), border-left-color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-vent__row:hover { background-color: var(--fdr-surface-2); border-left-color: var(--fdr-accent); } .fdr .fdr-vent__credential { border-top: 1px solid var(--fdr-line); border-bottom: 0; border-left-color: transparent; margin-top: var(--fdr-s4); } .fdr .fdr-vent__name { font-family: var(--fdr-display); font-weight: 600; font-size: var(--fdr-step-2); line-height: 1.2; color: var(--fdr-ink-1); margin: 0; } /* With no case studies available, outbound links to the ventures are the only third-party-verifiable proof on this page. */ .fdr .fdr-vent__name a { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.22); transition: text-decoration-color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-vent__name a:hover { text-decoration-color: var(--fdr-accent); } .fdr .fdr-vent__remit { font-size: var(--fdr-step-0); line-height: 1.6; color: var(--fdr-ink-3); margin: 0; order: 3; text-wrap: pretty; } .fdr .fdr-vent__role { font-size: var(--fdr-step--1); letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); margin: 0; text-align: left; order: 2; } .fdr .fdr-vent__credential .fdr-vent__role { letter-spacing: 0.05em; } /* ========================================================================== S7 · PROCESS The biggest height saving on the page: 1,422px of vertical list becomes a horizontal rail at >=992. ========================================================================== */ .fdr .fdr-proc__rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; } .fdr .fdr-proc__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--fdr-s3); padding: var(--fdr-s4) 0; border-top: 1px solid var(--fdr-line); } .fdr .fdr-proc__step:last-child { border-bottom: 1px solid var(--fdr-line); } /* A 2px accent segment on step 01 only: it marks where the sequence starts without turning four steps into four red things. */ .fdr .fdr-proc__step:first-child::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background-color: var(--fdr-accent); } .fdr .fdr-proc__num { grid-row: 1; font-family: var(--fdr-display); font-size: var(--fdr-step-2); font-weight: 600; line-height: 1; color: var(--fdr-ink-5); } .fdr .fdr-proc__title { grid-row: 1; font-family: var(--fdr-body); font-size: var(--fdr-step-1); font-weight: 500; line-height: 1.25; color: var(--fdr-ink-1); margin: 0; } .fdr .fdr-proc__body { grid-column: 1 / -1; margin-top: var(--fdr-s2); max-width: 46ch; } .fdr .fdr-proc__after, .fdr .fdr-faq__after { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fdr-s3); margin: var(--fdr-s6) 0 0; /* The measure cap is what keeps the Process closer from running the full 1290px of its container; the FAQ closer sits in a narrower column and never reaches it. */ max-width: var(--fdr-measure); font-size: var(--fdr-step-0); line-height: 1.5; color: var(--fdr-ink-4); } /* The previous build styled every <a> inside these closers as an inline underlined link at (0,2,1). A button here now, so the reset needs to beat that specificity — hence a.fdr-btn rather than .fdr-btn. */ .fdr .fdr-proc__after a.fdr-btn, .fdr .fdr-faq__after a.fdr-btn, .fdr .fdr-eng__after a.fdr-btn { padding-block: 0; text-decoration: none; } .fdr .fdr-proc__after a.fdr-btn:hover, .fdr .fdr-faq__after a.fdr-btn:hover, .fdr .fdr-eng__after a.fdr-btn--ghost:hover { text-decoration: underline; text-underline-offset: 5px; } .fdr .fdr-proc__after a.fdr-btn--secondary:hover, .fdr .fdr-faq__after a.fdr-btn--secondary:hover { text-decoration: none; } /* ========================================================================== S8 · ENGAGEMENTS The commercial peak: three cards, three red buttons, twice the air. ========================================================================== */ .fdr .fdr-eng__grid { --bs-gutter-x: 40px; row-gap: var(--fdr-s4); } .fdr .fdr-eng__grid > [class*="col-"] { display: flex; } /* The ribbon sits above the title inside the lead card. */ .fdr .fdr-eng .fdr-card .fdr-tag { margin-bottom: var(--fdr-s2); } /* The one place on the page where three primaries sit side by side. */ .fdr .fdr-eng .fdr-card__foot .fdr-btn { width: 100%; } .fdr .fdr-eng__after { margin: var(--fdr-s5) 0 0; } /* ========================================================================== S9 · DEPTH (stack + record, merged) The CTO's section. Dense, quiet, deliberately less loud than S8 — and it folds 1,849px of adjacent lifted surface into one block. ========================================================================== */ .fdr .fdr-depth__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fdr-s6); align-items: start; } .fdr .fdr-depth__stack { margin: 0; border-top: 1px solid var(--fdr-line); } .fdr .fdr-depth__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fdr-s3); align-items: baseline; padding: var(--fdr-s4) 0; border-bottom: 1px solid var(--fdr-line); } .fdr .fdr-depth__label { font-size: var(--fdr-step--1); font-weight: 500; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); margin: 0; } .fdr .fdr-depth__items { display: flex; flex-wrap: wrap; gap: var(--fdr-s2); margin: 0; } .fdr .fdr-depth__record { margin: 0; padding: 0 0 0 var(--fdr-s5); list-style: none; border-left: 1px solid var(--fdr-line); } .fdr .fdr-cred__item { position: relative; padding-bottom: var(--fdr-s5); } .fdr .fdr-cred__item:last-child { padding-bottom: 0; } .fdr .fdr-cred__item::before { content: ""; position: absolute; left: calc(var(--fdr-s5) * -1 - 3px); top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.35); } .fdr .fdr-cred__when { display: block; font-size: var(--fdr-step--1); letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--fdr-ink-4); margin-bottom: var(--fdr-s1); } .fdr .fdr-cred__what { font-family: var(--fdr-body); font-weight: 500; font-size: var(--fdr-step-1); line-height: 1.25; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s1); } .fdr .fdr-cred__where { font-size: var(--fdr-step-0); line-height: 1.6; color: var(--fdr-ink-3); margin: 0; max-width: var(--fdr-measure); } /* ========================================================================== S10 · FAQ (native disclosure, no JS) ========================================================================== */ .fdr .fdr-faq__list { border-top: 1px solid var(--fdr-line); } .fdr .fdr-faq__item { border-bottom: 1px solid var(--fdr-line); } .fdr .fdr-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fdr-s4); min-height: 44px; padding: var(--fdr-s4) 0; font-family: var(--fdr-body); font-size: var(--fdr-step-1); font-weight: 400; line-height: 1.4; color: var(--fdr-ink-1); cursor: pointer; list-style: none; transition: color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-faq__q::-webkit-details-marker { display: none; } /* A real element, not a ::after — Chrome folds generated content into the summary's accessible name ("...available? +"). */ .fdr .fdr-faq__marker { flex: none; font-size: var(--fdr-step-1); line-height: 1.4; color: var(--fdr-ink-4); transition: color var(--fdr-hover) var(--fdr-ease); } .fdr .fdr-faq__marker::before { content: "+"; } .fdr .fdr-faq__item[open] > .fdr-faq__q .fdr-faq__marker::before { content: "–"; } .fdr .fdr-faq__item[open] > .fdr-faq__q .fdr-faq__marker, .fdr .fdr-faq__q:hover .fdr-faq__marker { color: var(--fdr-ink-1); } .fdr .fdr-faq__a { padding: 0 0 var(--fdr-s5); } .fdr .fdr-faq__a .fdr-prose { max-width: 58ch; } /* ========================================================================== S11 · FINAL CTA BAND ========================================================================== */ .fdr .fdr-band { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--fdr-line); /* Clear of the sticky bar; removed at >=768 where the bar is gone. */ padding-bottom: calc(var(--fdr-pad-lg) + 4.5rem); } .fdr .fdr-band__field { position: absolute; inset: 0; z-index: -1; background-image: none; background-size: cover; background-position: 40% 60%; opacity: 0.45; pointer-events: none; } /* The hatch is a sibling pseudo-element rather than a second background on the field, so the field's 0.45 opacity does not dim it. */ .fdr .fdr-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--fdr-hatch); pointer-events: none; } .fdr .fdr-band__inner { max-width: 46rem; margin-inline: auto; text-align: center; } .fdr .fdr-band__inner .fdr-rule--accent { margin-inline: auto; margin-bottom: var(--fdr-s4); } .fdr .fdr-band__title { font-family: var(--fdr-display); font-weight: 600; font-size: var(--fdr-step-4); line-height: 1.06; letter-spacing: -0.005em; color: var(--fdr-ink-1); margin: 0 0 var(--fdr-s3); text-wrap: balance; } .fdr .fdr-band__sub { font-size: var(--fdr-step-0); line-height: 1.7; color: var(--fdr-ink-2); max-width: 52ch; margin: 0 auto var(--fdr-s5); } .fdr .fdr-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fdr-s3); margin-bottom: var(--fdr-s4); } .fdr .fdr-band__actions .fdr-btn { width: 100%; } .fdr .fdr-band__wa { font-size: var(--fdr-step--2); line-height: 1.6; color: var(--fdr-ink-4); margin: 0; } .fdr .fdr-band__wa a { display: inline-block; padding: 10px 2px; color: var(--fdr-ink-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); } .fdr .fdr-band__wa a:hover { text-decoration-color: var(--fdr-ink-1); } /* The only other place --fdr-wa is allowed: a small glyph in micro-copy. */ .fdr .fdr-band__wa .fdr-btn__icon, .fdr .fdr-wa-glyph { color: var(--fdr-wa); vertical-align: -4px; } /* ========================================================================== S11b · STICKY CTA Mobile-first: the bar exists below 768 and is switched off above it. Two controls only — three targets in a 390px bar dilutes the primary and each falls below a comfortable tap width. ========================================================================== */ .fdr-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; /* above the theme's .scroll-top, which sits at z-index 99 */ z-index: 100; padding: var(--fdr-s2, 0.75rem) var(--fdr-s3, 1rem); padding-bottom: calc(var(--fdr-s2, 0.75rem) + env(safe-area-inset-bottom, 0px)); background-color: rgba(20, 20, 22, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.10); transform: translate3d(0, 110%, 0); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .fdr-sticky.is-visible { transform: none; pointer-events: auto; } .fdr-sticky__inner { display: flex; gap: var(--fdr-s2, 0.75rem); } .fdr-sticky .fdr-btn { flex: 1; min-height: 48px; padding: 0 var(--fdr-s3, 1rem); font-size: var(--fdr-step--1, 0.875rem); } /* 0,3,0 rather than 0,2,0: the previous build sized the third button through `.fdr-sticky .fdr-sticky__btn:last-child`, and that selector still exists in custom-style.css until the founder rules are lifted out of it. */ .fdr-sticky .fdr-sticky__inner .fdr-btn--secondary { flex: 0 0 38%; } /* ========================================================================== RESPONSIVE — mobile-first, min-width only. Everything above is the small-screen value. Nothing bare may be restated below this line. ========================================================================== */ @media only screen and (min-width: 576px) { /* The index numeral only becomes the card's graphic once the card is wide enough to carry it; at 390 it would crowd a two-line title. */ .fdr .fdr-card__index { font-size: var(--fdr-step-6); } } @media only screen and (min-width: 768px) { /* 40px, not 24: the header is still in flow here, but a tablet can afford the air a phone cannot. It matches the 34px the >=1200 tier leaves under the overlaying header, so the top of the page reads the same at every width. */ .fdr .fdr-hero { padding-top: 2.5rem; } .fdr .fdr-hero__portrait { width: 144px; height: 144px; } /* From 768 up the band is a fitted grid, never a scroller: this is a mouse, so a container that scrolls with no scrollbar and no edge fade offers no affordance at all, and a row that merely overflows its clip box reads as broken rather than as scrollable. Column flow makes the track count the tile count, so the row cannot wrap either — one row by construction rather than at whichever widths a wrap floor happens to allow. Not `repeat(3, …)`: the tiles come from $fdrVentures, an array section 6 and the schema also read, so a hard count would leave an empty track the moment that array changes length. The type guard below absorbs whatever track width the count produces. */ .fdr .fdr-trust .fdr-logos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* The component's 180px floor would push an equal track into overflow; equal tracks size themselves. container-type makes each tile a query container so the two type sizes below can be expressed as a share of its own track — see them for why that matters. It also removes the tile's contents from its own width calculation, which is only correct once the track is externally sized, so it belongs here and not in the base rules. */ .fdr .fdr-trust .fdr-logo { container-type: inline-size; min-width: 0; padding-inline: var(--fdr-s1); } /* The wordmark shrinks, the track never does. The longest mark on the band sets the size for every tile at equal tracks — whatever that string is, it measures a fixed multiple of its own font-size. With the employer out of the row that string is xCyberSecurity.io at 7.25em, so the widest the type can go and still fit is track ÷ 7.25 ≈ 13.8cqw; 13cqw takes it with ~6% to spare. (It was 12cqw against the employer's 7.85em, which is why the marks sat at ~17px from 768 to 1200 — body-copy size, in a band whose job is to look like a logo wall.) A share of the track, not a fixed size, so it stays true whether the array holds three tiles or six. clamp, not min: a bare min() is driven by the track, and the track is px-derived while the tile's padding is rem-derived, so raising the root font used to make the mark SMALLER — measured 24px at a 16px root and 20.6px at a 32px root, the exact inverse of what the user asked for. The 1rem floor makes the root font a lower bound the cqw branch can never undercut: 24px at root 16, 32px at root 32. It is 1rem rather than the step-0 floor because at a 32px root the mark has to stay inside a track that has not grown, and 1rem is the largest floor that does (7.25em × 32px = 232px inside a 245px track at 1440). overflow-wrap is the safety net past that — at 200% zoom on a 992px viewport no type size fits the whole string, and a mark broken across two lines is a WCAG 1.4.4 pass where a mark clipped by .fdr's overflow-x: clip is a failure. break-word, not anywhere, so the min-content size of the track is unaffected at normal sizes — which is also why the max-width/min-width pair is required. The tile is a grid with justify-items: center, so the mark is sized fit-content — and a grid item's min-width: auto floors that at its min-content size, which break-word by definition does not shrink and which therefore wins over max-width. Measured at 992 / root 32: max-width alone left the mark 232px wide in a 165px area, 49.6px of it spilling over the tile's right edge. min-width: 0 releases the floor, max-width binds the box to the grid area, and the string wraps instead of spilling. The plain declaration first is the fallback for engines without container query units. */ .fdr .fdr-trust .fdr-logo__mark { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word; font-size: var(--fdr-step-1); font-size: clamp(1rem, 13cqw, var(--fdr-step-1)); } .fdr .fdr-hero__actions { gap: var(--fdr-s3); } .fdr .fdr-hero__actions .fdr-btn, .fdr .fdr-band__actions .fdr-btn { width: auto; min-width: 210px; } .fdr .fdr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fdr .fdr-vent__row, .fdr .fdr-vent__credential { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fdr .fdr-vent__role { text-align: right; order: 0; } .fdr .fdr-vent__remit { grid-column: 1 / -1; } .fdr .fdr-proc__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fdr-s5); row-gap: var(--fdr-s6); } .fdr .fdr-depth__group { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--fdr-s4); } .fdr .fdr-faq__a { padding-right: var(--fdr-s6); } .fdr .fdr-band { padding-bottom: var(--fdr-pad-lg); } /* The bar owns the bottom edge on phones only. */ .fdr-sticky { display: none; } } @media only screen and (min-width: 992px) { /* The hero becomes a 7/5 two-column grid and the portrait spans all four rows, so the copy column drives the hero's height and the portrait can never inflate it. */ .fdr .fdr-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "strip portrait" "id portrait" "copy portrait" "proof portrait"; align-items: start; column-gap: var(--fdr-s6); row-gap: var(--fdr-s3); } /* The crop window. 3:4 is not a decorative choice — it is the aspect of the source rect x[150,750] y[150,950], which is the head-and-shoulders frame AND the only region of this asset where neither alpha seam is visible (rows 275-925 measure <=8/255 at both x=372 and x=715; above and below that band they step 75-232). 480px is the spec's cap and it binds nowhere below 1340: the 5fr track measures 381px at 992 and 468px at 1200, so the window is 381x508 there and 480x640 once the container locks. The copy column still drives the hero's height at every width. */ .fdr .fdr-hero__portrait { width: 100%; max-width: 480px; height: auto; aspect-ratio: 3 / 4; margin-left: auto; border-radius: 0; } /* Nothing to re-aim: object-fit: cover recomputes the crop against the 3:4 frame on its own, and object-position from the base rule still puts the face on the centre line. The brightness lift, the soft-light key and the four-sided vignette that used to live here all existed to bury the duotone asset's alpha seams, and there are none to bury now. */ /* The tall frame wants the room shot, not the head crop the disc needs. */ .fdr .fdr-hero__portrait img { transform: none; } .fdr .fdr-hero__portrait::before, .fdr .fdr-hero__portrait::after { display: none; } /* 992-1339 is where the copy track is narrow enough that Rajdhani takes three lines, and it is also the band where the fallback is most likely to disagree — a narrower fallback flips to two lines before Rajdhani does. size-adjust cannot fix a disagreement about line COUNT, only a floor can, so the settled three lines are reserved here: 3 x 1.06 = 3.18em. Released to 2.12em from 1340 up, where both faces settle on two lines; see the min-width:1340 block at the foot of this file. */ .fdr .fdr-hero__title { min-height: 3.18em; } .fdr .fdr-hero__field { background-image: url('../img/founder/founder-field.webp'); } .fdr .fdr-band__field { background-image: url('../img/founder/founder-field.webp'); } .fdr .fdr-head--deck { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--fdr-s6); } .fdr .fdr-deck { padding-left: var(--fdr-s4); border-left: 1px solid var(--fdr-line); } .fdr .fdr-trust__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--fdr-s5); } /* The rail. Four steps across is where ~800px of page height goes. */ .fdr .fdr-proc__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--fdr-s5); row-gap: 0; } .fdr .fdr-proc__step { display: block; padding: var(--fdr-s4) 0 0; } .fdr .fdr-proc__step:last-child { border-bottom: 0; } .fdr .fdr-proc__num { display: block; font-size: var(--fdr-step-6); line-height: 0.8; margin-bottom: var(--fdr-s3); } .fdr .fdr-proc__body { margin-top: var(--fdr-s2); } .fdr .fdr-depth__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fdr-s7); } } @media only screen and (min-width: 1200px) { /* 1200 is the exact width at which the theme's masthead switches from a 90px bar in normal flow to a 110px absolutely positioned overlay — measured, not assumed: .fdr-hero's own top goes from y=90 at 1199 to y=0 at 1200. From here the padding has to carry the header as well as the gap, so it is the only tier that reads like a header offset. 134px at 1200 rising to 144px at 1440 is unchanged from the original clamp. */ .fdr .fdr-hero { padding-top: clamp(8.4rem, 5.4rem + 4vw, 9rem); } .fdr .fdr-vent__row { grid-template-columns: minmax(0, 3.4fr) minmax(0, 6fr) minmax(0, 2.6fr); } .fdr .fdr-vent__credential { grid-template-columns: minmax(0, 4fr) minmax(0, 3.5fr) minmax(0, 5.5fr); } .fdr .fdr-vent__remit { grid-column: auto; order: 0; } } /* 1340, not 1200 and not Bootstrap's 1400. This block exists for one rule and the rule is only true where the h1 actually settles on two lines, so the breakpoint was measured rather than assumed: this theme's .container is fluid at viewport-30px until it caps at 1320, so the 7fr copy track reads 645.75px at 1200, 704.1px at 1300, 709.9px at 1310 and locks at 724.5px from 1340 up. Rajdhani 600 at its capped 68px flips the h1 from three lines to two between 1300 and 1310. 1200 was therefore wrong twice over — it over-reserved nothing (2.12em = 144.16px is below the 216px the h1 really occupies at that width) while cancelling the correct 3.18em reserve from the min-width:992 block, which is the one doing the work at 1200-1339. 1400 would have been safe but would have left 1310-1399 — 1366, the most common laptop width there is — reserving three lines for two and carrying 72px of dead air. 1340 is the container's own cap, 30px clear of the wrap point, and it is the first width where the track can no longer change. */ @media only screen and (min-width: 1340px) { /* Two lines: 2 x 1.06 line-height = 2.12em. */ .fdr .fdr-hero__title { min-height: 2.12em; } } /* ========================================================================== REDUCED MOTION Nothing moves, nothing fades, and nothing is left invisible. The armed state is neutralised as well as the resting one, because the observer may already have run before the OS setting changed. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .fdr .fdr-rise, .fdr .fdr-rise.fdr-armed, .fdr .fdr-rise.fdr-armed.fdr-in { opacity: 1 !important; transform: none !important; transition: none !important; } .fdr *, .fdr *::before, .fdr *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .fdr .fdr-btn:hover .fdr-btn__arrow { transform: none; } .fdr-sticky { transition: none; } } /* ========================================================================== THEME CHROME, PAGE-SCOPED These sit outside <main class="fdr"> in the DOM, so they are reached through body:has(.fdr) — still impossible to leak to another page, and still literal colours, because page-scoped custom properties do not inherit to a sibling of <main>. ========================================================================== */ /* The light/dark toggle can only damage this page: it is dark-only by design, and on small screens the control floats over hero body copy. Hidden rather than removed from the DOM — main.js:869 sets .checked on its input with no null guard. */ body:has(.fdr) .header-switch { display: none; } /* The theme's back-to-top reused the primary CTA's red and floated over the stats band, diluting the page's only action signal. */ body:has(.fdr) .scroll-top { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); color: #ffffff; } body:has(.fdr) .scroll-top:hover { background-color: rgba(255, 255, 255, 0.16); } /* The theme ships no focus ring on this control and this page restyles it, so it owes it one. */ body:has(.fdr) .scroll-top:focus-visible { outline: 2px solid #F54D3D; outline-offset: 3px; } /* The sticky bar owns this corner on phones, and the button was overprinting body copy. A max-width query is the exception to this file's mobile-first rule and is deliberate: the theme toggles .scroll-top's own display from JS, so above 768 this page must not state a display value at all. */ @media only screen and (max-width: 767.98px) { body:has(.fdr) .scroll-top { display: none !important; } }