/* Alan Roman: site stylesheet for index.html and about.html.
*
* Token-driven, after Scriptura's reader: components only ever name a semantic
* token (--ink, --paper, --accent...), never a raw colour. The site has its own
* neutral "workbench" palette, and each featured project's band re-scopes the
* same tokens to that app's palette with [data-tool], so a visitor sees what the
* app looks like before clicking through.
*
* Every colour token is light-dark(light, dark). Which side applies follows
* color-scheme: the OS by default, or the visitor's pick, which the inline
* script in each page's stamps as data-appearance before first paint.
*
* Token blocks are fenced with @tokens comments so scripts/check-contrast.mjs
* can measure every pair. Change a colour, re-run it.
*
* Pages that live on a project subdomain (morse-code-4-fun) link this file
* root-absolute as /site.css; infra/cloudfront/subdomain-router.js passes that
* path through to the bucket root.
*/
/* ---------------------------------------------------------------------------
* Colour tokens
* ------------------------------------------------------------------------ */
/* By day, Workbench: warm grey paper and a deep teal, quiet enough that the
project bands are the colourful part of the page.
By night, Piano black: lacquer-black case, ivory ink, brass for links and
the focus ring, and buttons that are ivory keys. --sheen is the lacquer's
highlight at the top of the hero; by day it is just the paper. */
/* @tokens site */
:root {
--ink: light-dark(#1c1b19, #f4f0e6);
--ink-soft: light-dark(#4a4640, #c9c3b6);
--paper: light-dark(#f5f3ef, #0a0a0b);
--paper-raised: light-dark(#ffffff, #141416);
--rule: light-dark(#e2ded6, #232326);
--edge: light-dark(#8a847a, #6f6f77);
--accent: light-dark(#0c5357, #dcbc78);
--accent-fill: light-dark(#0c5357, #f1ece1);
--on-accent: light-dark(#ffffff, #0a0a0b);
--focus: light-dark(#1d5fa8, #e2c27d);
--sheen: light-dark(#f5f3ef, #1a1a1d);
}
/* @tokens end */
/* PrepWise, "Kitchen Garden": sepia ink on a cream surface, garden-green
accent. Values are PrepWise's own (--surface, --n-t-*, --g-t-*, --g-600),
text colours taken from its -t- ramps, which exist for exactly this. */
/* @tokens prepwise */
[data-tool="prepwise"] {
--ink: light-dark(#3a3027, #f0e5d3);
--ink-soft: light-dark(#54463a, #ddd0ba);
--paper: light-dark(#f7ecd8, #2b231c);
--paper-raised: light-dark(#fbf3e2, #342a21);
--rule: light-dark(#e7dccb, #4a3c2f);
--edge: light-dark(#8e7b65, #8b7861);
--accent: light-dark(#335025, #a9d385);
--accent-fill: light-dark(#3f5f2b, #8dbf63);
--on-accent: light-dark(#ffffff, #14200e);
--focus: light-dark(#45662e, #99c973);
}
/* @tokens end */
/* Morse Code 4 Fun: the app's indigo night and lavender frame, blue heading
ink, and amber for the signal (the target word in the app). */
/* @tokens morse */
[data-tool="morse"] {
--ink: light-dark(#1b1846, #eceaff);
--ink-soft: light-dark(#403c75, #c3bfe8);
--paper: light-dark(#ecebf8, #15123a);
--paper-raised: light-dark(#ffffff, #1e1a4d);
--rule: light-dark(#d6d3ee, #2e2a66);
--edge: light-dark(#7b77a8, #7d78b8);
--accent: light-dark(#1d4596, #a9c9ff);
--accent-fill: light-dark(#2b2572, #f0b429);
--on-accent: light-dark(#ffffff, #1b1400);
--focus: light-dark(#2d62c4, #ffd166);
--signal: light-dark(#b27400, #f0b429);
}
/* @tokens end */
/* Scriptura, Vellum style: copied verbatim from the reader's own @tokens vellum
block (already held to 7:1 there). Rubric red is the accent, as in the app. */
/* @tokens scriptura */
[data-tool="scriptura"] {
--ink: light-dark(#2a1f14, #efe4cc);
--ink-soft: light-dark(#4f3f2b, #cdbb98);
--paper: light-dark(#f6efe0, #1c1611);
--paper-raised: light-dark(#fbf7ee, #221b14);
--rule: light-dark(#e2d6bd, #3a2e22);
--edge: light-dark(#8c7a5c, #8f7c5e);
--accent: light-dark(#8b1a10, #f0a293);
--accent-fill: light-dark(#8b1a10, #f0a293);
--on-accent: light-dark(#ffffff, #1c1611);
--focus: light-dark(#2d5a8a, #8fb4e0);
}
/* @tokens end */
/* Fun 4 Tots, "Crayon box": cream paper and navy ink by day, a navy bedtime
sky by night, and one crayon per game (data-game) so a child can tell the
games apart by colour before they can read. The matching game's yellow card
backs and green matches are decorative fills, not text, so they are not in
the measured set. */
/* @tokens tots */
[data-tool="tots"] {
--ink: light-dark(#1f2a44, #f4f1ff);
--ink-soft: light-dark(#3a4460, #cbc8e8);
--paper: light-dark(#fff7e8, #131a33);
--paper-raised: light-dark(#ffffff, #1c2447);
--rule: light-dark(#f0e2c8, #2a3360);
--edge: light-dark(#8a7f6c, #7e86b8);
--accent: light-dark(#4c1d95, #c4b5fd);
--accent-fill: light-dark(#5b21b6, #b6a2fc);
--on-accent: light-dark(#ffffff, #160b2e);
--focus: light-dark(#1d4ed8, #fcd34d);
--card-back: light-dark(#ffc93c, #f5b82e);
--card-back-edge: light-dark(#d99a00, #c98f0a);
--on-card-back: light-dark(#1f2a44, #131a33);
--match: light-dark(#bdeccf, #1f5a3c);
--match-edge: light-dark(#2f9e63, #5fd197);
}
/* @tokens end */
/* @tokens tots-circle extends tots */
[data-game="circle"] {
--accent: light-dark(#6b21a8, #d8b4fe);
--accent-fill: light-dark(#6b21a8, #c084fc);
--on-accent: light-dark(#ffffff, #1a0b2e);
}
/* @tokens end */
/* @tokens tots-square extends tots */
[data-game="square"] {
--accent: light-dark(#14532d, #86efac);
--accent-fill: light-dark(#166534, #4ade80);
--on-accent: light-dark(#ffffff, #052e13);
}
/* @tokens end */
/* @tokens tots-triangle extends tots */
[data-game="triangle"] {
--accent: light-dark(#1e3a8a, #93c5fd);
--accent-fill: light-dark(#1e40af, #7cb5fb);
--on-accent: light-dark(#ffffff, #0b1b3a);
}
/* @tokens end */
/* @tokens tots-match extends tots */
[data-game="match"] {
--accent: light-dark(#7a4200, #fcd34d);
--accent-fill: light-dark(#8a3f0b, #fbbf24);
--on-accent: light-dark(#ffffff, #1f1300);
}
/* @tokens end */
/* ---------------------------------------------------------------------------
* Derived tokens and non-colour tokens. Re-declared on every scope so the
* color-mix()es resolve against that scope's colours, not the root's.
* ------------------------------------------------------------------------ */
:root,
[data-tool],
[data-game] {
--hover: color-mix(in srgb, var(--rule) 55%, var(--paper-raised));
--accent-tint: color-mix(in srgb, var(--accent) 12%, var(--paper-raised));
--accent-fill-hover: color-mix(in srgb, var(--accent-fill) 85%, var(--ink));
--shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent),
0 18px 40px -18px color-mix(in srgb, var(--ink) 35%, transparent);
color: var(--ink);
background: var(--paper);
}
:root {
color-scheme: light dark;
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: var(--font-sans);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--radius-s: 6px;
--radius-m: 10px;
--radius-l: 16px;
--measure: 62ch;
--page-w: 72rem;
--gutter: clamp(1rem, 4vw, 2rem);
--focus-ring: 2px solid var(--focus);
}
:root[data-appearance="light"] { color-scheme: light; }
:root[data-appearance="dark"] { color-scheme: dark; }
/* Each band borrows its app's type as well as its colour. */
[data-tool="prepwise"] {
--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
[data-tool="tots"] {
--font-display: "Fredoka", "Nunito", ui-rounded, "Arial Rounded MT Bold", var(--font-sans);
}
[data-tool="scriptura"] {
--font-display: "Hoefler Text", Baskerville, "Baskerville Old Face", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
}
/* ---------------------------------------------------------------------------
* Base
* ------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.15;
margin: 0;
text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:is(a, button, summary, [tabindex]):focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
border-radius: 2px;
}
.wrap {
width: 100%;
max-width: var(--page-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: 0.5rem;
top: -4rem;
z-index: 100;
padding: 0.6rem 1rem;
border-radius: var(--radius-s);
background: var(--accent-fill);
color: var(--on-accent);
font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
* Header
* ------------------------------------------------------------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: color-mix(in srgb, var(--paper) 86%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.75rem;
}
.wordmark {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: 0.25rem; }
.site-nav a {
color: var(--ink-soft);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-s);
}
.site-nav a:hover { color: var(--ink); background: var(--hover); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.appearance-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.5rem;
margin-left: 0.25rem;
padding: 0.4rem 0.7rem;
font: inherit;
font-size: 0.875rem;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--edge);
border-radius: 999px;
cursor: pointer;
}
.appearance-toggle:hover { color: var(--ink); background: var(--hover); }
.appearance-toggle svg { width: 1rem; height: 1rem; }
@media (max-width: 30rem) {
.appearance-toggle .label { display: none; }
}
/* ---------------------------------------------------------------------------
* Sub-nav: an app's own pages, under the site header (Fun 4 Tots games,
* Morse app pages). Pills take the accent of the scope they sit in, so a
* [data-game] on a pill tints just that pill.
* ------------------------------------------------------------------------ */
.sub-nav {
border-bottom: 1px solid var(--rule);
background: var(--paper);
}
.sub-nav ul {
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0.6rem 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.sub-nav a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.75rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
white-space: nowrap;
font-weight: 600;
font-size: 0.95rem;
color: var(--accent);
background: var(--accent-tint);
text-decoration: none;
}
.sub-nav a:hover { background: color-mix(in srgb, var(--accent) 20%, var(--paper-raised)); }
.sub-nav a[aria-current="page"] { background: var(--accent-fill); color: var(--on-accent); }
/* ---------------------------------------------------------------------------
* Hero
* ------------------------------------------------------------------------ */
.hero {
padding-block: clamp(3.5rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem);
background: linear-gradient(180deg, var(--sheen, var(--paper)), var(--paper) 70%);
}
/* Scopes that don't define a sheen use their own paper, not the root's. */
[data-tool] { --sheen: var(--paper); }
.hero h1 {
font-size: clamp(2.3rem, 6vw, 4rem);
letter-spacing: -0.03em;
max-width: 16ch;
}
.hero .lede {
margin-top: 1.25rem;
max-width: var(--measure);
font-size: clamp(1.1rem, 2vw, 1.25rem);
color: var(--ink-soft);
}
.hero .jump {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.hero .jump a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.45rem 0.95rem;
border: 1px solid var(--edge);
border-radius: 999px;
color: var(--ink);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
}
/* Each chip is a small preview of its band's palette. */
.hero .jump li { background: none; }
.hero .jump a { background: var(--paper); }
.hero .jump a:hover { background: var(--hover); }
.jump .swatch {
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--accent-fill);
box-shadow: 0 0 0 1px var(--edge);
}
/* ---------------------------------------------------------------------------
* Project bands
* ------------------------------------------------------------------------ */
.band {
padding-block: clamp(3rem, 8vw, 6rem);
border-top: 1px solid var(--rule);
scroll-margin-top: 3.75rem;
}
.band .wrap {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 60rem) {
.band .wrap { grid-template-columns: 5fr 7fr; }
.band--flip .band-copy { order: 2; }
}
.kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.badge {
padding: 0.15rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--accent);
color: var(--accent);
background: var(--accent-tint);
letter-spacing: 0.06em;
}
.band h2 {
margin-top: 0.75rem;
font-size: clamp(2rem, 4.5vw, 3rem);
letter-spacing: -0.02em;
}
[data-tool="scriptura"] .band-copy h2 {
font-variant: small-caps;
letter-spacing: 0.04em;
color: var(--accent);
}
.band .pitch {
margin-top: 1rem;
font-size: 1.15rem;
color: var(--ink);
}
.band ul.points {
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
color: var(--ink-soft);
}
.band ul.points li {
position: relative;
padding-left: 1.4rem;
}
.band ul.points li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.65em;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--accent-fill);
}
/* Morse bullets are dits and dahs. */
[data-tool="morse"] ul.points li:nth-child(odd)::before { background: var(--signal); }
[data-tool="morse"] ul.points li:nth-child(even)::before {
width: 0.9rem;
height: 0.3rem;
border-radius: 2px;
top: 0.72em;
left: 0;
background: var(--signal);
}
.morse-rule {
display: block;
margin-top: 0.6rem;
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
word-spacing: 0.6em;
color: var(--signal);
}
/* A number spelled in Morse, used as a feature kicker. */
.morse-num {
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.08em;
color: var(--signal, var(--accent));
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 2.9rem;
padding: 0.6rem 1.2rem;
border-radius: var(--radius-m);
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
}
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); }
.btn-quiet { color: var(--ink); border-color: var(--edge); background: var(--paper-raised); }
.btn-quiet:hover { background: var(--hover); }
.app-store { display: inline-block; line-height: 0; border-radius: var(--radius-s); }
.app-store img { height: 2.9rem; width: auto; }
/* Screenshot frame */
.shot {
margin: 0;
border-radius: var(--radius-l);
border: 1px solid var(--edge);
background: var(--paper-raised);
box-shadow: var(--shadow);
overflow: hidden;
}
.shot img { width: 100%; }
/* Only the screenshot that matches the current appearance is shown; the other
is display:none, so with loading="lazy" it is never fetched. */
.shot .for-dark { display: none; }
:root[data-appearance="dark"] .shot .for-light { display: none; }
:root[data-appearance="dark"] .shot .for-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-appearance]) .shot .for-light { display: none; }
:root:not([data-appearance]) .shot .for-dark { display: block; }
}
/* ---------------------------------------------------------------------------
* More experiments + generic cards
* ------------------------------------------------------------------------ */
.section { padding-block: clamp(3rem, 8vw, 5.5rem); border-top: 1px solid var(--rule); }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; }
.section-head p { margin-top: 0.6rem; color: var(--ink-soft); max-width: var(--measure); }
.cards {
display: grid;
gap: 1rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
padding: 1.25rem;
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background: var(--paper-raised);
transition: transform 200ms ease, border-color 200ms ease;
}
.card:hover { border-color: var(--edge); transform: translateY(-2px); }
/* Only cards that go somewhere lift. */
.card:not(:has(a)):hover { border-color: var(--rule); transform: none; }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--ink-soft); font-size: 0.975rem; }
.card .emoji { font-size: 1.5rem; line-height: 1; }
/* The whole card is the link target, via the heading's link. */
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.card h3 a:focus-visible { outline: none; }
.card:has(h3 a:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.card .go { margin-top: auto; padding-top: 0.5rem; font-weight: 600; color: var(--accent); font-size: 0.95rem; }
/* ---------------------------------------------------------------------------
* Contact + footer
* ------------------------------------------------------------------------ */
.contact { padding-block: clamp(3rem, 8vw, 5rem); border-top: 1px solid var(--rule); }
.contact p { font-size: clamp(1.15rem, 2.4vw, 1.4rem); max-width: 40ch; }
.contact a { font-weight: 600; overflow-wrap: anywhere; }
.contact h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.contact .btn { font-weight: 600; }
.site-footer {
padding-block: 2rem;
border-top: 1px solid var(--rule);
color: var(--ink-soft);
font-size: 0.9rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.site-footer ul { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
/* ---------------------------------------------------------------------------
* About page
* ------------------------------------------------------------------------ */
.about-intro { display: grid; gap: 2rem; align-items: start; margin-top: 2rem; }
@media (min-width: 48rem) {
.about-intro { grid-template-columns: 10rem 1fr; }
}
.about-intro img {
width: 10rem;
height: 10rem;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--edge);
}
.about-intro .prose { display: grid; gap: 1rem; max-width: var(--measure); color: var(--ink-soft); }
.about-intro .prose p:first-child { color: var(--ink); font-size: 1.15rem; }
.work-card { padding: 0; overflow: hidden; }
.work-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--rule); }
.work-card .body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
.work-card:hover { transform: none; }
.work-card details { font-size: 0.95rem; color: var(--ink-soft); }
.work-card summary { cursor: pointer; color: var(--ink); font-weight: 600; min-height: 2rem; }
.work-card details p { margin-top: 0.4rem; }
.work-card .go { text-decoration: none; }
.work-card .go:hover { text-decoration: underline; }
.facts { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.facts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.facts .where { color: var(--ink-soft); }
/* ---------------------------------------------------------------------------
* App pages: FAQ, long-form text (privacy policies), support
* ------------------------------------------------------------------------ */
.faq { display: grid; gap: 0.75rem; max-width: 48rem; margin: 2rem 0 0; }
.faq details {
border: 1px solid var(--rule);
border-radius: var(--radius-m);
background: var(--paper-raised);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.25rem;
padding: 0.75rem 1.1rem;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
flex: none;
font-size: 1.4rem;
line-height: 1;
color: var(--accent);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 1.1rem 1rem; color: var(--ink-soft); }
.long-form { max-width: var(--measure); }
.long-form h2 { margin: 2.25rem 0 0.6rem; font-size: 1.35rem; }
.long-form p, .long-form ul { color: var(--ink-soft); }
.long-form p + p { margin-top: 0.8rem; }
.long-form ul { margin: 0.6rem 0; padding-left: 1.25rem; }
.long-form li + li { margin-top: 0.25rem; }
.long-form .updated { margin-bottom: 1.5rem; font-size: 0.95rem; }
/* ---------------------------------------------------------------------------
* Motion
* ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.card { transition: none; }
.card:hover { transform: none; }
}