/* ============================================================ Wedding Selects — "The Keepsake Book" redesign Editorial keepsake viewer. Photos dominate; gold is a hairline accent; dusty rose is reserved for one thing — a favourite. Type: Marcellus (display) · Cormorant italic (captions, the &) · Hanken Grotesk (UI) Two axes: data-theme (dark|light) × data-palette (restrained|warmer) on . ------------------------------------------------------------ NOTE: this is the redesign's stylesheet (served only by redesign/serve.py on :5001). It keeps every class/id the shared app.js generates, and only reskins + restructures. ============================================================ */ /* ---------- DARK · RESTRAINED (default) ---------- */ :root, :root[data-theme="dark"]{ --canvas:#15101B; --canvas-2:#1C1524; --surface:#211A2A; --surface-2:#2A2233; --bar:rgba(21,16,27,.86); --tileph:#0E0A12; --ink:#F2EAE0; --muted:#A89AA2; --faint:#968B95; /* faint raised for WCAG-AA on small labels */ --line:rgba(242,234,224,.10); --line-2:rgba(242,234,224,.055); --gold:#C9A24B; --gold-deep:#9C7B33; --rose:#D98BA1; --rose-deep:#B5697F; --emerald:#5BB89B; --on-gold:#241b10; /* Gold used as a saturated BACKGROUND FILL (the GR seal, primary buttons, active pills, badges). Kept separate from --gold/--gold-deep because in LIGHT mode those are darkened for readable gold TEXT on white — reusing them as a fill made the seal/+album button look like muddy dark boxes. In dark mode the fill IS the normal gold (follows the warmer palette via var()). */ --gold-fill-1:var(--gold); --gold-fill-2:var(--gold-deep); --shadow:0 1px 2px rgba(0,0,0,.45),0 14px 40px rgba(0,0,0,.4); --shadow-lg:0 30px 80px rgba(0,0,0,.62); --dur-micro:130ms; --dur-sheet:255ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-std:ease; --z-topbar:40; --z-subtabs:30; --z-utility:25; --z-status:35; --z-bulk:42; --z-scrim:48; --z-drawer:49; --z-fscrim:54; --z-sheet:55; --z-lightbox:60; --tile:160px; /* ---------- TYPOGRAPHY (skin-driven; remapped by [data-skin=clean] below) ---------- */ --font-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; /* body / UI — both skins */ --font-display:"Marcellus",Georgia,serif; /* refined: elegant serif for names & headings */ --font-script:"Cormorant",Georgia,serif; /* refined: italic captions, the ampersand */ --font-hero:"Great Vibes","Marcellus",cursive; /* refined: the G&R wordmark flourish */ --serif:var(--font-display); /* legacy alias (old .ff-q reference) */ /* ---------- SHAPE (corner radii; crisper under the Clean skin) ---------- */ --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; /* ---------- SPACING (8-pt rhythm) ---------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --touch:46px; /* min comfortable tap target on phones */ --botnav-h:60px; /* mobile bottom navigation height (excl. safe-area) */ } /* ============================================================ CLEAN skin — modern photo-app look. Same structure, different *tokens*: one sans family throughout, crisper corners, calmer chrome. Set on (default is "refined"). Only overrides VARIABLES + a few chrome flourishes — never layout. ============================================================ */ :root[data-skin="clean"]{ --font-display:var(--font-ui); /* drop the serif — headings become clean sans */ --font-script:var(--font-ui); /* drop the italic Cormorant — plain sans */ --font-hero:var(--font-ui); /* wordmark becomes a tight sans lockup */ --r-xs:5px; --r-sm:7px; --r-md:10px; --r-lg:12px; --r-xl:14px; } /* ---------- DARK · WARMER ---------- */ :root[data-palette="warmer"], :root[data-theme="dark"][data-palette="warmer"]{ --canvas:#1B1016; --canvas-2:#241319; --surface:#281A22; --surface-2:#33222B; --bar:rgba(27,16,22,.86); --gold:#E6AC4E; --gold-deep:#C0883A; --rose:#E76E94; --rose-deep:#C9557C; } /* ---------- LIGHT · RESTRAINED ---------- */ :root[data-theme="light"]{ --canvas:#F6F0E7; --canvas-2:#EFE7DA; --surface:#FFFFFF; --surface-2:#F3EBDD; --bar:rgba(246,240,231,.86); --tileph:#E7DECF; --ink:#2A2230; --muted:#6E6163; --faint:#675A50; /* faint+muted darkened for WCAG-AA on small labels */ --line:rgba(42,34,48,.13); --line-2:rgba(42,34,48,.06); --gold:#9A7320; --gold-deep:#7C5C18; --rose:#B65C77; --rose-deep:#9A4862; --emerald:#2E9C73; /* Bright gold for FILLS on the light UI — the readable text-gold above (#9A7320) is too dark to fill a chip with. Dark --on-gold text stays legible on this. */ --gold-fill-1:#E0A93C; --gold-fill-2:#C48E2C; --shadow:0 1px 2px rgba(120,100,80,.12),0 14px 40px rgba(120,100,80,.14); --shadow-lg:0 30px 80px rgba(90,70,45,.22); } /* ---------- LIGHT · WARMER ---------- */ :root[data-theme="light"][data-palette="warmer"]{ --canvas:#FBF3E8; --surface-2:#F6ECDB; --gold:#A87A1E; --gold-deep:#8A6116; --rose:#C25C7E; --rose-deep:#A6486A; } *{box-sizing:border-box} /* overflow-x:clip on the root contains the off-screen slide-in drawers (#navRail / #topActions). On iOS Safari an off-screen fixed element (translateX past the edge) otherwise adds horizontal scroll area — the off-canvas-menu bug. `clip` (not `hidden`) creates no scroll container, so it doesn't break sticky or vertical-scroll smoothness (the earlier jank was the context-bar blur). */ /* overscroll-behavior:none kills the iOS rubber-band: when you pulled the page down, the scrollable content bounced but the position:fixed sidebar/topbar didn't, so they visibly came apart. Disabling the document overscroll (also blocks accidental pull-to-refresh) keeps the fixed chrome locked to the page. */ html,body{margin:0;overflow-anchor:none;overflow-x:clip;overscroll-behavior:none} /* iOS/Android: kill the grey/blue tap flash (every control provides its own :active feedback); lock text auto-sizing so landscape rotation on iOS doesn't inflate fonts. */ html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%} /* NOTE: #appbody intentionally has NO overflow-x:clip. Clipping there made it the sticky containing block for #contextBar, and iOS Safari then positioned the context bar a few px below the topbar — a transparent gap that showed the scrolling photos through it. The root clip above already contains the off-screen drawers and any grid rounding overflow, so the context bar now sticks to the viewport exactly like the topbar (flush, no gap). */ #connect{overflow-x:clip} body{background:var(--canvas);color:var(--ink); font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} button,input,select{font-family:inherit} /* buttons: don't let a tap/long-press select their label text on iOS/Android; touch-action manipulation removes the 300ms click delay and double-tap-zoom on controls (inputs/textareas keep normal behaviour) */ button{-webkit-user-select:none;user-select:none;touch-action:manipulation} .hidden{display:none!important} /* The `hidden` ATTRIBUTE must always win too: any element given a `display` (flex/grid/inline-flex) would otherwise override the UA `[hidden]{display:none}` and leak through. Mirror the .hidden class so toggling `el.hidden`/the attribute reliably hides — covers all current + future cases. */ [hidden]{display:none!important} .serif{font-family:var(--font-display)} .script{font-family:var(--font-script);font-style:italic} ::selection{background:rgba(201,162,75,.3)} :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} .grow{flex:1}.spacer{flex:1} /* boot splash */ #boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px; background:radial-gradient(120% 80% at 50% -10%,rgba(201,162,75,.10),transparent 55%),var(--canvas);transition:opacity .4s ease} #boot.gone{opacity:0;pointer-events:none} .boot-mark{font-family:var(--font-display);font-size:34px;color:var(--gold);letter-spacing:.01em;line-height:1} .boot-spin{width:30px;height:30px;border-radius:999px;border:2.5px solid rgba(242,234,224,.18);border-top-color:var(--gold);animation:bootspin .8s linear infinite} @keyframes bootspin{to{transform:rotate(360deg)}} /* ================= LANDING / CONNECT ================= */ #connect{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column; /* dvh: iOS dynamic toolbar */ background:radial-gradient(120% 80% at 50% -20%,rgba(201,162,75,.10),transparent 55%), radial-gradient(80% 60% at 50% 120%,rgba(217,139,161,.07),transparent 60%),var(--canvas)} .hero{position:relative;text-align:center;padding:64px 20px 26px} .hero .mono{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600} .hero h1{margin:14px 0 2px;font-family:var(--font-display);font-weight:400;font-size:clamp(42px,12vw,62px);line-height:1.02;color:var(--ink);display:flex;flex-direction:column;align-items:center} .hero h1 .nm{display:block} .hero h1 .amp{font-family:var(--font-script);font-style:italic;color:var(--gold);font-weight:500;font-size:.46em;line-height:1.25;margin:3px 0} .hero .tag{color:var(--muted);max-width:460px;margin:8px auto 0;font-family:var(--font-script);font-style:italic;font-size:18px} .ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 0;color:var(--gold-deep)} .ornament::before,.ornament::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold-deep))} .ornament::after{background:linear-gradient(270deg,transparent,var(--gold-deep))} .ornament span{font-size:13px;color:var(--gold)} /* align-items:flex-start so the login card hugs its content height instead of stretching to fill the flex column (which left a tall empty gap once the multi-gallery form was turned off). */ .connect-wrap{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:24px 18px 56px} .card{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden} .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85} .owner{background:rgba(201,162,75,.07);border:1px solid rgba(201,162,75,.22);border-radius:14px;padding:18px;margin-bottom:0} .owner .lbl{font-family:var(--font-display);font-size:20px;margin-bottom:3px;color:var(--ink)} .owner .sub,.section .sub{color:var(--muted);font-size:12.5px} .owner-row{display:flex;gap:10px;margin-top:12px}.owner-row input{flex:1} .pw-wrap{position:relative;flex:1;display:flex} .pw-wrap input{width:100%;padding-right:42px} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex; align-items:center;justify-content:center;border:0;background:none;color:var(--faint);cursor:pointer;padding:0} .pw-eye .ic{width:18px;height:18px} .pw-eye:hover{color:var(--ink)} .pw-eye.on{color:var(--gold)} /* Multi-gallery connect is permanently off in this owner-only build — hide the whole block (and its "connecting is off" divider) so the login card is just a clean "Welcome back" + password. */ #genericConnect.disabled{display:none} input:disabled,select:disabled,.btn:disabled{cursor:not-allowed} /* ---- auth panes: sign in / sign up / event code ---- */ .authpane.hidden{display:none} .authform{display:flex;flex-direction:column;gap:13px;margin-top:16px} .authform .field{margin:0} .authform .btn.primary{margin-top:4px} .auth-switch{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)} .linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .linkbtn:hover{color:var(--gold-deep)} .divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 16px} .divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1} .field{margin:12px 0} .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600} .field label b{color:var(--gold)} input,select{font-size:14px;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%} input::placeholder{color:var(--faint)} input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)} .row2{display:flex;gap:12px}.row2>*{flex:1} .err{color:var(--rose);font-size:13px;min-height:18px;margin-top:10px;text-align:center} .err:empty{display:none} /* no reserved gap when there's no error to show (keeps the login card tight) */ .foot-note{text-align:center;color:var(--faint);font-size:12px;padding:0 20px 30px} .foot-note b{color:var(--muted)} /* ================= BUTTONS ================= */ .btn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer; padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:13px;white-space:nowrap; /* every button is a centred icon+label row by default — so an