Template:Main Page/Style.css: Difference between revisions
Template page
More actions
Fix flex image wrapper sizing in featured reading cards |
Fix intrinsic portrait sizing inside centered MediaWiki figure wrappers |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 86: | Line 86: | ||
.bhi-home .bhi-reading figure>a{display:block;width:100%;height:100%;text-align:center} | .bhi-home .bhi-reading figure>a{display:block;width:100%;height:100%;text-align:center} | ||
.bhi-home .bhi-reading figure img{display:inline-block;height:100%;width:auto;max-width:100%;object-fit:contain} | .bhi-home .bhi-reading figure img{display:inline-block;height:100%;width:auto;max-width:100%;object-fit:contain} | ||
/* Follow Citizen theme tokens in Light, Dark and Auto. Hero palette stays fixed. */ | |||
.bhi-home{color:var(--color-base,#182b3a)} | |||
.bhi-home a{color:var(--color-progressive,#126c70)} | |||
.bhi-home .bhi-eyebrow,.bhi-home .bhi-note{color:var(--color-subtle,#536a74)} | |||
.bhi-home .bhi-language,.bhi-home .bhi-bottom{border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-card{background:var(--color-surface-1,#fff);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-search{background:var(--color-surface-1,#f1f6f5);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-search .mw-searchInput{background:var(--background-color-base,#fff);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-search .mw-searchInput::placeholder{color:var(--color-subtle,#536a74);opacity:1} | |||
.bhi-home .bhi-search input[name="go"]{background:var(--color-surface-2,#fff);color:var(--color-base,#126c70);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-search input[name="fulltext"]{background:#126c70;color:#fff;border-color:#438b8e} | |||
.bhi-home .bhi-topics a{background:var(--color-surface-1,#f5f8f7);color:var(--color-base,#126c70);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-topics a:hover{background:var(--color-surface-3,#e2eeea);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-reading figure{background:var(--color-surface-2,#f1f5f4)} | |||
.bhi-home .bhi-mission{background:var(--color-surface-1,#f6f3eb);color:var(--color-base,#182b3a);border-top-color:#b99551} | |||
.bhi-home .bhi-partner{background:var(--color-surface-2,#eaf3f0);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-partner-paths>div{border-color:rgba(128,145,153,.4)} | |||
.bhi-home .bhi-partner-paths p{color:var(--color-subtle,#405e62)} | |||
.bhi-home .bhi-button a{background:#d8b66f;color:#102b3d} | |||
.bhi-home .bhi-hero a{color:#c4e7df} | |||
.bhi-home .bhi-hero .bhi-button a{background:#d8b66f;color:#102b3d} | |||
.bhi-home .bhi-hero .bhi-secondary a{background:transparent;color:#fff} | |||
.bhi-home .bhi-hero .bhi-stat a{color:#eed5a2} | |||
/* Shared Bhikitia infobox presentation; opt-in class preserves other templates. */ | |||
.bhi-infobox{box-sizing:border-box;float:right;clear:right;width:340px;max-width:100%;margin:4px 0 26px 28px;border:1px solid rgba(128,145,153,.4);border-radius:14px;background:var(--color-surface-1,#fff);color:var(--color-base,#182b3a);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:14px;line-height:1.65} | |||
.bhi-infobox *{box-sizing:border-box} | |||
.bhi-infobox .bhi-infobox-title{margin:0;padding:22px 22px 20px;background:#102b3d;color:#fff;border-top:3px solid #d8b66f;font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.22;text-align:center;overflow-wrap:break-word} | |||
.bhi-infobox .bhi-infobox-media{padding:20px 22px 0;text-align:center} | |||
.bhi-infobox .bhi-infobox-media figure{float:none;display:block;width:100%;max-width:100%;margin:0;border:0;background:transparent} | |||
.bhi-infobox .bhi-infobox-media figure>a,.bhi-infobox .bhi-infobox-media .mw-file-element{max-width:100%} | |||
.bhi-infobox .bhi-infobox-media img{display:block;max-width:100%;width:auto;height:auto;max-height:290px;object-fit:contain;border-radius:8px;margin:0 auto} | |||
.bhi-infobox .bhi-infobox-media figcaption:empty{display:none} | |||
.bhi-infobox .bhi-infobox-caption{margin:0;padding:10px 22px 16px;text-align:center;color:var(--color-subtle,#536a74);font-size:12px;line-height:1.5} | |||
.bhi-infobox .bhi-infobox-data{padding:10px 20px 20px} | |||
.bhi-infobox .bhi-infobox-data table{width:100%;border:0;border-collapse:collapse;margin:0;background:transparent;color:inherit;font-size:inherit} | |||
.bhi-infobox .bhi-infobox-data tr{border:0;background:transparent} | |||
.bhi-infobox .bhi-infobox-data th,.bhi-infobox .bhi-infobox-data td{border:0;border-bottom:1px solid rgba(128,145,153,.22);background:transparent;padding:11px 0;vertical-align:top;text-align:left;line-height:1.55;color:inherit;overflow-wrap:anywhere} | |||
.bhi-infobox .bhi-infobox-data th{width:38%;padding-right:15px;font-size:12px;font-weight:600;color:var(--color-subtle,#536a74)} | |||
.bhi-infobox .bhi-infobox-data tr:last-child th,.bhi-infobox .bhi-infobox-data tr:last-child td{border-bottom:0} | |||
.bhi-infobox .bhi-infobox-data td{font-size:13px} | |||
.bhi-infobox .bhi-infobox-data ul{margin:0;padding-left:16px} | |||
.bhi-infobox .bhi-infobox-data p{margin:0} | |||
.bhi-infobox a{overflow-wrap:anywhere} | |||
.bhi-infobox .bhi-infobox-title a{color:#fff} | |||
@media(max-width:720px){.bhi-infobox{float:none;clear:both;width:100%;margin:20px auto 26px;max-width:440px}.bhi-infobox .bhi-infobox-title{font-size:25px}.bhi-infobox .bhi-infobox-data th{width:36%}.bhi-infobox .bhi-infobox-media img{max-height:260px}} | |||
.bhi-infobox .bhi-infobox-media figure>a{display:block;width:100%;text-align:center} | |||
.bhi-infobox .bhi-infobox-media img{width:100%;height:270px;max-height:270px;object-fit:contain} | |||
.bhi-infobox-website .bhi-infobox-media img{height:180px;max-height:180px} | |||
Latest revision as of 16:42, 31 October 2026
.header-toplevel {
display: table;
border:1px solid #a7d7f9;
margin:1em 0px;
width:100%;
}
.header-row {
display: table-row;
}
.header-centre {
text-align:center;
}
.header-list{
padding:1em;
}
.header-image{
vertical-align:middle
}
/* International homepage — scoped to .bhi-home; previous revisions remain recoverable. */
.bhi-home{font-family:inherit;line-height:1.7;color:#182b3a;margin:0 auto;max-width:1200px}
.bhi-home *{box-sizing:border-box}
.bhi-home p{margin:0 0 16px}
.bhi-home a{color:#126c70}
.bhi-home .bhi-eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#52716f;margin-bottom:14px}
.bhi-home .bhi-hero{padding:48px 40px;background:#102b3d;border-radius:20px;color:#eff6f6;position:relative;overflow:hidden}
.bhi-home .bhi-hero-grid{display:flex;gap:36px;align-items:center;flex-wrap:wrap}
.bhi-home .bhi-hero-copy{flex:2 1 390px;min-width:0}
.bhi-home .bhi-hero .bhi-eyebrow{color:#a8d2ca}
.bhi-home .bhi-title{font-family:Georgia,serif;font-size:52px;font-weight:400;line-height:1.12;letter-spacing:-1.5px;margin:0 0 22px;color:#fff;border:0;padding:0}
.bhi-home .bhi-lead{font-size:17px;color:#d2e1e7;max-width:610px}
.bhi-home .bhi-hero a{color:#c4e7df}
.bhi-home .bhi-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.bhi-home .bhi-button a{display:inline-block;padding:11px 20px;border-radius:7px;background:#d8b66f;color:#102b3d;font-weight:700;text-decoration:none}
.bhi-home .bhi-secondary a{background:transparent;border:1px solid #72919f;color:#fff}
.bhi-home .bhi-hero-aside{flex:1 1 200px;border-left:1px solid #4b6573;padding:10px 0 10px 30px}
.bhi-home .bhi-stat{font-family:Georgia,serif;font-size:45px;line-height:1.25;color:#eed5a2}
.bhi-home .bhi-stat a{color:#eed5a2;text-decoration:none}
.bhi-home .bhi-stat-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#c2d7dd;margin-bottom:22px}
.bhi-home .bhi-language{display:flex;gap:16px;flex-wrap:wrap;padding:17px 4px;border-bottom:1px solid #dce4e5;font-size:13px;margin-bottom:30px}
.bhi-home .bhi-search{padding:24px;background:#f1f6f5;border:1px solid #dae5e2;border-radius:12px;margin:24px 0}
.bhi-home .bhi-search input{border:1px solid #b6c9c6;border-radius:6px;padding:12px;max-width:100%;font-size:15px}
.bhi-home .bhi-search .mw-searchInput{width:75%}
.bhi-home .bhi-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:34px 0 18px}
.bhi-home h2{font-family:Georgia,serif;font-weight:400;font-size:29px;border:0;margin:0;padding:0;color:inherit}
.bhi-home h3{font-size:18px;margin:0 0 12px;color:inherit}
.bhi-home .bhi-grid{display:flex;flex-wrap:wrap;gap:20px}
.bhi-home .bhi-card{flex:1 1 300px;min-width:0;border:1px solid #dbe3e5;border-radius:12px;padding:26px;background:#fff;color:#182b3a;overflow:hidden}
.bhi-home .bhi-card-wide{flex:2 1 460px}
.bhi-home .bhi-card figure{max-width:100%;margin:0 0 18px}
.bhi-home .bhi-card img{max-width:100%;height:auto;border-radius:7px}
.bhi-home .bhi-card .thumb{max-width:100%}
.bhi-home .bhi-topics{display:flex;flex-wrap:wrap;gap:10px}
.bhi-home .bhi-topics a{display:inline-block;padding:9px 16px;border:1px solid #d5e2df;border-radius:6px;background:#f5f8f7;font-size:14px;font-weight:600;text-decoration:none}
.bhi-home .bhi-mission{border-top:3px solid #b99551;background:#f6f3eb;padding:32px;border-radius:12px;margin-top:30px;color:#182b3a}
.bhi-home .bhi-mission h2{margin-bottom:16px}
.bhi-home .bhi-partner{background:#eaf3f0;border:1px solid #cee0d9;border-radius:12px;padding:32px;margin-top:28px;color:#182b3a}
.bhi-home .bhi-partner h2{margin-bottom:16px}
.bhi-home .bhi-note{font-size:13px;color:#536a74}
.bhi-home .bhi-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 0;margin-top:15px;font-size:13px;border-top:1px solid #dbe3e5}
@media(max-width:640px){.bhi-home .bhi-hero{padding:30px 22px}.bhi-home .bhi-title{font-size:37px}.bhi-home .bhi-hero-copy{flex-basis:100%}.bhi-home .bhi-hero-aside{border-left:0;border-top:1px solid #4b6573;padding:22px 0 0;flex-basis:100%}.bhi-home .bhi-stat{font-size:35px}.bhi-home .bhi-card{padding:20px;flex-basis:100%}.bhi-home .bhi-mission,.bhi-home .bhi-partner{padding:24px}.bhi-home .bhi-search .mw-searchInput{width:100%}.bhi-home h2{font-size:25px}}
/* Supporting-section refinements; hero rules intentionally unchanged. */
.bhi-home .bhi-search .searchbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left}
.bhi-home .bhi-search .cdx-text-input{flex:1 1 260px;min-width:0}
.bhi-home .bhi-search .mw-searchInput{width:100%;min-height:48px}
.bhi-home .bhi-search input[type="submit"]{min-height:48px;cursor:pointer;background:#126c70;color:#fff;border-color:#126c70}
.bhi-home .bhi-search input[name="go"]{background:#fff;color:#126c70;border-color:#b6c9c6}
.bhi-home .bhi-search .mw-inputbox-centered{margin:0}
.bhi-home .bhi-section-head{margin:26px 0 16px}
.bhi-home .bhi-section-head .mw-heading{margin:0;padding:0;border:0}
.bhi-home .bhi-card .mw-heading{margin:0;padding:0;border:0}
.bhi-home .bhi-reading{flex:1 1 340px;display:flex;flex-direction:column}
.bhi-home .bhi-reading figure{float:none;width:100%;height:220px;background:#f1f5f4;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:4px 0 20px;overflow:hidden}
.bhi-home .bhi-reading figure img{max-height:220px;width:auto;max-width:100%;object-fit:contain;border-radius:0}
.bhi-home .bhi-reading p:last-child{margin-top:auto;margin-bottom:0}
.bhi-home .bhi-card a,.bhi-home .bhi-topics a{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.bhi-home .bhi-topics a:hover{background:#e2eeea;border-color:#91b9ad}
.bhi-home .bhi-topics a:focus,.bhi-home .bhi-card a:focus,.bhi-home .bhi-partner a:focus{outline:3px solid #b99551;outline-offset:4px}
.bhi-home .bhi-partner-paths{display:flex;gap:20px;flex-wrap:wrap;margin:22px 0}
.bhi-home .bhi-partner-paths>div{flex:1 1 200px;border-top:1px solid #b9d1c7;padding-top:16px}
.bhi-home .bhi-partner-paths p{font-size:14px;margin:8px 0 0;color:#405e62}
@media(max-width:640px){.bhi-home .bhi-search{padding:20px}.bhi-home .bhi-search input[type="submit"]{flex:1 1 130px}.bhi-home .bhi-reading{flex-basis:100%}.bhi-home .bhi-reading figure{height:200px}.bhi-home .bhi-reading figure img{max-height:200px}.bhi-home .bhi-partner-paths{gap:12px}}
@media(prefers-reduced-motion:reduce){.bhi-home .bhi-card a,.bhi-home .bhi-topics a{transition:none}}
.bhi-home .bhi-reading figure>a{display:block;width:100%;height:100%;text-align:center}
.bhi-home .bhi-reading figure img{display:inline-block;height:100%;width:auto;max-width:100%;object-fit:contain}
/* Follow Citizen theme tokens in Light, Dark and Auto. Hero palette stays fixed. */
.bhi-home{color:var(--color-base,#182b3a)}
.bhi-home a{color:var(--color-progressive,#126c70)}
.bhi-home .bhi-eyebrow,.bhi-home .bhi-note{color:var(--color-subtle,#536a74)}
.bhi-home .bhi-language,.bhi-home .bhi-bottom{border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-card{background:var(--color-surface-1,#fff);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-search{background:var(--color-surface-1,#f1f6f5);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-search .mw-searchInput{background:var(--background-color-base,#fff);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-search .mw-searchInput::placeholder{color:var(--color-subtle,#536a74);opacity:1}
.bhi-home .bhi-search input[name="go"]{background:var(--color-surface-2,#fff);color:var(--color-base,#126c70);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-search input[name="fulltext"]{background:#126c70;color:#fff;border-color:#438b8e}
.bhi-home .bhi-topics a{background:var(--color-surface-1,#f5f8f7);color:var(--color-base,#126c70);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-topics a:hover{background:var(--color-surface-3,#e2eeea);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-reading figure{background:var(--color-surface-2,#f1f5f4)}
.bhi-home .bhi-mission{background:var(--color-surface-1,#f6f3eb);color:var(--color-base,#182b3a);border-top-color:#b99551}
.bhi-home .bhi-partner{background:var(--color-surface-2,#eaf3f0);color:var(--color-base,#182b3a);border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-partner-paths>div{border-color:rgba(128,145,153,.4)}
.bhi-home .bhi-partner-paths p{color:var(--color-subtle,#405e62)}
.bhi-home .bhi-button a{background:#d8b66f;color:#102b3d}
.bhi-home .bhi-hero a{color:#c4e7df}
.bhi-home .bhi-hero .bhi-button a{background:#d8b66f;color:#102b3d}
.bhi-home .bhi-hero .bhi-secondary a{background:transparent;color:#fff}
.bhi-home .bhi-hero .bhi-stat a{color:#eed5a2}
/* Shared Bhikitia infobox presentation; opt-in class preserves other templates. */
.bhi-infobox{box-sizing:border-box;float:right;clear:right;width:340px;max-width:100%;margin:4px 0 26px 28px;border:1px solid rgba(128,145,153,.4);border-radius:14px;background:var(--color-surface-1,#fff);color:var(--color-base,#182b3a);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:14px;line-height:1.65}
.bhi-infobox *{box-sizing:border-box}
.bhi-infobox .bhi-infobox-title{margin:0;padding:22px 22px 20px;background:#102b3d;color:#fff;border-top:3px solid #d8b66f;font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.22;text-align:center;overflow-wrap:break-word}
.bhi-infobox .bhi-infobox-media{padding:20px 22px 0;text-align:center}
.bhi-infobox .bhi-infobox-media figure{float:none;display:block;width:100%;max-width:100%;margin:0;border:0;background:transparent}
.bhi-infobox .bhi-infobox-media figure>a,.bhi-infobox .bhi-infobox-media .mw-file-element{max-width:100%}
.bhi-infobox .bhi-infobox-media img{display:block;max-width:100%;width:auto;height:auto;max-height:290px;object-fit:contain;border-radius:8px;margin:0 auto}
.bhi-infobox .bhi-infobox-media figcaption:empty{display:none}
.bhi-infobox .bhi-infobox-caption{margin:0;padding:10px 22px 16px;text-align:center;color:var(--color-subtle,#536a74);font-size:12px;line-height:1.5}
.bhi-infobox .bhi-infobox-data{padding:10px 20px 20px}
.bhi-infobox .bhi-infobox-data table{width:100%;border:0;border-collapse:collapse;margin:0;background:transparent;color:inherit;font-size:inherit}
.bhi-infobox .bhi-infobox-data tr{border:0;background:transparent}
.bhi-infobox .bhi-infobox-data th,.bhi-infobox .bhi-infobox-data td{border:0;border-bottom:1px solid rgba(128,145,153,.22);background:transparent;padding:11px 0;vertical-align:top;text-align:left;line-height:1.55;color:inherit;overflow-wrap:anywhere}
.bhi-infobox .bhi-infobox-data th{width:38%;padding-right:15px;font-size:12px;font-weight:600;color:var(--color-subtle,#536a74)}
.bhi-infobox .bhi-infobox-data tr:last-child th,.bhi-infobox .bhi-infobox-data tr:last-child td{border-bottom:0}
.bhi-infobox .bhi-infobox-data td{font-size:13px}
.bhi-infobox .bhi-infobox-data ul{margin:0;padding-left:16px}
.bhi-infobox .bhi-infobox-data p{margin:0}
.bhi-infobox a{overflow-wrap:anywhere}
.bhi-infobox .bhi-infobox-title a{color:#fff}
@media(max-width:720px){.bhi-infobox{float:none;clear:both;width:100%;margin:20px auto 26px;max-width:440px}.bhi-infobox .bhi-infobox-title{font-size:25px}.bhi-infobox .bhi-infobox-data th{width:36%}.bhi-infobox .bhi-infobox-media img{max-height:260px}}
.bhi-infobox .bhi-infobox-media figure>a{display:block;width:100%;text-align:center}
.bhi-infobox .bhi-infobox-media img{width:100%;height:270px;max-height:270px;object-fit:contain}
.bhi-infobox-website .bhi-infobox-media img{height:180px;max-height:180px}