/* Theme Name: Anytime Mortgages - Andrew Westwood Theme URI: http://andrewwestwoodmortgages.co.uk Author: Anytime Mortgages Ltd Description: Block theme for Andrew Westwood, Mortgage Broker - a Registered Individual for Anytime Mortgages Ltd. Navy, gold and cream brand system with a homepage and contact page built as editable block templates. Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.1.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: anytime-mortgages Tags: block-theme, business, one-column, custom-colors, custom-menu, editor-style, full-site-editing */ :root{ --am-navy:#00203c; --am-navy-deep:#001428; --am-navy-200:#b9c7d6; --am-gold:#df890e; --am-gold-600:#c47a0d; --am-gold-400:#f5a815; --am-cream:#f7f4ec; --am-cream-50:#fbf9f4; --am-white:#fff; --am-body:#48525f; --am-muted:#78828f; --am-border:#e3e6ea; --am-shadow:0 1px 2px rgba(0,32,60,.06),0 1px 3px rgba(0,32,60,.08); --am-ease:cubic-bezier(.32,.72,.29,1); } /* ---------- page canvas colour ---------- */ /* On iOS, Safari paints the area outside the page - the rubber-band overscroll at the top and bottom, and the strip behind the home indicator - using the canvas colour. That was the page's light cream, which showed as a white band under the navy footer on a phone. The page begins with the navy compliance strip and ends with the navy footer, so navy is the right colour at both ends and the join becomes invisible. This goes on , not : when html has a background, browsers use it for the canvas, and body's own cream still paints the page area behind the bands (where nothing ever shows it anyway). */ html,body{background:var(--am-navy)} /* ---------- full-bleed band layout ---------- */ /* The coloured bands should meet edge to edge. theme.json sets a 24px blockGap, which WordPress turns into a top margin on every top-level block - and because the page background is light cream, each of those gaps shows as a cream stripe between bands: above and below the hero, and above the footer. Zeroing it here for the outermost blocks only; the 24px gap still applies to everything nested inside a band, which is where it is actually wanted. */ .wp-site-blocks > *{margin-block-start:0;margin-block-end:0} main.wp-block-group > *{margin-block-start:0;margin-block-end:0} /* ---------- shared section furniture ---------- */ .am-band{padding-block:80px} .am-band-cream{background:var(--am-cream-50)} .am-band-white{background:var(--am-white)} .am-band-navy{background:var(--am-navy)} .am-band-navy-deep{background:var(--am-navy-deep)} .am-eyebrow{font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--am-gold);margin:0 0 12px} .am-rule{width:64px;height:2px;background:var(--am-gold);border:0;margin:18px 0} .am-rule-center{margin-left:auto;margin-right:auto} .am-script{font-family:"Kaushan Script",cursive;color:var(--am-gold-400);line-height:1.3;display:inline-block;border-bottom:2px solid var(--am-gold-400);padding-bottom:6px} .am-band-white .am-script,.am-band-cream .am-script{color:var(--am-gold);border-color:var(--am-gold)} /* the script line is shrink-to-fit, so centre the box itself, not just its text */ .am-script.has-text-align-center, .has-text-align-center.am-script, .am-band-navy-deep .am-script.has-text-align-center{display:table;width:auto;margin-left:auto;margin-right:auto} /* ---------- compliance strip ---------- */ .am-strip{background:var(--am-navy);color:#fff;padding-block:9px} .am-strip p{margin:0;font-size:12.5px;line-height:1.45;color:#fff} .am-strip .am-strip-muted{color:var(--am-navy-200)} .am-strip b{color:var(--am-gold);font-weight:700} /* ---------- header ---------- */ .am-header{background:#fff;border-bottom:1px solid var(--am-border);box-shadow:var(--am-shadow);position:sticky;top:0;z-index:20} .am-header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:16px;padding-bottom:16px} .am-brand{display:flex;align-items:center;gap:18px;text-decoration:none} .am-brand figure{margin:0} .am-brand img{height:84px;width:auto;display:block} .am-brand-rule{width:1px;height:56px;background:var(--am-gold);flex:none} .am-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--am-navy);line-height:1.15;margin:0} .am-name b{color:var(--am-gold);font-weight:600} .am-role{font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--am-muted);line-height:1.5;margin:5px 0 0} .am-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px;margin-left:auto} .am-nav p{margin:0;font-family:Montserrat,sans-serif;font-size:14px;font-weight:500} .am-nav a{color:var(--am-body);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s var(--am-ease)} .am-nav a:hover{color:var(--am-navy);border-bottom-color:var(--am-gold)} .am-nav .am-nav-phone a{font-size:15px;font-weight:700;color:var(--am-navy)} /* The LET'S TALK button sits inside .am-nav, so the .am-nav a rule above was catching it and painting its text body-grey - while every other button on the site takes navy from theme.json. This puts it back, and drops the nav's underline-on-hover treatment, which belongs on text links, not on a pill. */ .am-nav .wp-block-button__link, .am-nav .wp-block-button__link:hover{color:var(--am-navy);border-bottom:0} /* ---------- hero ---------- */ .am-hero{position:relative;overflow:hidden;background:var(--am-navy);padding-block:72px 64px} .am-hero::before{content:"";position:absolute;right:0;top:0;width:56%;height:100%;background-image:var(--am-hero-photo);background-size:cover;background-position:16% 100%} .am-hero::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(0,32,60,0) 62%,rgba(0,32,60,.85) 100%), linear-gradient(90deg,var(--am-navy) 0%,var(--am-navy) 44%,rgba(0,32,60,.7) 56%,rgba(0,32,60,.3) 76%,rgba(0,32,60,.08) 100%)} .am-hero>*{position:relative;z-index:2} .am-hero-copy{max-width:720px} .am-pill{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;margin:0 0 22px} .am-h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 10px} .am-hero .am-script{font-size:clamp(24px,3.4vw,34px)} .am-lede{font-size:18px;line-height:1.65;color:var(--am-navy-200);max-width:56ch;margin:26px 0 0} .am-lede-strong{font-size:19px;font-weight:700;line-height:1.5;color:#fff;margin:14px 0 0} /* ---------- four services ---------- */ .am-services{padding-block:44px 52px} .am-services .wp-block-column{text-align:center;padding:0 20px} .am-services .wp-block-column+.wp-block-column{border-left:1px solid var(--am-gold)} .am-services figure{margin:0} .am-service-icon img{height:46px;width:auto;display:inline-block} .am-service-label{font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.5;margin:14px 0 0;min-height:3em;display:flex;flex-direction:column;justify-content:flex-start;align-items:center} .am-service-label b{color:var(--am-gold);font-weight:700} /* ---------- content blocks ---------- */ .am-h2{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,36px);letter-spacing:-.01em;color:var(--am-navy);line-height:1.15;margin:0} .am-h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:22px;color:var(--am-navy);line-height:1.3;margin:14px 0 10px} .am-card{background:#fff;border:1px solid var(--am-border);border-radius:14px;box-shadow:var(--am-shadow);padding:32px 28px;transition:transform .2s var(--am-ease),border-color .2s var(--am-ease)} .am-card:hover{transform:translateY(-2px);border-color:#f8c464} .am-card-cream{background:var(--am-cream);border-color:rgba(0,32,60,.07);box-shadow:none} .am-num{font-family:Montserrat,sans-serif;font-weight:800;font-size:44px;line-height:1;color:var(--am-gold);margin:0} .am-portrait img{border-radius:50%;border:3px solid var(--am-gold);object-fit:cover} .am-quiet{font-size:15px;line-height:1.6;color:var(--am-muted)} /* ---------- side gutters ---------- */ /* Each band below sets its vertical padding with a shorthand - padding:80px 0 and friends - which also sets the horizontal padding to zero, overriding the 24px global padding from theme.json. On desktop that goes unnoticed because the inner container maxes out at 1200px and there is spare room either side. On a phone there is no spare room, so the text ran hard against both screen edges. This restores the 24px gutter from the design spec. Every one of those bands now sets its vertical space with padding-block instead of a padding shorthand, so nothing can quietly reset the horizontal value again. Source order alone was not enough: .am-footer is declared below this rule, and the responsive block at the end of the file re-declared .am-band{padding:56px 0} at <=781px - which is precisely where the gutter is needed. If you add a band, give it padding-block, never padding. */ .am-strip,.am-header,.am-band,.am-hero,.am-services,.am-footer{padding-inline:24px} /* ---------- contact ---------- */ .am-contact-card{background:#fff;border:1px solid var(--am-border);border-radius:14px;box-shadow:var(--am-shadow);padding:40px 36px} .am-contact-aside{background:var(--am-navy);border-radius:14px;padding:36px 32px;color:#fff} .am-contact-aside p{color:#fff} .am-contact-aside a{color:#fff;text-decoration:none;font-weight:700} .am-contact-aside a:hover{color:var(--am-gold-400)} .am-contact-aside .am-name{color:#fff} .am-contact-aside .am-role{color:var(--am-navy-200)} .am-contact-aside hr{border:0;height:1px;background:rgba(255,255,255,.35);margin:26px 0 22px} /* #region Fluent Forms - the enquiry form on the contact page --------------- */ /* The form is inserted with the [fluentform] shortcode, inside .am-contact-card. Fluent Forms ships its own stylesheet, so every rule below is scoped to .am-contact-card and written to override those defaults. Any class starting .ff- belongs to Fluent Forms, not to this theme - don't rename them. */ /* Breathing room around the whole form */ .am-form{margin:24px 0 8px} /* One field plus its label. Fluent Forms wraps each pair in .ff-el-group */ .am-contact-card .ff-el-group{margin-bottom:20px} /* Field labels - Montserrat 600 13px navy, per the brand spec */ .am-contact-card .ff-el-input--label label{ font-family:Montserrat,sans-serif;font-size:13px;font-weight:600; color:var(--am-navy);margin-bottom:6px;display:inline-block} /* The required-field asterisk, recoloured from Fluent's red to brand gold */ .am-contact-card .ff-el-input--label.ff-el-is-required label:after{ color:var(--am-gold);margin-left:3px} /* Text, email, tel, select and textarea all share .ff-el-form-control. 16px is a minimum, not a preference: below that iOS zooms the page on focus. */ .am-contact-card .ff-el-form-control{ width:100%;padding:13px 15px;border:1px solid var(--am-border);border-radius:8px; background:#fff;font-family:Lato,sans-serif;font-size:16px;color:var(--am-body); box-shadow:none;transition:border-color .2s var(--am-ease)} /* The "tell me a little" field. Sized whether it was built as a textarea or as a plain text field in the form builder. */ .am-contact-card textarea.ff-el-form-control{min-height:120px;resize:vertical} /* Every single-line control the same height, in every browser. Left to themselves, a do not agree: Chrome grows the select to fit its padding, Safari largely ignores padding on a select and renders it at its own intrinsic height, so the dropdown came out visibly shorter than the fields above it. Pinning the height settles it everywhere. !important because Fluent Forms styles selects through its own .ff-default wrapper at exactly the same specificity as this rule, and its stylesheet is loaded after the theme's - so on a tie it wins on source order and the dropdown reverted to 44px against 48px for everything else. Same trap as the submit button further up. The consent checkbox is untouched by this: it carries .ff-el-form-check-input, not .ff-el-form-control. */ .am-contact-card .ff-el-form-control:not(textarea){height:48px!important} /* The dropdown, drawn by us rather than by the operating system. appearance:none turns off the native control - which is what makes Safari, Chrome and Windows all render a select differently - and the chevron below is a Lucide chevron-down as an inline SVG, matching the monoline 2px rounded style the brand uses elsewhere. Tinted to body grey so it reads as part of the field rather than as a piece of decoration. padding-right leaves room for it; without that, a long option would run underneath the chevron. */ .am-contact-card select.ff-el-form-control{ appearance:none;-webkit-appearance:none; padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:14px} /* Focus ring - 2px gold at 2px offset, same as every other control on the site */ .am-contact-card .ff-el-form-control:focus{ outline:2px solid var(--am-gold-400);outline-offset:2px; border-color:var(--am-gold);box-shadow:none} /* The consent checkbox row. Fluent Forms renders this as: label > input + text, and leaves the checkbox at the browser default 13px with its margins zeroed. The text sits on a 22px line (15px x 1.5), so a 13px box aligned to the top of that line looks like it is floating above the sentence. Two things fix it: size the box up to 18px, and push it down ~3px so its centre lines up with the centre of the first line of text. Fluent's own margin reset is more specific than ours, hence the !important on width, height and margin. Keeping the box top-aligned (not centred) is deliberate: if the sentence ever wraps to two lines, it should stay beside the FIRST line, not drift to the middle of the block. */ .am-contact-card .ff-el-form-check{margin:0} .am-contact-card .ff-el-form-check-label{ font-family:Lato,sans-serif;font-size:15px;font-weight:400;line-height:1.5; color:var(--am-body);display:flex;gap:12px;align-items:flex-start;cursor:pointer} .am-contact-card .ff-el-form-check-label input[type=checkbox].ff-el-form-check-input{ width:18px!important;height:18px!important;min-width:18px; margin:3px 0 0!important;accent-color:var(--am-gold);flex:0 0 auto;cursor:pointer} /* Same gold focus ring as every other control on the site */ .am-contact-card .ff-el-form-check-label input[type=checkbox]:focus-visible{ outline:2px solid var(--am-gold-400);outline-offset:2px} /* Fluent Forms prints its own