/* The showcase layer: the new home page and the ten site templates (docs/ECOSYSTEM-GUIDELINES.md). castomo's surface (22 px tiles, the grey wash, shadow-not-border) + Apple's narrative (chapters, huge two-beat headlines, spec strips, sticky scenes) + the Noodle components from artwork-parallax, copied into assets/artwork-parallax/ by tools/sync_noodle.py. Linked only by the pages that use it, so the rest of the site keeps its one stylesheet. Everything is scoped under .sc, the wrapper every showcase page opens with. */ /* ---- Tokens (guidelines §2.1), plus the bridge into the Noodle components' own tokens ---------- */ .sc { --radius-tile: 22px; --radius-control: 12px; --wash-angle: 22deg; --wash: linear-gradient(var(--wash-angle), rgba(210, 210, 210, 0) 20%, #eee 90%); --tile-ground: rgba(1, 1, 1, .001); --tile-ground-hover: rgba(1, 1, 1, .031); --tile-solid: #F5F5F7; --tile-dark: #1D1D1F; --tile-pad: clamp(24px, 3vw, 36px); /* The brand ramp a page is painted in: castomo's by default, a product's with data-brand below. The Noodle drawings read --slot-0/1/2 directly, so one attribute recolours the words and the art. */ --slot-0: var(--brand-1); --slot-1: var(--brand-2); --slot-2: var(--brand-3); /* Eyebrows are small text on a phone (15 px): the dark stop, the one that passes 4.5:1. */ --sc-hue: var(--slot-0); /* The components style themselves from these (artwork-parallax js/noodle/motion.js `tokens`); pointing them at the site's tokens makes every component follow the theme and the a11y panel's colours. */ --noodle-ink: var(--ink); --noodle-muted: var(--ink-2); --noodle-surface: var(--paper-2); --noodle-paper: var(--paper); --noodle-border: var(--rule); --noodle-radius: var(--radius-tile); --noodle-shadow: var(--shadow); --noodle-accent: var(--slot-1); /* Accent-coloured small text inside the components (eyebrows, numbers, labels): the dark stop on light grounds, the light stop on dark ones (below), the palette accent in high contrast. */ --noodle-accent-text: var(--slot-0); overflow-x: clip; } /* Dark: the pack art is black line on white fills, which would vanish into a dark ground, so the line takes the ink and the fills take the tile colour. The wash is kept, faint (decision 2026-09-23). */ [data-theme$="dark"] .sc { --wash: linear-gradient(var(--wash-angle), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .06) 90%); --tile-ground-hover: rgba(255, 255, 255, .05); --tile-solid: #1B1E27; --tile-dark: #000; --noodle-stroke: var(--ink); --noodle-fill: var(--paper-2); --sc-hue: var(--slot-2); --noodle-accent-text: var(--slot-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sc { --wash: linear-gradient(var(--wash-angle), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .06) 90%); --tile-ground-hover: rgba(255, 255, 255, .05); --tile-solid: #1B1E27; --tile-dark: #000; --noodle-stroke: var(--ink); --noodle-fill: var(--paper-2); --sc-hue: var(--slot-2); --noodle-accent-text: var(--slot-2); } } /* The nine shipping ramps, from artwork-parallax js/brands.js (a snapshot of the brand kit). */ .sc[data-brand="dash-b"] { --slot-0: #E84520; --slot-1: #FF834F; --slot-2: #FFC53D; --noodle-on-accent: #0B0C10; --noodle-accent-text: color-mix(in srgb, #E84520 70%, #000); --sc-hue: color-mix(in srgb, #E84520 70%, #000); } /* ink on fill: the kit's --brand-ink */ .sc[data-brand="castomapi"] { --slot-0: #3B18C9; --slot-1: #7C4DFF; --slot-2: #B98CFF; } .sc[data-brand="castomind"] { --slot-0: #A3106B; --slot-1: #E0327F; --slot-2: #FF8FC0; } .sc[data-brand="castomflow"] { --slot-0: #003C87; --slot-1: #0052B6; --slot-2: #008FFF; } .sc[data-brand="castomui"] { --slot-0: #8F0A00; --slot-1: #C80A00; --slot-2: #FF8A78; } .sc[data-brand="fabls"] { --slot-0: #14532D; --slot-1: #16A34A; --slot-2: #86EFAC; } .sc[data-brand="clicksomo"] { --slot-0: #16309B; --slot-1: #2F4FC4; --slot-2: #7FA6FF; } .sc[data-brand="ikonekt"] { --slot-0: #3F6212; --slot-1: #84CC16; --slot-2: #BEF264; } /* On light grounds the eyebrow takes the dark stop wherever the mid stop fails AA as small text. */ /* (Every ramp's eyebrow is its dark stop now, set on .sc above; dash-b's is deepened on its own line.) */ /* The site bar stays the same bar as on every page (guidelines §0.20). Here it slides away while the reader moves down, because the scenes pin to the very top of the viewport under it, and returns the moment they scroll back up, which is when they look for it. Held in place while it has focus. */ body:has(.sc) > .bar { transition: transform .3s var(--ease); } body:has(.sc) > .bar.is-away { transform: translateY(-100%); } body:has(.sc) > .bar:focus-within { transform: none; } @media (prefers-reduced-motion: reduce) { body:has(.sc) > .bar { transition: none; } } /* ---- Type roles (guidelines §3) --------------------------------------------------------------- */ .sc-eyebrow { margin: 0 0 14px; color: var(--sc-hue); font-size: clamp(.8rem, 1vw, .95rem); font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; } /* One headline style for the page's hero and its chapters (owner, 2026-10-19): --sc-head-* live in site.css, so the plain hero reads them too. */ .sc-title { margin: 0 0 .35em; font-size: var(--sc-head-size); font-weight: var(--sc-head-weight); line-height: var(--sc-head-leading); letter-spacing: var(--sc-head-track); text-wrap: initial; } .sc-hero-title { margin: 0 0 .3em; font-size: var(--sc-head-size); font-weight: var(--sc-head-weight); line-height: var(--sc-head-leading); letter-spacing: var(--sc-head-track); text-wrap: initial; } .sc-title em, .sc-hero-title em { font-style: normal; background: linear-gradient(90deg, var(--slot-0), var(--slot-1) 60%, var(--slot-2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .sc-lead { max-width: 38ch; margin: 0 0 1em; color: var(--ink); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.4; text-wrap: pretty; } .sc-body { max-width: 62ch; color: var(--ink-2); } @media (forced-colors: active) { .sc-title em, .sc-hero-title em { color: CanvasText; background: none; } } /* ---- Chapters (guidelines §4): one idea per screen, the ground alternating ----------------------- */ .sc-chapter { padding-block: clamp(72px, 11vw, 150px); } .sc-chapter.sc-alt { background: var(--paper-2); } /* The --noodle-* bridge is restated here: a custom property that holds var(--ink) is resolved where it is declared (.sc), so redefining --ink on this chapter alone would not reach the components. */ .sc-chapter.sc-ink { background: var(--tile-dark); color: #F5F5F7; --noodle-accent-text: var(--slot-2); --ink: #F5F5F7; --ink-2: #B4B8C6; --ink-3: #9296A6; --paper: #0B0C10; --paper-2: #1B1E27; --rule: #2C303C; --tile-solid: #1B1E27; --sc-hue: var(--slot-2); --noodle-ink: #F5F5F7; --noodle-muted: #B4B8C6; --noodle-surface: #1B1E27; --noodle-paper: var(--tile-dark); --noodle-border: #2C303C; --noodle-stroke: #F5F5F7; --noodle-fill: #1B1E27; } .sc-chapter.sc-ink h2, .sc-chapter.sc-ink h3 { color: #F5F5F7; } .sc-chapter.sc-tight { padding-block: clamp(48px, 7vw, 88px); } .sc-chapter.sc-flush { padding-block: 0; } .sc-head { margin-bottom: clamp(32px, 5vw, 64px); } .sc-head.sc-center { text-align: center; } .sc-head.sc-center .sc-lead, .sc-head.sc-center .sc-body { margin-inline: auto; } .sc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; } .sc-split .sc-head { margin: 0; } .sc-after { margin-top: clamp(28px, 4vw, 44px); } .sc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; } /* ---- Hero: the one bubble per site (guidelines §2.2) --------------------------------------------- */ .sc-hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); } .sc-hero-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(32px, 6vw, 88px); border-radius: 200px 200px 200px 22px; background: var(--wash); box-shadow: var(--shadow); } .sc-hero-panel > :is(noodle-art, andy-art) { width: min(100%, 480px); justify-self: center; } /* A headline that is one sentence with no clause to break at (the brand line) spans the whole panel so it sets on one line; the words and the art share the row under it. On phones it balances. */ .sc-hero-top { grid-column: 1 / -1; } .sc-oneline { font-size: clamp(2.6rem, 6vw, 5.2rem); text-wrap: balance; } @media (min-width: 861px) { .sc-oneline { white-space: nowrap; } } @media (max-width: 860px) { .sc-hero-panel { grid-template-columns: 1fr; border-radius: 64px 64px 64px 22px; } .sc-hero-panel > :is(noodle-art, andy-art) { width: min(78%, 360px); } } /* ---- Spec strip (guidelines §5.1) and stat callout (§5.2) ---------------------------------------- */ .sc-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .sc-spec li { padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--tile-solid); } .sc-spec :is(b, strong) { display: block; margin-bottom: 6px; font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; } .sc-spec span { color: var(--ink-2); font-size: var(--t-1); } .sc-spec.sc-bare li { padding: 0; background: none; } /* A figure in a template is a stand-in until a sourced value replaces it (§5.2 truth gate), and says so. */ .sc-sample { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border: 1px dashed currentColor; border-radius: var(--radius-pill); color: var(--ink-3); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } /* ---- Tiles (guidelines §2.2): link, wash, solid, dark ------------------------------------------ */ .sc-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } .sc-tile { position: relative; grid-column: span 4; display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--tile-ground); box-shadow: var(--shadow); color: var(--ink-2); text-decoration: none; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .sc-tile h3 { margin: 0; font-size: var(--t2); } .sc-tile p { margin: 0; } .sc-tile.sc-6 { grid-column: span 6; } .sc-tile.sc-8 { grid-column: span 8; } .sc-tile.sc-12 { grid-column: span 12; } .sc-tile.sc-wash { background: var(--wash); } .sc-tile.sc-solid { background: var(--tile-solid); box-shadow: none; } .sc-tile.sc-dark { background: var(--tile-dark); box-shadow: none; color: #B4B8C6; } .sc-tile.sc-dark h3 { color: #F5F5F7; } a.sc-tile:hover, a.sc-tile:focus-visible { transform: translateY(-4px); background: var(--tile-ground-hover); } a.sc-tile .sc-go { margin-top: auto; align-self: flex-start; padding: 6px 14px; border: var(--rule-w) solid var(--rule); border-radius: var(--radius-pill); color: var(--ink); font-size: var(--t-1); font-weight: 600; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } a.sc-tile:hover .sc-go, a.sc-tile:focus-visible .sc-go { background: var(--sc-hue); border-color: var(--sc-hue); color: #fff; font-weight: 700; } .sc-tile :is(noodle-art, andy-art) { width: 96px; margin-bottom: 6px; } @media (max-width: 900px) { .sc-tile, .sc-tile.sc-8 { grid-column: span 6; } } @media (max-width: 600px) { .sc-tiles { gap: 12px; } .sc-tile, .sc-tile.sc-6, .sc-tile.sc-8 { grid-column: span 12; } } /* ---- Values strip, footnotes and the pack credit (guidelines §4.5, §5.6, §8.3) ----------------- */ .sc-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .sc-values li { padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--tile-solid); color: var(--ink-2); } .sc-values :is(b, strong) { display: block; margin-bottom: 6px; color: var(--ink); font-size: var(--t1); } .sc-notes { margin: 0; padding: clamp(32px, 5vw, 56px) 0 0; border-top: var(--rule-w) solid var(--rule); color: var(--ink-3); font-size: var(--t-1); } .sc-notes ol { margin: 0 0 16px; padding-inline-start: 1.2em; } .sc-credit { margin: 0; color: var(--ink-3); font-size: var(--t-1); } .sc-credit a { color: inherit; } /* ---- Rise (guidelines §9): below the fold only, once, and never with reduced motion -------------- */ @media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"]) .sc-js .sc-rise { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); } :root:not([data-motion="reduce"]) .sc-js .sc-rise.is-in { opacity: 1; transform: none; } } /* ---- The templates index ---------------------------------------------------------------------- */ .sc-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .sc-index a.sc-tile { min-height: 300px; } .sc-index small { color: var(--ink-3); } .sc-matrix { width: 100%; border-collapse: collapse; font-size: var(--t-1); } .sc-matrix th, .sc-matrix td { padding: 6px 8px; border-bottom: var(--rule-w) solid var(--rule); text-align: start; vertical-align: top; } .sc-matrix-wrap { overflow-x: auto; } /* ---- Pieces the pages share -------------------------------------------------------------------- */ .sc-doors, .sc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; } .sc-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; } .sc-devices { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; } @media (max-width: 760px) { .sc-devices { grid-template-columns: 1fr; } } /* A chapter headline sharing its row with a component gets half the width, so it takes a smaller step of the scale; at full size it would wrap on its own, which display type must never do. */ .sc-split .sc-title { font-size: clamp(2.2rem, 4.2vw, 3.8rem); } /* The same for a hero headline that sits beside the art rather than above it (.sc-hero-top). */ .sc-hero-panel > div:not(.sc-hero-top) .sc-hero-title { font-size: clamp(2.4rem, 4.4vw, 4rem); } /* ---- Contrast: the site's own heading colour must not reach inside a component ------------------- site.css gives every h1–h4 color: var(--ink). A light-DOM rule beats a component's ::slotted() rule whatever its specificity, so a headline slotted into a coloured band (cta-burst, split-hero) came out in page ink: dark on a dark band. Headings anywhere inside a component take the colour of the box the component puts them in instead, which is what every component expects. The tag list is every element the library defines; tools/sync_noodle.py warns when a sync adds one not listed here. :not(#_) matches everything and lifts the rule above the chapter colour rules (.sc-ink h2…), which would otherwise put light words on the light cards some components draw inside a dark chapter. */ .sc :is(noodle-accordion-tiles, noodle-account-multistep, noodle-account-reset, noodle-account-search, noodle-account-settings, noodle-account-signin, noodle-account-signup, noodle-assemble, noodle-audience-switch, noodle-audience-switch-item, noodle-badge-grid, noodle-badge-grid-item, noodle-balloon-cards, noodle-balloon-cards-item, noodle-bento, noodle-bento-tile, noodle-blog-author, noodle-blog-card, noodle-blog-header, noodle-blog-list, noodle-blog-related, noodle-blog-share, noodle-booking, noodle-browser-frame, noodle-callouts, noodle-card-stack, noodle-case-study, noodle-chat-hero, noodle-checkout-steps, noodle-checkout-steps-step, noodle-chip, noodle-cloud, noodle-colour-wipe, noodle-comic-strip, noodle-compare, noodle-compare-table, noodle-confirm-dialog, noodle-contact-chat, noodle-contact-reactive, noodle-contact-send, noodle-contact-steps, noodle-contact-topics, noodle-course-card, noodle-coverflow, noodle-cta-burst, noodle-curtain-footer, noodle-depth-crowd, noodle-dial, noodle-empty-state, noodle-error-404, noodle-event-card, noodle-exploded, noodle-exploded-teardown, noodle-fan-card, noodle-fan-stack, noodle-faq-accordion, noodle-faq-search, noodle-feature-tabs, noodle-filter-grid, noodle-filter-item, noodle-flip-tile, noodle-flipbook, noodle-flipbook-page, noodle-float-hero, noodle-flood-tile, noodle-fly-to-cart, noodle-fly-to-cart-product, noodle-footer-cta, noodle-footer-curtain, noodle-footer-mega, noodle-footer-minimal, noodle-footer-newsletter, noodle-footer-social, noodle-fullsize-aperture-iris, noodle-fullsize-color-flood, noodle-fullsize-horizontal-glide, noodle-fullsize-lens-focus, noodle-fullsize-morph-layers, noodle-fullsize-pan-drift, noodle-fullsize-parallax, noodle-fullsize-split-curtain, noodle-fullsize-tilt-perspective, noodle-fullsize-zoom-reveal, noodle-glass-card, noodle-glow-card, noodle-glow-grid, noodle-goal-tile, noodle-gravity, noodle-guarantee-card, noodle-guide, noodle-header-banner, noodle-header-dock, noodle-header-drawer, noodle-header-mega, noodle-header-morph, noodle-header-reveal, noodle-hero-day-night, noodle-hero-intro, noodle-hero-mosaic, noodle-hero-parting, noodle-hero-peek, noodle-hero-prompt, noodle-hero-prompt-item, noodle-hero-scribble, noodle-hero-showreel, noodle-hero-showreel-item, noodle-hero-split-screen, noodle-hero-trail, noodle-horizontal, noodle-horizontal-panel, noodle-hotspots, noodle-hover-list, noodle-icon-tile, noodle-iris-reveal, noodle-iris-reveal-scene, noodle-join-counter, noodle-lanes, noodle-launch-coming-soon, noodle-launch-countdown, noodle-launch-maintenance, noodle-launch-schedule, noodle-launch-ticket, noodle-launch-waitlist, noodle-legal-a11y, noodle-legal-cookie, noodle-legal-credits, noodle-legal-language, noodle-legal-privacy, noodle-legal-terms, noodle-lens-grid, noodle-lens-grid-tile, noodle-live-cursors, noodle-live-cursors-person, noodle-living-architecture, noodle-loading-card, noodle-local-gallery, noodle-local-hours, noodle-local-map, noodle-local-menu, noodle-local-reviews, noodle-local-services, noodle-magnet-card, noodle-marquee, noodle-mask-slider, noodle-masonry, noodle-masonry-brick, noodle-media-audio, noodle-media-hero, noodle-media-playlist, noodle-media-testimonial, noodle-media-video, noodle-media-viewer, noodle-milestone, noodle-mood-scale, noodle-morph-tile, noodle-mosaic, noodle-mosaic-tile, noodle-newsletter-inline, noodle-newsletter-issues, noodle-newsletter-slide-in, noodle-not-found, noodle-onboarding, noodle-onboarding-checklist, noodle-onboarding-checklist-item, noodle-onboarding-role, noodle-onboarding-role-option, noodle-onboarding-tour, noodle-onboarding-tour-step, noodle-onboarding-welcome, noodle-onboarding-welcome-screen, noodle-onboarding-workspace, noodle-orbit, noodle-orbit-item, noodle-org-chart, noodle-phone-pop, noodle-plan, noodle-polaroid-scatter, noodle-polaroid-scatter-item, noodle-pop-tile, noodle-presence, noodle-presence-viewer, noodle-pricing, noodle-pricing-addon, noodle-pricing-matrix, noodle-pricing-quote, noodle-pricing-tier, noodle-pricing-toggle, noodle-print-pass, noodle-profile-card, noodle-quiz, noodle-quiz-step, noodle-quote-card, noodle-quote-scroller, noodle-quote-scroller-quote, noodle-quote-wall, noodle-quote-wall-item, noodle-rail, noodle-rail-card, noodle-range, noodle-reactions, noodle-reactions-item, noodle-review-marquee, noodle-ring, noodle-ring-item, noodle-scatter-tile, noodle-scroll-companion, noodle-scroll-marquee, noodle-scroll-path, noodle-scroll-path-stop, noodle-scroll-stack, noodle-scroll-stack-step, noodle-scrub-reveal, noodle-section, noodle-shop-card, noodle-shop-cart, noodle-shop-quickview, noodle-shop-stock, noodle-shop-variant, noodle-shop-zoom, noodle-shrink-header, noodle-slide, noodle-slider, noodle-snap-chapter, noodle-snap-sections, noodle-social-proof, noodle-split-hero, noodle-split-reveal, noodle-spotlight-grid, noodle-spotlight-grid-item, noodle-stack-card, noodle-stagger-grid, noodle-stagger-tile, noodle-stat-tile, noodle-state-tile, noodle-status-banner, noodle-step, noodle-sticker, noodle-sticker-board, noodle-sticky-authors, noodle-sticky-authors-section, noodle-sticky-banner, noodle-sticky-banner-bar, noodle-sticky-columns, noodle-sticky-columns-tile, noodle-sticky-compare, noodle-sticky-cta, noodle-sticky-filter, noodle-sticky-headline, noodle-sticky-mascot, noodle-sticky-phone, noodle-sticky-phone-step, noodle-sticky-progress, noodle-sticky-split, noodle-sticky-steps, noodle-sticky-timeline, noodle-sticky-toc, noodle-stories, noodle-stories-card, noodle-story, noodle-story-step, noodle-success-dialog, noodle-success-modal, noodle-support-launcher, noodle-support-launcher-reply, noodle-swipe-deck, noodle-team-grid, noodle-team-grid-member, noodle-testimonials, noodle-text-reveal, noodle-thread, noodle-thread-message, noodle-thumb-gallery, noodle-tilt-card, noodle-toast, noodle-toast-stack, noodle-trust-awards, noodle-trust-certifications, noodle-trust-logos, noodle-trust-security, noodle-tunnel, noodle-tunnel-scene, noodle-velocity-marquee, noodle-zoom-through) :is(h1, h2, h3, h4):not(#_) { color: inherit; } /* The dark tile stays dark under the pointer (the shared hover would lighten it under white words), and its pill is drawn in light ink on the dark ground. */ a.sc-tile.sc-dark:hover, a.sc-tile.sc-dark:focus-visible { background: #2A2D36; } .sc-tile.sc-dark .sc-go { border-color: rgba(255, 255, 255, .45); color: #F5F5F7; } .sc-tile.sc-dark a:not(.sc-go) { color: #F5F5F7; } .sc-chapter.sc-ink .sc-go { border-color: rgba(255, 255, 255, .45); color: #F5F5F7; } /* ---- Icons inside component buttons and tile pills (tools/build_site.py add_component_icons) ---- */ .sc .sc-ico { display: inline-block; flex: none; width: 1.1em; height: 1.1em; margin-inline-start: .45em; vertical-align: -.18em; overflow: visible; } .sc .sc-go { display: inline-flex; align-items: center; } [dir="rtl"] .sc .sc-ico { transform: scaleX(-1); } /* ---- High contrast (§0.3) ------------------------------------------------------------------------- The contrast palettes keep one strong accent, so the brand ramp gives way to it: eyebrows, the local bar, the components' accent and the drawings' colour blocks all take the palette's accent ink, the wash and the soft tile grounds go, and the drawings' line takes full ink. Placed after the brand ramps (same specificity), so it wins over a page's data-brand. */ [data-theme^="contrast"] .sc { --slot-0: var(--accent-ink); --slot-1: var(--accent-ink); --slot-2: var(--accent-ink); --sc-hue: var(--accent-ink); --noodle-accent: var(--accent-ink); --noodle-on-accent: var(--paper); --wash: none; --tile-solid: var(--paper); --tile-dark: #000; --tile-ground-hover: var(--paper-2); --noodle-accent-text: var(--accent-ink); --noodle-stroke: var(--ink); --noodle-fill: var(--paper); --noodle-muted: var(--ink); } [data-theme^="contrast"] .sc :is(noodle-glass-card, noodle-curtain-footer, noodle-cta-burst) { --noodle-ink: var(--ink); --noodle-muted: var(--ink); --noodle-surface: var(--paper); --noodle-paper: var(--paper); --noodle-border: var(--ink); --noodle-stroke: var(--ink); --noodle-fill: var(--paper); } /* ---- Contrast in the dark themes ----------------------------------------------------------------- Three components paint a surface that stays light whatever the theme: the glass card (frosted white over brand colour), the curtain footer, and the CTA band's white primary button. Handed the dark theme's light ink they printed light on light, so they keep the light-scheme tokens always. */ .sc :is(noodle-glass-card, noodle-curtain-footer, noodle-cta-burst) { --noodle-ink: #16151a; --noodle-muted: #5d5b66; --noodle-surface: #ffffff; --noodle-paper: #f7f4ee; --noodle-border: #e7e3da; --noodle-stroke: #000; --noodle-fill: #fff; } /* A brand's mid stop is too dark to read as small text on a dark ground; its light stop is not. */ [data-theme$="dark"] .sc { --noodle-accent: var(--slot-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sc { --noodle-accent: var(--slot-2); } } /* A link the component does not colour itself (one nested in a slotted block) would take the site's accent link colour, chosen for the page ground, not for the component's; it follows its text instead. Links a component does colour carry !important there, which a normal rule here cannot override. */ .sc :is(noodle-curtain-footer, noodle-shrink-header, noodle-sticky-toc, noodle-sticky-progress, noodle-accordion-tiles) a:not(.btn) { color: inherit; } /* The local bar's button sits on the dark brand stop in every theme: white on it passes AA, white on the light stop (the dark theme's --sc-hue) did not. */ /* A form inside the glass card is the author's markup, nested too deep for the card's ::slotted() rules, so its field and button are drawn here, on the card's own light glass. */ .sc :is(noodle-glass-card, andy-glass-card) form { display: flex; flex-wrap: wrap; gap: 10px; } .sc :is(noodle-glass-card, andy-glass-card) input { flex: 1 1 200px; min-height: 48px; padding: 0 16px; border: 1px solid #d7d4cc; border-radius: 999px; background: #fff; color: #16151a; } .sc :is(noodle-glass-card, andy-glass-card) button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #16151a; color: #fff; font-weight: 600; } .sc :is(noodle-glass-card, andy-glass-card) button:hover { background: var(--slot-0); } /* The zoom-through eyebrow is painted in the brand's dark stop, which disappears on the dark theme's stage; it takes the page's eyebrow colour, which already switches stop per theme. */ .sc noodle-zoom-through > [slot="eyebrow"] { color: var(--sc-hue); } /* Links an author places straight inside a component are the component's buttons: it draws them as pills (::slotted(a)), so the text-link underline (site.css, §0.11) must not paint across them. Text links nested deeper (in a slotted paragraph or article) keep it. */ .sc :is(noodle-accordion-tiles, noodle-account-multistep, noodle-account-reset, noodle-account-search, noodle-account-settings, noodle-account-signin, noodle-account-signup, noodle-assemble, noodle-audience-switch, noodle-audience-switch-item, noodle-badge-grid, noodle-badge-grid-item, noodle-balloon-cards, noodle-balloon-cards-item, noodle-bento, noodle-bento-tile, noodle-blog-author, noodle-blog-card, noodle-blog-header, noodle-blog-list, noodle-blog-related, noodle-blog-share, noodle-booking, noodle-browser-frame, noodle-callouts, noodle-card-stack, noodle-case-study, noodle-chat-hero, noodle-checkout-steps, noodle-checkout-steps-step, noodle-chip, noodle-cloud, noodle-colour-wipe, noodle-comic-strip, noodle-compare, noodle-compare-table, noodle-confirm-dialog, noodle-contact-chat, noodle-contact-reactive, noodle-contact-send, noodle-contact-steps, noodle-contact-topics, noodle-course-card, noodle-coverflow, noodle-cta-burst, noodle-curtain-footer, noodle-depth-crowd, noodle-dial, noodle-empty-state, noodle-error-404, noodle-event-card, noodle-exploded, noodle-exploded-teardown, noodle-fan-card, noodle-fan-stack, noodle-faq-accordion, noodle-faq-search, noodle-feature-tabs, noodle-filter-grid, noodle-filter-item, noodle-flip-tile, noodle-flipbook, noodle-flipbook-page, noodle-float-hero, noodle-flood-tile, noodle-fly-to-cart, noodle-fly-to-cart-product, noodle-footer-cta, noodle-footer-curtain, noodle-footer-mega, noodle-footer-minimal, noodle-footer-newsletter, noodle-footer-social, noodle-fullsize-aperture-iris, noodle-fullsize-color-flood, noodle-fullsize-horizontal-glide, noodle-fullsize-lens-focus, noodle-fullsize-morph-layers, noodle-fullsize-pan-drift, noodle-fullsize-parallax, noodle-fullsize-split-curtain, noodle-fullsize-tilt-perspective, noodle-fullsize-zoom-reveal, noodle-glass-card, noodle-glow-card, noodle-glow-grid, noodle-goal-tile, noodle-gravity, noodle-guarantee-card, noodle-guide, noodle-header-banner, noodle-header-dock, noodle-header-drawer, noodle-header-mega, noodle-header-morph, noodle-header-reveal, noodle-hero-day-night, noodle-hero-intro, noodle-hero-mosaic, noodle-hero-parting, noodle-hero-peek, noodle-hero-prompt, noodle-hero-prompt-item, noodle-hero-scribble, noodle-hero-showreel, noodle-hero-showreel-item, noodle-hero-split-screen, noodle-hero-trail, noodle-horizontal, noodle-horizontal-panel, noodle-hotspots, noodle-hover-list, noodle-icon-tile, noodle-iris-reveal, noodle-iris-reveal-scene, noodle-join-counter, noodle-lanes, noodle-launch-coming-soon, noodle-launch-countdown, noodle-launch-maintenance, noodle-launch-schedule, noodle-launch-ticket, noodle-launch-waitlist, noodle-legal-a11y, noodle-legal-cookie, noodle-legal-credits, noodle-legal-language, noodle-legal-privacy, noodle-legal-terms, noodle-lens-grid, noodle-lens-grid-tile, noodle-live-cursors, noodle-live-cursors-person, noodle-living-architecture, noodle-loading-card, noodle-local-gallery, noodle-local-hours, noodle-local-map, noodle-local-menu, noodle-local-reviews, noodle-local-services, noodle-magnet-card, noodle-marquee, noodle-mask-slider, noodle-masonry, noodle-masonry-brick, noodle-media-audio, noodle-media-hero, noodle-media-playlist, noodle-media-testimonial, noodle-media-video, noodle-media-viewer, noodle-milestone, noodle-mood-scale, noodle-morph-tile, noodle-mosaic, noodle-mosaic-tile, noodle-newsletter-inline, noodle-newsletter-issues, noodle-newsletter-slide-in, noodle-not-found, noodle-onboarding, noodle-onboarding-checklist, noodle-onboarding-checklist-item, noodle-onboarding-role, noodle-onboarding-role-option, noodle-onboarding-tour, noodle-onboarding-tour-step, noodle-onboarding-welcome, noodle-onboarding-welcome-screen, noodle-onboarding-workspace, noodle-orbit, noodle-orbit-item, noodle-org-chart, noodle-phone-pop, noodle-plan, noodle-polaroid-scatter, noodle-polaroid-scatter-item, noodle-pop-tile, noodle-presence, noodle-presence-viewer, noodle-pricing, noodle-pricing-addon, noodle-pricing-matrix, noodle-pricing-quote, noodle-pricing-tier, noodle-pricing-toggle, noodle-print-pass, noodle-profile-card, noodle-quiz, noodle-quiz-step, noodle-quote-card, noodle-quote-scroller, noodle-quote-scroller-quote, noodle-quote-wall, noodle-quote-wall-item, noodle-rail, noodle-rail-card, noodle-range, noodle-reactions, noodle-reactions-item, noodle-review-marquee, noodle-ring, noodle-ring-item, noodle-scatter-tile, noodle-scroll-companion, noodle-scroll-marquee, noodle-scroll-path, noodle-scroll-path-stop, noodle-scroll-stack, noodle-scroll-stack-step, noodle-scrub-reveal, noodle-section, noodle-shop-card, noodle-shop-cart, noodle-shop-quickview, noodle-shop-stock, noodle-shop-variant, noodle-shop-zoom, noodle-shrink-header, noodle-slide, noodle-slider, noodle-snap-chapter, noodle-snap-sections, noodle-social-proof, noodle-split-hero, noodle-split-reveal, noodle-spotlight-grid, noodle-spotlight-grid-item, noodle-stack-card, noodle-stagger-grid, noodle-stagger-tile, noodle-stat-tile, noodle-state-tile, noodle-status-banner, noodle-step, noodle-sticker, noodle-sticker-board, noodle-sticky-authors, noodle-sticky-authors-section, noodle-sticky-banner, noodle-sticky-banner-bar, noodle-sticky-columns, noodle-sticky-columns-tile, noodle-sticky-compare, noodle-sticky-cta, noodle-sticky-filter, noodle-sticky-headline, noodle-sticky-mascot, noodle-sticky-phone, noodle-sticky-phone-step, noodle-sticky-progress, noodle-sticky-split, noodle-sticky-steps, noodle-sticky-timeline, noodle-sticky-toc, noodle-stories, noodle-stories-card, noodle-story, noodle-story-step, noodle-success-dialog, noodle-success-modal, noodle-support-launcher, noodle-support-launcher-reply, noodle-swipe-deck, noodle-team-grid, noodle-team-grid-member, noodle-testimonials, noodle-text-reveal, noodle-thread, noodle-thread-message, noodle-thumb-gallery, noodle-tilt-card, noodle-toast, noodle-toast-stack, noodle-trust-awards, noodle-trust-certifications, noodle-trust-logos, noodle-trust-security, noodle-tunnel, noodle-tunnel-scene, noodle-velocity-marquee, noodle-zoom-through) > a:not([class]), .sc noodle-coverflow figure > a:not([class]) { background-image: none; padding-block-end: 0; } /* andy-hover-list draws its row padding with ::slotted(a), which the reset above outranks; a row with a note needs room under its link for the note line. */ .sc andy-hover-list > a:not([class]) { padding-block-end: 22px; } .sc andy-hover-list > a[note]:not([class]) { padding-block-end: 52px; } /* Three components set their direct links as text, not pills; those keep the stretching line. */ .sc :is(noodle-accordion-tiles, noodle-account-multistep, noodle-account-reset, noodle-account-search, noodle-account-settings, noodle-account-signin, noodle-account-signup, noodle-assemble, noodle-audience-switch, noodle-audience-switch-item, noodle-badge-grid, noodle-badge-grid-item, noodle-balloon-cards, noodle-balloon-cards-item, noodle-bento, noodle-bento-tile, noodle-blog-author, noodle-blog-card, noodle-blog-header, noodle-blog-list, noodle-blog-related, noodle-blog-share, noodle-booking, noodle-browser-frame, noodle-callouts, noodle-card-stack, noodle-case-study, noodle-chat-hero, noodle-checkout-steps, noodle-checkout-steps-step, noodle-chip, noodle-cloud, noodle-colour-wipe, noodle-comic-strip, noodle-compare, noodle-compare-table, noodle-confirm-dialog, noodle-contact-chat, noodle-contact-reactive, noodle-contact-send, noodle-contact-steps, noodle-contact-topics, noodle-course-card, noodle-coverflow, noodle-cta-burst, noodle-curtain-footer, noodle-depth-crowd, noodle-dial, noodle-empty-state, noodle-error-404, noodle-event-card, noodle-exploded, noodle-exploded-teardown, noodle-fan-card, noodle-fan-stack, noodle-faq-accordion, noodle-faq-search, noodle-feature-tabs, noodle-filter-grid, noodle-filter-item, noodle-flip-tile, noodle-flipbook, noodle-flipbook-page, noodle-float-hero, noodle-flood-tile, noodle-fly-to-cart, noodle-fly-to-cart-product, noodle-footer-cta, noodle-footer-curtain, noodle-footer-mega, noodle-footer-minimal, noodle-footer-newsletter, noodle-footer-social, noodle-fullsize-aperture-iris, noodle-fullsize-color-flood, noodle-fullsize-horizontal-glide, noodle-fullsize-lens-focus, noodle-fullsize-morph-layers, noodle-fullsize-pan-drift, noodle-fullsize-parallax, noodle-fullsize-split-curtain, noodle-fullsize-tilt-perspective, noodle-fullsize-zoom-reveal, noodle-glass-card, noodle-glow-card, noodle-glow-grid, noodle-goal-tile, noodle-gravity, noodle-guarantee-card, noodle-guide, noodle-header-banner, noodle-header-dock, noodle-header-drawer, noodle-header-mega, noodle-header-morph, noodle-header-reveal, noodle-hero-day-night, noodle-hero-intro, noodle-hero-mosaic, noodle-hero-parting, noodle-hero-peek, noodle-hero-prompt, noodle-hero-prompt-item, noodle-hero-scribble, noodle-hero-showreel, noodle-hero-showreel-item, noodle-hero-split-screen, noodle-hero-trail, noodle-horizontal, noodle-horizontal-panel, noodle-hotspots, noodle-hover-list, noodle-icon-tile, noodle-iris-reveal, noodle-iris-reveal-scene, noodle-join-counter, noodle-lanes, noodle-launch-coming-soon, noodle-launch-countdown, noodle-launch-maintenance, noodle-launch-schedule, noodle-launch-ticket, noodle-launch-waitlist, noodle-legal-a11y, noodle-legal-cookie, noodle-legal-credits, noodle-legal-language, noodle-legal-privacy, noodle-legal-terms, noodle-lens-grid, noodle-lens-grid-tile, noodle-live-cursors, noodle-live-cursors-person, noodle-living-architecture, noodle-loading-card, noodle-local-gallery, noodle-local-hours, noodle-local-map, noodle-local-menu, noodle-local-reviews, noodle-local-services, noodle-magnet-card, noodle-marquee, noodle-mask-slider, noodle-masonry, noodle-masonry-brick, noodle-media-audio, noodle-media-hero, noodle-media-playlist, noodle-media-testimonial, noodle-media-video, noodle-media-viewer, noodle-milestone, noodle-mood-scale, noodle-morph-tile, noodle-mosaic, noodle-mosaic-tile, noodle-newsletter-inline, noodle-newsletter-issues, noodle-newsletter-slide-in, noodle-not-found, noodle-onboarding, noodle-onboarding-checklist, noodle-onboarding-checklist-item, noodle-onboarding-role, noodle-onboarding-role-option, noodle-onboarding-tour, noodle-onboarding-tour-step, noodle-onboarding-welcome, noodle-onboarding-welcome-screen, noodle-onboarding-workspace, noodle-orbit, noodle-orbit-item, noodle-org-chart, noodle-phone-pop, noodle-plan, noodle-polaroid-scatter, noodle-polaroid-scatter-item, noodle-pop-tile, noodle-presence, noodle-presence-viewer, noodle-pricing, noodle-pricing-addon, noodle-pricing-matrix, noodle-pricing-quote, noodle-pricing-tier, noodle-pricing-toggle, noodle-print-pass, noodle-profile-card, noodle-quiz, noodle-quiz-step, noodle-quote-card, noodle-quote-scroller, noodle-quote-scroller-quote, noodle-quote-wall, noodle-quote-wall-item, noodle-rail, noodle-rail-card, noodle-range, noodle-reactions, noodle-reactions-item, noodle-review-marquee, noodle-ring, noodle-ring-item, noodle-scatter-tile, noodle-scroll-companion, noodle-scroll-marquee, noodle-scroll-path, noodle-scroll-path-stop, noodle-scroll-stack, noodle-scroll-stack-step, noodle-scrub-reveal, noodle-section, noodle-shop-card, noodle-shop-cart, noodle-shop-quickview, noodle-shop-stock, noodle-shop-variant, noodle-shop-zoom, noodle-shrink-header, noodle-slide, noodle-slider, noodle-snap-chapter, noodle-snap-sections, noodle-social-proof, noodle-split-hero, noodle-split-reveal, noodle-spotlight-grid, noodle-spotlight-grid-item, noodle-stack-card, noodle-stagger-grid, noodle-stagger-tile, noodle-stat-tile, noodle-state-tile, noodle-status-banner, noodle-step, noodle-sticker, noodle-sticker-board, noodle-sticky-authors, noodle-sticky-authors-section, noodle-sticky-banner, noodle-sticky-banner-bar, noodle-sticky-columns, noodle-sticky-columns-tile, noodle-sticky-compare, noodle-sticky-cta, noodle-sticky-filter, noodle-sticky-headline, noodle-sticky-mascot, noodle-sticky-phone, noodle-sticky-phone-step, noodle-sticky-progress, noodle-sticky-split, noodle-sticky-steps, noodle-sticky-timeline, noodle-sticky-toc, noodle-stories, noodle-stories-card, noodle-story, noodle-story-step, noodle-success-dialog, noodle-success-modal, noodle-support-launcher, noodle-support-launcher-reply, noodle-swipe-deck, noodle-team-grid, noodle-team-grid-member, noodle-testimonials, noodle-text-reveal, noodle-thread, noodle-thread-message, noodle-thumb-gallery, noodle-tilt-card, noodle-toast, noodle-toast-stack, noodle-trust-awards, noodle-trust-certifications, noodle-trust-logos, noodle-trust-security, noodle-tunnel, noodle-tunnel-scene, noodle-velocity-marquee, noodle-zoom-through) > a:not([class]) { background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--u-o) * 100%), transparent), color-mix(in srgb, currentColor calc(var(--u-o) * 100%), transparent)); padding-block-end: 2px; } /* ---- No gaps in a structured grid (guidelines §0.13) ---------------------------------------------- The shared lists (spec strips, values, doors, rows, icon tiles, the templates index) choose their column count from how many items they hold, never from the width alone: auto-fill and auto-fit leave holes (8 icons in 7 columns, 5 values as 4 + 1). They are flex rows whose cells start at 1/--cols and may grow, so if a row still comes up short at some width, its cells widen to fill it. Two numbers make the count: --want, from the item count (set by the :has() rules, whose selectors are heavy), and --cap, from the width (set by the media queries on the plain class, so it never has to out-rank them). The row uses the smaller. */ :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index) { display: flex; flex-wrap: wrap; --want: 3; --cap: 12; --cols: min(var(--want), var(--cap)); } :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index) > * { flex: 1 1 calc((100% - (var(--cols) - 1) * 24px) / var(--cols)); min-width: 0; } :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(2)) { --want: 2; } :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(4)), :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(7)), :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(8)), :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(11)), :is(.sc-spec, .sc-values, .sc-doors, .sc-row, .sc-icons, .sc-index):has(> :last-child:nth-child(12)) { --want: 4; } /* Five across only where every cell is short: a number over a label, an icon over a word. */ :is(.sc-spec, .sc-icons):has(> :last-child:nth-child(5)), :is(.sc-spec, .sc-icons):has(> :last-child:nth-child(10)) { --want: 5; } .sc-icons:has(> :last-child:nth-child(6)), .sc-icons:has(> :last-child:nth-child(12)) { --want: 6; } /* Tablets: two across for the wide cells, three for three; the short cells go to three, or four when they come in fours or eights. */ @media (max-width: 960px) { :is(.sc-values, .sc-doors, .sc-row, .sc-index) { --cap: 2; } :is(.sc-values, .sc-doors, .sc-row, .sc-index):has(> :last-child:nth-child(3)) { --cap: 3; } :is(.sc-spec, .sc-icons) { --cap: 3; } :is(.sc-spec, .sc-icons):has(> :last-child:nth-child(4n)) { --cap: 4; } } /* Phones: one wide cell per row, two short ones. */ @media (max-width: 600px) { :is(.sc-values, .sc-doors, .sc-row, .sc-index) { --cap: 1; } :is(.sc-values, .sc-doors, .sc-row, .sc-index):has(> :last-child:nth-child(3)) { --cap: 1; } :is(.sc-spec, .sc-icons) { --cap: 2; } :is(.sc-spec, .sc-icons):has(> :last-child:nth-child(4n)) { --cap: 2; } } /* A branded page picks its dark stop for eyebrows and small accent text (above), which is right on a light ground and unreadable on a dark one; in the dark themes every brand takes its light stop. Written with the data-brand attribute so it outranks the per-brand rules. */ [data-theme$="dark"] .sc[data-brand] { --sc-hue: var(--slot-2); --noodle-accent-text: var(--slot-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sc[data-brand] { --sc-hue: var(--slot-2); --noodle-accent-text: var(--slot-2); } } [data-theme^="contrast"] .sc[data-brand] { --sc-hue: var(--accent-ink); --noodle-accent-text: var(--accent-ink); } /* The Andy heroes mix their primary button from the accent and a fixed black with white ink: 3.85:1 in high contrast, where the accent turns light. High contrast wants ink on paper, as the site's own buttons do, so the exposed part takes the palette back. */ [data-theme^="contrast"] .sc *::part(button primary) { background: var(--ink); color: var(--paper); box-shadow: none; } /* The Andy split hero styles its slotted primary link with white ink marked !important, which a page cannot take back; the ground under it can be, so it goes to the contrast theme's black tile. */ [data-theme^="contrast"] .sc andy-split-hero > a[data-primary] { background: var(--tile-dark); box-shadow: none; } /* The split hero paints itself in a product's colours from its brand attribute, set inline by the component, so high contrast has to insist to take them back to the palette's accent. */ [data-theme^="contrast"] .sc noodle-split-hero { --noodle-hero-0: var(--accent-ink) !important; --noodle-hero-1: var(--accent-ink) !important; --noodle-hero-2: var(--accent-ink) !important; } /* Tints (the components' pale washes) in the dark and contrast themes: deep in dark, so light ink reads on them; none in high contrast. */ [data-theme$="dark"] .sc { --noodle-tint: color-mix(in srgb, var(--slot-2) 40%, #0B0C10); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sc { --noodle-tint: color-mix(in srgb, var(--slot-2) 40%, #0B0C10); } } [data-theme^="contrast"] .sc { --noodle-tint: var(--paper); } /* ---- The Andy library (01B) ---------------------------------------------------------------------- Andy components read the same tokens as Noodle (artwork-parallax js/andy/motion.js re-exports Noodle's), so everything above that sets --noodle-* themes them too. What is Andy's own: its two figure inks (navy and plum), which vanish on a dark ground and are lifted there, and the two element lists below, the same two the Noodle block keeps, for the same reasons (heading colour, pill links). tools/sync_artwork.py names any element a sync adds that is missing from them. */ .sc-chapter.sc-ink, .sc-tile.sc-dark { --andy-ink: #cfd0e6; --andy-ink-2: #e3c7e3; } [data-theme$="dark"] .sc { --andy-ink: #cfd0e6; --andy-ink-2: #e3c7e3; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sc { --andy-ink: #cfd0e6; --andy-ink-2: #e3c7e3; } } /* The glass card and the curtain footer draw a surface that stays light in every theme (as Noodle's). */ .sc :is(andy-glass-card, andy-curtain-footer) { --noodle-ink: #16151a; --noodle-muted: #5d5b66; --noodle-surface: #ffffff; --noodle-paper: #f7f4ee; --noodle-border: #e7e3da; --andy-ink: #302d43; --andy-ink-2: #573957; } [data-theme^="contrast"] .sc :is(andy-glass-card, andy-curtain-footer) { --noodle-ink: var(--ink); --noodle-muted: var(--ink); --noodle-surface: var(--paper); --noodle-paper: var(--paper); --noodle-border: var(--ink); } .sc :is(andy-accordion-tiles, andy-account-multistep, andy-account-reset, andy-account-search, andy-account-settings, andy-account-signin, andy-account-signup, andy-assemble, andy-audience, andy-audience-switch, andy-badge, andy-badge-grid, andy-balloon, andy-balloon-cards, andy-banner, andy-bento, andy-bento-tile, andy-blog-author, andy-blog-card, andy-blog-header, andy-blog-list, andy-blog-related, andy-blog-share, andy-booking, andy-booking-class, andy-brick, andy-browser-frame, andy-callouts, andy-case-study, andy-case-study-outcome, andy-checkout-steps, andy-colour-wipe, andy-comic-strip, andy-compare, andy-compare-table, andy-confirm-dialog, andy-contact-chat, andy-contact-chat-question, andy-contact-reactive, andy-contact-send, andy-contact-steps, andy-contact-topics, andy-course-card, andy-course-card-lesson, andy-coverflow, andy-curtain-footer, andy-deck-card, andy-depth-crowd, andy-dial, andy-empty-state, andy-energy-pricing, andy-error-404, andy-event-card, andy-event-card-speaker, andy-explode-item, andy-exploded-teardown, andy-fan-stack, andy-fan-stack-card, andy-faq-accordion, andy-faq-search, andy-feature, andy-feature-props, andy-filter-grid, andy-filter-grid-item, andy-flip-page, andy-flip-tile, andy-flipbook, andy-float-hero, andy-flood-tile, andy-fly-to-cart, andy-footer-cta, andy-footer-curtain, andy-footer-mega, andy-footer-minimal, andy-footer-newsletter, andy-footer-social, andy-fullsize-aperture-iris, andy-fullsize-color-flood, andy-fullsize-horizontal-glide, andy-fullsize-lens-focus, andy-fullsize-morph-layers, andy-fullsize-pan-drift, andy-fullsize-parallax, andy-fullsize-split-curtain, andy-fullsize-tilt-perspective, andy-fullsize-zoom-reveal, andy-glass-card, andy-glow-grid, andy-glow-grid-card, andy-goal-tile, andy-gravity, andy-guarantee-card, andy-guide, andy-header-banner, andy-header-dock, andy-header-drawer, andy-header-mega, andy-header-morph, andy-header-reveal, andy-hero-day-night, andy-hero-intro, andy-hero-mosaic, andy-hero-parting, andy-hero-peek, andy-hero-prompt, andy-hero-prompt-item, andy-hero-scribble, andy-hero-showreel, andy-hero-showreel-item, andy-hero-split-screen, andy-hero-split-screen-item, andy-hero-trail, andy-horizontal, andy-horizontal-panel, andy-hotspots, andy-hover-list, andy-icon-tile, andy-join-counter, andy-jump-card, andy-jump-in, andy-lanes, andy-launch-coming-soon, andy-launch-countdown, andy-launch-cta, andy-launch-maintenance, andy-launch-schedule, andy-launch-ticket, andy-launch-waitlist, andy-leap-carousel, andy-leap-slide, andy-legal-a11y, andy-legal-cookie, andy-legal-credits, andy-legal-language, andy-legal-privacy, andy-legal-terms, andy-lens-grid, andy-lens-grid-tile, andy-live-cursors, andy-living-architecture, andy-loading-card, andy-local-gallery, andy-local-hours, andy-local-map, andy-local-menu, andy-local-reviews, andy-local-services, andy-magnet-card, andy-mask-slider, andy-masonry, andy-media-audio, andy-media-hero, andy-media-playlist, andy-media-testimonial, andy-media-video, andy-media-viewer, andy-mood-scale, andy-morph-tile, andy-mosaic, andy-newsletter-inline, andy-newsletter-issues, andy-newsletter-slide-in, andy-not-found, andy-onboarding, andy-onboarding-checklist, andy-onboarding-checklist-item, andy-onboarding-role, andy-onboarding-role-option, andy-onboarding-tour, andy-onboarding-tour-step, andy-onboarding-welcome, andy-onboarding-workspace, andy-orbit, andy-orbit-item, andy-org-chart, andy-org-chart-person, andy-parade, andy-path-stop, andy-peek-card, andy-peek-rail, andy-phone-pop, andy-pinned-story, andy-pinned-story-step, andy-polaroid-scatter, andy-pop-tile, andy-presence, andy-pricing-addon, andy-pricing-matrix, andy-pricing-quote, andy-pricing-tier, andy-pricing-toggle, andy-product, andy-profile-card, andy-prop-cloud, andy-prop-explode, andy-prop-orbit, andy-prop-range, andy-prop-zoom, andy-quiz-slides, andy-quiz-step, andy-quote-card, andy-quote-scroller, andy-quote-scroller-item, andy-quote-wall, andy-quote-wall-quote, andy-reactions, andy-review-marquee, andy-ring-carousel, andy-ring-item, andy-scatter-tile, andy-scene, andy-scroll-companion, andy-scroll-marquee, andy-scroll-path, andy-scroll-stack, andy-scrub-reveal, andy-shop-card, andy-shop-cart, andy-shop-quickview, andy-shop-stock, andy-shop-variant, andy-shop-zoom, andy-shrink-header, andy-snap-sections, andy-snap-sections-chapter, andy-social-proof, andy-social-proof-review, andy-speech-hero, andy-split-hero, andy-split-reveal, andy-spot, andy-spotlight-grid, andy-stack-step, andy-stat-tile, andy-state-tile, andy-status-banner, andy-step, andy-sticker-board, andy-sticky-authors, andy-sticky-authors-section, andy-sticky-banner, andy-sticky-chapters, andy-sticky-columns, andy-sticky-compare, andy-sticky-cta, andy-sticky-deck, andy-sticky-filter, andy-sticky-filter-item, andy-sticky-headline, andy-sticky-mascot, andy-sticky-phone, andy-sticky-phone-step, andy-sticky-quest, andy-sticky-reveal, andy-sticky-split, andy-sticky-split-section, andy-sticky-steps, andy-sticky-steps-step, andy-sticky-timeline, andy-sticky-timeline-milestone, andy-story, andy-story-slides, andy-success-dialog, andy-success-modal, andy-support-launcher, andy-swipe-deck, andy-team-grid, andy-team-grid-member, andy-testimonials, andy-text-reveal, andy-thread, andy-thread-message, andy-thumb-gallery, andy-tier, andy-tile, andy-tilt-card, andy-toast-stack, andy-trust-awards, andy-trust-certifications, andy-trust-logos, andy-trust-security, andy-tunnel, andy-tunnel-scene, andy-velocity-parade) :is(h1, h2, h3, h4):not(#_) { color: inherit; } .sc :is(andy-accordion-tiles, andy-account-multistep, andy-account-reset, andy-account-search, andy-account-settings, andy-account-signin, andy-account-signup, andy-assemble, andy-audience, andy-audience-switch, andy-badge, andy-badge-grid, andy-balloon, andy-balloon-cards, andy-banner, andy-bento, andy-bento-tile, andy-blog-author, andy-blog-card, andy-blog-header, andy-blog-list, andy-blog-related, andy-blog-share, andy-booking, andy-booking-class, andy-brick, andy-browser-frame, andy-callouts, andy-case-study, andy-case-study-outcome, andy-checkout-steps, andy-colour-wipe, andy-comic-strip, andy-compare, andy-compare-table, andy-confirm-dialog, andy-contact-chat, andy-contact-chat-question, andy-contact-reactive, andy-contact-send, andy-contact-steps, andy-contact-topics, andy-course-card, andy-course-card-lesson, andy-coverflow, andy-curtain-footer, andy-deck-card, andy-depth-crowd, andy-dial, andy-empty-state, andy-energy-pricing, andy-error-404, andy-event-card, andy-event-card-speaker, andy-explode-item, andy-exploded-teardown, andy-fan-stack, andy-fan-stack-card, andy-faq-accordion, andy-faq-search, andy-feature, andy-feature-props, andy-filter-grid, andy-filter-grid-item, andy-flip-page, andy-flip-tile, andy-flipbook, andy-float-hero, andy-flood-tile, andy-fly-to-cart, andy-footer-cta, andy-footer-curtain, andy-footer-mega, andy-footer-minimal, andy-footer-newsletter, andy-footer-social, andy-fullsize-aperture-iris, andy-fullsize-color-flood, andy-fullsize-horizontal-glide, andy-fullsize-lens-focus, andy-fullsize-morph-layers, andy-fullsize-pan-drift, andy-fullsize-parallax, andy-fullsize-split-curtain, andy-fullsize-tilt-perspective, andy-fullsize-zoom-reveal, andy-glass-card, andy-glow-grid, andy-glow-grid-card, andy-goal-tile, andy-gravity, andy-guarantee-card, andy-guide, andy-header-banner, andy-header-dock, andy-header-drawer, andy-header-mega, andy-header-morph, andy-header-reveal, andy-hero-day-night, andy-hero-intro, andy-hero-mosaic, andy-hero-parting, andy-hero-peek, andy-hero-prompt, andy-hero-prompt-item, andy-hero-scribble, andy-hero-showreel, andy-hero-showreel-item, andy-hero-split-screen, andy-hero-split-screen-item, andy-hero-trail, andy-horizontal, andy-horizontal-panel, andy-hotspots, andy-hover-list, andy-icon-tile, andy-join-counter, andy-jump-card, andy-jump-in, andy-lanes, andy-launch-coming-soon, andy-launch-countdown, andy-launch-cta, andy-launch-maintenance, andy-launch-schedule, andy-launch-ticket, andy-launch-waitlist, andy-leap-carousel, andy-leap-slide, andy-legal-a11y, andy-legal-cookie, andy-legal-credits, andy-legal-language, andy-legal-privacy, andy-legal-terms, andy-lens-grid, andy-lens-grid-tile, andy-live-cursors, andy-living-architecture, andy-loading-card, andy-local-gallery, andy-local-hours, andy-local-map, andy-local-menu, andy-local-reviews, andy-local-services, andy-magnet-card, andy-mask-slider, andy-masonry, andy-media-audio, andy-media-hero, andy-media-playlist, andy-media-testimonial, andy-media-video, andy-media-viewer, andy-mood-scale, andy-morph-tile, andy-mosaic, andy-newsletter-inline, andy-newsletter-issues, andy-newsletter-slide-in, andy-not-found, andy-onboarding, andy-onboarding-checklist, andy-onboarding-checklist-item, andy-onboarding-role, andy-onboarding-role-option, andy-onboarding-tour, andy-onboarding-tour-step, andy-onboarding-welcome, andy-onboarding-workspace, andy-orbit, andy-orbit-item, andy-org-chart, andy-org-chart-person, andy-parade, andy-path-stop, andy-peek-card, andy-peek-rail, andy-phone-pop, andy-pinned-story, andy-pinned-story-step, andy-polaroid-scatter, andy-pop-tile, andy-presence, andy-pricing-addon, andy-pricing-matrix, andy-pricing-quote, andy-pricing-tier, andy-pricing-toggle, andy-product, andy-profile-card, andy-prop-cloud, andy-prop-explode, andy-prop-orbit, andy-prop-range, andy-prop-zoom, andy-quiz-slides, andy-quiz-step, andy-quote-card, andy-quote-scroller, andy-quote-scroller-item, andy-quote-wall, andy-quote-wall-quote, andy-reactions, andy-review-marquee, andy-ring-carousel, andy-ring-item, andy-scatter-tile, andy-scene, andy-scroll-companion, andy-scroll-marquee, andy-scroll-path, andy-scroll-stack, andy-scrub-reveal, andy-shop-card, andy-shop-cart, andy-shop-quickview, andy-shop-stock, andy-shop-variant, andy-shop-zoom, andy-shrink-header, andy-snap-sections, andy-snap-sections-chapter, andy-social-proof, andy-social-proof-review, andy-speech-hero, andy-split-hero, andy-split-reveal, andy-spot, andy-spotlight-grid, andy-stack-step, andy-stat-tile, andy-state-tile, andy-status-banner, andy-step, andy-sticker-board, andy-sticky-authors, andy-sticky-authors-section, andy-sticky-banner, andy-sticky-chapters, andy-sticky-columns, andy-sticky-compare, andy-sticky-cta, andy-sticky-deck, andy-sticky-filter, andy-sticky-filter-item, andy-sticky-headline, andy-sticky-mascot, andy-sticky-phone, andy-sticky-phone-step, andy-sticky-quest, andy-sticky-reveal, andy-sticky-split, andy-sticky-split-section, andy-sticky-steps, andy-sticky-steps-step, andy-sticky-timeline, andy-sticky-timeline-milestone, andy-story, andy-story-slides, andy-success-dialog, andy-success-modal, andy-support-launcher, andy-swipe-deck, andy-team-grid, andy-team-grid-member, andy-testimonials, andy-text-reveal, andy-thread, andy-thread-message, andy-thumb-gallery, andy-tier, andy-tile, andy-tilt-card, andy-toast-stack, andy-trust-awards, andy-trust-certifications, andy-trust-logos, andy-trust-security, andy-tunnel, andy-tunnel-scene, andy-velocity-parade) > a:not([class]) { background-image: none; padding-block-end: 0; } /* ---- Andy pages: page-specific rules ---------------------------------------------------------- The site's CSP allows no