@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap'); /* Theme system — Correndo Com Você Three modes, set via [data-theme] on : - light : default palette, brand color #DA6910 - dark : dark surfaces, same brand hue lightened for contrast - high-contrast : low-vision mode, #FDC300 on black, max contrast + bigger focus rings Persisted to localStorage by assets/js/theme-toggle.js */ /* ---------- Dark mode ---------- */ html[data-theme="dark"] { --color-bg: #17120C; --color-surface: #241C13; --color-primary: #E88A3D; --color-primary-dark: #C46A22; --color-primary-light: #F2A65A; --color-on-primary: #17120C; --color-on-banner: #17120C; --color-text: #F5EBDC; --color-text-muted: #C9B79E; --color-border: #4A3B2A; --color-link: #F2A65A; --color-focus: #7CC4FF; --header-grad-1: #C46A22; --header-grad-2: #8A4413; --nav-current-bg: #E88A3D; --nav-current-text: #17120C; --nav-hover-bg: #F2A65A; --titlebar-bg: #8A4413; --navpanel-bg: #0F0B07; --navpanel-text: #F5EBDC; } /* ---------- High contrast / low vision mode ---------- */ html[data-theme="high-contrast"] { --color-bg: #FDC300; --color-surface: #FDC300; --color-primary: #000000; --color-primary-dark: #1A1A1A; --color-primary-light: #333333; --color-on-primary: #FFFFFF; --color-on-banner: #FFFFFF; --color-text: #000000; --color-text-muted: #000000; --color-border: #000000; --color-link: #000000; --color-focus: #000000; --header-grad-1: #000000; --header-grad-2: #000000; --nav-current-bg: #FDC300; --nav-current-text: #000000; --nav-hover-bg: #333333; --titlebar-bg: #000000; --navpanel-bg: #000000; --navpanel-text: #FFFFFF; } html[data-theme="high-contrast"] body { font-size: 18pt; } html[data-theme="high-contrast"] a { text-decoration: underline; text-decoration-thickness: 2px; } html[data-theme="high-contrast"] a:focus-visible, html[data-theme="high-contrast"] button:focus-visible, html[data-theme="high-contrast"] [tabindex]:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; } html[data-theme="high-contrast"] #header, html[data-theme="high-contrast"] .button, html[data-theme="high-contrast"] .involve-card, html[data-theme="high-contrast"] .practical-info, html[data-theme="high-contrast"] .video-section, html[data-theme="high-contrast"] .gallery-item, html[data-theme="high-contrast"] .about-project .about-photo, html[data-theme="high-contrast"] #mode-toggle { border: solid 2px #000000; } html[data-theme="high-contrast"] img { filter: contrast(1.05); } html[data-theme="high-contrast"] .ig-preview { background: #000000; border: solid 2px #000000; } html[data-theme="high-contrast"] #banner { background-image: none; border: solid 2px #000000; } /* ---------- Skip link ---------- */ .skip-link { position: fixed; top: -60px; left: 16px; z-index: 10004; background-color: var(--color-surface); color: var(--color-text); border: solid 2px var(--color-primary); border-radius: 6px; padding: 10px 16px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 16px; } /* ---------- Mode toggle control ---------- A single fixed-position pill, deliberately placed outside #page-wrapper in the markup so it's never affected by the nav panel's slide transform and stays reachable at every breakpoint. */ #mode-toggle { position: fixed; top: 130px; right: 16px; z-index: 10003; display: inline-flex; align-items: center; gap: 0.5em; background-color: var(--color-surface); color: var(--color-text); border: solid 2px var(--color-primary); border-radius: 999px; padding: 10px 18px; font-family: inherit; font-size: 0.85em; text-transform: lowercase; cursor: pointer; line-height: 1.4; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25); } #mode-toggle:hover { background-color: var(--color-primary); color: var(--color-on-primary); } #mode-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } #mode-toggle .mode-toggle-icon { font-size: 1.1em; line-height: 1; } @media screen and (max-width: 1280px) { #mode-toggle { top: 116px; } } /* Header collapses into the titleBar/hamburger menu below 980px, so the toggle can sit higher, just under the title bar. */ @media screen and (max-width: 980px) { #mode-toggle { top: 54px; } } @media screen and (max-width: 736px) { #mode-toggle { top: auto; bottom: 16px; } #mode-toggle .mode-toggle-label { display: none; } } /* ---------- Instagram link ---------- */ .social-links { text-align: center; margin: 2em 0 0 0; } .social-links a { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--color-text); border: solid 2px var(--color-primary); border-radius: 8px; padding: 10px 18px; transition: background-color 0.15s ease, color 0.15s ease; } .social-links a:hover, .social-links a:focus-visible { background-color: var(--color-primary); color: var(--color-on-primary); } .social-links svg { width: 1.3em; height: 1.3em; fill: currentColor; flex-shrink: 0; } .video-section { margin-top: 1em; padding: 1.75em; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; } .video-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ margin-top: 1em; border-radius: 8px; overflow: hidden; background-color: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .consent-note { font-size: 0.85em; color: var(--color-text-muted); } /* ---------- Gallery highlights (homepage) ---------- */ .highlight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 1.5em 0; } .highlight-photo { display: block; border-radius: 10px; overflow: hidden; border: solid 1px var(--color-border); line-height: 0; } .highlight-photo img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform 0.2s ease; } .highlight-photo:hover img, .highlight-photo:focus-visible img { transform: scale(1.05); } .highlight-photo:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; } /* ---------- Founders page ---------- */ .founder-profile { display: flex; gap: 1.5em; align-items: flex-start; margin-top: 1.5em; padding: 1.5em; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; } .founder-avatar img { width: 90px; height: 90px; border-radius: 50%; flex-shrink: 0; } .founder-bio h3 { margin-bottom: 0.15em; } .founder-role { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); font-weight: bold; margin-bottom: 0.6em; } .partner-box { padding: 1.5em; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; margin-bottom: 1.5em; } @media screen and (max-width: 480px) { .founder-profile { flex-direction: column; align-items: center; text-align: center; } } .ig-embed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 1.5em 0; } .ig-embed-grid iframe { margin: 0 auto !important; } /* ---------- Instagram preview card ---------- */ .ig-preview { margin-top: 1.5em; padding: 1.75em; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); border-radius: 10px; color: var(--color-on-primary); } .ig-preview-header { display: flex; align-items: center; gap: 0.75em; margin-bottom: 1em; } .ig-preview-header svg { width: 2.2em; height: 2.2em; flex-shrink: 0; } .ig-preview-handle { font-weight: bold; font-size: 1.1em; margin: 0; } .ig-preview-sub { font-size: 0.85em; opacity: 0.85; margin: 0; } .ig-preview p { color: var(--color-on-primary); } .ig-preview-link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.5em; padding: 12px 20px; background-color: var(--color-surface); color: var(--color-text); border-radius: 999px; text-decoration: none; font-weight: bold; } .ig-preview-link:hover, .ig-preview-link:focus-visible { text-decoration: none; transform: translateX(2px); } .ig-preview-link svg { width: 1.1em; height: 1.1em; stroke: currentColor; } /* ---------- Get Involved page ---------- */ .involve-card { height: 100%; padding: 1.75em; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); } .check-list { list-style: none; margin: 1em 0 1.5em 0; padding: 0; } .check-list li { position: relative; padding: 0.4em 0 0.4em 1.8em; line-height: 1.5; } .check-list li::before { content: '\2713'; position: absolute; left: 0; top: 0.4em; color: var(--color-primary); font-weight: bold; } .practical-info { margin-top: 1em; padding: 1.75em; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25em; margin: 1em 0 1.5em 0; } .info-item { display: flex; flex-direction: column; gap: 0.25em; } .info-label { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .info-value { font-size: 1.1em; color: var(--color-text); } /* ---------- Photo gallery ---------- */ .photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 1.5em; } .gallery-item { margin: 0; background-color: var(--color-surface); border: solid 1px var(--color-border); border-radius: 10px; overflow: hidden; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); } .gallery-trigger { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; } .gallery-trigger img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.2s ease; } .gallery-trigger:hover img, .gallery-trigger:focus-visible img { transform: scale(1.04); } .gallery-trigger:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; } .gallery-item figcaption { padding: 12px 14px; font-size: 0.85em; color: var(--color-text-muted); line-height: 1.4; } /* Lightbox overlay */ #gallery-lightbox { position: fixed; inset: 0; z-index: 10005; background-color: rgba(0, 0, 0, 0.88); display: none; align-items: center; justify-content: center; padding: 40px 20px; } #gallery-lightbox.is-open { display: flex; } #gallery-lightbox figure { max-width: 90vw; max-height: 85vh; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } #gallery-lightbox img { max-width: 90vw; max-height: 70vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.5); } #gallery-lightbox figcaption { color: #FFFFFF; text-align: center; font-size: 1em; max-width: 60ch; } #gallery-lightbox-close { position: absolute; top: 20px; right: 20px; background-color: rgba(255, 255, 255, 0.1); color: #FFFFFF; border: solid 2px #FFFFFF; border-radius: 999px; width: 44px; height: 44px; font-size: 1.3em; line-height: 1; cursor: pointer; } #gallery-lightbox-close:hover, #gallery-lightbox-close:focus-visible { background-color: rgba(255, 255, 255, 0.25); } #gallery-lightbox-close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* ---------- Brand name ---------- */ .brand-name { text-transform: none; } /* ---------- Logo mark ---------- */ #logo-mark { height: 90px; width: auto; vertical-align: middle; margin-right: 14px; } #titleBar .title #logo-mark { height: 28px; margin-right: 6px; vertical-align: -8px; } @media screen and (max-width: 1280px) { #logo-mark { height: 70px; } } /* ---------- About project section ---------- */ .about-project { margin-top: 3em; padding-top: 3em; border-top: solid 1px var(--color-border); } .about-project .about-photo { width: 100%; height: auto; border-radius: 10px; border: solid 1px var(--color-border); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15); } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }