/* ========================================================================== Curiosity — the style switch and three exploratory styles -------------------------------------------------------------------------- css/styles.css is the brand, and it stays the default: with no data-style on nothing in this file applies except the switch control itself. The three styles below are explorations, requested by Curiosity, of a brighter and more colorful site: whiter paper, more blues and grays, headline type that plays, the whole page drawn on a visible grid, and motion that builds things out of squares (js/motion.js). They break the brand's one-Signal rule on purpose, and nothing else: the page structure, the copy, the square geometry and the accessibility floor are the brand's. Every text pairing here was measured to 4.5:1 (3:1 for large type). blueprint graph paper, navy ink, cobalt pixel black, white and electric blue blocks, a dot grid tiles every section a colored square, crosshairs at the joins Each style names its tokens on , then its surfaces. The inline SVG figures carry literal hex fills; the remap block turns each brand tone into the style's tone (CSS beats a presentation attribute), so the diagrams follow without a second copy of every figure. ========================================================================== */ /* --- the switch (all styles, brand included) ------------------------------ A small square in the bottom right corner, above Sudo's rail (56px), faint until pointed at. It opens a wrapping row of swatch icons, one per style, and the name of the one under the pointer or the focus above them. */ .styleswitch { position: fixed; right: 12px; bottom: 68px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .styleswitch[hidden] { display: none; } .styleswitch__btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer; opacity: .45; transition: opacity .15s ease; } .styleswitch__btn:hover, .styleswitch__btn:focus-visible, .styleswitch__btn[aria-expanded="true"] { opacity: 1; } .styleswitch__btn svg { width: 10px; height: 10px; fill: currentColor; } .styleswitch__btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); } .styleswitch__menu { width: 172px; background: var(--paper); border: 1px solid var(--ink); padding: 6px; } .styleswitch__menu[hidden] { display: none; } .styleswitch__name { margin: 0 0 6px; min-height: 1em; font-size: .62rem; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .styleswitch__list { display: flex; flex-wrap: wrap; gap: 4px; } .styleswitch__opt { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; background: transparent; cursor: pointer; } .styleswitch__opt:hover { border-color: var(--ash); } .styleswitch__opt:focus-visible { outline-offset: 1px; } .styleswitch__opt[aria-pressed="true"] { border-color: var(--ink); } .styleswitch__sw { display: grid; grid-template-columns: repeat(2, 8px); gap: 1px; } .styleswitch__sw i { display: block; width: 8px; height: 8px; outline: 1px solid rgba(17, 20, 24, .18); outline-offset: -1px; } @media print { .styleswitch { display: none; } } /* ========================================================================== Shared by all four styles ========================================================================== */ /* Brighter paper: the ground is white, not the brand's warm gray. */ [data-alt] body { background-color: var(--paper); } [data-alt] .masthead { background: var(--paper); } [data-alt] .plate { background: transparent; } [data-alt] .sol:hover, [data-alt] a.tile:hover, [data-alt] .ind:hover, [data-alt] .chip:hover { background: transparent; } /* The page on a grid: each style sets --grid-img and --grid-size, drawn behind everything and centered, so the grid is symmetric on the page. */ [data-alt] body { background-image: var(--grid-img, none); background-size: var(--grid-size, auto); background-position: center 0; } /* The figures follow the style: each brand tone maps to the style's tone. */ [data-alt] { --f-ink: var(--ink); --f-slate: var(--slate); --f-ash: var(--ash); --f-mute: var(--mute); --f-paper: var(--paper); --f-stone: var(--stone); --f-line: var(--line-c); --f-ink2: var(--ink-2); --f-white: #FFFFFF; --f-signal: var(--signal); --f-muteink: var(--mute-ink); } [data-alt] svg:not(.foot__cat-px) [fill="#111418"] { fill: var(--f-ink); } [data-alt] svg:not(.foot__cat-px) [fill="#2A2F38"] { fill: var(--f-slate); } [data-alt] svg:not(.foot__cat-px) [fill="#8A9099"] { fill: var(--f-ash); } [data-alt] svg:not(.foot__cat-px) [fill="#6B7280"] { fill: var(--f-mute); } [data-alt] svg:not(.foot__cat-px) [fill="#616774"] { fill: var(--f-muteink); } [data-alt] svg:not(.foot__cat-px) [fill="#F4F4F2"] { fill: var(--f-paper); } [data-alt] svg:not(.foot__cat-px) [fill="#E6E8E8"] { fill: var(--f-stone); } [data-alt] svg:not(.foot__cat-px) [fill="#DEE0DF"] { fill: var(--f-line); } [data-alt] svg:not(.foot__cat-px) [fill="#C5C9CE"] { fill: var(--f-ink2); } [data-alt] svg:not(.foot__cat-px) [fill="#FFFFFF"] { fill: var(--f-white); } [data-alt] svg:not(.foot__cat-px) [fill="#2F6BFF"] { fill: var(--f-signal); } [data-alt] svg:not(.foot__cat-px) [stroke="#111418"] { stroke: var(--f-ink); } [data-alt] svg:not(.foot__cat-px) [stroke="#2A2F38"] { stroke: var(--f-slate); } [data-alt] svg:not(.foot__cat-px) [stroke="#8A9099"] { stroke: var(--f-ash); } [data-alt] svg:not(.foot__cat-px) [stroke="#6B7280"] { stroke: var(--f-mute); } [data-alt] svg:not(.foot__cat-px) [stroke="#DEE0DF"] { stroke: var(--f-line); } [data-alt] svg:not(.foot__cat-px) [stroke="#C5C9CE"] { stroke: var(--f-ink2); } [data-alt] svg:not(.foot__cat-px) [stroke="#F4F4F2"] { stroke: var(--f-paper); } [data-alt] svg:not(.foot__cat-px) [stroke="#2F6BFF"] { stroke: var(--f-signal); } [data-alt] .hero__field { --dash: var(--field-dash, var(--slate)); } /* Headlines rise word by word (js/motion.js splits them and adds data-words only when motion is allowed). */ [data-alt] [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } [data-alt] [data-words] .w__i { display: inline-block; transition: transform .9s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--wi, 0) * 55ms); } [data-alt] [data-words]:not(.is-words) .w__i { transform: translateY(112%); } [data-alt] .has-reveal [data-words][data-rv] { opacity: 1; transform: none; } @media print { [data-alt] [data-words] .w__i { transform: none !important; } } /* A figure builds out of squares, then they clear (js/motion.js). */ .pxd { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; display: block; } :root:not([data-alt]) .pxd { display: none; } @media print { .pxd { display: none; } } /* The pixel band: a stepped gradient in squares, three rows high. */ .pxband { display: none; } [data-alt] .pxband { display: block; height: 72px; position: relative; border-bottom: var(--hair); } [data-alt] .pxband canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } @media (max-width: 620px) { [data-alt] .pxband { height: 48px; } } @media print { .pxband { display: none !important; } } /* Cells fill from the corner in steps when pointed at. */ [data-alt] :is(.sol, a.tile, .ind, .case, .chip, .subnav a, .foot__col) { position: relative; isolation: isolate; } [data-alt] :is(.sol, a.tile, .ind, .case, .chip, .subnav a)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hover-fill, var(--stone)); clip-path: inset(0 100% 100% 0); transition: clip-path .42s steps(7, end); } [data-alt] :is(.sol, a.tile, .ind, .case, .chip, .subnav a):hover::after { clip-path: inset(0 0 0 0); } /* On a dark surface the style's pale fill would sit under paper type and wash it out, so the fill there is a tint of the cell's own type color: a step lighter on ink, a step darker wherever a style turns the surface light. Styles that give a surface a fill of their own restate it later. */ [data-alt] :is(.section--dark, .sec, .panel--dark, .call, .pcell--feature) { --hover-fill: color-mix(in srgb, currentColor 10%, transparent); } /* Section headlines carry a mono counter, SECTION / 04 style. Generated text is kept from assistive technology with the alt-text form. */ [data-alt] main { counter-reset: sec; } [data-alt] main .section h2.display--md::before, [data-alt] main .section h2.display--lg::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " /" / ""; display: block; margin-bottom: .9rem; font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em; line-height: 1; color: var(--counter, var(--accent)); } [data-alt] main :is(.section--dark, .sec, .panel--dark) h2.display::before { color: var(--counter-dark, var(--accent-2)); } /* Buttons get the style's accent. */ [data-alt] .btn--solid { background: var(--btn, var(--ink)); border-color: var(--btn, var(--ink)); color: var(--btn-ink, var(--paper)); } [data-alt] .btn--solid:hover { background: var(--btn-hover, var(--slate)); border-color: var(--btn-hover, var(--slate)); } /* ========================================================================== Blue surfaces, shared by the styles that use them. White type; secondary and muted type in the pale blue, which clears 4.5:1 on each blue here. ========================================================================== */ [data-style="pixel"] .proof, [data-style="pixel"] .panel--dark, [data-style="pixel"] .call, [data-style="tiles"] .proof, [data-style="tiles"] .call, [data-style="blueprint"] .panel--dark { --canvas: var(--blue); --hair: 1px solid rgba(255, 255, 255, .3); --line: 1px solid rgba(255, 255, 255, .3); --f-paper: var(--blue); --f-stone: var(--blue); --f-ink: var(--blue); --f-slate: #FFFFFF; --f-ash: var(--on-blue-2); --f-signal: #FFFFFF; --hover-fill: rgba(255, 255, 255, .12); background: var(--blue); color: #FFFFFF; border-top-color: var(--blue); } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :is(.body, .stat__d, .reason p, .proof__note blockquote, .eyebrow, .label, .label--soft, .reason__k, .call__kicker, .badge span) { color: var(--on-blue-2); } html :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) h2.display::before { color: var(--on-blue-2); } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :is(.stat .stat__n, .proof__co, .proof__noteco, .badge strong, h2) { color: #FFFFFF; } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :is(.btn, .btn--ghost) { background: transparent; border-color: #FFFFFF; color: #FFFFFF; } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :is(.btn--solid, .btn--paper) { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue); } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :is(.btn, .btn--ghost, .btn--solid, .btn--paper):hover { background: var(--on-blue-2); border-color: var(--on-blue-2); color: var(--blue-deep); } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) :focus-visible { outline-color: #FFFFFF; } :is([data-style="pixel"] :is(.proof, .panel--dark, .call), [data-style="tiles"] :is(.proof, .call), [data-style="blueprint"] .panel--dark) .proof__link { border-bottom-color: rgba(255, 255, 255, .6); } :is([data-style="pixel"], [data-style="tiles"]) .call .badges { border-top-color: #FFFFFF; } :is([data-style="pixel"], [data-style="tiles"]) .call .call__field { border-bottom-color: rgba(255, 255, 255, .3); } /* Dark surfaces take the style's ink and its blue counter. */ [data-alt] .section--dark, [data-alt] .sec { --f-paper: var(--ink); --f-stone: var(--ink); } /* ========================================================================== Blueprint — graph paper, navy ink, cobalt ========================================================================== */ [data-style="blueprint"] { --paper: #FFFFFF; --stone: #F1F5FB; --line-c: #DDE5F0; --ink: #0A1A3F; --slate: #2A3D63; --ash: #8D9BB5; --mute: #5D6E8C; --mute-ink: #4F6080; --ink-2: #C4D0E6; --signal: #1F56F0; --accent: #1F56F0; --accent-2: #8FB0FF; --soft: #DCE7FF; --blue: #1F56F0; --blue-deep: #0A1A3F; --on-blue-2: #DCE7FF; --btn: #1F56F0; --btn-hover: #0A1A3F; --field-dash: #1F56F0; --f-slate: #1F56F0; --f-ash: #8FB0FF; --f-stone: #EEF3FC; --px-tones: #0A1A3F, #1F56F0, #5E89FF, #A9C2FF, #DCE7FF; --band-tones: #0A1A3F, #13307A, #1F56F0, #5E89FF, #A9C2FF, #DCE7FF, #F1F5FB; --intro-tones: #0A1A3F, #13307A, #1F56F0, #5E89FF; --hover-fill: #EEF3FC; --grid-img: linear-gradient(#E2E9F4 1px, transparent 1px), linear-gradient(90deg, #E2E9F4 1px, transparent 1px), linear-gradient(#F1F4F9 1px, transparent 1px), linear-gradient(90deg, #F1F4F9 1px, transparent 1px); --grid-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; } [data-style="blueprint"] .display .red, [data-style="blueprint"] .display .blue, [data-style="blueprint"] .display .yellow { color: var(--accent); } [data-style="blueprint"] .display { letter-spacing: -.035em; } [data-style="blueprint"] .eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--accent); } [data-style="blueprint"] .eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; } [data-style="blueprint"] :is(.section--dark, .sec) .eyebrow { color: var(--accent-2); } [data-style="blueprint"] .section--dark, [data-style="blueprint"] .sec { background-image: linear-gradient(rgba(143, 176, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 176, 255, .1) 1px, transparent 1px); background-size: 48px 48px; background-position: center 0; } [data-style="blueprint"] .section--dark { --hair: 1px solid #22386A; --line: 1px solid #22386A; } [data-style="blueprint"] .stat .stat__n { color: var(--accent); } [data-style="blueprint"] .section--dark .stat .stat__n { color: var(--accent-2); } [data-style="blueprint"] .call { background: var(--soft); --f-stone: var(--soft); --f-slate: #1F56F0; } [data-style="blueprint"] .call .badge span, [data-style="blueprint"] .call .call__kicker { color: var(--slate); } [data-style="blueprint"] .panel--paper { background: var(--stone); } [data-style="blueprint"] .trust__cell { background: rgba(255, 255, 255, .85); } [data-style="blueprint"] .trust__logo { background-color: var(--slate); } [data-style="blueprint"] .ind__icon { border-color: var(--accent); color: var(--accent); } [data-style="blueprint"] .tile__glyph, [data-style="blueprint"] .case__glyph { color: var(--accent); } [data-style="blueprint"] .ticks li::before, [data-style="blueprint"] .plan__list li::before, [data-style="blueprint"] .chip::before, [data-style="blueprint"] .faq summary::before { background: var(--accent); } /* ========================================================================== Pixel — black, white and electric blue blocks, a dot grid ========================================================================== */ [data-style="pixel"] { --paper: #FFFFFF; --stone: #F1F2F4; --line-c: #E1E3E8; --ink: #0B0B0F; --slate: #272A33; --ash: #8E929C; --mute: #62666F; --mute-ink: #565A63; --ink-2: #C8CBD2; --signal: #2A3BFF; --accent: #2A3BFF; --accent-2: #8C96FF; --soft: #E3E6FF; --blue: #2A3BFF; --blue-deep: #0B0B0F; --on-blue-2: #E3E6FF; --btn: #0B0B0F; --btn-hover: #2A3BFF; --field-dash: #FFFFFF; --f-slate: #0B0B0F; --f-ash: #8C96FF; --px-tones: #0B0B0F, #2A3BFF, #2A3BFF, #6A76FF, #E3E6FF; --band-tones: #0B0B0F, #16197A, #2A3BFF, #5C68FF, #9AA2FF, #E3E6FF, #FFFFFF; --intro-tones: #0B0B0F, #0B0B0F, #2A3BFF, #2A3BFF; --hover-fill: #E3E6FF; --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='11' y='11' width='2' height='2' fill='%23C9CDD6'/%3E%3C/svg%3E"); --grid-size: 24px 24px; } [data-style="pixel"] .display { letter-spacing: -.045em; } [data-style="pixel"] .display--xl { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1.06; } [data-style="pixel"] .display--lg { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; } /* The second tone in a headline is a blue block, like a key on a keyboard. */ [data-style="pixel"] .display :is(.red, .blue, .yellow) { color: #FFFFFF; background: var(--accent); padding: 0 .14em .04em; margin-left: -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } [data-style="pixel"] .eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 500; } [data-style="pixel"] .eyebrow::before { content: ""; flex: none; width: 14px; height: 6px; background: linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 5px, var(--accent) 5px 9px, transparent 9px 10px, var(--accent) 10px 14px); } [data-style="pixel"] :is(.section--dark, .sec, .proof, .panel--dark, .call) .eyebrow { color: #FFFFFF; } [data-style="pixel"] :is(.section--dark, .sec, .proof, .panel--dark, .call) .eyebrow::before { background: linear-gradient(90deg, #FFFFFF 0 4px, transparent 4px 5px, #FFFFFF 5px 9px, transparent 9px 10px, #FFFFFF 10px 14px); } [data-style="pixel"] .stat .stat__n, [data-style="pixel"] .plan__price { font-family: "Doto", var(--mono); font-weight: 900; letter-spacing: 0; font-size: clamp(3rem, 5.4vw, 5rem); } [data-style="pixel"] .plan__price { font-size: clamp(2.4rem, 4vw, 3.4rem); } [data-style="pixel"] .hero__field { background: var(--accent); --signal: #FFFFFF; margin-left: 0; } [data-style="pixel"] .hero__field svg.field > rect:first-child { fill: var(--accent); } [data-style="pixel"] .hero__field svg.field > g { stroke: #FFFFFF; } [data-style="pixel"] .hero__field svg.field > rect:last-child { fill: #FFFFFF; } [data-style="pixel"] .ind__fig svg.field > rect:first-child, [data-style="pixel"] .phero__band svg.field > rect:first-child { fill: var(--accent); } [data-style="pixel"] .ind__fig svg.field > g, [data-style="pixel"] .phero__band svg.field > g { stroke: #FFFFFF; } [data-style="pixel"] .phero__band svg.field > rect:last-child { fill: #FFFFFF; } [data-style="pixel"] .ind:nth-child(2n) .ind__fig svg.field > rect:first-child { fill: var(--ink); } [data-style="pixel"] .ind:nth-child(2n) .ind__fig svg.field > g { stroke: var(--accent-2); } [data-style="pixel"] .ind__icon { background: #FFFFFF; border-color: #FFFFFF; } [data-style="pixel"] .panel--paper .panel__texture svg > rect:first-child { fill: var(--ink); } [data-style="pixel"] .panel--paper .panel__texture svg path { stroke: var(--accent-2); } [data-style="pixel"] .panel--paper { background: var(--stone); } [data-style="pixel"] .sec__px { background: var(--accent); } [data-style="pixel"] .tile__glyph, [data-style="pixel"] .case__glyph { color: var(--accent); } [data-style="pixel"] .ticks li::before, [data-style="pixel"] .plan__list li::before, [data-style="pixel"] .chip::before, [data-style="pixel"] .faq summary::before { background: var(--accent); } [data-style="pixel"] .trust__logo { background-color: var(--ink); } [data-style="pixel"] .phero__band { border-top: 0; } /* ========================================================================== Tiles — every section a colored square, crosshairs at the joins ========================================================================== */ [data-style="tiles"] { --paper: #FFFFFF; --stone: #ECEFF3; --line-c: #DDE2E8; --ink: #0E1320; --slate: #2B3346; --ash: #8A93A6; --mute: #5E6778; --mute-ink: #535C70; --ink-2: #C6CDDA; --signal: #2446E8; --accent: #2446E8; --accent-2: #9DB8FF; --soft: #DDE5FF; --blue: #2446E8; --blue-deep: #0E1320; --on-blue-2: #DDE5FF; --btn: #2446E8; --btn-hover: #0E1320; --field-dash: #2446E8; --f-slate: #2446E8; --f-ash: #9DB8FF; --px-tones: #0E1320, #2446E8, #9DB8FF, #DDE5FF, #ECEFF3; --band-tones: #0E1320, #1A2C8F, #2446E8, #5F7CF0, #9DB8FF, #DDE5FF, #ECEFF3; --intro-tones: #0E1320, #2446E8, #DDE5FF, #9DB8FF; --hover-fill: #DDE5FF; --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 42v12M42 48h12' stroke='%23B9C3D4' stroke-width='1'/%3E%3C/svg%3E"); --grid-size: 96px 96px; } /* Headlines oversized and tight; the second tone drops to its own line, indented one step, so a headline reads as two blocks of type. */ [data-style="tiles"] .display { letter-spacing: -.05em; line-height: .96; } [data-style="tiles"] .display--xl { font-size: clamp(2.8rem, 5.6vw, 5.4rem); } [data-style="tiles"] .display--lg { font-size: clamp(2.5rem, 5.6vw, 5rem); } [data-style="tiles"] .display--md { font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 1; } [data-style="tiles"] .display :is(.red, .blue, .yellow) { display: block; padding-left: clamp(.6em, 5vw, 1.2em); color: var(--accent); } @media (min-width: 901px) { [data-style="tiles"] .hero__copy { grid-column: 1 / span 8; } [data-style="tiles"] .hero__field { grid-column: 9 / span 4; } } [data-style="tiles"] .eyebrow { display: flex; width: fit-content; max-width: 100%; align-items: center; padding: .35rem .7rem; border: 1px solid currentColor; border-radius: 999px; color: var(--ink); } [data-style="tiles"] :is(.section--dark, .sec, .proof, .call, .panel--dark) .eyebrow { color: #FFFFFF; } [data-style="tiles"] .hero__copy .eyebrow { align-self: flex-start; } /* The tiles: sections take turns, never two dark ones together. */ [data-style="tiles"] main > .section:nth-of-type(even):not(.section--dark):not(.sec):not(.call):not(.proof) { background: var(--stone); --f-paper: var(--stone); } [data-style="tiles"] #solutions { background: var(--soft); --f-paper: var(--soft); --hover-fill: #FFFFFF; } [data-style="tiles"] #solutions .body, [data-style="tiles"] #solutions .sol p { color: var(--slate); } [data-style="tiles"] .phero { background: var(--soft); --f-paper: var(--soft); } [data-style="tiles"] .phero .lede { color: var(--slate); } [data-style="tiles"] .phero .eyebrow { color: var(--ink); } [data-style="tiles"] .trust__cell { background: #FFFFFF; } [data-style="tiles"] .trust__logo { background-color: var(--slate); } [data-style="tiles"] .section--dark { --hair: 1px solid #262E45; --line: 1px solid #262E45; } [data-style="tiles"] .stat .stat__n { font-family: var(--sans); letter-spacing: -.05em; font-size: clamp(3.2rem, 6vw, 5.6rem); } [data-style="tiles"] .hero__field { background: var(--soft); } [data-style="tiles"] .hero__field svg.field > rect:first-child { fill: var(--soft); } [data-style="tiles"] .panel--paper { background: var(--soft); } [data-style="tiles"] .panel--paper .panel__texture svg > rect:first-child { fill: var(--soft); } [data-style="tiles"] .panel--dark { --ink: #0E1320; } [data-style="tiles"] .tile__glyph, [data-style="tiles"] .case__glyph { color: var(--accent); } [data-style="tiles"] .ind__icon { border-color: var(--accent); color: var(--accent); } [data-style="tiles"] .ticks li::before, [data-style="tiles"] .plan__list li::before, [data-style="tiles"] .chip::before, [data-style="tiles"] .faq summary::before { background: var(--accent); } [data-style="tiles"] .foot { background: var(--stone); } [data-style="pixel"] .ind__fig svg.field > rect:last-child { fill: #FFFFFF; }