/* === Theme tokens === * Default = dark theme. Toggle to light by adding `.light-theme` to or * . nav.js stores user preference in localStorage and respects * (prefers-color-scheme: light) on first visit. * * Earlier the dark-theme :root rules used self-referencing values like * `--bg: var(--bg)` which collapsed to invalid; concrete colors restored. */ :root{ --bg:#0b0d12; --card:#11151c; --text:#e7eaf2; --muted:#9aa3b2; --line:rgba(255,255,255,.12); --accent:#7c5cff; --accent2:#00d4ff; --accent-dim:rgba(124,92,255,.18); --grad1:rgba(124,92,255,.35);--grad2:rgba(0,212,255,.18);--topbar-bg:rgba(11,13,18,.7); --btn-bg:rgba(255,255,255,.04);--tile-bg:rgba(255,255,255,.03);--input-bg:rgba(0,0,0,.2); --pill-bg:rgba(255,255,255,.06);--pill-border:rgba(255,255,255,.14); --r:14px; --font-family-ui:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --font-size-base:16px; --font-size-hero-title:34px; --space-wrap-x:18px; --space-card-pad:14px; --space-grid-gap:12px; --space-hero-top:24px; --space-hero-bottom:10px; --grid-min:240px;--grid-max:340px;--grid-panel-min:260px;--grid-panel-max:340px;--grid-img-min:240px;--grid-img-max:330px;--grid-campaign-min:260px;--grid-campaign-max:360px; --grid-gap:var(--space-grid-gap); --tile-pad-y:10px;--tile-pad-x:14px; --devices-cards-columns:2; --devices-cards-columns-xs:1; --devices-cards-gap:var(--space-grid-gap); --device-browser-side-width:320px; --device-browser-gap:14px; } :root.light-theme, .light-theme { --bg:#ffffff; --card:#f4f7fa; --text:#111827; --muted:#4b5563; --line:rgba(0,0,0,.08); --accent:#5b3de8; --accent2:#00a3cc; --accent-dim:rgba(91,61,232,.10); --grad1:rgba(124,92,255,.12);--grad2:rgba(0,212,255,.08);--topbar-bg:rgba(255,255,255,.8); --btn-bg:rgba(0,0,0,.04);--tile-bg:rgba(0,0,0,.02);--input-bg:#ffffff; --pill-bg:rgba(0,0,0,.05);--pill-border:rgba(0,0,0,.1); } /* First-visit auto-pick by OS preference (until user clicks the toggle). */ @media (prefers-color-scheme: light) { :root:not(.dark-theme):not(.light-theme) { --bg:#ffffff;--card:#f4f7fa;--text:#111827;--muted:#4b5563;--line:rgba(0,0,0,.08); --accent:#5b3de8;--accent2:#00a3cc;--accent-dim:rgba(91,61,232,.10); --grad1:rgba(124,92,255,.12);--grad2:rgba(0,212,255,.08);--topbar-bg:rgba(255,255,255,.8); --btn-bg:rgba(0,0,0,.04);--tile-bg:rgba(0,0,0,.02);--input-bg:#ffffff; --pill-bg:rgba(0,0,0,.05);--pill-border:rgba(0,0,0,.1); } } .scrollToTop { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translateY(20px); z-index: 900; } .scrollToTop.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scrollToTop:hover { background: var(--accent2); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font-family-ui);font-size:var(--font-size-base);background:radial-gradient(900px 500px at 20% -10%,var(--grad1),transparent 60%),radial-gradient(600px 400px at 90% 0%,var(--grad2),transparent 55%),var(--bg);color:var(--text);line-height:1.45} a{color:inherit;text-decoration:none} .wrap{max-width:1100px;margin:0 auto;padding:0 var(--space-wrap-x)} .topbar{position:sticky;top:0;backdrop-filter:blur(10px);background:var(--topbar-bg);border-bottom:1px solid var(--line);z-index:1000;display:flex;align-items:center;transition:transform .2s ease,opacity .2s ease} .topbar.topbar--hidden{transform:translateY(-100%);opacity:0;pointer-events:none} .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px} .logo{font-weight:900;letter-spacing:.2px} .nav{display:flex;flex-wrap:wrap;gap:12px;opacity:.9} .langSelect{max-width:120px;min-width:90px;width:auto;flex:0 0 auto} .input.langSelect{width:110px;max-width:110px;min-width:0;flex:0 0 110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .nav a:hover{opacity:1} .featuredGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-panel-min)), var(--grid-panel-max))); gap: var(--grid-gap); } .featuredSection { background: linear-gradient(135deg, var(--grad1), transparent), var(--card); border: 1px solid var(--accent); } .homeHero { padding: var(--space-hero-top) 0 var(--space-hero-bottom); } .hero h1{margin:0 0 6px;font-size:var(--font-size-hero-title)} .muted{color:var(--muted)} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .row > *{min-width:0} .row--top{align-items:flex-start} .row--align-end{align-items:flex-end} .row--between{justify-content:space-between} .row--end{justify-content:flex-end} .row--nowrap{flex-wrap:nowrap} .row--gap-8{gap:8px} .row--gap-12{gap:12px} .plainFiltersRow{display:flex;gap:10px;flex-wrap:wrap;align-items:end} .plainFiltersRow .fieldSearch{flex:2;min-width:min(240px,100%)} .plainFiltersRow .fieldSelect{min-width:min(200px,100%)} .plainFiltersRow .fieldSelectWide{min-width:min(220px,100%)} .plainFiltersRow .fieldPer{min-width:min(140px,100%)} .plainFiltersRow .fieldAction{min-width:min(120px,100%);flex:0} .plainFormRow{display:flex;gap:10px;flex-wrap:wrap;align-items:end} .plainFormRow .fieldCode{flex:2;min-width:min(220px,100%)} .plainFormRow .fieldAction{flex:0;min-width:min(160px,100%)} .plainFormRow .fieldActionSmall{flex:0;min-width:min(140px,100%)} .plainBundleRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:end;margin:10px 0} .plainBundleRow .bundleInfo{flex:2;min-width:min(260px,100%)} .plainBundleRow .bundleForm{flex:3;min-width:min(320px,100%)} .plainPagerRow{display:flex;justify-content:center;margin-top:10px;gap:10px;flex-wrap:wrap;align-items:center} .pageSectionHead, .homeSection .sectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } .pageSectionHead > *, .homeSection .sectionHead > *, .pageActionRow > *{min-width:0} .pageSectionHead h1, .pageSectionHead h2, .pageSectionHead .title, .homeSection .sectionHead h2{margin:0} .pageSectionHeadStart{align-items:flex-start} .pageSectionText{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 280px} .pageActionRow{ display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap; } .centerActionRow{justify-content:center;margin-top:10px} .sectionSummary{margin-top:8px} .sectionSummary[hidden]{display:none!important} .sectionBody{margin-top:10px} .devicePanelIntro{margin:6px 0 0} .devicePanelIntroSub{margin-top:4px} .deviceTagRow{margin-top:10px} .deviceVideoWrap{margin-top:14px} .deviceVideoHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .deviceVideoLabel{margin-bottom:6px} .deviceVideoActions{margin-left:auto;gap:8px} .deviceVideoTile{padding:0;overflow:hidden} .deviceVideoFrame{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block} .deviceNavToolbar{gap:8px} .deviceNavToolbar #deviceNavSearch{min-width:0;flex:1} .compareBar{margin:8px 0} .emptyState{ margin-top:12px; padding:10px 12px; border:1px dashed rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.03); line-height:1.4; } .emptyState.compact{margin-top:10px;padding:9px 11px} .emptyState[hidden]{display:none!important} .emptyState .btn{margin-top:8px} .gsi-only #device{display:none!important} .gsi-only a[href="#gsi"],.gsi-only a[href="gsi.html"]{display:none!important} .btn{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--btn-bg);display:inline-flex;align-items:center;gap:8px;justify-content:center} .btn{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis} .btn.primary{border:0;background:linear-gradient(135deg,rgba(124,92,255,.95),rgba(0,212,255,.55))} .btn:hover{transform:translateY(-1px)} a:focus-visible,.btn:focus-visible,.input:focus-visible,.select:focus-visible,button:focus-visible{outline:2px solid rgba(124,92,255,.65);outline-offset:2px} .card{margin:16px 0;padding:var(--space-card-pad);border:1px solid var(--line);border-radius:var(--r);background:var(--card)} .card h2,.card h3{margin:0 0 10px} .card > *:first-child{margin-top:0} .card > *:last-child{margin-bottom:0} .input,.select{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--input-bg);color:var(--text);min-width:220px;flex:1;width:100%;max-width:100%} /* When inputs/selects are wrapped in a non-flex
inside a .row, make them expand to the wrapper width. */ .row > div > .input,.row > div > .select{width:100%} .select{flex:0;min-width:180px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-min)),var(--grid-max)));gap:var(--grid-gap);margin-top:12px;align-content:start;align-items:start;grid-auto-rows:max-content;justify-content:start} /* Devices listing page: keep deterministic 2-column cards by default. */ #deviceCards.grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--devices-cards-gap); } @media (max-width: 480px) { #deviceCards.grid{grid-template-columns:1fr !important} } mark { background: var(--accent); color: #fff; padding: 0 2px; border-radius: 2px; } :root.light-theme mark { background: var(--accent2); } #deviceAdminLinks { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; } .adminToolsHead { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; padding: 0 4px; } .adminToolsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .adminToolBtn { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 13px; justify-content: center; } .adminToolBtn .icon { font-size: 16px; } #deviceNavTreeEmpty { padding: 2rem 1rem; text-align: center; } .navLoader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; min-height: 150px; } .spinner { width: 36px; height: 36px; border: 4px solid rgba(255,255,255,.1); border-left-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--card); color: var(--text); padding: 10px 20px; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 4px 15px rgba(0,0,0,0.4); z-index: 2000; opacity: 0; transition: all 0.3s ease; pointer-events: none; } body .toast { opacity: 1; transform: translateX(-50%) translateY(0); } .tile {border:1px solid var(--line);border-radius:12px;padding:var(--tile-pad-y) var(--tile-pad-x);background:var(--tile-bg);position:relative; transition: transform 0.2s ease, border-color 0.2s ease;} .tile:hover { transform: translateY(-2px); border-color: var(--accent); } /* Non-interactive form/status tiles in the donate detail shouldn't lift on hover. */ .donateDetail .tile:hover { transform: none; border-color: var(--line); } .tile,.title,.kv b{overflow-wrap:anywhere;word-break:break-word} .tile h3{margin:0 0 6px;font-size:16px} .tileHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .tileHead h3{margin:0;font-size:16px} .tileMeta{font-size:12px;color:var(--muted);white-space:nowrap} .kv{ display:flex; gap:8px; align-items:baseline; font-size:13px; color:var(--muted); min-width:0; } .kv > *{min-width:0} .kv span{ flex:0 0 auto; min-width:64px; overflow-wrap:anywhere; word-break:break-word; } .kv span::after{ content:':'; margin-left:1px; } .kv b{ color:var(--text); font-weight:650; flex:1; text-align:left; overflow-wrap:anywhere; word-break:break-word; } /* Home device/GSI cards: keep KV labels from expanding rows excessively. */ #deviceList .kv, #gsiList .kv{align-items:start} #deviceList .kv span, #gsiList .kv span{min-width:52px} #deviceList .deviceBuildLine b, #gsiList .gsiFile{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Prevent long hashes from breaking the layout */ .hashBtn{ border:0; background:transparent; color:var(--text); font-weight:650; padding:0; margin:0; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; cursor:pointer; } .hashBtn:hover{opacity:.9;text-decoration:underline} .toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:rgba(11,13,18,.95); border:1px solid var(--line); border-radius:14px; padding:10px 12px; color:var(--text); z-index:999; font-size:13px; } .small{font-size:13px;color:var(--muted)} .m-0{margin:0} .mt-0{margin-top:0} .mt-4{margin-top:4px} .mt-6{margin-top:6px} .mt-8{margin-top:8px} .mt-10{margin-top:10px} .mt-12{margin-top:12px} .mt-14{margin-top:14px} .mb-6{margin-bottom:6px} .mb-8{margin-bottom:8px} .mb-10{margin-bottom:10px} .mb-12{margin-bottom:12px} .footer{padding:18px 0 30px} @media (max-width: 860px){.nav{display:none}} @media (max-width: 560px){.grid{grid-template-columns:1fr}.hero h1{font-size:28px}} /* Mobile: topbar support buttons should not squeeze into tiny columns */ @media (max-width: 560px){ .topbar-inner{flex-wrap:wrap} #supportLinksTop{justify-content:flex-start!important;width:100%} #supportLinks{justify-content:flex-start} } .title{font-weight:800;margin-bottom:8px} /* Home page layout */ .homeHero{ background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.8)), url("https://images.unsplash.com/photo-1628126235206-5260b9ea6441?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80") center/cover no-repeat; color:#fff; padding:4rem 2rem; border-radius:12px; margin-top:1rem; } .homeHero .muted{color:#ddd} .homeHeroGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:38px;align-items:stretch} .homeHeroLead{display:flex;flex-direction:column;gap:12px;justify-content:center} .homeHeroActions{margin-top:4px;gap:10px;flex-wrap:wrap} .homeHeroBadges{gap:8px;margin-top:2px} .homeHeroCard{border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:1.5rem;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:center;color:#fff} .homeHeroCard .muted{color:#ddd} .homeHeroSteps{display:grid;gap:10px;margin-top:12px} .homeHeroStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:12px} .homeStat{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;background:rgba(10,14,22,.35)} .homeStatValue{font-size:18px;font-weight:700} .homeStatLabel{font-size:12px;color:var(--muted)} .homeColumns{display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:28px;align-items:start} .homeColumn{display:flex;flex-direction:column;gap:18px;min-width:0} .homeColumns .homeSection{margin:0; min-width:0;} .sectionTitle{display:flex;flex-direction:column;gap:4px;min-width:0} .sectionActions{display:flex;align-items:center;gap:8px} .featureSection{padding:2rem} .featureGrid{ display: flex; flex-wrap: wrap; gap: 38px; align-items: stretch; } .featureGrid > * { flex: 1 1 calc(33.333% - 38px); min-width: 280px; } .homeFilters{gap:10px;align-items:center} .homeFilters .input{flex:1 1 220px} .homeFilters .select{flex:0 0 200px} /* Update .homeList */ .homeList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; align-items: start; } .homeList.is-loading{min-height:180px} /* Update .homeList .tile */ .homeList .tile { padding: 16px; height: 100%; width: 100%; min-width: 0; flex: none; } /* Home device builds: keep a strict two-cards-per-row layout. */ #deviceList{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; } /* Mobile responsiveness (Google Husky fix) */ @media (max-width: 720px) { .homeList { grid-template-columns: 1fr; gap: 12px; } #deviceList{ grid-template-columns:1fr; } } /* Find and update .homeList .deviceCard */ #deviceList .deviceCard { padding: 18px !important; gap: 16px !important; grid-template-columns: 112px minmax(0, 1fr) !important; transition: transform 0.2s, box-shadow 0.2s; background: var(--card); border-radius: 16px; border: 1px solid var(--line); min-height: 100%; } #deviceList .deviceCard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } @media (max-width: 480px) { #deviceList .deviceCard { grid-template-columns: 1fr !important; text-align: center; } #deviceList .deviceMeta { align-items: center; } #deviceList .deviceCardActions { justify-content: center; } } /* Find and update .homeList .deviceThumb */ #deviceList .deviceThumb { width: 112px !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; background: rgba(255,255,255,0.03); } #deviceList .deviceThumb img{width:100%;height:100%;object-fit:cover;display:block} #deviceList .deviceThumbPlaceholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.02em} .device-img-placeholder{ width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:1rem; background:#f0f0f0 url("https://images.unsplash.com/photo-1598327105666-5b89351cb315?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80") center/cover no-repeat; } .homeList .deviceMeta, .homeList .gsiMeta{min-width:0;display:flex;flex-direction:column;gap:8px;align-content:start} /* Hierarchy & Typography */ #deviceList .deviceCardTitle { font-size: 18px !important; font-weight: 800 !important; margin-bottom: 8px; } .homeList .gsiTitle{text-align:left;width:100%;line-height:1.3;margin:0} #deviceList .deviceMeta .kv { font-size: 14px !important; margin-bottom: 6px; display: grid; grid-template-columns: 80px 1fr; gap: 8px; } .homeList .gsiMeta .kv{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:6px;align-items:start} #deviceList .deviceMeta .kv span { font-weight: 600 !important; color: var(--muted); } /* The Build Highlight Line */ #deviceList .deviceBuildLine { background: var(--accent-dim); padding: 8px 12px; border-radius: 10px; margin: 10px 0; border: 1px solid rgba(124, 92, 255, 0.1); } .homeList .deviceMeta .kv b, .homeList .gsiMeta .kv b{text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:break-word} .homeList .deviceCardActions, .homeList .gsiCardActions{margin-top:auto;padding-top:4px;justify-content:flex-start;align-items:center} .homeList .gsiCard{height:auto;display:grid;gap:8px;align-content:start} .homeList .gsiTitle{white-space:normal;overflow-wrap:anywhere;word-break:break-word} .homeList .gsiFile{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; max-width:100%; } .homeList .row{flex-wrap:wrap} .homeHasStats .homeHeroBadges [data-i18n="home_badge_devices"]{display:none} @media (max-width: 920px){ .homeHeroGrid{grid-template-columns:1fr} .homeColumns{grid-template-columns:1fr} } @media (max-width: 560px){ #deviceList .deviceCard{grid-template-columns:90px 1fr !important;gap:12px !important} #deviceList .deviceThumb{width:90px !important} .homeHeroStats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))} .homeFilters{flex-direction:column;align-items:stretch} .homeFilters .select{flex:1 1 auto;width:100%} } /* Skeleton loaders */ .skeletonCard{position:relative;overflow:hidden} .skeletonBlock{position:relative;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden} .skeletonLine{position:relative;height:12px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden} .skeletonLine.sm{height:10px} .skeletonLine.lg{height:14px} .skeletonPad{padding:6px 0} .skeletonCard:after, .skeletonBlock:after, .skeletonLine:after{ content:""; position:absolute; top:0;left:-120%; width:120%; height:100%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0)); animation:skeleton-shimmer 1.6s infinite; } @keyframes skeleton-shimmer{ 0%{left:-120%} 100%{left:120%} } @media (prefers-reduced-motion: reduce){ .skeletonCard:after, .skeletonBlock:after, .skeletonLine:after{animation:none} } /* Devices page hero */ .devicesHeroGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:start} .devicesHeroGrid.devicesHeroGrid--single{grid-template-columns:minmax(0,1fr)} .devicesHeroLead,.devicesHeroSide{min-width:0} .devicesHeroSide[hidden]{display:none!important} .devicesHeroControls[hidden]{display:none!important} .devicesHeroCard{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)} .devicesHeroSearchRow, .devicesHeroFilters{margin-top:10px} .compareBar .pageActionRow{margin-left:auto} @media (max-width: 920px){ .devicesHeroGrid{grid-template-columns:1fr} } /* Mobile navigation toggle */ .navToggle{display:none;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--btn-bg);cursor:pointer;color:var(--text)} @media (max-width: 560px){ .navToggle{display:inline-flex} .topbar-inner{position:relative} .nav{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;gap:8px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;margin:0 18px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,0.2)} .nav.open{display:flex} } /* Small screens: phones */ @media (max-width: 480px){ .wrap{padding:0 12px} .hero{padding:18px 0 8px} .hero h1{font-size:24px} .btn{padding:9px 10px} .input,.select{min-width:0;padding:9px 10px} .tile h3{font-size:15px} .devicesHeroCard{padding:10px} } /* Ultra-compact (watch / very small) */ @media (max-width: 360px){ body{font-size:14px} .topbar-inner{gap:8px} .btn{padding:8px 9px;font-size:12px} .chip,.chipBtn{font-size:12px} .card{padding:12px} .devicePhotoFrame{aspect-ratio:1/1} } #deviceHeader .deviceImg{height:auto;max-height:220px;object-fit:contain} #deviceName{overflow-wrap:anywhere;word-break:break-word} @media (max-width: 560px){#deviceHeader .deviceImg{max-height:180px}} /* Device page layout */ .split{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start} .split > *{min-width:0} .split.split--single{grid-template-columns:minmax(0,1fr)} .deviceHeaderSplit{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start} .deviceHeaderSplit > div{min-width:0} .deviceHeaderActions{gap:8px;flex-wrap:wrap;margin-top:12px} .compatToggle{margin:0} .devicePanel{min-width:0} .devicePanel .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-panel-min)),var(--grid-panel-max)));gap:var(--grid-gap);align-items:start;justify-content:start;align-content:start} .devicePanel .tile{height:auto} .imgGroup .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-img-min)),var(--grid-img-max)));justify-content:start;align-content:start} .imgTileMedia{height:160px} .bundleCard{background:rgba(255,255,255,.03)} #device .devicePanel .tile{ padding:10px 14px; } #device .bundleRow{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } #device .bundleSide{ min-width:132px; } #device .bundleItemActions{ min-width:132px; } @media (max-width: 720px){ .split, .deviceHeaderSplit, .deviceBrowserGrid{grid-template-columns:1fr} .devicePanel .grid, .imgGroup .grid{grid-template-columns:1fr} } /* Device card media */ /* Device cards (devices page) */ .deviceCard{display:flex;flex-direction:column;gap:8px;height:auto;position:relative} .deviceCardMedia{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center} .deviceCardImg{width:100%;height:100%;object-fit:cover;display:block} .deviceCardPlaceholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.02em} .cmpBadge{position:absolute;top:10px;right:10px;display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card)} /* Home page device + GSI grids: allow cards to shrink to content. */ #deviceList.grid, #gsiList.grid{ align-items:start; align-content:start; grid-auto-rows:max-content; } #deviceList .tile, #gsiList .tile{ height:auto; min-height:0; align-self:start; } #deviceList .deviceCard{align-items:flex-start;min-height:0} #deviceList .deviceCardTitle{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; } #deviceList .deviceBuildLine b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Device header photo frame */ .devicePhotoFrame{aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);width:100%;max-width:100%;display:flex;align-items:center;justify-content:center;padding:10px} .devicePhoto{width:100%;height:100%;max-width:100%;object-fit:contain;display:block} @media (max-width: 560px){ .devicePhotoFrame{aspect-ratio:16/9} } /* Devices browser */ .stack{display:flex;flex-direction:column;gap:8px} .stack--gap-10{gap:10px} .stack--gap-12{gap:12px} .deviceBrowserFacet{display:grid;gap:10px} .deviceBrowserSectionHead{margin-top:14px} .deviceBrowserContent{min-width:0} .brandItem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px;color:var(--text);cursor:pointer} .brandItem:hover{opacity:.95} .brandItem.active{border-color:rgba(124,92,255,.65);background:rgba(124,92,255,.14)} /* Per-device: file-explorer style navigation */ .deviceBrowserGrid{display:grid;grid-template-columns:var(--device-browser-side-width) 1fr;gap:var(--device-browser-gap);align-items:start} .deviceBrowserSide{position:sticky;top:74px;max-height:calc(100vh - 92px);overflow:auto} .deviceBrowserMain{min-width:0} .deviceQuickNavCard{position:sticky;top:74px;z-index:20} .deviceQuickNavRow{gap:8px;flex-wrap:wrap} .deviceDownloadsTools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;margin:8px 0 10px} .deviceDownloadsTools[hidden]{display:none!important} .deviceDownloadsTools .actionRowWrap{width:100%} .deviceDownloadsTools .pageActionRow{margin-left:0} .deviceNavTree{margin-top:10px} .deviceNavTree .navChildren { border-left: 1px solid rgba(255,255,255,0.08); margin-left: 14px; } .deviceNavTree .navRow, .deviceNavTree .navLeaf { position: relative; } .deviceNavToolbar .relative { position: relative; } .navSearchWrap { display: flex; align-items: center; } .navSearchClear { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .navSearchClear:hover { color: var(--text); } .navSearchCount { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; background: var(--bg); padding: 0 4px; font-size: 10px; } /* Tree Elbow Connectors */ .deviceNavTree .navChildren { border-left: 1px solid rgba(255,255,255,0.08); margin-left: 14px; padding-left: 4px; } .deviceNavTree .navRow::before, .deviceNavTree .navLeaf::before { content: ""; position: absolute; left: -18px; top: 14px; width: 12px; height: 1px; background: rgba(255,255,255,0.08); } .deviceNavTree .navDepth-0::before { display: none; } .navTree details[open] > summary .caret { transform: rotate(90deg); } .navTree details .navChildren { overflow: hidden; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: top; transform: scaleY(0.95); opacity: 0; max-height: 0; } .navTree details[open] .navChildren { transform: scaleY(1); opacity: 1; max-height: 1000px; /* Arbitrary large number */ transition: opacity 0.5s ease, transform 0.3s ease, max-height 0.5s ease-out; } .navTree .caret { display: inline-block; transition: transform 0.2s ease-in-out; width: 14px; text-align: center; } .deviceSkeletonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .deviceSkeletonTile{height:96px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:deviceShimmer 1.2s infinite} @keyframes deviceShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (max-width: 920px){ .deviceBrowserGrid{grid-template-columns:1fr} .deviceQuickNavCard{position:static} .deviceSkeletonGrid{grid-template-columns:1fr} .deviceBrowserSide{position:static;max-height:none;overflow:visible} } /* Device page polish */ #device .hero{ background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; border:1px solid rgba(135,196,255,.25); color: white; border-radius: 12px; margin-top: 1rem; } #device .hero .muted { color: #ddd; } .donateHero { background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1550565118-3a14e8d0386f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; color: white; border-radius: 12px; margin-top: 1rem; padding: 3rem 2rem; } .donateHero .muted { color: #ddd; } #device #deviceHeader{ border:1px solid rgba(150,216,255,.24); background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); } #device .devicePhotoFrame{ border:1px solid rgba(152,210,255,.32); box-shadow:0 12px 30px rgba(0,0,0,.25); } #device .deviceBrowserSide{ border:1px solid rgba(150,216,255,.20); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); overflow-x:hidden; } #device .devicePanel{ border:1px solid rgba(150,216,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); } #device .imgTileMedia, #device .romCatImg, #device .bundleLeadLogo, #device .bundleItemLogo{ background:rgba(255,255,255,.07); } /* Device page: compact left navigation (avoid long empty full-width boxes). */ #device .navTree details{ border:0; background:transparent; display:flex; flex-direction:column; align-items:flex-start; } #device .navTree{ align-items:flex-start; } #device .navTree > details, #device .navTree > .navLeaf{ align-self:flex-start; } #device .navTree details > summary{ width:auto; max-width:100%; } #device .navTree .navRow, #device .navTree .navLeaf{ display:grid; grid-template-columns:10px auto 1fr; align-items:center; column-gap:6px; width:fit-content; max-width:100%; min-width:0; padding:4px 8px; min-height:24px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); border-radius:10px; transition:background .15s ease,border-color .15s ease,transform .15s ease; } #device .navTree .navLabel{ grid-column:3; min-width:0; max-width:none; font-size:16px; line-height:1.22; letter-spacing:.01em; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:break-word; } #device .navTree .navLeaf{ color:var(--text); } #device .navTree .navLeaf.navActive{ border-color:rgba(124,92,255,.48); background:rgba(124,92,255,.18); box-shadow:0 0 0 1px rgba(124,92,255,.18); } #device .navTree .navChildren{ padding:4px 0 2px 10px; border-left:1px dashed rgba(255,255,255,.10); margin-left:8px; } .navTree{display:flex;flex-direction:column;gap:3px} .navTree details{border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.02)} .navTree details summary{list-style:none;cursor:pointer} .navTree details summary::-webkit-details-marker{display:none} .navRow{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;min-height:38px} .navRow:hover, .navLeaf:hover { background: rgba(255,255,255, .04); } .navRow:focus-visible, .navLeaf:focus-visible { outline: 2px solid rgba(124,92,255,.65); outline-offset: -2px; background: rgba(124,92,255,.1); } .navLeaf.navActive { font-weight: 800; background: rgba(124,92,255,.08); } .navRow .caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;opacity:.85;flex:0 0 auto;transition:transform .12s ease} .navTree details[open] > summary .caret{transform:rotate(90deg)} .navLabel{min-width:0;flex:1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navRow .label{display:flex;align-items:center;gap:8px;min-width:0;flex:1} .navRow .label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navLogo{width:18px;height:18px;object-fit:contain;border-radius:6px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);flex:0 0 auto} .navFolder .navLogo{width:22px;height:22px;border-radius:8px} .navChildren{padding:1px 0 3px 0} .navLeaf{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--text);cursor:pointer;padding:9px 10px;border-radius:12px;min-height:38px} .navLeaf:hover{background:rgba(255,255,255,.04)} .navLeaf .label{display:flex;align-items:center;gap:8px;min-width:0;flex:1} .navLeaf .label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .navLeaf.navActive{background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.35)} #device .navTree .navRow .caret, #device .navTree .navLeaf .caret{grid-column:1} #device .navTree .navLogo{grid-column:2} /* Stable tree layout: indent inside each row, not via external margins. */ .navIndent{padding-left:calc(0px + (var(--depth,0) * 3px))} .navLabel{max-width:none} .navDepth-1 .navLabel{max-width:none} .navDepth-2 .navLabel{max-width:none} .navDepth-3 .navLabel{max-width:none} .navDepth-0{border-color:rgba(120,195,255,.30);background:rgba(120,195,255,.07)} .navDepth-1{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)} .navDepth-2{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.02)} .navDepth-3{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.015)} #device .navTree .navDepth-2, #device .navTree .navDepth-3{ border-left:2px solid rgba(124,92,255,.18); } #device .deviceBrowserSide #deviceNavSearch{ font-size:13px; padding-right:74px; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.03); } #device .deviceBrowserSide #deviceNavSearch:focus{ border-color:rgba(124,92,255,.55); box-shadow:0 0 0 2px rgba(124,92,255,.18); } #device .deviceNavToolbar{ gap:10px; align-items:center; flex-wrap:wrap; } #device .deviceNavToolbar .navSearchWrap{ flex:1 1 220px; min-width:180px; } #device .deviceNavToolbar .navSearchClear{ right:40px; width:22px; height:22px; border-radius:999px; background:rgba(255,255,255,.04); font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; } #device .deviceNavToolbar .navSearchClear:hover{ background:rgba(255,255,255,.10); } #device .deviceNavToolbar .navSearchCount{ right:8px; min-width:22px; height:18px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-weight:600; color:var(--text); } #device .navTree .caret{ color:var(--muted); font-size:12px; } #device .navTree .navLeaf .caret{ font-size:9px; opacity:.55; } #device .navTree .navRow:hover, #device .navTree .navLeaf:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); } #device .navIndent{ padding-left:calc(0px + (var(--depth,0) * 6px)); } #device .navDepth-0{ border-color:rgba(120,195,255,.24); background:rgba(120,195,255,.05); } .devicePanel{min-width:0} /* Rich text content (admin editor output) */ .rt-content{line-height:1.55} .rt-content img{max-width:100%;height:auto;border-radius:12px} .rt-content iframe{max-width:100%;border:0;border-radius:12px} .rt-content h1{font-size:28px;margin:18px 0 10px} .rt-content h2{font-size:22px;margin:16px 0 8px} .rt-content h3{font-size:18px;margin:14px 0 8px} .rt-content blockquote{border-left:3px solid rgba(255,255,255,.18);padding-left:12px;margin:12px 0;color:rgba(255,255,255,.85)} .rt-content pre{overflow:auto;padding:12px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)} .rt-content code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:8px} .rt-content .markdown-heading{margin:16px 0 10px} .rt-content .markdown-heading .anchor{display:none} .rt-content .heading-element{margin:0} .rt-content .highlight{margin:12px 0;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);border-radius:12px;overflow:auto} .rt-content .highlight pre{margin:0;background:transparent;border:0;padding:12px} .rt-content .highlight code{background:transparent;border:0;padding:0} .rt-content .highlight .zeroclipboard-container{display:none} .rt-content .highlight .pl-c{color:#93a1c3} .rt-content .highlight .pl-k{color:#8f7dff} .rt-content .highlight .pl-s, .rt-content .highlight .pl-s1, .rt-content .highlight .pl-s2{color:#9fd8b6} .rt-content .highlight .pl-en{color:#66c0ff} .rt-content .highlight .pl-v, .rt-content .highlight .pl-c1{color:#f3c97a} .rt-content table{width:100%;border-collapse:collapse;margin:12px 0} .rt-content table th, .rt-content table td{border:1px solid rgba(255,255,255,.12);padding:6px 8px} /* v7 UI chips + collapsible helpers */ .spacer{flex:1} .btn.tiny{padding:6px 10px;border-radius:999px;font-size:13px} .campDetailSticky{position:sticky;top:10px;z-index:10;background:rgba(20,27,43,.88);backdrop-filter:blur(8px);padding:8px;border:1px solid var(--line);border-radius:12px} .campDetailSticky{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .chipRow{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:13px;line-height:1.2;color:var(--text);white-space:normal;overflow-wrap:anywhere;word-break:break-word} .chipBtn{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.04);display:block;width:100%;text-align:left;color:var(--text);cursor:pointer;white-space:normal;overflow-wrap:anywhere;word-break:break-word} .chipBtn:hover{transform:translateY(-1px)} .chipBtn.active{border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.16)} .chipBtn.active{outline:2px solid rgba(124,92,255,.35)} .campSearchWrap input{width:100%} .brandItem{white-space:normal} .brandItem span:first-child{overflow-wrap:anywhere;word-break:break-word;text-align:left} /* Donate page: categories + campaigns list should work well on mobile. Desktop: two columns. Mobile: stack + horizontal-scroll categories chips so 10k+ categories doesn't push campaigns below the fold. */ .campLayout{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start} .campCatsCol{min-width:0;position:sticky;top:12px} .campCardsCol{min-width:0} .campCatsCol .stack a,.campCatsCol .stack button{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); } .campCatsCol .stack a:hover,.campCatsCol .stack button:hover{background:rgba(255,255,255,.06)} .donateHeroGrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:16px;align-items:start} .donateHeroPanel{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)} .donateSteps{margin:6px 0 8px;padding-left:18px;line-height:1.4} #campaignCards.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:start; } .campCard{display:flex;flex-direction:column;gap:10px;padding:14px;background:rgba(255,255,255,.02)} .campCardHero{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid var(--line)} .campCardHero img{width:100%;height:100%;object-fit:cover;display:block} .campCardBody{display:flex;flex-direction:column;gap:6px} .campCardMeta{display:flex;flex-wrap:wrap;gap:8px} .campBadge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;color:var(--muted)} .campBadge.ok{border-color:rgba(46,204,113,.55);color:#baf4cf;background:rgba(46,204,113,.12)} .campBadge.warn{border-color:rgba(255,193,7,.55);color:#ffe59a;background:rgba(255,193,7,.12)} .campBadge.info{border-color:rgba(0,212,255,.45);color:#c8f5ff;background:rgba(0,212,255,.10)} .campCard{position:relative} .campFeatured{ position:absolute; top:10px; right:10px; padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--bg); background:linear-gradient(135deg,#ffd666,#ff8c42); box-shadow:0 4px 14px rgba(0,0,0,.35); } .campCardActions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap} /* Donate detail text readability */ .donateDetail #campBody{ max-width:78ch; margin-left:auto; margin-right:auto; line-height:1.75; text-wrap:pretty; } .donateDetail #campHeader{flex:1 1 auto;width:100%} .donateDetail #campTitle{margin:0} .donateDetail #campSubtitle, .donateDetail #campMetaChips, .donateDetail #campTotals{margin-top:6px} .donateDetail #campHero{margin-top:12px} .donateDetail #campProgress{margin-top:10px} .donateDetail #campBody{margin-top:12px} .donateDetail #campThanks{margin-top:12px} .donateDetail #campPerks{margin-top:12px} .donateDetail #campPerks h3{margin-top:0} .donateDetail #campPerksList{margin:0;padding-left:18px} .donateDetail #campPay{margin-top:14px} .donateDetail #campPay h3{margin-top:0} .donateDetail #receiptDetailsBox{margin-top:6px;align-items:center;gap:8px} .donateDetail #receiptDetailsBox label{display:flex;gap:8px;align-items:center} .donateDetail #tiersRow{margin-top:10px} .donateDetail #tiersRow .muted{margin-bottom:8px} .donateDetail #tiersList{grid-template-columns:repeat(auto-fit,minmax(220px,360px));justify-content:start;gap:12px} .donateDetail #amountRow{align-items:end} .donateDetail #donorPrivacyBox{margin-top:10px} .donateDetail #donorPrivacyBox .tile{margin-top:6px;padding:10px} .donateDetail #donorPrivacyOpts{margin-top:10px} .donateDetail #donorPrivacyOpts .muted.small{margin-bottom:6px} .donateDetail #donorPrivacyOpts .row{gap:10px;flex-wrap:wrap} .donateDetail #donorAliasBox{margin-top:8px} /* Space the "Hide my email" checkbox off the radio options above (match the 10px gap used elsewhere). */ .donateDetail #donorPrivacyOpts > label.small{margin-top:10px} .donateDetail #donorPrivacyBox label.small{display:flex;gap:8px;align-items:center} .donateDetail #donorPrivacyBox .muted.small.mt-8{margin-top:8px} .donateDetail #campBody > :first-child{margin-top:0} .donateDetail #campBody > :last-child{margin-bottom:0} .donateDetail #campBody p, .donateDetail #campBody li{ overflow-wrap:anywhere; word-break:normal; } .donateDetail #campBody p{margin:0 0 1em} .donateDetail #campBody ul, .donateDetail #campBody ol{margin:0 0 1em;padding-left:1.25em} .donateDetail #campBody li + li{margin-top:.35em} .donatePage .payMethodsGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,360px)); justify-content:start; gap:14px; } .donatePage .payMethodCard{ border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); padding:12px; } .donatePage .payMethodCard .btn{ width:auto; max-width:100%; } .donatePage #paypal-button-container{ width:100%; max-width:320px; } .donatePage #paypal-button-container > div{ max-width:320px !important; } .donatePage #paypalMonthlyBtn{ padding:8px 10px; font-size:13px; } @media (max-width: 720px){ .donateHeroGrid{grid-template-columns:1fr} .campLayout{grid-template-columns:1fr} .campCatsCol{position:static} /* Categories: wrap for small sets; enable swipe strip only when JS adds .catsScroll */ #campCatsWrap:not(.catsMany){display:flex;flex-direction:row;gap:8px;flex-wrap:wrap;overflow:visible;max-width:100%} #campCatsWrap:not(.catsMany).catsScroll{flex-wrap:nowrap;overflow:auto;padding-bottom:6px} #campCatsWrap:not(.catsMany) .chipBtn, #campCatsWrap:not(.catsMany) .btn{flex:0 0 auto} #campCatsWrap:not(.catsMany).catsScroll .chipBtn, #campCatsWrap:not(.catsMany).catsScroll .btn{white-space:nowrap} #campCatsWrap:not(.catsMany):not(.catsScroll) .chipBtn, #campCatsWrap:not(.catsMany):not(.catsScroll) .btn{white-space:normal} #campCatsWrap.catsMany{display:flex;flex-direction:column;gap:8px;overflow:visible} #campCatsWrap.catsMany input{width:100%} /* Search box should not fight the header on small screens */ .campListHeader{flex-wrap:wrap} .campSearchWrap{flex-basis:100%} .donatePage #paypal-button-container, .donatePage #paypal-button-container > div{ max-width:100% !important; } .donatePage .payMethodsGrid{grid-template-columns:1fr} #campaignCards.grid{grid-template-columns:1fr} } /* Donate campaign titles: allow admin-controlled alignment */ .donate-campaign-title{display:block;width:100%;margin:0;text-align:left} .donate-campaign-title.align-center{text-align:center} .donate-campaign-title.align-right{text-align:right} /* ===== Fixes / Admin UI helpers ===== */ /* Ensure HTML hidden attribute always works (was overridden by .stack/.row display rules) */ [hidden]{display:none !important;} /* Global form controls (admin uses raw /