/* Aisleful — warm editorial wedding brand. Palette + type per BRAND.md. Ink navy / blush / gold on cream paper. Cormorant Garamond (display) + Inter (UI). */ :root { --ink: #1f2a44; /* deep navy — headlines, primary */ --blush: #e7bfb3; /* soft blush — warm accent */ --blush-deep: #d29e90; --gold: #c69a5b; /* gold — fine detail, dividers, accents */ --paper: #faf5ef; /* cream paper background */ --paper-2: #f3ebe1; /* slightly deeper cream for panels/sections */ --body: #3a3a3a; /* soft ink for body copy */ --muted: #6b7280; --line: #e6ddd2; --white: #fffdfb; --ok: #3f7d5a; --err: #b3453a; --radius: 16px; --radius-lg: 22px; --shadow: 0 10px 40px rgba(31, 42, 68, 0.10); --shadow-soft: 0 4px 18px rgba(31, 42, 68, 0.07); --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } /* The `hidden` attribute must always win over component display rules (e.g. .btn { display:inline-flex } would otherwise show a [hidden] button). */ [hidden] { display: none !important; } /* ---------- Smooth load ---------- Avoid the "white space pops in as elements load" flash. Two mechanisms: 1) A short pre-paint hold: pages add `html.app-loading` in a tiny inline script and remove it once fonts + first data are ready (with a JS failsafe), so the shell doesn't paint half-built. `html.auth-checking` (index only) is the same idea for the logged-in redirect decision. 2) A pure-CSS fade-in on so even without JS the page never flashes and can never be trapped hidden. Data-driven regions that arrive after a network round-trip use skeleton placeholders (below) so their layout is reserved up-front and content swaps in place instead of popping in. */ html.auth-checking body, html.app-loading body { visibility: hidden; } body { animation: page-fade-in .45s ease both; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* ---------- Skeleton placeholders ---------- A soft shimmering block used to reserve layout while data loads. Swap the real content in (removing .is-skeleton) once it arrives. */ .skeleton, .sk { position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(100deg, var(--paper-2) 30%, #efe6da 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; color: transparent !important; pointer-events: none; user-select: none; } .skeleton * { visibility: hidden; } @keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton, .sk { animation: none; } } .sk-line { height: .9em; border-radius: 6px; margin: 6px 0; } .sk-tile { aspect-ratio: 1; border-radius: 12px; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--body); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--ink); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.1; letter-spacing: .2px; } /* ---------- Layout ---------- */ .container { max-width: 1120px; margin: 0 auto; padding: 0 22px; } header.site { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; max-width: 1120px; margin: 0 auto; gap: 16px; flex-wrap: wrap; } .brand { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); letter-spacing: .5px; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: baseline; gap: .12em; } .brand .dot { color: var(--gold); } nav a { margin-left: 22px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .96rem; } nav a:hover { color: var(--blush-deep); } /* Eyebrow / kicker */ .kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--gold); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--white); border: none; border-radius: 999px; padding: 14px 30px; font-family: var(--sans); font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 48px; transition: transform .08s ease, box-shadow .2s, background .2s; box-shadow: 0 6px 18px rgba(31,42,68,.18); } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(31,42,68,.24); } .btn:active { transform: translateY(0); } .btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; } .btn.secondary:hover { background: var(--ink); color: var(--white); } .btn.blush { background: var(--blush); color: var(--ink); box-shadow: 0 6px 18px rgba(210,158,144,.35); } .btn.blush:hover { background: var(--blush-deep); } .btn.gold { background: var(--gold); color: var(--white); } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .btn.full { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; text-align: center; padding: 44px 22px 30px; max-width: 860px; margin: 0 auto; } .hero .kicker { display: block; margin-bottom: 12px; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 0 0 16px; font-weight: 500; } .hero h1 em { font-style: italic; color: var(--blush-deep); } .hero p { font-size: 1.12rem; color: var(--body); margin: 0 auto 24px; max-width: 600px; } .hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero .reassure { margin-top: 16px; font-size: .9rem; color: var(--muted); } /* thin gold rule as a decorative divider */ .rule { width: 64px; height: 1px; background: var(--gold); border: 0; margin: 0 auto; opacity: .8; } .rule.wide { width: 100%; background: var(--line); } /* ---------- Section scaffolding ---------- */ section.band { padding: 44px 0; } section.band.tint { background: var(--paper-2); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 32px; } .section-head.compact { margin-bottom: 24px; } .section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 10px 0 10px; font-weight: 500; } .section-head p { color: var(--muted); margin: 0; font-size: 1.05rem; } /* ---------- "How it works" steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .step { text-align: center; padding: 8px; } .step .num { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); background: var(--white); border: 1.5px solid var(--gold); box-shadow: var(--shadow-soft); } .step h3 { font-size: 1.35rem; margin: 0 0 8px; } .step p { color: var(--muted); margin: 0; font-size: .98rem; } /* ---------- Feature / promise cards ---------- */ .promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .promise { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-soft); } .promise .ic { font-size: 1.6rem; margin-bottom: 12px; display: block; } .promise h3 { font-size: 1.3rem; margin: 0 0 8px; } .promise p { color: var(--muted); margin: 0; font-size: .96rem; } /* ---------- Partner-of-the-day highlight band ---------- */ .partner { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 56px 44px; text-align: center; box-shadow: var(--shadow); } .partner .kicker { color: var(--blush); } .partner h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 500; margin: 12px auto 16px; max-width: 760px; } .partner p { color: #d9d3ca; max-width: 620px; margin: 0 auto; font-size: 1.08rem; } /* ---------- Pricing ---------- */ .pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 8px 0 12px; align-items: stretch; min-height: 340px; } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; position: relative; transition: transform .15s, box-shadow .2s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .card.featured { border-color: var(--gold); border-width: 1.5px; box-shadow: var(--shadow); } .card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--white); font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .12em; padding: 5px 16px; border-radius: 999px; text-transform: uppercase; } .card h3 { margin: 0 0 4px; font-size: 1.45rem; font-weight: 600; } .card .blurb { color: var(--muted); font-size: .9rem; min-height: 60px; } .card .price { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--ink); margin: 12px 0 2px; line-height: 1.1; } .card .price small { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--muted); display: block; letter-spacing: .04em; margin-top: 4px; } .card ul { list-style: none; padding: 0; margin: 14px 0; flex: 1; } .card li { padding: 6px 0 6px 24px; position: relative; font-size: .9rem; color: var(--body); } .card li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* ---------- Forms / panels ---------- */ .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-soft); max-width: 580px; margin: 36px auto; } .panel h2 { margin-top: 0; font-size: 1.9rem; font-weight: 500; } .panel .lead { color: var(--muted); margin-top: -4px; } label { display: block; font-weight: 600; margin: 18px 0 6px; font-size: .9rem; color: var(--ink); } input, select { width: 100%; padding: 13px 14px; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--body); font-family: var(--sans); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,154,91,.18); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .duration-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; } .duration-grid button { padding: 13px 6px; border: 1.5px solid var(--line); background: var(--white); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--ink); min-height: 48px; font-family: var(--sans); transition: all .12s; } .duration-grid button:hover { border-color: var(--gold); } .duration-grid button.active { border-color: var(--ink); background: var(--ink); color: var(--white); } .summary { background: var(--paper-2); border-radius: 12px; padding: 16px 18px; margin-top: 20px; border: 1px solid var(--line); } .summary .headline { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); } .summary .sub { color: var(--muted); font-size: .9rem; } .note { font-size: .85rem; color: var(--muted); } .msg { padding: 13px 16px; border-radius: 12px; margin: 14px 0; font-size: .93rem; } .msg.err { background: #f8e6e4; color: var(--err); } .msg.ok { background: #e6f0ea; color: var(--ok); } /* ---------- Gallery grid ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 26px 0; } .tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-soft); } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .tile:hover img { transform: scale(1.04); } .tile .badge { position: absolute; bottom: 8px; left: 8px; background: rgba(31,42,68,.72); color: #fff; font-size: .7rem; padding: 3px 9px; border-radius: 999px; } .tile .who { position: absolute; top: 8px; left: 8px; right: 8px; color: #fff; font-size: .72rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); } /* ---------- Upload progress ---------- */ .upload-list { margin: 18px 0; } .upload-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; } .progress { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; } .progress > span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; } /* ---------- QR / links ---------- */ .qr-wrap { text-align: center; margin: 22px 0; } .qr-wrap canvas, .qr-wrap img { display: block; margin: 0 auto; border: 8px solid var(--white); border-radius: 12px; box-shadow: var(--shadow-soft); } .linkbox { display: flex; gap: 8px; margin-top: 8px; } .linkbox input { font-size: 14px; } .linkbox input.is-private { opacity: .55; text-decoration: line-through; } /* ---------- Privacy toggles (account page) ---------- */ .privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); } .privacy-title { font-weight: 600; color: var(--ink); font-size: .95rem; } .privacy-sub { color: var(--muted); font-size: .82rem; margin-top: 2px; } .switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; cursor: pointer; background: #cfc6ba; border-radius: 999px; transition: background .18s; } .switch .slider::before { content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch input:checked + .slider { background: var(--gold); } .switch input:checked + .slider::before { transform: translateX(22px); } .switch input:focus-visible + .slider { outline: 2px solid var(--gold); outline-offset: 2px; } .btn-disabled { opacity: .45; pointer-events: none; } /* ---------- Account metrics ---------- */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 22px; } .metric { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; } .metric-val { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; } .metric-label { font-size: .8rem; color: var(--muted); margin-top: 6px; } .metric-sub { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; } @media (max-width: 560px) { .metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; } .metric { padding: 12px 6px; } .metric-val { font-size: 1.5rem; } } /* ---------- Gallery tile download button (bottom-right) ---------- */ .tile .dl-btn { position: absolute; bottom: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(31,42,68,.82); color: #fff; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: background .15s, transform .08s; } .tile .dl-btn:hover { background: var(--ink); } .tile .dl-btn:active { transform: scale(.94); } /* ---------- Password field with show/hide icon toggle ---------- */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 48px; } .pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; color: var(--muted); width: 40px; height: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; border-radius: 10px; transition: color .15s, background .15s; } .pw-toggle:hover { color: var(--ink); background: rgba(31,42,68,.06); } .pw-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .pw-toggle svg { display: block; } /* Icon visibility is driven by a class on the button (SVG ignores [hidden]). */ .pw-toggle .eye-off { display: none; } .pw-toggle.revealed .eye { display: none; } .pw-toggle.revealed .eye-off { display: block; } #pwMsg:empty { display: none; } /* ---------- Footer ---------- */ footer.site { text-align: center; color: var(--muted); font-size: .85rem; padding: 40px 22px 32px; background: var(--paper-2); margin-top: 0; } footer.site .brand { font-size: 1.3rem; margin-bottom: 8px; } footer.site .tag-line { font-style: italic; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, 1fr); gap: 16px; } .card .blurb { min-height: 0; } } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 26px; } .promises { grid-template-columns: 1fr; } .partner { padding: 40px 22px; } .duration-grid { grid-template-columns: repeat(2, 1fr); } .field-row { grid-template-columns: 1fr; } header.site { justify-content: center; } section.band { padding: 36px 0; } } @media (max-width: 560px) { .pricing { grid-template-columns: 1fr; } } /* ---------- Mobile centering pass ---------- Keep the marketing sections visually centred on phones: headings, copy, the 3 "how it works" steps, pricing cards and the nav all centre-align, and long copy blocks get auto side-margins so they don't hug the left edge. */ @media (max-width: 860px) { header.site { justify-content: center; text-align: center; } header.site nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; width: 100%; } header.site nav a { margin: 0 11px; } .hero { padding-left: 20px; padding-right: 20px; } .hero p, .hero .reassure { margin-left: auto; margin-right: auto; } .section-head, .section-head.compact { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { margin-left: auto; margin-right: auto; } .steps { justify-items: center; } .step { max-width: 420px; margin: 0 auto; } .partner { text-align: center; } /* Pricing cards read centred as a single column on phones. */ .pricing .card { text-align: center; max-width: 440px; margin: 0 auto; width: 100%; } .pricing .card ul { display: inline-block; text-align: left; } .pricing .card .tag { left: 50%; } .container > .note, section .note { margin-left: auto; margin-right: auto; } } /* ================================================================ Account dashboard — a warm page for the couple to land on. ================================================================ */ .dash { max-width: 1120px; margin: 0 auto; padding: 0 22px 60px; } /* Welcome hero band */ .dash-hero { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 34px 36px; box-shadow: var(--shadow); margin: 14px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .dash-hero .kicker { color: var(--blush); display: block; margin-bottom: 8px; } .dash-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 500; margin: 0; line-height: 1.05; } .dash-hero .hero-sub { color: #d9d3ca; margin: 10px 0 0; font-size: 1.02rem; } .dash-hero .hero-count { text-align: center; flex: 0 0 auto; } .dash-hero .hero-count .n { font-family: var(--serif); font-size: 3.4rem; font-weight: 600; color: var(--blush); line-height: 1; display: block; } .dash-hero .hero-count .l { color: #cfc8bd; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; margin-top: 6px; } /* Section cards on the dashboard */ .dash-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-soft); margin: 0 0 20px; } .dash-card > h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: var(--ink); } .dash-card .card-sub { color: var(--muted); font-size: .92rem; margin: 0 0 16px; } .dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Collapsible details sections (share / privacy / billing) */ details.dash-card { padding: 0; } details.dash-card > summary { list-style: none; cursor: pointer; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--serif); font-size: 1.4rem; color: var(--ink); } details.dash-card > summary::-webkit-details-marker { display: none; } details.dash-card > summary::after { content: "⌄"; font-family: var(--sans); color: var(--gold); font-size: 1.4rem; transition: transform .2s; } details.dash-card[open] > summary::after { transform: rotate(180deg); } details.dash-card > .details-body { padding: 0 28px 26px; } /* Album filter tabs */ .album-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .album-tab { border: 1.5px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 7px 16px; font-family: var(--sans); font-size: .88rem; font-weight: 600; cursor: pointer; min-height: 38px; transition: all .12s; display: inline-flex; align-items: center; gap: 7px; } .album-tab:hover { border-color: var(--gold); } .album-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .album-tab .cnt { font-weight: 500; opacity: .7; font-size: .8rem; } .album-tab.add { border-style: dashed; color: var(--muted); } /* Selection / bulk-move toolbar */ .select-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; } .select-bar .count { font-weight: 600; color: var(--ink); } .select-bar .spacer { flex: 1; } .select-bar select { width: auto; min-width: 160px; padding: 9px 12px; } .select-bar .btn { padding: 9px 18px; min-height: 40px; font-size: .9rem; } /* Selectable tiles */ .tile.selectable { cursor: pointer; } .tile.selected { outline: 3px solid var(--gold); outline-offset: -3px; } .tile .sel-check { position: absolute; top: 8px; left: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.85); border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--ink); font-size: .9rem; font-weight: 700; } .tile.selected .sel-check { background: var(--gold); border-color: var(--gold); color: #fff; } .tile .album-pill { position: absolute; bottom: 8px; left: 8px; background: rgba(31,42,68,.72); color: #fff; font-size: .68rem; padding: 3px 9px; border-radius: 999px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty-state { text-align: center; color: var(--muted); padding: 30px 10px; } .empty-state .big { font-size: 2.2rem; margin-bottom: 8px; } @media (max-width: 640px) { .dash-hero { flex-direction: column; text-align: center; align-items: center; padding: 28px 22px; } .dash-hero .hero-count .n { font-size: 2.8rem; } details.dash-card > summary, details.dash-card > .details-body, .dash-card { padding-left: 20px; padding-right: 20px; } .select-bar select { flex: 1 1 100%; } } /* ============================================================ Logged-in navigation (shared across account pages) ============================================================ */ .appnav { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-bottom: 1px solid rgba(31,42,68,.1); background: #fff; position: sticky; top: 0; z-index: 50; } .appnav-brand { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 600; color: #1f2a44; text-decoration: none; margin-right: 8px; flex: 0 0 auto; } .appnav-brand .dot { color: #c69a5b; } /* The collapse holds links + logout. On desktop it's an inline flex row that fills the bar; on mobile it becomes a dropdown panel toggled by the burger. */ .appnav-collapse { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; } .appnav-links { display: flex; gap: 4px; flex: 1 1 auto; } .appnav-link { color: #4a5266; text-decoration: none; font-weight: 500; font-size: .95rem; padding: 8px 14px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; } .appnav-link:hover { background: rgba(31,42,68,.06); color: #1f2a44; } .appnav-link.active { background: #1f2a44; color: #fff; } .appnav-logout { color: #4a5266; text-decoration: none; font-weight: 500; font-size: .9rem; padding: 8px 14px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; flex: 0 0 auto; } .appnav-logout:hover { color: #1f2a44; background: rgba(31,42,68,.06); } /* Burger button — hidden on desktop, shown on mobile. */ .appnav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(31,42,68,.15); border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; padding: 0; } .appnav-burger:hover { background: rgba(31,42,68,.05); } .appnav-burger:focus-visible { outline: 2px solid #c69a5b; outline-offset: 2px; } .appnav-burger .bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; } .appnav-burger .bars span { display: block; height: 2px; width: 100%; background: #1f2a44; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } /* Animate to an X when open. */ .appnav.nav-open .appnav-burger .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .appnav.nav-open .appnav-burger .bars span:nth-child(2) { opacity: 0; } .appnav.nav-open .appnav-burger .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 720px) { .appnav { flex-wrap: wrap; } .appnav-burger { display: inline-flex; } /* Collapsible dropdown panel */ .appnav-collapse { flex-basis: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 2px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; margin-top: 0; } .appnav.nav-open .appnav-collapse { max-height: 420px; opacity: 1; margin-top: 10px; } .appnav-links { flex-direction: column; gap: 2px; } .appnav-link, .appnav-logout { width: 100%; min-height: 48px; font-size: 1rem; border-top: 1px solid rgba(31,42,68,.06); border-radius: 8px; } .appnav-logout { color: #1f2a44; } } @media (prefers-reduced-motion: reduce) { .appnav-collapse, .appnav-burger .bars span { transition: none; } } /* ============================================================ Account / settings page ============================================================ */ .plan-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .plan-name { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; color: #1f2a44; font-weight: 600; } .plan-sub { color: #6b7280; font-size: .95rem; margin-top: 2px; } .plan-badge { background: #e7bfb3; color: #1f2a44; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .sub-head { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; color: #1f2a44; margin: 22px 0 4px; } .upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; } .upgrade-opt { border: 1px solid rgba(31,42,68,.12); border-radius: 12px; padding: 16px; text-align: center; } .uo-name { font-family: "Cormorant Garamond", serif; font-size: 1.25rem; color: #1f2a44; font-weight: 600; } .uo-price { color: #c69a5b; font-weight: 600; margin: 6px 0 12px; } .pay-table { display: flex; flex-direction: column; } .pay-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(31,42,68,.08); } .pay-row:last-child { border-bottom: none; } .pay-when { color: #6b7280; font-size: .88rem; } .pay-what { color: #1f2a44; font-weight: 500; } .pay-what.failed { color: #b4413c; } .pay-amt { color: #1f2a44; font-weight: 600; text-align: right; min-width: 64px; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(31,42,68,.08); } .kv:last-child { border-bottom: none; } .kv .k { color: #6b7280; } .kv .v { color: #1f2a44; font-weight: 500; text-align: right; } .billing-card { border-top: 3px solid #c69a5b; } /* ============================================================ Printable QR cards ============================================================ */ .style-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .style-tab { border: 1px solid rgba(31,42,68,.18); background: #fff; color: #4a5266; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: .9rem; min-height: 40px; } .style-tab.active { background: #1f2a44; color: #fff; border-color: #1f2a44; } .print-sheet { display: grid; gap: 16px; margin-top: 8px; } .print-sheet[data-count="1"] { grid-template-columns: 1fr; } .print-sheet[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .print-sheet[data-count="9"] { grid-template-columns: repeat(3, 1fr); } .qr-card { border: 1px solid rgba(31,42,68,.15); border-radius: 14px; padding: 24px 18px; text-align: center; background: #faf5ef; display: flex; flex-direction: column; align-items: center; break-inside: avoid; } .qc-brand { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 600; color: #1f2a44; } .qc-msg { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: #1f2a44; margin: 6px 0 14px; line-height: 1.2; } .qc-qr { background: #fff; padding: 10px; border-radius: 10px; } .qc-qr canvas { width: 100%; max-width: 200px; height: auto; display: block; } .qc-sub { color: #4a5266; font-size: .95rem; margin-top: 14px; font-weight: 500; } .qc-link { color: #c69a5b; font-size: .82rem; margin-top: 4px; word-break: break-all; } .qc-foot { color: #9aa1ad; font-size: .72rem; margin-top: 10px; letter-spacing: .03em; } .qr-card.style-dark { background: #1f2a44; border-color: #1f2a44; } .qr-card.style-dark .qc-brand, .qr-card.style-dark .qc-msg { color: #f7ede3; } .qr-card.style-dark .qc-sub { color: #e7bfb3; } .qr-card.style-dark .qc-foot { color: #8791a5; } .qr-card.style-minimal { background: #fff; } .qr-card.style-minimal .qc-brand { color: #9aa1ad; font-size: 1rem; } @media (max-width: 640px) { .print-sheet[data-count="4"], .print-sheet[data-count="9"] { grid-template-columns: 1fr; } } /* Print: only the sheet, cards laid out for A4. */ .no-print { } @media print { .no-print, #appnav, #msg, #hero, #controls { display: none !important; } body { background: #fff; } .dash { padding: 0 !important; max-width: none !important; } .print-sheet { gap: 8mm; } .print-sheet[data-count="1"] { grid-template-columns: 1fr; } .print-sheet[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .print-sheet[data-count="9"] { grid-template-columns: repeat(3, 1fr); } .qr-card { border: 1px dashed rgba(0,0,0,.25); } @page { size: A4; margin: 12mm; } } /* ============================================================ Admin dashboard ============================================================ */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } } .bar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; padding: 7px 0; } .bar-label { color: #1f2a44; font-size: .9rem; font-weight: 500; } .bar-track { background: rgba(31,42,68,.08); border-radius: 999px; height: 12px; overflow: hidden; } .bar-fill { background: #c69a5b; height: 100%; border-radius: 999px; min-width: 4px; } .bar-val { color: #6b7280; font-size: .82rem; white-space: nowrap; text-align: right; } .chart { margin: 8px 0 4px; } .vis-svg { width: 100%; height: 140px; display: block; } .chart-legend { color: #6b7280; font-size: .82rem; margin-top: 6px; } .chart-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; } .chart-legend .lg.gold { background: #c69a5b; } .chart-legend .lg.navy { background: #1f2a44; } #rangeSel { border: 1px solid rgba(31,42,68,.2); border-radius: 8px; padding: 8px 12px; font: inherit; background: #fff; color: #1f2a44; min-height: 40px; }