/* ========================================================================== Tryaiphoto — editorial redesign Implements "Tryaiphoto Redesign.dc.html" (Claude Design project 55de6bef). Authored as plain CSS with custom properties rather than Tailwind utilities: public/assets/tailwind.css is committed pre-built and there is no build script in package.json, so new utility classes would have no rules behind them. Loaded after tailwind.css so these declarations win. ========================================================================== */ :root { /* Grounds — warm near-black, not blue-black */ --ta-canvas: #0d0c0a; --ta-page: #14120f; --ta-well: #100e0b; --ta-card: #1b1814; --ta-card-alt: #17150f; --ta-card-accent: #1c1810; --ta-inset: #171410; --ta-chip: #242018; /* Gold accent */ --ta-gold: #c9a962; --ta-gold-hi: #e0c584; --ta-on-gold: #171410; /* Ink */ --ta-ink: #ede8dd; --ta-ink-2: #d8d2c3; --ta-ink-3: #c5bda9; --ta-ink-4: #b5af9f; --ta-muted: #a89f8d; --ta-dim: #8d8677; --ta-dimmer: #7d7768; /* Rules */ --ta-line: #242118; --ta-line-2: #2b2822; --ta-line-3: #3a362c; --ta-line-gold: #35301f; --ta-line-dash: #4a4434; /* Semantic */ --ta-yes: #8fae7f; --ta-no: #b0705f; /* Type */ --ta-display: "Newsreader", ui-serif, Georgia, serif; --ta-sans: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Shape */ --ta-r-sm: 3px; --ta-r-md: 4px; --ta-r-lg: 6px; --ta-r-xl: 8px; /* Elevation */ --ta-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); --ta-shadow-img: 0 24px 48px rgba(0, 0, 0, 0.45); /* Rhythm */ --ta-gutter: 56px; --ta-max: 1440px; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body.ta { margin: 0; /* Forced: several pages carry a colour utility on itself (404 has bg-slate-900), and every rule in redesign-compat.css is scoped as a descendant of body.ta, so it cannot reach the body element. The page ground is never meant to vary. */ background: var(--ta-canvas) !important; color: var(--ta-ink); font-family: var(--ta-sans); font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ta a { color: var(--ta-gold); text-decoration: none; transition: color 0.18s ease; } body.ta a:hover { color: var(--ta-gold-hi); } /* The shell holds the page ground so the canvas colour shows at the edges only on very wide viewports, matching the mock's framed board. */ .ta-shell { max-width: var(--ta-max); margin: 0 auto; background: var(--ta-page); border-left: 1px solid var(--ta-line-2); border-right: 1px solid var(--ta-line-2); box-shadow: var(--ta-shadow); } .ta-pad { padding-left: var(--ta-gutter); padding-right: var(--ta-gutter); } .ta-rule-t { border-top: 1px solid var(--ta-line); } .ta-rule-b { border-bottom: 1px solid var(--ta-line); } /* -------------------------------------------------------------------------- Type -------------------------------------------------------------------------- */ .ta-display { font-family: var(--ta-display); font-weight: 400; letter-spacing: -0.01em; margin: 0; } .ta-h1 { font-family: var(--ta-display); font-size: 64px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; margin: 0; } .ta-h2 { font-family: var(--ta-display); font-size: 38px; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; margin: 0; } .ta-h3 { font-family: var(--ta-display); font-size: 32px; line-height: 1.2; font-weight: 400; margin: 0; } .ta-h4 { font-family: var(--ta-display); font-size: 24px; line-height: 1.25; font-weight: 400; margin: 0; } .ta-eyebrow { font-size: 12px; letter-spacing: 0.22em; color: var(--ta-gold); text-transform: uppercase; } .ta-label { font-size: 11px; letter-spacing: 0.18em; color: var(--ta-dimmer); text-transform: uppercase; } .ta-label--gold { color: var(--ta-gold); } .ta-lede { font-size: 17px; line-height: 1.65; color: var(--ta-muted); text-wrap: pretty; margin: 0; } .ta-body { font-size: 14px; line-height: 1.6; color: var(--ta-muted); margin: 0; } .ta-meta { font-size: 13px; color: var(--ta-dimmer); } /* Wordmark — the period is always gold */ .ta-wordmark { font-family: var(--ta-display); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--ta-ink); } .ta-wordmark:hover { color: var(--ta-ink); } .ta-wordmark i, .ta-wordmark .ta-dot { color: var(--ta-gold); font-style: normal; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .ta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ta-sans); font-size: 15px; font-weight: 600; line-height: 1; padding: 15px 30px; border-radius: var(--ta-r-sm); border: 1px solid transparent; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; text-align: center; } .ta-btn--gold { background: var(--ta-gold); color: var(--ta-on-gold); } .ta-btn--gold:hover { background: var(--ta-gold-hi); color: var(--ta-on-gold); } .ta-btn--ghost { background: transparent; border-color: var(--ta-line-3); color: var(--ta-ink-2); font-weight: 400; padding: 14px 26px; } .ta-btn--ghost:hover { border-color: var(--ta-gold); color: var(--ta-ink); } .ta-btn--sm { font-size: 14px; padding: 11px 22px; } .ta-btn--block { display: flex; width: 100%; padding: 14px 20px; font-size: 14px; } .ta-btn:disabled, .ta-btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Inline "keep going" link with the arrow the mock uses */ .ta-more { font-size: 14px; color: var(--ta-gold); display: inline-block; } /* Badges */ .ta-badge { display: inline-block; background: var(--ta-gold); color: var(--ta-on-gold); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 5px 10px; border-radius: var(--ta-r-sm); text-transform: uppercase; } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .ta-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--ta-gutter); border-bottom: 1px solid var(--ta-line); background: var(--ta-page); } .ta-nav__links { display: flex; gap: 36px; font-size: 14px; } .ta-nav__links a { color: var(--ta-ink-4); } .ta-nav__links a:hover { color: var(--ta-ink); } .ta-nav__actions { display: flex; gap: 20px; align-items: center; } .ta-nav__signin { font-size: 14px; color: var(--ta-ink-4); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--ta-sans); } .ta-nav__signin:hover { color: var(--ta-ink); } .ta-nav__toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 6px; cursor: pointer; } .ta-nav__toggle span { width: 20px; height: 2px; background: var(--ta-ink-4); display: block; } /* Credits pill in the flow header */ .ta-credits { font-size: 13px; color: var(--ta-dimmer); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .ta-hero { display: grid; grid-template-columns: 1fr 620px; gap: 80px; padding: 96px var(--ta-gutter) 88px; align-items: center; } .ta-hero__eyebrow { margin-bottom: 24px; } .ta-hero__lede { margin-top: 26px; max-width: 440px; } .ta-hero__cta { display: flex; gap: 14px; margin-top: 38px; align-items: center; flex-wrap: wrap; } .ta-hero__assurances { display: flex; gap: 10px; margin-top: 30px; font-size: 13px; color: var(--ta-dimmer); align-items: center; flex-wrap: wrap; } .ta-hero__assurances .ta-sep { color: var(--ta-line-3); } /* Before / after pair. The AI frame is deliberately taller and lower-set. */ .ta-compare { display: flex; gap: 20px; align-items: flex-start; } .ta-compare__before { flex: 1; margin-top: 36px; } .ta-compare__after { flex: 1.15; } .ta-compare img { width: 100%; object-fit: cover; display: block; border-radius: var(--ta-r-md); } .ta-compare__before img { height: 380px; filter: saturate(0.85); } .ta-compare__after img { height: 440px; box-shadow: var(--ta-shadow-img); } .ta-compare figcaption { margin-top: 12px; } .ta-compare__tag { display: flex; align-items: center; gap: 10px; margin-top: 12px; } /* -------------------------------------------------------------------------- Proof bar -------------------------------------------------------------------------- */ .ta-proof { display: flex; justify-content: center; gap: 64px; padding: 26px var(--ta-gutter); border-top: 1px solid var(--ta-line); border-bottom: 1px solid var(--ta-line); font-size: 13px; color: var(--ta-dim); flex-wrap: wrap; text-align: center; } /* Use-case chooser (retained app control, restyled) */ .ta-usecases { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .ta-usecases .use-case.is-active, .ta-usecases .use-case.active { border-color: var(--ta-gold); color: var(--ta-ink); } /* -------------------------------------------------------------------------- Tracks — "What do you need photos for?" -------------------------------------------------------------------------- */ .ta-section { padding: 88px var(--ta-gutter); } .ta-section--tight { padding-top: 0; } .ta-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .ta-tracks { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; margin-top: 44px; } .ta-track { background: var(--ta-card); border: 1px solid var(--ta-line-2); border-radius: var(--ta-r-lg); overflow: hidden; position: relative; display: flex; flex-direction: column; transition: border-color 0.18s ease, transform 0.18s ease; } .ta-track:hover { border-color: var(--ta-line-gold); transform: translateY(-2px); } .ta-track--featured { border-color: var(--ta-line-gold); } .ta-track__badge { position: absolute; top: 16px; left: 16px; z-index: 1; } .ta-track img { width: 100%; height: 300px; object-fit: cover; display: block; } .ta-track__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .ta-track__body .ta-body { margin-top: 8px; } .ta-track__body .ta-more { margin-top: 16px; } /* Even-width track grids (styles & use cases) */ .ta-tracks--even { grid-template-columns: repeat(3, 1fr); } .ta-tracks--two { grid-template-columns: repeat(2, 1fr); } .ta-track--pad { padding: 24px; } .ta-track__img { width: 100%; height: auto; object-fit: contain; display: block; } .ta-track__body h3 + .ta-body, .ta-track__body .ta-h4 + .ta-body { margin-top: 8px; } /* Policy blocks injected by /api/product-policy */ .ta-terms { display: grid; gap: 16px; margin-top: 28px; text-align: left; } .ta-terms > * { background: var(--ta-card); border: 1px solid var(--ta-line-2); border-radius: var(--ta-r-lg); padding: 20px 22px; font-size: 14px; line-height: 1.6; color: var(--ta-muted); } .ta-terms strong, .ta-terms h3 { color: var(--ta-ink); font-weight: 500; } /* -------------------------------------------------------------------------- How it works -------------------------------------------------------------------------- */ .ta-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--ta-line); padding-top: 64px; } .ta-step__n { font-family: var(--ta-display); font-size: 44px; line-height: 1; color: var(--ta-gold); font-style: italic; } .ta-step__t { font-size: 17px; font-weight: 500; margin-top: 12px; color: var(--ta-ink); } .ta-step .ta-body { margin-top: 8px; } /* -------------------------------------------------------------------------- Styles strip -------------------------------------------------------------------------- */ .ta-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 36px; } .ta-strip__item img, .ta-strip__ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--ta-r-md); } /* Stand-in for the design's placeholders */ .ta-strip__ph { background: var(--ta-inset); border: 1px dashed var(--ta-line-dash); display: grid; place-items: center; color: var(--ta-dimmer); font-size: 12px; text-align: center; padding: 8px; } .ta-strip__cap { font-size: 13px; color: var(--ta-ink-4); margin-top: 10px; } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .ta-pricing { padding: 88px var(--ta-gutter); border-top: 1px solid var(--ta-line); background: var(--ta-well); } .ta-pricing__head { text-align: center; } .ta-pricing__head p { font-size: 15px; color: var(--ta-muted); margin: 12px 0 0; } .ta-plans { display: grid; grid-template-columns: repeat(3, 340px); gap: 24px; justify-content: center; margin-top: 52px; align-items: stretch; } .ta-plan { background: var(--ta-card-alt); border: 1px solid var(--ta-line-2); border-radius: var(--ta-r-lg); padding: 32px; display: flex; flex-direction: column; position: relative; } .ta-plan--featured { background: var(--ta-card-accent); border-color: var(--ta-gold); } .ta-plan__flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .ta-plan__name { font-size: 14px; font-weight: 500; color: var(--ta-ink-4); } .ta-plan--featured .ta-plan__name { color: var(--ta-gold); } .ta-plan__amount { font-family: var(--ta-display); font-size: 44px; line-height: 1.1; margin-top: 12px; color: var(--ta-ink); } .ta-plan__unit { font-size: 13px; color: var(--ta-dimmer); margin-top: 4px; } .ta-plan__features { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ta-ink-3); margin: 24px 0 0; padding: 0; list-style: none; flex: 1; } .ta-plan .ta-btn { margin-top: 28px; } .ta-pricing__foot { text-align: center; font-size: 13px; color: var(--ta-dimmer); margin-top: 28px; } /* -------------------------------------------------------------------------- FAQ — two column, questions flush right of a serif heading -------------------------------------------------------------------------- */ .ta-faq { padding: 88px var(--ta-gutter); display: grid; grid-template-columns: 380px 1fr; gap: 80px; border-top: 1px solid var(--ta-line); } .ta-faq__list { display: flex; flex-direction: column; } .ta-faq__item { padding: 22px 0; border-bottom: 1px solid var(--ta-line); } .ta-faq__item:last-child { border-bottom: 0; } .ta-faq__q { font-size: 16px; font-weight: 500; color: var(--ta-ink); cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ta-faq__q::-webkit-details-marker { display: none; } .ta-faq__q::after { content: "+"; color: var(--ta-gold); font-size: 18px; line-height: 1; flex: none; transition: transform 0.18s ease; } .ta-faq__item[open] .ta-faq__q::after { content: "–"; } .ta-faq__a { font-size: 14px; color: var(--ta-muted); line-height: 1.6; margin-top: 8px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .ta-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px var(--ta-gutter); border-top: 1px solid var(--ta-line); font-size: 13px; color: var(--ta-dimmer); flex-wrap: wrap; } .ta-footer__brand { font-family: var(--ta-display); font-size: 18px; color: var(--ta-ink-4); } .ta-footer__links { display: flex; gap: 28px; flex-wrap: wrap; } .ta-footer__links a { color: var(--ta-dimmer); } .ta-footer__links a:hover { color: var(--ta-gold); } /* -------------------------------------------------------------------------- Generate flow — stepper -------------------------------------------------------------------------- */ .ta-flow { border-top: 1px solid var(--ta-line); } .ta-stepper { display: flex; gap: 28px; align-items: center; font-size: 13px; justify-content: center; flex-wrap: wrap; padding: 18px var(--ta-gutter); border-bottom: 1px solid var(--ta-line); } .ta-stepper__step { display: flex; gap: 8px; align-items: center; color: var(--ta-dimmer); } .ta-stepper__step.is-active { color: var(--ta-ink); } .ta-stepper__dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ta-line-3); display: grid; place-items: center; font-size: 11px; flex: none; } .ta-stepper__step.is-active .ta-stepper__dot { background: var(--ta-gold); color: var(--ta-on-gold); border-color: var(--ta-gold); font-weight: 600; } .ta-stepper__step.is-done .ta-stepper__dot { border-color: var(--ta-gold); color: var(--ta-gold); background: transparent; } .ta-stepper__bar { width: 32px; height: 1px; background: var(--ta-line-3); } .ta-stepper__bar.is-done { background: var(--ta-gold); } /* Mobile progress bars (design 1c) */ .ta-progress { display: none; gap: 6px; padding: 14px 20px 0; } .ta-progress span { flex: 1; height: 3px; background: var(--ta-line-2); border-radius: 2px; } .ta-progress span.is-done { background: var(--ta-gold); } /* -------------------------------------------------------------------------- Generate flow — upload -------------------------------------------------------------------------- */ .ta-upload { display: grid; grid-template-columns: 1fr 300px; gap: 48px; padding: 56px var(--ta-gutter) 64px; } .ta-drop { border: 1.5px dashed var(--ta-line-dash); border-radius: var(--ta-r-xl); margin-top: 28px; padding: 72px 40px; text-align: center; background: var(--ta-inset); cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; } .ta-drop:hover, .ta-drop:focus-visible, .ta-drop.is-dragover { border-color: var(--ta-gold); background: var(--ta-chip); } .ta-drop__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ta-chip); margin: 0 auto; display: grid; place-items: center; color: var(--ta-gold); font-size: 22px; } .ta-drop__title { font-size: 16px; margin-top: 20px; color: var(--ta-ink); } .ta-drop__hint { font-size: 13px; color: var(--ta-dimmer); margin-top: 10px; } .ta-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 13px; color: var(--ta-muted); cursor: pointer; } .ta-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ta-gold); flex: none; } .ta-tips { border-left: 1px solid var(--ta-line); padding-left: 36px; } .ta-tips__list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ta-muted); line-height: 1.55; } .ta-tips__list li { display: flex; gap: 10px; } .ta-tips__yes { color: var(--ta-yes); flex: none; } .ta-tips__no { color: var(--ta-no); flex: none; } /* -------------------------------------------------------------------------- Generate flow — style picker -------------------------------------------------------------------------- */ .ta-picker { display: grid; grid-template-columns: 220px 1fr; gap: 44px; padding: 44px var(--ta-gutter) 0; } .ta-picker__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--ta-r-lg); margin-top: 14px; display: block; } .ta-picker__cats { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; font-size: 13px; } .ta-picker__cat { color: var(--ta-dimmer); border-left: 2px solid transparent; padding-left: 10px; background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font-family: var(--ta-sans); font-size: 13px; } .ta-picker__cat.is-active { color: var(--ta-ink); border-left-color: var(--ta-gold); } .ta-picker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } /* The existing app JS toggles .style-option / .active, so the selected treatment is bound to that class rather than a new one. */ .ta-picker__grid .style-option { position: relative; border: 2px solid transparent; border-radius: var(--ta-r-xl); padding: 6px; background: none; cursor: pointer; transition: border-color 0.18s ease; } .ta-picker__grid .style-option:hover { border-color: var(--ta-line-3); } .ta-picker__grid .style-option.active { border-color: var(--ta-gold); } .ta-picker__grid .style-option img, .ta-picker__grid .style-option .style-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ta-r-md); display: block; } .ta-picker__grid .style-option span { display: block; font-size: 13px; padding: 10px 6px 6px; color: var(--ta-muted); } .ta-picker__grid .style-option.active span { color: var(--ta-ink); } .ta-picker__grid .style-option.active::after { content: "\2713"; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--ta-gold); color: var(--ta-on-gold); display: grid; place-items: center; font-size: 12px; font-weight: 600; z-index: 1; } /* Full style picker (all categories) */ .ta-stylepicker { padding: 44px var(--ta-gutter) 0; } .ta-stylegroups { display: flex; flex-direction: column; gap: 48px; margin-top: 32px; } .ta-stylegroup__h { font-family: var(--ta-display); font-size: 24px; font-weight: 400; color: var(--ta-ink); margin: 0 0 4px; } .ta-stylegroup__h i { color: var(--ta-gold); font-size: 16px; margin-right: 8px; } .ta-picker__grid--4 { grid-template-columns: repeat(4, 1fr); } .ta-flowbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; padding: 20px var(--ta-gutter); border-top: 1px solid var(--ta-line); background: var(--ta-well); flex-wrap: wrap; } /* -------------------------------------------------------------------------- Generate flow — preview and unlock -------------------------------------------------------------------------- */ .ta-preview { display: grid; grid-template-columns: 1fr 320px; gap: 48px; padding: 44px var(--ta-gutter) 56px; } .ta-preview__pair { display: flex; gap: 20px; margin-top: 24px; } .ta-preview__pair > * { flex: 1; } .ta-preview__pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--ta-r-lg); display: block; } .ta-preview__orig img { filter: saturate(0.85); } .ta-shot { position: relative; } .ta-shot__mark { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: var(--ta-r-lg); pointer-events: none; } .ta-shot__mark span { font-family: var(--ta-sans); font-size: 34px; font-weight: 600; color: rgba(255, 255, 255, 0.32); transform: rotate(-24deg); letter-spacing: 0.3em; white-space: nowrap; } .ta-shot__flag { position: absolute; top: 12px; left: 12px; background: rgba(20, 18, 15, 0.85); color: var(--ta-gold); font-size: 11px; letter-spacing: 0.1em; padding: 5px 10px; border-radius: var(--ta-r-sm); } .ta-preview__shot { flex: 1; } /* HD render sits on top of the watermarked one and is revealed by unlocking */ .ta-shot__hd { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--ta-r-lg); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .ta-shot[data-locked="false"] .ta-shot__hd { opacity: 1; } .ta-shot[data-locked="false"] .ta-shot__mark, .ta-shot[data-locked="false"] .ta-shot__flag { display: none; } .ta-shot[data-locked="true"] #resultsBlurredPreview { filter: blur(1px); } .ta-spinner { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; background: var(--ta-inset); border-radius: var(--ta-r-lg); color: var(--ta-gold); font-size: 26px; z-index: 3; } /* Inline button that reads as a link (dropzone "browse files", "try another") */ .ta-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ta-gold); cursor: pointer; } .ta-linkbtn:hover { color: var(--ta-gold-hi); } .ta-unlock { background: var(--ta-card-accent); border: 1px solid var(--ta-line-gold); border-radius: var(--ta-r-xl); padding: 28px; } .ta-unlock__title { font-family: var(--ta-display); font-size: 30px; line-height: 1.2; margin-top: 14px; } .ta-unlock__list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ta-muted); margin: 18px 0 0; padding: 0; list-style: none; } .ta-unlock > .ta-btn { margin-top: 24px; line-height: 1.35; } .ta-unlock__note { text-align: center; font-size: 12px; color: var(--ta-dimmer); margin-top: 12px; } .ta-retry { border: 1px solid var(--ta-line-2); border-radius: var(--ta-r-xl); padding: 18px 22px; margin-top: 16px; font-size: 13px; color: var(--ta-muted); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .ta-finenote { font-size: 12px; color: var(--ta-dimmer); margin-top: 16px; line-height: 1.6; } /* -------------------------------------------------------------------------- Responsive — design 1c -------------------------------------------------------------------------- */ @media (max-width: 1100px) { :root { --ta-gutter: 32px; } .ta-hero { grid-template-columns: 1fr; gap: 48px; padding: 64px var(--ta-gutter) 64px; } .ta-hero__lede { max-width: none; } .ta-tracks, .ta-tracks--even { grid-template-columns: 1fr 1fr; } .ta-strip { grid-template-columns: repeat(3, 1fr); } .ta-plans { grid-template-columns: repeat(2, minmax(0, 340px)); } .ta-faq { grid-template-columns: 1fr; gap: 32px; } .ta-upload, .ta-preview { grid-template-columns: 1fr; gap: 32px; } .ta-tips { border-left: 0; border-top: 1px solid var(--ta-line); padding-left: 0; padding-top: 28px; } .ta-picker { grid-template-columns: 1fr; gap: 28px; } .ta-picker__grid--4 { grid-template-columns: repeat(3, 1fr); } .ta-nav__links { display: none; } .ta-nav__toggle { display: flex; } /* Mobile nav is wordmark + menu only (design 1c); the hero CTA already carries "Upload a photo", so the duplicate in the bar just wraps. */ .ta-nav #stickyCTABtn { display: none; } /* Hamburger disclosure — the links are hidden above, so without this the menu button would be inert and mobile would lose navigation entirely. */ .ta-nav { flex-wrap: wrap; } .ta-nav__links.is-open { display: flex; flex-direction: column; gap: 0; flex-basis: 100%; order: 3; margin-top: 14px; border-top: 1px solid var(--ta-line); } .ta-nav__links.is-open a { padding: 14px 2px; border-bottom: 1px solid var(--ta-line); font-size: 15px; } .ta-nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .ta-nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); } .ta-nav__toggle span { transition: transform 0.18s ease; } } @media (max-width: 760px) { :root { --ta-gutter: 20px; } .ta-shell { border-left: 0; border-right: 0; } .ta-h1 { font-size: 36px; line-height: 1.08; } .ta-h2 { font-size: 28px; } .ta-h3 { font-size: 26px; } .ta-h4 { font-size: 21px; } .ta-lede { font-size: 14px; line-height: 1.6; } .ta-hero { padding: 32px var(--ta-gutter) 40px; gap: 28px; } .ta-hero__cta .ta-btn { width: 100%; } .ta-compare { gap: 12px; } .ta-compare__before { margin-top: 20px; } .ta-compare__before img { height: 190px; } .ta-compare__after img { height: 220px; } .ta-compare .ta-label { font-size: 10px; letter-spacing: 0.16em; } /* Style name would sit beside the AI HEADSHOT label and overflow */ .ta-compare__tag .ta-meta { display: none; } .ta-nav { padding: 16px var(--ta-gutter); } .ta-nav__signin { font-size: 13px; white-space: nowrap; } .ta-wordmark { font-size: 20px; } .ta-hero__assurances { gap: 8px; } .ta-proof { gap: 8px 20px; padding: 18px var(--ta-gutter); font-size: 12px; } .ta-section, .ta-pricing, .ta-faq { padding: 48px var(--ta-gutter); } .ta-tracks, .ta-tracks--even, .ta-tracks--two, .ta-steps { grid-template-columns: 1fr; } .ta-steps { padding-top: 40px; gap: 32px; } .ta-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ta-plans { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; } /* Mobile flow: swap the desktop stepper for the 3-bar progress meter */ .ta-stepper { gap: 12px; padding: 14px var(--ta-gutter); } .ta-stepper__label { display: none; } .ta-stepper__bar { width: 16px; } .ta-progress { display: flex; } .ta-upload { padding: 28px var(--ta-gutter) 40px; } .ta-drop { padding: 40px 20px; } .ta-picker { padding: 22px var(--ta-gutter) 0; } .ta-picker__grid, .ta-picker__grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; } .ta-stylepicker { padding: 22px var(--ta-gutter) 0; } .ta-stylegroups { gap: 32px; } .ta-stylegroup__h { font-size: 20px; } .ta-flowbar { padding: 16px var(--ta-gutter); flex-direction: column; align-items: stretch; text-align: center; } .ta-preview { padding: 22px var(--ta-gutter) 40px; } .ta-shot__mark span { font-size: 26px; } /* Unlock collapses to the compact bar from the mobile mock */ .ta-unlock { padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ta-unlock__title { font-size: 20px; margin-top: 0; } .ta-unlock__list, .ta-unlock .ta-eyebrow { display: none; } .ta-unlock .ta-btn { margin-top: 0; width: auto; flex: none; padding: 11px 18px; font-size: 13px; } .ta-unlock__note { display: none; } .ta-footer { flex-direction: column; align-items: flex-start; gap: 16px; } } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ta *, body.ta *::before, body.ta *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Keyboard focus — gold ring, never removed */ body.ta :focus-visible { outline: 2px solid var(--ta-gold); outline-offset: 2px; border-radius: 2px; } /* -------------------------------------------------------------------------- Utility precedence Components in this file set `display`, which out-ranks Tailwind's .hidden at equal specificity and would leak panes the app means to keep closed (#previewSection is `hidden ta-preview`, #downloadBtn is `hidden ta-btn`). This was originally written as a blanket `body.ta .hidden { display: none !important }`. That also beat Tailwind's *responsive* utilities — .md\:flex and .lg\:flex live in media queries at lower specificity — so every `hidden md:flex` / `hidden md:block` element stayed hidden at all widths, which silently removed the header navigation, the hero social proof, the #stats band and the gallery's before-images on /headshot-creator. Scoped to this file's own components instead. The compound selector already out-ranks the single-class component rules, so no !important is needed and Tailwind's utilities cascade normally. -------------------------------------------------------------------------- */ body.ta .hidden.ta-btn, body.ta .hidden.ta-preview, body.ta .hidden.ta-spinner, body.ta .hidden.ta-stepper, body.ta .hidden.ta-flowbar, body.ta .hidden.ta-progress, body.ta .hidden.ta-unlock, body.ta .hidden.ta-retry, body.ta .hidden.ta-upload, body.ta .hidden.ta-picker, body.ta .hidden.ta-preview__pair, body.ta .hidden.ta-hero, body.ta .hidden.ta-tracks, body.ta .hidden.ta-plans, body.ta .hidden.ta-nav { display: none; } /* ========================================================================== Site-wide bridge index.html was rebuilt against the .ta-* components above. The other ~84 pages keep their own markup, so this section carries the two things that make a page read as redesigned rather than merely recoloured: the display typeface on headings, and the gold accent replacing each old theme's gradient text. Declarations are forced because every page defines these in an inline