/* ========================================================================== home-allwork-work · work.css — LIVE The All Work content area of the homepage first screen. Loaded by index.html through ONE line, with work.js. · the tab row is smaller, so on a wide desktop all EIGHT tabs fit and the row does not slide; on a phone a tab is a third of the row, so three sit whole and the fourth is cut — which is how you can see that it slides; · the content area is one strip of the seven areas, a photograph each, the link under its own picture; on a phone it is a contact sheet of three to a screen that slides on its own and leaves the tab row alone; · no fade, no blur and no chevron over any card. To undo all of it, delete the one line in index.html that loads this folder. ========================================================================== */ /* ========================================================================== home-allwork-five-p7c · five.css — the best five, each a different answer The law all five obey: · a link sits under its own image, inside its own panel, and WRAPS rather than crossing out of it — no link can reach another panel's link; · a desktop shows all eight tabs and all eight panels; nothing slides; · a phone slides the content itself: it starts on Google Ads, snaps panel by panel, the next one always peeks, and the tab row follows it tab for tab; · the All Work place is an open anchor on the sheet, never a card. ========================================================================== */ .cv.fv{ --ff:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; font-family:var(--ff); height:100%; position:relative; } .fv *{ box-sizing:border-box; } .p5-rail{ height:100%; overflow:hidden; } .p5-track{ display:flex; gap:var(--tb-gap, 8px); height:100%; width:max-content; } .p5-c{ position:relative; flex:0 0 var(--tw, 148px); width:var(--tw, 148px); height:100%; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:0 12px; border-radius:10px; cursor:pointer; outline:0; background:#EEF4FC; box-shadow:inset 0 0 0 1px #DDE9F9; transition:background-color .22s ease, box-shadow .22s ease; } .p5-c:hover{ background:#F7FAFE; box-shadow:inset 0 0 0 1px #9DBCE6; } .p5-c:focus-visible{ box-shadow:inset 0 0 0 2px #003F8A; } .p5-body{ display:block; min-width:0; } .p5-cta{ display:block; min-width:0; max-width:100%; min-height:30px; } /* two lines are reserved, so every panel stays level */ .p5-c--all{ background:transparent; box-shadow:none; cursor:default; padding-left:2px; } .p5-c--all:hover{ background:transparent; box-shadow:none; } /* the drawing is only as wide as itself, so its identity chip stays pinned to it */ .p5-art{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:56px; width:max-content; max-width:100%; } .p5-mk{ width:44px; height:44px; display:block; } .p5-art--w .p5-mk{ width:40px; height:40px; } .p5-chip{ position:absolute; right:-9px; bottom:-5px; width:22px; height:22px; } .p5-chip--w{ position:static; display:block; width:52px; height:22px; margin:5px 0 -5px 1px; } .p5-all{ display:grid; grid-template-columns:repeat(4, 12px); gap:4px; } .p5-all i{ width:12px; height:12px; border-radius:3px; background:#FFFFFF; box-shadow:inset 0 0 0 1px #AFC8EC; } .p5-all i:nth-child(n+5){ background:#DCE8FA; } /* the link · inline, so it wraps inside its own panel and can never cross out of it */ .cta{ display:inline; font:650 11.5px/15px var(--ff); color:#0760C6; text-decoration:none; } .cta-end{ white-space:nowrap; } /* the arrow never leaves the last word */ .cta-a{ width:13px; height:13px; margin-left:4px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; } .cta:hover{ color:#004594; } .cta:hover .cta-a{ transform:translateX(2px); } /* NO right-edge fade and no chevron: the peek of the next card is the only "there is more" signal this band needs, and a gradient over the last link reads as a blur. (Removed 2026-09-23 at the user's request.) */ .p5-audit{ display:none; } /* ========================================================================== PHONES · the content is the slider, and it starts on Google Ads ========================================================================== */ @container lane (max-width:700px){ .cv.fv .p5-rail{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .cv.fv .p5-rail::-webkit-scrollbar{ display:none; } .cv.fv .p5-track{ width:max-content; transform:none !important; gap:8px; padding-right:8px; } .cv.fv .p5-c{ flex:0 0 78cqw; width:78cqw; scroll-snap-align:start; padding:0 14px; gap:8px; } .cv.fv .p5-c--all{ display:none; } /* its ask becomes the last panel of the story */ .cv.fv .p5-audit{ display:flex; flex-direction:column; justify-content:center; gap:8px; flex:0 0 78cqw; width:78cqw; scroll-snap-align:start; padding:0 14px; border-radius:10px; background:#DCE8FA; box-shadow:inset 0 0 0 1px #BFD3EF; } .cv.fv .p5-audit .p5-all{ grid-template-columns:repeat(7, 11px); } .cv.fv .p5-audit .cta{ font-size:12.5px; line-height:16px; } .cv.fv .p5-mk{ width:40px; height:40px; } .cv.fv .p5-art{ height:52px; } } /* ---- fv1 · One Sheet ---- */ .fv1 .p5-track{ background:#FFFFFF; border-radius:10px; gap:0; } .fv1 .p5-c{ background:transparent; box-shadow:none; border-radius:0; flex:0 0 calc(var(--tw, 148px) + var(--tb-gap, 8px)); width:calc(var(--tw, 148px) + var(--tb-gap, 8px)); } .fv1 .p5-c + .p5-c::before{ content:""; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:#E3EBF6; } .fv1 .p5-c:hover{ background:#F7FAFE; box-shadow:none; } .fv1 .p5-c--all{ z-index:3; background:linear-gradient(90deg, #C6D9F4 78%, rgba(198,217,244,0)); padding-right:22px; } .fv1 .p5-c--all + .p5-c::before{ display:none; } @container lane (max-width:700px){ .cv.fv1 .p5-track{ background:transparent; gap:8px; } .cv.fv1 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; border-radius:10px; flex:0 0 78cqw; width:78cqw; } .cv.fv1 .p5-c::before{ display:none; } } /* ---- fv2 · What Is Inside ---- */ .fv2 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:0 10px; gap:5px; } .fv2 .p5-c--all{ background:transparent; box-shadow:none; padding-left:2px; } .fv2 .p5-body{ width:100%; } .fv2 .p5-pv{ display:block; width:100%; height:64px; } @container lane (max-width:700px){ .cv.fv2 .p5-pv{ height:74px; } } /* ---- fv3 · Real Photographs ---- */ .fv3 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:9px 9px 0; gap:6px; justify-content:center; } .fv3 .p5-c--all{ background:transparent; box-shadow:none; padding:0 0 0 2px; justify-content:center; } .fv3 .p5-body{ width:100%; } .fv3 .p5-ph{ position:relative; display:block; width:100%; height:74px; border-radius:7px; overflow:hidden; background:#DDE9F9 center 40% / cover no-repeat; } .fv3 .p5-bd{ position:absolute; left:6px; bottom:6px; height:26px; padding:0 5px; border-radius:7px; background:#FFFFFF; display:flex; align-items:center; box-shadow:0 1px 3px rgba(14,30,53,.22); } .fv3 .p5-bd svg{ width:16px; height:16px; } .fv3 .p5-bd--w svg{ width:38px; height:16px; } .fv3 .p5-cta{ padding:0 4px 0; } @container lane (max-width:700px){ .cv.fv3 .p5-ph{ height:76px; } } /* ---- fv4 · Four Fields ---- */ .fv4 .p5-g{ position:relative; flex:0 0 calc(var(--n) * var(--tw, 148px) + (var(--n) - 1) * var(--tb-gap, 8px)); display:flex; align-items:center; gap:10px; padding:17px 12px 0; border-radius:10px; background:#EEF4FC; box-shadow:inset 0 0 0 1px #DDE9F9; } .fv4 .p5-gl{ position:absolute; left:13px; top:9px; font:700 9.5px/12px var(--ff); letter-spacing:.09em; text-transform:uppercase; color:#5B7398; } .fv4 .p5-g .p5-c{ flex:1 1 0; width:auto; background:transparent; box-shadow:none; padding:0; gap:6px; border-radius:6px; } .fv4 .p5-g .p5-c:hover{ background:transparent; box-shadow:none; } .fv4 .p5-g .p5-c:hover .cta{ color:#004594; } .fv4 .p5-mk{ width:38px; height:38px; } .fv4 .p5-art{ height:48px; } .fv4 .p5-art--w .p5-mk{ width:34px; height:34px; } @container lane (max-width:700px){ .cv.fv4 .p5-g{ flex:0 0 86cqw; width:86cqw; scroll-snap-align:start; padding:19px 14px 0; gap:14px; } .cv.fv4 .p5-g .p5-c{ flex:1 1 0; width:auto; padding:0; } .cv.fv4 .p5-mk{ width:34px; height:34px; } .cv.fv4 .p5-art{ height:44px; } } /* ---- fv5 · Numbered Index ---- */ .fv5 .p5-track{ background:#FFFFFF; border-radius:10px; gap:0; } .fv5 .p5-c{ background:transparent; box-shadow:none; border-radius:0; justify-content:center; padding:0 14px; gap:0; flex:0 0 calc(var(--tw, 148px) + var(--tb-gap, 8px)); width:calc(var(--tw, 148px) + var(--tb-gap, 8px)); } .fv5 .p5-body{ width:100%; padding-bottom:9px; border-bottom:1px solid #D6E2F2; margin-bottom:10px; } .fv5 .p5-c + .p5-c::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:#EFF3F9; } .fv5 .p5-c:hover{ background:#F8FAFE; } .fv5 .p5-n{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:32px; } .fv5 .p5-num{ font:600 19px/23px "Cormorant Garamond", Georgia, serif; font-style:italic; color:#12325F; } /* here the identity chip sits BESIDE the drawing, never on top of it */ .fv5 .p5-art{ flex-direction:row; align-items:center; justify-content:flex-end; gap:5px; height:32px; } .fv5 .p5-mk{ width:30px; height:30px; } .fv5 .p5-chip{ position:static; width:16px; height:16px; } .fv5 .p5-art--w{ gap:0; } .fv5 .p5-art--w .p5-mk{ display:none; } .fv5 .p5-chip--w{ width:46px; height:20px; margin:0; } .fv5 .p5-c--all{ background:#C6D9F4; } .fv5 .p5-c--all .p5-body{ border-bottom:0; padding-bottom:0; margin-bottom:8px; } @container lane (max-width:700px){ .cv.fv5 .p5-track{ background:transparent; gap:8px; } .cv.fv5 .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; border-radius:10px; flex:0 0 78cqw; width:78cqw; padding:0 16px; } .cv.fv5 .p5-c::before{ display:none; } .cv.fv5 .p5-mk{ width:34px; height:34px; } .cv.fv5 .p5-art{ height:36px; } .cv.fv5 .p5-n{ height:36px; } .cv.fv5 .p5-num{ font-size:21px; } } /* ---- the band: smaller tabs, and the content laid over #lane ------------------- */ /* ========================================================================== home-allwork-five-p7c · live.css — PREVIEW ONLY Loaded by /doctor/home-allwork-five-p7c.html (index.html + one hook line). 1 · the tab row is made smaller — every word is still there, the second line may wrap — so on a 1440 desktop all EIGHT tabs fit and the row does not slide at all; 2 · the All Work content area is replaced by the chosen solution, laid OVER #lane, which stays in the page at its own size, so the band, the hero pin and the frame edge measure exactly as they do today; 3 · on a desktop the content never scrolls on its own — it is locked to the tab row; on a phone the content is the slider and the row follows it. ========================================================================== */ html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{ --tb-h:48px !important; --tb-join:6px !important; --tb-gap:8px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button{ gap:7px !important; padding:0 8px var(--tb-join) 9px !important; min-width:0 !important; overflow:hidden !important; align-items:center !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button svg{ width:16px !important; height:16px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabw{ min-width:0 !important; gap:1px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:11.5px !important; line-height:14px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ font-size:9.5px !important; line-height:11.5px !important; white-space:normal !important; } @media (max-width:900px){ html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{ --tb-h:46px !important; --tb-join:5px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:12.5px !important; line-height:15px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ font-size:10px !important; line-height:12px !important; white-space:nowrap !important; } } /* the sheet solution keeps the All Work tab in place while the row moves */ /* ---- the overlay ---------------------------------------------------------- */ .awx-host{ position:relative; } .awx-host.awx-on > #lane{ visibility:hidden; } .awx{ position:absolute; z-index:2; display:none; container:lane / inline-size; overflow:hidden; transition:opacity .2s ease; } .awx-host.awx-on > .awx{ display:block; } .tail.show .drawer.wk-swap > .awx{ opacity:0; } /* ---- the tab row on a phone · three whole, one cut ---------------------------- This comes AFTER the band sheet on purpose: both carry the same weight, so the later block is the one that decides the phone type sizes. -------------------- */ /* ---- 1 · Three Whole, One Cut — Every tab the same narrow width ---- */ @media (max-width:760px){ html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs{ gap:7px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button{ flex:0 0 calc((100% - 14px) / 3.3) !important; width:calc((100% - 14px) / 3.3) !important; gap:6px !important; padding:0 7px var(--tb-join) 8px !important; align-items:center !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button svg{ width:15px !important; height:15px !important; flex:0 0 15px !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabw{ min-width:0 !important; gap:0 !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabname{ font-size:10.5px !important; line-height:13px !important; white-space:normal !important; letter-spacing:-.01em !important; } html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs#tabs > button .gah-tabsub{ display:none !important; } } /* ---- option 03's card ---------------------------------------------------------- */ /* ========================================================================== home-allwork-photo5-q6n · photo5.css Option 03 "Real Photographs", five ways to fix the picture's shape on a PHONE. The desktop card below is the approved one, byte for byte the same in all five — every difference lives inside the @container phone block. ========================================================================== */ .q .p5-c{ background:#FFFFFF; box-shadow:inset 0 0 0 1px #DDE9F9; padding:9px 9px 0; gap:6px; justify-content:center; } .q .p5-c--all{ background:transparent; box-shadow:none; padding:0 0 0 2px; justify-content:center; } .q .p5-body{ width:100%; } .q .p5-ph{ position:relative; display:block; width:100%; height:74px; border-radius:7px; overflow:hidden; background:#DDE9F9 center 40% / cover no-repeat; } .q .p5-bd{ position:absolute; left:6px; bottom:6px; height:26px; padding:0 5px; border-radius:7px; background:#FFFFFF; display:flex; align-items:center; box-shadow:0 1px 3px rgba(14,30,53,.22); } .q .p5-bd svg{ width:16px; height:16px; } .q .p5-bd--w svg{ width:38px; height:16px; } .q .p5-cta{ padding:0 4px 0; } .q .q-nm{ display:none; } /* the name is a phone-only affordance */ .q .q-txt{ display:block; min-width:0; } /* ---- q3 · Contact Sheet · 93 × 68 · 1.37 : 1 ---- */ @container lane (max-width:700px){ .cv.q3 .p5-c{ flex:0 0 33cqw; width:33cqw; padding:7px 7px 0; gap:5px; } .cv.q3 .p5-ph{ height:68px; border-radius:6px; } .cv.q3 .p5-cta{ min-height:39px; padding:0 2px; } .cv.q3 .cta{ font-size:10px; line-height:13px; } .cv.q3 .cta-a{ width:11px; height:11px; margin-left:3px; } .cv.q3 .p5-bd{ height:19px; left:4px; bottom:4px; padding:0 4px; border-radius:6px; } .cv.q3 .p5-bd svg{ width:12px; height:12px; } .cv.q3 .p5-bd--w svg{ width:28px; height:12px; } .cv.q3 .p5-audit .cta{ font-size:11.5px; line-height:15px; } } /* a small phone (a 360 screen leaves the band ~294px): the longest link needs a fourth line, which the card has no room for — so the picture gives some back */ @container lane (max-width:300px){ .cv.q3 .p5-ph{ height:62px; } .cv.q3 .p5-cta{ min-height:36px; } .cv.q3 .cta{ font-size:9.5px; line-height:12px; } .cv.q3 .cta-a{ width:10px; height:10px; } }