:root{ --fm-bg:#F2F3F4; --fm-surface:#FFFFFF; --fm-ink:#16191C; --fm-accent:#C4400D; --fm-slate:#4A5560; --fm-hairline:#D5D9DC; --fm-deep:#101315; } /* ---- Typography, site wide ---- The Blocksy palette is now synced to these tokens, so colour comes from the theme. This layer only carries the two faces and the craft rules. */ body{ font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.widget-title{ font-family:"Archivo",system-ui,-apple-system,sans-serif; font-weight:800; letter-spacing:-0.022em; } .ct-menu-link{font-weight:500;font-size:0.9375rem;} .current-menu-item > .ct-menu-link, .current_page_item > .ct-menu-link{font-weight:600;} header.ct-header{border-bottom:1px solid var(--fm-hairline);} footer .widget-title{ font-size:0.8125rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; } footer a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;} /* ---- Shared section frame ---- */ .fm-section{padding:0;} .fm-section > .wp-block-group__inner-container, .fm-wrap{max-width:1240px;margin:0 auto;padding:88px 32px;} .fm-section h2{ font-size:clamp(1.85rem,3vw,2.6rem); line-height:1.08; letter-spacing:-0.028em; margin:0 0 20px; } .fm-section p{line-height:1.62;} .fm-measure{max-width:64ch;} /* ---- Verification stamp: the brand's signature line ---- */ .fm-verified{ display:flex; align-items:center; gap:10px; font-size:0.8125rem; line-height:1.4; color:var(--fm-slate); margin:0; } .fm-verified::before{ content:""; display:block; width:12px; height:2px; background:var(--fm-accent); flex:0 0 auto; } /* ---- Hero ---- */ .fm-hero{ background:var(--fm-bg); border-bottom:1px solid var(--fm-hairline); } .fm-hero .fm-hero__grid{ max-width:1240px; margin:0 auto; padding:84px 32px 76px; gap:56px; align-items:center; } .fm-hero h1{ font-size:clamp(2.6rem,5.6vw,4.35rem); line-height:1.03; letter-spacing:-0.03em; margin:0 0 26px; text-wrap:balance; } .fm-hero .fm-lede{ font-size:clamp(1.05rem,1.35vw,1.1875rem); line-height:1.62; color:var(--fm-slate); max-width:44ch; margin:0 0 34px; } .fm-hero .wp-block-buttons{gap:12px;} .fm-hero figure.wp-block-image{margin:0;} .fm-hero figure.wp-block-image img{ display:block; width:100%; height:clamp(380px,44vw,552px); object-fit:cover; border-radius:2px; } /* ---- Buttons ---- */ .fm-btn .wp-block-button__link{ border-radius:2px; font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:0.9375rem; line-height:1.2; padding:15px 26px; transition:background-color .16s ease,color .16s ease; } .fm-btn-primary .wp-block-button__link{ background:var(--fm-accent); color:#FFFFFF; border:1px solid var(--fm-accent); } .fm-btn-primary .wp-block-button__link:hover, .fm-btn-primary .wp-block-button__link:focus{ background:#A5350B;border-color:#A5350B;color:#FFFFFF; } .fm-btn-secondary .wp-block-button__link{ background:transparent; color:var(--fm-ink); border:1px solid var(--fm-ink); } .fm-btn-secondary .wp-block-button__link:hover, .fm-btn-secondary .wp-block-button__link:focus{ background:var(--fm-ink);color:var(--fm-bg); } .wp-block-button__link:focus-visible{outline:2px solid var(--fm-accent);outline-offset:3px;} /* ---- Figures: the datapoint component, no cards ---- */ .fm-figures{background:var(--fm-bg);border-bottom:1px solid var(--fm-hairline);} .fm-figures .fm-wrap{padding-top:72px;padding-bottom:72px;} .fm-figures .wp-block-columns{gap:40px;margin-bottom:28px;} .fm-figures .wp-block-column{border-top:2px solid var(--fm-ink);padding-top:18px;} .fm-figures .fm-num{ font-family:"Archivo",system-ui,sans-serif; font-weight:800; font-size:clamp(2.3rem,4.2vw,3.25rem); line-height:1; letter-spacing:-0.035em; font-variant-numeric:tabular-nums lining-nums; margin:0 0 12px; color:var(--fm-ink); } .fm-figures .fm-cap{ font-size:0.875rem; line-height:1.45; color:var(--fm-slate); margin:0; } /* ---- Wide banner strip: used where a section needs air, not a split ---- */ .fm-banner figure.wp-block-image{margin:0;} .fm-banner figure.wp-block-image img{ display:block; width:100%; height:clamp(150px,15vw,210px); object-fit:cover; border-radius:2px; } .fm-figures .fm-banner{margin-top:34px;} /* ---- Author and corrections imagery ---- */ .fm-author .wp-block-columns{align-items:center;} .fm-author figure.wp-block-image{margin:0;} .fm-author figure.wp-block-image img{ display:block;width:100%;height:clamp(240px,24vw,300px); object-fit:cover;border-radius:2px; } .fm-correct .wp-block-columns{gap:48px;align-items:center;} .fm-correct figure.wp-block-image{margin:0;} .fm-correct figure.wp-block-image img{ display:block;width:100%;height:clamp(200px,20vw,260px); object-fit:cover;border-radius:2px; } /* ---- Places: the destination grid, deliberately uneven ---- */ .fm-places-sec{background:var(--fm-bg);border-top:1px solid var(--fm-hairline);} .fm-places{ display:grid; grid-template-columns:repeat(6,1fr); gap:24px; } .fm-place{margin:0;} .fm-place figure.wp-block-image{margin:0 0 14px;} .fm-place figure.wp-block-image img{ display:block; width:100%; object-fit:cover; border-radius:2px; } .fm-place h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 6px; } .fm-place p{ margin:0; font-size:0.9375rem; line-height:1.5; color:var(--fm-slate); } .fm-place:nth-child(1){grid-column:span 4;} .fm-place:nth-child(2){grid-column:span 2;} .fm-place:nth-child(3), .fm-place:nth-child(4), .fm-place:nth-child(5){grid-column:span 2;} .fm-place:nth-child(6){grid-column:span 6;} .fm-place:nth-child(1) figure img, .fm-place:nth-child(2) figure img{height:400px;} .fm-place:nth-child(3) figure img, .fm-place:nth-child(4) figure img, .fm-place:nth-child(5) figure img{height:240px;} .fm-place:nth-child(6) figure img{height:300px;} /* ---- Statement: the one inverted section ---- */ .fm-statement{background:var(--fm-deep);} .fm-statement .fm-wrap{padding-top:96px;padding-bottom:96px;} .fm-statement h2, .fm-statement p{color:var(--fm-bg);} .fm-statement h2{max-width:22ch;} .fm-statement p{font-size:1.0625rem;color:#C7CCCF;} .fm-statement .fm-verified{color:#9AA3A8;} .fm-statement .wp-block-columns{gap:56px;align-items:center;} .fm-statement figure.wp-block-image{margin:0;} .fm-statement figure.wp-block-image img{ display:block; width:100%; height:clamp(340px,36vw,470px); object-fit:cover; border-radius:2px; } /* ---- Coverage: a contents table with thumbnails, not cards ---- */ .fm-coverage{background:var(--fm-bg);border-top:1px solid var(--fm-hairline);} .fm-coverage .fm-row{ border-top:1px solid var(--fm-hairline); gap:28px; margin:0; padding:20px 0; align-items:center; } .fm-coverage .fm-row:last-of-type{border-bottom:1px solid var(--fm-hairline);} .fm-coverage .fm-thumb figure.wp-block-image{margin:0;} .fm-coverage .fm-thumb figure.wp-block-image img{ display:block; width:100%; height:96px; object-fit:cover; border-radius:2px; } .fm-coverage .fm-row h3{ font-size:1.125rem; font-weight:700; letter-spacing:-0.012em; margin:0; } .fm-coverage .fm-row p{margin:0;color:var(--fm-slate);font-size:0.9375rem;line-height:1.55;} /* ---- Prices: chart plus the signature data table ---- */ .fm-prices{background:var(--fm-bg);border-top:1px solid var(--fm-hairline);} .fm-prices .fm-split{gap:48px;align-items:center;margin:0 0 40px;} .fm-prices figure.wp-block-image{margin:0;} .fm-prices figure.wp-block-image img{ display:block; width:100%; height:clamp(260px,26vw,340px); object-fit:cover; border-radius:2px; } .fm-chart{margin:0;} .fm-chart svg{display:block;width:100%;height:auto;overflow:visible;} .fm-chart figcaption{ font-size:0.8125rem; line-height:1.55; color:var(--fm-slate); margin-top:14px; } .fm-prices .wp-block-table{overflow-x:auto;margin:0 0 18px;} .fm-prices table{ width:100%; border-collapse:collapse; font-size:0.9375rem; min-width:640px; } .fm-prices th{ font-family:"Archivo",system-ui,sans-serif; font-weight:600; font-size:0.8125rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--fm-slate); text-align:left; padding:0 16px 12px 0; border-bottom:1px solid var(--fm-ink); } .fm-prices td{ padding:16px 16px 16px 0; border-bottom:1px solid var(--fm-hairline); vertical-align:top; line-height:1.5; } .fm-prices tr td:nth-child(2){ font-variant-numeric:tabular-nums lining-nums; font-weight:600; white-space:nowrap; color:var(--fm-ink); } .fm-prices td:last-child{color:var(--fm-slate);padding-right:0;} .fm-prices .fm-note{ font-size:0.8125rem; line-height:1.55; color:var(--fm-slate); max-width:78ch; margin:0 0 10px; } /* ---- Author ---- */ .fm-author{background:var(--fm-bg);border-top:1px solid var(--fm-hairline);} .fm-author .wp-block-columns{gap:56px;align-items:flex-start;} .fm-author p{color:var(--fm-slate);} .fm-author .fm-principles{list-style:none;margin:0;padding:0;} .fm-author .fm-principles li{ border-top:1px solid var(--fm-hairline); padding:14px 0; font-size:0.9375rem; line-height:1.5; color:var(--fm-ink); } .fm-author .fm-principles li:last-child{border-bottom:1px solid var(--fm-hairline);} /* ---- Corrections close ---- */ .fm-correct{background:var(--fm-surface);border-top:1px solid var(--fm-hairline);} .fm-correct .fm-wrap{padding-top:72px;padding-bottom:72px;} .fm-correct p{color:var(--fm-slate);max-width:68ch;} /* ---- Spec table: reused on the methodology page ---- */ .fm-spec .wp-block-table{overflow-x:auto;margin:0 0 18px;} .fm-spec table{width:100%;border-collapse:collapse;font-size:0.9375rem;min-width:560px;} .fm-spec th{ font-family:"Archivo",system-ui,sans-serif; font-weight:600;font-size:0.8125rem;letter-spacing:0.04em;text-transform:uppercase; color:var(--fm-slate);text-align:left;padding:0 16px 12px 0; border-bottom:1px solid var(--fm-ink); } .fm-spec td{padding:16px 16px 16px 0;border-bottom:1px solid var(--fm-hairline);vertical-align:top;line-height:1.5;} .fm-spec td:first-child{font-weight:600;color:var(--fm-ink);white-space:nowrap;} .fm-spec td:last-child{color:var(--fm-slate);padding-right:0;} /* ---- SureForms, dressed to match ---- */ .fm-form{background:var(--fm-surface);border:1px solid var(--fm-hairline);border-radius:2px;padding:32px;} .fm-form .srfm-form-container{padding:0;background:transparent;} .fm-form .srfm-block-wrap{margin-bottom:20px;} .fm-form .srfm-block-label, .fm-form label{ display:block; font-family:"Archivo",system-ui,sans-serif; font-weight:600;font-size:0.8125rem;letter-spacing:0.04em;text-transform:uppercase; color:var(--fm-slate);margin-bottom:8px; } .fm-form .srfm-required{color:var(--fm-accent);} .fm-form .srfm-error-message{ font-size:0.8125rem;color:var(--fm-accent);margin-top:6px; } .fm-form .srfm-input-common, .fm-form input[type=text], .fm-form input[type=email], .fm-form textarea{ width:100%; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:0.9375rem; color:var(--fm-ink); background:var(--fm-bg); border:1px solid var(--fm-hairline); border-radius:2px; padding:12px 14px; } .fm-form input:focus, .fm-form textarea:focus{ outline:2px solid var(--fm-accent); outline-offset:1px; border-color:var(--fm-accent); } .fm-form ::placeholder{color:var(--fm-slate);opacity:1;} .fm-form .srfm-input-textarea{min-height:150px;resize:vertical;} .fm-form .srfm-gdpr-block .srfm-block-label, .fm-form .srfm-gdpr-block label{ text-transform:none; letter-spacing:0; font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:400; font-size:0.875rem; line-height:1.5; color:var(--fm-slate); } .fm-form .srfm-submit-button, .fm-form .srfm-button, .fm-form button[type=submit]{ background:var(--fm-accent); color:#FFFFFF; border:1px solid var(--fm-accent); border-radius:2px; font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:0.9375rem; padding:15px 26px; cursor:pointer; box-shadow:none; } .fm-form .srfm-submit-button:hover, .fm-form .srfm-button:hover, .fm-form button[type=submit]:hover{background:#A5350B;border-color:#A5350B;color:#FFFFFF;} /* ---- Mobile: core columns stack at 781px ---- */ @media (max-width:781px){ .fm-section > .wp-block-group__inner-container, .fm-wrap{padding:56px 20px;} .fm-hero .fm-hero__grid{padding:56px 20px 48px;gap:34px;} .fm-hero .fm-hero__grid .wp-block-column{width:100% !important;flex-basis:100% !important;} .fm-hero h1{font-size:clamp(2.1rem,8.4vw,2.85rem);margin-bottom:20px;} .fm-hero .fm-lede{max-width:none;margin-bottom:28px;} .fm-hero figure.wp-block-image img{height:300px;} .fm-hero .wp-block-buttons{flex-wrap:wrap;} .fm-figures .wp-block-columns{gap:0;} .fm-figures .wp-block-column{margin-top:24px;} .fm-places{grid-template-columns:1fr;gap:26px;} .fm-place{grid-column:span 1 !important;} .fm-place figure img{height:230px !important;} .fm-coverage .fm-row{gap:12px;padding:22px 0;} .fm-coverage .fm-row .wp-block-column{flex-basis:100% !important;} .fm-coverage .fm-thumb figure.wp-block-image img{height:190px;} .fm-author .wp-block-columns{gap:32px;} .fm-statement .fm-wrap{padding-top:64px;padding-bottom:64px;} .fm-statement .wp-block-columns .wp-block-column{flex-basis:100% !important;} .fm-statement figure.wp-block-image img{height:260px;} .fm-prices .fm-split{gap:28px;margin-bottom:30px;} .fm-prices .fm-split .wp-block-column{flex-basis:100% !important;} .fm-prices figure.wp-block-image img{height:230px;} /* The chart's labels become unreadable if the 720-unit viewBox is squeezed into 335px, so it scrolls inside its own container like the table does. */ .fm-chart{overflow-x:auto;} .fm-chart svg{min-width:580px;} .fm-author .wp-block-columns{align-items:flex-start;} } @media (prefers-reduced-motion:reduce){ .fm-btn .wp-block-button__link{transition:none;} } /* ===================================================================== Live home page (Stackable build): audit fixes, applied 25 Aug 2026. The page's per-block CSS carries !important, so every rule here wins by specificity (the .home prefix adds a class), never by load order. ===================================================================== */ /* ---- Photo tiles: a scrim that survives hover ---- The blocks ship a flat black overlay at 0.3/0.4 that fades to 0 on hover, which removes legibility at the moment someone reads the label. Bottom-weighted gradient instead, kept in every state. */ .home .stk-db3083e-container:before, .home .stk-3924013-container:before, .home .stk-58ed895-container:before, .home .stk-f63aa58-container:before{ background-color:transparent !important; background-image:linear-gradient(to top, rgba(12,11,9,.82) 0%, rgba(12,11,9,.46) 42%, rgba(12,11,9,.14) 72%, rgba(12,11,9,0) 100%) !important; opacity:1 !important; } .home .stk-db3083e-container:hover:before, .home .stk-3924013-container:hover:before, .home .stk-58ed895-container:hover:before, .home .stk-f63aa58-container:hover:before{opacity:1 !important;} /* Guide cards: overlay sits on the column element itself */ .home .stk-37969cd:before, .home .stk-ac759bc:before, .home .stk-ed72655:before, .home .stk-7ae4cd2:before, .home .stk-b31160f:before{ background-color:transparent !important; background-image:linear-gradient(to top, rgba(12,11,9,.85) 0%, rgba(12,11,9,.52) 45%, rgba(12,11,9,.18) 75%, rgba(12,11,9,.05) 100%) !important; opacity:1 !important; } .home .stk-37969cd:hover:before, .home .stk-ac759bc:hover:before, .home .stk-ed72655:hover:before, .home .stk-7ae4cd2:hover:before, .home .stk-b31160f:hover:before{opacity:1 !important;} /* Hero overlay superseded by BATCH 4 below. */ /* Hero lede: 939px at 18px is a 104-character line. Cap the measure. */ .home .stk-ad51fb0 .stk-block-text__text{max-width:56ch;} /* Header nav keeps the theme's white links on the home page too: the hero now carries an ink base and a darkening overlay, so white reads cleanly across the whole header band. */ /* ---- Focus that survives every backdrop ---- The theme's 1.6px accent outline is invisible on the accent-filled primary button and weak on photography. Ink ring with a white separator ring reads on white, beige, orange and photos alike. */ a.stk-button:focus-visible, .entry-content a:focus-visible, #header a:focus-visible{ outline:2px solid var(--fm-ink) !important; outline-offset:2px !important; box-shadow:0 0 0 2px #FFFFFF !important; } /* ---- Display rhythm ---- Blocksy's global 1.5 line-height reaches every 40px heading, so two-line H2s gap open and the numbered row reads as four bars of text. Display faces get display spacing; the hero follows. */ .home .entry-content h1{line-height:1.05;} .home .entry-content h2{line-height:1.15;} .home .entry-content h3{line-height:1.2;} /* ---- FAQ block: questions are not section titles ---- At the theme's 40px they outrank the page's own section headings. One step down keeps the answer-first shape with a real hierarchy. */ .home .mtv-home-faq h2.wp-block-heading{ font-size:1.75rem; line-height:1.2; margin-top:2.4em; } .home .mtv-home-faq p{max-width:70ch;} /* ---- Corrections section: close the dead space ---- Four 450px portrait images against 420px of copy leaves a screen of empty beige below the button. Shorter collage, same rhythm. */ /* The corrections collage is a cropped core gallery, whose own .is-cropped rules outrank a plain img selector, so the height cap has to be stated at the gallery's own specificity. Four 450px portraits against ~420px of copy left a screen of empty beige. */ /* Cap the figure, not the image: core gives the img `flex:1 0 0%` inside a column flex figure, and flex-basis beats height on the main axis, so even an !important height on the img is ignored. */ .home .stk-22251a2 .wp-block-gallery figure.wp-block-image{height:250px !important;} .home .stk-22251a2 .wp-block-gallery figure.wp-block-image img{object-fit:cover !important;} /* ---- Methodology row on mobile ---- Its desktop spacer is hidden below 768px, so the row needs its own clearance from the hero button. */ @media (max-width:767px){ .home .stk-adfdd55{margin-top:56px;} } /* The hero H1 needs the block-level class to outrank the theme rule. */ .home .entry-content h1.stk-block-heading__text{line-height:1.08 !important;} /* ===================================================================== BATCH 4 — Background colour, matching the moroccotravellife pattern. Root cause fixed in post_content first: every `var(--theme-palette-*)` in the page's block CSS had lost its backslashes and rendered as `var(u002du002dtheme-palette-color-4)`, an invalid custom-property name. The declaration was dropped, so the hero fell back to #F1F1F1 light grey behind a dark photograph. With the escaping repaired the hero base resolves to the ink it always intended. moroccotravellife pattern: ink base colour BENEATH the photograph, then a two-layer overlay (bottom fade + left diagonal wash). ===================================================================== */ /* Hero: ink beneath the photo. Pinned, not left to the palette, so a future palette edit cannot put white text on a pale ground again. */ .home .stk-cf247fd{background-color:#16191C !important;} /* Two-layer overlay. The bottom fade is load-bearing: the 01/02/03 methodology row sits inside the hero over mid-tone dunes, and its body copy was the weakest text on the page. The diagonal wash stops at 70% so the sunrise, the reason this photo was chosen, survives. */ .home .stk-cf247fd:before{ background-color:transparent !important; background-image: linear-gradient(rgba(255,255,255,0) 58%, rgba(26,17,9,.62) 94%), linear-gradient(100deg, rgba(26,17,9,.62) 0%, rgba(26,17,9,.40) 44%, rgba(26,17,9,.06) 70%, rgba(255,255,255,0) 100%) !important; opacity:1 !important; } /* Every photo-backed tile gets the same ink base. Without it a card is white until its image decodes, and white card text on white is unreadable for that beat. */ .home .stk-db3083e-container, .home .stk-3924013-container, .home .stk-58ed895-container, .home .stk-f63aa58-container, .home .stk-37969cd, .home .stk-ac759bc, .home .stk-ed72655, .home .stk-7ae4cd2, .home .stk-b31160f{background-color:#16191C !important;} /* Primary hero CTA stays the accent. The block attribute asks for palette colour 4 (ink), which only became visible once the broken var() escaping was repaired; ink on a darkened photograph recedes, and this is the page's one conversion action. */ .home .stk-44760ba .stk-button{background:#C4400D !important;} .home .stk-44760ba .stk-button:hover{background:#A5350B !important;} /* ===================================================================== BATCH 5 — card link affordance. The five guide cards each ended with the same circled-arrow glyph. Repeated identically at one size and weight it reads as decoration rather than signal, and it is one of the tells that makes a layout look generated. The Field Manual already uses a hairline as its affordance vocabulary (--fm-hairline, the accent rule on .fm-verified), so the card links borrow it: the label carries a rule that lifts to full white on hover and focus. ===================================================================== */ .home .stk-37969cd .stk-button .stk--svg-wrapper, .home .stk-ac759bc .stk-button .stk--svg-wrapper, .home .stk-ed72655 .stk-button .stk--svg-wrapper, .home .stk-7ae4cd2 .stk-button .stk--svg-wrapper, .home .stk-b31160f .stk-button .stk--svg-wrapper{display:none !important;} .home .stk-37969cd .stk-button__inner-text, .home .stk-ac759bc .stk-button__inner-text, .home .stk-ed72655 .stk-button__inner-text, .home .stk-7ae4cd2 .stk-button__inner-text, .home .stk-b31160f .stk-button__inner-text{ border-bottom:1px solid rgba(255,255,255,.42); padding-bottom:3px; transition:border-bottom-color .16s ease; } .home .stk-37969cd .stk-button:hover .stk-button__inner-text, .home .stk-ac759bc .stk-button:hover .stk-button__inner-text, .home .stk-ed72655 .stk-button:hover .stk-button__inner-text, .home .stk-7ae4cd2 .stk-button:hover .stk-button__inner-text, .home .stk-b31160f .stk-button:hover .stk-button__inner-text, .home .stk-37969cd .stk-button:focus-visible .stk-button__inner-text, .home .stk-ac759bc .stk-button:focus-visible .stk-button__inner-text, .home .stk-ed72655 .stk-button:focus-visible .stk-button__inner-text, .home .stk-7ae4cd2 .stk-button:focus-visible .stk-button__inner-text, .home .stk-b31160f .stk-button:focus-visible .stk-button__inner-text{ border-bottom-color:#FFFFFF; } @media (prefers-reduced-motion:reduce){ .home .stk-button__inner-text{transition:none;} } /* ===================================================================== BATCH A (Critical) — menu trigger hit area. Below 1000px the hamburger is the only navigation control on the site, and it renders at 18x18. That is roughly 40% of the 44px minimum, on the one control every phone and tablet visitor needs. The hit area is expanded with a centred pseudo-element rather than padding or min-height, so the icon does not move and the header layout is untouched. Clicks landing on the overflowing pseudo still activate the button. ===================================================================== */ .ct-header-trigger{position:relative;} .ct-header-trigger::after{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); } /* The header search toggle is the same story wherever it is shown. */ .ct-header-search.ct-toggle{position:relative;} .ct-header-search.ct-toggle::after{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); } /* Its focus ring is accent-on-dark over the hero, the one control that missed the double-ring treatment. */ .ct-header-search.ct-toggle:focus-visible{ outline:2px solid var(--fm-ink) !important; outline-offset:2px !important; box-shadow:0 0 0 2px #FFFFFF !important; } /* ===================================================================== BATCH B (High) — text alignment below the desktop breakpoint. Two separate defects, same symptom. 1. The 01/02/03 methodology row centres its three H2s while its own numbers and body copy stay left. Cause: the numbers and the paragraphs carry `has-text-align-left`, the headings only carry `has-text-align-center-tablet`, so the tablet rule wins on the headings alone. It reads as broken, three times, inside the hero. 2. The trust pair and the statement section centre running prose. At 30-40 characters a line, centred body copy goes ragged on both edges and the eye loses the line start on every wrap. Section eyebrows, section titles and card captions stay centred: those are deliberate and internally consistent. ===================================================================== */ @media (max-width:1023px){ .home .stk-adfdd55 .stk-block-heading__text{text-align:left !important;} .home .stk-5b529a2 .stk-block-heading__text, .home .stk-5b529a2 .stk-block-text__text, .home .stk-7a2b114 .stk-block-heading__text, .home .stk-7a2b114 .stk-block-text__text{text-align:left !important;} } /* ===================================================================== BATCH C (High) — put every section back on one grid line. Content on this page starts at seven different left edges. Two of those are real defects rather than card padding: 1. The statement section's text column carries a 30px left padding, so its heading starts at 97 while every other section starts at 67. Thirty pixels is exactly enough to read as sloppy without reading as intentional. 2. The FAQ is a constrained core group, so its children are centred by auto margins and land at 373. Its ~679px measure is good for question-and-answer reading and is kept; only the centring goes, so it starts on the same line as everything above it. ===================================================================== */ @media (min-width:1024px){ .home .stk-7a2b114 .stk-adc88c6{padding-left:0 !important;} } .home .mtv-home-faq > *{ margin-left:0 !important; margin-right:0 !important; } /* ===================================================================== BATCH D (High) — restore the type hierarchy below desktop. The desktop scale is a clean three-step: H1 70 / H2 40 / H3 30. Both smaller breakpoints collapse it: tablet H1 50 / H2 30 / H3 30 section and card titles identical mobile H1 30 / H2 30 / H3 30 the page headline is the same size as a card caption Each breakpoint gets its own three-step cascade in the same proportions as desktop, so a section title always outranks a card title and the H1 always leads. ===================================================================== */ @media (max-width:767px){ .home .entry-content h1.stk-block-heading__text{font-size:36px !important;line-height:1.08 !important;} .home .entry-content h2.stk-block-heading__text{font-size:25px !important;line-height:1.2 !important;} .home .entry-content h3.stk-block-heading__text{font-size:21px !important;line-height:1.28 !important;} .home .mtv-home-faq h2.wp-block-heading{font-size:21px !important;line-height:1.28 !important;} } @media (min-width:768px) and (max-width:1023px){ .home .entry-content h2.stk-block-heading__text{font-size:34px !important;line-height:1.15 !important;} .home .entry-content h3.stk-block-heading__text{font-size:24px !important;line-height:1.25 !important;} .home .mtv-home-faq h2.wp-block-heading{font-size:26px !important;line-height:1.22 !important;} } /* ===================================================================== BATCH E (High) — empty and error state styling. The route list reuses the hairline-row pattern the Field Manual already uses for .fm-principles, so a recovery screen looks like the rest of the publication rather than a theme fallback. Left-aligned to the same grid line as every other page. ===================================================================== */ .fm-recovery{max-width:760px;margin:0 auto;padding:8px 0 24px;} .fm-recovery .entry-header{text-align:left;margin-bottom:8px;} .fm-recovery__title{ font-size:clamp(1.9rem,4.4vw,2.9rem) !important; line-height:1.08 !important; letter-spacing:-0.028em; margin:0 0 14px !important; text-align:left !important; } .fm-recovery__lede{ font-size:1.0625rem; line-height:1.6; color:var(--fm-slate); max-width:68ch; margin:0 0 8px; text-align:left !important; } .fm-routes{list-style:none;margin:26px 0 0;padding:0;} .fm-routes li{ border-top:1px solid var(--fm-hairline); padding:16px 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; } .fm-routes li:last-child{border-bottom:1px solid var(--fm-hairline);} .fm-routes a{ font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:1.0625rem; letter-spacing:-0.012em; color:var(--fm-ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .16s ease,color .16s ease; } .fm-routes a:hover, .fm-routes a:focus-visible{color:var(--fm-accent);border-bottom-color:var(--fm-accent);} .fm-routes span{ font-size:0.9375rem; line-height:1.5; color:var(--fm-slate); } .fm-recovery__search{margin-top:28px;max-width:420px;} /* The search results page routes the same list through the theme's description slot, which is centred by default. */ .search .fm-routes, .search .fm-recovery__lede{text-align:left;margin-left:0;margin-right:0;} .search .fm-routes{max-width:760px;} @media (prefers-reduced-motion:reduce){ .fm-routes a{transition:none;} } /* Blocksy hides the archive description on small screens via ct-hidden-sm. That would hide the whole recovery block on phones, which is exactly where a dead end costs the most. */ .search .page-description:has(.fm-routes){display:block !important;} /* And left-align it, so the empty search matches the 404 and the rest of the site rather than sitting centred on its own. */ .search .hero-section:has(.fm-routes), .search .hero-section:has(.fm-routes) .entry-header{text-align:left !important;} .search .hero-section:has(.fm-routes) .page-description{max-width:760px;margin-left:0;margin-right:0;} /* ===================================================================== PAGES BATCH 1 — measure, tables, form width, FAQ alignment. The home page fixes were all scoped to `.home`, so About, Contact and the legal pages never received them. No colour is introduced or changed anywhere in this file; it uses the existing tokens only. ===================================================================== */ /* ---- Reading measure ---- Contact ran all ten paragraphs past 75 characters and peaked at 145; Terms ran 17 of 17 past 75; About had lines at 132 and 183. Past roughly 90 characters the eye loses the line return on the way back. Tables and figures are exempt: they need the full column. */ .fm-section p, .mtv-page-faq p, .page .entry-content > p, .page .entry-content > ul, .page .entry-content > ol{max-width:68ch;} .fm-section td p, .fm-section th p, .fm-section figure p, .fm-section figcaption{max-width:none;} /* The methodology status line and its footnote sit at the full 1176px container width, which is where the 132 and 183 character lines came from. */ .fm-spec > .fm-wrap > p, .fm-coverage > .fm-wrap > p{max-width:68ch;} /* ---- Spec tables on small screens ---- `.fm-spec table` carries `min-width:560px`, and the scroll container the stylesheet pairs it with (`.fm-spec .wp-block-table{overflow-x:auto}`) never applies, because this table is a bare with no figure.wp-block-table wrapper. On a 375px screen it overflowed to 580px and the page does not scroll horizontally, so every row was clipped mid-sentence and unreachable. Stacking beats scrolling for a two-column definition table: the term sits above its meaning and nothing is hidden. The header row is dropped because the pairing is self-evident once stacked. */ @media (max-width:600px){ .fm-spec table, .fm-spec tbody, .fm-spec tr, .fm-spec td, .fm-prices table, .fm-prices tbody, .fm-prices tr, .fm-prices td{display:block;width:auto;min-width:0;} .fm-spec thead, .fm-prices thead{display:none;} .fm-spec tr, .fm-prices tr{ border-bottom:1px solid var(--fm-hairline); padding:14px 0; } .fm-spec td, .fm-prices td{border:0;padding:0;white-space:normal;} .fm-spec td:first-child, .fm-prices td:first-child{ font-family:"Archivo",system-ui,sans-serif; font-weight:700; color:var(--fm-ink); margin-bottom:4px; } .fm-spec td:last-child, .fm-prices td:last-child{color:var(--fm-slate);} } /* ---- Form width ---- Every input rendered at the full 1290px container, so a name field spanned the whole screen and gave no cue about expected length. */ .srfm-form-container, .fm-form{max-width:560px;} /* ---- FAQ blocks ---- Same defect fixed on the home page: a constrained core group centres its children by auto margins, so the FAQ sat at left 340 while every other section on the page started at 75. */ /* Core's constrained-layout rule is `.is-layout-constrained > :where(...)` with `margin:auto !important`. `:where()` contributes zero specificity, so that rule and a bare `.mtv-page-faq > *` tie at (0,1,0) and source order decides. Adding the container class wins it outright. */ .entry-content .mtv-page-faq > *{ margin-left:0 !important; margin-right:0 !important; } /* The FAQ group sits outside .fm-wrap, so left-aligning it alone put it at the raw container edge (67) while every fm- section indents to 124. Give it the same wrap geometry so it lands on the shared grid line. */ /* The FAQ group sits outside .fm-wrap, so it has to be told which grid its page uses. About is built from .fm-wrap sections whose inner edge is 1240 + 32px padding; Contact is plain blocks on the 1290 content size. Matching the wrong one leaves the FAQ visibly offset from the section above it, so the geometry follows whatever the page contains. */ /* Superseded by the full-bleed FAQ block further down. */ /* Superseded: the FAQ is now full-bleed on every page, with its inner content window handled by the full-width block further down. */ /* ===================================================================== PAGES BATCH 2 — let the Field Manual form treatment actually win. SureForms styles its fields with three-class selectors such as `.srfm-form-container .srfm-form .srfm-input-common` (0,3,0), which outrank the stylesheet's own `.fm-form .srfm-input-common` (0,2,0). The submit button and labels adopted the design once the wrapper was added; radii, field colours, the required marker and error text did not. These selectors sit a class higher so the authored design wins. Every value below is an existing token. No new colour is introduced. ===================================================================== */ .fm-form .srfm-form-container .srfm-form .srfm-input-common, .fm-form .srfm-form-container .srfm-form textarea.srfm-input-common{ background:var(--fm-bg); border:1px solid var(--fm-hairline); border-radius:2px; color:var(--fm-ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:0.9375rem; } .fm-form .srfm-form-container .srfm-form .srfm-input-common:focus, .fm-form .srfm-form-container .srfm-form textarea.srfm-input-common:focus{ outline:2px solid var(--fm-accent); outline-offset:1px; border-color:var(--fm-accent); } .fm-form .srfm-form-container .srfm-block .srfm-block-label{ font-family:"Archivo",system-ui,sans-serif; font-weight:600; font-size:0.8125rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--fm-slate); } /* The required marker and inline errors move onto the brand accent, which is the red the site already uses, replacing SureForms' generic #DC2626. Error text also comes up from 12px to the 13px floor the rest of the site keeps. */ .fm-form .srfm-form-container .srfm-form .srfm-required, .fm-form .srfm-form-container .srfm-block .srfm-required{color:var(--fm-accent);} .fm-form .srfm-form-container .srfm-form .srfm-error-message, .fm-form .srfm-form-container .srfm-block .srfm-error-message{ color:var(--fm-accent); font-size:0.8125rem; line-height:1.45; } .fm-form .srfm-form-container .srfm-form .srfm-error{border-color:var(--fm-accent);} /* The consent line is running prose, not a field label, so it keeps the body face and sentence case. */ .fm-form .srfm-form-container .srfm-gdpr-block .srfm-block-label{ font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:400; font-size:0.875rem; letter-spacing:0; text-transform:none; line-height:1.5; color:var(--fm-slate); } .fm-form .srfm-form-container .srfm-submit-button{ border-radius:2px; font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600; font-size:0.9375rem; padding:15px 26px; } /* The wrapper follows the page grid like any other block; the card and its 560px cap move to the inner container. Setting margin-left:0 on the wrapper alone pushed it to the viewport edge (0) instead of the content edge (67), because .entry-content is full-bleed and the 67px comes from core's constrained-layout centring. */ .entry-content .fm-form{ max-width:1290px; margin-left:auto; margin-right:auto; background:none; border:0; padding:0; } .entry-content .fm-form .srfm-form-container{ max-width:560px; margin-left:0; margin-right:0; background:var(--fm-surface); border:1px solid var(--fm-hairline); border-radius:2px; padding:32px; box-sizing:border-box; } @media (max-width:781px){ .entry-content .fm-form .srfm-form-container{padding:22px;} } /* Field-level errors are inserted into .srfm-error-wrap, which SureForms targets with a five-class selector, so the block above lost to it. Same values, one class deeper. */ .fm-form .srfm-form-container .srfm-form .srfm-block .srfm-error-wrap .srfm-error-message{ color:var(--fm-accent); font-size:0.8125rem; line-height:1.45; } /* Capping a measure inside a constrained core layout hands the leftover width to core's `margin:auto !important`, so every capped paragraph drifted to the centre while its own heading stayed on the grid line. Pin the free margin to the right so the text keeps its left edge. */ /* Inside .fm-wrap and the FAQ the container already sits on the grid, so zeroing the left margin is right. */ .entry-content .fm-section p, .entry-content .mtv-page-faq p{ margin-left:0 !important; margin-right:auto !important; } /* Direct children of .entry-content are different: that element is full-bleed, and their 67px left edge comes from core's auto-centring at the 1290px content size. Zeroing the margin there sent them to the viewport edge instead. Reproduce the same offset explicitly so a capped measure keeps the grid line at every width (it resolves to 0 once the viewport is narrower than the content size). */ .page .entry-content > p, .page .entry-content > ul, .page .entry-content > ol{ margin-left:calc((100% - min(100%, 1290px)) / 2) !important; margin-right:auto !important; } /* ===================================================================== PAGES BATCH 3 — heading step and one contrast failure. ===================================================================== */ /* The methodology step titles sit at 1.125rem against 0.9375rem body in the same row: a 1.2x step, which is not enough separation for a title that has to be scannable down a four-row list. 1.25rem gives a 1.33x step and still sits well below the 41.6px section heading above it. */ .fm-coverage .fm-row h3{font-size:1.25rem;line-height:1.3;} /* ---- Accent links on the inverted section ---- The statement section runs on --fm-deep (#101315). The brand accent #C4400D measures 3.63:1 there, short of the 4.5 AA needs for body text; it passes everywhere else on the site, where it sits on white or the light tint. This is not a palette change: the same burnt orange is lightened to #D95A1E (4.88:1 on --fm-deep) purely for use on dark ground, the way a design system carries an on-dark variant of its accent. Nothing outside .fm-statement is affected, and the light-background accent is untouched. */ .fm-statement{--fm-accent-on-dark:#D95A1E;} .fm-statement a, .fm-statement .fm-wrap a{color:var(--fm-accent-on-dark);} .fm-statement a:hover, .fm-statement a:focus-visible{color:#E87A45;} /* ===================================================================== BLOG CARD MEDIA - stop the cover art being cropped. The media column stretches to match the card's text height, and the image inside is object-fit:cover, so a taller box crops the sides. At 492x324 against a 492x258 source that removed about 63px from each edge and cut the first letter off every cover's baked-in title. Covers are authored 1200x630, so pinning that exact ratio shows the whole graphic with no crop at any card height. ===================================================================== */ .entry-card .ct-media-container{ aspect-ratio:1200 / 630; height:auto !important; align-self:flex-start; overflow:hidden; } .entry-card .ct-media-container img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* ===================================================================== ABOUT PAGE FIXES — 26 Aug 2026. No colour is introduced or changed; existing tokens only. ===================================================================== */ /* ---- 1. The page-identity band must not outrank the page's H1 ---- The orange band's title is a

styled as a heading at 70px, sitting directly above the real

, also 70px. At tablet and mobile the band was actually LARGER than the H1 (50 vs 45.6, and 50 vs 33.6), so the decoration led the page instead of the subject. Demoted to a band label so the H1 always leads. */ .fm-hero .stk-cf247fd p.stk-block-heading__text{ font-size:40px !important; line-height:1.15 !important; letter-spacing:-0.02em; } @media (max-width:1023px){ .fm-hero .stk-cf247fd p.stk-block-heading__text{font-size:30px !important;} } @media (max-width:781px){ .fm-hero .stk-cf247fd p.stk-block-heading__text{font-size:24px !important;} } /* ---- 6. The band ran 310px of padding above two lines of text ---- That pushed the real H1 and the page's actual argument below the fold on every breakpoint. */ .fm-hero .stk-cf247fd{ padding-top:150px !important; padding-bottom:90px !important; } @media (max-width:1023px){ .fm-hero .stk-cf247fd{padding-top:120px !important;padding-bottom:70px !important;} } @media (max-width:781px){ .fm-hero .stk-cf247fd{padding-top:100px !important;padding-bottom:60px !important;} } /* ---- 3. FAQ questions are not section headings ---- They rendered at 40px against 41.6px section headings on desktop and 30px against 29.6px at both smaller breakpoints: indistinguishable at every width, so four questions read as top-level sections. The home page got this fix scoped to .home; every other page needs it too. */ .mtv-page-faq h2.wp-block-heading{ font-size:1.75rem; line-height:1.2; margin-top:2.4em; } @media (max-width:1023px){ .mtv-page-faq h2.wp-block-heading{font-size:1.5rem;} } @media (max-width:781px){ .mtv-page-faq h2.wp-block-heading{font-size:1.3125rem;} } /* ---- 4. Stray hairlines in the author section ---- .fm-principles gives each
  • a top and bottom border. The list holds a single EMPTY
  • , so it drew two rules floating in mid-air between the bio and the photo. Hide empty items, and the list itself when nothing is left, so the artifact cannot come back. */ .fm-principles li:empty{display:none;} .fm-principles:not(:has(li:not(:empty))){display:none;} /* ---- 5. The author column that held only that empty list ---- With the list gone it is 351px of dead space between the bio and the photo. Collapse it and let the two real columns breathe. */ .fm-author .wp-block-column:has(> .fm-principles:only-child):not(:has(li:not(:empty))){ display:none; } /* ---- The H1-to-H2 step on the smallest screens ---- .fm-section h2 floors at 1.85rem (29.6px) while the mobile H1 lands at 33.6px: a 1.13x step, so a section heading reads almost as loud as the page title. Lowering the floor restores a ~1.35x step, matching the cascade the home page already uses at this width. */ @media (max-width:781px){ .fm-section h2{font-size:clamp(1.55rem, 6.4vw, 1.85rem);} } /* ===================================================================== SECTION SEPARATORS + SPEC TABLE — 26 Aug 2026. No colour introduced; existing tokens only. ===================================================================== */ /* ---- Section separators ---- Every full-bleed section carried a 27px bottom margin, so the white page background showed through as a sliver between coloured bands — a dark section ended, then 27px of white, then a hairline, then the grey began. That reads as a rendering seam, not a divider. For alternating full-bleed bands the colour change IS the separator. Close the gap and drop the hairline wherever the background already changes. */ .entry-content > .fm-section, .entry-content > .fm-hero, .entry-content > .mtv-page-faq{ margin-top:0 !important; margin-bottom:0 !important; } .fm-hero, .fm-statement, .fm-coverage, .fm-author, .fm-correct, .fm-places-sec, .fm-figures, .fm-prices{ border-top:0; border-bottom:0; } /* Two sections that share a background still need a line between them, otherwise they merge into one continuous block. .fm-correct is white and the FAQ that follows it is transparent, so that one boundary is drawn explicitly. */ .entry-content > .fm-correct + .mtv-page-faq{ border-top:1px solid var(--fm-hairline); } /* ---- Spec table ---- Blocksy sets `table, th, td { border-width: 1px }` on all four sides. The Field Manual only overrode border-bottom, so the top, left and right survived and the table rendered as a boxed spreadsheet grid — at odds with the horizontal-hairline rows used by .fm-principles, .fm-routes and .fm-coverage everywhere else on the site. */ .fm-spec table, .fm-prices table, .fm-spec tr, .fm-prices tr{border:0;} .fm-spec th, .fm-prices th{ border-top:0; border-left:0; border-right:0; } .fm-spec td, .fm-prices td{ border-top:0; border-left:0; border-right:0; } /* The table filled the full 1176px column, pushing the description cell to roughly 110 characters a line. Capping it brings that back to a readable measure and lets the term column stay compact. */ .fm-spec table{max-width:920px;} .fm-spec td:first-child, .fm-spec th:first-child{width:210px;} @media (max-width:600px){ /* The stacked layout supplies its own row rule, so the term cell must not also draw one. */ .fm-spec td:first-child, .fm-prices td:first-child{width:auto;} } /* ===================================================================== FAQ SECTION — 26 Aug 2026. The one section on the page that used none of the design system: no row structure, no section rhythm, just heading/paragraph in a flat run. Every other list on this site (.fm-principles, .fm-routes, .fm-coverage .fm-row, the spec table) is built from hairline rows, so the FAQ is brought onto the same language. No colour introduced; existing tokens only. ===================================================================== */ /* Match the section padding its siblings use (.fm-wrap is 88px), rather than the 50px it had, so the page rhythm does not break at the end. */ .entry-content .mtv-page-faq{ padding-top:88px; padding-bottom:88px; } /* Each question opens a row. The rule binds the pair visually and gives the section the structure it was missing. */ .mtv-page-faq h2.wp-block-heading{ border-top:1px solid var(--fm-hairline); padding-top:30px; margin-top:38px !important; margin-bottom:14px !important; } /* The section title and the first question must not draw a rule above themselves — the section boundary already does that job. */ .mtv-page-faq > h2.wp-block-heading:first-child, .mtv-page-faq > .fm-faq-title + h2.wp-block-heading{ border-top:0; padding-top:0; margin-top:0 !important; } /* Answers sit tight under their question and carry the gap to the next row on their own bottom margin. */ .mtv-page-faq p{ margin-bottom:0 !important; color:var(--fm-slate); } /* The section title, styled like every other section heading. */ .mtv-page-faq .fm-faq-title{ font-size:clamp(1.85rem,3vw,2.6rem); line-height:1.08; letter-spacing:-0.028em; border-top:0; padding-top:0; margin:0 0 34px !important; color:var(--fm-ink); max-width:none; } @media (max-width:781px){ .entry-content .mtv-page-faq{padding-top:56px;padding-bottom:56px;} .mtv-page-faq h2.wp-block-heading{padding-top:24px;margin-top:30px !important;} .mtv-page-faq .fm-faq-title{font-size:clamp(1.55rem,6.4vw,1.85rem);} } /* `.mtv-page-faq h2.wp-block-heading` is (0,2,1) and the earlier `.mtv-page-faq .fm-faq-title` only (0,2,0), so the question rule won and the section title rendered at the same 28px as the questions it is meant to introduce. Exclude the title from the question rule and give it a selector that outranks it. */ .mtv-page-faq h2.wp-block-heading.fm-faq-title{ border-top:0; padding-top:0; } .entry-content .mtv-page-faq h2.fm-faq-title{ font-size:clamp(1.85rem,3vw,2.6rem); line-height:1.08; margin:0 0 34px !important; } @media (max-width:781px){ .entry-content .mtv-page-faq h2.fm-faq-title{font-size:clamp(1.55rem,6.4vw,1.85rem);} } /* ===================================================================== FAQ — full width, matching every other section. 26 Aug 2026. Measured on About at 1440: every .fm-section spans the full 1425px of .entry-content, with an .fm-wrap inside holding content between 124 and 1300. The FAQ was the only section that was NOT full-bleed — 1240px wide starting at 92 — so its band stopped short of the edges while its neighbours ran to them. Two parts: make the section itself full-bleed with the same inner content window, and stop the Q&A running as one narrow column in a wide band. ===================================================================== */ /* ---- 1. Full-bleed, with the same 1176px content window ---- 100% here resolves against .entry-content (1425 at a 1440 viewport), so (100% - 1176px)/2 reproduces .fm-wrap's 124px edge exactly, and max() keeps it sane once the viewport is narrower than the content. */ .entry-content .mtv-page-faq{ max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:max(20px, calc((100% - 1176px) / 2)); padding-right:max(20px, calc((100% - 1176px) / 2)); box-sizing:border-box; } /* ---- 2. Use the width the section now has ---- A single 760px column in a 1176px band left the right half empty. Widening that column would push answers to ~130 characters a line, so the FAQ adopts the two-column row the coverage section already uses: question left, answer right, one rule across the whole row. The markup is flat (h2, p, h2, p ...), so grid auto-placement pairs them without any change to the content. */ @media (min-width:782px){ .entry-content .mtv-page-faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); /* No column gap: the two cells each draw their own top rule, so a gap would break the line in the middle of every row. The space between question and answer comes from padding instead, which keeps the rule continuous across the full width. */ column-gap:0; row-gap:0; /* stretch, not start: with start the two cells in a row take their own content heights, so the closing rule under the last pair sat at two different heights and stepped in the middle. */ align-items:stretch; } /* Core's constrained layout caps each child at the 760px content size; the grid column is the constraint now. */ .entry-content .mtv-page-faq > *{max-width:none !important;} .entry-content .mtv-page-faq > h2.fm-faq-title{grid-column:1 / -1;} /* Both halves of a pair carry the rule so it reads as one row. */ .entry-content .mtv-page-faq > h2.wp-block-heading:not(.fm-faq-title), .entry-content .mtv-page-faq > p{ border-top:1px solid var(--fm-hairline); padding-top:28px; padding-bottom:34px; margin:0 !important; } .entry-content .mtv-page-faq > h2.wp-block-heading:not(.fm-faq-title){ line-height:1.25; padding-right:56px; } /* Close the run the way .fm-principles closes its list. */ .entry-content .mtv-page-faq > h2.wp-block-heading:last-of-type, .entry-content .mtv-page-faq > p:last-of-type{ border-bottom:1px solid var(--fm-hairline); } } /* ===================================================================== CONTACT HERO — mirroring the sibling network layout. 26 Aug 2026. moroccotravellife's contact hero is an ink band with a small orange eyebrow, a left-aligned title and a lede beneath it. This site's home hero already carries the same ink base (#16191C, the warm counterpart to the sibling's #111518), so Contact moving to ink brings it in line with both the network and its own home page. Scoped to page-id-349: the hero's Stackable block id (stk-cf247fd) is shared with About, whose band is a different element on that page and must stay as it is. Typography stays Archivo — the sibling uses a serif display face, but the Field Manual's faces are this site's identity, and the established convention is to mirror the sibling's structure while keeping our own faces and warm tones. ===================================================================== */ body.page-id-349 .fm-hero .stk-cf247fd{ background-color:#16191C !important; } /* Left-aligned, like the sibling, instead of centred. */ body.page-id-349 .fm-hero .stk-cf247fd .stk-block-heading__text, body.page-id-349 .fm-hero .stk-cf247fd .stk-block-text__text, body.page-id-349 .fm-hero .stk-cf247fd .fm-hero-eyebrow{ text-align:left !important; } body.page-id-349 .fm-hero .stk-cf247fd .stk-block-text__text{ margin-left:0 !important; margin-right:auto !important; max-width:52ch; } /* The eyebrow: the site's existing 13px uppercase label, in the accent, which is what carries the orange now that the band is ink. */ .fm-hero-eyebrow{ font-family:"Archivo",system-ui,sans-serif; font-size:0.8125rem !important; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-accent) !important; margin:0 0 14px !important; max-width:none !important; } @media (max-width:781px){ .fm-hero-eyebrow{margin-bottom:10px !important;} } /* The lede sits in Stackable block .stk-ad51fb0, which carries its own auto left margin and a 55% cap, so it stayed centred at 432 while the title moved to the grid line at 67. Scoped to Contact because that block id is shared with the home page hero. */ body.page-id-349 .fm-hero .stk-ad51fb0{ margin-left:0 !important; margin-right:auto !important; max-width:52ch !important; } /* The eyebrow uses the on-dark accent, not the base one: #C4400D on the ink band measures 3.43:1, short of AA for 13px bold. #D95A1E is the same lightened tint already established for .fm-statement and gives 4.57:1 here. Not a palette change, the on-dark variant of the accent. */ body.page-id-349 .fm-hero .fm-hero-eyebrow{color:#D95A1E !important;} /* moroccotravellife's contact page keeps its headings and body copy on the left grid line but the sibling centres its contact form in the page: 720px wide, centred on the 1425 content box. Ours was pinned left at 560 from the earlier pass, when matching this site's own grid was the brief. Matching the sibling now. Scoped to Contact so forms elsewhere keep the left-aligned treatment. */ body.page-id-349 .entry-content .fm-form .srfm-form-container{ max-width:720px; margin-left:auto !important; margin-right:auto !important; } @media (max-width:781px){ body.page-id-349 .entry-content .fm-form .srfm-form-container{max-width:none;} } /* ===================================================================== CONTACT — all content centred. 26 Aug 2026. Everything on the page sits in one centred column rather than hugging the left grid line: hero, body sections, form and FAQ. Measure is held at 720px, matching the form, so centred text still tracks reasonably. Scoped to page-id-349 throughout: several of these block ids and classes are shared with About and the home page. ===================================================================== */ /* ---- Hero ---- */ body.page-id-349 .fm-hero .stk-cf247fd .stk-block-heading__text, body.page-id-349 .fm-hero .stk-cf247fd .stk-block-text__text, body.page-id-349 .fm-hero .stk-cf247fd .fm-hero-eyebrow{ text-align:center !important; } body.page-id-349 .fm-hero .stk-ad51fb0{ margin-left:auto !important; margin-right:auto !important; max-width:60ch !important; } /* ---- Body sections ---- These are flat blocks straight in .entry-content, so each one is centred individually and capped to the form's 720px measure. */ body.page-id-349 .entry-content > h2, body.page-id-349 .entry-content > h3, body.page-id-349 .entry-content > p, body.page-id-349 .entry-content > ul, body.page-id-349 .entry-content > ol, body.page-id-349 .entry-content > .wp-block-buttons{ max-width:720px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* The CTA button is a flex row, so it needs its own centring. */ body.page-id-349 .entry-content > .wp-block-buttons{ justify-content:center; } /* ---- FAQ ---- The two-column grid built for About reads as left-weighted, so on this page the FAQ returns to a single centred column. */ @media (min-width:782px){ body.page-id-349 .entry-content .mtv-page-faq{ display:block; } body.page-id-349 .entry-content .mtv-page-faq > *{ max-width:720px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } body.page-id-349 .entry-content .mtv-page-faq > h2.wp-block-heading:not(.fm-faq-title){ border-top:1px solid var(--fm-hairline); padding-top:28px; padding-right:0; margin-top:0 !important; /* The About grid block sets `margin:0 !important` on this same element at (0,4,1), which beat the centring on the `> *` rule. Restate the auto margins here, where the selector already wins. */ margin-left:auto !important; margin-right:auto !important; } body.page-id-349 .entry-content .mtv-page-faq > p{ border-top:0; padding-top:0; padding-bottom:34px; } body.page-id-349 .entry-content .mtv-page-faq > p:last-of-type{ border-bottom:1px solid var(--fm-hairline); } body.page-id-349 .entry-content .mtv-page-faq > h2.fm-faq-title{ border-top:0; padding-top:0; } } @media (max-width:781px){ body.page-id-349 .entry-content > h2, body.page-id-349 .entry-content > h3, body.page-id-349 .entry-content > p, body.page-id-349 .entry-content .mtv-page-faq > *{ text-align:center !important; } } /* ===================================================================== SINGLE POST TEMPLATE — 26 Aug 2026 audit. Scope, set by the owner: hero and visual hierarchy, responsive behaviour at 390 / 768 / 1440, contrast, focus states, and empty and error states. THE ARTICLE BODY IS OUT OF SCOPE and keeps its original design — an earlier pass restyled the measure, the block rhythm, the Key Takeaways and Table of Contents panels, the affiliate disclosure, captions and tables, and all of that was reverted on request. Nothing here may target `.entry-content` internals again without the owner asking for it. Findings in post-audit/FINDINGS.md. Hero type, hero colour and the per-breakpoint visibility switches are theme mods and live in post-audit/apply-fixes.php. No colour is introduced: existing --fm tokens plus white, which is already in the palette. ===================================================================== */ /* ---- 1. Hero breadcrumb ---- Its links computed to the accent colour on the accent band: 1:1, so "Home" and "Real Costs" were invisible and only the ink separators showed. Blocksy drives this selector through --theme-link-initial-color, and an invisible navigation is not worth resting on one customiser key, so the colour is stated here as well as in the theme mod. Blocksy also re-enabled the breadcrumb on the archive heroes when it normalised the hero-element layers, and those bands are the same orange, so the set is styled together. The search hero is excluded on purpose: it is transparent with ink text, and white would vanish. */ /* NOTHING HERE STYLES THE BREADCRUMB, on purpose. `novamira-sandbox/breadcrumbs-hero.php` owns it, ported from spaintravelvibe on 26 Aug 2026, and it is a better tool than anything this file should add: it resolves the hero's own background server-side and picks light or dark crumbs by comparing both candidates' contrast rather than using a luminance threshold, injects the trail into the Stackable heroes on About and Contact which have no Blocksy hero at all, sets the page-title crumb in sentence case, and truncates it with an ellipsis at 46 / 26 / 13 characters across the breakpoints. Rules that used to sit here fought all of that: a hardcoded white, a duplicate uppercase, and a `display:none` on the last crumb. That last one was the damaging part. It was written for the three-crumb post trail (Home > Category > Title) where dropping the title still leaves a trail, but every other template here is two crumbs, so it collapsed the whole breadcrumb to a lone "Home" on the legal pages, the five category archives and the author archive. All removed. */ /* ---- 2. The hero byline was set in the system font stack. The site runs Archivo for display and IBM Plex Sans for body, and the line directly under the H1 is the worst place to break that. Hero only: captions in the body are article content and are left alone. */ .single .hero-section .entry-meta, .archive .hero-section .entry-meta{ font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; } /* ---- 3. Tags and share were the same object ---- Both rendered as hairline boxes, and the share row spanned the full measure as seven equal cells: a data table, not an affordance. All of this sits outside `.entry-content`. */ .single .entry-tags .ct-module-title{ font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-slate); } .single .entry-tags-items a{ font-size:0.875rem; border:1px solid var(--fm-hairline); border-radius:2px; } .single .entry-tags-items a:hover{ border-color:var(--fm-accent); color:var(--fm-accent); } .single .ct-share-box[data-type="type-1"] > [data-icons-type]{ display:flex; flex-wrap:wrap; gap:8px; } .single .ct-share-box[data-type="type-1"] > [data-icons-type] > a{ flex:0 0 auto; width:44px; height:44px; border:1px solid var(--fm-hairline); border-radius:2px; } .single .ct-share-box[data-type="type-1"] > [data-icons-type] > a:hover{ border-color:var(--fm-accent); } /* ---- 4. Author box ---- Name, bio, socials and the article count were centre-set at the end of a left-aligned article, with two hairlines flanking the avatar in a medallion motif used nowhere else on the site. */ .single .author-box[data-type="type-2"]{ display:grid; grid-template-columns:72px 1fr; column-gap:26px; align-items:start; text-align:left; border-top:1px solid var(--fm-hairline); padding-top:34px; } .single .author-box[data-type="type-2"]::before, .single .author-box[data-type="type-2"]::after{display:none;} .single .author-box[data-type="type-2"] > .ct-media-container{ position:static; width:72px; height:72px; margin:0; } .single .author-box[data-type="type-2"] > .ct-media-container img{ width:72px; height:72px; } .single .author-box[data-type="type-2"] section{text-align:left;} .single .author-box[data-type="type-2"] .author-box-name{ margin:0 0 10px; line-height:1.2; } .single .author-box[data-type="type-2"] .author-box-bio p{ font-size:1rem; line-height:1.6; color:var(--fm-slate); margin:0; } .single .author-box[data-type="type-2"] .author-box-socials{ justify-content:flex-start; margin-top:16px; } /* The article count was the only accent-coloured text in the block, so the eye landed on the least useful item in it. */ .single .author-box[data-type="type-2"] .ct-author-box-more{ color:var(--fm-slate); letter-spacing:0.06em; } .single .author-box[data-type="type-2"] .ct-author-box-more:hover{ color:var(--fm-accent); } /* ---- 5. Post navigation ---- Covers are authored 1200x630 with the title baked into the graphic, and these were cropped to 70px circles, which destroys them. The same fix exists further up this file for archive cards. */ .single .post-navigation .ct-media-container{ border-radius:3px; overflow:hidden; flex:0 0 auto; } .single .post-navigation .ct-media-container img{ border-radius:3px; object-fit:cover; } /* Blocksy caps the thumbnail with `max-width`, so a width alone does nothing and the cover art stays squared off. 104x55 is the authored 1200x630 ratio; the cap has to be lifted before the width takes. */ .single .post-navigation .nav-item-prev .ct-media-container, .single .post-navigation .nav-item-next .ct-media-container, .single .post-navigation .nav-item-prev .ct-media-container img, .single .post-navigation .nav-item-next .ct-media-container img{ max-width:none !important; width:104px !important; height:55px !important; } .single .post-navigation .item-label{ font-size:0.6875rem; font-weight:700; letter-spacing:0.08em; color:var(--fm-slate); } .single .post-navigation .item-title{ font-size:1rem; line-height:1.4; font-weight:600; } /* ---- 6. Related posts ---- 16px titles against 14px dates in the same ink, and no baseline alignment, so a one-line title left its date 24px above the others. */ .ct-related-posts .related-entry-title{ font-size:1.125rem; line-height:1.35; margin:14px 0 0; } .ct-related-posts .related-entry-title a{color:var(--fm-ink);text-decoration:none;} .ct-related-posts .related-entry-title a:hover{color:var(--fm-accent);} .ct-related-posts-items[data-layout="grid"] > article{display:flex;} .ct-related-posts-items[data-layout="grid"] > article > div{ display:flex; flex-direction:column; width:100%; } .ct-related-posts-items[data-layout="grid"] > article .entry-meta{ margin-top:auto; padding-top:12px; font-size:0.8125rem; color:var(--fm-slate); } /* ---- 7. Tablet, 768 ---- */ @media (min-width:782px) and (max-width:1023px){ .single .author-box[data-type="type-2"]{ grid-template-columns:64px 1fr; column-gap:22px; } .single .author-box[data-type="type-2"] > .ct-media-container, .single .author-box[data-type="type-2"] > .ct-media-container img{ width:64px; height:64px; } .single .post-navigation .ct-media-container, .single .post-navigation .ct-media-container img{ width:88px; height:46px; } } /* ---- 8. Phones, 390 ---- */ @media (max-width:781px){ .single .author-box[data-type="type-2"]{ grid-template-columns:56px 1fr; column-gap:18px; padding-top:28px; } .single .author-box[data-type="type-2"] > .ct-media-container, .single .author-box[data-type="type-2"] > .ct-media-container img{ width:56px; height:56px; } /* Blocksy keeps the two destinations side by side at 390, which gives each title a 162px column and wraps it to seven lines. Stacked, each one gets the full width and reads as a link. */ .single .post-navigation{ grid-template-columns:1fr; gap:0; } .single .post-navigation .nav-item-prev, .single .post-navigation .nav-item-next{ text-align:left; padding:18px 0; align-items:center; } .single .post-navigation .nav-item-next{ border-top:1px solid var(--fm-hairline); flex-direction:row-reverse; justify-content:flex-end; } /* The column divider is a 1px ::after on the nav itself. Stacked, it hangs down the middle of both items. */ .single .post-navigation::after{display:none;} .single .post-navigation .nav-item-next .item-content{text-align:left;} .single .post-navigation .ct-media-container, .single .post-navigation .ct-media-container img{ width:88px; height:46px; } .single .post-navigation .item-title{ font-size:0.9375rem; line-height:1.35; } } /* ---- 9. Post navigation alignment ---- Stacked, the NEXT row was reversed with `justify-content:flex-end`, so its thumbnail started 25px right of the PREVIOUS row's. Both rows now run thumbnail-then-content off the same left edge; the source order is corrected with `order` rather than by reversing the flex direction. */ @media (max-width:781px){ .single .post-navigation .nav-item-next{ flex-direction:row; justify-content:flex-start; } .single .post-navigation .nav-item-next .ct-media-container{order:-1;} /* Blocksy gives the NEXT thumbnail a 25px LEFT margin, because its own layout puts that figure on the right of the text. Moved to the left by `order`, that margin became a 25px indent and the two rows stopped starting on the same edge. Mirrored here. */ .single .post-navigation .nav-item-next .ct-media-container{ margin:0 25px 0 0; } /* And at this width Blocksy caps the thumbnail with `max-width:70px`, which squared the cover art to 1.52 against its authored 1.90 and cropped it again. The cap has to be lifted before a width will take. */ .single .post-navigation .nav-item-prev .ct-media-container, .single .post-navigation .nav-item-next .ct-media-container, .single .post-navigation .nav-item-prev .ct-media-container img, .single .post-navigation .nav-item-next .ct-media-container img{ max-width:none !important; width:88px !important; height:46px !important; } } /* ---- 10. Focus states ---- Two failures, both keyboard-only and both invisible in a screenshot. The hero breadcrumb's focus ring computed to the accent colour on the accent band: #C4400D on #C4400D, 1:1. Tabbing through the hero showed nothing at all. The header navigation carried `outline-style: none`, so the site's primary controls had no focus indicator on any page. Both now use `currentColor`, which is legible against its own background by definition: ink on the white header, white on the orange band. 2px at 3:1 or better satisfies WCAG 2.4.11. */ .single .hero-section .ct-breadcrumbs a:focus-visible, .archive .hero-section .ct-breadcrumbs a:focus-visible, .ct-header .ct-menu-link:focus-visible, header .ct-menu-link:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:1px; } /* Hover and focus should say the same thing on every restyled control. */ .single .entry-tags-items a:focus-visible{ border-color:var(--fm-accent); color:var(--fm-accent); } .single .ct-share-box[data-type="type-1"] > [data-icons-type] > a:focus-visible{ border-color:var(--fm-accent); } .single .author-box[data-type="type-2"] .ct-author-box-more:focus-visible{ color:var(--fm-accent); } .ct-related-posts .related-entry-title a:focus-visible{color:var(--fm-accent);} /* ---- 11. Focus states in the header ---- The post and archive heroes run a transparent header over the orange band, and every focusable control up there inherited the accent-colour focus ring: #C4400D on #C4400D, invisible. That covers the menu links, the search toggle and the mobile menu trigger, which at 768 is the only navigation control on the page. `currentColor` is the one value that is correct in both states, since the control's own text is legible against whatever is behind it: white over the orange band, ink over the white header. */ .ct-header a:focus-visible, .ct-header .ct-menu-link:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:1px; } /* The icon buttons are the exception: their `color` is black regardless of the header state, because the glyph is an SVG with its own fill, so `currentColor` would put a black ring on the orange band. A white ring with a dark halo just outside it is legible on both, without needing to know which state the header is in. */ .ct-header button:focus-visible, .ct-header .ct-toggle:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 4px rgba(22,25,28,0.55); border-radius:2px; } /* ---- 12. Related posts: the partly-filled state ---- The grid is a fixed three columns. Related posts are drawn from the post's own category, so a small category returns one or two, and the band then rendered a single 410px card against two empty columns, which reads as two cards that failed to load rather than as a category that only holds so much. Reproduced on /morocco-high-speed-train/, the only Morocco Now post with a sibling. The count is read off the DOM, so this needs no PHP and no template override. */ .ct-related-posts-items[data-layout="grid"]:has(> article:only-child){ grid-template-columns:minmax(0,520px); } .ct-related-posts-items[data-layout="grid"]:has(> article:nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); } /* ===================================================================== LEGAL PAGES — 27 Aug 2026 audit. Findings in legal-audit/FINDINGS.md. The four legal pages are the only pages that render the theme's own hero, so `body.page:has(.hero-section)` selects exactly them: About, Contact and the home page are Stackable builds with no `.hero-section` at all, and their headers sit over their own dark artwork where the white navigation is correct. Posts and archives are `.single` and `.archive`, not `.page`. The light hero itself is left alone. `single_page_pageTitleBackground` is a hand-typed `#edeff2`, not a default, so it is a decision rather than drift. Only the things sitting illegibly on top of it change. No colour is introduced: existing --fm tokens and the palette. ===================================================================== */ /* ---- 1. The transparent header's white is an alpha short of AA ---- `rgba(255,255,255,0.8)` on the `#C4400D` band measures 3.82:1, under the 4.5:1 that 12px text needs. Full white on the same band is 5.14:1. This is the orange-hero case: posts, archives, blog. */ /* `body` is welded to the attribute here, with no space: `data-header` sits on the body element itself, so `body [data-header]` is a descendant selector that matches nothing. Blocksy's own rule uses this selector without the `body`, so the extra element is what wins the tie. */ body[data-header*="type-1"] .ct-header [data-transparent-row="yes"] [data-id="menu"] > ul > li > a, body[data-header*="type-1"] .ct-header [data-transparent-row="yes"] [data-id="menu"] > ul > li > a:hover{ --theme-link-initial-color:#FFFFFF; } body[data-header*="type-1"] .ct-header [data-transparent-row="yes"] [data-id="search"]{ --theme-icon-color:#FFFFFF; } /* ---- 2. The hero band ---- These pages were the only template on a hand-typed `#edeff2`, and the white transparent-header navigation sitting on it measured 1.12:1, with the mobile trigger's glyph at 1.24:1. The band is now the site's `palette-1` orange like every other hero, so the white navigation is correct here as it is everywhere else and needs no override at all. An earlier version of this section forced the navigation to ink instead, which was the right fix for a light band and the wrong fix for the problem. Removed with the band. Hero type, colour and height are theme mods; see legal-audit/FINDINGS.md. The title was 32px against the page's own 40px H2s, so the page title was smaller than its section headings. */ /* ---- 3. Breadcrumb ---- Nothing here either. Changing the band to orange is all these pages needed: `breadcrumbs-hero.php` reads the hero background server-side and switched the crumbs from dark to light on its own. See the note in the post-template section above. */ /* The hero byline face, as on the other two hero templates. */ body.page:has(.hero-section) .hero-section .entry-meta{ font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; } /* ---- 4. The content column ---- These pages render the content in `ct-container-full` while the hero header sits in `ct-container-narrow`, so a centred title led a body that started hard left and stopped 620px short of the right edge. At 390 the same full-width container left `padding-inline: 0`, putting the text flush against the screen edge with nothing on the left and 31px on the right. Capping and centring the content gives the page one axis. Headings take the same 68ch cap as the prose, so a heading and the paragraph under it finally share a width. */ /* The cap goes on the container, not on each child. `68ch` is the measure the pages already use for prose, and on the container it resolves at the 18px body size, so headings and paragraphs land on exactly the same width and track each other if the type ever changes. Capping headings individually does nothing: 68ch at a 40px heading is about 1600px. */ body.page:has(.hero-section) .entry-content{ max-width:68ch; margin-left:auto; margin-right:auto; } @media (max-width:781px){ body.page:has(.hero-section) .entry-content{ padding-left:20px; padding-right:20px; } } /* ---- FAQ section: full width (28 Aug 2026) ---- The FAQ group is now alignfull (was contentSize:760px). The earlier margin-zeroing left-align fix pins its children to the viewport edge on a full-bleed group, so the group itself now carries the content grid as padding. 1290px is the theme content size. */ .home .mtv-home-faq{ padding-left:max(25px, calc((100% - 1290px) / 2)); padding-right:max(25px, calc((100% - 1290px) / 2)); } /* ---- FAQ redesign: the back-cover reference plate (28 Aug 2026) ---- The page opens on ink (hero base #16191C) and used to fade out white into the pale footer. The FAQ now closes the document on the same ink ground: a spec-sheet ledger, questions at display scale on the left, dated answers right, 2px opening rule + hairlines (the .fm-spec convention). Accent on ink is the on-dark variant #D95A1E (4.88:1); #C4400D fails AA there (3.63:1). Supersedes the earlier full-width padding rule below via later source order + equal specificity. */ .home .mtv-home-faq{ background:#16191C; padding-top:96px !important; padding-bottom:104px !important; padding-left:max(25px, calc((100% - 1290px) / 2)); padding-right:max(25px, calc((100% - 1290px) / 2)); } .home .mtv-home-faq .fm-faq__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#D95A1E; margin:0 0 14px; } .home .mtv-home-faq .fm-faq__title{ font-size:clamp(34px, 3.6vw, 46px); line-height:1.08; color:#fff; margin:0 0 16px; } .home .mtv-home-faq .fm-faq__lede{ font-size:18px; line-height:1.6; color:#C6CCD2; max-width:56ch; margin:0; } .home .mtv-home-faq .fm-faq__list{ margin-top:44px; border-top:2px solid #fff; } .home .mtv-home-faq .fm-faq__row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(28px, 4.5vw, 72px); padding:38px 0; border-bottom:1px solid rgba(255,255,255,.14); } .home .mtv-home-faq .fm-faq__q{ font-size:clamp(21px, 2.1vw, 27px); line-height:1.25; font-weight:600; color:#fff; margin:0; max-width:20ch; } .home .mtv-home-faq .fm-faq__a p{ font-size:17px; line-height:1.65; color:#C6CCD2; margin:0 0 16px; max-width:62ch; } .home .mtv-home-faq .fm-faq__link{ display:inline-block; font-size:15px; font-weight:600; color:#D95A1E; text-decoration:none; border-bottom:1px solid rgba(217,90,30,.45); padding-bottom:2px; } .home .mtv-home-faq .fm-faq__link span{ display:inline-block; transition:transform .18s ease; } .home .mtv-home-faq .fm-faq__link:hover{ color:#E8763C; border-bottom-color:#E8763C; } .home .mtv-home-faq .fm-faq__link:hover span{ transform:translateX(3px); } @media (max-width: 760px){ .home .mtv-home-faq{padding-top:64px !important;padding-bottom:72px !important;} .home .mtv-home-faq .fm-faq__row{display:block;padding:30px 0;} .home .mtv-home-faq .fm-faq__q{max-width:none;margin-bottom:12px;} .home .mtv-home-faq .fm-faq__list{margin-top:32px;} } @media (prefers-reduced-motion: reduce){ .home .mtv-home-faq .fm-faq__link span{transition:none;} }