* { margin: 0; padding: 0; } :root { --border-dash-after: url("data:image/svg+xml,%3Csvg width='100%25' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='1' x2='100%25' y2='1' stroke='%23cccccc' stroke-width='2' stroke-dasharray='12,12' stroke-dashoffset='12'/%3E%3C/svg%3E"); --border-dash-before: url("data:image/svg+xml,%3Csvg width='100%25' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='1' x2='100%25' y2='1' stroke='%23cccccc' stroke-width='2' stroke-dasharray='12,12' stroke-dashoffset='0'/%3E%3C/svg%3E"); /* dark theme */ --dark-colour-primary: #eee; /* the lightest grey */ --dark-colour-secondary: #ddd; /* lighter grey */ --dark-colour-outline: #fff; /* white */ --dark-colour-remark: #1e90ff; /* light blue */ --dark-bg-colour-primary: #383c4a; /* silvery steel */ --dark-bg-colour-secondary: #daa520; /* golden */ --dark-bg-colour-secondary-rgb: 218, 165, 32; /* golden RGB */ --dark-border-filter: brightness(0) invert(1); /* light theme */ --light-colour-primary: #000; /* black */ --light-colour-secondary: #666; /* grey */ --light-colour-outline: #ccc; /* light grey */ --light-colour-remark: #1e90ff; /* light blue */ --light-bg-colour-primary: #eee; /* the lightest grey */ --light-bg-colour-secondary: #daa520; /* golden */ --light-bg-colour-secondary-rgb: 218, 165, 32; /* golden RGB */ --light-border-filter: none; } html { min-height: 666px; min-width: 666px; } :root.theme-dark { --forced-colour-primary: var(--dark-colour-primary); --forced-colour-secondary: var(--dark-colour-secondary); --forced-colour-outline: var(--dark-colour-outline); --forced-colour-remark: var(--dark-colour-remark); --forced-bg-colour-primary: var(--dark-bg-colour-primary); --forced-bg-colour-secondary: var(--dark-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--dark-bg-colour-secondary-rgb); --forced-border-filter: var(--dark-border-filter); } :root.theme-light { --forced-colour-primary: var(--light-colour-primary); --forced-colour-secondary: var(--light-colour-secondary); --forced-colour-outline: var(--light-colour-outline); --forced-colour-remark: var(--light-colour-remark); --forced-bg-colour-primary: var(--light-bg-colour-primary); --forced-bg-colour-secondary: var(--light-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--light-bg-colour-secondary-rgb); --forced-border-filter: var(--light-border-filter); } #light:checked ~ main { --forced-colour-primary: var(--light-colour-primary); --forced-colour-secondary: var(--light-colour-secondary); --forced-colour-outline: var(--light-colour-outline); --forced-colour-remark: var(--light-colour-remark); --forced-bg-colour-primary: var(--light-bg-colour-primary); --forced-bg-colour-secondary: var(--light-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--light-bg-colour-secondary-rgb); --forced-border-filter: var(--light-border-filter); } #dark:checked ~ main { --forced-colour-primary: var(--dark-colour-primary); --forced-colour-secondary: var(--dark-colour-secondary); --forced-colour-outline: var(--dark-colour-outline); --forced-colour-remark: var(--dark-colour-remark); --forced-bg-colour-primary: var(--dark-bg-colour-primary); --forced-bg-colour-secondary: var(--dark-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--dark-bg-colour-secondary-rgb); --forced-border-filter: var(--dark-border-filter); } main { position: absolute; top: 0; --colour-primary: var(--forced-colour-primary, var(--default-colour-primary, var(--light-colour-primary))); --colour-secondary: var(--forced-colour-secondary, var(--default-colour-secondary, var(--light-colour-secondary))); --colour-outline: var(--forced-colour-outline, var(--default-colour-outline, var(--light-colour-outline))); --colour-remark: var(--forced-colour-remark, var(--default-colour-remark, var(--light-colour-remark))); --bg-colour-primary: var( --forced-bg-colour-primary, var(--default-bg-colour-primary, var(--light-bg-colour-primary)) ); --bg-colour-secondary: var( --forced-bg-colour-secondary, var(--default-bg-colour-secondary, var(--light-bg-colour-secondary)) ); --bg-colour-secondary-rgb: var( --forced-bg-colour-secondary-rgb, var(--default-bg-colour-secondary-rgb, var(--light-bg-colour-secondary-rgb)) ); --border-filter: var(--forced-border-filter, var(--default-border-filter, var(--light-border-filter))); background-color: var(--bg-colour-primary); } /* :not(li):not(.exCompany) > a { white-space: nowrap; } */ a:not(:hover) { text-decoration: none; } a:not(.btn):not(.silent)[href] { color: #3f9f3f; } body { position: relative; } details > ul ~ ul { margin-top: -1rem; } hr { margin: 0; padding: 0; position: relative; width: 100%; } picture { display: inline-block; img, source { /* width: 100%; */ height: 100%; /* object-fit: contain; /* ensure correct aspect ratio */ object-fit: cover; object-position: center; } } table { border-spacing: 0; width: 100%; } .block { display: block; } .break { display: none; } .flex { display: flex; } .invisible { position: absolute; visibility: hidden; } .anchor_section, .anchor_details { display: inline-block; height: 1px; position: absolute; } .header { font-size: 111%; text-transform: uppercase; } .keywords { display: inline-block; /* opacity: 0.4; */ padding: 0 0.85rem; } .paragraph:not([data-filtered-display="1"]) { display: none; } .paragraph:not(.placeholder):not([data-filtered-display]):nth-of-type(-n+5) { display: block; /* ~ .paragraph:not([data-filtered-display]) { border-top: 2px solid var(--colour-outline); } */ } .paragraph > summary { > *:not(.info):not(.keywords):not(.radio-toggle):not(.flex) { padding: 0 2rem 0 1.5rem; } .blockHeader { margin-left: -1.7rem; } } details:not(:first-of-type) .blockHeader { display: none; } /* #kw_l { margin: -1.5rem 0.7rem 0 0; } */ #content { box-sizing: border-box; margin: 0; padding: 0; position: relative; } #columns { background: inherit; break-inside: avoid; columns: 2; } #top { position: absolute; } #keywords + .mc { display: list-item; list-style-type: none; margin-bottom: 0; .targetable { border: 0; ul { list-style-type: none; } } } #dateGen { break-before: avoid; padding: 0.5rem 0.75rem; page-break-after: always; text-align: right; .date-group::after { break-before: avoid; content: "."; float: right; } } .paragraph .blockHeader { margin-left: -0.2rem; margin-top: -0.4rem; padding-bottom: 1rem !important; width: 100%; } .mc { margin: 2rem 0.75rem 0; position: relative; } .exInfo { display: inline-block; list-style-position: outside; /* padding-left: 3rem; padding-right: 3rem; */ width: 95%; a { display: inline-block; white-space: nowrap; } } .exInfo + .exInfo { padding-bottom: 0; padding-top: 0; } /* .exCommon ~ .info .exInfo { padding-right: 1.75rem; } */ .exLogo { background-position: right; background-repeat: no-repeat; background-size: contain; height: 50%; margin-right: -2rem; position: absolute; right: 2rem; top: 20%; width: 25%; } .exInfo { padding-left: 1.25rem; } .info { max-width: 95%; padding-left: 1rem; } #dn { padding: 0; div { align-items: baseline; display: flex; font-size: 90%; margin-top: -1rem; padding: 0.5rem 1rem 0.75rem; text-align: right; span { display: inline; padding: 0; } #filter-button { margin-right: auto; &:has(+ span #dn_count.max) { #show-all { display: none; } } &:has(+ span #dn_count:not(.max)) { #change-filters { display: none; } } } #filtered-label { white-space: nowrap; } } } #intro_w picture:not(.qrCode) { display: inline-flex; } #summary tr td:last-child { text-align: left; } ul > li > ul > li { list-style-position: outside; margin-left: 15px; } .name, .specialty { font-weight: normal; } #blockquote { break-after: avoid; display: block; font-size: 111%; font-style: oblique; font-weight: normal; opacity: 0.7; text-align: center; &::after, &::before { font-size: 175%; margin-left: -0.5rem; } &::before { content: "“ "; } &::after { content: " ”"; } u { text-decoration-style: dotted; } } .blockHeader { display: flex; margin-bottom: -1.2rem; .header, .headline { display: table-cell; } .header { break-after: avoid; color: #ccc; font-style: italic; font-weight: normal; margin-top: -1.35rem; white-space: nowrap; } } .headline sub { margin-left: 0.35%; width: 101%; } .underline sub { display: flex; margin-left: 0.5%; margin-top: -0.3rem; width: 100.75%; } .headline, .underline { width: 100%; sub { /* line at the beginning and end of .mc */ background-color: var(--colour-outline); border-color: var(--colour-outline); border-style: solid; border-width: 1px; display: block; height: 0; position: relative; right: 1%; } } .header { font-size: 80%; } .targetable.paragraph { border-color: var(--colour-outline); border-style: solid; border-width: 0 2px; padding: 1rem 0; &.filterable:has(+ .break ~ .targetable.paragraph)::after { background-image: var(--border-dash-after); bottom: -1rem; content: ""; display: block; height: 2px; left: 1px; position: relative; right: 0; } &[data-filtered-display="1"] ~ .paragraph.targetable::before { background-image: var(--border-dash-before); content: ""; display: block; height: 2px; left: 0; margin-top: -2px; position: relative; right: 0; top: -1rem; } & .underline { margin-bottom: -0.7rem; margin-left: -0.2rem; margin-top: 1rem; width: 101%; } } .exCommon { sub { line-height: 1.5rem; padding-top: 0.75rem; } .exMain > *:not(.exCompany) { display: flex; } } .exCompany, .exIndustry { font-size: 90%; } .exCompany { display: inline-block; /* min-width: 110px; */ } .exCommon + hr { margin: 3%; width: 95%; } .exIndustry { line-height: 1rem; margin-left: -0.55rem; } .exMain { margin-left: -2rem; position: relative; } .exMain > *:not(.exLogo) { width: 75%; } .exLocation { white-space: nowrap; } .header { margin-top: -1.6rem; } .inline-flex-column { display: inline-flex; flex-direction: column; } .underline { margin-bottom: 1rem; } .linkLabel { white-space: nowrap; } .full, .hidden { display: none; } .mc .paragraph { div:not([class]), .exMain, .exIndustry { padding: 0.25rem 1rem; } } #avatar { border-radius: 50%; height: auto; max-width: 240px; width: 90%; /* z-index: 1; */ img, source { border-radius: 50%; } } #goal { font-size: 111%; text-align: center; } #header { white-space: nowrap; .name, .specialty { display: inline-block; } } #intro_w { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0; margin-top: 0; padding-right: 4rem; row-gap: 1.5rem; text-align: center; width: 95%; h2 { font-size: 200%; } table { width: 100%; } #locales { display: grid; float: right; padding-left: 2rem; text-align: left; width: auto; tbody, thead { display: table; /* width: 100%; */ } thead { width: 100%; td { &:not(:first-of-type) { border-top: 2px solid var(--colour-outline); } &:nth-of-type(2) { border-left: 2px solid var(--colour-outline); border-top-left-radius: 1rem; } &:last-of-type { border-right: 2px solid var(--colour-outline); border-top-right-radius: 1rem; } } .extraPad { display: none; } .icon { padding-left: 1rem; } } tbody { border-bottom: 2px solid var(--colour-outline); border-bottom-right-radius: 1rem; border-right: 2px solid var(--colour-outline); margin-left: -1.5rem; tr { &:last-of-type { border-bottom: 2px solid var(--colour-outline); border-bottom-right-radius: 1rem; td:first-of-type { border-bottom: 2px solid var(--colour-outline); } td:first-of-type, td:last-of-type { border-bottom-right-radius: 1rem; } } /* td:nth-of-type(2) { padding-right: 1rem; } */ td:first-of-type { border-right: 2px solid var(--colour-outline); } picture { margin-left: 15px; .locale { background-color: #fff; display: table-column; height: 20px; } } } } .extraPad { width: 1.5rem; .ep { width: 1.5rem; } } .icon { padding-right: 0.15rem; width: 33px; } .langNative { font-weight: bold; } .padder { padding-right: 0.5rem; /* display: inline-flex; */ padding-top: 0.5rem; } } #summary { padding: 0 2rem; width: auto; a span { font-weight: bold; } tbody { display: initial; } tr td:first-child { picture:not(.qrCode) img { height: 40px; width: 40px; } } .linkLabel, .padder a { display: inline-flex; } } } #resources { break-inside: avoid; } #professional + .mc { break-before: recto; } #badges { break-inside: avoid; margin-bottom: -1.5rem; position: relative; width: 100%; .caption { display: block; padding-bottom: 0.2rem; position: relative; text-align: left; width: 100%; } #hashtags { display: block; font-weight: normal; padding: 0 0.4rem; text-align: left; option { display: inline-block; &:hover { text-decoration: underline; } &:not(:last-of-type)::after { content: ", "; padding-right: 0.5rem; } } } } #about, #badges table, #goal { border: 2px solid var(--colour-outline); border-radius: 8px; box-sizing: border-box; } #about, #goal { padding: 1rem 1.5rem; } #goal_w { margin-top: 1rem; } #badges table { caption-side: bottom; max-width: 100%; position: relative; text-align: center; width: 100%; } #ed { text-align: left; } #inProd, #locales sub { font-style: italic; } #locales sub { font-size: 60%; } .date-group input:disabled { background: transparent; border: 1px solid transparent; font: inherit; } .date-group[data-exclude="editor"] input { display: none; } .date-sep:before { content: " –"; display: inline; } .dates::after { content: attr(data-duration); display: inline; font-style: initial; font-weight: initial; } .label-date-checkbox { &:checked + .date-group { background-color: #fff; border: 1px solid; color: #000; .view, .localFormat { display: none; } .edit { align-items: center; border-radius: 0.3rem; display: inline-flex; padding-left: 0.5rem; white-space: nowrap; input { border: 0; font: inherit; outline: none; } } } &:not(:checked) + .date-group { border: 1px solid transparent; .view { align-items: center; border-radius: 0.3rem; display: inline-flex; .localFormat:empty { display: none; } } .edit, .calendarButton { display: none; } } } .date-group { align-items: center; border-radius: 0.5rem; display: inline-flex; font-family: monospace; font-style: normal; font-weight: normal; padding: 0; white-space: nowrap; } .date-group .calendarButton { background: none; border: none; font-size: inherit; line-height: 1rem; padding: 0.5rem; } body:not(.dragging) .date-group .calendarButton { cursor: pointer; } .datePicker { visibility: hidden; width: 1px; } .save:focus { outline: none; } .inputYear { width: 4ch; } .inputMonth, .inputDay { width: 2ch; } .datePicker[type="text"] { background: none; border: none; border-bottom: 1px solid transparent; color: #000; font: inherit; outline: none; padding: 0; } body:not(.dragging) .datePicker[type="text"] { cursor: text; } .localFormat:empty + .datePicker { visibility: visible; width: 10ch; } :root { touch-action: pan-x pan-y; --bg-colour-button: #ddd; /* grey */ --colour-black: #000; --colour-white: #fff; --colour-black-rgb: 0, 0, 0; } @font-face { font-display: swap; font-family: "SUSE"; font-weight: 400; src: url("../_fonts/webfonts/suse/SUSE-Regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "SUSE"; font-weight: 700; src: url("../_fonts/webfonts/suse/SUSE-SemiBold.woff2") format("woff2"); } input, textarea, [contenteditable] { font-size: 16px !important; touch-action: pan-x pan-y; } @media (prefers-color-scheme: light) { #dark:not(:checked) { ~ main { --default-theme: "light"; /**/ --default-colour-primary: var(--light-colour-primary); --default-colour-secondary: var(--light-colour-secondary); --default-colour-outline: var(--light-colour-outline); --default-colour-remark: var(--light-colour-remark); --default-bg-colour-primary: var(--light-bg-colour-primary); --default-bg-colour-secondary: var(--light-bg-colour-secondary); --default-bg-colour-secondary-rgb: var(--light-bg-colour-secondary-rgb); --default-border-filter: var(--light-border-filter); } } } @media (prefers-color-scheme: dark) { #light:not(:checked) { ~ main { --default-theme: "dark"; /**/ --default-colour-primary: var(--dark-colour-primary); --default-colour-secondary: var(--dark-colour-secondary); --default-colour-outline: var(--dark-colour-outline); --default-colour-remark: var(--dark-colour-remark); --default-bg-colour-primary: var(--dark-bg-colour-primary); --default-bg-colour-secondary: var(--dark-bg-colour-secondary); --default-bg-colour-secondary-rgb: var(--dark-bg-colour-secondary-rgb); --default-border-filter: var(--dark-border-filter); } } } body { font-family: "SUSE", Calibri, Helvetica, Arial, sans-serif; } #dark:checked ~ main label[for="dark"], #light:checked ~ main label[for="light"], #light:not(:checked) + #dark:not(:checked) ~ main label[for="auto"] { font-weight: bold; } .c-black { color: var(--colour-black); color-scheme: only light; } .c-white { color: var(--colour-white); color-scheme: only light; } #filters /* right sidebar */, #menu /* left sidebar */ { background: var(--bg-colour-secondary); } main { background: var(--bg-colour-primary); color: var(--colour-primary); height: max(100%, 100vh); position: fixed; width: max(100%, 100vw); } input.track-state:checked:not([data-saved="1"]) + label, input.track-state:not(:checked)[data-saved="1"] + label, .date-group:has(> input.track-value.modified), span:has(> input.track-value.modified), input.track-value.modified { &::before { color: var(--colour-remark); } } .alt.btn { background: var(--bg-colour-button); border-color: var(--colour-secondary); color: var(--colour-black); color-scheme: only light; &:not(:hover) { border-color: var(--colour-outline); } &:hover { border-color: var(--colour-primary); } } .edit { background-color: transparent; } .keyword { color: var(--colour-secondary); } .nodisplay { display: none; } .silent { &:not(.alt):not(.c-black):not(.c-white) { color: var(--colour-secondary); } &.alt { color: var(--colour-primary); } } .transparent { border-color: var(--colour-outline); } #dn { border-color: var(--colour-outline); } #filtered-label { margin-left: auto; } #locales picture { border-color: var(--colour-primary); } @media (prefers-color-scheme: dark) { #light:not(:checked) ~ main { [src$="_nofilter.svg"], [srcset$="_nofilter.svg"] { color-scheme: only light; filter: invert(1); } [src$=".svg"]:not([src$="_nofilter.svg"]), [srcset$=".svg"]:not([srcset$="_nofilter.svg"]) { filter: brightness(0.95) contrast(1); } .exCommon { /* background-image: linear-gradient(90deg, #cca85280, #0000); */ border-style: dotted; .exLogo { * { color-scheme: only light; } } } } } @media (prefers-color-scheme: light) { #dark:not(:checked) ~ main { .exCommon { background-image: linear-gradient(270deg, #cca85280, #0000); border-color: var(--colour-outline); border-style: outset; } } } @media (prefers-color-scheme: dark), (forced-colors: active) { #light:not(:checked) ~ main { forced-color-adjust: none; [src$="_nofilter.svg"], [srcset$="_nofilter.svg"] { color-scheme: only light; filter: invert(1); } [src$=".svg"]:not([src$="_nofilter.svg"]), [srcset$=".svg"]:not([srcset$="_nofilter.svg"]) { filter: brightness(0.95) contrast(1); } .exLogo * { color-scheme: only light; } } } @media (inverted-colors: inverted) { [src$="_nofilter.svg"], [srcset$="_nofilter.svg"] { color-scheme: only light; filter: invert(1); } [src$=".svg"]:not([src$="_nofilter.svg"]), [srcset$=".svg"]:not([srcset$="_nofilter.svg"]) { filter: brightness(0.95) contrast(1); } } /* dimensions */ body { font-size: 135%; line-height: 2.1rem; overflow: hidden; overscroll-behavior-x: none; scroll-behavior: smooth; &, * { overscroll-behavior: contain; /* disable pull-to-refresh */ } } a.alt.btn { padding: 0 0.33rem; } .alt.silent { &:hover { text-decoration: none; } } .alt.btn { border-radius: 0.5rem; border-style: solid; border-width: 0.1rem; &:hover { text-decoration: none; } &:not(:hover) { box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); } } button.alt.btn { font-size: 1.4rem; padding: 0.33rem; } body:not(.dragging) button { cursor: pointer; } header, nav { user-select: none; } .menu-item { &.page { list-style-type: disc; } &.page-expanded { list-style-type: disclosure-open; } &.anchor { list-style-type: circle; } } @keyframes roll { 100% { transform: translateX(-66.6666%); } } /* highlight modified but unsubmitted values */ input.track-state:checked:not([data-saved="1"]) + label, input.track-state:not(:checked)[data-saved="1"] + label, .date-group:has(> input.track-value.modified), span:has(> input.track-value.modified), input.track-value.modified { position: relative; &::before { content: "*"; display: inline; font-size: 1.5rem; margin-left: -1ch; margin-top: -1ch; position: absolute; z-index: 2; } } [data-filtered-display="0"], .no-screen, .placeholder, #tagsAnimated:checked ~ #badges #inProd, #tagsCurrent { display: none; } picture:not(.qrCode) { filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); position: relative; } div, summary { list-style-type: none; } svg { forced-color-adjust: none; } time { pointer-events: none; white-space: nowrap; } body { font-size: 135%; line-height: 2.1rem; overflow: hidden; scroll-behavior: smooth; } [data-filtered-display="0"], #tagsAnimated:checked ~ #badges #inProd { display: none; } picture:not(.qrCode) { filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); position: relative; } div, summary { list-style-type: none; } body:not(.dragging) #page { label[for], .keyword { cursor: pointer; } } svg { forced-color-adjust: none; } time { pointer-events: none; white-space: nowrap; } body { forced-color-adjust: none; touch-action: pan-x; /* completely prohibit zooming */ /* fixes forced auto-zoom on mobile firefox and safari */ } input, .edit, .edit *, .qrCode * { color-scheme: light only; } .anchor_details { margin-top: -6rem; } .anchor_section { margin-top: -6.5rem; } #columns { gap: 0; margin-right: 1.5rem; padding: 1.5rem 0 1.5rem; } .header { padding: 0 0.5rem; width: max-content; } .header a { display: block; height: 100%; padding-left: 1rem; position: relative; width: 100%; } .header a:not(:empty)::before { margin-left: -0.9rem; position: absolute; } .headline sub { margin-top: -0.3rem; } .exCommon { border-radius: 16px; border-width: 1px; margin: 0.5% 0.8rem; padding: 0.5%; .exCompany { margin-left: 0.4rem; text-wrap: balance; } .exMain { line-height: 135%; width: 100%; } .exMain h4 { padding-left: 0.4rem; } .exLogo { display: flex; } .exLogo > * { height: 3.5rem; margin: auto 0 auto auto; max-height: 100%; max-width: 100%; object-fit: scale-down; position: relative; width: auto; z-index: -1; } } [data-filtered-view="1"]:has(.filterable[data-filtered-display="1"]) { #dn .blockHeader { display: none; } } .mc:not(:has([data-filtered-display="1"])):has(.filterable[data-filtered-display="0"]) { & > #dn { border-top: 0; } & > .placeholder { display: block; padding: 0 2rem 2rem 2rem; } } .tags { padding-right: 2rem; text-align: right; } .mc { break-after: right; break-before: left; } .blockHeader { break-after: avoid; } .underline { break-before: avoid; } .filterable:has(~ .placeholder) .underline { display: none; } .targetable.paragraph { break-inside: avoid; position: relative; &.filterable:has(+ .filterable[data-filtered-display="1"]) { break-after: right; .underline { display: none; } } } .targetable.core .header a:not(:empty), .targetable.paragraph h3 a:not(:empty) { padding-left: 0.45rem; } .paragraph[data-filtered-display="1"] ~ .paragraph[data-filtered-display="1"] { break-before: left; .blockHeader { display: none; } } .targetable.paragraph.filterable:has(+ .break ~ .targetable.paragraph)::after { filter: var(--border-filter, none); } .paragraph.targetable[data-filtered-display="1"] ~ .paragraph.targetable::before { filter: var(--border-filter, none); } .info { position: relative; z-index: 1; } body:not(.dragging) .info { div, summary { cursor: pointer; } } .keywords { text-wrap: balance; /* try to make lines equal when multiline */ } .kwTgl { height: 2rem; margin-bottom: 0.6rem; margin-top: -2.5rem; text-align: center; width: 100%; .radio-text { position: relative; top: 0.3rem; transition: transform 0.25s ease; user-select: none; } &:has(+ input:checked) .radio-text { transform: scaleY(-1); /* flip vertically */ } + input:not(:checked) + .keywords { display: none; } } .dates { margin-left: 0.35rem; } .dates .exactDateDisplay:not(:checked) ~ .full, .dates .exactDateDisplay:checked ~ .short { display: none; } .dates .exactDateDisplay:checked ~ .full, .dates .exactDateDisplay:not(:checked) ~ .short { display: inline-block; } .keyword-cb { display: none; } .keyword:target { text-decoration: underline; } .keyword:target:not([title])::after { content: ""; } .keyword:target[title]::after { content: " (" attr(title) ")"; } .mc { margin-left: 1.5rem; } .unbreakable { break-inside: avoid; } .qrCode { bottom: 2rem; height: 128px; position: fixed; right: 2rem; width: 128px; z-index: 999; } .share:not(:checked) + .qrCode { display: none; } .share:hover + .qrCode, /* .share:checked + .qrCode, */ .qrCode:hover { display: inline-block; } .share:checked + .qrCode { display: none; } body:not(.dragging) .share.transparent:not(:checked) { cursor: pointer; } .qrHoverPad { position: relative; } .rounded-input { border: 1px solid; border-radius: 0.5rem; padding: 0.5rem 0.1rem; } .transparent { border-style: solid; border-width: 1px; height: 100%; opacity: 0; /* increase value for debugging */ position: absolute; width: 100%; &.share { z-index: 1; } &:checked { display: none; } } #about, #goal { text-wrap: balance; } #avatar { border: 1px solid #999; } #content { background: inherit; height: calc(max(100%, 100vh) - 4.6rem); /* 4.6rem for navbar */ left: 0; overflow-x: hidden; overflow-y: auto; /* Enables vertical scrolling */ position: fixed; /* creates stacking context, unable to change z-index of children */ top: 4.6rem; width: 100vw; width: stretch !important; width: -webkit-fill-available !important; width: -moz-available !important; } #dateGen .localFormat { font-size: x-large; } #ed { display: flex; } #educated_w { display: none; } #top { margin-top: -5rem; } main { #header { display: flex; flex-direction: row; font-size: 69%; gap: 1rem; left: 0; top: 0; width: inherit; } &[data-scroll="0"], &[data-scroll^="-"] { /* match negative values to support Safari overscroll */ #header { border-bottom: 1px solid #000; } } &:not([data-scroll="0"]):not([data-scroll^="-"]) { .backUp { cursor: pointer; } #header { border-bottom: 4px solid transparent; border-image-slice: 1; border-image-source: linear-gradient(to right, transparent, rgba(0, 0, 0, 1), transparent); } } } #resources { border: 0; margin-left: 0.5rem; padding: 1rem 2rem; text-align: left; td:first-child { height: 50px; width: 50px; } .share { margin-left: -0.25rem; } } #summary { .padder a, .linkLabel { padding-left: 10px; } } #locales { a sub { margin-left: 0.9rem; } picture { border-style: outset; border-width: 1.5px; color-scheme: only light; img { color-scheme: only light; } } .icon { padding-top: 0.4rem; } .padder { padding-left: 1rem; } } #summary td { max-width: fit-content; } #tagsAnimated:checked ~ #badges label[for="tagsAnimated"] { text-decoration: underline; } #dn { display: block; padding-top: 1rem; } #dn_count { position: relative; &.counted { opacity: 1; &::before { opacity: 0; } } &:not(.counted) { opacity: 0; transition: opacity 0.5s ease 0.2s; &::before { content: "0"; opacity: 1; position: absolute; transition: opacity 0.5s ease; } } } #tagsAnimatedView { display: block; font-size: 85%; overflow: hidden; transform: translate3d(0, 0, 0); } #tagsAnimatedView tr { animation-delay: 0s; animation-direction: normal; animation-duration: 60s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: roll; animation-play-state: running; animation-timing-function: linear; text-align: center; transform: translate3d(0, 0, 0); } #tagsAnimatedView tr.exTagsRow td { padding: 0 5px; } #tagsAnimatedView tr.exTagsRow td span { padding-left: 1rem; } #tagsAnimatedView tr.exTagsRow:first-of-type td::before { content: "#"; margin-left: -0.75rem; opacity: 0.3; } #tagsAnimatedView tr.exPicturesRow td { height: 90px; min-width: 90px; padding: 0.25rem 0.75rem; picture { color-scheme: light only; } } #blockquote::after, #blockquote::before { font-weight: bold; } #keywords + .mc { break-after: left; break-before: avoid; margin-top: -1.5rem; } [name="experience"] summary { position: relative; z-index: 1; } [name="experience"][open] .hiddenContent { display: none; } [name="experience"]:has(summary .hiddenContent) summary .exInfo { width: calc(95% - 3rem); } body:not(.dragging) [name="experience"]:has(summary .hiddenContent) summary { cursor: pointer; } [name="experience"]:not([open]) .hiddenContent { font-size: 111%; margin: -3.5rem -0.3rem; position: absolute; text-align: right; width: calc(100% - 2rem); span { display: inline-block; opacity: 0.5; padding: 1rem; } } [name="experience"]:not([open]):hover .hiddenContent span { opacity: 1; } @media (max-width: 1234px) { #columns { columns: 1; } .exLogo > * { max-width: 275px; } #keywords_w { margin-top: 0; } } @media (max-width: 610px) { html, body { margin: 0; } .blockHeader .header { padding: 0 2.3vw; } #aboutMe, #myExperience { columns: 1; } #myInfo, #myLanguages { td::first-child { padding-left: 20px; } } } @media (min-width: 1234px) { #columns { columns: 1; } .exLogo > * { max-width: 275px; } .mc { margin-bottom: 1rem; } #badges { margin-bottom: -2.5rem; margin-top: -1rem; } } @media (min-width: 1234px) and (max-width: 1440px) { .blockHeader .header { padding: 0 0.8vw; } #avatar { max-height: 30%; width: auto; } } @media (min-width: 1234px) and (max-width: 2000px) { #columns { columns: 2; } } @media (min-width: 1440px) { .blockHeader .header { padding: 0 0.8vw; } } @media (min-width: 2000px) and (max-width: 2812px) { #columns { columns: 3; } } @media (min-width: 2812px) { #columns { columns: 4; } } @media (min-width: 610px) and (max-width: 670px) { .blockHeader .header { padding: 0 2vw; } #aboutMe, #myExperience { columns: 1; } } @media (min-width: 670px) and (max-width: 860px) { blockquote { font-size: 110%; } #aboutMe { width: 97.7%; .blockHeader .header { padding: 0 1.5vw 0 1.5vw; } } #myExperience { columns: 1; margin-left: -0.6%; width: 99%; .blockHeader .header { padding: 0 1.5vw 0 1.5vw; } } #myInfo { display: inline-block; } } @media (min-width: 860px) and (max-width: 1234px) { blockquote { padding-top: 0.75rem; } .blockHeader .header { padding: 0 1vw; } } details.detailedLink { background: var(--colour-bg, transparent); border: 2px solid var(--colour-primary); border-radius: 1.5rem; clip-path: inset(0 round 1.5rem); display: block; margin: 0 1.25rem 2.5rem; overflow: hidden; padding: 0; /* move padding to summary/body for better hit targets */ position: relative; transition: box-shadow 0.18s ease, transform 0.12s ease; } /* Summary is the visible header / tap target */ details.detailedLink summary { cursor: pointer; display: block; list-style: none; margin: 0; min-height: 4rem; outline: none; overflow: visible; padding: 2.5rem 2rem; /* position summary above the picture so headline stays readable */ position: relative; user-select: none; z-index: 2; } /* Remove native marker for consistent appearance */ details.detailedLink summary::-webkit-details-marker { display: none; } /* Keep anchors inside summary looking like heading text */ details.detailedLink summary a, details.detailedLink summary h2 { color: inherit; margin: 0; text-decoration: none; } /* Visual state when opened (replaces :hover centric behaviour) */ details.detailedLink[open] { box-shadow: inset 3px 3px 2px 1px #0008; } /* Picture in the SUMMARY only: sits to the right and is animated on open/hover */ details.detailedLink > summary picture { height: 100%; left: auto; object-fit: cover; object-position: bottom right; /* allow image to bleed slightly so summary reveals it */ overflow: visible; pointer-events: none; position: absolute; right: 1rem; width: 120px; z-index: 0; } /* IMG inside summary picture (default/expanded style) */ details.detailedLink { summary picture img { height: 70%; margin-right: 1rem; position: absolute; right: 0; transform: rotate(0deg); transition: all 0.25s; } &:not([open]) { summary picture img { /* top: 15%; */ } } } /* Collapsed state: keep the visual offset, good for both touch and mouse (summary only) */ details.detailedLink:not([open]) > summary picture img { margin-right: -1.5rem; /* top: 30%; */ transform: rotate(15deg); } /* Expanded content area below the summary */ .detailedLink__body { /* border-top: 1px dotted; */ padding: 1rem 2rem 1rem; } /* Action link inside expanded area */ .detailedLink__action { align-items: center; display: flex; gap: 0.75rem; justify-content: center; /* center the play button in its parent */ margin-top: 1rem; } /* Play button (uses ZPicture to render SVG) */ .play-btn { align-items: center; background: transparent; border: none; border-radius: 0.75rem; color: var(--colour-secondary); display: inline-flex; justify-content: center; padding: 0; text-decoration: none; transition: transform 160ms ease; /* scale on hover/focus */ will-change: transform; } /* Focus styles for keyboard users - keep accessible focus ring but no background fill change */ .play-btn:focus { border: none; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08); outline: none; } /* Hover / focus: do not change background; instead slightly scale the button (zoom) */ .play-btn:hover, .play-btn:focus { transform: scale(1.1); } /* Ensure picture/img inside the button fits and scales nicely (big icon) */ .play-btn picture, .play-btn img { display: block; transition: transform 160ms ease; } /* Support the existing .alt.silent tokens: prefer secondary colour and no underline */ .play-btn.alt.silent { color: var(--colour-secondary); text-decoration: none; } /* Preserve a hover affordance on devices that support hover and animate the picture the same way as when the details are opened */ @media (hover: hover) and (pointer: fine) { details.detailedLink { &[open], &:not([open]):hover { summary { box-shadow: inset 3px 3px 2px 1px #0008; } summary picture img { margin-right: 1rem; /* top: 15%; */ transform: rotate(0deg); transition: all 0.25s; } } } } /* Improve hit area and spacing on small screens */ @media (max-width: 600px) { details.detailedLink summary { padding: 1rem; } .detailedLink__body { padding: 0.75rem 1rem 1.25rem; } details.detailedLink > summary picture img { height: 100%; top: 8%; } } .input-predictor { border-radius: 0.45rem; display: grid; gap: 0.5rem; grid-template-columns: auto 1fr; margin: 1rem 0; padding: 0.1rem 0.5rem; &:has(.input-client:not(:focus)) { background: rgba(128, 128, 128, 0.33); } .label-text { color: #000; color-scheme: light only; white-space: nowrap; } .input-area { position: relative; .input-guesser, .input-client { background: transparent; border: 0; font-size: 85%; height: 100%; left: 0; padding: 0; position: absolute; top: 0; width: 100%; } .input-guesser { color: #eee; float: right; pointer-events: none; position: relative; text-align: right; visibility: hidden; width: min-content; z-index: 2; } .input-client { z-index: 1; } .input-client:focus { border-bottom: 1px solid; outline: none; } .input-client:focus + .input-guesser { visibility: visible; } } .input-client { &::placeholder { color: #000; opacity: 0.6; } &:not(:placeholder-shown):not(:focus):invalid { text-decoration: line-through; } } } .radio-toggle { border-color: inherit; .radio-box, label:not([for="dismiss"]) { height: 100%; width: 100%; } label:not([for="dismiss"]) { left: 0; opacity: 0; position: absolute; top: 0; } .radio-box { align-items: center; border-color: inherit; display: flex; width: inherit; } .radio-box > .radio-text-box { align-self: end; border: 2px dashed transparent; border-radius: 0.75rem 0.75rem 0 0; margin-bottom: -0.6rem; padding: 0 0.75rem 0.75rem; position: relative; } .radio-text { min-width: 1.23rem; } & + input { display: none; } } /* label style on hover */ .radio-toggle:hover > .radio-box { filter: brightness(1); } .radio-toggle + input[type="checkbox"] + .info { transition: max-height 1.1s ease-out, opacity 0.5s ease-out; /* Smooth transition */ } /* label style when radio IS checked */ .radio-toggle:has(+ input /* :checked */) { & > .radio-box { filter: brightness(0.95); } hr { align-self: end; border: 1px dashed; border-color: inherit; height: 0; margin-bottom: -0.6rem; &:last-child { width: calc(1.5rem + 3px); } } & > .radio-box > .radio-text-box { border-bottom: 0; border-color: inherit; } & + input[type="checkbox"] + .info { max-height: max-content; opacity: 1; } } /* label style when radio IS NOT checked */ /* .radio-toggle:has(+ input:not(:checked)) { & > .radio-box { filter: brightness(0.9); } hr { border: 2px solid; height: 100%; width: 3px; &:first-child { border-radius: 1rem 0 0 1rem; border-right: 0; margin-left: auto; pointer-events: none; } &:last-child { border-left: 0; border-radius: 0 1rem 1rem 0; margin-right: 1.5rem; } } & + input[type="checkbox"] + .info { max-height: 0; opacity: 0; overflow: hidden; } } */ body:not(.dragging) .range-selector { .sliderBegin::-webkit-slider-thumb, .sliderBegin::-moz-range-thumb, .sliderEnd::-webkit-slider-thumb, .sliderEnd::-moz-range-thumb { cursor: pointer; } } .range-selector { display: inline-block; .sliders { align-items: center; display: inline-flex; font-family: monospace; margin: 10px; white-space: nowrap; } .sliders-container { height: 10px; margin: 20px 0; position: relative; width: 200px; } .track { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .track.inverted::before, .track.inverted::after, .track.normal::before, .track.normal::after { content: ""; height: 100%; position: absolute; width: 100%; } .track.inverted::before, .track.normal::before { z-index: 2; } .track.inverted::after, .track.normal::after { z-index: 0; } .track.inverted::before { background: linear-gradient( to right, #d3d3d3 var(--percent-begin, 0%), transparent var(--percent-begin, 0%) ); } .track.inverted::after { background: linear-gradient( to right, transparent var(--percent-begin, 0%), #04aa6d var(--percent-begin, 0%) ); } .track.normal::before { background: linear-gradient( to right, transparent var(--percent-end, 0%), #d3d3d3 var(--percent-end, 0%) ); } .track.normal::after { background: linear-gradient( to right, #04aa6d var(--percent-end, 0%), transparent var(--percent-end, 0%) ); } .track.noclick { background: transparent; z-index: 6; } .slider { -webkit-appearance: none; appearance: none; background: transparent; height: 10px; left: -10px; outline: none; position: absolute; top: 0; width: calc(100% + 20px); z-index: 6; } .slider::-webkit-slider-runnable-track, .slider::-moz-range-track { background: transparent; } .sliderBegin::-webkit-slider-thumb, .sliderBegin::-moz-range-thumb, .sliderEnd::-webkit-slider-thumb, .sliderEnd::-moz-range-thumb { background: #038857; border-radius: 5px; height: 32px; position: relative; width: 20px; z-index: 4; } .sliderBegin::-webkit-slider-thumb, .sliderEnd::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; } .sliderBegin::-moz-range-thumb, .sliderEnd::-moz-range-thumb { border: none; } /* First slider (longer peek above) */ .sliderBegin::-webkit-slider-thumb, .sliderBegin::-moz-range-thumb { transform: translateY(-1.33rem); z-index: 5; } /* Second slider (longer peek below) */ .sliderEnd::-webkit-slider-thumb, .sliderEnd::-moz-range-thumb { transform: translateY(1.33rem); } .slider::-webkit-slider-thumb:hover, .slider::-moz-range-thumb:hover { background: #026440; } .slider-line { background: #000; height: 10px; position: absolute; width: 2px; z-index: 5; } .slider-line.begin { left: var(--percent-begin, 0%); } .slider-line.end { left: var(--percent-end, 0%); } input[type="radio"] { margin: 0 10px; } } /* Chrome specific styling (FIXME: remove when browsers align) */ /* biome-ignore lint/correctness/noUnknownMediaFeatureName: <explanation> */ @media screen and (-webkit-min-device-pixel-ratio: 0) { body:not(.dragging) { .sliderBegin::-webkit-slider-thumb, .sliderEnd::-webkit-slider-thumb { cursor: pointer; } } .sliderBegin::-webkit-slider-thumb, .sliderEnd::-webkit-slider-thumb { -webkit-appearance: auto; background: #038857; border: none; border-radius: 5px; height: 32px; width: 20px; } .sliderBegin::-webkit-slider-thumb { transform: translateY(-1.33rem); z-index: 5; } .sliderEnd::-webkit-slider-thumb { transform: translateY(1.33rem); } } .dates { white-space: nowrap; } .dates::after { font-size: initial; } .date-group { text-shadow: none; } .keyword { color: var(--colour-white); } #menuContext { bottom: 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); color: #000; display: flex; flex-direction: column; height: calc(100% - 4.6rem); min-width: 15rem; position: fixed; right: 0; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; } body.context-menu-open #menuContext { transform: translateX(0); } #menuContext nav { align-items: center; background: goldenrod; /* TODO: use secondary colour */ border-bottom: 3px solid; border-top: 3px solid; /* top: 0; */ display: flex; font-size: larger; gap: 1rem; margin: 0; padding: 1.5rem 2rem; } #menuContext article { background: goldenrod; height: 100%; overflow-y: scroll; padding: 1.5rem 0; touch-action: pan-y pan-x; } #menuContext article form { display: inline-table; margin: 0; padding: 1rem 1.5rem; } #menuContext article form > *:not(:first-child):not(.inline-flex-column) { margin: 0.25rem 0.5rem; } #menuContext article form .inline-flex-column { margin-top: -1rem; } #menuContext-apply { font-size: 1.4rem; padding: 0.2rem 0.5rem; } #menuContext-reset { margin-left: auto; } #menuContext-date_range { padding-bottom: 2rem; } #menuContext_top { display: block; height: 1px; margin-bottom: -1rem; opacity: 0; } #kw_label { margin-bottom: -1rem !important; padding-top: 1rem; &::first-letter { text-transform: uppercase; } } #hashtags { caption-side: bottom; display: table-caption; padding: 0 1.5rem; width: calc(100% - 4rem); /* this allows to keep as wide as parent */ .keyword { background: green; border: 2px solid transparent; border-radius: 3rem; display: inline-block; margin: 0.25rem 0; padding: 0 0.75rem; width: max-content; /* this enforces correct width per content */ } .keyword-cb:checked + .keyword { background: green; /* TODO: accent ACTIVE */ border-color: #000; } .keyword-cb:not(:checked) + .keyword { background: darkcyan; /* TODO: accent INACTIVE */ } } .menubar-dismiss { height: 100%; left: 0; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: -1; } #menuGlobal { bottom: 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); color: #000; display: flex; flex-direction: column; height: calc(100% - 4.6rem); left: 0; min-width: 15rem; position: fixed; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; } body.global-menu-open #menuGlobal { transform: translateX(0); } #menuGlobal nav { background: goldenrod; /* TODO: use secondary colour */ border-bottom: 3px solid; border-top: 3px solid; font-size: larger; margin: 0; padding: 1.5rem 2rem; top: 0; } #menuGlobal-links { background: goldenrod; display: flex; flex-direction: column; flex-grow: 1; overflow-y: scroll; padding: 1rem 2.75rem; touch-action: pan-y pan-x; } #menuGlobal-links li:not(.anchor):first-child, #menuGlobal-links li:not(.anchor):last-child { list-style-type: none; } #menuGlobal-links li:first-child { height: 1px; opacity: 0; position: relative; z-index: -1; } #menuGlobal-links li:last-child { margin-top: auto; } #menuGlobal-links #blockquote { padding: 1rem 1.5rem; } #menuGlobal_top { display: block; height: 1px; margin-bottom: -1rem; opacity: 0; } /* body { &.dragging, &.dragging *, &.dragging:hover, &.dragging *:hover { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; #columns * { pointer-events: none !important; touch-action: none !important; touch-action: pan-x pan-y !important; user-drag: none !important; -webkit-user-drag: none !important; user-select: none !important; -webkit-user-select: none !important; } } } */ #dismiss, #dismiss__whileDragging { background: rgba(var(--colour-black-rgb), calc(0.33 * (var(--visibility) / 100))); } .sidebar-toggle, .sidebar-toggle__whileDragging { background: var(--bg-colour-secondary); border: none; p { background: var(--colour-black); } } /* Dynamic navbar background based on sidebar visibility percentage */ #togglesBgOverlay, #togglesBgOverlay__whileDragging { --visibility: 0; /* CRITICAL: Base appearance is driven by visibility variable */ background: rgba(var(--bg-colour-secondary-rgb, 255, 255, 255), calc(var(--visibility) / 100)); } body.global-menu-open #content *, body.context-menu-open #content *, body.dragging #content *, body.preparing #content * { animation-play-state: paused; } .menuGlobal_toggle { left: 2rem; } .menuContext_toggle { right: 2rem; } /* DUP elements (drag-only) - hidden by default */ .sidebar-toggle__whileDragging, #togglesBgOverlay__whileDragging, #dismiss__whileDragging { display: none; /* Hidden by default */ inset: 0; /* Ensure viewport coverage for overlays */ position: fixed; } #menuContext_toggle__whileDragging { margin-right: 1rem; } #togglesBgOverlay__whileDragging { z-index: 999; } #dismiss, #dismiss__whileDragging { bottom: 0; cursor: pointer !important; height: max(100%, 100vh); inset: 0; left: 0; opacity: 1; touch-action: none; width: max(100%, 100vw); z-index: 999; } #dismiss { transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1); } body:not(.global-menu-open):not(.context-menu-open) #dismiss { display: none; } body.global-menu-open #content #dismiss, body.context-menu-open #content #dismiss { display: block; opacity: 1; pointer-events: all; position: fixed; } body.global-menu-open #content #dismiss__whileDragging, body.context-menu-open #content #dismiss__whileDragging { display: none; } .dragging, .preparing { #content #dismiss { display: initial !important; } #toggles { z-index: 1000; } } body.dragging, body.dragging * { cursor: grabbing !important; } body.dragging { #dismiss, #dismiss__whileDragging, #columns { ~ * { pointer-events: none; user-select: none !important; -webkit-user-select: none !important; } } } /* Real elements use CSS transitions (click/snap only) */ .sidebar-toggle { transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1); p { /* Duration synchronized to 0.8s for smooth icon snap */ transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } } #togglesBgOverlay { /* Duration synchronized to 0.8s for smooth background fade */ transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-toggle__whileDragging p { transition: none; /* Default to none during drag. JS adds 0.8s transition during handoff. */ } #togglesBgOverlay__whileDragging { transition: none; } #dismiss__whileDragging { transition: none; } /* Common layout for both real and DUP toggles */ .sidebar-toggle, .sidebar-toggle__whileDragging { --line-gap: 0.25rem; border-radius: 3rem; box-sizing: border-box; display: block; height: 2.5rem; max-width: 2.5rem; min-width: 2.5rem; padding: 0.5rem; position: relative; width: 2.5rem; z-index: 3; p { height: 0.2rem; margin: var(--line-gap) 0; position: relative; } } /* Left side variation (menuGlobal) */ #menuGlobal_toggle, #menuGlobal_toggle__whileDragging { .l2n3 { display: contents; } p { height: 0.2rem; transform-origin: 50% 50%; } .l1 { top: 0; } .l3 { bottom: 0; top: auto; } } body.global-menu-open #toggles #toggles__whileClicking .menuGlobal_toggle { .l1, .l3 { width: 60%; } .l1 { transform: rotate(-45deg) translate(-28%, 15%); } .l3 { transform: rotate(45deg) translate(-28%, -15%); } } body:not(.global-menu-open) #toggles .menuGlobal_toggle { .l1, .l3 { left: 10%; width: 80%; } .l2 { width: 100%; } } /* Right side variation (menuContext) */ #toggles .menuContext_toggle { .l2n3 { /* Keep l2 and l3 as normal flow siblings so widths/left anchors map 1:1 with the DOM: - l1 is a top <p>- .l2n3 wraps l2 (middle) and l3 (bottom) as siblings This block enforces precise 50% / 100% / 50% geometry in the inactive state. */ display: block; position: relative; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); width: 100%; } .l2, .l3 { box-sizing: border-box; padding: 0; position: relative; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), left 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), bottom 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); vertical-align: middle; } p { transform-origin: 50% 50%; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), margin-left 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), padding 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } .l1 { /* top: slightly more centered horizontally but still left; width set to 40% and nudged right */ left: 8%; top: -0.18rem; transform-origin: 0% 50%; width: 40%; } .l2 { /* middle line: centered horizontally and vertically; only rotation allowed */ left: 50% !important; top: 50%; transform: translate(-50%, -50%); /* center exactly */ transform-origin: 50% 50%; width: 100%; will-change: transform; } .l3 { /* third (bottom) line: moved a bit higher (closer to middle) */ bottom: 0.02rem; left: 49%; transform-origin: 100% 50%; width: 30%; } } /* Drag duplicates must respond instantly; disable transitions there */ #toggles .sidebar-toggle__whileDragging.menuContext_toggle { .l2n3, .l2, .l3, p { transition: none; } } body.context-menu-open #toggles #toggles__whileClicking .menuContext_toggle { /* Active state: outer lines rotate 45deg clockwise, middle rotates 45deg counter-clockwise. Middle remains centered and only rotates. Outer lines pivot on attached endpoints. */ .l1 { /* rotate top line clockwise about its left endpoint (endpoint attached) */ transform: rotate(45deg); } .l2n3 { /* wrapper remains neutral so the middle line itself can be rotated */ transform: none; } .l2 { /* middle stays perfectly centered and only rotates */ left: 50% !important; transform: translate(-50%, -50%) rotate(-45deg) !important; transform-origin: 50% 50%; } .l3 { /* rotate bottom line clockwise about its right endpoint (endpoint attached) */ transform: rotate(45deg); } } /* Layout */ .sidebar, .toggles { touch-action: pan-y; *:not(input) { user-select: none; } a, button { -moz-user-drag: none; -webkit-user-drag: none; user-drag: none; } } .toggles { display: flex; height: 3.6rem; justify-content: space-between; left: 0; padding: 1rem 2rem 0 1rem; position: fixed; top: 0; width: calc(max(100%, 100vw) - 2rem); } #toggles { background-color: var(--bg-colour-primary); height: 4.6rem; z-index: 3; & > * { height: inherit; position: absolute; width: 100%; } & > div { display: flex; .menuGlobal_toggle, .menuContext_toggle { position: relative; top: 1rem; } .menuGlobal_toggle { left: 1rem; } .menuContext_toggle { right: 1rem; } } } body:not(.dragging) #toggles__whileDragging { z-index: 2; } body.dragging #toggles__whileDragging { z-index: 1000; } body { &.dragging, &.preparing { &.menuGlobal #menuContext_toggle__whileDragging, &.menuContext #menuGlobal_toggle__whileDragging { display: none; } &.menuGlobal #menuContext_toggle, &.menuContext #menuGlobal_toggle { display: initial; opacity: 1 !important; z-index: 1002; } } } #togglesBgOverlay, #togglesBgOverlay__whileDragging { left: 0; position: absolute; top: 0; width: max(100%, 100vw); z-index: 1; } main:not([data-scroll]) .toggles .backUp, main[data-scroll="0"] .toggles .backUp { z-index: 0; } main[data-scroll]:not([data-scroll="0"]) .toggles .backUp { z-index: 2; } .backUp { margin-top: -1rem; padding: 1.25rem; width: inherit; } #header { padding: 1.25rem 4.5rem; position: absolute; } /* --- DRAGGING/PREPARING OVERRIDES (Phase 1 & 2) --- */ body.dragging #toggles__whileDragging, body.preparing #toggles__whileDragging { z-index: 1000; .backUp { pointer-events: none; } } /* 1. DRAGGING ONLY: Hide real elements instantly. Show drag elements. */ body.dragging .sidebar-toggle, body.dragging #togglesBgOverlay, body.dragging #dismiss { display: none; pointer-events: none; transition: none; } body.dragging .sidebar-toggle__whileDragging, body.dragging #togglesBgOverlay__whileDragging, body.dragging #dismiss__whileDragging { display: initial; pointer-events: auto; } /* 2. PREPARING ONLY: Handoff Phase */ /* Group A: Elements that should stay HIDDEN while their DUP animation finishes */ body.preparing .sidebar-toggle, body.preparing #togglesBgOverlay { display: initial; opacity: 0; pointer-events: none; transition: none; /* Prevent background transition during snap */ z-index: 1001; } /* Disable transitions on menuContext toggle children during preparing to prevent shift */ body.preparing #toggles #toggles__whileClicking .menuContext_toggle .l2, body.preparing #toggles #toggles__whileClicking .menuContext_toggle .l3, body.preparing #toggles #toggles__whileDragging .menuContext_toggle .l2, body.preparing #toggles #toggles__whileDragging .menuContext_toggle .l3 { transition: none; } body.preparing #dismiss { display: initial !important; pointer-events: none; z-index: 1001; } /* Ensure DUP elements are on top of the transitioning real elements */ body.dragging .sidebar-toggle__whileDragging, body.preparing .sidebar-toggle__whileDragging { position: relative; z-index: 1002; } /* Ensure DUP elements remain visible during .preparing */ body.preparing .sidebar-toggle__whileDragging, body.preparing #togglesBgOverlay__whileDragging { display: initial; } body.preparing #dismiss__whileDragging { display: none; } /* Final cleanup for visibility when not dragging or preparing */ body:not(.dragging):not(.preparing) .sidebar-toggle__whileDragging, body:not(.dragging):not(.preparing) #togglesBgOverlay__whileDragging, body:not(.dragging):not(.preparing) #dismiss__whileDragging { display: none; }