/* Botfolio's fixed dark theme. */ :root { --bg: #0d1117; --bg-raised: #151b24; --bg-input: #10161e; --bg-input-focus: #121924; --border: #242c38; --text: #e6edf3; --text-dim: #8b97a7; --accent: #ff7a3d; --accent-dim:#c9531f; --good: #4ec98a; --bad: #e5654f; --radius: 12px; /* Motion. One decelerating curve used everywhere, so nothing on the page moves with a different personality from anything else. */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Shadows are wide, soft and mostly below the element — the look comes from depth, not from a dark outline. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 18px 40px -22px rgba(0, 0, 0, .8); --shadow-3: 0 34px 70px -30px rgba(0, 0, 0, .9); /* A single highlight pass over the top of raised surfaces, as if there were one light source above the page. */ --sheen: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 45%); --raised: linear-gradient(180deg, #18202b, var(--bg-raised)); --panel: linear-gradient(135deg, #1b222d, #11161e); /* Chrome surfaces that used to be hardcoded rgba() so they can flip with the theme: the translucent topbar, its scrolled state, floating inputs and the glass menus (search results, command palette). */ --topbar-bg: rgba(21, 27, 36, .72); --topbar-bg-stuck: rgba(14, 19, 26, .88); --topbar-border-stuck: #2c3644; --input-float: rgba(13, 17, 23, .88); --glass: rgba(21, 27, 36, .98); --border-strong: color-mix(in srgb, var(--border) 70%, var(--text) 12%); /* The two washes at the top of the page. Tokenised so light mode can cool them down instead of glowing orange over white. */ --body-glow-1: radial-gradient(115% 65% at 50% -12%, rgba(255, 122, 61, .10), transparent 62%); --body-glow-2: radial-gradient(85% 55% at 88% -4%, rgba(88, 150, 214, .08), transparent 58%); } * { box-sizing: border-box; } /* Author-level display rules on dialogs and floating controls must not override HTML's hidden state. Otherwise their invisible, fixed backdrops intercept every click on the page before JavaScript opens them. */ [hidden] { display: none !important; } html { scrollbar-color: var(--border) transparent; scrollbar-width: thin; scroll-behavior: smooth; /* Anchor targets land below the sticky topbar instead of under it. */ scroll-padding-top: 5.5rem; /* The hero coverflow's fanned side cards bleed past the page; clip that bleed so it never adds a horizontal scrollbar. `clip` (not `hidden`) doesn't create a scroll container, so the sticky topbar and the smooth vertical scroll above are untouched. Both and need it: 's value is what the viewport absorbs, which then lets keep its own clip and actually trim the overflowing descendants (see the rule below). */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; /* Trims the hero carousel's side-card bleed (paired with the clip above) so no horizontal scrollbar appears. `clip`, not `hidden`, to keep the sticky topbar working. */ overflow-x: clip; /* Two very low-opacity washes at the top of the page: the whole thing reads as lit from above rather than as a flat block of dark grey. Tokenised so the light theme can cool them without touching this rule. */ background: var(--body-glow-1), var(--body-glow-2), var(--bg); background-repeat: no-repeat; color: var(--text); transition: background-color .4s var(--ease), color .4s var(--ease); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(255, 122, 61, .28); color: #fff; } a { color: var(--accent); text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .3s var(--ease); } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.22; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: 2.1rem; letter-spacing: -.028em; } h2 { font-size: 1.4rem; letter-spacing: -.018em; } h3 { font-size: 1.05rem; letter-spacing: -.01em; } code { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: .1em .35em; font-size: .9em; } /* ---------------------------------------------------------------- layout */ .page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } /* The gallery is a card grid, not a column of prose, so it breaks out of the reading width and follows the screen: the .grid below is auto-fill, so a wider page simply fits more cards per row (four at ~1100px up to seven on a large monitor) and collapses back to one on a phone. */ .page--wide { max-width: 1760px; } .narrow { max-width: 520px; margin: 0 auto; } .narrow.center { text-align: center; } .edit-design-page { max-width: 1120px; margin: 0 auto; } .edit-design-form { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; } .edit-design-form > .panel { margin: 0; } .edit-design-form > .panel:only-of-type { grid-column: 1 / -1; max-width: 720px; } .edit-design-current-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1rem; } .edit-design-current-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); } @media (max-width: 800px) { .edit-design-form { grid-template-columns: 1fr; } } /* Authentication stays focused on the form; the header already carries the brand. */ .auth { display: flex; min-height: min(680px, calc(100dvh - 8rem)); align-items: center; justify-content: center; } .auth__form { width: min(480px, 100%); padding: clamp(1.6rem, 4vw, 2.8rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); box-shadow: var(--shadow-1); } .auth__form-inner { width: 100%; max-width: 400px; margin: 0 auto; } .auth__form-inner h1 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); } .auth__form-inner .sub { margin: .2rem 0; } .auth__form-inner .stack { margin-top: 1.4rem; } .auth__form-inner .stack + .sub { margin-top: 1.2rem; } .auth__form-inner .eyebrow { margin-bottom: .4rem; } /* A labelled rule, so the two ways in read as alternatives rather than as a stack of buttons where the lower one looks like the fallback. */ .auth__or { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 0; color: var(--text-dim); font-size: .85rem; } .auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth__panel { display: none; } main.page:has(.auth--signup), main.page:has(.auth--login) { max-width: none; padding: 0; } .auth--signup { display: grid; grid-template-columns: minmax(440px, .9fr) minmax(380px, 1.1fr); min-height: calc(100dvh - 5.5rem); align-items: stretch; } .auth--signup .auth__form { width: 100%; max-width: none; display: flex; align-items: center; grid-column: 2; grid-row: 1; border: 0; border-radius: 0; box-shadow: none; } .auth--signup .auth__panel { display: flex; grid-column: 1; grid-row: 1; flex-direction: column; justify-content: space-between; padding: clamp(2.5rem, 6vw, 5.5rem); color: #f5f8fc; background: radial-gradient(70% 60% at 12% 12%, rgba(255, 122, 61, .72), transparent 62%), radial-gradient(65% 58% at 88% 24%, rgba(88, 150, 214, .7), transparent 64%), radial-gradient(72% 65% at 68% 94%, rgba(78, 201, 138, .55), transparent 66%), linear-gradient(145deg, #16253f, #0c1017 72%); } .auth__panel h2 { max-width: 520px; margin: 0 0 1.5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; } .auth__points { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; } .auth__points li { position: relative; padding-left: 1.8rem; color: rgba(245, 248, 252, .9); } .auth__points li::before { content: "✓"; position: absolute; left: 0; color: #ffb080; font-weight: 800; } .auth__panel > p { margin: 2rem 0 0; color: rgba(245, 248, 252, .62); } .auth--login { width: 100%; min-height: calc(100dvh - 5.5rem); padding: clamp(1.25rem, 5vw, 4rem); background: radial-gradient(55% 65% at 8% 12%, rgba(255, 122, 61, .65), transparent 64%), radial-gradient(58% 62% at 92% 18%, rgba(88, 150, 214, .62), transparent 66%), radial-gradient(60% 68% at 65% 100%, rgba(78, 201, 138, .45), transparent 68%), linear-gradient(145deg, #16253f, #0c1017 72%); } .auth--login .auth__form { background: color-mix(in srgb, var(--bg-raised) 94%, transparent); backdrop-filter: blur(14px); } @media (max-width: 820px) { .auth--signup { grid-template-columns: 1fr; } .auth--signup .auth__panel { grid-column: 1; grid-row: 2; min-height: 300px; } .auth--signup .auth__form { grid-column: 1; grid-row: 1; padding-block: 2.5rem; } } .prose { max-width: 680px; } .prose p, .prose li { color: #cbd5e1; } .legal-page { max-width: 780px; } .legal-page h2 { margin-top: 2rem; } .legal-consent { margin: .5rem 0; padding-top: 1.5rem; } .legal-consent legend { float:left; width:100%; padding:0; margin:0 0 1.25rem; font-size:1.05rem; font-weight:700; } .legal-consent legend + * { clear:both; } .legal-alert { border-color: #ef4444; background: rgba(127,29,29,.18); } .contact-directory { display: grid; gap: .75rem; margin: 1.5rem 0; } .contact-directory div { display: grid; gap: .15rem; } .contact-directory dt { font-weight: 700; } .contact-hero { max-width:850px; margin:1rem auto; }.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:2rem 0; }.contact-card { display:flex; flex-direction:column; gap:.35rem; padding:1.4rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-raised); color:var(--text); }.contact-card:hover { border-color:var(--accent); text-decoration:none; }.contact-card span { color:var(--text-dim); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; }.contact-card strong { color:var(--accent); font-size:1.1rem; }.discord-card { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); }.discord-card h2,.discord-card p { margin-bottom:.25rem; } @media(max-width:600px){.discord-card{align-items:flex-start;flex-direction:column;}} .contact-form { display:grid; gap:1rem; margin:2rem 0; }.contact-form__emails { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.contact-form input[readonly] { color:var(--accent); cursor:default; }.contact-form__footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.contact-form__website { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.discord-card { margin-top:1.5rem; } @media(max-width:600px){.contact-form__emails{grid-template-columns:1fr}.contact-form__footer{align-items:flex-start;flex-direction:column}} .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .row--form { margin: 1rem 0 1.5rem; } .row--form input { flex: 1 1 140px; } .inline { display: inline; } .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); } .section-head h2 { margin-bottom: 0; } /* ---------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem; /* An explicit full-width max-width and auto side margins at rest are what let the island morph *animate*: max-width interpolates 100% -> pill width and the auto margins recompute every frame so the bar glides to centre instead of snapping (you cannot transition from `none`/`0` margins to a fixed pill). */ max-width: 100%; margin-inline: auto; padding: .85rem 1.5rem; background: var(--topbar-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); /* All four borders exist at rest (three transparent) so the island morph only recolours them rather than growing a border, which is what used to snap. */ border: 1px solid transparent; border-bottom-color: var(--border); flex-wrap: wrap; transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), max-width .5s var(--ease), padding .5s var(--ease), border-radius .5s var(--ease), gap .5s var(--ease), top .5s var(--ease), margin .5s var(--ease); } /* Set by reveal.js once the page has scrolled: the bar lifts off the content instead of sitting on it. */ .topbar.is-stuck { background: var(--topbar-bg-stuck); border-bottom-color: var(--topbar-border-stuck); box-shadow: var(--shadow-2); } /* Dynamic island: past a scroll threshold, island.js (high tier + motion only) detaches the bar into a floating centred pill. The wordmark collapses to the bot+globe mark (see .brand rules), the search shrinks, and on tighter widths the nav folds away — the essentials condense the way iOS's island does. */ .topbar.is-island { top: .55rem; /* Split out of a min() so it interpolates from the rest `max-width: 100%`: a side gutter on narrow screens, capped to a centred pill on wide ones. */ max-width: calc(100% - 1.5rem); margin: .55rem auto; padding: .4rem .65rem; gap: .85rem; border-color: var(--border-strong); border-radius: 999px; background: var(--topbar-bg-stuck); box-shadow: var(--shadow-3); flex-wrap: nowrap; } @media (min-width: 63rem) { .topbar.is-island { max-width: 61.25rem; } } .topbar.is-island .topbar__nav { gap: .85rem; } .topbar.is-island .global-search { flex-basis: 260px; min-width: 46px; max-width: 320px; margin-left: auto; } .topbar.is-island .global-search input { min-height: 40px; box-shadow: none; } /* On mid widths the pill can't hold the full nav; fold it away there. */ @media (max-width: 1080px) { .topbar.is-island .topbar__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .topbar { transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } } /* Safari on older iOS and Firefox without the pref: no blur, so the bar has to be opaque or the text underneath shows through. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar, .topbar.is-stuck, .topbar.is-island { background: var(--bg-raised); } } .brand { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; height: 60px; color: var(--text); text-decoration: none; } .brand:hover { text-decoration: none; } .brand__mark-basic { flex: 0 0 auto; display: block; width: 40px; height: 40px; object-fit: contain; } /* The mark box stacks the flat fallback image and the animated SVG world; the tier rules below reveal exactly one. The box is taller than the globe so the robot head has room to rise above it. */ .brand__mark { position: relative; flex: 0 0 auto; display: block; width: 40px; height: 54px; } .brand__mark-static, .brand__live { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; } .brand__mark-static { width: 40px; height: 40px; object-fit: contain; } .brand__live { width: 40px; height: 54px; display: none; } /* The wordmark text; the island state (set by island.js on scroll) collapses it away and leaves the mark standing on its own. */ .brand__word { flex: 0 0 auto; width: auto; height: 26px; max-width: 155px; object-fit: contain; opacity: 1; transition: opacity .35s var(--ease), max-width .5s var(--ease); } .topbar.is-island .brand { gap: 0; } .topbar.is-island .brand__word { max-width: 0; opacity: 0; } @media (prefers-reduced-motion: reduce) { .brand__word { transition: none; } } /* The live mark animates only on the full tier with motion allowed; anything else keeps the flat mark image (the robot at rest is hidden behind the globe, so the image, not the SVG, is what carries the mark there). */ @media (prefers-reduced-motion: no-preference) { :root[data-perf="high"] .brand__mark-static { display: none; } :root[data-perf="high"] .brand__live { display: block; } } .brand__live { --ll-land: #6aba5a; --ll-robot: #ff7a3d; } .ll-ocean { fill: #2f8bc4; } .ll-rim { fill: none; stroke: #0d1117; stroke-width: 1.4; opacity: .85; } .ll-blob { fill: var(--ll-land); } /* The mark's robot: an orange outline "kettlebell" head with a handle loop and two solid orange eyes, matching the flat botfolio mark. */ .ll-head { fill: none; stroke: var(--ll-robot); stroke-width: 3; } .ll-handle { fill: none; stroke: var(--ll-robot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ll-eye { fill: var(--ll-robot); } .ll-bot { transform: translateY(21px); } /* rest: sunk behind the globe */ /* The orbiting mini bots. */ .ll-mini-body { fill: var(--ll-robot); } .ll-mini-antenna { fill: var(--ll-robot); } .ll-mini-eye { fill: #0d1117; } .ll-orbit { transform-box: view-box; transform-origin: 20px 37px; } @media (prefers-reduced-motion: no-preference) { :root[data-perf="high"] .ll-land { animation: ll-spin 16s linear infinite; } :root[data-perf="high"] .ll-blob { animation: ll-conquer 20s ease-in-out infinite; } :root[data-perf="high"] .ll-bot { animation: ll-rise 20s ease-in-out infinite; } :root[data-perf="high"] .ll-orbit--a { animation: ll-orbit 9s linear infinite; } :root[data-perf="high"] .ll-orbit--b { animation: ll-orbit 13s linear infinite reverse; } /* The mini bots only fly while the machines hold the world; when it's free again they vanish. In step with ll-conquer (orange at 40–55%). */ :root[data-perf="high"] .ll-mini { animation: ll-mini-show 20s ease-in-out infinite; } } /* Continents scroll behind the circular clip; the two tiles are 40 apart, so a 40-unit shift wraps seamlessly. */ @keyframes ll-spin { to { transform: translateX(-40px); } } /* The machines take the world (green to orange), hold it, then lose it back. */ @keyframes ll-conquer { 0%, 8% { fill: var(--ll-land); } 40%, 55% { fill: var(--ll-robot); } 87%, 100% { fill: var(--ll-land); } } /* The robot rises over the globe while the machines hold it, sinks when beaten back. In step with the recolour above. */ @keyframes ll-rise { 0%, 8% { transform: translateY(21px); } 40%, 55% { transform: translateY(0); } 87%, 100% { transform: translateY(21px); } } /* The mini bots circle the globe's centre. */ @keyframes ll-orbit { to { transform: rotate(360deg); } } /* ...and are only aloft while the world is held (fade in as it's taken, out as it's freed), so they never linger over a world nobody has conquered. */ @keyframes ll-mini-show { 0%, 26% { opacity: 0; } 38%, 55% { opacity: 1; } 70%, 100% { opacity: 0; } } .global-search { position:relative; display:flex; align-items:center; flex:0 1 470px; max-width:470px; min-width:240px; margin:0 0 0 auto; transition:flex-basis .5s var(--ease), max-width .5s var(--ease), min-width .5s var(--ease); } .global-search__icon { position:absolute; z-index:1; left:.95rem; width:1rem; height:1rem; color:var(--text-dim); pointer-events:none; } .global-search__icon::before { content:""; position:absolute; width:.65rem; height:.65rem; border:2px solid currentColor; border-radius:50%; } .global-search__icon::after { content:""; position:absolute; width:.48rem; height:2px; right:-.08rem; bottom:.08rem; border-radius:999px; background:currentColor; transform:rotate(45deg); transform-origin:right center; } .global-search input { width:100%; min-height:44px; margin:0; padding:.65rem 1rem .65rem 2.55rem; border-radius:999px; background:var(--input-float); box-shadow:0 8px 28px rgba(0,0,0,.18); } .global-search input:focus-visible { background:var(--bg-input); } .global-search__results { position:absolute; z-index:50; top:calc(100% + .55rem); left:0; right:0; max-height:min(70vh,620px); overflow-y:auto; padding:.5rem; border:1px solid var(--border); border-radius:14px; background:var(--glass); box-shadow:0 22px 60px rgba(0,0,0,.55); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); } .global-search__group + .global-search__group { margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--border); } .global-search__group h2 { margin:.3rem .7rem; color:var(--text-dim); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; } .global-search__group a { display:grid; gap:.15rem; padding:.65rem .7rem; border-radius:8px; color:var(--text); } .global-search__group a span { color:var(--text-dim); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .global-search__group a:hover,.global-search__group a.is-active { background:var(--bg-input); color:var(--accent); text-decoration:none; } .global-search__all { display:block; margin-top:.4rem; padding:.75rem; border-top:1px solid var(--border); color:var(--accent); text-align:center; font-size:.86rem; } .global-search__empty { margin:0; padding:1rem; color:var(--text-dim); text-align:center; } .topbar__nav { display: flex; gap: 1.1rem; } /* An underline that grows from the left rather than appearing all at once. */ .topbar__nav a { position: relative; padding-bottom: 2px; color: var(--text-dim); } .topbar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); } .topbar__nav a:hover { color: var(--text); text-decoration: none; } .topbar__nav a:hover::after { transform: scaleX(1); } .topbar__nav .topbar__founding { color:#f2cb68; font-weight:800; } .topbar__nav .topbar__founding:hover { color:#ffe39a; } .topbar__nav .topbar__founding::after { background:#e5b84f; } .topbar__account { margin-left: 0; display: flex; gap: .75rem; align-items: center; /* Sign in + Create account are one indivisible unit: never let them wrap onto separate lines, and never let the cluster be a flex-shrink casualty. */ flex: 0 0 auto; white-space: nowrap; } .topbar__account a:not(.btn) { color: var(--text-dim); } .topbar__upload { flex:0 0 auto; white-space:nowrap; } .role-badge { display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; margin-left:.25rem; border:1px solid currentColor; border-radius:50%; color:var(--accent); font-size:.68rem; font-weight:900; line-height:1; vertical-align:.12em; } .role-badge--mentor { color:#69b7ff; }.role-badge--coach { color:#b89cff; }.role-badge--affiliate { color:#4ec98a; } .role-badge--admin { color:#fff; background:#dc2626; border-color:#ef4444; box-shadow:0 0 0 2px rgba(220,38,38,.16); } .account-menu { position: relative; } .account-menu summary { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 2px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-input); cursor: pointer; list-style: none; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu summary:hover,.account-menu[open] summary { border-color: var(--accent); } .account-menu__avatar { display:block; width:38px; height:38px; border-radius:50%; object-fit:cover; } .account-menu__avatar--fallback { display:grid; place-items:center; background:var(--accent); color:#1a0f08; font-weight:800; } .account-menu__alert { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #1a0f08; font-size: .68rem; font-weight: 800; } .account-menu__panel { position: absolute; z-index: 20; top: calc(100% + .55rem); right: 0; min-width: 210px; padding: .45rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .account-menu__panel a,.account-menu__panel button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .8rem; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .account-menu__panel a:hover,.account-menu__panel button:hover { background: var(--bg-input); color: var(--accent); text-decoration: none; } .account-menu__identity { margin-bottom:.25rem; padding-bottom:.8rem !important; border-bottom:1px solid var(--border) !important; } .account-menu__identity span:first-child { display:grid; gap:.1rem; } .account-menu__identity small { color:var(--text-dim); font-size:.75rem; } .account-menu__panel form { margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid var(--border); } /* Desktop: the whole bar stays on a single line. The search flexes down to fill whatever space the fixed controls leave (min-width:0 lets it shrink past its content box) instead of the account cluster spilling onto a second row. */ @media (min-width: 1024px) { .topbar { flex-wrap: nowrap; } .global-search { min-width: 0; } } /* Tablet / phone: not enough width for one row, so the search drops to its own full-width line beneath the menu (was 1180px — lowered so laptops stay 1-line). */ @media (max-width: 1023px) { .global-search { order:4; flex-basis:100%; max-width:none; min-width:0; margin-left:0; } } @media (max-width: 680px) { .topbar { gap:1rem; padding:.75rem 1rem; } .brand { height:48px; gap:.4rem; } .brand__mark { width:34px; height:46px; } .brand__mark-static { width:34px; height:34px; } .brand__live { width:34px; height:46px; } .brand__word { height:22px; max-width:124px; } .topbar__nav { order:3; width:100%; justify-content:space-between; gap:.55rem; overflow-x:auto; } .global-search { order:4; min-width:0; } .global-search__results { max-height:55vh; } } /* --------------------------------------------------------------- buttons */ .btn { display: inline-block; padding: .55rem 1.05rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--raised); color: var(--text); font: inherit; font-size: .92rem; letter-spacing: .005em; cursor: pointer; transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .btn:hover { border-color: var(--text-dim); transform: translateY(-1px); text-decoration: none; } /* Settle back under the cursor so a click feels like it lands on something. */ .btn:active { transform: translateY(0); transition-duration: .08s; } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn--primary { background: linear-gradient(180deg, #ff8d57, var(--accent)); border-color: var(--accent); color: #1a0f08; font-weight: 600; } .btn--primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-color: var(--accent-dim); } .btn--quiet { background: transparent; color: var(--text-dim); } .btn--danger { background: transparent; border-color: #5c2b2b; color: var(--bad); } .btn--danger:hover { background: rgba(229, 101, 79, .12); border-color: var(--bad); } .btn--lg { padding: .7rem 1.4rem; font-size: 1rem; } /* Full width so it reads as one of the two ways in rather than an afterthought beside the form. Google's brand guidance requires their mark in its own colours, which makes the G the one thing on the page that ignores the palette -- deliberately, not by oversight. */ .btn--google { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; margin-top: 1.4rem; } .btn--google svg { flex: none; width: 18px; height: 18px; } .onshape-button-link, .cad-button-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid var(--border); } .cad-button-link { min-width: 9.5rem; min-height: 3rem; overflow: hidden; } /* Fusion's logo is a white wordmark on a dark field; give the button a matching fixed dark backdrop in both themes so the logo blends instead of sitting as a letterboxed chip (btn--quiet is otherwise transparent). */ .cad-button-link--fusion { background: #0e1217; border-color: rgba(255, 255, 255, 0.09); } .cad-button-link--fusion:hover { background: #161c26; } .cad-button-logo { display: block; width: auto; max-width: 9rem; height: 2rem; object-fit: contain; } .cad-button-logo--fusion { height: 2.35rem; } .cad-button-logo-crop { position: relative; display: block; width: 10rem; height: 2.25rem; overflow: hidden; } .cad-button-logo-crop--solidworks img { position: absolute; left: 0; top: -1.75rem; width: 10rem; height: auto; } .onshape-logo-button { width: 22px; height: 22px; object-fit: contain; text: white; border-color: white; } /* ----------------------------------------------------------------- forms */ label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .92rem; } label small { display: block; font-weight: 400; color: var(--text-dim); margin-top: .3rem; font-size: .85rem; } input, select, textarea { display: block; width: 100%; margin-top: .35rem; padding: .6rem .8rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit; font-size: .95rem; transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } input:hover, select:hover, textarea:hover { border-color: #303b4b; } /* A soft ring instead of the default outline. Focus stays obvious — the border goes accent and the field lifts out of the page — but it reads as part of the design rather than as a browser artefact. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); background: var(--bg-input-focus); box-shadow: 0 0 0 3px rgba(255, 122, 61, .22); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } textarea { resize: vertical; } .password-field { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center; } .password-field input { margin-top:0; } .profile-avatar { width:112px; height:112px; object-fit:cover; border-radius:50%; border:3px solid var(--border); } .stack { margin-top: 1.5rem; } .file-drop { display: block; padding: 1.1rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-input); text-align: center; cursor: pointer; margin-bottom: 1rem; } .file-drop:hover { border-color: var(--accent); } .file-drop span { display: block; font-weight: 600; margin-bottom: .3rem; } .file-drop input { margin: .6rem auto 0; width: auto; background: none; border: none; } /* Paste-a-screenshot hint under the picture picker. */ .image-paste-hint { margin: -.4rem 0 1rem; } .image-paste-hint kbd { display: inline-grid; place-items: center; min-width: 1.5em; padding: .05em .4em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-input); color: var(--text-dim); font-family: inherit; font-size: .82em; } .image-paste-status { color: var(--accent); font-weight: 600; } .image-paste-status:not(:empty)::before { content: " "; } /* --------------------------------------------------------------- flashes */ .flashes { max-width: 1100px; margin: 1rem auto 0; padding: 0 1.25rem; } .flash { padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: .5rem; font-size: .93rem; } .flash--success { border-color: var(--good); background: rgba(78, 201, 138, .1); } .flash--error { border-color: var(--bad); background: rgba(229, 101, 79, .1); } /* ------------------------------------------------------------------ hero */ .hero { padding: 3rem 0 4rem; text-align: center; } .hero__copy { max-width: 760px; margin: 0 auto; } .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.35rem); letter-spacing: -.035em; } .hero__lede { max-width: 58ch; margin: 1.1rem auto 0; font-size: 1.12rem; line-height: 1.7; color: #cbd5e1; } .hero__actions { display: flex; gap: .8rem; margin-top: 1.75rem; flex-wrap: wrap; justify-content: center; } .about-actions { display:flex; gap:1rem; flex-wrap:wrap; } /* The Designs-of-the-week coverflow previews right under the intro copy. The merry-go-round itself (.dotw / .dotw-*) is defined further down this file; here we just give it breathing room — its own media queries handle phones. */ .hero__preview { margin-top: clamp(2rem, 5.5vw, 3.75rem); } /* On wide screens the coverflow moves beside the intro copy (two columns) so the gallery below sits higher up — no long scroll past a full-width carousel. Only the copy and preview are in flow (the aurora/mesh layers are absolute), so the hero becomes a clean two-cell grid. Heros without a preview stay centred. */ @media (min-width: 62rem) { .hero:has(.hero__preview) { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); text-align: left; } .hero:has(.hero__preview) .hero__copy { max-width: 40rem; margin: 0; } .hero:has(.hero__preview) .hero__lede { margin-left: 0; margin-right: 0; } .hero:has(.hero__preview) .hero__actions { justify-content: flex-start; } .hero:has(.hero__preview) .hero__preview { margin-top: 0; } } .how { margin-top: 3.5rem; } .how__steps { list-style: none; counter-reset: step; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; } .how__steps li { counter-increment: step; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-1); transition: transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease-out); } .how__steps li:hover { transform: translateY(-4px); border-color: rgba(255, 122, 61, .35); box-shadow: var(--shadow-2); } .how__steps li::before { content: counter(step); display: block; color: var(--accent); font-weight: 700; font-size: .85rem; margin-bottom: .4rem; } .how__steps p { color: var(--text-dim); font-size: .92rem; margin: 0; } /* ------------------------------------------------------------- card grid */ /* The base layout, and what a browser without container queries keeps: auto-fill packs in as many 240px-or-wider columns as the width allows. */ .grid { --grid-gap: 1.1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--grid-gap); } /* A CSS grid always packs a short final row to the left, so any page whose card count isn't a whole multiple of the column count ends on a lopsided row with dead space beside it. Wrapping flex lines can be centred, which fixes that — but only if each card carries its own width, since flex items left free to grow would stretch a lone last card across the entire row. So the column count is resolved by the container queries below (the same thresholds auto-fill picks: N columns need N cards plus the N-1 gaps between them) and every card takes exactly one column's share of the row. Full rows still meet both edges as before; only the short last row moves, to the centre. */ @supports (container-type: inline-size) { .grid { display: flex; flex-wrap: wrap; justify-content: center; container-type: inline-size; } .grid > * { --grid-columns: 1; flex: 0 0 auto; min-width: 0; /* Trimmed by a hundredth of a pixel: sub-pixel rounding on a row that adds up to exactly 100% can otherwise tip its last card onto a line of its own, which is the very raggedness this is here to remove. */ width: calc( (100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns) - .01px ); } /* Thresholds in rem, like the gap and the 15rem card minimum they are built from, so the count and the widths stay in step at any root font size. */ @container (min-width: 31.1rem) { .grid > * { --grid-columns: 2; } } @container (min-width: 47.2rem) { .grid > * { --grid-columns: 3; } } @container (min-width: 63.3rem) { .grid > * { --grid-columns: 4; } } @container (min-width: 79.4rem) { .grid > * { --grid-columns: 5; } } @container (min-width: 95.5rem) { .grid > * { --grid-columns: 6; } } @container (min-width: 111.6rem) { .grid > * { --grid-columns: 7; } } } .card { position: relative; display: block; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--shadow-1); transition: transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease-out); } /* The highlight pass, laid over the whole card so it catches the image too. */ .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sheen); pointer-events: none; } /* The slot is the grid cell and never moves; the card lifts inside it. Keying the lift off the slot's hover (not the card's own) keeps the pointer target stationary, so hovering at the card's edge can't flicker the lift on/off. */ .card-slot { display: block; } .card-slot:hover .card { transform: translateY(-6px); border-color: rgba(255, 122, 61, .45); box-shadow: var(--shadow-3); text-decoration: none; } .card__image { position: relative; aspect-ratio: 16 / 11; background: #131820; overflow: hidden; } .card__image img { width: 100%; height: 100%; object-fit: cover; display: block; /* Slower than the lift, so the image drifts rather than snaps. */ transition: transform .9s var(--ease-out); } .card-slot:hover .card__image img { transform: scale(1.055); } .card__body { padding: .75rem .9rem .85rem; } .card__body h3 { margin: 0 0 .2rem; font-size: 1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .card__meta { margin: 0; color: var(--text-dim); font-size: .84rem; } /* Competition sits top-left; the 3D badge sits top-right, so the two never collide when a design is both. */ .card__tested,.detail__tested { position:absolute; z-index:3; top:.65rem; left:.65rem; display:inline-flex; align-items:center; justify-content:flex-start; gap:.4rem; width:2rem; height:2rem; padding:0 .55rem; overflow:hidden; border:1px solid rgba(78,201,138,.65); border-radius:999px; background:rgba(10,28,21,.92); color:var(--good); font-size:.72rem; font-weight:900; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; backdrop-filter:blur(6px); transition:width .24s ease,background .24s ease; } .card__tested:hover,.detail__tested:hover { width:10.6rem; background:rgba(10,28,21,.98); } .tested-badge__label { opacity:0; transition:opacity .15s ease .04s; } .card__tested:hover .tested-badge__label,.detail__tested:hover .tested-badge__label { opacity:1; } .detail__tested { top:1rem; left:1rem; width:2.25rem; height:2.25rem; padding:0 .65rem; font-size:.75rem; } .badge { position: absolute; top: .55rem; right: .55rem; padding: .15rem .45rem; border-radius: 5px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; background: rgba(13, 17, 23, .82); border: 1px solid var(--border); } .badge--3d { color: var(--accent); } /* Downloadable but not viewable in-browser (a hosted file too big for the viewer, or a design that only links out to CAD). Green reads as "available" and stays legible on the fixed dark chip in either theme. */ .badge--download { color: var(--good); } /* The 3D badge on the design page's main image, sized to match .detail__tested. */ .detail__badge-3d { top:1rem; right:1rem; padding:.42rem .7rem; border-radius:8px; font-size:.75rem; font-weight:900; letter-spacing:.045em; } .cad-badge { display:inline-flex; align-items:center; align-self:flex-start; min-height:1.45rem; padding:.16rem .58rem; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.025em; background:#6b7280; color:#fff; } .cad-badge--onshape { background:#9ddeae; color:#173d25; } .cad-badge--fusion-360 { background:#ed8b31; color:#2d1606; } .cad-badge--solidworks { background:#d74646; color:#fff; } .cad-badge--inventor { background:#d99b2b; color:#251803; } .cad-badge--freecad { background:#4c78c2; color:#fff; } .cad-badge--creo { background:#18a486; color:#062e27; } .dot { display: inline-block; margin: 0 .4rem; opacity: .5; } .dot::before { content: "·"; } /* --------------------------------------------------------------- filters */ .filters { --gallery-control-height: 54px; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1.25rem 0; } .filters input, .filters select { margin-top: 0; width: auto; } .filters__q { flex: 1 1 260px; height:var(--gallery-control-height); min-height:var(--gallery-control-height); } /* The sort control lives beside the filter menu and mirrors its pill shape. */ .filters__sort { flex: 0 0 auto; display: flex; align-items: center; height:var(--gallery-control-height); margin:0; } .filters__sort select { height: var(--gallery-control-height); min-height: var(--gallery-control-height); padding: .55rem 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); color: var(--text); font-weight: 800; cursor: pointer; } .filters__sort select:focus-visible { border-color: var(--accent); } .filter-menu { position:relative; height:var(--gallery-control-height); margin:0; } .filter-menu > summary { display:flex; align-items:center; gap:.5rem; height:var(--gallery-control-height); min-height:var(--gallery-control-height); box-sizing:border-box; padding:.55rem 1rem; border:1px solid var(--border); border-radius:999px; background:var(--bg-input); color:var(--text); font-weight:800; cursor:pointer; list-style:none; } .filter-menu > summary::-webkit-details-marker { display:none; } .filter-menu > summary::before { content:'\2630'; color:var(--accent); } .filter-menu__count { padding:.1rem .42rem; border-radius:999px; background:var(--accent); color:#1a0f08; font-size:.65rem; text-transform:uppercase; } .filter-menu__panel { position:absolute; z-index:30; top:calc(100% + .55rem); right:0; width:min(420px,calc(100vw - 2rem)); max-height:min(72vh,680px); overflow:auto; padding:.75rem; border:1px solid var(--border); border-radius:16px; background:var(--bg-raised); box-shadow:0 24px 70px rgba(0,0,0,.55); } .filter-section { border-bottom:1px solid var(--border); } .filter-section > summary { padding:.85rem .35rem; font-weight:800; cursor:pointer; } .filter-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; padding:0 0 .85rem; } .filter-options label { display:flex; align-items:center; gap:.45rem; margin:0; padding:.5rem .55rem; border-radius:10px; background:var(--bg-input); font-weight:600; cursor:pointer; } .filter-options label:has(input:checked) { outline:1px solid var(--accent); color:var(--accent); } .filter-options input { width:auto; margin:0; } .filter-options small { display:inline; margin-left:auto; } .filter-menu__actions { display:flex; gap:.55rem; padding-top:.8rem; } .admin-team-attribution { border-color:rgba(255,122,61,.45); } @media(max-width:620px){.filter-menu{position:static}.filter-menu__panel{left:0;right:0;width:100%}.filter-options{grid-template-columns:1fr}} .pagination { display:flex; justify-content:center; align-items:center; gap:.4rem; flex-wrap:wrap; margin:2rem 0 0; }.pagination__link,.pagination__ellipsis { min-width:2.35rem; padding:.45rem .7rem; border:1px solid var(--border); border-radius:var(--radius); text-align:center; color:var(--text-dim); }.pagination__link:hover { border-color:var(--accent); color:var(--text); text-decoration:none; }.pagination__link.is-current { border-color:var(--accent); background:var(--accent); color:#1a0f08; font-weight:800; }.pagination__ellipsis { border-color:transparent; } /* ---------------------------------------------------------------- detail */ .detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; } .detail__tags, .detail__feedback, .detail__comments { grid-column: 1 / -1; } @media (max-width: 780px) { .detail { grid-template-columns: 1fr; } } .detail__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; } .image-gallery__stage { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--bg-input); } .detail__media .image-gallery__image { width:100%; height:100%; object-fit:contain; border:1px solid var(--border); } .image-gallery__image.is-hidden { display:none; } .image-gallery__arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:54px; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); background:rgba(13,17,23,.78); color:white; font-size:2rem; cursor:pointer; } .image-gallery__arrow:hover { background:rgba(255,122,61,.9); }.image-gallery__arrow--prev { left:.75rem; }.image-gallery__arrow--next { right:.75rem; } .image-gallery__selector { display:flex; justify-content:center; gap:.5rem; padding:.8rem 0 .2rem; } .image-gallery__dot { width:34px; height:5px; padding:0; border:0; border-radius:999px; background:var(--border); cursor:pointer; }.image-gallery__dot.is-active { background:var(--accent); } .detail__media-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; margin-top: .75rem; } .detail__view-3d { width: 100%; justify-content: center; } .detail__download-actions { display:flex; align-items:stretch; gap:.75rem; }.detail__download-actions > .btn { display:inline-flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; } @media(max-width:520px){.detail__download-actions{flex-direction:column}.detail__download-actions > .btn{width:100%}} .detail__byline { color: var(--text-dim); font-size: .9rem; margin-top: -.25rem; } /* The stored model-file size, shown as dimmer secondary text on the download button. */ .btn__filesize { margin-left: .5rem; color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; } .detail__description { color: #cbd5e1; white-space: pre-wrap; } .owner-actions { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; } .design-admin-award { margin-top: .8rem; margin-bottom: 1rem; } .detail-card__awards { display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 .85rem; } .viewer { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: #131820; } .viewer canvas { display: block; width: 100%; height: 100%; } .viewer-status { color: var(--text-dim); font-size: .88rem; min-height: 1.4em; } /* Centered "Loading model" overlay shown over the canvas while the mesh loads. The trailing dots bounce up and down; on the lite tier / reduced motion they sit still (the base rule paints them in place, the animation is gated below). */ .viewer-loading { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .12rem; pointer-events: none; color: var(--text); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; } .viewer-loading[hidden] { display: none; } .viewer-loading__dots { display: inline-flex; align-items: flex-end; margin-left: .18rem; } .viewer-loading__dots i { display: block; width: .28em; height: .28em; margin-left: .12em; border-radius: 50%; background: var(--accent); } @media (prefers-reduced-motion: no-preference) { :root[data-perf="high"] .viewer-loading__dots i { animation: viewer-dot-bounce 1.1s ease-in-out infinite; } :root[data-perf="high"] .viewer-loading__dots i:nth-child(2) { animation-delay: .16s; } :root[data-perf="high"] .viewer-loading__dots i:nth-child(3) { animation-delay: .32s; } } @keyframes viewer-dot-bounce { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(-.5em); } } .viewer-actions { display: flex; gap: .6rem; margin: .75rem 0; flex-wrap: wrap; } .model-upload-progress { margin:.8rem 0; padding:.8rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-input); } .model-upload-progress__label { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.45rem; color:var(--text-dim); font-size:.88rem; } .model-upload-progress__label strong { color:var(--text); font-variant-numeric:tabular-nums; } .model-upload-progress__track { height:10px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.18); } .model-upload-progress__track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--good)); transition:width .18s ease; } .model-upload-progress.is-ready { border-color:var(--good); } .model-upload-progress.is-error { border-color:var(--danger); } .model-upload-progress.is-publishing .model-upload-progress__track span { width:100% !important; animation:model-upload-pulse 1.1s ease-in-out infinite alternate; } @keyframes model-upload-pulse { from { opacity:.55; } to { opacity:1; } } .upload-page { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:1.25rem; background:radial-gradient(circle at 50% 30%,rgba(255,122,61,.14),transparent 38%),var(--bg); } .upload-page[hidden] { display:none; } .upload-page__card { position:relative; z-index:2; width:min(620px,100%); padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--border); border-radius:22px; background:var(--bg-raised); box-shadow:0 28px 90px rgba(0,0,0,.55); text-align:center; } .upload-page__card h2 { margin:.15rem 0 .75rem; font-size:2.1rem; letter-spacing:-.028em; } .upload-page__stage { min-height:1.5em; color:var(--text-dim); } .upload-page__percent { display:block; margin:1.5rem 0 .55rem; font-size:clamp(2rem,8vw,4rem); font-variant-numeric:tabular-nums; } .upload-page__track { height:16px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.18); } .upload-page__track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--good)); transition:width .2s ease; } .upload-page__actions { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; } .upload-page__cancel { margin-top:1.25rem; } .upload-page__cancel[hidden] { display:none; } .upload-page.is-error .upload-page__track span { background:var(--bad); } .upload-page.is-complete .upload-page__card { border-color:rgba(78,201,138,.75); } .upload-page__fireworks { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .upload-page__fireworks i { position:absolute; left:50%; top:62%; width:8px; height:8px; border-radius:50%; background:var(--colour); animation:upload-firework 1.5s cubic-bezier(.12,.72,.28,1) var(--delay) both; } @keyframes upload-firework { 0% { transform:translate(0,0) scale(.2); opacity:0; } 15% { opacity:1; } 100% { transform:translate(var(--x),var(--y)) scale(0); opacity:0; } } @media (prefers-reduced-motion:reduce) { .upload-page__fireworks { display:none; } } .viewer-modal { width:min(1100px,94vw); max-width:none; height:min(760px,90vh); padding:0; border:1px solid var(--border); border-radius:16px; background:var(--bg-raised); color:var(--text); box-shadow:0 28px 90px rgba(0,0,0,.7); } .viewer-modal::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(3px); } .viewer-modal__shell { position:relative; display:grid; grid-template-columns:210px minmax(0,1fr); gap:1rem; width:100%; height:100%; padding:1rem; } .viewer-modal__controls { display:flex; flex-direction:column; align-items:stretch; gap:.6rem; padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-input); }.viewer-modal__controls p { color:var(--text-dim); font-size:.88rem; } .viewer-modal__close { position:absolute; z-index:5; top:.55rem; right:.65rem; width:42px; height:42px; border:1px solid var(--border); border-radius:50%; background:rgba(13,17,23,.85); color:white; font-size:1.8rem; line-height:1; cursor:pointer; }.viewer-modal__close:hover { border-color:var(--accent); color:var(--accent); } .viewer-modal__canvas { width:100%; height:100%; aspect-ratio:auto; } body:has(.viewer-modal[open]) { overflow:hidden; } @media (max-width:700px) { .viewer-modal__shell { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }.viewer-modal__controls { display:grid; grid-template-columns:repeat(4,1fr); padding:.7rem; }.viewer-modal__controls h2,.viewer-modal__controls p { grid-column:1/-1; margin:0; }.viewer-modal__controls .viewer-anim,.viewer-modal__controls .viewer-parts,.viewer-modal__controls .viewer-views,.viewer-modal__controls .viewer-orient-launch { grid-column:1/-1; }.viewer-modal__controls .viewer-status { display:none; } } /* Assembly extras — only shown for a GLB that actually carries motion or more than one part, so a plain STL/OBJ keeps the compact controls above. */ .viewer-anim, .viewer-parts { display:flex; flex-direction:column; gap:.5rem; padding-top:.6rem; border-top:1px solid var(--border); } .viewer-anim h3, .viewer-parts h3 { margin:0; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); } .viewer-anim__clip { width:100%; } .viewer-anim__clip[hidden] { display:none; } .viewer-anim__row { display:flex; align-items:center; gap:.5rem; } .viewer-anim__play { flex:0 0 auto; white-space:nowrap; } .viewer-anim__scrub { flex:1 1 auto; min-width:0; accent-color:var(--accent); } .viewer-parts__list { display:flex; flex-direction:column; gap:.2rem; max-height:230px; overflow-y:auto; } .viewer-parts__row { display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--text); cursor:pointer; } .viewer-parts__row input { accent-color:var(--accent); } .viewer-parts__name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .viewer-parts__only { flex:0 0 auto; padding:.1rem .45rem; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text-dim); font-size:.74rem; cursor:pointer; } .viewer-parts__only:hover { border-color:var(--accent); color:var(--accent); } /* Six faces where there used to be three. Stacked one per row they push the motion and parts controls off the bottom of a 210px sidebar, so they pair up -- and they read as one group, which is the point: four of them are worked out from the two the orientation sequence sets. */ .viewer-views { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; } /* The launcher, boxed off at the foot of the sidebar. Everything above it changes what this visitor is looking at; this changes what everybody sees, and next to "Reset view" it would read as another way to undo a stray drag. */ .viewer-orient-launch { display:flex; flex-direction:column; gap:.5rem; padding-top:.6rem; border-top:1px solid var(--border); } .viewer-orient-launch h3 { margin:0; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); } /* The sequence itself, drawn over the canvas rather than beside it: on the design page the canvas sits inside a