/* ========================================================================== site-2026.css — Sound Injury & Electrodiagnostics The 2026 design layer. Loads AFTER shared.css and overrides nothing in it: every selector is namespaced .si-* so the two files cannot collide. Load order on every page: Two type voices: Inter (from shared.css) practical copy, navigation, addresses, buttons Literata (.si-teach) anything that explains Fonts required in : ========================================================================== */ /* ========================================================================== index.html. Page-specific styles. Shared styles live in shared.css. Everything here is namespaced .si-* so it cannot collide with shared.css. TWO VOICES ---------- Inter (from shared.css) = the guiding voice. Anything practical: navigation, buttons, addresses, insurance, logistics. Literata (.si-teach) = the teaching voice. Anything that explains. The register change should be audible when you read down the page. ========================================================================== */ :root{ --si-teach: "Literata", Georgia, serif; --si-gut: clamp(20px, 5vw, 56px); /* Section tint. Drives the services section and the referring-provider quote cards. Change this one value to swap both. The sage sits at 94.7% lightness, so there are only about five points of headroom before it is white. Each step below is 20% of that remaining gap, which makes them small moves by nature. #EFF4F2 sage, as it was #F2F6F5 20% brighter <- current #F5F8F7 40% brighter #F9FBFA 60% brighter If you wanted it livelier rather than lighter, keep the lightness and add colour instead: #EBF5F1 or #E6F4EE. */ --si-warm: #F2F6F5; } /* ========================================================================== CONDITION PILLS, HOVER PREVIEW Every card appears in the same fixed spot above the row rather than beside whichever pill is hovered: the eye learns one location, and a pill at the right-hand edge cannot push a card off screen. Anchored to .si-conds, so the list items must stay position:static. Progressive enhancement only, gated behind a real hover pointer. ========================================================================== */ .si-condcard{ display:none; } @media (hover:hover) and (pointer:fine){ .si-condcard{ display:block; position:absolute; z-index:9; left:0; bottom:calc(100% + 14px); width:min(340px, 88vw); background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 18px 46px rgba(0,45,79,.22); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .si-condcard img{ display:block; width:100%; height:168px; object-fit:cover; } .si-condcard__b{ display:block; padding:15px 17px 17px; } .si-condcard__b b{ display:block; font-family:var(--si-teach); font-size:1.02rem; color:var(--ink); line-height:1.3; margin:0 0 7px; } .si-condcard__b span{ display:block; font-size:.88rem; line-height:1.55; color:var(--muted); } .si-conds li:hover .si-condcard, .si-conds a:focus-visible + .si-condcard{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ .si-condcard{ transition:none; } .si-conds li:hover .si-condcard, .si-conds a:focus-visible + .si-condcard{ transform:none; } } /* ========================================================================== QUOTED TESTIMONY A quote loose in a section reads as more of the surrounding prose. This makes it an object: white card, real shadow, and a quotation-mark watermark so the eye knows what it is before reading a word. White rather than a tint, because the sections these sit in are already tinted, and white is the only value that reads as lifted off rather than as another wash. ========================================================================== */ .si-corro{ position:relative; overflow:hidden; margin:28px 0 0; max-width:62ch; padding:24px 28px 22px; background:#ffffff; border:1px solid rgba(0,45,79,.10); border-radius:14px; box-shadow:0 10px 30px rgba(0,45,79,.11), 0 2px 6px rgba(0,45,79,.05); } .si-corro::before{ content:"\201C"; position:absolute; top:-6px; right:16px; font-family:var(--si-teach); font-size:5rem; line-height:1; color:var(--brand); opacity:.16; pointer-events:none; } .si-corro__k{ display:block; position:relative; z-index:1; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-dark); margin:0 0 12px; } .si-corro p{ position:relative; z-index:1; font-family:var(--si-teach); font-size:1.03rem; line-height:1.64; color:var(--ink); margin:0 0 15px; } .si-corro cite{ display:block; font-style:normal; font-weight:600; font-size:.9rem; color:var(--ink); padding-top:13px; border-top:1px solid rgba(0,45,79,.10); } .si-corro span:not(.si-corro__k){ display:block; font-size:.82rem; color:var(--muted); line-height:1.45; margin-top:3px; } .si-corro--onDark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.20); box-shadow:none; } .si-corro--onDark::before{ color:var(--stone-light); opacity:.22; } .si-corro--onDark .si-corro__k{ color:var(--stone-light); } .si-corro--onDark p{ color:#E3ECF1; } .si-corro--onDark cite{ color:#fff; border-top-color:rgba(255,255,255,.20); } .si-corro--onDark span:not(.si-corro__k){ color:#9EB6C2; } /* Three case narratives. Dedicated classes throughout: nothing here relies on resetting a browser default or overriding .si-qattr, so a stale cache or a load-order change cannot strand the attribution away from its quote. Spacing is proximity. The name sits 16px under its own quote and roughly 70px above the next one, so it can only read as belonging to the quote above it. Rules separate cases; they never fall inside one. */ .si-cases{ margin-top:48px; border-top:1px solid var(--line); } .si-case{ margin:0; padding:34px 0 36px; border-bottom:1px solid var(--line); } .si-case__k{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand-dark); margin:0 0 15px; } .si-case__q{ margin:0; padding:0; border:0; } .si-case__q p{ font-family:var(--si-teach); font-size:clamp(1.04rem, 1rem + .25vw, 1.16rem); line-height:1.68; color:var(--ink); margin:0; max-width:66ch; } .si-case__by{ margin:16px 0 0; padding:0; border:0; } .si-case__by cite{ display:block; font-style:normal; font-weight:600; font-size:.97rem; color:var(--ink); } .si-case__by span{ display:block; font-size:.85rem; color:var(--muted); line-height:1.45; margin-top:2px; } .si-raillabel{ margin:42px 0 0; } /* ---------- shared type roles ---------------------------------------- */ .si-teach{ font-family: var(--si-teach); } .si-carved{ font-family: var(--si-teach); font-style: italic; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); color: var(--brand-dark); letter-spacing: .01em; margin: 0 0 18px; line-height: 1.4; } .si-carved--onDark{ color: var(--stone-light); } .si-label{ font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 6px; } .si-label--onDark{ color: var(--stone-light); } .si-lede{ font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem); line-height: 1.62; color: var(--muted); max-width: 40rem; } .si-read{ max-width: 36rem; } /* ---------- buttons --------------------------------------------------- */ .si-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .si-btn{ display:inline-flex; align-items:center; justify-content:center; font-family: 'Inter', sans-serif; font-weight:600; font-size:1rem; padding:16px 28px; min-height:56px; border-radius:8px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; } .si-btn--fill{ background:var(--brand); color:#fff; border-color:var(--brand); } .si-btn--fill:hover{ background:var(--brand-dark); border-color:var(--brand-dark); } .si-btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); } .si-btn--line:hover{ background:var(--ink); color:#fff; } .si-btn--lineLight{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); } .si-btn--lineLight:hover{ background:#fff; color:var(--ink); } /* ---------- announcement --------------------------------------------- */ .si-announce{ background:var(--ink); color:#DCE7EE; font-size:.98rem; line-height:1.55; } .si-announce .container{ padding-top:14px; padding-bottom:14px; } .si-announce b{ color:var(--stone-light); } .si-announce a{ color:#fff; } /* Cairn wayfinder. Same stone paths as the logo; passed stones solid, stones ahead at 15%. Static by design. */ .si-marker{ display:flex; align-items:flex-end; gap:16px; margin:0 0 26px; } .si-cairn{ width:38px; height:auto; flex:none; } .si-cairn--onDark .si-stone{ fill:var(--stone-light); } .si-cairn--onDark .si-ahead{ opacity:.22; } .si-cairn .si-stone{ transition:none; } .si-cairn .si-ahead{ opacity:.15; } .si-marker__t{ padding-bottom:2px; } /* ---------- sections -------------------------------------------------- */ .si-sec{ padding: clamp(56px, 8vw, 104px) 0; } .si-lead + .si-sec{ padding-top:clamp(38px, 4.5vw, 60px); } .si-sec--tint{ background:var(--soft-blue); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .si-sec--warm{ background:var(--si-warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .si-sec--sand{ background:linear-gradient(180deg,#F2E8D3 0%,#F6F0E2 58%,#FBF8F2 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .si-sec--deep{ background:var(--ink); color:#E3ECF1; } .si-sec--deep h2, .si-sec--deep h3{ color:#fff; } .si-sec--deep .si-lede{ color:#C2D4E0; } .si-two--narrow{ grid-template-columns:.92fr 1.08fr; } @media (max-width:880px){ .si-two--narrow{ grid-template-columns:1fr; } } .si-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; } @media (max-width:880px){ .si-two{ grid-template-columns:1fr; } } .si-hero{ background: linear-gradient(178deg, #F4F9FC 0%, #EAF3F7 55%, #ffffff 100%); padding: clamp(40px, 6vw, 76px) 0 clamp(36px, 5vw, 64px); } @media (max-width:900px){ } .si-hero h1{ font-size: clamp(2rem, 1.35rem + 2.6vw, 3.35rem); line-height:1.13; margin:0 0 20px; max-width:19ch; } /* Hero. Frame capped in width so the full frame survives on wide screens; height driven by width. Explicit height + object-fit, not aspect-ratio. */ /* shared.css sets `section { padding: 80px 0 }` globally. Full-bleed sections must opt out. */ .si-herokite{ position:relative; overflow:hidden; padding:0; background:linear-gradient(180deg,#D8E8F2 0%,#E7F1F7 100%); } /* the frame owns the height; the image just fills it */ .si-herokite__frame{ position:relative; width:100%; max-width:1600px; margin:0 auto; overflow:hidden; height:clamp(200px, 45vw, 700px); background:#CFE2F0; } .si-herokite__frame img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:50% 85%; display:block; } .si-herokite__wash{ display:none; } .si-herokite__copy{ padding:clamp(24px,4vw,40px) 0 clamp(14px,2vw,24px); } .si-herokite h1{ font-size:clamp(1.8rem, 1.1rem + 2.1vw, 2.55rem); line-height:1.14; margin:0 0 18px; max-width:20ch; } .si-herokite .si-lede{ font-size:clamp(1rem,.96rem + .26vw,1.14rem); max-width:34rem; } .si-herokite .si-cta-row{ margin-top:24px; } /* from 960px the words move into the sky */ @media (min-width:960px){ .si-herokite__wash{ display:block; position:absolute; inset:0; pointer-events:none; background:linear-gradient(97deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 20%, rgba(255,255,255,.60) 36%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 60%); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,0) 94%); mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,0) 94%); } .si-herokite__overlay{ position:absolute; inset:0; display:flex; align-items:center; } .si-herokite__copy{ padding:0; max-width:clamp(28rem, 36vw, 35rem); } } /* very short viewports (landscape phones, small laptops): keep the copy readable */ @media (min-width:960px) and (max-height:680px){ .si-herokite__frame{ height:clamp(300px, 38vw, 480px); } .si-herokite h1{ font-size:clamp(1.6rem, 1rem + 1.6vw, 2.1rem); margin-bottom:14px; } .si-herokite .si-lede{ font-size:1rem; } .si-herokite .si-cta-row{ margin-top:18px; } } /* The strip and the two doors used to sit on white, directly under a white hero edge, directly above a white section: five white blocks in a row, with white cards on them so the card edges vanished. The sky now runs on down through this band and fades to white just before the first stone. */ .si-lead{ background:linear-gradient(180deg,#E7F1F7 0%,#EFF6FA 48%,#F8FBFD 76%,#ffffff 100%); padding:clamp(22px,3vw,34px) 0 clamp(26px,3.5vw,38px); } .si-lead .si-strip, .si-lead .si-door{ box-shadow:0 2px 10px rgba(0,45,79,.05); } /* ---------- the fast lane -------------------------------------------- */ .si-strip{ margin-top: clamp(28px, 4vw, 44px); background:#fff; border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; } @media (max-width:820px){ .si-strip{ grid-template-columns:1fr 1fr; } } @media (max-width:430px){ .si-strip{ grid-template-columns:1fr; } } .si-strip__i{ padding:18px 20px; border-right:1px solid var(--line); } .si-strip__i:last-child{ border-right:none; } @media (max-width:820px){ .si-strip__i{ border-bottom:1px solid var(--line); } .si-strip__i:nth-child(2n){ border-right:none; } .si-strip__i:nth-last-child(-n+2){ border-bottom:none; } } @media (max-width:430px){ .si-strip__i{ border-right:none; border-bottom:1px solid var(--line); } .si-strip__i:last-child{ border-bottom:none; } } .si-strip__k{ font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; } .si-strip__v{ font-size:1.02rem; font-weight:600; color:var(--ink); margin:0; line-height:1.35; } /* ---------- the two doors -------------------------------------------- */ .si-doors{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; } @media (max-width:760px){ .si-doors{ grid-template-columns:1fr; } } .si-door{ display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:12px; padding:24px 26px 26px; transition:border-left-color .16s ease, box-shadow .16s ease; } .si-door:hover{ border-left-color:var(--ink); box-shadow:0 10px 26px rgba(0,45,79,.09); } .si-door__k{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } .si-door__t{ display:block; font-family:var(--si-teach); font-size:1.4rem; font-weight:600; color:var(--ink); margin:10px 0 8px; line-height:1.25; } .si-door__d{ font-size:.97rem; line-height:1.55; color:var(--muted); margin:0; } .si-door__go{ display:inline-block; margin-top:14px; font-weight:600; color:var(--brand-dark); } /* ========================================================================== STALLED RECOVERY, four items Previously the diagrams sat in a left column and the four paragraphs that explained them sat in a right column, so the section said everything twice and nothing connected circle three to paragraph three. Now each diagram sits directly above its own line. The paragraph is one piece of content shown two ways, never duplicated in the markup: inline underneath on touch, and a card on hover where there is a real pointer. That keeps the desktop row short without hiding anything from a phone. ========================================================================== */ .si-stalled{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; margin-top:44px; } @media (max-width:1000px){ .si-stalled{ grid-template-columns:repeat(2,1fr); gap:34px 28px; } } @media (max-width:620px){ .si-stalled{ grid-template-columns:1fr; gap:32px; } } .si-stall{ position:relative; margin:0; text-align:center; } .si-ring{ position:relative; display:block; margin:0 auto 16px; overflow:hidden; width:clamp(150px,13vw,190px); height:clamp(150px,13vw,190px); border:1.5px solid var(--ink); border-radius:50%; } .si-ring img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; } .si-stall__t{ display:block; font-family:var(--si-teach); font-size:1.02rem; line-height:1.42; color:var(--ink); margin:0; } .si-stall__d{ display:block; margin-top:10px; font-size:.95rem; line-height:1.6; color:var(--muted); } /* with a real pointer the paragraph becomes a card on hover */ @media (hover:hover) and (pointer:fine){ .si-stall__d{ position:absolute; z-index:8; left:50%; transform:translateX(-50%) translateY(8px); top:calc(100% + 10px); width:min(320px, 116%); margin:0; padding:16px 18px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(0,45,79,.20); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .si-stall:hover .si-stall__d, .si-stall:focus-within .si-stall__d{ opacity:1; transform:translateX(-50%) translateY(0); } .si-stall:hover, .si-stall:focus-within{ z-index:9; } .si-stall__t{ cursor:default; } } @media (prefers-reduced-motion: reduce){ .si-stall__d{ transition:none; } .si-stall:hover .si-stall__d{ transform:translateX(-50%); } } /* A Vision for Dual Recovery. */ .si-vision{ margin-top:26px; background:#EFF6F5; border-left:4px solid var(--brand); border-radius:0 10px 10px 0; padding:22px 26px; } .si-vision h3{ font-family:var(--si-teach); font-size:1.16rem; margin:0 0 8px; color:var(--ink); } .si-vision p{ margin:0; font-size:1rem; line-height:1.68; color:#3C566E; max-width:58ch; } /* Conditions row: six links, two lines, no cards. */ .si-conds{ position:relative; margin-top:32px; padding-top:26px; border-top:1px solid var(--line); } .si-conds__k{ font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; } .si-conds ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .si-conds a{ display:inline-block; text-decoration:none; font-size:.95rem; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:99px; padding:9px 18px; transition:border-color .15s ease, color .15s ease; } .si-conds a:hover{ border-color:var(--brand); color:var(--brand-dark); } .si-figure{ margin:0; } .si-figure img{ width:100%; height:auto; display:block; border-radius:12px; } .si-figure figcaption{ font-family:var(--si-teach); font-style:italic; font-size:.92rem; color:var(--muted); margin-top:12px; line-height:1.5; } .si-teachbox{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; max-width:38rem; } .si-teachbox p{ font-family:var(--si-teach); font-size:clamp(1.06rem,1rem + .35vw,1.22rem); line-height:1.72; color:#28455C; max-width:36rem; margin:0 0 1.05em; } .si-teachbox p a{ color:var(--brand-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .si-teachbox p:first-of-type{ font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem); } .si-more{ display:inline-block; margin-top:6px; font-weight:600; font-size:1.02rem; color:var(--brand-dark); text-decoration:none; border-bottom:2px solid var(--brand); padding-bottom:3px; } .si-more:hover{ color:var(--ink); border-bottom-color:var(--ink); } .si-aside{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:.98rem; color:var(--muted); max-width:56ch; line-height:1.6; } /* ---------- the three numbers ---------------------------------------- */ .si-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px); margin-top:34px; } @media (max-width:760px){ .si-stats{ grid-template-columns:1fr; gap:28px; } } .si-stat__n{ font-family:var(--si-teach); font-weight:400; font-size:clamp(2.4rem,1.6rem + 2.4vw,3.3rem); line-height:1; color:var(--ink); letter-spacing:-.02em; } .si-stat__n span{ font-size:.36em; color:var(--brand-dark); margin-left:5px; letter-spacing:0; } .si-stat__l{ font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:14px 0 8px; } .si-stat__d{ font-size:1rem; line-height:1.58; color:var(--muted); margin:0; } .si-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; align-items:stretch; } @media (max-width:940px){ .si-grid3{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ .si-grid3{ grid-template-columns:1fr; } } .si-svc{ display:flex; flex-direction:column; height:100%; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:box-shadow .16s ease, transform .16s ease; } .si-svc:hover{ box-shadow:0 12px 30px rgba(0,45,79,.12); transform:translateY(-2px); } /* padding-top box: fixed 16:10 window, any source image */ .si-svc__ph{ display:block; position:relative; width:100%; padding-top:62.5%; overflow:hidden; background:var(--soft-blue); } .si-svc__ph img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; } .si-svc__b{ display:block; padding:20px 22px 24px; flex:1 1 auto; } .si-svc__t{ display:block; font-family:var(--si-teach); font-size:1.16rem; font-weight:600; color:var(--ink); margin:0 0 7px; line-height:1.3; } .si-svc__d{ display:block; font-size:.95rem; line-height:1.55; color:var(--muted); margin:0; } .si-svc__go{ display:block; margin-top:12px; font-size:.9rem; font-weight:600; color:var(--brand-dark); } /* Hover preview on the text rows. Progressive enhancement only: gated behind (hover:hover) and (pointer:fine), so touch devices never render it and never get a stuck state. Keyboard users get the same reveal on focus. */ .si-plainrow .si-preview{ display:none; } @media (hover:hover) and (pointer:fine){ .si-plainrow .si-preview{ display:block; position:absolute; z-index:6; left:26px; bottom:calc(100% - 20px); width:238px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--soft-blue); box-shadow:0 18px 44px rgba(0,45,79,.24); opacity:0; transform:translateY(10px) scale(.97); transition:opacity .18s ease, transform .18s ease; pointer-events:none; } .si-plainrow .si-preview img{ display:block; width:100%; height:150px; object-fit:cover; } .si-plainrow:hover, .si-plainrow:focus-visible{ z-index:7; } .si-plainrow:hover .si-preview, .si-plainrow:focus-visible .si-preview{ opacity:1; transform:translateY(0) scale(1); } /* last column would run off the right edge */ .si-plain--four .si-plainrow:last-child .si-preview{ left:auto; right:26px; } } @media (prefers-reduced-motion: reduce){ .si-preview{ transition:none; transform:none; } .si-plainrow:hover .si-preview, .si-plainrow:focus-visible .si-preview{ transform:none; } } .si-plain{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:26px; border-top:1px solid var(--line); } .si-plain--four{ grid-template-columns:repeat(4,1fr); } @media (max-width:1040px){ .si-plain--four{ grid-template-columns:repeat(2,1fr); } .si-plain--four .si-plainrow:nth-child(2n){ border-right:none; } } @media (max-width:760px){ .si-plain, .si-plain--four{ grid-template-columns:1fr; } } .si-plainrow{ display:block; text-decoration:none; padding:24px 26px 26px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); transition:background .16s ease; } .si-plainrow:last-child{ border-right:none; } @media (max-width:760px){ .si-plainrow{ border-right:none; } } .si-plainrow:hover{ background:var(--soft-blue); } .si-plainrow h3{ font-family:var(--si-teach); font-size:1.1rem; font-weight:600; color:var(--ink); margin:0 0 6px; } .si-plainrow p{ font-size:.93rem; line-height:1.55; color:var(--muted); margin:0; } /* Was `.si-plainrow span`, which also matched .si-preview (a span) and overrode its display:none, so the preview rendered in flow at the image's natural width and pushed the page wider than the viewport. Scoped now. */ .si-plainrow .si-go{ display:block; margin-top:10px; font-size:.88rem; font-weight:600; color:var(--brand-dark); } /* ---------- the hour -------------------------------------------------- */ .si-visit{ list-style:none; margin:30px 0 0; padding:0; } .si-visit li{ display:grid; grid-template-columns:76px 1fr; gap:22px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.15); } .si-visit li:first-child{ border-top:1px solid rgba(255,255,255,.15); } @media (max-width:540px){ .si-visit li{ grid-template-columns:58px 1fr; gap:14px; } } .si-visit__t{ font-size:.92rem; font-weight:600; color:var(--stone-light); padding-top:5px; } .si-visit__b h3{ font-size:1.16rem; margin:0 0 5px; } .si-visit__b p{ margin:0; font-size:1rem; line-height:1.6; color:#C2D4E0; max-width:50ch; } /* ---------- doctor ---------------------------------------------------- */ .si-doc{ display:grid; grid-template-columns:290px 1fr; gap:clamp(26px,4vw,56px); align-items:start; } @media (max-width:820px){ .si-doc{ grid-template-columns:1fr; } } .si-doc img{ width:100%; height:auto; border-radius:12px; display:block; } .si-creds{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; } .si-creds li{ position:relative; padding-left:24px; font-size:1rem; color:var(--muted); } .si-creds li::before{ content:""; position:absolute; left:0; top:.68em; width:12px; height:3px; background:var(--brand); border-radius:2px; } /* Testimonial rail. Mouse drag has inertia; touch is left to native momentum scrolling. Keyboard: arrows, Home, End. */ .si-railwrap{ position:relative; margin-top:34px; } .si-rail{ display:flex; gap:18px; align-items:stretch; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:4px 4px 20px; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--stone-light) transparent; } .si-rail::-webkit-scrollbar{ height:8px; } .si-rail::-webkit-scrollbar-track{ background:transparent; } .si-rail::-webkit-scrollbar-thumb{ background:var(--stone-light); border-radius:99px; } .si-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; } .si-rail.is-dragging *{ user-select:none; } .si-qcard{ flex:0 0 clamp(258px, 76vw, 372px); scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--line); border-left:4px solid; border-radius:12px; padding:24px 26px 22px; margin:0; } /* Two kinds of proof, and they carry different weight depending on who is reading. A chiropractor scans for the clinicians; someone four days after a crash scans for people like themselves. The tag carries the distinction as well as the colour, so it does not depend on colour alone. */ .si-qcard--patient { background:#EFF6F5; border-left-color:var(--brand); } .si-qcard--provider{ background:var(--si-warm); border-left-color:var(--stone-mid); } .si-qtag{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 13px; } .si-qcard--patient .si-qtag{ color:var(--brand-dark); } .si-qcard--provider .si-qtag{ color:var(--stone-mid); } .si-qcard--patient .si-qattr{ border-top-color:rgba(93,155,155,.35); } .si-qcard--provider .si-qattr{ border-top-color:rgba(51,87,114,.24); } .si-qcard blockquote{ margin:0; flex:1 1 auto; } .si-qcard p{ font-family:var(--si-teach); font-size:1.08rem; line-height:1.55; color:var(--ink); margin:0; } /* NOT