/* --------------------------------------------------------------------------- colden.store — shared styles for the hand-authored form pages (/review/, /feedback/). These two pages are deliberately NOT DC exports like the rest of the site: they are plain HTML so the form markup is static at deploy time, which is what Netlify's form detection scans. Every token below is lifted from the live home page so they read as the same site: --colden-bg #08090c page ground behind the panels body #0E0A11 what the home page actually paints --colden-panel/-line/-text/-muted as published on :root there Instrument Serif 400 for display type, Inter for everything else pill buttons: 30px radius, 135deg gradient, 3px hard edge + soft drop --------------------------------------------------------------------------- */ :root{ --colden-purple:#7c5cff; --colden-blue:#2f7bff; --colden-bg:#08090c; --colden-panel:#0e1218; --colden-line:rgba(255,255,255,.09); --colden-text:#eceef1; --colden-muted:#9aa0a8; --nav-h:59px; /* The accent every page-level control follows. Rewritten on by forms.js the moment a product is picked, so the submit button, the focus rings and the glow all take that product's colour. Neutral until then. */ --acc:#8b6dff; --acc-deep:#5a34e0; --acc-edge:#3a1c9e; --acc-ink:#f6f2ff; --acc-rgb:139,109,255; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ min-height:100svh;display:flex;flex-direction:column; margin:0; background:#0E0A11; color:var(--colden-text); color-scheme:dark; font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-top:var(--nav-h); } ::selection{background:rgba(106,70,245,.4);color:#fff} a{color:inherit} a,button,input,select,textarea{touch-action:manipulation} /* The page ground. A single very soft wash behind the content so the flat #0E0A11 does not read as a dead rectangle — the home page gets this from its WebGL hero, which would be absurd to load for a form. */ .page-wash{ position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(900px 520px at 18% -6%, rgba(124,92,255,.13), transparent 62%), radial-gradient(760px 460px at 88% 4%, rgba(47,123,255,.10), transparent 60%), radial-gradient(700px 420px at 50% 104%, rgba(248,112,16,.05), transparent 60%); } /* ---- nav ---------------------------------------------------------------- */ /* Shared fixed navigation; cart-drawer.js owns the cart on these pages. */ .nav-bar{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:7px 28px; background:rgba(8,9,12,.55); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.06); } .nav-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--colden-text);min-height:44px} .nav-mark{ display:flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:9px;background:#12151a;border:1px solid #23272e; font-family:"Instrument Serif",serif;font-weight:400;font-size:23px;line-height:1;color:var(--colden-text); } .brand-name{font-family:"Instrument Serif",serif;font-weight:400;font-size:25px;line-height:1} .nav-links{display:flex;align-items:center;gap:24px} .nav-links a{ display:inline-flex;align-items:center;min-height:44px; color:var(--colden-muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s; } .nav-links a:hover,.nav-links a:focus-visible{color:var(--colden-text)} .nav-links a[aria-current="page"]{color:var(--colden-text)} @media (max-width:620px){ .nav-bar{padding:7px 16px} .nav-links{gap:14px} .nav-links a.nav-hide-sm{display:none} .brand-name{font-size:21px} } /* ---- shell -------------------------------------------------------------- */ .shell{max-width:840px;margin:0 auto;padding:0 24px;flex:1 0 auto;width:100%} @media (max-width:560px){.shell{padding:0 16px}} /* ---- hero --------------------------------------------------------------- */ .hero{padding:64px 0 34px;text-align:center} .hero .badge{margin-bottom:4px} .hero h1{ margin:20px 0 0; font-family:"Instrument Serif",serif;font-weight:400; font-size:clamp(40px,7.4vw,64px);line-height:1.04;letter-spacing:-.01em; color:var(--colden-text); } .hero p.lede{margin:16px auto 0;max-width:52ch;color:var(--colden-muted);font-size:16.5px;line-height:1.65} @media (max-width:560px){.hero{padding:44px 0 26px}} /* ---- panel -------------------------------------------------------------- */ .panel{ position:relative; margin:26px 0; padding:clamp(22px,4vw,34px); background:rgba(14,18,24,.72); border:1px solid var(--colden-line); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.42); } .panel + .panel{margin-top:20px} .panel-title{ margin:0 0 6px; font-family:"Instrument Serif",serif;font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-.01em; } .panel-note{margin:0 0 22px;color:var(--colden-muted);font-size:14.5px} .step{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;margin-right:10px;border-radius:8px; background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.34); font-family:Inter,sans-serif;font-size:13px;font-weight:700;color:var(--acc); vertical-align:2px;transition:background .3s,border-color .3s,color .3s; } /* ---- product picker ------------------------------------------------------ */ /* A radio group drawn as tiles. The native inputs stay in the DOM (keyboard, arrow keys, form serialisation, required-validation all come free); only their painting is replaced. */ .picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;border:0} /* Four tiles in a three-column grid leave one stranded on its own row. ⚠ This has to stay ABOVE the two media queries below: same specificity, so declared after them it would beat the single-column rule at 420px. */ .picker--pair{grid-template-columns:repeat(2,1fr)} .picker legend{padding:0;margin:0 0 14px} @media (max-width:720px){.picker{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.picker{grid-template-columns:1fr}} /* ⚠ THE HOVER LIFT IS ON .pick, NOT ON .face. The spotlight ring is drawn on .pick; lifting only the face slides the tile 2px out of its own ring and leaves the ring showing as a second line along the bottom edge. Ring and face have to travel together. (The home page hit exactly this with .cs-logo-tile.) */ .pick{position:relative;display:block;height:100%;cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.2,1)} .pick:hover{transform:translateY(-2px)} .pick input{ position:absolute;width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .pick .face{ display:flex;align-items:center;gap:12px; height:100%;min-height:78px;padding:14px; background:rgba(255,255,255,.028); border:1px solid var(--colden-line); border-radius:16px; transition:background .22s,border-color .22s,box-shadow .22s; } .pick:hover .face{background:rgba(255,255,255,.05)} .pick .shot{ flex:0 0 auto;display:grid;place-items:center; width:46px;height:46px;border-radius:11px; background:#0b0d12;border:1px solid rgba(255,255,255,.07);overflow:hidden; } .pick .shot img{width:100%;height:100%;object-fit:contain;display:block} .pick .shot.is-glyph{font-size:19px;color:var(--p-accent,#9aa0a8)} .pick .name{display:block;font-size:14.5px;font-weight:600;color:#dfe3e8;line-height:1.25} .pick .meta{display:block;margin-top:3px;font-size:12px;color:#7d848e} /* Selected: the tile takes that product's own colour, which is also what the page accent becomes. */ .pick input:checked + .face{ background:rgba(var(--p-rgb),.10); border-color:rgba(var(--p-rgb),.55); /* No glow of any kind: a picked tile is carried by the tint and the border. */ } .pick input:checked + .face .name{color:#fff} .pick input:checked + .face .shot{border-color:rgba(var(--p-rgb),.4)} .pick input:focus-visible + .face{outline:2px solid var(--p-accent,#7c5cff);outline-offset:3px} /* ---- stars -------------------------------------------------------------- */ /* Radios again, painted as stars. Rendered high-to-low in the DOM so the "every star up to the hovered one" fill is a plain sibling selector with no JS behind it; flex-direction:row-reverse puts 1 back on the left. */ .stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:0;padding:0;border:0} .stars legend{padding:0;margin:0 0 12px} .stars .wrap{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px} .stars input{ position:absolute;width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .stars label{ display:grid;place-items:center;width:46px;height:46px;border-radius:12px;cursor:pointer; color:#3a3f49;transition:color .16s,transform .16s cubic-bezier(.2,.8,.2,1),background .16s; } .stars label svg{width:29px;height:29px;display:block;fill:currentColor} .stars label:hover,.stars label:hover ~ label{color:#ffc245} .stars input:checked ~ label{color:#ffb020} .stars label:hover{transform:scale(1.12)} .stars input:focus-visible + label{outline:2px solid var(--acc);outline-offset:2px;background:rgba(255,255,255,.05)} .stars-out{ margin-left:12px;align-self:center;font-size:14px;font-weight:600;color:var(--colden-muted); min-width:9ch; } .stars-row{display:flex;align-items:center;flex-wrap:wrap} /* ---- fields ------------------------------------------------------------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:620px){.grid2{grid-template-columns:1fr}} .field{display:block;margin-bottom:20px} .field:last-child{margin-bottom:0} .field > .lbl{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin-bottom:8px;font-size:13.5px;font-weight:600;color:#cdd3da; } .field .opt{font-size:12px;font-weight:500;color:#6f7681;text-transform:none;letter-spacing:0} .field .hint{margin:7px 0 0;font-size:12.5px;color:#7d848e;line-height:1.5} .control{ width:100%; padding:13px 15px; background:rgba(255,255,255,.035); border:1px solid var(--colden-line); border-radius:12px; color:var(--colden-text); font:inherit;font-size:15px;line-height:1.55; transition:border-color .18s,background .18s,box-shadow .18s; -webkit-appearance:none;appearance:none; } .control::placeholder{color:#666c76} .control:hover{border-color:rgba(255,255,255,.16)} .control:focus{ outline:0; border-color:rgba(var(--acc-rgb),.65); background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16); } textarea.control{min-height:132px;resize:vertical} textarea.control.tall{min-height:170px} /* select needs its own arrow once appearance is stripped */ select.control{ padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa0a8' d='M1.4 1.6 6 6.2l4.6-4.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px; } select.control option{background:#12151a;color:var(--colden-text)} /* file input: the native button is unstyleable across browsers, so it gets a real drop zone and the input itself only supplies the picker + validation. */ .drop{ position:relative;display:flex;align-items:center;gap:13px; padding:15px;border:1px dashed rgba(255,255,255,.16);border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .2s,background .2s; } .drop:hover,.drop.is-over{border-color:rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.06)} .drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .drop .clip{ flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:10px; background:rgba(255,255,255,.05);border:1px solid var(--colden-line);color:#9aa0a8; } .drop .clip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7} .drop .txt{font-size:13.5px;color:#aeb4bd;line-height:1.45} .drop .txt b{display:block;color:#dfe3e8;font-weight:600;font-size:14px} .drop.has-file{border-style:solid;border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.07)} /* The attachment block is a taller object than a text input, so the ordinary 20px field rhythm reads as cramped underneath it. */ /* ⚠ TWO CLASSES ON PURPOSE. `.field:last-child{margin-bottom:0}` above outranks a single `.field--drop`, and the attachment block IS the last child of the bug-only section — so its gap collapsed to nothing and the Email row sat hard against the drop zone. The section's own bottom margin does the separating; this just stops the reset winning. */ .field.field--drop{margin-bottom:0} [data-when-bug]{margin-bottom:36px} /* checkbox */ .check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:2px 0} .check input{ flex:0 0 auto;width:20px;height:20px;margin:1px 0 0; -webkit-appearance:none;appearance:none; border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.04); cursor:pointer;transition:background .18s,border-color .18s;display:grid;place-items:center; } .check input::after{ content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px) scale(.5);opacity:0;transition:opacity .15s,transform .15s; } .check input:checked{background:var(--acc);border-color:var(--acc)} .check input:checked::after{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)} .check input:focus-visible{outline:2px solid var(--acc);outline-offset:3px} .check .txt{font-size:14px;color:#bcc2cb;line-height:1.55} .check .txt b{color:#dfe3e8;font-weight:600} /* validation. Only ever shown after a submit attempt — .was-tried is set on the form then, so a half-filled field is never red while it is being typed. */ .err{display:none;margin:8px 0 0;font-size:12.5px;font-weight:600;color:#ff8a8a} .was-tried .field.is-bad .control{border-color:rgba(229,72,77,.75);box-shadow:0 0 0 3px rgba(229,72,77,.13)} .was-tried .field.is-bad .err,.was-tried fieldset.is-bad + .err{display:block} .was-tried fieldset.is-bad .face, .was-tried fieldset.is-bad .badge{border-color:rgba(229,72,77,.5)} /* ---- submit ------------------------------------------------------------- */ .actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px} .submit{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:54px;padding:14px 30px;border:0;border-radius:30px; background:linear-gradient(135deg,var(--acc) 0%,var(--acc-deep) 100%); color:var(--acc-ink); font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:-.012em; cursor:pointer; box-shadow:0 3px 0 var(--acc-edge),0 12px 26px rgba(0,0,0,.5); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s,background .3s; } .submit:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 6px 0 var(--acc-edge),0 24px 48px rgba(0,0,0,.66)} .submit:active{transform:translateY(-1px)} .submit:focus-visible{outline:2px solid #fff;outline-offset:3px} .submit[disabled]{opacity:.62;cursor:progress;transform:none;filter:none} .submit .spin{ width:17px;height:17px;border-radius:50%; border:2px solid rgba(255,255,255,.35);border-top-color:#fff; animation:spin .7s linear infinite;display:none; } .submit.is-busy .spin{display:block} @keyframes spin{to{transform:rotate(360deg)}} .actions .aside{font-size:13px;color:#7d848e;line-height:1.5;text-align:center} .actions .aside a{color:#aeb4bd;text-decoration:underline;text-underline-offset:3px} .actions .aside a:hover{color:#eceef1} /* ---- status badges ------------------------------------------------------ */ /* Ported from the supplied shadcn + lucide status-badge component. This site is static HTML with no React, Tailwind or TypeScript build, so the Tailwind utilities are written out as plain CSS and the lucide glyphs are inlined as SVG rather than imported from lucide-react. Geometry is kept from the original: 35px tall, rounded-xl, semibold label, 16px icon at stroke-width 3, 8px gap. The palette is INVERTED for a dark ground — the original's bg-*-50 tints are near-white and would sit on this page as bright blocks, so each tone becomes a 12% wash of itself with the original's text colour lifted enough to stay legible on it. */ .badge{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:35px;padding:0 16px;border-radius:12px; font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap; background:rgba(var(--b-rgb),.12);color:var(--b-ink); border:1px solid transparent; } .badge svg{ width:16px;height:16px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; } .badge--pending {--b-rgb:234,166,93; --b-ink:#EAA65D} .badge--failed {--b-rgb:213,116,99; --b-ink:#D57463} .badge--success {--b-rgb:87,188,108; --b-ink:#6BCB80} .badge--progress {--b-rgb:0,138,245; --b-ink:#4FA9F7} .badge--review {--b-rgb:240,177,61; --b-ink:#F0B13D} .badge--expired {--b-rgb:119,119,119; --b-ink:#9aa0a8} .badge--submitted{--b-rgb:108,60,240; --b-ink:#9B7BFF} /* The feedback type control is these badges as a radio group: dim until picked, then the badge's own tone. */ .seg{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0} .seg legend{padding:0;margin:0 0 14px} .seg label{position:relative} .seg input{ position:absolute;width:1px;height:1px;padding:0;margin:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .seg .badge{ height:42px;padding:0 20px;font-size:14.5px;cursor:pointer; background:rgba(255,255,255,.03);color:#8b929c;border-color:var(--colden-line); transition:background .2s,color .2s,border-color .2s,transform .2s cubic-bezier(.2,.8,.2,1); } .seg label:hover .badge{transform:translateY(-1px);background:rgba(var(--b-rgb),.10);color:var(--b-ink)} .seg input:checked + .badge{ background:rgba(var(--b-rgb),.15);color:var(--b-ink);border-color:rgba(var(--b-rgb),.48); } .seg input:focus-visible + .badge{outline:2px solid var(--b-ink);outline-offset:3px} @media (max-width:560px){.seg label{flex:1 1 100%}.seg .badge{width:100%}} /* ---- success ------------------------------------------------------------ */ .done{display:none;text-align:center;padding:16px 0 6px} .done.is-on{display:block;animation:rise .5s cubic-bezier(.2,.8,.2,1) both} .done .badge{margin-bottom:20px} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .done h2{margin:0 0 10px;font-family:"Instrument Serif",serif;font-weight:400;font-size:36px;line-height:1.12} .done p{margin:0 auto;max-width:44ch;color:var(--colden-muted);font-size:15px} .done .again{ display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:24px; padding:12px 22px;border-radius:30px; background:rgba(255,255,255,.05);border:1px solid var(--colden-line); color:#dfe3e8;text-decoration:none;font-size:14.5px;font-weight:600;cursor:pointer; transition:background .2s,border-color .2s,transform .2s; } .done .again:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-1px)} /* Shown only when the POST could not be delivered — the visitor's answers are never dropped on the floor, they are handed to their mail client instead. */ .fallback{display:none;margin-top:20px;padding:16px 18px;border-radius:14px; background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.32);font-size:14px;color:#e9c4c5;line-height:1.6} .fallback.is-on{display:block} .fallback a{color:#fff;font-weight:600} /* ---- footer ------------------------------------------------------------- */ .site-foot{max-width:1120px;margin:56px auto 0;padding:40px 32px 60px;border-top:1px solid #14171d} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px} @media (max-width:700px){.foot-grid{grid-template-columns:1fr;gap:28px}.site-foot{padding:34px 20px 48px}} .foot-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--colden-text);margin-bottom:14px} .foot-brand .m{ display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px; background:#12151a;border:1px solid #23272e;font-family:"Instrument Serif",serif;font-size:21px;line-height:1; } .foot-brand .n{font-family:"Instrument Serif",serif;font-size:23px;line-height:1} .site-foot .blurb{margin:0;font-size:13.5px;line-height:1.7;color:#8b929c;max-width:300px} .site-foot h2{margin:0 0 12px;font-family:Inter,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#565c66;font-weight:700} .foot-col{display:flex;flex-direction:column;gap:9px;font-size:13.5px} .foot-col a{color:var(--colden-muted);text-decoration:none;transition:color .2s} .foot-col a:hover{color:var(--colden-text)} .legal-foot{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; margin-top:38px;padding-top:22px;border-top:1px solid #14171d;color:#565c66;font-size:12.5px; } .legal-foot div{display:flex;gap:16px} .legal-foot a{color:#8b929c;text-decoration:none;transition:color .2s} .legal-foot a:hover{color:var(--colden-text)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } }