/* ============================================================================ Frame — generator workspace UI SINGLE SOURCE OF TRUTH for the generator tool UI, shared by the homepage and all 5 dedicated generator pages (WhatsApp, WiFi, vCard, PDF, Menu). Header/branding styling now lives in theme-light.css (shared by every page, generator or not) — see "SITE-WIDE HEADER" near the end of that file. Consolidated: the previous version had grown into three appended override layers with 20 selectors declared 2–4 times each. Every selector below is now declared exactly once, in document order: 1 tokens & layout 9 advanced 2 hero 10 preview panel 3 step headers 11 how-to section 4 QR type toolbar 12 trust strip 5 inputs & accordions 13 mobile 14 motion 6 colours / logo 15 new SEO/content sections 7 shape & frames 16 section rhythm (alternating bg) 8 styles / templates Loaded after theme-light.css, before frame-navigation-v3.css, on the homepage and all 5 dedicated generator pages. Sections 2, 3, 11, 12, 15, 16 (hero/how-to/trust-strip/SEO content/section rhythm) apply only where that markup exists (homepage today) — safe no-ops elsewhere. */ /* ---------------------------------------------------- 1. tokens & layout */ :root{ color-scheme:light; /* stops the OS painting native selects dark */ --ws-ink:#0F2233; /* primary text — the H1 navy */ --ws-ink-2:#47586B; /* secondary */ --ws-line:#E1E7EE; /* hairlines — separators, not boxes */ --ws-line-strong:#CCD5DF; /* input borders */ --ws-surface:#F7F9FB; /* preview column / quiet hover fills */ --ws-hover:#F2F5F8; /* row + tab hover */ --ws-dim:#5B6473; /* helper text, ~5:1 on white */ --ws-teal:#0E7F78; /* brand teal, text-safe (4.6:1+ on the band) */ --ws-surface-2:#E8EEF4; /* accordion header rows — one step darker, so closed sections read as distinct rows, not blank space */ --ws-radius:12px; --ws-navy:#0F2233; /* dark-section surface, matches howto */ --ws-mist:#EEF3F8; /* soft light blue-gray surface, section rhythm */ --ws-teal-wash:#EAF7F5; /* faint turquoise-tinted accent surface */ } @media (min-width:901px){ .hero .wrap{max-width:min(85vw,1400px)!important;padding:0 24px!important;} .hero-head{max-width:820px;} .studio{ /* 440px floor is deliberate, not arbitrary: at 1024px viewport (the narrowest width this layout is checked against) a 35% split with a 370px floor pins the preview column at 370px — too tight for a genuinely large QR without the nested .frame-inner/canvas (fixed px, see section 10) silently overflowing their shrunk parent. 440px guarantees enough room at 1024/1366/1440 alike. */ grid-template-columns:minmax(0,58fr) minmax(440px,42fr)!important; grid-template-areas:"toolbar toolbar" "controls preview" "customize preview"!important; /* plain white: the preview column paints its own tint (section 10). The old fixed 440px gradient split drifted off the real column edge whenever the 42fr column grew past 440px, leaving a white strip. */ background:#fff!important; border-radius:14px!important; } .type-toolbar{grid-area:toolbar;} .controls{padding:22px 30px 10px!important;border-right:1px solid var(--ws-line)!important;} .customize{padding:0 30px 26px!important;border-right:1px solid var(--ws-line)!important;} } /* One application surface: a single hairline border and one soft, low shadow (replaces the heavy lift it needed against the old saturated band). The left column — content AND customise — is one white surface; only the preview column is tinted, so the page reads as "configure | output". */ .studio{ border:1px solid var(--ws-line)!important; box-shadow:0 1px 2px rgba(15,34,51,.04),0 12px 32px -14px rgba(15,34,51,.14)!important; } .customize{background:#fff!important;border-radius:0 0 14px 14px;} @media (min-width:901px){ /* Two-column layout: .customize only occupies the bottom-left grid cell, so only that corner sits at the card's actual edge. */ .customize{border-radius:0 0 0 14px;} } /* .studio ships overflow:hidden in the base stylesheet (it rounds the corners by clipping). Visible here, at every width, so the More dropdown below can overlay the fields instead of being clipped or forced to push them down — the corners that used to rely on that clip now round themselves explicitly instead (.type-toolbar's own top radius above, .customize's bottom radius here; .controls/.preview never touch the card's outer edge). */ .studio{overflow:visible!important;} /* ------------------------------------------------------------- 2. hero */ @media (min-width:901px){ body:has(.hero) .hero{padding-top:18px!important;padding-bottom:40px!important;} .hero-badges{margin:12px 0 18px!important;} } @media (max-width:900px){ body:has(.hero) .hero{padding-bottom:24px!important;} } .hero::after{display:none!important;} /* hard section cut, no fade */ .hero::before{bottom:0!important;} /* band ends flush with the hero, no overhang into the next section — the gap above is real padding on .hero itself, not a fade, so the cut stays sharp */ /* The band behind header + hero (theme-light.css paints it saturated teal->blue). Toned down to a pale blue-grey with only a faint teal hint at the very top, so the white workspace is the brightest, most defined thing on screen. Teal survives as an accent (tagline, trust icons), not a field. */ .hero::before{background:linear-gradient(180deg,#E3F3F1 0,#EDF3F7 260px,#F1F5F8 100%)!important;} /* The header is its own opaque surface in both states. theme-light.css made it transparent at the top (the band underneath stopped 10px short of the 68px header, leaving a light strip) and 94% white + saturate/blur once scrolled — which let the QR preview's dark modules bleed through as a grey smudge between FAQ and the CTA. Solid, no backdrop filter, one hairline. */ body:has(.hero) .nav,body:has(.hero) .nav.scrolled{ background:#FAFBFC!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; border-bottom:1px solid rgba(15,34,51,.08)!important; } body:has(.hero) .nav-links > a:hover{background:rgba(15,34,51,.05)!important;} body:has(.hero) .nav.scrolled .nav-links > a:hover{background:var(--surface-2)!important;} .hero-head .eyebrow{background:#fff!important;border:1px solid var(--ws-line)!important;color:#0B4A57!important;} .hero-head .eyebrow::before{background:var(--ws-teal)!important;box-shadow:none!important;animation:none!important;} /* the white accent word was only legible on the saturated band */ .hero-head .hero-tagline .accent{color:var(--ws-teal)!important;} /* Trust line: three plain statements with small teal icons instead of a third row of white pills — same claims, far less competition with the tool. */ .hero .hero-badges{gap:8px 22px!important;margin:16px 0 22px!important;} .hero .hero-badge,.hero .hero-badge.alt{ background:transparent!important;border:0!important;box-shadow:none!important; padding:0!important;border-radius:0!important;animation:none!important; gap:7px!important;font-size:13.5px!important;font-weight:500!important;color:#33475A!important; } .hero .hero-badge:hover{transform:none!important;box-shadow:none!important;} .hero .hero-badge svg{width:15px!important;height:15px!important;color:var(--ws-teal);} @media (max-width:900px){ .hero .hero-badges{gap:6px 16px!important;margin:12px 0 16px!important;} .hero .hero-badge,.hero .hero-badge.alt{font-size:13px!important;padding:0!important;} } /* ---------------------------------------------------- 3. step headers */ .step-head,.cz-head{ display:flex!important;align-items:center!important;gap:10px!important; font-family:'Manrope','Inter',sans-serif!important; font-size:15px!important;font-weight:700!important;color:var(--ws-ink)!important; } .step-head{margin-bottom:10px;} .cz-head{padding:20px 0 8px!important;border-top:1px solid var(--ws-line)!important;margin-top:6px;} /* The two steps are a real sequence, so the numbers stay — but as a quiet tinted badge, leaving solid blue to the one primary action (Download). */ .step-num{ width:22px;height:22px;flex-shrink:0;border-radius:6px; background:var(--accent-soft);color:var(--accent); font-family:'Inter',sans-serif;font-size:12px;font-weight:700; display:inline-flex;align-items:center;justify-content:center; } .cz-head-note{margin-left:auto;font-family:'Inter',sans-serif!important;font-size:12.5px!important;color:var(--ws-dim)!important;font-weight:400!important;letter-spacing:0!important;} /* ------------------------------------------------ 4. QR type toolbar */ /* A full-width bar across the TOP EDGE of the whole white board — spans both columns on desktop via grid-area:toolbar (see section 1) — instead of being tucked inside the left column. This is what makes it read as the tool's primary nav, the way QRCode Monkey's type row does. .studio has overflow:hidden + border-radius, so this bar's top corners clip to match automatically; no manual rounding needed here. */ .type-toolbar{ position:relative;min-width:0!important; /* grid item default is min-width:auto — without this override, the 13 non-wrapping tabs impose their full min-content width on the "toolbar" grid track, forcing .studio wide at every viewport and defeating .type-tabs' own overflow-x:auto scrolling entirely. */ background:#fff!important; /* part of the same white card now, not a separate strip — only a hairline divider marks it off from the fields below */ border-bottom:1px solid var(--ws-line)!important; border-radius:14px 14px 0 0; /* .studio switches to overflow:visible below (needed so the More dropdown can overlay instead of pushing content down), so this top corner no longer clips automatically and must round itself. */ padding:10px 22px!important; } .type-tabs{ display:flex!important;flex-wrap:nowrap!important;gap:4px!important; /* base .type-tabs in frame.css is flex-wrap:wrap — unless overridden, "More" drops to its own row the moment the 13 tabs' natural width exceeds the toolbar; nowrap + scroll keeps one row */ background:transparent!important;border:0!important;padding:0!important;margin:0!important; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .type-tabs::-webkit-scrollbar{display:none} /* Tabs read as a quiet segmented row: no resting border or fill, text + icon only. Selection is a tinted accent chip — unmistakable, but no heavier than it needs to be (the old solid-navy chip + drop shadow outweighed the tool). */ .type-tab{ flex:0 0 auto!important; display:inline-flex!important;align-items:center!important;gap:6px!important; background:transparent!important;border:1px solid transparent!important; border-radius:8px!important;padding:0 10px!important;min-height:36px!important; font-size:12.5px!important;font-weight:500!important;color:var(--ws-ink-2)!important; white-space:nowrap;box-shadow:none!important;cursor:pointer; } .type-tab-ico{width:15px;height:15px;flex-shrink:0;display:inline-flex;color:inherit;opacity:.85;} .type-tab-ico svg{width:100%;height:100%;display:block;} .type-tab:hover{background:var(--ws-hover)!important;color:var(--ws-ink)!important;} .type-tab:focus-visible{outline:2px solid var(--accent)!important;outline-offset:1px;} .type-tab.active{ background:var(--accent-soft)!important;color:#1D4ED8!important; border-color:#CFDCFD!important;font-weight:600!important;box-shadow:none!important; } .type-tab.active .type-tab-ico{opacity:1;} .type-tab-more{ /* Deliberately a plain last flow item now, not position:sticky — sticky pinned it to the scroll viewport's right edge even at scrollLeft:0, which visually overlapped/covered whichever tab happened to sit there (PDF, at common desktop widths). A normal trailing item avoids that collision entirely and still satisfies "More sits at the end of the row". A hairline outline marks it as a menu trigger rather than a type. */ color:var(--ws-ink)!important;border-color:var(--ws-line)!important; font-weight:600!important;gap:7px!important;margin-left:4px; } .type-tab-more .caret{font-size:10px;opacity:.7;transition:transform .2s ease;} .type-toolbar.open .type-tab-more{background:var(--ws-hover)!important;border-color:var(--ws-line-strong)!important;} .type-toolbar.open .type-tab-more .caret{transform:rotate(180deg);} /* "More" dropdown — a true overlay, positioned absolutely under the toolbar. .studio is overflow:visible (see section 1) precisely so this can extend past the toolbar without being clipped or forced to push .controls/.preview down. 200ms open, matching the requested 180-220ms range; a touch faster closing feels snappier without being abrupt. */ .type-more-menu{ position:absolute;top:100%;left:28px;right:28px;z-index:40; margin-top:-1px; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 28px; background:#fff;border:1px solid var(--ws-line);border-radius:14px; box-shadow:0 16px 36px rgba(15,34,51,.16);padding:20px 22px; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-6px); transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility .2s; } .type-toolbar.open .type-more-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity .18s ease,transform .18s ease,visibility .18s; } .type-more-col{min-width:0;display:flex;flex-direction:column;gap:3px;} .type-more-col > b{ font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600; color:var(--ws-dim);margin-bottom:4px;padding-left:11px; } .type-more-item{ width:100%!important;justify-content:flex-start!important; min-height:37px!important;padding:0 11px!important;border-radius:8px!important; font-size:13px!important;font-weight:500!important;color:var(--ws-ink)!important; background:transparent!important;border-color:transparent!important; } .type-more-item:hover{background:var(--ws-surface)!important;border-color:var(--ws-line)!important;} /* --------------------------------------------- 5. inputs & accordions */ .controls .field > label,.cz-body .field > label,.range-row > label{ display:block;font-size:13.5px!important;font-weight:600!important; color:var(--ws-ink)!important;margin-bottom:7px!important;letter-spacing:0!important; } .controls input[type="text"],.controls input[type="url"],.controls input[type="email"], .controls input[type="tel"],.controls textarea,.controls select, .cz-body input[type="text"],.cz-body input[type="url"],.cz-body select,.res-select{ min-height:42px!important;padding:10px 13px!important;font-size:14px!important; border:1px solid var(--ws-line-strong)!important;border-radius:8px!important; background:#fff!important;color:var(--ws-ink)!important; transition:border-color .15s ease,box-shadow .15s ease; } .controls textarea{min-height:78px!important;} .controls input:hover,.controls select:hover,.controls textarea:hover, .cz-body input[type="text"]:hover,.cz-body select:hover,.res-select:hover{border-color:#B3BFCC!important;} .controls input:focus,.controls select:focus,.controls textarea:focus, .cz-body input:focus,.cz-body select:focus,.res-select:focus{ border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(44,95,246,.13)!important; } .controls input::placeholder,.controls textarea::placeholder{color:#8792A0!important;} .now-creating{font-size:13px!important;color:var(--ws-dim)!important;margin-bottom:16px!important;} .now-creating strong,.now-creating b{color:var(--ws-ink)!important;font-weight:600!important;} .controls .field{margin-bottom:16px!important;} /* native select popups must follow the light theme */ select,.res-select{ -webkit-appearance:none;appearance:none;color-scheme:light!important; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2347586B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:right 14px center!important; padding-right:42px!important; } select option{background:#fff!important;color:var(--ws-ink)!important;} /* Belt-and-suspenders for the print-resolution dropdown specifically: frame.css (the original dark theme) still carries `.res-select option{background:#111318}` with no !important. The rules above already beat it on importance, but native