/* ========================================================================== HVAC BEACON — shared tokens + components Extracted from lionhomeservice.com (captured 2026-07-27; WordPress, FoundationPress parent with a "lionhomeservice2025" child theme, Slick carousels, Formidable Forms, WP Rocket, EWWW). Northern Colorado whole home services: heating, cooling, plumbing, drains, septic, electrical. PHASE 2 CORRECTIONS, three of them, all from the gap between declared and rendered CSS. 1. THE THEME DECLARES NO :root CUSTOM PROPERTIES AT ALL. Every colour in the source is a literal hex inside a rule. So the dead-token sweep came back clean for the uninteresting reason that there was no token block to check. The declared-vs-rendered gap had to be closed by ranking declarations and testing the top of that list against the live DOM. 2. THREE DECLARED COLOURS PAINT NOTHING. #0489bb sits ninth by declaration count with 327 declarations and is Foundation's stock link blue; the child theme overrides it later with a:focus,a:hover{color:#fedd00}. #ffcb08 has 212 declarations and paints zero elements, a superseded amber. #ffe432 has 100 and paints zero at rest, but it is not dead: it is the hover fill on one nav item, recorded below as such. Ranking by declaration count would have made a Foundation default the third brand colour. 3. THE PAGE REQUESTS THE WRONG FONTS. The links Cabin and Roboto from Google Fonts and the theme's font-family stacks name Cabin as the first fallback everywhere. Neither carries the render. The live census counts Montserrat on 376 elements and League Spartan on the display headings. Both are free Google families, self-hosted by the source through WP Rocket's font cache, so there is no substitution here and no display metrics to re-tune. Reading the would have produced a Cabin and Roboto system. THE IDENTITY is signal yellow on black over white. Yellow measures 15.56:1 against black and 1.35:1 against white, so in this kit the accent is a GROUND that carries black ink, and it becomes a text colour only on dark bands. The source already works this way everywhere the colour works. GEOMETRY is two registers, both the source's. Square by default (the radius census returns 0px on 149 painted boxes) and a 1em capsule on buttons, review cards and content panels (15.3px to 19.2px rendered, because the source expresses it in em). 7 of 78 buttons are true pills. Shadows are almost absent: elevation is carried by hairline borders. TWO SIGNATURE DIVIDERS, both shipped by the source as raster PNGs and both authored here as inline SVG so they recolour with the palette and stay crisp at any width. The layered mountain ridge closes every hero. The three-layer swoosh (navy, yellow, white) opens the locations band. Making them SVG is the one deliberate execution change in this kit and it is recorded in brand-spec.md. TWO COEXISTING SYSTEMS ON THE SOURCE. Every page runs the legacy theme except /fort-collins/, a newer pilot with its own palette (#f5c100 gold, a #1a1e2c navy stack, 5px radius, League Spartan buttons). The pilot is a single page, not a template backing many, so the legacy system is canonical here and the pilot's four patterns are carried in re-toned to canonical tokens. The 5px register survives as --radius-sm because it is genuinely a second geometry the source uses. ONE INVENTION, declared. The source ships no distinct focus ring; it reuses hover, and Foundation's select:focus blue is dead. An accessible ring is authored below. Nothing else in this file is invented. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700;800;900&family=Montserrat:wght@400;500;600;700;800&display=swap'); :root { /* COLOR — ink. The source body and heading ink is pure #000000; 294 text leaves on the homepage compute to rgb(0,0,0). Kept, with softened derivatives for long-form copy. */ --ink: #000000; --ink-soft: rgba(0, 0, 0, .80); --ink-muted: rgba(0, 0, 0, .62); --ink-quiet: rgba(0, 0, 0, .45); /* doc chrome only, never body copy */ /* COLOR — brand. Yellow is the identity: logo mark, nav active pill, every primary CTA, every hover fill, footer links. --accent-deep is the navy the source uses for its secondary button and for heading ink. --accent-hover is the one nav item's hover fill, real but never at rest. */ --accent: #fedd00; --accent-deep: #140644; --accent-hover: #ffe432; --accent-soft: rgba(254, 221, 0, .14); /* COLOR — grounds */ --paper: #ffffff; --paper-alt: #f1f1f1; --tint: #fcffe7; /* the one tinted band, "Lion Gives Back" */ --band-dark: #000000; --band-slate: #1c1c1c; /* the CTA panel ground */ /* COLOR — on-dark text */ --on-dark: #ffffff; --on-dark-muted: rgba(255, 255, 255, .84); --on-dark-quiet: rgba(255, 255, 255, .66); /* COLOR — rules. The source draws card and list borders in near-black (183 rendered occurrences of #1a1919) and panel dividers in #d3d3d3. */ --border: #1a1919; --border-soft: rgba(0, 0, 0, .16); --rule: #d3d3d3; /* TYPE — both families match the source exactly. No substitution. */ --font-display: 'League Spartan', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; /* TYPE — fluid ramp. Desktop targets measured at 1440: display 54 / h2 43 / h3 24 / h4 18 / lede 20 / body 16 / small 13. The display face is wide and set uppercase, so the low end of every clamp is pulled down harder than usual: a 54px uppercase League Spartan headline does not fit a 375px viewport at any sane scale. */ --text-display: clamp(1.85rem, 3.1vw + 1rem, 3.375rem); --text-h2: clamp(1.55rem, 2.1vw + .95rem, 2.6875rem); --text-h3: clamp(1.15rem, .7vw + 1rem, 1.5rem); --text-h4: 1.125rem; --text-lede: clamp(1rem, .45vw + .9rem, 1.25rem); --text-small: .8125rem; --lead-display: 1.25; /* the source's 54/67.5 and 46.4/64.96 */ /* SPACE */ --gap: 24px; --gutter: 2rem; --section: 88px; --section-sm: 56px; --section-lg: 120px; --maxw: 1200px; /* SHAPE — two registers, both extracted. See the header note. */ --radius: 16px; /* the 1em capsule, rendered 15.3 to 19.2px */ --radius-panel: 22px; --radius-sm: 5px; /* the pilot template's register */ --radius-disc: 50%; --radius-pill: 999px; /* The source's only meaningful shadow, on the review card. */ --shadow: 0 1px 3px 1px rgba(0, 0, 0, .2); --shadow-panel: 0 0 3px rgba(0, 0, 0, .4); --t-fast: 250ms; /* the source's transition on every hover */ --ease: cubic-bezier(.22, .61, .36, 1); } /* ==== base ============================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); background: var(--paper); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em; font-weight: 800; line-height: var(--lead-display); text-transform: uppercase; } h1, .h1, .display { font-size: var(--text-display); font-weight: 700; } h2, .h2 { font-size: var(--text-h2); } h3, .h3 { font-size: var(--text-h3); } h4, .h4 { font-size: var(--text-h4); letter-spacing: .01em; } /* Sentence-case modifier. The source sets nearly every heading uppercase and that is the brand, so uppercase is the default and this is the opt-out for long headlines rather than the other way round. */ .case-sentence { text-transform: none; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } .lede { font-size: var(--text-lede); line-height: 1.6; color: var(--ink-muted); } .small { font-size: var(--text-small); } .fine { font-size: var(--text-small); color: var(--ink-muted); } img { max-width: 100%; height: auto; display: block; } /* THE ONE INVENTION. The source has no focus ring to extract: it reuses its hover state, and Foundation's select:focus blue paints nowhere. */ :focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible, .band-dark :focus-visible { outline-color: var(--accent); } /* ==== layout ============================================================ */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); } .container-wide { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section) 0; } .section.tight { padding: var(--section-sm) 0; } .section.wide { padding: var(--section-lg) 0; } .section.alt { background: var(--paper-alt); } .section.tinted { background: var(--tint); } .section-head { max-width: 780px; margin: 0 auto 2.5rem; text-align: center; } .section-head p { color: var(--ink-muted); } .section-head.left { margin-left: 0; text-align: left; } /* Dark bands. The descendant selector below reaches into anything inside, INCLUDING components that paint their own light ground, so every such component reasserts its ink at higher specificity in the LIGHT-GROUND REGISTER block near the end of this file. Add new ones there. */ .band-dark { background: var(--band-dark); color: var(--on-dark-muted); } .band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-dark); } .band-dark p { color: var(--on-dark-muted); } .band-dark .lede { color: var(--on-dark-muted); } /* ==== buttons =========================================================== Extracted. .heroBtn on the source is a white capsule carrying black ink that fills yellow on hover; .heroBtn.alt starts yellow and fills white. Both transition background-color over 250ms. */ .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; padding: .85em 1.5em; border-radius: var(--radius); border: 1px solid transparent; background: var(--paper); color: var(--ink); text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .btn:hover { background: var(--accent); color: var(--ink); } .btn-accent { background: var(--accent); color: var(--ink); } .btn-accent:hover { background: var(--paper); color: var(--ink); } .btn-ink { background: var(--ink); color: var(--on-dark); } .btn-ink:hover { background: var(--accent); color: var(--ink); } .btn-navy { background: var(--accent-deep); color: var(--on-dark); } .btn-navy:hover { background: var(--accent); color: var(--ink); } /* Outline capsule for use over photography and on dark bands. */ .btn-outline { background: rgba(0, 0, 0, .35); color: var(--on-dark); border-color: rgba(255, 255, 255, .55); } .btn-outline:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); } .btn-sm { font-size: .8125rem; padding: .7em 1.1em; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; } .btn-lg { font-size: 1.1rem; padding: 1em 1.9em; } .btn-square { border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 800; } .btn-block { width: 100%; justify-content: center; } .actions { display: flex; flex-wrap: wrap; gap: 14px; } .actions.center { justify-content: center; } /* ==== utility bar ======================================================= */ .utility-bar { background: var(--paper); border-bottom: 1px solid var(--border-soft); font-size: var(--text-small); padding: 16px 0 14px; } .utility-bar .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .utility-bar .u-left, .utility-bar .u-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .utility-bar .u-right { align-items: flex-end; text-align: right; } .utility-bar .u-label { text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; color: var(--ink-muted); } .utility-bar .u-phone { font-family: var(--font-body); font-weight: 600; font-size: 1.4rem; color: var(--ink); text-decoration: none; line-height: 1.1; } .utility-bar .u-note { font-weight: 700; color: var(--ink); } .utility-bar .u-logo img { width: 190px; } .utility-bar .u-btns { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .utility-bar .container { grid-template-columns: 1fr; justify-items: center; text-align: center; } .utility-bar .u-right { align-items: center; text-align: center; } } /* ==== nav (house Pattern D) ============================================= */ .nav { background: var(--paper-alt); border-bottom: 1px solid var(--border-soft); } .nav > .container { display: flex; align-items: center; gap: 20px; padding-top: 0; padding-bottom: 0; min-height: 46px; } .nav .brand-mark { display: none; } .nav .links { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; flex: 1; min-width: 0; } .nav .links a { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--ink); padding: 15px 14px; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav .links a:hover { background: var(--paper); color: var(--ink); } .nav .links a.is-highlight { background: var(--accent); } .nav .links a.is-highlight:hover { background: var(--accent-hover); } .nav .actions { display: flex; align-items: center; gap: 10px; } .nav .nav-search { display: flex; border: 1.5px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); } .nav .nav-search input { border: 0; padding: 8px 12px; font-family: var(--font-body); font-size: .8125rem; width: 160px; background: transparent; color: var(--ink); } .nav .nav-search input:focus { outline: none; } .nav .nav-search:focus-within { border-color: var(--ink); } .nav .nav-search button { border: 0; background: transparent; cursor: pointer; padding: 0 12px; color: var(--ink); } @media (max-width: 768px) { .nav .actions { display: none; } } /* ==== signature: layered mountain ridge ================================= The source ships this as a 2600x358 PNG pulled up over the band above with a negative top margin (-4.4em on the homepage, -1.4em to -3.5em on the service variant across breakpoints). Authored here as inline SVG so it recolours with the palette. Three overlapping ridge silhouettes. */ .ridge svg { display: block; width: 100%; height: auto; } /* The ridge is 120/1440 of the container width tall, so the overlap has to be expressed in vw too. A fixed -3.2rem exceeded the whole graphic at 375px and left a strip of the dark hero showing below it. */ .ridge { display: block; position: relative; z-index: 2; margin-top: -4vw; pointer-events: none; } .ridge.compact { margin-top: -2.5vw; } /* ==== signature: three-layer swoosh ===================================== Navy, yellow and white sweeping arcs. On the source these are baked into one background raster on the locations band, which is also pulled up over the band above (top:-15em, -22em at large). Authored as SVG here. */ .swoosh { display: block; position: relative; z-index: 3; margin-bottom: -1px; pointer-events: none; } .swoosh svg { display: block; width: 100%; height: auto; } /* ==== hero: video / photo ============================================== Text sits over photography, so the container declares a solid dark background-color under the image. That is correct practice and it also keeps the contrast walker honest, which resolves painted backgrounds only. */ .hero-photo { position: relative; background-color: var(--band-dark); color: var(--on-dark); overflow: hidden; } .hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; } .hero-photo .hero-mark { position: absolute; left: -3%; top: 50%; transform: translateY(-50%); width: 26%; max-width: 340px; opacity: .9; pointer-events: none; } .hero-photo > .container { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: 7rem; text-align: center; } /* The source sets the mark bleeding off the left and the headline centred in the remaining width. Below 980px the mark is dropped rather than crowded. */ @media (min-width: 981px) { .hero-photo > .container { padding-left: clamp(2rem, 20%, 300px); } } @media (max-width: 980px) { .hero-photo .hero-mark { display: none; } } .hero-photo h1, .hero-photo .display { color: var(--on-dark); margin-bottom: 1.2rem; } .hero-photo .lede { color: var(--on-dark-muted); max-width: 640px; margin: 0 auto 1.8rem; } .hero-photo .actions { justify-content: center; } /* Left-aligned service variant, per /cooling/. */ .hero-photo.hero-left > .container { text-align: left; } .hero-photo.hero-left .lede { margin-left: 0; } .hero-photo.hero-left .actions { justify-content: flex-start; } .hero-photo.hero-left .hero-bg { object-position: right center; } /* Inner page banner: shorter, no CTAs. */ .page-banner { padding: 0; } .page-banner > .container { padding-top: 4rem; padding-bottom: 4.5rem; } /* ==== intro split + icon grid ========================================== */ .intro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; } .intro-split > * { min-width: 0; } @media (max-width: 880px) { .intro-split { grid-template-columns: 1fr; gap: 2.5rem; } } .icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); gap: 2rem 1rem; } .icon-grid > * { min-width: 0; } .icon-tile { text-align: center; text-decoration: none; color: var(--ink); display: block; } .icon-tile .glyph { height: 62px; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; } .icon-tile .glyph svg { width: 52px; height: 52px; stroke: var(--ink); fill: none; stroke-width: 1.6; } .icon-tile span { font-size: .9375rem; font-weight: 500; } .icon-tile:hover { color: var(--accent-deep); } .icon-tile:hover .glyph svg { stroke: var(--accent-deep); } /* ==== why-list: bordered checklist rows ================================ */ .why-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px 26px; list-style: none; padding: 0; margin: 0; } .why-list > li { min-width: 0; } .why-list li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px 10px 10px; font-size: .9375rem; color: var(--ink); transition: color var(--t-fast) var(--ease); } .why-list li:hover { color: var(--ink); background: var(--accent-soft); } .why-list .chip { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px; background: var(--accent); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; } .why-list .chip svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.8; } /* ==== review rail over photo =========================================== */ .review-rail { position: relative; background-color: var(--band-dark); color: var(--on-dark); overflow: hidden; } .review-rail .rail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .review-rail > .container { position: relative; z-index: 2; padding-top: 4.5rem; padding-bottom: 4.5rem; text-align: center; } .review-rail .rail-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw + .9rem, 2.3rem); font-weight: 500; text-transform: uppercase; color: var(--accent); line-height: 1.2; margin: 0 0 .2em; } .review-rail .rail-sub { font-weight: 800; color: var(--on-dark); margin-bottom: 2rem; } .review-rail .rating-line { margin: 1.5rem 0 1.25rem; color: var(--on-dark-muted); font-size: .9375rem; } .review-rail .rating-line b { color: var(--on-dark); } .review-card { background: var(--paper); border-radius: var(--radius); padding: 1.8rem; text-align: left; box-shadow: var(--shadow); max-width: 660px; margin: 0 auto; } .review-card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .review-card .stars { display: flex; gap: 3px; } .review-card .stars svg { width: 20px; height: 20px; fill: var(--accent); stroke: var(--ink); stroke-width: .8; } .review-card .gmark { width: 22px; height: 22px; } .review-card .quote { color: var(--ink-soft); margin-bottom: 1rem; } .review-card .who { font-weight: 700; color: var(--ink); font-size: .9375rem; margin: 0; } .dots { display: flex; gap: 10px; justify-content: center; margin-top: 1.25rem; } .dots span { width: 9px; height: 9px; border-radius: var(--radius-disc); background: var(--on-dark-quiet); } .dots span.on { background: var(--accent); } /* Horizontal card rail that degrades to swipe on phones. */ .card-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .card-rail > * { scroll-snap-align: start; min-width: 0; } /* ==== badge strip ====================================================== */ .badge-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3rem; } .badge-strip .badge { height: 62px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0 1.25rem; text-align: center; } /* ==== guarantee panel over photo ======================================= */ .guarantee-band { position: relative; background-color: var(--band-dark); padding: var(--section) 0; overflow: hidden; } .guarantee-band .band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; } .guarantee-band > .container { position: relative; z-index: 2; } .guarantee-panel { background: rgba(255, 255, 255, .93); background-color: rgba(255, 255, 255, .93); border-radius: var(--radius-panel); padding: 3rem clamp(1.25rem, 3vw, 3.5rem); box-shadow: var(--shadow-panel); } .guarantee-panel > h2 { text-align: center; margin-bottom: 2rem; color: var(--ink); } .guarantee-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 0 3rem; } .guarantee-list > * { min-width: 0; } .guarantee-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); } .guarantee-item .shield { flex: 0 0 auto; width: 30px; height: 34px; margin-top: 3px; } .guarantee-item h4 { margin-bottom: .35em; color: var(--ink); } .guarantee-item p { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* ==== tip cards ======================================================== */ .tip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; } .tip-cards > * { min-width: 0; } .tip-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; } .tip-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .tip-card .body { padding: 1.25rem; text-align: center; flex: 1; } .tip-card h3 { font-size: 1.0625rem; margin-bottom: .5em; } .tip-card p { font-size: .875rem; color: var(--ink-soft); margin: 0; } .tip-card .more { display: inline-block; background: var(--ink); color: var(--on-dark); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 5px 11px; border-radius: 3px; text-decoration: none; margin-left: .35em; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tip-card .more:hover { background: var(--accent); color: var(--ink); } /* ==== giving band ====================================================== */ .give-band { background: var(--tint); } .give-split { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 2.5rem; align-items: center; } .give-split > * { min-width: 0; } @media (max-width: 880px) { .give-split { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .give-split img { border-radius: var(--radius); } /* ==== locations band =================================================== */ .locations-band { position: relative; background-color: #0b1c2c; color: var(--on-dark); overflow: hidden; } .locations-band .loc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; } .locations-band .loc-mark { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 26%; max-width: 320px; opacity: .16; pointer-events: none; } .locations-band > .container { position: relative; z-index: 2; padding-top: 4rem; padding-bottom: 5rem; } .locations-band .loc-title { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw + 1rem, 2.8rem); font-weight: 700; letter-spacing: .04em; color: var(--on-dark); text-align: center; text-transform: capitalize; margin: 0 0 2rem; } .city-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px 20px; list-style: none; margin: 0; padding: 0; text-align: center; } .city-list > li { min-width: 0; } .city-list a { display: block; padding: 10px 8px; font-size: 1.125rem; color: var(--on-dark); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .city-list a:hover { background: rgba(0, 0, 0, .55); color: var(--accent); } /* ==== article + sidebar layout ========================================= */ .with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 3rem; align-items: start; } .with-sidebar > * { min-width: 0; } @media (max-width: 980px) { .with-sidebar { grid-template-columns: 1fr; } } .article h2 { margin-top: 2.2rem; } .article h2:first-child { margin-top: 0; } .article .article-lede { font-style: italic; color: var(--ink-soft); } .article ul { padding-left: 1.2rem; } .article li { margin-bottom: .4em; } .article a { color: var(--accent-deep); text-decoration: underline; } .article a:hover { color: #2f3da2; } .side-menu { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; } .side-menu > h3 { background: var(--ink); color: var(--on-dark); margin: 0; padding: .75em 1em; font-size: 1.125rem; text-align: center; } .side-menu ul { list-style: none; margin: 0; padding: 0; } .side-menu li + li { border-top: 1px solid var(--border-soft); } .side-menu a { display: block; padding: .8em 1.15em; text-decoration: none; color: var(--ink); font-size: .9375rem; transition: background-color var(--t-fast) var(--ease); } .side-menu a:hover { background: var(--accent); } .side-panel { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 2rem; background: var(--paper); } .side-review { padding: 1rem 0; border-bottom: 1px solid var(--border-soft); } .side-review:last-child { border-bottom: 0; } .side-review .stars { display: flex; gap: 2px; justify-content: center; margin-bottom: .6rem; } .side-review .stars svg { width: 16px; height: 16px; fill: var(--ink); } .side-review p { font-size: .8125rem; color: var(--ink-soft); margin-bottom: .5em; } .side-review .who { font-weight: 700; font-size: .8125rem; color: var(--ink); } .coupon-card { border: 2px dashed var(--ink); border-radius: var(--radius); padding: 1.5rem 1.25rem; text-align: center; background: var(--accent-soft); background-color: var(--tint); } .coupon-card .amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: var(--ink); line-height: 1; } .coupon-card h4 { margin: .5em 0 .35em; } .coupon-card .terms { font-size: .75rem; color: var(--ink-muted); margin-bottom: 1rem; } /* ==== CTA band with cutout figure ====================================== */ .cta-figure { position: relative; background: var(--band-slate); background-color: var(--band-slate); border-radius: var(--radius-panel); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 1rem; align-items: end; } .cta-figure > * { min-width: 0; } .cta-figure .cta-body { padding: 2.5rem; } .cta-figure h2 { color: var(--accent); margin-bottom: .8em; } .cta-figure p { color: var(--on-dark-muted); } .cta-figure .cta-figure-img { align-self: end; } .cta-figure .cta-figure-img img { width: 100%; object-fit: cover; object-position: top center; } @media (max-width: 880px) { .cta-figure { grid-template-columns: 1fr; } .cta-figure .cta-figure-img { display: none; } .cta-figure .cta-body { padding: 2rem 1.5rem; } } /* ==== callout / feature split ========================================== */ .feature-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; } .feature-split > * { min-width: 0; } @media (max-width: 880px) { .feature-split { grid-template-columns: 1fr; gap: 2rem; } } .feature-split img { border-radius: var(--radius); } .feature-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; } .feature-pair > * { min-width: 0; } .feature-pair .pair-item { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); } .feature-pair h4 { letter-spacing: .04em; } /* ==== video block ====================================================== */ .video-block { position: relative; border-radius: var(--radius); overflow: hidden; background-color: var(--band-dark); aspect-ratio: 16 / 9; } .video-block img { width: 100%; height: 100%; object-fit: cover; opacity: .75; } .video-block .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: var(--radius-disc); background: var(--accent); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--t-fast) var(--ease); } .video-block .play:hover { background: var(--paper); } .video-block .play svg { width: 26px; height: 26px; fill: var(--ink); margin-left: 4px; } .video-block .caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .78); background-color: rgba(0, 0, 0, .78); color: var(--on-dark); padding: .8rem 1.2rem; font-size: .875rem; } /* ==== FAQ accordion ==================================================== */ .faq-stack { border-top: 1px solid var(--border-soft); } .faq-item { border-bottom: 1px solid var(--border-soft); } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: 1.1rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--ink-muted); } .faq-item[open] summary::after { content: '\2013'; } .faq-item .answer { padding-bottom: 1.2rem; color: var(--ink-soft); } /* Dark register, per the pilot page. */ .faq-stack.on-dark { border-top-color: rgba(255, 255, 255, .2); } .faq-stack.on-dark .faq-item { border-bottom-color: rgba(255, 255, 255, .2); } .faq-stack.on-dark .faq-item summary { color: var(--on-dark); } .faq-stack.on-dark .faq-item summary::after { color: var(--on-dark-quiet); } .faq-stack.on-dark .faq-item .answer { color: var(--on-dark-muted); } /* ==== notice banner ==================================================== */ .notice { background: var(--accent); background-color: var(--accent); color: var(--ink); border-radius: var(--radius); padding: 1.1rem 1.5rem; font-weight: 600; text-align: center; } .notice a { color: var(--ink); } /* ==== book offer ======================================================= */ .book-offer { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 2rem; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .book-offer > * { min-width: 0; } @media (max-width: 880px) { .book-offer { grid-template-columns: 1fr; text-align: center; justify-items: center; } } /* ==== reviews index grid =============================================== */ .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 24px; } .review-grid > * { min-width: 0; } .review-tile { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); transition: transform var(--t-fast) var(--ease); } .review-tile:hover { transform: scale(1.02); } .review-tile h4 { font-size: 1rem; margin-bottom: .6em; } .review-tile .stars { display: flex; gap: 3px; margin-bottom: .8rem; } .review-tile .stars svg { width: 17px; height: 17px; fill: var(--ink); } .review-tile p { font-size: .9rem; color: var(--ink-soft); } /* ==== blog archive + post ============================================== */ .post-list { display: grid; gap: 2rem; } .post-row { border-bottom: 1px solid var(--border-soft); padding-bottom: 2rem; } .post-row h2 { font-size: var(--text-h3); margin-bottom: .5em; } .post-meta { font-size: .8125rem; color: var(--ink-muted); margin-bottom: .8em; } .read-more { color: var(--accent-deep); text-decoration: underline; font-size: .9rem; } .read-more:hover { color: #232e7b; } .cat-list { list-style: none; margin: 0; padding: 0; } .cat-list li + li { border-top: 1px solid var(--border-soft); } .cat-list a { display: block; padding: .6em .2em; text-decoration: none; color: var(--ink); font-size: .9375rem; } .cat-list a:hover { color: var(--accent-deep); } .search-field { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .search-field input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font-family: var(--font-body); font-size: .9375rem; } .search-field input:focus { outline: none; } .search-field button { border: 0; background: var(--ink); color: var(--on-dark); padding: 0 16px; cursor: pointer; font-weight: 600; } /* In a narrow rail the button steals enough width to push the field below the 150px minimum, so the two stack instead of sharing a row. */ @media (max-width: 560px) { .search-field { flex-wrap: wrap; } .search-field input { flex: 1 1 100%; } .search-field button { flex: 1 1 100%; padding: 10px 16px; } } /* ==== locations index ================================================== */ .map-slot { background: var(--paper-alt); border: 1px solid var(--border-soft); border-radius: var(--radius); aspect-ratio: 16 / 7; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: .9375rem; } .city-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 24px; list-style: none; padding: 0; margin: 0; } .city-index > li { min-width: 0; } .city-index a { text-decoration: none; color: var(--ink); font-size: .9375rem; } .city-index a:hover { color: var(--accent-deep); text-decoration: underline; } /* ==== careers ========================================================== */ .benefit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; } .benefit-list > li { min-width: 0; } .benefit-list li { border-left: 4px solid var(--accent); background: var(--paper-alt); padding: .9rem 1.1rem; font-size: .9375rem; color: var(--ink); } .job-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.1rem 1.4rem; } .job-row h4 { margin: 0; } .job-row .where { font-size: .875rem; color: var(--ink-muted); } /* ==== forms ============================================================ */ .form-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 2rem; background: var(--paper); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .form-grid > * { min-width: 0; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 880px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .35rem; } .field label { font-size: .8125rem; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: .9375rem; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); min-width: 0; width: 100%; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); border-width: 1.5px; } .field textarea { min-height: 130px; resize: vertical; } /* ==== membership plan ================================================== */ .plan-panel { border: 2px solid var(--ink); border-radius: var(--radius-panel); padding: 2.25rem; background: var(--paper); } .plan-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; } .plan-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-soft); } .plan-list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; stroke: var(--ink); fill: none; stroke-width: 2; } /* ==== coupon grid ====================================================== */ .coupon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; } .coupon-grid > * { min-width: 0; } /* ==== pilot register: dark service tiles =============================== From /fort-collins/, re-toned to canonical tokens. The pilot's own 5px radius survives as --radius-sm because it is genuinely a second geometry the source uses. */ .svc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; } .svc-tiles > * { min-width: 0; } .svc-tile { background: var(--band-dark); background-color: var(--band-dark); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 1.8rem 1.5rem; text-align: center; } .svc-tile .glyph { height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .svc-tile .glyph svg { width: 38px; height: 38px; stroke: var(--accent); fill: none; stroke-width: 1.6; } .svc-tile h3 { color: var(--on-dark); font-size: 1rem; letter-spacing: .03em; margin-bottom: .5em; } .svc-tile p { color: var(--on-dark-muted); font-size: .875rem; margin: 0; } /* ==== pilot register: comparison tables ================================ Wide tables scroll inside their own container rather than pushing the page sideways. */ .table-scroll { overflow-x: auto; border-radius: var(--radius-sm); } .cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9375rem; background: var(--paper); } .cmp-table th, .cmp-table td { padding: 1rem 1.2rem; text-align: left; vertical-align: top; } .cmp-table thead th { font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; background: var(--band-dark); color: var(--on-dark); } .cmp-table thead th.is-ours { background: var(--accent); color: var(--ink); } .cmp-table tbody tr { border-bottom: 1px solid var(--border-soft); } .cmp-table tbody th { background: var(--band-dark); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; width: 24%; } .cmp-table td.is-ours { background: var(--tint); color: var(--ink-soft); } .cmp-table td.is-them { color: var(--ink-muted); } /* ==== pilot register: closing CTA with radial glow ===================== Every gradient surface declares a solid background-color floor. */ .cta-glow { position: relative; background-color: var(--paper); background-image: radial-gradient(circle at 85% 30%, var(--accent-soft), transparent 55%); text-align: center; overflow: hidden; } .cta-glow > .container { position: relative; z-index: 2; } .cta-glow .lede { margin: 0 auto 2rem; max-width: 640px; } /* ==== rating chip ====================================================== */ .rating-chip { display: inline-flex; align-items: center; gap: .5rem; background: rgba(0, 0, 0, .55); background-color: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); padding: .45rem 1rem; font-size: .8125rem; font-weight: 600; color: var(--on-dark); margin-bottom: 1.25rem; } .rating-chip svg { width: 15px; height: 15px; fill: var(--accent); } /* ==== brand footer ===================================================== */ .footer { background: var(--band-dark); background-color: var(--band-dark); color: var(--on-dark-muted); padding: var(--section) 0 2rem; } .footer h4 { color: var(--on-dark); font-size: .9375rem; letter-spacing: .06em; margin-bottom: 1em; } .footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 2.5rem; } .footer .cols > * { min-width: 0; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: .5em; } .footer a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--t-fast) var(--ease); } .footer a:hover { color: var(--accent); font-weight: 700; } .footer .foot-logo { width: 200px; margin-bottom: 1.25rem; } .footer .foot-phone { font-size: 1.35rem; font-weight: 600; color: var(--on-dark); text-decoration: none; } .footer .socials { display: flex; gap: 10px; margin-top: 1rem; } .footer .socials a { width: 36px; height: 36px; border-radius: var(--radius-disc); border: 1px solid var(--on-dark-quiet); display: flex; align-items: center; justify-content: center; transition: background-color var(--t-fast) var(--ease); } .footer .socials a:hover { background: var(--accent); } .footer .socials svg { width: 17px; height: 17px; fill: currentColor; } .footer .legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; font-size: var(--text-small); color: var(--on-dark-muted); } /* ==== LIGHT-GROUND REGISTER ============================================= .band-dark p and .footer a are descendant rules, so they reach into any component nested inside that paints its own LIGHT ground: card, panel, chip, table cell. Each such component reasserts its own ink here at higher specificity. Never weaken the band rule instead. REGISTER NEW LIGHT-GROUND COMPONENTS HERE AS YOU WRITE THEM. */ .band-dark .review-card p, .review-rail .review-card p, .review-rail .review-card .quote { color: var(--ink-soft); } .band-dark .review-card .who, .review-rail .review-card .who, .band-dark .review-card h4, .review-rail .review-card h4 { color: var(--ink); } .guarantee-band .guarantee-panel h2, .guarantee-band .guarantee-panel h4 { color: var(--ink); } .guarantee-band .guarantee-panel p { color: var(--ink-soft); } .band-dark .cmp-table td.is-ours { color: var(--ink-soft); } .band-dark .cmp-table thead th.is-ours { color: var(--ink); } .band-dark .coupon-card p, .band-dark .coupon-card .terms { color: var(--ink-muted); } .band-dark .coupon-card h4 { color: var(--ink); } .band-dark .notice { color: var(--ink); } .band-dark .notice p { color: var(--ink); } /* A BUTTON IS A LIGHT-GROUND COMPONENT TOO, and this is the one that bit. `.footer a` (0,1,1) outranks `.btn-accent` (0,1,0), so the footer's yellow CTA rendered near-white text on yellow at 1.35:1 on five pages. Reassert each button variant's own ink at (0,2,1) rather than weakening `.footer a`. Register new button variants here when they are added. */ .footer a.btn, .band-dark a.btn, .footer a.btn-accent, .band-dark a.btn-accent { color: var(--ink); } .footer a.btn-ink, .band-dark a.btn-ink, .footer a.btn-navy, .band-dark a.btn-navy, .footer a.btn-outline, .band-dark a.btn-outline { color: var(--on-dark); } .footer a.btn:hover, .band-dark a.btn:hover, .footer a.btn-ink:hover, .band-dark a.btn-ink:hover, .footer a.btn-navy:hover, .band-dark a.btn-navy:hover, .footer a.btn-outline:hover, .band-dark a.btn-outline:hover { color: var(--ink); } .footer a.btn-accent:hover, .band-dark a.btn-accent:hover { color: var(--ink); } /* ==== ds chrome ========================================================= */ .ds-nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--gutter); } .ds-nav .lockup-text { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; margin: 0; color: var(--ink); font-size: 1rem; } .ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: .75rem; color: var(--ink-muted); } .ds-nav .tabs { display: flex; flex-wrap: wrap; gap: .35rem; } .ds-nav .tab { font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink-muted); padding: .5em 1em; border-radius: var(--radius-pill); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .ds-nav .tab:hover { background: var(--paper-alt); color: var(--ink); } .ds-nav .tab.active { background: var(--ink); color: var(--on-dark); } .ds-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border-soft); } .ds-hero h1 { margin-bottom: .4em; } .ds-hero .lede { max-width: 760px; } .meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border-soft); } .meta-strip > * { min-width: 0; } .meta-strip .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-quiet); margin-bottom: .3em; } .meta-strip .v { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; } .door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; } .door-cards > * { min-width: 0; } .door { display: block; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem; text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .door:hover { border-color: var(--ink); background: var(--tint); } .door h3 { font-size: 1.0625rem; margin-bottom: .4em; } .door p { font-size: .875rem; color: var(--ink-muted); margin: 0; } .char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 20px; } .char-grid > * { min-width: 0; } .anchor-tile { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.6rem; background: var(--paper); } .anchor-tile h3 { font-size: 1.0625rem; margin-bottom: .5em; } .anchor-tile p { font-size: .9rem; color: var(--ink-soft); margin: 0; } .files-list { display: grid; gap: .1rem; } .files-list > div { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; } .files-list > div > * { min-width: 0; } .files-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--ink); word-break: break-all; } .files-list .what { font-size: .875rem; color: var(--ink-muted); } @media (max-width: 880px) { .files-list > div { grid-template-columns: 1fr; gap: .25rem; } } /* swatches / type specs */ .swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; } .swatch-grid > * { min-width: 0; } .swatch { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; } .swatch .chip { height: 92px; } .swatch .meta { padding: .8rem 1rem; } .swatch .meta b { display: block; font-size: .875rem; color: var(--ink); } .swatch .meta code { font-size: .75rem; color: var(--ink-muted); font-family: ui-monospace, monospace; } .type-spec { border-bottom: 1px solid var(--border-soft); padding: 1.5rem 0; } .type-spec .note { font-size: .75rem; color: var(--ink-quiet); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip-tag { border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: .4em 1em; font-size: .8125rem; color: var(--ink-soft); } /* Screen-reader-only label. Used on the two search inputs, which the source ships with a placeholder and no visible label. */ .show-for-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Scaffolding copy the kit authors rather than transcribes. Declared in the markup so the verbatim gate can skip it and a reader can see the exemption at the point of use. */ .kit-note { font-size: var(--text-small); color: var(--ink-quiet); } /* sections.html chrome */ .sx-main { display: block; } .sx-header { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--border-soft); } .sx-index { padding: 2.5rem 0; border-bottom: 1px solid var(--border-soft); } .sx-index .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 8px 20px; } .sx-index .grid > * { min-width: 0; } .sx-index a { font-size: .875rem; color: var(--ink-soft); text-decoration: none; display: block; padding: .3rem 0; } .sx-index a:hover { color: var(--ink); text-decoration: underline; } .sx-pattern { border-bottom: 1px solid var(--border-soft); padding: 3rem 0; } .pattern-meta { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.75rem; padding: 0 var(--gutter); max-width: var(--maxw); margin-left: auto; margin-right: auto; } .pattern-meta > * { min-width: 0; } @media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } } .pattern-meta .id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: .75rem; color: var(--ink-quiet); } .pattern-meta .num { font-weight: 700; color: var(--ink); } .pattern-meta .signature { background: var(--accent); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: .625rem; letter-spacing: .1em; padding: .25em .7em; border-radius: var(--radius-pill); } .pattern-meta .name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--ink); margin: 0 0 .3em; } .pattern-meta .purpose { font-size: .9rem; color: var(--ink-muted); margin: 0; } .sx-demo { position: relative; border-top: 1px solid var(--border-soft); } .sx-demo .demo-label { position: absolute; top: 0; left: 0; z-index: 20; background: var(--ink); color: var(--on-dark); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; padding: .3em .8em; } /* pages gallery */ .pages-gallery { padding: 3rem 0; } .pages-gallery .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 26px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .pages-gallery .grid > * { min-width: 0; } .page-card { border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; } .page-card .frame { height: 380px; overflow: hidden; background: var(--paper-alt); } .page-card iframe { width: 1400px; height: 1520px; border: 0; transform: scale(.29); transform-origin: 0 0; } .page-card .cap { padding: 1.4rem; border-top: 1px solid var(--border-soft); } .page-card .cap h3 { font-size: 1.0625rem; margin-bottom: .4em; } .page-card .cap p { font-size: .875rem; color: var(--ink-muted); } .page-card .cap a { font-size: .875rem; font-weight: 600; color: var(--ink); } /* ds footer reuses .footer, but the doc chrome version is quieter */ .footer .cols h4 { color: var(--on-dark); } .footer .cols p { color: var(--on-dark-muted); margin: 0; }