/* =========================================================== Simple File Tools Online — shared stylesheet Style: minimalist neo-brutalism, cute edition. Thick black borders, hard offset shadows, chunky rounded corners, candy accent colors, playful hover motion. =========================================================== */ /* Fonts are now loaded via a tag in each page's (after the preconnect hints), instead of @import here — @import blocks CSSOM construction until it resolves, which delays first paint. */ :root{ --paper:#FBF6ED; --paper-raised:#FFFFFF; --ink:#191510; --ink-soft:#615A4E; --line:#191510; /* candy accents */ --blue:#4FD1E3; --pink:#FF6FA5; --yellow:#FFD23F; --lav:#B29CFF; --green:#8FE388; --danger:#E8503A; /* section themes */ --img-accent: var(--blue); --img-accent-soft:#E4FBFA; --pdf-accent: var(--pink); --pdf-accent-soft:#FFE9F1; --radius:18px; --radius-sm:12px; --border:3px; --shadow-off:5px; --shadow: var(--shadow-off) var(--shadow-off) 0 0 var(--ink); --shadow-sm: 3px 3px 0 0 var(--ink); --shadow-lg: 8px 8px 0 0 var(--ink); --display: 'Fredoka', ui-rounded, sans-serif; --body: 'Inter', sans-serif; --mono: 'Space Mono', ui-monospace, monospace; } html[data-theme="dark"]{ --paper:#1C1815; --paper-raised:#262019; --ink:#F7F1E6; --ink-soft:#B7AC9A; --line:#F7F1E6; --img-accent-soft:#0F3336; --pdf-accent-soft:#3A1626; --danger:#FF7C64; } html[data-theme="dark"] body{ background-image: radial-gradient(circle, rgba(247,241,230,0.07) 1.5px, transparent 1.6px); } html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=number], html[data-theme="dark"] textarea, html[data-theme="dark"] select{ background:var(--paper);color:var(--ink); } html[data-theme="dark"] .brand-mark{color:#191510;} html[data-theme="dark"] .nav-link.active{color:#191510;} html[data-theme="dark"] button, html[data-theme="dark"] .btn{color:#191510;} html[data-theme="dark"] button.secondary, html[data-theme="dark"] .home-card, html[data-theme="dark"] .picker-card{color:var(--ink);} /* Candy-color chips keep the same pastel fill in dark mode, so their text/icon color must stay dark too — otherwise near-white --ink text lands on a light background and disappears. */ html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .pill.green, html[data-theme="dark"] .pill.lav, html[data-theme="dark"] .pill.yellow, html[data-theme="dark"] .badge-bulk, html[data-theme="dark"] .thumb.selected::after, html[data-theme="dark"] .page-thumb.selected::after, html[data-theme="dark"] .compare-handle-grip, html[data-theme="dark"] .sound-toggle:hover, html[data-theme="dark"] .theme-toggle:hover{ color:#191510; } /* The teal/magenta accent text colors were tuned for the cream light-mode background and fall well below readable contrast against the dark-mode background — swap in brighter equivalents so nav section labels, prose links, and inline confirmations stay legible in dark mode. */ html[data-theme="dark"] .nav-group-label.img, html[data-theme="dark"] .copy-msg{ color:#5FE0E8; } html[data-theme="dark"] .nav-group-label.pdf, html[data-theme="dark"] .prose a, html[data-theme="dark"] .next-suggestion a{ color:var(--pink); } html[data-theme="dark"] .prose a:hover{ color:#FF7A5C; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ background:var(--paper); background-image: radial-gradient(circle, rgba(25,21,16,0.09) 1.5px, transparent 1.6px); background-size: 26px 26px; color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background-color .2s ease, color .2s ease; } a{color:inherit;} img{max-width:100%;} ::selection{background:var(--ink);color:var(--paper);} :focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px;} /* ---------------- layout shell ---------------- */ .shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh;align-items:start;} @media (max-width:1100px) and (min-width:901px){.shell{grid-template-columns:230px 1fr;}} @media (max-width: 900px){.shell{grid-template-columns:1fr;}} .sidebar{ background:var(--paper-raised); border-right:var(--border) solid var(--line); padding:22px 18px 40px; position:sticky;top:0;height:100vh;overflow-y:auto; } @media (max-width:900px){ .sidebar{position:relative;height:auto;max-height:none;border-right:none;border-bottom:var(--border) solid var(--line);} .sidebar.collapsed .nav-scroll{display:none;} } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:2px;} .brand-mark{ font-family:var(--display);font-weight:700;font-size:20px;line-height:1; background:var(--yellow); color:var(--ink); width:42px;height:42px;display:flex;align-items:center;justify-content:center; border-radius:12px; border:var(--border) solid var(--ink); box-shadow:var(--shadow-sm); flex:none; transform:rotate(-4deg); } .brand-name{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em;} .tagline{font-size:12.5px;color:var(--ink-soft);margin:8px 0 20px;font-weight:600;} .mobile-nav-toggle{ display:none; width:100%; font-family:var(--display);font-weight:600;font-size:14px; background:var(--paper-raised);border:var(--border) solid var(--ink);border-radius:var(--radius-sm); padding:10px 14px;margin-top:14px;cursor:pointer;box-shadow:var(--shadow-sm); align-items:center;justify-content:space-between; } @media (max-width:900px){.mobile-nav-toggle{display:flex;}} .nav-scroll{margin-top:6px;} .nav-group-label{ font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--ink); margin:18px 0 8px; display:flex;align-items:center;gap:6px; } .nav-group-label.img{color:#0E7E8C;} .nav-group-label.pdf{color:#B12F63;} .nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;} .nav-link{ display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink); font-size:13.5px;font-weight:600;padding:7px 9px;border-radius:9px;border:2px solid transparent;cursor:pointer; } .nav-link:hover{background:var(--paper);border-color:var(--line);} .nav-link.active{background:var(--yellow);border-color:var(--ink);font-weight:700;} .nav-index{ font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ink); width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none; border:2px solid var(--ink);background:var(--paper-raised); } .nav-list.img-list .nav-index{background:var(--img-accent-soft);} .nav-list.pdf-list .nav-index{background:var(--pdf-accent-soft);} .nav-footer-links{margin-top:24px;padding-top:14px;border-top:var(--border) solid var(--line);display:flex;flex-direction:column;gap:6px;} .nav-footer-links a{font-size:12px;font-weight:700;color:var(--ink-soft);text-decoration:none;} .nav-footer-links a:hover{color:var(--ink);text-decoration:underline;} .sound-toggle{ margin-top:16px;display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11.5px;font-weight:700; background:var(--paper-raised);border:2px solid var(--ink);border-radius:20px; padding:7px 12px;cursor:pointer;width:fit-content; } .sound-toggle:hover{background:var(--lav);} .theme-toggle{ margin-top:8px;display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11.5px;font-weight:700; background:var(--paper-raised);border:2px solid var(--ink);border-radius:20px; padding:7px 12px;cursor:pointer;width:fit-content;color:var(--ink); } .theme-toggle:hover{background:var(--yellow);} @keyframes sfto-pulse{ 0%{box-shadow:3px 3px 0 0 var(--ink);} 50%{box-shadow:1px 1px 0 0 var(--ink);} 100%{box-shadow:3px 3px 0 0 var(--ink);} } button.is-busy{animation:sfto-pulse 0.6s ease-in-out infinite;cursor:progress;} main{padding:38px 46px 90px;max-width:1080px;margin:0 auto;} @media (max-width:640px){main{padding:22px 14px 60px;}} @media (max-width:380px){main{padding:16px 10px 50px;}} /* Large screens / TVs: keep a comfortable reading width and add breathing room instead of stretching content edge to edge */ @media (min-width:1600px){ .shell{grid-template-columns:320px 1fr;} main{max-width:1240px;padding:56px 64px 110px;} } /* ---------------- typography ---------------- */ .eyebrow{ font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.06em; color:var(--ink);background:var(--yellow);display:inline-block;padding:5px 12px; border-radius:20px;margin-bottom:16px;border:2px solid var(--ink); } h1{font-family:var(--display);font-size:clamp(26px,4.2vw,38px);font-weight:600;letter-spacing:-0.01em;margin:0 0 10px;} .tool-sub{color:var(--ink-soft);font-size:15.5px;font-weight:500;margin:0 0 26px;max-width:62ch;} /* ---------------- panels / form controls ---------------- */ .panel{ background:var(--paper-raised); border:var(--border) solid var(--ink); border-radius:var(--radius); padding:24px;margin-bottom:22px; box-shadow:var(--shadow); } label{display:block;font-size:11.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-family:var(--mono);} textarea, input[type=text], input[type=number], input[type=file], select{ width:100%;font-family:var(--body);font-size:14.5px;color:var(--ink); background:var(--paper); border:2px solid var(--ink);border-radius:var(--radius-sm);padding:11px 14px;resize:vertical; } input[type=file]{font-family:var(--body);font-weight:600;cursor:pointer;} textarea{min-height:150px;line-height:1.6;font-family:var(--mono);} textarea:focus, input:focus, select:focus{background:var(--paper-raised);} input[type=range]{ -webkit-appearance:none;appearance:none;height:10px;border-radius:8px; background:var(--paper);border:2px solid var(--ink);width:100%;cursor:pointer; } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:var(--pink);border:2px solid var(--ink);cursor:grab; } input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);cursor:grab; } .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .row + .row{margin-top:12px;} .field{flex:1;min-width:140px;} button, .btn{ font-family:var(--display);font-weight:600;font-size:14.5px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink);padding:11px 22px;border-radius:var(--radius-sm);cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .1s ease, box-shadow .1s ease; } button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--ink);} button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--ink);} button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm);} button.secondary{background:var(--paper-raised);color:var(--ink);} button.secondary:hover{background:var(--lav);} .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:10px;margin-top:16px;} .stat{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:14px 16px;} .stat-value{font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);} .stat-label{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;font-family:var(--mono);} .result-box{font-family:var(--mono);font-size:13.5px;background:var(--paper);border:2px dashed var(--ink);border-radius:var(--radius-sm);padding:14px;white-space:pre-wrap;word-break:break-word;min-height:44px;color:var(--ink);} .hint{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:8px;} .error-msg{font-size:12.5px;color:var(--danger);font-weight:700;margin-top:8px;} .switch-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;} .switch-label input{width:auto;} .copy-msg{font-size:12px;font-weight:700;color:#0E7E8C;margin-left:8px;} .preview-wrap{margin-top:16px;text-align:center;background:var(--paper);border:2px dashed var(--ink);border-radius:var(--radius);padding:16px;} .preview-wrap canvas, .preview-wrap img{max-width:100%;height:auto;border-radius:8px;border:2px solid var(--ink);} .thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:12px;} .thumb-grid img{width:100%;border-radius:8px;border:2px solid var(--ink);} .thumb-grid .thumb{position:relative;} .thumb-grid .thumb .n{ position:absolute;top:4px;left:4px;background:var(--ink);color:var(--paper);font-weight:800; font-size:11px;line-height:1;padding:3px 6px;border-radius:6px;pointer-events:none; } .file-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;} .file-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;font-weight:600;flex-wrap:wrap;} .file-list li button{padding:5px 10px;font-size:11.5px;} /* ---------------- homepage ---------------- */ .hero{padding:6px 0 34px;} .hero h1{font-size:clamp(28px,5vw,46px);max-width:16ch;} .hero .tool-sub{font-size:17px;max-width:52ch;} .badge-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px;} .pill{ font-family:var(--mono);font-size:12px;font-weight:700; border:2px solid var(--ink);border-radius:20px;padding:6px 14px;background:var(--paper-raised); box-shadow:var(--shadow-sm); } .pill.green{background:var(--green);} .pill.lav{background:var(--lav);} .pill.yellow{background:var(--yellow);} .picker{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 8px;} @media (max-width:700px){.picker{grid-template-columns:1fr;}} .picker-card{ display:block;text-decoration:none;color:var(--ink); border:var(--border) solid var(--ink);border-radius:var(--radius); padding:22px 24px;background:var(--paper-raised);box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease; } .picker-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg);} .picker-card .emoji{font-size:34px;display:block;margin-bottom:8px;} .picker-card h3{font-family:var(--display);font-size:20px;margin:0 0 4px;font-weight:600;} .picker-card p{margin:0;color:var(--ink-soft);font-size:13.5px;font-weight:500;} .picker-card.img-card{background:var(--img-accent-soft);} .picker-card.pdf-card{background:var(--pdf-accent-soft);} .sections{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:44px;} @media (max-width:900px){.sections{grid-template-columns:1fr;}} .section-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .section-head h2{font-family:var(--display);font-size:24px;font-weight:600;margin:0;} .section-tag{font-family:var(--mono);font-size:11px;font-weight:700;border:2px solid var(--ink);border-radius:20px;padding:3px 10px;background:var(--paper-raised);} .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;} @media (max-width:380px){.home-grid{grid-template-columns:1fr;}} .home-card{ border:var(--border) solid var(--ink); background:var(--paper-raised); border-radius:var(--radius);padding:16px;cursor:pointer;text-decoration:none;color:var(--ink);display:block; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease; } .home-card:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:var(--shadow-lg);} .home-card:nth-child(even):hover{transform:translate(-3px,-3px) rotate(1deg);} .home-card .n{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--ink-soft);} .home-card h3{margin:6px 0 4px;font-family:var(--display);font-weight:600;font-size:16px;} .home-card p{margin:0;font-size:12px;color:var(--ink-soft);font-weight:500;} .img-grid .home-card:hover{background:var(--img-accent-soft);} .pdf-grid .home-card:hover{background:var(--pdf-accent-soft);} .see-all{ display:inline-block;margin-top:16px;font-family:var(--mono);font-weight:700;font-size:12.5px; text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px; } /* ---------------- prose / blog blurb ---------------- */ .prose{margin-top:34px;} .prose h2{font-family:var(--display);font-weight:600;font-size:22px;margin-top:32px;color:var(--ink);} .prose h3{font-family:var(--display);font-weight:600;font-size:16.5px;margin-top:18px;margin-bottom:4px;color:var(--ink);} .prose p{color:var(--ink-soft);font-size:14.5px;max-width:66ch;} .prose li{color:var(--ink-soft);font-size:14.5px;max-width:64ch;} .prose a{color:#B12F63;font-weight:700;text-decoration:underline;} .prose a:hover{color:#D6412E;} footer.page-footer{margin-top:54px;padding-top:22px;border-top:var(--border) solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-soft);} /* static pages */ .static-page ul{padding-left:20px;} /* 404 */ .not-found{text-align:center;padding:60px 0;} .not-found a{color:#B12F63;font-weight:700;text-decoration:underline;} .not-found a:hover{color:#D6412E;} html[data-theme="dark"] .not-found a{color:var(--pink);} html[data-theme="dark"] .not-found a:hover{color:#FF7A5C;} .not-found .big{font-family:var(--display);font-size:110px;font-weight:600;margin:0;line-height:1;} /* utility */ .center{text-align:center;} .mt-0{margin-top:0;} /* ---------------- sidebar search ---------------- */ .nav-search{position:relative;margin-bottom:4px;} .nav-search input[type=search]{ width:100%;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink); background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:9px 14px; -webkit-appearance:none;appearance:none; } .nav-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;} .nav-search input[type=search]:focus{background:var(--paper-raised);} .nav-search-results{ position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20; background:var(--paper-raised);border:2px solid var(--ink);border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);max-height:280px;overflow-y:auto;padding:6px; } .nav-search-results a{ display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink); font-size:13px;font-weight:600;padding:8px 9px;border-radius:8px; } .nav-search-results a:hover{background:var(--paper);} .nav-search-results .no-results{padding:10px 9px;font-size:12.5px;color:var(--ink-soft);font-weight:600;} .nav-search-results .tag{ font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase; border:1.5px solid var(--ink);border-radius:8px;padding:2px 6px;flex:none; } .nav-search-results .tag.img{background:var(--img-accent-soft);} .nav-search-results .tag.pdf{background:var(--pdf-accent-soft);} /* ---------------- sidebar group accent stripes ---------------- */ .nav-list.img-list{border-left:3px solid var(--img-accent);padding-left:8px;margin-left:-11px;} .nav-list.pdf-list{border-left:3px solid var(--pdf-accent);padding-left:8px;margin-left:-11px;} /* fix: sidebar shouldn't flash open before JS collapses it on mobile. Default is hidden via CSS; JS only ever needs to reveal it. */ @media (max-width:900px){ .nav-scroll{display:none;} .sidebar.expanded .nav-scroll{display:block;} } /* ---------------- more resting-state color ---------------- */ .home-card{border-left:5px solid var(--ink);} .img-grid .home-card{border-left-color:var(--img-accent);} .pdf-grid .home-card{border-left-color:var(--pdf-accent);} .panel{border-top:5px solid var(--yellow);} /* ---------------- bulk badge ---------------- */ .badge-bulk{ display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase; letter-spacing:.04em;background:var(--green);border:1.5px solid var(--ink);border-radius:8px; padding:2px 6px;margin-left:6px;vertical-align:middle; } /* ---------------- empty-state icon ---------------- */ .upload-hint-icon{display:block;margin:0 auto 10px;opacity:.55;} .panel .upload-hint-icon{width:40px;height:40px;} /* ---------------- success flash (generic, JS-triggered) ---------------- */ @keyframes sfto-flash-success{ 0%{box-shadow:0 0 0 0 rgba(143,227,136,0);} 30%{box-shadow:0 0 0 6px rgba(143,227,136,.55);} 100%{box-shadow:0 0 0 0 rgba(143,227,136,0);} } .sfto-flash{animation:sfto-flash-success .7s ease-out;} /* ---------------- selected-thumbnail state (page pickers) ---------------- */ .thumb, .page-thumb{position:relative;transition:transform .15s ease, box-shadow .15s ease;} .thumb.selected, .page-thumb.selected{ outline:3px solid var(--green);outline-offset:2px;transform:scale(1.03); box-shadow:0 0 0 3px var(--green); } .thumb.selected::after, .page-thumb.selected::after{ content:"\2713";position:absolute;top:4px;right:4px; background:var(--green);color:var(--ink);border:2px solid var(--ink);border-radius:50%; width:20px;height:20px;display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700; } /* ---------------- drag reordering affordance ---------------- */ [draggable="true"]{cursor:grab;} .drag-over{outline:2px dashed var(--ink);outline-offset:2px;} .dragging{opacity:.45;} /* ---------------- Image Compare tool ---------------- */ .compare-panel .row{margin-bottom:6px;} .compare-stage{margin-top:18px;} .compare-frame{ position:relative;width:100%;aspect-ratio:16/10;overflow:hidden; border:var(--border) solid var(--ink);border-radius:var(--radius); background:var(--paper);user-select:none;touch-action:none; } .compare-frame img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain; background:var(--paper);pointer-events:none; } .compare-clip{position:absolute;inset:0;overflow:hidden;} .compare-handle{ position:absolute;top:0;bottom:0;left:50%;width:0; border-left:3px solid var(--ink);transform:translateX(-50%);cursor:ew-resize; } .compare-handle-grip{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:var(--yellow); border:2px solid var(--ink);box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center;font-size:16px; } .compare-label{ position:absolute;top:10px;font-family:var(--mono);font-size:10.5px;font-weight:700; text-transform:uppercase;background:var(--paper-raised);border:2px solid var(--ink); border-radius:20px;padding:3px 10px; } .compare-label-left{left:10px;} .compare-label-right{right:10px;} /* ---------------- PDF compare: side-by-side scroll-synced view ---------------- */ .compare-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;} @media (max-width:700px){.compare-side-by-side{grid-template-columns:1fr;}} .compare-side-label{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;color:var(--ink-soft);} .compare-side-scroll{ max-height:520px;overflow-y:auto;border:2px solid var(--ink);border-radius:var(--radius-sm); background:var(--paper);padding:10px;display:flex;flex-direction:column;gap:10px; } .compare-side-tile{border:2px solid transparent;border-radius:8px;padding:4px;} .compare-side-tile.changed{border-color:var(--pdf-accent);background:var(--pdf-accent-soft);} .compare-side-tile.compare-side-missing{ display:flex;align-items:center;justify-content:center;min-height:120px; color:var(--ink-soft);font-size:12.5px;font-weight:600;border:1.5px dashed var(--ink);border-radius:8px; } /* ---------------- collage maker: free drag/resize stage ---------------- */ .collage-stage{ position:relative;width:100%;max-width:480px;aspect-ratio:1/1;margin:14px 0; border:2px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden; background-image: linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#fff; } .collage-item{ position:absolute;cursor:move;outline:2px solid transparent; } .collage-item:hover, .collage-item:focus-visible{outline:2px dashed var(--pink);} .collage-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;} .collage-resize-handle{ position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;border-radius:50%; background:var(--pink);border:2px solid var(--ink);cursor:nwse-resize; } /* ---------------- mascot ---------------- */ .mascot{display:inline-block;vertical-align:middle;} .mascot-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:2px;} .mascot-name{font-size:12.5px;font-weight:800;color:var(--ink);opacity:.7;margin:0;text-align:center;} .mascot-corner{position:fixed;bottom:14px;right:14px;width:52px;height:52px;opacity:.9;pointer-events:none;z-index:5;} @media (max-width:640px){.mascot-corner{width:38px;height:38px;bottom:10px;right:10px;}} /* ---------------- cookie consent banner ---------------- */ .cookie-banner{ position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:520px;margin:0 auto; background:var(--paper-raised);border:var(--border) solid var(--ink);border-radius:var(--radius); box-shadow:var(--shadow-lg);padding:18px 20px;font-size:13px;color:var(--ink); } .cookie-banner p{margin:0 0 12px;font-size:13px;color:var(--ink-soft);} .cookie-banner .btn-row{margin-top:0;} .cookie-banner button{font-size:13px;padding:9px 16px;} /* ---------------- file-limit / safari notices ---------------- */ .tool-notice{ font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--paper); border:1.5px dashed var(--ink);border-radius:var(--radius-sm);padding:8px 12px;margin-top:10px; } /* ---------------- "you might also need" suggestion ---------------- */ .next-suggestion{ margin-top:16px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius-sm); padding:12px 16px;font-size:13px;font-weight:600; } .next-suggestion a{color:#B12F63;font-weight:700;text-decoration:underline;}