/* No Data Found — styles */ :root { /* Brand palette — matches the seals */ --ink-900: #0e1220; /* deepest navy */ --ink-800: #1a1f2e; /* primary brand navy (seal ring) */ --ink-700: #2c3548; --ink-600: #3d4861; --ink-500: #6b7384; --ink-400: #9ca3b3; --ink-300: #c8c8be; --ink-200: #ddd5c2; --ink-100: #ece4cc; --ink-50: #f3ead4; /* same as seal cream center */ --gold-900: #6b5018; --gold-700: #8e6f25; --gold-600: #b8923e; /* primary gold accent (matches seal) */ --gold-500: #c9a85a; --gold-300: #dfc585; --gold-100: #efe2bf; --gold-50: #f7eed4; --paper: #fbf8f0; /* cream background */ --paper-soft:#f5efe1; --bg: #fbf8f0; --bg-soft: #f5efe1; --bg-section:#f0e7cf; --bg-card: #fffdf6; --danger: #9b2218; --danger-bg: #f7e3d8; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(11, 18, 32, .04), 0 1px 3px rgba(11, 18, 32, .04); --shadow: 0 6px 16px rgba(11, 18, 32, .06), 0 2px 4px rgba(11, 18, 32, .04); --shadow-lg: 0 24px 48px rgba(11, 18, 32, .10), 0 8px 16px rgba(11, 18, 32, .06); --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; --container: 1120px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Belt-and-suspenders to keep the scrollbar gutter ALWAYS reserved: - scrollbar-gutter: stable — modern browsers reserve gutter when the element could scroll. - overflow-y: scroll — forces the gutter even when the element is briefly non-scrollable (e.g. while splash sets overflow:hidden, or when the page content fits the viewport on a short page). Without overflow-y: scroll, scrollbar-gutter: stable can fail during splash transitions: html.splash-active sets overflow:hidden which makes the element non-scrollable, gutter is dropped, then when the class is removed the gutter comes back → 1–2 px shift. With overflow-y: scroll the gutter is locked regardless. */ overflow-y: scroll; scrollbar-gutter: stable; /* Auto-fading scrollbar — the thumb is always present (so the structure NEVER changes), only its opacity transitions. No transition on the html element itself: the colour change happens directly on the thumb to avoid a global repaint that was perceived as movement on some setups. bindScrollAutohide() in app.js toggles .is-scrolling on . */ scrollbar-width: thin; scrollbar-color: rgba(26, 31, 46, 0) transparent; } html.is-scrolling { scrollbar-color: rgba(26, 31, 46, .42) transparent; } /* WebKit (Chrome, Safari, Edge) — finer control of the thumb. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:start, ::-webkit-scrollbar-button:end, ::-webkit-scrollbar-button:vertical:start, ::-webkit-scrollbar-button:vertical:end, ::-webkit-scrollbar-button:vertical:decrement, ::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:horizontal:decrement, ::-webkit-scrollbar-button:horizontal:increment { -webkit-appearance: none !important; appearance: none !important; display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; visibility: hidden !important; } ::-webkit-scrollbar-track-piece { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { /* Same width and box at rest and during scroll — only opacity changes via background-color rgba alpha. Structure is stable. */ background-color: rgba(26, 31, 46, 0); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; transition: background-color 250ms ease-out; } html.is-scrolling ::-webkit-scrollbar-thumb { background-color: rgba(26, 31, 46, .42); transition: background-color 80ms ease-out; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 31, 46, .65) !important; transition: background-color 80ms ease-out; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-800); background: var(--bg); overflow-x: clip; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Lock the document scroll while the splash is visible so the scrollbar does not appear behind the cover. Applied to both and because depending on the browser one or the other is the scrolling element. Combined with `scrollbar-gutter: stable` on , the gutter stays reserved during the lock — there is no horizontal layout shift when the splash dismisses. Removed by app.js when splash hides. */ html.splash-active, body.splash-active { overflow: hidden; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container.narrow { max-width: 820px; } a { color: var(--ink-800); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: var(--gold-600); text-decoration-thickness: 2px; text-underline-offset: 3px; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4 { color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 .6em; } h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; } h3 { font-size: 1.15rem; font-weight: 700; } p { margin: 0 0 1em; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); background: transparent; padding: 0 0 10px; border-bottom: 2px solid var(--gold-600); border-radius: 0; margin: 0 0 22px; } /* SPLASH */ .splash { position: fixed; inset: 0; background: var(--paper); z-index: 1000; display: flex; align-items: center; justify-content: center; transition: opacity .8s ease; } .splash.is-hidden { opacity: 0; pointer-events: none; } .splash-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: splashIn .5s ease-out both; } .splash-seal { width: 200px; height: 200px; } .splash-seal svg, .splash-seal img { width: 100%; height: 100%; display: block; object-fit: contain; } .splash-brand { font-weight: 800; font-size: 1.4rem; letter-spacing: .04em; color: var(--ink-800); } .splash-tag { color: var(--ink-600); font-size: .92rem; letter-spacing: .04em; } .splash-hint { position: absolute; bottom: 32px; left: 0; right: 0; text-align: center; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; animation: splashHint 1.6s ease-in-out 1.2s infinite; } @keyframes splashHint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes splashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* HEADER */ .site-header { position: sticky; top: 0; background: rgba(251,248,240,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ink-200); z-index: 50; } .header-row { display: flex; align-items: center; gap: 18px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink-900); font-weight: 800; letter-spacing: -.01em; text-decoration: none; } .brand:hover { text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--ink-800); color: var(--gold-500); border-radius: 9px; } .brand-text { font-size: 1rem; } .site-nav { display: none; margin-left: auto; gap: 22px; } .site-nav a { color: var(--ink-700); font-weight: 500; font-size: .94rem; padding: 6px 0; position: relative; } .site-nav a:hover { color: var(--ink-900); text-decoration: none; } .lang-switch { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--bg); padding: 3px; } /* When the nav is visible (desktop) the lang-switch sits next to it, no margin-left needed. On mobile the nav is display:none but still a sibling — without scoping this inside the media query the adjacent-sibling selector still matched and stripped the auto margin, leaving the lang-switch glued to the brand. */ .lang-btn { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .82rem; color: var(--ink-500); /* Padding + min-height per garantir hit-area WCAG 2.5.5 AAA (44×44). */ padding: 10px 14px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; } .lang-btn:hover { color: var(--ink-800); } .lang-btn.is-active { background: var(--ink-800); color: var(--paper); } @media (min-width: 900px) { .site-nav { display: inline-flex; } .site-nav + .lang-switch { margin-left: 0; } } /* HERO */ .hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); background: radial-gradient(1200px 600px at 80% -10%, var(--gold-50), transparent 70%), radial-gradient(900px 500px at 0% 110%, var(--paper-soft), transparent 70%); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } } .hero-text h1 { margin-bottom: 18px; } .hero-text .lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-700); max-width: 36ch; } .hero-text .philo { font-style: italic; color: var(--ink-800); border-left: 3px solid var(--gold-600); padding-left: 14px; margin-top: 22px; font-weight: 500; } .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .hero-seal { display: flex; align-items: center; justify-content: center; } .hero-seal .seal-display { width: clamp(240px, 36vw, 380px); filter: drop-shadow(0 18px 36px rgba(26, 31, 46, .18)); } .hero-seal .seal-display svg, .hero-seal .seal-display img { width: 100%; height: auto; aspect-ratio: 1; /* lock the box even before the image loads */ display: block; } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; text-decoration: none; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink-800); color: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px rgba(26,31,46,.22); } .btn-primary:hover { background: var(--ink-900); text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 10px 22px rgba(26,31,46,.24); } .btn-secondary { background: var(--paper); color: var(--ink-800); border-color: var(--ink-200); } .btn-secondary:hover { background: var(--paper-soft); text-decoration: none; border-color: var(--gold-600); } .btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-300); } .btn-ghost:hover { background: var(--paper-soft); border-color: var(--gold-600); text-decoration: none; } /* SECTIONS */ .section { padding: clamp(56px, 7vw, 96px) 0; } .section-alt { background: var(--paper-soft); } .section-intro { max-width: 60ch; color: var(--ink-700); font-size: 1.05rem; } /* COMPARATIVA QUOTES */ .quote-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 32px 0; } @media (min-width: 760px) { .quote-grid { grid-template-columns: 1fr 1fr; } } .quote { margin: 0; padding: 22px 24px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--ink-200); box-shadow: var(--shadow-sm); } .quote p { margin: 0; font-size: 1.06rem; line-height: 1.45; color: var(--ink-800); } .quote-label { display: inline-block; margin-bottom: 10px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .quote-old { background: var(--danger-bg); border-color: #e6c8b9; } .quote-old .quote-label { color: var(--danger); } .quote-old p { color: #5b2018; } .quote-new { background: var(--gold-50); border-color: var(--gold-100); } .quote-new .quote-label { color: var(--gold-700); } .quote-new p { color: var(--ink-800); } /* ANALOGY */ .lead-soft { font-size: 1.05rem; color: var(--ink-700); max-width: 60ch; } .analogy-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 32px 0 28px; } @media (min-width: 760px) { .analogy-grid { grid-template-columns: 1fr 1fr; } } .analogy-card { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; } .analogy-yes { border-color: var(--gold-300); background: var(--gold-50); } .analogy-no { border-color: #e6c8b9; background: var(--danger-bg); } .analogy-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .analogy-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .analogy-yes .analogy-icon { background: var(--gold-600); color: var(--paper); } .analogy-no .analogy-icon { background: var(--danger); color: var(--paper); } .analogy-card h3 { margin: 0; font-size: 1.05rem; } .analogy-card ul { list-style: none; padding: 0 0 0 42px; /* indent to align with h3 (icon 30 + gap 12) */ margin: 0 0 14px; display: grid; gap: 8px; } .analogy-card li { position: relative; padding-left: 18px; color: var(--ink-700); font-size: .95rem; line-height: 1.45; } .analogy-card li::before { content: "·"; position: absolute; left: 4px; top: 0; font-weight: 700; } .analogy-yes li::before { color: var(--gold-700); } .analogy-no li::before { color: var(--danger); } .analogy-foot { margin: auto 0 0; padding-left: 42px; /* same indent as the list */ font-size: .88rem; font-style: italic; color: var(--ink-700); } .analogy-yes .analogy-foot { color: var(--gold-700); } .analogy-no .analogy-foot { color: var(--danger); } .analogy-quote { margin: 28px 0 0; padding: 22px 24px; background: var(--ink-800); color: var(--paper); border-radius: var(--radius); border-left: 4px solid var(--gold-600); } .analogy-quote p { margin: 0; font-size: 1.05rem; line-height: 1.55; } .analogy-quote strong { color: var(--gold-300); font-weight: 700; } .analogy-clarification { margin-top: 24px; padding: 24px 26px 22px; background: var(--bg-card); border: 1px solid var(--ink-200); border-left: 4px solid var(--gold-600); border-radius: var(--radius); } .analogy-clarification h3 { margin: 0 0 10px; font-size: 1.08rem; color: var(--ink-900); } .analogy-clarification > p { margin: 0 0 16px; color: var(--ink-700); font-size: .95rem; line-height: 1.55; } .analogy-clarification ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .analogy-clarification li { position: relative; padding-left: 24px; color: var(--ink-700); font-size: .95rem; line-height: 1.5; } .analogy-clarification li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--gold-700); font-weight: 700; } .analogy-clarification li strong { color: var(--ink-900); } /* PRINCIPLES */ .principles-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; } @media (min-width: 700px) { .principles-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .principles-grid { grid-template-columns: 1fr 1fr 1fr; } } .principle { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 22px 22px 20px; position: relative; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .principle:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-300); } .p-num { font-family: var(--font-mono); color: var(--gold-700); font-size: .8rem; letter-spacing: .08em; margin-bottom: 6px; } .principle h3 { margin-bottom: 6px; } .principle p { color: var(--ink-700); margin: 0; font-size: .96rem; } /* COMPARE TABLE */ .compare-table { margin-top: 28px; border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-sm); } .compare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; border-bottom: 1px solid var(--ink-200); } .compare-row:last-child { border-bottom: 0; } .compare-row > * { padding: 14px 16px; font-size: .95rem; } .compare-row > [role="rowheader"] { color: var(--ink-800); font-weight: 600; } .compare-head { background: var(--ink-800); color: var(--paper); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; } .compare-row .bad { color: var(--danger); font-weight: 600; } .compare-row .good { color: var(--gold-700); font-weight: 700; } @media (max-width: 640px) { .compare-row { grid-template-columns: 1fr 1fr; } .compare-row > [role="rowheader"] { grid-column: 1 / -1; background: var(--paper-soft); color: var(--ink-800); font-size: .85rem; } /* Keep column headers visible on mobile and make them stick to the top of the viewport (just under the site header) so context is never lost while scrolling through the comparison rows. */ .compare-head { position: sticky; top: 64px; /* matches site-header height */ z-index: 4; box-shadow: 0 4px 10px rgba(11, 18, 32, .14); } .compare-head > [role="columnheader"]:first-child { display: none; } .compare-head > [role="columnheader"] { font-size: .7rem; padding: 10px 12px; } /* Keep the comparison table clipping its sticky child correctly. */ .compare-table { overflow: visible; } } /* LEVELS */ .levels-grid { margin-top: 28px; display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 800px) { .levels-grid { grid-template-columns: repeat(3, 1fr); } } .level { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 26px 24px; position: relative; display: flex; flex-direction: column; } .level-1 { border-top: 4px solid var(--ink-800); } .level-2 { border-top: 4px solid var(--gold-600); } .level-3 { border-top: 4px solid var(--ink-400); } .level-tag { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; } .level h3 { margin-bottom: 4px; } .level-sub { color: var(--ink-600, #4b5563); font-size: .95rem; margin-bottom: 16px; } .level ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .level li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-700); font-size: .95rem; line-height: 1.5; } .level li::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: .35em; /* centers bullet with first line of text */ border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-800); } .level-2 li::before { border-color: var(--gold-600); } .level-3 li::before { border-color: var(--ink-400); } .level ul { margin: 0 0 28px; } .level-example { margin-top: auto; padding: 16px 16px 14px; background: var(--paper-soft); border-left: 3px solid var(--ink-800); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .88rem; line-height: 1.5; color: var(--ink-700); } .level-example > * { display: block; } .level-example-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-800); margin-bottom: 6px; } .level-1 .level-example { border-left-color: var(--ink-800); } .level-2 .level-example { border-left-color: var(--gold-600); } .level-2 .level-example .level-example-label { color: var(--gold-700); } .level-3 .level-example { border-left-color: var(--ink-400); } .level-3 .level-example .level-example-label { color: var(--ink-600); } /* DOWNLOAD */ .download-grid { margin-top: 32px; display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 700px) { .download-grid { grid-template-columns: 1fr 1fr; } } .download-card { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease; } .download-card:hover { box-shadow: var(--shadow); border-color: var(--gold-300); } .download-preview { background: repeating-conic-gradient(var(--paper-soft) 0 25%, var(--paper) 0 50%); background-size: 22px 22px; border-radius: var(--radius-sm); border: 1px solid var(--ink-200); padding: 24px; min-height: 200px; display: flex; align-items: center; justify-content: center; } .download-preview svg, .download-preview img { max-width: 100%; height: auto; max-height: 240px; display: block; } .download-preview img { object-fit: contain; } .download-preview img[data-shape="circle"], .download-preview [data-seal="circle"] img { aspect-ratio: 1; } .download-preview img[data-shape="badge"], .download-preview [data-seal="badge"] img { aspect-ratio: 760 / 280; } .download-meta { display: flex; flex-direction: column; gap: 12px; } .download-meta h3 { margin: 0; } .dl-tag { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: var(--ink-700); background: var(--paper-soft); padding: 3px 8px; border-radius: 6px; } .download-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .download-buttons .btn { padding: 9px 16px; font-size: .88rem; } .dl-size { font-family: var(--font-mono); font-size: .78em; font-weight: 500; opacity: .68; margin-left: 4px; white-space: nowrap; } .usage-note { margin-top: 32px; padding: 16px 18px; background: var(--paper-soft); border: 1px dashed var(--gold-300); border-radius: var(--radius-sm); color: var(--ink-700); font-size: .92rem; } /* VERIFY (independent tools grid) */ .tools-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; } @media (min-width: 700px) { .tools-grid { grid-template-columns: 1fr 1fr; max-width: 880px; margin-left: auto; margin-right: auto; } } .tool-card { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-300); } .tool-card h3 { margin: 0 0 4px; font-size: 1.1rem; } .tool-card .tool-author { color: var(--gold-700); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; } .tool-card .tool-body { color: var(--ink-700); font-size: .94rem; line-height: 1.5; margin: 0 0 18px; flex: 1; } .tool-card .btn { align-self: flex-start; font-size: .88rem; padding: 9px 16px; } /* REQUIREMENTS */ .req-list { list-style: none; padding: 0; margin: 24px 0 32px; counter-reset: req; display: grid; gap: 12px; } .req-list li { counter-increment: req; position: relative; padding: 14px 16px 14px 56px; background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); color: var(--ink-800); } .req-list li::before { content: counter(req, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font-family: var(--font-mono); color: var(--gold-700); font-weight: 700; font-size: .9rem; } .scope-box { background: var(--bg-card); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 24px; margin-top: 12px; } .scope-box h3 { margin-bottom: 16px; } .scope-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 14px; } @media (min-width: 720px) { .scope-grid { grid-template-columns: 1fr 1fr; } } .scope-grid ul { padding-left: 18px; margin: 0; color: var(--ink-700); } .scope-grid li { margin-bottom: 6px; } .scope-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; } .scope-yes { color: var(--gold-700); } .scope-no { color: var(--danger); } /* FOOTER */ .site-footer { border-top: 1px solid var(--ink-200); padding: 32px 0 24px; background: var(--ink-800); color: var(--ink-300); font-size: .92rem; } .site-footer a { color: var(--gold-300); } .site-footer a:hover { color: var(--gold-100); } .footer-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; justify-items: center; text-align: center; } @media (min-width: 800px) { .footer-row { /* Symmetric 1fr | auto | 1fr — the nav (auto) sits at the true viewport centre; brand/meta share the side gutters. */ grid-template-columns: 1fr auto 1fr; text-align: left; } .footer-brand { justify-self: start; } .footer-meta { justify-self: end; text-align: right; } } .footer-brand { display: flex; flex-direction: column; gap: 4px; align-items: center; } @media (min-width: 800px) { .footer-brand { align-items: flex-start; } } .footer-brand strong { color: var(--paper); font-size: 1rem; letter-spacing: .02em; } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .footer-links a { color: var(--ink-200); } .footer-meta { font-family: var(--font-mono); font-size: .85rem; color: var(--gold-300); } .footer-stamp { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: center; } .footer-stamp svg, .footer-stamp img { width: 90px; height: 90px; display: block; } .footer-stamp img { object-fit: contain; } .footer-legal { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); text-align: center; color: var(--ink-300); font-size: .85rem; } .footer-legal .footer-credit { margin: 0 0 6px; color: var(--paper); } .footer-legal .footer-credit strong { color: var(--gold-300); font-weight: 700; } .footer-legal .footer-rights { margin: 8px 0 0; color: var(--ink-400); font-size: .8rem; letter-spacing: .02em; } .footer-legal-links { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 6px 0 0; } .footer-legal-links a, .footer-legal-links .footer-legal-link { color: var(--ink-200); background: transparent; border: 0; padding: 4px 6px; font: inherit; font-size: .82rem; cursor: pointer; border-radius: 4px; text-decoration: none; } .footer-legal-links a:hover, .footer-legal-links .footer-legal-link:hover, .footer-legal-links .footer-legal-link:focus-visible { color: var(--gold-300); background: rgba(255,255,255,.04); outline: 0; } .footer-sep { color: var(--ink-500); user-select: none; } /* Legal modal — wider card with formatted long-text content. The three legal sections (notice, privacy, cookies) reuse a single modal element, so they all share this width. 800 px on PC gives the legal text comfortable line lengths without becoming too long to read. On mobile / narrow viewports the card naturally shrinks to width: calc(100% - 32px) inherited from .dl-modal-card. Selector includes .dl-modal-card so it has higher specificity than the bare .dl-modal-card rule that comes later in the file — without this, the later max-width:420px would win and the legal modal stayed at 420 px regardless of this rule. */ .dl-modal-card.legal-modal-card { max-width: 800px; max-height: calc(100% - 24px); } .legal-modal-body { color: var(--ink-700); font-size: .94rem; line-height: 1.55; } .legal-modal-body p { margin: 0 0 12px; } .legal-modal-body h4 { margin: 18px 0 6px; font-size: .95rem; font-weight: 700; color: var(--ink-900); letter-spacing: .01em; } .legal-modal-body ul, .legal-modal-body ol { margin: 0 0 12px; padding-left: 22px; } .legal-modal-body li { margin-bottom: 6px; } .legal-modal-body a { color: var(--ink-800); text-decoration: underline; text-decoration-color: var(--gold-600); text-underline-offset: 3px; } .legal-modal-body strong { color: var(--ink-900); } .legal-modal-updated { margin: 18px 0 14px; padding-top: 12px; border-top: 1px solid var(--ink-200); font-size: .78rem; font-style: italic; color: var(--ink-500); } /* SELF-CERTIFICATION */ .self-cert-section { background: radial-gradient(900px 400px at 100% 0%, var(--gold-50), transparent 70%), var(--paper); } .self-cert { display: grid; grid-template-columns: 1fr; align-items: center; gap: 36px; } @media (min-width: 800px) { .self-cert { grid-template-columns: 280px 1fr; gap: 56px; } } .self-cert-seal { display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 12px 28px rgba(26, 31, 46, .14)); } .self-cert-seal svg, .self-cert-seal img { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; display: block; } .self-cert-text h2 { margin-bottom: 14px; } .self-cert-text p { color: var(--ink-700); } /* DOWNLOAD MODAL (mobile-friendly fallback that keeps the user in-page) */ .dl-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; } .dl-modal[hidden] { display: none; } .dl-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 18, 32, .58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: dlFade .18s ease; } .dl-modal-card { position: relative; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px 22px 22px; width: calc(100% - 32px); max-width: 420px; max-height: calc(100% - 32px); overflow-y: auto; /* Prevent the page underneath from scrolling once we hit the top/bottom of the modal — without this, mobile Safari/Chrome propagate the scroll gesture to the body once the modal can't scroll any further. */ overscroll-behavior: contain; animation: dlIn .22s ease-out; } .dl-modal-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink-700); display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: background .15s, color .15s; } .dl-modal-close:hover, .dl-modal-close:focus-visible { background: var(--paper-soft); color: var(--ink-900); outline: 0; } .dl-modal-card h3 { margin: 0 36px 14px 0; font-size: 1.1rem; } .dl-modal-preview { display: flex; justify-content: center; align-items: center; padding: 16px; background: repeating-conic-gradient(var(--paper-soft) 0 25%, var(--paper) 0 50%); background-size: 16px 16px; border-radius: var(--radius-sm); border: 1px solid var(--ink-200); margin-bottom: 12px; min-height: 160px; } .dl-modal-preview img, .dl-modal-preview svg { max-width: 100%; max-height: 220px; height: auto; } .dl-modal-filename { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-500); margin: 0 0 12px; text-align: center; word-break: break-all; } .dl-modal-hint { color: var(--ink-700); font-size: .9rem; line-height: 1.5; margin: 0 0 18px; } .dl-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .dl-modal-actions .btn { flex: 1 1 130px; } body.modal-open { overflow: hidden; } /* ─── Changelog modal ──────────────────────────────────────────────── Modal d'actualitzacions, pintat per js/changelog-modal.js. Patró canònic: max-height: 85vh + body scrollable + peu fix amb sticky-bottom perquè el botó "Entesos" sempre sigui accessible. */ .cl-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(11, 18, 32, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: cl-fade-in 0.18s ease-out; } @keyframes cl-fade-in { from { opacity: 0 } to { opacity: 1 } } .cl-modal-card { background: var(--paper, #fbf8f0); color: var(--ink, #0b1220); border-radius: var(--radius, 14px); width: min(540px, 94vw); max-height: 85vh; padding: 1.6rem 1.8rem 1.4rem; overflow-y: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22); position: relative; } .cl-modal-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; position: sticky; top: -1.6rem; background: var(--paper, #fbf8f0); padding-top: 1.6rem; margin-top: -1.6rem; z-index: 1; } .cl-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 999px; background: #1a1f2e; color: #fbf8f0; } .cl-title { font-size: 1.05rem; font-weight: 700; margin: 0; } .cl-modal-body { font-size: 0.92rem; line-height: 1.6; } .cl-entry { margin-bottom: 1rem; } .cl-entry:last-child { margin-bottom: 0; } .cl-meta { font-size: 0.74rem; color: #7a8294; margin-bottom: 0.4rem; } .cl-version { color: #1a1f2e; font-weight: 700; } .cl-items { list-style: disc; padding-left: 1.2rem; margin: 0; } .cl-items li { margin-bottom: 0.25rem; } .cl-items li:last-child { margin-bottom: 0; } .cl-empty { font-style: italic; color: #7a8294; margin: 0; font-size: 0.9rem; } .cl-modal-foot { margin-top: 1.2rem; text-align: right; /* Sticky-bottom: el botó sempre visible amb canvis llargs */ position: sticky; bottom: -1.4rem; padding: 0.7rem 0 1.4rem; margin-bottom: -1.4rem; background: var(--paper, #fbf8f0); } .cl-btn-entesos { font-size: 0.95rem; font-weight: 600; background: #1a1f2e; color: #fbf8f0; border: none; border-radius: 100px; padding: 10px 28px; cursor: pointer; transition: opacity 0.2s; } .cl-btn-entesos:hover { opacity: 0.9; } /* Thanks modal — first-visit appreciation for Catalan browser users. Reuses .dl-modal infrastructure; just narrower and centered. */ .dl-modal-card.thanks-modal-card { max-width: 440px; text-align: center; } .thanks-modal-card h3 { margin: 0 0 14px; font-size: 1.5rem; letter-spacing: -.01em; } .thanks-body { color: var(--ink-700); font-size: 1rem; line-height: 1.55; margin: 0 0 22px; } .thanks-modal-card .dl-modal-actions { justify-content: center; } .btn.thanks-close { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .04em; min-width: 96px; flex: 0 0 auto; } @keyframes dlFade { from { opacity: 0 } to { opacity: 1 } } @keyframes dlIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* TOAST */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink-900); color: white; padding: 12px 18px; border-radius: 999px; font-size: .9rem; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 200; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* SEAL DISPLAY DEFAULTS */ .seal-display svg { width: 100%; height: auto; } /* XKNO cross-link — Xara projects ecosystem badge */ .xkno-link { display: flex; align-items: center; gap: 16px; margin: 28px 0 8px; padding: 14px 18px; border: 1px solid var(--ink-100); border-radius: var(--radius, 10px); background: var(--bg-card, #fff); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .xkno-link:hover { border-color: var(--accent, #6f9ec9); background: var(--bg-soft, #f6f4ee); text-decoration: none; } .xkno-link picture { display: contents; } .xkno-link img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; object-fit: contain; } .xkno-link p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-600, #6b7280); } .xkno-link strong { display: block; color: var(--ink-900, #1a1a1a); font-weight: 700; margin-bottom: 2px; } @media (max-width: 600px) { .xkno-link { padding: 14px 16px; gap: 14px; } .xkno-link img { width: 48px; height: 48px; flex: 0 0 48px; } .xkno-link img { transform: translateX(-16px) scale(0.88); transform-origin: center; } } /* ─── Install CTA ───────────────────────────────────────────────────── Botó persistent + text per instal·lar la PWA. Cablejat per js/install-banner.js via `data-install`. S'amaga si l'app ja és standalone (el script posa hidden al `[data-install-wrap]`). */ .install-cta { padding: 2.2rem 0 1.6rem; text-align: center; background: var(--paper, #fbf8f0); } .install-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .install-cta-btn { font-size: 1.02rem; font-weight: 600; background: var(--danger, #9b2218); color: #fbf8f0; border: none; border-radius: 100px; padding: 12px 28px; cursor: pointer; transition: opacity 0.2s, transform 0.1s; display: inline-flex; align-items: center; gap: 0.4rem; } .install-cta-btn:hover { opacity: 0.92; } .install-cta-btn:active { transform: translateY(1px); } .install-cta-note { font-size: 0.92rem; color: var(--ink-2, #4a5160); margin: 0; max-width: 36rem; } /* Scroll-margin perquè el sticky header no tapi la part superior de cada secció quan l'usuari hi salta des de la nav. */ section[id] { scroll-margin-top: 76px; } /* ─────────────────────────────────────────────────────────────── Hamburger toggle + drawer mobile (patró Real Earth). Sempre visible només a mòbil; a desktop la nav es veu inline. ─────────────────────────────────────────────────────────────── */ .nav-toggle { display: none; width: 40px; height: 40px; margin-left: 4px; border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 8px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .nav-toggle:hover { background: var(--paper-soft); } .nav-toggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; } .nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--ink-800); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) { transform: translateY(-9px) rotate(-45deg); } /* Cog de Configuració dins la nav: a desktop mostrem només l'icona (estalvia espai); a mòbil dropdown mostrem el text. */ .nav-settings { display: inline-flex; align-items: center; gap: 0; padding: 4px 2px !important; } .nav-settings .nav-settings-label { display: none; } .nav-settings .nav-settings-icon { display: inline-block; color: var(--ink-700); } .nav-settings:hover .nav-settings-icon { color: var(--ink-900); } /* Mobile-first: nav amagada per defecte, la mostra el hamburger. A desktop (≥900px) la nav és inline i el hamburger desapareix. */ @media (max-width: 899px) { .header-row { gap: 12px; position: relative; } .lang-switch { margin-left: auto; } .nav-toggle { display: inline-flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); padding: 8px 20px 16px; margin: 0; box-shadow: 0 12px 24px rgba(0, 0, 0, .08); display: none; z-index: 49; } .site-header.is-nav-open .site-nav { display: flex; } .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--ink-100); font-size: 1rem; } .site-nav a:last-child { border-bottom: 0; } /* Al dropdown mòbil mostrem el text «Configuració» i amaguem l'icona. */ .nav-settings { padding: 12px 0 !important; } .nav-settings .nav-settings-label { display: inline; } .nav-settings .nav-settings-icon { display: none; } } /* ─────────────────────────────────────────────────────────────── Secció Configuració: graella de cards (Idioma, Instal·lar). ─────────────────────────────────────────────────────────────── */ .settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr; } } .setting-card { background: var(--bg-card, #fffdf6); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); } .setting-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink-900); margin: 0; } .setting-card p { font-size: .85rem; color: var(--ink-600); margin: 0; } .setting-controls { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; } /* Segmented control reutilitzat per Idioma. */ .seg { display: inline-flex; background: var(--paper-soft); border-radius: 999px; padding: 3px; } .seg-btn { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .82rem; color: var(--ink-600); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .seg-btn:hover { color: var(--ink-800); } .seg-btn.is-active { background: var(--ink-800); color: var(--paper); } /* Botó install dins la card. */ .install-card-btn { font-size: 0.98rem; font-weight: 600; background: var(--ink-800); color: var(--paper); border: none; border-radius: 100px; padding: 11px 26px; cursor: pointer; transition: opacity 0.2s, transform 0.1s; display: inline-flex; align-items: center; gap: 0.4rem; } .install-card-btn:hover { opacity: 0.92; } .install-card-btn:active { transform: translateY(1px); } /* ─────────────────────────────────────────────────────────────── Botó «+» per obrir el popover de més idiomes + popover en si. Replica el patró Real Earth — pop floating sota el trigger. ─────────────────────────────────────────────────────────────── */ .lang-more, .seg-btn-more { font-size: 1rem; font-weight: 700; /* Padding + min-height per WCAG 2.5.5 AAA (44×44) — vegeu .lang-btn. */ padding: 10px 14px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .lang-more[aria-expanded="true"], .seg-btn-more[aria-expanded="true"] { background: var(--ink-800); color: var(--paper); } .lang-popover { position: fixed; z-index: 60; background: var(--bg-card, #fffdf6); border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: 0 16px 32px rgba(0, 0, 0, .12); padding: 12px; width: 280px; max-height: min(420px, 80vh); overflow-y: auto; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .lang-popover.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-popover[hidden] { display: none; } .lang-popover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lang-popover-item { border: 1px solid transparent; background: transparent; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: inherit; font-size: .9rem; color: var(--ink-800); transition: background .12s, border-color .12s; } .lang-popover-item:hover { background: var(--paper-soft); border-color: var(--ink-100); } .lang-popover-item.is-active { background: var(--ink-800); color: var(--paper); border-color: var(--ink-800); } .lang-popover-native { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lang-popover-code { font-size: .68rem; font-weight: 700; letter-spacing: .04em; opacity: .65; } .lang-popover-item.is-active .lang-popover-code { opacity: .85; } @media (max-width: 600px) { .lang-popover-grid { grid-template-columns: 1fr; } .lang-popover { width: min(280px, 90vw); } } /* RTL — només els camps de text dirigits al script àrab/urdú han de canviar d'orientació; mantenim el layout cromàtic intacte. */ html[dir="rtl"] body { text-align: right; } html[dir="rtl"] .lang-popover-item { direction: rtl; } /* Tira "Available in …" al peu — tots els idiomes pel nom natiu, clicables */ .langs-strip { margin: 2px 0 18px; padding: 16px 12px 0; border-top: 1px dashed var(--ink-200); text-align: center; font-size: .84rem; color: var(--ink-600); line-height: 1.95; } .langs-strip-label { font-weight: 700; color: var(--ink-800); margin-right: 8px; } .langs-strip-item { background: transparent; border: 0; padding: 0 2px; margin: 0; font: inherit; color: var(--ink-600); cursor: pointer; border-bottom: 1px solid transparent; transition: color .12s ease, border-color .12s ease; } .langs-strip-item:hover { color: var(--gold-700); border-bottom-color: var(--gold-600); } .langs-strip-item.is-active { color: var(--ink-900); font-weight: 700; } .langs-strip-sep { color: var(--ink-300); user-select: none; } /* Tria d'idioma a la 1a visita (navegador en llengua no suportada) */ .langpick-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(14,18,32,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .langpick-overlay[hidden] { display: none; } .langpick-box { background: var(--bg-card); color: var(--ink-900); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 26px 22px; } .lang-pick-head { text-align: center; margin-bottom: 1.1rem; } .lang-pick-head h2 { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--ink-900); } .lang-pick-head .multi-script { font-size: .9rem; color: var(--ink-500); line-height: 1.7; direction: ltr; } .lang-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 1rem 0; } .lang-pick-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--ink-100); border-radius: 10px; background: var(--paper-soft); color: var(--ink-900); cursor: pointer; transition: border-color .15s ease, background .15s ease; min-height: 64px; } .lang-pick-grid button:hover { border-color: var(--gold-600); background: var(--gold-50); } .lang-pick-grid .lpg-native { font-size: 1.05rem; font-weight: 600; } .lang-pick-grid .lpg-code { font-size: .7rem; color: var(--ink-500); letter-spacing: .06em; text-transform: uppercase; } .lang-pick-skip { display: block; margin: .5rem auto 0; background: none; border: 0; color: var(--ink-600); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lang-pick-skip:hover { color: var(--ink-900); } html[dir="rtl"] .lang-pick-grid button { direction: rtl; }