/* Icon-only action dock that overlaps the bottom of the resume preview on mobile. */ .resume-card-preview-actions { display: none; } /* Standard skip-to-content pattern: off-screen until keyboard-focused, then pinned to the top so keyboard/screen-reader users can bypass the header/nav on every page. */ .skip-to-content { position: absolute; top: -100px; left: 1rem; z-index: 10000; padding: 0.75rem 1.25rem; background: #fff; color: var(--ink, #0f1219); font-weight: 700; border: 2px solid var(--news-ink, #1f2937); border-radius: 4px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12); text-decoration: none; transition: top 0.15s ease; } .skip-to-content:focus { top: 1rem; } :root { --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-display: 'DM Serif Display', Georgia, serif; --ink: #0f1219; --ink-muted: #374151; --ink-light: #4b5563; /* Brand accent (match landing CTAs + wizard) */ --accent: rgb(71, 70, 68); --accent-hover: #5a5856; --accent-soft: rgba(71, 70, 68, 0.10); --paper: #faf9f7; --paper-warm: #f5f3f0; --border: #e2dfdb; --border-strong: #c9c4be; /* Print / newspaper tokens (shared with job board) */ --news-ink: #111111; --news-muted: #4a4a4a; --news-rule: #1a1a1a; --news-paper: #f5f2ea; --news-paper-contrast: #faf8f3; --news-fold: #e8e4d9; } html { /* `clip` (not `hidden`) prevents horizontal overflow WITHOUT turning into a scroll container — `hidden` forces overflow-y:auto, which breaks the sticky header (it would scroll away, so the mobile nav opened off-screen). */ overflow-x: clip; /* Reserve scrollbar gutter so column widths (and container-query-derived heights) do not jump when accordion/step height crosses overflow. */ scrollbar-gutter: stable; /* Prevents iOS Safari from inflating text and blowing flex/grid layouts (DevTools often keeps 16px). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; position: relative; background: var(--news-paper); background-image: linear-gradient(180deg, var(--news-paper-contrast) 0%, var(--news-paper) 28%, var(--news-paper) 100%); /* fixed backgrounds are unreliable on iOS / Chrome Android; desktop-only avoids repaint/layout bugs on real devices. */ background-attachment: scroll; transition: opacity 180ms ease; } @media (min-width: 1024px) { body { background-attachment: fixed; } } /* Dashboard/profile/jobs/builder no longer have their own background design — they now inherit the exact one the landing page uses (.landing-newspaper's base gradient + .landing-bg-motion's animated image/sweep/dot-grid layers, same keyframes). Painted on body (not on
, which is a capped/padded "news-shell" here, not full-bleed like landing) so it spans the full viewport width with no seam at the news-shell's max-width edge on wide screens — fixed positioning keeps it viewport-relative rather than tracking content height. */ body:has(.dashboard-surface), body:has(.jb-page), body:has(.builder-scope.builder-newspaper) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(247, 243, 236, 0.22) 36%, rgba(255, 255, 255, 0.26) 100%), linear-gradient(180deg, var(--news-paper-contrast) 0%, var(--news-paper) 32%, var(--news-paper) 100%); } body:has(.dashboard-surface)::before, body:has(.jb-page)::before, body:has(.builder-scope.builder-newspaper)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.72; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(247, 243, 236, 0.16)), url('/images/landing-connected-bg-cover.avif') top center / cover no-repeat, var(--news-paper); filter: saturate(0.98) contrast(0.98) brightness(1.04); animation: landing-bg-image-drift 26s var(--landing-ease) infinite alternate; } body:has(.dashboard-surface)::after, body:has(.jb-page)::after, body:has(.builder-scope.builder-newspaper)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(39, 74, 93, 0.13) 0 1px, transparent 1.5px), linear-gradient(90deg, rgba(15, 18, 25, 0.035) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 18, 25, 0.028) 1px, transparent 1px); background-size: 38px 38px, 104px 104px, 104px 104px; opacity: 0.34; animation: landing-bg-grid-drift 30s linear infinite; } @media (prefers-reduced-motion: reduce) { body:has(.dashboard-surface)::before, body:has(.dashboard-surface)::after, body:has(.jb-page)::before, body:has(.jb-page)::after, body:has(.builder-scope.builder-newspaper)::before, body:has(.builder-scope.builder-newspaper)::after { animation: none; } } html.js-page-transition body { opacity: 0; } html.js-page-transition body.page-ready { opacity: 1; } body.page-leaving { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { body { transition: none; } html.js-page-transition body, html.js-page-transition body.page-ready, body.page-leaving { opacity: 1 !important; } } /* Light newsprint ruling */ body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 23px, rgba(26, 26, 26, 0.045) 24px ); pointer-events: none; z-index: 0; } /* position:fixed + full-screen layers often glitch on mobile WebKit; anchor to body height instead. */ @media (max-width: 1023px) { body::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100vh; min-height: 100dvh; } } /* Column flex + min height: avoids a tall empty band below the footer when main is short (e.g. dashboard). */ #app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Template carousel auto-scroll */ @keyframes carousel-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .carousel-track { animation: carousel-scroll 40s linear infinite; } .carousel-track:hover { animation-play-state: paused; } @keyframes carousel-scroll-third { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } } .carousel-track-slow { animation: carousel-scroll-third 55s linear infinite; } .carousel-track-slow:hover { animation-play-state: paused; } .landing-template-carousel-track { animation: carousel-scroll-third 48s linear infinite; } .landing-template-carousel-track:hover { animation-play-state: paused; } .landing-template-card { width: clamp(320px, 29vw, 390px); flex: 0 0 auto; } .landing-template-card.template-modal-card { cursor: default; } /* Form controls — warm paper + ink; sharp square frames, #1a1a1a border (matches --news-rule) */ #app input:not([type="range"]):not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(.sr-only):not(.news-modal-input):not(.border-red-100), #app select, #app textarea:not(.news-modal-input) { background-color: var(--paper); color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; border-radius: 0 !important; border-width: 1px; border-style: solid; border-color: #1a1a1a !important; } /* Placeholders: explicit color + no opacity stacking (Safari/WebKit often hid these with opacity + inherited color). */ #app input:not([type="range"]):not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sr-only):not(.news-modal-input):not(.border-red-100)::placeholder, #app textarea:not(.news-modal-input)::placeholder { color: #6b7280 !important; opacity: 1 !important; } #app input:not([type="range"]):not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sr-only):not(.news-modal-input):not(.border-red-100)::-webkit-input-placeholder, #app textarea:not(.news-modal-input)::-webkit-input-placeholder { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; opacity: 1 !important; } #app input:not([type="range"]):not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sr-only):not(.news-modal-input):not(.border-red-100)::-moz-placeholder, #app textarea:not(.news-modal-input)::-moz-placeholder { color: #6b7280 !important; opacity: 1 !important; } #app input:not([type="range"]):not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.sr-only):not(.news-modal-input):not(.border-red-100):focus, #app select:focus, #app textarea:not(.news-modal-input):focus { border-color: #1a1a1a !important; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } #app input[type="color"].color-picker-input { border-radius: 0 !important; border-color: #1a1a1a !important; } /* ── Sitewide masthead & landing (newspaper family) ── */ .app-header-newspaper { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 243, 236, 0.86)), rgba(255, 255, 255, 0.86); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); /* Notch / Dynamic Island: keep masthead content in the safe area (viewport-fit=cover). */ padding-top: env(safe-area-inset-top, 0px); } .app-header-newspaper.is-language-open { z-index: 2147483647 !important; overflow: visible; } /* Builder: wizard steps as a second row inside the sticky top navbar (mobile) */ .app-header-steps { border-top: 1px solid rgba(26, 26, 26, 0.12); } /* Break out of .landing-wide-inner's side padding/margin so the scroll strip gets the full viewport width — every pixel matters here since step labels already compete for space and get clipped at the edges when scrolled. */ .app-header-steps.w-full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .app-header-steps-scroll { padding: 0.5rem 0 0.55rem; scrollbar-width: none; } .app-header-steps.w-full .app-header-steps-scroll { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } .app-header-steps-scroll::-webkit-scrollbar { display: none; height: 0; } /* Builder: wizard steps inline in the navbar row (desktop) — single row, scrolls if wide */ .app-header-steps--inline { border-top: 0; align-self: center; overflow: hidden; } .app-header-steps--inline .app-header-steps-scroll { padding: 0; overflow-x: auto; overflow-y: hidden; } .app-header-steps--inline .app-header-steps-scroll > div { flex-wrap: nowrap !important; justify-content: flex-start !important; } .app-header-steps--inline .wizard-step-btn { min-width: 0; max-width: min(10rem, 16vw); } .app-header-steps--inline .wizard-step-btn span { min-width: 0; } /* Responsive placement (md:block / md:hidden aren't in the static Tailwind build): inline steps show in the navbar row on md+, second-row steps show on mobile. */ @media (min-width: 768px) { .app-header-steps--inline { display: block; } .app-header-steps:not(.app-header-steps--inline) { display: none; } } /* ===== Mobile navigation overlay (hamburger → full-width sheet under header) ===== */ .mobile-nav-backdrop { position: fixed; top: calc(3.75rem + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; width: 100dvw; height: auto; background: rgba(15, 18, 25, 0.30); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 40; } .mobile-nav-sheet { position: fixed; top: calc(3.75rem + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 45; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 236, 0.98)); border-top: 0; border-bottom: 1px solid rgba(26, 26, 26, 0.16); box-shadow: 0 16px 30px rgba(15, 18, 25, 0.14); max-height: calc(100dvh - 3.5rem); overflow-y: auto; padding: 0.7rem; -webkit-overflow-scrolling: touch; } .mobile-nav-backdrop--builder, .mobile-nav-sheet--builder { top: calc(6.9rem + env(safe-area-inset-top, 0px)); } .mobile-nav-sheet--builder { max-height: calc(100dvh - 6.9rem - env(safe-area-inset-top, 0px)); } .mobile-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 52px; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 750; color: var(--news-ink); background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 8px; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .mobile-nav-row:hover, .mobile-nav-row:active { background: #ffffff; border-color: rgba(26, 26, 26, 0.18); transform: translateY(-1px); } .mobile-nav-row--danger { color: #dc2626; } .mobile-nav-row--cta { width: calc(100% - 2rem); margin: 0.4rem 1rem 0.15rem; justify-content: center; color: var(--news-paper); background: var(--news-ink); border: 2px solid var(--news-rule); border-radius: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12); } .mobile-nav-chevron { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--news-muted); transition: transform 0.2s ease; } .mobile-nav-row--expand.is-open .mobile-nav-chevron { transform: rotate(180deg); } .mobile-nav-submenu { background: var(--news-paper); border-top: 1px solid rgba(26, 26, 26, 0.06); border-bottom: 1px solid rgba(26, 26, 26, 0.06); } .mobile-nav-subrow { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 46px; padding: 0.7rem 1.25rem 0.7rem 3rem; font-size: 0.95rem; font-weight: 500; color: var(--news-ink); background: transparent; border: 0; text-align: left; cursor: pointer; transition: background 0.15s ease; } .mobile-nav-subrow:hover, .mobile-nav-subrow:active { background: rgba(26, 26, 26, 0.05); } .mobile-nav-subrow.is-active { color: var(--accent); font-weight: 700; } .mobile-nav-profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; } .mobile-nav-divider { height: 1px; background: rgba(26, 26, 26, 0.12); margin: 0.4rem 0; } /* Animations: backdrop fade, sheet slide-down + fade, submenu fade */ .mobile-nav-fade-enter-active, .mobile-nav-fade-leave-active { transition: opacity 0.2s ease; } .mobile-nav-fade-enter-from, .mobile-nav-fade-leave-to { opacity: 0; } .mobile-nav-slide-enter-active, .mobile-nav-slide-leave-active { transition: opacity 0.22s ease, transform 0.22s ease; } .mobile-nav-slide-enter-from, .mobile-nav-slide-leave-to { opacity: 0; transform: translateY(-10px); } .mobile-nav-sub-enter-active, .mobile-nav-sub-leave-active { transition: opacity 0.18s ease; } .mobile-nav-sub-enter-from, .mobile-nav-sub-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { .mobile-nav-slide-enter-active, .mobile-nav-slide-leave-active, .mobile-nav-fade-enter-active, .mobile-nav-fade-leave-active { transition: none; } } .app-header-newspaper .language-dropdown { z-index: 2147483647 !important; border-radius: 16px; border: 1px solid rgba(15, 18, 25, 0.10); box-shadow: 0 22px 50px rgba(15, 18, 25, 0.14); } .app-header-newspaper .language-dropdown[popover] { inset: auto; margin: 0; padding: 0.5rem 0; overflow: hidden; } .app-header-newspaper .language-dropdown[popover]::backdrop { background: transparent; } .header-control-btn { box-sizing: border-box; min-height: 42px; height: 42px; } /* Account avatar button: no square outline box — just the round avatar. */ .app-header-newspaper #account-settings-open-btn { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 0.25rem !important; transition: transform 0.16s ease, opacity 0.16s ease; } .app-header-newspaper #account-settings-open-btn:hover { transform: translateY(-1px); opacity: 0.85; } .app-header-newspaper #account-settings-open-btn:focus-visible { outline: 2px solid var(--news-ink); outline-offset: 2px; border-radius: 999px; } /* Same footprint for language + Sign In (all breakpoints) */ /* Editorial ghost control (language switcher): sharp, hairline ink border. */ .app-header-newspaper .header-bar-ghost { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 42px; height: 42px; padding: 0 0.95rem; border: 1.5px solid rgba(15, 18, 25, 0.18) !important; border-radius: 3px !important; background: rgba(255, 255, 255, 0.72) !important; color: var(--news-ink) !important; box-shadow: none !important; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } /* Primary CTA (Sign In): sharp ink block with a hard offset shadow (brand press style). */ .app-header-newspaper .header-bar-solid { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; height: 42px; padding: 0 1.15rem !important; border: 2px solid var(--news-ink) !important; border-radius: 3px !important; background: var(--news-ink) !important; color: #fff !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.14) !important; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2 !important; transition: background-color 0.16s ease, transform 0.14s ease, box-shadow 0.14s ease; } .app-header-newspaper .header-bar-ghost:hover { background: #ffffff !important; border-color: var(--news-ink) !important; color: var(--news-ink) !important; transform: translateY(-1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08) !important; } .app-header-newspaper .header-bar-solid:hover { background: #111827 !important; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.16) !important; } .app-header-newspaper .header-bar-solid:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.14) !important; } /* Phones / small tablets: hide duplicate “Build” in masthead (overlap on Chrome Android / zoomed viewports). */ @media (max-width: 1023px) { .app-header-newspaper .header-bar-solid.header-cta-hide-narrow { display: none !important; } } .app-header-newspaper nav a { white-space: nowrap; } /* Editorial masthead nav: clean text links with an ink underline indicator. */ .app-header-nav-links { gap: 0.35rem !important; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .app-nav-link { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.78rem; border-radius: 999px; border: 1px solid transparent; color: var(--news-muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; letter-spacing: 0.004em; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .app-nav-link::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; background: var(--news-ink); border-radius: 999px; transform: translateX(-50%) scale(0); transform-origin: center; transition: transform 0.2s ease, background 0.18s ease; } .app-nav-link:hover { color: var(--news-ink); background: rgba(26, 26, 26, 0.035); } .app-nav-link:hover::after { transform: translateX(-50%) scale(1); } .app-nav-link.is-active { color: var(--news-ink); font-weight: 700; background: rgba(26, 26, 26, 0.055); border-color: rgba(26, 26, 26, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62); } .app-nav-link.is-active::after { background: var(--accent); transform: translateX(-50%) scale(1); } .app-mobile-nav-link { color: #4b5563; text-decoration: none; border: 1px solid transparent; } .app-mobile-nav-link:hover { background: rgba(15, 18, 25, 0.045); color: var(--ink); } .app-mobile-nav-link.is-active { background: rgba(15, 18, 25, 0.045); border-color: rgba(15, 18, 25, 0.12); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); } .app-brand { position: relative; color: var(--ink); border-radius: 999px; padding: 0.42rem 0.74rem; transition: background-color 0.18s ease, transform 0.18s ease; } .app-brand:hover { background: rgba(15, 18, 25, 0.045); transform: translateY(-1px); } .builder-brand-split { padding-right: 0.42rem; } .builder-brand-home { display: inline-flex; align-items: center; padding: 0.12rem 0; border-radius: 999px; } .builder-brand-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 999px; color: var(--news-muted); transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .builder-brand-menu-toggle:hover { background: rgba(15, 18, 25, 0.07); color: var(--news-ink); transform: translateY(-1px); } .app-brand-word { position: relative; display: inline-flex; align-items: baseline; gap: 0.01em; color: var(--ink); font-size: 1.42rem; font-weight: 900; line-height: 1; letter-spacing: -0.015em; } .app-brand-word::before { content: ""; position: absolute; top: -0.28rem; left: 0.42em; width: 0.32rem; height: 0.32rem; border-radius: 999px; background: #0f766e; box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10); animation: app-brand-dot-orbit 3.2s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; } .app-brand-word::after { content: ""; position: absolute; left: 0.03em; right: 0.03em; bottom: -0.34rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--ink), #0f766e); transform: scaleX(0.52); transform-origin: left; opacity: 0.9; animation: app-brand-line-breathe 3.2s ease-in-out infinite; transition: transform 0.2s ease; } .app-brand-word span:first-child { color: #0f766e; animation: app-brand-i-pulse 3.2s ease-in-out infinite; } .app-brand-word span:last-child { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 42%, #0f766e 50%, var(--ink) 58%, var(--ink) 100%); background-size: 260% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: app-brand-letter-sheen 4.8s ease-in-out infinite; } .app-brand:hover .app-brand-word::after { transform: scaleX(1); } .app-brand:hover .app-brand-word::before { transform: translateY(-1px) scale(1.08); box-shadow: 0 0 0 6px rgba(15, 118, 110, 0.12); } @keyframes app-brand-dot-orbit { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; } 38% { transform: translate3d(0.28rem, -0.08rem, 0) scale(0.86); opacity: 0.72; } 64% { transform: translate3d(0.08rem, 0.08rem, 0) scale(1.12); opacity: 1; } } @keyframes app-brand-line-breathe { 0%, 100% { opacity: 0.82; filter: saturate(1); } 50% { opacity: 1; filter: saturate(1.35); } } @keyframes app-brand-i-pulse { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(1.45); } } @keyframes app-brand-letter-sheen { 0%, 44%, 100% { background-position: 0% 50%; } 56%, 62% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .app-brand-word::before, .app-brand-word::after, .app-brand-word span:first-child, .app-brand-word span:last-child { animation: none !important; } } .app-brand--mobile { padding: 0.38rem 0.62rem; } .app-brand--mobile .app-brand-word { font-size: 1.3rem; } .app-header-logo-mark { color: var(--news-ink); flex-shrink: 0; } .app-header-logo-mark svg { display: block; } .app-header-logo { display: inline-flex; align-items: center; gap: 0.08em; min-width: 0; max-width: 100%; letter-spacing: 0; } .app-header-logo-tie { display: inline-flex; align-items: center; justify-content: center; width: 0.95em; height: 1.35em; color: var(--ink); flex: 0 0 auto; transform: translateY(0.02em); } .app-header-logo-tie svg { display: block; width: 100%; height: 100%; } .app-header-logo-img { display: block; width: auto; height: 2.55rem; max-width: min(8.5rem, 100%); flex: 0 1 auto; } .app-header-logo-img--mobile { height: 2.35rem; max-width: min(7.75rem, 100%); } .policy-consent-control { position: relative; display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: start; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem; border: 1.5px solid var(--news-rule); border-radius: 2px; background: var(--news-paper); color: var(--news-muted); box-shadow: 2px 2px 0 rgba(47, 45, 41, 0.08); cursor: pointer; transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .policy-consent-control:hover { background: var(--news-paper-contrast); box-shadow: 3px 3px 0 rgba(47, 45, 41, 0.1); } .policy-consent-input { position: absolute; opacity: 0; pointer-events: none; } .policy-consent-box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; color: var(--news-paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .policy-consent-box::after { content: ""; width: 0.52rem; height: 0.32rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-0.04rem) scale(0); transform-origin: center; transition: transform 0.16s ease; } .policy-consent-input:checked + .policy-consent-box { background: var(--news-rule); border-color: var(--news-rule); } .policy-consent-input:checked + .policy-consent-box::after { transform: rotate(-45deg) translateY(-0.04rem) scale(1); } .policy-consent-input:focus-visible + .policy-consent-box { outline: 2px solid var(--accent); outline-offset: 3px; } .policy-consent-copy { min-width: 0; color: var(--news-muted); font-size: 0.75rem; line-height: 1.45; } .policy-consent-link { display: inline; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .policy-consent-link:hover { color: var(--news-ink); } /* Center nav via flex (flex-1 justify-center), never position:absolute — absolute nav overlapped the language control and right-side actions on md+ screens. */ .app-header-nav-links { flex-wrap: nowrap; } @media (max-width: 1023px) and (min-width: 768px) { .app-header-nav-links { gap: 0.75rem; } } /* Balanced header: nav stays viewport-centered on md+ even when left/right chrome width differs (landing vs dashboard). */ .app-header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; } /* span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--news-rule); border-radius: 2px; color: var(--news-ink); background: var(--news-paper); font-size: 0.78rem; font-weight: 900; line-height: 1; } .landing-trust-fact h3 { margin: 0; color: var(--news-ink); font-size: 0.9rem; font-weight: 900; line-height: 1.15; } .landing-trust-fact p { margin: 0.35rem 0 0; color: var(--news-muted); font-size: 0.78rem; line-height: 1.45; } /* ===== FAQ section (editorial accordion) ===== */ .landing-faq-section { position: relative; overflow: hidden; border-top: 0; background: linear-gradient(180deg, rgba(247, 243, 236, 0.18) 0%, rgba(255, 255, 255, 0.22) 48%, rgba(247, 243, 236, 0.28) 100%); } .landing-faq-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15, 18, 25, 0.035) 1px, transparent 1px), repeating-linear-gradient(180deg, transparent 0 13px, rgba(15, 18, 25, 0.025) 14px, transparent 15px), radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.42), transparent 42%); background-size: 78px 78px, auto, auto; z-index: 0; } .landing-faq-section .landing-wide-inner { position: relative; z-index: 1; } .landing-faq-section .landing-section-head { max-width: 860px; margin-inline: auto; padding-bottom: 1.2rem; border-bottom: 4px double var(--news-ink); } .landing-faq-list { max-width: 920px; margin: 2.25rem auto 0; display: flex; flex-direction: column; gap: 0; counter-reset: landing-faq; border: 2px solid var(--news-ink); border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 243, 236, 0.78)), var(--news-paper); box-shadow: 8px 8px 0 rgba(15, 18, 25, 0.08); } .landing-faq-item { position: relative; counter-increment: landing-faq; border: 0; border-bottom: 1.5px solid var(--news-rule); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; transition: background-color 0.18s ease; } .landing-faq-item:last-child { border-bottom: 0; } .landing-faq-item::before { content: counter(landing-faq, decimal-leading-zero); position: absolute; left: 1.1rem; top: 1.12rem; width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--news-ink); background: var(--news-paper-contrast); color: var(--news-ink); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; box-shadow: 2px 2px 0 rgba(15, 18, 25, 0.08); } .landing-faq-item.is-open { background: rgba(255, 255, 255, 0.44); box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08); } .landing-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.55rem; padding: 1rem 1.15rem 1rem 4.35rem; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(1.05rem, 1.3vw, 1.24rem); line-height: 1.18; font-weight: 900; color: var(--news-ink); } .landing-faq-q span { display: block; max-width: 42rem; } .landing-faq-icon { width: 2rem; height: 2rem; flex: 0 0 auto; padding: 0.42rem; border: 1.5px solid var(--news-ink); border-radius: 999px; color: var(--news-ink); background: var(--news-paper-contrast); box-shadow: 2px 2px 0 rgba(15, 18, 25, 0.08); transition: transform 0.2s ease; } .landing-faq-item.is-open .landing-faq-icon { transform: rotate(180deg); } .landing-faq-a { padding: 0 1.25rem 1.15rem 4.35rem; } .landing-faq-a p { margin: 0; color: var(--news-muted); max-width: 44rem; padding-top: 0.85rem; border-top: 1px solid rgba(15, 18, 25, 0.12); font-size: 0.98rem; line-height: 1.7; } @media (max-width: 560px) { .landing-faq-list { box-shadow: 4px 4px 0 rgba(15, 18, 25, 0.08); } .landing-faq-item::before { left: 0.85rem; top: 0.95rem; width: 2rem; height: 2rem; font-size: 0.66rem; } .landing-faq-q { min-height: 4rem; font-size: 0.98rem; padding: 0.9rem 0.85rem 0.9rem 3.55rem; } .landing-faq-icon { width: 1.75rem; height: 1.75rem; padding: 0.38rem; } .landing-faq-a { padding: 0 0.85rem 1rem 3.55rem; } } .landing-proof-section { position: relative; padding: 4.25rem 0 4.75rem; border-bottom: 1px solid var(--landing-line, rgba(15, 18, 25, 0.12)); background: linear-gradient(180deg, rgba(247, 243, 236, 0.30) 0%, rgba(255, 255, 255, 0.28) 100%); overflow: hidden; } .landing-proof-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.50), transparent 38%), linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.44)); z-index: 0; } .landing-proof-section .landing-wide-inner { position: relative; z-index: 1; } .landing-proof-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; margin-bottom: 2rem; padding-bottom: 1.6rem; } .landing-proof-head p { margin: 0; color: var(--news-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; } .landing-proof-head h2 { max-width: 40rem; margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.08; text-align: center; } .landing-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border: 0; background: transparent; box-shadow: none; } .landing-proof-card { border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06); padding: 24px; min-height: 190px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .landing-proof-card:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.09); } .landing-proof-kicker { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 18px; border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-ink); color: var(--news-paper); font-size: 12px; font-weight: 800; line-height: 1; } .landing-proof-card h3 { margin: 0 0 8px; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; } .landing-proof-card p { margin: 0; color: var(--news-muted); font-size: 0.9rem; line-height: 1.55; } @media (max-width: 900px) { .landing-trust-head { grid-template-columns: 1fr; gap: 0.5rem; align-items: start; } .landing-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-trust-grid--merged { margin-top: 0.9rem; padding-top: 0.9rem; } .landing-proof-head { align-items: start; flex-direction: column; } .landing-proof-head h2 { text-align: left; } .landing-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landing-proof-card { border-width: 1px; } } @media (max-width: 560px) { .landing-trust-section { padding: 2rem 0; } .landing-trust-head { padding-bottom: 0.8rem; } .landing-trust-head p { font-size: 0.68rem; letter-spacing: 0.1em; } .landing-trust-head h2 { font-size: 1.35rem; line-height: 1.12; } .landing-trust-grid { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.85rem; } .landing-trust-grid--merged { margin-top: 0.75rem; padding-top: 0.75rem; } .landing-trust-fact { align-items: center; padding: 0.7rem 0.8rem; border-radius: 9px; box-shadow: 0 10px 24px rgba(15, 18, 25, 0.06); } .landing-trust-fact > span { width: 1.15rem; height: 1.15rem; font-size: 0.68rem; } .landing-trust-fact h3 { font-size: 0.88rem; } .landing-trust-fact p { display: none; } .landing-proof-section { padding: 2.4rem 0 2.6rem; } .landing-proof-head { margin-bottom: 1.1rem; padding-bottom: 0.75rem; } .landing-proof-head p { font-size: 0.64rem; letter-spacing: 0.14em; } .landing-proof-head h2 { font-size: 1.35rem; } .landing-proof-grid { position: relative; grid-template-columns: 1fr; gap: 0; padding-left: 0.15rem; } .landing-proof-grid::before { content: ""; position: absolute; top: 0.85rem; bottom: 0.85rem; left: 1.05rem; width: 1px; background: var(--landing-line, rgba(26, 26, 26, 0.16)); } .landing-proof-card { position: relative; min-height: 0; padding: 0.55rem 0 0.75rem 2.65rem; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; } .landing-proof-card:hover { transform: none; box-shadow: none; background: transparent; } .landing-proof-kicker { position: absolute; left: 0; top: 0.55rem; width: 2.1rem; height: 2.1rem; margin: 0; font-size: 0.72rem; } .landing-proof-card h3 { margin-bottom: 0.25rem; font-size: 1rem; } .landing-proof-card p { font-size: 0.82rem; line-height: 1.42; } .landing-proof-card, .landing-proof-card:nth-child(2n), .landing-proof-card:nth-last-child(-n+2) { border: 0 !important; } } @media (prefers-reduced-motion: reduce) { .landing-newspaper .landing-stat-cell, .landing-newspaper .landing-stat-cell:hover, .landing-newspaper .newspaper-btn-solid, .landing-newspaper .newspaper-btn-solid:hover, .landing-newspaper .newspaper-btn-ghost, .landing-newspaper .newspaper-btn-ghost:hover, .landing-newspaper .landing-template-card, .landing-newspaper .landing-template-card:hover, .landing-hero-resume-card { transition: none !important; animation: none !important; transform: none !important; } .landing-hero-resume-card { opacity: 0; } .landing-hero-resume-card--0 { opacity: 1; transform: translate3d(-50%, -50%, 0) !important; } } .landing-newspaper .landing-template-carousel-wrap { border: 1px solid var(--landing-line, rgba(15, 18, 25, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 22px 58px rgba(15, 18, 25, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.75); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .landing-template-carousel-track { padding-left: clamp(2rem, 6vw, 5rem); padding-right: clamp(2rem, 6vw, 5rem); } /* Landing: full viewport width bands + readable wide inner column */ .landing-newspaper { --landing-accent: #1a1a1a; --landing-accent-2: #474644; --landing-accent-soft: rgba(26, 26, 26, 0.08); --landing-panel: var(--news-paper-contrast); --landing-panel-solid: var(--news-paper-contrast); --landing-line: rgba(26, 26, 26, 0.16); --landing-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08); --landing-shadow-soft: 4px 4px 0 rgba(0, 0, 0, 0.06); position: relative; isolation: isolate; width: 100%; overflow-x: hidden; color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(247, 243, 236, 0.22) 36%, rgba(255, 255, 255, 0.26) 100%), linear-gradient(180deg, var(--news-paper-contrast) 0%, var(--news-paper) 32%, var(--news-paper) 100%); } .landing-bg-motion { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0.72; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(247, 243, 236, 0.16)), url('/images/landing-connected-bg-cover.avif') top center / cover no-repeat, var(--news-paper); filter: saturate(0.98) contrast(0.98) brightness(1.04); animation: landing-bg-image-drift 26s var(--landing-ease) infinite alternate; } .landing-bg-motion::before, .landing-bg-motion::after, .landing-bg-motion__line, .landing-bg-motion__paper, .landing-bg-motion__dot { position: absolute; pointer-events: none; } .landing-bg-motion::before { content: ""; inset: -12%; background: linear-gradient(104deg, transparent 0%, rgba(39, 74, 93, 0.075) 46%, transparent 54%), linear-gradient(16deg, transparent 0%, rgba(47, 111, 104, 0.055) 52%, transparent 60%); opacity: 0.62; animation: landing-bg-print-sweep 18s linear infinite alternate; } .landing-bg-motion::after { content: ""; inset: 0; background-image: radial-gradient(circle, rgba(39, 74, 93, 0.13) 0 1px, transparent 1.5px), linear-gradient(90deg, rgba(15, 18, 25, 0.035) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 18, 25, 0.028) 1px, transparent 1px); background-size: 38px 38px, 104px 104px, 104px 104px; opacity: 0.34; animation: landing-bg-grid-drift 30s linear infinite; } .landing-bg-motion__line { width: min(48rem, 82vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 111, 104, 0.34), rgba(39, 74, 93, 0.10), transparent); transform-origin: center; } .landing-bg-motion__line--one { top: 13%; left: -12%; transform: rotate(-8deg); animation: landing-bg-line-one 22s var(--landing-ease) infinite alternate; } .landing-bg-motion__line--two { top: 50%; right: -14%; transform: rotate(7deg); animation: landing-bg-line-two 26s var(--landing-ease) -4s infinite alternate; } .landing-bg-motion__line--three { bottom: 13%; left: 8%; transform: rotate(-4deg); animation: landing-bg-line-three 28s var(--landing-ease) -8s infinite alternate; } .landing-bg-motion__paper { width: clamp(8rem, 18vw, 17rem); aspect-ratio: 0.78; border: 1px solid rgba(39, 74, 93, 0.12); background: linear-gradient(90deg, rgba(39, 74, 93, 0.15) 0 18%, transparent 18%), repeating-linear-gradient(180deg, transparent 0 15px, rgba(39, 74, 93, 0.11) 16px, transparent 17px), rgba(255, 253, 248, 0.50); box-shadow: 0 22px 54px rgba(15, 18, 25, 0.08); opacity: 0.28; filter: blur(0.15px); } .landing-bg-motion__paper--one { left: 7%; top: 22%; transform: rotate(-8deg); animation: landing-bg-paper-one 24s var(--landing-ease) infinite alternate; } .landing-bg-motion__paper--two { right: 8%; top: 45%; transform: rotate(6deg); animation: landing-bg-paper-two 27s var(--landing-ease) -5s infinite alternate; } .landing-bg-motion__paper--three { left: 18%; bottom: 9%; transform: rotate(-3deg); animation: landing-bg-paper-three 30s var(--landing-ease) -9s infinite alternate; } .landing-bg-motion__dot { width: 0.56rem; height: 0.56rem; border-radius: 999px; background: rgba(47, 111, 104, 0.36); box-shadow: 0 0 0 9px rgba(47, 111, 104, 0.07); } .landing-bg-motion__dot--one { top: 19%; left: 31%; animation: landing-bg-dot-float 13s var(--landing-ease) infinite alternate; } .landing-bg-motion__dot--two { top: 56%; right: 26%; animation: landing-bg-dot-float 15s var(--landing-ease) -4s infinite alternate; } .landing-bg-motion__dot--three { bottom: 19%; left: 54%; animation: landing-bg-dot-float 16s var(--landing-ease) -7s infinite alternate; } .landing-newspaper > :not(.landing-bg-motion) { position: relative; z-index: 1; } @keyframes landing-bg-image-drift { from { background-position: center top, center top, center; } to { background-position: center top, center 2.6rem, center; } } @keyframes landing-bg-print-sweep { from { transform: translate3d(-7%, 0, 0) rotate(0.001deg); } to { transform: translate3d(7%, 1.8%, 0) rotate(0.001deg); } } @keyframes landing-bg-grid-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 38px 22px, 104px 0, 0 104px; } } @keyframes landing-bg-line-one { from { transform: translate3d(-3%, 0, 0) rotate(-8deg); opacity: 0.46; } to { transform: translate3d(8%, 24px, 0) rotate(-5deg); opacity: 0.68; } } @keyframes landing-bg-line-two { from { transform: translate3d(4%, 0, 0) rotate(7deg); opacity: 0.36; } to { transform: translate3d(-9%, -20px, 0) rotate(4deg); opacity: 0.60; } } @keyframes landing-bg-line-three { from { transform: translate3d(-2%, 0, 0) rotate(-4deg); opacity: 0.34; } to { transform: translate3d(7%, -18px, 0) rotate(-2deg); opacity: 0.56; } } @keyframes landing-bg-paper-one { from { transform: translate3d(0, 0, 0) rotate(-8deg); } to { transform: translate3d(20px, -18px, 0) rotate(-5deg); } } @keyframes landing-bg-paper-two { from { transform: translate3d(0, 0, 0) rotate(6deg); } to { transform: translate3d(-22px, 20px, 0) rotate(3deg); } } @keyframes landing-bg-paper-three { from { transform: translate3d(0, 0, 0) rotate(-3deg); } to { transform: translate3d(18px, -14px, 0) rotate(-1deg); } } @keyframes landing-bg-dot-float { from { transform: translate3d(0, 0, 0) scale(0.94); opacity: 0.38; } to { transform: translate3d(22px, -18px, 0) scale(1.05); opacity: 0.68; } } .landing-newspaper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15, 18, 25, 0.035) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 18, 25, 0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 42rem); } .newspaper-main:has(.dashboard-surface), .newspaper-main:has(.get-started-flow), .newspaper-main:has(.builder-scope.builder-newspaper) { position: relative; overflow: hidden; border-radius: 0; background: radial-gradient(circle at 50% -8rem, rgba(255, 255, 255, 0.95) 0 12rem, rgba(255, 255, 255, 0.32) 23rem, transparent 38rem), linear-gradient(135deg, rgba(246, 242, 234, 0.78), rgba(255, 255, 255, 0.84) 48%, rgba(238, 243, 240, 0.62)); } .newspaper-main:has(.dashboard-surface) { /* Main itself is a capped/padded "news-shell", not full-bleed, so painting the gradient here (rather than on body, see body:has(.dashboard-surface) above) would only cover the inner content column and break at its edges on wide viewports. Left transparent on purpose — body now supplies the one continuous background. */ background: transparent; } .newspaper-main:has(.get-started-flow), .newspaper-main:has(.builder-scope.builder-newspaper) { background: radial-gradient(circle at 22% 8%, rgba(47, 111, 104, 0.16), transparent 18rem), radial-gradient(circle at 86% 14%, rgba(159, 117, 62, 0.16), transparent 20rem), linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.24) 16rem, transparent 34rem), linear-gradient(135deg, #ece4d8 0%, #fbfaf7 46%, #e1ebe7 100%); } .newspaper-main:has(.get-started-flow)::before, .newspaper-main:has(.builder-scope.builder-newspaper)::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, rgba(26, 26, 26, 0.035) 1px, transparent 1px), linear-gradient(180deg, rgba(26, 26, 26, 0.028) 1px, transparent 1px), radial-gradient(circle at 18% 12%, rgba(47, 111, 104, 0.10), transparent 18rem), radial-gradient(circle at 84% 18%, rgba(188, 141, 74, 0.12), transparent 20rem); background-size: 56px 56px, 56px 56px, auto, auto; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.32) 34rem, transparent 62rem); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.32) 34rem, transparent 62rem); } .newspaper-main:has(.get-started-flow)::after, .newspaper-main:has(.builder-scope.builder-newspaper)::after { content: ""; position: absolute; inset: 4.25rem max(1rem, 5vw) auto auto; width: min(42vw, 34rem); height: min(42vw, 34rem); pointer-events: none; z-index: 0; opacity: 0.45; background: linear-gradient(135deg, transparent 0 18%, rgba(26, 26, 26, 0.05) 18% 18.35%, transparent 18.35%), linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.12)); border: 1px solid rgba(26, 26, 26, 0.055); transform: rotate(-8deg); box-shadow: -34px 38px 0 -18px rgba(255, 255, 255, 0.34), -34px 38px 0 -17px rgba(26, 26, 26, 0.035); } .newspaper-main:has(.get-started-flow)::before, .newspaper-main:has(.builder-scope.builder-newspaper)::before { background: linear-gradient(90deg, rgba(26, 26, 26, 0.055) 1px, transparent 1px), linear-gradient(180deg, rgba(26, 26, 26, 0.044) 1px, transparent 1px), linear-gradient(118deg, rgba(47, 111, 104, 0.14), rgba(47, 111, 104, 0.018) 35%, transparent 58%), linear-gradient(242deg, rgba(159, 117, 62, 0.14), rgba(159, 117, 62, 0.018) 38%, transparent 62%); background-size: 44px 44px, 44px 44px, auto, auto; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 42rem, transparent 72rem); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 42rem, transparent 72rem); } .newspaper-main:has(.get-started-flow)::after, .newspaper-main:has(.builder-scope.builder-newspaper)::after { opacity: 0.78; background: linear-gradient(135deg, transparent 0 18%, rgba(26, 26, 26, 0.11) 18% 18.22%, transparent 18.22%), repeating-linear-gradient(180deg, rgba(26, 26, 26, 0.055) 0 1px, transparent 1px 18px), linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18)); border-color: rgba(26, 26, 26, 0.09); box-shadow: -34px 38px 0 -18px rgba(255, 255, 255, 0.52), -34px 38px 0 -17px rgba(26, 26, 26, 0.07); } /* .get-started-flow only ever renders nested inside .dashboard-surface (never standalone — it's the "0 resumes yet" empty state shown in place of the resume grid), but the shared rule above groups it with the builder-editor route, so it was still repainting
's own capped/padded gradient + grid texture + torn-paper accent on top of body's edge-to-edge landing background — reintroducing the exact gutter seam already fixed for the rest of dashboard. Builder (wizard + freeform editor) now inherits the same landing background as dashboard/jobs (see body:has(...) above), so it gets the same treatment here for the same reason. */ .newspaper-main:has(.get-started-flow), .newspaper-main:has(.builder-scope.builder-newspaper) { background: transparent; } .newspaper-main:has(.get-started-flow)::before, .newspaper-main:has(.get-started-flow)::after, .newspaper-main:has(.builder-scope.builder-newspaper)::before, .newspaper-main:has(.builder-scope.builder-newspaper)::after { content: none; } /* Dashboard surface: no background of its own — see body:has(.dashboard-surface) below, which paints the same animated background as the landing page instead. */ .dashboard-surface { position: relative; isolation: isolate; padding-top: 0.25rem; } .dashboard-surface > * { position: relative; z-index: 1; } .dashboard-bottom-stats { margin: 2rem 0 2rem; } /* Mobile shows the same summary badges up top instead (dashboard-top-stats-mobile, right before the workflow panel) — desktop's bottom placement is untouched. */ .dashboard-top-stats-mobile { display: none; } @media (max-width: 767px) { .dashboard-top-stats-mobile { display: flex; } .dashboard-bottom-stats { display: none; } } .newspaper-main:has(.builder-scope.builder-newspaper) > .builder-scope, .newspaper-main:has(.get-started-flow) > .dashboard-surface { position: relative; z-index: 1; } .landing-newspaper .landing-hero { border-bottom: 0 !important; } .landing-newspaper .landing-hero-surface { background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(247, 243, 236, 0.20) 100%); } .landing-newspaper .landing-hero > .absolute[style*="repeating-linear-gradient"] { opacity: 0 !important; } .landing-newspaper #templates { position: relative; overflow: hidden; border-top: 0 !important; border-bottom: 0 !important; background: linear-gradient(180deg, rgba(247, 243, 236, 0.30) 0%, rgba(255, 255, 255, 0.26) 100%) !important; } .landing-newspaper #templates::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.38), transparent 38%), linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.34)); z-index: 0; } .landing-newspaper #templates .landing-wide-inner, .landing-newspaper #templates .landing-template-carousel-wrap { position: relative; z-index: 1; } .landing-final-cta-section:not(.landing-final-cta-section--merged) { border-top: 0 !important; background: linear-gradient(180deg, rgba(247, 243, 236, 0.26), rgba(255, 255, 255, 0.34)) !important; } .landing-newspaper .landing-kicker { border: 1.5px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); color: var(--news-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06); } .landing-newspaper .landing-kicker span { border-radius: 999px; background: var(--landing-accent) !important; } .landing-newspaper .landing-hero-title { max-width: 12ch; font-family: var(--font-sans) !important; font-weight: 900; letter-spacing: 0 !important; text-shadow: none !important; } .landing-hero-resume-stack { position: relative; min-width: 0; width: 100%; min-height: clamp(420px, 52vw, 620px); display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; } .landing-hero-stack-stage { position: relative; width: min(100%, 620px); height: clamp(400px, 48vw, 600px); transform: translateZ(0); } .landing-hero-resume-card { position: absolute; left: 50%; top: 50%; width: clamp(230px, 30vw, 330px); aspect-ratio: 210 / 297; transform-origin: center; will-change: transform, opacity, filter; animation: landing-hero-resume-stack 16s cubic-bezier(0.45, 0, 0.2, 1) infinite; } .landing-hero-stack-stage:hover .landing-hero-resume-card { animation-play-state: paused; } .landing-hero-resume-card--0 { animation-delay: 0s; } .landing-hero-resume-card--1 { animation-delay: -3.2s; } .landing-hero-resume-card--2 { animation-delay: -6.4s; } .landing-hero-resume-card--3 { animation-delay: -9.6s; } .landing-hero-resume-card--4 { animation-delay: -12.8s; } .landing-hero-resume-card .landing-hero-template-preview { position: relative; width: 100%; height: 100%; max-height: none; min-height: 0; margin: 0; padding: 8%; border: 1px solid rgba(26, 26, 26, 0.16); border-radius: 5px; box-shadow: 0 18px 44px rgba(26, 26, 26, 0.16), 0 2px 8px rgba(26, 26, 26, 0.08); overflow: hidden; font-size: clamp(5px, 0.58vw, 7px); transform: translateZ(0); } .landing-hero-resume-card .landing-hero-template-preview::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--stack-accent); z-index: 2; } .landing-hero-resume-card > p { position: absolute; left: 50%; bottom: -2.1rem; transform: translateX(-50%); margin: 0; min-width: max-content; padding: 0.4rem 0.75rem; border: 1.5px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); color: var(--news-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08); } .landing-hero-resume-card .template-preview-mini .name { font-size: 1.35em; line-height: 1.05; } .landing-hero-resume-card .template-preview-mini .contact, .landing-hero-resume-card .template-preview-mini .experience-item, .landing-hero-resume-card .template-preview-mini .education-item, .landing-hero-resume-card .template-preview-mini .mini-copy, .landing-hero-resume-card .template-preview-mini .mini-summary, .landing-hero-resume-card .template-preview-mini .mini-bullets { font-size: 0.82em; line-height: 1.45; } .landing-hero-resume-card .template-preview-mini .section-title { font-size: 0.9em; line-height: 1.2; margin-top: 0.8em; } .landing-hero-resume-card .template-preview-mini .mini-skill-row { gap: 0.45em; } .landing-hero-resume-card .template-preview-mini .mini-skill-row em, .landing-hero-resume-card .template-preview-mini .mini-saas-pills span { min-height: 1.8em; } .landing-hero-resume-card .template-preview-mini.professional-preview:has(.mini-pro-side) { position: relative; padding: 0 !important; } .landing-hero-resume-card .template-preview-mini .mini-pro-side, .landing-hero-resume-card .template-preview-mini .mini-pro-main { min-height: 0; overflow: hidden; } .landing-hero-resume-card .template-preview-mini .mini-pro-side { padding: 17% 11% 10%; } .landing-hero-resume-card .template-preview-mini .mini-pro-main { padding: 11% 10%; } .landing-hero-resume-card .template-preview-mini .mini-avatar, .landing-hero-resume-card .template-preview-mini .mini-resume-photo { flex: 0 0 auto; } @keyframes landing-hero-resume-stack { 0%, 15% { z-index: 5; opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) translateX(0) translateY(0) scale(1) rotate(0deg); } 20%, 35% { z-index: 4; opacity: 0.72; filter: blur(0.3px); transform: translate3d(-50%, -50%, 0) translateX(23%) translateY(-4%) scale(0.91) rotate(4deg); } 40%, 55% { z-index: 2; opacity: 0.35; filter: blur(1.2px); transform: translate3d(-50%, -50%, 0) translateX(36%) translateY(-13%) scale(0.8) rotate(8deg); } 60%, 75% { z-index: 1; opacity: 0.28; filter: blur(1.4px); transform: translate3d(-50%, -50%, 0) translateX(-36%) translateY(12%) scale(0.78) rotate(-8deg); } 80%, 95% { z-index: 3; opacity: 0.68; filter: blur(0.4px); transform: translate3d(-50%, -50%, 0) translateX(-23%) translateY(5%) scale(0.9) rotate(-4deg); } 100% { z-index: 5; opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) translateX(0) translateY(0) scale(1) rotate(0deg); } } @media (min-width: 1024px) { .landing-hero-inner { padding-top: 4.5rem !important; padding-bottom: 4rem !important; } .landing-product-mockup .wizard-steps-bar > div { min-width: 0 !important; width: 100% !important; justify-content: flex-start !important; overflow: hidden; } .landing-product-mockup .wizard-step-btn { min-width: 0 !important; flex: 1 1 0 !important; max-width: 7rem; } .landing-product-mockup .wizard-step-connector { flex: 0 0 0.45rem !important; width: 0.45rem !important; min-width: 0 !important; } } @media (max-width: 1023px) { .landing-hero-resume-stack { min-height: clamp(360px, 74vw, 520px); } .landing-hero-stack-stage { width: min(100%, 560px); height: clamp(340px, 72vw, 500px); } .landing-hero-resume-card { width: clamp(210px, 48vw, 300px); } } @media (max-width: 560px) { .landing-hero-resume-stack { min-height: 300px; margin-top: 0.5rem; } .landing-hero-stack-stage { height: 295px; } .landing-hero-resume-card { width: min(56vw, 210px); animation-name: landing-hero-resume-stack-mobile; } .landing-hero-resume-card p { display: none; } .landing-hero-resume-card .landing-hero-template-preview { border-radius: 14px; box-shadow: 0 22px 52px rgba(15, 18, 25, 0.16); font-size: 4.8px; padding: 7%; } .landing-hero-resume-card .template-preview-mini.professional-preview:has(.mini-pro-side) { grid-template-columns: 34% minmax(0, 1fr); } .landing-hero-resume-card .template-preview-mini .mini-pro-side { padding: 18% 9% 9%; } .landing-hero-resume-card .template-preview-mini .mini-pro-main { padding: 11% 9%; } } @keyframes landing-hero-resume-stack-mobile { 0%, 15% { z-index: 5; opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) translateX(0) translateY(0) scale(1) rotate(0deg); } 20%, 35% { z-index: 4; opacity: 0.72; filter: blur(0.2px); transform: translate3d(-50%, -50%, 0) translateX(22%) translateY(-3%) scale(0.91) rotate(3deg); } 40%, 55% { z-index: 2; opacity: 0.34; filter: blur(0.9px); transform: translate3d(-50%, -50%, 0) translateX(30%) translateY(-10%) scale(0.8) rotate(5deg); } 60%, 75% { z-index: 1; opacity: 0.28; filter: blur(1px); transform: translate3d(-50%, -50%, 0) translateX(-30%) translateY(10%) scale(0.78) rotate(-5deg); } 80%, 95% { z-index: 3; opacity: 0.68; filter: blur(0.2px); transform: translate3d(-50%, -50%, 0) translateX(-22%) translateY(4%) scale(0.9) rotate(-3deg); } 100% { z-index: 5; opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) translateX(0) translateY(0) scale(1) rotate(0deg); } } /* ===== Hero marquee: two columns of resume previews scrolling in opposite directions, looping endlessly (replaces the rotating stack). ===== */ .landing-hero-marquee { position: relative; width: 100%; height: clamp(440px, 52vw, 640px); min-height: 0; display: flex; align-items: flex-start; justify-content: center; gap: clamp(0.7rem, 1.5vw, 1.25rem); overflow: hidden; isolation: isolate; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .landing-hero-marquee-col { display: flex; flex-direction: column; width: clamp(182px, 20vw, 250px); flex: 0 0 auto; will-change: transform; backface-visibility: hidden; } .landing-hero-marquee-col--up { animation: hero-marquee-up 38s linear infinite; } .landing-hero-marquee-col--down { animation: hero-marquee-down 38s linear infinite; } .landing-hero-marquee:hover .landing-hero-marquee-col { animation-play-state: paused; } @keyframes hero-marquee-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } @keyframes hero-marquee-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } /* Cards flow vertically inside each column (override the old absolute stack). Trailing margin on every card (incl. the last) keeps the -50% loop seamless. */ .landing-hero-marquee .landing-hero-resume-card { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; container-type: size; background: #fff; border: 1px solid rgba(26, 26, 26, 0.16); border-radius: 5px; box-shadow: 0 18px 44px rgba(26, 26, 26, 0.16), 0 2px 8px rgba(26, 26, 26, 0.08); margin: 0 0 clamp(0.7rem, 1.5vw, 1.25rem); transform: none; filter: none; opacity: 1; animation: none; flex: 0 0 auto; will-change: auto; } /* Each sample is laid out on a fixed A4 reference page, then uniformly downscaled into the card via a container-query scale. This guarantees correct A4 dimensions for every template regardless of content amount. !important is needed to beat the per-template :has() layout rules (professional/elegant/corporate) that otherwise force position:relative. */ .landing-hero-marquee .landing-hero-template-preview { position: absolute !important; top: 0 !important; left: 0 !important; width: 360px !important; height: 509.14px !important; /* 360 * 297 / 210 (A4) */ max-height: none !important; aspect-ratio: auto !important; transform-origin: top left; transform: scale(calc(100cqw / 360px)); font-size: 8.5px; border: 0; border-radius: 0; box-shadow: none; } .landing-hero-marquee .landing-hero-resume-card > p { display: none; } /* Larger, more prominent name heading on the fake resume cards (overrides the small per-template mini sizes; keeps each template's name colour/style). */ .landing-hero-marquee .landing-hero-template-preview.template-preview-mini .name { font-size: 17px; line-height: 1.1; } /* Professional & SaaS carry the most content; shrink their body text a touch so the full resume fits the A4 page (the 17px name above is unaffected). */ .landing-hero-marquee .landing-hero-template-preview.template-preview-mini.professional-preview { font-size: 7.4px; } .landing-hero-marquee .landing-hero-template-preview.template-preview-mini.saas-preview { font-size: 6.9px; } /* SaaS marquee card: match the real template — a solid accent header band (white name/contact + photo, slanted bottom edge) over plain sections. */ .landing-hero-marquee .template-preview-mini.saas-preview { padding: 0 !important; } .landing-hero-marquee .template-preview-mini.saas-preview > :not(.header) { padding-left: 8%; padding-right: 8%; } .landing-hero-marquee .template-preview-mini.saas-preview .header, .landing-hero-marquee .template-preview-mini.saas-preview .header:has(.mini-resume-photo) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 9px; margin: 0 0 5% 0; padding: 9% 8% 12% 8%; background: var(--selected-color, #0f766e); border-bottom: none !important; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%); } .landing-hero-marquee .template-preview-mini.saas-preview .header:has(.mini-resume-photo) .mini-resume-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .landing-hero-marquee .template-preview-mini.saas-preview .name { grid-column: 1; grid-row: 1; color: #ffffff; } .landing-hero-marquee .template-preview-mini.saas-preview .contact { grid-column: 1; grid-row: 2; color: rgba(255, 255, 255, 0.88); } .landing-hero-marquee .template-preview-mini.saas-preview .mini-saas-card { margin: 0 0 6px 0; padding: 0; border: 0; background: transparent; box-shadow: none; } @media (max-width: 560px) { .landing-hero-marquee { height: clamp(380px, 96vw, 460px); gap: 0.6rem; } .landing-hero-marquee-col { width: clamp(150px, 45vw, 215px); } } @media (prefers-reduced-motion: reduce) { .landing-hero-marquee-col--up, .landing-hero-marquee-col--down { animation: none; } } .landing-hero-reassurance { margin-top: 0.85rem; color: var(--news-muted); font-size: 0.92rem; font-weight: 700; letter-spacing: 0; line-height: 1.45; } .landing-newspaper .landing-stat-cell { border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06); } .landing-newspaper .landing-stat-cell:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.09); } .landing-newspaper .newspaper-btn-solid { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-ink) !important; color: var(--news-paper) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12) !important; } .landing-newspaper .newspaper-btn-solid:hover { transform: translateY(-2px) !important; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15) !important; } .landing-newspaper .newspaper-btn-ghost { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; color: var(--ink) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; } .landing-newspaper .newspaper-btn-ghost:hover { transform: translateY(-2px) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.09) !important; background: var(--news-paper) !important; } .landing-product-mockup-card, .landing-newspaper .landing-product-mockup-card > div > div { border: 1px solid rgba(15, 18, 25, 0.13) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.88) !important; box-shadow: var(--landing-shadow) !important; backdrop-filter: blur(18px); overflow: hidden !important; } .landing-mockup-viewport { height: 620px; } .landing-newspaper .landing-product-mockup-card [class*="border-[var(--news-rule)]"], .landing-newspaper .landing-product-mockup-card [style*="border:1px solid var(--news-rule)"] { border-color: rgba(15, 18, 25, 0.13) !important; } .landing-newspaper .landing-product-mockup-card [class*="shadow-["] { box-shadow: 0 12px 30px rgba(15, 18, 25, 0.08) !important; } .landing-newspaper .landing-product-mockup-card [class*="rounded-[2px]"] { border-radius: 10px !important; } .landing-newspaper .landing-product-mockup > .absolute { opacity: 1 !important; background: radial-gradient(ellipse at 50% 0%, rgba(26, 26, 26, 0.08), transparent 62%) !important; } .landing-newspaper .landing-kicker { border: 1.5px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06); } .landing-trust-fact, .landing-proof-card { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .landing-trust-fact:hover, .landing-proof-card:hover { transform: translateY(-2px) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.09) !important; } /* Carousel template cards: no frame — the template previews stand on their own. */ .landing-newspaper .landing-template-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: transform 0.18s ease; } .landing-newspaper .landing-template-card:hover { transform: translateY(-2px) !important; box-shadow: none !important; } .landing-trust-fact > span, .landing-proof-kicker { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-ink) !important; color: var(--news-paper) !important; box-shadow: none; } .landing-newspaper .landing-template-carousel-wrap { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .landing-newspaper #templates .landing-template-carousel-wrap { border: 0 !important; border-radius: 0 !important; max-width: min(118rem, calc(100% - 2rem)); margin-left: auto; margin-right: auto; padding-top: clamp(1rem, 2vw, 1.5rem) !important; padding-bottom: clamp(1.75rem, 3vw, 2.75rem) !important; overflow-y: visible !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; } .landing-newspaper #templates .landing-template-carousel-wrap::before, .landing-newspaper #templates .landing-template-carousel-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2.5rem, 8vw, 8rem); pointer-events: none; z-index: 2; } .landing-newspaper #templates .landing-template-carousel-wrap::before { left: 0; background: linear-gradient(90deg, var(--news-paper, #f5f2ea), rgba(245, 242, 234, 0)); } .landing-newspaper #templates .landing-template-carousel-wrap::after { right: 0; background: linear-gradient(270deg, var(--news-paper, #f5f2ea), rgba(245, 242, 234, 0)); } .landing-newspaper #templates .landing-template-carousel-track { gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; animation-duration: 62s; } .landing-newspaper #templates .landing-template-card { width: clamp(250px, 23vw, 330px); padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; transform: translateZ(0); } .landing-newspaper #templates .landing-template-card:hover { transform: translateY(-6px) !important; box-shadow: none !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini { min-height: clamp(350px, 37vw, 475px); margin-bottom: 0 !important; border-radius: 0; box-shadow: none; overflow: hidden; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--modern, .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--minimal, .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--elegant, .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas { padding: 8px 10px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-resume-photo, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-avatar { width: clamp(50px, 7em, 72px) !important; height: clamp(50px, 7em, 72px) !important; margin-bottom: 0.62em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--modern .header, .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--minimal .header, .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--corporate .header { gap: 0 10px !important; padding: 12px 10px 10px !important; margin: -8px -10px 8px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--elegant .header { min-height: 0 !important; padding: 10px 10px 8px !important; margin: -8px -10px 7px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas .header { gap: 0 10px !important; padding: 12px 10px 20px !important; margin: -8px -10px 8px !important; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%); } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side) { grid-template-columns: 31% minmax(0, 1fr); font-size: 5.05px; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-side { padding: 9px 6px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-main { padding: 10px 9px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-side-heading { margin: 0.45em 0 0.22em; padding-bottom: 0.16em; font-size: 0.78em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-side-text { margin: 0.12em 0; font-size: 0.72em; line-height: 1.12; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-summary, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-copy { margin: 0.18em 0; line-height: 1.12; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row { margin: 0.55em 0 0 0.8em; padding-left: 0.75em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-bullets { margin-top: 0.3em; line-height: 1.12; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-bullets li { margin-bottom: 0.1em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-skill-row { gap: 2px; margin-top: 0.38em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-skill-row em { min-height: 1.28em; padding: 0.08em 0.34em; font-size: 0.68em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-saas-card { padding: 0.42em 0.55em !important; margin-bottom: 0.38em !important; border-radius: 7px; } /* saas / modern / corporate carry the most sample content and overflow the A4-ratio card. Their preview content is em-relative to the mini font-size, so scale just these three down and tighten their vertical spacing until the whole resume is visible (the other templates already fit and are left untouched). */ .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview { line-height: 1.16 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview .section-title, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview .section-title, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .section-title { margin: 0.4em 0 0.18em !important; padding-bottom: 0.14em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview .section-block, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview .section-block, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .section-block { margin-bottom: 0.32em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview .experience-item, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview .experience-item, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .experience-item, .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview p, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview p, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview p { margin-bottom: 0.16em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview { font-size: 8px; } .landing-newspaper #templates .landing-template-card .template-preview-mini.minimal-preview { font-size: 7.7px; } .landing-newspaper #templates .landing-template-card .template-preview-mini.elegant-preview { font-size: 6.9px; } .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview { font-size: 8.1px; } .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview { font-size: 5.75px; } /* saas holds the most content; compact it hardest so the last bullets stay visible. */ .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview { line-height: 1.08 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .section-block { margin-bottom: 0.2em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .section-title { margin: 0.28em 0 0.12em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview .experience-item, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview p { margin-bottom: 0.1em !important; } @media (max-width: 640px) { .landing-newspaper #templates .landing-template-carousel-wrap { max-width: calc(100% - 1rem); border-radius: 18px !important; padding-bottom: 1.5rem !important; } .landing-newspaper #templates .landing-template-card { width: min(78vw, 280px); } .landing-newspaper #templates .landing-template-card .template-preview-mini { min-height: 372px; } } /* Landing mobile polish: keep the editorial/glass direction, but make the phone experience denser, calmer, and free of horizontal edge creep. */ @media (max-width: 767px) { .app-header-newspaper { background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 28px rgba(15, 18, 25, 0.08); } .app-header-bar { height: 3.75rem !important; /* Equal side tracks (min 0) so the auto center brand is truly centered on the viewport, regardless of how wide the menu vs. actions sides are. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; column-gap: 0.35rem; } .app-brand--mobile { padding-inline: 0.35rem; justify-self: center; width: auto; max-width: 100%; } .app-brand--mobile .app-brand-word { font-size: 1.18rem; } .app-brand-word::before { top: -0.22rem; width: 0.26rem; height: 0.26rem; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10); } .app-brand-word::after { bottom: -0.26rem; height: 2px; } .app-header-newspaper .header-bar-ghost, .app-header-newspaper .header-bar-solid { min-height: 38px; height: 38px; padding-inline: 0.72rem !important; font-size: 0.78rem !important; white-space: nowrap; } .app-header-newspaper .header-bar-solid { box-shadow: 0 8px 18px rgba(15, 18, 25, 0.13) !important; } .language-dropdown { position: fixed !important; left: max(0.75rem, env(safe-area-inset-left, 0px)) !important; right: max(0.75rem, env(safe-area-inset-right, 0px)) !important; top: calc(3.75rem + env(safe-area-inset-top, 0px)) !important; width: auto !important; max-height: min(70dvh, 27rem); overflow-y: auto; } @media (max-width: 430px) { .app-header-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; } .app-header-bar > .col-start-3 { gap: 0.4rem !important; } .app-header-bar > .col-start-3 > .relative:not(.language-menu-wrap), .app-header-bar > .col-start-3 .header-bar-ghost:not(.header-control-btn) { display: none !important; } .app-header-bar > .col-start-3 .language-menu-wrap, .app-header-bar > .col-start-3 .language-menu-wrap .header-bar-ghost { display: inline-flex !important; flex: 0 0 auto; } .app-header-bar > .col-start-3 .language-menu-wrap .header-bar-ghost { min-width: 2.65rem; padding-inline: 0.55rem !important; } .app-header-bar > .col-start-3 .header-bar-solid { min-height: 2.5rem !important; height: 2.5rem !important; padding-inline: 0.9rem !important; font-size: 0.78rem !important; line-height: 1.05 !important; } } /* Tiny phones (≤355px, e.g. iPhone SE 1st-gen): a wide right-side CTA can't fit beside a dead-centered brand, so fall back to the flexible-middle layout here — brand stays clear of the buttons instead of colliding. */ @media (max-width: 355px) { .app-header-bar { grid-template-columns: auto minmax(2.5rem, 1fr) auto !important; } .app-brand--mobile { justify-self: stretch; width: 100%; } } .landing-page.landing-newspaper { margin-top: -1.25rem !important; margin-bottom: -1.25rem !important; } .landing-newspaper { background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(247, 243, 236, 0.30) 44%, rgba(255, 255, 255, 0.34) 100%), linear-gradient(180deg, var(--news-paper-contrast) 0%, var(--news-paper) 100%); } .landing-newspaper::before { background-size: 44px 44px; opacity: 0.7; } .landing-hero-inner { padding-top: 3.25rem !important; padding-bottom: 2.75rem !important; } .landing-hero-inner > .grid { gap: 1.75rem !important; } .landing-newspaper .landing-kicker { max-width: 100%; padding: 0.45rem 0.65rem !important; gap: 0.45rem; font-size: 0.62rem; line-height: 1.25; letter-spacing: 0.18em; } .landing-newspaper .landing-hero-title { max-width: 10.8ch; margin-top: 1.1rem !important; font-size: clamp(2.2rem, 13vw, 3.2rem) !important; line-height: 0.98 !important; } .landing-newspaper .landing-hero-title + p { margin-top: 1rem !important; max-width: 31rem; font-size: 1rem !important; line-height: 1.55 !important; } .landing-hero-inner .newspaper-btn-solid, .landing-hero-inner .newspaper-btn-ghost, .landing-final-cta-section .newspaper-btn-solid { width: 100%; min-height: 48px; padding: 0.85rem 1rem !important; justify-content: center; } .landing-hero-reassurance { margin-top: 0.7rem; font-size: 0.82rem; text-align: center; } .landing-hero-marquee { height: clamp(300px, 86vw, 380px); margin-top: 0.25rem; gap: 0.5rem; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); } .landing-hero-marquee-col { width: clamp(132px, 43vw, 178px); } .landing-hero-marquee .landing-hero-resume-card { margin-bottom: 0.55rem; border-radius: 12px; box-shadow: 0 16px 36px rgba(15, 18, 25, 0.14); } .landing-hero-marquee .landing-hero-template-preview { font-size: 7.8px; } .landing-proof-section, .landing-templates-section, .landing-faq-section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .landing-proof-head, .landing-section-head { text-align: left !important; } .landing-section-head h2, .landing-proof-head h2 { font-size: clamp(2rem, 9vw, 2.55rem) !important; line-height: 1.02 !important; } .landing-newspaper .landing-section-head h2::after { margin-left: 0; margin-right: auto; } .landing-proof-head p, .landing-section-head p:first-child { letter-spacing: 0.2em !important; line-height: 1.45; } .landing-proof-grid { margin-top: 1.6rem; } .landing-proof-card, .landing-trust-fact { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06) !important; } .landing-proof-card h3 { font-size: 1.02rem; line-height: 1.22; } .landing-proof-card p, .landing-trust-fact p { font-size: 0.9rem; line-height: 1.55; } .landing-trust-grid--merged { grid-template-columns: 1fr !important; gap: 0.75rem !important; margin-top: 0.8rem; } .landing-trust-fact { padding: 0.9rem !important; align-items: flex-start; } .landing-newspaper #templates .landing-section-head { padding-inline: 0.25rem; } .landing-newspaper #templates .landing-section-head p { margin-left: 0 !important; margin-right: 0 !important; font-size: 0.95rem; line-height: 1.55; } .landing-newspaper #templates .landing-template-carousel-wrap { max-width: calc(100% - 0.75rem); margin-top: 1.6rem !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; border-radius: 16px !important; box-shadow: 0 18px 44px rgba(15, 18, 25, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; } .landing-newspaper #templates .landing-template-carousel-wrap::before, .landing-newspaper #templates .landing-template-carousel-wrap::after { width: 1.75rem; } .landing-newspaper #templates .landing-template-carousel-track { gap: 0.8rem; padding-left: 0.95rem; padding-right: 0.95rem; animation-duration: 74s; } .landing-newspaper #templates .landing-template-card { width: min(74vw, 250px); padding: 0 !important; border-radius: 0 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini { min-height: clamp(292px, 94vw, 372px); border-radius: 0; } .landing-faq-section .landing-wide-inner { max-width: min(100%, calc(100% - 1rem)); } .landing-faq-list { margin-top: 1.5rem; gap: 0; } .landing-faq-q { min-height: 54px; padding: 0.95rem 0.85rem 0.95rem 3.55rem !important; font-size: 0.98rem !important; line-height: 1.25; } .landing-faq-a { padding: 0 0.85rem 1rem 3.55rem !important; } .landing-faq-a p { font-size: 0.92rem; line-height: 1.55; } .landing-newspaper .newspaper-cta-panel { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08) !important; } .landing-final-cta-section .newspaper-cta-panel > div { padding: 2rem 1rem !important; text-align: left !important; } .landing-final-cta-section .landing-section-head, .landing-final-cta-section .landing-section-head h2, .landing-final-cta-section p { text-align: left !important; } .landing-final-cta-section p.max-w-2xl { margin-left: 0 !important; margin-right: 0 !important; font-size: 0.96rem; } .landing-final-cta-section .mt-8 { align-items: stretch !important; gap: 0.8rem !important; } } @media (max-width: 380px) { .app-header-newspaper .header-bar-solid { max-width: 8.2rem; overflow: hidden; text-overflow: ellipsis; } .landing-newspaper .landing-kicker { font-size: 0.58rem; letter-spacing: 0.14em; } .landing-newspaper .landing-hero-title { font-size: clamp(2rem, 12.5vw, 2.65rem) !important; } .landing-hero-marquee { height: 285px; } .landing-hero-marquee-col { width: 132px; } } .landing-newspaper .landing-section-head h2::after { border-radius: 0; background: var(--news-ink); } .landing-newspaper .newspaper-cta-panel { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.08) !important; } @media (max-width: 560px) { .landing-proof-grid { gap: 0.65rem !important; padding-left: 0 !important; } .landing-proof-grid::before { display: none !important; } .landing-proof-card { padding: 1rem !important; border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; } .landing-proof-kicker { position: static !important; width: 2rem !important; height: 2rem !important; margin: 0 0 0.75rem !important; } .landing-trust-fact { border-radius: 2px !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; } } .landing-mobile-trailer { position: relative; width: 100%; max-width: 56rem; margin: 0 auto; padding: 6px; border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08); overflow: hidden; } .landing-mobile-trailer::before { content: ""; position: absolute; inset: -10px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.1), transparent 68%); opacity: 0.35; } .landing-mobile-trailer-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: -2px; clip-path: inset(0 0 2px 0); border: 1px solid var(--news-rule); border-radius: 1px; background: #11110f; object-fit: contain; overflow: hidden; } @media (max-width: 639px) { .landing-footer, .landing-footer .landing-wide-inner, .landing-footer .landing-wide-inner > * { min-width: 0; max-width: 100%; overflow-x: hidden; } .landing-footer a, .landing-footer button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .landing-mobile-trailer { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; } .landing-mobile-trailer::before { display: none; } .landing-mobile-trailer-video { border-left: 0; border-right: 0; border-radius: 0; } } /* Use % of the parent width instead of 100vw: on iOS/Chrome Android, vw often exceeds the layout viewport and causes horizontal overflow. */ .landing-wide-inner { width: 100%; max-width: min(118rem, calc(100% - 1.5rem)); margin-left: auto; margin-right: auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } @media (min-width: 640px) { .landing-wide-inner { max-width: min(122rem, calc(100% - 2.5rem)); padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); } } @media (min-width: 1024px) { .landing-wide-inner { max-width: min(128rem, calc(100% - 4rem)); padding-left: max(2.5rem, env(safe-area-inset-left, 0px)); padding-right: max(2.5rem, env(safe-area-inset-right, 0px)); } } @media (min-width: 1536px) { .landing-wide-inner { max-width: min(136rem, calc(100% - 5rem)); padding-left: max(3rem, env(safe-area-inset-left, 0px)); padding-right: max(3rem, env(safe-area-inset-right, 0px)); } } @media (max-width: 640px) { /* overflow-x: hidden here (with overflow-y left unset) computes overflow-y as auto per spec — that turns #app into its own scroll container, which becomes the sticky header's nearest scrolling ancestor instead of the viewport, breaking its position:sticky (it stays pinned to #app's own scroll, which the page's real scroll doesn't drive, so the header just scrolls away with everything else). `clip` prevents the same horizontal overflow without that side effect — same fix already applied to html's own base rule elsewhere in this file. */ html, body, #app, .landing-page, .landing-newspaper { max-width: 100%; overflow-x: clip; } .landing-wide-inner { width: 100%; max-width: 100%; padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; } .landing-page.landing-newspaper { margin-top: -0.75rem !important; margin-bottom: -0.75rem !important; } .landing-hero-inner { padding-top: 2rem !important; padding-bottom: 2.25rem !important; } /* Was display:block (plain DOM stacking), which put the resume-card animation after the CTA/reassurance copy — and .landing-hero-marquee was hidden entirely below (display:none), so on phones the animation never showed at all. Switching to flex + display:contents on the copy wrapper lets each hero child be reordered independently, so the animation can sit right under the badge instead. */ .landing-hero-inner > .grid { display: flex !important; flex-direction: column !important; } .landing-hero-copy { display: contents !important; } .landing-kicker { order: 1; } .landing-hero-title { order: 3; } .landing-hero-seq--subtitle { order: 4; } .landing-hero-seq--cta { order: 5; } .landing-hero-reassurance { order: 6; } .landing-newspaper .landing-hero-title { max-width: 100%; font-size: clamp(2.1rem, 11vw, 2.85rem) !important; line-height: 1.02 !important; overflow-wrap: anywhere; } .landing-newspaper .landing-hero-title + p { max-width: 100%; font-size: 0.98rem !important; } .landing-hero-seq--cta, .landing-hero-seq--cta .newspaper-btn-solid { width: 100%; max-width: 100%; } .landing-hero-reassurance { max-width: 100%; text-align: left; } .landing-hero-marquee { /* Must stay flex (not block) — its own two column children (up/down) are laid out side-by-side via the base .landing-hero-marquee { display:flex } rule. display:block here broke that, stacking them vertically instead and letting the container's fixed height clip the second column out of view, so mobile showed only one column of moving resumes instead of two. */ display: flex !important; order: 2; margin: 0.5rem 0 1.25rem; } .landing-proof-section, .landing-templates-section, .landing-faq-section, .landing-how-section, .landing-jobs-section, .landing-final-cta-section { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } .landing-proof-grid, .landing-how-grid, .landing-jobs-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 0.85rem !important; width: 100%; } .landing-proof-card, .landing-how-card, .landing-job-card { width: 100%; min-width: 0; } .landing-newspaper #templates .landing-template-carousel-wrap { max-width: 100% !important; margin-inline: 0 !important; overflow: visible !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .landing-newspaper #templates .landing-template-carousel-wrap::before, .landing-newspaper #templates .landing-template-carousel-wrap::after { display: none !important; } .landing-newspaper #templates .landing-template-carousel-track { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; width: 100% !important; padding: 0 !important; transform: none !important; animation: none !important; } .landing-newspaper #templates .landing-template-card { width: 100% !important; min-width: 0 !important; justify-content: center; } .landing-newspaper #templates .landing-template-card .template-preview-mini { width: min(100%, 330px) !important; max-width: 100% !important; min-height: 0 !important; font-size: 6px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side), .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas { font-size: 5.1px !important; } .landing-jobs-section { min-height: auto !important; } .landing-jobs-bg-video { display: none !important; } .landing-jobs-bg-overlay { background: linear-gradient(180deg, rgba(245, 242, 234, 0.96), rgba(245, 242, 234, 0.88)) !important; } .landing-jobs-sticky { position: relative !important; top: auto !important; min-width: 0; } .landing-job-list { width: 100%; min-width: 0; } .landing-final-cta-section .newspaper-cta-panel { margin-inline: 0 !important; } .landing-final-cta-section .newspaper-cta-panel > div { padding: 1.5rem 1rem !important; } } .newspaper-cta-panel { border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.07); } .landing-newspaper .newspaper-cta-panel { background: linear-gradient(180deg, var(--news-paper-contrast) 0%, var(--news-paper) 100%); border-top: 3px solid var(--news-ink); } .landing-final-cta-section--merged { position: relative; overflow: visible; padding: 0; background: transparent !important; border: 0 !important; } .landing-final-cta-section--merged .newspaper-cta-panel { max-width: min(58rem, 100%); margin: 0 auto; } .landing-final-cta-section .newspaper-cta-panel::before { display: none; animation: none; } .landing-final-cta-section .newspaper-cta-panel::after { display: none; animation: none; } .landing-final-cta-content { transform-origin: center bottom; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(247, 243, 236, 0.50)), url('/images/landing-final-cta-newspaper-bg.avif') center / cover no-repeat, var(--news-paper-contrast); } .landing-final-cta-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.36) 50%, transparent 62%, transparent 100%); opacity: 0; transform: translateX(-44%); } .landing-final-cta-section:has(.newspaper-cta-panel.is-visible) .landing-final-cta-content, .newspaper-cta-panel.is-visible .landing-final-cta-content { animation: landing-final-content-in 0.9s var(--landing-ease) both; } .landing-final-cta-section:has(.newspaper-cta-panel.is-visible) .landing-final-cta-content::before, .newspaper-cta-panel.is-visible .landing-final-cta-content::before { animation: landing-final-sheen 1.15s var(--landing-ease) 0.16s both; } @keyframes landing-final-content-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes landing-final-sheen { 0% { opacity: 0; transform: translateX(-42%); } 24% { opacity: 0.72; } 100% { opacity: 0; transform: translateX(42%); } } /* Landing hero: product mockup (print/editorial, not glassmorphism SaaS) */ .landing-newspaper .landing-product-mockup .template-preview-mini.modern-preview .header { border-bottom: 2px solid var(--news-rule); } .landing-newspaper .landing-product-mockup .template-preview-mini.modern-preview .name { color: var(--news-ink); font-family: var(--font-display); } .landing-newspaper .landing-product-mockup .template-preview-mini.modern-preview .section-title { border-bottom: 1px solid var(--news-rule); color: var(--news-ink); font-size: 5px; letter-spacing: 0.06em; text-transform: uppercase; } /* Landing hero mock: real wizard design-group layout without full-bleed negative margins */ .landing-newspaper .landing-product-mockup .landing-mock-design-group.design-group { margin: 0; width: 100%; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection { padding: 6px 0; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection > * { padding-left: 0; padding-right: 0; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection-title { font-size: 10px; margin-bottom: 6px; gap: 6px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection-title svg { width: 13px; height: 13px; } .landing-newspaper .landing-product-mockup .landing-mock-template-current-panel, .landing-newspaper .landing-product-mockup .landing-mock-template-color-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); } .landing-newspaper .landing-product-mockup .landing-mock-template-current-title { margin: 0; color: var(--ink); font-size: 10px; font-weight: 800; line-height: 1.15; } .landing-newspaper .landing-product-mockup .landing-mock-template-current-sub { margin: 2px 0 0; color: var(--ink-muted); font-size: 7px; line-height: 1.25; } .landing-newspaper .landing-product-mockup .landing-mock-template-change-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 7px 8px; border: 2px solid var(--news-ink); border-radius: 2px; background: var(--news-ink); color: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); font-size: 7px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: transform 0.18s ease, box-shadow 0.18s ease; } .landing-newspaper .landing-product-mockup .landing-mock-template-change-btn.is-pressed { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.1); } .landing-newspaper .landing-product-mockup .landing-mock-template-color-swatches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 76px; } .landing-newspaper .landing-product-mockup .landing-mock-template-color-swatch { width: 13px; height: 13px; border-radius: 999px; border: 2px solid #fff; outline: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgba(15,23,42,0.12); } .landing-newspaper .landing-product-mockup .landing-mock-template-color-swatch.is-selected { transform: scale(1.08); outline: 2px solid var(--ink); } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-card.template-card-design { min-height: 0; padding: 6px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini { max-height: 68px; margin-bottom: 4px; padding: 3px 4px; border-radius: 6px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .name { font-size: 5px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .section-title { font-size: 4px; margin-top: 2px; margin-bottom: 1px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .experience-item, .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .education-item { font-size: 3px; } .landing-newspaper .landing-product-mockup .landing-mock-preview-empty-page { min-height: 200px; box-sizing: border-box; } /* Blank A4: no “Start here” copy — looks like an empty resume page */ .landing-newspaper .landing-product-mockup .landing-mock-preview-blank-a4 .landing-mock-blank-a4-rules { margin-top: auto; padding-top: 10px; opacity: 0.22; } .landing-newspaper .landing-product-mockup .newspaper-tag { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: none; } /* Faux form fields in hero mock — same visual language as builder inputs (border, rounded-xl, inset) */ .landing-product-mockup .landing-mock-field-label { display: block; font-size: 8px; font-weight: 500; color: #374151; margin-bottom: 0.125rem; line-height: 1.25; } @media (min-width: 640px) { .landing-product-mockup .landing-mock-field-label { font-size: 9px; } } .landing-product-mockup .landing-mock-faux-input { display: flex; align-items: center; width: 100%; min-height: 1.375rem; padding: 0.2rem 0.45rem; border: 1px solid var(--border); border-radius: 0.75rem; background: #fff; box-shadow: inset 0 1px 2px rgba(15, 18, 25, 0.06); font-size: 7px; line-height: 1.2; color: #9ca3af; } @media (min-width: 640px) { .landing-product-mockup .landing-mock-faux-input { min-height: 1.625rem; padding: 0.25rem 0.5rem; font-size: 8px; } } .landing-product-mockup .landing-mock-faux-input span:not(.landing-mock-type-caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; min-width: 0; } .landing-product-mockup .landing-mock-faux-input--filled, .landing-product-mockup .landing-mock-faux-input--filled span:not(.landing-mock-type-caret) { color: var(--ink); } .landing-product-mockup .landing-mock-faux-input--multiline { align-items: flex-start; } .landing-product-mockup .landing-mock-faux-input--multiline span:not(.landing-mock-type-caret) { white-space: pre-wrap; word-break: break-word; text-overflow: clip; } .landing-mock-type-caret { display: inline-block; flex: 0 0 auto; width: 1px; max-width: 1px; min-width: 1px; align-self: center; min-height: 0.85em; margin-left: 2px; background: var(--ink-muted); vertical-align: -0.06em; animation: landing-mock-caret-blink 1s step-end infinite; } .landing-product-mockup .landing-mock-faux-input--multiline .landing-mock-type-caret { align-self: flex-start; margin-top: 0.15em; } @keyframes landing-mock-caret-blink { 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .landing-mock-type-caret { animation: none; opacity: 1; } } /* Hero mock: left “sections” panel — below lg, fixed height so accordion body does not resize between demo steps (was min-height + taller is-design). */ @media (max-width: 639px) { .landing-mock-sections-inner { box-sizing: border-box; height: 530px; min-height: 530px; max-height: 530px; overflow: hidden; } } @media (min-width: 640px) and (max-width: 1023px) { .landing-mock-sections-inner { box-sizing: border-box; height: 610px; min-height: 610px; max-height: 610px; overflow: hidden; } } @media (min-width: 1024px) { .landing-mock-sections-inner { min-height: 420px; } .landing-mock-sections-inner.is-design { min-height: 500px; } } /* Hero mockup is desktop-width; overflow-hidden clips it on real phones (S24, iPhone). */ .landing-product-mockup-card { max-width: 100%; overflow: hidden; } .landing-product-mockup .landing-mockup-scale-root { transform: scale(0.74); transform-origin: top left; width: 135.14%; } .landing-product-mockup .landing-mock-preview-aspect { position: relative; } .landing-mock-preview-template-modal-overlay { position: absolute; inset: 0; z-index: 24; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(17, 17, 17, 0.34); animation: landing-mock-template-modal-in 0.24s ease both; } .landing-mock-preview-template-modal-overlay.is-closing { pointer-events: none; animation: landing-mock-template-modal-out 0.42s ease both; } .landing-mock-preview-template-modal-panel { position: relative; width: min(310px, calc(100% - 12px)); max-height: calc(100% - 18px); display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--news-rule); border-radius: 12px; background: #fffdfa; box-shadow: 6px 6px 0 rgba(0,0,0,0.2), 0 18px 36px rgba(15,23,42,0.24); } .landing-mock-preview-template-modal-overlay.is-closing .landing-mock-preview-template-modal-panel { animation: landing-mock-template-panel-out 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } .landing-mock-preview-template-modal-head { position: relative; padding: 8px 26px 7px; border-bottom: 1px solid #ece9df; background: #fff; text-align: center; } .landing-mock-preview-template-modal-head span { display: block; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .landing-mock-preview-template-modal-head i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ink); font-size: 14px; font-style: normal; line-height: 1; } .landing-mock-preview-template-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; flex: 1 1 auto; min-height: 0; max-height: min(282px, calc(100% - 31px)); padding: 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(47,45,41,0.35) transparent; background: #f7f5ef; } .landing-mock-preview-template-modal-grid::-webkit-scrollbar { width: 5px; } .landing-mock-preview-template-modal-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(47,45,41,0.28); } .landing-mock-preview-template-modal-card { position: relative; min-width: 0; } .landing-mock-preview-template-modal-card.is-choosing { z-index: 2; } .landing-mock-preview-template-modal-card.is-choosing .landing-mock-preview-template-modal-sheet { animation: landing-mock-template-card-press 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) both; box-shadow: 0 0 0 3px var(--accent-soft), 3px 3px 0 rgba(47,45,41,0.18), 0 12px 24px rgba(15,23,42,0.16); } .landing-mock-preview-template-modal-card.is-choosing::after { content: ""; position: absolute; inset: 21px -3px -3px; border: 2px solid var(--selected-color, #059669); border-radius: 9px; opacity: 0; pointer-events: none; animation: landing-mock-template-choice-ring 0.58s ease both; } .landing-mock-preview-template-modal-name { display: block; margin: 0 0 4px; overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 8px; font-weight: 900; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .landing-mock-preview-template-modal-sheet { position: relative; display: block; aspect-ratio: 210 / 297; min-height: 0; overflow: hidden; padding: 7px 8px; border: 1.5px solid #2f2d29; border-radius: 7px; background: #fff; box-shadow: 2px 2px 0 rgba(47,45,41,0.12); color: #334155; } .landing-mock-preview-template-modal-card.is-selected .landing-mock-preview-template-modal-sheet { box-shadow: 0 0 0 3px var(--accent-soft), 2px 2px 0 rgba(47,45,41,0.18); } .landing-mock-preview-template-modal-sheet .preview-thumb-header { display: grid; gap: 2px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--selected-color, #474644) 45%, #e5e7eb); } .landing-mock-preview-template-modal-sheet .preview-thumb-header--split { grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; } .landing-mock-preview-template-modal-sheet .preview-thumb-header--center { justify-items: center; text-align: center; } .landing-mock-preview-template-modal-sheet .preview-thumb-avatar { display: block; width: 24px; height: 24px; margin-bottom: 2px; border: 1px solid #fff; border-radius: 999px; background-color: #e5e7eb; background-image: var(--avatar-sprite); background-size: 300% 200%; background-position: var(--avatar-position, 0% 0%); box-shadow: 0 1px 4px rgba(15,23,42,0.16); } .landing-mock-preview-template-modal-sheet .preview-thumb-name { display: block; max-width: 100%; overflow: hidden; color: #111827; font-family: var(--font-display); font-size: 6.8px; font-weight: 900; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .landing-mock-preview-template-modal-sheet .preview-thumb-role { display: block; max-width: 100%; overflow: hidden; color: var(--selected-color, #474644); font-size: 4.4px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .landing-mock-preview-template-modal-sheet .preview-thumb-section { display: block; width: 46%; height: 4px; margin: 7px 0 4px; border-bottom: 1px solid color-mix(in srgb, var(--selected-color, #474644) 42%, #e5e7eb); background: linear-gradient(90deg, var(--selected-color, #474644), var(--selected-color, #474644)) 0 0 / 72% 2px no-repeat; } .landing-mock-preview-template-modal-sheet .preview-thumb-line { display: block; width: 72%; height: 3px; margin-bottom: 4px; border-radius: 999px; background: rgba(15, 23, 42, 0.13); } .landing-mock-preview-template-modal-sheet .preview-thumb-line.wide { width: 86%; } .landing-mock-preview-template-modal-sheet .preview-thumb-line.short { width: 54%; } .landing-mock-preview-template-modal-sheet .preview-thumb-skill-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; } .landing-mock-preview-template-modal-sheet .preview-thumb-skill-row span, .landing-mock-preview-template-modal-sheet .preview-thumb-pill { display: inline-block; width: 22px; height: 6px; border: 1px solid color-mix(in srgb, var(--selected-color, #474644) 35%, #e5e7eb); border-radius: 999px; background: color-mix(in srgb, var(--selected-color, #474644) 8%, #fff); } .landing-mock-preview-template-modal-sheet.professional-preview { display: grid; grid-template-columns: 34% 1fr; gap: 0; padding: 0; background: #fff !important; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-side { min-height: 100%; padding: 9px 5px; background: #2f363e; color: #fff; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-main { min-width: 0; padding: 9px 7px; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-avatar { width: 30px; height: 30px; margin: 0 auto 9px; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-side-title { display: block; width: 74%; height: 4px; margin: 7px 0 4px; border-bottom: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.84); } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-side-line { display: block; width: 92%; height: 3px; margin-bottom: 4px; border-radius: 999px; background: rgba(255,255,255,0.28); } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-side-line.short { width: 62%; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-pill { width: 80%; height: 5px; margin: 0 0 4px; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.2); } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-timeline { position: relative; display: block; height: 9px; margin: 5px 0 3px 7px; border-left: 1px solid #d1d5db; } .landing-mock-preview-template-modal-sheet.professional-preview .preview-thumb-timeline::before { content: ""; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; border: 1px solid var(--selected-color, #059669); border-radius: 999px; background: #fff; } .landing-mock-preview-template-modal-sheet.elegant-preview { background: linear-gradient(180deg, #fafafa, #fff) !important; text-align: center; } .landing-mock-preview-template-modal-sheet.elegant-preview .preview-thumb-avatar { margin-left: auto; margin-right: auto; } .landing-mock-preview-template-modal-sheet.elegant-preview .preview-thumb-name { color: var(--selected-color, #8b5cf6); font-style: italic; } .landing-mock-preview-template-modal-sheet.corporate-preview .preview-thumb-name { color: var(--selected-color, #dc2626); letter-spacing: 0.04em; text-transform: uppercase; } .landing-mock-preview-template-modal-sheet.saas-preview { padding: 7px; background: #f8fafc !important; } .landing-mock-preview-template-modal-sheet.saas-preview .preview-thumb-saas-card { margin-top: 6px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 7px; background: #fff; } .landing-mock-preview-template-modal-sheet.saas-preview .preview-thumb-section { margin-top: 0; } .landing-mock-preview-template-modal-sheet.minimal-preview { font-family: "Times New Roman", serif; } .landing-mock-preview-template-cursor { position: absolute; left: 50%; top: 50%; z-index: 4; width: 17px; height: 22px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.24)); transform-origin: 3px 3px; pointer-events: none; animation: landing-mock-template-cursor-choose 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .landing-mock-preview-template-cursor::before { content: ""; position: absolute; inset: 0; background: #111827; clip-path: polygon(0 0, 0 82%, 5px 67%, 8px 100%, 12px 99%, 9px 66%, 16px 66%); border: 1px solid var(--news-rule); } .landing-mock-preview-template-cursor::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border: 2px solid var(--selected-color, #059669); border-radius: 999px; opacity: 0; transform: scale(0.32); animation: landing-mock-template-cursor-click 0.36s ease 0.34s both; } @keyframes landing-mock-template-cursor-choose { 0% { opacity: 0; transform: translate(-64px, -108px) rotate(-8deg) scale(0.96); } 22% { opacity: 1; } 72% { opacity: 1; transform: translate(-78px, 122px) rotate(-8deg) scale(0.96); } 84% { transform: translate(-78px, 122px) rotate(-8deg) scale(0.86); } 100% { opacity: 0; transform: translate(-78px, 122px) rotate(-8deg) scale(0.92); } } @keyframes landing-mock-template-cursor-click { 0% { opacity: 0; transform: scale(0.28); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: scale(1.05); } } @keyframes landing-mock-template-card-press { 0% { transform: translateY(0) scale(1); } 48% { transform: translateY(-2px) scale(1.035); } 68% { transform: translateY(1px) scale(0.985); } 100% { transform: translateY(0) scale(1); } } @keyframes landing-mock-template-choice-ring { 0% { opacity: 0; transform: scale(0.96); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.08); } } .landing-mock-template-modal-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 17, 17, 0.42); opacity: 1; animation: landing-mock-template-modal-in 0.24s ease both; } .landing-mock-template-modal-panel { width: min(620px, calc(100% - 28px)); max-height: calc(100% - 34px); display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--news-rule); border-radius: 18px; background: #fff; box-shadow: 10px 10px 0 rgba(0,0,0,0.18), 0 24px 60px rgba(15,23,42,0.24); } .landing-mock-template-modal-head { position: relative; padding: 16px 44px 12px; border-bottom: 1px solid #ece9df; background: #fffdfa; text-align: center; } .landing-mock-template-modal-title { display: block; color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; } .landing-mock-template-modal-close { position: absolute; right: 14px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); font-size: 24px; line-height: 1; } .landing-mock-template-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; background: #f7f5ef; overflow-y: auto; overscroll-behavior: contain; } .landing-mock-template-modal-card { position: relative; min-width: 0; padding: 0; background: transparent; } .landing-mock-template-modal-card .template-card-footer--top { position: relative !important; justify-content: center !important; min-height: 24px !important; margin-bottom: 7px !important; padding: 0 42px !important; text-align: center !important; } .landing-mock-template-modal-card-name { display: block; margin-bottom: 7px; color: var(--ink); font-family: var(--font-display); font-size: 18px !important; font-weight: 800; line-height: 1; text-align: center; letter-spacing: -0.02em; } .landing-mock-template-modal-pill { position: absolute; right: 2px; top: 50%; z-index: 2; transform: translateY(-50%); padding: 2px 5px; border: 1px solid var(--border-strong); background: #fff; color: var(--ink); box-shadow: 1px 1px 0 rgba(0,0,0,0.08); font-size: 7px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini { min-height: 164px !important; max-height: none !important; padding: 8px 9px !important; border: 2px solid #2f2d29; border-radius: 12px !important; background: #fff; box-shadow: 4px 4px 0 rgba(47,45,41,0.10), inset 0 0 0 1px rgba(47,45,41,0.04); font-size: 5.2px !important; line-height: 1.3 !important; } .landing-mock-template-modal-card.is-selected.template-modal-card .template-preview-mini { border-color: #2f2d29; box-shadow: 0 0 0 4px var(--accent-soft), 5px 5px 0 rgba(47,45,41,0.16), 0 12px 24px rgba(15,23,42,0.12), inset 0 0 0 1px rgba(47,45,41,0.04); } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .name { font-size: 7px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .contact, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .experience-item, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .education-item, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-summary, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-copy, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-bullets { font-size: 4.75px !important; line-height: 1.35 !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .section-title { font-size: 5.2px !important; margin-top: 5px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-avatar, .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-resume-photo { width: 28px !important; height: 28px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-pro-side { padding: 9px 6px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-pro-main { padding: 9px 8px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-timeline-row { margin-top: 4px !important; padding-left: 7px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-saas-card { margin-top: 5px !important; padding: 5px 6px !important; } .landing-mock-template-modal-card.template-modal-card .template-preview-mini .mini-skill-row { gap: 3px !important; margin-top: 4px !important; } @keyframes landing-mock-template-modal-in { from { opacity: 0; } to { opacity: 1; } } @keyframes landing-mock-template-modal-out { from { opacity: 1; } to { opacity: 0; } } @keyframes landing-mock-template-panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.96); } } @media (max-width: 1023px) { .landing-product-mockup { min-width: 0; max-width: 100%; } .landing-product-mockup-card { /* Clip scaled mock; both axes avoid becoming a scroll container with visible overflow-y */ overflow: hidden; touch-action: pan-y; } /* Larger on phones: whole mock + left section panel read clearly. */ .landing-product-mockup .landing-mockup-scale-root { transform: scale(0.74) !important; width: 135.14%; transform-origin: top left; } /* Extra vertical space vs base 962px: preview 594/210; sections height stepped down. */ .landing-product-mockup .landing-mockup-viewport { height: calc(962px + (100vw - 2.75rem) * 114 / 210) !important; min-height: 0; } .landing-product-mockup .landing-mockup-mini-resume-scale { transform: translate(0, -10px) scale(1.78) !important; } .landing-product-mockup .landing-mock-field-label { font-size: 12px; margin-bottom: 0.2rem; } .landing-product-mockup .landing-mock-faux-input { font-size: 11px; min-height: 1.75rem; padding: 0.35rem 0.65rem; border-radius: 0.85rem; } .landing-product-mockup .landing-mock-sections-inner { padding: 0.95rem 1rem !important; } .landing-product-mockup .landing-mock-sections-card-head { padding: 0.65rem 0.85rem !important; } .landing-product-mockup .landing-mock-section-title-text { font-size: 12px !important; line-height: 1.3 !important; } .landing-product-mockup .landing-mock-section-subtitle { font-size: 10px !important; margin-top: 0.15rem !important; } .landing-product-mockup .landing-mock-basic-photo-slot { width: 3.25rem !important; height: 3.25rem !important; } /* Sizing comes from landingMockMobileWizardChipClass (+ Tailwind); keep min-width from clipping labels. */ .landing-product-mockup .landing-mock-wizard-bar--mobile .wizard-step-btn { min-width: auto !important; } .landing-product-mockup .landing-mock-micro { font-size: 10px !important; } .landing-product-mockup .landing-mock-design-range-labels span { font-size: 9px !important; } .landing-product-mockup .landing-mock-masthead-title { font-size: 13px !important; } .landing-product-mockup .landing-mock-masthead-badge { font-size: 9px !important; padding: 0.2rem 0.45rem !important; } .landing-product-mockup .landing-mock-masthead-status { font-size: 10px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection-title { font-size: 11px !important; margin-bottom: 8px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .design-subsection-title svg { width: 15px !important; height: 15px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .name { font-size: 6px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .section-title { font-size: 5px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .experience-item, .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .education-item { font-size: 4px !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-card.template-card-design { padding: 6px !important; min-height: 118px !important; } /* Taller mini previews in design step (default 68px max was too short on scaled mobile mock). */ .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini { max-height: none !important; min-height: 72px !important; aspect-ratio: 210 / 297; } /* Card is pan-y only; wizard strip still needs horizontal pan for chip overflow */ .landing-product-mockup .landing-mock-wizard-bar { touch-action: pan-x pan-y; } } @media (max-width: 400px) { .landing-product-mockup .landing-mockup-scale-root { transform: scale(0.66) !important; width: 151.52%; } .landing-product-mockup .landing-mockup-viewport { height: calc(914px + (100vw - 2.75rem) * 114 / 210) !important; } .landing-product-mockup .landing-mockup-mini-resume-scale { transform: translate(0, -6px) scale(1.62) !important; } } /* Live preview mini-resume: clip overflow on small screens (no scroll inside the preview pane) */ @media (max-width: 1023px) { .landing-product-mockup .landing-mock-live-preview-col { overflow: hidden !important; overscroll-behavior: none; touch-action: manipulation; } .landing-product-mockup .landing-mock-live-preview-card { overflow: hidden !important; overscroll-behavior: none; touch-action: manipulation; } /* Live preview paper: 594/210 (540/210 + 10%). */ .landing-product-mockup .landing-mock-preview-aspect { aspect-ratio: unset !important; height: calc((100vw - 2.75rem) * 594 / 210) !important; min-height: calc((100vw - 2.75rem) * 594 / 210) !important; max-height: calc((100vw - 2.75rem) * 594 / 210) !important; padding-bottom: 0 !important; position: relative; overflow: hidden !important; overscroll-behavior: none; touch-action: manipulation; -webkit-overflow-scrolling: auto; box-sizing: border-box; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini { overflow: hidden !important; overscroll-behavior: none; } .landing-product-mockup .landing-mock-preview-aspect .landing-mockup-mini-resume-scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .landing-product-mockup .landing-mock-preview-aspect .landing-mockup-mini-resume-scale > div { height: 100%; min-height: 100%; width: 100%; } /* Cross-fade without out-in: both roots stack in flow; pin so height never doubles during transition. */ .landing-product-mockup .landing-mock-preview-aspect .landing-mockup-mini-resume-scale > .landing-mock-preview-transition-root { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; } /* Live preview column: readable mini resume (hero mock only; frame height from aspect + zoom). */ .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini { font-size: 6px !important; line-height: 1.3 !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .name { font-size: 9px !important; margin-bottom: 3px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .contact { font-size: 5.5px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .section-title { font-size: 6.5px !important; margin-top: 5px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .experience-item, .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .education-item { font-size: 5.5px !important; margin-bottom: 2px !important; } .landing-product-mockup .landing-mock-preview-header-photo { width: 34px !important; height: 34px !important; } .landing-product-mockup .landing-mock-live-preview-card .landing-mock-live-preview-toolbar-label { font-size: 10px !important; } } @media (min-width: 1024px) { .landing-product-mockup-card { overflow: hidden !important; } .landing-product-mockup .landing-mockup-scale-root { transform: scale(0.74) !important; width: 135.14% !important; } .landing-product-mockup .landing-mock-live-preview-card { overflow: hidden !important; } .landing-product-mockup .landing-mock-live-preview-frame { container-type: inline-size; container-name: landing-mock-lg-preview; overflow: hidden; } /* Paper: a few px wider than frame inner (cqw); height kept short so the window hugs the resume content instead of leaving a tall empty strip below it. */ .landing-product-mockup .landing-mock-preview-aspect { aspect-ratio: unset !important; width: calc(100cqw + 32px) !important; max-width: none !important; height: calc((100cqw + 32px) * 255 / 210 + 42px) !important; min-height: calc((100cqw + 32px) * 255 / 210 + 42px) !important; max-height: calc((100cqw + 32px) * 255 / 210 + 42px) !important; transform: translateX(-16px); } /* Slightly larger mini-resume zoom on lg+ (inline default kept for markup; this wins here). Keep X centered; only crop from the top so the live resume sits evenly in the preview frame. */ .landing-product-mockup .landing-mock-preview-aspect .landing-mockup-mini-resume-scale { transform: translate(0, -13px) scale(2.2) !important; } /* Paper width = frame ÷ zoom: at 2.2× a full-width (100%) paper renders ~2× the frame, so its right half (section rules + green panel) overflowed and got hard-cut at the right border. Sizing it to frame/scale makes the paper fill the frame exactly at 2.2×. */ .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini { width: calc((100cqw + 32px) / 2.2) !important; max-width: none !important; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-card.template-card-design { min-height: 168px; padding: 8px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini { max-height: none; min-height: 120px; margin-bottom: 6px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .name { font-size: 6px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .section-title { font-size: 5px; } .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .experience-item, .landing-newspaper .landing-product-mockup .landing-mock-design-group .template-preview-mini .education-item { font-size: 4px; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .name { font-size: 7px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .contact { font-size: 5px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo.is-boosted .name { font-size: 10.5px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo.is-boosted .contact { font-size: 6.8px !important; } } /* Live preview: same padding for every mini template so modern ↔ professional does not shift inside the frame. */ .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini { /* Left padding trimmed so the green resume content sits flush to the frame's left edge (the scaled 8px elsewhere left a visible gap on the left). */ padding: 8px 8px 8px 5px !important; box-sizing: border-box; /* Outer frame sets height; inner must not use global A4 aspect (causes step-to-step height jumps on mobile). */ aspect-ratio: unset !important; max-height: none !important; height: 100% !important; min-height: 100% !important; } /* Live preview header: +2px name/contact after design slider “boost” (transition after template switch). */ .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .name, .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .contact { transition: font-size 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), margin-bottom 0.7s ease; } @media (max-width: 1023px) { .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo.is-boosted .name { font-size: 13.5px !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo.is-boosted .contact { font-size: 9px !important; } } .landing-mock-header-size-track { position: relative; } .landing-mock-header-size-fill { width: 45%; position: relative; transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } .landing-mock-header-size-fill.is-boosted { width: 72%; } .landing-mock-header-size-thumb { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 7px; height: 7px; border-radius: 9999px; background: #fff; border: 2px solid var(--accent, #474644); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .landing-mock-header-size-fill { transition: none; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .name, .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .landing-mock-preview-header-typo .contact { transition: none; } } /* One header rhythm for all mini templates; cancels professional full-bleed negative margins in live preview. */ .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini .header { margin: 0 0 6px 0 !important; padding-bottom: 5px !important; /* Zero the horizontal padding so the header photo lines up with the section content at the paper's left margin. The professional-preview header carries 8px side padding (for its band), but this landing mock strips the band's compensating negative margin, which otherwise left the photo indented ~8px past the sections (a left gap). */ padding-left: 0 !important; padding-right: 0 !important; } .landing-product-mockup .landing-mock-preview-aspect .template-preview-mini.professional-preview .header { background: transparent; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional { position: relative; display: block; padding: 0 !important; background: #ffffff !important; color: #334155; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-pro-side { width: 34%; padding: 7px 5px !important; background: #2f363e; color: #fff; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-pro-main { margin-left: 34%; padding: 7px 7px 6px !important; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-avatar { width: 36px !important; height: 36px !important; margin-bottom: 8px; border-width: 1px; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-side-heading { display: block; margin: 6px 0 3px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 4.6px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-side-text { display: block; margin-bottom: 2px; color: rgba(255,255,255,0.82); font-size: 4.4px; line-height: 1.25; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .landing-mock-preview-pro-name { display: block; color: #243041; font-family: var(--font-display); font-size: 8px !important; line-height: 1.05; letter-spacing: -0.02em; transition: font-size 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .landing-mock-preview-pro-name.is-boosted { /* Clearly bigger than the 8px base so the header-size "boost" in the demo visibly grows the preview name (the old 9px was a barely-perceptible +1px). */ font-size: 11.5px !important; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .landing-mock-preview-pro-contact { display: block; margin: 2px 0 6px; color: var(--selected-color, #059669); font-size: 5px !important; font-weight: 800; line-height: 1.2; transition: font-size 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .landing-mock-preview-pro-contact.is-boosted { font-size: 6.8px !important; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .section-title { margin: 7px 0 3px !important; padding-bottom: 2px !important; border-bottom: 1px solid #d1d5db; color: #243041; font-family: var(--font-display); font-size: 5.4px !important; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-summary, .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .experience-item, .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .education-item { margin: 2px 0 3px; color: #4b5563; font-size: 4.8px !important; line-height: 1.33 !important; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-timeline-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; margin-top: 5px; padding-left: 7px; color: #334155; line-height: 1.2; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-timeline-row span { position: absolute; left: 0; top: 2px; width: 4px; height: 4px; border: 1px solid var(--selected-color, #059669); border-radius: 999px; background: #fff; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-timeline-row i { color: #243041; font-size: 5px !important; font-style: normal; font-weight: 800; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-timeline-row b { color: #94a3b8; font-size: 4.4px !important; font-weight: 800; white-space: nowrap; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-skill-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .landing-product-mockup .landing-mock-preview-aspect .landing-mock-live-resume-preview--professional .mini-skill-row em { padding: 1px 3px; border: 1px solid #d1fae5; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 4.2px; font-style: normal; font-weight: 800; } /* Landing mock: cross-fade when auto-cycling wizard sections (opacity only — no translate, avoids clipping against overflow:hidden on the preview frame). */ .landing-mock-section-fade-enter-active, .landing-mock-section-fade-leave-active { transition: opacity 0.22s ease; } .landing-mock-section-fade-enter-from { opacity: 0; } .landing-mock-section-fade-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { .landing-mock-section-fade-enter-active, .landing-mock-section-fade-leave-active { transition: none; } .landing-mock-section-fade-enter-from, .landing-mock-section-fade-leave-to { transform: none; } } /* Landing mock: About section — photo upload simulation */ .landing-mock-photo-fade-enter-active, .landing-mock-photo-fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; } .landing-mock-photo-fade-enter-from, .landing-mock-photo-fade-leave-to { opacity: 0; transform: scale(0.92); } @keyframes landing-mock-photo-slot-pulse { 0%, 100% { border-color: rgba(71, 70, 68, 0.35); box-shadow: 0 0 0 0 rgba(71, 70, 68, 0.08); } 50% { border-color: rgba(71, 70, 68, 0.85); box-shadow: 0 0 0 3px rgba(71, 70, 68, 0.12); } } .landing-mock-basic-photo-slot--uploading { animation: landing-mock-photo-slot-pulse 0.85s ease-in-out infinite; } .landing-mock-upload-pick { position: relative; display: grid; place-items: center; width: 100%; height: 100%; } .landing-mock-upload-plus { position: absolute; right: 7px; bottom: 6px; width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid var(--news-rule); border-radius: 999px; background: var(--news-paper-contrast); color: var(--news-ink); font-size: 10px; font-weight: 900; line-height: 1; } .landing-mock-photo-action-row { position: relative; display: inline-flex; align-items: center; gap: 4px; } .landing-mock-photo-action { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 6px; border: 1px solid var(--news-rule); border-radius: 3px; background: var(--news-paper-contrast); color: var(--news-ink); font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 1px 1px 0 rgba(0,0,0,0.08); } .landing-mock-photo-cursor { position: absolute; left: 76px; top: 5px; width: 13px; height: 16px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.18)); animation: landing-mock-photo-cursor 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .landing-mock-photo-cursor::before { content: ""; position: absolute; inset: 0; background: var(--news-ink); clip-path: polygon(0 0, 0 86%, 4px 69%, 7px 100%, 10px 99%, 8px 68%, 13px 68%); } @keyframes landing-mock-photo-cursor { 0% { opacity: 0; transform: translate(-20px, -14px) rotate(-8deg) scale(0.95); } 28% { opacity: 1; } 78% { opacity: 1; transform: translate(0, 0) rotate(-8deg) scale(0.95); } 100% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(0.82); } } .landing-mock-photo-upload-row { width: min(96px, 100%); } .landing-mock-photo-progress-track { width: 100%; height: 4px; margin-top: 4px; border: 1px solid rgba(71, 70, 68, 0.25); border-radius: 999px; background: rgba(71, 70, 68, 0.08); overflow: hidden; } .landing-mock-photo-progress-track span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; animation: landing-mock-photo-progress 1.05s ease-out both; } @keyframes landing-mock-photo-progress { 0% { transform: scaleX(0.06); } 48% { transform: scaleX(0.62); } 100% { transform: scaleX(1); } } .landing-mock-upload-progress-icon { position: relative; display: grid; place-items: center; width: 100%; height: 100%; } .landing-mock-upload-progress-ring { position: absolute; inset: 8px; border-radius: 999px; border: 1px solid rgba(71, 70, 68, 0.16); border-right-color: rgba(71, 70, 68, 0.55); animation: landing-mock-spin 1.1s linear infinite reverse; } .landing-mock-uploaded-avatar { background-color: #e9d7c7; background-image: var(--avatar-sprite, url('/images/template-avatar-sprite.jpg')); background-size: 300% 200%; background-position: 50% 0%; animation: landing-mock-avatar-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes landing-mock-avatar-pop { 0% { opacity: 0; transform: scale(0.88); filter: saturate(0.7); } 100% { opacity: 1; transform: scale(1); filter: saturate(1); } } .landing-mock-basic-photo-spinner { width: 1.125rem; height: 1.125rem; border: 2px solid rgba(71, 70, 68, 0.2); border-top-color: rgba(71, 70, 68, 0.75); border-radius: 50%; animation: landing-mock-spin 0.65s linear infinite; } .landing-mock-basic-photo-spinner--xs { width: 0.65rem; height: 0.65rem; border-width: 1.5px; } @keyframes landing-mock-spin { to { transform: rotate(360deg); } } .landing-mock-preview-photo-uploading { position: relative; border: 1px solid var(--news-rule); border-radius: 2px; animation: landing-mock-photo-slot-pulse 0.85s ease-in-out infinite; background: linear-gradient(135deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0.02)); } .landing-mock-preview-photo-progress { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; border-radius: 999px; background: var(--accent); transform-origin: left center; animation: landing-mock-photo-progress 1.05s ease-out both; } @media (prefers-reduced-motion: reduce) { .landing-mock-photo-fade-enter-active, .landing-mock-photo-fade-leave-active { transition: none; } .landing-mock-photo-fade-enter-from, .landing-mock-photo-fade-leave-to { transform: none; } .landing-mock-basic-photo-slot--uploading, .landing-mock-preview-photo-uploading { animation: none; } .landing-mock-basic-photo-spinner, .landing-mock-upload-progress-ring, .landing-mock-photo-progress-track span, .landing-mock-preview-photo-progress, .landing-mock-photo-cursor, .landing-mock-uploaded-avatar { animation: none; } .landing-mock-basic-photo-spinner { border-top-color: rgba(71, 70, 68, 0.35); } } .newspaper-footer { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(247, 244, 238, 0.96) 100%), radial-gradient(circle at 18% 0%, rgba(71, 70, 68, 0.08), transparent 34%), var(--news-paper-contrast); border-top: 1px solid rgba(15, 18, 25, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .newspaper-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 18, 25, 0.30), transparent); opacity: 0.65; pointer-events: none; } /* Social login buttons: each branded to match its logo's color. */ .social-auth-btn { background: #fff; } .social-auth-btn--google { border-color: rgba(66, 133, 244, 0.55); color: #3c4043; } .social-auth-btn--google:hover { border-color: #4285f4; background: rgba(66, 133, 244, 0.08); color: #1a1a1a; } .social-auth-btn--linkedin { border-color: rgba(10, 102, 194, 0.55); color: #0a66c2; } .social-auth-btn--linkedin:hover { border-color: #0a66c2; background: rgba(10, 102, 194, 0.08); color: #084e94; } /* ---- Redesigned footer (editorial) ---- */ .footer-inner { padding-top: clamp(3.25rem, 6vw, 5.5rem) !important; padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important; } .footer-inner--mini { padding-top: clamp(1.75rem, 3vw, 2.5rem) !important; padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; } .footer-grid { display: grid; grid-template-columns: minmax(18rem, 1.65fr) repeat(3, minmax(8rem, 1fr)); gap: clamp(1.4rem, 3vw, 3.25rem); align-items: start; } .footer-brand { max-width: 24rem; padding-right: clamp(1rem, 3vw, 2.25rem); } .footer-brand-mark { display: inline-flex; align-items: center; text-decoration: none; color: var(--news-ink); } .footer-brand-mark .app-brand-word { font-size: clamp(1.65rem, 2.5vw, 2.15rem); } .footer-tagline { margin: 1rem 0 0; max-width: 18.5rem; font-size: 0.95rem; line-height: 1.65; color: rgba(47, 45, 41, 0.72); } .footer-connect { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.85rem; } .footer-connect-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(47, 45, 41, 0.58); } .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid rgba(15, 18, 25, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--news-ink); box-shadow: 0 10px 24px rgba(15, 18, 25, 0.08); transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .footer-social svg { width: 20px; height: 20px; } .footer-social:hover { background: var(--news-ink); color: var(--news-paper); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 18, 25, 0.16); } .footer-social:focus-visible { outline: 2px solid var(--news-ink); outline-offset: 3px; } .footer-social--sm { width: 36px; height: 36px; box-shadow: 0 8px 18px rgba(15, 18, 25, 0.08); } .footer-social--sm svg { width: 17px; height: 17px; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.58rem; min-width: 0; padding-top: 0.45rem; } .footer-col-title { margin: 0 0 0.55rem; padding-bottom: 0.55rem; width: 100%; border-bottom: 1px solid rgba(15, 18, 25, 0.12); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 26, 26, 0.88); } .footer-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0; border: 0; background: transparent; text-align: left; text-decoration: none; font-size: 0.92rem; line-height: 1.4; color: rgba(47, 45, 41, 0.70); cursor: pointer; transition: color 0.16s ease, transform 0.16s ease; } .footer-link::before { content: ""; width: 0.26rem; height: 0.26rem; border-radius: 999px; background: currentColor; opacity: 0; transform: scale(0.6); transition: opacity 0.16s ease, transform 0.16s ease; } .footer-link:hover { color: var(--news-ink); transform: translateX(3px); } .footer-link:hover::before { opacity: 0.7; transform: scale(1); } .footer-baseline { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.15rem; border-top: 1px solid rgba(15, 18, 25, 0.12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; } .footer-copy, .footer-note { margin: 0; font-size: 0.75rem; color: rgba(47, 45, 41, 0.56); } .footer-note { padding: 0.35rem 0.65rem; border: 1px solid rgba(15, 18, 25, 0.10); border-radius: 999px; background: rgba(255, 255, 255, 0.54); font-style: normal; } /* Minimal footer (non-landing routes) */ .footer-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .footer-brand--mini { max-width: 20rem; } .footer-brand--mini .footer-tagline { margin-top: 0.5rem; } .footer-mini-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; } .footer-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.65rem; } .footer-brand { padding-right: 0; } .footer-tagline { max-width: none; } .footer-col { padding-top: 0; } .footer-col-title { margin-bottom: 0.35rem; } .footer-baseline { margin-top: 2rem; align-items: flex-start; flex-direction: column; } .footer-mini { align-items: flex-start; flex-direction: column; } .footer-mini-links { align-items: flex-start; flex-direction: column; gap: 0.45rem; } } .dashboard-newspaper-panel { background: var(--news-paper-contrast); border: 2px solid var(--news-rule); border-radius: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); } .dashboard-workflow-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 10px; border: 2px solid var(--news-rule); background: #fff; color: var(--news-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05); text-align: center; } .dashboard-workflow-chip svg { width: 16px; height: 16px; flex-shrink: 0; } .dashboard-workflow-chip--import svg { color: #2563eb; } .dashboard-workflow-chip--improve svg { color: #7c3aed; } .dashboard-workflow-chip--ats svg { color: #0891b2; } .dashboard-workflow-chip--pdf svg { color: #d97706; } /* Empty-state illustration: a gentle bob on the smallest floating dot keeps the graphic feeling alive without being distracting. */ .dashboard-empty-illustration__dot { animation: dashboard-empty-dot-float 3.2s ease-in-out infinite; } @keyframes dashboard-empty-dot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .dashboard-empty-illustration__dot { animation: none; } } /* ---- Pricing / subscription modal (editorial, compact) ---- */ .pricing-modal-head { max-width: 34rem; } .pricing-modal-eyebrow { margin: 0 0 0.5rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--news-muted); } .pricing-modal-title { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800; line-height: 1.1; color: var(--ink); } .pricing-modal-sub { margin: 0.6rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); } .pricing-plan-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .pricing-plan-card { position: relative; display: flex; flex-direction: column; padding: 1.15rem 1.15rem 1.2rem; border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06); transition: transform 0.16s ease, box-shadow 0.16s ease; } .pricing-plan-card:hover { transform: translateY(-2px); box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.1); } .pricing-plan-card--featured { background: var(--news-paper-contrast); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.13); } .pricing-plan-badge { position: absolute; top: -0.72rem; left: 1rem; display: inline-flex; padding: 0.28rem 0.55rem; border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-ink); color: var(--news-paper); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .pricing-plan-card__name { margin: 0; font-size: 0.92rem; font-weight: 800; color: var(--ink); } .pricing-plan-card__price { margin-top: 0.35rem; font-family: var(--font-display, Georgia, serif); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--ink); } .pricing-plan-card__desc { margin: 0.55rem 0 0; flex: 1 1 auto; font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted); } .pricing-plan-card__meta { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.85rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--ink); } .pricing-plan-card__meta svg { width: 1rem; height: 1rem; flex-shrink: 0; color: #2f6f68; } .pricing-plan-card__cta { margin-top: 1rem; width: 100%; border-radius: 2px; } .pricing-includes { margin-top: 1.15rem; padding: 0.8rem 1rem; border: 1px dashed rgba(26, 26, 26, 0.32); border-radius: 2px; background: var(--news-paper); display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.1rem; } .pricing-includes__label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--news-muted); } .pricing-includes__list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.95rem; margin: 0; padding: 0; list-style: none; } .pricing-includes__list li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--ink); } .pricing-includes__list li::before { content: '✓'; color: #2f6f68; font-weight: 800; } @media (max-width: 640px) { .pricing-plan-grid { grid-template-columns: 1fr; gap: 0.7rem; } .pricing-plan-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; padding: 1rem 1.1rem; column-gap: 0.85rem; } .pricing-plan-card__name { flex: 1 1 auto; order: 1; } .pricing-plan-card__price { order: 2; margin-top: 0; font-size: 1.6rem; } .pricing-plan-card__desc { order: 3; flex: 1 1 100%; margin-top: 0.35rem; } .pricing-plan-card__meta { order: 4; margin-top: 0.55rem; } .pricing-plan-card__cta { order: 5; margin-top: 0.75rem; } } .get-started-flow { min-height: calc(100vh - 9.5rem); display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(2rem, 4vw, 3.25rem); padding: clamp(0.75rem, 2.4vw, 2rem) 1.25rem clamp(2.25rem, 5vw, 4rem); color: #20201f; } .get-started-flow__brand { position: absolute; top: 1.75rem; left: clamp(1.5rem, 5vw, 4rem); display: inline-flex; align-items: center; gap: 0.65rem; color: #171717; font-weight: 720; letter-spacing: -0.01em; } .get-started-flow__mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid rgba(24, 24, 23, 0.12); border-radius: 8px; background: #ffffff; color: #2f6f68; box-shadow: 0 8px 22px rgba(24, 24, 23, 0.08); } .get-started-flow__body { width: min(100%, 1180px); margin: 0 auto; text-align: center; } .get-started-flow__eyebrow { margin-bottom: 0.75rem; color: #77736b; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .get-started-flow h1 { max-width: 780px; margin: 0 auto; color: #20201f; font-family: var(--font-sans, system-ui, sans-serif); font-size: clamp(2.15rem, 5vw, 3.7rem); line-height: 1.04; font-weight: 780; letter-spacing: 0; } .get-started-flow h1 + p { max-width: 610px; margin: 1rem auto 0; color: #6c6962; font-size: 1rem; line-height: 1.65; } .get-started-flow__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(1rem, 2.4vw, 1.75rem); margin-top: clamp(1.35rem, 3.3vw, 2.25rem); } .get-started-card { min-height: 17rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 2px solid rgba(24, 24, 23, 0.28); border-radius: 8px; background: #ffffff; color: #20201f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 18px 48px rgba(24, 24, 23, 0.07); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; text-align: center; } .get-started-card:hover { transform: translateY(-2px); border-color: rgba(47, 111, 104, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 60px rgba(24, 24, 23, 0.10); } .get-started-card:focus-visible { outline: none; border-color: #2f6f68; box-shadow: 0 0 0 4px rgba(47, 111, 104, 0.14), 0 24px 60px rgba(24, 24, 23, 0.10); } .get-started-card:disabled { cursor: wait; opacity: 0.74; } .get-started-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-bottom: 1.25rem; border: 2px solid rgba(26, 26, 26, 0.12); border-radius: 1.15rem; background: #f6e7bd; color: #2f6f68; box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.07); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .get-started-flow__cards .get-started-card:nth-child(2) .get-started-card__icon { background: #e6e8ff; color: #5b5f97; } .get-started-flow__ats-icon { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-bottom: 1.25rem; border: 2px solid rgba(26, 26, 26, 0.12); border-radius: 1.15rem; background: #dff0e4; color: #2f6f68; box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.07); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .get-started-card:hover .get-started-card__icon, .get-started-flow__ats.get-started-card:hover .get-started-flow__ats-icon { border-color: rgba(26, 26, 26, 0.18); transform: translateY(-1px); } .get-started-card__icon svg { width: 100%; height: 100%; } .get-started-card__icon .get-started-wizard-sheet, .get-started-flow__ats-icon .get-started-wizard-sheet { position: relative; display: block; width: 3.85rem; aspect-ratio: 0.72; border: 2px solid var(--news-rule); background: #fffaf0; box-shadow: 5px 5px 0 rgba(169, 112, 39, 0.16); transform: rotate(-3deg); transition: transform 0.18s ease, box-shadow 0.18s ease; } .get-started-card__icon .get-started-wizard-sheet:not(.get-started-wizard-sheet--upload) { padding: 0.55rem; } .get-started-card:hover .get-started-wizard-sheet, .get-started-flow__ats.get-started-card:hover .get-started-wizard-sheet { transform: translateY(-1px) rotate(-3deg); box-shadow: 7px 7px 0 rgba(47, 111, 104, 0.18); } .get-started-card__icon .get-started-wizard-sheet:not(.get-started-wizard-sheet--upload) > span:not(.get-started-sheet-badge) { display: block; height: 0.28rem; margin-bottom: 0.34rem; background: rgba(26, 26, 26, 0.14); } .get-started-card__icon .get-started-wizard-sheet:not(.get-started-wizard-sheet--upload) > span:first-child { width: 58%; height: 0.48rem; background: #2f6f68; } .get-started-card__icon .get-started-wizard-sheet:not(.get-started-wizard-sheet--upload) > span:nth-child(2) { width: 86%; } .get-started-card__icon .get-started-wizard-sheet:not(.get-started-wizard-sheet--upload) > span:nth-child(3) { width: 72%; } .get-started-wizard-sheet--upload { width: 3.75rem !important; aspect-ratio: 0.78; border-radius: 2px; background: #f8f9ff !important; border-color: var(--news-rule); box-shadow: 5px 5px 0 rgba(91, 95, 151, 0.16); transform: rotate(2deg); overflow: hidden; } .get-started-card:hover .get-started-wizard-sheet--upload { transform: translateY(-1px) rotate(2deg); box-shadow: 7px 7px 0 rgba(91, 95, 151, 0.18); } .get-started-upload-fold { position: absolute; top: -2px; right: -2px; width: 1.15rem; height: 1.15rem !important; margin: 0 !important; border-left: 2px solid var(--news-rule); border-bottom: 2px solid var(--news-rule); background: #d9dcff !important; } .get-started-upload-lines { position: absolute; left: 0.58rem; right: 0.58rem; top: 0.72rem; display: block; margin: 0 !important; } .get-started-upload-lines span { display: block; height: 0.25rem; margin-bottom: 0.32rem; background: rgba(91, 95, 151, 0.24); } .get-started-upload-lines span:first-child { width: 62%; height: 0.38rem; background: #5b5f97; } .get-started-upload-arrow { position: absolute; left: 50%; bottom: 0.48rem; display: inline-flex !important; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem !important; margin: 0 !important; border: 2px solid #fff; border-radius: 999px; background: #5b5f97 !important; color: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); transform: translateX(-50%); } .get-started-upload-arrow svg { width: 0.9rem !important; height: 0.9rem !important; } .get-started-wizard-sheet--check { border-radius: 0 0 2px 2px; background: #f4fff7 !important; padding: 0.7rem 0.55rem 0.5rem; } .get-started-check-clip { position: absolute; left: 50%; top: -0.45rem; display: block; width: 1.7rem !important; height: 0.75rem !important; margin: 0 !important; border: 2px solid var(--news-rule); background: #2f6f68 !important; transform: translateX(-50%); } .get-started-check-line { display: block; height: 0.25rem; margin-bottom: 0.32rem; background: rgba(26, 26, 26, 0.14); } .get-started-check-line:nth-of-type(2) { width: 86%; } .get-started-check-line:nth-of-type(3) { width: 66%; } .get-started-check-score { display: inline-flex !important; align-items: center; justify-content: center; width: 2.1rem !important; height: 1.05rem !important; margin-top: 0.15rem !important; background: rgba(47, 111, 104, 0.12) !important; color: #2f6f68; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.04em; } .get-started-sheet-badge { position: absolute; right: -0.45rem; bottom: 0.55rem; display: inline-flex !important; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin: 0 !important; border: 2px solid #fff; border-radius: 999px; background: var(--news-ink); color: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); } .get-started-wizard-sheet--check .get-started-sheet-badge { background: #2f6f68; } .get-started-sheet-badge svg { width: 0.82rem !important; height: 0.82rem !important; color: currentColor; } .get-started-card__spinner { width: 2.25rem; height: 2.25rem; border: 2px solid rgba(47, 111, 104, 0.18); border-top-color: #2f6f68; border-radius: 999px; animation: get-started-spin 0.85s linear infinite; } @keyframes get-started-spin { to { transform: rotate(360deg); } } .get-started-card__title { color: #242321; font-size: 1.15rem; font-weight: 720; line-height: 1.25; } .get-started-card__desc { max-width: 18rem; margin-top: 0.55rem; color: #746f66; font-size: 0.95rem; line-height: 1.5; } .get-started-flow__secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; margin-top: 1.35rem; color: #77736b; font-size: 0.88rem; } .get-started-flow__link { cursor: pointer; color: #2f6f68; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ATS upload card: now lives in the same choice grid as the two builder cards. */ .get-started-flow__ats { justify-content: flex-start; text-align: center; } .get-started-flow__ats-icon { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin-bottom: 1.25rem; flex-shrink: 0; color: #2f6f68; } .get-started-flow__ats-icon svg { width: 100%; height: 100%; } .get-started-flow__ats-form { width: 100%; margin-top: auto; padding-top: 1.15rem; display: grid; gap: 0.75rem; } .get-started-flow__ats-file-label { display: block; width: 100%; min-width: 0; cursor: pointer; } .get-started-flow__ats-file { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 3.25rem; padding: 0.62rem 0.75rem; border: 1px solid rgba(24, 24, 23, 0.12); border-radius: 8px; background: #fbfaf8; color: #242321; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; text-align: left; } .get-started-flow__ats-file.has-file { border-color: rgba(47, 111, 104, 0.38); background: rgba(47, 111, 104, 0.055); } .get-started-flow__ats-file-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 7px; background: rgba(47, 111, 104, 0.10); color: #2f6f68; } .get-started-flow__ats-file-icon svg { width: 1.1rem; height: 1.1rem; } .get-started-flow__ats-file-copy { display: flex; min-width: 0; flex-direction: column; } .get-started-flow__ats-file-copy strong { display: block; color: #242321; font-size: 0.88rem; font-weight: 720; line-height: 1.2; } .get-started-flow__ats-file-copy small { margin-top: 0.16rem; color: #7a756c; font-size: 0.72rem; line-height: 1.2; } .get-started-flow__ats-file:hover { border-color: #2f6f68; color: #242321; background: rgba(47, 111, 104, 0.05); } .get-started-flow__ats-analyze { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3rem; border: 0; padding: 0.66rem 1.25rem; border-radius: 8px; background: #2f6f68; color: #ffffff; font-size: 0.9rem; font-weight: 700; transition: background 0.18s ease, opacity 0.18s ease; } .get-started-flow__ats-analyze:hover:not(:disabled) { background: #285f59; } .get-started-flow__ats-analyze:disabled { opacity: 0.5; cursor: not-allowed; } .get-started-flow__ats-note { padding-top: 0.1rem; } .get-started-flow__ats-label { display: block; margin-bottom: 0.35rem; color: #77736b; font-size: 0.78rem; text-align: left; } /* #app-scoped + !important to beat the global editorial textarea rule (#app textarea forces a square #1a1a1a border). */ #app textarea.get-started-flow__ats-textarea { width: 100%; min-height: 2.8rem; max-height: 4.8rem; padding: 0.52rem 0.68rem; border: 1px solid rgba(24, 24, 23, 0.14) !important; border-radius: 8px !important; background: #ffffff; color: #242321; font-size: 0.82rem; line-height: 1.35; resize: none; } #app textarea.get-started-flow__ats-textarea:focus { outline: none; border-color: #2f6f68 !important; box-shadow: 0 0 0 3px rgba(47, 111, 104, 0.12); } @media (max-width: 767px) { .get-started-flow { min-height: calc(100vh - 7rem); gap: 2rem; padding: 0.75rem 0.75rem 2rem; } .get-started-flow__brand { position: static; align-self: center; } .get-started-flow h1 { font-size: 2rem; } .get-started-flow h1 + p { font-size: 0.94rem; } .get-started-flow__cards { grid-template-columns: 1fr; margin-top: 1.5rem; } .get-started-card { min-height: 12.25rem; padding: 1.5rem; } .get-started-card__icon { width: 4rem; height: 4rem; margin-bottom: 0.9rem; } .get-started-flow__ats.get-started-card { min-height: auto; } .get-started-flow__ats .get-started-card__desc { max-width: 19rem; } .get-started-flow__ats-icon { width: 4rem; height: 4rem; margin-bottom: 0.9rem; } .get-started-card__icon .get-started-wizard-sheet, .get-started-flow__ats-icon .get-started-wizard-sheet { width: 3.15rem; } .get-started-wizard-sheet--upload { width: 3rem !important; } .get-started-flow__ats-form { padding-top: 0.9rem; gap: 0.6rem; } .get-started-flow__ats-file { min-height: 3rem; } .get-started-flow__ats-label { display: none; } #app textarea.get-started-flow__ats-textarea { min-height: 2.45rem; max-height: 2.45rem; } .get-started-flow__secondary { flex-direction: column; gap: 0.35rem; } } .newspaper-btn-solid { border-radius: 2px !important; background: var(--news-ink) !important; color: #fff !important; border: 2px solid var(--news-ink) !important; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.7rem !important; box-shadow: none !important; } .newspaper-btn-solid:hover { background: #2a2a2a !important; } .newspaper-btn-ghost { border-radius: 2px !important; border: 2px solid var(--news-rule) !important; background: transparent !important; color: var(--news-ink) !important; font-weight: 600; letter-spacing: 0.03em; } .newspaper-btn-ghost:hover { background: rgba(0, 0, 0, 0.05) !important; } /* Range slider — visible track (appearance-none hides default) */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 6px; background: var(--border); outline: none; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 10px; border-radius: 6px; background: var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; margin-top: -5px; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } input[type="range"]::-moz-range-track { width: 100%; height: 10px; border-radius: 6px; background: var(--border); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* Modal / card surfaces: rounded corners, borders, shadows */ .form-section { padding: 0; margin-bottom: 0; background: transparent; border: none; } /* ── Accordion (divided style) ── */ .accordion-section { margin-bottom: 0; background: transparent; border: none; border-radius: 0; overflow: visible; cursor: pointer; position: relative; } .accordion-section::before { display: none; } .accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: transparent; border: none; cursor: pointer; text-align: left; transition: background 0.15s ease; position: relative; z-index: 1; gap: 12px; } .accordion-trigger:hover { background: rgba(37, 99, 235, 0.03); } .accordion-trigger:focus { outline: none; } .accordion-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0.75rem; } .accordion-trigger--with-action { cursor: default; } .accordion-trigger-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; flex-wrap: nowrap; } .accordion-trigger-main:focus { outline: none; } .accordion-trigger-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0.5rem; } .accordion-trigger--with-action .ai-improve-btn { margin-left: auto; margin-right: 0; } /* Chevron indicator */ .accordion-trigger::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: rotate(-45deg); transition: transform 0.2s ease, border-color 0.2s ease; flex-shrink: 0; } .accordion-section.is-open .accordion-trigger::after { transform: rotate(45deg); border-color: var(--accent); } .accordion-section:not(.is-open):hover .accordion-trigger::after { border-color: #6b7280; } /* Section icon — each wizard step gets its own accent (set via --step-accent / --step-accent-soft modifier classes below) instead of one uniform color, so the step list reads as a distinct, more illustrative set rather than identical grey tiles. Falls back to the theme accent if a step has no modifier class. */ .accordion-trigger .section-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; transition: background 0.2s ease, transform 0.15s ease; } .accordion-section:not(.is-open) .accordion-trigger .section-icon { background: var(--step-accent-soft, #f3f4f6); } .accordion-section.is-open .accordion-trigger .section-icon { background: var(--step-accent-soft, var(--accent-soft)); } .accordion-section:not(.is-open):hover .accordion-trigger .section-icon { background: var(--step-accent-hover, #e5e7eb); transform: scale(1.05); } .accordion-trigger .section-icon svg { width: 21px; height: 21px; transition: color 0.15s ease; } .accordion-section:not(.is-open) .accordion-trigger .section-icon svg { color: var(--step-accent-muted, #9ca3af); } .accordion-section.is-open .accordion-trigger .section-icon svg { color: var(--step-accent, var(--accent)); } .accordion-section:not(.is-open):hover .accordion-trigger .section-icon svg { color: var(--step-accent, #6b7280); } /* Per-step colors — order matches the wizard: About Me, Design, Summary, Work Experience, Education, Skills, Languages, Projects. */ .section-icon--basic { --step-accent: #2563eb; --step-accent-soft: #dbeafe; --step-accent-hover: #bfdbfe; --step-accent-muted: #60a5fa; } .section-icon--design { --step-accent: #db2777; --step-accent-soft: #fce7f3; --step-accent-hover: #fbcfe8; --step-accent-muted: #f472b6; } .section-icon--summary { --step-accent: #7c3aed; --step-accent-soft: #ede9fe; --step-accent-hover: #ddd6fe; --step-accent-muted: #a78bfa; } .section-icon--experience { --step-accent: #d97706; --step-accent-soft: #fef3c7; --step-accent-hover: #fde68a; --step-accent-muted: #fbbf24; } .section-icon--education { --step-accent: #059669; --step-accent-soft: #d1fae5; --step-accent-hover: #a7f3d0; --step-accent-muted: #34d399; } .section-icon--skills { --step-accent: #0891b2; --step-accent-soft: #cffafe; --step-accent-hover: #a5f3fc; --step-accent-muted: #22d3ee; } .section-icon--languages { --step-accent: #ea580c; --step-accent-soft: #ffedd5; --step-accent-hover: #fed7aa; --step-accent-muted: #fb923c; } .section-icon--projects { --step-accent: #4f46e5; --step-accent-soft: #e0e7ff; --step-accent-hover: #c7d2fe; --step-accent-muted: #818cf8; } /* Title text */ .accordion-trigger .section-label { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: 36px; } .accordion-trigger .section-label p { margin: 0; font-weight: 600; font-size: 0.9rem; transition: color 0.15s ease; } .accordion-section:not(.is-open) .accordion-trigger .section-label p { color: #374151; } .accordion-section.is-open .accordion-trigger .section-label p { color: var(--ink); } .accordion-section:not(.is-open):hover .accordion-trigger .section-label p { color: var(--ink); } /* Hide hint text when section is expanded */ .accordion-section.is-open .accordion-trigger .section-label > span:not(.wizard-title-guide) { display: none; } .accordion-section.is-open .accordion-trigger .section-label .wizard-title-guide { display: flex; } .wizard-solo-form .wizard-basic-step.is-open { background: transparent !important; } .wizard-solo-form .wizard-basic-step.is-open .accordion-trigger[aria-controls="section-basic-info"] { align-items: flex-start; padding: 0.95rem 1.05rem 0.8rem; background: linear-gradient(90deg, rgba(47, 111, 104, 0.10), rgba(255, 255, 255, 0.20)); } .wizard-solo-form .wizard-basic-step.is-open .accordion-trigger[aria-controls="section-basic-info"] .section-icon { width: 2.2rem; height: 2.2rem; margin-top: 0.05rem; border: 2px solid var(--step-accent, rgba(47, 111, 104, 0.45)); background: #ffffff !important; box-shadow: 2px 2px 0 rgba(47, 111, 104, 0.14); } .wizard-solo-form .wizard-basic-step.is-open .accordion-trigger[aria-controls="section-basic-info"] .section-icon svg { color: var(--step-accent, #2f6f68) !important; } .wizard-solo-form .wizard-basic-step.is-open .accordion-trigger[aria-controls="section-basic-info"] .wizard-title-guide { gap: 0; } /* Rearranged wizard title bar: align the icon with the top of the multi-line step chips + headline block instead of centering it against the whole taller trigger. */ .wizard-basic-step .accordion-trigger .section-icon, .wizard-summary-step .accordion-trigger .section-icon { margin-top: 0.15rem; } .wizard-basic-step .accordion-trigger, .wizard-summary-step .accordion-trigger { align-items: flex-start; } /* ── Photo options after upload (wizard): premium teal chips, sharp corners ── */ .wizard-basic-step #section-basic-info .wizard-basic-photo-panel { /* Selected chips + slider use var(--accent): retint locally to wizard teal. */ --accent: #2f6f68; --accent-hover: #285f59; --accent-soft: rgba(47, 111, 104, 0.12); } .wizard-basic-step #section-basic-info .wizard-photo-opt-btn { border-radius: 2px !important; } .wizard-basic-step #section-basic-info .wizard-photo-opt-btn.is-active { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); } /* Photo size slider panel: editorial sharp card instead of rounded-2xl gray. */ .wizard-basic-step #section-basic-info .wizard-basic-photo-panel .rounded-2xl { border-radius: 2px !important; border: 1px solid rgba(26, 26, 26, 0.18) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05); } /* Remove-photo action: quiet editorial chip instead of bare red link. */ .wizard-basic-step #section-basic-info .wizard-basic-photo-panel button.text-red-600 { padding: 0.28rem 0.6rem; border: 1px solid rgba(220, 38, 38, 0.4); border-radius: 2px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .wizard-basic-step #section-basic-info .wizard-basic-photo-panel button.text-red-600:hover { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.7); } /* ── Summary step (wizard): paper writing sheet + counter + teal AI button ── */ .wizard-summary-step #section-summary textarea { min-height: 300px; padding: 1.1rem 1.2rem !important; border: 1px solid rgba(26, 26, 26, 0.18) !important; border-radius: 2px !important; background: repeating-linear-gradient(0deg, transparent 0 1.72em, rgba(47, 111, 104, 0.10) 1.72em calc(1.72em + 1px)) 0 1.1rem / 100% 100% no-repeat, #fff !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05); color: var(--news-ink); font-size: 0.98rem; line-height: 1.72em; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .wizard-summary-step #section-summary textarea:focus { border-color: rgba(47, 111, 104, 0.62) !important; box-shadow: 4px 4px 0 rgba(47, 111, 104, 0.12); outline: none; } .wizard-summary-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.6rem; } .wizard-summary-count { display: inline-flex; align-items: center; padding: 0.22rem 0.55rem; border: 1px solid rgba(26, 26, 26, 0.22); border-radius: 2px; background: #fff; color: var(--news-muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .wizard-summary-count.is-good { border-color: #2f6f68; background: #2f6f68; color: #fff; } .wizard-summary-count.is-over { border-color: #b45309; background: #fef3c7; color: #92400e; } .wizard-summary-hint { color: var(--news-muted); font-size: 0.74rem; font-weight: 600; } .wizard-summary-step .ai-improve-btn, .ai-improve-btn--summary-style { border: 2px solid #2f6f68 !important; border-radius: 2px !important; background: #2f6f68 !important; color: #fff !important; padding: 0.45rem 0.8rem !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); transition: background-color 0.15s ease, transform 0.14s ease, box-shadow 0.14s ease; } .wizard-summary-step .ai-improve-btn:hover:not(:disabled), .ai-improve-btn--summary-style:hover:not(:disabled) { background: #285f59 !important; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.16); } .wizard-summary-step .ai-improve-btn:disabled, .ai-improve-btn--summary-style:disabled { opacity: 0.45; } .wizard-summary-step .ai-improve-btn .ai-spinner, .ai-improve-btn--summary-style .ai-spinner { border-color: #fff !important; border-top-color: transparent !important; } .wizard-summary-tips { margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid rgba(47, 111, 104, 0.28); border-radius: 2px; background: rgba(47, 111, 104, 0.05); box-shadow: 2px 2px 0 rgba(47, 111, 104, 0.06); } .wizard-summary-tips__title { display: block; margin-bottom: 0.5rem; color: #2f6f68; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .wizard-summary-tips__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; } .wizard-summary-tips__list li { position: relative; padding-left: 1.15rem; color: var(--news-ink); font-size: 0.8rem; line-height: 1.4; } .wizard-summary-tips__list li::before { content: ''; position: absolute; left: 0; top: 0.32em; width: 0.55rem; height: 0.55rem; background: #2f6f68; border-radius: 1px; transform: rotate(45deg); } @media (max-width: 640px) { .wizard-summary-tips__list { grid-template-columns: 1fr; } } .wizard-basic-title__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; } .wizard-basic-title__step, .wizard-basic-title__tag { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0.18rem 0.42rem; border: 1px solid var(--news-rule); background: #fff; color: var(--news-ink); font-size: 0.58rem; font-weight: 900; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; } .wizard-basic-title__step { background: #2f6f68; border-color: #2f6f68; color: #fff; } .wizard-basic-title__headline { display: block; margin-top: 0.35rem; color: var(--news-ink); font-family: var(--font-display, Georgia, serif); font-size: clamp(1.05rem, 1.1vw, 1.3rem); font-weight: 800; line-height: 1.05; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } .wizard-basic-title__help { display: block; max-width: 62rem; margin-top: 0.25rem; color: var(--news-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } @media (max-width: 767px) { .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] { align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.9rem; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .section-label, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-title-guide, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-title-guide > span { width: 100%; min-width: 0; max-width: 100%; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .section-label { flex: 1 1 auto; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__meta { flex-wrap: wrap; width: 100%; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__step, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__tag, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__headline, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__help { overflow-wrap: normal; word-break: normal; hyphens: manual; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__step, .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__tag { flex: 0 1 auto; white-space: nowrap; } .builder-scope .wizard-basic-step .accordion-trigger[aria-controls="section-basic-info"] .wizard-basic-title__headline { width: 100%; max-width: 100%; font-size: 1.08rem; line-height: 1.18; } .wizard-basic-title__help { display: none; } /* Any header that pairs the title-guide with an inline action button (e.g. Summary's "AI Improve") must stack them on mobile — keeping them side-by-side here squeezes the headline into a sliver next to the button, wrapping it into several cramped lines that visually collide with the button and clip the tag badge (confirmed via screenshot: badge border cut through its own text, headline crammed to ~115px). */ .accordion-trigger--with-action { flex-wrap: wrap; row-gap: 0.6rem; } .accordion-trigger--with-action .accordion-trigger-main { flex: 1 1 100%; width: 100%; } .accordion-trigger--with-action .ai-improve-btn { flex: 0 0 auto; margin-left: calc(40px + 12px); } } .wizard-basic-panel-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; min-width: 0; } .wizard-basic-panel-label span { color: var(--news-ink); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; } .wizard-basic-panel-label small { color: var(--news-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; min-width: 0; text-align: right; overflow-wrap: anywhere; } .wizard-basic-step.is-open #section-basic-info .wizard-basic-field { min-width: 0; } /* Body */ .accordion-section:not(.is-open) .accordion-body { pointer-events: none; } .accordion-section.is-open .accordion-body { pointer-events: auto; } .accordion-body { padding: 0 20px 20px 20px; overflow: hidden; } /* Professional Summary: +50% vertical editing room */ #section-summary.accordion-body { min-height: 225px; } #section-experience.accordion-body { min-height: 150px; } /* Languages: give the panel comparable editing room to Skills so it doesn't collapse into a cramped strip when empty or with a single entry. */ #section-languages.accordion-body { min-height: 300px; } .accordion-body--scrollable { /* Let the Design & Styling panel grow to its full content so its bottom edge lines up with the tall preview page instead of stopping ~400px short behind an inner scroll. */ max-height: min(100vh, 1100px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .builder-checklist { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05); } .builder-checklist-item { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid rgba(26, 26, 26, 0.16); background: var(--news-paper); color: var(--news-ink); font-size: 12px; font-weight: 700; text-align: left; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .builder-checklist-item:hover { border-color: var(--news-rule); background: #fff; transform: translate(-1px, -1px); } .builder-checklist-item span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--news-rule); background: #fff; font-size: 10px; font-weight: 900; } .builder-checklist-item.is-complete { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.45); } .builder-checklist-item.is-complete span { background: #059669; border-color: #059669; color: #fff; } /* ── Wizard Steps Bar (newspaper theme) ── */ .wizard-steps-bar { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; } /* Connector between wizard step buttons (fills when prior section has data) */ .wizard-step-connector { align-self: center; flex-shrink: 0; height: 2px; min-width: 0.5rem; width: 0.75rem; } @media (min-width: 640px) { .wizard-step-connector { width: 1.25rem; } } .wizard-steps-bar::-webkit-scrollbar { height: 4px; } .wizard-steps-bar::-webkit-scrollbar-track { background: transparent; } .wizard-steps-bar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; } .wizard-step-btn { min-width: 2.5rem; border-radius: 2px; max-width: min(13rem, 44vw); white-space: normal !important; overflow-wrap: anywhere; line-height: 1.12; } .wizard-step-btn.active { background: var(--news-ink, #1a1a1a); color: #fff; } @media (min-width: 640px) { .wizard-step-btn { min-width: auto; } } /* Landing hero mock: mobile chips show step titles; don’t force 2.5rem min-width. */ .landing-product-mockup .landing-mock-wizard-bar--mobile.wizard-steps-bar .wizard-step-btn { min-width: auto; } /* ── Wizard Navigation (newspaper theme) ── */ .wizard-nav { background: var(--news-paper-contrast, #faf8f3); border: 2px solid var(--news-rule, #1a1a1a); border-radius: 2px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); } .wizard-nav button { border-radius: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.75rem; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.15; } .wizard-nav button:not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } .wizard-premium-step { padding: 0; } .builder-scope.builder-newspaper .builder-frame > .lg\:grid > div:first-child > .wizard-premium-step { flex: 1 1 auto; min-height: 0; } .wizard-premium-card { display: grid; min-height: min(440px, calc(100dvh - 18rem)); grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 1rem; padding: clamp(1rem, 2.2vw, 2rem); border: 0; background: linear-gradient(135deg, rgba(47, 111, 104, 0.10), transparent 38%), repeating-linear-gradient(0deg, rgba(26,26,26,0.025) 0 1px, transparent 1px 10px), var(--news-paper-contrast); } .wizard-premium-card:not(.wizard-premium-card--welcome) { grid-template-columns: minmax(0, 1fr); min-height: min(390px, calc(100dvh - 18rem)); } .wizard-premium-card--welcome { height: 100%; min-height: min(520px, calc(100dvh - 14rem)); } .wizard-premium-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 16rem; } .wizard-premium-sheet { width: min(15rem, 82%); aspect-ratio: 0.72; padding: 1.2rem; border: 2px solid var(--news-rule); background: #fff; box-shadow: 10px 10px 0 rgba(47, 111, 104, 0.14); transform: rotate(-2deg); } .wizard-premium-sheet span { display: block; height: 0.55rem; margin-bottom: 0.7rem; background: rgba(26, 26, 26, 0.14); } .wizard-premium-sheet span:first-child { width: 58%; height: 1rem; background: #2f6f68; } .wizard-premium-sheet span:nth-child(2) { width: 86%; } .wizard-premium-sheet span:nth-child(3) { width: 72%; } .wizard-premium-orbit { position: absolute; right: 12%; bottom: 13%; display: grid; width: 4.25rem; height: 4.25rem; place-items: center; border: 2px solid var(--news-rule); border-radius: 999px; background: #2f6f68; color: #fff; font-family: var(--font-display, Georgia, serif); font-weight: 900; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12); } .wizard-premium-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; } .wizard-premium-copy--wide { max-width: 58rem; justify-self: center; width: 100%; } .wizard-premium-kicker { width: fit-content; max-width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--news-rule); background: #fff; color: var(--news-ink); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; overflow-wrap: anywhere; } .wizard-premium-copy h2 { margin: 0.8rem 0 0; color: var(--news-ink); font-family: var(--font-display, Georgia, serif); font-size: clamp(1.8rem, 4.6vw, 3.6rem); font-weight: 900; line-height: 0.98; letter-spacing: 0; overflow-wrap: anywhere; } .wizard-premium-copy p { max-width: 42rem; margin: 0.9rem 0 0; color: var(--news-muted); font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; } .wizard-premium-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; } .wizard-premium-primary, .wizard-premium-secondary, .wizard-choice-card { min-width: 0; border-radius: 2px; overflow-wrap: anywhere; } .wizard-premium-primary, .wizard-premium-secondary { min-height: 2.75rem; padding: 0.75rem 1rem; border: 2px solid var(--news-rule); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .wizard-premium-primary { background: var(--news-ink); color: #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12); } .wizard-premium-secondary { background: #fff; color: var(--news-ink); } .wizard-premium-time { margin-top: 1rem; color: var(--news-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .wizard-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; } .wizard-choice-grid--levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wizard-choice-card { display: flex; min-height: 8.5rem; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.7rem; padding: 1rem; border: 2px solid rgba(26, 26, 26, 0.22); background: rgba(255, 255, 255, 0.76); color: var(--news-ink); text-align: left; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease; } .wizard-choice-card:hover, .wizard-choice-card.is-selected { transform: translate(-2px, -2px); border-color: var(--news-rule); background: #fff; box-shadow: 5px 5px 0 rgba(47, 111, 104, 0.13); } .wizard-choice-card__icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--news-rule); background: #2f6f68; color: #fff; font-size: 1.25rem; font-weight: 900; } .wizard-choice-card strong { font-size: 1rem; line-height: 1.15; overflow-wrap: anywhere; } .wizard-choice-card small { color: var(--news-muted); font-size: 0.78rem; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; } .wizard-choice-card--compact { min-height: 4.5rem; justify-content: center; } .wizard-target-form { display: grid; gap: 0.85rem; margin-top: 1.2rem; } .wizard-target-form label { display: grid; gap: 0.35rem; padding: 0.8rem; border: 1px solid rgba(26, 26, 26, 0.16); background: rgba(255, 255, 255, 0.76); } .wizard-target-form label span { color: var(--news-ink); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; } .wizard-target-form .mobile-input { width: 100%; border: 0; border-bottom: 2px solid rgba(26, 26, 26, 0.22); border-radius: 0; background: transparent; font-weight: 700; outline: none; } .wizard-target-form textarea.mobile-input { min-height: 7rem; resize: vertical; } .wizard-target-actions { margin-top: 1.15rem; justify-content: flex-end; } @media (max-width: 900px) { .wizard-premium-card, .wizard-premium-card--welcome { grid-template-columns: minmax(0, 1fr); } .wizard-premium-visual { min-height: 10rem; } .wizard-choice-grid, .wizard-choice-grid--levels { grid-template-columns: minmax(0, 1fr); } } /* Wizard focus mode (before the Design step): the preview is hidden, so the grid collapses to a single centered, readable form column. The wrapper keeps its lg:grid class so the fixed-height / accordion-scroll / pinned-nav rules (which target `> .lg\:grid > div:first-child`) keep applying. */ @media (min-width: 1024px) { .builder-frame > .wizard-solo-form { grid-template-columns: minmax(0, 960px) !important; justify-content: center; } /* ── About me step (premium redesign) ───────────────────────────────── Same canvas language as the wizard-premium intro cards: teal corner wash over ruled paper. Photo panel left; the profession/title field spans the top as a headline row; name/email + phone/address sit in a 2×2 below. */ .wizard-solo-form .wizard-basic-step.is-open, .wizard-solo-form .wizard-summary-step.is-open { background: linear-gradient(135deg, rgba(47, 111, 104, 0.10), transparent 38%), repeating-linear-gradient(0deg, rgba(26, 26, 26, 0.025) 0 1px, transparent 1px 10px), var(--news-paper-contrast) !important; } .wizard-solo-form #section-basic-info { padding: 0.9rem 1.15rem 1.05rem !important; } .wizard-solo-form #section-basic-info > .wizard-basic-grid { display: grid; grid-template-columns: minmax(185px, 0.55fr) repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: stretch; } .wizard-solo-form #section-basic-info > .wizard-basic-grid > * { margin-top: 0 !important; } /* Profession/title = the headline field: spans both field columns. */ .wizard-solo-form #section-basic-info .wizard-basic-field--title { grid-column: 2 / -1; } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel { grid-row: 1 / span 3; display: flex; min-height: 100%; flex-direction: column; gap: 0.55rem; padding: 0.65rem; border: 2px solid var(--news-rule); background: rgba(255, 255, 255, 0.78); box-shadow: 4px 4px 0 rgba(47, 111, 104, 0.12); } /* The photo column is too narrow at any desktop width for the avatar and the position/shape controls to sit side by side — that reflow previously pushed Full Name / Email / Phone / Address off-screen below the fold. Same fix as the 1024–1240px range below, generalized to the whole >=1024px block. */ .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) > div { width: 100% !important; min-width: 0 !important; } .wizard-basic-panel-label { margin-bottom: 0.45rem; } .wizard-basic-panel-label span { font-size: 0.72rem; letter-spacing: 0.06em; } .wizard-basic-panel-label small { font-size: 0.62rem; letter-spacing: 0.06em; } .wizard-solo-form #section-basic-info .wizard-basic-field { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 0.7rem 0.85rem; border: 1px solid rgba(26, 26, 26, 0.16); background: rgba(255, 255, 255, 0.78); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.04); transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .wizard-solo-form #section-basic-info .wizard-basic-field:hover { border-color: rgba(47, 111, 104, 0.4); } .wizard-solo-form #section-basic-info .wizard-basic-field:focus-within { border-color: rgba(47, 111, 104, 0.62); background: #fff; box-shadow: 3px 3px 0 rgba(47, 111, 104, 0.12); } .wizard-solo-form #section-basic-info label { margin-bottom: 0.2rem !important; color: var(--news-ink) !important; font-size: 0.68rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0.02em; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; } .wizard-solo-form #section-basic-info .mobile-input { min-height: 2.25rem; padding: 0.42rem 0 !important; border-width: 0 0 2px !important; border-color: rgba(26, 26, 26, 0.22) !important; border-radius: 0 !important; background: transparent !important; color: var(--news-ink); font-size: 0.95rem; font-weight: 700; box-shadow: none !important; min-width: 0; text-overflow: ellipsis; } .wizard-solo-form #section-basic-info button { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } .wizard-solo-form #section-basic-info .mobile-input:focus { border-color: #2f6f68 !important; outline: none; } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) { gap: 0.45rem !important; } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) > div:first-child { gap: 0.35rem !important; width: 100%; } .wizard-solo-form #section-basic-info .wizard-photo-dropzone { position: relative; display: flex !important; align-items: center; justify-content: center; overflow: hidden; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; max-height: 13rem; padding: 0 !important; border-style: dashed !important; border-color: rgba(47, 111, 104, 0.42) !important; border-radius: 0.75rem !important; background: linear-gradient(135deg, rgba(47, 111, 104, 0.12), rgba(255, 255, 255, 0.82)), #f7f4ec !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); } .wizard-solo-form #section-basic-info .wizard-photo-dropzone:hover { transform: translate(-1px, -1px); border-color: #2f6f68 !important; box-shadow: 3px 3px 0 rgba(47, 111, 104, 0.12); } .wizard-solo-form #section-basic-info .wizard-photo-dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0.75rem !important; object-fit: cover; } .wizard-solo-form #section-basic-info .wizard-photo-dropzone svg { width: 2.45rem !important; height: 2.45rem !important; color: rgba(47, 111, 104, 0.58) !important; } .wizard-photo-dropzone__empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .wizard-photo-dropzone__badge { position: absolute; right: 0.25rem; bottom: 0.25rem; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border: 2px solid #fff; border-radius: 999px; background: #2f6f68; color: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.10); } .wizard-photo-dropzone__badge svg { width: 0.75rem !important; height: 0.75rem !important; color: currentColor !important; } /* Uploading a photo must NOT reflow the panel out of its column — that pushed Full Name / Email / Phone / Address off-screen below the fold. The photo panel keeps the same narrow column and grid-row before and after upload; position/shape controls stack as compact icon rows (see .wizard-photo-opt-row) instead of expanding sideways. */ .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel > div:nth-of-type(2) > div { width: 100% !important; min-width: 0 !important; } } @media (min-width: 1024px) and (max-width: 1240px) { .wizard-solo-form #section-basic-info > .wizard-basic-grid { grid-template-columns: minmax(132px, 0.58fr) repeat(2, minmax(0, 1fr)); } .wizard-solo-form #section-basic-info .wizard-basic-photo-panel { grid-row: 1 / span 3; } } .builder-scope #section-basic-info .wizard-photo-dropzone { position: relative; display: flex !important; align-items: center; justify-content: center; width: 6.9rem !important; height: 6.9rem !important; min-width: 6.9rem; min-height: 6.9rem; padding: 0 !important; overflow: hidden; border: 2px dashed rgba(47, 111, 104, 0.42) !important; border-radius: 0.75rem !important; background: linear-gradient(135deg, rgba(47, 111, 104, 0.12), rgba(255, 255, 255, 0.82)), #f7f4ec !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); } .builder-scope #section-basic-info .wizard-photo-dropzone:hover { transform: translate(-1px, -1px); border-color: #2f6f68 !important; box-shadow: 3px 3px 0 rgba(47, 111, 104, 0.12); } .builder-scope #section-basic-info .wizard-photo-dropzone img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0.75rem !important; object-fit: cover; } .builder-scope #section-basic-info .wizard-photo-dropzone > svg, .builder-scope #section-basic-info .wizard-photo-dropzone__empty > svg { width: 2.45rem !important; height: 2.45rem !important; color: rgba(47, 111, 104, 0.58) !important; } .builder-scope #section-basic-info .wizard-photo-dropzone__empty { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .builder-scope #section-basic-info .wizard-photo-dropzone__badge { position: absolute; right: 0.25rem; bottom: 0.25rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border: 2px solid #fff; border-radius: 999px; background: #2f6f68; color: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.10); } .builder-scope #section-basic-info .wizard-photo-dropzone__badge svg { width: 0.75rem !important; height: 0.75rem !important; color: currentColor !important; } /* Compact icon toggles for photo position/shape — a fixed-width row that never needs to grow wider than the photo panel itself, so uploading a photo doesn't reflow the surrounding layout (unlike the old full-width text-button rows). */ .wizard-photo-opt-row { display: flex; gap: 0.4rem; } .wizard-photo-opt-btn { flex: 1; display: flex; align-items: center; justify-content: center; height: 2.25rem; min-width: 0; padding: 0; border: 1px solid rgba(26, 26, 26, 0.16); border-radius: 0.6rem; background: rgba(255, 255, 255, 0.85); color: rgba(26, 26, 26, 0.5); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .wizard-photo-opt-btn svg { width: 1.35rem; height: 1.35rem; } .wizard-photo-opt-btn:hover { border-color: var(--accent); color: var(--accent); } .wizard-photo-opt-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } /* Final wizard step: Finish & Save (teal; NOT a Tailwind arbitrary class — the static Tailwind build can't be regenerated, so bg-[#…] won't exist). */ .wizard-nav .wizard-finish-btn { background: #2f6f68 !important; border-color: #2f6f68 !important; color: #ffffff !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12); } .wizard-nav .wizard-finish-btn:hover { background: #285f59 !important; border-color: #285f59 !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15); } /* ── Accordion Frame (newspaper theme) ── */ .accordion-frame { background: var(--news-paper-contrast, #faf8f3); border: 2px solid var(--news-rule, #1a1a1a); border-radius: 2px; overflow: hidden; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); } .accordion-frame .form-section, .accordion-frame .accordion-section { border: none; border-radius: 0; margin-bottom: 0; width: 100%; background: transparent; } .accordion-frame .accordion-section:not(:last-child) { border-bottom: 1px solid var(--news-rule, #1a1a1a); border-bottom-style: dashed; opacity: 1; } .accordion-frame .accordion-section.is-open { background: rgba(255, 255, 255, 0.6); } .accordion-frame .accordion-section.is-open + .accordion-section { border-top: none; } .accordion-frame .accordion-section.is-open .accordion-body { border-top: 1px dashed var(--news-rule, #1a1a1a); padding-top: 16px; } .accordion-frame .accordion-trigger { font-family: var(--font-display, Georgia, 'Times New Roman', serif); } /* Vue accordion transition */ .accordion-enter-active, .accordion-leave-active { transition: max-height 0.3s ease, opacity 0.25s ease; overflow: hidden; } .accordion-enter-from, .accordion-leave-to { max-height: 0; opacity: 0; } .accordion-enter-to, .accordion-leave-from { max-height: 2000px; opacity: 1; } /* Design Group Sub-sections */ .design-group { display: flex; flex-direction: column; gap: 0; margin: 0 -20px; padding: 0; width: calc(100% + 40px); } .design-subsection { padding: 16px 0; background: var(--paper); border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; transition: all 0.2s ease; width: 100%; box-sizing: border-box; } .design-subsection > * { padding-left: 20px; padding-right: 20px; } .design-subsection:first-child { border-top: none; } .design-subsection:last-child { border-bottom: none; } .design-subsection:hover { background: var(--paper-warm); border-color: var(--border-strong); } .design-subsection-title { font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .design-subsection-title svg { width: 16px; height: 16px; color: var(--ink-light); } /* A4 Proportional Preview Styles - wrapper width grows with zoom so container scrolls instead of clipping */ .resume-preview-wrapper { position: relative; min-width: 210mm; } .resume-preview-wheel-shield { position: absolute; inset: 0; z-index: 20; background: transparent; cursor: default; } .resume-preview-zoom-inner { transform-origin: top left; overflow: visible; } .resume-preview-zoom-content { position: relative; overflow: visible; } .resume-preview-input-layer { position: absolute; inset: 0; z-index: 15; background: transparent; cursor: text; touch-action: pan-y; } /* Preview column: show full preview; rely on page scroll (no inner scroll) */ .resume-preview-column { max-height: none; overflow-x: visible; overflow-y: visible; -webkit-overflow-scrolling: auto; min-height: 0; } /* Ensure preview wrapper doesn't shrink when zoomed so horizontal scroll works */ .resume-preview-wrapper { position: relative; flex-shrink: 0; } .preview-page-switcher { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 35; padding: 0.35rem; border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 2px; background: rgba(255, 255, 255, 0.56); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.045); opacity: 0.42; filter: saturate(0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.18s ease, filter 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .preview-page-switcher:hover, .preview-page-switcher:focus-within { opacity: 1; filter: saturate(1); background: rgba(255, 255, 255, 0.94); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .preview-page-switcher-btn { box-shadow: none !important; } .preview-page-switcher:hover .preview-page-switcher-btn:not(:disabled), .preview-page-switcher:focus-within .preview-page-switcher-btn:not(:disabled) { box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08) !important; } .preview-page-switcher-count { color: var(--news-ink) !important; } /* Mobile single-column view: the floating in-preview switcher is replaced by a static page-nav row sitting directly above the Edit button (see markup). */ @media (max-width: 1023px) { .preview-page-switcher { display: none !important; } } .mobile-preview-page-nav .preview-page-switcher-btn { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18) !important; } .mobile-preview-page-nav .preview-page-switcher-count { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 2px; padding: 0.4rem 0.5rem; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); } /* Fullscreen preview (big screens): scale the whole A4 page to fit the viewport, no scroll needed. */ .resume-preview-fullscreen-btn { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 35; padding: 0.5rem; border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 2px; background: rgba(255, 255, 255, 0.56); color: var(--news-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.045); opacity: 0.42; filter: saturate(0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: opacity 0.18s ease, filter 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .resume-preview-fullscreen-btn:hover, .resume-preview-fullscreen-btn:focus-visible { opacity: 1; filter: saturate(1); background: rgba(255, 255, 255, 0.94); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .resume-preview-fullscreen-stage.is-preview-fullscreen { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: var(--news-paper); padding: 1.5rem; overflow: auto; } @media (max-width: 1023px) { .resume-preview-fullscreen-btn { display: none !important; } } .resume-preview-scroller { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; } .resume-page { font-family: Arial, sans-serif; font-size: 16.8px; /* 20% larger than 14px */ line-height: 1.6; color: var(--text-color, #1a1a1a); width: 210mm; height: 297mm; min-height: 297mm; aspect-ratio: 8.27 / 11.69; background: var(--background-color, #ffffff); border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-sizing: border-box; position: relative; overflow: hidden; break-inside: avoid; transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out, border-color 0.35s ease-out; } .resume-page { border: 1px solid #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Matches server PDF/preview: narrow 10mm, normal 15mm, wide 22mm */ --resume-margin-inset: 15mm; } .resume-page[data-margins="narrow"] { --resume-margin-inset: 10mm; } .resume-page[data-margins="normal"] { --resume-margin-inset: 15mm; } .resume-page[data-margins="wide"] { --resume-margin-inset: 22mm; } /* Server HTML inside iframe already applies body padding; outer shell must not add a second inset. Three-class selectors beat later .professional-preview.resume-page padding rules. */ .resume-page.resume-preview-shell--iframe.professional-preview, .resume-page.resume-preview-shell--iframe.elegant-preview { padding: 0 !important; } /* The iframe paints the resume background (including the header band); the outer page must match it, otherwise the per-page top-margin inset on continuation pages (and the blank tail of a short page) reveals a near-white strip. `.elegant-preview` otherwise forces #fafafa, which mismatched the resume background color on pages 2+. */ .resume-page.resume-preview-shell--iframe.elegant-preview { background-color: var(--background-color, #ffffff) !important; } .resume-page-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; overflow: hidden; } .resume-page[data-border="narrow"] .resume-page-content { padding: 20px 30px 30px 30px; } .resume-page[data-border="wide"] .resume-page-content { padding: 40px 50px 50px 50px; } .resume-page[data-full-bg="true"] .resume-page-content { padding: 0; } .resume-page-inner { display: block; } .resume-preview-slice-window { position: absolute; left: 0; right: 0; overflow: hidden; z-index: 1; } .resume-preview-iframe { display: block; width: 100%; border: none; /* The parent overlay owns wheel + click replay; never let the iframe swallow page scroll. */ pointer-events: none; position: absolute; left: 0; top: 0; } @media (max-width: 1023px) { .resume-preview-wrapper { min-width: 0 !important; width: 100% !important; left: 0 !important; } /* Keep A4 width inside zoom layer; downscale via transform (see previewZoom* computed). */ .resume-preview-scroller { max-width: 100%; overflow-x: hidden; } } /* iPad / small laptop: two-column builder (lg) but preview column < A4 — same downscale as phone. */ @media (min-width: 1024px) and (max-width: 1279px) { .builder-scope .resume-preview-wrapper { min-width: 0 !important; width: 100% !important; max-width: 100%; left: 0 !important; flex-shrink: 1; } .builder-scope .resume-preview-scroller { max-width: 100%; overflow-x: hidden; } } .resume-page-break-fill { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; } /* Shared Template Base Styles */ .resume-page .header { padding-bottom: 20px; margin-bottom: 30px; } .resume-page .resume-field-placeholder { color: #9ca3af; } /* Client-side fallback preview (no server HTML): mirror header + photo layout from PDF/preview-html */ .resume-page .header-top-with-photo { display: flex; align-items: flex-start; gap: 20px; flex-wrap: nowrap; width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 0; } .resume-page .header-top-with-photo > .header { flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } .resume-page .header-top-with-photo.header-photo-top_left, .resume-page .header-top-with-photo.header-photo-top-left, .resume-page .header-top-with-photo.header-photo-top_right, .resume-page .header-top-with-photo.header-photo-top-right { flex-direction: row; align-items: flex-start; } .resume-page .header-top-with-photo .header-photo-wrap { flex: 0 0 auto; max-width: min(280px, 38%); } .resume-page .header-photo { object-fit: cover; display: block; max-width: 100%; } .resume-page .header-photo-square { border-radius: 6px; } .resume-page .header-photo-circle { border-radius: 50%; } .resume-page .header-photo-extra_small { width: 80px; height: 80px; } .resume-page .header-photo-small { width: 113px; height: 113px; } .resume-page .header-photo-medium { width: 156px; height: 156px; } .resume-page .header-photo-large { width: 200px; height: 200px; } .resume-page .header-photo-extra_large { width: 240px; height: 240px; } .resume-page .header-photo-xx_large { width: 280px; height: 280px; } .resume-page .header-summary-row { margin-top: 12px; margin-bottom: 20px; padding-top: 0; } .resume-page .summary { font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 10px !important; white-space: pre-wrap !important; } .resume-page .summary p { margin: 0 0 0.6em 0; white-space: pre-wrap !important; } .resume-page .summary p:last-child { margin-bottom: 0; } .resume-page .section-title { font-size: 22px; font-weight: bold; color: var(--selected-color); margin: 30px 0 15px 0; padding-bottom: 6px; } .resume-page .experience-item, .resume-page .education-item { margin-bottom: 12px !important; } /* Section block: title + content stay together (screen + print) */ .resume-page .section-block { margin-bottom: 20px; } /* Print: page break control - matches PDF output */ @media print { .resume-preview-wrapper { transform: none !important; } .resume-page { break-inside: avoid; box-shadow: none !important; border: none !important; } .resume-header { page-break-inside: avoid; page-break-after: avoid; } .section-block { page-break-inside: avoid; } .section-title { page-break-after: avoid; } .experience-item, .education-item { page-break-inside: avoid; } .skills { page-break-inside: avoid; } } .resume-page .company, .resume-page .institution { font-size: 16px !important; font-weight: bold !important; margin-bottom: 4px !important; } .resume-page .position, .resume-page .degree { font-size: 16px !important; margin-bottom: 4px !important; font-weight: bold; } .resume-page .description { font-size: 13px !important; line-height: 1.4 !important; margin-top: 3px !important; } .job-description-rich { color: var(--ink); font-size: 15px; line-height: 1.75; } .job-description-rich p { margin: 0 0 0.85rem 0; } .job-description-rich ul { margin: 0.45rem 0 0.9rem 0; padding-left: 1.15rem; list-style: disc; } .job-description-rich li { margin: 0 0 0.35rem 0; } .job-description-rich .job-desc-heading { margin: 1.35rem 0 0.55rem 0; padding-top: 0.85rem; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .job-description-rich .job-desc-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; } .job-description-snippet { color: var(--ink-light); font-size: 0.9rem; line-height: 1.55; } .jobs-page-title { font-family: var(--font-sans); letter-spacing: -0.01em; } .jobs-page-subtitle { color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; max-width: 64ch; } .job-card { border-radius: 0.75rem; border: 1px solid #dfe3e8; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 0.95rem 1rem; transition: box-shadow 0.14s ease, border-color 0.14s ease; } .job-card:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } .job-card-title { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #0a66c2; } .job-card-meta { margin-top: 0.2rem; font-size: 0.84rem; color: var(--ink-muted); } .job-details-title { font-family: var(--font-sans); letter-spacing: -0.01em; line-height: 1.22; } .job-details-company { font-size: 0.98rem; color: var(--ink-muted); margin-top: 0.45rem; } .job-meta-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.72rem; border: 1px solid #e5e7eb; background: #f8fafc; color: #475569; } .jobs-shell { position: relative; } .indeed-searchbar { backdrop-filter: blur(6px); } .jobs-shell::before { content: ''; position: absolute; inset: -18px -20px auto -20px; height: 180px; border-radius: 1.25rem; background: radial-gradient(80% 90% at 10% 0%, rgba(10, 102, 194, 0.12), transparent 70%), radial-gradient(70% 80% at 100% 0%, rgba(59, 130, 246, 0.12), transparent 75%); pointer-events: none; z-index: 0; } .jobs-shell > * { position: relative; z-index: 1; } .jobs-toolbar { border-radius: 1rem; border: 1px solid #dbe4f0; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.35); } .job-details-card { border-radius: 1rem; border: 1px solid #dfe3e8; background: #fff; box-shadow: 0 8px 30px -24px rgba(15, 23, 42, 0.35); } .job-apply-card { border-radius: 1rem; border: 1px solid #dfe3e8; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); box-shadow: 0 12px 30px -25px rgba(15, 23, 42, 0.38); } .job-section-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; font-weight: 700; } .job-description-rich { border-left: 3px solid #e2e8f0; padding-left: 0.9rem; } @media (max-width: 1023px) { .indeed-searchbar { top: 64px; } } /* ── Job board: newspaper / print-inspired ── */ .jobs-newspaper.jobs-shell::before { display: none; } .jobs-newspaper { --news-ink: #111111; --news-muted: #4a4a4a; --news-rule: #1a1a1a; --news-paper: #f5f2ea; --news-paper-contrast: #faf8f3; --news-fold: #e8e4d9; background: var(--news-paper); padding: 0.5rem 0.75rem 1.5rem; border: 2px solid var(--news-rule); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .newspaper-masthead { text-align: center; padding: 0.75rem 0.5rem 1rem; border-bottom: 4px double var(--news-rule); margin-bottom: 1rem; background: linear-gradient(180deg, #faf8f3 0%, var(--news-paper) 100%); } .newspaper-kicker { font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--news-muted); font-weight: 600; margin-bottom: 0.35rem; } .newspaper-masthead-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.35rem); font-weight: 700; color: var(--news-ink); letter-spacing: -0.02em; line-height: 1.1; } .newspaper-masthead-sub { font-size: 0.8rem; color: var(--news-muted); margin-top: 0.4rem; font-style: italic; } .newspaper-dateline { font-size: 0.72rem; color: var(--news-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.5rem; } .newspaper-searchbar { background: var(--news-paper-contrast); border: 2px solid var(--news-rule); border-radius: 2px; padding: 0.65rem 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .newspaper-searchbar input { border-radius: 0 !important; border: 1px solid #1a1a1a !important; background: #fff !important; color: var(--news-ink) !important; } .newspaper-searchbar input:focus { outline: 2px solid var(--news-ink); outline-offset: 1px; } .newspaper-searchbar button[type="button"] { border-radius: 2px !important; background: var(--news-ink) !important; color: #fff !important; border: 2px solid var(--news-ink) !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem !important; } .newspaper-searchbar button[type="button"]:hover { background: #2d2d2d !important; } .newspaper-filters-panel { background: var(--news-paper-contrast); border: 1px solid var(--news-rule); border-radius: 2px; padding: 0.65rem 0.75rem; } .newspaper-filters-panel select, .newspaper-filters-panel input[type="text"] { border-radius: 0 !important; border: 1px solid #1a1a1a !important; background: var(--news-paper-contrast) !important; color: var(--news-ink) !important; font-size: 0.75rem !important; } .newspaper-filters-panel select:focus, .newspaper-filters-panel input[type="text"]:focus { border-color: var(--news-ink) !important; box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.06); outline: none; } .newspaper-filters-panel button { border-radius: 2px !important; border: 1px solid var(--news-rule) !important; background: transparent !important; color: var(--news-ink) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.06em; } .newspaper-filters-panel button:hover { background: rgba(0, 0, 0, 0.06) !important; } .newspaper-columns-label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--news-muted); border-bottom: 1px solid var(--news-rule); padding-bottom: 0.35rem; margin-bottom: 0; } .newspaper-list-shell { border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; } .newspaper-list-header { padding: 0.5rem 0.85rem; background: linear-gradient(180deg, #f0ece2 0%, #e8e4d9 100%); border-bottom: 2px solid var(--news-rule); font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--news-ink); } .newspaper-list-item { border-bottom: 1px solid #c9c4b8; transition: background 0.12s ease; } .newspaper-list-item:hover { background: #f7f4ec; } .newspaper-list-item.is-active { background: #ebe6db; border-left: 4px solid var(--news-ink); padding-left: calc(1rem - 4px); } .newspaper-job-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--news-ink); line-height: 1.25; letter-spacing: -0.01em; } .newspaper-job-byline { font-size: 0.78rem; color: var(--news-muted); margin-top: 0.15rem; } .newspaper-job-line { font-size: 0.72rem; color: var(--news-muted); } .newspaper-tag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--news-ink); border: 1px solid #8a8578; padding: 0.1rem 0.35rem; border-radius: 1px; background: #f5f2ea; } .newspaper-tag.tag-sentence { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; } .newspaper-salary { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--news-ink); } .newspaper-list-item .job-description-snippet { font-size: 0.8rem; line-height: 1.45; color: #3d3d3d; } .newspaper-detail-card { border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); } .newspaper-detail-card .job-section-title { font-family: var(--font-sans); border-bottom: 2px solid var(--news-rule); padding-bottom: 0.35rem; margin-bottom: 0.75rem; color: var(--news-ink); letter-spacing: 0.12em; } .newspaper-detail-card .job-description-rich { border-left: 4px solid var(--news-ink); padding-left: 1rem; font-size: 0.95rem; line-height: 1.65; color: #222; } .newspaper-detail-title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 700; color: var(--news-ink); line-height: 1.15; letter-spacing: -0.02em; } .newspaper-detail-company { font-size: 0.95rem; color: var(--news-muted); font-style: italic; margin-top: 0.35rem; } .newspaper-apply-btn { border-radius: 2px !important; background: var(--news-ink) !important; color: #fff !important; border: 2px solid var(--news-ink) !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem !important; } .newspaper-apply-btn:hover { background: #2a2a2a !important; } @media (min-width: 1024px) { .newspaper-body-columns { column-count: 1; } } /* ── Job board (redesigned): soft, warm, on-brand — replaces the old monochrome "newspaper" treatment above, which is now unused. ── */ .jb-masthead { text-align: center; padding: 1.5rem 1rem 1.75rem; margin-bottom: 1.5rem; } .jb-kicker { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; margin-bottom: 0.5rem; } .jb-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; } .jb-subtitle { font-size: 0.92rem; color: var(--ink-muted); margin-top: 0.5rem; max-width: 46ch; margin-left: auto; margin-right: auto; } .jb-dateline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.85rem; padding: 0.3rem 0.75rem; background: var(--paper-warm); border: 1px solid var(--border); border-radius: 999px; } .jb-dateline .jb-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; } .jb-page { position: relative; padding-top: 0.25rem; } /* The jobs page's own max-width (see index.html) is already wider than what's left after
's side padding — recover some of that padding here, scoped to this page only, rather than widening .news-shell's padding globally for every page. */ @media (min-width: 1024px) { .jb-page { width: calc(100% + 4rem); max-width: calc(100rem + 4rem); margin-left: -2rem; margin-right: -2rem; } } .jb-page::before { content: ""; position: absolute; left: 50%; right: auto; top: -2.5rem; width: 100vw; height: 20.5rem; background: linear-gradient(115deg, rgba(15, 18, 25, 0.075), transparent 44%), radial-gradient(circle at 88% 12%, rgba(22, 163, 74, 0.14), transparent 24rem); border-radius: 0 0 1.5rem 1.5rem; pointer-events: none; transform: translateX(-50%); } .jb-page > * { position: relative; z-index: 1; } .jb-page-hero { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 1.25rem; row-gap: 1rem; margin-bottom: 1rem; padding: clamp(1.05rem, 2vw, 1.55rem); border: 1px solid rgba(15, 18, 25, 0.11); border-radius: 20px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 45px -35px rgba(15, 18, 25, 0.6); overflow: hidden; isolation: isolate; } .jb-page-hero::before { content: ""; position: absolute; inset: -2rem -1.5rem auto auto; width: min(32rem, 58%); height: 14rem; background: linear-gradient(90deg, rgba(15, 18, 25, 0.065) 1px, transparent 1px), linear-gradient(0deg, rgba(15, 18, 25, 0.065) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); opacity: 0.42; transform: skewY(-5deg); z-index: -2; } .jb-page-hero > div:not(.jb-page-hero-art) { position: relative; z-index: 1; } .jb-page-hero-copy { flex: 1 1 24rem; min-width: 0; } .jb-page-hero-art { position: absolute; top: 0.8rem; right: 1.2rem; width: min(25rem, 48%); height: 12.5rem; pointer-events: none; z-index: -1; } .jb-page-art-card, .jb-page-art-node, .jb-page-art-line { position: absolute; display: block; } .jb-page-art-card { border: 1px solid rgba(15, 18, 25, 0.1); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(250, 248, 243, 0.62)), #fff; box-shadow: 0 20px 38px -32px rgba(15, 18, 25, 0.78); } .jb-page-art-card::before { content: ""; position: absolute; top: 0.75rem; left: 0.75rem; width: 1.65rem; height: 1.65rem; border-radius: 9px; border: 1px solid rgba(22, 163, 74, 0.22); background: rgba(22, 163, 74, 0.1); } .jb-page-art-card i { position: absolute; left: 0.75rem; right: 0.75rem; height: 0.36rem; border-radius: 999px; background: rgba(15, 18, 25, 0.12); } .jb-page-art-card i:nth-child(1) { top: 3.35rem; width: 70%; } .jb-page-art-card i:nth-child(2) { top: 4.18rem; width: 84%; } .jb-page-art-card i:nth-child(3) { top: 5rem; width: 46%; background: rgba(22, 163, 74, 0.2); } .jb-page-art-card.is-one { right: 2.6rem; top: 1.1rem; width: 10rem; height: 7rem; transform: rotate(-3deg); } .jb-page-art-card.is-two { right: 11.7rem; top: 3.1rem; width: 7.5rem; height: 5.8rem; opacity: 0.74; transform: rotate(5deg); } .jb-page-art-card.is-three { right: 0.4rem; top: 7.1rem; width: 7rem; height: 4.8rem; opacity: 0.68; transform: rotate(7deg); } .jb-page-art-card.is-two i:nth-child(1), .jb-page-art-card.is-three i:nth-child(1) { top: 3.05rem; } .jb-page-art-card.is-two i:nth-child(2), .jb-page-art-card.is-three i:nth-child(2) { top: 3.82rem; width: 54%; } .jb-page-art-node { width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 2px solid #fff; background: var(--accent); box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.28); } .jb-page-art-node.is-one { right: 20rem; top: 1.8rem; } .jb-page-art-node.is-two { right: 8rem; top: 10.4rem; background: var(--ink); box-shadow: 0 0 0 1px rgba(15, 18, 25, 0.22); } .jb-page-art-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 18, 25, 0.18), transparent); transform-origin: left center; } .jb-page-art-line.is-one { right: 10.8rem; top: 2.3rem; width: 9rem; transform: rotate(12deg); } .jb-page-art-line.is-two { right: 7.8rem; top: 10.7rem; width: 10rem; transform: rotate(169deg); } .jb-page-hero h1 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.85rem, 3.2vw, 3.25rem); font-weight: 850; line-height: 1.02; letter-spacing: -0.04em; } .jb-page-hero p { margin-top: 0.6rem; max-width: 56ch; color: var(--ink-light); font-size: 0.96rem; line-height: 1.6; } .jb-page-hero-categories { display: flex; flex-wrap: wrap; gap: 0.38rem; width: 100%; flex-basis: 100%; margin-top: 0.1rem; position: relative; z-index: 1; } .jb-page-hero-categories button { min-height: 30px; padding: 0.33rem 0.68rem; border: 1px solid rgba(15, 18, 25, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--ink-muted); font-size: 0.74rem; font-weight: 850; line-height: 1.1; white-space: nowrap; box-shadow: 0 8px 18px -18px rgba(15, 18, 25, 0.45); transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .jb-page-hero-categories button:hover { transform: translateY(-1px); border-color: rgba(15, 18, 25, 0.22); color: var(--ink); background: rgba(255, 255, 255, 0.94); } .jb-page-hero-categories button:focus-visible { outline: 3px solid rgba(22, 163, 74, 0.22); outline-offset: 2px; } .jb-page-hero-categories button.is-active { border-color: var(--accent); background: var(--accent); color: #fff; } .jb-page-hero-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; gap: 0.6rem; flex: 0 1 min(46rem, 56%); width: min(46rem, 56%); align-self: flex-end; margin-left: auto; position: relative; z-index: 1; } .jb-page-hero-stat { min-width: 0; min-height: 5.4rem; padding: 0.9rem 1rem; border-radius: 18px; border: 1px solid rgba(22, 163, 74, 0.18); background: rgba(22, 163, 74, 0.08); text-align: right; font: inherit; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .jb-page-hero-stat:hover { transform: translateY(-1px); border-color: rgba(22, 163, 74, 0.34); background: rgba(22, 163, 74, 0.12); box-shadow: 0 14px 28px -24px rgba(15, 18, 25, 0.55); } .jb-page-hero-stat:focus-visible { outline: 3px solid rgba(22, 163, 74, 0.24); outline-offset: 2px; } .jb-page-hero-stat.is-active { border-color: var(--accent); background: rgba(22, 163, 74, 0.16); box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12), 0 14px 30px -26px rgba(22, 163, 74, 0.8); } .jb-page-hero-stat span { display: block; color: #047857; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-page-hero-stat strong { display: block; margin-top: 0.12rem; color: var(--ink); font-size: 2rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; } .jb-page-hero-stat.is-active strong { color: #064e3b; } /* Unified search + source pills + filters toolbar (one card, not three) */ .jb-toolbar { top: 0; z-index: 40; margin-bottom: 0.5rem !important; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(15, 18, 25, 0.11); border-radius: 18px; padding: 0.7rem; box-shadow: 0 18px 45px -36px rgba(15, 18, 25, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(0); opacity: 1; pointer-events: auto; max-height: 1000px; overflow: hidden; transition: transform 0.22s ease, opacity 0.18s ease, box-shadow 0.18s ease, max-height 0.22s ease, padding 0.22s ease, margin 0.22s ease, border-width 0.22s ease; will-change: transform; } .jb-toolbar.is-hidden { margin-bottom: 0 !important; padding-top: 0; padding-bottom: 0; max-height: 0; border-width: 0; transform: translateY(calc(-100% - 12px)); opacity: 0; pointer-events: none; } .jb-toolbar.has-open-filters { transform: translateY(0); opacity: 1; pointer-events: auto; max-height: none; } .jb-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .jb-search-field { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 0.55rem; padding: 0 0.85rem; height: 44px; border-radius: 12px; border: 1px solid rgba(15, 18, 25, 0.1); background: rgba(250, 248, 243, 0.72); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .jb-search-field:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); } .jb-search-field svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--ink-muted); } .jb-search-field input { border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; padding: 0 !important; font-size: 0.88rem !important; color: var(--ink) !important; height: 100%; width: 100%; } .jb-filters-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 44px; border-radius: 12px; border: 1px solid rgba(15, 18, 25, 0.1); background: rgba(250, 248, 243, 0.72); font-size: 0.85rem; font-weight: 800; color: var(--ink); white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .jb-filters-toggle:hover { background: #fff; border-color: var(--border-strong); } .jb-filters-toggle.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .jb-toolbar-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgba(15, 18, 25, 0.1); } .jb-avatar { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(15, 18, 25, 0.04), rgba(15, 18, 25, 0.015)), #fff; border: 1px solid rgba(15, 18, 25, 0.1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1rem; font-weight: 900; color: var(--ink); flex-shrink: 0; overflow: hidden; } .jb-avatar img { width: 100%; height: 100%; object-fit: cover; } .jb-job-line { font-size: 0.74rem; color: var(--ink-muted); } .jb-tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); border: 1px solid rgba(15, 18, 25, 0.08); padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(250, 248, 243, 0.82); white-space: nowrap; display: inline-block; } .jb-salary { font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 0.1rem 0.5rem; border-radius: 999px; display: inline-block; } .jb-source-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); background: rgba(250, 248, 243, 0.9); border: 1px solid rgba(15, 18, 25, 0.08); padding: 0.1rem 0.45rem; border-radius: 999px; display: inline-block; } .jb-detail-card { border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 4px 16px rgba(15, 18, 25, 0.05); } .jb-detail-page { position: relative; padding-top: 0.25rem; } .jb-detail-page::before { content: ""; position: absolute; left: 50%; right: auto; top: -2.5rem; width: 100vw; height: 20.5rem; background: linear-gradient(115deg, rgba(15, 18, 25, 0.075), transparent 44%), radial-gradient(circle at 88% 12%, rgba(22, 163, 74, 0.14), transparent 24rem); border-radius: 0 0 1.5rem 1.5rem; pointer-events: none; transform: translateX(-50%); } .jb-detail-page > * { position: relative; z-index: 1; } .jb-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; } .jb-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } .jb-company-jobs-grid { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 1024px) { .jb-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.34fr); gap: 1.1rem; } .jb-detail-layout.jb-detail-layout-full { grid-template-columns: minmax(0, 1fr); } .jb-company-jobs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } } .jb-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; } .jb-detail-hero, .jb-detail-snapshot, .jb-detail-description, .jb-apply-panel-inner { border: 1px solid rgba(15, 18, 25, 0.11); border-radius: 20px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 45px -35px rgba(15, 18, 25, 0.6); } .jb-detail-hero { padding: clamp(1.05rem, 2vw, 1.55rem); overflow: hidden; position: relative; } .jb-detail-hero::after { content: ""; position: absolute; right: -4rem; top: -5rem; width: 16rem; height: 16rem; border-radius: 999px; background: radial-gradient(circle, rgba(22, 163, 74, 0.12), transparent 68%); pointer-events: none; } .jb-detail-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; } .jb-detail-company-mark { width: 4.25rem; height: 4.25rem; border-radius: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(15, 18, 25, 0.1); background: linear-gradient(135deg, rgba(15, 18, 25, 0.04), rgba(15, 18, 25, 0.015)), #fff; color: var(--ink); font-size: 1.65rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); flex-shrink: 0; } .jb-detail-company-mark img { width: 100%; height: 100%; object-fit: contain; padding: 0.55rem; } .jb-detail-eyebrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; color: var(--ink-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .jb-detail-eyebrow span { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(250, 248, 243, 0.9); } .jb-detail-meta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1.1rem; } .jb-detail-fact { min-width: 0; display: flex; align-items: center; gap: 0.65rem; padding: 0.78rem; border-radius: 14px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(250, 248, 243, 0.62); } .jb-detail-fact svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex-shrink: 0; } .jb-detail-fact span { display: block; margin-bottom: 0.12rem; color: var(--ink-muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .jb-detail-fact strong { display: block; min-width: 0; color: var(--ink); font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; } .jb-detail-fact.is-salary { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.18); } .jb-detail-summary { margin-top: 1rem; max-width: 72ch; color: var(--ink-light); font-size: 0.95rem; line-height: 1.65; } .jb-detail-title-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .jb-detail-title-meta span { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.14rem 0.58rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(255, 255, 255, 0.78); color: var(--ink-muted); font-size: 0.72rem; font-weight: 850; line-height: 1; } .jb-detail-title-meta span:first-child { border-color: rgba(22, 163, 74, 0.18); background: rgba(22, 163, 74, 0.08); color: #047857; } .jb-detail-brief { position: relative; z-index: 1; margin-top: 1rem; padding: 0.95rem 1rem; border-radius: 16px; border: 1px solid rgba(15, 18, 25, 0.08); background: linear-gradient(135deg, rgba(250, 248, 243, 0.92), rgba(255, 255, 255, 0.7)); } .jb-detail-brief span { display: block; margin-bottom: 0.35rem; color: var(--ink); font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-detail-brief p { max-width: 76ch; color: var(--ink-light); font-size: 0.95rem; line-height: 1.62; } .jb-detail-snapshot { padding: clamp(1rem, 1.8vw, 1.35rem); } .jb-detail-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; } .jb-detail-snapshot-grid > div { min-width: 0; padding: 0.9rem; border-radius: 16px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(250, 248, 243, 0.62); } .jb-detail-snapshot-grid span { display: block; color: var(--ink-muted); font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-detail-snapshot-grid strong { display: block; margin-top: 0.25rem; color: var(--ink); font-size: 0.98rem; line-height: 1.25; font-weight: 850; overflow-wrap: anywhere; } .jb-detail-description { padding: clamp(1.05rem, 2vw, 1.45rem); } .jb-detail-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; color: var(--ink); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.11em; } .jb-detail-section-head::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0.35rem rgba(22, 163, 74, 0.12); } .jb-apply-panel { min-width: 0; } @media (min-width: 1024px) { .jb-apply-panel { position: sticky; top: 5.75rem; } } .jb-apply-panel-inner { padding: 1rem; } .jb-apply-kicker { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.08rem 0.48rem; border-radius: 999px; background: rgba(22, 163, 74, 0.1); color: #047857; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-apply-panel h2 { margin-top: 0.65rem; color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; } .jb-apply-panel p { margin-top: 0.55rem; color: var(--ink-muted); font-size: 0.84rem; line-height: 1.55; } .jb-apply-divider { height: 1px; margin: 1rem 0; background: linear-gradient(90deg, transparent, rgba(15, 18, 25, 0.14), transparent); } .jb-apply-list { display: grid; gap: 0.75rem; } .jb-apply-list dt { color: var(--ink-muted); font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-apply-list dd { margin-top: 0.18rem; color: var(--ink); font-size: 0.86rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .jb-apply-note { margin-top: 0.85rem; padding: 0.8rem; border-radius: 14px; border: 1px solid rgba(15, 18, 25, 0.08); background: var(--paper-warm); color: var(--ink-light); font-size: 0.82rem; line-height: 1.45; } .jb-original-source { margin-top: 0.9rem !important; font-size: 0.76rem !important; } .jb-original-source a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .jb-detail-loading { border: 1px solid var(--border); border-radius: 20px; background: #fff; padding: 1rem; } .jb-detail-loading-line { height: 1.2rem; width: min(28rem, 80%); border-radius: 999px; background: #eef0f3; } .jb-detail-loading-line.is-short { width: min(16rem, 55%); margin-top: 0.65rem; } .jb-detail-loading-card { height: 14rem; margin-top: 1rem; border-radius: 16px; background: #eef0f3; } .jb-detail-error { border: 1px solid rgba(220, 38, 38, 0.24); border-radius: 16px; background: rgba(254, 242, 242, 0.85); padding: 1rem; color: #b91c1c; font-size: 0.9rem; } .jb-detail-card .job-section-title { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.85rem; color: var(--ink-muted); } .jb-detail-card .job-description-rich { border-left: none; padding-left: 0; font-size: 0.95rem; line-height: 1.7; color: var(--ink-light); } .jb-detail-description .job-description-rich { border-left: none; padding-left: 0; max-width: 76ch; color: var(--ink-light); font-size: 0.96rem; line-height: 1.78; } .jb-detail-description .job-description-rich p { margin: 0 0 0.92rem; } .jb-detail-description .job-description-rich .job-desc-heading { margin: 1.15rem 0 0.45rem; color: var(--ink); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-detail-description .job-description-rich ul { margin: 0.4rem 0 1rem 0; padding-left: 1.15rem; } .jb-detail-description .job-description-rich li { margin-bottom: 0.45rem; padding-left: 0.15rem; } .jb-detail-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 3.1rem); font-weight: 850; color: var(--ink); line-height: 1.04; letter-spacing: -0.04em; } @keyframes jb-translate-in { 0% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes jb-translate-sweep { 0% { background-position: -60% 0; opacity: 1; } 100% { background-position: 160% 0; opacity: 0; } } .jb-translate-flash { position: relative; animation: jb-translate-in 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .jb-translate-flash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(99, 102, 241, 0.16) 48%, rgba(139, 92, 246, 0.3) 50%, rgba(99, 102, 241, 0.16) 52%, transparent 65%); background-size: 260% 100%; background-position: -60% 0; animation: jb-translate-sweep 1.1s ease-out 0.15s; pointer-events: none; border-radius: inherit; } .jb-translate-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.55rem; margin-left: 0.5rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(120deg, #6366f1, #8b5cf6); box-shadow: 0 8px 18px -9px rgba(99, 102, 241, 0.65); vertical-align: middle; } .jb-translate-badge svg { width: 0.8rem; height: 0.8rem; animation: jb-translate-sparkle 1.3s ease-in-out infinite; } @keyframes jb-translate-sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.22) rotate(14deg); } } .jb-translate-badge-enter-active { transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .jb-translate-badge-leave-active { transition: opacity 0.28s ease, transform 0.28s ease; } .jb-translate-badge-enter-from, .jb-translate-badge-leave-to { opacity: 0; transform: scale(0.7) translateY(-4px); } @media (prefers-reduced-motion: reduce) { .jb-translate-flash, .jb-translate-flash::after, .jb-translate-badge svg { animation: none !important; } } .jb-detail-company { font-size: 1rem; font-weight: 700; color: var(--ink-muted); margin-top: 0.45rem; } .jb-apply-btn { border-radius: 12px !important; background: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; font-weight: 700; font-size: 0.88rem !important; margin-top: 1rem; min-height: 3rem; text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .jb-apply-btn:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(22, 163, 74, 0.7); } .jb-apply-secondary-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.7rem; margin-top: 0.55rem; padding: 0.65rem 0.9rem; border-radius: 12px; border: 1px solid rgba(15, 18, 25, 0.11); background: rgba(250, 248, 243, 0.78); color: var(--ink) !important; font-size: 0.82rem; font-weight: 850; text-align: center; text-decoration: none !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .jb-apply-secondary-btn:hover { background: #fff; border-color: rgba(15, 18, 25, 0.2); transform: translateY(-1px); } .jb-apply-steps { padding: 0.85rem; border-radius: 16px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(250, 248, 243, 0.62); } .jb-apply-steps p { margin: 0 0 0.6rem !important; color: var(--ink); font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .jb-apply-steps ol { margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: apply-step; } .jb-apply-steps li { list-style: none; display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: 0.55rem; align-items: center; color: var(--ink-light); font-size: 0.82rem; line-height: 1.35; counter-increment: apply-step; } .jb-apply-steps li::before { content: counter(apply-step); width: 1.45rem; height: 1.45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(22, 163, 74, 0.1); color: #047857; font-size: 0.7rem; font-weight: 900; } .jb-detail-layout-simple { gap: clamp(1rem, 2vw, 1.5rem); } @media (min-width: 1024px) { .jb-detail-layout-simple { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.5rem); } } .jb-detail-hero-simple, .jb-detail-description-simple, .jb-apply-panel-simple .jb-apply-panel-inner { border-radius: 18px; border-color: rgba(15, 18, 25, 0.09); background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 60px -48px rgba(15, 18, 25, 0.72); } .jb-detail-hero-simple { padding: clamp(1.25rem, 3vw, 2.15rem); isolation: isolate; background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.9)), radial-gradient(circle at 18% 18%, rgba(22, 163, 74, 0.08), transparent 18rem); } .jb-detail-hero-simple::after { right: -2rem; top: -1rem; bottom: auto; width: min(24rem, 58%); height: min(15rem, 68%); border-radius: 0; background: linear-gradient(90deg, rgba(15, 18, 25, 0.07) 1px, transparent 1px), linear-gradient(0deg, rgba(15, 18, 25, 0.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 28%, #000 78%, transparent); opacity: 0.42; transform: skewY(-6deg); z-index: -2; } .jb-detail-hero-simple .jb-detail-hero-grid { gap: 1.05rem; align-items: center; } .jb-detail-hero-art { position: absolute; inset: 1.1rem 1.4rem auto auto; width: min(21rem, 42%); height: 14rem; pointer-events: none; z-index: -1; } .jb-art-card, .jb-art-node, .jb-art-line, .jb-art-badge { position: absolute; display: block; } .jb-art-card { border: 1px solid rgba(15, 18, 25, 0.1); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(250, 248, 243, 0.58)), #fff; box-shadow: 0 22px 42px -34px rgba(15, 18, 25, 0.75); } .jb-art-card::before { content: ""; position: absolute; top: 0.85rem; left: 0.85rem; width: 2rem; height: 2rem; border-radius: 10px; border: 1px solid rgba(22, 163, 74, 0.22); background: rgba(22, 163, 74, 0.1); } .jb-art-card i { position: absolute; left: 0.85rem; right: 0.85rem; height: 0.42rem; border-radius: 999px; background: rgba(15, 18, 25, 0.11); } .jb-art-card i:nth-child(1) { top: 4rem; width: 68%; } .jb-art-card i:nth-child(2) { top: 5rem; width: 84%; } .jb-art-card i:nth-child(3) { top: 6rem; width: 48%; background: rgba(22, 163, 74, 0.2); } .jb-art-card.is-main { right: 1.1rem; bottom: 0.2rem; width: 10.8rem; height: 8.4rem; transform: rotate(-2deg); } .jb-art-card.is-side { right: 9.4rem; bottom: 3.4rem; width: 7.6rem; height: 6rem; opacity: 0.72; transform: rotate(5deg); } .jb-art-card.is-side i:nth-child(1) { top: 3.4rem; width: 70%; } .jb-art-card.is-side i:nth-child(2) { top: 4.25rem; width: 46%; } .jb-art-node { width: 0.8rem; height: 0.8rem; border-radius: 999px; border: 2px solid #fff; background: var(--accent); box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.28); } .jb-art-node.is-one { right: 0.3rem; bottom: 9.2rem; } .jb-art-node.is-two { right: 15.8rem; bottom: 1.4rem; background: var(--ink); box-shadow: 0 0 0 1px rgba(15, 18, 25, 0.22); } .jb-art-node.is-three { right: 13rem; bottom: 11.4rem; width: 0.58rem; height: 0.58rem; background: #fff; border-color: rgba(22, 163, 74, 0.32); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.08); } .jb-art-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 18, 25, 0.18), transparent); transform-origin: left center; } .jb-art-line.is-one { right: 1rem; bottom: 9.5rem; width: 9rem; transform: rotate(155deg); } .jb-art-line.is-two { right: 7.6rem; bottom: 2.1rem; width: 8.8rem; transform: rotate(10deg); } .jb-art-badge { right: 5.9rem; bottom: 9.1rem; width: 3.25rem; height: 3.25rem; border-radius: 16px; border: 1px solid rgba(22, 163, 74, 0.22); background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(255, 255, 255, 0.72)), #fff; box-shadow: 0 18px 32px -26px rgba(15, 18, 25, 0.78); transform: rotate(9deg); } .jb-art-badge::before { content: ""; position: absolute; left: 0.82rem; top: 0.86rem; width: 1.45rem; height: 1rem; border-left: 3px solid #047857; border-bottom: 3px solid #047857; transform: rotate(-45deg); border-radius: 2px; } .jb-art-badge i { position: absolute; right: 0.52rem; bottom: 0.48rem; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: rgba(15, 18, 25, 0.2); } .jb-detail-hero-simple .jb-detail-company-mark { width: clamp(3.6rem, 7vw, 5.25rem); height: clamp(3.6rem, 7vw, 5.25rem); border-radius: 16px; box-shadow: 0 18px 34px -28px rgba(15, 18, 25, 0.65); } .jb-detail-hero-simple .jb-detail-title { max-width: 14ch; font-size: clamp(2rem, 4.6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.04em; } .jb-detail-hero-simple .jb-detail-company { color: var(--ink); font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 850; } .jb-detail-pill-row { gap: 0.5rem; margin-top: 1rem; } .jb-detail-pill-row span { min-height: 1.85rem; padding: 0.22rem 0.7rem; background: #fff; color: var(--ink); font-size: 0.74rem; box-shadow: 0 10px 22px -20px rgba(15, 18, 25, 0.6); } .jb-detail-simple-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; } .jb-detail-simple-fact { display: inline-flex; align-items: center; gap: 0.42rem; min-height: 2rem; max-width: 100%; padding: 0.28rem 0.72rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.09); background: rgba(250, 248, 243, 0.78); color: var(--ink-light); font-size: 0.8rem; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; } .jb-detail-simple-fact svg { width: 0.95rem; height: 0.95rem; color: var(--accent); flex: 0 0 auto; } .jb-detail-simple-fact.is-salary { border-color: rgba(22, 163, 74, 0.2); background: rgba(22, 163, 74, 0.08); color: #047857; font-weight: 900; } .jb-detail-brief-simple { margin-top: 1.25rem; padding: 0; border: 0; border-radius: 0; background: transparent; } .jb-detail-brief-simple p { max-width: 68ch; color: var(--ink-light); font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.72; } .jb-detail-description-simple { padding: clamp(1.15rem, 2.6vw, 1.85rem); position: relative; overflow: hidden; isolation: isolate; } .jb-detail-description-simple::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, transparent calc(100% - 8.5rem), rgba(22, 163, 74, 0.055) calc(100% - 8.5rem), transparent 100%), linear-gradient(0deg, rgba(15, 18, 25, 0.035) 1px, transparent 1px); background-size: auto, 100% 2.15rem; opacity: 0.7; z-index: -2; } .jb-description-art { position: absolute; right: 1.2rem; top: 1.25rem; bottom: 1.25rem; width: 6.3rem; opacity: 0.52; pointer-events: none; z-index: -1; } .jb-description-art::before { content: ""; position: absolute; top: 0.2rem; bottom: 0.2rem; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(15, 18, 25, 0.16), transparent); } .jb-description-art span { position: absolute; right: 0; width: 4.7rem; height: 2.35rem; border-radius: 12px; border: 1px solid rgba(15, 18, 25, 0.1); background: rgba(255, 255, 255, 0.74); box-shadow: 0 14px 26px -24px rgba(15, 18, 25, 0.66); } .jb-description-art span::before, .jb-description-art span::after { content: ""; position: absolute; left: 0.65rem; right: 0.65rem; height: 0.28rem; border-radius: 999px; background: rgba(15, 18, 25, 0.12); } .jb-description-art span::before { top: 0.66rem; } .jb-description-art span::after { top: 1.2rem; right: 1.45rem; background: rgba(22, 163, 74, 0.18); } .jb-description-art span:nth-child(1) { top: 1rem; transform: rotate(-4deg); } .jb-description-art span:nth-child(2) { top: 7.8rem; right: 1.1rem; transform: rotate(4deg); } .jb-description-art span:nth-child(3) { top: 14.8rem; transform: rotate(-3deg); } .jb-description-art span:nth-child(4) { top: 21.5rem; right: 1rem; transform: rotate(3deg); } .jb-detail-description-simple .job-description-rich { position: relative; z-index: 1; max-width: 72ch; font-size: 1rem; line-height: 1.82; } .jb-apply-panel-simple .jb-apply-panel-inner { padding: 1.1rem; position: relative; overflow: hidden; isolation: isolate; } .jb-apply-panel-simple .jb-apply-panel-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(22, 163, 74, 0.1), transparent 34%), repeating-linear-gradient(135deg, transparent 0 13px, rgba(15, 18, 25, 0.04) 13px 14px); opacity: 0.75; z-index: -2; } .jb-apply-graphic { position: absolute; right: 0.85rem; top: 0.85rem; width: 5.3rem; height: 3.7rem; opacity: 0.42; pointer-events: none; z-index: -1; } .jb-apply-graphic span { position: absolute; display: block; border: 1px solid rgba(15, 18, 25, 0.16); background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 24px -22px rgba(15, 18, 25, 0.6); } .jb-apply-graphic span:nth-child(1) { inset: 0.1rem 1.6rem 1.25rem 0; border-radius: 10px; transform: rotate(-7deg); } .jb-apply-graphic span:nth-child(2) { inset: 1rem 0.2rem 0.15rem 1.7rem; border-radius: 12px; transform: rotate(5deg); } .jb-apply-graphic span:nth-child(3) { right: 0.65rem; top: 0.65rem; width: 0.75rem; height: 0.75rem; border-radius: 999px; border-color: rgba(22, 163, 74, 0.32); background: rgba(22, 163, 74, 0.2); } .jb-apply-panel-simple .jb-apply-kicker { background: transparent; padding: 0; color: var(--ink-muted); } .jb-apply-panel-simple h2 { margin-top: 0.45rem; font-size: 1.35rem; } .jb-apply-panel-simple p { font-size: 0.86rem; } .jb-apply-panel-simple .jb-apply-list { gap: 0.8rem; } .jb-empty { text-align: center; padding: 3rem 1.5rem; color: var(--ink-muted); font-size: 0.9rem; } .jb-back-link { min-height: 2.35rem; padding: 0 0.75rem 0 0.55rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.1); background: rgba(255, 255, 255, 0.78); font-size: 0.8rem; font-weight: 800; color: var(--ink-muted); text-decoration: none; box-shadow: 0 8px 20px -18px rgba(15, 18, 25, 0.45); } .jb-back-link:hover { color: var(--ink); border-color: rgba(15, 18, 25, 0.2); background: #fff; } @media (max-width: 767px) { .jb-detail-layout { display: grid; } .jb-detail-main { display: contents; } .jb-detail-hero { order: 1; } .jb-detail-description { order: 2; } /* Was order:2 (right after the hero, before the description) — apply is the last thing a reader needs, but they'd hit it first and then have to scroll back up past the whole description to reach it again. Now it's last, at the bottom. */ .jb-apply-panel { order: 3; } .jb-detail-page::before { left: 50%; right: auto; height: 14rem; } .jb-detail-hero-grid { grid-template-columns: 1fr; } .jb-detail-company-mark { width: 3.4rem; height: 3.4rem; border-radius: 14px; } .jb-detail-meta-grid { grid-template-columns: 1fr; } .jb-detail-title { font-size: clamp(1.55rem, 8vw, 2.25rem); letter-spacing: -0.03em; } .jb-detail-snapshot-grid { grid-template-columns: 1fr; } .jb-detail-brief { padding: 0.85rem; } .jb-detail-brief-simple { padding: 0; } .jb-detail-hero-simple .jb-detail-title { max-width: 100%; } .jb-detail-hero-simple::after { width: 70%; height: 8rem; opacity: 0.2; } .jb-detail-hero-art { right: -2rem; top: 0.4rem; bottom: auto; width: 12rem; height: 8rem; opacity: 0.34; transform: scale(0.82); transform-origin: right top; } .jb-art-card.is-side, .jb-art-line, .jb-art-node, .jb-art-badge { display: none; } .jb-art-card.is-main { right: 0; bottom: 0; } .jb-apply-graphic { opacity: 0.24; } .jb-detail-description-simple::before { opacity: 0.38; background: linear-gradient(0deg, rgba(15, 18, 25, 0.03) 1px, transparent 1px); background-size: 100% 2.15rem; } .jb-description-art { right: -2.2rem; top: 0.5rem; width: 5.4rem; opacity: 0.16; } .jb-description-art span { width: 4.2rem; } .jb-detail-simple-fact { min-height: 1.9rem; padding-inline: 0.62rem; } } .jb-skeleton-row { display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); } .jb-skeleton-avatar { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; } .jb-skeleton-lines { flex: 1; min-width: 0; } .jb-skeleton-line { height: 10px; border-radius: 6px; margin-bottom: 8px; } /* Source pill bar (jobs.ge / hr.ge / awork.ge counts + click-to-filter) */ .jb-source-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .jb-source-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.1); background: rgba(255, 255, 255, 0.82); font-size: 0.78rem; font-weight: 800; color: var(--ink-muted); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .jb-source-pill:hover { border-color: var(--border-strong); color: var(--ink); transform: translateY(-1px); box-shadow: 0 8px 18px -16px rgba(15, 18, 25, 0.5); } .jb-source-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .jb-source-pill .count { font-variant-numeric: tabular-nums; opacity: 0.75; } .jb-source-pill.is-all { font-weight: 700; color: var(--ink); } .jb-source-pill.is-all.is-active { color: #fff; } /* Sidebar filters */ .jb-sidebar { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem; } .jb-sidebar-group { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .jb-sidebar-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .jb-sidebar-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 0.6rem; } .jb-sidebar select, .jb-sidebar input[type="text"] { width: 100%; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--paper-warm) !important; color: var(--ink) !important; font-size: 0.8rem !important; padding: 0.5rem 0.65rem; } .jb-sidebar select:focus, .jb-sidebar input[type="text"]:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .jb-sidebar-clear { font-size: 0.75rem; font-weight: 600; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; cursor: pointer; padding: 0; } .jb-sidebar-clear:hover { color: var(--ink); } /* Inline collapsible filter bar (replaces the permanent sidebar) */ .jb-filters-inline { display: flex; flex-wrap: wrap; gap: 0.45rem 0.55rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgba(15, 18, 25, 0.1); } .jb-filters-inline .field { display: flex; flex-direction: column; gap: 0.22rem; min-width: 170px; flex: 1; } .jb-filters-inline label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); } .jb-filters-inline select, .jb-filters-inline input[type="text"] { border-radius: 10px !important; border: 1px solid rgba(15, 18, 25, 0.1) !important; background: rgba(250, 248, 243, 0.72) !important; color: var(--ink) !important; font-size: 0.8rem !important; padding: 0.5rem 0.65rem; } .jb-filters-inline select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.6rem center !important; background-size: 16px !important; padding-right: 2rem !important; } .jb-filters-inline select:focus, .jb-filters-inline input[type="text"]:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .jobs-filter-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .jobs-filter-tags button { min-height: 28px; padding: 0.28rem 0.52rem; border: 1px solid rgba(15, 18, 25, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--ink-muted); font-size: 0.74rem; font-weight: 800; line-height: 1.1; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .jobs-filter-tags button:hover { border-color: var(--border-strong); color: var(--ink); transform: translateY(-1px); } .jobs-filter-tags button.is-active { border-color: var(--accent); background: var(--accent); color: #fff; } .jb-filters-inline .field-actions { display: flex; align-items: flex-end; gap: 0.5rem; } /* Dense table listing (replaces the list+sticky-detail split) */ .jb-table-shell { position: relative; border: 1px solid rgba(15, 18, 25, 0.11); border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.66)), radial-gradient(circle at 92% 5%, rgba(22, 163, 74, 0.12), transparent 18rem); overflow: hidden; box-shadow: 0 18px 45px -35px rgba(15, 18, 25, 0.6); padding: 0.45rem; isolation: isolate; } .jb-table-shell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, transparent calc(100% - 9rem), rgba(22, 163, 74, 0.045) calc(100% - 9rem), transparent 100%), linear-gradient(0deg, rgba(15, 18, 25, 0.032) 1px, transparent 1px); background-size: auto, 100% 2.15rem; pointer-events: none; z-index: -1; } .jb-table-scroll { overflow-x: auto; border-radius: 16px; /* Hovered rows lift + scale(1.012) (see .jb-table tbody tr:hover) — that grows a row a bit wider than its own cell, so this wrapper needs real slack on each side or it clips the row against its own scrollable edge (confirmed: without this, a hovered row measured ~9-10px wider than the wrapper on both sides). */ padding: 0 0.7rem; animation: jb-table-refresh-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; } .jb-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 0.85rem; } .jb-table thead th { text-align: left; padding: 0.55rem 1rem 0.4rem; background: transparent; border-bottom: 0; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); white-space: nowrap; } .jb-table tbody tr { background: transparent; box-shadow: none; transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.15s ease; position: relative; } .jb-clickable-row { cursor: pointer; outline: none; } .jb-clickable-row:focus-visible { box-shadow: 4px 4px 0 rgba(47, 70, 68, 0.16); } .jb-table tbody tr:last-child { border-bottom: none; } .jb-table tbody tr:hover { box-shadow: 8px 10px 24px -10px rgba(15, 18, 25, 0.28); transform: translateY(-3px) scale(1.012); z-index: 2; } @keyframes jb-table-refresh-in { from { opacity: 0; transform: translateY(16px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .jb-table-row-enter-active { transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: min(calc(var(--row-index, 0) * 18ms), 180ms); } .jb-table-row-leave-active { transition: opacity 0.14s ease, transform 0.14s ease; } .jb-table-row-move { transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1); } .jb-table-row-enter-from, .jb-table-row-leave-to { opacity: 0; transform: translateY(14px) scale(0.985); } @media (prefers-reduced-motion: reduce) { .jb-table-row-enter-active, .jb-table-row-leave-active, .jb-table-row-move { transition: none; } .jb-table-row-enter-from, .jb-table-row-leave-to { transform: none; filter: none; } .jb-table-scroll { animation: none; } } .jb-table td { position: relative; padding: 1rem 1.05rem; vertical-align: middle; border-top: 2px solid var(--news-rule, rgba(15, 18, 25, 0.16)); border-bottom: 2px solid var(--news-rule, rgba(15, 18, 25, 0.16)); background: rgba(255, 255, 255, 0.96); transition: background-color 0.15s ease, border-color 0.15s ease; } .jb-table tbody td:first-child { border-left: 2px solid var(--news-rule, rgba(15, 18, 25, 0.16)); border-radius: 14px 0 0 14px; overflow: hidden; } .jb-table tbody td:last-child { border-right: 2px solid var(--news-rule, rgba(15, 18, 25, 0.16)); border-radius: 0 14px 14px 0; overflow: hidden; } .jb-table tbody td:last-child::before { display: none; } .jb-table tbody td:last-child::after { display: none; } .jb-table tbody tr:hover td { border-color: var(--news-ink, #1f2937); background: #fff; } .jb-company-cell { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.6rem; min-width: 210px; padding-left: 0.25rem; } .jb-company-cell::after { content: ""; position: absolute; right: 0.1rem; top: 50%; width: 2.2rem; height: 1px; background: linear-gradient(90deg, rgba(15, 18, 25, 0.14), transparent); opacity: 0.45; transform: translateY(-50%); } .jb-company-copy { min-width: 0; display: grid; gap: 0.12rem; } .jb-company-copy strong { color: var(--ink); font-size: 0.86rem; font-weight: 850; line-height: 1.2; overflow-wrap: anywhere; } .jb-company-copy span { color: var(--ink-muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } .jb-position-cell { min-width: 22rem; } .jb-position-copy { position: relative; z-index: 1; min-width: 0; } .jb-title-link { font-weight: 850; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; font-size: 1rem; line-height: 1.25; } .jb-title-link:hover { text-decoration: underline; text-underline-offset: 3px; } .jb-row-meta { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-top: 0.48rem; } .jb-row-chip { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0.1rem 0.48rem; border-radius: 999px; border: 1px solid rgba(15, 18, 25, 0.08); background: rgba(250, 248, 243, 0.82); color: var(--ink-muted); font-size: 0.68rem; font-weight: 750; line-height: 1; white-space: nowrap; } .jb-row-chip.is-industry { border-color: rgba(22, 163, 74, 0.18); background: rgba(22, 163, 74, 0.08); color: #047857; } .jb-salary-stack, .jb-date-stack { display: grid; gap: 0.18rem; min-width: 7.5rem; } .jb-salary-stack small, .jb-date-stack span { color: var(--ink-muted); font-size: 0.64rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.15; } .jb-date-stack strong { color: var(--ink); font-size: 0.82rem; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Most listings have no scraped salary, so this dash renders far more often than an actual figure — keeping it as visually heavy as real data (was: same weight as .jb-salary) made the whole column read as noisy dead space rather than receding the way an empty state should. */ .jb-muted-dash { color: var(--ink-muted); font-weight: 500; opacity: 0.55; } .jb-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.45rem; min-height: 2.45rem; padding: 0.55rem 0.72rem; border-radius: 999px; background: var(--accent); color: #fff !important; font-size: 0.75rem; font-weight: 850; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .jb-view-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -17px rgba(22, 163, 74, 0.75); } .jb-view-label { display: inline-block; } @media (max-width: 767px) { .jb-page::before { left: 50%; right: auto; top: -2rem; height: 17.5rem; } .jb-page-hero { align-items: stretch; flex-direction: column; } .jb-page-hero-copy { flex: 0 1 auto; } .jb-page-hero::before { width: 72%; height: 4rem; opacity: 0.22; } .jb-page-hero-art { top: 0.45rem; right: -2.6rem; width: 13rem; height: 4rem; opacity: 0.2; transform: scale(0.82); transform-origin: right top; } .jb-page-art-card.is-two, .jb-page-art-card.is-three, .jb-page-art-line, .jb-page-art-node { display: none; } .jb-page-art-card.is-one { right: 0; top: 0; } /* Compact wrapping chips instead of a 2-column grid of big tiles — the grid version ate ~300px of vertical space (3 rows) before a single job title was visible on a phone. A horizontal-scroll strip was tried next, but that just traded the space problem for a discoverability one (awork.ge/Helio were reachable by swipe but looked missing without one). Wrapping at this compact size shows all 5 sources up front with no scroll gesture needed, typically in 2 short rows instead of 3 tall ones. */ .jb-page-hero-stats { display: flex; flex-wrap: wrap; width: 100%; } .jb-page-hero-stat { flex: 0 0 auto; min-width: 0; min-height: 0; display: flex; align-items: baseline; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; text-align: left; white-space: nowrap; } .jb-page-hero-stat span { font-size: 0.62rem; } .jb-page-hero-stat strong { margin-top: 0; font-size: 1.05rem; } .jb-toolbar-row { flex-direction: column; } .jb-toolbar.is-hidden { margin-bottom: 0.5rem !important; padding: 0.7rem; max-height: none; border-width: 1px; transform: none; opacity: 1; pointer-events: auto; } .jb-toolbar.has-open-filters { position: relative !important; top: auto !important; overflow: visible; } .jb-search-field, .jb-filters-toggle { width: 100%; } .jb-table-shell { padding: 0.55rem; } .jb-table-shell::before { opacity: 0.45; background: linear-gradient(0deg, rgba(15, 18, 25, 0.028) 1px, transparent 1px); background-size: 100% 2.15rem; } .jb-table { display: block; min-width: 0; border-spacing: 0; } .jb-table-scroll { overflow-x: visible; border-radius: 0; } .jb-table thead { display: none; } .jb-table tbody { display: grid; gap: 0.75rem; width: 100%; } .jb-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; width: 100%; padding: 0.85rem; border: 2px solid var(--news-rule, rgba(15, 18, 25, 0.16)); border-radius: 2px; background: rgba(255, 255, 255, 0.97); box-shadow: 3px 3px 0 rgba(15, 18, 25, 0.06); box-sizing: border-box; } .jb-table tbody tr:hover { transform: none; box-shadow: 3px 3px 0 rgba(15, 18, 25, 0.10); } .jb-table td { display: block; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent; } .jb-table tbody tr:hover td { background: transparent; } .jb-table td:nth-child(1) { grid-column: 1 / -1; } .jb-table td:nth-child(2) { grid-column: 1 / -1; padding-top: 0.55rem; border-top: 1px solid rgba(15, 18, 25, 0.10) !important; } .jb-table td:nth-child(3), .jb-table td:nth-child(4) { min-width: 0; padding: 0.62rem 0.68rem; border: 1px solid rgba(15, 18, 25, 0.10) !important; background: rgba(250, 248, 243, 0.78); } .jb-table td:nth-child(5) { display: none; } .jb-position-cell, .jb-company-cell, .jb-salary-stack, .jb-date-stack { min-width: 0; } .jb-company-cell { padding-left: 0; } .jb-company-cell::after { display: none; } .jb-title-link { display: block; font-size: 1.02rem; line-height: 1.25; } .jb-row-meta { gap: 0.28rem; margin-top: 0.55rem; } .jb-row-chip { max-width: 100%; white-space: normal; line-height: 1.15; } .jb-salary-stack, .jb-date-stack { gap: 0.28rem; } .jb-view-btn { display: none; } } @media (min-width: 1024px) { .jb-detail-card .job-description-rich { max-width: 72ch; } } .resume-page .date { font-size: 13px !important; color: #404040 !important; margin-top: 3px !important; } .resume-page .skill { padding: 4px 10px; border-radius: 12px; font-size: 14px; display: inline-block; margin: 3px; } /* Page number: bottom-right corner, never overlaps content */ .page-number { position: absolute; bottom: 12px; right: 20px; font-size: 13px; color: #6b7280; z-index: 10; pointer-events: none; } .resume-page:first-child .page-number { display: none; } /* Mini A4 template previews (step 6 / design template selection style) */ .template-preview-mini { width: 100%; aspect-ratio: 210 / 297; max-height: 200px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 6px 8px; box-sizing: border-box; font-size: 5px; line-height: 1.25; } .template-preview-mini .header { padding-bottom: 4px; margin-bottom: 5px; } .template-preview-mini .name { font-weight: bold; margin-bottom: 2px; display: block; } .template-preview-mini .contact { font-size: 4px; color: #666; margin-bottom: 2px; } .template-preview-mini .section-title { font-weight: bold; margin: 4px 0 2px 0; padding-bottom: 2px; display: block; } .template-preview-mini .section-block { margin-bottom: 3px; } .template-preview-mini .experience-item, .template-preview-mini .education-item { font-size: 4px; color: #444; margin-bottom: 1px; } .template-preview-mini.modern-preview { font-family: "Helvetica Neue", Arial, sans-serif; } .template-preview-mini.modern-preview .header { border-bottom: 1px solid var(--selected-color, #3b82f6); } .template-preview-mini.modern-preview .name { font-size: 7px; color: var(--selected-color, #3b82f6); } .template-preview-mini.modern-preview .section-title { border-bottom: 1px solid #e5e7eb; font-size: 5px; } .template-preview-mini.minimal-preview { font-family: "Times New Roman", serif; } .template-preview-mini.minimal-preview .header { border-bottom: 1px solid var(--selected-color, #000); } .template-preview-mini.minimal-preview .name { font-size: 6px; color: var(--selected-color, #000); } .template-preview-mini.minimal-preview .section-title { border-bottom: 1px solid var(--selected-color, #000); font-size: 5px; } .template-preview-mini.professional-preview { font-family: Georgia, serif; background: #f0fdf4 !important; padding: 8px !important; } .template-preview-mini.professional-preview .header { border-bottom: 1px solid var(--selected-color, #059669); background: #f0fdf4; padding: 4px 0; margin: -8px -8px 4px -8px; padding-left: 8px; padding-right: 8px; } .template-preview-mini.professional-preview .name { font-size: 6px; color: var(--selected-color, #059669); } .template-preview-mini.professional-preview .section-title { border-bottom: 1px solid #a7f3d0; font-size: 5px; } .template-preview-mini.elegant-preview { font-family: Garamond, serif; background: #fafafa !important; padding: 8px !important; } .template-preview-mini.elegant-preview .header { border-bottom: 1px solid var(--selected-color, #8b5cf6); background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); padding: 4px 0; margin: -8px -8px 4px -8px; padding-left: 8px; padding-right: 8px; } .template-preview-mini.elegant-preview .name { font-size: 7px; color: #7c3aed; font-style: italic; } .template-preview-mini.elegant-preview .section-title { border-bottom: 1px solid #ddd6fe; font-size: 5px; font-style: italic; } .template-preview-mini.corporate-preview { font-family: Calibri, Arial, sans-serif; } .template-preview-mini.corporate-preview .header { border-bottom: 1px solid var(--selected-color, #dc2626); } .template-preview-mini.corporate-preview .name { font-size: 6px; color: var(--selected-color, #dc2626); text-transform: uppercase; letter-spacing: 0.5px; } .template-preview-mini.corporate-preview .section-title { border-bottom: 1px solid #fca5a5; font-size: 5px; text-transform: uppercase; } .template-preview-mini.saas-preview { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .template-preview-mini.saas-preview .header { padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid #e5e7eb; } .template-preview-mini.saas-preview .name { font-size: 6px; font-weight: 600; color: #111827; letter-spacing: -0.02em; } .template-preview-mini.saas-preview .contact { font-size: 4px; color: #6b7280; } .template-preview-mini.saas-preview .section-title { font-size: 4px; font-weight: 600; color: var(--selected-color, #0f766e); letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px solid #f3f4f6; } .template-preview-mini.impact-preview { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .template-preview-mini.impact-preview .header { border-bottom: 2px solid #4b5a85; } .template-preview-mini.impact-preview .name { font-size: 6px; font-weight: 800; color: #1f2937; } .template-preview-mini.impact-preview .section-title { border-bottom: 1px solid var(--selected-color, #10b981); font-size: 5px; font-weight: 700; color: var(--selected-color, #10b981); text-transform: uppercase; } .template-card.template-card-design { min-height: 200px; } .template-card.template-card-design--large-preview { padding: 8px !important; min-height: 248px; display: flex; flex-direction: column; } .template-card-design--large-preview .template-preview-mini { max-height: none; flex: 1 1 auto; min-height: 208px; margin-bottom: 8px !important; border-radius: 10px; font-size: 5.7px; line-height: 1.22; } .template-card-design--large-preview .template-preview-mini .contact, .template-card-design--large-preview .template-preview-mini .experience-item, .template-card-design--large-preview .template-preview-mini .education-item { font-size: 5px; line-height: 1.35; } .template-card-design--large-preview .template-preview-mini .name { font-size: 8.4px; } .template-card-design--large-preview .template-preview-mini .section-title { font-size: 5.8px; } .template-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; } .template-card-design--large-preview .template-card-footer { min-height: 18px; padding: 0 2px; } .template-card-name { font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .template-card-design--large-preview .template-card-name { font-size: 11px; } .template-selected-pill { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); background: #fff; color: var(--ink); padding: 2px 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 1px 1px 0 rgba(0,0,0,0.08); } .template-preview-mini .mini-pro-side, .template-preview-mini .mini-pro-main, .template-preview-mini .mini-elegant-orb, .template-preview-mini .mini-corporate-bar, .template-preview-mini .mini-side-heading, .template-preview-mini .mini-side-text { box-sizing: border-box; } .template-preview-mini.professional-preview:has(.mini-pro-side) { position: relative; background: #ffffff !important; padding: 0 !important; border-color: #d1d5db; } .template-preview-mini .mini-pro-side { position: absolute; inset: 0 auto 0 0; width: 36%; padding: 13px 7px; background: #2f363e; color: #fff; } .template-preview-mini .mini-pro-main { margin-left: 36%; padding: 12px 10px; } .template-preview-mini .mini-summary { margin: 6px 0 8px; color: #4b5563; font-size: 0.88em; line-height: 1.35; } .template-preview-mini .mini-copy { margin: 5px 0; color: #4b5563; font-size: 0.9em; line-height: 1.4; } .template-preview-mini .mini-avatar { display: block; width: clamp(58px, 8.2em, 82px); height: clamp(58px, 8.2em, 82px); margin: 0 auto 12px; border-radius: 999px; background-color: rgba(255,255,255,0.18); background-image: var(--avatar-sprite); background-size: 300% 200%; background-position: var(--avatar-position, 0% 0%); border: 2px solid rgba(255,255,255,0.88); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16); } .template-preview-mini .mini-resume-photo { display: block; width: clamp(58px, 7.8em, 78px); height: clamp(58px, 7.8em, 78px); margin: 0 0 0.85em; border-radius: 999px; background-color: #e5e7eb; background-image: var(--avatar-sprite); background-size: 300% 200%; background-position: var(--avatar-position, 0% 0%); border: 2px solid #ffffff; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14); } .template-preview-mini--modern { --avatar-position: 0% 0%; } .template-preview-mini--professional { --avatar-position: 50% 0%; } .template-preview-mini--elegant { --avatar-position: 100% 0%; } .template-preview-mini--corporate { --avatar-position: 0% 100%; } .template-preview-mini--saas { --avatar-position: 50% 100%; } .template-preview-mini--minimal { --avatar-position: 100% 100%; } .template-preview-mini--impact { --avatar-position: 0% 0%; } .template-preview-mini.modern-preview .header:has(.mini-resume-photo), .template-preview-mini.elegant-preview .header:has(.mini-resume-photo), .template-preview-mini.corporate-preview .header:has(.mini-resume-photo), .template-preview-mini.saas-preview .header:has(.mini-resume-photo) { position: relative; } .template-preview-mini.modern-preview .header:has(.mini-resume-photo), .template-preview-mini.saas-preview .header:has(.mini-resume-photo) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; } .template-preview-mini.modern-preview .header:has(.mini-resume-photo) .mini-resume-photo, .template-preview-mini.saas-preview .header:has(.mini-resume-photo) .mini-resume-photo { grid-row: 1 / span 2; margin-bottom: 0; } .template-preview-mini.elegant-preview .header:has(.mini-resume-photo) { text-align: center; } .template-preview-mini.elegant-preview .header:has(.mini-resume-photo) .mini-resume-photo { margin-left: auto; margin-right: auto; } .template-preview-mini.corporate-preview .header:has(.mini-resume-photo) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; } .template-preview-mini.corporate-preview .header:has(.mini-resume-photo) .mini-resume-photo { grid-row: 1 / span 2; margin-bottom: 0; border-radius: 8px; } .template-preview-mini .mini-side-title { display: block; height: 5px; width: 70%; margin: 0 0 7px; border-bottom: 1px solid rgba(255,255,255,0.35); } .template-preview-mini .mini-side-heading { display: block; margin: 0.9em 0 0.45em; padding-bottom: 0.32em; border-bottom: 1px solid rgba(255,255,255,0.28); color: #ffffff; font-size: 0.9em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .template-preview-mini .mini-side-heading:first-of-type { margin-top: 0; } .template-preview-mini .mini-side-text { display: block; margin: 0.24em 0; color: rgba(255,255,255,0.84); font-size: 0.82em; font-weight: 600; line-height: 1.25; } .template-preview-mini .mini-side-title.short { width: 56%; margin-top: 14px; } .template-preview-mini .mini-side-line { display: block; height: 3px; margin: 5px 0; background: rgba(255,255,255,0.45); } .template-preview-mini .w-55 { width: 55%; } .template-preview-mini .w-60 { width: 60%; } .template-preview-mini .w-70 { width: 70%; } .template-preview-mini .w-80 { width: 80%; } .template-preview-mini .mini-timeline-row { position: relative; display: block; margin: 8px 0 0 10px; padding-left: 9px; border-left: 1px solid #d6dbe2; } .template-preview-mini .mini-timeline-row span { position: absolute; left: -4px; top: 0; width: 6px; height: 6px; border-radius: 999px; border: 1.5px solid var(--selected-color, #059669); background: #fff; } .template-preview-mini .mini-timeline-row i, .template-preview-mini .mini-timeline-row b { display: block; height: auto; margin-bottom: 2px; background: transparent; color: #374151; font-style: normal; font-weight: 700; line-height: 1.25; opacity: 0.95; } .template-preview-mini .mini-timeline-row b { width: 100%; color: #9ca3af; font-weight: 600; opacity: 0.9; } .template-preview-mini .mini-bullets { margin: 5px 0 0; padding-left: 1.1em; color: #4b5563; font-size: 0.9em; line-height: 1.35; } .template-preview-mini .mini-bullets li { margin-bottom: 2px; } .template-preview-mini .mini-skill-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .template-preview-mini .mini-skill-row em { display: inline-flex; align-items: center; min-height: 1.6em; padding: 0.15em 0.55em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--selected-color, #0f766e) 28%, #ffffff); background: color-mix(in srgb, var(--selected-color, #0f766e) 10%, #ffffff); color: #374151; font-size: 0.82em; font-style: normal; font-weight: 700; line-height: 1; } .template-preview-mini.elegant-preview:has(.mini-elegant-orb) { position: relative; background: #fbfaf7 !important; border-color: #e5e7eb; } .template-preview-mini .mini-elegant-orb { position: absolute; top: -18px; left: -18px; width: 58px; height: 58px; border-radius: 999px; background: color-mix(in srgb, var(--selected-color, #8b5cf6) 20%, transparent); pointer-events: none; } .template-preview-mini.corporate-preview:has(.mini-corporate-bar) { padding-top: 0; border-color: #d1d5db; } .template-preview-mini .mini-corporate-bar { height: 10px; margin: 0 -8px 7px; background: var(--selected-color, #dc2626); } .template-preview-mini .mini-corp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 5px; } .template-preview-mini .mini-corp-grid span { display: flex; align-items: center; justify-content: center; min-height: 14px; border: 1px solid #e5e7eb; background: #f9fafb; color: #4b5563; font-size: 0.76em; font-weight: 700; text-align: center; } .template-preview-mini .mini-saas-card { margin-top: 6px; padding: 5px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,0.04); } .template-preview-mini .mini-saas-pills { display: flex; gap: 3px; margin-top: 6px; } .template-preview-mini .mini-saas-pills span { height: 8px; flex: 1 1 0; border-radius: 999px; background: color-mix(in srgb, var(--selected-color, #0f766e) 20%, #ffffff); border: 1px solid color-mix(in srgb, var(--selected-color, #0f766e) 35%, #ffffff); } .template-color-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); /* Keep the swatch carousel within its column so the accent row can't push out of the accordion frame (esp. mobile intrinsic sizing). */ min-width: 0; max-width: 100%; overflow: hidden; } /* Prev/next buttons flank the scrollable swatch strip in a fixed row, regardless of the panel's direction (the panel goes column on mobile). */ .template-color-carousel { display: flex; align-items: center; gap: 2px; width: 100%; min-width: 0; max-width: 100%; } .template-color-carousel .template-color-swatches { flex: 1 1 0 !important; width: auto !important; min-width: 0; max-width: 100%; } .template-color-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; color: var(--news-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06); cursor: pointer; /* Pointer parallax: the button face tilts toward the cursor (--mx/--my set inline on mousemove) while the arrow icon drifts a bit more — two depth layers. */ transform: perspective(240px) rotateX(calc(var(--my, 0) * -7deg)) rotateY(calc(var(--mx, 0) * 7deg)); transform-style: preserve-3d; transition: transform 0.16s ease-out, background-color 0.14s ease, color 0.14s ease, box-shadow 0.16s ease-out; } .template-color-nav svg { width: 15px; height: 15px; transform: translate(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 5px)); transition: transform 0.16s ease-out; } .template-color-nav:hover { background: var(--news-ink); color: var(--news-paper); box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.13); } .template-color-nav:active { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); } .template-color-nav:focus-visible { outline: 2px solid var(--news-ink); outline-offset: 2px; } .template-current-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); } .template-change-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; flex-shrink: 0; max-width: none; padding: 0.78rem 1.05rem; border: 2px solid var(--news-ink); border-radius: 2px; background: var(--news-ink); color: #ffffff; box-shadow: 2px 2px 0 rgba(0,0,0,0.1); font-size: 0.78rem; font-weight: 800; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease; } .template-change-btn:hover { background: #2a2a2a; transform: translateY(-1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.12); } .template-change-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .template-color-title { display: block; width: 100%; margin: 0; color: var(--ink); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; text-align: center; } .template-current-title-wrap { flex: 1 1 auto; min-width: 0; width: 100%; text-align: center; } .template-color-swatches { display: flex; /* Zero flex-basis so the scroll container never adopts its (wide) content width as its size — otherwise on mobile it renders full max-content and overflows the frame instead of scrolling internally. */ flex: 1 1 0; min-width: 0; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; /* Single-row carousel: scroll horizontally instead of wrapping to multiple rows. Vertical padding leaves room for the hover/selected transforms so they aren't clipped by the horizontal-overflow scroll container. */ overflow-x: auto; overflow-y: hidden; padding: 6px 2px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .template-color-swatches::-webkit-scrollbar { height: 6px; } .template-color-swatches::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } .template-color-swatch { scroll-snap-align: start; } .template-color-swatch { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; border: 2px solid #fff; outline: 1px solid var(--border-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); cursor: pointer; transition: transform 0.18s ease, outline-color 0.18s ease, box-shadow 0.18s ease; } .template-color-swatch:hover { transform: translateY(-1px); outline-color: var(--ink); } .template-color-swatch--selected { transform: scale(1.08); outline: 2px solid var(--ink); box-shadow: 0 0 0 4px rgba(15,23,42,0.08); } .template-modal-panel { max-width: min(1020px, calc(100vw - 28px)); max-height: min(94vh, 960px); display: flex; flex-direction: column; border: 0 !important; border-radius: 24px !important; background: #ffffff !important; box-shadow: 0 26px 80px rgba(15, 23, 42, 0.28) !important; } .template-modal-head { padding: 26px 56px 18px; border-bottom: 1px solid #ece9df; background: #fffdfa; text-align: center; } .template-modal-head > div { width: 100%; } .template-modal-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.03em; } .template-modal-body { overflow-y: auto; padding: 24px 30px 32px; background: #f7f5ef; } .template-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .template-modal-card { position: relative; min-height: auto; padding: 0 !important; border: 0; border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; transition: transform 0.18s ease; } .template-modal-card:hover { transform: translateY(-2px); box-shadow: none; } .template-modal-card--selected { border-color: transparent !important; box-shadow: none; } .template-modal-card .template-preview-mini { min-height: 527px; max-height: none; padding: 16px 18px; /* Modal previews mimic a real A4 resume zoomed down to the card width. */ font-size: 10.2px; line-height: 1.34; border-radius: 18px; border: 2px solid #2f2d29; box-shadow: 5px 5px 0 rgba(47, 45, 41, 0.10), inset 0 0 0 1px rgba(47,45,41,0.04); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .template-modal-card .template-preview-mini .header { padding-bottom: 9px; margin-bottom: 10px; } .template-modal-card .template-preview-mini .name { margin-bottom: 4px; font-size: 2em !important; line-height: 1.05; letter-spacing: -0.03em; } .template-modal-card .template-preview-mini .contact { display: block; font-size: 0.9em !important; line-height: 1.35; } .template-modal-card .template-preview-mini .section-title { margin: 10px 0 5px; padding-bottom: 3px; font-size: 1em !important; line-height: 1.15; letter-spacing: 0.05em; text-transform: uppercase; } .template-modal-card .template-preview-mini .section-block { margin-bottom: 8px; } .template-modal-card .template-preview-mini .experience-item, .template-modal-card .template-preview-mini .education-item { margin-bottom: 3px; font-size: 0.96em !important; line-height: 1.36; } .template-modal-card .template-preview-mini .mini-summary, .template-modal-card .template-preview-mini .mini-copy, .template-modal-card .template-preview-mini .mini-bullets { font-size: 0.93em; line-height: 1.4; } .template-modal-card .template-preview-mini .mini-bullets { margin-top: 5px; } .template-modal-card .template-preview-mini .mini-skill-row { gap: 5px; margin-top: 7px; } .template-modal-card .template-preview-mini .mini-skill-row em { min-height: 1.7em; padding: 0.2em 0.58em; font-size: 0.86em; } .template-modal-card .template-preview-mini .mini-avatar, .template-modal-card .template-preview-mini .mini-resume-photo { width: clamp(68px, 7.5em, 78px); height: clamp(68px, 7.5em, 78px); } .template-modal-card .template-preview-mini .mini-pro-side { padding: 17px 12px; } .template-modal-card .template-preview-mini .mini-pro-main { padding: 17px 16px; } .template-modal-card .template-preview-mini .mini-side-heading { font-size: 0.96em; } .template-modal-card .template-preview-mini .mini-side-text { font-size: 0.88em; } .template-modal-card .template-preview-mini .mini-timeline-row { margin-top: 8px; padding-left: 10px; } .template-modal-card .template-preview-mini .mini-timeline-row i { font-size: 0.96em; } .template-modal-card .template-preview-mini .mini-timeline-row b { font-size: 0.88em; } .template-modal-card .template-preview-mini .mini-saas-card { margin-top: 8px; padding: 10px; } .template-modal-card .template-preview-mini.saas-preview .header { padding-bottom: 8px; margin-bottom: 8px; } .template-modal-card .template-preview-mini.saas-preview .mini-saas-card { margin-top: 7px; padding: 8px 9px; } .template-modal-card .template-preview-mini.saas-preview .section-title { margin: 0 0 5px; } .template-modal-card .template-preview-mini.saas-preview .mini-bullets { margin-top: 4px; } .template-modal-card .template-preview-mini.saas-preview .mini-skill-row { margin-top: 6px; } .template-modal-card .template-preview-mini .mini-corp-grid { gap: 6px; margin-top: 8px; } .template-modal-card .template-preview-mini .mini-corp-grid span { min-height: 22px; font-size: 0.86em; } /* Builder modal thumbnails: override the old compact carousel styling so each chooser card reads like the actual updated template at a smaller scale. */ .template-modal-card .template-preview-mini { isolation: isolate; overflow: hidden; } .template-modal-card .template-preview-mini.template-preview-mini--modern, .template-modal-card .template-preview-mini.template-preview-mini--minimal, .template-modal-card .template-preview-mini.template-preview-mini--elegant, .template-modal-card .template-preview-mini.template-preview-mini--saas { padding: 16px 18px !important; } .template-modal-card .template-preview-mini.template-preview-mini--modern { background: linear-gradient(180deg, color-mix(in srgb, var(--selected-color, #3b82f6) 4%, transparent), transparent 46%), #ffffff !important; font-family: "Helvetica Neue", Arial, sans-serif; } .template-modal-card .template-preview-mini.template-preview-mini--modern .header { display: grid !important; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 28px 18px 22px !important; margin: -16px -18px 16px !important; border-bottom: 0 !important; background: color-mix(in srgb, var(--selected-color, #3b82f6) 13%, #ffffff) !important; } .template-modal-card .template-preview-mini.template-preview-mini--modern .mini-resume-photo { grid-row: 1 / span 2; margin: 0 !important; border-color: #ffffff; } .template-modal-card .template-preview-mini.template-preview-mini--modern .name { color: var(--selected-color, #3b82f6) !important; font-weight: 900; } .template-modal-card .template-preview-mini.template-preview-mini--modern .section-title { color: #111827; border-bottom: 2px solid #e5e7eb !important; } .template-modal-card .template-preview-mini.template-preview-mini--minimal { background: linear-gradient(180deg, color-mix(in srgb, var(--selected-color, #111827) 3%, transparent), transparent 48%), #ffffff !important; font-family: "Times New Roman", Georgia, serif; color: #1f2937; } .template-modal-card .template-preview-mini.template-preview-mini--minimal .header { padding: 30px 18px 24px !important; margin: -16px -18px 16px !important; text-align: center; border-top: 0 !important; border-bottom: 0 !important; background: color-mix(in srgb, var(--selected-color, #111827) 8%, #ffffff) !important; } .template-modal-card .template-preview-mini.template-preview-mini--minimal .name { color: var(--selected-color, #111827) !important; font-size: 1.86em !important; letter-spacing: 0.01em; } .template-modal-card .template-preview-mini.template-preview-mini--minimal .section-title { border-bottom: 1px solid var(--selected-color, #111827) !important; color: var(--selected-color, #111827); letter-spacing: 0.12em; } .template-modal-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side) { display: grid !important; grid-template-columns: 34% minmax(0, 1fr); padding: 0 !important; background: #ffffff !important; font-family: Georgia, "Times New Roman", serif; border-color: #2f363e; } .template-modal-card .template-preview-mini.template-preview-mini--professional .mini-pro-side { position: static !important; inset: auto !important; width: auto !important; min-height: 100%; padding: 22px 13px !important; background: #2f363e; } .template-modal-card .template-preview-mini.template-preview-mini--professional .mini-pro-main { margin-left: 0 !important; padding: 22px 18px !important; background: #ffffff; } .template-modal-card .template-preview-mini.template-preview-mini--professional .mini-avatar { width: clamp(78px, 8.6em, 92px); height: clamp(78px, 8.6em, 92px); margin-bottom: 16px; } .template-modal-card .template-preview-mini.template-preview-mini--professional .name { color: #2f363e !important; font-weight: 900; } .template-modal-card .template-preview-mini.template-preview-mini--professional .contact, .template-modal-card .template-preview-mini.template-preview-mini--professional .section-title { color: var(--selected-color, #059669) !important; } .template-modal-card .template-preview-mini.template-preview-mini--professional .section-title { border-bottom: 2px solid #2f363e !important; } .template-modal-card .template-preview-mini.template-preview-mini--elegant { background: radial-gradient(circle 92px at 42px 54px, color-mix(in srgb, var(--selected-color, #8b5cf6) 20%, transparent) 0 91px, transparent 92px), radial-gradient(circle 48px at 138px 20px, color-mix(in srgb, var(--selected-color, #8b5cf6) 10%, transparent) 0 47px, transparent 48px), #ffffff !important; font-family: Garamond, Georgia, serif; border-color: #d8d2c4; } .template-modal-card .template-preview-mini.template-preview-mini--elegant .mini-elegant-orb { display: none; } .template-modal-card .template-preview-mini.template-preview-mini--elegant .header { display: block !important; min-height: 136px; padding: 24px 18px 20px !important; margin: -16px -18px 16px !important; text-align: center; border-bottom: 0 !important; background: transparent !important; } .template-modal-card .template-preview-mini.template-preview-mini--elegant .mini-resume-photo { margin: 0 auto 10px !important; border-color: #fffaf0; } .template-modal-card .template-preview-mini.template-preview-mini--elegant .name { color: var(--selected-color, #7c3aed) !important; font-style: italic; font-weight: 900; } .template-modal-card .template-preview-mini.template-preview-mini--elegant .section-title { color: var(--selected-color, #7c3aed); font-style: italic; border-bottom: 2px solid #ddd6fe !important; } .template-modal-card .template-preview-mini.template-preview-mini--corporate { padding: 0 18px 16px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--selected-color, #dc2626) 5%, transparent), transparent 52%), #ffffff !important; font-family: Calibri, Arial, sans-serif; border-color: #334155; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .mini-corporate-bar { display: none; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .header { display: grid !important; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 30px 18px 24px !important; margin: 0 -18px 16px !important; border-bottom: 0 !important; background: color-mix(in srgb, var(--selected-color, #dc2626) 18%, #ffffff) !important; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .mini-resume-photo { grid-row: 1 / span 2; margin: 0 !important; border-radius: 12px; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .name { color: var(--selected-color, #dc2626) !important; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .section-title { color: #111827; border-bottom: 2px solid #fca5a5 !important; text-transform: uppercase; } .template-modal-card .template-preview-mini.template-preview-mini--corporate .mini-corp-grid span { border-color: #fecaca; background: #fff7f7; color: #7f1d1d; text-transform: uppercase; } .template-modal-card .template-preview-mini.template-preview-mini--saas { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; border-color: #cbd5e1; } .template-modal-card .template-preview-mini.template-preview-mini--saas .header { display: grid !important; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 30px 18px 50px !important; margin: -16px -18px 18px !important; border-bottom: 0 !important; background: var(--selected-color, #0f766e) !important; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); } .template-modal-card .template-preview-mini.template-preview-mini--saas .mini-resume-photo { grid-row: 1 / span 2; margin: 0 !important; } .template-modal-card .template-preview-mini.template-preview-mini--saas .name { color: #ffffff !important; font-weight: 800; letter-spacing: -0.04em; } .template-modal-card .template-preview-mini.template-preview-mini--saas .contact { color: rgba(255,255,255,0.86) !important; } .template-modal-card .template-preview-mini.template-preview-mini--saas .mini-saas-card { border-color: #e2e8f0; border-radius: 13px; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055); } .template-modal-card .template-preview-mini.template-preview-mini--saas .section-title { color: var(--selected-color, #0f766e); border-bottom: 1px solid #f1f5f9 !important; } .template-modal-card .template-preview-mini.template-preview-mini--saas .mini-skill-row em { border-radius: 7px; background: color-mix(in srgb, var(--selected-color, #0f766e) 12%, #ffffff); } .template-modal-card .template-preview-mini.template-preview-mini--impact { padding: 0 0 16px !important; background: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; border-color: #333d63; } .template-modal-card .template-preview-mini.template-preview-mini--impact .header { display: grid !important; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 26px 18px 20px !important; margin: -16px -18px 14px !important; border-bottom: 0 !important; background: #4b5a85 !important; } .template-modal-card .template-preview-mini.template-preview-mini--impact .mini-resume-photo { grid-row: 1 / span 2; margin: 0 !important; border-radius: 50%; border-color: var(--selected-color, #10b981); } .template-modal-card .template-preview-mini.template-preview-mini--impact .name { color: #ffffff !important; font-weight: 800; } .template-modal-card .template-preview-mini.template-preview-mini--impact .contact { color: var(--selected-color, #34d399) !important; } .template-modal-card .template-preview-mini.template-preview-mini--impact .mini-imp-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 14px; padding: 0 18px; } .template-modal-card .template-preview-mini.template-preview-mini--impact .section-title { color: var(--selected-color, #10b981); border-bottom: 1px solid var(--selected-color, #10b981) !important; } .template-modal-card .template-preview-mini.template-preview-mini--impact .mini-skill-row em { background: #2b3358; color: #ffffff; border-color: #2b3358; } .template-modal-card:hover .template-preview-mini { border-color: var(--ink); box-shadow: 7px 7px 0 rgba(47, 45, 41, 0.14), 0 16px 32px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(47,45,41,0.04); } .template-modal-card--selected .template-preview-mini { border-color: #2f2d29; box-shadow: 0 0 0 4px var(--accent-soft), 7px 7px 0 rgba(47, 45, 41, 0.16), 0 16px 32px rgba(15,23,42,0.10), inset 0 0 0 1px rgba(47,45,41,0.04); } .template-modal-card .template-card-name { display: block; width: 100%; color: var(--ink); font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; line-height: 1.05; text-align: center; letter-spacing: -0.02em; } .template-modal-card .template-card-footer--top { position: relative; justify-content: center; min-height: 38px; margin-bottom: 12px; padding: 0 86px; text-align: center; } .template-modal-card .template-selected-pill { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* Single-row template carousel: lighter than rendering a tall 3×2 grid and easier to scan. */ .template-carousel-shell { position: relative; min-width: 0; } .template-cards-grid.template-carousel-track { display: flex; gap: 14px; padding: 4px 3px 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; -webkit-overflow-scrolling: touch; } .template-carousel-track > .template-card-design { flex: 0 0 clamp(168px, 31%, 220px); scroll-snap-align: start; } .template-carousel-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 34px; height: 44px; margin-top: -28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 2px; background: rgba(255,255,255,0.94); color: var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,0.08); cursor: pointer; } .template-carousel-arrow svg { width: 18px; height: 18px; } .template-carousel-arrow--prev { left: -8px; } .template-carousel-arrow--next { right: -8px; } .template-carousel-arrow:hover { background: var(--news-paper); } /* Selected template card: use box-shadow so it isn't clipped by the carousel. */ .template-card.template-card-design.template-card--selected:not(.template-modal-card) { position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--accent); } @media (max-width: 768px) { .template-preview-mini { max-height: 160px; padding: 4px 6px; font-size: 4px; } .template-card.template-card-design { padding: 10px; min-height: 180px; } .template-card.template-card-design--large-preview { padding: 7px !important; min-height: 236px; } .template-card-design--large-preview .template-preview-mini { min-height: 200px; max-height: none; font-size: 5px; } .template-carousel-track > .template-card-design { flex-basis: min(78vw, 220px); } .template-carousel-arrow { display: none; } .template-current-panel, .template-color-panel { align-items: flex-start; flex-direction: column; } .template-current-panel { align-items: stretch; } .template-color-panel { width: 100%; gap: 12px; overflow: visible; } .template-color-swatches { flex: none; width: 100%; max-width: 100%; gap: 12px; padding: 8px 4px 10px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; } .template-color-swatches::-webkit-scrollbar { display: none; } .template-color-swatch { width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-width: 3px; } .template-color-swatch--selected { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.10); } .template-change-btn { width: 100%; padding: 0.85rem 1rem; } .template-modal-head { padding: 20px 44px 14px; } .auth-modal-overlay:has(.template-modal-panel) { align-items: center; justify-content: center; padding: 12px !important; min-height: 100dvh; } .template-modal-panel.mobile-modal { width: min(100%, calc(100dvw - 24px)) !important; max-width: calc(100dvw - 24px) !important; max-height: calc(100dvh - 24px) !important; margin: 0 !important; } .template-modal-body { padding: 14px; } .template-modal-grid { grid-template-columns: 1fr; gap: 12px; } .template-modal-card { min-height: auto; } .template-modal-card .template-preview-mini { min-height: 225px; font-size: 5px; border-radius: 14px; } .template-modal-card .mini-avatar, .template-modal-card .mini-resume-photo { width: clamp(44px, 7.2em, 58px); height: clamp(44px, 7.2em, 58px); } .template-modal-card .template-card-footer--top { min-height: 32px; margin-bottom: 10px; padding: 0 72px; } .template-modal-card .template-card-name { font-size: 22px; } } /* Template Overrides */ /* Modern Template */ .modern-preview { font-family: "Helvetica Neue", Arial, sans-serif; } .modern-preview .header { border-bottom: 3px solid var(--selected-color); } .modern-preview .name { font-size: 34px; color: var(--selected-color); font-weight: bold; margin-bottom: 12px; } .modern-preview .resume-document-title { font-size: 20px; font-weight: 600; color: var(--selected-color); margin: 0 0 10px 0; line-height: 1.25; } .modern-preview .section-title { border-bottom: 2px solid #e5e7eb; } .modern-preview .position { color: #1e40af; font-size: 19px !important; } .modern-preview .skill { background: #dbeafe; color: #1e40af; } /* Minimal Template */ .minimal-preview { font-family: "Times New Roman", serif; } .minimal-preview .header { border-bottom: 1px solid var(--selected-color); } .minimal-preview .name { font-size: 29px; color: var(--selected-color); font-weight: bold; margin-bottom: 12px; } .minimal-preview .resume-document-title { font-size: 21px; font-weight: 600; color: var(--selected-color); margin: 0 0 10px 0; line-height: 1.25; } .minimal-preview .section-title { font-size: 19px; border-bottom: 1px solid var(--selected-color); } .minimal-preview .position { color: var(--selected-color); font-size: 17px !important; } .minimal-preview .skill { background: #f5f5f5; color: var(--selected-color); border: 1px solid var(--selected-color); } /* Professional Template: preserve the charcoal sidebar and white main column across sparse/continuation preview pages, not only where iframe content exists. */ .professional-preview, .professional-preview.resume-page { font-family: "Georgia", serif; background-color: #ffffff !important; background-image: linear-gradient(90deg, #2f363e 0, #2f363e 250px, #ffffff 250px) !important; /* Explicit full-box size + no-repeat: a repeat-y gradient with auto size fails to paint the lower portion of a tall page at deviceScaleFactor 2 (Retina), leaving the sidebar white below the content slice. Pinning the size makes it cover edge-to-edge at any DPI. */ background-size: 100% 100% !important; background-repeat: no-repeat !important; padding: var(--resume-margin-inset) !important; margin: 0 !important; width: 100% !important; box-sizing: border-box; } /* Paint the dark sidebar as a solid block behind the iframe slice. A CSS gradient (background-image) drops its lower portion at deviceScaleFactor 2 (Retina), leaving a white band over the sidebar below the content slice on a tall page. A solid background-color layer paints reliably at any DPI and guarantees the sidebar reaches the page bottom. Iframe-shell only: the client-side fallback renders a generic header, not the 2-column layout. */ .professional-preview.resume-page.resume-preview-shell--iframe::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 250px; background-color: #2f363e; z-index: 0; pointer-events: none; } .professional-preview .resume-page-content { background: transparent !important; z-index: 1; } /* The client-side fallback (pre-iframe placeholder, e.g. a brand-new resume before its preview loads) only renders the generic .resume-header — it cannot produce the dark two-column .pro-resume layout. Painting the sidebar gradient there left the dark band behind that header (dark text over dark = unreadable "overlay from the old template"). Keep the gradient on the iframe shell only; the fallback shows a plain white page until the real preview arrives. */ .professional-preview.resume-page:not(.resume-preview-shell--iframe) { background-image: none !important; background-color: #ffffff !important; } /* Client-side fallback render: .header has margin: calc(-1 * var(--resume-margin-inset)) to span edge-to-edge. The data-border padding (20px/40px) is smaller than --resume-margin-inset (57px+), so the negative margin overshoots overflow:hidden and clips the top of the header. Match padding to --resume-margin-inset so the negative margin cancels it exactly. The :not(.resume-preview-shell--iframe) guard keeps the iframe branch untouched. */ .professional-preview:not(.resume-preview-shell--iframe) .resume-page-content { padding: var(--resume-margin-inset) !important; } .professional-preview .header { border-bottom: 2px solid var(--selected-color); background: #f0fdf4; padding: 20px var(--resume-margin-inset); margin: calc(-1 * var(--resume-margin-inset)) calc(-1 * var(--resume-margin-inset)) 30px calc(-1 * var(--resume-margin-inset)); } .professional-preview .name { font-size: 31px; color: var(--selected-color); font-weight: bold; margin-bottom: 12px; } .professional-preview .resume-document-title { font-size: 21px; font-weight: 600; color: var(--selected-color); margin: 0 0 10px 0; line-height: 1.25; } .professional-preview .section-title { border-bottom: 1px solid #a7f3d0; } .professional-preview .position { color: #065f46; font-size: 19px !important; } .professional-preview .skill { background: #d1fae5; color: #065f46; } /* Elegant Template */ .elegant-preview { font-family: "Garamond", serif; background: #fafafa !important; padding: var(--resume-margin-inset) !important; margin: 0 !important; width: 100% !important; box-sizing: border-box; } .elegant-preview .header { border-bottom: 2px solid var(--selected-color); background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); padding: 25px var(--resume-margin-inset); margin: calc(-1 * var(--resume-margin-inset)) calc(-1 * var(--resume-margin-inset)) 30px calc(-1 * var(--resume-margin-inset)); } .elegant-preview .name { font-size: 38px; color: #7c3aed; font-weight: bold; font-style: italic; margin-bottom: 12px; } .elegant-preview .resume-document-title { font-size: 22px; font-weight: 600; font-style: italic; color: var(--selected-color, #7c3aed); margin: 0 0 10px 0; line-height: 1.25; } .elegant-preview .contact { color: var(--text-color, #5b21b6); } .elegant-preview .section-title { font-size: 24px; font-style: italic; border-bottom: 2px solid #ddd6fe; } .elegant-preview .position { color: #7c3aed; font-style: italic; font-size: 19px !important; } .elegant-preview .skill { background: linear-gradient(135deg, #ddd6fe 0%, #e9d5ff 100%); color: #7c3aed; border: 1px solid #c4b5fd; } /* Corporate Template */ .corporate-preview { font-family: "Calibri", "Arial", sans-serif; } .corporate-preview .header { border-bottom: 3px solid var(--selected-color); } .corporate-preview .name { font-size: 31px; color: var(--selected-color); font-weight: bold; text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 12px; } .corporate-preview .resume-document-title { font-size: 15px; font-weight: 700; color: var(--selected-color); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px 0; line-height: 1.25; } .corporate-preview .contact { color: var(--text-color, #7f1d1d); text-transform: uppercase; } .corporate-preview .section-title { font-size: 19px; text-transform: uppercase; border-bottom: 2px solid #fca5a5; } .corporate-preview .position { color: #991b1b; text-transform: uppercase; font-size: 17px !important; } .corporate-preview .skill { background: #fef2f2; color: var(--selected-color); border: 1px solid #fca5a5; text-transform: uppercase; font-size: 13px; } /* SaaS / Premium Template - Stripe, Linear, Notion aesthetic */ .saas-preview { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .saas-preview .header { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #e5e7eb; } .saas-preview .name { font-size: 26px; font-weight: 600; color: #0f172a; letter-spacing: -0.025em; margin-bottom: 8px; line-height: 1.25; } .saas-preview .resume-document-title { font-size: 14px; font-weight: 600; color: var(--selected-color); letter-spacing: -0.01em; margin: 0 0 10px 0; line-height: 1.3; } .saas-preview .contact { font-size: 11px; color: #4b5563; letter-spacing: 0.01em; line-height: 1.6; } .saas-preview .summary { font-size: 12px; color: #374151; line-height: 1.6; margin-bottom: 24px; } .saas-preview .section-title { font-size: 11px; font-weight: 600; color: var(--selected-color); letter-spacing: 0.08em; text-transform: uppercase; margin: 24px 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6; } .saas-preview .section-block:first-of-type .section-title { margin-top: 0; } .saas-preview .experience-item, .saas-preview .education-item { margin-bottom: 20px !important; } .saas-preview .position, .saas-preview .degree { font-size: 13px !important; font-weight: 600 !important; color: #0f172a !important; } .saas-preview .company, .saas-preview .institution { font-size: 12px !important; font-weight: 500 !important; color: var(--selected-color) !important; } .saas-preview .date { font-size: 11px !important; color: #6b7280 !important; font-weight: 500 !important; } .saas-preview .description { font-size: 12px !important; color: #374151 !important; line-height: 1.55 !important; margin-top: 4px !important; } .saas-preview .skill { font-size: 11px !important; font-weight: 500 !important; padding: 3px 10px !important; border-radius: 4px !important; color: #1f2937 !important; background: #f9fafb !important; border: 1px solid #e5e7eb !important; margin: 0 6px 6px 0 !important; } /* Impact client-side fallback (pre-iframe placeholder): the real template renders a 2-column HTML shape server-side only (see ResumeController::generateResumeHtml), so this briefly-shown generic single-column fallback just picks up the brand colors. */ .impact-preview .header { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 2px solid #4b5a85; } .impact-preview .name { font-size: 28px; font-weight: 800; color: #1f2937; letter-spacing: -0.01em; margin-bottom: 6px; } .impact-preview .resume-document-title { font-size: 14px; font-weight: 700; color: var(--selected-color, #10b981); margin: 0 0 10px 0; } .impact-preview .contact { font-size: 11px; color: #4b5563; } .impact-preview .summary { font-size: 12px; color: #374151; line-height: 1.6; margin-bottom: 24px; } .impact-preview .section-title { font-size: 11px; font-weight: 700; color: var(--selected-color, #10b981); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid var(--selected-color, #10b981); } .impact-preview .company { color: var(--selected-color, #10b981) !important; } .impact-preview .skill { font-size: 11px !important; font-weight: 700 !important; padding: 4px 11px !important; border-radius: 5px !important; color: #ffffff !important; background: #2b3358 !important; border: none !important; margin: 0 6px 6px 0 !important; } /* Section-specific template details. Semantic section classes are shared by the server iframe and the client fallback, so preview and PDF keep the same hierarchy. */ .section-block { position: relative; } .education-item, .project-item, .credential-item { break-inside: avoid; page-break-inside: avoid; } .credential-item { position: relative; margin-bottom: 12px; padding: 10px 12px; } .credential-name { font-weight: 700; line-height: 1.35; } .credential-issuer { margin-top: 2px; color: var(--selected-color); } .credential-date { margin-top: 3px; font-size: 0.86em; opacity: 0.72; } /* Modern: timeline + crisp cards */ .modern-preview .section-experience .experience-item { position: relative; margin-left: 6px; padding-left: 20px; border-left: 2px solid color-mix(in srgb, var(--selected-color) 22%, transparent); } .modern-preview .section-experience .experience-item::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--selected-color); } .modern-preview .section-education .education-item { padding: 14px 16px; background: color-mix(in srgb, var(--selected-color) 8%, white); border-left: 4px solid var(--selected-color); } .modern-preview .section-projects .project-item { padding: 14px 16px; background: #f8fafc; border: 1px solid #e5e7eb; border-top: 3px solid var(--selected-color); } .modern-preview .section-certifications .credential-item { border: 1px solid #e5e7eb; border-left: 4px solid var(--selected-color); } .modern-preview .section-awards .credential-item { background: color-mix(in srgb, var(--selected-color) 8%, white); border-bottom: 2px solid var(--selected-color); } /* Minimal: typographic rules and restrained dividers */ .minimal-preview .section-experience .experience-item { padding-left: 16px; border-left: 1px solid var(--selected-color); } .minimal-preview .section-education .education-item { padding: 12px 0; border-top: 3px double var(--selected-color); border-bottom: 1px solid var(--selected-color); } .minimal-preview .section-skills .skills, .minimal-preview .section-languages .skills { padding: 10px 0; border-top: 1px solid var(--selected-color); border-bottom: 1px solid var(--selected-color); } .minimal-preview .section-projects .project-item { padding-left: 16px; border-left: 4px double var(--selected-color); } .minimal-preview .credential-item { padding-left: 0; padding-right: 0; border-bottom: 1px dotted var(--selected-color); } /* Professional: calm inset panels */ .professional-preview .section-experience .experience-item, .professional-preview .section-education .education-item { padding: 14px 16px; background: rgba(255, 255, 255, 0.46); border-left: 4px solid var(--selected-color); } .professional-preview .section-skills .skills, .professional-preview .section-languages .skills { padding: 14px; background: rgba(255, 255, 255, 0.38); border: 1px solid color-mix(in srgb, var(--selected-color) 20%, transparent); } .professional-preview .section-projects .project-item { padding: 14px 16px; background: rgba(255, 255, 255, 0.46); border-bottom: 3px solid var(--selected-color); } .professional-preview .credential-item { background: rgba(255, 255, 255, 0.48); border: 1px solid color-mix(in srgb, var(--selected-color) 20%, transparent); } /* Elegant: ornamental headings and framed highlights */ .elegant-preview .section-title::after { content: " ◆"; font-size: 0.55em; color: var(--selected-color); vertical-align: middle; } .elegant-preview .section-experience .experience-item { padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--selected-color) 24%, transparent); } .elegant-preview .section-education .education-item { padding: 14px 18px; background: color-mix(in srgb, var(--selected-color) 8%, white); border: 1px solid color-mix(in srgb, var(--selected-color) 20%, transparent); } .elegant-preview .section-projects .project-item { padding: 14px 18px; border-left: 1px solid var(--selected-color); border-right: 1px solid var(--selected-color); } .elegant-preview .credential-item { text-align: center; background: color-mix(in srgb, var(--selected-color) 8%, white); border-top: 1px solid var(--selected-color); border-bottom: 1px solid var(--selected-color); } /* Corporate: bold section bars and structured blocks */ .corporate-preview .section-title { padding: 7px 10px !important; background: var(--selected-color) !important; color: #fff !important; border-bottom: 0 !important; letter-spacing: 0.08em; } .corporate-preview .section-experience .experience-item, .corporate-preview .section-education .education-item { padding: 12px 14px; border-left: 5px solid var(--selected-color); background: color-mix(in srgb, var(--selected-color) 8%, white); } .corporate-preview .section-skills .skills, .corporate-preview .section-languages .skills { padding: 12px; border: 1px solid var(--selected-color); } .corporate-preview .section-projects .project-item { padding: 12px 14px; border: 2px solid var(--selected-color); } .corporate-preview .credential-item { border-left: 5px solid var(--selected-color); background: color-mix(in srgb, var(--selected-color) 14%, white); } /* SaaS: lightweight cards and dashed project modules */ .saas-preview .section-experience .experience-item { padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .saas-preview .section-education .education-item { padding: 12px 14px; background: color-mix(in srgb, var(--selected-color) 8%, white); border-radius: 8px; } .saas-preview .section-skills .skills, .saas-preview .section-languages .skills { padding: 12px 14px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; } .saas-preview .section-projects .project-item { padding: 14px 16px; border: 1px dashed var(--selected-color); border-radius: 8px; background: color-mix(in srgb, var(--selected-color) 8%, white); } .saas-preview .credential-item { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .saas-preview .section-awards .credential-item { border-color: var(--selected-color); background: color-mix(in srgb, var(--selected-color) 8%, white); } /* Loading Animation Styles */ @keyframes pulse-dots { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } .animate-pulse-dots span { animation: pulse-dots 1.4s infinite ease-in-out both; } .animate-pulse-dots span:nth-child(1) { animation-delay: -0.32s; } .animate-pulse-dots span:nth-child(2) { animation-delay: -0.16s; } .animate-pulse-dots span:nth-child(3) { animation-delay: 0s; } /* Shimmer for skeletons - GPU-friendly, no layout thrash */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton-shimmer { background: linear-gradient( 90deg, var(--skeleton-bg, #f0f0f0) 0%, var(--skeleton-highlight, #e8e8e8) 40%, var(--skeleton-bg, #f0f0f0) 100% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } .skeleton-shimmer-subtle { background: linear-gradient( 90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100% ); background-size: 200% 100%; animation: shimmer 2s ease-in-out infinite; } /* Vue hasn't compiled #app yet until mounted() runs — without this, raw {{ mustache }} text and every v-if/v-else-if branch would be visible simultaneously for that brief window. Cloaked with opacity (not display:none) so removing v-cloak — which Vue 3 does automatically the moment it takes over — fades smoothly into the real page instead of popping in abruptly. */ #app { opacity: 1; transition: opacity 280ms ease; } #app[v-cloak] { opacity: 0; } @media (prefers-reduced-motion: reduce) { #app { transition: none; } } /* Progress bar animation */ @keyframes progress { 0% { width: 0%; transform: translateX(-100%); } 50% { width: 70%; transform: translateX(0%); } 100% { width: 100%; transform: translateX(0%); } } .animate-progress { animation: progress 2s ease-in-out infinite; } /* Preview loading placeholder - A4-style skeleton */ .preview-loading-skeleton { aspect-ratio: 210 / 297; max-width: 100%; min-height: 360px; background: linear-gradient( 180deg, #f3f4f6 0%, #e5e7eb 12%, #f3f4f6 14%, #e5e7eb 18%, #f3f4f6 22%, #e5e7eb 28%, #f3f4f6 32%, #e5e7eb 38%, #f3f4f6 100% ); background-size: 100% 200%; animation: preview-skeleton-pulse 2s ease-in-out infinite; } @keyframes preview-skeleton-pulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 1; } } .toast-enter-active, .toast-leave-active { transition: opacity 0.3s, transform 0.3s; } .toast-enter-from, .toast-leave-to { opacity: 0; transform: translate(-50%, 10px); } /* ATS Resume Scanning Animation */ .ats-scan-container { --ats-paper: #f8fafc; --ats-paper-line: rgba(148, 163, 184, 0.25); --ats-scan-glow: var(--accent); --ats-scan-shadow: rgba(37, 99, 235, 0.35); } @media (prefers-color-scheme: dark) { .ats-scan-container { --ats-paper: #1e293b; --ats-paper-line: rgba(148, 163, 184, 0.15); --ats-scan-shadow: rgba(99, 102, 241, 0.4); } } .ats-scan-doc { aspect-ratio: 210 / 297; max-width: 180px; background: var(--ats-paper); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; position: relative; } .ats-scan-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--ats-paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--ats-paper-line) 1px, transparent 1px); background-size: 100% 24px; background-position: 12px 16px; opacity: 0.8; } .ats-scan-line { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ats-scan-glow), transparent); box-shadow: 0 0 12px var(--ats-scan-shadow), 0 0 24px var(--ats-scan-shadow); animation: ats-scan-sweep 16s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ats-scan-line { animation: ats-scan-sweep-slow 24s ease-in-out infinite; } } @keyframes ats-scan-sweep { 0% { top: 8%; opacity: 0.6; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 92%; opacity: 0.6; } } @keyframes ats-scan-sweep-slow { 0% { top: 8%; opacity: 0.6; } 100% { top: 92%; opacity: 0.6; } } .ats-scan-highlight { position: absolute; left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, transparent 100%); pointer-events: none; animation: ats-scan-highlight 16s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ats-scan-highlight { animation: ats-scan-highlight-slow 24s ease-in-out infinite; } } @keyframes ats-scan-highlight { 0% { top: 0%; opacity: 0.3; } 100% { top: 85%; opacity: 0.3; } } @keyframes ats-scan-highlight-slow { 0% { top: 0%; opacity: 0.3; } 100% { top: 85%; opacity: 0.3; } } .ats-scan-dots { position: absolute; inset: 0; pointer-events: none; } .ats-scan-dot { position: absolute; width: 4px; height: 4px; background: var(--ats-scan-glow); border-radius: 50%; opacity: 0; animation: ats-scan-dot 16s ease-in-out infinite; } .ats-scan-dot:nth-child(1) { left: 15%; top: 20%; animation-delay: 1.6s; } .ats-scan-dot:nth-child(2) { left: 45%; top: 35%; animation-delay: 3.7s; } .ats-scan-dot:nth-child(3) { left: 70%; top: 50%; animation-delay: 5.8s; } .ats-scan-dot:nth-child(4) { left: 25%; top: 65%; animation-delay: 8s; } .ats-scan-dot:nth-child(5) { left: 60%; top: 80%; animation-delay: 6.7s; } @keyframes ats-scan-dot { 0%, 100% { opacity: 0; transform: scale(0.5); } 20%, 80% { opacity: 0.7; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } @media (prefers-reduced-motion: reduce) { .ats-scan-dot { animation: none; opacity: 0.3; } } .ats-scan-doc-wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .ats-scan-magnifier { position: absolute; width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; color: var(--ats-scan-glow); filter: drop-shadow(0 0 6px var(--ats-scan-shadow)); pointer-events: none; z-index: 5; animation: ats-magnifier-scan 16s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ats-scan-magnifier { animation: ats-magnifier-scan 24s ease-in-out infinite; } } @keyframes ats-magnifier-scan { 0% { left: 12%; top: 15%; opacity: 0.8; } 12% { left: 50%; top: 15%; opacity: 1; } 25% { left: 88%; top: 15%; opacity: 0.8; } 37% { left: 88%; top: 45%; opacity: 1; } 50% { left: 50%; top: 45%; opacity: 0.9; } 62% { left: 12%; top: 45%; opacity: 1; } 75% { left: 12%; top: 75%; opacity: 0.9; } 87% { left: 50%; top: 75%; opacity: 1; } 100% { left: 12%; top: 15%; opacity: 0.8; } } /* Smooth loading transition */ #loading-overlay { transition: opacity 0.5s ease-out; } #app { transition: opacity 0.5s ease-in; } /* Fade in animation for skeleton */ @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; } /* Fade in up animation for content loading */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; } /* Dashboard entrance + interaction polish */ .dashboard-stat-chip { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } .dashboard-stat-chip:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08); } /* Section rule sweeps out from the title after the header settles. */ .dashboard-rule-grow { transform-origin: left center; animation: dashboard-rule-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } @keyframes dashboard-rule-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 0.4; } } /* Smoother, springier card hover than the default translate. */ .dashboard-resume-card .resume-card-preview { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .dashboard-resume-card:hover .resume-card-preview { transform: translateY(-6px) scale(1.015); } .dashboard-resume-card:hover .resume-card-info .resume-card-preview { transform: none; } .dashboard-resume-grid .resume-card-hover-overlay { z-index: 3; } .resume-card-info { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border: 1.5px solid rgba(26, 26, 26, 0.14); border-radius: 8px; background: linear-gradient(180deg, #ffffff 0%, var(--news-paper-contrast, #faf8f3) 100%); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.055); overflow: hidden; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .resume-card-info .resume-card-preview { width: 100% !important; align-self: center; border: 0; border-radius: 8px 8px 0 0; box-shadow: none; } .resume-card-info__summary { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: center; padding: 38px 10px 10px; background: linear-gradient(180deg, rgba(15, 18, 25, 0) 0%, rgba(15, 18, 25, 0.74) 46%, rgba(15, 18, 25, 0.9) 100%); } .dashboard-resume-card:hover .resume-card-info { transform: translateY(-2px); border-color: rgba(26, 26, 26, 0.28); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08); } .resume-card-info__icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(6px); } .resume-card-info__icon svg { width: 18px; height: 18px; } .resume-card-info__body { min-width: 0; } .resume-card-info__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 0.9rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36); } .resume-card-info__meta { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 5px; color: rgba(255, 255, 255, 0.82); font-size: 0.72rem; line-height: 1; } .resume-card-info__template { flex: 0 1 auto; min-width: 0; max-width: 54%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; text-transform: capitalize; } .resume-card-info__date { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; } .resume-card-info__date::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.48); transform: translateY(-50%); } @media (min-width: 768px) { .resume-card-info .resume-card-preview { border-radius: 8px; } } @media (max-width: 767px) { .resume-card-info .resume-card-preview-actions { position: absolute !important; display: flex !important; justify-content: center; align-items: stretch; gap: 5px; left: 0 !important; right: 0 !important; bottom: 84px !important; z-index: 4; padding: 0 10px; } /* Icon-only pills tested ambiguous (PDF vs Word looked identical at a glance on touch devices, where there's no hover tooltip to fall back on), so each pill carries a short label under the icon — flex:1 so all 5 share the row evenly regardless of card width. */ .resume-card-preview-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1 1 0; min-width: 0; padding: 6px 2px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: var(--ink, #0f1219); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32); transition: transform 0.1s ease, background 0.15s ease; } .resume-card-preview-action svg { width: 16px; height: 16px; flex-shrink: 0; } .resume-card-preview-action span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; } .resume-card-preview-action:active { transform: scale(0.92); } .resume-card-preview-action--accent { background: var(--accent, #474644); color: #fff; } .resume-card-preview-action--danger { color: #dc2626; } } /* Builder (resume editor) entrance: the toolbar + form fade up, the sticky preview fades in (opacity only, so the animation never fights position:sticky). */ @keyframes builder-fade { from { opacity: 0; } to { opacity: 1; } } .builder-enter { animation: fade-in-up 0.5s ease-out both; } .builder-enter-fade { animation: builder-fade 0.55s ease-out both; } /* Wizard step / section switch: the newly shown form section slides up + fades. Driven by v-show display:none -> block, so it replays each time you change step. */ @keyframes section-switch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .builder-scope .accordion-body { animation: section-switch-in 0.34s cubic-bezier(0.22, 1, 0.36, 1); } /* Preview page flip: the new page slides in from the direction of travel. Toggled by a class on the scroller (only on real page navigation, not on preview content re-fetch). */ @keyframes preview-flip-next { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } @keyframes preview-flip-prev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } } .resume-preview-scroller.preview-flip-next .resume-page { animation: preview-flip-next 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .resume-preview-scroller.preview-flip-prev .resume-page { animation: preview-flip-prev 0.34s cubic-bezier(0.22, 1, 0.36, 1); } /* Template switch: a small paper-settle motion plus an accent sweep. This is separate from page navigation, so changing templates never looks like changing PDF pages. */ @keyframes preview-template-settle { 0% { opacity: 0.45; transform: scale(0.975) translateY(8px); filter: saturate(0.7); } 55% { opacity: 1; transform: scale(1.006) translateY(-2px); filter: saturate(1.08); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: saturate(1); } } @keyframes preview-template-sweep { 0% { opacity: 0; transform: translateX(-115%) skewX(-12deg); } 18% { opacity: 0.34; } 70% { opacity: 0.16; } 100% { opacity: 0; transform: translateX(115%) skewX(-12deg); } } .resume-preview-scroller.preview-template-switch { position: relative; isolation: isolate; } .resume-preview-scroller.preview-template-switch .resume-page { animation: preview-template-settle 0.56s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center top; } .resume-preview-scroller.preview-template-switch::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.7) 49%, transparent 66%); animation: preview-template-sweep 0.58s ease-out both; } /* While a template switch is being re-measured, hide the slice windows so the new template's HTML is never shown through the previous template's stale slice geometry (clipped first page / wrong page count). Revealed once measurement settles. */ .resume-preview-scroller .resume-preview-slice-window { transition: opacity 0.18s ease-out; } .resume-preview-scroller.preview-remeasuring .resume-preview-slice-window { opacity: 0; } @media (prefers-reduced-motion: reduce) { .animate-fade-in-up, .dashboard-rule-grow, .builder-enter, .builder-enter-fade, .resume-preview-scroller.preview-template-switch .resume-page, .resume-preview-scroller.preview-template-switch::after { animation: none; opacity: 1; transform: none; filter: none; } .dashboard-resume-card:hover .resume-card-preview { transform: none; } .template-cards-grid.template-carousel-track { scroll-behavior: auto; } } /* Preview content transition when design/style changes */ .preview-content-enter-active, .preview-content-leave-active { transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .preview-content-enter-from { opacity: 0; transform: scale(0.995); } .preview-content-leave-to { opacity: 0; transform: scale(0.998); } /* Smooth transitions for loaded content */ .transition-all { transition: all 0.3s ease-in-out; } /* Auth modals: must apply on all breakpoints (was incorrectly scoped inside mobile-only media query). */ .auth-modal-overlay { z-index: 9999; padding: 16px; } .auth-modal-panel { width: 100%; max-width: 32rem; isolation: isolate; position: relative; background: var(--news-paper-contrast); } .auth-modal-panel, .auth-modal-panel * { box-sizing: border-box; } .auth-modal-panel .newspaper-btn-solid, .auth-modal-panel .newspaper-btn-ghost { letter-spacing: normal !important; text-transform: none !important; } .auth-modal-panel input, .auth-modal-panel button, .auth-modal-panel a { line-height: 1.25rem; } /* Newspaper-styled dialogs (must not be scoped to mobile-only — modals use these on all breakpoints). */ .mobile-modal { max-height: calc(100vh - 32px); overflow-y: auto; } .news-modal-panel { background: var(--news-paper-contrast); border: 2px solid var(--news-rule); border-radius: 2px; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.08); } .news-modal-close { border: 1px solid var(--news-rule); border-radius: 2px; color: var(--news-muted); background: #fff; } .news-modal-close:hover { color: var(--news-ink); background: var(--news-paper); } .news-modal-input { border: 1px solid #1a1a1a !important; border-radius: 0 !important; background: var(--news-paper-contrast) !important; color: var(--news-ink) !important; } .news-modal-input::placeholder { color: var(--news-muted); opacity: 0.85; } .news-modal-input:focus { border-color: #1a1a1a !important; box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08); outline: none; } .news-modal-alert { border: 2px solid #dc2626; border-radius: 2px; background: #fef2f2; color: #b91c1c; } .news-modal-panel .newspaper-btn-solid, .news-modal-panel .newspaper-btn-ghost { letter-spacing: normal !important; text-transform: none !important; } .legal-modal-panel { width: 100%; max-width: 42rem; isolation: isolate; position: relative; background: var(--news-paper-contrast); max-height: calc(100vh - 32px); display: flex; flex-direction: column; } .legal-modal-panel, .legal-modal-panel * { box-sizing: border-box; } .legal-modal-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 2px solid var(--news-rule); padding-bottom: 0.5rem; margin-bottom: 0.75rem; } .legal-modal-tab { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.45rem 0.65rem; border: 2px solid var(--news-rule); border-radius: 2px; background: #fff; color: var(--news-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .legal-modal-tab:hover { color: var(--news-ink); background: var(--news-paper); } .legal-modal-tab--active { color: var(--news-ink); border-color: var(--accent, #0f766e); background: var(--news-paper); } .legal-modal-body { overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.25rem; } .legal-modal-prose { font-size: 0.8125rem; line-height: 1.6; color: var(--news-ink); } .legal-modal-prose h3 { font-size: 0.9375rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.4rem; color: var(--news-ink); } .legal-modal-prose h3:first-child { margin-top: 0; } .legal-modal-prose p { margin: 0.35rem 0 0.65rem; } .legal-modal-prose ul { list-style: disc; padding-left: 1.2rem; margin: 0.35rem 0 0.65rem; } .legal-modal-prose li { margin: 0.2rem 0; } .legal-modal-prose hr { border: 0; border-top: 1px solid var(--news-rule); margin: 0.85rem 0; } .legal-modal-prose .legal-note { font-size: 0.75rem; color: var(--news-muted); margin-top: 0.5rem; } /* Mobile Optimizations */ @media (max-width: 1024px) { .resume-preview-wrapper { width: 100%; transform: none; margin-bottom: 0; transform-origin: center top; } .resume-page { width: 100%; /* Fixed height for page-break detection; A4 proportion when narrow. Avoid 100vw on real phones (layout vs visual viewport). */ height: min(297mm, calc(100vw * 11.69 / 8.27)); min-height: min(297mm, calc(100vw * 11.69 / 8.27)); height: min(297mm, calc(100dvw * 11.69 / 8.27)); min-height: min(297mm, calc(100dvw * 11.69 / 8.27)); aspect-ratio: 8.27 / 11.69 !important; } /* Scaled builder preview: keep true A4 box so iframe slices aren’t clipped to vw-based height. */ .resume-preview-zoom-inner .resume-page { width: 100%; height: 297mm !important; min-height: 297mm !important; max-height: none !important; aspect-ratio: 8.27 / 11.69 !important; } .resume-page-content { min-height: 100%; } .resume-preview-scroller { padding-bottom: 24px; } /* Builder mobile preview: less dead space under scaled A4 (trim is also applied via marginBottom on zoom layer). */ .builder-scope .resume-preview-scroller { padding-bottom: 8px; gap: 12px; } } @media (max-width: 768px) { /* Accordion Frame Mobile */ .accordion-frame { border-radius: 0.75rem; } .builder-scope #section-basic-info .wizard-basic-grid { display: grid; gap: 0.75rem; padding: 0.9rem; border: 1.5px solid rgba(26, 26, 26, 0.14); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 243, 0.86)), var(--news-paper-contrast); box-shadow: 0 14px 32px -28px rgba(15, 18, 25, 0.78); } .builder-scope #section-basic-info .wizard-basic-grid > * { margin-top: 0 !important; } .builder-scope #section-basic-info .wizard-basic-field { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .builder-scope #section-basic-info .wizard-basic-field:focus-within { background: transparent; box-shadow: none; } .builder-scope #section-basic-info .wizard-basic-field label { margin-bottom: 0.38rem !important; color: var(--news-ink) !important; font-size: 0.76rem !important; font-weight: 850 !important; letter-spacing: 0.01em; } .builder-scope #section-basic-info .wizard-basic-field .mobile-input { border-color: rgba(26, 26, 26, 0.16) !important; background-color: rgba(255, 255, 255, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .builder-scope #section-basic-info .wizard-basic-field + .wizard-basic-field { padding-top: 0.05rem; } /* Mobile Header */ header .text-xl { font-size: 1.125rem; /* 18px */ } /* Mobile Typography */ .mobile-title { font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ } .mobile-subtitle { font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ } /* Mobile Form Elements */ .mobile-input { font-size: 16px; /* Prevents zoom on iOS */ padding: 12px 16px; min-height: 44px; /* iOS minimum touch target */ } .mobile-button { min-height: 44px; padding: 12px 24px; font-size: 16px; } .mobile-select { font-size: 16px; padding: 12px 16px; min-height: 44px; } /* Mobile Accordion */ .accordion-trigger { padding: 14px 16px; font-size: 16px; min-height: 48px; } .accordion-body { padding: 0 16px 14px 16px; } /* Mobile Design Group */ .design-group { gap: 0; margin: 0 -16px; padding: 0; } .design-subsection { padding: 12px 0; border-left: none; border-right: none; border-radius: 0; width: 100%; } .design-subsection > * { padding-left: 16px; padding-right: 16px; } .design-subsection-title { font-size: 13px; margin-bottom: 8px; } /* Mobile Template Cards */ .template-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .template-card { padding: 12px; min-height: 120px; } .template-card h4 { font-size: 14px; } .template-card p { font-size: 12px; } /* Mobile Form Spacing */ .form-section { margin-bottom: 0; padding: 0; } /* Mobile Preview Panel */ .mobile-preview-panel { padding: 16px; } .mobile-preview-controls { padding: 8px 12px 12px; gap: 8px; } /* Dashboard resume grid */ .dashboard-resume-grid { gap: 24px; } /* Mobile Dashboard Cards */ .dashboard-grid { grid-template-columns: 1fr; gap: 16px; } .dashboard-resume-grid { gap: 20px; } .dashboard-card { padding: 20px; } /* Mobile Welcome / Landing */ .welcome-section .rounded-2xl.bg-white { padding: 1.5rem 1.25rem; } .welcome-title { font-size: 1.75rem; line-height: 2.25rem; } .welcome-description { font-size: 1rem; line-height: 1.625rem; } /* Mobile Language Switcher */ .language-dropdown { width: 100%; left: 0; right: 0; } /* Mobile Color Picker */ .color-picker-container { flex-direction: column; gap: 16px; align-items: flex-start; } .color-picker-input { width: 100%; max-width: 200px; height: 48px; } /* Mobile Skill Input */ .skill-input-container { flex-direction: column; gap: 8px; } .skill-input { width: 100%; } .skill-add-button { width: 100%; min-height: 44px; } /* Mobile Experience Form */ .builder-scope .accordion-body { overflow-x: hidden; } .builder-scope .experience-card { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding: 1rem !important; box-sizing: border-box; } .builder-scope .experience-card > .flex:first-child { flex-wrap: wrap; gap: 0.75rem; } .builder-scope .experience-card > .flex:first-child > .flex { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .experience-grid { grid-template-columns: 1fr; gap: 12px; } .builder-scope .experience-grid, .builder-scope .experience-grid > div { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .builder-scope .experience-grid input, .builder-scope .experience-grid select, .builder-scope .experience-grid textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .builder-scope #section-experience .experience-grid > div:last-child .flex { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; } .builder-scope #section-experience .experience-grid > div:last-child button { width: 100%; min-height: 40px; white-space: normal; } .experience-textarea { min-height: 100px; } /* Mobile Actions */ .action-buttons { flex-direction: column; gap: 12px; } .action-button { width: 100%; min-height: 48px; justify-content: center; } } @media (max-width: 640px) { /* Extra small mobile optimizations */ .accordion-trigger { padding: 12px 14px; } .accordion-body { padding: 0 14px 12px 14px; } .auth-modal-overlay:has(.template-modal-panel) { padding: 10px !important; } .template-modal-panel.mobile-modal { width: min(100%, calc(100dvw - 20px)) !important; max-width: calc(100dvw - 20px) !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; } .template-modal-head { padding: 16px 42px 12px; } /* Extra small Design Group */ .design-group { gap: 0; margin: 0 -14px; padding: 0; } .design-subsection { padding: 10px 0; border-left: none; border-right: none; border-radius: 0; width: 100%; } .design-subsection > * { padding-left: 14px; padding-right: 14px; } .design-subsection-title { font-size: 12px; margin-bottom: 6px; } /* Keep the Edit/Preview toggle pinned to the bottom of the viewport so it stays directly under the preview and reachable without scrolling to the very end of a full-height preview page. */ .mobile-builder-toggle { position: sticky; bottom: 10px; z-index: 30; margin-top: 12px; margin-bottom: 10px; animation: mobileToggleIn 0.28s ease-out both; } .mobile-builder-toggle > button { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); } @keyframes mobileToggleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .mobile-builder-toggle button { padding: 8px 6px; font-size: inherit; line-height: 1.2; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease; } .mobile-builder-toggle button:active { transform: scale(0.97); } @media (max-width: 360px) { .mobile-builder-toggle button svg { display: none; } } .form-section { padding: 0; margin-bottom: 0; } .template-card { padding: 10px; min-height: 100px; } .dashboard-card { padding: 16px; } .dashboard-resume-grid .resume-card-preview { width: 220px !important; } /* Thumbnail scale is measured from the actual card width in JS (--thumb-scale, set on :root) so the scaled 794px preview always matches the card and never overflows it. transform-origin pins it to the top-left so it fills from the corner. */ .dashboard-resume-grid .preview-thumb-iframe { transform-origin: 0 0 !important; } /* Overlay content pop-up: desktop on hover, mobile on show (more noticeable) */ .dashboard-resume-grid .resume-card-overlay-content { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out; } @media (min-width: 768px) { .dashboard-resume-grid .resume-card-overlay-content { transform: translateY(28px) scale(0.92); opacity: 0; } .dashboard-resume-grid .group:hover .resume-card-overlay-content { transform: translateY(0) scale(1); opacity: 1; } } /* Mobile: the hover overlay above has no touch equivalent (no persistent :hover, so its PDF/Word/ATS/Delete buttons were previously unreachable by tap — confirmed by testing: opacity stayed 0 after a real tap). display:none instead of relying on opacity also stops the overlay's full-card hit area from ever intercepting taps. Phones get the always-visible .resume-card-preview-actions dock instead, floating directly over the bottom of the preview (see the max-width:767px block above). */ .dashboard-resume-grid .resume-card-hover-overlay { display: none; } /* Mobile: larger resume cards */ @media (max-width: 767px) { .dashboard-resume-grid .resume-card-preview { aspect-ratio: 210 / 297 !important; width: min(100%, 300px) !important; max-width: 300px; height: auto !important; min-height: 0; } .dashboard-resume-grid .preview-thumb-wrapper { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .dashboard-resume-grid .preview-thumb-iframe { display: block; transform-origin: 0 0 !important; } .dashboard-resume-grid .rounded-xl.skeleton-shimmer-subtle { width: 100% !important; max-width: 440px; } .dashboard-resume-grid > div { width: 100%; max-width: 440px; } .dashboard-resume-grid .resume-card-info { max-width: 100% !important; } } .mobile-modal { margin: 16px; } .app-header-newspaper .header-bar-ghost { padding: 0 12px; font-size: 14px; } .app-header-newspaper .header-bar-solid { padding: 0 12px !important; } .language-dropdown { margin-top: 8px; } /* Mobile navigation */ .nav-brand { flex-shrink: 0; } .nav-brand h1 { font-size: 1rem; } /* Mobile spacing */ main { padding: 16px 12px; } .section-spacing { margin-bottom: 24px; } } #sign-out-btn, header button.sign-out-btn { color: #fff !important; cursor: pointer; } /* ===================================================================== UI polish pass 1 — accessibility + micro-interactions (within the existing editorial aesthetic; no layout/colour changes). ===================================================================== */ /* Accessible keyboard focus ring on every interactive element. :where() keeps specificity 0 so component styles still win; only shows for keyboard nav, never on mouse click. Biggest accessibility gap in the audit. */ :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent, #474644); outline-offset: 2px; border-radius: 2px; } :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } /* Press feedback: the offset "newspaper" buttons depress on click. */ .newspaper-btn-solid:active { transform: translate(0, 0) !important; box-shadow: 2px 2px 0 rgba(17, 17, 17, 0.16) !important; } .newspaper-btn-ghost:active { transform: translateY(0) !important; } /* Branded text selection. */ ::selection { background: var(--accent, #474644); color: #fff; } .ai-improve-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease; } .ai-improve-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08); } .ai-improve-btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0; background: linear-gradient(110deg, transparent 0%, rgba(71, 70, 68, 0.08) 35%, rgba(59, 130, 246, 0.18) 50%, rgba(34, 197, 94, 0.12) 65%, transparent 100%); transform: translateX(-120%); } .ai-improve-btn.is-thinking { border-color: rgba(59, 130, 246, 0.55); background: #f8fbff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08), 0 10px 22px rgba(59, 130, 246, 0.12); } .ai-improve-btn.is-thinking::before { opacity: 1; animation: ai-button-sheen 1.15s linear infinite; } .ai-improve-btn.is-applied { border-color: rgba(34, 197, 94, 0.65); background: #f0fdf4; color: #166534; animation: ai-button-applied 0.58s cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-spinner { box-shadow: 0 0 12px rgba(59, 130, 246, 0.28); } .ai-text-target-loading { border-color: rgba(59, 130, 246, 0.55) !important; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(59, 130, 246, 0.07) 45%, rgba(34, 197, 94, 0.07) 55%, rgba(255, 255, 255, 0) 100%); background-size: 240% 100%; animation: ai-field-scan 1.45s ease-in-out infinite, ai-field-breathe 1.45s ease-in-out infinite; } .ai-text-target-applied { animation: ai-field-applied 1.05s ease-out; } @keyframes ai-button-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } } @keyframes ai-button-applied { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes ai-field-scan { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes ai-field-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } 50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 10px 28px rgba(59, 130, 246, 0.08); } } @keyframes ai-field-applied { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); border-color: rgba(34, 197, 94, 0.75); } 38% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16), 0 14px 30px rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.75); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* Builder: align editor surfaces with the softer landing-page system. */ .builder-scope.builder-newspaper { --builder-glass: var(--news-paper-contrast); --builder-glass-strong: var(--news-paper-contrast); --builder-line: var(--news-rule); --builder-line-strong: var(--news-rule); --builder-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); --builder-shadow-strong: 6px 6px 0 rgba(0, 0, 0, 0.09); } .builder-scope .builder-masthead { padding: 1rem; border: 2px solid var(--news-rule) !important; border-radius: 2px; background: var(--news-paper-contrast); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); } .builder-scope .builder-masthead .bg-\[var\(--accent\)\], .builder-scope .builder-masthead .bg-\[var\(--news-muted\)\] { border-radius: 2px !important; padding-inline: 0.65rem; } .builder-scope .builder-masthead button, .builder-scope .builder-masthead a, .builder-scope .wizard-nav button, .builder-scope .template-change-btn, .builder-scope .ai-improve-btn { border-radius: 2px !important; } .builder-scope .builder-masthead button, .builder-scope .builder-masthead a { border-width: 2px !important; border-color: var(--news-rule) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .builder-scope .builder-masthead button:not(:disabled):hover, .builder-scope .builder-masthead a:hover { transform: translateY(-1px); border-color: var(--news-rule) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08) !important; } .builder-scope .wizard-steps-bar, .builder-scope .builder-strength, .builder-scope .builder-checklist, .builder-scope .accordion-frame, .builder-scope .inline-edit-hint { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; } .builder-scope .wizard-nav { border: 0 !important; border-top: 1px solid rgba(26, 26, 26, 0.14) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(250, 248, 243, 0.92), rgba(250, 248, 243, 0.72)) !important; box-shadow: none !important; } .builder-scope .wizard-steps-bar { gap: 0.35rem !important; padding: 0.65rem !important; } @media (max-width: 640px) { .builder-scope .builder-strength { padding: 0.85rem !important; } .builder-scope .builder-strength-title-row { align-items: stretch !important; } .builder-scope .builder-strength-title-row > h2 { max-width: calc(100% - 4rem); } .builder-scope .builder-strength-inline { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-top: 0.35rem; } .builder-scope .builder-strength-track { height: 0.75rem !important; } } .builder-scope .builder-strength-inline { min-width: 0 !important; } .builder-scope .builder-strength-track { inline-size: 100%; min-inline-size: 0; contain: layout paint; } .builder-scope .builder-strength-fill { min-width: 0; max-width: 100%; } @media (min-width: 641px) and (max-width: 1399px) { .builder-scope .builder-strength-title-row { align-items: stretch !important; } .builder-scope .builder-strength-inline { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-top: 0.25rem; } } .builder-scope .wizard-step-btn { border-width: 2px !important; border-radius: 2px !important; letter-spacing: 0; box-shadow: none !important; } .builder-scope .wizard-step-btn.active { background: var(--news-ink, #1a1a1a) !important; color: #fff !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12) !important; } .builder-scope .wizard-step-connector { width: 0.9rem; min-width: 0.65rem; border-radius: 0; opacity: 0.72; } .builder-scope .builder-checklist { padding: 1rem !important; } .builder-scope .builder-checklist-item { border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05); } .builder-scope .builder-checklist-item:hover { transform: translateY(-1px); border-color: var(--news-rule); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08); } .builder-scope .builder-checklist-item span { border-radius: 2px; border-color: var(--news-rule); } .builder-scope .accordion-frame { overflow: hidden; } .builder-scope .accordion-frame.accordion-frame--basic-open { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; } .builder-scope .accordion-frame.accordion-frame--basic-open .wizard-basic-step.is-open { background: transparent !important; } .builder-scope .accordion-frame.accordion-frame--basic-open .wizard-basic-step.is-open .accordion-body { border-top: 0 !important; } .builder-scope .accordion-frame .accordion-section:not(:last-child) { border-bottom: 1px solid rgba(15, 18, 25, 0.08); border-bottom-style: solid; } .builder-scope .accordion-frame .accordion-section.is-open { background: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.46)); } .builder-scope .accordion-frame .accordion-section.is-open .accordion-body { border-top: 1px solid rgba(15, 18, 25, 0.08); } .builder-scope .accordion-trigger { font-family: var(--font-sans, system-ui, sans-serif); padding: 1rem 1.15rem; } .builder-scope .accordion-trigger:hover { background: rgba(255, 255, 255, 0.44); } .builder-scope .accordion-trigger .section-icon { border-radius: 2px; background: rgba(26, 26, 26, 0.06) !important; } .builder-scope .accordion-section.is-open .accordion-trigger .section-icon { color: var(--accent); background: var(--accent-soft) !important; } .builder-scope .accordion-trigger .section-label p { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; } /* Builder ↔ landing alignment: entry cards use the editorial paper/border/shadow */ .builder-scope .experience-card { border: 2px solid var(--news-rule) !important; border-radius: 2px !important; background: var(--news-paper-contrast) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.06) !important; } .builder-scope .experience-card:hover { border-color: var(--news-rule) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08) !important; } /* Collapse toggle: a small chevron that rotates -90deg when the card is collapsed (pointing right instead of down), matching the accordion-trigger chevron convention. */ .exp-collapse-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-top: 0.1rem; border: none; background: transparent; color: var(--ink-light); cursor: pointer; transition: transform 0.18s ease, color 0.15s ease; } .exp-collapse-toggle:hover { color: var(--ink); } .exp-collapse-toggle.is-collapsed { transform: rotate(-90deg); } .exp-card-collapsed-dates { margin-top: 0.15rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-light); } .experience-card--collapsed { padding-bottom: 1.25rem; } .exp-line-count { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-muted); font-size: 0.7rem; font-weight: 700; white-space: nowrap; } .exp-bullet-tip { margin: 0.4rem 0 0; color: var(--ink-light); font-size: 0.76rem; font-style: italic; } .builder-scope .accordion-body { padding-inline: 1.15rem; } .builder-scope .design-group { gap: 0.75rem; width: 100%; margin: 0; padding: 0; } .builder-scope .design-subsection { border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper); padding: 1rem; } .builder-scope .design-subsection:hover { border-color: var(--news-rule); background: var(--news-paper-contrast); } .builder-scope .design-subsection > * { padding-left: 0; padding-right: 0; } .builder-scope .design-subsection-title { color: var(--ink); font-weight: 800; letter-spacing: 0; } .builder-scope .design-subsection--color-frame { display: flex; flex-direction: column; min-height: 132px; } .builder-scope .design-subsection--color-frame .color-picker-container { flex: 1; min-height: 72px; align-items: center; } .builder-scope .design-subsection--color-frame .color-picker-input { width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; } /* Inner control panels sit inside the subsection box already — keep them borderless so the Design & Styling section isn't a nest of squares. */ .builder-scope .template-current-panel, .builder-scope .template-color-panel, .builder-scope .design-subsection .rounded-2xl, .builder-scope .color-picker-container { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .builder-scope input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .builder-scope textarea, .builder-scope select { border: 1.5px solid var(--news-rule) !important; border-radius: 2px !important; background-color: var(--news-paper-contrast) !important; box-shadow: none; } .builder-scope input:focus, .builder-scope textarea:focus, .builder-scope select:focus { border-color: var(--news-ink) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } .builder-scope .resume-preview-column { border-radius: 2px; } .builder-scope .resume-preview-scroller { width: calc(210mm + 4px); max-width: none; padding: 0; box-sizing: border-box; border: 2px solid var(--news-rule); border-radius: 2px; background: var(--news-paper-contrast); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.06); } .builder-scope .resume-page { box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.10) !important; border-radius: 2px; } .builder-scope .mobile-builder-toggle button { border-radius: 2px !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12) !important; } @media (min-width: 1024px) { .newspaper-main:has(.builder-scope.builder-newspaper) { min-height: calc(100dvh - 4rem); overflow: hidden; } .builder-scope.builder-newspaper { min-height: 0; } .builder-scope.builder-newspaper .builder-frame { height: calc(100dvh - 5.5rem); min-height: 620px; max-height: calc(100dvh - 5.5rem); overflow: hidden; } .builder-scope.builder-newspaper .builder-frame > .lg\:grid { height: 100%; min-height: 0; align-items: stretch; } .builder-scope.builder-newspaper .builder-frame > .lg\:grid > div:first-child { display: flex; height: 100%; min-height: 100%; flex-direction: column; overflow: hidden; } .builder-scope.builder-newspaper .builder-frame > .lg\:grid > div:first-child .accordion-frame { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; /* Scroll the whole left column as one unit so individual accordions never get their own inner scrollbar — each shows its content fully. */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Wizard mode: keep Back / Step X of Y / Next pinned under the scrolling accordion column (the nav only renders in wizard mode, so it must stay visible — hiding it left the wizard with no forward navigation). */ .builder-scope.builder-newspaper .builder-frame > .lg\:grid > div:first-child .wizard-nav { flex: 0 0 auto; margin-top: 0; } .builder-scope.builder-newspaper .accordion-frame .accordion-section.is-open { display: flex !important; min-height: 0; /* Take natural height instead of stretching/splitting the frame — this is what let two open sections (Skills + Languages) squeeze each other. */ flex: 0 0 auto; flex-direction: column; } .builder-scope.builder-newspaper .accordion-frame .accordion-section.is-open .accordion-trigger { flex: 0 0 auto; } .builder-scope.builder-newspaper .accordion-frame .accordion-section.is-open .accordion-body { /* Full content, no inner scrollbar. The left column (.accordion-frame) scrolls. */ flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; } .builder-scope.builder-newspaper .resume-preview-column { position: relative !important; top: auto !important; height: 100%; min-height: 0; overflow: hidden; } .builder-scope.builder-newspaper .resume-preview-column > .flex { height: 100%; min-height: 0; overflow: auto; } .builder-scope.builder-newspaper .resume-preview-wrapper { height: 100%; min-height: 0; overflow: auto; } } /* Smooth in-page navigation (e.g. "View Templates"), motion-safe. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* App-wide reduced-motion respect (existing rules were scoped to the landing only). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== Mobile bug fixes. ===================================================================== */ @media (max-width: 768px) { /* iOS zooms the viewport when focusing an input whose font-size < 16px (and never zooms back). Force 16px on every text field on mobile so text-sm / text-xs inputs (job board, ATS textarea, account settings) don't trigger it. */ #app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]), #app textarea, #app select { font-size: 16px !important; } /* Comfortable 44px tap targets for the compact icon controls in the builder header (page nav, close) — below the touch guideline before. */ .builder-masthead button { min-height: 44px; min-width: 44px; } } /* ===================================================================== Premium landing motion layer. ===================================================================== */ :root { --landing-ease: cubic-bezier(0.22, 1, 0.36, 1); } .app-header-newspaper.is-landing-header { background: rgba(255, 255, 255, 0.02); border-bottom-color: transparent; box-shadow: none; backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); transition: background-color 0.55s var(--landing-ease), border-color 0.55s var(--landing-ease), box-shadow 0.55s var(--landing-ease), backdrop-filter 0.55s var(--landing-ease); } .app-header-newspaper.is-landing-header.is-scrolled { background: rgba(255, 255, 255, 0.88); border-bottom-color: rgba(15, 18, 25, 0.08); box-shadow: 0 12px 34px rgba(15, 18, 25, 0.08); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } .app-header-newspaper nav a { position: relative; } .app-header-newspaper nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.38s var(--landing-ease); } .app-header-newspaper nav a:hover::after, .app-header-newspaper nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .landing-newspaper .landing-hero { min-height: calc(100vh - 3.75rem); background: radial-gradient(circle at 18% 18%, rgba(39, 74, 93, 0.13), transparent 26%), radial-gradient(circle at 84% 30%, rgba(95, 77, 51, 0.10), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(245, 242, 234, 0.44)); } .landing-premium-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.42; background-image: linear-gradient(rgba(15, 18, 25, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 18, 25, 0.055) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 58%, transparent 100%); } .landing-premium-glow { position: absolute; width: clamp(18rem, 34vw, 32rem); aspect-ratio: 1; border-radius: 50%; filter: blur(42px); opacity: 0.18; pointer-events: none; transform: translate3d(0, 0, 0); animation: landing-glow-drift 16s var(--landing-ease) infinite alternate; } .landing-premium-glow--one { left: -8%; top: 10%; background: #6f8f9e; } .landing-premium-glow--two { right: -10%; top: 22%; background: #b6a271; animation-delay: -5s; } @keyframes landing-glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } } .landing-hero-line { display: block; } .landing-hero-seq { opacity: 0; transform: translate3d(0, 18px, 0); animation: landing-seq-in 0.78s var(--landing-ease) forwards; animation-delay: var(--landing-delay, 0s); } .landing-hero-seq--badge { --landing-delay: 0.04s; } .landing-hero-seq--subtitle { --landing-delay: 0.58s; } .landing-hero-seq--cta { --landing-delay: 0.72s; transform: translate3d(0, 24px, 0); } .landing-hero-seq--reassurance { --landing-delay: 0.84s; } .landing-hero-seq--scroll { --landing-delay: 0.98s; } @keyframes landing-seq-in { to { opacity: 1; transform: translate3d(0, 0, 0); } } .landing-scroll-indicator { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.2rem; color: var(--news-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .landing-scroll-indicator i { width: 1px; height: 2rem; background: rgba(17, 17, 17, 0.26); position: relative; overflow: hidden; } .landing-scroll-indicator i::after { content: ""; position: absolute; inset: 0; background: var(--news-ink); transform: translateY(-100%); animation: landing-scroll-line 1.8s var(--landing-ease) infinite; } @keyframes landing-scroll-line { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } } .landing-cv-preview { --cv-parallax: 0px; --cv-shadow: 0; transform: translate3d(0, var(--cv-parallax), 0); transition: box-shadow 0.5s var(--landing-ease); } .landing-cv-preview.is-visible { animation: landing-cv-float 7s var(--landing-ease) infinite alternate; } .landing-cv-preview::after { content: ""; position: absolute; inset: 8% 8% 4%; border-radius: 32px; pointer-events: none; box-shadow: 0 calc(28px + (var(--cv-shadow) * 18px)) 70px rgba(15, 18, 25, calc(0.08 + (var(--cv-shadow) * 0.08))); opacity: 0.88; z-index: -1; } @keyframes landing-cv-float { from { transform: translate3d(0, var(--cv-parallax), 0); } to { transform: translate3d(0, calc(var(--cv-parallax) - 10px), 0); } } .landing-cv-preview.is-visible .landing-hero-resume-card .header, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-pro-side, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-summary, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-skill-row, .landing-cv-preview.is-visible .landing-hero-resume-card .section-block { animation: landing-preview-section-in 0.7s var(--landing-ease) both; } .landing-cv-preview.is-visible .landing-hero-resume-card .mini-skill-row { animation-delay: 0.12s; } .landing-cv-preview.is-visible .landing-hero-resume-card .mini-summary { animation-delay: 0.2s; } .landing-cv-preview.is-visible .landing-hero-resume-card .section-block:nth-of-type(1) { animation-delay: 0.28s; } .landing-cv-preview.is-visible .landing-hero-resume-card .section-block:nth-of-type(2) { animation-delay: 0.36s; } .landing-cv-preview.is-visible .landing-hero-resume-card .section-block:nth-of-type(3) { animation-delay: 0.44s; } @keyframes landing-preview-section-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .landing-hero-marquee .mini-avatar, .landing-hero-marquee .mini-resume-photo, .landing-newspaper #templates .landing-template-card .mini-avatar, .landing-newspaper #templates .landing-template-card .mini-resume-photo { background-color: #f7f4ec !important; background-image: var(--avatar-sprite, url('/images/template-avatar-sprite.jpg')) !important; background-size: 300% 200% !important; background-position: var(--avatar-position, 0% 0%) !important; background-repeat: no-repeat !important; position: relative; } .landing-hero-marquee .mini-avatar::after, .landing-hero-marquee .mini-resume-photo::after, .landing-newspaper #templates .landing-template-card .mini-avatar::after, .landing-newspaper #templates .landing-template-card .mini-resume-photo::after { content: none; } [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.72s var(--landing-ease), transform 0.72s var(--landing-ease), box-shadow 0.38s var(--landing-ease), border-color 0.38s var(--landing-ease); transition-delay: calc(var(--reveal-index, 0) * 0.1s); will-change: opacity, transform; } [data-reveal="right"] { transform: translate3d(42px, 28px, 0); } [data-stagger="0"] { --reveal-index: 0; } [data-stagger="1"] { --reveal-index: 1; } [data-stagger="2"] { --reveal-index: 2; } [data-stagger="3"] { --reveal-index: 3; } [data-stagger="4"] { --reveal-index: 4; } [data-stagger="5"] { --reveal-index: 5; } [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .landing-proof-card, .landing-how-card, .landing-job-card, .landing-faq-item, .newspaper-cta-panel { transition: transform 0.38s var(--landing-ease), box-shadow 0.38s var(--landing-ease), border-color 0.38s var(--landing-ease), background-color 0.38s var(--landing-ease); } .landing-proof-card:hover, .landing-how-card:hover, .landing-job-card:hover { transform: translateY(-6px) !important; border-color: rgba(39, 74, 93, 0.55) !important; box-shadow: 0 22px 48px rgba(15, 18, 25, 0.12) !important; } .landing-proof-score::after { content: "%"; font-size: 0.62em; } .landing-proof-card--ats.is-visible .landing-proof-score { animation: landing-score-pop 0.8s var(--landing-ease) both 0.22s; } .landing-proof-card--pdf.is-visible .landing-proof-check { animation: landing-check-reveal 0.72s var(--landing-ease) both 0.26s; } @keyframes landing-score-pop { 0% { transform: scale(0.78); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes landing-check-reveal { from { transform: scale(0) rotate(-12deg); } to { transform: scale(1) rotate(0); } } .landing-how-section, .landing-jobs-section { position: relative; overflow: visible; border-top: 0; } .landing-how-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(245, 242, 234, 0.18)); } .landing-jobs-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(245, 242, 234, 0.18)); } .landing-jobs-section { overflow: hidden; background: linear-gradient(180deg, rgba(10, 13, 18, 0.72), rgba(18, 20, 25, 0.66)), #11131a; } .landing-jobs-bg-video, .landing-jobs-bg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .landing-jobs-bg-video { object-fit: cover; opacity: 0.88; transform: scale(1.02); filter: saturate(1.08) contrast(1.08) brightness(0.92); } .landing-jobs-bg-overlay { z-index: 1; background: radial-gradient(circle at 76% 44%, rgba(255, 255, 255, 0.06), transparent 32%), linear-gradient(90deg, rgba(245, 242, 234, 0.86) 0%, rgba(245, 242, 234, 0.56) 38%, rgba(13, 16, 23, 0.10) 66%, rgba(13, 16, 23, 0.18) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; } .landing-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.5rem; } .landing-how-card, .landing-job-card { border: 1px solid rgba(15, 18, 25, 0.13); border-radius: 8px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 18px 46px rgba(15, 18, 25, 0.13); padding: clamp(1.25rem, 2vw, 1.75rem); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .landing-how-card > span { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; margin-bottom: 1.25rem; border-radius: 999px; background: var(--news-ink); color: #fff; font-size: 0.85rem; font-weight: 900; transform: scale(0); } .landing-how-card.is-visible > span { animation: landing-number-in 0.55s var(--landing-ease) forwards; animation-delay: calc(var(--reveal-index, 0) * 0.1s + 0.12s); } @keyframes landing-number-in { to { transform: scale(1); } } .landing-how-card h3, .landing-job-card h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: 1.1rem; font-weight: 800; } .landing-how-card p, .landing-job-card p, .landing-jobs-sticky p:last-child { margin: 0; color: var(--news-muted); line-height: 1.65; } .landing-newspaper #templates .landing-template-carousel-track { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1080px) !important; margin: 0 auto; animation-play-state: paused; } .landing-newspaper #templates .landing-template-card { width: 100% !important; transition: opacity 0.72s var(--landing-ease), transform 0.38s var(--landing-ease) !important; } .landing-newspaper #templates .landing-template-card:hover .template-preview-mini .experience-item, .landing-newspaper #templates .landing-template-card:hover .template-preview-mini .education-item, .landing-newspaper #templates .landing-template-card:hover .template-preview-mini .mini-side-text, .landing-newspaper #templates .landing-template-card:hover .template-preview-mini .mini-copy, .landing-newspaper #templates .landing-template-card:hover .template-preview-mini .mini-summary { animation: landing-template-lines 1.1s var(--landing-ease) both; } @keyframes landing-template-lines { 0% { opacity: 0.55; transform: translateX(-3px); } 100% { opacity: 1; transform: translateX(0); } } .landing-jobs-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; position: relative; z-index: 2; } .landing-jobs-sticky { position: sticky; top: 6.5rem; } .landing-job-list { display: grid; gap: 1rem; } .landing-job-card span { display: inline-flex; margin-bottom: 0.9rem; color: #274a5d; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .landing-faq-a { display: grid; grid-template-rows: 0fr; padding: 0 1.25rem 0 4.35rem; opacity: 0; transition: grid-template-rows 0.46s var(--landing-ease), opacity 0.32s var(--landing-ease), padding 0.46s var(--landing-ease); } .landing-faq-a > p { overflow: hidden; } .landing-faq-item.is-open .landing-faq-a { grid-template-rows: 1fr; opacity: 1; padding: 0 1.25rem 1.25rem 4.35rem; } .newspaper-cta-panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(39, 74, 93, 0.28), transparent 34%, rgba(182, 162, 113, 0.26), transparent 72%); opacity: 0.75; animation: landing-cta-border 8s linear infinite; } .newspaper-cta-panel::after { content: ""; position: absolute; inset: 12%; border-radius: 999px; background: radial-gradient(circle, rgba(39, 74, 93, 0.12), transparent 68%); filter: blur(28px); pointer-events: none; } @keyframes landing-cta-border { from { transform: translateX(-12%); } to { transform: translateX(12%); } } .landing-final-seq { opacity: 0; transform: translate3d(0, 20px, 0); } .landing-final-cta-section:has(.is-visible) .landing-final-seq, .landing-final-cta-section .newspaper-cta-panel:hover .landing-final-seq { animation: landing-seq-in 0.75s var(--landing-ease) forwards; } .landing-final-seq:nth-child(1) { animation-delay: 0.04s; } .landing-final-seq:nth-child(2) { animation-delay: 0.14s; } .landing-final-seq:nth-child(3) { animation-delay: 0.26s; } .landing-final-seq--button { animation-delay: 0.38s !important; } @media (max-width: 900px) { .landing-how-grid, .landing-jobs-layout, .landing-newspaper #templates .landing-template-carousel-track { grid-template-columns: 1fr; } .landing-jobs-sticky { position: relative; top: auto; } } @media (max-width: 640px) { .app-header-newspaper.is-landing-header, .app-header-newspaper.is-landing-header.is-scrolled { background: rgba(255, 255, 255, 0.96); border-bottom-color: rgba(15, 18, 25, 0.12); box-shadow: 0 2px 0 rgba(15, 18, 25, 0.08); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none; transform: translateZ(0); } .landing-bg-motion { position: absolute; min-height: 100vh; animation: none !important; transform: none !important; filter: none !important; } .landing-bg-motion::before, .landing-bg-motion::after, .landing-bg-motion__line, .landing-bg-motion__paper, .landing-bg-motion__dot, .landing-premium-glow, .landing-cv-preview.is-visible, .landing-scroll-indicator i::after { animation: none !important; } .landing-bg-motion__line, .landing-bg-motion__paper, .landing-bg-motion__dot, .landing-premium-glow { display: none; } [data-reveal] { will-change: auto; } .landing-how-card, .landing-job-card { backdrop-filter: none; -webkit-backdrop-filter: none; } .landing-newspaper .landing-hero { min-height: auto; } [data-reveal], [data-reveal="right"] { transform: translate3d(0, 20px, 0); } .landing-proof-card:hover, .landing-how-card:hover, .landing-job-card:hover { transform: translateY(-3px) !important; } .landing-jobs-bg-overlay { background: linear-gradient(180deg, rgba(245, 242, 234, 0.94), rgba(245, 242, 234, 0.78)), radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.20), transparent 34%); } } @media (prefers-reduced-motion: reduce) { .app-header-newspaper.is-landing-header, .app-header-newspaper.is-landing-header.is-scrolled { transition: none; } .landing-bg-motion, .landing-bg-motion::before, .landing-bg-motion::after, .landing-bg-motion__line, .landing-bg-motion__paper, .landing-bg-motion__dot, .landing-premium-glow, .landing-hero-seq, .landing-scroll-indicator i::after, .landing-cv-preview, .landing-cv-preview.is-visible, .landing-cv-preview.is-visible .landing-hero-resume-card .header, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-pro-side, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-summary, .landing-cv-preview.is-visible .landing-hero-resume-card .mini-skill-row, .landing-cv-preview.is-visible .landing-hero-resume-card .section-block, .landing-how-card.is-visible > span, .newspaper-cta-panel::before, .landing-final-cta-content, .landing-final-cta-content::before, .landing-final-seq { animation: none !important; } .landing-hero-seq, [data-reveal], [data-reveal="right"], .landing-final-cta-content, .landing-final-seq { opacity: 1 !important; transform: none !important; transition: none !important; } .landing-how-card > span { transform: scale(1); } } /* Real-resume treatment for the landing template gallery. */ .landing-newspaper #templates .landing-template-carousel-wrap { max-width: min(72rem, calc(100% - 2rem)) !important; overflow: visible !important; } .landing-newspaper #templates .landing-template-carousel-track { grid-template-columns: repeat(2, minmax(300px, 1fr)) !important; gap: clamp(1.25rem, 3vw, 2.25rem) !important; width: 100% !important; align-items: start; } .landing-newspaper #templates .landing-template-card { display: flex; justify-content: center; padding: 0 !important; overflow: visible; } .landing-newspaper #templates .landing-template-card .template-preview-mini { width: min(100%, 430px) !important; aspect-ratio: 210 / 297 !important; min-height: 0 !important; height: auto !important; padding: 18px 20px !important; border: 1px solid rgba(15, 18, 25, 0.14) !important; border-radius: 3px !important; background-color: #fffdfa !important; box-shadow: 0 28px 70px rgba(15, 18, 25, 0.14), 0 2px 8px rgba(15, 18, 25, 0.08) !important; overflow: hidden !important; font-size: clamp(7.4px, 0.7vw, 10.2px) !important; line-height: 1.36 !important; color: #20242c; } /* SaaS carries the most content — keep it a touch smaller so it fills without overflow. */ .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview { font-size: clamp(6.4px, 0.6vw, 8.8px) !important; } .landing-newspaper #templates .landing-template-card:hover .template-preview-mini { box-shadow: 0 34px 82px rgba(15, 18, 25, 0.18), 0 3px 12px rgba(15, 18, 25, 0.10) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .header { margin: -24px -28px 16px !important; padding: 22px 28px 18px !important; border-bottom-width: 2px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .name { display: block; font-size: 2.25em !important; line-height: 1.05 !important; margin-bottom: 0.28em !important; letter-spacing: 0 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .contact { display: block; font-size: 0.9em !important; line-height: 1.35 !important; color: #5d6674 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .section-title, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-side-heading { display: block; margin: 1.1em 0 0.42em !important; padding-bottom: 0.22em !important; border-bottom: 1px solid rgba(15, 18, 25, 0.13) !important; font-size: 0.92em !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-summary, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-copy, .landing-newspaper #templates .landing-template-card .template-preview-mini .experience-item, .landing-newspaper #templates .landing-template-card .template-preview-mini .education-item, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-side-text, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-bullets { font-size: 0.92em !important; line-height: 1.42 !important; color: #343a46 !important; margin-bottom: 0.32em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .section-block { margin-bottom: 0.8em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-bullets { margin: 0.36em 0 0.5em 1.2em !important; padding: 0 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-bullets li { margin-bottom: 0.22em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-skill-row { display: flex; flex-wrap: wrap; gap: 0.38em !important; margin-top: 0.55em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-skill-row em, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-saas-pills span, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-corp-grid span { min-height: 1.8em !important; padding: 0.28em 0.65em !important; border-radius: 999px !important; font-size: 0.76em !important; font-style: normal !important; font-weight: 800 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row { display: grid !important; grid-template-columns: 0.8em minmax(0, 1fr); gap: 0 0.5em; margin: 0.7em 0 0.7em 0.3em !important; padding-left: 0 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row span { width: 0.56em; height: 0.56em; margin-top: 0.34em; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row i, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row b { grid-column: 2; font-size: 0.92em !important; line-height: 1.35 !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row i { font-weight: 900; color: #1f2937; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-timeline-row b { font-weight: 500; color: #4b5563; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side) { display: grid !important; grid-template-columns: 34% minmax(0, 1fr) !important; padding: 0 !important; font-size: clamp(5.95px, 0.52vw, 7.25px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-side { padding: 28px 16px !important; background: color-mix(in srgb, var(--selected-color, #059669) 12%, #f8faf8) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-main { padding: 28px 24px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .name { font-size: 2.08em !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas { padding: 0 !important; font-size: clamp(5.7px, 0.5vw, 6.9px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas .header { margin: 0 0 15px !important; padding: 30px 28px 42px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas > :not(.header) { margin-left: 28px !important; margin-right: 28px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-saas-card { padding: 0.85em 1em !important; margin-bottom: 0.75em !important; border: 1px solid rgba(15, 18, 25, 0.09) !important; border-radius: 10px !important; background: rgba(248, 250, 252, 0.86) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--elegant { font-size: clamp(5.85px, 0.52vw, 7.15px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--corporate { font-size: clamp(5.85px, 0.52vw, 7.1px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--minimal { font-size: clamp(6.2px, 0.56vw, 7.7px) !important; } @media (max-width: 900px) { .landing-newspaper #templates .landing-template-carousel-track { grid-template-columns: 1fr !important; width: min(100%, 460px) !important; } } @media (max-width: 520px) { .landing-newspaper #templates .landing-template-carousel-wrap { max-width: calc(100% - 1rem) !important; margin-inline: auto !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini { padding: 18px 20px !important; font-size: 5.65px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .header { margin: -18px -20px 12px !important; padding: 18px 20px 14px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side) { font-size: 5.2px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-side { padding: 18px 10px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional .mini-pro-main { padding: 18px 14px !important; } } /* Landing template cards: size each preview so the resume content fills the A4 page like a real, complete CV (per-template because content density differs). High specificity (id + both template classes) to win over the layered rules above. */ .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview.template-preview-mini--modern { font-size: clamp(8px, 0.8vw, 11.5px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.minimal-preview.template-preview-mini--minimal { font-size: clamp(7.6px, 0.74vw, 10.6px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.elegant-preview.template-preview-mini--elegant { font-size: clamp(7.6px, 0.74vw, 10.6px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview.template-preview-mini--corporate { font-size: clamp(8px, 0.85vw, 12px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview.template-preview-mini--saas { font-size: clamp(6.4px, 0.61vw, 8.8px) !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-avatar, .landing-newspaper #templates .landing-template-card .template-preview-mini .mini-resume-photo { width: clamp(54px, 7.4em, 78px) !important; height: clamp(54px, 7.4em, 78px) !important; margin-bottom: 0.7em !important; } @media (max-width: 640px) { .landing-newspaper #templates .landing-template-carousel-track { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 1rem !important; padding: 0 !important; animation: none !important; transform: none !important; } .landing-newspaper #templates .landing-template-card { width: 100% !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini, .landing-newspaper #templates .landing-template-card .template-preview-mini.modern-preview.template-preview-mini--modern, .landing-newspaper #templates .landing-template-card .template-preview-mini.minimal-preview.template-preview-mini--minimal, .landing-newspaper #templates .landing-template-card .template-preview-mini.elegant-preview.template-preview-mini--elegant, .landing-newspaper #templates .landing-template-card .template-preview-mini.corporate-preview.template-preview-mini--corporate, .landing-newspaper #templates .landing-template-card .template-preview-mini.saas-preview.template-preview-mini--saas { width: min(100%, 330px) !important; max-width: 100% !important; min-height: 0 !important; font-size: 6px !important; } .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--professional:has(.mini-pro-side), .landing-newspaper #templates .landing-template-card .template-preview-mini.template-preview-mini--saas { font-size: 5.1px !important; } } /* Account avatar button: kill every boxed-button style (ghost class + Tailwind !border-2 both use !important) — just the round avatar, no square outline. */ #app .app-header-newspaper #account-settings-open-btn { border: 0 !important; border-width: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 0.25rem !important; }