/* Cornice / Skyslate - single-file stylesheet. skin tokens + theme structure + legacy compat, in that order. Drop in as assets/css/style.css. */ /* Cornice / Skyslate - skin tokens. Motif: arc variant 3. Load this BEFORE theme.css. Contrast: all 12 checks pass; tightest is body-lt on surf-3 at 4.59:1 (floor 4.5). Generated - edit palettes.py, not this file. */ :root { --p-900: #141a24; --p-800: #212836; --p-700: #2f394b; --p-600: #424f66; --p-200: #b7c3d7; --p-100: #d8dee9; --p-50: #eff1f6; --acc: #257e31; --acc-d: #185d21; --acc-l: #3cae4c; --acc-100: #dff6e2; --surf: #f7f7f8; --surf-2: #efeff1; --surf-3: #e7e8e9; --line: #dcdde0; --line-2: #c4c6ca; --white: #ffffff; --ink: #171c27; --body: #424a57; --body-lt: #5f6877; --sh-rgb: 20,26,36; --acc-rgb: 37,126,49; --p-rgb: 47,57,75; --motif: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2258%22 height=%2258%22 viewBox=%220 0 58 58%22%3E%3Cpath d=%22M0 19.3333 A19.3333 19.3333 0 0 1 19.3333 0%22 fill=%22none%22 stroke=%22%25232f394b%22 stroke-width=%221.5%22 opacity=%221.0%22/%3E%3Cpath d=%22M0 38.6667 A38.6667 38.6667 0 0 1 38.6667 0%22 fill=%22none%22 stroke=%22%25232f394b%22 stroke-width=%221.5%22 opacity=%220.78%22/%3E%3C/svg%3E"); --motif-size: 58px 58px; } /* ========================================================================== CORNICE - structure layer Soft geometric. Full pills, generous radii, tinted surfaces instead of borders, sweeping gradients, and arcs bleeding out of section corners. Colour comes from a skin file loaded BEFORE this one. Class vocabulary: span / region / pod / go. ========================================================================== */ :root { --f-display: 'Outfit', system-ui, 'Segoe UI', sans-serif; --f-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --r-sm: 12px; --r: 20px; --r-lg: 28px; --pill: 999px; --span: 1180px; --gut: 26px; --t: .24s cubic-bezier(.25, .8, .35, 1); --soft: 0 2px 6px rgba(var(--sh-rgb), .05), 0 12px 30px rgba(var(--sh-rgb), .07); --soft-2: 0 4px 10px rgba(var(--sh-rgb), .07), 0 22px 50px rgba(var(--sh-rgb), .12); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--f-body); font-size: 16.5px; line-height: 1.7; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; } /* height:auto is not optional. Every image in this kit carries width/height attributes so nothing shifts while it loads, and without height:auto a constrained width leaves the attribute height in place and squashes the picture. */ img, svg { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; color: var(--ink); line-height: 1.16; letter-spacing: -.022em; } h1 { font-size: clamp(2.15rem, 4.8vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.1vw, 2.4rem); } h3 { font-size: 1.16rem; } h4 { font-size: .98rem; } p { margin: 0 0 1em; } a { color: var(--p-600); text-decoration: none; transition: color var(--t); } a:hover { color: var(--acc-d); } :focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: var(--r-sm); } .span { width: 100%; max-width: var(--span); margin: 0 auto; padding: 0 var(--gut); } .leapto { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--p-800); color: var(--white); padding: 12px 20px; border-radius: var(--pill); } .leapto:focus { left: 12px; top: 12px; color: var(--white); } /* --- ticker bar --------------------------------------------------------- */ .tickerbar { background: var(--p-50); color: var(--p-700); font-size: .83rem; } .tickerbar .span { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 42px; flex-wrap: wrap; } .tickerbar-items { display: flex; gap: 26px; flex-wrap: wrap; } .tickerbar a { color: var(--p-800); font-weight: 600; } .tickerbar a:hover { color: var(--acc-d); } /* --- header ------------------------------------------------------------- */ .topnav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); } .topnav .span { display: flex; align-items: center; gap: 22px; min-height: 80px; } .topnav::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .sigil { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.02em; } .sigil:hover { color: var(--ink); } .sigil .mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); font-family: var(--f-body); font-weight: 700; font-size: .96rem; } .paths { margin-left: auto; display: flex; gap: 4px; } .paths a { padding: 10px 17px; border-radius: var(--pill); font-size: .94rem; font-weight: 500; color: var(--body); } .paths a:hover, .paths a[aria-current] { background: var(--p-50); color: var(--p-800); } .nav-acts { display: flex; align-items: center; gap: 14px; } .nav-call { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--ink); white-space: nowrap; } .navtoggle { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--pill); background: var(--p-50); cursor: pointer; } /* --- buttons ------------------------------------------------------------ */ .go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: var(--pill); border: 2px solid transparent; font-family: var(--f-body); font-weight: 600; font-size: .95rem; cursor: pointer; background: none; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); } .go-lg { padding: 17px 34px; font-size: 1.02rem; } .go-full { width: 100%; } .go-solid { background: linear-gradient(135deg, var(--p-700), var(--p-900)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--p-rgb), .3); } .go-solid:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(var(--p-rgb), .38); } .go-accent { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .34); } .go-accent:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--acc-rgb), .44); } .go-soft { background: var(--p-50); color: var(--p-800); } .go-soft:hover { background: var(--p-100); color: var(--p-900); transform: translateY(-2px); } .go-clear { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); } .go-clear:hover { background: rgba(255,255,255,.16); color: var(--white); border-color: var(--white); } /* --- regions ------------------------------------------------------------ */ .region { padding: 88px 0; position: relative; overflow: hidden; } .region-tight { padding: 54px 0; } .region-tint { background: var(--surf); } .region-tint-2 { background: var(--surf-2); } /* the arc motif bleeds out of the top-right corner of tinted regions */ .region-tint::before, .region-tint-2::before { content: ''; position: absolute; right: -40px; top: -40px; width: 320px; height: 320px; background-image: var(--motif); background-size: var(--motif-size); opacity: .5; pointer-events: none; } .region-dark { background-color: var(--p-900); background-image: linear-gradient(145deg, var(--p-800), var(--p-900) 58%); color: var(--p-200); } .region-dark::after { content: ''; position: absolute; left: -60px; bottom: -60px; width: 360px; height: 360px; background-image: var(--motif); background-size: var(--motif-size); opacity: .28; pointer-events: none; } .region-dark h2, .region-dark h3, .region-dark h4 { color: var(--white); } /* A button inside a dark band must keep its own text colour. Without the :not() guard this generic rule wins on specificity and renders an accent button's label in --acc-l on --acc -- measured at 1.66:1. */ .region-dark a:not([class*="go"]) { color: var(--acc-l); } .region > .span { position: relative; z-index: 1; } /* --- dek (section head) ------------------------------------------------- */ .dek { margin-bottom: 52px; max-width: 740px; } .dek-mid { margin-left: auto; margin-right: auto; text-align: center; } .bead-eye { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: var(--pill); background: var(--acc-100); color: var(--acc-d); font-weight: 600; font-size: .8rem; letter-spacing: .03em; margin-bottom: 18px; } .region-dark .bead-eye { background: rgba(255,255,255,.12); color: var(--acc-l); } .dek p { margin: 16px 0 0; font-size: 1.06rem; color: var(--body-lt); } .region-dark .dek p { color: var(--p-200); } /* --- prologue (home hero) ----------------------------------------------- */ .prologue { background-color: var(--surf); background-image: radial-gradient(880px 420px at 88% -8%, rgba(var(--acc-rgb), .2), transparent 62%), radial-gradient(760px 380px at 2% 108%, rgba(var(--p-rgb), .16), transparent 60%); padding: 88px 0 82px; position: relative; overflow: hidden; } .prologue::before { content: ''; position: absolute; right: -50px; top: -50px; width: 360px; height: 360px; background-image: var(--motif); background-size: var(--motif-size); opacity: .45; } .prologue > .span { position: relative; z-index: 1; } .prologue-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 54px; align-items: center; } .prologue-sub { font-size: 1.14rem; margin: 20px 0 30px; max-width: 54ch; color: var(--body-lt); } .prologue-acts { display: flex; gap: 14px; flex-wrap: wrap; } .prologue-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; background: var(--white); color: var(--p-800); padding: 9px 18px; border-radius: var(--pill); font-weight: 600; font-size: .82rem; box-shadow: var(--soft); } .prologue-badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); } .prologue-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--soft-2); } .prologue-card { background: var(--white); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--soft-2); } .prologue-card h3 { margin-bottom: 14px; } .prologue-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; } .prologue-proof div { background: var(--white); border-radius: var(--r); padding: 22px 18px; text-align: center; box-shadow: var(--soft); } .prologue-proof strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; color: var(--p-800); line-height: 1.1; } .prologue-proof span { font-size: .82rem; color: var(--body-lt); } /* Hero composition for this family: an uneven pair, bottom-aligned, with the callout riding low against the fold. */ .prologue-grid { grid-template-columns: 1.16fr .84fr; align-items: end; } .prologue-card { transform: translateY(26px); } .prologue { padding-bottom: 104px; } /* --- capline (inner hero) ----------------------------------------------- */ .capline { background-color: var(--p-900); background-image: linear-gradient(140deg, var(--p-700), var(--p-900) 62%); color: var(--p-200); padding: 66px 0 60px; position: relative; overflow: hidden; } .capline::before { content: ''; position: absolute; right: -40px; bottom: -70px; width: 320px; height: 320px; background-image: var(--motif); background-size: var(--motif-size); opacity: .3; } .capline > .span { position: relative; z-index: 1; } .capline h1 { color: var(--white); } .capline-sub { font-size: 1.08rem; max-width: 62ch; margin-top: 16px; color: var(--p-200); } .capline-acts { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; } .thread { font-size: .84rem; margin-bottom: 16px; color: var(--p-200); } .thread a { color: var(--acc-l); } /* The prologue sits on a tinted surface, so a clear button inside it needs ink-on-light rather than the white-on-dark default. */ .prologue .go-clear { color: var(--p-800); border-color: var(--line-2); } .prologue .go-clear:hover { background: var(--p-800); color: var(--white); border-color: var(--p-800); } /* --- pods (card grid) --------------------------------------------------- */ .pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pods-2 { grid-template-columns: repeat(2, 1fr); } .pods-4 { grid-template-columns: repeat(4, 1fr); } .pod { background: var(--white); border-radius: var(--r-lg); padding: 32px 28px 28px; box-shadow: var(--soft); display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); } .pod:hover { transform: translateY(-6px); box-shadow: var(--soft-2); } .pod-no { width: 50px; height: 50px; border-radius: var(--pill); display: grid; place-items: center; background: var(--acc-100); color: var(--acc-d); font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; } .pod h3 { margin-bottom: 10px; } .pod p { font-size: .97rem; color: var(--body-lt); } .pod-go { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: .92rem; color: var(--acc-d); display: inline-flex; align-items: center; gap: 8px; } .pod-go::after { content: '\2192'; transition: transform var(--t); } .pod:hover .pod-go::after { transform: translateX(5px); } .region-dark .pod { background: rgba(255,255,255,.07); color: var(--p-200); box-shadow: none; } .region-dark .pod-no { background: rgba(255,255,255,.14); color: var(--acc-l); } /* --- lists -------------------------------------------------------------- */ .affirms li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: .99rem; } .affirms li::before { content: ''; position: absolute; left: 0; top: .16em; width: 22px; height: 22px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); } .affirms li::after { content: ''; position: absolute; left: 7px; top: .52em; width: 8px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); } .beads { display: flex; flex-wrap: wrap; gap: 10px; } .beads a, .bead { display: inline-block; padding: 9px 18px; border-radius: var(--pill); background: var(--p-50); font-size: .88rem; font-weight: 600; color: var(--p-800); } .beads a:hover { background: var(--p-700); color: var(--white); } /* --- halves (split) ----------------------------------------------------- */ .halves { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .halves-media img { border-radius: var(--r-lg); box-shadow: var(--soft-2); } .halves-flip .halves-media { order: -1; } /* --- track (steps) ------------------------------------------------------ */ .track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .leg { text-align: center; } .leg-no { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: var(--pill); display: grid; place-items: center; background: linear-gradient(135deg, var(--p-600), var(--p-800)); color: var(--white); font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; box-shadow: 0 10px 24px rgba(var(--p-rgb), .28); } .leg h3 { margin-bottom: 8px; font-size: 1.06rem; } .leg p { margin: 0; font-size: .95rem; color: var(--body-lt); } /* --- traits ------------------------------------------------------------- */ .traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .trait { text-align: center; } .trait-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: var(--r); display: grid; place-items: center; background: var(--p-50); color: var(--p-700); } .region-dark .trait-ico { background: rgba(255,255,255,.1); color: var(--acc-l); } .trait h3 { margin-bottom: 7px; font-size: 1.06rem; } .trait p { margin: 0; font-size: .96rem; color: var(--body-lt); } .region-dark .trait p { color: var(--p-200); } /* --- highlight ---------------------------------------------------------- */ .highlight { background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r-lg); padding: 30px 34px; box-shadow: var(--soft); } .highlight-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .highlight-head h3 { margin: 0; } /* --- scores (stats) ----------------------------------------------------- */ .scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .score { background: var(--white); border-radius: var(--r-lg); padding: 30px 20px; text-align: center; box-shadow: var(--soft); } .score strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; color: var(--p-700); line-height: 1.1; } .score span { font-size: .86rem; color: var(--body-lt); } /* --- curious (faq) ------------------------------------------------------ */ .curious { display: grid; gap: 16px; max-width: 880px; } .curio { background: var(--white); border-radius: var(--r); padding: 26px 30px; box-shadow: var(--soft); } .curio h3 { margin-bottom: 9px; } .curio p { margin: 0; font-size: .98rem; color: var(--body-lt); } /* --- tabulation (table) ------------------------------------------------- */ .tabulation-scroll { overflow-x: auto; border-radius: var(--r); box-shadow: var(--soft); } .tabulation { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--white); } .tabulation th, .tabulation td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); } .tabulation th { background: var(--p-50); color: var(--p-800); font-family: var(--f-display); font-weight: 700; font-size: .88rem; } .tabulation tbody tr:last-child td { border-bottom: 0; } /* --- ways (contact) ----------------------------------------------------- */ .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .way { background: var(--white); border-radius: var(--r-lg); padding: 30px; text-align: center; box-shadow: var(--soft); } .way h3 { margin-bottom: 9px; } .way a { font-family: var(--f-display); font-weight: 700; font-size: 1.16rem; color: var(--p-700); } /* --- enquire (form) ----------------------------------------------------- */ .enquire { background: var(--white); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--soft-2); } .enquire-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .box { margin-bottom: 20px; } .box label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--ink); } .box input, .box select, .box textarea { width: 100%; padding: 14px 18px; border: 2px solid transparent; border-radius: var(--r-sm); font: inherit; font-size: .96rem; background: var(--surf); color: var(--ink); transition: border-color var(--t), background var(--t); } .box input:focus, .box select:focus, .box textarea:focus { border-color: var(--acc); background: var(--white); outline: none; } .box textarea { min-height: 140px; resize: vertical; } .enquire-note { font-size: .87rem; color: var(--body-lt); margin-top: 12px; } /* --- sendoff (end CTA) -------------------------------------------------- */ .sendoff { background-color: var(--p-800); background-image: linear-gradient(130deg, var(--acc-d), var(--p-800) 58%); color: var(--white); padding: 70px 0; position: relative; overflow: hidden; } .sendoff::before { content: ''; position: absolute; right: -50px; top: -60px; width: 340px; height: 340px; background-image: var(--motif); background-size: var(--motif-size); opacity: .3; } .sendoff .span { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; position: relative; z-index: 1; } .sendoff h2 { color: var(--white); margin-bottom: 8px; } .sendoff-text p { margin: 0; color: var(--white); } .sendoff-acts { display: flex; gap: 14px; flex-wrap: wrap; } /* --- footrest (footer) -------------------------------------------------- */ .footrest { background: var(--p-900); color: var(--p-200); padding: 66px 0 0; font-size: .95rem; } .footrest-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 46px; } .footrest h4, .footrest h2 { color: var(--white); margin-bottom: 16px; font-size: 1rem; } .footrest a { color: var(--p-200); } .footrest a:hover { color: var(--acc-l); } .footrest-links li { margin-bottom: 10px; } .footrest-base { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .87rem; } /* --- wrappers the legacy markup relies on ------------------------------- */ .footrest-about { max-width: 44ch; } .footrest-contact p { margin: 0; line-height: 1.9; } .halves-body > :last-child { margin-bottom: 0; } /* Grid children take min-width:auto by default, so a wide child - the comparison table - can push its column past the viewport, where the section's own overflow then clips it. Pinning the minimum to zero keeps the table inside its own scroller instead of stretching the column. */ .prologue-grid > *, .halves > *, .pods > *, .traits > *, .ways > *, .track > *, .scores > *, .enquire-row > * { min-width: 0; } .tabulation-scroll { max-width: 100%; } /* --- responsive --------------------------------------------------------- */ @media (max-width: 1000px) { .prologue-grid, .halves { grid-template-columns: 1fr; gap: 38px; } .halves-flip .halves-media { order: 0; } .pods, .pods-4, .traits, .ways, .track { grid-template-columns: repeat(2, 1fr); } .footrest-grid { grid-template-columns: 1fr 1fr; } .scores, .prologue-proof { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .paths { display: none; } .navtoggle { display: block; margin-left: auto; } .nav-call { display: none; } .region { padding: 60px 0; } .pods, .pods-2, .pods-4, .traits, .ways, .track, .enquire-row, .scores, .prologue-proof { grid-template-columns: 1fr; } .prologue-card { transform: none; } .footrest-grid { grid-template-columns: 1fr; } .sendoff .span { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } @media print { .topnav, .tickerbar, .sendoff, .navtoggle { display: none; } body { color: #000; background: #fff; } } /* ========================================================================== CORNICE - section library Comparison tabulation, before/after scenes, accreds strip, wayfinder for related links, detail rows, prose, turns, sticky call pill, 404. ========================================================================== */ /* --- section head with a trailing action ------------------------------- */ .dek-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; max-width: none; } .dek-link { font-weight: 600; font-size: .93rem; color: var(--acc-d); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: var(--acc-100); padding: 9px 18px; border-radius: var(--pill); } .dek-link::after { content: '\2192'; transition: transform var(--t); } .dek-link:hover::after { transform: translateX(4px); } .region-dark .dek-link { background: rgba(255,255,255,.12); color: var(--acc-l); } /* --- comparison tabulation ---------------------------------------------- */ .tabulation-crit { font-weight: 600; color: var(--ink); width: 40%; } .tabulation .tabulation-ours { background: var(--acc-100); font-weight: 600; color: var(--ink); } .tabulation thead .tabulation-ours { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); } .tabulation tbody tr:last-child .tabulation-ours { border-radius: 0 0 var(--r) var(--r); } .tabulation tbody .tabulation-theirs { color: var(--body-lt); } .tabulation-yes::before { content: '\2713'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); font-size: .72rem; margin-right: 9px; vertical-align: -4px; } .tabulation-no::before { content: '\2013'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--pill); background: var(--surf-3); color: var(--body-lt); font-size: .8rem; margin-right: 9px; vertical-align: -4px; } /* --- before / after scenes ---------------------------------------------- */ .scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .scenes-3 { grid-template-columns: repeat(3, 1fr); } .scene { text-align: center; } .scene img, .scene-ph { width: 100%; border-radius: var(--r-lg); box-shadow: var(--soft); display: block; } .scene-ph { aspect-ratio: 4 / 3; background-color: var(--surf-2); background-image: var(--motif); background-size: var(--motif-size); display: grid; place-items: center; color: var(--body-lt); font-size: .86rem; font-weight: 500; } .scene-cap { margin-top: 14px; } .scene-cap strong { display: inline-block; font-family: var(--f-display); font-size: .86rem; background: var(--p-50); color: var(--p-800); padding: 6px 16px; border-radius: var(--pill); } .scene-cap span { display: block; font-size: .9rem; color: var(--body-lt); margin-top: 8px; } /* --- accreds strip ------------------------------------------------------ */ .accreds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .accred { background: var(--white); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; box-shadow: var(--soft); } .accred-mark { width: 52px; height: 52px; margin: 0 auto 13px; border-radius: var(--pill); background: linear-gradient(135deg, var(--p-100), var(--p-50)); color: var(--p-700); display: grid; place-items: center; } .accred strong { display: block; font-family: var(--f-display); font-size: .98rem; color: var(--ink); } .accred span { font-size: .84rem; color: var(--body-lt); } /* --- wayfinder (related links) ------------------------------------------ */ .wayfinder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .waypoint { background: var(--white); border-radius: var(--r); padding: 20px 24px; box-shadow: var(--soft); color: var(--ink); transition: transform var(--t), box-shadow var(--t); } .waypoint:hover { transform: translateY(-4px); box-shadow: var(--soft-2); color: var(--ink); } .waypoint strong { display: block; font-family: var(--f-display); font-size: 1rem; } .waypoint span { font-size: .87rem; color: var(--body-lt); } .region-dark .waypoint { background: rgba(255,255,255,.07); color: var(--p-200); box-shadow: none; } .region-dark .waypoint strong { color: var(--white); } /* --- detail rows -------------------------------------------------------- */ .details-grid { display: grid; gap: 10px; } .detail { display: grid; grid-template-columns: 200px 1fr; gap: 22px; background: var(--surf); border-radius: var(--r); padding: 15px 22px; } .detail-lbl { font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: var(--p-800); } .detail-val { color: var(--body); } /* --- numbered list ------------------------------------------------------ */ .sequence-list { counter-reset: n; } .sequence-list li { counter-increment: n; position: relative; padding-left: 50px; margin-bottom: 16px; } .sequence-list li::before { content: counter(n); position: absolute; left: 0; top: -2px; font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--white); background: linear-gradient(135deg, var(--p-600), var(--p-800)); border-radius: var(--pill); width: 34px; height: 34px; display: grid; place-items: center; } /* --- prose -------------------------------------------------------------- */ .piece { max-width: 68ch; } .piece h2 { margin: 1.85em 0 .5em; } .piece h3 { margin: 1.5em 0 .4em; } .piece p { margin-bottom: 1.2em; } .piece > :first-child { margin-top: 0; } .piece ul { margin: 0 0 1.3em; } .piece ul li { position: relative; padding-left: 30px; margin-bottom: 10px; } .piece ul li::before { content: ''; position: absolute; left: 4px; top: .58em; width: 10px; height: 10px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); } .piece blockquote { background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r); padding: 22px 26px; margin: 1.7em 0; font-size: 1.07rem; color: var(--ink); } .piece a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--acc); } .posted { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .89rem; color: var(--body-lt); margin-bottom: 30px; } .posted span { background: var(--surf); border-radius: var(--pill); padding: 6px 16px; } /* --- legal document ----------------------------------------------------- */ .policy { max-width: 74ch; } .policy h2 { font-size: 1.26rem; margin: 1.9em 0 .5em; } .policy p, .policy li { font-size: .97rem; } .policy ul { margin-bottom: 1.2em; } .policy ul li { position: relative; padding-left: 26px; margin-bottom: 8px; } .policy ul li::before { content: ''; position: absolute; left: 4px; top: .64em; width: 7px; height: 7px; border-radius: var(--pill); background: var(--line-2); } .policy-updated { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--p-800); background: var(--p-50); border-radius: var(--pill); padding: 9px 20px; margin-bottom: 32px; } /* --- inline mid-page CTA ------------------------------------------------ */ .prompt { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r-lg); padding: 30px 34px; box-shadow: var(--soft); } .prompt h3 { margin: 0 0 5px; } .prompt p { margin: 0; font-size: .96rem; color: var(--body-lt); } /* --- pagination --------------------------------------------------------- */ .turns { display: flex; gap: 9px; } .turns a, .turns span { min-width: 46px; text-align: center; padding: 12px 17px; border-radius: var(--pill); font-weight: 600; font-size: .91rem; color: var(--p-800); background: var(--p-50); } .turns a:hover { background: var(--p-100); } .turns [aria-current] { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); } /* --- FAQ as a disclosure ------------------------------------------------ */ .curio summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.24; } .curio summary::-webkit-details-marker { display: none; } .curio summary::after { content: '\002B'; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--pill); background: var(--acc-100); color: var(--acc-d); font-size: 1.05rem; line-height: 1; } .curio details[open] summary::after { content: '\2212'; } .curio details p { margin: 14px 0 0; } /* --- 404 ---------------------------------------------------------------- */ .missing { text-align: center; padding: 30px 0 10px; } .missing-code { font-family: var(--f-display); font-weight: 800; font-size: clamp(4.5rem, 17vw, 9.5rem); line-height: .92; letter-spacing: -.05em; background: linear-gradient(135deg, var(--p-600), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; } .missing p { max-width: 54ch; margin: 16px auto 28px; } .missing-acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .callpill { display: none; } @media (max-width: 1000px) { .accreds, .wayfinder { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .scenes, .scenes-3, .accreds, .wayfinder { grid-template-columns: 1fr; } .detail { grid-template-columns: 1fr; gap: 3px; } .prompt { flex-direction: column; align-items: flex-start; } .callpill { display: flex; gap: 10px; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 150; } .callpill a { flex: 1; text-align: center; padding: 15px 10px; border-radius: var(--pill); font-weight: 600; font-size: .93rem; } .callpill a:first-child { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .36); } .callpill a:last-child { background: var(--white); color: var(--p-800); box-shadow: var(--soft-2); } body { padding-bottom: 78px; } } /* --- mobile header ------------------------------------------------------ The brand wrapped and collided with the header CTA at phone widths. The sticky call bar below already offers both actions, so the header button steps aside and the brand is given room. */ @media (max-width: 760px) { .nav-acts .go-accent { display: none; } .sigil { font-size: .98rem; gap: 9px; line-height: 1.15; } .sigil .mark { width: 34px; height: 34px; flex: none; font-size: .82rem; } .topnav .span { min-height: 62px; gap: 12px; } } /* --- menu button and the panel it opens --------------------------------- The button existed but drew nothing in most families, and the nav it hides at phone width had nowhere to go. Six lines of JS in the page toggles .is-open; see README if your generator supplies its own. */ .navtoggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--p-800); position: relative; } .navtoggle span::before, .navtoggle span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--p-800); } .navtoggle span::before { top: -6px; } .navtoggle span::after { top: 6px; } /* --- components when they land on a dark band --------------------------- */ .region-dark .leg p { color: var(--p-200); } .region-dark .score { background: rgba(255,255,255,.07); box-shadow: none; } .region-dark .score strong { color: var(--white); } .region-dark .score span { color: var(--p-200); } .region-dark .curio { background: rgba(255,255,255,.07); box-shadow: none; } .region-dark .curio p { color: var(--p-200); } /* --- touch targets ------------------------------------------------------ Measured at 375px, these were 15-28px tall. WCAG 2.5.5 asks for 44px; these give at least 40 without changing how anything looks on desktop. */ @media (max-width: 760px) { .dek-link { display: inline-flex; align-items: center; min-height: 44px; } .curio summary { min-height: 44px; align-items: center; padding: 4px 0; } .footrest-links a { display: inline-block; min-height: 40px; line-height: 40px; } .thread a { display: inline-block; min-height: 40px; line-height: 40px; } .way a { display: inline-block; min-height: 44px; line-height: 44px; } .foot-bottom a, .colophon-base a, .baseplate-base a, .endnote-base a, .underframe-base a, .footrest-base a, .substruct-base a { display: inline-block; min-height: 40px; line-height: 40px; } body { padding-bottom: 86px; } } /* --- heading levels ----------------------------------------------------- The hero card, the contact cards and the footer columns sat directly under the page h1 or an h2, so their h3/h4 skipped a level. The markup now uses h2 throughout and the size is pinned here, so the rendering is unchanged and the document outline is correct. */ .prologue-card h2 { font-size: 1.16rem; } .way h2 { font-size: 1.16rem; } .footrest h2 { font-size: inherit; } /* --- utility strip and footer contact on phones ------------------------- The strip stacked its opening hours, its standby note and the phone over three lines, pushing the hero down for no real gain, and the phone itself was a 16px tap target. On phones it collapses to the number alone, at a proper size. The footer's phone, privacy and 404 links get the same. */ @media (max-width: 760px) { .tickerbar .tickerbar-items { display: none; } .tickerbar .span { justify-content: center; min-height: 44px; } .tickerbar a { display: inline-flex; align-items: center; min-height: 44px; } .footrest-contact p a { display: inline-block; min-height: 40px; line-height: 40px; } } /* --- where the nav collapses ------------------------------------------- Measured, not guessed: brand + seven nav items + phone + CTA came to 1096-1181px depending on the family, against container widths of 1140-1200. Two families overflowed their own container even on a full desktop. The nav links are slimmed below, and the whole nav folds into the menu button under 1100px, where the phone steps aside too. The phone-only rules (hiding the CTA, shrinking the brand) stay at 760px. */ .paths a { padding-left: 11px; padding-right: 11px; font-size: .89rem; } @media (max-width: 1100px) { .paths { display: none; } .nav-call { display: none; } .navtoggle { display: block; margin-left: auto; } .topnav .span { position: relative; } .paths.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; z-index: 120; background: var(--white); padding: 10px 14px 16px; gap: 2px; box-shadow: 0 14px 30px rgba(var(--sh-rgb), .18); } .paths.is-open a { padding: 12px 8px; min-height: 44px; font-size: .95rem; display: flex; align-items: center; } } /* --- making the card actually clickable --------------------------------- The card lifted under the pointer but only the "Read more" link was clickable: about an eighth of its area. Anything advertising itself as interactive should be interactive, so the link is stretched over the whole card. One anchor, one accessible name, no nested-link problem. Two related fixes ride along: keyboard focus now gets the same lift as the pointer, and on touch devices the hover state is suppressed, because :hover sticks after a tap and left cards stuck in the raised state. */ .pod { position: relative; } .pod-go::before { content: ''; position: absolute; inset: 0; z-index: 1; } .pod:focus-within { transform: translateY(-6px); box-shadow: var(--soft-2); } @media (hover: none) { .pod:hover { transform: none; box-shadow: var(--soft); } } /* --- menu button boundary ----------------------------------------------- The three bars were drawing fine (13-17:1 against the button) but the button's own edge measured 1.14-1.72:1 against the header, so it read as three floating lines rather than a control. WCAG 1.4.11 asks for 3:1 on a UI component boundary. --p-600 is contrast-corrected to at least 4.5:1 on white by the palette engine, so this clears it in all sixty skins. */ .navtoggle { box-shadow: inset 0 0 0 1.5px var(--p-600); } .navtoggle:hover { background: var(--p-50); } /* --- figure image box --------------------------------------------------- The -ph placeholder already declares 4/3. A real photograph must sit in the same box, cropped rather than stretched, or a portrait source distorts the layout the placeholder was sized for. */ .scene img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* --- stat strips on phones ---------------------------------------------- Four short stats stacked one per row ran 379px on a 375px screen and made the hero nearly three viewports tall before any content. Two columns is the right shape for figures this short: same information, half the height. Measured on roofingcambriaheights.com against roofreplacementnewark.com. */ @media (max-width: 760px) { .prologue-proof, .scores { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .prologue-proof, .scores { grid-template-columns: 1fr; } } /* Cornice - legacy contract. Generated by tools/build.py from theme.css plus tools/aliases.py. Load AFTER theme.css. This lets pages that still carry the old .sec-navy / .btn-amber / .svc-grid markup render in this family with no HTML edits. New sites should use the native names and can drop this file entirely. */ .wrap { width: 100%; max-width: var(--span); margin: 0 auto; padding: 0 var(--gut); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--p-800); color: var(--white); padding: 12px 20px; border-radius: var(--pill); } .skip-link:focus { left: 12px; top: 12px; color: var(--white); } .callbar, .util { background: var(--p-50); color: var(--p-700); font-size: .83rem; } .callbar .wrap, .util .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 42px; flex-wrap: wrap; } .util-items { display: flex; gap: 26px; flex-wrap: wrap; } .callbar a, .util a { color: var(--p-800); font-weight: 600; } .callbar a:hover, .util a:hover { color: var(--acc-d); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); } .site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 80px; } .site-header::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); letter-spacing: -.02em; } .brand:hover { color: var(--ink); } .brand .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); font-family: var(--f-body); font-weight: 700; font-size: .96rem; } .mainnav { margin-left: auto; display: flex; gap: 4px; } .mainnav a { padding: 10px 17px; border-radius: var(--pill); font-size: .94rem; font-weight: 500; color: var(--body); } .mainnav a:hover, .mainnav a[aria-current] { background: var(--p-50); color: var(--p-800); } .header-actions { display: flex; align-items: center; gap: 14px; } .header-call { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; color: var(--ink); white-space: nowrap; } .burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--pill); background: var(--p-50); cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: var(--pill); border: 2px solid transparent; font-family: var(--f-body); font-weight: 600; font-size: .95rem; cursor: pointer; background: none; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); } .btn-lg { padding: 17px 34px; font-size: 1.02rem; } .btn-block { width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--p-700), var(--p-900)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--p-rgb), .3); } .btn-primary:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(var(--p-rgb), .38); } .btn-amber { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .34); } .btn-amber:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--acc-rgb), .44); } .btn-white, .btn-outline { background: var(--p-50); color: var(--p-800); } .btn-white:hover, .btn-outline:hover { background: var(--p-100); color: var(--p-900); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); } .btn-ghost:hover { background: rgba(255,255,255,.16); color: var(--white); border-color: var(--white); } .sec { padding: 88px 0; position: relative; overflow: hidden; } .sec-sm { padding: 54px 0; } .sec-cream { background: var(--surf); } .sec-cream-2 { background: var(--surf-2); } .sec-cream::before, .sec-cream-2::before { content: ''; position: absolute; right: -40px; top: -40px; width: 320px; height: 320px; background-image: var(--motif); background-size: var(--motif-size); opacity: .5; pointer-events: none; } .sec-navy { background-color: var(--p-900); background-image: linear-gradient(145deg, var(--p-800), var(--p-900) 58%); color: var(--p-200); } .sec-navy::after { content: ''; position: absolute; left: -60px; bottom: -60px; width: 360px; height: 360px; background-image: var(--motif); background-size: var(--motif-size); opacity: .28; pointer-events: none; } .sec-navy h2, .sec-navy h3, .sec-navy h4 { color: var(--white); } .sec-navy a:not([class*="go"]) { color: var(--acc-l); } .sec > .wrap { position: relative; z-index: 1; } .shead { margin-bottom: 52px; max-width: 740px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: var(--pill); background: var(--acc-100); color: var(--acc-d); font-weight: 600; font-size: .8rem; letter-spacing: .03em; margin-bottom: 18px; } .sec-navy .eyebrow { background: rgba(255,255,255,.12); color: var(--acc-l); } .shead p { margin: 16px 0 0; font-size: 1.06rem; color: var(--body-lt); } .sec-navy .shead p { color: var(--p-200); } .hero { background-color: var(--surf); background-image: radial-gradient(880px 420px at 88% -8%, rgba(var(--acc-rgb), .2), transparent 62%), radial-gradient(760px 380px at 2% 108%, rgba(var(--p-rgb), .16), transparent 60%); padding: 88px 0 82px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; right: -50px; top: -50px; width: 360px; height: 360px; background-image: var(--motif); background-size: var(--motif-size); opacity: .45; } .hero > .wrap { position: relative; z-index: 1; } .hero-grid, .svc-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 54px; align-items: center; } .hero-sub { font-size: 1.14rem; margin: 20px 0 30px; max-width: 54ch; color: var(--body-lt); } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; background: var(--white); color: var(--p-800); padding: 9px 18px; border-radius: var(--pill); font-weight: 600; font-size: .82rem; box-shadow: var(--soft); } .hero-badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); } .hero-media img, .svc-hero-media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--soft-2); } .hero-float, .svc-hero-float { background: var(--white); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--soft-2); } .hero-float h3, .svc-hero-float h3 { margin-bottom: 14px; } .hero-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; } .hero-proof div { background: var(--white); border-radius: var(--r); padding: 22px 18px; text-align: center; box-shadow: var(--soft); } .hero-proof strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; color: var(--p-800); line-height: 1.1; } .hero-proof span { font-size: .82rem; color: var(--body-lt); } .hero-grid, .svc-hero-grid { grid-template-columns: 1.16fr .84fr; align-items: end; } .hero-float, .svc-hero-float { transform: translateY(26px); } .hero { padding-bottom: 104px; } .page-hero, .svc-hero { background-color: var(--p-900); background-image: linear-gradient(140deg, var(--p-700), var(--p-900) 62%); color: var(--p-200); padding: 66px 0 60px; position: relative; overflow: hidden; } .page-hero::before, .svc-hero::before { content: ''; position: absolute; right: -40px; bottom: -70px; width: 320px; height: 320px; background-image: var(--motif); background-size: var(--motif-size); opacity: .3; } .page-hero > .wrap, .svc-hero > .wrap { position: relative; z-index: 1; } .page-hero h1, .svc-hero h1 { color: var(--white); } .page-hero-sub, .svc-hero-sub { font-size: 1.08rem; max-width: 62ch; margin-top: 16px; color: var(--p-200); } .page-hero-actions, .svc-hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; } .svc-crumb { font-size: .84rem; margin-bottom: 16px; color: var(--p-200); } .svc-crumb a { color: var(--acc-l); } .hero .btn-ghost { color: var(--p-800); border-color: var(--line-2); } .hero .btn-ghost:hover { background: var(--p-800); color: var(--white); border-color: var(--p-800); } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .svc { background: var(--white); border-radius: var(--r-lg); padding: 32px 28px 28px; box-shadow: var(--soft); display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t); } .svc:hover { transform: translateY(-6px); box-shadow: var(--soft-2); } .svc-n { width: 50px; height: 50px; border-radius: var(--pill); display: grid; place-items: center; background: var(--acc-100); color: var(--acc-d); font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; } .svc h3 { margin-bottom: 10px; } .svc p { font-size: .97rem; color: var(--body-lt); } .svc-link { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: .92rem; color: var(--acc-d); display: inline-flex; align-items: center; gap: 8px; } .svc-link::after { content: '\2192'; transition: transform var(--t); } .svc:hover .svc-link::after { transform: translateX(5px); } .sec-navy .svc { background: rgba(255,255,255,.07); color: var(--p-200); box-shadow: none; } .sec-navy .svc-n { background: rgba(255,255,255,.14); color: var(--acc-l); } .checks li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: .99rem; } .checks li::before { content: ''; position: absolute; left: 0; top: .16em; width: 22px; height: 22px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); } .checks li::after { content: ''; position: absolute; left: 7px; top: .52em; width: 8px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chips a, .chip { display: inline-block; padding: 9px 18px; border-radius: var(--pill); background: var(--p-50); font-size: .88rem; font-weight: 600; color: var(--p-800); } .chips a:hover { background: var(--p-700); color: var(--white); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split-media img { border-radius: var(--r-lg); box-shadow: var(--soft-2); } .halves-flip .split-media { order: -1; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .step { text-align: center; } .step-n { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: var(--pill); display: grid; place-items: center; background: linear-gradient(135deg, var(--p-600), var(--p-800)); color: var(--white); font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; box-shadow: 0 10px 24px rgba(var(--p-rgb), .28); } .step h3 { margin-bottom: 8px; font-size: 1.06rem; } .step p { margin: 0; font-size: .95rem; color: var(--body-lt); } .points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .point { text-align: center; } .point-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: var(--r); display: grid; place-items: center; background: var(--p-50); color: var(--p-700); } .sec-navy .point-ico { background: rgba(255,255,255,.1); color: var(--acc-l); } .point h3 { margin-bottom: 7px; font-size: 1.06rem; } .point p { margin: 0; font-size: .96rem; color: var(--body-lt); } .sec-navy .point p { color: var(--p-200); } .panel { background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r-lg); padding: 30px 34px; box-shadow: var(--soft); } .panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .panel-head h3 { margin: 0; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust-item { background: var(--white); border-radius: var(--r-lg); padding: 30px 20px; text-align: center; box-shadow: var(--soft); } .trust-item strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; color: var(--p-700); line-height: 1.1; } .trust-item span { font-size: .86rem; color: var(--body-lt); } .faq { display: grid; gap: 16px; max-width: 880px; } .faq-item { background: var(--white); border-radius: var(--r); padding: 26px 30px; box-shadow: var(--soft); } .faq-item h3 { margin-bottom: 9px; } .faq-item p { margin: 0; font-size: .98rem; color: var(--body-lt); } .table-scroll { overflow-x: auto; border-radius: var(--r); box-shadow: var(--soft); } .ctable, .dtable { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--white); } .ctable th, .dtable th, .ctable td, .dtable td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); } .ctable th, .dtable th { background: var(--p-50); color: var(--p-800); font-family: var(--f-display); font-weight: 700; font-size: .88rem; } .ctable tbody tr:last-child td, .dtable tbody tr:last-child td { border-bottom: 0; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .contact-card { background: var(--white); border-radius: var(--r-lg); padding: 30px; text-align: center; box-shadow: var(--soft); } .contact-card h3 { margin-bottom: 9px; } .contact-card a { font-family: var(--f-display); font-weight: 700; font-size: 1.16rem; color: var(--p-700); } .eform { background: var(--white); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--soft-2); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { margin-bottom: 20px; } .field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; padding: 14px 18px; border: 2px solid transparent; border-radius: var(--r-sm); font: inherit; font-size: .96rem; background: var(--surf); color: var(--ink); transition: border-color var(--t), background var(--t); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acc); background: var(--white); outline: none; } .field textarea { min-height: 140px; resize: vertical; } .form-note { font-size: .87rem; color: var(--body-lt); margin-top: 12px; } .endcta { background-color: var(--p-800); background-image: linear-gradient(130deg, var(--acc-d), var(--p-800) 58%); color: var(--white); padding: 70px 0; position: relative; overflow: hidden; } .endcta::before { content: ''; position: absolute; right: -50px; top: -60px; width: 340px; height: 340px; background-image: var(--motif); background-size: var(--motif-size); opacity: .3; } .endcta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; position: relative; z-index: 1; } .endcta h2 { color: var(--white); margin-bottom: 8px; } .endcta-text p { margin: 0; color: var(--white); } .endcta-actions { display: flex; gap: 14px; flex-wrap: wrap; } .site-footer { background: var(--p-900); color: var(--p-200); padding: 66px 0 0; font-size: .95rem; } .foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 46px; } .site-footer h4, .site-footer h2 { color: var(--white); margin-bottom: 16px; font-size: 1rem; } .site-footer a { color: var(--p-200); } .site-footer a:hover { color: var(--acc-l); } .foot-links li { margin-bottom: 10px; } .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .87rem; } .foot-about { max-width: 44ch; } .foot-contact p { margin: 0; line-height: 1.9; } .split-body > :last-child { margin-bottom: 0; } .hero-grid > *, .svc-hero-grid > *, .split > *, .svc-grid > *, .points > *, .contact-grid > *, .steps > *, .trust-grid > *, .form-grid > * { min-width: 0; } .table-scroll { max-width: 100%; } @media (max-width: 1000px) { .hero-grid, .svc-hero-grid, .split { grid-template-columns: 1fr; gap: 38px; } .halves-flip .split-media { order: 0; } .svc-grid, .points, .contact-grid, .steps { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; } .trust-grid, .hero-proof { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .mainnav { display: none; } .burger { display: block; margin-left: auto; } .header-call { display: none; } .sec { padding: 60px 0; } .svc-grid, .points, .contact-grid, .steps, .form-grid, .trust-grid, .hero-proof { grid-template-columns: 1fr; } .hero-float, .svc-hero-float { transform: none; } .foot-grid { grid-template-columns: 1fr; } .endcta .wrap { flex-direction: column; align-items: flex-start; } } @media print { .site-header, .callbar, .util, .endcta, .burger { display: none; } } .shead-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; max-width: none; } .shead-link { font-weight: 600; font-size: .93rem; color: var(--acc-d); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: var(--acc-100); padding: 9px 18px; border-radius: var(--pill); } .shead-link::after { content: '\2192'; transition: transform var(--t); } .shead-link:hover::after { transform: translateX(4px); } .sec-navy .shead-link { background: rgba(255,255,255,.12); color: var(--acc-l); } .c-crit { font-weight: 600; color: var(--ink); width: 40%; } .ctable .c-us, .dtable .c-us { background: var(--acc-100); font-weight: 600; color: var(--ink); } .ctable thead .c-us, .dtable thead .c-us { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); } .ctable tbody tr:last-child .c-us, .dtable tbody tr:last-child .c-us { border-radius: 0 0 var(--r) var(--r); } .ctable tbody .c-them, .dtable tbody .c-them { color: var(--body-lt); } .c-yes::before { content: '\2713'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); font-size: .72rem; margin-right: 9px; vertical-align: -4px; } .c-no::before { content: '\2013'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--pill); background: var(--surf-3); color: var(--body-lt); font-size: .8rem; margin-right: 9px; vertical-align: -4px; } .figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .fig { text-align: center; } .fig img, .fig-ph { width: 100%; border-radius: var(--r-lg); box-shadow: var(--soft); display: block; } .fig-ph { aspect-ratio: 4 / 3; background-color: var(--surf-2); background-image: var(--motif); background-size: var(--motif-size); display: grid; place-items: center; color: var(--body-lt); font-size: .86rem; font-weight: 500; } .fig-cap { margin-top: 14px; } .fig-cap strong { display: inline-block; font-family: var(--f-display); font-size: .86rem; background: var(--p-50); color: var(--p-800); padding: 6px 16px; border-radius: var(--pill); } .fig-cap span { display: block; font-size: .9rem; color: var(--body-lt); margin-top: 8px; } .creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cred { background: var(--white); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; box-shadow: var(--soft); } .cred-mark { width: 52px; height: 52px; margin: 0 auto 13px; border-radius: var(--pill); background: linear-gradient(135deg, var(--p-100), var(--p-50)); color: var(--p-700); display: grid; place-items: center; } .cred strong { display: block; font-family: var(--f-display); font-size: .98rem; color: var(--ink); } .cred span { font-size: .84rem; color: var(--body-lt); } .dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .dir-card { background: var(--white); border-radius: var(--r); padding: 20px 24px; box-shadow: var(--soft); color: var(--ink); transition: transform var(--t), box-shadow var(--t); } .dir-card:hover { transform: translateY(-4px); box-shadow: var(--soft-2); color: var(--ink); } .dir-card strong { display: block; font-family: var(--f-display); font-size: 1rem; } .dir-card span { font-size: .87rem; color: var(--body-lt); } .sec-navy .dir-card { background: rgba(255,255,255,.07); color: var(--p-200); box-shadow: none; } .sec-navy .dir-card strong { color: var(--white); } .svc-meta, .svc-meta-grid { display: grid; gap: 10px; } .svc-meta-item { display: grid; grid-template-columns: 200px 1fr; gap: 22px; background: var(--surf); border-radius: var(--r); padding: 15px 22px; } .m-lbl { font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: var(--p-800); } .m-val { color: var(--body); } .olist { counter-reset: n; } .olist li { counter-increment: n; position: relative; padding-left: 50px; margin-bottom: 16px; } .olist li::before { content: counter(n); position: absolute; left: 0; top: -2px; font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--white); background: linear-gradient(135deg, var(--p-600), var(--p-800)); border-radius: var(--pill); width: 34px; height: 34px; display: grid; place-items: center; } .prose { max-width: 68ch; } .prose h2 { margin: 1.85em 0 .5em; } .prose h3 { margin: 1.5em 0 .4em; } .prose p { margin-bottom: 1.2em; } .prose > :first-child { margin-top: 0; } .prose ul { margin: 0 0 1.3em; } .prose ul li { position: relative; padding-left: 30px; margin-bottom: 10px; } .prose ul li::before { content: ''; position: absolute; left: 4px; top: .58em; width: 10px; height: 10px; border-radius: var(--pill); background: linear-gradient(135deg, var(--acc-l), var(--acc)); } .prose blockquote { background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r); padding: 22px 26px; margin: 1.7em 0; font-size: 1.07rem; color: var(--ink); } .prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--acc); } .byline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .89rem; color: var(--body-lt); margin-bottom: 30px; } .byline span { background: var(--surf); border-radius: var(--pill); padding: 6px 16px; } .legal { max-width: 74ch; } .legal h2 { font-size: 1.26rem; margin: 1.9em 0 .5em; } .legal p, .legal li { font-size: .97rem; } .legal ul { margin-bottom: 1.2em; } .legal ul li { position: relative; padding-left: 26px; margin-bottom: 8px; } .legal ul li::before { content: ''; position: absolute; left: 4px; top: .64em; width: 7px; height: 7px; border-radius: var(--pill); background: var(--line-2); } .legal-updated { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--p-800); background: var(--p-50); border-radius: var(--pill); padding: 9px 20px; margin-bottom: 32px; } .midcta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: linear-gradient(135deg, var(--acc-100), var(--surf)); border-radius: var(--r-lg); padding: 30px 34px; box-shadow: var(--soft); } .midcta h3 { margin: 0 0 5px; } .midcta p { margin: 0; font-size: .96rem; color: var(--body-lt); } .pagination { display: flex; gap: 9px; } .pagination a, .pagination span { min-width: 46px; text-align: center; padding: 12px 17px; border-radius: var(--pill); font-weight: 600; font-size: .91rem; color: var(--p-800); background: var(--p-50); } .pagination a:hover { background: var(--p-100); } .pagination [aria-current] { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.24; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '\002B'; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--pill); background: var(--acc-100); color: var(--acc-d); font-size: 1.05rem; line-height: 1; } .faq-item details[open] summary::after { content: '\2212'; } .faq-item details p { margin: 14px 0 0; } .notfound { text-align: center; padding: 30px 0 10px; } .notfound-code { font-family: var(--f-display); font-weight: 800; font-size: clamp(4.5rem, 17vw, 9.5rem); line-height: .92; letter-spacing: -.05em; background: linear-gradient(135deg, var(--p-600), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; } .notfound p { max-width: 54ch; margin: 16px auto 28px; } .notfound-acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .stickycall { display: none; } @media (max-width: 1000px) { .creds, .dir-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .figures, .creds, .dir-grid { grid-template-columns: 1fr; } .svc-meta-item { grid-template-columns: 1fr; gap: 3px; } .midcta { flex-direction: column; align-items: flex-start; } .stickycall { display: flex; gap: 10px; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 150; } .stickycall a { flex: 1; text-align: center; padding: 15px 10px; border-radius: var(--pill); font-weight: 600; font-size: .93rem; } .stickycall a:first-child { background: linear-gradient(135deg, var(--acc-l), var(--acc)); color: var(--white); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .36); } .stickycall a:last-child { background: var(--white); color: var(--p-800); box-shadow: var(--soft-2); } .header-actions .btn-amber { display: none; } .brand { font-size: .98rem; gap: 9px; line-height: 1.15; } .brand .brand-mark { width: 34px; height: 34px; flex: none; font-size: .82rem; } .site-header .wrap { min-height: 62px; gap: 12px; } } .burger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--p-800); position: relative; } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--p-800); } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .sec-navy .step p { color: var(--p-200); } .sec-navy .trust-item { background: rgba(255,255,255,.07); box-shadow: none; } .sec-navy .trust-item strong { color: var(--white); } .sec-navy .trust-item span { color: var(--p-200); } .sec-navy .faq-item { background: rgba(255,255,255,.07); box-shadow: none; } .sec-navy .faq-item p { color: var(--p-200); } @media (max-width: 760px) { .shead-link { display: inline-flex; align-items: center; min-height: 44px; } .faq-item summary { min-height: 44px; align-items: center; padding: 4px 0; } .foot-links a { display: inline-block; min-height: 40px; line-height: 40px; } .svc-crumb a { display: inline-block; min-height: 40px; line-height: 40px; } .contact-card a { display: inline-block; min-height: 44px; line-height: 44px; } .foot-bottom a { display: inline-block; min-height: 40px; line-height: 40px; } } .hero-float h2, .svc-hero-float h2 { font-size: 1.16rem; } .contact-card h2 { font-size: 1.16rem; } .site-footer h2 { font-size: inherit; } @media (max-width: 760px) { .callbar .util-items, .util .util-items { display: none; } .callbar .wrap, .util .wrap { justify-content: center; min-height: 44px; } .callbar a, .util a { display: inline-flex; align-items: center; min-height: 44px; } .foot-contact p a { display: inline-block; min-height: 40px; line-height: 40px; } } .mainnav a { padding-left: 11px; padding-right: 11px; font-size: .89rem; } @media (max-width: 1100px) { .mainnav { display: none; } .header-call { display: none; } .burger { display: block; margin-left: auto; } .site-header .wrap { position: relative; } .mainnav.is-open { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%; z-index: 120; background: var(--white); padding: 10px 14px 16px; gap: 2px; box-shadow: 0 14px 30px rgba(var(--sh-rgb), .18); } .mainnav.is-open a { padding: 12px 8px; min-height: 44px; font-size: .95rem; display: flex; align-items: center; } } .svc { position: relative; } .svc-link::before { content: ''; position: absolute; inset: 0; z-index: 1; } .svc:focus-within { transform: translateY(-6px); box-shadow: var(--soft-2); } @media (hover: none) { .svc:hover { transform: none; box-shadow: var(--soft); } } .burger { box-shadow: inset 0 0 0 1.5px var(--p-600); } .burger:hover { background: var(--p-50); } .fig img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } @media (max-width: 760px) { .hero-proof, .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .hero-proof, .trust-grid { grid-template-columns: 1fr; } } /* ========================================================================== KIT BRIDGE — appended to a kit stylesheet when a sitekit site wears one. shell_kit.py emits the kit's own legacy class contract, so nearly every element is dressed by the kit stylesheet itself. But the shared build.py writes a handful of elements as raw HTML rather than through the shell — the nav-page hero, the contact form rows, the area map panel — and those carry class names from the Newark/Signal vocabulary that no kit family defines. check.py's "classes" gate catches them: it fails a build where a class is used and no stylesheet defines it. That gate is why this file exists and why it is exactly six rules long rather than a second theme. Everything below is written against the KIT'S OWN custom properties, so it inherits each of the sixty skins rather than pinning a colour. Nothing here introduces a new colour, font or geometry. ========================================================================== */ /* build.py's nav-page hero:
The kit's own .hero is a two-column grid via .hero-grid; this variant has a single centred column, so it needs the shell width without the grid. */ .container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); } .hero-in { display: block; padding-block: clamp(38px, 6vw, 72px); } .hero-lead { max-width: 62ch; font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.16rem); line-height: 1.62; color: var(--body-lt); } /* "on ink": a button sitting on the dark hero. The kit's equivalent is .btn-white, so this inherits it rather than restating a colour. */ .btn-onink { background: var(--white); color: var(--p-800); box-shadow: var(--lift-1); } .btn-onink:hover { background: var(--p-50); } /* build.py's contact form and area map open with .split .split-top, a top-aligned variant of the kit's two-column split. */ .split-top { align-items: start; } /* the paired fields inside build.py's form */ .eform-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } /* A grid child defaults to min-width:auto, so a long value in one of these columns pushes the row wider than its container. This has clipped a table off a phone screen in this project before. */ .eform-row > * { min-width: 0; } /* Several kit families set `.hero-float { order: -1 }` so the card sits in the LEFT column on desktop — a deliberate composition. Once the grid collapses to one column that same rule puts the card above the

, and on these sites the card carries four long bullet points and a credential badge, so the page's most important heading lands about a screen and a half down. On a stacked layout the DOM order (heading first) is the right one. This only touches the collapsed breakpoint; the desktop composition is untouched. */ @media (max-width: 1000px) { .hero-float, .svc-hero-float { order: 0; } } /* -------------------------------------------------------------------------- TRUST STRIP The kit's .cred is a horizontal row: mark, label, description. build.py's trust strip passes labels of very different lengths -- "Local crew" next to "Emergency Plumber, scoped before it is priced" -- and in a row layout the long label steals the width, leaving its description wrapping one or two words per line in a ~70px column. Nothing overflowed, so the overflow and contrast checks both passed while the strip was visibly wrong. "No overflow" is not "laid out correctly". -------------------------------------------------------------------------- */ .creds .cred { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: start; column-gap: 12px; row-gap: 4px; } .creds .cred > .cred-mark { grid-row: 1 / span 2; align-self: center; } .creds .cred > strong, .creds .cred > span { grid-column: 2; min-width: 0; } .cred-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--acc); } /* build.py's area map panel on /contact */ .mapframe { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surf-2); } .mapframe iframe { display: block; width: 100%; border: 0; } .mapnote { margin-top: 10px; font-size: 0.92rem; color: var(--body-lt); } /* -------------------------------------------------------------------------- PHOTOGRAPHS No kit family sets `height: auto` on img -- every theme had only `max-width:100%; display:block`. With width/height attributes present (which they must be, for CLS), a constrained width keeps the attribute height and SQUASHES the photo. That cost a real build 28% vertical distortion, and the kit's own demos never caught it because they use CSS placeholder divs rather than real elements. -------------------------------------------------------------------------- */ img { height: auto; } /* Full-bleed hero photograph behind the hero copy. */ .hero { position: relative; isolation: isolate; } /* THE CREDENTIAL PLATE INSIDE THE HERO CARD. Every family styles `.cred strong` / `.cred span` for the `.creds` strip, which sits on a light band -- so both are dark ink. shell_kit also puts a `.cred` plate INSIDE `.hero-float`, and foundry is the one family whose hero card is dark (background: var(--p-800), color: var(--p-200)). Dark ink on that card rendered the licence class and its caption nearly invisible on six sites, while the checklist above it in the same card was white. The plate follows the card it is in. `inherit` is right rather than a fixed colour, because the card's own foreground is already correct in every family -- this only stops the strip's rule reaching in and overriding it. */ .hero-float .cred strong, .hero-float .cred span, .svc-hero-float .cred strong, .svc-hero-float .cred span { color: inherit; } /* LIGHT-HERO FAMILIES WITH A PHOTOGRAPH BEHIND THE COPY. Four of the six kit families give .hero a dark ground and light copy, so a photograph and its scrim slot straight in. cornice and shinglework do the opposite: a light ground with dark copy. Laying the same dark photograph behind those two put dark text on a dark image -- an H1 at roughly 1.3:1, on nine sites, and every gate passed it because no gate reads pixels. So the copy follows the ground. shell_kit adds `has-photo` only when a photograph is genuinely behind the hero, and these rules are scoped to it: a light-hero family with no photograph keeps its own design untouched. */ .hero.has-photo h1, .hero.has-photo .hero-sub, .hero.has-photo .hero-eyebrow, .hero.has-photo .hero-lead { color: #fff; } .hero.has-photo h1 em { color: inherit; } /* The ghost button is outlined in a dark ink that vanishes on a photograph. */ .hero.has-photo .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); } .hero.has-photo .btn-ghost:hover { background: #fff; color: var(--p-800, #14161f); border-color: #fff; } /* The light families draw the hero's own soft radial tints over the image. With a photograph behind, they only muddy it. */ .hero.has-photo::before { opacity: 0; } .hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* The hero copy sits on the photograph, so it needs its own scrim rather than relying on the section's background colour -- which the image now covers. Tuned by looking: at 0.94/0.86/0.62 the photograph was effectively invisible and the hero read as a flat dark panel, which defeats the point of having a photograph. A DIRECTIONAL GRADIENT CANNOT WORK HERE, which took two attempts to see. Some families set `.hero-float { order: -1 }` and put the card left with the copy right; others leave DOM order and put the copy left. So "densest on the left" is correct for half of them and exactly wrong for the other half — and being wrong means white body text sitting on the bright part of a photograph. Hard-coding either direction is a bug in three of six families whichever way it points. So: an EVEN scrim, strong enough that the copy holds contrast wherever the family chooses to put it, plus a soft vertical lift so the picture still reads at the edges. Measured after applying, not assumed. */ .hero-media::after { content: ""; position: absolute; inset: 0; /* ONE even layer. This was a flat .8 fill UNDER a .62/.30/.72 gradient, which composites to .86-.94 -- the photograph showed at 10% and the hero read as a flat panel. Measured on a real hero (2nd-percentile contrast under each text element): at .72 the photo shows at 28% and h1 5.8 / sub 5.0 / badge 5.4 / ghost button 5.0 all clear AA. .72 is also the worst case: white copy over a pure-white pixel stays >= 4.5:1. Lighter (.64 mid) dropped the sub-copy to 4.07. */ background: rgba(var(--p-rgb, 13, 17, 43), 0.72); } /* The stat row's captions are the one small, grey element sitting directly on the photograph (no panel): 3.0:1 at the scrim above. White, like the rest of the has-photo copy, they measure 5.1:1. */ .hero.has-photo .hero-proof span { color: #fff; } /* Stat tiles: equal height, and the caption allowed two lines without spilling past the tile's own padding. */ .hero-proof > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* Captioned photo band. */ .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .figures > * { min-width: 0; } .fig { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surf); } .fig img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .fig-cap { padding: 14px 16px 16px; } /* Explicitly reset: several families style a bare inside a card as a pill or a tag, so the caption title rendered as a full-width dark bar that read like a button. The caption is a label, not an action. */ .fig-cap strong { display: block; margin-bottom: 4px; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font-family: var(--f-display); font-size: 1.02rem; font-weight: 700; letter-spacing: normal; text-transform: none; } .fig-cap span { font-size: 0.9rem; color: var(--body-lt); line-height: 1.55; } /* -------------------------------------------------------------------------- SECTIONS THE KIT FAMILIES DO NOT HAVE Ported from fixmyslableak.com / sealwyn.com, which are the standard on this network. Written against the kit's own tokens so all sixty skins carry them, and using only tokens every family defines. -------------------------------------------------------------------------- */ /* --- price table --------------------------------------------------------- */ .prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .prices > * { min-width: 0; } .price { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surf); } .price-hot { border-color: var(--acc); box-shadow: var(--lift-1); } .price-badge { position: absolute; top: -10px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--acc); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .price-lead { font-size: 0.86rem; font-weight: 600; color: var(--body-lt); } .price-amt { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1vw + 1.1rem, 1.72rem); line-height: 1.12; color: var(--p-800); } .price-sub { font-size: 0.88rem; color: var(--body-lt); line-height: 1.5; } .price-foot { margin-top: 6px; font-size: 0.84rem; font-weight: 600; } .price-note { margin-top: 16px; font-size: 0.9rem; color: var(--body-lt); } /* On a dark band the card surfaces and figures have to invert, or the table is dark-on-dark. This is the combination the kit's own demos never had. */ .sec-navy .price, .sec-ink .price { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); } .sec-navy .price-amt, .sec-ink .price-amt { color: var(--white); } .sec-navy .price-lead, .sec-navy .price-sub, .sec-ink .price-lead, .sec-ink .price-sub { color: rgba(255, 255, 255, 0.78); } /* --- symptoms / signs ---------------------------------------------------- */ .probs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .probs > * { min-width: 0; } .prob { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 18px 18px 18px 16px; border-left: 3px solid var(--acc); background: var(--surf-2); border-radius: 0 var(--r) var(--r) 0; } .prob-body strong { display: block; font-family: var(--f-display); margin-bottom: 4px; } .prob-body p { font-size: 0.93rem; line-height: 1.6; color: var(--body-lt); } .sign-list { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .sign-list > * { min-width: 0; } .sign-h { grid-column: 1 / -1; font-family: var(--f-display); font-size: 1.02rem; } .sign { position: relative; padding: 10px 14px 10px 30px; border-radius: var(--r-sm, 6px); background: var(--surf-2); font-size: 0.92rem; line-height: 1.5; } .sign::before { content: ""; position: absolute; left: 13px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); } /* --- alert band ---------------------------------------------------------- */ .alert { background: var(--acc-d, var(--acc)); color: var(--white); } .alert .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-block: 24px; } .alert-l { min-width: 0; flex: 1 1 340px; } .alert-l strong { display: block; font-family: var(--f-display); font-size: 1.14rem; margin-bottom: 4px; } .alert-l p { margin: 0; color: rgba(255, 255, 255, 0.92); line-height: 1.55; } /* build.py's long-form prose block, used by /privacy */ .writeup { max-width: 74ch; } .writeup h2, .writeup h3 { margin-top: 1.6em; } .writeup p, .writeup li { line-height: 1.7; color: var(--body); } /* -------------------------------------------------------------------------- VERTICAL RHYTHM The shared build.py emits a run of sections that each carry the family's full block padding, and where one ends in a grid and the next opens with a heading the two paddings add up to 150px+ of empty page. It reads as if something failed to load. Tightening the gap BETWEEN adjacent same-tone sections only: the contrast between a tinted band and a plain one is doing real work and keeps its full spacing. -------------------------------------------------------------------------- */ .sec + .sec:not([class*="sec-"]) { /* REDUCED, NOT REMOVED. This was `padding-top: 0`, which collapsed every run of untinted sections into a single slab -- three sections and 1,758 unbroken pixels on a measured homepage. A seam between two plain bands should cost less than a seam between a plain and a tinted one, not nothing at all. */ padding-top: clamp(26px, 3vw, 44px); } .sec:has(+ .sec:not([class*="sec-"])) { padding-bottom: clamp(30px, 3.4vw, 52px); } /* A section that is only a heading, immediately followed by its own content section, should not pay twice for the gap between them. */ .sec > .wrap > .shead:only-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- TWO EXTRA BAND TONES The kit gives each family two tinted band tones. With every site rendering the same tone in the same slot, 22 sites ended up with an identical section rhythm -- the stylesheet and the palette were already unique by then, and the PATTERN of tinted and plain bands was still shared. That is visible to a reader scrolling two of these sites, not only to a crawler. These two extra tones let the shell rotate a site's tints by domain. Both are built from the kit's own surface and primary tokens, so they inherit every one of the sixty skins rather than pinning a colour. -------------------------------------------------------------------------- */ .sec-soft { background: linear-gradient( 180deg, rgba(var(--p-rgb, 13, 17, 43), 0.045) 0%, rgba(var(--p-rgb, 13, 17, 43), 0.015) 100% ), var(--surf); } .sec-mist { background: var(--surf-3, var(--surf-2)); } /* Keep the same-tone rhythm rule working with the new tones: a tinted band next to a plain one keeps its full spacing, two of a kind do not. */ .sec-soft + .sec-soft, .sec-mist + .sec-mist { padding-top: clamp(26px, 3vw, 44px); } /* ========================================================================== SECTION LEGIBILITY Measured on a built homepage before this block existed: 15 sections, 3 distinct backgrounds, no borders anywhere, and six sections with no top padding. The page read as one continuous slab, which is exactly what a reader complained about. The tints below are deliberately built from --p-rgb, the site's own primary, rather than from a fixed grey. Pinning a grey would make all sixty kit skins share two band colours, which is the footprint this whole toolchain exists to avoid. Derived from the primary, each skin tints in its own hue and the STRENGTH is what is being guaranteed here, not the colour. -------------------------------------------------------------------------- */ /* Tone one. The kit shipped this at ~1.06:1 against white, which is not a band, it is a rumour. 0.14 alpha over white puts a typical dark primary at about 1.32:1 -- past the 1.25 floor with room for a paler palette. */ .sec-cream, .sec-soft { background: rgba(var(--p-rgb, 20, 36, 35), 0.14); } /* Tone two, far enough from tone one to read as a different band rather than a shade of it: about 1.50:1 on the same primary. */ .sec-mist, .sec-cream-2 { background: rgba(var(--p-rgb, 20, 36, 35), 0.2); } /* THE RULE THAT CANNOT FAIL. A tint can be imperceptible on a pale palette, on a dim monitor, or to a reader without full colour vision. A line cannot. EVERY section boundary gets a hairline, not only the same-tone ones -- scoping it to same-tone pairs left a tinted/plain seam depending entirely on the tint being perceptible, which is the thing that failed in the first place. */ .sec + .sec { border-top: 1px solid rgba(var(--p-rgb, 20, 36, 35), 0.12); } /* The closer already carries its own heavy top border in every family; it must not gain a second hairline on top of it. */ .endcta { border-top-width: 6px; } /* ========================================================================== READABILITY Measured on a built homepage: paragraph line length ran from 75 to 116 characters, because some blocks set a max-width and others set `max-width: none`. Comfortable prose is 45-75 characters per line; 116 is roughly double, and it is the single biggest reason these pages felt hard to read even where the content was fine. Body size drifted too -- 15.2px in some sections, 17.6px in others, on the same page. -------------------------------------------------------------------------- */ /* SELF-LIMITING BY DESIGN. In a narrow grid cell the cell is already narrower than 68 characters, so this does nothing there. In a full-width text block it caps the measure. One rule, no exceptions to maintain. */ .sec p, .sec li, .writeup p, .writeup li { /* 46ch, not the 68ch this started at. The `ch` unit is the width of the "0" glyph, which in these faces is considerably wider than the average character -- 68ch measured out at 775px and 114 real characters per line. 46ch lands around 70-75, which is the comfortable range. */ max-width: 46ch; } /* A centred block keeps its measure centred rather than hugging the left. */ .sec[style*="text-align:center"] p, .headline p, .sec-head p { margin-left: auto; margin-right: auto; } /* Nothing below 16px in running prose. The 15.2px blocks were small enough to read as fine print on a page whose whole argument is that it is being straight with you. */ .sec p, .sec li { font-size: clamp(16px, 1.02rem, 17.5px); line-height: 1.62; } /* Table and card text may be smaller, but not by much, and not below 15px. */ .sec table, .sec .card p, .sec figcaption { font-size: clamp(15px, 0.95rem, 16px); } /* A DIRECTORY CARD WITH NOWHERE TO GO. page_process and page_faq list a figure per lane with no destination; those were rendered as anchors to "" -- a link to the page you are already on. They are plain divs now, so the hover invert that says "this is clickable" is turned back off. */ .dir-flat { cursor: default; } .dir-flat:hover { background: transparent; color: var(--ink); } .dir-flat:hover span { color: var(--body-lt); } /* 2026-10-06 (waterextractionbrentwood): the header wrapped at 1440px -- a two-word brand broke onto two lines, "Our Process" broke, and the call button squeezed to two lines -- and the hero stat labels were set in the light hero-text colour on white cards, so they vanished. */ .site-header .brand, .mainnav a, .header-actions .btn { white-space: nowrap; } @media (max-width: 1599px) { .header-call { display: none; } } .hero-proof > div > span { display: block; margin-top: 6px; color: var(--body) !important; }