/* ============================================================================= ArcLight6 — shared components for new pages. The original pages each carry their own copy of the shared CSS; that is why a palette change is a fifteen-file edit. New work lives here instead: one file, linked from the page , holding the components rather than inlining one-off styles. Existing pages can be migrated onto it a page at a time. Rules this file encodes, so they cannot drift: • Surfaces step #0e0918 (page) -> #1a1624 (card) -> #1b1728 (panel). • Ember gradient (30deg, #fd8925 -> #ff0c00) ONLY on primary CTA buttons. • Electric Current (141deg, #077ac7 -> #6b21ef) ONLY for link hover underlines and focus rings. The ring carries a 1px light edge because the purple end is 2.57:1 on these surfaces and 1.4.11 wants 3:1. • Elevation is colour stepping plus an inset ring — no outset shadows. • Radii: controls 8 · nodes 12 · cards 16 · panels/badges 24 · pills 9999. • Weight 300 only at 48px and up; 400 minimum below 32px. • Interactive targets are at least 44px tall. ============================================================================= */ /* A display value on a component beats the UA [hidden] rule, so restate it. */ [hidden] { display: none !important; } .al6-wrap { max-width: 1100px; margin: 0 auto; } .al6-narrow { max-width: 860px; margin: 0 auto; } /* --- type ----------------------------------------------------------------- */ .al6-display { font-size: 54px; font-weight: 300; letter-spacing: -0.7px; line-height: 1.1; color: #ffffff; margin: 0; } .al6-h2 { font-size: 32px; font-weight: 400; letter-spacing: -0.3px; line-height: 1.2; color: #ffffff; margin: 0; } .al6-h3 { font-size: 20px; font-weight: 400; line-height: 1.3; color: #ffffff; margin: 0; } .al6-eyebrow { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: #9d9797; } .al6-body { font-size: 17px; font-weight: 400; line-height: 1.7; color: #d1cece; margin: 0; } .al6-muted { font-size: 15px; font-weight: 400; line-height: 1.65; color: #9d9797; margin: 0; } /* --- surfaces ------------------------------------------------------------- */ .al6-card { background: #1a1624; border-radius: 16px; padding: 24px; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset; } .al6-panel { background: #1b1728; border-radius: 24px; padding: 40px; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset, rgba(255,142,93,0.3) 0 1px 0 0 inset; } .al6-node { background: #1a1624; border-radius: 12px; padding: 18px 20px; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset; } /* --- controls ------------------------------------------------------------- */ .al6-btn { position: relative; min-height: 44px; padding: 0 22px; border-radius: 8px; border: 0; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .al6-btn-primary { background: linear-gradient(30deg, rgb(253,137,37), rgb(255,12,0)); color: #ffffff; } .al6-btn-primary:hover { background: linear-gradient(30deg, rgb(255,151,54), rgb(255,42,26)); color: #ffffff; } .al6-btn-quiet { background: transparent; color: #d1cece; box-shadow: rgba(255,255,255,0.16) 0 0 0 1px inset; } .al6-btn-quiet:hover { background: rgba(255,255,255,0.04); color: #ffffff; } .al6-chip { min-height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 9999px; font-size: 14px; color: #9d9797; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset; } .al6-chip-pending { color: #d1cece; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset, rgba(255,142,93,0.3) 0 1px 0 0 inset; } /* --- selector (path picker): a real radio group, styled as cards ----------- */ .al6-choice { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 20px 22px; border-radius: 16px; background: #1a1624; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; } .al6-choice:hover { background: #2c2834; } .al6-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .al6-choice-title { font-size: 17px; font-weight: 400; color: #ffffff; } .al6-choice-note { font-size: 14px; line-height: 1.5; color: #9d9797; } .al6-choice[data-selected="1"] { background: #2c2834; box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset, rgba(255,142,93,0.3) 0 1px 0 0 inset; } /* --- definition rows (identifiers) ---------------------------------------- */ .al6-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .al6-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #3e3a46; } .al6-dl dt { font-size: 15px; color: #9d9797; margin: 0; } .al6-dl dd { font-size: 16px; color: #d1cece; margin: 0; text-align: right; } .al6-dl dd.al6-onrequest { color: #9d9797; } /* --- links, focus ---------------------------------------------------------- */ .al6-link { position: relative; color: #d1cece; background-image: linear-gradient(141deg, rgb(7,122,199), rgb(107,33,239)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; padding-bottom: 2px; transition: background-size .2s ease, color .2s ease; } .al6-link:hover { color: #ffffff; background-size: 100% 2px; } .al6-btn:focus-visible, .al6-link:focus-visible, .al6-choice:focus-within { outline: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,0.92); } .al6-choice:focus-within { box-shadow: rgba(255,255,255,0.1) 0 0 0 1px inset, rgba(255,142,93,0.3) 0 1px 0 0 inset, 0 0 0 1px rgba(255,255,255,0.92); } .al6-btn:focus-visible::after, .al6-link:focus-visible::after, .al6-choice:focus-within::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; padding: 2px; background: linear-gradient(141deg, rgb(7,122,199), rgb(107,33,239)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .al6-choice, .al6-btn, .al6-link { transition: none !important; } } @media (max-width: 820px) { .al6-display { font-size: 32px; letter-spacing: -0.3px; } .al6-h2 { font-size: 26px; } .al6-panel { padding: 24px 20px; border-radius: 18px; } .al6-dl { grid-template-columns: 1fr; gap: 0; } } /* --- print: Letter, ink-friendly ------------------------------------------ */ @media print { @page { size: Letter; margin: 14mm; } html, body { background: #ffffff !important; color: #111111 !important; } /* The page wrapper carries the dark surface inline, which would otherwise print as a full-bleed block of ink. */ body *, #dc-root, #dc-root > div { background-color: transparent !important; } /* The logo is white artwork on transparency — invisible on paper. */ .al6-logo { filter: invert(1); } html body .n8h-root, html body .n8h-bar, html body .n8h-spacer, html body footer, html body [data-nojs-only], html body .al6-noprint, html body .al6-btn { display: none !important; } .al6-card, .al6-panel, .al6-node, .al6-choice { background: #ffffff !important; box-shadow: none !important; border: 1px solid #cccccc; border-radius: 8px; break-inside: avoid; page-break-inside: avoid; } .al6-display, .al6-h2, .al6-h3, .al6-dl dd { color: #111111 !important; } .al6-body, .al6-muted, .al6-eyebrow, .al6-dl dt, .al6-choice-note { color: #333333 !important; } .al6-link { background-image: none; color: #111111 !important; } a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555555; } .al6-printonly { display: block !important; } } .al6-printonly { display: none; }