/* ===================================================================== ROYAL SYSTEM · royal-system.css The one stylesheet every Royal site links. Eight sites, one family. Nothing here was invented. It is the house style already shipping on royalai.ai, royalai.app, royalmortgage.ai, the builder portal and royalagent.ai, promoted into one file and reconciled to the filed brand guide on the three points that had drifted: navy #253069 (filed) — was #152B6B / #242B5D / #181F53 gold #CBA260 (filed) — was #CAA25F paper #FFFFFF (ruling) — was #F8F6F1 The one thing NOT reconciled is the canon coin's own gradient. Its 52% stop is #c9a15f and it stays #c9a15f. That gradient is the coin's material, not a brand token, and it is reproduced here verbatim. THIS FILE IS A VIEW-SOURCE SURFACE. It is served to the public on every site that links it, so its comments are held to the same law as the page copy: the COMPANY NMLS only (a personal originator NMLS belongs on a page that names that originator, never in a shared asset), and no internal product codename anywhere in it. Royal Mortgage LLC · NMLS #2059962 ===================================================================== */ /* --------------------------------------------------------------------- 1. THE TYPEFACE Montserrat, self-hosted. Same approach and the same two woff2 files as royalai.ai/css/font.css — one less third party in front of a lender's customers, and a service worker can cache it. The url() is relative to THIS FILE, so _royal-system/fonts/ must travel with _royal-system/royal-system.css. See README.md. --------------------------------------------------------------------- */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/montserrat-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Montserrat'; font-style:italic; font-weight:400 800; font-display:swap; src:url('fonts/montserrat-latin-italic.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* --------------------------------------------------------------------- 2. TOKENS --------------------------------------------------------------------- */ :root{ /* ---- brand ---- */ --navy:#253069; /* THE filed navy. Every other navy is drift. */ --navy-deep:#171F49; /* the second stop of every navy gradient */ --navy-ink:#0F1533; /* type on gold, the darkest navy we set */ --gold:#CBA260; /* THE filed gold */ --gold-deep:#7D6238; /* gold that is readable as type on white */ --gold-ink:#7A5E2A; /* small uppercase gold type, AA on white */ /* ---- surface ---- */ --paper:#FFFFFF; /* EVERY page background. No exceptions. */ --card:#FFFFFF; /* cards are white; the line is what defines them */ --card-tint:#FCFBF8; /* the barely-there warm surface (docks, rails) */ --line:#E7E4DB; /* the one hairline */ --line-soft:#F1EFE8; /* dividers inside a card */ --track:#EDEBE2; /* bar / timeline / progress groove */ /* ---- ink ---- */ --ink:#1B2140; /* body copy */ --muted:#5C6178; /* secondary copy, labels */ --ink-off:#8F8B80; /* recessive markers. 3.9:1 on white. */ /* ---- status ---- */ --green:#2F6B4F; --green-bg:#EFF6F2; --alert:#A34B3D; /* ---- type stack ---- */ --royal-font:'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif; /* ---- type scale ---- Every size is a clamp so one scale covers 390 to 1280+ without a media query. The floor is the 390 phone, the ceiling is the 1280 desk. */ --fs-hero:clamp(32px,5.4vw,58px); --fs-h1:clamp(25px,4.4vw,40px); --fs-h2:clamp(20px,3vw,28px); --fs-h3:clamp(15.5px,1.9vw,17px); --fs-lede:clamp(15px,2vw,18.5px); --fs-body:15px; --fs-small:13.5px; --fs-fine:11.5px; --fs-micro:10.5px; --fs-eyebrow:12px; --lh-tight:1.1; --lh-head:1.25; --lh-body:1.6; --ls-eyebrow:.2em; /* ---- rhythm ---- */ --gutter:20px; --rail:min(1080px, 100% - 48px); /* wide marketing pages */ --col:min(620px, 100%); /* the front-door column */ --band:clamp(26px,4.5vh,40px); /* gap above a band heading */ --sec:clamp(44px,7vh,84px); /* gap between sections */ /* ---- radius ---- */ --r-sm:12px; --r:16px; --r-lg:22px; --r-pill:999px; /* ---- elevation ---- */ --lift-1:0 6px 18px rgba(37,48,105,.08); --lift-2:0 10px 30px rgba(37,48,105,.10); --lift-3:0 18px 44px rgba(37,48,105,.14); } /* --------------------------------------------------------------------- 3. RESET + PAGE --------------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:var(--royal-font); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; display:flex;flex-direction:column;min-height:100vh;min-height:100dvh; overflow-x:hidden; } img,svg,video{max-width:100%} img{height:auto} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em;line-height:var(--lh-head);color:var(--navy)} h1{font-size:var(--fs-h1);line-height:var(--lh-tight);text-wrap:balance} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} p{margin:0 0 1em} p:last-child{margin-bottom:0} a{color:var(--navy)} strong,b{font-weight:800} /* screen-reader only */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Keyboard focus, site-wide. The UA ring is invisible on navy. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--gold);outline-offset:2px;border-radius:6px} /* Every interactive target clears 44px. */ button,[role="button"],a.btn,.btn{min-height:44px} /* --------------------------------------------------------------------- 4. LAYOUT .wrap = the wide marketing rail (royalai.app) .col = the narrow front-door column (royalai.ai, royalmortgage.ai) .stage = the flexing body between header and footer --------------------------------------------------------------------- */ .wrap{width:var(--rail);margin-inline:auto} .col{width:var(--col);margin-inline:auto} .stage{flex:1;display:flex;flex-direction:column;align-items:center; padding:clamp(16px,3.5vh,40px) var(--gutter) var(--sec);width:100%} .section{margin-top:var(--sec)} .center{text-align:center} /* the split hero: copy left, art right. One column until 768. */ .hero{padding:clamp(28px,5vh,48px) 0 24px} /* --------------------------------------------------------------------- 5. THE BRANDBAR (header) --------------------------------------------------------------------- */ header{padding:26px 0 8px} .brandbar{display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;width:var(--rail);margin-inline:auto} .brandbar .mark{height:44px;width:auto;display:block} .brandbar nav{display:flex;gap:26px;flex-wrap:wrap; font-size:14.5px;font-weight:600} .brandbar nav a{color:var(--navy);text-decoration:none;opacity:.85; padding:6px 0;min-height:0} .brandbar nav a:hover{opacity:1} /* the stacked site wordmark the narrow front doors use */ .markwrap{padding:clamp(26px,5.5vh,58px) 16px 0;display:flex;justify-content:center} .sitemark{width:min(620px,94vw);display:flex;align-items:center; justify-content:center;gap:14px} .sitemark .castle{height:clamp(38px,7vw,54px);width:auto;flex:none} .sitemark .words{font-weight:800;color:var(--navy);letter-spacing:.01em; line-height:1;font-size:clamp(21px,4.6vw,38px)} .sitemark .words em{font-style:italic;color:var(--gold-deep)} /* the eyebrow above a headline */ .eyebrow{color:var(--gold-ink);font-size:var(--fs-eyebrow);font-weight:800; letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-bottom:12px} /* --------------------------------------------------------------------- 6. THE WRITTEN MARKS LAW: the assistant's written name never renders as plain type. It is a drawn lockup, not keyboard text. js/royal-brand.js paints .rw over every occurrence and these rules are what it paints into. The three parts of the lockup, in order: 1st letter = the chrome castle R, light cut on navy, from marks/ 2nd letter = the solid gold ball at cap height the rest = Montserrat 800, navy THE NAME ITSELF IS NOT WRITTEN IN THIS FILE, ON PURPOSE, and must not be added to it. This stylesheet is served to the public on every site that links it, and the product name is still behind a trade-mark gate. The class names are deliberately opaque; leave them that way. --------------------------------------------------------------------- */ .rw{font-weight:800;letter-spacing:.07em;color:var(--navy);white-space:nowrap} .rw .chr{display:inline-block;vertical-align:baseline;height:.79em;width:.745em; margin-right:.02em;-webkit-user-drag:none;user-select:none} .rw i{display:inline-block;vertical-align:baseline;width:.76em;height:.76em; border-radius:50%;margin:0 .04em;font-style:normal; background:radial-gradient(circle at 32% 26%, #fdf6e3 0%, #f5e2b4 15%, #e2c283 33%, var(--gold) 52%, #a5814a 70%, #7d6238 87%, #6a5330 100%); box-shadow:inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 4px rgba(90,66,30,.45), 0 1px 2px rgba(21,27,60,.22)} .rw.onnavy{color:#fff} .rw.onnavy i{box-shadow:inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 4px rgba(90,66,30,.45), 0 1px 2px rgba(0,0,0,.35)} /* RoyalMortgage.ai · ROYAL Ai · royalai.app — navy word, gold suffix, always */ .rmai,.rai{font-weight:800;color:var(--navy);letter-spacing:.01em;white-space:nowrap} .rmai em,.rai em,.rai i{font-style:italic;color:var(--gold-deep);font-weight:800} .onnavy .rmai,.onnavy .rai,.rmai.onnavy,.rai.onnavy{color:#fff} .onnavy .rmai em,.onnavy .rai em,.onnavy .rai i, .rmai.onnavy em,.rai.onnavy em,.rai.onnavy i{color:var(--gold)} /* the chrome Ai mark inline in a sentence */ .aimk{display:inline-block;vertical-align:baseline;height:.72em;width:1.156em; margin:0 .02em;-webkit-user-drag:none;user-select:none} /* TM. Never the registered symbol — nothing in the Royal house is registered. */ .tm{font-size:.55em;vertical-align:.5em;letter-spacing:.02em;font-weight:700} /* --------------------------------------------------------------------- 7. THE COIN The block below is the canon coin, verbatim. Do not re-mix the gold, do not touch the stops, do not touch the shadow ratios. Everything after it is a modifier layered on top. --------------------------------------------------------------------- */ .coin{width:108px;height:108px;border-radius:50%;position:relative; background: radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%); box-shadow: 0 10px 24px rgba(21,27,60,.22), inset 0 2px 6px rgba(255,255,255,.65), inset 0 -6px 12px rgba(90,66,30,.45); transition:transform .18s ease, box-shadow .18s ease} .coin::after{content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%); pointer-events:none} /* --- modifiers (the canon block above is untouched) --- */ .coin{display:grid;place-items:center;flex:none} .coin.coin-sm{width:72px;height:72px} .coin.coin-lg{width:148px;height:148px} /* fills its grid cell but never grows past 108 — the coin-grid default */ .coin.coin-fluid{width:100%;height:auto;max-width:108px;aspect-ratio:1} .coin.coin-fluid.coin-sm{max-width:72px} .coin.coin-fluid.coin-lg{max-width:148px} /* THE SEATING LAW (Bryan, 7/28/2026: "the R looks too big for the circle") ------------------------------------------------------------------------ THE WHITE MEDALLION a mark sits in. 68% of the coin, always, and the mark inside it is capped at 59% of the medallion. 0.68 x 0.59 = 40.1% of the coin diameter, which is the ratio measured off the reference button Bryan named on 7/28 (disc 67-68% of the coin, mark ~40% of the coin). The reference file is named in the internal build notes, not here - this stylesheet is public and its filename carries a product codename. It was 66% x 70% = 46.2% of the coin. That is the ~14% oversize he caught. These two numbers are the whole law. Change them here and every Royal surface that carries a copy of this file moves with them. Nothing else in the coin - not the gradient, not the stops, not the shadow - is touched. */ .coin-inner{width:68%;height:68%;border-radius:50%; background:rgba(255,255,255,.92);display:grid;place-items:center; overflow:hidden;box-shadow:inset 0 1px 4px rgba(90,66,30,.35)} .coin-inner img{max-width:59%;max-height:59%;width:auto;height:auto;display:block} .coin-inner svg{width:59%;height:59%;fill:var(--navy);stroke:none} .coin-inner svg .gold{fill:var(--gold)} /* ASLEEP, THEN AWAKE (Bryan, 7/25/2026). The gold ball carries NOTHING at rest. Touch it, focus it, or say his name and the mark rises out of the gold. Add .coin-awake-default to a coin whose face must be visible from the first paint (the hub grids). */ .coin.coin-asleep .coin-inner{opacity:0;transform:scale(.55); transition:opacity .24s ease, transform .34s cubic-bezier(.34,1.42,.5,1)} .coin.coin-asleep.awake .coin-inner, .coin.coin-asleep:hover .coin-inner, .cell:hover .coin.coin-asleep .coin-inner, .cell:focus-visible .coin.coin-asleep .coin-inner{opacity:1;transform:none} .coin.coin-awake-default .coin-inner{opacity:1;transform:none;transition:none} /* the lift */ .coin:hover,.cell:hover .coin{transform:translateY(-4px) scale(1.05); box-shadow:0 14px 30px rgba(21,27,60,.28), inset 0 2px 6px rgba(255,255,255,.65), inset 0 -6px 12px rgba(90,66,30,.45)} /* the coin grid + its label */ .coins{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(10px,2vw,18px);width:var(--col)} .coins.g3{grid-template-columns:repeat(3,1fr)} .coins.g5{grid-template-columns:repeat(5,1fr)} .cell{display:flex;flex-direction:column;align-items:center;gap:9px; text-decoration:none;color:var(--ink);min-width:0;background:none;border:none; cursor:pointer;font-family:inherit;padding:0;position:relative;min-height:0} .cell .label{font-size:clamp(10.5px,1.6vw,12.5px);font-weight:700; color:var(--muted);text-align:center;letter-spacing:.03em;line-height:1.25} .cell:hover .label{color:var(--navy)} .cell .badge{position:absolute;top:-6px;right:6%;background:var(--gold); color:var(--navy-ink);font-size:8.5px;font-weight:800;letter-spacing:.1em; padding:3px 8px;border-radius:var(--r-pill);z-index:5} /* the seal — the coin shrunk to a chip. Same gold, same light source. */ .seal{width:17px;height:17px;border-radius:50%;flex:none;position:relative; display:inline-block; background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, var(--gold) 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%); box-shadow:0 2px 5px rgba(21,27,60,.28), inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(90,66,30,.4)} .seal.seal-lg{width:44px;height:44px} .seal::after{content:"";position:absolute;inset:22%;border-radius:50%; border:1.5px solid rgba(255,255,255,.55)} /* --------------------------------------------------------------------- 8. THE ASK BAR One component, two dresses: .searchbox the hero bar on a front door (input + gold send) .askrow the compact bar inside a room (input + navy send) .askout the output region both of them write into .phold is the branded placeholder: an placeholder is a string attribute so it cannot carry a lockup. The real one goes transparent and this sits over it; :placeholder-shown hides it on first keystroke. --------------------------------------------------------------------- */ .searchbox{width:var(--col);position:relative;margin:clamp(18px,3vh,32px) 0 0} .searchbox input{width:100%;border:1.5px solid var(--line); border-radius:var(--r-pill);background:var(--card); padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit; color:var(--ink);box-shadow:var(--lift-2);outline:none; transition:box-shadow .2s,border-color .2s} .searchbox input:focus{border-color:var(--gold); box-shadow:0 12px 34px rgba(203,162,96,.28)} .searchbox input::placeholder{color:transparent} .phold{position:absolute;left:26px;top:50%;transform:translateY(-50%);right:58px; pointer-events:none;font-size:16.5px;line-height:1.5;color:var(--muted); font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:opacity .12s ease} .searchbox input:not(:placeholder-shown) ~ .phold{opacity:0} .phold .rw{color:var(--muted);opacity:.92} .searchbox .btns{position:absolute;right:8px;top:50%;transform:translateY(-50%); display:flex;align-items:center;gap:6px} .searchbox button{width:40px;height:40px;min-height:40px;border-radius:50%; border:none;cursor:pointer;display:grid;place-items:center;flex:none;padding:0} .searchbox .go{background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%); box-shadow:0 3px 8px rgba(21,27,60,.25)} .searchbox .go svg{width:17px;height:17px;stroke:var(--navy-deep); stroke-width:2.4;fill:none} .searchbox .mic{background:var(--card);border:1.5px solid var(--line)} .searchbox .mic svg{width:17px;height:17px;fill:var(--navy)} .searchbox .mic[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)} .searchbox .mic[aria-pressed="true"] svg{fill:var(--gold)} /* the compact in-room bar */ .askrow{display:flex;gap:9px;align-items:center;width:100%} .askrow input{flex:1;min-width:0;border:1.5px solid var(--line); border-radius:var(--r-pill);padding:12px 18px;font-family:inherit; font-size:14.5px;background:var(--card);color:var(--ink)} .askrow input:focus{outline:2px solid var(--gold);border-color:var(--gold)} .askrow .send{background:var(--navy);color:#fff;border:none; border-radius:var(--r-pill);min-width:48px;min-height:48px;font-size:17px; cursor:pointer;font-family:inherit;display:grid;place-items:center;flex:none; transition:background .15s,transform .12s} .askrow .send:hover{background:var(--navy-deep);transform:translateY(-1px)} .askrow .send svg{width:18px;height:18px;fill:#fff} .askrow .send:disabled{opacity:.55;cursor:default;transform:none} /* THE OUTPUT REGION. Hidden until it has something to say. */ .askout{width:var(--col);background:var(--card);border:1px solid var(--line); border-radius:18px;margin-top:14px;padding:18px 22px;font-size:14.5px; line-height:var(--lh-body);color:var(--ink);box-shadow:var(--lift-1); display:none;text-align:left} .askout.show{display:block;animation:royal-rise .28s ease} @keyframes royal-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .askout .q{color:var(--muted);font-size:13px;margin:0 0 8px} .askout .a{margin:0} .askout .hook{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line); font-size:var(--fs-fine);color:var(--muted)} /* the beat between send and the first sentence — three gold dots */ .askout.show:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold-deep); letter-spacing:.2em;animation:royal-pulse 1.1s ease-in-out infinite} @keyframes royal-pulse{0%,100%{opacity:.35}50%{opacity:1}} /* the floating ask pill that follows a visitor down a page */ .askbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55; display:flex;align-items:center;gap:11px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-pill); padding:10px 22px 10px 12px;cursor:pointer;font-family:inherit; box-shadow:0 10px 28px rgba(23,31,73,.22); transition:transform .22s ease,box-shadow .15s ease,opacity .22s ease; max-width:min(480px,calc(100% - 32px))} .askbar:hover{transform:translateX(-50%) translateY(-2px); box-shadow:0 14px 32px rgba(23,31,73,.3)} .askbar.tucked{transform:translateX(-50%) translateY(140%);opacity:0;pointer-events:none} .askbar .orb{width:36px;height:36px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, var(--gold) 52%, #a5814a 70%, #6a5330 100%); box-shadow:inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(90,66,30,.45); display:grid;place-items:center;overflow:hidden} .askbar .orb img{max-width:60%;max-height:60%;display:block;opacity:0; transform:scale(.55); transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.42,.5,1)} .askbar:hover .orb img,.askbar:focus-visible .orb img, .askbar.awake .orb img{opacity:1;transform:none} .askbar .ask{font-size:14px;font-weight:600;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .askbar .ask b{color:var(--navy);font-weight:800} /* --------------------------------------------------------------------- 9. BUTTONS --------------------------------------------------------------------- */ .btn,.btn-primary,.btn-ghost,.btn-gold{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em; padding:13px 30px;border-radius:var(--r-pill);border:1.5px solid transparent; text-decoration:none;cursor:pointer;width:fit-content;text-align:center; transition:background .15s,border-color .15s,transform .12s,box-shadow .15s} .btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(37,48,105,.22)} .btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,48,105,.30)} .btn-primary:active{transform:none} .btn-ghost{background:var(--card);color:var(--navy);border-color:var(--line)} .btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)} /* the gold bar CTA — the one the house saves for the moment that matters */ .btn-gold{color:var(--navy-ink);font-weight:800; background:linear-gradient(160deg,#fdf6e3 0%,#f0d9a6 18%,#d5b271 45%,#ab854a 78%,#8a6f3f 100%); box-shadow:0 8px 20px rgba(21,27,60,.22), inset 0 2px 4px rgba(255,255,255,.7), inset 0 -3px 7px rgba(90,66,30,.45)} .btn-gold:hover{filter:brightness(1.05);transform:translateY(-2px)} .btn:disabled,.btn-primary:disabled,.btn-ghost:disabled,.btn-gold:disabled{ opacity:.55;cursor:default;transform:none;filter:none;box-shadow:none} .btn-block{width:100%} .btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px} /* the pill chip */ .chip{display:inline-flex;align-items:center;gap:7px;background:var(--card); border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 18px; font-size:13px;font-weight:700;color:var(--navy);cursor:pointer; font-family:inherit;min-height:44px;transition:border-color .12s,transform .12s} .chip:hover{border-color:var(--gold);transform:translateY(-1px)} .chip.on{background:var(--navy);border-color:var(--navy);color:#fff} .chip.on::before{content:"\2713\00a0";color:var(--gold)} /* the status tag (not a button) */ .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);min-height:0} .tag.live{background:var(--green-bg);color:var(--green)} .tag.soon{background:rgba(203,162,96,.18);color:var(--gold-deep)} /* --------------------------------------------------------------------- 10. CARDS + SECTION RHYTHM --------------------------------------------------------------------- */ .card{background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:20px 22px} .card h3{margin:0 0 6px;color:var(--navy)} .card p{margin:0;font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-body)} .card-tint{background:var(--card-tint)} .card-gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF8,#FDF7EC)} .card-lift{box-shadow:var(--lift-1)} .cards{display:grid;grid-template-columns:1fr;gap:16px} .cards.c2{grid-template-columns:1fr} .cards.c3{grid-template-columns:1fr} /* the navy panel — the one place a Royal page is not white */ .panel{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%); border-radius:var(--r-lg);padding:clamp(28px,4vw,44px) clamp(22px,3.5vw,40px); color:#fff;box-shadow:var(--lift-3)} .panel h2,.panel h3{color:#fff} .panel p{color:#C7CBE0} .panel .klabel{font-size:var(--fs-micro);font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--gold)} /* the band heading with the gold rule */ .band{width:var(--col)} .band h2{font-size:12px;font-weight:800;letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--muted);margin:var(--band) 0 4px; display:flex;align-items:center;gap:10px} .band h2::after{content:"";flex:1;height:2px;background:var(--gold); opacity:.45;border-radius:2px} .band .bandsub{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 14px} /* the standing copy sizes */ .lede{font-size:var(--fs-lede);color:var(--muted);max-width:56ch;margin:0 0 22px} .anchorline{font-size:clamp(14px,2.1vw,17px);color:var(--ink);font-weight:700; margin:0 0 6px;text-align:center;max-width:36ch;line-height:1.4} .anchorsub{font-size:clamp(12.5px,1.8vw,14.5px);color:var(--muted);font-weight:600; margin:0 0 20px;text-align:center;max-width:52ch;line-height:1.55} .fine{font-size:var(--fs-micro);color:var(--muted);line-height:var(--lh-body); max-width:60ch} /* the promise row — three short truths, side by side */ .promise{display:flex;gap:10px;flex-wrap:wrap;justify-content:center; margin:var(--sec) 0 0;width:var(--col)} .promise div{flex:1 1 150px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:14px 16px;text-align:center} .promise b{display:block;font-size:15px;color:var(--navy);letter-spacing:-.01em} .promise small{display:block;font-size:var(--fs-fine);color:var(--muted); font-weight:600;line-height:1.5;margin-top:3px} /* the trust box */ .trust{width:var(--col);background:var(--card);border:1px solid var(--line); border-radius:14px;padding:16px 20px;margin-top:clamp(24px,4.5vh,40px); font-size:12px;color:var(--muted);line-height:var(--lh-body);text-align:center} .trust b{color:var(--ink)} /* the toast — every tap gets an answer, never a dead click */ .toast{position:fixed;bottom:34px;left:50%; transform:translateX(-50%) translateY(8px);background:var(--navy);color:#fff; padding:11px 22px;border-radius:var(--r-pill);font-size:13px;font-weight:700; opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90; max-width:calc(100% - 32px);text-align:center} .toast.show{opacity:1;transform:translateX(-50%)} /* --------------------------------------------------------------------- 11. THE FOOTER The standard footer, and only the standard footer: company name, NMLS #2059962, Equal Housing Lender, not a commitment to lend, copyright. Nothing is added to it and nothing is taken out of it. Markup is in README.md §5. --------------------------------------------------------------------- */ footer{padding:26px var(--gutter) 34px;text-align:center; font-size:var(--fs-fine);color:var(--muted);line-height:1.7; border-top:1px solid var(--line);margin-top:var(--sec)} footer .wrap,footer .col{text-align:center} footer b{color:var(--ink)} footer a{color:var(--muted)} footer a:hover{color:var(--navy)} .ehl{width:13px;height:13px;vertical-align:-2px;fill:currentColor} .flinks{display:flex;gap:22px;flex-wrap:wrap;justify-content:center; margin-bottom:14px;font-size:14px;font-weight:600} .flinks a{color:var(--navy);text-decoration:none;opacity:.85} .flinks a:hover{opacity:1} /* --------------------------------------------------------------------- 11b. FORM FIELDS + SMALL PARTS Everything a page needs that is not the ask bar. --------------------------------------------------------------------- */ .form{display:grid;grid-template-columns:1fr;gap:14px;max-width:640px} .field{display:flex;flex-direction:column;gap:6px} .field.full{grid-column:1/-1} .field label{font-size:11.5px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:16px;padding:12px 15px; border:1.5px solid var(--line);border-radius:var(--r-sm); background:var(--card);color:var(--ink);resize:vertical} .field textarea{min-height:96px;line-height:1.55} .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)} .field input:disabled,.field select:disabled,.field textarea:disabled{ background:var(--card-tint);color:var(--ink-off);cursor:not-allowed} /* the honeypot. Off-screen, never display:none — a bot reads that. */ .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .errnote{color:var(--alert);font-size:12px;font-weight:600} .errnote:empty{display:none} /* the hero headline, one step above h1 */ .h-hero{font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:800; letter-spacing:-.02em;color:var(--navy);margin:0 0 18px;text-wrap:balance} .h-hero .gold{color:var(--gold-deep)} /* the groove: progress, timeline, a bar that fills */ .bar{height:7px;background:var(--track);border-radius:var(--r-pill); overflow:hidden;margin:6px 0 14px} .bar i{display:block;height:100%;width:0;border-radius:var(--r-pill); background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .35s ease} /* the divider inside a card */ .divider{border:0;border-top:1px solid var(--line-soft);margin:14px 0} /* a key/value row */ .kv{display:flex;justify-content:space-between;gap:18px;padding:6px 0; border-bottom:1px dashed var(--line-soft);font-size:var(--fs-small)} .kv:last-child{border-bottom:none} .kv .k{color:var(--muted)} .kv .v{color:var(--ink);font-weight:700;text-align:right} .kv.off .v{color:var(--ink-off);font-weight:500} /* --------------------------------------------------------------------- 12. BREAKPOINTS 390 the phone floor (iPhone 14/15/16 portrait) 768 tablet and up (layouts open to two and three columns) 1280 the desk (the rail stops growing, air comes in) --------------------------------------------------------------------- */ /* ---- 390 and under: the phone floor ---- */ @media (max-width:390px){ :root{--gutter:16px;--rail:min(1080px, 100% - 32px)} .brandbar{gap:12px} .brandbar .mark{height:36px} .brandbar nav{gap:16px;font-size:13.5px;width:100%;justify-content:center} .coins{gap:9px} .coin.coin-fluid{max-width:72px} .searchbox input{padding:15px 52px 15px 20px;font-size:16px} .phold{left:20px;right:52px;font-size:16px} .btn,.btn-primary,.btn-ghost,.btn-gold{padding:12px 22px;font-size:14px} .btnrow{gap:10px} .btnrow .btn,.btnrow .btn-primary,.btnrow .btn-ghost,.btnrow .btn-gold{ flex:1 1 100%} .card{padding:16px 18px} .panel{border-radius:var(--r)} .promise div{flex:1 1 100%} .askbar{bottom:14px;padding:8px 16px 8px 9px} .askbar .ask{font-size:13px} } /* ---- 768 and up: tablet ---- */ @media (min-width:768px){ /* --col widens here rather than each component, so a narrow section and everything nested inside it stay on the same centre line. */ :root{--gutter:28px;--col:min(680px, 100%)} .cards.c2{grid-template-columns:1fr 1fr} .cards.c3{grid-template-columns:repeat(3,1fr)} .form{grid-template-columns:1fr 1fr} .coins{gap:18px} .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px; align-items:center;padding:56px 0 36px} .panel.panel-split{display:grid;grid-template-columns:1fr auto;gap:28px; align-items:center} } /* ---- 1280 and up: the desk ---- */ @media (min-width:1280px){ :root{--gutter:32px;--rail:1080px;--col:min(720px, 100%)} body{font-size:15.5px} .coins{gap:22px} .hero{gap:56px;padding:72px 0 44px} .brandbar nav{gap:30px} .section{margin-top:clamp(56px,7vh,96px)} } /* ---- stacking below tablet ---- */ @media (max-width:767px){ .hero{display:block} .panel.panel-split{display:block;text-align:center} .panel.panel-split .btn,.panel.panel-split .btn-primary, .panel.panel-split .btn-gold{margin:18px auto 0} } /* ---- motion ---- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important} .coin,.coin.coin-asleep .coin-inner,.askbar{transition:none} .coin:hover,.cell:hover .coin{transform:none} } /* --------------------------------------------------------------------- 13. PRINT A Royal page printed is a leave-behind. Navy panels become white with a rule, the coin becomes a gold ring (radial gradients print as mud), the floating chrome disappears, and every link shows where it goes. --------------------------------------------------------------------- */ @media print{ @page{margin:14mm} html,body{background:#fff !important;color:#000 !important; font-size:10.5pt;line-height:1.45} body{display:block;min-height:0} .askbar,.toast,.searchbox .btns,.askrow .send,.brandbar nav,.chip, [data-noprint]{display:none !important} header,footer{border-color:#999} a{color:#000;text-decoration:underline} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444} a[href^="#"]::after,a[href^="mailto"]::after{content:""} .panel{background:#fff !important;color:#000 !important; border:1.5pt solid var(--navy);box-shadow:none} .panel h2,.panel h3{color:#000 !important} .panel p,.panel .klabel{color:#333 !important} .card,.trust,.promise div,.askout{border:.75pt solid #999 !important; box-shadow:none !important;break-inside:avoid} .coin{background:#fff !important;border:2.5pt solid var(--gold-deep); box-shadow:none !important;width:84px;height:84px} .coin::after{display:none} .coin-inner{background:#fff !important;box-shadow:none !important} .seal{background:#fff !important;border:1pt solid var(--gold-deep);box-shadow:none !important} .rw i{background:#fff !important;border:1pt solid var(--gold-deep);box-shadow:none !important} .btn,.btn-primary,.btn-ghost,.btn-gold{background:#fff !important; color:#000 !important;border:1pt solid var(--navy) !important; box-shadow:none !important;filter:none !important} h1,h2,h3{break-after:avoid;color:#000} .section,.band{break-inside:avoid} footer{margin-top:16pt} }