/* Sisu Recovery Residences * --------------------------------------------------------------------------- * Brand Guidelines v1.0 is the authority. Where an instinct here conflicts with * an SOP or the guidelines, the guidelines win. * * The design decision this file makes, within what the brand fixes: Fjord Blue * is the dominant colour, not an accent. Snow and Fjord bands alternate full * bleed, and every Fjord band carries exactly one Lora italic sentence and * nothing else. Ochre appears three times on the whole site — the mark, the * focus ring, and the lit dot on the section rail. That restraint is § 4.4's * 2% ochre budget spent deliberately rather than sprinkled. * * Class prefix stays sx- from the GHL era. It costs nothing and means the * existing page bodies work here unchanged. */ /* ---------- fonts: self-hosted ------------------------------------------- Not Google Fonts. Self-hosting removes two third-party origins from the CSP, removes a render-blocking third-party request from every page, and is the only way script-src/style-src stay at 'self'. Both faces are SIL OFL and Brand Guidelines § 5.1 explicitly clears them for embedding. */ @font-face{font-family:'Lora';src:url('/assets/fonts/lora-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Lora';src:url('/assets/fonts/lora-400i.woff2') format('woff2'); font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Lora';src:url('/assets/fonts/lora-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Lora';src:url('/assets/fonts/lora-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Montserrat';src:url('/assets/fonts/montserrat-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} /* ---------- tokens: Brand Guidelines § 8.1, verbatim ---------------------- */ :root{ --fjord:#1F3E5A; --fjord-90:#345069; --fjord-75:#556C80; --fjord-60:#758797; --fjord-20:#CBD0D4; --fjord-08:#E5E6E6; --fjord-deep:#152A3E; --fjord-hover:#1C3852; --pine:#5B735E; --pine-60:#99A799; --pine-08:#EAEBE6; --mist:#A9BBC8; --stone:#C9B8A3; --snow:#F6F5F2; --ochre:#DCC29B; --success:#4A7C59; --warning:#B08442; --error:#9B4A3F; --info:#3B6285; --bg:#F6F5F2; --surface:#FFFFFF; --text:#1F3E5A; --text-muted:#556C80; --border:#CBD0D4; --focus:#DCC29B; --serif:'Lora',Georgia,'Times New Roman',serif; --sans:'Montserrat','Helvetica Neue',Arial,sans-serif; --r:4px; --r-lg:8px; /* § 7.3: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Nothing between. */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --measure:64ch; --w:1200px; --gutter:20px; } @media(min-width:768px){:root{--gutter:40px}} @media(min-width:1100px){:root{--gutter:64px}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* The UA's [hidden]{display:none} is an element-level rule, so any class that sets display beats it. .sx-gate and .sx-gate-note both set display:flex, which meant the vault set hidden=true and the gate card stayed on screen right on top of the page it had just decrypted. Anything toggled with .hidden in JS needs this; it is cheaper than remembering which classes set display. */ [hidden]{display:none!important} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} /* § 8.10: every interactive element keeps a visible ring. Ochre at 2px offset, which is one of the three places ochre is allowed to appear. */ :focus-visible{outline:2px solid var(--ochre);outline-offset:2px;border-radius:2px} :focus:not(:focus-visible){outline:none} /* The vault moves focus to the page heading after it decrypts, so a screen reader lands on the content rather than back at the top of the document. That heading is tabindex="-1" and unreachable by keyboard, so it should not paint a focus ring — Chrome shows one anyway because the focus followed a click. Suppress it only for programmatically focused elements. */ [tabindex="-1"]:focus{outline:none} .sx-skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--fjord);color:var(--snow);padding:12px 20px; font-size:14px;font-weight:600;text-decoration:none; } .sx-skip:focus{left:0} /* ---------- type: § 5.3 scale -------------------------------------------- */ h1,h2,h3,h4{font-family:var(--serif);margin:0;text-wrap:balance} h1{font-size:clamp(34px,6vw,49px);line-height:1.1;font-weight:500;letter-spacing:-.015em} h2{font-size:clamp(27px,4.2vw,39px);line-height:1.15;font-weight:500;letter-spacing:-.01em} h3{font-size:clamp(21px,2.6vw,25px);line-height:1.25;font-weight:600} h4{font-family:var(--sans);font-size:18px;line-height:1.3;font-weight:600;letter-spacing:.01em} p{margin:0} i,em{font-style:italic} /* § 5.4: all-caps Montserrat is always tracked. Untracked caps look like an error, and this is the fastest way to make the brand look cheap. */ .sx-eyebrow{ font-size:12px;line-height:1.4;font-weight:500;text-transform:uppercase; letter-spacing:.18em;color:var(--pine);margin:0 0 var(--s2); } .sx-lede{font-size:clamp(18px,2.4vw,20px);line-height:1.5;color:var(--fjord-90); max-width:56ch;margin:var(--s2) 0 0} .sx-p{color:var(--fjord-90);max-width:var(--measure);margin:var(--s2) 0 0} .sx-meta{font-size:14px;color:var(--fjord-75);margin:var(--s1) 0 0} .sx-small{font-size:14px;line-height:1.6;color:var(--fjord-75)} /* § 8.3: never remove the underline in body copy. Colour alone is not an accessible link indicator. */ .sx-prose a,.sx-p a,.sx-lede a{color:var(--fjord);text-decoration-thickness:1px; text-underline-offset:3px} .sx-prose a:hover,.sx-p a:hover{color:var(--pine);text-decoration-thickness:2px} /* ---------- shell -------------------------------------------------------- */ .sx-w{max-width:var(--w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%} .sx-col{max-width:var(--measure)} /* ---------- header: § 8.6 ------------------------------------------------ */ .sx-hdr{background:var(--snow);border-bottom:1px solid var(--mist);position:sticky;top:0;z-index:30} .sx-hdr-in{max-width:var(--w);margin:0 auto;padding:0 var(--gutter); height:72px;display:flex;align-items:center;gap:var(--s3)} .sx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fjord);flex:0 0 auto} .sx-brand img{height:32px;width:auto;flex:0 0 auto} .sx-brand-name{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.1; letter-spacing:-.005em;white-space:nowrap} /* Below 420px the name would push the burger off the edge. The symbol alone is still an approved use above 24px (§ 3.4) and the page title carries the name. */ @media(max-width:420px){.sx-brand-name{display:none}} .sx-nav{margin-left:auto} .sx-nav ul{display:flex;align-items:center;gap:var(--s4);list-style:none;margin:0;padding:0} .sx-nav a{ font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--fjord); text-decoration:none;padding:6px 0;display:inline-block;border-bottom:2px solid transparent; } .sx-nav a:hover{border-bottom-color:var(--mist)} /* § 8.6: active marked with a 2px Pine underline, not a colour change alone. */ .sx-nav a[aria-current="page"]{border-bottom-color:var(--pine);color:var(--fjord)} .sx-nav-tel a{font-family:var(--serif);font-size:17px;letter-spacing:0} .sx-burger{display:none;width:44px;height:44px;margin-left:auto;background:none; border:0;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between} .sx-burger span{display:block;height:2px;background:var(--fjord);border-radius:1px; transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s} .sx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)} .sx-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .sx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)} @media(max-width:767px){ .sx-burger{display:flex} /* § 8.6: full-height Fjord Blue drawer with Snow type. */ .sx-nav{ position:fixed;inset:72px 0 0;background:var(--fjord);margin:0; padding:var(--s6) var(--gutter);transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto; } .sx-nav.sx-open{transform:translateX(0)} .sx-nav ul{flex-direction:column;align-items:flex-start;gap:var(--s4)} .sx-nav a{color:var(--snow);font-size:22px;font-family:var(--serif);letter-spacing:0} .sx-nav a[aria-current="page"]{border-bottom-color:var(--ochre)} .sx-nav-tel a{font-size:26px} } /* staff pages get a strip and a Lock, not the public nav */ .sx-hdr-staff{background:var(--fjord);border-bottom:0} .sx-hdr-staff .sx-brand{color:var(--snow)} .sx-lockbtn{ margin-left:auto;background:transparent;color:var(--snow); border:1px solid rgba(246,245,242,.4);border-radius:99px; font-family:var(--sans);font-size:12px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;padding:10px 20px;min-height:44px;cursor:pointer; } .sx-lockbtn:hover{background:rgba(246,245,242,.1)} /* ---------- bands -------------------------------------------------------- */ /* The alternating rhythm is the layout. § 7.1 calls the banded architecture the layout system; § 7.3 sets band padding at 96px desktop, 48px mobile. */ .sx-band{padding:var(--s6) 0} @media(min-width:768px){.sx-band{padding:var(--s12) 0}} .sx-band + .sx-band{border-top:1px solid var(--fjord-20)} /* A dark band carries one sentence. Nothing else goes in it — no card, no CTA, no second heading. It is the page breathing. */ .sx-band-dark{background:var(--fjord);color:var(--snow);border-top:0!important} .sx-band-dark + .sx-band{border-top:0} .sx-say{ font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(24px,4vw,34px);line-height:1.4;color:var(--snow); max-width:24ch;letter-spacing:-.005em; } .sx-say-sm{max-width:34ch;font-size:clamp(21px,3vw,28px)} /* ---------- the rail: the signature -------------------------------------- */ /* One dot per band in the outer margin; the band you are in is lit ochre. § 3.1 reads the mark's ochre centre as "the hearth, the light in the house", and § 7.1 keeps the boards' habit of setting small labels in the outer margin. This is those two things doing the job of a section nav. Below 1100px there is no outer margin, so it goes away entirely. */ .sx-rail{display:none} @media(min-width:1100px){ .sx-rail{ display:block;position:fixed;left:24px;top:50%;transform:translateY(-50%); z-index:20; } .sx-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .sx-rail a{ display:block;width:20px;height:20px;position:relative; text-decoration:none;border-radius:50%; } .sx-rail a::after{ content:"";position:absolute;left:7px;top:7px;width:6px;height:6px; border-radius:50%;background:var(--mist); transition:background .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1); } .sx-rail a:hover::after{background:var(--fjord-60);transform:scale(1.3)} .sx-rail a[aria-current="true"]::after{background:var(--ochre);transform:scale(1.5)} .sx-rail .sx-rail-lbl{ position:absolute;left:28px;top:50%;transform:translateY(-50%); white-space:nowrap;font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.14em;color:var(--fjord-75);opacity:0;pointer-events:none; transition:opacity .2s; } .sx-rail a:hover .sx-rail-lbl,.sx-rail a:focus-visible .sx-rail-lbl{opacity:1} /* over a dark band the dots need to read against Fjord */ .sx-rail.sx-on-dark a::after{background:rgba(246,245,242,.45)} .sx-rail.sx-on-dark a[aria-current="true"]::after{background:var(--ochre)} } /* ---------- hero --------------------------------------------------------- */ .sx-hero{position:relative;background:var(--fjord-deep);color:var(--snow);overflow:hidden} .sx-brand-name{color:var(--fjord)} .sx-hdr-staff .sx-brand-name{color:var(--snow)} .sx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* § 6.4: Fjord Blue overlay 45-65%, or a gradient across the type area. Verified at the type position, not the image average. */ .sx-hero::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to right,rgba(31,62,90,.88) 0%,rgba(31,62,90,.72) 45%,rgba(31,62,90,.42) 100%); } .sx-hero-in{position:relative;z-index:2;padding:var(--s8) 0 var(--s6)} @media(min-width:768px){.sx-hero-in{padding:var(--s12) 0}} .sx-hero h1{color:var(--snow);max-width:16ch} .sx-hero .sx-eyebrow{color:var(--mist)} .sx-hero .sx-lede{color:rgba(246,245,242,.92);max-width:44ch} .sx-hero .sx-p{color:rgba(246,245,242,.86)} /* ---------- buttons: § 8.2 ----------------------------------------------- */ /* Pill for the primary web CTA, matching the source board. § 8.2 says pick one and hold it site-wide; this is that pick. */ .sx-cta{ display:inline-flex;align-items:center;justify-content:center; background:var(--fjord);color:var(--snow);border:1.5px solid var(--fjord); font-family:var(--sans);font-size:15px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;line-height:1;text-decoration:none;cursor:pointer; padding:15px 28px;min-height:48px;border-radius:99px; margin:var(--s3) var(--s1) 0 0; transition:background .2s cubic-bezier(.4,0,.2,1); } .sx-cta:hover{background:var(--fjord-hover);border-color:var(--fjord-hover)} .sx-cta:active{background:var(--fjord-deep)} .sx-ghost{background:transparent;color:var(--fjord);border-color:var(--fjord-20)} .sx-ghost:hover{background:var(--fjord-08);border-color:var(--fjord-60)} /* § 8.2 on-dark: Snow fill, Fjord text. */ .sx-hero .sx-cta,.sx-band-dark .sx-cta{background:var(--snow);color:var(--fjord);border-color:var(--snow)} .sx-hero .sx-cta:hover,.sx-band-dark .sx-cta:hover{background:#fff;border-color:#fff} .sx-hero .sx-ghost,.sx-band-dark .sx-ghost{ background:transparent;color:var(--snow);border-color:rgba(246,245,242,.5)} .sx-hero .sx-ghost:hover{background:rgba(246,245,242,.12);border-color:var(--snow)} .sx-alt{ display:inline-block;background:none;border:0;padding:0;cursor:pointer; font-family:var(--sans);font-size:16px;font-weight:600;color:var(--pine); text-decoration:underline;text-underline-offset:4px;margin-top:var(--s3); } .sx-alt:hover{color:var(--fjord)} .sx-tel{font-family:var(--serif);font-size:clamp(26px,4vw,32px);font-weight:500; color:var(--fjord);text-decoration:none;display:inline-block;margin-top:var(--s1)} .sx-tel:hover{color:var(--pine)} .sx-band-dark .sx-tel,.sx-hero .sx-tel{color:var(--snow)} /* ---------- facts: § 8.5 tables and figure blocks ------------------------ */ .sx-facts{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s4) 0 0;padding:0;list-style:none} .sx-fact{ flex:1 1 160px;min-width:0;background:var(--surface); border:1px solid var(--fjord-20);border-radius:var(--r);padding:var(--s3);margin:0; } .sx-fact b{display:block;font-family:var(--serif);font-size:26px;font-weight:500; line-height:1.1;font-variant-numeric:tabular-nums} .sx-fact span{display:block;font-size:13px;color:var(--fjord-75);margin-top:6px;line-height:1.35} .sx-hero .sx-fact{background:rgba(246,245,242,.08);border-color:rgba(246,245,242,.22)} .sx-hero .sx-fact b{color:var(--snow)} .sx-hero .sx-fact span{color:rgba(246,245,242,.75)} /* ---------- panels, steps, notes ----------------------------------------- */ .sx-two{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;padding:0;list-style:none} .sx-panel{ flex:1 1 300px;min-width:0;margin:0;padding:var(--s4); background:var(--surface);border:1px solid var(--fjord-20);border-radius:var(--r); } .sx-panel h3{margin:0 0 var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--fjord-20)} .sx-panel ul{margin:0;padding:0 0 0 20px;color:var(--fjord-90);font-size:16px;line-height:1.55} .sx-panel li{margin:0 0 10px} .sx-panel li:last-child{margin:0} /* Numbering appears here because getting in IS a sequence — the order carries information the reader needs. It is not used anywhere the order is arbitrary. */ .sx-steps{margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:step} .sx-steps li{ counter-increment:step;display:flex;gap:var(--s3); padding:var(--s3) 0;border-top:1px solid var(--fjord-20);margin:0; max-width:var(--measure); } .sx-steps li::before{ content:counter(step);font-family:var(--serif);font-size:21px;font-weight:500; color:var(--pine);flex:0 0 28px;line-height:1.3;font-variant-numeric:tabular-nums; } .sx-steps b{display:block;margin-bottom:4px} .sx-steps span{color:var(--fjord-90);font-size:16px} .sx-note{ background:var(--fjord-08);border-left:3px solid var(--mist);border-radius:0 var(--r) var(--r) 0; padding:var(--s3);margin:var(--s4) 0 0;max-width:var(--measure); font-size:16px;line-height:1.6;color:var(--fjord-90); } .sx-note b{color:var(--fjord)} .sx-note p + p{margin-top:12px} .sx-banner{border-left:3px solid var(--warning);background:#FBF6EC; padding:var(--s3);margin:0 0 var(--s4);border-radius:0 var(--r) var(--r) 0;font-size:16px} .sx-banner p{margin:0} .sx-banner p + p{margin-top:8px} .sx-card{background:var(--surface);border:1px solid var(--fjord-20); border-radius:var(--r);padding:var(--s4);margin-top:var(--s4)} /* ---------- tables: § 8.5 ------------------------------------------------ */ .sx-tw{overflow-x:auto;margin:var(--s3) 0;-webkit-overflow-scrolling:touch} .sx-tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;background:var(--surface)} .sx-tw th{ text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--fjord);font-weight:600;padding:14px 16px;background:var(--fjord-08); border-bottom:1px solid var(--fjord-20); } .sx-tw td{padding:14px 16px;border-bottom:1px solid var(--fjord-08); color:var(--fjord-90);vertical-align:top;min-height:44px} .sx-tw tr:last-child td{border-bottom:0} /* ---------- staff launcher list ------------------------------------------ */ .sx-grp{margin-top:var(--s6)} .sx-grp > h2{margin-bottom:6px;font-size:clamp(22px,3vw,27px)} .sx-grp .sx-sub{font-size:14px;color:var(--fjord-75);margin:0 0 var(--s2);max-width:var(--measure)} .sx-list{ margin:0;padding:0;list-style:none;background:var(--surface); border:1px solid var(--fjord-20);border-radius:var(--r);overflow:hidden; } .sx-list li{margin:0;border-top:1px solid var(--fjord-08)} .sx-list li:first-child{border-top:0} .sx-list a{display:flex;align-items:center;gap:var(--s2);padding:16px; text-decoration:none;color:var(--text);min-height:60px} .sx-list a:hover{background:var(--fjord-08)} .sx-list a:active{background:var(--pine-08)} .sx-txt{flex:1 1 auto;min-width:0} .sx-txt b{display:block;font-weight:600;font-size:16px;line-height:1.3} .sx-txt span{display:block;font-size:13.5px;color:var(--fjord-75);line-height:1.4;margin-top:3px} .sx-go{flex:0 0 auto;color:var(--fjord-60);font-size:20px;line-height:1} /* Emergency block reads differently on sight, not by colour alone — it also carries a heavier left rule and larger targets. */ .sx-urgent{border-color:var(--error)} .sx-urgent li{border-top-color:rgba(155,74,63,.2)} .sx-urgent a{min-height:68px} .sx-urgent .sx-txt b{color:var(--error)} .sx-call{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px} .sx-call li{flex:1 1 200px;margin:0} .sx-call a{ display:flex;flex-direction:column;gap:4px;padding:16px;min-height:76px; justify-content:center;background:var(--surface);border:1px solid var(--fjord-20); border-radius:var(--r);text-decoration:none;color:var(--text); } .sx-call a:hover{background:var(--fjord-08)} .sx-call b{font-size:13px;text-transform:uppercase;letter-spacing:.1em; font-weight:600;color:var(--fjord-75)} .sx-call span{font-family:var(--serif);font-size:22px;font-weight:500} .sx-tip{background:var(--pine-08);border-radius:var(--r);padding:var(--s3); margin-top:var(--s4);font-size:15px;line-height:1.6;color:var(--fjord-90)} .sx-tip b{color:var(--fjord)} /* ---------- documents ---------------------------------------------------- */ .sx-doc{padding:var(--s6) 0 var(--s8)} .sx-doc-hd{max-width:var(--measure);margin-bottom:var(--s6); padding-bottom:var(--s4);border-bottom:1px solid var(--fjord-20)} .sx-toc{ background:var(--fjord-08);border-radius:var(--r);padding:var(--s3); margin-bottom:var(--s6);max-width:var(--measure); } .sx-toc p{font-size:12px;text-transform:uppercase;letter-spacing:.14em; font-weight:600;color:var(--fjord-75);margin:0 0 12px} .sx-toc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:var(--s4)} .sx-toc li{margin:0 0 8px;break-inside:avoid;font-size:15px} @media(max-width:600px){.sx-toc ul{columns:1}} /* § 5.6: governing documents must look like documents — precise, numbered, scannable — not like brochures. */ .sx-prose{max-width:72ch;color:var(--fjord-90);font-size:16.5px;line-height:1.7} .sx-prose h2{font-size:clamp(23px,3vw,28px);margin:var(--s6) 0 var(--s2); padding-top:var(--s3);border-top:1px solid var(--fjord-20);color:var(--fjord)} .sx-prose h3{font-size:20px;margin:var(--s4) 0 var(--s1);color:var(--fjord)} .sx-prose h4,.sx-prose h5,.sx-prose h6{font-size:16px;margin:var(--s3) 0 var(--s1); color:var(--fjord);font-weight:600} .sx-prose p{margin:0 0 var(--s2)} .sx-prose ul,.sx-prose ol{margin:0 0 var(--s2);padding-left:24px} .sx-prose li{margin-bottom:8px} .sx-prose strong,.sx-prose b{color:var(--fjord);font-weight:600} .sx-prose hr{border:0;border-top:1px solid var(--fjord-20);margin:var(--s6) 0} .sx-prose code{font-family:ui-monospace,'IBM Plex Mono',Menlo,monospace;font-size:.9em; background:var(--fjord-08);padding:2px 5px;border-radius:3px} /* Form blanks and boxes. The markdown writes blanks as runs of underscores and boxes as ☐; the build turns them into these spans (docs.normalise). Widths follow the underscore count loosely: short / medium / long. */ .sx-fill{display:inline-block;vertical-align:baseline;height:1em; border-bottom:1px solid var(--fjord-60);margin:0 .15em} .sx-fill-s{width:5em}.sx-fill-m{width:11em}.sx-fill-l{width:min(22em,100%)} .sx-box{display:inline-block;width:.85em;height:.85em;vertical-align:-.08em; border:1.5px solid var(--fjord);border-radius:2px;margin:0 .2em 0 0} .sx-standalone{margin:-6px 0 var(--s3);font-size:14px} .sx-standalone a{color:var(--pine)} .sx-doc-actions{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--fjord-20); display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center} .sx-doc-actions .sx-alt{margin-top:0} .sx-doc-actions a{font-size:14px;color:var(--fjord-75)} /* ---------- the gate ----------------------------------------------------- */ /* The gated form pages load form.css after this file, and form.css is theme-aware: under prefers-color-scheme:dark its --ink flips to near-white and body carries that colour. This sheet has no dark mode, so .sx-gate kept painting a fixed light --bg while the h1 inherited that near-white ink — 1.05:1, invisible. Every other element in the card sets its own colour, so the heading was the only casualty. Pin the colour here: the gate must not depend on which other stylesheet happens to be on the page. */ .sx-gate{min-height:calc(100vh - 72px);display:flex;align-items:center; justify-content:center;padding:var(--s6) var(--gutter); background:var(--bg);color:var(--text)} .sx-gate-card{width:100%;max-width:420px;text-align:center} .sx-gate-card img{margin:0 auto var(--s3)} .sx-gate-card h1{font-size:clamp(28px,5vw,36px)} .sx-gate-lede{color:var(--fjord-75);font-size:16px;line-height:1.6; margin:var(--s2) 0 var(--s6);text-align:left} .sx-gate form{text-align:left} .sx-gate label{display:block;font-size:14px;font-weight:500;color:var(--fjord); margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em} /* § 8.4: never below 16px — smaller triggers zoom on iOS. */ .sx-gate input{ width:100%;font-family:var(--sans);font-size:19px;letter-spacing:.35em; padding:14px 16px;border:1px solid var(--border);border-radius:var(--r); background:var(--surface);color:var(--fjord);min-height:52px; } .sx-gate input:focus{border-color:var(--fjord);outline:2px solid var(--ochre);outline-offset:2px} .sx-gate .sx-cta{width:100%;margin:var(--s3) 0 0} .sx-gate-note{ margin:12px 0 0;font-size:15px;color:var(--error);font-weight:500; display:flex;gap:8px;align-items:flex-start; } /* § 4.3: never signal state by colour alone. */ .sx-gate-note::before{content:"!";flex:0 0 20px;height:20px;line-height:20px; text-align:center;border-radius:50%;background:var(--error);color:#fff; font-size:13px;font-weight:700} .sx-gate-wait{font-size:13px;color:var(--fjord-75);margin:var(--s2) 0 0;text-align:center} .sx-busy .sx-cta{opacity:.6;pointer-events:none} .sx-busy .sx-cta::after{content:" …"} /* ---------- footer: § 7.4 dark band closes the page ---------------------- */ .sx-foot{background:var(--fjord-deep);color:rgba(246,245,242,.72); padding:var(--s8) 0 var(--s6);font-size:14px;line-height:1.65;margin-top:0} .sx-foot p{margin:0 0 var(--s2);max-width:78ch} .sx-foot a{color:var(--snow)} .sx-foot-top{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between; align-items:baseline;padding-bottom:var(--s3);margin-bottom:var(--s4); border-bottom:1px solid rgba(169,187,200,.25)} .sx-foot-name{font-family:var(--serif);font-size:20px;color:var(--snow);margin:0} .sx-foot-tag{font-size:12px;text-transform:uppercase;letter-spacing:.22em; color:var(--mist);margin:0} .sx-foot-legal{font-size:13px;color:var(--fjord-60);margin-top:var(--s4)} .sx-foot-staff{background:var(--fjord-deep);padding:var(--s6) 0} /* ---------- motion: § 8.8 ------------------------------------------------ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .sx-nav{transition:none} } /* ---------- print: documents must print like documents ------------------- */ @media print{ .sx-hdr,.sx-rail,.sx-foot,.sx-doc-actions,.sx-standalone,.sx-toc,.sx-skip,.sx-lockbtn{display:none!important} body{background:#fff;font-size:10.5pt;line-height:1.5;color:#1A1A1A} .sx-doc{padding:0} .sx-w{max-width:none;padding:0} .sx-prose{max-width:none;font-size:10.5pt} .sx-prose h2{break-after:avoid;page-break-after:avoid} .sx-prose h3,.sx-prose h4{break-after:avoid;page-break-after:avoid} .sx-prose p,.sx-prose li{orphans:3;widows:3} .sx-tw{overflow:visible} .sx-tw table{min-width:0;break-inside:auto} .sx-tw tr{break-inside:avoid} .sx-banner{border-left:3px solid #B08442;background:#fff} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555} } /* ---------- utilities ---------------------------------------------------- These exist because the Content Security Policy carries no 'unsafe-inline', which blocks style="" attributes in markup as well as