/* ============================================================ PROFILE.CSS — Shared styles for all 9 type profile pages Requires base.css loaded first ============================================================ */ /* --- Accent color system (set via data-center on ) --- */ :root{ --accent-color:var(--ment); --accent-06:rgba(96,165,250,.06); --accent-10:rgba(96,165,250,.10); --accent-16:rgba(96,165,250,.16); --accent-20:rgba(96,165,250,.20); --accent-35:rgba(96,165,250,.35); --accent-42:rgba(96,165,250,.42); --accent-50:rgba(96,165,250,.50); --accent-95:rgba(96,165,250,.95); } body[data-center="instinctif"]{ --accent-color:var(--inst); --accent-06:rgba(251,191,36,.06); --accent-10:rgba(251,191,36,.10); --accent-16:rgba(251,191,36,.16); --accent-20:rgba(251,191,36,.20); --accent-35:rgba(251,191,36,.35); --accent-42:rgba(251,191,36,.42); --accent-50:rgba(251,191,36,.50); --accent-95:rgba(251,191,36,.95); } body[data-center="emotionnel"]{ --accent-color:var(--emo); --accent-06:rgba(244,114,182,.06); --accent-10:rgba(244,114,182,.10); --accent-16:rgba(244,114,182,.16); --accent-20:rgba(244,114,182,.20); --accent-35:rgba(244,114,182,.35); --accent-42:rgba(244,114,182,.42); --accent-50:rgba(244,114,182,.50); --accent-95:rgba(244,114,182,.95); } /* Type 9 uses green accent */ body[data-center="instinctif-9"]{ --accent-color:#6ee7b7; --accent-06:rgba(52,211,153,.06); --accent-10:rgba(52,211,153,.10); --accent-16:rgba(52,211,153,.16); --accent-20:rgba(52,211,153,.20); --accent-35:rgba(52,211,153,.35); --accent-42:rgba(52,211,153,.42); --accent-50:rgba(52,211,153,.50); --accent-95:rgba(52,211,153,.95); } /* ========================================================== NAVIGATION — Sticky top bar ========================================================== */ .type-nav{ background:rgba(15,23,42,0.95); border-bottom:1px solid rgba(255,255,255,0.1); position:sticky;top:0;z-index:1000; backdrop-filter:blur(10px); padding:10px 0; margin-bottom:20px; } .nav-container{ max-width:1100px;margin:0 auto;padding:0 16px; display:flex;justify-content:space-between;align-items:center; gap:12px; } .nav-pill{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px; min-height:var(--touch-min); border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:rgba(238,242,255,.92); font-weight:800;text-decoration:none; font-size:13px;opacity:.95; white-space:nowrap; } .nav-pill:hover{ border-color:var(--accent-42); background:var(--accent-10); color:#fff; transform:translateY(-1px); text-decoration:none; } .type-center{ display:flex;align-items:center;gap:10px; flex-wrap:wrap;justify-content:center; } .type-label{ font-size:12px;font-weight:900; color:rgba(168,182,221,.95); border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); padding:6px 10px;border-radius:999px; } .type-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .t-link{ width:40px;height:40px; min-width:40px;min-height:40px; display:flex;align-items:center;justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,0.12); color:#94a3b8;font-weight:900;text-decoration:none; font-size:14px; background:rgba(255,255,255,0.03); } .t-link:hover{ border-color:var(--accent-color); color:#fff; background:var(--accent-10); text-decoration:none; } .t-link.active{ background:var(--accent-95); color:#061022; border-color:var(--accent-95); box-shadow:0 0 12px var(--accent-35); } /* ========================================================== LAYOUT ========================================================== */ .wrap{max-width:1100px;margin:0 auto;padding:0 16px 28px} .top{ display:flex;gap:16px; align-items:stretch;justify-content:space-between; flex-wrap:wrap;margin-bottom:18px; } .hero{ flex:1 1 700px; background:linear-gradient(180deg,rgba(21,31,58,.78),rgba(12,19,36,.74)); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); padding:18px 18px 16px; backdrop-filter:blur(10px); } .hero h1{ margin:0 0 10px; font-size:clamp(22px,3vw,30px); letter-spacing:.2px; color:rgba(248,250,255,.98); } .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.07); border:1px solid var(--line); padding:7px 10px;border-radius:999px; font-size:12px;color:rgba(255,255,255,.92); white-space:nowrap; } span.dot{width:9px;height:9px;border-radius:50%} .side{ flex:0 1 360px; display:grid;gap:14px; align-content:start; } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 14px 12px; backdrop-filter:blur(10px); } .card h2{ margin:0 0 10px; font-size:15px;letter-spacing:.35px; color:rgba(242,246,255,.96); } /* ========================================================== TABS ========================================================== */ .tabs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0} .tab{ padding:10px 16px; min-height:var(--touch-min); border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:rgba(255,255,255,.92); font-weight:900;font-size:13px; cursor:pointer;user-select:none; -webkit-tap-highlight-color:transparent; } .tab[aria-selected="true"]{ background:var(--accent-16); border-color:var(--accent-50); box-shadow:0 0 14px var(--accent-06); } .tab:hover{ border-color:var(--accent-42); background:var(--accent-10); transform:translateY(-1px); } /* Tab panel entrance animation */ [role="tabpanel"]{ animation:fadeSlideIn .28s var(--motion-ease); } /* ========================================================== CONTENT GRID ========================================================== */ .grid{ display:grid;grid-template-columns:1fr; gap:20px;margin-top:14px; } /* ========================================================== ACCORDIONS (details/summary) ========================================================== */ details{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } details+details{margin-top:2px} details[open]{border-left:3px solid var(--accent-color)} summary{ list-style:none; cursor:pointer; padding:16px 16px 14px; display:flex;align-items:center; justify-content:space-between;gap:12px; user-select:none; -webkit-tap-highlight-color:transparent; background:linear-gradient(90deg,var(--accent-06),rgba(255,255,255,0)); transition:background-color var(--motion-fast) var(--motion-ease); } summary::-webkit-details-marker{display:none} summary:hover{ background:linear-gradient(90deg,var(--accent-10),rgba(255,255,255,0)); } .sumTitle{display:flex;flex-direction:column;gap:0;min-width:0} .sumTitle b{ font-size:16px;line-height:1.28; letter-spacing:.2px; color:rgba(248,250,255,.98); display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .sumTitle span{ font-size:12px;line-height:1.35; color:rgba(255,255,255,.66); } .chev{ width:10px;height:10px; border-right:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7); transform:rotate(45deg); transition:.18s ease; margin-right:4px;flex:0 0 auto; } details[open] .chev{transform:rotate(225deg);margin-top:4px} .content{ padding:14px 16px 18px; border-top:1px solid var(--line); } /* Accordion open animation */ details[open] .content{animation:fadeSlideIn .28s var(--motion-ease)} @keyframes fadeSlideIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } /* ========================================================== BLOCKS & RICH TEXT ========================================================== */ .block{ background:rgba(8,13,25,.34); border:1px solid rgba(255,255,255,.10); border-radius:18px;padding:16px; } .raw{display:none} .rt{ max-width:68ch; font-size:15.5px; line-height:1.9; letter-spacing:.005em; color:rgba(228,236,255,.86); } .rt p{margin:0 0 12px;color:rgba(231,239,255,.88)} .rt p+p{margin-top:1px} .rt .gap{height:10px} .rt .labelRow{ display:flex;gap:12px;flex-wrap:wrap;align-items:baseline; margin:0 0 12px;padding:11px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); } .rt .label{ color:var(--accent-color); font-weight:950;letter-spacing:.25px; font-size:12.5px;text-transform:none; } .rt .value{ color:rgba(231,239,255,.88); font-size:15px;flex:1 1 auto; min-width:220px;line-height:1.72; } .rt .subhead{ margin:4px 0 12px;padding:10px 12px; border-radius:12px; border:1px solid var(--accent-20); background:linear-gradient(180deg,var(--accent-10),rgba(0,0,0,.10)); color:rgba(255,255,255,.96); font-weight:950;letter-spacing:.2px; } .rt .subhead .t{color:var(--accent-color);font-weight:950} .rt ul{margin:2px 0 12px 20px;padding:0} .rt li{margin:0 0 10px;color:rgba(231,239,255,.88);line-height:1.76} .rt ul.dash{list-style-type:"- "} .rt ul.arrow{list-style-type:"→ "} .rt ul.dot{list-style-type:"• "} .rt li .k{color:var(--accent-color);font-weight:950} /* ========================================================== SECTION HEADER & BADGE ========================================================== */ .sectionHeader{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px} .badge{ display:inline-flex;align-items:center;gap:8px; font-size:12px;letter-spacing:.25px; padding:6px 10px;border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:rgba(255,255,255,.92); width:fit-content;font-weight:900; } /* ========================================================== BUTTONS ========================================================== */ .btn,button,a.btn{ cursor:pointer; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:rgba(255,255,255,.94); padding:12px 16px; min-height:var(--touch-min); border-radius:14px; font-weight:900;letter-spacing:.15px; text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:8px; user-select:none; -webkit-tap-highlight-color:transparent; transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .btn:hover,button:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); transform:translateY(-1px); text-decoration:none; } .btn:active,button:active{transform:translateY(0)} .btn.primary{ background:var(--accent-16); border-color:var(--accent-35); } .btn.primary:hover{ background:var(--accent-20); border-color:var(--accent-42); } /* ========================================================== SUBTYPES ========================================================== */ .subtypeBtns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .subtypeBtns .btn{padding:12px} .subtypeBtns .btn.active{ background:var(--accent-16); border-color:var(--accent-35); box-shadow:0 0 0 4px var(--accent-06); } @media(max-width:860px){ .subtypeBtns{grid-template-columns:1fr} } /* ========================================================== LEVEL RANGE ========================================================== */ .rangeWrap{display:grid;gap:10px} .rangeLine{ width:100%;padding:12px 12px 10px; border:1px solid var(--line); background:rgba(0,0,0,.20);border-radius:16px; } input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--green)} .trackLabel{ display:flex;justify-content:space-between;gap:10px; font-size:11px;color:var(--muted);font-weight:900; } .bandPills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .pill{ display:inline-flex;align-items:center;gap:8px; padding:6px 10px;border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); font-size:12px;color:rgba(255,255,255,.92);font-weight:900; } /* ========================================================== BOTTOM BAR (hidden on profile pages — using inline nav) ========================================================== */ .bottomBar{display:none!important} /* ========================================================== MODAL / SHEET (subtypes) ========================================================== */ .modal{ position:fixed;inset:0; display:none;align-items:flex-end;justify-content:center; z-index:2000;padding:18px; background:rgba(0,0,0,.55); backdrop-filter:blur(10px); } .modal[aria-hidden="false"]{display:flex} .sheet{ width:min(980px,100%); max-height:86vh;overflow:auto; border-radius:22px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.22)); box-shadow:0 25px 90px rgba(0,0,0,.65); } .sheetHeader{ position:sticky;top:0;z-index:1; background:rgba(10,14,28,.78); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.10); padding:12px 14px; display:flex;gap:10px;align-items:center; justify-content:space-between;flex-wrap:wrap; } .sheetHeader .title{display:flex;flex-direction:column;gap:2px;min-width:0} .sheetHeader .title b{font-size:15px;letter-spacing:.2px;color:rgba(255,255,255,.96)} .sheetHeader .title span{ color:var(--muted);font-size:12px;font-weight:900; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sheetBody{padding:14px} .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media(max-width:980px){.cols{grid-template-columns:1fr}} /* ========================================================== READING PROGRESS BAR ========================================================== */ .readProgress{ position:fixed;top:0;left:0;height:3px; background:linear-gradient(90deg,var(--accent-color),var(--green)); z-index:1001;width:0%; transition:width .1s linear; pointer-events:none; } /* ========================================================== SCROLL-TO-TOP BUTTON ========================================================== */ .scrollTop{ position:fixed;bottom:24px;right:24px; width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(15,23,42,.92); backdrop-filter:blur(10px); color:white;font-size:20px;cursor:pointer; display:flex;align-items:center;justify-content:center; opacity:0;transform:translateY(10px); transition:opacity .3s,transform .3s,background .18s,border-color .18s; z-index:998; box-shadow:0 8px 24px rgba(0,0,0,.45); } .scrollTop.visible{opacity:1;transform:translateY(0)} .scrollTop:hover{ background:var(--accent-10); border-color:var(--accent-42); transform:translateY(-2px); } /* ========================================================== PREV / NEXT NAVIGATION ========================================================== */ .typeNavBottom{ display:flex;justify-content:space-between;gap:12px; margin-top:28px;padding:20px 0 8px; border-top:1px solid var(--line); } .typeNavBottom a{ display:flex;flex-direction:column;gap:4px; padding:14px 18px;border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); text-decoration:none;color:var(--text); min-width:160px;min-height:var(--touch-min); } .typeNavBottom a:hover{ border-color:var(--accent-42); background:var(--accent-06); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); text-decoration:none; } .typeNavBottom .navLabel{ font-size:11px;text-transform:uppercase; letter-spacing:.6px;color:var(--muted);font-weight:900; } .typeNavBottom .navType{font-weight:900;font-size:15px} .typeNavBottom .next{text-align:right;margin-left:auto} /* ========================================================== PALMER TAB STYLES ========================================================== */ .palmerQuote{ padding:16px 20px;margin-bottom:12px; border-left:4px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03); border-radius:0 12px 12px 0; font-size:16px;line-height:1.6; color:rgba(255,255,255,.85); } .palmerMeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .palmerChip{ padding:4px 12px;border-radius:20px; font-size:12px;font-weight:700; font-family:ui-sans-serif,system-ui,sans-serif; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.12); } .palmerChip.travers{background:rgba(251,113,133,.12);color:#fb7185;border-color:rgba(251,113,133,.25)} .palmerChip.essence{background:rgba(52,211,153,.12);color:#34d399;border-color:rgba(52,211,153,.25)} .palmerSousTypes{ padding:10px 16px;margin-bottom:16px; border-radius:10px; background:rgba(255,255,255,.04); font-size:14px;color:rgba(255,255,255,.75);line-height:1.5; } .palmerSousTypes strong{color:rgba(255,255,255,.9)} .palmerSection{margin-bottom:2px} .palmerSection .content{padding:4px 8px 16px} .palmerList{ list-style:none;padding:0;margin:0; display:grid;gap:8px; } .palmerList li{ position:relative; padding:8px 8px 8px 24px; font-size:14px;line-height:1.65; color:rgba(255,255,255,.88); border-bottom:1px solid rgba(255,255,255,.06); } .palmerList li:last-child{border-bottom:none} .palmerList li::before{ content:"—";position:absolute;left:4px; color:rgba(255,255,255,.3);font-weight:700; } /* ========================================================== INTERACTIVE TRANSITIONS ========================================================== */ .nav-pill,.t-link,.tab,.btn,button,a.btn,.typeNavBottom a,.scrollTop{ transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } /* ========================================================== MOBILE RESPONSIVE ========================================================== */ @media(max-width:640px){ .typeNavBottom{flex-direction:column} .typeNavBottom a{min-width:unset} .typeNavBottom .next{text-align:left;margin-left:0} .scrollTop{bottom:16px;right:16px;width:42px;height:42px} summary{padding:14px 14px 12px} .content{padding:12px 14px 16px} .rt{max-width:100%;font-size:15px;line-height:1.84} .nav-container{padding:0 12px;gap:8px} .nav-pill{padding:8px 12px;font-size:12px} .type-label{display:none} .t-link{width:36px;height:36px;min-width:36px;min-height:36px;font-size:13px} } /* ========================================================== PRINT STYLESHEET ========================================================== */ @media print{ .type-nav,.bottomBar,.scrollTop,.readProgress, .modal,.tabs,.barInfo,.typeNavBottom{display:none!important} .hero,.card,details{ box-shadow:none!important; border:1px solid #ccc!important; background:#fff!important; backdrop-filter:none!important; } details{page-break-inside:avoid} details[open]{border-left:3px solid #333!important} .rt{max-width:100%;color:#222} .rt p,.rt li,.rt .value{color:#333} .rt .label,.rt .subhead .t,.rt li .k{color:#111} .wrap{max-width:100%;padding:0} }