/* Page styles for submit-a-theme.html, lifted out of the document 2026-08-31.
No inline CSS anywhere on this site: the owner's rule, and it is the
right one. An inline block cannot be cached, cannot be shared between
pages, and cannot be covered by a content-security policy. */
/* ---- ONTO THE IMPULSE CART SYSTEM ----------------------------------------
This page was built in the old Nova White system: white paper, Geist, and a
#2563eb blue. It now loads css/styles.css first and keeps only its own
page-specific layout below.
The old token NAMES are kept, pointed at the shared ones. That is deliberate:
re-pointing ten variables changes the whole page correctly in one place,
whereas find-and-replacing the names across two hundred rules is where the
misses happen. Nothing below this block had to be touched. */
:root{
--line:var(--hair);
--line-2:var(--hair);
--raise:var(--frost-tint);
--accent:var(--violet);
--accent-ink:var(--frost-em);
--accent-soft:var(--frost-wash);
--shadow:var(--shadow-sm);
--btn-hover-scale:1.02;
--ok:var(--green-ink); --ok-soft:var(--green-soft);
--err:#f08a8a; --err-soft:rgba(240,138,138,.10);
}
:root[data-theme="light"]{
--err:#b91c1c; --err-soft:#fef2f2;
}
/* Bar controls: same 42px height and 12px radius as index.html. */
/* Mobile nav. Hamburger matches the theme button beside it. */
/* Fixed, not absolute: the bar's backdrop-filter makes a containing block,
so an absolute panel would be clipped by it. */
/* border:0 matters: a page-wide `a` rule would otherwise underline every link. */
/* The links above leave for the home page; the ones below are sibling pages.
A hairline keeps the two kinds from reading as one flat list. */
@media (prefers-reduced-motion: reduce) {
}
/* The bar CTA is dropped with the links: brand + theme + hamburger already
fill a 360px viewport. The same CTA sits at the foot of the menu. */
header.hero { padding:70px 0 26px; }
.hero .kicker { display:inline-block; font-size:13px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); padding:5px 13px; border-radius:999px; }
.hero h1 { font-size:clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height:1.05; letter-spacing:-.032em; color:var(--ink); margin:18px 0 0; font-weight:750; text-wrap:balance; }
.hero p { font-size:1.1rem; color:var(--muted); margin:16px 0 0; max-width:58ch; }
.steps { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 8px; }
.steps .s { flex:1 1 180px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.steps .s b { display:block; color:var(--ink); font-size:.95rem; }
.steps .s span { color:var(--muted); font-size:.86rem; }
.steps .s i { font-style:normal; color:var(--accent-ink); font-weight:700; margin-right:7px; }
.banner { margin:22px 0 0; padding:16px 18px; border-radius:12px; font-size:.95rem; display:none; }
.banner.show { display:block; }
.banner.ok { background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); color:var(--ink); }
.banner.err { background:var(--err-soft); border:1px solid color-mix(in srgb, var(--err) 40%, var(--line)); color:var(--ink); }
.banner b { color:var(--ink); }
form { margin:26px 0 40px; }
fieldset { border:0; margin:0 0 8px; padding:0; }
fieldset legend { font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:26px 0 12px; }
.field { margin:0 0 16px; }
.field label { display:block; font-weight:600; color:var(--ink); font-size:.92rem; margin:0 0 6px; }
.field label .req { color:var(--accent-ink); }
.field .hint { color:var(--muted); font-size:.82rem; margin:5px 0 0; }
.field.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px) { .field.two { grid-template-columns:1fr; } }
input, select, textarea {
width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--raise);
border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
textarea { min-height:88px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input[type=file] { padding:9px 12px; background:var(--surface); cursor:pointer; }
input[type=file]::file-selector-button { font:inherit; font-size:.88rem; margin-right:12px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--raise); color:var(--ink); cursor:pointer; }
.prefix { display:flex; align-items:stretch; }
.prefix .p { display:flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-right:0; border-radius:10px 0 0 10px; background:var(--surface); color:var(--muted); font-size:.95rem; }
.prefix input { border-radius:0 10px 10px 0; }
.check { display:flex; gap:11px; align-items:flex-start; padding:15px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.check input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--accent); }
.check label { font-weight:500; color:var(--body); font-size:.9rem; margin:0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* The same button as everywhere else on the site: solid accent, white
label, neutral shadow. This was the last gradient button standing. */
.submit { display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:14px 26px; border:0; border-radius:999px; background:var(--violet); color:#fff; font:inherit; font-weight:600; font-size:1rem; cursor:pointer; box-shadow:inset 0 1px 1px rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.25); transition:background .15s ease; }
.submit:hover { background:var(--violet-hi); }
.fineprint { color:var(--muted); font-size:.84rem; margin-top:14px; }
/* Only the gap above the footer is this page's business now; the footer
itself is the shared one. */
footer { margin-top:20px; }
/* ---- WHERE THIS PAGE DIFFERS FROM THE HOME PAGE ------------------------
The home page owns .hero and centres it, because its hero is a single
statement addressed at everyone. This one is a reference document: it
is read left to right down a column, so a centred heading over
left-aligned prose would set the reader off at the wrong margin. Stated
explicitly rather than inherited by accident, because the shared rule is
right for the page it was written for. */
.hero { text-align:left; }
.hero h1 { max-width:20ch; }
/* The locked price. Stated like a fact, not styled like an input: a disabled
field would say "you cannot", where a plain statement says "this is how it
is", which is the truth of it. */
.fixed-price{
margin:0; font-size:1.3rem; font-weight:600; color:var(--ink);
}
.fixed-price span{ font-size:.9rem; font-weight:400; color:var(--muted); }