:root { --primary-dark: #173F70; --primary-main: #2457A6; --primary-light: #5E8FD4; --primary-lighter: #DDE8F7; --accent-color: #D65F45; --background-color: #F4F6F7; --card-background: #FFFFFF; --text-color: #172230; --muted-text-color: #5F6B78; --border-color: #D9DEE3; --input-background-color: #FFFFFF; --success-color: #16A34A; --error-color: #DC2626; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --border-radius: 6px; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; background-color: var(--background-color); background-image: linear-gradient(color-mix(in srgb, var(--primary-main) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-main) 5%, transparent) 1px, transparent 1px); background-size: 2rem 2rem; background-attachment: fixed; color: var(--text-color); } /* Dark Mode Base (class toggled on or ) */ .dark { --background-color: #0F172A; --card-background: #1E293B; --text-color: #F1F5F9; --muted-text-color: #94A3B8; --border-color: #334155; --input-background-color: #0F172A; --primary-dark: #1E40AF; --primary-main: #2563EB; --primary-light: #3B82F6; --primary-lighter: #1E3A8A; --success-color: #22C55E; --error-color: #DC2626; } /* Smooth Theme Transition */ html, body, .card, .btn, .form-input, .paper-entry, .print-job-entry { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Header */ .app-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.1rem; background: color-mix(in srgb, var(--card-background) 94%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-top: 3px solid var(--primary-dark); border-radius: 6px; box-shadow: 0 8px 24px -22px rgba(23,34,48,.75); position: sticky; top: 0; z-index: 40; } .site-header { min-height: 4.25rem; } .site-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text-color); text-decoration: none; } .site-brand-mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--primary-main) 35%, var(--border-color)); border-radius: 6px; background: color-mix(in srgb, var(--primary-main) 9%, var(--card-background)); } .site-brand-mark img { width: 1.75rem; height: 1.75rem; } .site-brand-copy { display: grid; line-height: 1.15; } .site-brand-copy strong { font-size: 1.05rem; font-weight: 800; } .site-brand-copy span { margin-top: 0.2rem; color: var(--muted-text-color); font-size: 0.75rem; } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .unit-system-control { display: grid; grid-template-columns: repeat(2, 2.4rem); padding: 0.2rem; border: 1px solid var(--border-color); border-radius: 6px; background: color-mix(in srgb, var(--background-color) 75%, var(--card-background)); } .unit-picker, .tool-intro-meta { display: flex; align-items: center; } .tool-intro-meta { justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .tool-intro-meta .page-label { margin: 0; } .unit-picker { gap: 0.55rem; color: var(--muted-text-color); font-size: 0.75rem; font-weight: 700; } .unit-system-control label { cursor: pointer; } .unit-system-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .unit-system-control span { display: grid; min-height: 2rem; place-items: center; border: 1px solid transparent; border-radius: 4px; color: var(--muted-text-color); font-size: 0.75rem; font-weight: 800; } .unit-system-control input:checked + span { border-color: color-mix(in srgb, var(--primary-main) 40%, var(--border-color)); background: var(--card-background); color: var(--primary-main); box-shadow: var(--shadow-sm); } .unit-system-control input:focus-visible + span { outline: 2px solid var(--primary-main); outline-offset: 2px; } .unit-system-control input:disabled + span { cursor: wait; opacity: 0.55; } .dark .app-header { background: color-mix(in srgb, var(--card-background) 92%, transparent); box-shadow: 0 8px 24px -22px rgba(0,0,0,.9); } .site-nav, .footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; } .site-nav a, .footer-links a, .footer-links button, .inline-link { color: var(--muted-text-color); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .site-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0 0.25rem; border-bottom: 2px solid transparent; } .site-nav a:hover, .footer-links a:hover, .footer-links button:hover, .inline-link:hover { color: var(--primary-main); text-decoration: underline; } .site-nav [aria-current="page"], .footer-links [aria-current="page"] { color: var(--primary-main); } .site-nav [aria-current="page"] { border-bottom-color: var(--accent-color); text-decoration: none; } .footer-links button { appearance: none; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; } @media (max-width: 640px) { .app-header { flex-wrap: wrap; } .header-actions { width: 100%; justify-content: flex-end; } .site-nav { margin-right: auto; } } .logo-icon { background: linear-gradient(145deg, var(--primary-main), var(--primary-dark)); overflow: hidden; } .logo-glow { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%); mix-blend-mode: overlay; pointer-events: none; } .icon-btn { background: var(--card-background); border: 1px solid var(--border-color); width: 2.5rem; height: 2.5rem; border-radius: 6px; display:flex;align-items:center;justify-content:center; color: var(--primary-main); cursor: pointer; position: relative; overflow: hidden; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease; } .icon-btn:hover { background: color-mix(in srgb, var(--primary-main) 12%, var(--card-background)); } .icon-btn:active { transform: scale(.92); } .dark .icon-btn { background: #0F172A; } .icon-btn svg { pointer-events:none; } /* Fancy focus ring */ .icon-btn:focus-visible { outline:2px solid var(--primary-light); outline-offset:3px; } .card { position: relative; background: var(--card-background); } .card::before { content: none; } .form-input, .paper-size-select, .print-size-select { background-image: none; } .dark .form-input, .dark .paper-size-select, .dark .print-size-select { background-image: none; } .optimization-mode-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--border-color); border-radius: 8px; background: color-mix(in srgb, var(--background-color) 75%, var(--card-background)); } .optimization-mode-control label { min-width: 0; cursor: pointer; } .optimization-mode-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .optimization-mode-control span { display: flex; min-height: 2.5rem; align-items: center; justify-content: center; padding: 0.55rem 0.75rem; border: 1px solid transparent; border-radius: 6px; color: var(--muted-text-color); font-size: 0.875rem; font-weight: 600; text-align: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .optimization-mode-control input:checked + span { border-color: color-mix(in srgb, var(--primary-main) 45%, var(--border-color)); background: var(--card-background); color: var(--primary-dark); box-shadow: var(--shadow-sm); } .optimization-mode-control input:focus-visible + span { outline: 2px solid var(--primary-main); outline-offset: 2px; } .optimization-mode-control input:disabled + span { cursor: wait; opacity: 0.65; } .dark .optimization-mode-control input:checked + span { color: var(--primary-light); } .result-supporting-text { color: var(--muted-text-color); } @media (max-width: 420px) { .optimization-mode-control { grid-template-columns: 1fr; } } .btn { position: relative; isolation:isolate; } .btn-primary { background: var(--primary-main); box-shadow: none; } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--card-background); } .dark .btn-secondary { background: var(--card-background); } .btn::after { content: none; } /* Toast refinement */ .toast { position:relative; overflow:hidden; } .toast::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg,var(--primary-main),var(--primary-light)); } .dark .toast { background: #1E293B; } .gradient-text { animation: none; } /* Visualization refinement */ .paper-container { background: linear-gradient(135deg,#fff,#f4f7fb); } .dark .paper-container { background: linear-gradient(135deg,#1E293B,#0F172A); } .usable-area { background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 6px, rgba(0,0,0,0) 6px 12px); } .dark .usable-area { background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, rgba(255,255,255,0) 6px 12px); } .print-div { backdrop-filter: blur(2px); } /* Pagination buttons */ #pagination-controls button { background: linear-gradient(135deg,#e2e8f0,#cbd5e1); } .dark #pagination-controls button { background: linear-gradient(135deg,#334155,#1e293b); color:#e2e8f0; } #pagination-controls button:hover { filter:brightness(1.05); } /* Modal enhancements */ .modal-content { border:1px solid var(--border-color); position:relative; overflow:hidden; } .modal-content::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.35), transparent 70%); mix-blend-mode:overlay; pointer-events:none; } .dark .modal-content::after { background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.1), transparent 70%); } /* Subtle scrollbars */ ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary-light), var(--primary-main)); border-radius:20px; border:2px solid var(--background-color); } .dark ::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary-main), var(--primary-dark)); border:2px solid #0F172A; } /* Better focus outlines */ *:focus-visible { outline:2px solid color-mix(in srgb, var(--primary-main) 60%, transparent); outline-offset:2px; border-radius:4px; } body::after { content: none; } /* Responsive refinement */ @media (max-width:640px){ .app-header { flex-direction: column; align-items: flex-start; gap:.75rem; } } /* Theme toggle state */ .theme-icon-sun, .theme-icon-moon { transition: opacity .35s ease, transform .45s cubic-bezier(.16,.8,.24,1); } .theme-switching .theme-icon-sun { opacity:0; transform: translateY(-6px) scale(.85); } .theme-switching .theme-icon-moon { opacity:1 !important; transform: translateY(0) scale(1); } /* Hidden helper */ .hidden { display:none !important; } /* Utility for fade-in (applied dynamically if needed) */ .fade-in { animation: fadeIn .5s ease forwards; } @keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } } /* Maintain original definitions below (no removal) */ .gradient-text { background: linear-gradient(45deg, var(--primary-dark), var(--primary-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .card { background-color: var(--card-background); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: 0 1px 2px rgba(23, 34, 48, 0.06); border: 1px solid var(--border-color); } .card-title { font-size: 1.25rem; font-weight: 700; color: var(--text-color); } .form-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-text-color); } .form-input, .paper-size-select, .print-size-select { display: block; width: 100%; background-color: var(--input-background-color); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 1rem; color: var(--text-color); transition: border-color 0.2s, box-shadow 0.2s; } .form-input:focus, .paper-size-select:focus, .print-size-select:focus { outline: none; border-color: var(--primary-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-main) 20%, transparent); } .btn { padding: 0.65rem 1.25rem; border-radius: 0.5rem; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .tool-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(30rem, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: end; margin: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 4rem); padding: 0 clamp(0rem, 3vw, 2rem); } .tool-intro-copy h1 { margin: 0; color: var(--text-color); font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 800; line-height: 0.98; letter-spacing: 0; text-wrap: balance; } .tool-intro-copy > p:last-child { max-width: 34rem; margin: 1rem 0 0; color: var(--muted-text-color); font-size: 1.05rem; line-height: 1.6; } .tool-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--text-color); border-bottom: 1px solid var(--border-color); list-style: none; } .tool-route li { display: grid; min-width: 0; min-height: 7.5rem; align-content: start; padding: 0.85rem; border-right: 1px solid var(--border-color); } .tool-route li:last-child { border-right: 0; } .tool-route span { color: var(--accent-color); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 800; } .tool-route strong { margin-top: 1.1rem; color: var(--text-color); font-size: 0.9rem; } .tool-route small { margin-top: 0.2rem; color: var(--muted-text-color); font-size: 0.75rem; line-height: 1.35; } .results-empty { display: grid; grid-template-columns: minmax(12rem, 0.85fr) minmax(12rem, 1fr); gap: clamp(1.5rem, 4vw, 3rem); min-height: 29rem; align-items: center; } .empty-sheet { position: relative; width: min(100%, 15rem); aspect-ratio: 0.707; justify-self: center; border: 1px solid var(--text-color); background: color-mix(in srgb, var(--card-background) 94%, var(--primary-lighter)); box-shadow: 0.65rem 0.65rem 0 color-mix(in srgb, var(--primary-main) 10%, transparent); } .empty-sheet::before, .empty-sheet::after { content: ''; position: absolute; width: 1.4rem; height: 1.4rem; border-color: var(--accent-color); } .empty-sheet::before { top: -0.5rem; left: -0.5rem; border-top: 1px solid; border-left: 1px solid; } .empty-sheet::after { right: -0.5rem; bottom: -0.5rem; border-right: 1px solid; border-bottom: 1px solid; } .empty-print { position: absolute; border: 1px solid color-mix(in srgb, var(--primary-main) 55%, var(--border-color)); background: color-mix(in srgb, var(--primary-lighter) 68%, var(--card-background)); } .empty-print-a { top: 9%; left: 9%; width: 51%; height: 34%; } .empty-print-b { top: 9%; right: 9%; width: 24%; height: 34%; } .empty-print-c { right: 9%; bottom: 14%; left: 9%; height: 35%; } .empty-sheet-label { position: absolute; bottom: 3%; left: 9%; color: var(--muted-text-color); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.55rem; } .results-empty-copy h2 { margin: 0; color: var(--text-color); font-size: 1.5rem; } .results-empty-copy > p:not(.page-label):not(.results-empty-exports) { margin: 0.65rem 0 0; color: var(--muted-text-color); line-height: 1.6; } .results-empty-exports { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1.5rem; color: var(--primary-main); font-size: 0.75rem; font-weight: 700; } .results-empty-exports span::before { content: '+ '; color: var(--accent-color); } .btn-primary { background-color: var(--primary-main); color: white; } .btn-primary:hover { background-color: var(--primary-dark); } .btn-primary:disabled { background-color: var(--muted-text-color); border-color: var(--muted-text-color); cursor: not-allowed; opacity: 0.7; color: var(--card-background); } .btn-secondary { background-color: var(--card-background); color: var(--primary-main); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: color-mix(in srgb, var(--primary-main) 10%, transparent); border-color: var(--primary-main); } .btn-danger { background-color: transparent; color: var(--error-color); border: 1px solid var(--error-color); } .btn-danger:hover { background-color: color-mix(in srgb, var(--error-color) 10%, transparent); } .paper-entry, .print-job-entry { background-color: #F9FAFB; padding: 1rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); } .paper-container { background-color: #fff; position: relative; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); border-radius: 0; } .usable-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f0f0f0; outline: 2px dashed var(--primary-light); } .print-div { position: absolute; background-color: var(--primary-lighter); border: 1px solid var(--primary-main); color: var(--primary-dark); font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; box-sizing: border-box; padding: 2px; } .waste-div { position: absolute; background-color: rgba(255, 0, 0, 0.1); } #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 100; } .toast { background-color: var(--card-background); color: var(--text-color); padding: 1rem 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform 0.3s ease-in-out; opacity: 0; margin-top: 1rem; border: 1px solid var(--border-color); } .toast.show { transform: translateY(0); opacity: 1; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(10, 20, 30, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; z-index: 50; } .modal-content { background-color: var(--card-background); padding: 2rem; border-radius: var(--border-radius); width: 90%; max-width: 500px; max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; box-shadow: var(--shadow-lg); } #custom-size-list .flex { background-color: var(--background-color) !important; border-radius: 0.375rem; } #custom-size-list .text-gray-500 { color: var(--muted-text-color); } #saved-inventories-controls { background-color: var(--background-color) !important; border-color: var(--border-color) !important; } #best-option-summary { background-color: #F0FDF4 !important; border-color: var(--success-color) !important; } #best-option-summary .text-green-800 { color: #14532D; } #best-option-summary .text-green-700 { color: #15803D; } #unplaced-warning-container .bg-red-50 { background-color: #FEF2F2 !important; } #unplaced-warning-container .border-red-500 { border-color: var(--error-color) !important; } #unplaced-warning-container .text-red-800 { color: #991B1B; } #unplaced-warning-container .text-red-700 { color: #B91C1C; } .spinner { width: 16px; height: 16px; border: 2px solid var(--primary-light); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================= */ /* Dark Mode Fixes & Enhancements */ /* ============================= */ .dark .paper-entry, .dark .print-job-entry { background-color: var(--card-background); border-color: var(--border-color); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .dark #best-option-summary { background-color: rgba(34,197,94,0.12) !important; border-color: var(--success-color) !important; } .dark #best-option-summary .text-green-800 { color: #86EFAC; } .dark #best-option-summary .text-green-700 { color: #4ADE80; } .dark #unplaced-warning-container .bg-red-50 { background-color: rgba(239,68,68,0.14) !important; } .dark #unplaced-warning-container .border-red-500 { border-color: #F87171 !important; } .dark #unplaced-warning-container .text-red-800 { color: #FCA5A5; } .dark #unplaced-warning-container .text-red-700 { color: #F87171; } /* Visualization contrast improvements */ .dark .paper-container { background: linear-gradient(135deg,#1E293B,#0F172A); } .dark .usable-area { outline-color: var(--primary-main); background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px); } .print-div { color:#0F172A; } .dark .print-div { background-color: rgba(37,99,235,0.42); border-color: var(--primary-light); color: #F1F5F9; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,.75); } .print-div:hover { outline:2px solid color-mix(in srgb, var(--primary-main) 55%, transparent); z-index:3; } .dark .print-div:hover { outline-color: var(--primary-light); } #paper-label { font-weight:600; } .dark #paper-label { color:#E2E8F0; } /* Force light utility backgrounds to adapt in dark mode */ .dark .bg-green-50 { background-color: rgba(34,197,94,0.12) !important; } .dark .bg-red-50 { background-color: rgba(239,68,68,0.14) !important; } /* ============================================================================= COOKIE CONSENT BANNER STYLES ============================================================================= */ /* Cookie Banner */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--card-background); border-top: 1px solid var(--border-color); box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1); padding: 1.5rem; animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cookie-banner-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .cookie-banner-content { flex-direction: row; align-items: center; justify-content: space-between; } } .cookie-banner-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--text-color); } .cookie-banner-description { margin: 0; color: var(--muted-text-color); font-size: 0.875rem; line-height: 1.4; } .cookie-banner-description a { color: var(--primary-main); font-weight: 600; } .cookie-banner-actions { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } @media (min-width: 640px) { .cookie-banner-actions { flex-direction: row; flex-shrink: 0; } } .cookie-banner-actions .btn { white-space: nowrap; font-size: 0.875rem; padding: 0.625rem 1rem; } .cookie-banner-actions .btn-secondary { border-color: color-mix(in srgb, var(--primary-main) 45%, var(--border-color)); } /* Cookie Settings Modal */ .cookie-settings-modal { max-width: 600px; width: 90vw; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .close-btn { background: none; border: none; color: var(--muted-text-color); cursor: pointer; padding: 0.25rem; border-radius: 0.375rem; transition: color 0.2s ease; } .close-btn:hover { color: var(--text-color); } .cookie-categories { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .cookie-category { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1.25rem; background: var(--input-background-color); } .cookie-category-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .cookie-category-info { flex: 1; } .cookie-category-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--text-color); } .cookie-category-description { margin: 0; color: var(--muted-text-color); font-size: 0.875rem; line-height: 1.4; } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-label { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 24px; transition: 0.3s; display: block; } .toggle-label:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .toggle-switch input:checked + .toggle-label { background-color: var(--primary-main); } .toggle-switch input:checked + .toggle-label:before { transform: translateX(20px); } .toggle-switch.disabled .toggle-label { background-color: var(--primary-main); cursor: not-allowed; opacity: 0.6; } .toggle-switch.disabled input { cursor: not-allowed; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } /* Cookie Preferences Button (floating) */ .cookie-preferences-btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; background: var(--card-background); border: 1px solid var(--border-color); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: all 0.2s ease; color: var(--text-color); } .cookie-preferences-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.15); background: var(--primary-main); color: white; } /* Dark mode adjustments for cookie elements */ .dark .cookie-banner { background: var(--card-background); border-top-color: var(--border-color); } .dark .cookie-preferences-btn { background: var(--card-background); border-color: var(--border-color); color: var(--text-color); } .dark .cookie-preferences-btn:hover { background: var(--primary-main); color: white; } @media (max-width: 640px) { .cookie-preferences-btn { display: none; } } .dark .toggle-label { background-color: #4a5568; } .dark .toggle-switch input:checked + .toggle-label { background-color: var(--primary-main); } .dark .toggle-switch.disabled .toggle-label { background-color: var(--primary-main); opacity: 0.6; } /* Blue info box styles */ .bg-blue-50 { background-color: #eff6ff; } .border-blue-200 { border-color: #bfdbfe; } .text-blue-700 { color: #1d4ed8; } .text-blue-400 { color: #60a5fa; } /* Dark mode blue info box */ .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); } .dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3); } .dark .text-blue-700 { color: #93c5fd; } .dark .text-blue-400 { color: #60a5fa; } /* ============================================================================= SITE FOOTER AND INFORMATION PAGES ============================================================================= */ .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 2rem; margin-top: 3rem; padding: 1.5rem 0 0.5rem; border-top: 1px solid var(--border-color); color: var(--muted-text-color); font-size: 0.875rem; } .site-footer strong { color: var(--text-color); } .site-footer p { margin: 0.25rem 0 0; } .site-footer-meta { grid-column: 1 / -1; } .site-footer-meta a { color: var(--primary-main); } .legal-body { display: block; min-height: 100vh; padding: 1rem; } .legal-shell { width: min(100%, 80rem); margin: 0 auto; } .legal-content { width: min(100%, 54rem); margin: 2.5rem auto 0; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-background); box-shadow: var(--shadow-md); } .page-label { margin: 0 0 0.75rem; color: var(--primary-main) !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .guide-content h1 { max-width: 13ch; } .guide-steps { margin: 2.5rem 0 0; padding: 0 !important; list-style: none; counter-reset: guide-step; } .guide-steps li { position: relative; min-height: 5.5rem; padding: 0 0 1.75rem 4.25rem; counter-increment: guide-step; } .guide-steps li::before { content: counter(guide-step, decimal-leading-zero); position: absolute; top: 0.1rem; left: 0; color: var(--primary-main); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; font-weight: 800; } .guide-steps li::after { content: ''; position: absolute; top: 1.65rem; bottom: 0.3rem; left: 0.75rem; width: 1px; background: var(--border-color); } .guide-steps li:last-child::after { display: none; } .guide-steps h2 { margin: 0 0 0.35rem; } .guide-steps p { max-width: 64ch; margin: 0; } .guide-notes, .guide-check { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .guide-notes dl { margin: 0; } .guide-notes dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .guide-notes dt { color: var(--text-color); font-weight: 800; } .guide-notes dd { margin: 0; color: var(--muted-text-color); line-height: 1.6; } .guide-check ul { margin-bottom: 0; } .guide-action { margin-top: 2rem; } .legal-content h1 { margin: 0 0 0.5rem; color: var(--text-color); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; } .legal-content h2 { margin: 2rem 0 0.65rem; color: var(--text-color); font-size: 1.25rem; } .legal-content h3 { margin: 1.25rem 0 0.5rem; color: var(--text-color); font-size: 1rem; } .legal-content p, .legal-content li { color: var(--muted-text-color); line-height: 1.7; } .legal-content a { color: var(--primary-main); } .legal-content ul, .legal-content ol { padding-left: 1.35rem; } .legal-kicker { margin: 0 0 1.5rem; color: var(--muted-text-color); } .policy-summary { margin: 1.5rem 0; padding: 1rem; border-left: 4px solid var(--primary-main); background: color-mix(in srgb, var(--primary-main) 8%, var(--card-background)); } /* ============================================================================= CRAWLABLE HOME CONTENT AND PRINT PLANNING RESOURCES ============================================================================= */ .home-explainer, .resource-index { margin-top: clamp(3rem, 7vw, 5.5rem); padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0rem, 3vw, 2rem) 0; border-top: 1px solid var(--border-color); } .home-explainer-intro, .resource-index-heading { max-width: 46rem; } .home-explainer h2, .resource-index h2 { margin: 0; color: var(--text-color); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.08; letter-spacing: 0; } .home-explainer-intro > p:last-child, .resource-index-heading > p:last-child { color: var(--muted-text-color); line-height: 1.7; } .home-benefits, .resource-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-top: 1px solid var(--text-color); border-bottom: 1px solid var(--border-color); } .home-benefits > div, .resource-links > a { min-width: 0; padding: 1.25rem; border-right: 1px solid var(--border-color); } .home-benefits > div:last-child, .resource-links > a:last-child { border-right: 0; } .home-benefits span, .resource-links span, .resource-eyebrow { color: var(--accent-color); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; } .home-benefits h3, .resource-links strong { display: block; margin: 1.15rem 0 0.35rem; color: var(--text-color); font-size: 1rem; } .home-benefits p, .resource-links p { margin: 0; color: var(--muted-text-color); font-size: 0.875rem; line-height: 1.6; } .resource-links > a { text-decoration: none; transition: background-color .2s ease, color .2s ease; } .resource-links > a:hover { background: color-mix(in srgb, var(--primary-main) 7%, var(--card-background)); } .resource-links > a:hover strong { color: var(--primary-main); } .resource-page h1 { max-width: 20ch; } .resource-page .legal-kicker { max-width: 68ch; } .resource-page section { scroll-margin-top: 6rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 1rem 0 2rem; padding: 0.8rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); color: var(--muted-text-color); font-size: 0.8rem; } .article-summary, .resource-callout { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 4px solid var(--accent-color); background: color-mix(in srgb, var(--accent-color) 7%, var(--card-background)); } .article-summary p, .resource-callout p { margin: 0; } .reference-table-wrap { margin: 1rem 0 1.75rem; overflow-x: auto; border: 1px solid var(--border-color); } .reference-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 0.875rem; } .reference-table th, .reference-table td { padding: 0.8rem; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); color: var(--muted-text-color); text-align: left; vertical-align: top; } .reference-table th:last-child, .reference-table td:last-child { border-right: 0; } .reference-table tbody tr:last-child td { border-bottom: 0; } .reference-table th { color: var(--text-color); background: color-mix(in srgb, var(--border-color) 45%, var(--card-background)); font-size: 0.75rem; text-transform: uppercase; } .reference-table strong { color: var(--text-color); } .resource-steps { margin: 1rem 0 0 !important; padding: 0 !important; list-style: none; counter-reset: resource-step; } .resource-steps li { position: relative; min-height: 4rem; padding: 0 0 1.4rem 3.4rem; counter-increment: resource-step; } .resource-steps li::before { content: counter(resource-step, decimal-leading-zero); position: absolute; top: 0.15rem; left: 0; color: var(--primary-main); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; font-weight: 800; } .resource-steps strong { color: var(--text-color); } .resource-action { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .resource-action p { flex: 1 1 18rem; margin: 0; } .related-guides { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .related-guides ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; padding: 0 !important; list-style: none; } .related-guides a { font-weight: 700; } .source-note { font-size: 0.8rem; } .contact-section { scroll-margin-top: 6rem; } .contact-form { display: grid; gap: 1rem; margin-top: 1.25rem; } .contact-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .contact-message { min-height: 10rem; max-height: 30rem; resize: vertical; } .contact-form-actions { display: flex; align-items: center; gap: 1rem; } .contact-status, .contact-note { margin: 0; font-size: 0.875rem; } .contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .policy-table-wrap { overflow-x: auto; margin: 1rem 0; } .policy-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.875rem; } .policy-table th, .policy-table td { padding: 0.75rem; border: 1px solid var(--border-color); color: var(--muted-text-color); text-align: left; vertical-align: top; } .policy-table th { color: var(--text-color); background: color-mix(in srgb, var(--border-color) 45%, var(--card-background)); } @media (max-width: 680px) { .site-footer { grid-template-columns: 1fr; } .site-footer-meta { grid-column: auto; } .contact-field-grid { grid-template-columns: 1fr; } .contact-form-actions { align-items: flex-start; flex-direction: column; width: 100%; } .contact-form-actions .btn { width: 100%; } .site-brand-copy span { display: none; } .guide-notes dl div { grid-template-columns: 1fr; gap: 0.2rem; } .home-benefits, .resource-links, .related-guides ul { grid-template-columns: 1fr; } .home-benefits > div, .resource-links > a { border-right: 0; border-bottom: 1px solid var(--border-color); } .home-benefits > div:last-child, .resource-links > a:last-child { border-bottom: 0; } } @media (max-width: 900px) { .tool-intro { grid-template-columns: 1fr; } .results-empty { grid-template-columns: 1fr; } .empty-sheet { width: min(70%, 14rem); } } @media (max-width: 540px) { .tool-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool-route li:nth-child(2) { border-right: 0; } .tool-route li:nth-child(-n + 2) { border-bottom: 1px solid var(--border-color); } .results-empty { min-height: auto; } }