:root{--ink:#29384d;--muted:#637181;--paper:#fff9fb;--green:#477f9d;--mint:#e5f3fa;--border:#efd1dc;--coral:#d7839d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #cb7453;outline-offset:4px}a{color:inherit}button{transition:background .15s,transform .15s}button:hover:not(:disabled){filter:brightness(.97)}.sidebar{width:225px;background:#f9eaf0;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--border);padding:35px 23px;display:flex;flex-direction:column;z-index:2}.brand{font:italic 58px/1 Georgia,serif;text-decoration:none;letter-spacing:-5px;color:var(--green)}.brand span{font:38px Georgia;margin-left:9px}.region{font-size:10px;letter-spacing:2px;margin:14px 0 45px;color:var(--muted)}nav{display:flex;flex-direction:column;gap:8px}.nav{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#637181;text-align:left;padding:12px 10px;border-radius:9px;font-weight:550;font-size:13px}.nav span{font-size:21px;width:22px}.nav.active{background:var(--green);color:white}.nav small{margin-left:auto;font-size:11px;padding:1px 5px;border-radius:5px;background:#ffffff22}.sidebar-bottom{margin-top:auto;border-top:1px solid #ced8cd;padding-top:24px;font-size:12px}.sidebar-bottom p{color:var(--muted);font-size:12px}.community-dot{height:7px;width:7px;border-radius:50%;background:var(--coral);margin-bottom:12px}.text-button{border:0;background:none;padding:0;font-size:11px;color:var(--green)}.app-shell{margin-left:225px}header{height:83px;border-bottom:1px solid var(--border);padding:0 42px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600}.header-right{display:flex;align-items:center;gap:18px}.demo-badge{font-size:9px;letter-spacing:1px;border:1px solid #ccd7cb;padding:6px 10px;border-radius:20px;color:var(--muted)}.avatar-button{border:0;border-radius:50%;height:35px;width:35px;font-size:10px;background:#f0c2d0;color:var(--ink)}main{max-width:1260px;margin:auto;padding:37px 42px 50px;min-height:80vh}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#607890;margin:0 0 16px}h1{font:52px/1.07 Georgia,serif;letter-spacing:-2px;margin:0 0 20px}h1 em{color:var(--green);font-weight:normal}p{color:var(--muted)}.hero p{font-size:13px;line-height:1.7;margin:0}.hero-art{height:246px;border-radius:110px 110px 12px 12px;background:#f8e0e9;position:relative;overflow:hidden}.sun{height:72px;width:72px;background:#f0a9ba;border-radius:50%;position:absolute;top:24px;right:64px}.hill{position:absolute;border-radius:50%;width:330px;height:200px}.hill-one{background:#85cce6;bottom:-37px;left:-165px;transform:rotate(20deg)}.hill-two{background:#efbac9;right:-177px;bottom:-41px;transform:rotate(-25deg)}.water{position:absolute;bottom:0;background:#deeff7;height:68px;width:100%;background-image:repeating-linear-gradient(175deg,transparent 0 18px,#ffffffa8 19px 20px)}.bridge{height:2px;background:#718fa9;width:77%;position:absolute;top:129px;left:11%;transform:rotate(-3deg)}.bridge:before{content:'';display:block;height:55px;position:absolute;width:100%;border-bottom:2px solid #718fa9;border-radius:0 0 55% 55%;bottom:0}.bridge i{position:absolute;bottom:-44px;height:100px;width:5px;background:#718fa9;left:22%}.bridge i+ i{left:73%;height:84px}.art-label{position:absolute;bottom:12px;right:12px;font-size:7px;color:#38566d;letter-spacing:1px}.demo-note{display:flex;align-items:center;gap:12px;border:1px solid #dbe2d5;background:#f0f6f8;border-radius:10px;padding:10px 15px;margin-bottom:30px}.demo-note span{font-size:23px;color:var(--green)}.demo-note p{font-size:11px;margin:0;line-height:1.6}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}h2{font:25px/1.2 Georgia,serif;margin:0 0 8px;letter-spacing:-.4px}.section-heading p{font-size:12px;margin:0}.outline,.primary,.danger-outline{border:1px solid #c8d8e0;border-radius:8px;background:transparent;padding:10px 16px;color:var(--green);font-size:12px;font-weight:600}.outline span{margin-left:10px}.primary{background:var(--green);color:#fff;border-color:var(--green)}.danger-outline{color:#a6465c;border-color:#e5b0bf}.full{width:100%;margin-top:15px}.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 23px}.chip{padding:7px 13px;border:1px solid #efd1dc;border-radius:30px;background:transparent;color:#637181;font-size:11px}.chip.selected{background:#e2f2fa;color:var(--green);border-color:#c2d3bf}.profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.profile-card{background:white;border:1px solid var(--border);border-radius:13px;overflow:hidden;position:relative}.portrait-button{border:0;padding:0;background:none;display:block;width:100%;text-align:left}.portrait{position:relative;height:205px;overflow:hidden;background:var(--back);isolation:isolate}.portrait:before{content:'';position:absolute;width:180px;height:180px;border:1px solid #fff7;border-radius:50%;top:-60px;right:-50px}.portrait:after{content:'';position:absolute;width:90px;height:90px;border:1px solid #fff7;border-radius:50%;bottom:12px;left:-25px}.portrait svg{height:100%;width:100%;display:block}.portrait .sample-label{position:absolute;top:12px;left:12px;padding:4px 8px;border-radius:12px;background:#fff9;color:#38566d;font-size:8px;letter-spacing:1px}.person-area{position:absolute;bottom:12px;left:12px;background:#fffD;border-radius:6px;padding:4px 8px;font-size:10px;color:#38566d}.heart{position:absolute;top:12px;right:12px;border:0;background:#fffe;border-radius:50%;width:34px;height:34px;font-size:23px;color:#477f9d;z-index:1;line-height:1}.heart.liked{background:var(--green);color:#fff}.card-body{padding:17px}.card-heading{display:flex;align-items:center;gap:5px;font-size:18px;font-weight:600}.card-heading span{font-weight:400}.pronouns{font-size:10px;color:var(--muted);margin:4px 0 12px}.card-bio{font-size:12px;line-height:1.6;margin:0 0 15px;min-height:39px}.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{font-size:9px;background:#edf4f7;border-radius:5px;padding:4px 7px;color:#637181}.card-intent{font-size:10px;color:var(--green);border-top:1px solid #edf0e9;margin-top:14px;padding-top:10px}.intro{font-size:14px;max-width:650px;margin-bottom:25px}.panel{background:#fff;border:1px solid var(--border);padding:25px;border-radius:12px}.form-panel{max-width:780px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-size:12px;font-weight:600;color:#52677a;margin-bottom:19px}input,select,textarea{display:block;width:100%;border:1px solid #d7cbd3;border-radius:7px;padding:11px 12px;background:#fffafb;color:var(--ink);font-size:13px;margin-top:7px}textarea{resize:vertical}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.form-bottom p{font-size:11px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-grid p{font-size:12px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.toggle-row small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:5px}.toggle-row input{width:20px;height:20px;accent-color:var(--green)}.setting-note{font-size:11px;padding:12px;background:#f0f6f8;border-radius:7px;color:var(--muted)}.blocked-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:12px}.inbox-layout{display:grid;grid-template-columns:260px 1fr;border:1px solid var(--border);background:white;border-radius:13px;overflow:hidden;min-height:430px}.match-list{border-right:1px solid var(--border);padding:14px}.match-item{display:block;width:100%;border:0;background:#f8eef2;padding:15px;border-radius:7px;text-align:left;margin-bottom:8px}.match-item.active{background:#e4f3fa}.match-item small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.conversation{padding:22px;display:flex;flex-direction:column}.conversation-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);padding-bottom:15px}.conversation-top small{display:block;font-size:10px;color:var(--muted)}.messages{flex:1;max-height:350px;min-height:160px;overflow-y:auto;padding:18px 0;display:flex;align-items:flex-end;flex-direction:column;gap:10px}.message{background:var(--mint);border-radius:12px 12px 0 12px;padding:10px 15px;max-width:85%;font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap}.message-label{font-size:9px;color:var(--muted)}.compose{display:flex;gap:10px;align-items:center}.compose label{flex:1;margin:0}.compose input{margin:0}.chat-note{font-size:10px;margin:12px 0 0}.empty-state{padding:40px 20px;grid-column:1/-1;text-align:center;border:1px dashed #c6d2c1;border-radius:12px;background:#f0f6f8}.empty-state>span{font:40px Georgia;color:var(--green)}.empty-state p{font-size:12px;max-width:330px;margin:12px auto}.conversation>.empty-state{margin:auto;border:0;background:transparent}.match-list>.empty-state{padding:20px 10px;border:0}.person-detail-art{height:210px;border-radius:10px;margin:15px 0;overflow:hidden}.person-detail-art .portrait{height:100%}.detail-title{font-size:29px;margin:15px 0 5px}.detail-bio{font-size:14px}.detail-actions{display:flex;gap:10px;margin:20px 0 10px;flex-wrap:wrap}.detail-secondary{display:flex;gap:20px;border-top:1px solid var(--border);padding-top:15px;margin-top:20px}.detail-secondary button{font-size:11px}.fine-print{font-size:11px;line-height:1.6;color:var(--muted)}footer{border-top:1px solid var(--border);padding:22px 42px;display:flex;align-items:center;gap:20px;font:italic 23px Georgia;color:var(--green)}footer span{font:10px system-ui;color:var(--muted)}footer span:last-child{margin-left:auto}dialog{border:1px solid #efd1dc;border-radius:18px;background:var(--paper);color:var(--ink);padding:30px;width:min(500px,calc(100% - 32px));max-height:90vh;overflow:auto;box-shadow:0 20px 90px #52677a33}dialog::backdrop{background:#29384de0;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dialog-top h2{margin:0}.dialog-top .eyebrow{margin:0}.close{border:0;background:transparent;font-size:26px;color:var(--muted);padding:0 5px}.dialog-brand{font:italic 45px Georgia;color:var(--green);margin-bottom:25px}#welcome-title{font:40px/1.1 Georgia;letter-spacing:-1px}dialog p{font-size:13px}.checkline{display:flex;align-items:center;gap:10px;margin-top:25px}.checkline input{width:19px;height:19px;margin:0;accent-color:var(--green)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#29384d;color:white;border-radius:10px;padding:13px 20px;box-shadow:0 6px 30px #1234;max-width:90%;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}#filter-error{font-size:12px;color:#a6465c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .footer-brand{font:italic 23px Georgia;color:var(--green)}.support-link{border:0;background:none;color:var(--green);font:600 11px system-ui;padding:8px 11px;border-radius:7px;margin-left:auto}.support-link:hover{background:#eff7fb}.support-link:focus-visible{outline:3px solid #cb7453;outline-offset:2px}footer span:last-child{margin-left:0} /* Brighter trans-flag palette, with deeper text colors for readable contrast. */ :root{--green:#126f91;--mint:#dff4fc;--border:#e9b2ca;--coral:#c73578;--paper:#fffafd;--flag-blue:#5bcefa;--flag-pink:#f5a9b8} .sidebar{background:#fbe0e9;border-right-color:#e9b2ca} .brand,.footer-brand,.dialog-brand{color:#126f91} .nav.active,.primary,.heart.liked{background:#126f91;border-color:#126f91} .avatar-button{background:#f5a9b8} .community-dot{background:#c73578} .hero-art{background:#f8d7e5} .sun{background:#f5a9b8} .hill-one{background:#5bcefa} .hill-two{background:#ee83aa} .water{background-color:#dff4fc} .chip.selected{background:#cceefa;color:#126f91;border-color:#75c8e7} .tag{background:#e5f6fc} .match-item{background:#fbeaf0} .match-item.active{background:#dff4fc} .empty-state{border-color:#91cfe6;background:#eff9fd} .community-banner{background:linear-gradient(110deg,#fbe0e9,#dff4fc)} .profile-summary{border-color:#75c8e7;background:#eff9fd} .support-link:hover{background:#e5f6fc} .nav[data-view=moderator]{color:#126f91} .nav[data-view=moderator].active{color:#fff} /* Bay Area accents: Pacific water, coastal fog, eucalyptus, and California poppy. */ :root{--bay-ocean:#2b86a6;--bay-deep:#17485b;--bay-fog:#eaf1f2;--bay-eucalyptus:#5d806c;--bay-poppy:#e5ad42} body{font-size:16px} .eyebrow,.art-label{color:var(--bay-deep)} .bridge,.bridge i{background:var(--bay-deep)} .bridge:before{border-bottom-color:var(--bay-deep)} .water{background-color:#d9eef1} .community-dot{background:var(--bay-poppy)} .demo-note,.setting-note,.review-notice,.pending-card{background:var(--bay-fog);border-color:#bfd2d7} .empty-state{background:#f1f6f6;border-color:#a8c3c9} .tag{background:#e7f0e9;color:#426550} .forum-space{background:#e5f0e9;color:#426550} .chip.selected{border-color:var(--bay-ocean)} /* Raise the smallest labels and controls as well as body copy. */ .region{font-size:11px} .nav{font-size:14px} .nav small{font-size:12px} .sidebar-bottom,.sidebar-bottom p{font-size:13px} .text-button{font-size:13px} header{font-size:14px} .demo-badge{font-size:10px} .avatar-button{font-size:11px} .eyebrow{font-size:11px} .hero p{font-size:15px} .art-label{font-size:9px} .demo-note p,.section-heading p{font-size:14px} .outline,.primary,.danger-outline{font-size:14px} .chip{font-size:13px} .card-heading{font-size:20px} .pronouns,.person-area{font-size:12px} .card-bio{font-size:14px} .tag{font-size:11px} .card-intent{font-size:12px} label{font-size:14px} input,select,textarea{font-size:15px} .form-bottom p,.settings-grid p,.blocked-row{font-size:14px} .toggle-row small,.setting-note{font-size:13px} .match-item{font-size:15px} .match-item small{font-size:12px} .message{font-size:15px} .message-label{font-size:11px} .chat-note,.fine-print,.empty-state p{font-size:13px} .support-link{font-size:13px} footer span{font-size:12px} .community-banner p{font-size:13px} .forum-agree{font-size:13px!important} .forum-feed-head select{font-size:13px} .forum-space,.forum-area{font-size:12px} .forum-post-body{font-size:14px} .forum-post-foot,.appreciation{font-size:12px} #forum-error{font-size:13px} .review-notice{font-size:14px} .review-notice p,.pending-card p{font-size:13px} .pending-state{font-size:11px} .moderation-card p{font-size:14px} .decision-row{font-size:13px} .toast{font-size:14px} /* Sea-glass page background with white cards for clear separation. */ :root{--paper:#e7f0f3} body,.app-shell{background:var(--paper)} /* One more size step across body text, controls, and supporting labels. */ body{font-size:17px} h1{font-size:55px} h2{font-size:28px} .region{font-size:12px} .nav{font-size:15px} .nav small{font-size:13px} .sidebar-bottom,.sidebar-bottom p{font-size:14px} .text-button{font-size:14px} header{font-size:15px} .demo-badge{font-size:11px} .avatar-button{font-size:12px} .eyebrow{font-size:12px} .intro,.hero p{font-size:16px} .demo-note p,.section-heading p{font-size:15px} .outline,.primary,.danger-outline{font-size:15px} .chip{font-size:14px} .card-heading{font-size:21px} .pronouns,.person-area{font-size:13px} .card-bio{font-size:15px} .tag{font-size:12px} .card-intent{font-size:13px} label{font-size:15px} input,select,textarea{font-size:16px} .form-bottom p,.settings-grid p,.blocked-row,.match-item{font-size:15px} .toggle-row small,.setting-note,.review-notice p,.pending-card p{font-size:14px} .match-item small{font-size:13px} .message{font-size:16px} .message-label{font-size:12px} .chat-note,.fine-print,.empty-state p{font-size:14px} .support-link{font-size:14px} footer span{font-size:13px} .community-banner p{font-size:14px} .forum-agree{font-size:14px!important} .forum-feed-head select{font-size:14px} .forum-space,.forum-area{font-size:13px} .forum-post-body{font-size:15px} .forum-post-foot,.appreciation{font-size:13px} #forum-error{font-size:14px} .review-notice{font-size:15px} .pending-state{font-size:12px} .moderation-card p{font-size:15px} .decision-row,.toast{font-size:14px} /* A more polished coastal palette and quieter, editorial surfaces. */ :root{--ink:#243845;--muted:#596d77;--green:#175f7a;--coral:#b94c76;--paper:#e8f0f2;--border:#d7e0e3;--mint:#e3eff1;--flag-blue:#65b7d3;--flag-pink:#d98da5;--bay-ocean:#287b98;--bay-deep:#234c5a;--bay-fog:#e8f0f2;--bay-eucalyptus:#557765;--bay-poppy:#c9a04f} .sidebar{background:#f2e8ec;border-right-color:#d7e0e3} .hero-art{border-radius:20px;background:#f2e4e9} .sun{background:#d8b36a} .hill-one{background:#65b7d3} .hill-two{background:#d98da5} .water{background-color:#d8e9ed} .profile-card,.panel,.forum-post,.inbox-layout{box-shadow:0 8px 24px #203d4a0d} .profile-card,.panel,.forum-post,.inbox-layout{border-radius:10px} .outline,.primary,.danger-outline,input,select,textarea{border-radius:6px} .chip{border-color:#d7e0e3} .community-banner{background:linear-gradient(110deg,#f3e8ec,#e1eef1);border-color:#d7e0e3} .community-banner>span{color:var(--bay-eucalyptus)} .community-dot{background:var(--bay-poppy)} .empty-state{background:#edf3f4;border-color:#c4d4d9} /* Make the bundled flag and symbol visible without calling external services. */ .trans-flag-art{position:absolute;z-index:2;top:18px;left:18px;width:56px;height:34px;object-fit:cover;border:1px solid #fff;border-radius:4px;box-shadow:0 3px 12px #24384526} .community-banner>.transgender-mark{font:400 36px/1 system-ui,sans-serif;color:var(--green);min-width:38px;text-align:center} /* Larger type, including controls and supporting text. */ body{font-size:18px} h1{font-size:57px} h2{font-size:29px} .nav{font-size:16px} .nav small{font-size:14px} .region,.demo-badge{font-size:12px} .sidebar-bottom,.sidebar-bottom p,.text-button,header{font-size:15px} .eyebrow{font-size:13px} .intro,.hero p{font-size:17px} .demo-note p,.section-heading p,.review-notice{font-size:16px} .outline,.primary,.danger-outline,.chip{font-size:16px} .card-heading{font-size:22px} .pronouns,.person-area{font-size:14px} .card-bio,.community-banner p,.forum-post-body,.moderation-card p{font-size:16px} .tag,.card-intent,.forum-space,.forum-area,.forum-post-foot,.appreciation{font-size:14px} label{font-size:16px} input,select,textarea{font-size:17px} .form-bottom p,.settings-grid p,.blocked-row,.match-item{font-size:16px} .toggle-row small,.setting-note,.fine-print,.empty-state p,.chat-note{font-size:15px} .message{font-size:17px} .message-label,.footer span{font-size:13px} .forum-agree{font-size:15px!important} .forum-feed-head select{font-size:15px} .review-notice p,.pending-card p{font-size:15px} .pending-state{font-size:13px} .decision-row,.toast{font-size:15px} /* Use the supplied progress-pride photo as a softened, full-page background. */ body{background-image:linear-gradient(rgba(235,242,243,.72),rgba(235,242,243,.72)),url("assets/trans-coastal-texture.png");background-position:center,center;background-size:auto,cover;background-repeat:no-repeat;background-attachment:fixed} .app-shell{background-color:transparent;background-image:radial-gradient(ellipse at 92% 4%,#d98da51b,transparent 28%),radial-gradient(ellipse at 4% 58%,#65b7d31a,transparent 32%),radial-gradient(circle,#31586a0d .75px,transparent .9px);background-size:auto,auto,14px 14px;background-repeat:no-repeat,no-repeat,repeat} .hero-art{background-image:linear-gradient(rgba(235,242,243,.34),rgba(235,242,243,.34)),url("assets/trans-coastal-texture.png");background-position:center,center;background-size:auto,cover;background-repeat:no-repeat} .hero-art>.sun,.hero-art>.hill,.hero-art>.water,.hero-art>.bridge{display:none} .art-label{background:#f4f8f4df;border-radius:5px;padding:6px 8px} /* Keep the uploaded photo on the app canvas itself so it is visible after unzip. */ .app-shell{background-color:transparent;background-image:linear-gradient(rgba(235,242,243,.63),rgba(235,242,243,.63)),url("assets/trans-coastal-texture.png"),radial-gradient(ellipse at 92% 4%,#d98da51b,transparent 28%),radial-gradient(ellipse at 4% 58%,#65b7d31a,transparent 32%),radial-gradient(circle,#31586a0d .75px,transparent .9px);background-position:center,center,center,center,0 0;background-size:auto,cover,auto,auto,14px 14px;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;background-attachment:scroll,fixed,scroll,scroll,scroll} /* Fine coastal grain and soft trans-color washes keep the canvas from feeling flat. */ body,.app-shell{background-color:var(--paper);background-image:radial-gradient(ellipse at 92% 4%,#d98da51c,transparent 28%),radial-gradient(ellipse at 4% 58%,#65b7d31b,transparent 32%),radial-gradient(circle, #31586a0d .75px,transparent .9px),linear-gradient(135deg,#edf3f4,#e4edf0 56%,#edf1ef);background-size:auto,auto,14px 14px,auto;background-repeat:no-repeat,no-repeat,repeat,no-repeat} .hero-art{background-image:radial-gradient(circle at 1px 1px,#ffffff30 1px,transparent 1.5px),linear-gradient(145deg,#f5e9ed,#e5eff1);background-size:12px 12px,auto} .hero-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 10px,#ffffff12 10px 11px);z-index:1} .profile-card,.panel,.forum-post,.inbox-layout{background-image:linear-gradient(155deg,#ffffff,#fbfcfc);box-shadow:0 10px 28px #203d4a12,0 2px 5px #203d4a08} .hero-art,.profile-card,.panel,.forum-post,.inbox-layout{border-color:#ccdadd} .community-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(110deg,#f8e8ee,#e7f4fa);border:1px solid var(--border);border-radius:12px;padding:17px 20px;margin:20px 0 25px}.community-banner>span{font:30px Georgia;color:var(--green)}.community-banner strong{font:18px Georgia}.community-banner p{font-size:11px;margin:5px 0 0;max-width:600px}.community-banner .outline{margin-left:auto;white-space:nowrap;flex-shrink:0}.forum-layout{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);gap:24px;align-items:start}.compose-panel{position:sticky;top:18px}.compose-panel h2{margin-bottom:19px}.compose-panel form>label{margin-bottom:14px}.forum-agree{display:flex;align-items:flex-start;gap:9px;font-weight:500!important;font-size:11px!important}.forum-agree input{width:16px;height:16px;margin:0;flex:0 0 auto;accent-color:var(--green)}.forum-feed-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:2px 0 14px}.forum-feed-head h2{font-size:23px}.forum-feed-head select{width:auto;max-width:210px;margin:0;font-size:11px}.forum-post{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 19px;margin-bottom:12px}.forum-post-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.forum-space{background:#e4f3fa;color:#396b85;border-radius:15px;padding:5px 10px;font-size:10px}.forum-area{font-size:10px;color:var(--muted)}.forum-post h3{font:20px/1.3 Georgia,serif;margin:13px 0 7px}.forum-post-body{font-size:12px;line-height:1.65;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.forum-post-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #f0e8ea;margin-top:13px;padding-top:11px;font-size:10px;color:var(--muted)}.appreciation{border:1px solid #efd1dc;background:#fff7fa;border-radius:18px;padding:6px 10px;font-size:10px;color:#9d5c73}.appreciation:hover{background:#f9e7ee}.appreciation.sample{color:#687687}#forum-error{font-size:11px;color:#a6465c;margin-top:8px}.nav[data-view=community]{color:#fff}.nav[data-view=community].active{color:white}@media(max-width:950px){.forum-layout{grid-template-columns:1fr}.compose-panel{position:static}.community-banner{align-items:flex-start;flex-wrap:wrap}.community-banner .outline{margin-left:44px}}@media(max-width:600px){.forum-feed-head{align-items:flex-start;flex-direction:column}.forum-feed-head select{width:100%;max-width:none}.community-banner{padding:14px}.community-banner .outline{margin-left:0}.forum-post{padding:15px}.forum-post h3{font-size:18px}} .review-notice{border:1px solid #c5dfeb;background:#eff8fb;padding:14px 18px;border-radius:9px;margin:15px 0;font-size:12px;color:#38566d}.review-notice p{margin:5px 0 0;font-size:11px;line-height:1.6}.pending-heading{font:17px Georgia;margin:24px 0 12px}.pending-card{border:1px solid #c5dfeb;background:#eff8fb;border-radius:9px;padding:13px;margin-top:10px}.pending-card h3{font:16px Georgia;margin:8px 0}.pending-card p{font-size:11px;line-height:1.5;margin:5px 0}.pending-state{font-size:9px;letter-spacing:1px;font-weight:750;color:#426f88}.pending-explainer{border-top:1px solid #c5dfeb;padding-top:8px} .mod-panel{margin:20px 0}.moderation-card{border:1px solid var(--border);border-radius:10px;padding:16px;margin:12px 0;background:#fff}.moderation-card h3{font:20px Georgia;margin:9px 0}.moderation-card p{font-size:12px;line-height:1.6}.moderation-copy{background:#f8f4f6;padding:12px;border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere}.moderation-actions{display:flex;gap:10px;flex-wrap:wrap}.moderation-actions .danger-outline{margin:0}.decision-row{border-bottom:1px solid var(--border);padding:10px 0;margin:0;font-size:11px;color:var(--muted)}.nav[data-view=moderator]{color:#477f9d}.nav[data-view=moderator].active{color:#fff} /* Final photo-background override: keep this after the texture layers above. */ body{background-color:var(--paper);background-image:url("assets/trans-coastal-texture.png");background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat} .app-shell{background-color:transparent;background-image:linear-gradient(rgba(235,242,243,.58),rgba(235,242,243,.58)),url("assets/trans-coastal-texture.png");background-size:auto,cover;background-position:center,center;background-repeat:no-repeat;background-attachment:scroll,fixed} .hero-art{background-image:linear-gradient(rgba(235,242,243,.28),rgba(235,242,243,.28)),url("assets/trans-coastal-texture.png");background-size:auto,cover;background-position:center,center;background-repeat:no-repeat} /* Coordinate the sidebar with the coastal canvas and lift key text with color. */ :root{--ink:#183b4a;--muted:#435d68;--green:#175f7a;--coral:#b83f72} .sidebar{background:#1b4558;border-right-color:#376579;color:#f4f8f9} .brand{color:#f7fbfc} .brand span{color:#f5a9b8} .region{color:#bdd8df} .nav{color:#edf5f7} .nav span{color:#80d2eb} .nav:hover:not(.active){background:#ffffff18;color:#fff} .nav.active{background:linear-gradient(115deg,#5bcefa,#f5a9b8);color:#183b4a;box-shadow:inset 0 0 0 1px #ffffff70;font-weight:700} .nav.active span{color:#183b4a} .nav small{color:inherit} .sidebar-bottom{border-top-color:#ffffff35} .sidebar-bottom strong{color:#fff} .sidebar-bottom p{color:#d4e5e9} .sidebar .text-button{color:#ffbfd0} .sidebar .community-dot{background:#e5ad42} h1,h2,.card-heading,.forum-post h3,.pending-heading,.community-banner strong{color:#183b4a} h1 em{color:#b83f72} .eyebrow{color:#287b98} .pronouns,.fine-print,.forum-area,.forum-post-foot{color:#435d68} .nav[data-view=moderator]{color:#edf5f7} .nav[data-view=moderator].active{color:#183b4a} /* New Bay Area banner artwork with trans-inspired color ribbons. */ .hero-art{height:clamp(180px,22vw,236px);border-radius:20px;background-color:#174e68;background-image:url("assets/trans-bay-banner.png");background-position:center 54%;background-size:cover;background-repeat:no-repeat} .hero-art:after{display:none} .art-label{z-index:2;background:#143b50d9;color:#fff;border:1px solid #ffffff65;border-radius:6px;padding:7px 10px;font-size:9px;letter-spacing:1px} /* Put the textured coastal art on the app page; keep banner art separate. */ .app-shell{background-color:transparent;background-image:linear-gradient(112deg,rgba(91,206,250,.18),rgba(239,131,170,.17)),linear-gradient(rgba(227,239,242,.36),rgba(227,239,242,.36)),url("assets/trans-coastal-texture.png");background-position:center,center,center;background-size:auto,auto,cover;background-repeat:no-repeat,no-repeat,no-repeat;background-attachment:scroll,scroll,fixed} /* Homepage support resources and preference filters. */ .support-panel{margin:20px 0 30px;padding:23px 25px;border:1px solid #bdd4df;border-radius:14px;background:linear-gradient(125deg,#f5fbfcf2,#faedf2f2);box-shadow:0 10px 28px #203d4a12} .support-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .support-heading h2{margin:5px 0 7px;font-size:27px} .support-heading p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;max-width:730px} .support-mark{font:42px/1 Georgia,serif;color:#bd5a7b;background:#fff7fa;border:1px solid #efccd8;border-radius:50%;width:60px;height:60px;display:grid;place-items:center;flex:0 0 auto} .support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px} .support-resource{padding:15px 16px;background:#ffffffd9;border:1px solid #d8e4e8;border-radius:10px} .support-resource h3{font:600 18px/1.35 Georgia,serif;color:#183b4a;margin:0 0 5px} .support-resource p{font-size:15px;line-height:1.5;color:#435d68;margin:0 0 12px} .resource-actions{display:flex;align-items:center;gap:9px 14px;flex-wrap:wrap} .resource-button{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:6px;background:#1b607b;color:#fff;text-decoration:none;font-size:14px;font-weight:700} .resource-button:hover{background:#174c62} .resource-text{color:#175f7a;text-decoration:underline;text-underline-offset:3px;font-size:14px;font-weight:650} .resource-button:focus-visible,.resource-text:focus-visible{outline:3px solid #e78ba9;outline-offset:3px} .support-footnote{font-size:13px;line-height:1.5;color:#435d68;margin:15px 0 0} @media(max-width:700px){.support-panel{padding:18px}.support-grid{grid-template-columns:1fr}.support-heading h2{font-size:24px}.support-mark{width:48px;height:48px;font-size:34px}} .events-panel{margin:24px 0 32px;padding:23px 25px;border:1px solid #bdd4df;border-radius:14px;background:linear-gradient(125deg,#edf7f9f2,#f8eef2f2);box-shadow:0 10px 28px #203d4a12} .events-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .events-heading h2{font-size:27px;margin:5px 0 7px} .events-heading p{font-size:16px;color:var(--muted);line-height:1.5;margin:0} .events-mark{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#e6f6fb;color:#287b98;font-size:27px} .event-filters{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0} .event-chip{padding:8px 13px;border:1px solid #b7ced8;border-radius:20px;background:#ffffffbf;color:#315969;font-size:14px;font-weight:650;cursor:pointer} .event-chip:hover{border-color:#65b7d3} .event-chip.selected{border-color:#175f7a;background:#175f7a;color:#fff} .events-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .event-card{display:flex;gap:14px;min-width:0;padding:15px;background:#ffffffd9;border:1px solid #d4e2e7;border-radius:10px} .event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:flex-start;min-width:58px;min-height:62px;padding:6px;background:linear-gradient(155deg,#e7f7fb,#fbeaf0);border:1px solid #d5e6eb;border-radius:8px;color:#1c566e} .event-date-day{font:700 24px/1 Georgia,serif} .event-date-month{font-size:12px;text-transform:uppercase;font-weight:750;letter-spacing:.8px} .event-card-body{min-width:0} .event-category{display:inline-block;color:#95566c;background:#faedf2;border:1px solid #eed5de;border-radius:12px;padding:3px 8px;font-size:12px;font-weight:700} .event-card h3{font:600 18px/1.35 Georgia,serif;color:#183b4a;margin:8px 0 5px} .event-time,.event-venue,.event-description{font-size:14px;line-height:1.45;color:#435d68;margin:4px 0;overflow-wrap:anywhere} .event-time{font-weight:700;color:#315969} .event-source{display:inline-block;margin-top:8px;color:#175f7a;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px} .events-footnote{font-size:13px;color:#435d68;line-height:1.5;margin:15px 0 0} @media(max-width:760px){.events-grid{grid-template-columns:1fr}.events-panel{padding:18px}.events-heading h2{font-size:24px}.events-mark{width:44px;height:44px;font-size:23px}} /* Tide crisis-support banner */ .crisis-banner { position: relative; z-index: 20; height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: linear-gradient(90deg, #f5a9b8, #e5f6fc, #5bcefa); border-bottom: 2px solid #126f91; color: #173b50; } .crisis-label { flex: 0 0 auto; font-size: 12px; letter-spacing: .6px; white-space: nowrap; } .crisis-window { flex: 1; min-width: 0; overflow: hidden; } .crisis-track { display: flex; align-items: center; gap: 42px; width: max-content; padding-left: 100%; animation: tide-crisis-scroll 45s linear infinite; } .crisis-track a { flex: 0 0 auto; color: #173b50; font-size: 13px; font-weight: 650; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } .crisis-pause { flex: 0 0 auto; border: 1px solid #126f91; border-radius: 7px; padding: 5px 12px; background: #fffafd; color: #17485b; font-size: 12px; font-weight: 700; } @keyframes tide-crisis-scroll { to { transform: translateX(-100%); } } .crisis-banner.paused .crisis-track, .crisis-banner:hover .crisis-track, .crisis-banner:focus-within .crisis-track { animation-play-state: paused; } /* Keep the existing fixed sidebar below the banner */ .sidebar { top: 52px; bottom: 0; height: auto; } @media (max-width: 600px) { .crisis-banner { gap: 8px; padding: 0 9px; } .crisis-label { font-size: 10px; } .crisis-track a { font-size: 12px; } .crisis-pause { padding: 5px 7px; } } @media (prefers-reduced-motion: reduce) { .crisis-track { animation: none; padding-left: 0; width: 100%; overflow-x: auto; } .crisis-window { overflow-x: auto; } } /* Seamless continuous crisis-support ticker */ .crisis-track { display: flex; gap: 0; padding-left: 0; width: max-content; animation: tide-seamless-scroll 38s linear infinite; } .crisis-group { display: flex; align-items: center; flex: 0 0 auto; gap: 42px; padding-right: 42px; } @keyframes tide-seamless-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .crisis-track { animation: none; transform: none; } } /* Tide Community Events introduction */ .community-events-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; margin: 0 0 24px; border: 1px solid #e9b2ca; border-radius: 16px; background: linear-gradient(115deg, #fbe0e9, #e5f6fc); } .community-events-intro h2 { color: #17485b; font-size: 27px; margin-bottom: 10px; } .community-events-intro p { max-width: 540px; margin: 0; color: #38566d; font-size: 15px; line-height: 1.6; } .community-events-intro .primary { flex-shrink: 0; white-space: nowrap; } @media (max-width: 750px) { .community-events-intro { flex-direction: column; align-items: stretch; padding: 22px; } .community-events-intro h2 { font-size: 23px; } .community-events-intro .primary { width: 100%; white-space: normal; } } /* Tide Community Events — soft woven background */ #event-submission-dialog { background-color: #faf9f7; background-image: radial-gradient(circle at 12% 12%, rgba(245, 172, 207, .16), transparent 36%), radial-gradient(circle at 88% 85%, rgba(122, 209, 232, .17), transparent 40%), repeating-linear-gradient( 45deg, rgba(75, 104, 122, .035) 0px, rgba(75, 104, 122, .035) 1px, transparent 1px, transparent 9px ), repeating-linear-gradient( -45deg, rgba(75, 104, 122, .025) 0px, rgba(75, 104, 122, .025) 1px, transparent 1px, transparent 9px ); border: 1px solid #d8d6dc; } #event-submission-dialog input:not([type="checkbox"]), #event-submission-dialog select, #event-submission-dialog textarea { background: rgba(255, 255, 255, .94); } /* Tide sidebar navigation groups */ .sidebar .nav-group-label { margin: 22px 12px 9px; padding: 8px 10px; border-left: 3px solid #f2a7c4; border-bottom: 1px solid rgba(91, 163, 193, 0.25); background: linear-gradient( 90deg, rgba(245, 169, 184, 0.13), rgba(91, 206, 250, 0.06) ); border-radius: 3px 8px 8px 3px; color: #476b7c; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .sidebar .nav:disabled { opacity: 0.65; cursor: not-allowed; } .sidebar .nav:disabled small { font-size: 10px; letter-spacing: 0.5px; } /* Keep upcoming sections visually consistent */ .sidebar .nav:disabled { opacity: 1; color: inherit; cursor: not-allowed; } .sidebar .nav:disabled span, .sidebar .nav:disabled small { opacity: 1; } /* Consistent Tide Community navigation colors */ .sidebar .nav[data-view="community"], .sidebar .nav[data-view="moderator"], .sidebar #education-nav, .sidebar #intimacy-nav { opacity: 1; color: #476b7c; } .sidebar .nav[data-view="community"].active, .sidebar .nav[data-view="moderator"].active { color: inherit; } /* Keep disabled sections readable */ .sidebar #education-nav:disabled, .sidebar #intimacy-nav:disabled { opacity: 1; -webkit-text-fill-color: currentColor; } /* Tide sidebar readability and layout repair */ .sidebar .nav-group-label { color: #f4d9e7 !important; background: rgba(255, 255, 255, 0.09); border-left: 3px solid #f5a9b8; border-bottom: none; margin: 18px 8px 8px; padding: 9px 12px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; } .sidebar .nav[data-view="community"], .sidebar .nav[data-view="moderator"], .sidebar #education-nav, .sidebar #intimacy-nav { color: #f1f7fa !important; opacity: 1 !important; -webkit-text-fill-color: #f1f7fa; } .sidebar #education-nav:disabled, .sidebar #intimacy-nav:disabled { opacity: 1 !important; } .sidebar nav .nav { box-sizing: border-box; width: 100%; min-width: 0; font-size: 14px; line-height: 1.35; text-align: left; } .sidebar nav .nav small { font-size: 9px; letter-spacing: 0; white-space: nowrap; } .sidebar nav .nav.active { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } /* Discover button — consistent sidebar styling */ .sidebar .nav[data-view="discover"] { box-sizing: border-box; width: 100%; min-width: 0; color: #f1f7fa !important; -webkit-text-fill-color: #f1f7fa; opacity: 1; font-size: 14px; line-height: 1.35; text-align: left; } .sidebar .nav[data-view="discover"].active { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } /* Tide Discover — rainbow Pride styling */ .sidebar .nav[data-view="discover"] { background: linear-gradient( 110deg, #e84c6f 0%, #f39b48 20%, #e6c85a 40%, #53b98b 60%, #4b9cdb 80%, #a57bd4 100% ) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; font-weight: 800; border-radius: 9px; border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 3px 12px rgba(0,0,0,0.16); text-shadow: 0 1px 3px rgba(0,0,0,0.55); transition: box-shadow 0.2s ease; } .sidebar .nav[data-view="discover"].active { background: linear-gradient( 110deg, #e84c6f, #f39b48, #e6c85a, #53b98b, #4b9cdb, #a57bd4 ) !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 4px 16px rgba(0,0,0,0.2); } .sidebar .nav[data-view="discover"]:hover { box-shadow: 0 4px 18px rgba(255,255,255,0.25); } /* Rainbow Discover — double-size lettering */ .sidebar .nav[data-view="discover"] { font-size: 28px !important; font-weight: 800; line-height: 1.2; padding: 16px 10px; letter-spacing: -0.5px; overflow-wrap: normal; } /* Rainbow Discover — balanced font size */ .sidebar .nav[data-view="discover"] { font-size: 21px !important; padding: 13px 10px; letter-spacing: 0; } /* Tide Discover — coordinated ocean-blue frames */ #discover .hero, #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { border: 2px solid #5bc0eb; border-radius: 14px; box-shadow: 0 3px 12px rgba(91, 192, 235, 0.13); } /* Subtle highlight for Discover frames */ #discover .hero:hover, #discover .community-events-intro:hover, #discover .events-panel:hover { border-color: #329fce; } /* Keep text and existing backgrounds unchanged */ /* Discover — thicker ocean-blue frames */ #discover .hero, #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { border-width: 3px; } /* Discover — deeper ocean-blue frames */ #discover .hero, #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { border-color: #2477A5; box-shadow: 0 3px 12px rgba(36, 119, 165, 0.18); } #discover .hero:hover, #discover .community-events-intro:hover, #discover .events-panel:hover { border-color: #185A82; } /* Discover welcome frame — comfortable interior spacing */ #discover .hero { padding: 24px 28px !important; box-sizing: border-box; } /* Discover welcome section — no frame */ #discover .hero, #discover .hero:hover { border: none !important; box-shadow: none !important; } /* Discover — subtle woven-paper texture inside blue frames */ #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { background-image: repeating-linear-gradient( 0deg, rgba(36, 119, 165, 0.045) 0px, rgba(36, 119, 165, 0.045) 1px, transparent 1px, transparent 7px ), repeating-linear-gradient( 90deg, rgba(36, 119, 165, 0.035) 0px, rgba(36, 119, 165, 0.035) 1px, transparent 1px, transparent 7px ); } /* Discover — opaque textured panels */ #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { background-color: #f2f7f8 !important; background-image: repeating-linear-gradient( 0deg, rgba(36, 119, 165, 0.045) 0px, rgba(36, 119, 165, 0.045) 1px, transparent 1px, transparent 7px ), repeating-linear-gradient( 90deg, rgba(36, 119, 165, 0.035) 0px, rgba(36, 119, 165, 0.035) 1px, transparent 1px, transparent 7px ) !important; } /* Discover — opaque transgender pride textured panels */ #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { background-color: #f8f9fc !important; background-image: repeating-linear-gradient( 0deg, rgba(245, 169, 184, 0.14) 0px, rgba(245, 169, 184, 0.14) 1px, transparent 1px, transparent 8px ), repeating-linear-gradient( 90deg, rgba(91, 206, 250, 0.13) 0px, rgba(91, 206, 250, 0.13) 1px, transparent 1px, transparent 8px ), linear-gradient( 135deg, #fceef3 0%, #ffffff 48%, #eaf7fd 100% ) !important; } /* Tide Discover — soft flowing transgender pride texture */ #discover .demo-note, #discover .community-events-intro, #discover .events-panel, #discover .profiles .profile-card { background-color: #f8f9fc !important; background-image: radial-gradient( ellipse at 8% 12%, rgba(245, 169, 184, 0.32) 0%, transparent 58% ), radial-gradient( ellipse at 92% 80%, rgba(91, 206, 250, 0.32) 0%, transparent 58% ), radial-gradient( ellipse at 55% 35%, rgba(255, 255, 255, 0.95) 0%, transparent 65% ), linear-gradient( 125deg, #fceaf1 0%, #ffffff 50%, #e6f5fd 100% ) !important; } /* Tide Education — The Library */ #education .panel { border: 3px solid #2477a5; border-radius: 14px; padding: 26px 30px; margin-bottom: 16px; background-color: #f8f9fc; background-image: radial-gradient( ellipse at 8% 12%, rgba(245, 169, 184, 0.32), transparent 58% ), radial-gradient( ellipse at 92% 80%, rgba(91, 206, 250, 0.32), transparent 58% ), radial-gradient( ellipse at 55% 35%, rgba(255, 255, 255, 0.95), transparent 65% ), linear-gradient( 125deg, #fceaf1 0%, #ffffff 50%, #e6f5fd 100% ); box-shadow: 0 3px 12px rgba(36, 119, 165, 0.18); } #education .panel h2 { color: #173e55; } /* Tide Library — external reading links */ #education .library-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 12px; border: 2px solid #2477a5; border-radius: 9px; background: #ffffff; color: #185a82; font-weight: 700; text-decoration: none; } #education .library-link:hover, #education .library-link:focus-visible { background: #e6f5fd; border-color: #185a82; } /* Tide Library — individual reading resource cards */ #education .library-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin-top: 24px; } #education .library-resource { background: #ffffff; border: 2px solid #2477a5; border-radius: 12px; padding: 22px; box-shadow: 0 3px 10px rgba(36, 119, 165, 0.10); } #education .library-resource h3 { color: #173e55; font-size: 19px; line-height: 1.35; margin: 0 0 12px; } #education .library-resource p { line-height: 1.6; } #education .library-resource .library-link { margin-top: 14px; } /* Tide Library — transgender pride reading buttons */ #education .library-link { background: linear-gradient( 115deg, #f5a9b8 0%, #fce5ec 25%, #ffffff 50%, #d9f3fd 75%, #5bcefa 100% ) !important; color: #173e55 !important; border: 2px solid #2477a5; border-radius: 10px; font-weight: 800; box-shadow: 0 3px 9px rgba(36, 119, 165, 0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } #education .library-link:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(36, 119, 165, 0.25); } #education .library-link:focus-visible { outline: 3px solid #173e55; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #education .library-link { transition: none; } #education .library-link:hover { transform: none; } } /* Tide Library — community message */ #education .library-community-note { max-width: 850px; margin: 34px 0 42px; padding: 30px 36px; background: linear-gradient( 125deg, rgba(245,169,184,0.90) 0%, rgba(255,255,255,0.96) 48%, rgba(91,206,250,0.85) 100% ); border: 3px solid #2477a5; border-radius: 18px; box-shadow: 0 8px 24px rgba(23,62,85,0.12); } #education .library-community-note .library-note-label { display: inline-block; margin: 0 0 14px; padding: 7px 13px; background: #173e55; color: #ffffff; border-radius: 30px; font-size: 12px; font-weight: 800; letter-spacing: 2px; } #education .library-community-note h2 { max-width: 680px; margin: 0 0 20px; color: #173e55; font-size: clamp(25px, 3vw, 35px); line-height: 1.2; } #education .library-community-note > p:not(.library-note-label) { max-width: 690px; margin: 0 0 14px; color: #173e55; font-size: 17px; line-height: 1.75; } #education .library-community-note > p:last-child { margin-bottom: 0; font-weight: 600; } @media (max-width: 600px) { #education .library-community-note { padding: 24px 20px; margin: 24px 0 32px; } } /* Tide Library — community statement accent */ #education .library-community-note .library-note-accent { display: block; max-width: 690px; margin: 0 0 22px; color: #a72565 !important; font-size: clamp(21px, 2.5vw, 28px) !important; font-weight: 800 !important; font-style: italic; line-height: 1.35 !important; } #education .library-community-note h2 { margin-bottom: 12px; } /* Tide Library — refined community statement */ #education .library-community-note .library-note-accent { font-size: clamp(17px, 2vw, 21px) !important; font-weight: 500 !important; font-style: italic; letter-spacing: 0.2px; line-height: 1.5 !important; color: #a72565 !important; margin: 0 0 20px; } /* Tide — scrollable left navigation */ @media (min-width: 769px) { .sidebar { position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #5bcefa #173e55; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: #173e55; } .sidebar::-webkit-scrollbar-thumb { background: #5bcefa; border-radius: 10px; } } /* Tide — transgender pride themed sidebar scrollbar */ @media (min-width: 769px) { .sidebar { scrollbar-width: thin; scrollbar-color: #f5a9b8 #173e55; } .sidebar::-webkit-scrollbar { width: 11px; } .sidebar::-webkit-scrollbar-track { background: linear-gradient( 180deg, #173e55, #225d80, #173e55 ); border-radius: 20px; } .sidebar::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #5bcefa 0%, #d9f3fd 25%, #ffffff 50%, #f8d0dc 75%, #f5a9b8 100% ); border: 2px solid #173e55; border-radius: 20px; min-height: 45px; } .sidebar::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, #f5a9b8, #ffffff, #5bcefa ); } } /* Tide — transgender pride themed sidebar scrollbar */ @media (min-width: 769px) { .sidebar { scrollbar-width: thin; scrollbar-color: #f5a9b8 #173e55; } .sidebar::-webkit-scrollbar { width: 11px; } .sidebar::-webkit-scrollbar-track { background: linear-gradient( 180deg, #173e55, #225d80, #173e55 ); border-radius: 20px; } .sidebar::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, #5bcefa 0%, #d9f3fd 25%, #ffffff 50%, #f8d0dc 75%, #f5a9b8 100% ); border: 2px solid #173e55; border-radius: 20px; min-height: 45px; } .sidebar::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, #f5a9b8, #ffffff, #5bcefa ); } } /* Tide sidebar layout fix — preserve independent scrolling */ @media (min-width: 769px) { .sidebar { position: fixed; top: 52px; left: 0; bottom: 0; height: calc(100vh - 52px); max-height: calc(100vh - 52px); overflow-y: auto; overflow-x: hidden; } } /* Tide Health & Wellness — clean, readable layout */ #health .library-health { padding: 28px; } #health .library-health .library-resources { display: grid; gap: 16px; } #health .library-health .library-resource { padding: 20px; border: 1px solid #c8e1eb; border-radius: 10px; background: rgba(255,255,255,0.92); box-shadow: none; } #health .library-health .library-resource h3 { font-size: 18px; line-height: 1.4; margin: 0 0 12px; } #health .library-health .library-resource p, #health .library-health .library-resource a { font-size: 15px; line-height: 1.65; } #health .care-region-heading, #health .care-region-group > h3 { font-size: 21px; color: #225d80; margin: 30px 0 18px; padding-bottom: 10px; border-bottom: 2px solid #f5a9b8; } #health .care-region-group { margin-top: 28px; } #health .care-region-group .library-resources { margin-top: 16px; } /* Tide Health & Wellness — coastal linen palette */ #health .library-health { background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(45,76,88,.025) 5px 6px), repeating-linear-gradient(90deg, transparent 0 6px, rgba(45,76,88,.02) 6px 7px), linear-gradient(145deg, #f2f3ef, #e5eeeb 55%, #eeeaf0); border: 1px solid #b8cac8; border-radius: 16px; } #health .care-region-heading, #health .care-region-group > h3 { color: #284d5c; background: transparent; border: 0; border-bottom: 1px solid #9db9b7; border-radius: 0; padding: 10px 0 12px; } #health .library-health .library-resource { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(55,85,92,.018) 8px 9px), #fafaf7; border: 1px solid #c8d4d0; border-left: 3px solid #7eaaa8; border-radius: 9px; box-shadow: 0 2px 8px rgba(28,57,66,.045); } #health .care-region-group .library-resource { border-left-color: #a69caf; } #health .library-resource h3 { color: #294f60; } #health .library-resource p { color: #34464c; }