/* Generated from include/portfolio-document.html. */
/* Modern colour palette - blue tones (light and dark theme) */
:root {
--primary-light-blue: #4FC3F7;
--primary-turquoise: #4FC3F7;
/* Blue instead of green */
--primary-blue: #5DADE2;
--primary-dark-blue: #3498DB;
--gradient-primary: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
--gradient-primary-reverse: linear-gradient(135deg, #4FC3F7 0%, #81D4FA 100%);
--gradient-horizontal: linear-gradient(90deg, #81D4FA 0%, #4FC3F7 100%);
--shadow-primary: rgba(129, 212, 250, 0.3);
--shadow-turquoise: rgba(79, 195, 247, 0.3);
}
/* Blue tones for the dark theme */
body.dark {
--primary-turquoise: #4FC3F7;
--gradient-primary: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
--gradient-primary-reverse: linear-gradient(135deg, #2A4A6F 0%, #4FC3F7 100%);
--gradient-horizontal: linear-gradient(90deg, #4FC3F7 0%, #2A4A6F 100%);
--shadow-primary: rgba(79, 195, 247, 0.5);
--shadow-turquoise: rgba(79, 195, 247, 0.4);
}
body,
td,
th {
font-family: Roboto, sans-serif;
}
/* Header - always visible (sticky) */
#header #header-wrap {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 999 !important;
}
/* Navigation Menu - Belirgin Hover Efektleri */
#primary-menu ul li>a {
position: relative;
transition: all 0.3s ease;
}
/* Underline effect on hover */
#primary-menu ul li>a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 60%;
height: 2px;
background: var(--gradient-horizontal);
border-radius: 2px 2px 0 0;
transition: transform 0.3s ease;
}
/* Hover durumu - Hafif efekt */
#primary-menu ul li:hover:not(.current)>a::after {
transform: translateX(-50%) scaleX(1);
}
#primary-menu ul li:hover:not(.current)>a {
color: #4FC3F7 !important;
/* Mavi renk */
background: rgba(129, 212, 250, 0.08);
/* Light blue for the light theme */
border-radius: 6px;
}
body.dark #primary-menu ul li:hover:not(.current)>a {
color: #4FC3F7 !important;
/* Mavi renk */
background: rgba(79, 195, 247, 0.15);
/* Blue for the dark theme */
}
/* Stronger effect for the active (current) item */
#primary-menu ul li.current>a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: rgba(79, 195, 247, 0.12);
border-radius: 8px 8px 0 0;
z-index: -1;
}
#primary-menu ul li.current>a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: var(--gradient-horizontal);
border-radius: 0;
transform: scaleX(1);
}
#primary-menu ul li.current>a {
color: #4FC3F7 !important;
/* Mavi renk */
background: rgba(129, 212, 250, 0.15);
/* Light blue for the light theme */
border-radius: 8px 8px 0 0;
font-weight: 600;
}
body.dark #primary-menu ul li.current>a {
color: #4FC3F7 !important;
/* Mavi renk */
background: rgba(79, 195, 247, 0.25);
/* Blue for the dark theme */
}
body.dark #primary-menu ul li.current>a::before {
background: rgba(79, 195, 247, 0.2);
/* Blue for the dark theme */
}
/* Two-line label — match #primary-menu bold/uppercase; room for 2 real lines (style.css a has line-height:22px) */
#primary-menu > ul > li.menu-item-2l > a {
line-height: 1.22 !important;
padding: 24px 12px 26px !important;
white-space: normal;
}
#primary-menu ul li .pw-nav-2l {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 13.5em;
max-width: 17em;
padding: 0;
text-align: center;
text-transform: none !important;
}
#primary-menu ul li .pw-nav-2l-top {
display: block;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.2;
white-space: nowrap;
}
#primary-menu ul li .pw-nav-2l-sub {
display: block;
font-size: 11.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: none !important;
/* Explicit ASCII in PLAYWRIGHT DEMO; no CSS uppercase (Turkish locale turns i into İ). */
opacity: 0.95;
}
#primary-menu ul li:hover .pw-nav-2l-sub,
#primary-menu ul li.current .pw-nav-2l-sub {
opacity: 1;
}
@media (max-width: 991px) {
#primary-menu ul li .pw-nav-2l {
align-items: flex-start;
text-align: left;
min-width: 0;
max-width: none;
width: 100%;
}
#primary-menu ul li.menu-item-2l > a {
text-align: left !important;
}
}
#footer .footer-sitemap-2l {
display: block;
line-height: 1.35;
}
#footer .footer-sitemap-2l small {
display: block;
margin-top: 2px;
font-size: 0.85em;
font-weight: 600;
color: inherit;
opacity: 0.9;
text-transform: none;
}
/* Light theme: section header bands use the #copyrights surface */
body:not(.dark) {
--pw-light-title-band: #E8EEF3;
}
body:not(.dark) .page-section > .section.nomargin:first-of-type {
background-color: var(--pw-light-title-band) !important;
}
/* Contact Me section - light and dark theme */
#section-contact {
position: relative;
}
/* Light theme - same as the other sections */
body:not(.dark) #section-contact {
background-color: var(--pw-light-title-band) !important;
}
body:not(.dark) #section-contact::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background-color: #E0E0E0;
z-index: 1;
}
/* Light theme - header band (same token as .page-section > .section.nomargin:first-of-type) */
body:not(.dark) #section-contact .section:first-of-type {
position: relative;
}
/* Light theme - form area */
body:not(.dark) #section-contact .section:last-of-type {
background-color: #FFF !important;
position: relative;
}
body:not(.dark) #section-contact .container {
background-color: transparent !important;
}
body:not(.dark) #section-contact .section h2 {
color: #333 !important;
}
/* Dark theme - section, header band and form area */
body.dark #section-contact {
background-color: #282828 !important;
}
body.dark #section-contact::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background-color: #444;
z-index: 1;
}
body.dark #section-contact .section:first-of-type {
background-color: #282828 !important;
position: relative;
}
body.dark #section-contact .section:last-of-type {
background-color: #333 !important;
position: relative;
}
body.dark #section-contact .container {
background-color: transparent !important;
}
/* Quick Links — heading between contact and footer (same colour as other section h2) */
#section-quick-links {
position: relative;
padding: 2.5rem 0;
}
body.dark #section-quick-links {
background-color: #333 !important;
}
body:not(.dark) #section-quick-links {
background-color: var(--pw-light-title-band) !important;
}
body.dark #section-quick-links::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #444;
z-index: 1;
}
body:not(.dark) #section-quick-links::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #E0E0E0;
z-index: 1;
}
body:not(.dark) #section-quick-links h2 {
color: #333 !important;
}
body.dark #section-quick-links h2 {
color: #EEE !important;
}
/* Section hero subtitles — centered, readable, muted (Subjects, Contact, Explore & Connect) */
#section-subjects .section-hero-subtitle,
#section-contact .section-hero-subtitle,
#section-quick-links .section-hero-subtitle {
max-width: 700px;
margin: 0.35rem auto 1.35rem;
padding: 0 1rem;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
line-height: 1.6;
font-weight: 400;
text-align: center;
letter-spacing: 0.01em;
}
body.dark #section-subjects .section-hero-subtitle,
body.dark #section-contact .section-hero-subtitle,
body.dark #section-quick-links .section-hero-subtitle {
color: rgba(148, 163, 184, 0.96);
}
body:not(.dark) #section-subjects .section-hero-subtitle,
body:not(.dark) #section-contact .section-hero-subtitle,
body:not(.dark) #section-quick-links .section-hero-subtitle {
color: #5c6b7a;
}
/* Light theme: footer content area (not a header band) — white surface */
body:not(.dark) #footer.dark,
body:not(.dark) #footer {
background-color: #ffffff !important;
color: #333 !important;
border-top: 1px solid #E0E0E0 !important;
}
body:not(.dark) #footer .footer-widgets-wrap {
background-color: transparent !important;
}
body:not(.dark) #footer .footer-widgets-wrap a,
body:not(.dark) #footer .footer-site-links a {
color: #0369a1 !important;
}
body:not(.dark) #footer .footer-widgets-wrap a:hover,
body:not(.dark) #footer .footer-site-links a:hover {
color: #0284c7 !important;
}
body:not(.dark) #footer .widget h4,
body:not(.dark) #footer .widget > h4 {
color: #333 !important;
text-decoration-color: rgba(3, 105, 161, 0.45) !important;
}
body:not(.dark) #footer .widget p,
body:not(.dark) #footer .lead {
color: #555 !important;
opacity: 1 !important;
}
body:not(.dark) #footer #copyrights,
body:not(.dark) #copyrights {
background-color: var(--pw-light-title-band) !important;
color: #555 !important;
text-shadow: none !important;
border-top: 1px solid #E0E0E0 !important;
}
body:not(.dark) #footer .footer-logo-3d {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 52%),
linear-gradient(165deg, #e8f4fc 0%, #dbeafe 42%, #e2e8f0 100%) !important;
border: 1px solid rgba(3, 105, 161, 0.22) !important;
box-shadow:
0 14px 32px rgba(3, 105, 161, 0.12),
0 2px 0 rgba(255, 255, 255, 0.75) inset !important;
}
body:not(.dark) #footer .footer-logo-3d::after {
box-shadow:
0 0 0 6px rgba(3, 105, 161, 0.07) inset,
0 0 0 1px rgba(3, 105, 161, 0.18) !important;
}
body:not(.dark) #footer .footer-round-logo {
box-shadow:
0 8px 18px rgba(3, 105, 161, 0.1),
0 1px 4px rgba(0, 0, 0, 0.06) inset !important;
}
/* Playwright: shared header tokens (match CI Pipeline Lab + grid row titles) */
body.dark #section-playwright-demo {
--pw-h-eyebrow: #90caf9;
--pw-h-title-hero: #ffffff;
--pw-h-title-row: #64b5f6;
--pw-h-sub: #9ca3af;
--pw-h-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Same family as the About Me cards (dark blue) */
--pw-badge-grad: linear-gradient(135deg, #1976d2 0%, #1565c0 50%, #0d47a1 100%);
--pw-badge-fg: #ffffff;
--pw-badge-shadow: 0 4px 16px rgba(25, 118, 210, 0.42);
/* Simulated terminal: dark blue text (same family as row titles) */
--pw-term-fg: var(--pw-h-title-row);
--pw-term-cursor: var(--pw-h-eyebrow);
/* Surfaces: same family as .pw-glass (quads 1–4) — no blue slate */
--pw-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
--pw-panel-ink: #2a2a2a;
--pw-void-40: rgba(0, 0, 0, 0.28);
--pw-void-35: rgba(0, 0, 0, 0.22);
position: relative;
background: var(--home-bg, #383838) !important;
overflow: hidden;
/* .notoppadding; 32px top space for the hero title (used to stack up to 56+28px) */
padding-top: 32px !important;
padding-bottom: 0 !important;
}
body.dark #section-ci-pipeline-lab,
body.dark #section-api-mock-lab {
--pw-h-eyebrow: #90caf9;
--pw-h-title-hero: #ffffff;
--pw-h-title-row: #64b5f6;
--pw-h-sub: #9ca3af;
--pw-h-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--pw-badge-grad: linear-gradient(135deg, #1976d2 0%, #1565c0 50%, #0d47a1 100%);
--pw-badge-fg: #ffffff;
--pw-badge-shadow: 0 4px 16px rgba(25, 118, 210, 0.42);
background: var(--home-bg, #383838) !important;
}
/* Match Playwright 1–6 content canvas (#383838); React mount fills the section */
body.dark #section-ci-pipeline-lab #ci-pipeline-lab-root,
body.dark #section-ci-pipeline-lab [data-ci-pipeline-lab],
body.dark #section-api-mock-lab #api-mock-lab-root,
body.dark #section-api-mock-lab [data-api-mock-lab] {
background: var(--home-bg, #383838) !important;
}
body.dark #section-playwright-demo::before {
display: none;
}
/* title block = .dark .section (#282828); demo block = #content area (#383838) */
body.dark #section-playwright-demo > .section:nth-child(2) {
background: #282828 !important;
padding-top: 20px !important;
padding-bottom: 24px !important;
}
body.dark #section-playwright-demo > .section:nth-child(3) {
background: var(--home-bg, #383838) !important;
}
body.dark #section-playwright-demo .pw-demo-inner,
body.dark #section-playwright-demo > .section {
position: relative;
z-index: 1;
}
/* Page hero title — all white in the dark theme */
body.dark #section-playwright-demo h2.pw-sec-title,
body.dark #section-playwright-demo h2.pw-sec-title .pw-sec-hero-ey,
body.dark #section-playwright-demo h2.pw-sec-title .pw-sec-hero-k {
color: #ffffff !important;
}
body.dark #section-playwright-demo h2.pw-sec-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1.5rem, 3.2vw, 2.5rem) !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 !important;
}
body.dark #section-playwright-demo h2.pw-sec-title .pw-sec-hero-ey {
letter-spacing: 0.12em;
}
@media (max-width: 520px) {
body.dark #section-playwright-demo h2.pw-sec-title {
font-size: 1.5rem !important;
}
}
body.dark #section-playwright-demo .pw-demo-hgroup {
max-width: 720px;
margin: 0 auto;
}
body.dark #section-ci-pipeline-lab .pw-sec-eyebrow,
body.dark [data-ci-pipeline-lab] .pw-sec-eyebrow,
body.dark #section-api-mock-lab .pw-sec-eyebrow,
body.dark [data-api-mock-lab] .pw-sec-eyebrow {
margin: 0 0 10px;
font-family: var(--pw-h-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pw-h-eyebrow) !important;
}
body.dark #section-ci-pipeline-lab h2.pw-sec-title,
body.dark [data-ci-pipeline-lab] h2.pw-sec-title,
body.dark #section-api-mock-lab h2.pw-sec-title,
body.dark [data-api-mock-lab] h2.pw-sec-title {
color: var(--pw-h-title-hero) !important;
font-family: var(--pw-h-font) !important;
font-size: clamp(1.5rem, 2.8vw, 1.875rem) !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
body.dark #api-mock-hero,
body:not(.dark) #api-mock-hero {
letter-spacing: 0.12em !important;
}
/* 7 · CI Pipeline Lab: same row header as 5–6 (badge + mavi title + grey sub) */
body.dark #section-ci-pipeline-lab .pw-report-title,
body.dark #section-api-mock-lab .pw-report-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--pw-h-title-row) !important;
margin: 0 0 16px;
line-height: 1.3;
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
body.dark #section-ci-pipeline-lab .pw-quad-num,
body.dark #section-api-mock-lab .pw-quad-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 5px;
border-radius: 8px;
background: var(--pw-badge-grad) !important;
color: var(--pw-badge-fg) !important;
font-size: 0.875rem;
font-weight: 800;
font-family: var(--pw-h-font) !important;
flex-shrink: 0;
box-shadow: var(--pw-badge-shadow) !important;
}
body.dark #section-ci-pipeline-lab .pw-quad-title-txt,
body.dark #section-api-mock-lab .pw-quad-title-txt {
flex: 1;
min-width: 0;
}
body.dark #section-ci-pipeline-lab .pw-quad-title > .pw-quad-title-txt,
body.dark #section-ci-pipeline-lab .pw-report-title > .pw-quad-title-txt,
body.dark #section-api-mock-lab .pw-quad-title > .pw-quad-title-txt,
body.dark #section-api-mock-lab .pw-report-title > .pw-quad-title-txt {
color: var(--pw-h-title-row) !important;
}
body.dark #section-ci-pipeline-lab .pw-quad-sub,
body.dark #section-api-mock-lab .pw-quad-sub {
display: block;
font-family: var(--pw-h-font) !important;
font-size: 0.8125rem;
font-weight: 500;
color: var(--pw-h-sub) !important;
margin-top: 3px;
line-height: 1.35;
}
body.dark #section-ci-pipeline-lab [data-ci-pipeline-lab] .pw-sec-lead,
body.dark [data-ci-pipeline-lab] p.pw-sec-lead,
body.dark #section-api-mock-lab [data-api-mock-lab] .pw-sec-lead,
body.dark [data-api-mock-lab] p.pw-sec-lead {
font-family: var(--pw-h-font);
font-size: 0.875rem;
line-height: 1.55;
color: var(--pw-h-sub) !important;
}
body.dark #section-playwright-demo .pw-demo-sub {
color: var(--pw-h-sub) !important;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
max-width: 700px;
margin: 0.35rem auto 8px;
line-height: 1.6;
}
body.dark #section-playwright-demo .pw-demo-hint {
color: rgba(148, 163, 184, 0.9) !important;
font-size: 13px;
margin: 0 auto 10px;
}
/* Wider than default .container to use side margins for the demo */
body.dark #section-playwright-demo .pw-playwright-wide {
max-width: 1680px !important;
width: 100% !important;
padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
}
body.dark #section-playwright-demo .pw-demo-stage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"pwtl pwtr"
"pwbl pwbr";
gap: 22px 26px;
max-width: 1680px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
align-items: stretch;
}
/* 5 · QA dashboard — always visible; data-pw-dash: idle | running | complete */
body.dark #section-playwright-demo .pw-report-row {
max-width: 1680px;
margin: 28px auto 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Run dashboard + Bug Report Lab — side by side (matches two-column lab layout) */
body.dark #section-playwright-demo .pw-dash-brl-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 26px;
align-items: stretch;
width: 100%;
margin: 28px 0 0;
padding: 0;
box-sizing: border-box;
}
body.dark #section-playwright-demo .pw-dash-brl-col {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-self: stretch;
}
/* 5 · Run dashboard: column height matches 6 · Bug Report Lab (the shorter one stretches) */
body.dark #section-playwright-demo .pw-dash-brl-col.pw-dash-brl-dash {
height: 100%;
}
body.dark #section-playwright-demo .pw-dash-brl-dash .pw-report-row {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
body.dark #section-playwright-demo .pw-dash-brl-dash .pw-report-dash {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.dark #section-playwright-demo .pw-dash-brl-dash .pw-dash-foot {
margin-top: auto;
}
body.dark #section-playwright-demo .pw-dash-brl-split .pw-report-row,
body.dark #section-playwright-demo .pw-dash-brl-dash .pw-report-row {
margin: 0;
max-width: none;
}
/* Same “paper” as 5 + grid (383838) — was navy card; not a separate panel */
body.dark #section-playwright-demo .pw-dash-brl-brl {
background: transparent !important;
border: none !important;
border-radius: 0;
box-shadow: none !important;
overflow: visible;
padding: 0 !important;
margin: 0 !important;
height: 100%;
}
body.dark #section-playwright-demo .pw-dash-brl-brl #bug-report-lab-root {
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0 2px 0;
box-sizing: border-box;
}
body.dark #section-playwright-demo .pw-dash-brl-brl #bug-report-lab-root > section {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
@media (max-width: 1100px) {
body.dark #section-playwright-demo .pw-dash-brl-split {
grid-template-columns: 1fr;
}
}
/* Bug Report Lab column: align top/gap spacing with 5 · Run dashboard */
body.dark #section-playwright-demo #bug-report-lab-root h3.pw-report-title {
margin-bottom: 6px !important;
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--pw-h-title-row) !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
line-height: 1.3 !important;
}
body.dark #section-playwright-demo #bug-report-lab-root h3 .pw-quad-sub {
color: var(--pw-h-sub) !important;
}
/* 1–6 · row headers: one typography + one badge (mavi) + gray subs */
body.dark #section-playwright-demo .pw-quad-title,
body.dark #section-playwright-demo .pw-report-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--pw-h-title-row) !important;
margin: 0 0 16px;
line-height: 1.3;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* colors.css h3>span { #1ABC9C } would override the span — keep title text in theme blue */
body.dark #section-playwright-demo .pw-quad-title > .pw-quad-title-txt,
body.dark #section-playwright-demo .pw-report-title > .pw-quad-title-txt {
color: var(--pw-h-title-row) !important;
}
body.dark #section-playwright-demo .pw-report-dash {
position: relative;
border-radius: 20px;
background: var(--pw-panel);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.2) inset,
0 20px 50px rgba(0, 0, 0, 0.45);
overflow: hidden;
isolation: isolate;
}
body.dark #section-playwright-demo .pw-dash-glow {
position: absolute;
inset: -40% -20% auto -20%;
height: 70%;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
animation: pwDashGlow 5s ease-in-out infinite alternate;
}
@keyframes pwDashGlow {
0% { opacity: 0.65; transform: translateY(0) scale(1); }
100% { opacity: 1; transform: translateY(4px) scale(1.02); }
}
body.dark #section-playwright-demo .pw-dash-toolbar {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
padding: 18px 22px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
body.dark #section-playwright-demo .pw-dash-toolbar > div:first-child {
display: flex;
flex-direction: column;
gap: 6px;
}
body.dark #section-playwright-demo .pw-dash-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: #e2e8f0;
letter-spacing: -0.01em;
}
body.dark #section-playwright-demo .pw-dash-live::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: #64748b;
box-shadow: none;
animation: none;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="running"] .pw-dash-live::before {
background: #fbbf24;
box-shadow: 0 0 12px rgba(251, 191, 36, 0.65), 0 0 22px rgba(251, 191, 36, 0.35);
animation: pwPulseDot 1.2s ease-in-out infinite;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-live::before {
background: #4ade80;
box-shadow: 0 0 12px #4ade80, 0 0 24px rgba(74, 222, 128, 0.5);
animation: pwPulseDot 2s ease-in-out infinite;
}
@keyframes pwPulseDot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.85; }
}
body.dark #section-playwright-demo .pw-report-meta {
font-size: 12px;
color: rgba(148, 163, 184, 0.95);
font-variant-numeric: tabular-nums;
}
body.dark #section-playwright-demo .pw-dash-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
body.dark #section-playwright-demo .pw-dash-chip {
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.2);
color: rgba(226, 232, 240, 0.95);
}
body.dark #section-playwright-demo .pw-dash-chip.pw-chip-ok {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(74, 222, 128, 0.35);
color: #86efac;
box-shadow: 0 0 20px rgba(74, 222, 128, 0.12);
}
body.dark #section-playwright-demo .pw-dash-chip.pw-chip-warn {
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.4);
color: #fde68a;
box-shadow: 0 0 18px rgba(251, 191, 36, 0.12);
}
body.dark #section-playwright-demo .pw-dash-chip.pw-chip-idle {
opacity: 0.75;
}
body.dark #section-playwright-demo .pw-dash-cards {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
padding: 18px 22px 8px;
}
@media (max-width: 1100px) {
body.dark #section-playwright-demo .pw-dash-cards {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
body.dark #section-playwright-demo .pw-dash-cards {
grid-template-columns: repeat(2, 1fr);
}
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="idle"] .pw-dash-card,
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="running"] .pw-dash-card {
opacity: 1;
transform: none;
animation: none;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card {
animation: pwDashCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:nth-child(1) { animation-delay: 0.04s; }
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:nth-child(2) { animation-delay: 0.1s; }
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:nth-child(3) { animation-delay: 0.16s; }
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:nth-child(4) { animation-delay: 0.22s; }
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:nth-child(5) { animation-delay: 0.28s; }
@keyframes pwDashCardIn {
from { transform: translateY(10px); }
to { transform: translateY(0); }
}
body.dark #section-playwright-demo .pw-dash-card {
position: relative;
border-radius: 14px;
padding: 14px 16px 16px;
background: var(--pw-void-40);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
body.dark #section-playwright-demo .pw-dash-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 50%, rgba(255, 255, 255, 0.04));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
body.dark #section-playwright-demo .pw-dash-card.pw-card-pass {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 32px rgba(74, 222, 128, 0.08);
}
body.dark #section-playwright-demo .pw-dash-card.pw-card-fail {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 28px rgba(248, 113, 113, 0.06);
}
body.dark #section-playwright-demo .pw-dash-card-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(148, 163, 184, 0.88);
margin-bottom: 8px;
}
body.dark #section-playwright-demo .pw-dash-card-val {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
letter-spacing: -0.03em;
color: #f1f5f9;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
body.dark #section-playwright-demo .pw-dash-card-val.pw-val-pass { color: #86efac; text-shadow: 0 0 24px rgba(74, 222, 128, 0.35); }
body.dark #section-playwright-demo .pw-dash-card-val.pw-val-fail { color: #fca5a5; text-shadow: 0 0 20px rgba(248, 113, 113, 0.25); }
body.dark #section-playwright-demo .pw-dash-card-val.pw-val-accent { color: #7dd3fc; text-shadow: 0 0 20px rgba(56, 189, 248, 0.25); }
body.dark #section-playwright-demo .pw-dash-card-hint {
margin-top: 6px;
font-size: 11px;
color: rgba(148, 163, 184, 0.75);
}
body.dark #section-playwright-demo .pw-dash-section {
position: relative;
z-index: 1;
padding: 8px 22px 18px;
}
body.dark #section-playwright-demo .pw-dash-section-h {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(148, 163, 184, 0.75);
margin: 0 0 12px;
}
body.dark #section-playwright-demo .pw-dash-table-wrap {
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--pw-void-35);
overflow: hidden;
}
body.dark #section-playwright-demo .pw-report-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
body.dark #section-playwright-demo .pw-report-table th,
body.dark #section-playwright-demo .pw-report-table td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
body.dark #section-playwright-demo .pw-report-table tbody tr:last-child td {
border-bottom: none;
}
body.dark #section-playwright-demo .pw-report-table th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(148, 163, 184, 0.75);
background: rgba(0, 0, 0, 0.2);
}
body.dark #section-playwright-demo .pw-report-table td code {
font-size: 12px;
color: #93c5fd;
background: rgba(59, 130, 246, 0.12);
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(96, 165, 250, 0.2);
}
body.dark #section-playwright-demo .pw-table-status {
font-weight: 600;
font-size: 13px;
}
body.dark #section-playwright-demo .pw-table-status-idle {
color: rgba(148, 163, 184, 0.9);
}
body.dark #section-playwright-demo .pw-table-status-running {
color: #fcd34d;
}
body.dark #section-playwright-demo .pw-table-status-pass {
display: inline-flex;
align-items: center;
gap: 6px;
color: #86efac;
font-weight: 700;
}
body.dark #section-playwright-demo .pw-table-status-pass::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
}
body.dark #section-playwright-demo .pw-dash-artifacts {
padding-top: 4px;
}
body.dark #section-playwright-demo .pw-artifact {
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--pw-void-35);
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.dark #section-playwright-demo .pw-artifact:last-of-type {
margin-bottom: 0;
}
body.dark #section-playwright-demo .pw-artifact[open] {
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
body.dark #section-playwright-demo .pw-artifact > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: #e2e8f0;
user-select: none;
transition: background 0.2s ease;
}
body.dark #section-playwright-demo .pw-artifact > summary::-webkit-details-marker {
display: none;
}
body.dark #section-playwright-demo .pw-artifact > summary:hover {
background: rgba(148, 163, 184, 0.06);
}
body.dark #section-playwright-demo .pw-artifact-chevron {
width: 9px;
height: 9px;
border-right: 2px solid rgba(148, 163, 184, 0.7);
border-bottom: 2px solid rgba(148, 163, 184, 0.7);
transform: rotate(-45deg);
transition: transform 0.25s ease;
flex-shrink: 0;
margin-top: -4px;
}
body.dark #section-playwright-demo .pw-artifact[open] > summary .pw-artifact-chevron {
transform: rotate(45deg);
margin-top: 2px;
}
body.dark #section-playwright-demo .pw-artifact-body {
padding: 0 16px 14px;
font-size: 12px;
line-height: 1.55;
color: rgba(203, 213, 225, 0.92);
border-top: 1px solid rgba(148, 163, 184, 0.08);
}
body.dark #section-playwright-demo .pw-artifact-screenshot-desc {
margin: 0 0 10px 0;
}
body.dark #section-playwright-demo .pw-artifact-thumb {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
body.dark #section-playwright-demo .pw-artifact-shot {
width: min(100%, 220px);
height: 140px;
flex: 0 0 auto;
border-radius: 8px;
background: var(--pw-panel-ink);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
body.dark #section-playwright-demo .pw-artifact-shot:has(.pw-artifact-shot-img.pw-artifact-shot-img--ready) {
cursor: zoom-in;
}
body.dark #section-playwright-demo .pw-artifact-shot::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
animation: pwShimmer 2.5s ease-in-out infinite;
pointer-events: none; /* let clicks reach the thumbnail image; without :has the overlay must not block them */
}
body.dark #section-playwright-demo .pw-artifact-shot:has(.pw-artifact-shot-img.pw-artifact-shot-img--ready)::after {
display: none;
}
body.dark #section-playwright-demo .pw-artifact-shot .pw-artifact-shot-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: none;
border-radius: 7px;
}
body.dark #section-playwright-demo .pw-artifact-shot .pw-artifact-shot-img.pw-artifact-shot-img--ready {
display: block;
}
body.dark #section-playwright-demo .pw-artifact-video-hint {
margin: 0 0 10px 0;
}
body.dark #section-playwright-demo .pw-artifact-video {
width: 100%;
max-width: 520px;
max-height: 300px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--pw-panel-ink);
display: none;
}
body.dark #section-playwright-demo .pw-artifact-video.pw-artifact-video--ready {
display: block;
}
body.dark #section-playwright-demo .pw-artifact-video-cap {
margin: 8px 0 0 0;
font-size: 11px;
color: rgba(148, 163, 184, 0.95);
display: none;
}
body.dark #section-playwright-demo .pw-artifact-video-cap.pw-artifact-video-cap--ready {
display: block;
}
/* Full-size screenshot lightbox (appended to body — above section overflow) */
.pw-artifact-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 100500;
align-items: center;
justify-content: center;
padding: max(16px, 2vw);
box-sizing: border-box;
}
.pw-artifact-lightbox.pw-artifact-lightbox--open {
display: flex;
}
.pw-artifact-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.92);
cursor: pointer;
}
.pw-artifact-lightbox-figure {
position: relative;
z-index: 1;
margin: 0;
max-width: min(96vw, 1280px);
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: auto;
}
.pw-artifact-lightbox-x {
position: absolute;
top: -6px;
right: -6px;
z-index: 2;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
background: rgba(0, 0, 0, 0.55);
color: #e2e8f0;
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.pw-artifact-lightbox-x:hover {
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.pw-artifact-lightbox-img {
display: block;
max-width: 100%;
max-height: min(82vh, 920px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.pw-artifact-lightbox-cap {
margin: 10px 0 0 0;
padding: 0 8px;
font-size: 13px;
line-height: 1.45;
color: #cbd5e1;
text-align: center;
max-width: 100%;
}
@keyframes pwShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
body.dark #section-playwright-demo .pw-dash-foot {
position: relative;
z-index: 1;
padding: 14px 22px 18px;
font-size: 11px;
line-height: 1.55;
color: rgba(148, 163, 184, 0.88);
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: var(--pw-void-35);
}
body.dark #section-playwright-demo .pw-dash-foot kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
padding: 3px 7px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(148, 163, 184, 0.22);
color: #e2e8f0;
}
/* Allure-style report summary (HTML / CI dashboard) */
body.dark #section-playwright-demo .pw-allure-hero {
--allure-bg: #2a2a2a;
--allure-green: #97cc64;
--allure-red: #fd5a3e;
--allure-muted: rgba(255, 255, 255, 0.45);
position: relative;
z-index: 1;
background: var(--allure-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 20px 22px 22px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px 24px;
}
@media (max-width: 900px) {
body.dark #section-playwright-demo .pw-allure-hero {
grid-template-columns: 1fr;
text-align: center;
}
body.dark #section-playwright-demo .pw-allure-hero-left { align-items: center; }
body.dark #section-playwright-demo .pw-allure-donut-wrap { justify-self: center; }
}
body.dark #section-playwright-demo .pw-allure-hero-left {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
body.dark #section-playwright-demo .pw-allure-hero-mid {
text-align: center;
padding: 0 12px;
}
body.dark #section-playwright-demo .pw-allure-hero .pw-allure-donut-wrap {
justify-self: end;
}
body.dark #section-playwright-demo .pw-allure-title {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
color: #fff;
}
body.dark #section-playwright-demo .pw-allure-date {
font-size: 13px;
color: var(--allure-muted);
}
body.dark #section-playwright-demo .pw-allure-range {
font-size: 12px;
color: var(--allure-muted);
font-variant-numeric: tabular-nums;
}
body.dark #section-playwright-demo .pw-allure-hero .pw-allure-total {
display: block;
font-size: clamp(40px, 5vw, 56px);
font-weight: 800;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
}
body.dark #section-playwright-demo .pw-allure-hero .pw-allure-total-lbl {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--allure-muted);
letter-spacing: 0.02em;
}
body.dark #section-playwright-demo .pw-allure-donut-wrap {
position: relative;
width: 132px;
height: 132px;
flex-shrink: 0;
}
body.dark #section-playwright-demo .pw-allure-donut {
position: relative;
width: 132px;
height: 132px;
border-radius: 50%;
background: conic-gradient(
var(--allure-green) 0turn calc(var(--pass-frac, 0) * 1turn),
var(--allure-red) calc(var(--pass-frac, 0) * 1turn) 1turn
);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
body.dark #section-playwright-demo .pw-allure-donut[data-donut="idle"] {
background: conic-gradient(#2a2a2a 0turn 1turn);
}
body.dark #section-playwright-demo .pw-allure-donut[data-donut="running"] {
background: conic-gradient(#3d3d3d 0turn 0.25turn, #2a2a2a 0.25turn 1turn);
animation: pwAllureDonutSpin 1.1s linear infinite;
}
@keyframes pwAllureDonutSpin {
to { transform: rotate(360deg); }
}
body.dark #section-playwright-demo .pw-allure-hero .pw-allure-donut::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, var(--allure-bg) 59%, transparent 60%);
}
body.dark #section-playwright-demo .pw-allure-donut-pct {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 800;
color: #fff;
z-index: 2;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
body.dark #section-playwright-demo .pw-allure-hero-ico {
position: absolute;
top: 18px;
right: 18px;
width: 22px;
height: 22px;
opacity: 0.35;
color: #fff;
}
body.dark #section-playwright-demo .pw-allure-hero-ico svg {
display: block;
width: 100%;
height: 100%;
}
body.dark #section-playwright-demo .pw-allure-panels {
position: relative;
z-index: 1;
background: #242424;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.dark #section-playwright-demo .pw-allure-block {
padding: 16px 22px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.dark #section-playwright-demo .pw-allure-block:last-child {
border-bottom: none;
}
body.dark #section-playwright-demo .pw-allure-block-h {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
body.dark #section-playwright-demo .pw-allure-block-meta {
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.35);
}
body.dark #section-playwright-demo .pw-allure-suite-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
body.dark #section-playwright-demo .pw-allure-suite-name {
font-size: 14px;
color: #fff;
min-width: 90px;
}
body.dark #section-playwright-demo .pw-allure-hbar {
display: flex;
flex: 1;
min-width: 160px;
height: 32px;
border-radius: 4px;
overflow: hidden;
font-size: 13px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
body.dark #section-playwright-demo .pw-allure-hbar-seg {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dark #section-playwright-demo .pw-allure-hbar-fail {
background: var(--allure-red, #fd5a3e);
}
body.dark #section-playwright-demo .pw-allure-hbar-pass {
background: var(--allure-green, #97cc64);
color: #0b0b0b;
}
body.dark #section-playwright-demo .pw-allure-hbar.pw-allure-hbar-empty {
background: #1e1e1e;
justify-content: center;
color: rgba(255, 255, 255, 0.35);
font-weight: 600;
}
body.dark #section-playwright-demo .pw-allure-hbar-idle {
flex: 1;
text-align: center;
font-size: 12px;
line-height: 32px;
}
body.dark #section-playwright-demo .pw-allure-showall {
margin-top: 10px;
text-align: center;
font-size: 12px;
color: #7eb8ff;
cursor: default;
}
body.dark #section-playwright-demo .pw-allure-env-placeholder {
margin: 0;
padding: 20px 10px;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.38);
}
@media (prefers-reduced-motion: reduce) {
body.dark #section-playwright-demo .pw-allure-donut[data-donut="running"] {
animation: none;
}
body.dark #section-playwright-demo .pw-dash-glow,
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="running"] .pw-dash-live::before,
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-live::before,
body.dark #section-playwright-demo .pw-artifact-shot::after,
body:not(.dark) #section-playwright-demo .pw-dash-glow,
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="running"] .pw-dash-live::before,
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-live::before {
animation: none !important;
}
body.dark #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card {
animation: none !important;
}
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card {
animation: none !important;
}
}
#section-bug-lab {
scroll-margin-top: 100px;
}
#section-ci-pipeline-lab,
#section-api-mock-lab {
scroll-margin-top: 100px;
}
.brl-fallback-shell {
margin: 0;
padding: 2.5rem 1.25rem 3rem;
text-align: center;
}
body:not(.dark) .brl-fallback-shell {
background: #f0f4f8;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body.dark .brl-fallback-shell {
background: linear-gradient(180deg, #2d2d2d 0%, #333333 100%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.brl-fallback-shell h3 {
color: #0f172a;
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 0.75rem;
}
.brl-fallback-shell p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.55;
max-width: 540px;
margin: 0 auto 0.65rem;
}
.brl-fallback-shell code {
color: #0369a1;
font-size: 0.88em;
}
body.dark .brl-fallback-shell h3 {
color: #f1f5f9;
}
body.dark .brl-fallback-shell p {
color: #94a3b8;
}
body.dark .brl-fallback-shell code {
color: #7dd3fc;
}
.cpl-fallback-shell {
margin: 0;
padding: 2.5rem 1.25rem 3rem;
text-align: center;
}
body:not(.dark) .cpl-fallback-shell {
background: #ffffff;
}
body.dark .cpl-fallback-shell {
background: var(--home-bg, #383838);
}
.cpl-fallback-shell h3 {
color: #0f172a;
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 0.75rem;
}
.cpl-fallback-shell p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.55;
max-width: 540px;
margin: 0 auto 0.65rem;
}
.cpl-fallback-shell code {
color: #0369a1;
font-size: 0.88em;
}
body.dark .cpl-fallback-shell h3 {
color: #f1f5f9;
}
body.dark .cpl-fallback-shell p {
color: #94a3b8;
}
body.dark .cpl-fallback-shell code {
color: #7dd3fc;
}
body.dark #section-playwright-demo .pw-q-tl {
grid-area: pwtl;
}
body.dark #section-playwright-demo .pw-q-tr {
grid-area: pwtr;
}
body.dark #section-playwright-demo .pw-q-bl {
grid-area: pwbl;
}
body.dark #section-playwright-demo .pw-q-br {
grid-area: pwbr;
}
body.dark #section-playwright-demo .pw-quad {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
align-self: stretch;
}
body.dark #section-playwright-demo .pw-quad-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 5px;
border-radius: 8px;
background: var(--pw-badge-grad) !important;
color: var(--pw-badge-fg) !important;
font-size: 0.875rem;
font-weight: 800;
font-family: var(--pw-h-font) !important;
flex-shrink: 0;
box-shadow: var(--pw-badge-shadow) !important;
}
body.dark #section-playwright-demo .pw-quad-title-txt {
flex: 1;
min-width: 0;
}
body.dark #section-playwright-demo .pw-quad-sub {
display: block;
font-family: var(--pw-h-font) !important;
font-size: 12px;
font-weight: 500;
color: var(--pw-h-sub) !important;
margin-top: 2px;
line-height: 1.4;
}
body.dark #section-playwright-demo .pw-quad-card {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
body.dark #section-playwright-demo .pw-q-tl .pw-rail {
padding: 14px 14px 16px;
}
body.dark #section-playwright-demo .pw-br-stack {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-height: 0;
gap: 14px;
}
body.dark #section-playwright-demo .pw-br-stack .pw-glass.pw-browser {
flex: 1 1 0;
min-height: 0;
}
body.dark #section-playwright-demo .pw-rail-below-browser {
flex: 0 0 auto;
padding: 10px 12px 12px;
border-radius: 16px;
}
@media (max-width: 899px) {
body.dark #section-playwright-demo .pw-demo-stage {
grid-template-columns: 1fr;
grid-template-areas:
"pwtl"
"pwtr"
"pwbl"
"pwbr";
gap: 20px;
}
/*
* Single-column layout: .pw-quad has no definite height, so flex: 1 1 0 + min-height: 0
* on .pw-br-stack collapses the headed browser to 0px (flex-grow ignored when height is auto).
*/
body.dark #section-playwright-demo .pw-q-br .pw-br-stack {
flex: 0 1 auto;
min-height: auto;
}
body.dark #section-playwright-demo .pw-br-stack .pw-glass.pw-browser {
flex: 0 1 auto;
min-height: auto;
}
/*
* Stacked layout: .pw-quad has no defined height, so flex: 1 1 0 on the
* test-script card + pre would collapse the code block to 0px (same
* pattern as the headed browser note above).
*/
body.dark #section-playwright-demo .pw-q-tr .pw-quad-card {
flex: 0 1 auto;
min-height: auto;
}
}
body.dark #section-playwright-demo .pw-rail {
border-radius: 16px;
}
body.dark #section-playwright-demo .pw-rail-h-small {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pw-h-title-row) !important;
margin: 14px 0 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark #section-playwright-demo .pw-rail-h-small.pw-rail-h-first {
margin: 0 0 6px;
padding-top: 0;
border-top: none;
}
body.dark #section-playwright-demo .pw-rail-list {
list-style: none;
margin: 0;
padding: 0;
}
body.dark #section-playwright-demo .pw-rail-list li {
position: relative;
font-size: 12.5px;
line-height: 1.4;
color: rgba(203, 213, 225, 0.72);
padding: 8px 0 8px 30px;
margin: 0;
border-left: 2px solid rgba(255, 255, 255, 0.1);
transition: color 0.25s, border-color 0.25s, background 0.25s;
}
body.dark #section-playwright-demo .pw-rail-list li::before {
content: attr(data-n);
position: absolute;
left: 0;
top: 7px;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: rgba(148, 163, 184, 0.95);
}
body.dark #section-playwright-demo .pw-rail-list li.pw-rail-active {
color: #e2e8f0;
border-left-color: var(--pw-h-title-row);
background: linear-gradient(90deg, rgba(100, 181, 246, 0.12), transparent 70%);
}
body.dark #section-playwright-demo .pw-rail-list li.pw-rail-active::before {
background: var(--pw-badge-grad);
color: #ffffff;
}
body.dark #section-playwright-demo .pw-bdd-gherkin {
margin: 8px 0 0;
padding: 12px 12px 14px 14px;
font-size: 11.5px;
line-height: 1.68;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
color: #cbd5e1;
background: rgba(0, 0, 0, 0.4);
border-radius: 10px;
border: 1px solid rgba(34, 197, 94, 0.2);
border-left: 3px solid #4ade80;
white-space: pre;
overflow-x: auto;
flex: 1 1 auto;
min-height: 8.5em;
}
body.dark #section-playwright-demo .pw-tc-scroll + .pw-bdd-gherkin {
margin-top: 18px;
}
body.dark #section-playwright-demo .pw-gh {
font-weight: 600;
}
body.dark #section-playwright-demo .pw-gh-feat { color: #7dd3fc; }
body.dark #section-playwright-demo .pw-gh-sce { color: #5eead4; }
body.dark #section-playwright-demo .pw-gh-g { color: #4ade80; }
body.dark #section-playwright-demo .pw-gh-w { color: #fbbf24; }
body.dark #section-playwright-demo .pw-gh-a { color: #7dd3fc; }
body.dark #section-playwright-demo .pw-gh-t { color: #c4b5fd; }
body.dark #section-playwright-demo .pw-bdd-gherkin .pw-gh-str {
color: #c3e88d;
}
body.dark #section-playwright-demo .pw-q-tl .pw-bdd-inset {
flex: 0 0 auto;
width: 100%;
min-height: 0;
max-height: none;
overflow: visible;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 0 4px 2px;
}
body.dark #section-playwright-demo .pw-bdd-sec-h {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pw-h-title-row) !important;
margin: 0;
padding: 10px 0 2px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark #section-playwright-demo .pw-tc-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 4px;
}
body.dark #section-playwright-demo .pw-q-tl .pw-tc-scroll {
flex: 0 1 auto;
min-height: 12rem;
max-height: min(52vh, 520px);
overflow-y: auto;
margin-bottom: 0;
}
body.dark #section-playwright-demo .pw-q-tl .pw-bdd-gherkin {
flex-shrink: 0;
max-height: none;
overflow: visible;
}
body.dark #section-playwright-demo .pw-q-tl .pw-tc-table {
font-size: 11px;
min-width: 420px;
}
body.dark #section-playwright-demo .pw-tc-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-size: 12.5px;
line-height: 1.5;
color: #e2e8f0;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
}
body.dark #section-playwright-demo .pw-tc-table th,
body.dark #section-playwright-demo .pw-tc-table td {
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 10px 12px 12px;
vertical-align: top;
text-align: left;
}
body.dark #section-playwright-demo .pw-tc-table th[scope="row"] {
width: 24%;
min-width: 132px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pw-h-title-row) !important;
background: rgba(0, 0, 0, 0.35);
}
body.dark #section-playwright-demo .pw-tc-table td p {
margin: 0 0 0.5em;
}
body.dark #section-playwright-demo .pw-tc-table td p:last-child {
margin-bottom: 0;
}
body.dark #section-playwright-demo .pw-tc-table ol {
margin: 0.35em 0 0 1.15em;
padding: 0;
}
body.dark #section-playwright-demo .pw-tc-table ol.pw-tc-steps {
margin: 0.35em 0 0 0.25em;
column-count: 2;
column-gap: 1.25em;
}
body.dark #section-playwright-demo .pw-tc-table ol.pw-tc-steps li {
break-inside: avoid;
}
body.dark #section-playwright-demo .pw-tc-table ol li {
margin-bottom: 0.3em;
}
/* Mobile: no inner scroll on test case card; denser so more fits in the viewport */
@media (max-width: 768px) {
body.dark #section-playwright-demo .pw-q-tl .pw-quad-title {
margin-bottom: 8px;
}
body.dark #section-playwright-demo .pw-q-tl .pw-rail {
padding: 8px 8px 10px;
}
body.dark #section-playwright-demo .pw-bdd-inset {
gap: 6px;
padding: 0 0 2px 0;
}
body.dark #section-playwright-demo .pw-q-tl .pw-tc-scroll {
flex: 0 0 auto;
min-height: 0;
max-height: none;
overflow: visible;
-webkit-overflow-scrolling: auto;
margin-bottom: 0;
}
body.dark #section-playwright-demo .pw-tc-table {
min-width: 0;
width: 100%;
table-layout: fixed;
font-size: 9.5px;
line-height: 1.32;
}
body.dark #section-playwright-demo .pw-q-tl .pw-tc-table {
min-width: 0;
}
body.dark #section-playwright-demo .pw-tc-table th,
body.dark #section-playwright-demo .pw-tc-table td {
padding: 3px 5px 4px;
word-wrap: break-word;
overflow-wrap: break-word;
}
body.dark #section-playwright-demo .pw-tc-table th[scope="row"] {
width: 30%;
min-width: 0;
font-size: 8.5px;
letter-spacing: 0.04em;
}
body.dark #section-playwright-demo .pw-tc-testdata {
font-size: 9px;
line-height: 1.3;
padding: 3px 5px;
gap: 3px 6px;
}
body.dark #section-playwright-demo .pw-tc-table ol.pw-tc-steps {
column-count: 2;
column-gap: 0.65em;
margin: 0.2em 0 0 0.15em;
}
body.dark #section-playwright-demo .pw-tc-table ol li {
margin-bottom: 0.15em;
}
body.dark #section-playwright-demo .pw-bdd-gherkin {
flex: 0 0 auto;
margin: 4px 0 0;
padding: 6px 6px 8px 8px;
font-size: 9px;
line-height: 1.38;
min-height: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-x: hidden;
}
body.dark #section-playwright-demo .pw-tc-scroll + .pw-bdd-gherkin {
margin-top: 8px;
}
}
body.dark #section-playwright-demo .pw-tc-table code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em;
color: #c3e88d;
background: rgba(0, 0, 0, 0.35);
padding: 1px 5px;
border-radius: 4px;
}
body.dark #section-playwright-demo .pw-tc-testdata {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: 12px;
line-height: 1.45;
padding: 6px 10px;
border-radius: 8px;
color: var(--pw-h-title-row);
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(100, 181, 246, 0.22);
}
body.dark #section-playwright-demo .pw-bdd-inset .pw-bdd-gherkin {
flex: 0 0 auto;
}
body.dark #section-playwright-demo .pw-glass {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(79, 195, 247, 0.06) inset;
}
body.dark #section-playwright-demo .pw-code-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(148, 163, 184, 0.95);
}
body.dark #section-playwright-demo .pw-dots {
display: flex;
gap: 6px;
}
body.dark #section-playwright-demo .pw-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
}
body.dark #section-playwright-demo .pw-dots .d1 { background: #ff5f57; }
body.dark #section-playwright-demo .pw-dots .d2 { background: #febc2e; }
body.dark #section-playwright-demo .pw-dots .d3 { background: #28c840; }
body.dark #section-playwright-demo .pw-code-body {
margin: 0;
padding: 16px 18px 20px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.6;
color: #e2e8f0;
overflow-x: auto;
overflow-y: auto;
max-height: none;
user-select: text;
-webkit-user-select: text;
}
@media (min-width: 900px) {
body.dark #section-playwright-demo .pw-q-tr .pw-quad-card {
flex: 1 1 0;
min-height: 0;
}
body.dark #section-playwright-demo .pw-q-tr .pw-code-body {
flex: 1 1 0;
min-height: 0;
}
}
body.dark #section-playwright-demo .pw-code-body:focus {
outline: 2px solid rgba(79, 195, 247, 0.35);
outline-offset: 2px;
}
body.dark #section-playwright-demo .pw-s-kw { color: #c792ea; }
body.dark #section-playwright-demo .pw-s-fn { color: #82aaff; }
body.dark #section-playwright-demo .pw-s-str { color: #c3e88d; }
body.dark #section-playwright-demo .pw-s-cmt { color: #637777; font-style: italic; }
body.dark #section-playwright-demo .pw-s-num { color: #f78c6c; }
body.dark #section-playwright-demo .pw-exec {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
min-height: clamp(400px, 58vh, 720px);
}
body.dark #section-playwright-demo .pw-exec-top {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 14px;
}
body.dark #section-playwright-demo .pw-exec-cta-hint {
margin: 0;
font-size: 13.5px;
line-height: 1.45;
color: #e2e8f0;
font-weight: 600;
}
body.dark #section-playwright-demo .pw-exec-cta-hint em {
font-style: normal;
font-size: inherit;
color: #4ade80;
font-weight: 800;
}
body.dark #section-playwright-demo .pw-exec-cta-hint .pw-cta-dim {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: rgba(148, 163, 184, 0.95);
}
body.dark #section-playwright-demo .pw-exec-cta-row {
display: flex;
align-items: center;
justify-content: center;
}
body.dark #section-playwright-demo #pw-run-test {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: min(100%, 280px);
padding: 16px 32px 16px 28px;
border: 2px solid rgba(147, 197, 253, 0.45);
border-radius: 999px;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.02em;
color: #eff6ff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
background: linear-gradient(180deg, #42a5f5 0%, #1976d2 40%, #0d47a1 100%);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.25) inset,
0 6px 28px rgba(25, 118, 210, 0.55),
0 0 40px rgba(66, 165, 245, 0.3);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s;
animation: pw-cta-breathe 2.6s ease-in-out infinite;
}
/* Light theme: Read more / :root blue gradient (81D4FA → 4FC3F7) */
body:not(.dark) #section-playwright-demo #pw-run-test {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: min(100%, 280px);
padding: 16px 32px 16px 28px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 999px;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.02em;
color: #ffffff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
background: linear-gradient(180deg, #a5e1fb 0%, #4fc3f7 36%, #0284c7 100%);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1) inset,
0 6px 28px rgba(79, 195, 247, 0.5),
0 0 40px rgba(129, 212, 250, 0.35);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s;
animation: pw-cta-breathe-light 2.6s ease-in-out infinite;
}
body.dark #section-playwright-demo #pw-run-test .pw-run-icon,
body:not(.dark) #section-playwright-demo #pw-run-test .pw-run-icon {
font-size: 15px;
opacity: 0.95;
}
body:not(.dark) #section-playwright-demo #pw-run-test .pw-run-icon {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
@keyframes pw-cta-breathe {
0%, 100% {
filter: brightness(1);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.25) inset,
0 6px 28px rgba(25, 118, 210, 0.5),
0 0 0 0 rgba(66, 165, 245, 0.4);
}
50% {
filter: brightness(1.06);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.25) inset,
0 8px 36px rgba(25, 118, 210, 0.65),
0 0 0 8px rgba(100, 181, 246, 0.14);
}
}
@keyframes pw-cta-breathe-light {
0%, 100% {
filter: brightness(1);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1) inset,
0 6px 28px rgba(79, 195, 247, 0.45),
0 0 0 0 rgba(129, 212, 250, 0.45);
}
50% {
filter: brightness(1.05);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08) inset,
0 8px 36px rgba(56, 189, 248, 0.55),
0 0 0 8px rgba(125, 211, 252, 0.18);
}
}
body.dark #section-playwright-demo #pw-run-test:hover:not(:disabled) {
transform: translateY(-2px) scale(1.02);
animation: none;
filter: brightness(1.08);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.2) inset,
0 12px 40px rgba(25, 118, 210, 0.65),
0 0 50px rgba(66, 165, 245, 0.38);
}
body:not(.dark) #section-playwright-demo #pw-run-test:hover:not(:disabled) {
transform: translateY(-2px) scale(1.02);
animation: none;
filter: brightness(1.06);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1) inset,
0 12px 40px rgba(56, 189, 248, 0.55),
0 0 50px rgba(14, 165, 233, 0.4);
}
body.dark #section-playwright-demo #pw-run-test:disabled,
body:not(.dark) #section-playwright-demo #pw-run-test:disabled {
opacity: 0.72;
cursor: not-allowed;
animation: none;
filter: brightness(0.95);
}
@media (prefers-reduced-motion: reduce) {
body.dark #section-playwright-demo #pw-run-test,
body:not(.dark) #section-playwright-demo #pw-run-test {
animation: none;
}
}
body.dark #section-playwright-demo .pw-run-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: #93c5fd;
border-radius: 50%;
animation: pw-spin 0.7s linear infinite;
}
body:not(.dark) #section-playwright-demo .pw-run-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: #0284c7;
border-radius: 50%;
animation: pw-spin 0.7s linear infinite;
}
@keyframes pw-spin {
to { transform: rotate(360deg); }
}
body.dark #section-playwright-demo .pw-term-wrap {
flex: 1;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.35);
border-radius: 12px;
border: 1px solid rgba(34, 197, 94, 0.2);
min-height: min(52vh, 500px);
overflow: hidden;
}
/* Bar text: same size as #pw-terminal (11px looked too small next to the body/rail) */
body.dark #section-playwright-demo .pw-term-bar {
padding: 7px 12px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.45;
font-weight: 500;
color: rgba(147, 197, 253, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.2);
}
body.dark #section-playwright-demo .pw-term-bar .pw-s-cmt {
color: rgba(147, 197, 253, 0.65) !important;
font-style: normal !important;
}
body.dark #section-playwright-demo #pw-terminal {
flex: 1;
margin: 0;
padding: 12px 14px 32px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.7;
color: var(--pw-term-fg);
text-shadow: 0 0 14px rgba(100, 181, 246, 0.22);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Simulated terminal + headed area: one min/max so height does not jump on theme switch */
#section-playwright-demo #pw-terminal,
#section-playwright-demo .pw-b-view {
min-height: min(40vh, 360px);
max-height: min(64vh, 600px);
}
body.dark #section-playwright-demo .pw-cursor {
display: inline-block;
width: 8px;
height: 1.1em;
margin-left: 2px;
background: var(--pw-term-cursor);
vertical-align: text-bottom;
animation: pw-blink 1s step-end infinite;
}
body:not(.dark) #section-playwright-demo .pw-cursor {
display: inline-block;
width: 8px;
height: 1.1em;
margin-left: 2px;
background: var(--pw-term-cursor);
vertical-align: text-bottom;
animation: pw-blink 1s step-end infinite;
}
@keyframes pw-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.dark #section-playwright-demo .pw-cursor { animation: none; opacity: 0.7; }
body.dark #section-playwright-demo .pw-run-spinner { animation: none; }
}
body.dark #section-playwright-demo #pw-result {
margin-top: 14px;
padding: 10px 18px 16px 18px;
border-radius: 14px;
background: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.04) 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 8px 28px rgba(0, 0, 0, 0.3);
}
body.dark #section-playwright-demo #pw-result .pw-res-h {
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(148, 163, 184, 0.9);
}
body.dark #section-playwright-demo #pw-result .pw-res-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: 13.5px;
color: #e2e8f0;
margin: 6px 0;
}
body.dark #section-playwright-demo #pw-result .pw-res-line > span:first-child {
color: #f1f5f9;
font-weight: 600;
}
body.dark #section-playwright-demo #pw-result .pw-res-val {
font-weight: 600;
text-align: right;
transition: color 0.25s ease;
}
body.dark #section-playwright-demo #pw-result .pw-res-val.pw-res-pending {
color: rgba(148, 163, 184, 0.85) !important;
font-weight: 500;
}
body.dark #section-playwright-demo #pw-result .pw-res-val.pw-res-run {
color: #fbbf24 !important;
}
body.dark #section-playwright-demo #pw-result .pw-res-val.pw-res-ok {
color: #86efac !important;
}
body.dark #section-playwright-demo .pw-canvas {
position: absolute;
pointer-events: none;
inset: 0;
z-index: 0;
}
/* Simulated headed browser (Chromium) */
body.dark #section-playwright-demo .pw-glass.pw-browser {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
min-height: 0;
}
body.dark #section-playwright-demo .pw-b-chrome {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.45);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 11px;
color: rgba(148, 163, 184, 0.95);
}
body.dark #section-playwright-demo .pw-b-chrome .pw-b-ico {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(160deg, #6ab7ff, #1e6fd0);
flex-shrink: 0;
}
body.dark #section-playwright-demo .pw-b-chrome .pw-b-win-title {
flex: 1;
text-align: center;
letter-spacing: 0.02em;
}
body.dark #section-playwright-demo .pw-b-addr {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 8px;
background: rgba(0, 0, 0, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.dark #section-playwright-demo .pw-b-addr span.pw-b-lock {
font-size: 10px;
opacity: 0.5;
}
body.dark #section-playwright-demo .pw-b-url {
flex: 1;
font-size: 11px;
font-family: ui-monospace, Menlo, Consolas, monospace;
color: #cbd5e1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.dark #section-playwright-demo .pw-b-addr .pw-b-load-anim {
width: 14px;
height: 14px;
border: 2px solid rgba(79, 195, 247, 0.25);
border-top-color: #4FC3F7;
border-radius: 50%;
animation: pw-spin 0.9s linear infinite;
display: none;
}
body.dark #section-playwright-demo #pw-browser.pw-b-do-load .pw-b-addr .pw-b-load-anim {
display: block;
}
body.dark #section-playwright-demo #pw-b-scene-load .pw-b-load-anim {
display: block;
}
body.dark #section-playwright-demo .pw-b-view {
position: relative;
flex: 1;
background: #1a1a1a;
overflow: hidden;
}
/* Theme independent: login/shop centred; splash/load pinned top+side (no centre jump while loading) */
#section-playwright-demo .pw-b-scene {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, transform 0.35s ease;
}
#section-playwright-demo .pw-b-scene.pw-b-active {
opacity: 1;
visibility: visible;
}
#section-playwright-demo #pw-b-scene-splash,
#section-playwright-demo #pw-b-scene-load {
align-items: flex-start;
justify-content: center;
padding: 20px 16px 20px 16px;
}
body.dark #section-playwright-demo .pw-b-splash-inner {
text-align: center;
padding: 0 8px;
color: rgba(148, 163, 184, 0.92);
font-size: 12px;
line-height: 1.5;
font-family: var(--pw-h-font);
}
body.dark #section-playwright-demo .pw-b-splash-inner strong {
display: block;
color: #e2e8f0;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
margin-top: 8px;
}
body.dark #section-playwright-demo .pw-b-login-sauce {
width: 100%;
height: 100%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
body.dark #section-playwright-demo .pw-b-login-box {
background: #fff;
border-radius: 4px;
padding: 22px 24px 24px;
width: 100%;
max-width: 220px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
body.dark #section-playwright-demo .pw-b-login-box h3 {
margin: 0 0 16px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
body.dark #section-playwright-demo .pw-b-field {
margin-bottom: 10px;
}
body.dark #section-playwright-demo .pw-b-field input {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
color: #1a1a1a;
}
body.dark #section-playwright-demo .pw-b-field input.pw-b-filled {
border-color: #4ade80;
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}
body.dark #section-playwright-demo .pw-b-login-box button.pw-b-lbtn {
width: 100%;
margin-top: 4px;
padding: 9px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: #e2231a;
border: none;
border-radius: 3px;
cursor: default;
}
body.dark #section-playwright-demo .pw-b-login-box button.pw-b-lbtn.pw-b-pulse {
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.5);
}
body.dark #section-playwright-demo .pw-b-shop {
width: 100%;
height: 100%;
background: #fafafa;
display: flex;
flex-direction: column;
}
body.dark #section-playwright-demo .pw-b-shop-head {
background: #1a1a1a;
color: #fff;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
}
body.dark #section-playwright-demo .pw-b-burger {
width: 24px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px 0;
}
body.dark #section-playwright-demo .pw-b-burger span {
display: block;
height: 2px;
background: #fff;
border-radius: 1px;
}
body.dark #section-playwright-demo .pw-b-burger.pw-b-hi {
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.8);
border-radius: 4px;
}
body.dark #section-playwright-demo .pw-b-shop-title {
font-weight: 600;
}
body.dark #section-playwright-demo .pw-b-inv {
padding: 10px;
flex: 1;
}
body.dark #section-playwright-demo .pw-b-inv h4 {
margin: 0 0 8px;
font-size: 13px;
color: #1a1a1a;
}
body.dark #section-playwright-demo .pw-b-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
body.dark #section-playwright-demo .pw-b-tile {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
height: 46px;
font-size: 8px;
color: #666;
display: flex;
align-items: flex-end;
padding: 4px;
box-sizing: border-box;
}
body.dark #section-playwright-demo .pw-b-tile.pw-b-pulse {
border-color: #4ade80;
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4);
}
body.dark #section-playwright-demo .pw-b-menu-drawer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 120px;
background: #1a1a1a;
color: #fff;
padding: 12px 10px;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 3;
font-size: 12px;
}
body.dark #section-playwright-demo .pw-b-menu-drawer.pw-b-open {
transform: translateX(0);
}
body.dark #section-playwright-demo .pw-b-menu-drawer a {
color: #4ade80;
text-decoration: none;
}
body.dark #section-playwright-demo #pw-b-lo-link.pw-b-lo-pulse {
color: #fff !important;
text-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
font-weight: 600;
}
body.dark #section-playwright-demo .pw-b-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 2;
}
body.dark #section-playwright-demo .pw-b-overlay.pw-b-on {
opacity: 1;
}
body.dark #section-playwright-demo .pw-b-badge {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(34, 197, 94, 0.95);
color: #04120a;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.35s, transform 0.35s;
}
body.dark #section-playwright-demo .pw-b-badge.pw-b-on {
opacity: 1;
transform: scale(1);
}
body.dark #section-playwright-demo .pw-b-head-ribbon {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px 0;
background: #fafafa;
}
body.dark #section-playwright-demo .pw-b-sub {
font-size: 9px;
color: #64748b;
margin-top: 2px;
}
/* Playwright + CI (§7) — light theme: match white / cool-grey sections (Subject cards) */
body:not(.dark) #section-playwright-demo {
--pw-h-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Light theme: Read more / :root blue (4FC3F7, 81D4FA) */
--pw-h-eyebrow: #0284c7;
--pw-h-title-hero: #0f172a;
--pw-h-title-row: #0369a1;
--pw-h-sub: #64748b;
--pw-badge-grad: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #38bdf8 100%);
--pw-badge-fg: #ffffff;
--pw-badge-shadow: 0 2px 10px rgba(79, 195, 247, 0.35);
--pw-term-fg: var(--pw-h-title-row);
--pw-term-cursor: var(--pw-h-eyebrow);
--pw-panel: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
--pw-panel-ink: #f1f5f9;
--pw-void-40: rgba(15, 23, 42, 0.06);
--pw-void-35: rgba(15, 23, 42, 0.05);
--pw-hero-band: var(--pw-light-title-band);
/* Instead of navy editor panels, use the same surface as the headed browser view (.pw-b-view) */
--pw-e-section: #e8ecf1;
position: relative;
background: var(--pw-hero-band) !important;
overflow: hidden;
/* Same top spacing as the dark theme (playwright-hero) */
padding-top: 32px !important;
padding-bottom: 0 !important;
}
/* Light theme: otherwise #pw-confetti-canvas takes ~300×150 in the layout (it was only absolute under body.dark) */
body:not(.dark) #section-playwright-demo .pw-canvas {
position: absolute;
pointer-events: none;
inset: 0;
z-index: 0;
}
body:not(.dark) #section-playwright-demo .pw-demo-inner,
body:not(.dark) #section-playwright-demo > .section {
position: relative;
z-index: 1;
}
/* Hero band: same as dark — tight above the title, room below the lede */
body:not(.dark) #section-playwright-demo > .section:nth-child(2) {
background: var(--pw-hero-band) !important;
padding-top: 20px !important;
padding-bottom: 24px !important;
}
body:not(.dark) #section-playwright-demo > .section:nth-child(3) {
background: #ffffff !important;
}
/*
* Light theme: same layout as dark (2×2 grid, headed browser, Bug Report Lab + Run dashboard, exec).
* It used to be defined only under body.dark; in light theme the columns were missing and the headed browser collapsed to 0 height.
*/
body:not(.dark) #section-playwright-demo .pw-playwright-wide {
max-width: 1680px !important;
width: 100% !important;
padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
}
body:not(.dark) #section-playwright-demo .pw-demo-stage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"pwtl pwtr"
"pwbl pwbr";
gap: 22px 26px;
max-width: 1680px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
align-items: stretch;
}
body:not(.dark) #section-playwright-demo .pw-q-tl { grid-area: pwtl; }
body:not(.dark) #section-playwright-demo .pw-q-tr { grid-area: pwtr; }
body:not(.dark) #section-playwright-demo .pw-q-bl { grid-area: pwbl; }
body:not(.dark) #section-playwright-demo .pw-q-br { grid-area: pwbr; }
body:not(.dark) #section-playwright-demo .pw-quad {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
align-self: stretch;
}
/* Panel titles 1–6 (light theme): site blue — badge + title + grey subline */
body:not(.dark) #section-playwright-demo .pw-quad-title,
body:not(.dark) #section-playwright-demo .pw-report-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--pw-h-title-row) !important;
margin: 0 0 16px;
line-height: 1.3;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
body:not(.dark) #section-playwright-demo .pw-quad-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 5px;
border-radius: 8px;
background: var(--pw-badge-grad) !important;
color: var(--pw-badge-fg) !important;
font-size: 0.875rem;
font-weight: 800;
font-family: var(--pw-h-font) !important;
flex-shrink: 0;
box-shadow: var(--pw-badge-shadow) !important;
}
body:not(.dark) #section-playwright-demo .pw-quad-title-txt {
flex: 1;
min-width: 0;
color: var(--pw-h-title-row) !important;
}
body:not(.dark) #section-playwright-demo .pw-quad-title .pw-quad-title-txt {
font-weight: 700;
}
body:not(.dark) #section-playwright-demo .pw-quad-sub {
display: block;
font-family: var(--pw-h-font) !important;
font-size: 12px;
font-weight: 500;
color: var(--pw-h-sub) !important;
margin-top: 2px;
line-height: 1.4;
}
body:not(.dark) #section-playwright-demo #bug-report-lab-root h3 .pw-quad-sub {
color: var(--pw-h-sub) !important;
}
/* Bug Report Lab column: badge/title aligned with 5 · Run dashboard — same size as dark (no jump on theme toggle) */
body:not(.dark) #section-playwright-demo #bug-report-lab-root h3.pw-report-title {
margin-bottom: 6px !important;
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--pw-h-title-row) !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
line-height: 1.3 !important;
}
body:not(.dark) #section-playwright-demo .pw-quad-card {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-rail { padding: 14px 14px 16px; }
body:not(.dark) #section-playwright-demo .pw-br-stack {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-height: 0;
gap: 14px;
}
body:not(.dark) #section-playwright-demo .pw-br-stack .pw-glass.pw-browser {
flex: 1 1 0;
min-height: 0;
}
body:not(.dark) #section-playwright-demo .pw-rail-below-browser {
flex: 0 0 auto;
padding: 10px 12px 12px;
border-radius: 16px;
}
@media (max-width: 899px) {
body:not(.dark) #section-playwright-demo .pw-demo-stage {
grid-template-columns: 1fr;
grid-template-areas:
"pwtl"
"pwtr"
"pwbl"
"pwbr";
gap: 20px;
}
body:not(.dark) #section-playwright-demo .pw-q-br .pw-br-stack {
flex: 0 1 auto;
min-height: auto;
}
body:not(.dark) #section-playwright-demo .pw-br-stack .pw-glass.pw-browser {
flex: 0 1 auto;
min-height: auto;
}
body:not(.dark) #section-playwright-demo .pw-q-tr .pw-quad-card {
flex: 0 1 auto;
min-height: auto;
}
}
body:not(.dark) #section-playwright-demo .pw-report-row {
max-width: 1680px;
margin: 28px auto 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 26px;
align-items: stretch;
width: 100%;
margin: 28px 0 0;
padding: 0;
box-sizing: border-box;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-col {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
align-self: stretch;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-col.pw-dash-brl-dash {
height: 100%;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-dash .pw-report-row {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-dash .pw-report-dash {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-dash .pw-dash-foot {
margin-top: auto;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-split .pw-report-row,
body:not(.dark) #section-playwright-demo .pw-dash-brl-dash .pw-report-row {
margin: 0;
max-width: none;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-brl {
background: transparent !important;
border: none !important;
border-radius: 0;
box-shadow: none !important;
overflow: visible;
padding: 0 !important;
margin: 0 !important;
height: 100%;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-brl #bug-report-lab-root {
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0 2px 0;
box-sizing: border-box;
}
body:not(.dark) #section-playwright-demo .pw-dash-brl-brl #bug-report-lab-root > section {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
@media (max-width: 1100px) {
body:not(.dark) #section-playwright-demo .pw-dash-brl-split {
grid-template-columns: 1fr;
}
}
body:not(.dark) #section-playwright-demo .pw-exec {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
min-height: clamp(400px, 58vh, 720px);
}
body:not(.dark) #section-playwright-demo .pw-exec-top {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 14px;
}
body:not(.dark) #section-playwright-demo .pw-exec-cta-row {
display: flex;
align-items: center;
justify-content: center;
}
body:not(.dark) #section-playwright-demo .pw-term-wrap {
flex: 1;
display: flex;
flex-direction: column;
border-radius: 12px;
min-height: min(52vh, 500px);
overflow: hidden;
}
body:not(.dark) #section-playwright-demo #pw-terminal {
flex: 1;
margin: 0;
padding: 12px 14px 32px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.7;
color: var(--pw-term-fg);
text-shadow: 0 0 1px rgba(3, 105, 161, 0.12);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Simulated browser — same box hierarchy in the light theme (view/overlay keep working) */
body:not(.dark) #section-playwright-demo .pw-glass.pw-browser {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
min-height: 0;
}
body:not(.dark) #section-playwright-demo .pw-b-chrome {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
font-size: 11px;
}
body:not(.dark) #section-playwright-demo .pw-b-addr {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 8px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-b-url {
flex: 1;
font-size: 11px;
font-family: ui-monospace, Menlo, Consolas, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.dark) #section-playwright-demo .pw-b-view {
position: relative;
flex: 1;
background: #e8ecf1;
overflow: hidden;
}
body:not(.dark) #section-playwright-demo .pw-b-splash-inner {
text-align: center;
padding: 0 8px;
color: #64748b;
font-size: 12px;
line-height: 1.5;
font-family: var(--pw-h-font);
}
body:not(.dark) #section-playwright-demo .pw-b-splash-inner strong {
display: block;
color: #0f172a;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
margin-top: 8px;
}
/* Light/dark: splash description separate from 9px .pw-b-sub — same size, no jump on theme switch */
body.dark #section-playwright-demo .pw-b-splash-inner .pw-b-sub,
body:not(.dark) #section-playwright-demo .pw-b-splash-inner .pw-b-sub {
font-size: 12px;
line-height: 1.45;
margin: 6px auto 0;
max-width: 200px;
font-weight: 400;
}
body.dark #section-playwright-demo .pw-b-splash-inner .pw-b-sub {
color: rgba(148, 163, 184, 0.88) !important;
}
body:not(.dark) #section-playwright-demo .pw-b-splash-inner .pw-b-sub {
color: #64748b !important;
}
body:not(.dark) #section-playwright-demo .pw-b-login-sauce {
width: 100%;
height: 100%;
background: #e8ecf1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
body:not(.dark) #section-playwright-demo .pw-b-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 2;
}
body:not(.dark) #section-playwright-demo .pw-b-overlay.pw-b-on {
opacity: 1;
}
body:not(.dark) #section-playwright-demo .pw-b-badge {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(34, 197, 94, 0.95);
color: #04120a;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.35s, transform 0.35s;
}
body:not(.dark) #section-playwright-demo .pw-b-badge.pw-b-on {
opacity: 1;
transform: scale(1);
}
body:not(.dark) #section-playwright-demo .pw-b-login-box {
background: #fff;
border-radius: 4px;
padding: 22px 24px 24px;
width: 100%;
max-width: 220px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-b-login-box h3 {
margin: 0 0 16px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
body:not(.dark) #section-playwright-demo .pw-b-field {
margin-bottom: 10px;
}
body:not(.dark) #section-playwright-demo .pw-b-field input {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
color: #1a1a1a;
}
body:not(.dark) #section-playwright-demo .pw-b-field input.pw-b-filled {
border-color: #38bdf8;
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}
body:not(.dark) #section-playwright-demo .pw-b-login-box button.pw-b-lbtn {
width: 100%;
margin-top: 4px;
padding: 9px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: #e2231a;
border: none;
border-radius: 3px;
cursor: default;
}
body:not(.dark) #section-playwright-demo .pw-b-login-box button.pw-b-lbtn.pw-b-pulse {
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.5);
}
body:not(.dark) #section-playwright-demo .pw-b-shop {
width: 100%;
height: 100%;
background: #fafafa;
display: flex;
flex-direction: column;
}
body:not(.dark) #section-playwright-demo .pw-b-shop-head {
background: #1a1a1a;
color: #fff;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
}
body:not(.dark) #section-playwright-demo .pw-b-burger {
width: 24px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px 0;
}
body:not(.dark) #section-playwright-demo .pw-b-burger span {
display: block;
height: 2px;
background: #fff;
border-radius: 1px;
}
body:not(.dark) #section-playwright-demo .pw-b-burger.pw-b-hi {
box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.8);
border-radius: 4px;
}
body:not(.dark) #section-playwright-demo .pw-b-shop-title {
font-weight: 600;
}
body:not(.dark) #section-playwright-demo .pw-b-inv {
padding: 10px;
flex: 1;
}
body:not(.dark) #section-playwright-demo .pw-b-inv h4 {
margin: 0 0 8px;
font-size: 13px;
color: #1a1a1a;
}
body:not(.dark) #section-playwright-demo .pw-b-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
body:not(.dark) #section-playwright-demo .pw-b-tile {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
height: 46px;
font-size: 8px;
color: #666;
display: flex;
align-items: flex-end;
padding: 4px;
box-sizing: border-box;
}
body:not(.dark) #section-playwright-demo .pw-b-tile.pw-b-pulse {
border-color: #38bdf8;
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}
body:not(.dark) #section-playwright-demo .pw-b-menu-drawer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 120px;
background: #1a1a1a;
color: #fff;
padding: 12px 10px;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 3;
font-size: 12px;
}
body:not(.dark) #section-playwright-demo .pw-b-menu-drawer.pw-b-open {
transform: translateX(0);
}
body:not(.dark) #section-playwright-demo .pw-b-menu-drawer a {
color: #0ea5e9;
text-decoration: none;
}
body:not(.dark) #section-playwright-demo #pw-b-lo-link.pw-b-lo-pulse {
color: #fff !important;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.95);
font-weight: 600;
}
body:not(.dark) #section-playwright-demo .pw-b-chrome .pw-b-ico {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(160deg, #6ab7ff, #1e6fd0);
flex-shrink: 0;
}
body:not(.dark) #section-playwright-demo .pw-b-chrome .pw-b-win-title {
flex: 1;
text-align: center;
letter-spacing: 0.02em;
}
body:not(.dark) #section-playwright-demo .pw-b-addr span.pw-b-lock {
font-size: 10px;
opacity: 0.5;
}
body:not(.dark) #section-playwright-demo .pw-b-addr .pw-b-load-anim {
width: 14px;
height: 14px;
border: 2px solid rgba(79, 195, 247, 0.25);
border-top-color: #4FC3F7;
border-radius: 50%;
animation: pw-spin 0.9s linear infinite;
display: none;
}
body:not(.dark) #section-playwright-demo #pw-browser.pw-b-do-load .pw-b-addr .pw-b-load-anim,
body:not(.dark) #section-playwright-demo #pw-b-scene-load .pw-b-load-anim {
display: block;
}
body:not(.dark) #section-playwright-demo .pw-b-head-ribbon {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px 0;
background: #f1f5f9;
}
body:not(.dark) #section-playwright-demo .pw-b-sub {
font-size: 9px;
color: #64748b;
margin-top: 2px;
}
/* Light theme: Playwright page hero (one h2 + description) — all dark text */
body:not(.dark) #section-playwright-demo h2.pw-sec-title,
body:not(.dark) #section-playwright-demo h2.pw-sec-title .pw-sec-hero-ey,
body:not(.dark) #section-playwright-demo h2.pw-sec-title .pw-sec-hero-k {
color: #0a0a0a !important;
}
body:not(.dark) #section-playwright-demo h2.pw-sec-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1.5rem, 3.2vw, 2.5rem) !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 !important;
}
body:not(.dark) #section-playwright-demo h2.pw-sec-title .pw-sec-hero-ey {
letter-spacing: 0.12em;
}
@media (max-width: 520px) {
body:not(.dark) #section-playwright-demo h2.pw-sec-title {
font-size: 1.5rem !important;
}
}
body:not(.dark) #section-playwright-demo .pw-demo-hgroup {
max-width: 720px;
margin: 0 auto;
}
body:not(.dark) #section-playwright-demo .pw-demo-sub {
color: var(--pw-h-sub) !important;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
max-width: 700px;
margin: 0.35rem auto 8px;
line-height: 1.6;
}
body:not(.dark) #section-playwright-demo .pw-demo-hint {
color: rgba(71, 85, 105, 0.95) !important;
font-size: 13px;
margin: 0 auto 10px;
}
body:not(.dark) #section-ci-pipeline-lab,
body:not(.dark) #section-api-mock-lab {
--pw-h-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--pw-h-eyebrow: #0284c7;
--pw-h-title-hero: #0f172a;
--pw-h-title-row: #0369a1;
--pw-h-sub: #64748b;
--pw-badge-grad: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #38bdf8 100%);
--pw-badge-fg: #ffffff;
--pw-badge-shadow: 0 2px 10px rgba(79, 195, 247, 0.35);
/* Seamless with the Playwright content band (#fff) */
background: #ffffff !important;
}
body:not(.dark) #section-ci-pipeline-lab #ci-pipeline-lab-root,
body:not(.dark) #section-ci-pipeline-lab [data-ci-pipeline-lab],
body:not(.dark) #section-api-mock-lab #api-mock-lab-root,
body:not(.dark) #section-api-mock-lab [data-api-mock-lab] {
background: var(--home-bg, #ffffff) !important;
color: #334155;
}
body:not(.dark) #section-api-mock-lab .pw-sec-eyebrow,
body:not(.dark) [data-api-mock-lab] .pw-sec-eyebrow {
margin: 0 0 10px;
font-family: var(--pw-h-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pw-h-eyebrow) !important;
}
body:not(.dark) #section-api-mock-lab h2.pw-sec-title,
body:not(.dark) [data-api-mock-lab] h2.pw-sec-title {
color: var(--pw-h-title-hero) !important;
font-family: var(--pw-h-font) !important;
font-size: clamp(1.5rem, 2.8vw, 1.875rem) !important;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.2;
margin: 0;
}
body:not(.dark) #section-api-mock-lab [data-api-mock-lab] .pw-sec-lead,
body:not(.dark) [data-api-mock-lab] p.pw-sec-lead {
font-family: var(--pw-h-font);
font-size: 0.875rem;
line-height: 1.55;
color: var(--pw-h-sub) !important;
}
/* 7 · CI Pipeline Lab: same header as 5–6 in light theme — defined separately because it is outside #section-playwright-demo */
body:not(.dark) #section-ci-pipeline-lab .pw-quad-title,
body:not(.dark) #section-ci-pipeline-lab .pw-report-title,
body:not(.dark) #section-api-mock-lab .pw-quad-title,
body:not(.dark) #section-api-mock-lab .pw-report-title {
font-family: var(--pw-h-font) !important;
font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--pw-h-title-row) !important;
margin: 0 0 16px;
line-height: 1.3;
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
body:not(.dark) #section-ci-pipeline-lab .pw-quad-num,
body:not(.dark) #section-api-mock-lab .pw-quad-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 5px;
border-radius: 8px;
background: var(--pw-badge-grad) !important;
color: var(--pw-badge-fg) !important;
font-size: 0.875rem;
font-weight: 800;
font-family: var(--pw-h-font) !important;
flex-shrink: 0;
box-shadow: var(--pw-badge-shadow) !important;
}
body:not(.dark) #section-ci-pipeline-lab .pw-quad-title-txt,
body:not(.dark) #section-api-mock-lab .pw-quad-title-txt {
flex: 1;
min-width: 0;
color: var(--pw-h-title-row) !important;
}
body:not(.dark) #section-ci-pipeline-lab .pw-quad-title .pw-quad-title-txt,
body:not(.dark) #section-api-mock-lab .pw-quad-title .pw-quad-title-txt {
font-weight: 700;
}
body:not(.dark) #section-ci-pipeline-lab .pw-quad-sub,
body:not(.dark) #section-api-mock-lab .pw-quad-sub {
display: block;
font-family: var(--pw-h-font) !important;
font-size: 0.8125rem;
font-weight: 500;
color: var(--pw-h-sub) !important;
margin-top: 3px;
line-height: 1.35;
}
body:not(.dark) #section-ci-pipeline-lab #ci-pipeline-lab-root h3 .pw-quad-sub,
body:not(.dark) #section-api-mock-lab #api-mock-lab-root h3 .pw-quad-sub {
color: var(--pw-h-sub) !important;
}
body:not(.dark) #section-ci-pipeline-lab #ci-pipeline-lab-root h3.pw-report-title,
body:not(.dark) #section-api-mock-lab #api-mock-lab-root h3.pw-report-title {
margin-bottom: 6px !important;
}
/* Thin grey line above the section (separates Playwright and CI) */
body:not(.dark) #section-ci-pipeline-lab,
body:not(.dark) #section-ci-pipeline-lab #ci-pipeline-lab-root,
body:not(.dark) #section-api-mock-lab,
body:not(.dark) #section-api-mock-lab #api-mock-lab-root {
border-top: none !important;
box-shadow: none !important;
}
body:not(.dark) #section-ci-pipeline-lab [data-ci-pipeline-lab],
body:not(.dark) #section-api-mock-lab [data-api-mock-lab] {
border-top: none !important;
}
body:not(.dark) #section-playwright-demo {
border-bottom: none !important;
}
body.dark #section-ci-pipeline-lab [data-ci-pipeline-lab],
body.dark #section-api-mock-lab [data-api-mock-lab] {
color: #cbd5e1;
}
body:not(.dark) #section-playwright-demo .pw-glass {
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 10px 36px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(56, 189, 248, 0.12) inset !important;
}
/* 5 · Run dashboard: same box + toolbar layout as dark (one row: Awaiting + chips) */
body:not(.dark) #section-playwright-demo .pw-report-dash {
position: relative;
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: var(--pw-panel) !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.05) inset,
0 16px 40px rgba(15, 23, 42, 0.1) !important;
overflow: hidden;
isolation: isolate;
}
body:not(.dark) #section-playwright-demo .pw-dash-glow {
position: absolute;
inset: -40% -20% auto -20%;
height: 70%;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79, 195, 247, 0.08) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
animation: pwDashGlow 5s ease-in-out infinite alternate;
}
body:not(.dark) #section-playwright-demo .pw-dash-toolbar {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
padding: 18px 22px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body:not(.dark) #section-playwright-demo .pw-dash-toolbar > div:first-child {
display: flex;
flex-direction: column;
gap: 6px;
}
body:not(.dark) #section-playwright-demo .pw-dash-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
color: #0f172a !important;
}
body:not(.dark) #section-playwright-demo .pw-dash-live::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: #94a3b8;
box-shadow: none;
animation: none;
}
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="running"] .pw-dash-live::before {
background: #ca8a04;
box-shadow: 0 0 12px rgba(202, 138, 4, 0.5), 0 0 22px rgba(202, 138, 4, 0.25);
animation: pwPulseDot 1.2s ease-in-out infinite;
}
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-live::before {
background: #15803d;
box-shadow: 0 0 12px rgba(22, 163, 74, 0.55), 0 0 24px rgba(34, 197, 94, 0.35);
animation: pwPulseDot 2s ease-in-out infinite;
}
body:not(.dark) #section-playwright-demo .pw-dash-section-h {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(71, 85, 105, 0.85);
margin: 0 0 12px;
}
body:not(.dark) #section-playwright-demo .pw-report-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
body:not(.dark) #section-playwright-demo .pw-report-table th,
body:not(.dark) #section-playwright-demo .pw-report-table td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body:not(.dark) #section-playwright-demo .pw-report-table tbody tr:last-child td {
border-bottom: none;
}
body:not(.dark) #section-playwright-demo .pw-report-table th {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(71, 85, 105, 0.85) !important;
background: #f1f5f9;
}
body:not(.dark) #section-playwright-demo .pw-report-table td {
color: #0f172a !important;
}
body:not(.dark) #section-playwright-demo .pw-report-table td code {
font-size: 12px;
color: #1d4ed8;
background: rgba(59, 130, 246, 0.1);
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(37, 99, 235, 0.2);
}
body:not(.dark) #section-playwright-demo .pw-table-status {
font-weight: 600;
font-size: 13px;
}
body:not(.dark) #section-playwright-demo .pw-table-status-idle {
color: rgba(71, 85, 105, 0.9);
}
body:not(.dark) #section-playwright-demo .pw-table-status-running {
color: #ca8a04;
}
body:not(.dark) #section-playwright-demo .pw-table-status-pass {
display: inline-flex;
align-items: center;
gap: 6px;
color: #15803d;
font-weight: 700;
}
body:not(.dark) #section-playwright-demo .pw-table-status-pass::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
}
body:not(.dark) #section-playwright-demo .pw-dash-artifacts {
padding-top: 4px;
}
body:not(.dark) #section-playwright-demo .pw-artifact {
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #f1f5f9;
margin-bottom: 8px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body:not(.dark) #section-playwright-demo .pw-artifact:last-of-type {
margin-bottom: 0;
}
body:not(.dark) #section-playwright-demo .pw-artifact[open] {
border-color: rgba(15, 23, 42, 0.16);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-artifact > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: #0f172a;
background: transparent;
user-select: none;
transition: background 0.2s ease;
}
body:not(.dark) #section-playwright-demo .pw-artifact > summary::-webkit-details-marker {
display: none;
}
body:not(.dark) #section-playwright-demo .pw-artifact > summary:hover {
background: rgba(15, 23, 42, 0.06);
}
body:not(.dark) #section-playwright-demo .pw-artifact-chevron {
width: 9px;
height: 9px;
border-right: 2px solid rgba(71, 85, 105, 0.6);
border-bottom: 2px solid rgba(71, 85, 105, 0.6);
transform: rotate(-45deg);
transition: transform 0.25s ease;
flex-shrink: 0;
margin-top: -4px;
}
body:not(.dark) #section-playwright-demo .pw-artifact[open] > summary .pw-artifact-chevron {
transform: rotate(45deg);
margin-top: 2px;
}
body:not(.dark) #section-playwright-demo .pw-artifact-body {
padding: 0 16px 14px;
font-size: 12px;
line-height: 1.55;
color: #475569;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-artifact-screenshot-desc {
margin: 0 0 10px 0;
}
body:not(.dark) #section-playwright-demo .pw-artifact-thumb {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot {
width: min(100%, 220px);
height: 140px;
flex: 0 0 auto;
border-radius: 8px;
background: #e2e8f0;
border: 1px solid rgba(15, 23, 42, 0.1);
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot:has(.pw-artifact-shot-img.pw-artifact-shot-img--ready) {
cursor: zoom-in;
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.04), transparent);
animation: pwShimmer 2.5s ease-in-out infinite;
pointer-events: none; /* let clicks reach the thumbnail image; without :has the overlay must not block them */
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot:has(.pw-artifact-shot-img.pw-artifact-shot-img--ready)::after {
display: none;
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot .pw-artifact-shot-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: none;
border-radius: 7px;
}
body:not(.dark) #section-playwright-demo .pw-artifact-shot .pw-artifact-shot-img.pw-artifact-shot-img--ready {
display: block;
}
body:not(.dark) #section-playwright-demo .pw-artifact-video-hint {
margin: 0 0 10px 0;
}
body:not(.dark) #section-playwright-demo .pw-artifact-video {
width: 100%;
max-width: 520px;
max-height: 300px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #e2e8f0;
display: none;
}
body:not(.dark) #section-playwright-demo .pw-artifact-video.pw-artifact-video--ready {
display: block;
}
body:not(.dark) #section-playwright-demo .pw-artifact-video-cap {
margin: 8px 0 0 0;
font-size: 11px;
color: #64748b;
display: none;
}
body:not(.dark) #section-playwright-demo .pw-artifact-video-cap.pw-artifact-video-cap--ready {
display: block;
}
/* Test case design (panel 1): same structure as dark — clear table, 2-column steps, Gherkin + syntax */
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-bdd-inset {
flex: 0 0 auto;
width: 100%;
min-height: 0;
max-height: none;
overflow: visible;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 0 4px 2px;
}
body:not(.dark) #section-playwright-demo .pw-tc-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 4px;
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-tc-scroll {
flex: 0 1 auto;
min-height: 12rem;
max-height: min(52vh, 520px);
overflow-y: auto;
margin-bottom: 0;
}
body:not(.dark) #section-playwright-demo .pw-tc-table {
width: 100%;
min-width: 520px;
border-collapse: collapse;
font-size: 12.5px;
line-height: 1.5;
color: #0f172a !important;
background: #f8fafc !important;
border: 1px solid rgba(15, 23, 42, 0.14) !important;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-tc-table {
font-size: 11px;
min-width: 420px;
}
body:not(.dark) #section-playwright-demo .pw-tc-table th,
body:not(.dark) #section-playwright-demo .pw-tc-table td {
border: 1px solid rgba(15, 23, 42, 0.1) !important;
padding: 10px 12px 12px;
vertical-align: top;
text-align: left;
}
body:not(.dark) #section-playwright-demo .pw-tc-table th[scope="row"] {
width: 24%;
min-width: 132px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #334155 !important;
background: #e2e8f0 !important;
}
body:not(.dark) #section-playwright-demo .pw-tc-table td {
background: #ffffff !important;
}
body:not(.dark) #section-playwright-demo .pw-tc-table td p {
margin: 0 0 0.5em;
}
body:not(.dark) #section-playwright-demo .pw-tc-table td p:last-child {
margin-bottom: 0;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol {
margin: 0.35em 0 0 1.15em;
padding: 0;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol.pw-tc-steps {
margin: 0.35em 0 0 0.25em;
column-count: 2;
column-gap: 1.25em;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol.pw-tc-steps li {
break-inside: avoid;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol li {
margin-bottom: 0.3em;
}
body:not(.dark) #section-playwright-demo .pw-tc-table code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em;
color: #075985;
background: #e0f2fe;
border: 1px solid #7dd3fc;
padding: 1px 5px;
border-radius: 4px;
}
body:not(.dark) #section-playwright-demo .pw-tc-testdata {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: 12px;
line-height: 1.45;
padding: 8px 12px;
border-radius: 8px;
background: var(--pw-e-section) !important;
border: 1px solid rgba(15, 23, 42, 0.14) !important;
color: #0f172a !important;
}
body:not(.dark) #section-playwright-demo .pw-tc-testdata code {
color: #075985 !important;
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
body:not(.dark) #section-playwright-demo .pw-tc-scroll + .pw-bdd-gherkin {
margin-top: 18px;
}
/* Gherkin in light theme: section surface (--pw-e-section), text readable on a light background */
body:not(.dark) #section-playwright-demo .pw-bdd-gherkin {
margin: 8px 0 0;
padding: 12px 12px 14px 14px;
font-size: 11.5px;
line-height: 1.68;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
color: #1e293b !important;
background: var(--pw-e-section) !important;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
border-left: 3px solid #0ea5e9;
white-space: pre;
overflow-x: auto;
flex: 1 1 auto;
min-height: 8.5em;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-bdd-gherkin {
flex-shrink: 0;
max-height: none;
overflow: visible;
}
body:not(.dark) #section-playwright-demo .pw-bdd-inset .pw-bdd-gherkin {
flex: 0 0 auto;
}
body:not(.dark) #section-playwright-demo .pw-bdd-gherkin .pw-gh {
font-weight: 600;
}
body:not(.dark) #section-playwright-demo .pw-gh-feat { color: #0369a1 !important; }
body:not(.dark) #section-playwright-demo .pw-gh-sce { color: #0d9488 !important; }
body:not(.dark) #section-playwright-demo .pw-gh-g { color: #15803d !important; }
body:not(.dark) #section-playwright-demo .pw-gh-w { color: #a16207 !important; }
body:not(.dark) #section-playwright-demo .pw-gh-a { color: #0369a1 !important; }
body:not(.dark) #section-playwright-demo .pw-gh-t { color: #6d28d9 !important; }
body:not(.dark) #section-playwright-demo .pw-bdd-gherkin .pw-gh-str {
color: #3f6212 !important;
}
@media (max-width: 768px) {
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-quad-title {
margin-bottom: 8px;
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-rail {
padding: 8px 8px 10px;
}
body:not(.dark) #section-playwright-demo .pw-bdd-inset {
gap: 6px;
padding: 0 0 2px 0;
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-tc-scroll {
flex: 0 0 auto;
min-height: 0;
max-height: none;
overflow: visible;
-webkit-overflow-scrolling: auto;
margin-bottom: 0;
}
body:not(.dark) #section-playwright-demo .pw-tc-table {
min-width: 0;
width: 100%;
table-layout: fixed;
font-size: 9.5px;
line-height: 1.32;
}
body:not(.dark) #section-playwright-demo .pw-q-tl .pw-tc-table {
min-width: 0;
}
body:not(.dark) #section-playwright-demo .pw-tc-table th,
body:not(.dark) #section-playwright-demo .pw-tc-table td {
padding: 3px 5px 4px;
word-wrap: break-word;
overflow-wrap: break-word;
}
body:not(.dark) #section-playwright-demo .pw-tc-table th[scope="row"] {
width: 30%;
min-width: 0;
font-size: 8.5px;
letter-spacing: 0.04em;
}
body:not(.dark) #section-playwright-demo .pw-tc-testdata {
font-size: 9px;
line-height: 1.3;
padding: 3px 5px;
gap: 3px 6px;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol.pw-tc-steps {
column-count: 2;
column-gap: 0.65em;
margin: 0.2em 0 0 0.15em;
}
body:not(.dark) #section-playwright-demo .pw-tc-table ol li {
margin-bottom: 0.15em;
}
body:not(.dark) #section-playwright-demo .pw-bdd-gherkin {
flex: 0 0 auto;
margin: 4px 0 0;
padding: 6px 6px 8px 8px;
font-size: 9px;
line-height: 1.38;
min-height: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-x: hidden;
}
body:not(.dark) #section-playwright-demo .pw-tc-scroll + .pw-bdd-gherkin {
margin-top: 8px;
}
}
/* Test script (read-only): dark editor look — title bar + dark background + same syntax colours */
body:not(.dark) #section-playwright-demo .pw-q-tr .pw-glass.pw-quad-card {
overflow: hidden;
padding: 0 !important;
}
body:not(.dark) #section-playwright-demo .pw-code-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin: 0;
background: var(--pw-e-section) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #475569 !important;
}
body:not(.dark) #section-playwright-demo .pw-dots {
display: flex;
gap: 6px;
}
body:not(.dark) #section-playwright-demo .pw-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
}
body:not(.dark) #section-playwright-demo .pw-dots .d1 { background: #ff5f57; }
body:not(.dark) #section-playwright-demo .pw-dots .d2 { background: #febc2e; }
body:not(.dark) #section-playwright-demo .pw-dots .d3 { background: #28c840; }
body:not(.dark) #section-playwright-demo .pw-code-body {
margin: 0;
padding: 16px 18px 20px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.6;
color: #0f172a !important;
background: var(--pw-e-section) !important;
overflow-x: auto;
overflow-y: auto;
max-height: none;
user-select: text;
-webkit-user-select: text;
}
@media (min-width: 900px) {
body:not(.dark) #section-playwright-demo .pw-q-tr .pw-code-body {
flex: 1 1 0;
min-height: 0;
}
}
body:not(.dark) #section-playwright-demo .pw-code-body:focus {
outline: 2px solid rgba(34, 211, 238, 0.4);
outline-offset: 2px;
}
body:not(.dark) #section-playwright-demo .pw-s-kw { color: #6d28d9 !important; }
body:not(.dark) #section-playwright-demo .pw-s-fn { color: #0369a1 !important; }
body:not(.dark) #section-playwright-demo .pw-s-str { color: #0369a1 !important; }
body:not(.dark) #section-playwright-demo .pw-s-cmt { color: #64748b !important; font-style: italic; }
body:not(.dark) #section-playwright-demo .pw-s-num { color: #c2410c !important; }
@media (min-width: 900px) {
body:not(.dark) #section-playwright-demo .pw-q-tr .pw-quad-card {
flex: 1 1 0;
min-height: 0;
}
}
/* Caption above the box: same typography as dark (colour only differs) */
body:not(.dark) #section-playwright-demo .pw-exec-cta-hint {
margin: 0;
font-size: 13.5px;
line-height: 1.45;
color: #0f172a !important;
font-weight: 600;
}
body:not(.dark) #section-playwright-demo .pw-exec-cta-hint em {
font-style: normal;
font-size: inherit;
color: #0369a1;
font-weight: 800;
}
body:not(.dark) #section-playwright-demo .pw-exec-cta-hint .pw-cta-dim {
display: block;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: #64748b !important;
}
body:not(.dark) #section-playwright-demo .pw-term-wrap {
background: var(--pw-e-section) !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
body:not(.dark) #section-playwright-demo .pw-term-bar {
padding: 7px 12px !important;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
background: var(--pw-e-section) !important;
color: #475569 !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}
body:not(.dark) #section-playwright-demo .pw-term-bar .pw-s-cmt {
color: #64748b !important;
font-style: normal !important;
}
body:not(.dark) #section-playwright-demo #pw-result {
margin-top: 14px;
padding: 10px 18px 16px 18px;
border-radius: 14px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04) inset, 0 4px 16px rgba(15, 23, 42, 0.06);
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-h {
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #64748b !important;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: 13.5px;
color: #0f172a;
margin: 6px 0;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-line > span:first-child {
color: #334155 !important;
font-weight: 600;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-val {
font-weight: 600;
text-align: right;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-val.pw-res-pending {
color: #64748b !important;
font-weight: 500;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-val.pw-res-run {
color: #ca8a04 !important;
}
body:not(.dark) #section-playwright-demo #pw-result .pw-res-val.pw-res-ok {
color: #15803d !important;
}
body:not(.dark) #section-playwright-demo .pw-b-chrome,
body:not(.dark) #section-playwright-demo .pw-b-addr,
body:not(.dark) #section-playwright-demo .pw-b-url {
color: #475569 !important;
}
body:not(.dark) #section-playwright-demo .pw-b-chrome {
background: #e2e8f0 !important;
}
body:not(.dark) #section-playwright-demo .pw-b-addr {
background: #f1f5f9 !important;
}
body:not(.dark) #section-playwright-demo .pw-b-url {
color: #0f172a !important;
}
body:not(.dark) #section-playwright-demo .pw-rail {
border-radius: 16px;
}
body:not(.dark) #section-playwright-demo .pw-rail-h-small {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #64748b !important;
margin: 14px 0 8px;
padding-top: 8px;
border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body:not(.dark) #section-playwright-demo .pw-rail-h-small.pw-rail-h-first {
margin: 0 0 6px;
padding-top: 0;
border-top: none;
}
body:not(.dark) #section-playwright-demo .pw-rail-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Same as dark: layout used to exist only under body.dark; steps/numbers disappeared in light theme */
body:not(.dark) #section-playwright-demo .pw-rail-list li {
position: relative;
font-size: 12.5px;
line-height: 1.4;
color: #475569 !important;
padding: 8px 0 8px 30px;
margin: 0;
border-left: 2px solid rgba(15, 23, 42, 0.12) !important;
transition: color 0.25s, border-color 0.25s, background 0.25s;
}
body:not(.dark) #section-playwright-demo .pw-rail-list li::before {
content: attr(data-n);
position: absolute;
left: 0;
top: 7px;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.08) !important;
color: #64748b !important;
}
body:not(.dark) #section-playwright-demo .pw-rail-list li.pw-rail-active {
color: #0f172a !important;
border-left-color: #0ea5e9 !important;
background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(255, 255, 255, 0) 72%);
}
body:not(.dark) #section-playwright-demo .pw-rail-list li.pw-rail-active::before {
background: linear-gradient(135deg, #4fc3f7, #0284c7) !important;
color: #f0f9ff !important;
}
body:not(.dark) #section-playwright-demo .pw-bdd-sec-h {
color: #64748b !important;
border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body:not(.dark) #section-playwright-demo .pw-demo-sub a {
color: #0284c7 !important;
}
/* Run dashboard — Allure + metrics: define the same structure for the light theme */
body:not(.dark) #section-playwright-demo .pw-allure-hero {
--allure-bg: #eef2f6;
/* Success ring / suite bar: green (PASS) — separate from the blue theme */
--allure-green: #84cc16;
--allure-red: #f97316;
--allure-muted: rgba(15, 23, 42, 0.5);
position: relative;
z-index: 1;
background: var(--allure-bg);
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
padding: 20px 22px 22px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px 24px;
}
@media (max-width: 900px) {
body:not(.dark) #section-playwright-demo .pw-allure-hero {
grid-template-columns: 1fr;
text-align: center;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero-left { align-items: center; }
body:not(.dark) #section-playwright-demo .pw-allure-donut-wrap { justify-self: center; }
}
body:not(.dark) #section-playwright-demo .pw-allure-hero-left {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero-mid {
text-align: center;
padding: 0 12px;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero .pw-allure-donut-wrap {
justify-self: end;
}
body:not(.dark) #section-playwright-demo .pw-allure-title {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
color: #0f172a;
}
body:not(.dark) #section-playwright-demo .pw-allure-date,
body:not(.dark) #section-playwright-demo .pw-allure-range {
color: var(--allure-muted);
}
body:not(.dark) #section-playwright-demo .pw-allure-hero .pw-allure-total {
display: block;
font-size: clamp(40px, 5vw, 56px);
font-weight: 800;
line-height: 1;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero .pw-allure-total-lbl {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--allure-muted);
letter-spacing: 0.02em;
}
body:not(.dark) #section-playwright-demo .pw-allure-donut-wrap {
position: relative;
width: 132px;
height: 132px;
flex-shrink: 0;
}
body:not(.dark) #section-playwright-demo .pw-allure-donut {
position: relative;
width: 132px;
height: 132px;
border-radius: 50%;
background: conic-gradient(
var(--allure-green) 0turn calc(var(--pass-frac, 0) * 1turn),
var(--allure-red) calc(var(--pass-frac, 0) * 1turn) 1turn
);
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) inset;
}
body:not(.dark) #section-playwright-demo .pw-allure-donut[data-donut="idle"] {
background: conic-gradient(#cbd5e1 0turn 1turn);
}
body:not(.dark) #section-playwright-demo .pw-allure-donut[data-donut="running"] {
background: conic-gradient(#94a3b8 0turn 0.25turn, #e2e8f0 0.25turn 1turn);
animation: pwAllureDonutSpin 1.1s linear infinite;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero .pw-allure-donut::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(closest-side, var(--allure-bg) 59%, transparent 60%);
}
body:not(.dark) #section-playwright-demo .pw-allure-donut-pct {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 800;
color: #1e293b;
z-index: 2;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero-ico {
position: absolute;
top: 18px;
right: 18px;
width: 22px;
height: 22px;
opacity: 0.5;
color: #64748b;
}
body:not(.dark) #section-playwright-demo .pw-allure-hero-ico svg {
display: block;
width: 100%;
height: 100%;
}
body:not(.dark) #section-playwright-demo .pw-allure-panels {
position: relative;
z-index: 1;
background: #f8fafc;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-allure-block {
padding: 16px 22px 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body:not(.dark) #section-playwright-demo .pw-allure-block:last-child {
border-bottom: none;
}
body:not(.dark) #section-playwright-demo .pw-allure-block-h {
margin: 0 0 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #475569;
}
body:not(.dark) #section-playwright-demo .pw-allure-block-meta {
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(15, 23, 42, 0.45);
}
body:not(.dark) #section-playwright-demo .pw-allure-suite-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
body:not(.dark) #section-playwright-demo .pw-allure-suite-name {
font-size: 14px;
color: #0f172a;
min-width: 90px;
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar {
display: flex;
flex: 1;
min-width: 160px;
height: 32px;
border-radius: 4px;
overflow: hidden;
font-size: 13px;
font-weight: 700;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar-seg {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar-fail {
background: var(--allure-red, #f97316);
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar-pass {
background: var(--allure-green, #84cc16);
color: #0f172a;
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar.pw-allure-hbar-empty {
background: #e2e8f0;
justify-content: center;
color: #64748b;
font-weight: 600;
}
body:not(.dark) #section-playwright-demo .pw-allure-hbar-idle {
flex: 1;
text-align: center;
font-size: 12px;
line-height: 32px;
}
body:not(.dark) #section-playwright-demo .pw-allure-showall {
margin-top: 10px;
text-align: center;
font-size: 12px;
color: #0284c7;
cursor: default;
}
body:not(.dark) #section-playwright-demo .pw-allure-env-placeholder {
margin: 0;
padding: 20px 10px;
text-align: center;
font-size: 13px;
color: rgba(15, 23, 42, 0.45);
}
@media (prefers-reduced-motion: reduce) {
body:not(.dark) #section-playwright-demo .pw-allure-donut[data-donut="running"] {
animation: none;
}
}
body:not(.dark) #section-playwright-demo .pw-dash-card {
position: relative;
border-radius: 14px;
padding: 14px 16px 16px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.1);
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
body:not(.dark) #section-playwright-demo .pw-dash-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.06), transparent 50%, rgba(15, 23, 42, 0.03));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.5;
}
body:not(.dark) #section-playwright-demo .pw-report-row[data-pw-dash="complete"] .pw-dash-card:hover {
border-color: rgba(15, 23, 42, 0.18);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
transform: translateY(-2px);
}
body:not(.dark) #section-playwright-demo .pw-dash-card.pw-card-pass {
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(34, 197, 94, 0.12);
}
body:not(.dark) #section-playwright-demo .pw-dash-card.pw-card-fail {
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(248, 113, 113, 0.12);
}
body:not(.dark) #section-playwright-demo .pw-dash-card-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #64748b;
margin-bottom: 8px;
}
body:not(.dark) #section-playwright-demo .pw-dash-card-val {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 800;
letter-spacing: -0.03em;
color: #0f172a;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
body:not(.dark) #section-playwright-demo .pw-dash-card-val.pw-val-pass { color: #15803d; }
body:not(.dark) #section-playwright-demo .pw-dash-card-val.pw-val-fail { color: #b91c1c; }
body:not(.dark) #section-playwright-demo .pw-dash-card-val.pw-val-accent { color: #0284c7; }
body:not(.dark) #section-playwright-demo .pw-dash-card-hint {
margin-top: 6px;
font-size: 11px;
color: #94a3b8;
}
body:not(.dark) #section-playwright-demo .pw-dash-section {
position: relative;
z-index: 1;
padding: 8px 22px 18px;
}
body:not(.dark) #section-playwright-demo .pw-dash-table-wrap {
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #ffffff;
overflow: hidden;
}
body:not(.dark) #section-playwright-demo .pw-dash-foot {
position: relative;
z-index: 1;
padding: 14px 22px 18px;
font-size: 11px;
line-height: 1.55;
color: #64748b;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: #f1f5f9;
}
body:not(.dark) #section-playwright-demo .pw-dash-foot kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
padding: 3px 7px;
border-radius: 5px;
background: #e2e8f0;
border: 1px solid rgba(15, 23, 42, 0.12);
color: #334155;
}
body:not(.dark) #section-playwright-demo .pw-report-meta {
font-size: 12px;
color: #64748b;
font-variant-numeric: tabular-nums;
}
body:not(.dark) #section-playwright-demo .pw-dash-cards {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
padding: 18px 22px 8px;
}
@media (max-width: 1100px) {
body:not(.dark) #section-playwright-demo .pw-dash-cards {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
body:not(.dark) #section-playwright-demo .pw-dash-cards {
grid-template-columns: repeat(2, 1fr);
}
}
body:not(.dark) #section-playwright-demo .pw-dash-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
body:not(.dark) #section-playwright-demo .pw-dash-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: rgba(148, 163, 184, 0.16);
color: #334155;
border: 1px solid rgba(15, 23, 42, 0.12);
}
body:not(.dark) #section-playwright-demo .pw-dash-chip.pw-chip-ok {
background: rgba(34, 197, 94, 0.15);
color: #166534;
border-color: rgba(34, 197, 94, 0.35);
}
body:not(.dark) #section-playwright-demo .pw-dash-chip.pw-chip-warn {
background: rgba(251, 191, 36, 0.2);
color: #a16207;
}
body:not(.dark) #section-playwright-demo .pw-dash-chip.pw-chip-idle {
opacity: 0.9;
}
/* QA ENGINEER CAREER — curated learning hub (glass cards + modal) */
#section-sdet.qa-eng-section,
#section-sdet {
--qa-accent: #64b5f6;
--qa-accent-2: #90caf9;
--qa-surface: rgba(255, 255, 255, 0.05);
--qa-surface-2: rgba(15, 23, 42, 0.35);
--qa-border: rgba(100, 181, 246, 0.22);
--qa-glow: rgba(59, 154, 232, 0.35);
--qa-text: #f1f5f9;
--qa-muted: #94a3b8;
}
body:not(.dark) #section-sdet {
--qa-accent: #0369a1;
--qa-accent-2: #0284c7;
--qa-surface: rgba(255, 255, 255, 0.75);
--qa-surface-2: rgba(241, 245, 249, 0.6);
--qa-border: rgba(3, 105, 161, 0.2);
--qa-glow: rgba(2, 132, 199, 0.28);
--qa-text: #0f172a;
--qa-muted: #64748b;
}
#section-sdet .qa-eng-head h2 {
margin-bottom: 0.35rem;
color: var(--qa-text);
}
#section-sdet .qa-eng-subtitle {
max-width: 700px;
margin: 0.35rem auto 0;
padding: 0 1rem;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
line-height: 1.6;
color: var(--qa-muted);
font-weight: 400;
text-align: center;
}
/* align band with Subjects / wide sections: full grid width, 2-up video cards */
#section-sdet .container {
max-width: 1500px !important;
width: 92vw;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
#section-sdet .qa-eng-head,
#section-sdet .qa-eng-head h2 {
max-width: 100%;
}
#section-sdet .qa-eng-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
width: 100%;
max-width: none;
margin: 0 auto 2.5rem;
padding: 0;
}
@media (max-width: 640px) {
#section-sdet .qa-eng-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
#section-sdet .qa-eng-card {
appearance: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
border: 1px solid var(--qa-border);
border-radius: 16px;
background: linear-gradient(155deg, var(--qa-surface) 0%, var(--qa-surface-2) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
cursor: pointer;
position: relative;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
#section-sdet .qa-eng-card:focus-visible {
outline: 2px solid var(--qa-accent);
outline-offset: 3px;
}
#section-sdet .qa-eng-card:hover {
transform: translateY(-5px);
border-color: var(--qa-accent);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--qa-glow), 0 0 32px -8px var(--qa-glow);
}
@media (prefers-reduced-motion: reduce) {
#section-sdet .qa-eng-card:hover {
transform: none;
}
}
#section-sdet .qa-eng-card-inner {
display: flex;
flex-direction: column;
}
#section-sdet .qa-eng-card-media {
position: relative;
border-radius: 16px 16px 0 0;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
max-height: none;
}
#section-sdet .qa-eng-thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: none;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#section-sdet .qa-eng-card:hover .qa-eng-thumb {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
#section-sdet .qa-eng-card:hover .qa-eng-thumb {
transform: none;
}
}
#section-sdet .qa-eng-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.35) 100%);
pointer-events: none;
}
#section-sdet .qa-eng-badge {
position: absolute;
font-size: 0.65rem;
letter-spacing: 0.12em;
font-weight: 700;
text-transform: uppercase;
padding: 0.4rem 0.55rem;
border-radius: 6px;
line-height: 1;
}
#section-sdet .qa-eng-badge--cat {
top: 0.75rem;
left: 0.75rem;
color: #0f172a;
background: linear-gradient(135deg, var(--qa-accent) 0%, var(--qa-accent-2) 100%);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
#section-sdet .qa-eng-badge--dur {
top: 0.75rem;
right: 0.75rem;
color: #e2e8f0;
background: rgba(15, 23, 42, 0.72);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#section-sdet .qa-eng-play-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
border: 2px solid rgba(255, 255, 255, 0.35);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
padding-left: 0.15rem;
pointer-events: none;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
#section-sdet .qa-eng-card:hover .qa-eng-play-icon {
background: rgba(0, 0, 0, 0.55);
box-shadow: 0 0 0 3px var(--qa-glow);
}
#section-sdet .qa-eng-card-content {
padding: 1.1rem 1.15rem 1.2rem;
}
#section-sdet .qa-eng-card-title {
margin: 0 0 0.45rem 0;
font-size: 1.18rem;
line-height: 1.32;
font-weight: 700;
color: var(--qa-text);
}
#section-sdet .qa-eng-card-desc {
margin: 0 0 0.9rem 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--qa-muted);
}
#section-sdet .qa-eng-card-cta {
display: inline-block;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--qa-accent);
opacity: 0.92;
transition: color 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease;
}
#section-sdet .qa-eng-card:hover .qa-eng-card-cta {
color: var(--qa-accent-2);
filter: brightness(1.15);
text-shadow: 0 0 20px var(--qa-glow);
}
#section-sdet .qa-eng-cta-bottom {
text-align: center;
margin-bottom: 0.5rem;
}
#section-sdet .qa-eng-more-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
border-radius: 9999px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
color: #fff;
background: var(--gradient-primary, linear-gradient(135deg, #1976d2, #0d47a1));
border: 1px solid rgba(100, 181, 246, 0.35);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 24px -6px var(--qa-glow);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
body:not(.dark) #section-sdet .qa-eng-more-link {
color: #fff;
background: linear-gradient(135deg, #0369a1, #0ea5e9);
}
#section-sdet .qa-eng-more-link:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 32px -4px var(--qa-glow);
}
/* Modal */
.qa-eng-modal {
position: fixed;
inset: 0;
z-index: 100600;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.qa-eng-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.qa-eng-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.qa-eng-modal__panel {
position: relative;
z-index: 1;
width: min(960px, 100%);
background: #0f172a;
border: 1px solid rgba(100, 181, 246, 0.3);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 40px -10px rgba(100, 181, 246, 0.25);
transform: scale(0.96) translateY(10px);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.qa-eng-modal.is-open .qa-eng-modal__panel {
transform: scale(1) translateY(0);
}
.qa-eng-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
}
.qa-eng-modal__title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #e2e8f0;
line-height: 1.35;
}
.qa-eng-modal__close {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease;
}
.qa-eng-modal__close:hover {
background: rgba(100, 181, 246, 0.25);
color: #fff;
}
.qa-eng-modal__frame-wrap {
position: relative;
background: #000;
}
.qa-eng-modal__frame-wrap::before {
content: "";
display: block;
padding-top: 56.25%;
}
#qa-eng-modal-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* General carousel - full image display */
.owl-carousel,
#oc-clients,
.image-carousel {
height: auto !important;
min-height: auto !important;
}
.owl-carousel .owl-stage-outer,
#oc-clients .owl-stage-outer,
.image-carousel .owl-stage-outer {
height: auto !important;
min-height: auto !important;
}
.owl-carousel .owl-stage,
#oc-clients .owl-stage,
.image-carousel .owl-stage {
display: flex !important;
align-items: flex-start !important;
height: auto !important;
min-height: auto !important;
}
.owl-carousel .owl-item img,
#oc-clients .oc-item img,
.image-carousel .oc-item img {
object-fit: contain !important;
object-position: center !important;
max-height: none !important;
height: auto !important;
width: 100% !important;
min-height: auto !important;
}
.owl-carousel .owl-item,
#oc-clients .oc-item,
.image-carousel .oc-item {
height: auto !important;
max-height: none !important;
min-height: auto !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
.owl-carousel .owl-item a,
#oc-clients .oc-item a,
.image-carousel .oc-item a {
width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: auto !important;
display: block !important;
}
/* Styled cards - all cards the same size */
.styled-card {
position: relative;
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
height: 180px;
border-radius: 50px;
background: var(--gradient-primary);
border: 4px solid var(--primary-turquoise);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.3),
0 4px 12px var(--shadow-primary),
inset 0 2px 4px rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
margin: 0;
box-sizing: border-box;
}
.styled-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 70%;
height: 70%;
background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 50%, #1E3A5F 100%);
border-radius: 20px;
z-index: 1;
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(255, 255, 255, 0.1);
}
.styled-card::after {
content: '';
position: absolute;
top: 15%;
right: 15%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFD700;
border-top: 20px solid #FFD700;
transform: rotate(45deg);
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.styled-card .card-text {
position: relative;
z-index: 2;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #000;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
padding: 10px 16px;
border-radius: 25px;
text-transform: uppercase;
box-shadow:
0 4px 12px rgba(255, 215, 0, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
white-space: normal;
word-wrap: break-word;
word-break: break-word;
transition: all 0.3s ease;
text-align: center;
line-height: 1.4;
max-width: 85%;
display: inline-block;
}
.styled-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
0 8px 20px var(--shadow-turquoise),
inset 0 2px 4px rgba(255, 255, 255, 0.15);
}
.styled-card:hover .card-text {
transform: scale(1.1);
box-shadow:
0 6px 16px rgba(255, 215, 0, 0.5),
inset 0 1px 3px rgba(255, 255, 255, 0.4);
}
.styled-card:hover::after {
transform: rotate(45deg) scale(1.2);
filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5));
}
body.dark .styled-card {
background: linear-gradient(135deg, #2C5282 0%, #1E3A5F 100%);
border-color: var(--primary-turquoise);
}
body.dark .styled-card::before {
background: linear-gradient(135deg, #0F1B2E 0%, #1A2F4A 50%, #0F1B2E 100%);
}
/* Carousel Item Styling */
#section-subjects .styled-card,
.image-carousel .styled-card {
margin: 0 !important;
}
.owl-carousel .owl-item {
box-sizing: border-box;
width: auto !important;
}
#section-subjects #oc-clients .oc-item,
#section-subjects .image-carousel .oc-item {
width: auto !important;
flex: 0 0 auto !important;
}
.styled-card {
flex-shrink: 0;
}
/* TOOLS Grid Layout */
.tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1300px;
margin: 0 auto;
padding: 60px 20px;
}
.tool-card-item {
display: flex;
justify-content: center;
align-items: center;
}
/* Tool cards - logo and name */
.styled-card-tool {
position: relative;
width: 100%;
max-width: 380px;
height: 380px;
border-radius: 20px;
background: var(--gradient-primary);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.3),
0 4px 12px var(--shadow-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
margin: 0;
box-sizing: border-box;
padding: 35px 30px 30px;
}
.styled-card-tool::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 75%;
height: 75%;
background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 50%, #1E3A5F 100%);
border-radius: 15px;
z-index: 1;
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.styled-card-tool::after {
content: '';
position: absolute;
top: 15%;
right: 15%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFD700;
border-top: 20px solid #FFD700;
transform: rotate(45deg);
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.styled-card-tool a,
.styled-card-tool .tool-card-trigger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
position: relative;
z-index: 2;
}
.styled-card-tool .tool-logo {
position: relative;
z-index: 2;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
overflow: hidden;
}
.styled-card-tool .tool-logo img,
.styled-card-tool .tool-logo svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
margin: auto;
display: block;
}
.styled-card-tool .card-text {
position: relative;
z-index: 2;
background: transparent;
color: #FFF;
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
padding: 0;
border-radius: 0;
text-transform: uppercase;
text-align: center;
line-height: 1.4;
display: block;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-top: 25px;
}
.styled-card-tool:hover {
transform: translateY(-8px) scale(1.03);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
0 8px 20px rgba(26, 188, 156, 0.3);
}
.styled-card-tool:hover .card-text {
transform: scale(1.05);
}
.styled-card-tool:hover .tool-logo img,
.styled-card-tool:hover .tool-logo svg {
transform: scale(1.1);
}
.styled-card-tool:hover::after {
transform: rotate(45deg) scale(1.2);
filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5));
}
body.dark .styled-card-tool {
background: var(--gradient-primary);
border-color: rgba(255, 255, 255, 0.15);
}
body.dark .styled-card-tool::before {
background: linear-gradient(135deg, #0F1B2E 0%, #1A2F4A 50%, #0F1B2E 100%);
}
/* —— About Me: profile + value cards (glass, blue family) —— */
#section-about {
--ab-glow: rgba(56, 189, 248, 0.14);
--ab-cyan: rgba(125, 211, 252, 0.35);
}
body:not(.dark) #section-about {
--ab-panel: rgba(255, 255, 255, 0.55);
--ab-border: rgba(3, 105, 161, 0.18);
--ab-inset: rgba(255, 255, 255, 0.5);
--ab-text: #0f172a;
--ab-muted: #475569;
--ab-title: #0369a1;
--ab-chip-bg: rgba(3, 105, 161, 0.08);
--ab-stat: rgba(3, 105, 161, 0.06);
}
body.dark #section-about {
--ab-panel: rgba(15, 23, 42, 0.52);
--ab-border: rgba(100, 181, 246, 0.22);
--ab-inset: rgba(255, 255, 255, 0.1);
--ab-text: #f1f5f9;
--ab-muted: #94a3b8;
--ab-title: #7dd3fc;
--ab-chip-bg: rgba(100, 181, 246, 0.12);
--ab-stat: rgba(100, 181, 246, 0.1);
}
/* About Me v2 — unified premium hero (glass board, portrait + 2-col)
overflow-y: visible avoids WebKit backdrop/clip bugs (random gray band mid-card). */
#section-about {
position: relative;
overflow-x: hidden;
overflow-x: clip;
overflow-y: visible;
}
body:not(.dark) #section-about::before {
content: '';
position: absolute;
inset: -2% -8% auto -8%;
height: min(44vh, 380px);
background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(3, 105, 161, 0.08), transparent 58%);
pointer-events: none;
z-index: 0;
}
body.dark #section-about::before {
content: '';
position: absolute;
inset: -2% -8% auto -8%;
height: min(62vh, 560px);
background:
radial-gradient(ellipse 95% 55% at 50% 0%, rgba(56, 189, 248, 0.1), transparent 55%),
radial-gradient(ellipse 45% 40% at 8% 45%, rgba(100, 181, 246, 0.07), transparent 50%),
radial-gradient(ellipse 40% 38% at 92% 40%, rgba(25, 118, 210, 0.08), transparent 50%);
pointer-events: none;
z-index: 0;
}
/* After the header band, return to the main content colour: same as #content */
body.dark #section-about > .section.about-v2 {
background: var(--home-bg, #383838) !important;
border-color: transparent !important;
}
body:not(.dark) #section-about > .section.about-v2 {
background: #fff !important;
border-color: transparent !important;
}
#section-about .about-v2 { position: relative; z-index: 1; padding: 0.75rem 0 1.25rem; }
#section-about .about-v2__board {
max-width: 1220px; margin: 0 auto; padding: 2rem 1.85rem 2.1rem;
border-radius: 28px;
border: 1px solid var(--ab-border, rgba(100, 181, 246, 0.2));
isolation: isolate;
background:
radial-gradient(800px 120% at 8% 0%, rgba(56, 189, 248, 0.08), transparent 50%),
linear-gradient(170deg, var(--ab-panel) 0%, rgba(255, 255, 255, 0.03) 100%);
box-shadow: 0 8px 40px rgba(2, 6, 23, 0.08), 0 0 0 1px var(--ab-inset) inset, 0 0 50px -20px var(--ab-cyan);
}
body.dark #section-about .about-v2__board {
background:
radial-gradient(700px 100% at 0% 0%, rgba(100, 181, 246, 0.12), transparent 52%),
radial-gradient(600px 80% at 100% 100%, rgba(30, 64, 175, 0.1), transparent 48%),
linear-gradient(168deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.97) 100%);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--ab-inset) inset, 0 0 80px -24px rgba(100, 181, 246, 0.2);
}
#section-about .about-v2__row {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.12fr);
gap: 2rem 2.75rem;
align-items: stretch;
min-height: min(52vh, 480px);
}
@media (max-width: 991px) {
#section-about .about-v2__row {
grid-template-columns: 1fr;
min-height: 0;
gap: 1.75rem;
}
}
#section-about .about-v2__col--left {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 1.25rem;
}
#section-about .about-v2__portraitWrap { width: 100%; max-width: min(276px, calc(86vw * 0.92)); margin: 0 auto; flex-shrink: 0; }
#section-about .about-v2__portraitFrame {
position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1/1; max-width: 100%;
border: 1px solid rgba(100, 181, 246, 0.3);
box-shadow: 0 0 40px rgba(56, 189, 248, 0.12), 0 12px 40px rgba(2, 6, 23, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
#section-about .about-v2__portrait[data-fallback] + .about-v2__logoBadge {
display: none;
}
#section-about .about-v2__logoBadge {
position: absolute; right: 0.55rem; bottom: 0.55rem; z-index: 2; width: 3.128rem; height: 3.128rem; padding: 0.368rem; box-sizing: border-box;
display: flex; align-items: center; justify-content: center; border-radius: 13px;
background: linear-gradient(150deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 64, 175, 0.45) 100%);
border: 1px solid rgba(100, 181, 246, 0.45);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 24px rgba(100, 181, 246, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body:not(.dark) #section-about .about-v2__logoBadge {
background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.9) 100%);
border-color: rgba(3, 105, 161, 0.25);
box-shadow: 0 4px 16px rgba(2, 6, 23, 0.08), 0 0 20px rgba(3, 105, 161, 0.12);
}
#section-about .about-v2__logoBadgeImg { width: 100%; height: 100%; object-fit: contain; display: block; }
body.dark #section-about .about-v2__portraitFrame {
border-color: rgba(100, 181, 246, 0.42);
box-shadow: 0 0 64px rgba(100, 181, 246, 0.16), 0 24px 56px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(100, 181, 246, 0.12);
}
#section-about .about-v2__portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
#section-about .about-v2__portrait--fallback { object-fit: contain; padding: 1.1rem; background: rgba(15, 23, 42, 0.55); }
body:not(.dark) #section-about .about-v2__portrait--fallback { background: rgba(255, 255, 255, 0.75); }
#section-about h2#section-about-heading.about-v2__pageTitle,
#section-qa-practice h2#section-qa-practice-heading.about-v2__pageTitle {
max-width: 52rem; margin-left: auto; margin-right: auto;
font-size: 40px !important;
font-weight: 700; letter-spacing: 0.04em; text-transform: none; line-height: 1.15;
}
@media (max-width: 520px) {
#section-about h2#section-about-heading.about-v2__pageTitle,
#section-qa-practice h2#section-qa-practice-heading.about-v2__pageTitle { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
}
body:not(.dark) #section-about h2#section-about-heading.about-v2__pageTitle,
body:not(.dark) #section-qa-practice h2#section-qa-practice-heading.about-v2__pageTitle {
color: #0369a1 !important;
}
body.dark #section-about h2#section-about-heading.about-v2__pageTitle,
body.dark #section-qa-practice h2#section-qa-practice-heading.about-v2__pageTitle {
color: #e0f2fe !important;
text-shadow: 0 0 36px rgba(100, 181, 246, 0.2);
}
#section-about .about-v2__pageSubtitle,
#section-qa-practice .about-v2__pageSubtitle {
max-width: 700px;
margin: 0.25rem auto 0;
padding: 0 1rem 0.2rem;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.01em;
text-align: center;
color: var(--ab-muted, #64748b);
}
body.dark #section-about .about-v2__pageSubtitle,
body.dark #section-qa-practice .about-v2__pageSubtitle {
color: rgba(148, 163, 184, 0.96);
text-shadow: 0 0 28px rgba(100, 181, 246, 0.12);
}
body:not(.dark) #section-about .about-v2__pageSubtitle,
body:not(.dark) #section-qa-practice .about-v2__pageSubtitle {
color: #5c6b7a;
}
#section-about .about-v2__id { margin: 0; display: flex; flex-direction: column; align-items: center; }
#section-about .about-v2__name {
margin: 0; font-size: clamp(2.2rem, 5.2vw, 3.5rem);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
color: var(--ab-title, #0369a1);
}
body.dark #section-about .about-v2__name {
color: #f0f9ff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.16), 0 0 48px rgba(100, 181, 246, 0.28), 0 0 100px rgba(56, 189, 248, 0.096);
}
#section-about .about-v2__role {
margin: 0.5rem 0 0; font-size: clamp(0.8rem, 1.1vw, 0.95rem);
font-weight: 500; letter-spacing: 0.02em; text-transform: none;
color: var(--ab-muted, #64748b); line-height: 1.45; max-width: 22em; margin-left: auto; margin-right: auto;
}
body.dark #section-about .about-v2__role { color: #7dd3fc; }
#section-about .about-v2__ministats {
margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.4;
color: var(--ab-muted, #64748b);
}
body.dark #section-about .about-v2__ministats { color: #94a3b8; }
#section-about .about-v2__msDot { color: var(--ab-title, #0369a1); opacity: 0.85; padding: 0 0.15em; }
body.dark #section-about .about-v2__msDot { color: #7dd3fc; opacity: 0.95; }
#section-about .about-v2__availBadge {
display: inline-block; margin: 0.45rem auto 0; padding: 0.38rem 0.9rem; max-width: 100%;
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
border-radius: 999px;
color: var(--ab-title, #0369a1);
background: linear-gradient(135deg, rgba(3, 105, 161, 0.1) 0%, rgba(14, 165, 233, 0.08) 100%);
border: 1px solid rgba(3, 105, 161, 0.22);
box-shadow: 0 0 20px rgba(3, 105, 161, 0.08);
}
body.dark #section-about .about-v2__availBadge {
color: #a5d8ff;
background: linear-gradient(140deg, rgba(100, 181, 246, 0.12) 0%, rgba(25, 118, 210, 0.1) 100%);
border-color: rgba(100, 181, 246, 0.35);
box-shadow: 0 0 24px rgba(100, 181, 246, 0.15), inset 0 0 0 1px rgba(100, 181, 246, 0.08);
}
#section-about .about-v2__col--right {
display: flex; flex-direction: column; justify-content: center; gap: 1rem; min-width: 0; padding: 0.15rem 0 0.15rem 0.15rem;
align-self: stretch; min-height: 100%;
}
#section-about .about-v2__bio {
margin: 0; color: var(--ab-text, #0f172a);
font-size: 1.125rem;
line-height: 1.7; font-weight: 400;
}
@media (max-width: 520px) {
#section-about .about-v2__bio { font-size: 1.0625rem; line-height: 1.68; }
}
body.dark #section-about .about-v2__bio { color: #e2e8f0; }
#section-about .about-v2__bio strong { color: var(--ab-title, #0369a1); font-weight: 600; }
body.dark #section-about .about-v2__bio strong { color: #93c5fd; }
#section-about .about-v2__badges {
list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem;
}
#section-about .about-v2__badge {
display: inline-block; padding: 0.5rem 0.8rem; border-radius: 10px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
background: var(--ab-stat, rgba(3, 105, 161, 0.08));
border: 1px solid var(--ab-border, rgba(3, 105, 161, 0.18));
color: var(--ab-text, #0f172a);
}
body.dark #section-about .about-v2__badge { color: #f1f5f9; }
#section-about .about-v2__chipsLabel {
margin: 0.15rem 0 0; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ab-muted, #94a3b8);
}
#section-about .about-v2__chips {
list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem;
}
#section-about .about-v2__chip {
display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px;
font-size: 0.9rem; font-weight: 600;
background: var(--ab-chip-bg, rgba(3, 105, 161, 0.08));
border: 1px solid var(--ab-border, rgba(3, 105, 161, 0.18));
color: var(--ab-text, #0f172a);
transition: border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
body.dark #section-about .about-v2__chip { color: #e2e8f0; }
#section-about .about-v2__chip:hover {
transform: translateY(-1px);
border-color: rgba(100, 181, 246, 0.5);
box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.12), 0 0 18px rgba(100, 181, 246, 0.2), 0 0 36px rgba(56, 189, 248, 0.1);
}
body:not(.dark) #section-about .about-v2__chip:hover {
border-color: rgba(3, 105, 161, 0.38);
box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.08), 0 0 14px rgba(3, 105, 161, 0.12);
}
@media (prefers-reduced-motion: reduce) {
#section-about .about-v2__chip { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
#section-about .about-v2__chip:hover { transform: none; }
}
#section-about .about-v2__ctas {
display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 0.6rem; margin-top: 0.6rem; width: 100%;
}
#section-about .about-v2__ctas .button {
flex: 1 1 0; min-width: 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; text-align: center;
gap: 0;
padding: 0.6rem 0.55rem !important; font-size: 0.88rem !important; line-height: 1.25 !important;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease, filter 0.4s ease, border-color 0.35s ease !important;
}
body:not(.dark) #section-about .about-v2__ctas .button:hover {
transform: translateY(-5px) !important;
box-shadow:
0 12px 36px rgba(129, 212, 250, 0.58),
0 6px 20px rgba(79, 195, 247, 0.38),
0 0 0 1px rgba(14, 165, 233, 0.2),
0 0 44px rgba(3, 105, 161, 0.22) !important;
filter: brightness(1.03);
}
body.dark #section-about .about-v2__ctas .button:hover {
transform: translateY(-5px) !important;
box-shadow:
0 14px 40px rgba(79, 195, 247, 0.55),
0 8px 28px rgba(42, 74, 111, 0.48),
0 0 0 1px rgba(100, 181, 246, 0.35),
0 0 52px rgba(100, 181, 246, 0.42),
0 0 88px rgba(56, 189, 248, 0.2) !important;
filter: brightness(1.06);
}
#section-about .about-v2__ctaText {
white-space: normal;
min-width: 0;
text-align: center;
line-height: 1.2;
overflow-wrap: break-word;
hyphens: auto;
}
#section-about .about-v2__ctaBtn--demo {
flex: 1.6 1 0;
}
#section-about .about-v2__ctaGlyph {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 0.45rem;
line-height: 1;
opacity: 0.9;
transform: translateX(0);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.3s ease,
filter 0.3s ease;
pointer-events: none;
overflow: visible;
}
#section-about .about-v2__ctaGlyph svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
body:not(.dark) #section-about .about-v2__ctaGlyph {
filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.18));
}
body.dark #section-about .about-v2__ctaGlyph {
filter: drop-shadow(0 0 5px rgba(100, 181, 246, 0.32));
}
#section-about .about-v2__ctas .button:hover .about-v2__ctaGlyph,
#section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGlyph {
opacity: 1;
transform: translateX(2px);
}
body:not(.dark) #section-about .about-v2__ctas .button:hover .about-v2__ctaGlyph,
body:not(.dark) #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGlyph {
filter: drop-shadow(0 0 7px rgba(14, 165, 233, 0.42));
}
body.dark #section-about .about-v2__ctas .button:hover .about-v2__ctaGlyph,
body.dark #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGlyph {
filter: drop-shadow(0 0 9px rgba(100, 181, 246, 0.65)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.32));
}
#section-about .about-v2__ctaGears { stroke-width: 1.35; }
#section-about .about-v2__ctaCheck { stroke-width: 1.8; }
body:not(.dark) #section-about .about-v2__ctaGears,
body:not(.dark) #section-about .about-v2__ctaCheck { stroke: #0284c7; }
body.dark #section-about .about-v2__ctaGears,
body.dark #section-about .about-v2__ctaCheck { stroke: #64b5f6; }
body:not(.dark) #section-about .about-v2__ctas .button:hover .about-v2__ctaGears,
body:not(.dark) #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGears,
body:not(.dark) #section-about .about-v2__ctas .button:hover .about-v2__ctaCheck,
body:not(.dark) #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaCheck {
filter: drop-shadow(0 0 3px rgba(2, 132, 199, 0.55));
}
body.dark #section-about .about-v2__ctas .button:hover .about-v2__ctaGears,
body.dark #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGears,
body.dark #section-about .about-v2__ctas .button:hover .about-v2__ctaCheck,
body.dark #section-about .about-v2__ctas .button:focus-visible .about-v2__ctaCheck {
filter: drop-shadow(0 0 4px rgba(100, 181, 246, 0.85)) drop-shadow(0 0 9px rgba(56, 189, 248, 0.45));
}
@media (prefers-reduced-motion: reduce) {
#section-about .about-v2__ctaGlyph {
transition: opacity 0.2s ease, width 0.2s ease, margin-left 0.2s ease;
transform: none;
}
#section-about .about-v2__ctas .button:hover .about-v2__ctaGlyph,
#section-about .about-v2__ctas .button:focus-visible .about-v2__ctaGlyph { transform: none; }
}
@media (max-width: 1100px) {
#section-about .about-v2__ctas .button { font-size: 0.8rem !important; padding: 0.55rem 0.4rem !important; }
}
@media (max-width: 991px) {
#section-about .about-v2__ctas { flex-wrap: wrap; }
#section-about .about-v2__ctas .button { flex: 1 1 100%; font-size: 0.95rem !important; padding: 0.7rem 1.2rem !important; }
}
#section-about .about-v2__btnGH {
background: linear-gradient(180deg, rgba(14, 165, 233, 0.045), rgba(14, 165, 233, 0.015)) !important;
border: 1px solid rgba(14, 165, 233, 0.45) !important;
color: #075985 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 0 14px rgba(14, 165, 233, 0.07),
0 1px 0 rgba(14, 165, 233, 0.06),
0 6px 18px rgba(14, 165, 233, 0.08) !important;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
background 0.35s ease,
border-color 0.35s ease,
filter 0.4s ease,
color 0.3s ease !important;
}
body.dark #section-about .about-v2__btnGH {
background: linear-gradient(180deg, rgba(100, 181, 246, 0.07), rgba(100, 181, 246, 0.025)) !important;
color: #bae6fd !important;
border-color: rgba(125, 211, 252, 0.55) !important;
box-shadow:
inset 0 1px 0 rgba(186, 230, 253, 0.18),
inset 0 0 18px rgba(100, 181, 246, 0.1),
0 1px 0 rgba(100, 181, 246, 0.1),
0 8px 22px rgba(100, 181, 246, 0.14) !important;
}
#section-about .about-v2__btnGH:hover {
background: linear-gradient(180deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.04)) !important;
border-color: rgba(14, 165, 233, 0.7) !important;
color: #0c4a6e !important;
transform: translateY(-5px) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 0 18px rgba(14, 165, 233, 0.12),
0 0 0 1px rgba(14, 165, 233, 0.4),
0 12px 34px rgba(14, 165, 233, 0.22),
0 0 50px rgba(56, 189, 248, 0.22) !important;
filter: brightness(1.04);
}
body.dark #section-about .about-v2__btnGH:hover {
background: linear-gradient(180deg, rgba(125, 211, 252, 0.14), rgba(100, 181, 246, 0.06)) !important;
border-color: rgba(186, 230, 253, 0.78) !important;
color: #e0f2fe !important;
box-shadow:
inset 0 1px 0 rgba(224, 242, 254, 0.3),
inset 0 0 24px rgba(100, 181, 246, 0.18),
0 0 0 1px rgba(125, 211, 252, 0.65),
0 14px 42px rgba(100, 181, 246, 0.34),
0 0 64px rgba(56, 189, 248, 0.24) !important;
filter: brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
#section-about .about-v2__ctas .button,
#section-about .about-v2__btnGH { transition-duration: 0.01ms !important; }
body:not(.dark) #section-about .about-v2__ctas .button:hover,
body.dark #section-about .about-v2__ctas .button:hover,
#section-about .about-v2__btnGH:hover { transform: none !important; filter: none; }
}
@media (max-width: 700px) {
#section-about .about-v2__board { padding: 1.45rem 1.2rem 1.6rem; }
}
/* Opacity-only fade: translateY + compositing caused intermittent clipped/ghost text mid-board */
#section-about .ab-fade,
#section-qa-practice .ab-fade { opacity: 0; animation: abFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#section-about .ab-fade--1,
#section-qa-practice .ab-fade--1 { animation-delay: 0.04s; }
#section-about .ab-fade--2,
#section-qa-practice .ab-fade--2 { animation-delay: 0.1s; }
#section-about .ab-fade--3,
#section-qa-practice .ab-fade--3 { animation-delay: 0.16s; }
@keyframes abFadeUp {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#section-about .ab-fade,
#section-qa-practice .ab-fade { animation: none; opacity: 1; }
}
/* About continued: value cards (#section-pro-snapshot anchor kept with the same id) */
#section-about #section-pro-snapshot.pro-snap-v2__cards {
position: relative; z-index: 1; margin-top: 1.75rem; padding: 0.35rem 0 2.5rem; max-width: 100%;
}
#section-about #section-pro-snapshot .pro-snap-v2__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.75rem; max-width: 1240px; margin: 0 auto;
align-items: stretch;
}
@media (max-width: 991px) {
#section-about #section-pro-snapshot .pro-snap-v2__grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 520px; }
}
#section-about #section-pro-snapshot .pro-snap-v2__card {
position: relative; border-radius: 26px; padding: 1.5rem 1.45rem 1.6rem; min-height: 100%;
display: flex; flex-direction: column; gap: 0;
background:
radial-gradient(520px circle at 85% 0%, var(--ab-glow), transparent 52%),
linear-gradient(168deg, var(--ab-panel) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box;
border: 1px solid var(--ab-border);
box-shadow: 0 6px 28px rgba(2, 6, 23, 0.07), 0 0 0 1px var(--ab-inset) inset;
backdrop-filter: blur(18px) saturate(125%);
-webkit-backdrop-filter: blur(18px) saturate(125%);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.38s ease, filter 0.38s ease;
will-change: transform;
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__card {
box-shadow: 0 12px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px var(--ab-inset) inset, 0 0 48px -18px rgba(100, 181, 246, 0.14);
}
#section-about #section-pro-snapshot .pro-snap-v2__card:hover {
transform: translateY(-10px);
border-color: rgba(14, 165, 233, 0.5);
filter: brightness(1.02);
box-shadow: 0 24px 56px rgba(2, 6, 23, 0.16), 0 0 0 1px var(--ab-inset) inset, 0 0 56px 4px rgba(14, 165, 233, 0.2), 0 0 72px 12px rgba(3, 105, 161, 0.08);
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__card:hover {
border-color: rgba(100, 181, 246, 0.55);
filter: brightness(1.05);
box-shadow:
0 32px 72px rgba(0, 0, 0, 0.52),
0 0 0 1px var(--ab-inset) inset,
0 0 0 1px rgba(100, 181, 246, 0.22),
0 0 72px 6px rgba(100, 181, 246, 0.35),
0 0 96px 14px rgba(56, 189, 248, 0.18),
0 0 120px 20px rgba(25, 118, 210, 0.08);
}
@media (prefers-reduced-motion: reduce) {
#section-about #section-pro-snapshot .pro-snap-v2__card { will-change: auto; }
#section-about #section-pro-snapshot .pro-snap-v2__card:hover { transform: none; filter: none; }
}
#section-about #section-pro-snapshot .pro-snap-v2__ico--neo {
width: 58px; height: 58px; border-radius: 16px; flex-shrink: 0; position: relative; overflow: visible;
display: flex; align-items: center; justify-content: center; margin-bottom: 1.05rem;
background: linear-gradient(150deg, rgba(3, 105, 161, 0.12) 0%, rgba(14, 165, 233, 0.06) 100%);
border: 1px solid rgba(3, 105, 161, 0.22);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 4px 20px rgba(2, 6, 23, 0.06), 0 0 28px rgba(3, 105, 161, 0.12);
}
#section-about #section-pro-snapshot .pro-snap-v2__ico--neo::after {
content: ''; position: absolute; inset: -2px; border-radius: 18px; z-index: -1; opacity: 0.65;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(3, 105, 161, 0.05) 50%, rgba(2, 132, 199, 0.2) 100%);
filter: blur(8px);
}
#section-about #section-pro-snapshot .pro-snap-v2__neoSvg {
display: block; width: 30px; height: 30px; filter: drop-shadow(0 0 4px rgba(3, 105, 161, 0.35));
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__ico--neo {
background: linear-gradient(150deg, rgba(15, 23, 42, 0.75) 0%, rgba(25, 118, 210, 0.2) 100%);
border-color: rgba(100, 181, 246, 0.35);
box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.1) inset, 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 32px rgba(100, 181, 246, 0.18);
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__ico--neo::after {
background: linear-gradient(135deg, rgba(100, 181, 246, 0.35) 0%, rgba(25, 118, 210, 0.15) 50%, rgba(56, 189, 248, 0.2) 100%);
opacity: 0.9; filter: blur(10px);
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__neoSvg {
filter: drop-shadow(0 0 6px rgba(100, 181, 246, 0.55)) drop-shadow(0 0 12px rgba(25, 118, 210, 0.25));
}
#section-about #section-pro-snapshot .pro-snap-v2__card:hover .pro-snap-v2__ico--neo {
border-color: rgba(14, 165, 233, 0.45);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 32px rgba(3, 105, 161, 0.2);
}
body.dark #section-about #section-pro-snapshot .pro-snap-v2__card:hover .pro-snap-v2__ico--neo {
border-color: rgba(100, 181, 246, 0.5);
box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.2) inset, 0 0 40px rgba(100, 181, 246, 0.35);
}
#section-about #section-pro-snapshot .pro-snap-v2__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#section-about #section-pro-snapshot .pro-snap-v2__card h3 { margin: 0 0 0.6rem; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ab-text, #0f172a); }
body.dark #section-about #section-pro-snapshot .pro-snap-v2__card h3 { color: #f1f5f9; }
#section-about #section-pro-snapshot .pro-snap-v2__p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ab-muted, #64748b); flex-grow: 1; }
#section-about #section-pro-snapshot .pro-snap-v2__p strong { color: var(--ab-title, #0369a1); font-weight: 600; }
body.dark #section-about #section-pro-snapshot .pro-snap-v2__p strong { color: #93c5fd; }
/* —— Validation Lab (glass board + preview; tokens align with About / mavi aile) —— */
#section-qa-practice {
--vl-glow: rgba(56, 189, 248, 0.14);
--vl-cyan: rgba(125, 211, 252, 0.35);
--pw-badge-grad: linear-gradient(135deg, #0369a1, #0ea5e9, #38bdf8);
position: relative;
overflow-x: hidden;
overflow-x: clip;
overflow-y: visible;
}
body:not(.dark) #section-qa-practice {
--ab-muted: #475569;
--vl-panel: rgba(255, 255, 255, 0.55);
--vl-border: rgba(3, 105, 161, 0.18);
--vl-inset: rgba(255, 255, 255, 0.5);
--vl-text: #0f172a;
--vl-muted: #475569;
--vl-title: #0369a1;
--vl-chip-bg: rgba(3, 105, 161, 0.08);
}
body.dark #section-qa-practice {
--ab-muted: #94a3b8;
--vl-panel: rgba(15, 23, 42, 0.52);
--vl-border: rgba(100, 181, 246, 0.22);
--vl-inset: rgba(255, 255, 255, 0.1);
--vl-text: #f1f5f9;
--vl-muted: #94a3b8;
--vl-title: #7dd3fc;
--vl-chip-bg: rgba(100, 181, 246, 0.12);
--pw-badge-grad: linear-gradient(135deg, #1976d2, #1565c0, #0d47a1);
}
body:not(.dark) #section-qa-practice::before {
content: '';
position: absolute;
inset: -2% -8% auto -8%;
height: min(44vh, 380px);
background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(3, 105, 161, 0.08), transparent 58%);
pointer-events: none;
z-index: 0;
}
body.dark #section-qa-practice::before {
content: '';
position: absolute;
inset: -2% -8% auto -8%;
height: min(52vh, 480px);
background:
radial-gradient(ellipse 95% 55% at 50% 0%, rgba(56, 189, 248, 0.1), transparent 55%),
radial-gradient(ellipse 45% 40% at 8% 45%, rgba(100, 181, 246, 0.07), transparent 50%),
radial-gradient(ellipse 40% 38% at 92% 40%, rgba(25, 118, 210, 0.08), transparent 50%);
pointer-events: none;
z-index: 0;
}
body.dark #section-qa-practice > .section.vl-lab {
background: var(--home-bg, #383838) !important;
border-color: transparent !important;
}
body:not(.dark) #section-qa-practice > .section.vl-lab {
background: #fff !important;
border-color: transparent !important;
}
#section-qa-practice .vl-lab { position: relative; z-index: 1; padding: 0.75rem 0 1.25rem; }
#section-qa-practice .vl-lab__board {
max-width: 1220px; margin: 0 auto; padding: 2rem 1.85rem 2.1rem;
border-radius: 28px;
border: 1px solid var(--vl-border, rgba(100, 181, 246, 0.2));
isolation: isolate;
background:
radial-gradient(800px 120% at 8% 0%, rgba(56, 189, 248, 0.08), transparent 50%),
linear-gradient(170deg, var(--vl-panel) 0%, rgba(255, 255, 255, 0.03) 100%);
box-shadow: 0 8px 40px rgba(2, 6, 23, 0.08), 0 0 0 1px var(--vl-inset) inset, 0 0 50px -20px var(--vl-cyan);
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
}
body.dark #section-qa-practice .vl-lab__board {
background:
radial-gradient(700px 100% at 0% 0%, rgba(100, 181, 246, 0.12), transparent 52%),
radial-gradient(600px 80% at 100% 100%, rgba(30, 64, 175, 0.1), transparent 48%),
linear-gradient(168deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.97) 100%);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--vl-inset) inset, 0 0 80px -24px rgba(100, 181, 246, 0.2);
}
#section-qa-practice .vl-lab__board:hover {
border-color: rgba(100, 181, 246, 0.38);
box-shadow: 0 8px 44px rgba(2, 6, 23, 0.1), 0 0 0 1px var(--vl-inset) inset, 0 0 64px -18px rgba(56, 189, 248, 0.22);
}
body.dark #section-qa-practice .vl-lab__board:hover {
box-shadow: 0 22px 68px rgba(0, 0, 0, 0.58), 0 0 0 1px var(--vl-inset) inset, 0 0 96px -20px rgba(100, 181, 246, 0.35);
}
#section-qa-practice .vl-lab__row {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: 2rem 2.5rem;
align-items: center;
}
@media (max-width: 991px) {
#section-qa-practice .vl-lab__row {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
#section-qa-practice .vl-lab__col--copy {
display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1rem; min-width: 0;
}
#section-qa-practice .vl-lab__desc {
margin: 0;
font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
line-height: 1.68;
color: var(--vl-text);
}
body.dark #section-qa-practice .vl-lab__desc { color: #e2e8f0; }
#section-qa-practice .vl-lab__tagline {
margin: 0;
font-size: clamp(0.88rem, 1.05vw, 0.98rem);
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.5;
color: var(--vl-title);
}
body.dark #section-qa-practice .vl-lab__tagline {
text-shadow: 0 0 24px rgba(100, 181, 246, 0.18);
}
/* QA Practice: what-you-can-practise tiles + learning path */
#section-qa-practice .vl-lab__kicker { margin: 0.25rem 0 -0.35rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-title); }
#section-qa-practice .vl-tiles { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#section-qa-practice .vl-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none !important; transition: border-color .2s, background-color .2s, transform .2s; }
#section-qa-practice .vl-tile:hover, #section-qa-practice .vl-tile:focus-visible { transform: translateY(-1px); }
#section-qa-practice .vl-tile__h { font-size: 14px; font-weight: 700; line-height: 1.3; }
#section-qa-practice .vl-tile__h span { font-weight: 400; opacity: .6; font-size: 12px; }
#section-qa-practice .vl-tile__d { font-size: 12.5px; line-height: 1.4; }
#section-qa-practice .vl-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
#section-qa-practice .vl-path__h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; color: var(--vl-title); }
#section-qa-practice .vl-path a { padding: 4px 10px; border-radius: 999px; font-weight: 600; text-decoration: none !important; }
#section-qa-practice .vl-path b { margin-right: 4px; opacity: .65; }
body.dark #section-qa-practice .vl-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(144,202,249,0.2); }
body.dark #section-qa-practice .vl-tile:hover { border-color: #64b5f6; background: rgba(25,118,210,0.16); }
body.dark #section-qa-practice .vl-tile__h { color: #fff; }
body.dark #section-qa-practice .vl-tile__d { color: #94a3b8; }
body.dark #section-qa-practice .vl-path a { color: #e2e8f0; background: rgba(255,255,255,0.06); border: 1px solid rgba(144,202,249,0.25); }
body.dark #section-qa-practice .vl-path__arr { color: #64b5f6; }
body:not(.dark) #section-qa-practice .vl-tile { background: #fff; border: 1px solid rgba(3,105,161,0.16); }
body:not(.dark) #section-qa-practice .vl-tile:hover { border-color: #0284c7; background: #f0f9ff; }
body:not(.dark) #section-qa-practice .vl-tile__h { color: #0f172a; }
body:not(.dark) #section-qa-practice .vl-tile__d { color: #64748b; }
body:not(.dark) #section-qa-practice .vl-path a { color: #0f172a; background: #fff; border: 1px solid rgba(3,105,161,0.2); }
body:not(.dark) #section-qa-practice .vl-path__arr { color: #0284c7; }
@media (max-width: 480px) { #section-qa-practice .vl-tiles { grid-template-columns: 1fr; } }
#section-qa-practice .vl-lab__features {
list-style: none; margin: 0.25rem 0 0; padding: 0; width: 100%;
display: flex; flex-direction: column; gap: 0.65rem;
}
#section-qa-practice .vl-lab__features li {
display: flex; align-items: flex-start; gap: 0.65rem;
font-size: 0.95rem; line-height: 1.55; color: var(--vl-muted);
}
body.dark #section-qa-practice .vl-lab__features li { color: #cbd5e1; }
#section-qa-practice .vl-lab__fi {
flex: 0 0 auto;
width: 28px; height: 28px; margin-top: 0.12rem;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9px;
border: 1px solid rgba(100, 181, 246, 0.35);
background: var(--vl-chip-bg);
color: var(--vl-title);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.12);
}
body.dark #section-qa-practice .vl-lab__fi {
border-color: rgba(100, 181, 246, 0.4);
box-shadow: 0 0 28px rgba(100, 181, 246, 0.15);
}
#section-qa-practice .vl-lab__fiSvg {
width: 14px; height: 14px; display: block;
}
#section-qa-practice .vl-lab__col--media { min-width: 0; display: flex; flex-direction: column; gap: 0.65rem; align-items: stretch; }
#section-qa-practice .vl-lab__sim-note {
margin: 0;
font-size: 0.78rem;
line-height: 1.45;
color: var(--vl-muted);
opacity: 0.88;
text-align: center;
}
body.dark #section-qa-practice .vl-lab__sim-note { color: #94a3b8; }
/* Headed run simulation (Chromium-style chrome, no iframe) */
#section-qa-practice .vl-lab__sim {
position: relative;
display: flex;
flex-direction: column;
gap: 0.55rem;
border-radius: 20px;
padding: 0.5rem;
border: 1px solid var(--vl-border);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(2, 6, 23, 0.15) 100%);
box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12), 0 0 0 1px rgba(100, 181, 246, 0.15) inset, 0 0 48px -20px rgba(56, 189, 248, 0.25);
}
body:not(.dark) #section-qa-practice .vl-lab__sim {
background: linear-gradient(168deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 249, 255, 0.88) 100%);
box-shadow: 0 10px 36px rgba(2, 6, 23, 0.08), 0 0 0 1px rgba(3, 105, 161, 0.12) inset, 0 0 40px -18px rgba(14, 165, 233, 0.2);
}
body.dark #section-qa-practice .vl-lab__sim {
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(100, 181, 246, 0.18) inset, 0 0 56px -16px rgba(100, 181, 246, 0.35);
}
#section-qa-practice .vl-lab__sim-browser {
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(100, 181, 246, 0.28);
background: #e8eaed;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
body:not(.dark) #section-qa-practice .vl-lab__sim-browser {
background: #dee1e6;
}
body.dark #section-qa-practice .vl-lab__sim-browser {
background: #2b2f36;
border-color: rgba(100, 181, 246, 0.35);
}
#section-qa-practice .vl-lab__sim-chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.55rem;
background: linear-gradient(180deg, #3d424a 0%, #35393f 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
body:not(.dark) #section-qa-practice .vl-lab__sim-chrome {
background: linear-gradient(180deg, #dfe1e6 0%, #d2d5dc 100%);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
#section-qa-practice .vl-lab__sim-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
padding-left: 2px;
}
#section-qa-practice .vl-lab__sim-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #5f6368;
opacity: 0.85;
}
#section-qa-practice .vl-lab__sim-dots span:nth-child(1) { background: #ff5f57; }
#section-qa-practice .vl-lab__sim-dots span:nth-child(2) { background: #febc2e; }
#section-qa-practice .vl-lab__sim-dots span:nth-child(3) { background: #28c840; }
body:not(.dark) #section-qa-practice .vl-lab__sim-dots span { opacity: 0.95; }
#section-qa-practice .vl-lab__sim-bar {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 0, 0, 0.08);
font-size: clamp(0.62rem, 1.45vw, 0.72rem);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #3c4043;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
body.dark #section-qa-practice .vl-lab__sim-bar {
background: rgba(15, 17, 21, 0.9);
border-color: rgba(255, 255, 255, 0.1);
color: #bdc1c6;
box-shadow: none;
}
#section-qa-practice .vl-lab__sim-lock {
flex-shrink: 0;
color: #5f6368;
opacity: 0.85;
}
body.dark #section-qa-practice .vl-lab__sim-lock { color: #9aa0a6; }
#section-qa-practice .vl-lab__sim-url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity;
}
#section-qa-practice .vl-lab__sim-viewport {
position: relative;
min-height: 280px;
background: #f8fafc;
}
body.dark #section-qa-practice .vl-lab__sim-viewport {
background: #0f1419;
}
@media (min-width: 992px) {
#section-qa-practice .vl-lab__sim-viewport { min-height: 300px; }
}
#section-qa-practice .vl-lab__sim-loading {
position: absolute;
inset: 0;
z-index: 15;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: rgba(248, 250, 252, 0.88);
backdrop-filter: blur(4px);
font-size: 0.8rem;
font-weight: 600;
color: #475569;
}
body.dark #section-qa-practice .vl-lab__sim-loading {
background: rgba(15, 20, 25, 0.9);
color: #94a3b8;
}
#section-qa-practice .vl-lab__sim-spinner {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(59, 130, 246, 0.25);
border-top-color: #38bdf8;
animation: vlSimSpin 0.65s linear infinite;
}
@keyframes vlSimSpin {
to { transform: rotate(360deg); }
}
#section-qa-practice .vl-lab__sim-views { position: relative; min-height: inherit; padding: 1rem 0.85rem 1.1rem; }
#section-qa-practice .vl-lab__sim-view { transition: opacity 0.35s ease, visibility 0.35s; }
#section-qa-practice .vl-lab__sim-view.is-vl-hidden {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
pointer-events: none;
}
#section-qa-practice .vl-lab__sim-view--home:not(.is-vl-hidden),
#section-qa-practice .vl-lab__sim-view--dash:not(.is-vl-hidden) { position: relative; }
#section-qa-practice .vl-lab__sim-view--home .vl-lab__sim-dash-head {
margin-bottom: 0.55rem;
}
#section-qa-practice .vl-lab__sim-home-welcome {
margin: 0;
font-size: 0.78rem;
line-height: 1.5;
font-weight: 600;
color: #475569;
}
body.dark #section-qa-practice .vl-lab__sim-home-welcome { color: #94a3b8; }
#section-qa-practice .vl-lab__sim-login-popup-layer {
position: absolute;
inset: 0;
z-index: 14;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
#section-qa-practice .vl-lab__sim-login-popup-layer.is-vl-open {
pointer-events: auto;
opacity: 1;
}
#section-qa-practice .vl-lab__sim-login-popup-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
body:not(.dark) #section-qa-practice .vl-lab__sim-login-popup-backdrop {
background: rgba(248, 250, 252, 0.78);
}
#section-qa-practice .vl-lab__sim-login-popup-layer .vl-lab__sim-card {
position: relative;
z-index: 1;
margin: 0 auto;
opacity: 0;
transform: scale(0.94) translateY(14px);
transition:
opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#section-qa-practice .vl-lab__sim-login-popup-layer.is-vl-open .vl-lab__sim-card {
opacity: 1;
transform: scale(1) translateY(0);
}
#section-qa-practice .vl-lab__sim-card {
max-width: 240px;
margin: 0 auto;
padding: 1rem 1.05rem 1.15rem;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(3, 105, 161, 0.15);
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
transform-origin: center 8%;
}
@media (prefers-reduced-motion: reduce) {
#section-qa-practice .vl-lab__sim-login-popup-layer,
#section-qa-practice .vl-lab__sim-login-popup-layer .vl-lab__sim-card {
transition: none !important;
}
}
body.dark #section-qa-practice .vl-lab__sim-card {
background: rgba(30, 41, 59, 0.96);
border-color: rgba(100, 181, 246, 0.28);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(100, 181, 246, 0.1) inset;
}
#section-qa-practice .vl-lab__sim-brand {
margin: 0 0 0.75rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #0369a1;
text-align: center;
}
body.dark #section-qa-practice .vl-lab__sim-brand {
color: #7dd3fc;
text-shadow: 0 0 20px rgba(100, 181, 246, 0.25);
}
#section-qa-practice .vl-lab__sim-lbl {
display: block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
margin: 0.35rem 0 0.2rem;
}
body.dark #section-qa-practice .vl-lab__sim-lbl { color: #94a3b8; }
#section-qa-practice .vl-lab__sim-field {
display: flex;
align-items: center;
min-height: 2rem;
padding: 0.2rem 0.5rem;
border-radius: 8px;
border: 1px solid rgba(100, 116, 139, 0.35);
background: rgba(248, 250, 252, 0.95);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.75rem;
color: #0f172a;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#section-qa-practice .vl-lab__sim-field.is-vl-focus {
border-color: rgba(56, 189, 248, 0.75);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
body.dark #section-qa-practice .vl-lab__sim-field {
background: rgba(15, 23, 42, 0.85);
border-color: rgba(100, 181, 246, 0.35);
color: #e2e8f0;
}
#section-qa-practice .vl-lab__sim-caret {
color: #0284c7;
animation: vlCaretBlink 1s step-end infinite;
font-weight: 300;
}
body.dark #section-qa-practice .vl-lab__sim-caret { color: #7dd3fc; }
@keyframes vlCaretBlink { 50% { opacity: 0; } }
#section-qa-practice .vl-lab__sim-btn {
width: 100%;
margin-top: 0.65rem;
padding: 0.45rem 0.75rem;
border-radius: 9px;
border: none;
font-size: 0.78rem;
font-weight: 700;
cursor: default;
color: #fff;
background: linear-gradient(135deg, #1976d2, #1565c0);
box-shadow: 0 2px 10px rgba(25, 118, 210, 0.35);
transition: transform 0.12s ease, filter 0.12s ease;
}
body:not(.dark) #section-qa-practice .vl-lab__sim-btn {
background: linear-gradient(135deg, #0369a1, #0ea5e9);
}
#section-qa-practice .vl-lab__sim-btn.is-vl-press {
transform: scale(0.97);
filter: brightness(0.92);
}
#section-qa-practice .vl-lab__sim-dash-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(100, 116, 139, 0.25);
}
body.dark #section-qa-practice .vl-lab__sim-dash-head {
border-bottom-color: rgba(100, 181, 246, 0.2);
}
#section-qa-practice .vl-lab__sim-dash-title {
font-size: 0.85rem;
font-weight: 800;
color: #0f172a;
}
body.dark #section-qa-practice .vl-lab__sim-dash-title { color: #f1f5f9; }
#section-qa-practice .vl-lab__sim-linkbtn {
font-size: 0.72rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 8px;
border: 1px solid rgba(100, 181, 246, 0.45);
background: rgba(56, 189, 248, 0.08);
color: #0369a1;
cursor: default;
transition: transform 0.12s ease, filter 0.12s ease;
}
body.dark #section-qa-practice .vl-lab__sim-linkbtn {
color: #7dd3fc;
background: rgba(100, 181, 246, 0.12);
}
#section-qa-practice .vl-lab__sim-linkbtn.is-vl-press {
transform: scale(0.96);
filter: brightness(0.9);
}
#section-qa-practice .vl-lab__sim-welcome {
margin: 0;
font-size: 0.88rem;
font-weight: 600;
color: #0f172a;
line-height: 1.5;
}
body.dark #section-qa-practice .vl-lab__sim-welcome {
color: #e2e8f0;
text-shadow: 0 0 24px rgba(100, 181, 246, 0.15);
}
#section-qa-practice .vl-lab__sim-pointer {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.95);
border: 2px solid #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
pointer-events: none;
z-index: 18;
transform: translate(-50%, -50%);
transition: left 0.22s cubic-bezier(0.22, 1, 0.45, 1), top 0.22s cubic-bezier(0.22, 1, 0.45, 1), opacity 0.2s ease;
opacity: 0.95;
}
body:not(.dark) #section-qa-practice .vl-lab__sim-pointer {
background: rgba(30, 41, 59, 0.95);
}
#section-qa-practice .vl-lab__sim-term {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 168px;
min-height: 168px;
max-height: 168px;
margin: 0;
padding: 0;
border-radius: 12px;
overflow: hidden;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(100, 181, 246, 0.35);
box-shadow:
0 0 28px -8px rgba(56, 189, 248, 0.35),
inset 0 0 0 1px rgba(0, 0, 0, 0.25),
inset 0 0 40px rgba(56, 189, 248, 0.06);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.62rem;
line-height: 1.45;
color: #7dd3fc;
}
#section-qa-practice .vl-lab__sim-term::before,
#section-qa-practice .vl-lab__sim-term::after {
content: '';
position: absolute;
left: 0;
right: 10px;
height: 20px;
pointer-events: none;
z-index: 2;
border-radius: inherit;
}
#section-qa-practice .vl-lab__sim-term::before {
top: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0) 100%);
}
#section-qa-practice .vl-lab__sim-term::after {
bottom: 0;
background: linear-gradient(0deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0) 100%);
}
body:not(.dark) #section-qa-practice .vl-lab__sim-term {
background: rgba(15, 23, 42, 0.96);
color: #93c5fd;
}
body:not(.dark) #section-qa-practice .vl-lab__sim-term::before {
background: linear-gradient(180deg, rgba(14, 20, 30, 0.98) 0%, rgba(14, 20, 30, 0) 100%);
}
body:not(.dark) #section-qa-practice .vl-lab__sim-term::after {
background: linear-gradient(0deg, rgba(14, 20, 30, 0.98) 0%, rgba(14, 20, 30, 0) 100%);
}
#section-qa-practice .vl-lab__sim-term-scroll {
box-sizing: border-box;
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(100, 181, 246, 0.45) transparent;
padding: 0.55rem 0.65rem 0.6rem;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
-webkit-overflow-scrolling: touch;
}
#section-qa-practice .vl-lab__sim-term-body {
display: block;
margin: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
white-space: pre-wrap;
word-break: break-word;
tab-size: 2;
}
#section-qa-practice .vl-lab__sim-term-caret {
display: inline;
margin-left: 1px;
font-size: inherit;
font-weight: 600;
line-height: inherit;
color: #38bdf8;
animation: vlCaretBlink 1s step-end infinite;
vertical-align: baseline;
}
#section-qa-practice .vl-lab__sim-term-scroll::-webkit-scrollbar {
width: 6px;
}
#section-qa-practice .vl-lab__sim-term-scroll::-webkit-scrollbar-track {
background: transparent;
}
#section-qa-practice .vl-lab__sim-term-scroll::-webkit-scrollbar-thumb {
background: rgba(100, 181, 246, 0.35);
border-radius: 4px;
}
#section-qa-practice .vl-lab__sim-term-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(125, 211, 252, 0.45);
}
#section-qa-practice .vl-lab__ctas {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
margin-top: 0.45rem;
width: 100%;
}
#section-qa-practice .vl-lab__ctaHint {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--vl-muted);
max-width: 26rem;
}
#section-qa-practice .vl-lab__ctaHint strong {
color: var(--vl-title);
font-weight: 700;
}
#section-qa-practice a.vl-lab__ctaHero {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
max-width: 440px;
padding: 1.1rem 1.65rem !important;
min-height: 58px;
font-size: clamp(1.02rem, 2.2vw, 1.18rem) !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
border-radius: 14px !important;
cursor: pointer !important;
text-decoration: none !important;
color: #fff !important;
background: var(--pw-badge-grad) !important;
border: 1px solid rgba(147, 197, 253, 0.5) !important;
box-shadow:
0 6px 28px rgba(25, 118, 210, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.14) inset,
0 0 52px rgba(56, 189, 248, 0.42) !important;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, filter 0.3s ease !important;
}
#section-qa-practice a.vl-lab__ctaHero:hover,
#section-qa-practice a.vl-lab__ctaHero:focus-visible {
transform: scale(1.03) translateY(-3px) !important;
box-shadow:
0 10px 40px rgba(25, 118, 210, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 80px rgba(56, 189, 248, 0.55),
0 0 120px rgba(125, 211, 252, 0.25) !important;
filter: brightness(1.07) !important;
outline: none;
}
#section-qa-practice a.vl-lab__ctaHero:focus-visible {
outline: 2px solid rgba(125, 211, 252, 0.8);
outline-offset: 3px;
}
#section-qa-practice .vl-lab__ctaHero__ico {
font-size: 1.15em;
line-height: 1;
}
#section-qa-practice .vl-lab__ctaHero__txt { line-height: 1.15; }
#section-qa-practice .vl-lab__ctaHero__arr {
display: inline-block;
font-size: 1.2em;
line-height: 1;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#section-qa-practice a.vl-lab__ctaHero:hover .vl-lab__ctaHero__arr,
#section-qa-practice a.vl-lab__ctaHero:focus-visible .vl-lab__ctaHero__arr {
transform: translateX(8px);
}
@media (max-width: 700px) {
#section-qa-practice .vl-lab__board { padding: 1.45rem 1.2rem 1.6rem; }
#section-qa-practice a.vl-lab__ctaHero { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
#section-qa-practice .vl-lab__board,
#section-qa-practice .vl-lab__sim { transition: none; }
#section-qa-practice .vl-lab__sim-spinner { animation: none; }
#section-qa-practice .vl-lab__sim-term-scroll { scroll-behavior: auto; }
#section-qa-practice .vl-lab__sim-url {
transition: none !important;
}
#section-qa-practice .vl-lab__sim-login-popup-layer.is-vl-open .vl-lab__sim-card {
opacity: 1 !important;
transform: none !important;
}
#section-qa-practice a.vl-lab__ctaHero:hover,
#section-qa-practice a.vl-lab__ctaHero:focus-visible,
#section-qa-practice a.vl-lab__ctaHero:hover .vl-lab__ctaHero__arr,
#section-qa-practice a.vl-lab__ctaHero:focus-visible .vl-lab__ctaHero__arr {
transform: none !important;
filter: none !important;
box-shadow:
0 6px 28px rgba(25, 118, 210, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.14) inset,
0 0 52px rgba(56, 189, 248, 0.42) !important;
}
}
/* Modern Button Styles - Match Read More Button Colors */
.button {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%) !important;
color: #FFFFFF !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2) !important;
border: none !important;
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}
.button:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%) !important;
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4) !important;
transform: translateY(-3px) !important;
}
.button.button-dark {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%) !important;
}
.button.button-dark:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%) !important;
}
/* Dark theme button styles - Match Read More */
body.dark .button {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%) !important;
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.15) !important;
}
body.dark .button:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%) !important;
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.25) !important;
}
body.dark .button.button-dark {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%) !important;
}
body.dark .button.button-dark:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%) !important;
}
.button.button-border {
border-color: var(--primary-turquoise) !important;
color: var(--primary-turquoise) !important;
}
.button.button-border:hover {
background: var(--gradient-primary) !important;
border-color: var(--primary-turquoise) !important;
color: #FFF !important;
}
/* SUBJECTS button - text always visible */
.button.button-border.button-light {
border-color: rgba(255, 255, 255, 0.8) !important;
color: #FFF !important;
background: transparent !important;
}
.button.button-border.button-light:hover {
background: var(--gradient-primary) !important;
border-color: var(--primary-turquoise) !important;
color: #FFF !important;
box-shadow: 0 4px 15px var(--shadow-primary) !important;
}
/* Link Colors - Mavi Tonlar */
a:not(.button):not(.social-icon):not(.nocolor) {
color: #4FC3F7;
/* Mavi renk */
transition: color 0.3s ease;
}
a:not(.button):not(.social-icon):not(.nocolor):hover {
color: #81D4FA;
/* Light blue hover */
}
body.dark a:not(.button):not(.social-icon):not(.nocolor) {
color: #4FC3F7;
/* Blue - dark theme */
}
body.dark a:not(.button):not(.social-icon):not(.nocolor):hover {
color: #5BC5F7;
/* Light blue hover - dark theme */
}
/* Selection Color */
::selection {
background: var(--primary-light-blue);
color: #FFF;
}
::-moz-selection {
background: var(--primary-light-blue);
color: #FFF;
}
/* Header Logo */
#logo a {
display: inline-flex;
align-items: center;
line-height: 0;
}
#logo img.site-logo {
display: block;
width: auto;
height: 78px;
max-height: 78px;
max-width: min(240px, 42vw);
object-fit: contain;
}
/* Hide legacy inline SVG logo (kept in markup) */
#logo svg {
display: none !important;
}
/* Compact header + hamburger only at phone/small tablet (≤991). 992–1199 keeps horizontal nav like desktop. */
@media (max-width: 991px) {
#logo img.site-logo {
height: 54px;
max-height: 54px;
max-width: min(180px, 55vw);
}
#header-wrap .container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Left hamburger: always in the top header row (should not move to the middle when the menu opens) */
#header #primary-menu-trigger {
position: absolute;
left: 15px;
top: 12px !important;
margin-top: 0 !important;
transform: none !important;
z-index: 5;
}
#logo {
float: none !important;
width: 100%;
height: 70px !important;
text-align: center;
margin: 0 auto;
}
#header {
min-height: 70px;
}
/* Collapse horizontal nav like ≤991; keep overlay when ul has .d-block (Bootstrap wins specificity) */
#primary-menu {
float: none !important;
}
#primary-menu > ul:not(.d-block),
#primary-menu > div > ul:not(.d-block) {
display: none !important;
}
#primary-menu-trigger {
opacity: 1 !important;
pointer-events: auto !important;
}
#header.full-header #primary-menu > ul {
border-right: none !important;
padding-right: 0 !important;
margin-right: 0 !important;
}
/* Match onepage mobile spacing for right hamburger + theme row */
#side-panel-trigger {
margin: 25px 0 !important;
}
/* responsive.css only applies these at ≤991; mirror so opened menu matches mobile */
#primary-menu ul li {
float: none !important;
margin: 0 !important;
text-align: left !important;
border-top: 1px solid rgba(148, 163, 184, 0.22);
}
#primary-menu ul li:first-child {
border-top: 0 !important;
}
#primary-menu ul > li > a,
#primary-menu.style-2 > div > ul > li > a {
padding: 14px 12px !important;
border: none !important;
margin: 0 !important;
}
#primary-menu > ul.d-block,
#primary-menu > div > ul.d-block {
width: 100% !important;
max-width: 100% !important;
}
/*
* Mobile: menu open (ul.d-block) — the list opens full width BELOW the header row; logo + right icons stay
* in the top row. display:contents removed (the side panel was mixing into the menu rows).
*/
#header-wrap .container:has(#primary-menu > ul.d-block) {
flex-wrap: nowrap;
align-items: center;
}
#header-wrap .container:has(#primary-menu > ul.d-block) #logo {
width: auto !important;
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
#header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
position: static;
}
#header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 500;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 0 12px 0 !important;
border-top: 1px solid rgba(148, 163, 184, 0.22);
max-height: min(75vh, calc(100dvh - 80px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
body:not(.dark) #header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block {
background: #ffffff;
}
body.dark #header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block {
background: rgba(26, 26, 28, 0.98);
}
#header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block li,
#header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block li > a,
#header-wrap .container:has(#primary-menu > ul.d-block) #primary-menu > ul.d-block li > a > div {
text-align: left !important;
}
}
/*
* Tablet (992–1199): keep a single header row — nav must not wrap to a second line (was overlapping content).
* Match desktop flex nav + nowrap; overflow-x on the list if the viewport is tight.
*/
@media (min-width: 992px) and (max-width: 1199px) {
#header,
#header.sticky-header,
#header-wrap,
#header.sticky-header #header-wrap {
height: auto !important;
min-height: 70px;
}
#header #header-wrap {
overflow: visible;
display: flex;
align-items: stretch;
}
#header #header-wrap > .container {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: 100%;
min-height: 70px;
}
#logo {
float: none !important;
height: auto !important;
display: flex;
align-items: center;
flex-shrink: 0;
}
#logo img {
height: auto !important;
}
#logo img.site-logo {
height: 58px !important;
max-height: 58px !important;
width: auto !important;
max-width: min(200px, 36vw) !important;
object-fit: contain;
}
#header.transparent-header:not(.sticky-header):not(.hidden) + #slider,
#header.transparent-header:not(.sticky-header):not(.hidden) + #page-title.page-title-parallax,
#slider + #header.transparent-header:not(.hidden) {
top: -78px !important;
margin-bottom: -78px !important;
}
#primary-menu {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
justify-content: flex-end !important;
min-width: 0 !important;
float: none !important;
flex-wrap: nowrap !important;
}
#primary-menu > ul {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
float: none !important;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
gap: 0;
/* hide scroll gutter on touch devices where everything fits */
-ms-overflow-style: auto;
}
#primary-menu > ul > li {
float: none !important;
flex-shrink: 0;
display: flex;
align-items: stretch;
}
#primary-menu ul li > a {
padding: 0 5px !important;
min-height: 70px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
line-height: 1.15 !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
white-space: nowrap;
}
#primary-menu ul li > a > div {
white-space: nowrap;
}
#primary-menu > ul > li.menu-item-2l > a {
padding: 0 7px !important;
min-height: 70px !important;
white-space: normal;
}
#primary-menu ul li .pw-nav-2l {
min-width: 10.5em;
max-width: 14em;
}
/* Horizontal nav is visible; hide redundant mobile trigger (was a duplicate hamburger on the right). */
#header #primary-menu-trigger {
opacity: 0 !important;
pointer-events: none !important;
}
#header.full-header #primary-menu {
padding-right: 0 !important;
}
#side-panel-trigger,
#primary-menu .theme-toggle {
flex-shrink: 0;
}
}
/*
* Desktop (≥1200px): onepage uses 70px header — logo clips, 2-line nav + theme toggle overflow.
* Taller bar + flex-aligned links + contained highlights.
*/
@media (min-width: 1200px) {
#header,
#header.sticky-header,
#header-wrap,
#header.sticky-header #header-wrap {
height: auto !important;
min-height: 90px;
}
#header #header-wrap {
display: flex;
align-items: stretch;
}
#header #header-wrap > .container {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
min-height: 90px;
}
#logo {
float: none !important;
height: auto !important;
display: flex;
align-items: center;
flex-shrink: 0;
}
#logo img.site-logo,
#logo img {
height: 78px !important;
max-height: 78px !important;
width: auto !important;
max-width: min(240px, 28vw) !important;
object-fit: contain;
}
#header.transparent-header:not(.sticky-header):not(.hidden) + #slider,
#header.transparent-header:not(.sticky-header):not(.hidden) + #page-title.page-title-parallax,
#slider + #header.transparent-header:not(.hidden) {
top: -90px !important;
margin-bottom: -90px !important;
}
#primary-menu {
display: flex !important;
align-items: center !important;
flex: 1 1 auto;
justify-content: flex-end;
min-height: 0;
}
#primary-menu > ul {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
float: none !important;
}
#primary-menu > ul > li {
float: none !important;
display: flex;
align-items: stretch;
}
#primary-menu ul li > a {
padding: 0 12px !important;
min-height: 90px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
line-height: 1.2 !important;
}
#primary-menu > ul > li.menu-item-2l > a {
padding: 0 12px !important;
min-height: 90px !important;
line-height: 1.2 !important;
}
#primary-menu ul li .pw-nav-2l {
gap: 3px;
}
#primary-menu ul li:hover:not(.current) > a,
#primary-menu ul li.current > a {
border-radius: 6px !important;
}
#primary-menu ul li.current > a::before {
border-radius: 6px !important;
}
#primary-menu ul li.current > a::after {
border-radius: 0 0 4px 4px;
}
.theme-toggle {
width: 52px;
height: 52px;
margin-left: 12px;
border-radius: 16px;
}
#side-panel-trigger {
display: flex !important;
align-items: center !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 767px) {
#logo img.site-logo {
height: 48px;
max-height: 48px;
max-width: min(160px, 58vw);
}
}
/* Sticky: keep logo nearly full bar height */
#header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img.site-logo {
height: 64px !important;
max-height: 64px !important;
}
@media (min-width: 1200px) {
#header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img.site-logo {
height: 72px !important;
max-height: 72px !important;
}
}
/* Footer and Side Panel Logo SVG Styling */
.footer-logo-svg,
.side-panel-logo-svg {
display: block;
height: auto;
max-width: 250px;
margin: 20px auto;
}
/* Footer logo (round + 3D medallion) */
.footer-logo-3d {
/* base size, but never overflow the column/panel */
--logo-size: 320px;
width: min(var(--logo-size), 100%);
aspect-ratio: 1 / 1;
height: auto;
border-radius: 999px;
display: grid;
place-items: center;
margin: 6px auto 0;
position: relative;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%),
radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.55) 70%);
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.55),
0 2px 0 rgba(255, 255, 255, 0.18) inset,
0 -10px 22px rgba(0, 0, 0, 0.45) inset;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.footer-logo-3d::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 999px;
background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
pointer-events: none;
opacity: 0.9;
}
.footer-logo-3d::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
box-shadow:
0 0 0 6px rgba(255, 255, 255, 0.10) inset,
0 0 0 1px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.footer-round-logo {
/* keep inside the medallion and avoid cropping */
width: 90%;
aspect-ratio: 1 / 1;
height: auto;
border-radius: 999px;
display: block;
/* show the full patch */
object-fit: contain;
object-position: center;
background: transparent;
box-shadow:
0 10px 18px rgba(0, 0, 0, 0.35),
0 2px 8px rgba(0, 0, 0, 0.20) inset;
padding: 0;
position: relative;
z-index: 1;
}
/* Side-panel uses the same style but slightly smaller to fit */
#side-panel .footer-logo-3d {
--logo-size: 280px;
}
/* Keep footer titles consistent */
#footer h4 {
letter-spacing: 1px;
}
/* Footer logo responsive */
@media (max-width: 767px) {
.footer-logo-svg,
.side-panel-logo-svg {
max-width: 180px;
}
.footer-logo-3d {
--logo-size: 260px;
}
#side-panel .footer-logo-3d {
--logo-size: 240px;
}
}
#section-tools .styled-card-tool,
.image-carousel .styled-card-tool {
margin: 0 !important;
}
#section-tools #oc-tools .oc-item,
#section-tools .image-carousel .oc-item {
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
#section-tools .tools-section-sub {
max-width: min(90vw, 700px);
margin: 0.35rem auto 8px;
padding: 0 16px;
font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
line-height: 1.6;
text-align: center;
font-weight: 400;
}
body:not(.dark) #section-tools .tools-section-sub {
color: #5c6b7a;
}
body.dark #section-tools .tools-section-sub {
color: rgba(148, 163, 184, 0.96);
}
/* —— Proof of Skill: "how to explore" guide + tool chips —— */
#section-tools .pos-guide { max-width: 980px; margin: 22px auto 0; padding: 0 16px; text-align: left; }
#section-tools .pos-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; }
#section-tools .pos-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0; }
#section-tools .pos-steps li + li { border-left: 1px solid var(--pos-line); }
#section-tools .pos-steps strong { display: block; font-size: 14px; line-height: 1.3; }
#section-tools .pos-steps em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
#section-tools .pos-step-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #1976d2, #0d47a1); color: #fff; font-size: 12px; font-weight: 700; }
#section-tools .pos-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
#section-tools .pos-col { padding: 12px 14px 14px; border-radius: 14px; }
#section-tools .pos-col-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
#section-tools .pos-col-list { display: flex; flex-wrap: wrap; gap: 6px; }
#section-tools .pos-chip { border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3; transition: border-color .2s, background-color .2s; }
body.dark #section-tools { --pos-line: rgba(144,202,249,0.18); }
body.dark #section-tools .pos-steps, body.dark #section-tools .pos-col { background: rgba(255,255,255,0.045); border: 1px solid rgba(144,202,249,0.18); }
body.dark #section-tools .pos-steps strong { color: #fff; }
body.dark #section-tools .pos-steps em { color: #94a3b8; }
body.dark #section-tools .pos-col-h { color: #90caf9; }
body.dark #section-tools .pos-chip { background: rgba(255,255,255,0.06); border: 1px solid rgba(144,202,249,0.25); color: #e2e8f0; }
body.dark #section-tools .pos-chip:hover, body.dark #section-tools .pos-chip:focus-visible { border-color: #64b5f6; background: rgba(25,118,210,0.2); }
body:not(.dark) #section-tools { --pos-line: rgba(3,105,161,0.14); }
body:not(.dark) #section-tools .pos-steps, body:not(.dark) #section-tools .pos-col { background: #fff; border: 1px solid rgba(3,105,161,0.14); }
body:not(.dark) #section-tools .pos-steps strong { color: #0f172a; }
body:not(.dark) #section-tools .pos-steps em { color: #64748b; }
body:not(.dark) #section-tools .pos-col-h { color: #0369a1; }
body:not(.dark) #section-tools .pos-chip { background: #f8fafc; border: 1px solid rgba(3,105,161,0.2); color: #0f172a; }
body:not(.dark) #section-tools .pos-chip:hover, body:not(.dark) #section-tools .pos-chip:focus-visible { border-color: #0284c7; background: #e0f2fe; }
@media (max-width: 900px) { #section-tools .pos-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
#section-tools .pos-steps { grid-template-columns: 1fr; }
#section-tools .pos-steps li + li { border-left: 0; border-top: 1px solid var(--pos-line); }
#section-tools .pos-cols { grid-template-columns: 1fr; gap: 8px; }
#section-tools .pos-col { padding: 10px 12px 12px; }
#section-tools .pos-col-h { margin-bottom: 8px; }
}
#section-tools .pos-chip { white-space: nowrap; }
#section-tools .psg-skill-hint { white-space: nowrap; letter-spacing: 0.06em; }
#section-tools .psg-mywork { margin: 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; border-bottom: 1px solid rgba(144,202,249,0.15); }
#section-tools .psg-mywork__label { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #1976d2, #0d47a1); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
body.dark #section-tools .psg-mywork { color: #e2e8f0; background: rgba(25,118,210,0.12); }
body:not(.dark) #section-tools .psg-mywork { color: #0f172a; background: rgba(2,132,199,0.08); }
/* —— Tools: paired rows (skill card | mini demo) —— */
#section-tools {
--psg-bloom: rgba(56, 189, 248, 0.45);
--psg-line: rgba(100, 181, 246, 0.35);
--psg-cta-grad: linear-gradient(135deg, #1976d2, #1565c0, #0d47a1);
--psg-mini-surface: rgba(15, 23, 42, 0.92);
--psg-mini-ink: #e2e8f0;
/* align with CI Pipeline Lab (.cpl-embed-wrap max-w-[1680px]) + fluid edge padding */
--psg-lab-outer: min(90vw, 1680px);
}
#section-tools .section .container,
#section-tools .container {
max-width: var(--psg-lab-outer) !important;
width: 100%;
box-sizing: border-box;
}
#section-tools .divcenter {
max-width: var(--psg-lab-outer) !important;
}
#section-tools .section h2,
#section-tools h2 {
max-width: none;
}
body:not(.dark) #section-tools {
--psg-bloom: rgba(3, 105, 161, 0.28);
--psg-line: rgba(3, 105, 161, 0.22);
--psg-cta-grad: linear-gradient(135deg, #0369a1, #0ea5e9, #38bdf8);
--psg-mini-surface: rgba(255, 255, 255, 0.95);
--psg-mini-ink: #0f172a;
}
#section-tools .tools-pairs {
display: flex;
flex-direction: column;
gap: clamp(1.1rem, 2.2vw, 1.55rem);
width: 100%;
max-width: var(--psg-lab-outer);
margin: 0 auto;
padding: 44px max(10px, env(safe-area-inset-left, 0px)) 50px
max(10px, env(safe-area-inset-right, 0px));
box-sizing: border-box;
}
#section-tools .tools-pair,
#section-tools .psg-pair {
display: grid;
grid-template-columns: 1fr;
gap: clamp(0.9rem, 1.8vw, 1.35rem);
align-items: stretch;
min-width: 0;
}
@media (min-width: 601px) {
#section-tools .tools-pair,
#section-tools .psg-pair {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
}
}
#section-tools .psg-pair {
border-radius: 20px;
}
#section-tools .psg-pair:hover .psg-skill-card,
#section-tools .psg-pair:hover .psg-mini-demo {
transform: translateY(-3px);
}
body:not(.dark) #section-tools .psg-pair:hover .psg-skill-card,
body:not(.dark) #section-tools .psg-pair:hover .psg-mini-demo {
transform: translateY(-2px);
}
/* Desktop: two tool+demo pairs per row — wider demo columns */
@media (min-width: 1200px) {
@supports (grid-template-columns: subgrid) {
#section-tools .tools-pairs--lab {
display: grid;
width: 100%;
max-width: var(--psg-lab-outer);
grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.3fr) minmax(220px, 0.9fr) minmax(360px, 1.3fr);
gap: 24px;
align-items: stretch;
box-sizing: border-box;
}
#section-tools .tools-pairs--lab .psg-pair {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
gap: 0;
align-self: stretch;
min-width: 0;
}
}
@supports not (grid-template-columns: subgrid) {
#section-tools .tools-pairs--lab {
display: grid;
width: 100%;
max-width: var(--psg-lab-outer);
grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.3fr) minmax(220px, 0.9fr) minmax(360px, 1.3fr);
gap: 24px;
align-items: stretch;
box-sizing: border-box;
}
#section-tools .tools-pairs--lab .psg-pair {
display: contents;
}
}
}
/* Scroll-in (progressive: hidden only when .psg-anim is on) */
#section-tools .tools-pairs--lab.psg-anim .psg-pair:not(.psg-pair--in) {
opacity: 0;
transform: translateY(22px);
}
#section-tools .tools-pairs--lab .psg-pair {
transition:
box-shadow 0.45s ease,
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#section-tools .tools-pairs--lab .psg-pair.psg-pair--in {
opacity: 1;
transform: translateY(0);
}
#section-tools .psg-pair:hover .psg-skill-card,
#section-tools .psg-pair:hover .psg-mini-demo {
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.45),
0 0 72px -4px var(--psg-bloom),
0 0 56px -8px rgba(56, 189, 248, 0.55),
0 0 0 1px rgba(100, 181, 246, 0.38) inset;
}
body:not(.dark) #section-tools .psg-pair:hover .psg-skill-card,
body:not(.dark) #section-tools .psg-pair:hover .psg-mini-demo {
box-shadow:
0 18px 40px rgba(2, 6, 23, 0.14),
0 0 50px -6px var(--psg-bloom),
0 0 0 1px rgba(3, 105, 161, 0.22) inset;
}
#section-tools .psg-skill-card,
#section-tools .psg-mini-demo {
transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
#section-tools .tools-pair__tool {
display: flex;
flex-direction: column;
min-width: 0;
align-self: stretch;
}
#section-tools .tools-pair__tool .tool-card-item {
width: 100%;
}
#section-tools .tools-pair__demo {
display: flex;
min-width: 0;
align-self: stretch;
}
#section-tools .psg-tool-card-item {
min-width: 0;
}
#section-tools .psg-skill-card {
display: flex;
flex-direction: column;
max-width: none;
width: 100%;
height: auto;
flex: 1 1 auto;
min-height: 252px;
padding: 22px 16px 20px;
}
#section-tools .psg-skill-card::after {
display: none;
}
#section-tools .psg-skill-card {
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(100, 181, 246, 0.12) inset;
}
body:not(.dark) #section-tools .psg-skill-card {
box-shadow:
0 8px 24px rgba(2, 6, 23, 0.08),
0 0 0 1px rgba(3, 105, 161, 0.1) inset;
}
#section-tools .psg-skill-card:hover {
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.42),
0 0 48px -8px var(--psg-bloom),
0 0 0 1px rgba(100, 181, 246, 0.2) inset;
}
body:not(.dark) #section-tools .psg-skill-card:hover {
box-shadow:
0 16px 40px rgba(2, 6, 23, 0.12),
0 0 40px -6px var(--psg-bloom),
0 0 0 1px rgba(3, 105, 161, 0.15) inset;
}
/* Validation Lab — featured premium card (funnel CTA inside tools section) */
#section-tools .psg-skill-card--vlab {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 18% -8%, rgba(125, 211, 252, 0.22), transparent 55%),
radial-gradient(circle at 88% 110%, rgba(56, 189, 248, 0.16), transparent 55%),
linear-gradient(160deg, #0c2a47 0%, #0a1f3a 55%, #061224 100%) !important;
border: 1px solid rgba(186, 230, 253, 0.45) !important;
box-shadow:
0 14px 38px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(125, 211, 252, 0.22) inset,
0 0 36px rgba(56, 189, 248, 0.18) !important;
}
body:not(.dark) #section-tools .psg-skill-card--vlab {
background:
radial-gradient(circle at 18% -8%, rgba(125, 211, 252, 0.32), transparent 55%),
radial-gradient(circle at 88% 110%, rgba(56, 189, 248, 0.22), transparent 55%),
linear-gradient(160deg, #0c2a47 0%, #0a1f3a 55%, #061224 100%) !important;
border-color: rgba(186, 230, 253, 0.55) !important;
box-shadow:
0 14px 36px rgba(2, 132, 199, 0.28),
0 0 0 1px rgba(125, 211, 252, 0.28) inset,
0 0 32px rgba(125, 211, 252, 0.22) !important;
}
#section-tools .psg-skill-card--vlab::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(186, 230, 253, 0.55), rgba(56, 189, 248, 0.15) 50%, rgba(186, 230, 253, 0.55));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.6;
}
#section-tools .psg-skill-card--vlab:hover {
box-shadow:
0 22px 56px rgba(0, 0, 0, 0.6),
0 0 80px rgba(56, 189, 248, 0.42),
0 0 0 1px rgba(186, 230, 253, 0.55) inset !important;
}
body:not(.dark) #section-tools .psg-skill-card--vlab:hover {
box-shadow:
0 22px 50px rgba(2, 132, 199, 0.4),
0 0 64px rgba(125, 211, 252, 0.45),
0 0 0 1px rgba(186, 230, 253, 0.65) inset !important;
}
#section-tools .psg-skill-card--vlab .tool-card-trigger {
background: transparent !important;
border: none !important;
color: #e0f2fe;
text-decoration: none !important;
padding: 0;
gap: 0.35rem;
}
#section-tools .psg-vlab-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 3px 9px;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 999px;
color: #0c4a6e;
background: linear-gradient(135deg, #bae6fd, #7dd3fc 60%, #38bdf8);
box-shadow:
0 0 0 1px rgba(186, 230, 253, 0.5),
0 0 14px rgba(125, 211, 252, 0.7),
0 4px 10px rgba(2, 132, 199, 0.35);
z-index: 2;
}
#section-tools .psg-vlab-logo {
margin-top: 0;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.35));
}
#section-tools .psg-vlab-logo svg {
width: 90px;
height: 90px;
}
#section-tools .psg-skill-card--vlab .psg-vlab-name {
margin-top: 8px !important;
color: #f0f9ff !important;
letter-spacing: 0.14em !important;
font-weight: 700;
text-shadow: 0 0 18px rgba(125, 211, 252, 0.5);
}
body:not(.dark) #section-tools .psg-skill-card--vlab .psg-vlab-name {
color: #f0f9ff !important;
}
#section-tools .psg-vlab-sub {
display: block;
margin-top: 2px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(186, 230, 253, 0.92);
text-align: center;
line-height: 1.2;
}
#section-tools .psg-vlab-features {
display: block;
margin-top: 2px;
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.04em;
color: rgba(186, 230, 253, 0.6);
text-align: center;
line-height: 1.35;
max-width: 12rem;
padding: 0 0.3rem;
}
#section-tools .psg-vlab-hint {
color: #7dd3fc !important;
}
#section-tools .psg-skill-card--vlab:hover .psg-vlab-hint {
color: #bae6fd !important;
text-shadow: 0 0 12px rgba(125, 211, 252, 0.6);
}
body:not(.dark) #section-tools .psg-vlab-hint { color: #7dd3fc !important; }
body:not(.dark) #section-tools .psg-skill-card--vlab:hover .psg-vlab-hint { color: #bae6fd !important; }
/* Validation Lab — preview pane */
#section-tools .psg-mini-demo--vlab {
background:
radial-gradient(circle at 80% 0%, rgba(125, 211, 252, 0.1), transparent 50%),
linear-gradient(180deg, #0a1f3a 0%, #061224 100%);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(125, 211, 252, 0.18) inset;
}
body:not(.dark) #section-tools .psg-mini-demo--vlab {
background:
radial-gradient(circle at 80% 0%, rgba(125, 211, 252, 0.15), transparent 50%),
linear-gradient(180deg, #0a1f3a 0%, #061224 100%);
box-shadow:
0 8px 24px rgba(2, 132, 199, 0.22),
0 0 0 1px rgba(125, 211, 252, 0.2) inset;
}
#section-tools .psg-vlab-pv {
padding: 0.5rem 0.6rem 0.25rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
color: rgba(224, 242, 254, 0.92);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.01em;
}
#section-tools .psg-vlab-pv__row {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.5rem;
border-radius: 6px;
background: rgba(125, 211, 252, 0.06);
border: 1px solid rgba(125, 211, 252, 0.16);
line-height: 1.15;
}
#section-tools .psg-vlab-pv__check {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
font-size: 0.6rem;
font-weight: 700;
color: #0c4a6e;
background: linear-gradient(135deg, #bae6fd, #38bdf8);
box-shadow: 0 0 8px rgba(125, 211, 252, 0.55);
}
#section-tools .psg-vlab-pv__meta {
margin-top: 0.1rem;
padding: 0.3rem 0.5rem 0;
font-size: 0.58rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.6);
text-align: center;
border-top: 1px dashed rgba(125, 211, 252, 0.2);
}
#section-tools .psg-mini-demo__open.psg-vlab-open {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%),
linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%);
border-color: rgba(186, 230, 253, 0.55);
box-shadow:
0 4px 22px rgba(14, 165, 233, 0.4),
0 0 36px -2px rgba(56, 189, 248, 0.55),
0 0 0 1px rgba(186, 230, 253, 0.32) inset;
}
#section-tools .psg-pair--vlab:hover .psg-mini-demo__open.psg-vlab-open {
box-shadow:
0 6px 26px rgba(14, 165, 233, 0.55),
0 0 50px rgba(56, 189, 248, 0.7),
0 0 0 1px rgba(186, 230, 253, 0.55) inset;
}
#section-tools .psg-skill-card .tool-card-trigger {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 0;
gap: 0.25rem;
}
#section-tools .psg-skill-card .psg-skill-name,
#section-tools .psg-skill-card .card-text {
margin-top: 18px;
letter-spacing: 0.12em;
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}
#section-tools .psg-skill-card .psg-skill-name--git-triple {
font-size: clamp(0.5rem, 0.9vw, 0.7rem);
line-height: 1.2;
letter-spacing: 0.04em;
white-space: normal;
max-width: 11.5rem;
text-align: center;
padding: 0 0.2rem;
}
#section-tools .psg-skill-hint {
display: block;
margin-top: auto;
padding-top: 0.4rem;
width: 100%;
text-align: center;
font-size: clamp(0.6rem, 0.8vw, 0.7rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-skill-hint {
color: #0284c7;
}
#section-tools .psg-skill-card:hover .psg-skill-hint {
color: var(--pw-h-title-row, #64b5f6);
text-shadow: 0 0 10px var(--psg-bloom, rgba(56, 189, 248, 0.35));
}
body:not(.dark) #section-tools .psg-skill-card:hover .psg-skill-hint {
color: #0369a1;
text-shadow: 0 0 8px rgba(3, 105, 161, 0.2);
}
/* Mini IDE / modal echo */
#section-tools .psg-mini-demo {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
min-height: 252px;
border-radius: 16px;
overflow: hidden;
background: var(--psg-mini-surface);
border: 1px solid var(--psg-line);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(100, 181, 246, 0.1) inset;
}
@media (prefers-reduced-motion: no-preference) {
#section-tools .psg-mini-demo {
animation: psg-lab-breathe 3.2s ease-in-out infinite;
}
body:not(.dark) #section-tools .psg-mini-demo {
animation: psg-lab-breathe-light 3.2s ease-in-out infinite;
}
}
@keyframes psg-lab-breathe {
0%,
100% {
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(100, 181, 246, 0.1) inset;
}
50% {
box-shadow:
0 10px 36px rgba(0, 0, 0, 0.34),
0 0 22px -4px var(--psg-bloom),
0 0 0 1px rgba(100, 181, 246, 0.22) inset;
}
}
@keyframes psg-lab-breathe-light {
0%,
100% {
box-shadow:
0 8px 24px rgba(2, 6, 23, 0.08),
0 0 0 1px rgba(3, 105, 161, 0.12) inset;
}
50% {
box-shadow:
0 10px 32px rgba(2, 6, 23, 0.12),
0 0 18px -4px var(--psg-bloom),
0 0 0 1px rgba(3, 105, 161, 0.2) inset;
}
}
#section-tools .psg-mini-demo__chrome {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
background: rgba(0, 0, 0, 0.35);
border-bottom: 1px solid var(--psg-line);
}
body:not(.dark) #section-tools .psg-mini-demo__chrome {
background: rgba(241, 245, 249, 0.9);
}
#section-tools .psg-mini-demo__dots::before {
content: "";
display: flex;
gap: 0.2rem;
}
#section-tools .psg-mini-demo__dots {
width: 2.6rem;
height: 0.5rem;
background: radial-gradient(circle, #f87171 0.2rem, transparent 0.22rem) 0 0 / 0.7rem
0.5rem,
radial-gradient(circle, #facc15 0.2rem, transparent 0.22rem) 0.75rem 0 / 0.7rem
0.5rem,
radial-gradient(circle, #4ade80 0.2rem, transparent 0.22rem) 1.5rem 0 / 0.7rem
0.5rem;
background-repeat: no-repeat;
}
#section-tools .psg-mini-demo__title {
font-size: 0.7rem;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: var(--pw-h-eyebrow, #90caf9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.dark) #section-tools .psg-mini-demo__title {
color: #0369a1;
}
#section-tools .psg-mini-demo__panes {
display: grid;
grid-template-columns: 1fr 1fr;
flex: 1;
min-height: 0;
}
#section-tools .psg-mini-demo__panes--sql {
grid-template-columns: 1fr 1fr;
}
#section-tools .psg-mini-demo__code {
position: relative;
margin: 0;
padding: 0.5rem 0.45rem 0.6rem;
font-size: 0.58rem;
line-height: 1.45;
border-right: 1px solid var(--psg-line);
background: rgba(0, 0, 0, 0.25);
color: var(--psg-mini-ink);
overflow: auto;
}
#section-tools .psg-pair:hover .psg-mini-demo__code::after {
content: "";
position: absolute;
right: 0.42rem;
bottom: 0.45rem;
width: 2px;
height: 0.7em;
background: var(--pw-h-eyebrow, #90caf9);
box-shadow: 0 0 8px var(--psg-bloom);
border-radius: 1px;
animation: psg-mini-caret 1.1s step-end infinite;
}
body:not(.dark) #section-tools .psg-pair:hover .psg-mini-demo__code::after {
background: #0284c7;
}
@keyframes psg-mini-caret {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
body:not(.dark) #section-tools .psg-mini-demo__code {
background: rgba(248, 250, 252, 0.8);
}
#section-tools .psg-mini-demo__code pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
#section-tools .psg-mkw {
color: var(--pw-h-title-row, #64b5f6);
}
body:not(.dark) #section-tools .psg-mkw {
color: #0369a1;
}
#section-tools .psg-mstr {
color: #93c5fd;
}
body:not(.dark) #section-tools .psg-mstr {
color: #0ea5e9;
}
#section-tools .psg-mfn {
color: #cbd5e1;
}
body:not(.dark) #section-tools .psg-mfn {
color: #475569;
}
#section-tools .psg-mty {
color: var(--pw-h-eyebrow, #90caf9);
}
#section-tools .psg-mini-demo__view {
display: flex;
flex-direction: column;
min-width: 0;
background: rgba(0, 0, 0, 0.2);
}
body:not(.dark) #section-tools .psg-mini-demo__view {
background: #fff;
}
#section-tools .psg-mini-demo__view--ts {
justify-content: flex-start;
}
#section-tools .psg-mini-demo__urlbar {
font-size: 0.55rem;
padding: 0.2rem 0.35rem;
border-bottom: 1px solid var(--psg-line);
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-mini-demo__urlbar {
color: #0284c7;
}
#section-tools .psg-mini-demo__browser {
flex: 1;
min-height: 4rem;
padding: 0.4rem;
}
#section-tools .psg-mini-demo__mockui {
height: 100%;
border-radius: 4px;
background: linear-gradient(180deg, rgba(100, 181, 246, 0.15) 0%, rgba(2, 6, 23, 0.5) 100%);
border: 1px solid var(--psg-line);
}
#section-tools .psg-mini-demo__conhead {
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.2rem 0.35rem;
border-top: 1px solid var(--psg-line);
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-mini-demo__conhead {
color: #0369a1;
}
#section-tools .psg-mini-demo__con {
margin: 0;
padding: 0.4rem 0.45rem 0.5rem;
font-size: 0.58rem;
line-height: 1.5;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
white-space: pre-wrap;
word-break: break-word;
color: #cbd5e1;
}
body:not(.dark) #section-tools .psg-mini-demo__con {
color: #334155;
}
#section-tools .psg-mini-demo__con--log {
flex: 1;
}
#section-tools .psg-ok {
color: #4ade80;
}
#section-tools .psg-mini-demo__stages {
display: flex;
gap: 0.4rem;
padding: 0.5rem 0.5rem 0.35rem;
flex-wrap: wrap;
}
#section-tools .psg-stage {
font-size: 0.62rem;
font-weight: 600;
padding: 0.2rem 0.45rem;
border-radius: 6px;
border: 1px solid var(--psg-line);
color: var(--psg-mini-ink);
}
#section-tools .psg-stage--ok {
background: rgba(34, 197, 94, 0.12);
}
#section-tools .psg-stage--run {
background: rgba(100, 181, 246, 0.15);
color: var(--pw-h-title-row, #64b5f6);
}
#section-tools .psg-pair[data-tools-pair="jenkins"]:hover .psg-stage {
animation: psg-pipe-pulse 1.25s ease-in-out infinite;
}
#section-tools .psg-pair[data-tools-pair="jenkins"]:hover .psg-stage:nth-child(1) {
animation-delay: 0s;
}
#section-tools .psg-pair[data-tools-pair="jenkins"]:hover .psg-stage:nth-child(2) {
animation-delay: 0.12s;
}
#section-tools .psg-pair[data-tools-pair="jenkins"]:hover .psg-stage:nth-child(3) {
animation-delay: 0.24s;
}
@keyframes psg-pipe-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.12);
border-color: var(--psg-line);
}
50% {
box-shadow: 0 0 18px 1px var(--psg-bloom);
border-color: rgba(100, 181, 246, 0.45);
}
}
#section-tools .psg-pair:hover .psg-mini-demo__title {
text-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
body:not(.dark) #section-tools .psg-pair:hover .psg-mini-demo__title {
text-shadow: 0 0 10px rgba(3, 105, 161, 0.22);
}
@media (prefers-reduced-motion: reduce) {
#section-tools .psg-pair,
#section-tools .psg-skill-card,
#section-tools .psg-mini-demo {
transition: none;
}
#section-tools .psg-mini-demo {
animation: none;
}
#section-tools .psg-pair:hover .psg-skill-card,
#section-tools .psg-pair:hover .psg-mini-demo {
transform: none;
}
#section-tools .tools-pairs--lab .psg-pair,
#section-tools .tools-pairs--lab .psg-pair.psg-pair--in {
opacity: 1;
transform: none;
}
#section-tools .psg-pair:hover .psg-mini-demo__code::after,
#section-tools .psg-pair[data-tools-pair="jenkins"]:hover .psg-stage {
animation: none;
}
#section-tools .psg-mini-demo__open {
animation: none !important;
}
}
#section-tools .psg-mini-sql-table-wrap {
padding: 0.4rem 0.45rem 0.5rem;
overflow: auto;
}
#section-tools .psg-mini-sql-table {
width: 100%;
font-size: 0.58rem;
border-collapse: collapse;
color: var(--psg-mini-ink);
}
#section-tools .psg-mini-sql-table th,
#section-tools .psg-mini-sql-table td {
border: 1px solid var(--psg-line);
padding: 0.2rem 0.35rem;
}
#section-tools .psg-mini-sql-table th {
background: rgba(100, 181, 246, 0.12);
color: var(--pw-h-eyebrow, #90caf9);
}
#section-tools .psg-mini-sql-meta {
margin: 0.4rem 0 0;
font-size: 0.55rem;
color: #94a3b8;
}
body:not(.dark) #section-tools .psg-mini-sql-meta {
color: #64748b;
}
#section-tools .psg-mini-demo__pm {
display: grid;
grid-template-columns: 1fr 1fr;
flex: 1;
min-height: 0;
}
#section-tools .psg-pm-req {
padding: 0.5rem 0.45rem;
border-right: 1px solid var(--psg-line);
}
#section-tools .psg-pm-method {
display: inline-block;
font-size: 0.55rem;
font-weight: 800;
padding: 0.1rem 0.35rem;
border-radius: 4px;
background: rgba(16, 185, 129, 0.25);
color: #6ee7b7;
}
#section-tools .psg-pm-url {
margin-top: 0.4rem;
font-size: 0.58rem;
font-family: ui-monospace, monospace;
color: var(--pw-h-title-row, #64b5f6);
word-break: break-all;
}
#section-tools .psg-pm-resp {
padding: 0.4rem 0.45rem;
}
#section-tools .psg-pm-h {
font-size: 0.58rem;
font-weight: 600;
color: var(--pw-h-eyebrow, #90caf9);
margin-bottom: 0.35rem;
}
#section-tools .psg-pm-resp pre {
margin: 0;
font-size: 0.55rem;
line-height: 1.4;
white-space: pre-wrap;
color: #cbd5e1;
}
#section-tools .psg-git-flow {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.6rem 0.25rem;
}
#section-tools .psg-git-node {
font-size: 0.62rem;
font-weight: 700;
padding: 0.2rem 0.4rem;
border-radius: 6px;
border: 1px solid var(--psg-line);
color: var(--pw-h-title-row, #64b5f6);
background: rgba(100, 181, 246, 0.1);
}
#section-tools .psg-git-node--feat {
color: var(--pw-h-eyebrow, #90caf9);
}
#section-tools .psg-git-line {
flex: 0 0 1.5rem;
height: 2px;
background: var(--psg-line);
}
#section-tools .psg-mgh {
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-mgh {
color: #0284c7;
}
#section-tools .psg-jira-board {
display: flex;
gap: 0.4rem;
padding: 0.4rem 0.45rem 0.3rem;
flex: 1;
min-height: 0;
align-items: stretch;
}
#section-tools .psg-jira-lane {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
#section-tools .psg-jira-lane__h {
font-size: 0.52rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-jira-lane__h {
color: #0284c7;
}
#section-tools .psg-jira-card {
font-size: 0.58rem;
font-weight: 600;
padding: 0.3rem 0.35rem;
border-radius: 6px;
border: 1px solid var(--psg-line);
color: #cbd5e1;
background: rgba(100, 181, 246, 0.08);
}
body:not(.dark) #section-tools .psg-jira-card {
color: #334155;
background: rgba(3, 105, 161, 0.06);
}
#section-tools .psg-jira-card--act {
border-color: rgba(100, 181, 246, 0.55);
color: var(--pw-h-title-row, #64b5f6);
box-shadow: 0 0 10px -2px var(--psg-bloom);
}
body:not(.dark) #section-tools .psg-jira-card--act {
color: #0369a1;
}
#section-tools .psg-jira-card--dim {
opacity: 0.6;
}
#section-tools .psg-jira-activity {
flex: 0 0 auto;
font-size: 0.55rem;
}
#section-tools .psg-cypress-body {
padding: 0.45rem 0.5rem 0.35rem;
font-size: 0.58rem;
line-height: 1.45;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #cbd5e1;
background: rgba(0, 0, 0, 0.2);
}
body:not(.dark) #section-tools .psg-cypress-body {
color: #334155;
background: #f1f5f9;
}
#section-tools .psg-cypress-gt {
color: var(--pw-h-eyebrow, #90caf9);
}
body:not(.dark) #section-tools .psg-cypress-gt {
color: #0284c7;
}
#section-tools .psg-cypress-ok,
#section-tools .psg-cypress-pass {
color: #4ade80;
}
@keyframes psg-cta-pulse {
0%,
100% {
box-shadow:
0 3px 14px rgba(13, 71, 161, 0.45),
0 0 22px -4px var(--psg-bloom, rgba(56, 189, 248, 0.4)),
0 0 0 1px rgba(100, 181, 246, 0.35) inset;
}
50% {
box-shadow:
0 4px 22px rgba(13, 71, 161, 0.55),
0 0 40px 0 var(--psg-bloom, rgba(56, 189, 248, 0.55)),
0 0 0 1px rgba(100, 181, 246, 0.5) inset;
}
}
#section-tools .psg-mini-demo__open {
margin: auto 0.45rem 0.45rem;
align-self: stretch;
padding: 0.5rem 0.7rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
border-radius: 10px;
border: 1px solid rgba(100, 181, 246, 0.5);
color: #fff;
cursor: pointer;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%),
var(--psg-cta-grad);
box-shadow:
0 3px 16px rgba(13, 71, 161, 0.5),
0 0 28px -2px var(--psg-bloom, rgba(56, 189, 248, 0.45)),
0 0 0 1px rgba(100, 181, 246, 0.25) inset;
transition: filter 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
@media (prefers-reduced-motion: no-preference) {
#section-tools .psg-mini-demo__open {
animation: psg-cta-pulse 4s ease-in-out infinite;
}
}
body:not(.dark) #section-tools .psg-mini-demo__open {
color: #fff;
}
#section-tools .psg-pair:hover .psg-mini-demo__open {
box-shadow:
0 4px 22px rgba(2, 132, 199, 0.35),
0 0 36px 0 var(--psg-bloom, rgba(3, 105, 161, 0.35));
}
body:not(.dark) #section-tools .psg-pair:hover .psg-mini-demo__open {
box-shadow:
0 4px 22px rgba(2, 132, 199, 0.25),
0 0 32px -2px var(--psg-bloom, rgba(3, 105, 161, 0.4));
}
#section-tools .psg-mini-demo__open:hover {
animation: none;
filter: brightness(1.08);
transform: scale(1.03);
box-shadow:
0 6px 26px rgba(13, 71, 161, 0.55),
0 0 44px 2px var(--psg-bloom, rgba(56, 189, 248, 0.55)),
0 0 0 1px rgba(100, 181, 246, 0.45) inset;
}
/* Mobile: stack tool then demo in one column (tablet+ keeps 1fr / 1.1fr) */
@media (max-width: 600px) {
#section-tools .tools-pair,
#section-tools .psg-pair {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.styled-card {
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
height: 150px;
}
.styled-card .card-text {
font-size: 12px;
padding: 8px 14px;
max-width: 90%;
}
.tools-grid:not(.psg-grid) {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 50px 15px;
max-width: 100%;
}
.styled-card-tool:not(.psg-skill-card) {
max-width: 100%;
height: 320px;
padding: 30px 25px 25px;
}
#section-tools .psg-skill-card {
min-height: 234px;
}
#section-tools .psg-mini-demo {
min-height: 216px;
}
.styled-card-tool .tool-logo {
width: 120px;
height: 120px;
}
.styled-card-tool .card-text {
font-size: 18px;
}
}
@media (max-width: 480px) {
.tools-grid:not(.psg-grid) {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Theme Toggle Button - Ultra Modern Design - Match Read More Button Colors */
.theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 15px;
width: 60px;
height: 60px;
border-radius: 18px;
/* Dark theme background - mavi tonlar */
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
border: 1.5px solid rgba(79, 195, 247, 0.3);
box-shadow:
0 4px 20px rgba(79, 195, 247, 0.5),
0 2px 8px rgba(42, 74, 111, 0.4),
0 0 0 1px rgba(79, 195, 247, 0.15) inset;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
overflow: hidden;
}
.theme-toggle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.theme-toggle:hover::before {
left: 100%;
}
.theme-toggle:hover {
/* Dark theme hover - mavi tonlar */
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%);
border-color: rgba(79, 195, 247, 0.5);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 8px 32px rgba(79, 195, 247, 0.6),
0 4px 16px rgba(42, 74, 111, 0.5),
0 0 0 1px rgba(79, 195, 247, 0.25) inset;
}
.theme-toggle:active {
transform: scale(0.98) translateY(0) rotate(0deg);
transition: all 0.2s ease;
}
.theme-icon-svg {
width: 32px;
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Stronger glow for the moon icon */
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}
.theme-toggle:hover .theme-icon-svg {
transform: translate(-50%, -50%) rotate(360deg) scale(1.15);
/* Hover'da daha parlak glow */
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}
.theme-icon-svg path,
.theme-icon-svg circle,
.theme-icon-svg line,
.theme-icon-svg g {
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.moon-icon .star,
.moon-icon .moon-crater,
.moon-icon .moon-glow {
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Moon Icon Animations */
.theme-toggle:hover .moon-main {
transform: scale(1.05);
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}
.theme-toggle:hover .moon-icon {
animation: moonFloat 3s ease-in-out infinite;
}
.theme-toggle:hover .star {
animation: starTwinkle 1.5s ease-in-out infinite;
transform-origin: center;
}
.theme-toggle:hover .star-1 {
animation-delay: 0s;
transform: translate(-1px, -1px);
}
.theme-toggle:hover .star-2 {
animation-delay: 0.2s;
transform: translate(1px, -1px);
}
.theme-toggle:hover .star-3 {
animation-delay: 0.4s;
transform: translate(-1px, 1px);
}
.theme-toggle:hover .star-4 {
animation-delay: 0.6s;
transform: translate(1px, 1px);
}
.theme-toggle:hover .star-5 {
animation-delay: 0.8s;
transform: translate(-0.5px, 1px);
}
.theme-toggle:hover .star-6 {
animation-delay: 1s;
transform: translate(1px, -0.5px);
}
.theme-toggle:hover .moon-glow {
animation: moonGlowPulse 2s ease-in-out infinite;
opacity: 0.4;
}
.theme-toggle:hover .moon-glow-outer {
animation: moonGlowPulseOuter 2.5s ease-in-out infinite;
opacity: 0.25;
}
@keyframes moonFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-3px) rotate(5deg);
}
}
@keyframes starTwinkle {
0%,
100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.3);
}
}
@keyframes moonGlowPulse {
0%,
100% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.1);
}
}
@keyframes moonGlowPulseOuter {
0%,
100% {
opacity: 0.15;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(1.15);
}
}
/* Sun Icon Animations */
.theme-toggle:hover .sun-icon line {
transform-origin: center;
animation: sunRotate 2s ease-in-out infinite;
}
@keyframes sunRotate {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
}
.moon-icon {
color: #FFF;
}
.moon-icon .moon-main {
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}
.moon-icon .star {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}
.sun-icon {
color: rgba(255, 255, 255, 0.9);
display: none;
opacity: 0;
transform: scale(0.8) rotate(-90deg);
transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.moon-icon {
display: block;
opacity: 1;
transform: scale(1) rotate(0deg);
transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.moon-icon[style*="display: none"],
.moon-icon:not([style*="display: block"])[style*="display: none"] {
opacity: 0;
transform: scale(0.8) rotate(90deg);
}
.sun-icon[style*="display: block"] {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.moon-icon path:first-child {
fill: #FFF;
stroke: #FFF;
}
.sun-icon circle {
fill: #FFD700;
stroke: #FFD700;
}
.sun-icon line {
stroke: #FFD700;
}
/* Light theme styles */
/* Light theme styles - Match Read More Button Colors */
body:not(.dark) .theme-toggle {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
border-color: rgba(129, 212, 250, 0.3);
box-shadow:
0 4px 16px rgba(129, 212, 250, 0.3),
0 2px 6px rgba(79, 195, 247, 0.2);
}
body:not(.dark) .theme-toggle:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
border-color: rgba(129, 212, 250, 0.5);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 8px 24px rgba(129, 212, 250, 0.5),
0 4px 12px rgba(79, 195, 247, 0.4);
}
body:not(.dark) .moon-icon {
color: #2c3e50;
}
body:not(.dark) .moon-icon path:first-child {
fill: #2c3e50;
stroke: #2c3e50;
}
body:not(.dark) .theme-toggle .theme-icon-svg {
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}
body:not(.dark) .theme-toggle:hover .theme-icon-svg {
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}
body:not(.dark) .sun-icon {
color: #FF8C00;
}
body:not(.dark) .sun-icon circle {
fill: #FF8C00;
stroke: #FF8C00;
}
body:not(.dark) .sun-icon line {
stroke: #FF8C00;
}
/* Pulse animation for attention - Match Read More colors */
@keyframes theme-toggle-pulse-dark {
0%,
100% {
box-shadow:
0 4px 20px rgba(79, 195, 247, 0.5),
0 2px 8px rgba(42, 74, 111, 0.4);
}
50% {
box-shadow:
0 8px 32px rgba(79, 195, 247, 0.6),
0 4px 16px rgba(42, 74, 111, 0.5);
}
}
@keyframes theme-toggle-pulse-light {
0%,
100% {
box-shadow:
0 4px 16px rgba(129, 212, 250, 0.3),
0 2px 6px rgba(79, 195, 247, 0.2);
}
50% {
box-shadow:
0 8px 24px rgba(129, 212, 250, 0.5),
0 4px 12px rgba(79, 195, 247, 0.4);
}
}
.theme-toggle:focus {
outline: none;
}
body.dark .theme-toggle:focus {
animation: theme-toggle-pulse-dark 2s ease-in-out infinite;
}
@keyframes theme-toggle-pulse-dark {
0%,
100% {
box-shadow:
0 4px 20px rgba(79, 195, 247, 0.5),
0 2px 8px rgba(42, 74, 111, 0.4);
}
50% {
box-shadow:
0 8px 32px rgba(79, 195, 247, 0.6),
0 4px 16px rgba(42, 74, 111, 0.5);
}
}
body:not(.dark) .theme-toggle:focus {
animation: theme-toggle-pulse-light 2s ease-in-out infinite;
}
@keyframes theme-toggle-pulse-light {
0%,
100% {
box-shadow:
0 4px 16px rgba(129, 212, 250, 0.3),
0 2px 6px rgba(79, 195, 247, 0.2);
}
50% {
box-shadow:
0 8px 24px rgba(129, 212, 250, 0.5),
0 4px 12px rgba(79, 195, 247, 0.4);
}
}
/* Tablet & mobile: theme + scroll + chatbot as bottom FABs (wide desktop keeps toggle in header) */
@media (max-width: 1199px) {
/* Equal circles + equal gaps (right → left: chatbot, scroll, theme) */
:root {
--fab-edge: 15px;
--fab-size: 50px;
--fab-gap: 10px;
}
#theme-toggle,
#gotoTop,
.chatbot-toggle {
box-sizing: border-box !important;
width: var(--fab-size) !important;
height: var(--fab-size) !important;
min-width: var(--fab-size) !important;
min-height: var(--fab-size) !important;
max-width: var(--fab-size) !important;
max-height: var(--fab-size) !important;
flex-shrink: 0 !important;
}
#theme-toggle {
position: fixed !important;
bottom: 20px !important;
right: calc(var(--fab-edge) + 2 * (var(--fab-size) + var(--fab-gap))) !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 9997 !important;
border-radius: 50% !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
vertical-align: top !important;
}
#theme-toggle .theme-icon-svg {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 24px !important;
height: 24px !important;
transform: translate(-50%, -50%) !important;
}
#gotoTop {
position: fixed !important;
z-index: 9998 !important;
bottom: 20px !important;
right: calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap)) !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1 !important;
font-size: 20px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
}
#gotoTop::before {
line-height: 1 !important;
}
#gotoTop i {
font-size: 20px !important;
}
.chatbot-container {
position: fixed !important;
bottom: 20px !important;
right: var(--fab-edge) !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 9999 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: flex-end !important;
}
.chatbot-toggle {
font-size: 20px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
cursor: pointer !important;
color: #fff !important;
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%) !important;
box-shadow:
0 4px 16px rgba(129, 212, 250, 0.3),
0 2px 6px rgba(79, 195, 247, 0.2) !important;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}
body.dark .chatbot-toggle {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%) !important;
box-shadow:
0 4px 20px rgba(79, 195, 247, 0.5),
0 2px 8px rgba(42, 74, 111, 0.4),
0 0 0 1px rgba(79, 195, 247, 0.15) !important;
}
.chatbot-toggle i {
color: #fff !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* Avoid hover scale pushing into neighbors (base rules use 1.1) */
#gotoTop:hover,
.chatbot-toggle:hover {
transform: scale(1.05) !important;
}
.chatbot-toggle:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%) !important;
box-shadow:
0 8px 24px rgba(129, 212, 250, 0.5),
0 4px 12px rgba(79, 195, 247, 0.4) !important;
}
body.dark .chatbot-toggle:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%) !important;
box-shadow:
0 8px 32px rgba(79, 195, 247, 0.6),
0 4px 16px rgba(42, 74, 111, 0.5),
0 0 0 1px rgba(79, 195, 247, 0.25) !important;
}
.theme-toggle:hover {
transform: translateY(-2px) scale(1.05) !important;
}
.theme-toggle:hover .theme-icon-svg {
transform: translate(-50%, -50%) scale(1.08) rotate(360deg) !important;
}
/*
* Keep FABs above #side-panel (z-index 399) / overlay — fixes theme looking “gone” when the panel opens.
*/
body.side-panel-open #theme-toggle {
z-index: 10050 !important;
}
body.side-panel-open #gotoTop {
z-index: 10051 !important;
}
body.side-panel-open .chatbot-container {
z-index: 10052 !important;
}
}
/*
* QA Command Panel is ~340px wide (max 92vw); FABs sit ~15–135px from the right, i.e. under the open drawer on tablets.
* Shift the stack left by the drawer width (skip on very narrow widths where calc would push off-screen).
*/
@media (max-width: 1199px) and (min-width: 520px) {
body.side-panel-open #theme-toggle {
right: calc(min(92vw, 340px) + var(--fab-edge) + 2 * (var(--fab-size) + var(--fab-gap))) !important;
}
body.side-panel-open #gotoTop {
right: calc(min(92vw, 340px) + var(--fab-edge) + var(--fab-size) + var(--fab-gap)) !important;
}
body.side-panel-open .chatbot-container {
right: calc(min(92vw, 340px) + var(--fab-edge)) !important;
}
}
/* HSN AKD NOTICE - Ultra Modern Design - Match Read More Button Colors */
.hsnakd-notice-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 24px;
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
border: none;
border-radius: 50px;
color: #FFFFFF;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.3px;
text-transform: uppercase;
text-decoration: none;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
cursor: pointer;
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.hsnakd-notice-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.hsnakd-notice-button:hover::before {
left: 100%;
}
.hsnakd-notice-button:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
transform: rotate(270deg) translateX(-8px) scale(1.05);
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
.hsnakd-notice-button:hover::before {
transform: rotate(225deg);
}
.hsnakd-notice-button:hover::after {
width: 300%;
height: 300%;
}
.hsnakd-notice-button:active {
transform: rotate(270deg) translateX(-4px) scale(0.98);
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.35), 0 2px 6px rgba(79, 195, 247, 0.25);
transition: all 0.2s ease;
}
.hsnakd-notice-button .notice-text {
position: relative;
z-index: 2;
color: #FFFFFF !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hsnakd-notice-button .notice-icon {
position: relative;
z-index: 2;
font-size: 18px;
color: #FFFFFF !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hsnakd-notice-button:hover .notice-text {
transform: scale(1.05);
color: #FFFFFF !important;
}
.hsnakd-notice-button:hover .notice-icon {
transform: scale(1.1);
color: #FFFFFF !important;
}
/* Light theme styles for notice button - Match Read More */
body:not(.dark) .hsnakd-notice-button {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
}
body:not(.dark) .hsnakd-notice-button:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
/* Dark theme styles for notice button - Match Read More */
body.dark .hsnakd-notice-button {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.15);
}
body.dark .hsnakd-notice-button:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%);
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.25);
}
/* Pulse animation for notice button - Match Read More colors */
@keyframes notice-pulse {
0%,
100% {
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
}
50% {
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
}
body.dark .hsnakd-notice-button:focus {
animation: notice-pulse-dark 2s ease-in-out infinite;
}
@keyframes notice-pulse-dark {
0%,
100% {
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4);
}
50% {
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5);
}
}
.hsnakd-notice-button:focus {
outline: none;
animation: notice-pulse 2s ease-in-out infinite;
}
/* Responsive iframe popup sizing */
@media (max-width: 768px) {
.mfp-iframe-holder .mfp-content {
max-width: calc(100vw - 20px) !important;
}
.mfp-iframe-scaler {
padding-top: 100% !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.mfp-iframe-holder .mfp-content {
max-width: 700px !important;
}
}
@media (min-width: 1025px) {
.mfp-iframe-holder .mfp-content {
max-width: 800px !important;
}
}
/* —— Portfolio cinematic intro (native video overlay) —— */
.pw-intro-overlay {
--pw-intro-glow: rgba(56, 189, 248, 0.22);
--pw-intro-glow-strong: rgba(100, 181, 246, 0.45);
--pw-intro-border: rgba(144, 202, 249, 0.38);
--pw-intro-skip: #90caf9;
position: fixed;
inset: 0;
z-index: 1000000;
display: flex;
align-items: center;
justify-content: center;
padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
box-sizing: border-box;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s step-end;
}
.pw-intro-overlay.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.pw-intro-overlay.is-closing {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0.4s step-end;
}
.pw-intro-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 8, 18, 0.78);
backdrop-filter: blur(28px) saturate(1.15);
-webkit-backdrop-filter: blur(28px) saturate(1.15);
}
.pw-intro-overlay__close {
position: absolute;
top: max(18px, env(safe-area-inset-top, 0px));
right: max(18px, env(safe-area-inset-right, 0px));
z-index: 5;
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: rgba(255, 255, 255, 0.92);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.pw-intro-overlay__close:hover {
background: rgba(100, 181, 246, 0.18);
border-color: rgba(144, 202, 249, 0.55);
box-shadow: 0 0 28px var(--pw-intro-glow-strong), 0 4px 24px rgba(0, 0, 0, 0.4);
}
.pw-intro-overlay__close:focus-visible {
outline: 2px solid var(--pw-intro-skip);
outline-offset: 3px;
}
.pw-intro-overlay__skip {
position: absolute;
bottom: max(22px, env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 5;
padding: 10px 18px;
border: none;
background: transparent;
color: var(--pw-intro-skip);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
opacity: 0.88;
transition: opacity 0.2s ease, text-shadow 0.2s ease;
}
.pw-intro-overlay__skip:hover {
opacity: 1;
text-shadow: 0 0 20px var(--pw-intro-glow-strong);
}
.pw-intro-overlay__skip:focus-visible {
outline: 2px solid var(--pw-intro-skip);
outline-offset: 4px;
border-radius: 4px;
}
.pw-intro-overlay__skip[hidden] {
display: none !important;
}
.pw-intro-overlay__stage {
position: relative;
z-index: 2;
width: 100%;
max-width: 960px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.pw-intro-overlay__glow {
pointer-events: auto;
width: min(960px, calc(100vw - 40px));
padding: 3px;
border-radius: 16px;
background: linear-gradient(145deg, rgba(56, 189, 248, 0.35), rgba(25, 118, 210, 0.15));
box-shadow: 0 0 0 1px var(--pw-intro-border), 0 0 72px var(--pw-intro-glow),
0 32px 64px rgba(0, 0, 0, 0.55);
transform: scale(0.96);
opacity: 0;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.pw-intro-overlay.is-open .pw-intro-overlay__glow {
transform: scale(1);
opacity: 1;
}
.pw-intro-overlay.is-closing .pw-intro-overlay__glow {
transform: scale(0.96);
opacity: 0;
transition: transform 0.4s ease, opacity 0.35s ease;
}
.pw-intro-overlay__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: #020810;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.pw-intro-overlay__video {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
background: #000;
}
.pw-intro-overlay__loading {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
pointer-events: none;
}
.pw-intro-overlay__loading.is-visible {
display: flex;
}
.pw-intro-overlay__loading::after {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(144, 202, 249, 0.25);
border-top-color: #90caf9;
animation: pw-intro-spin 0.75s linear infinite;
}
@keyframes pw-intro-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pw-intro-overlay,
.pw-intro-overlay__glow {
transition-duration: 0.01ms !important;
}
.pw-intro-overlay__loading::after {
animation: none;
border-top-color: rgba(144, 202, 249, 0.6);
}
}
/* LEFT STICKY SOCIAL BAR: always vertically centered in viewport (independent of page layout) */
.si-sticky {
position: fixed;
/* Vertically centered, slightly lower to account for header */
top: calc(50% + 250px);
left: 18px !important;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 14px;
z-index: 999999;
padding: 6px 0;
max-height: calc(100vh - 24px);
overflow: auto;
overflow-x: visible;
overscroll-behavior: contain;
width: auto !important;
}
/* Prevent parent containers from clipping fixed elements */
body,
#wrapper,
.content-wrap {
overflow-x: visible !important;
}
/* Hide scrollbar (optional) */
.si-sticky::-webkit-scrollbar {
width: 0;
height: 0;
}
.si-sticky {
scrollbar-width: none;
}
/* Icon tiles (left sticky) */
.si-sticky .social-icon {
width: 52px !important;
height: 52px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
border-radius: 12px !important;
background: #3a3a3a !important;
border: 2px solid rgba(255, 255, 255, 0.55) !important;
position: relative;
overflow: hidden;
margin-left: 0 !important;
box-sizing: border-box;
line-height: 1;
transform: translateY(0) scale(1);
transition: transform .22s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
/* Light theme styles for social icons */
body:not(.dark) .si-sticky .social-icon {
background: #f5f5f5 !important;
border: 2px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
body:not(.dark) .si-sticky .social-icon i {
color: #333 !important;
}
body:not(.dark) .si-sticky .social-icon:hover {
border-color: rgba(0, 0, 0, 0.4) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}
body:not(.dark) .si-sticky .social-icon:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .si-istqb {
background: #f5f5f5 !important;
}
body:not(.dark) .si-sticky .si-istqb i {
color: #333 !important;
}
body:not(.dark) .si-sticky .si-istqb:hover {
background: #003764 !important;
/* ISTQB brand blue */
}
body:not(.dark) .si-sticky .si-istqb:hover i {
color: #ffffff !important;
}
/* Brand hover backgrounds for light theme (left sticky) - higher specificity */
body:not(.dark) .si-sticky .social-icon.si-linkedin:hover {
background: #0077B5 !important;
border-color: #0077B5 !important;
}
body:not(.dark) .si-sticky .social-icon.si-linkedin:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .social-icon.si-medium:hover {
background: #F24E1E !important;
border-color: #F24E1E !important;
}
body:not(.dark) .si-sticky .social-icon.si-medium:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .social-icon.si-github:hover {
background: #000000 !important;
border-color: #000000 !important;
}
body:not(.dark) .si-sticky .social-icon.si-github:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .social-icon.si-x:hover {
background: #111111 !important;
border-color: #111111 !important;
}
body:not(.dark) .si-sticky .social-icon.si-x:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .social-icon.si-instagram:hover {
background: #E1306C !important;
border-color: #E1306C !important;
}
body:not(.dark) .si-sticky .social-icon.si-instagram:hover i {
color: #ffffff !important;
}
body:not(.dark) .si-sticky .social-icon.si-email:hover {
background: #FFD700 !important;
border-color: #FFD700 !important;
}
body:not(.dark) .si-sticky .social-icon.si-email:hover i {
color: #ffffff !important;
}
/* Make sure Canvas pseudo layers never cover the icon */
.si-sticky .social-icon:before,
.si-sticky .social-icon:after {
display: none !important;
content: none !important;
}
.si-sticky .social-icon i {
font-size: 22px;
line-height: 1;
color: #ffffff;
opacity: 1 !important;
/* Kill Canvas default hover slide (top/transform) */
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2;
display: block;
transition: color .25s ease !important;
}
/* Hide Canvas duplicate icon if template outputs + */
.si-sticky .social-icon i+i {
display: none !important;
}
/* Hover: brand background, icon stays visible */
.si-sticky .social-icon:hover {
/* No vertical movement (prevents clipping at top/bottom) */
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
border-color: rgba(255, 255, 255, 0.85) !important;
color: #ffffff !important;
}
.si-sticky .social-icon:hover i {
color: #ffffff !important;
transform: none !important;
/* icon stays static */
}
/* Brand hover backgrounds (left sticky) */
.si-sticky .si-linkedin:hover {
background: #0077B5 !important;
}
.si-sticky .si-medium:hover {
background: #F24E1E !important;
}
.si-sticky .si-github:hover {
background: #000000 !important;
}
.si-sticky .si-github:hover i {
color: #ffffff !important;
}
.si-sticky .si-x:hover {
background: #111111 !important;
}
.si-sticky .si-x:hover i {
color: #ffffff !important;
}
.si-sticky .si-instagram:hover {
background: #E1306C !important;
}
.si-sticky .si-email:hover {
background: #FFD700 !important;
}
/* ISTQB tile uses the real logo image on a white background */
/* ISTQB tile supports either FA icon or logo image */
.si-sticky .si-istqb {
background: #3a3a3a !important;
}
.si-sticky .si-istqb:hover {
background: #003764 !important;
/* ISTQB brand blue */
border-color: #ffffff !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.si-sticky .si-istqb i {
color: #ffffff !important;
/* keep icon white */
}
.si-sticky .si-istqb:hover i {
color: #ffffff !important;
/* keep icon white on hover */
}
/* Global ISTQB icon color lock (all sections) */
.social-icon.si-istqb i,
.social-icon.si-istqb svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
.social-icon.si-istqb:hover i,
.social-icon.si-istqb:hover svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* Light theme: ISTQB should be dark gray like other icons */
body:not(.dark) .social-icon.si-istqb i,
body:not(.dark) .social-icon.si-istqb svg {
color: #333 !important;
fill: #333 !important;
stroke: #333 !important;
}
body:not(.dark) .social-icon.si-istqb:hover i,
body:not(.dark) .social-icon.si-istqb:hover svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
.si-sticky .si-istqb .istqb-logo {
width: 36px;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
padding: 0;
}
/* ISTQB SVG logo styling - make it exactly like other icons */
.si-sticky .si-istqb img.istqb-logo,
#side-panel .qa-cmd-connect .si-istqb img.istqb-logo,
#footer .si-istqb img.istqb-logo {
width: 36px;
height: auto;
max-height: 28px;
object-fit: contain;
}
/* ISTQB logo image: match icon tone per theme */
body.dark .si-sticky .si-istqb img.istqb-logo,
body.dark #side-panel .qa-cmd-connect .si-istqb img.istqb-logo,
body.dark #footer .si-istqb img.istqb-logo {
filter: brightness(0) invert(1) brightness(0.86) !important; /* soft gray */
opacity: 1 !important;
}
body:not(.dark) .si-sticky .si-istqb img.istqb-logo,
body:not(.dark) #side-panel .qa-cmd-connect .si-istqb img.istqb-logo,
body:not(.dark) #footer .si-istqb img.istqb-logo {
filter: grayscale(1) brightness(0.22) contrast(1.25) !important; /* dark gray */
opacity: 1 !important;
}
/* Hover: white logo on ISTQB blue — selectors must match base rules or :hover loses */
body.dark .si-sticky .si-istqb:hover img.istqb-logo,
body.dark #side-panel .qa-cmd-connect .si-istqb:hover img.istqb-logo,
body.dark #footer .si-istqb:hover img.istqb-logo,
body:not(.dark) .si-sticky .si-istqb:hover img.istqb-logo,
body:not(.dark) #side-panel .qa-cmd-connect .si-istqb:hover img.istqb-logo,
body:not(.dark) #footer .si-istqb:hover img.istqb-logo {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Theme-safe QA Practice and ISTQB marks. */
.si-sticky .si-lab .bug-lab-icon,
#footer .si-lab .bug-lab-icon {
color: #ffffff;
}
body:not(.dark) .si-sticky .si-lab .bug-lab-icon,
body:not(.dark) #footer .si-lab .bug-lab-icon {
color: #333333;
}
.si-sticky .si-lab .bug-lab-icon g,
#footer .si-lab .bug-lab-icon g {
stroke: currentColor !important;
}
.si-sticky .si-lab .bug-lab-icon circle,
#footer .si-lab .bug-lab-icon circle {
fill: currentColor !important;
}
/* The command panel stays dark in both themes, so ISTQB must remain white there. */
#side-panel.qa-cmd-panel .qa-cmd-connect .si-istqb img.istqb-logo,
#side-panel.qa-cmd-panel .qa-cmd-connect .si-istqb:hover img.istqb-logo {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Social Icons Slide-In Animation */
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.si-sticky .social-icon {
will-change: transform, opacity;
}
/* Subtle hover glow for all social icons */
@keyframes hover-glow {
0% {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
50% {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.50);
}
100% {
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
}
.social-icon:hover {
animation: hover-glow 0.6s ease;
transform: scale(1.05);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.50);
}
/* Delay each icon slightly */
.si-sticky .social-icon:nth-child(1) {
animation-delay: 1.00s;
}
.si-sticky .social-icon:nth-child(2) {
animation-delay: 1.20s;
}
.si-sticky .social-icon:nth-child(3) {
animation-delay: 1.40s;
}
.si-sticky .social-icon:nth-child(4) {
animation-delay: 1.60s;
}
.si-sticky .social-icon:nth-child(5) {
animation-delay: 1.80s;
}
.si-sticky .social-icon:nth-child(6) {
animation-delay: 2.00s;
}
.si-sticky .social-icon:nth-child(7) {
animation-delay: 2.20s;
}
/* Hide left sticky social bar on mobile devices */
@media (max-width: 991px) {
.si-sticky {
display: none !important;
}
}
/* QA Command Panel (right slide-out) */
.qa-hash-anchor {
display: block;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
scroll-margin-top: 96px;
}
#side-panel.qa-cmd-panel {
--qcp-accent: #64b5f6;
--qcp-eyebrow: #90caf9;
--qcp-border: rgba(100, 181, 246, 0.38);
--qcp-glass: rgba(10, 14, 26, 0.88);
--qcp-text: rgba(248, 250, 252, 0.94);
--qcp-muted: rgba(148, 163, 184, 0.95);
--qcp-hover-glow: rgba(100, 181, 246, 0.35);
width: min(92vw, 340px);
right: calc(-1 * min(92vw, 340px));
background: transparent;
overflow: hidden;
transition: right 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
body:not(.dark) #side-panel.qa-cmd-panel {
--qcp-accent: #38bdf8;
--qcp-eyebrow: #7dd3fc;
--qcp-border: rgba(56, 189, 248, 0.42);
--qcp-glass: rgba(15, 23, 42, 0.93);
}
body.side-panel-open #side-panel.qa-cmd-panel {
right: 0;
}
body.side-push-panel.side-panel-open.stretched #wrapper,
body.side-push-panel.side-panel-open.stretched #header.sticky-header .container {
right: min(92vw, 340px) !important;
}
body.side-push-panel.side-panel-open.stretched.device-xl .slider-parallax-inner,
body.side-push-panel.side-panel-open.stretched.device-lg .slider-parallax-inner {
left: calc(-1 * min(92vw, 340px)) !important;
}
#side-panel.qa-cmd-panel #side-panel-trigger-close {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
}
#side-panel.qa-cmd-panel #side-panel-trigger-close a {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--qcp-border);
background: rgba(15, 23, 42, 0.65);
color: var(--qcp-accent);
transition: box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
#side-panel.qa-cmd-panel #side-panel-trigger-close a:hover,
#side-panel.qa-cmd-panel #side-panel-trigger-close a:focus-visible {
box-shadow: 0 0 18px var(--qcp-hover-glow);
outline: none;
border-color: var(--qcp-accent);
}
#side-panel.qa-cmd-panel .side-panel-wrap {
width: 100%;
max-width: none;
padding: 56px 16px 22px 18px;
box-sizing: border-box;
background: var(--qcp-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-left: 1px solid var(--qcp-border);
box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
#side-panel.qa-cmd-panel .side-panel-wrap::-webkit-scrollbar {
width: 6px;
}
#side-panel.qa-cmd-panel .side-panel-wrap::-webkit-scrollbar-thumb {
background: rgba(100, 181, 246, 0.35);
border-radius: 6px;
}
.qa-cmd-inner {
display: flex;
flex-direction: column;
gap: 26px;
}
.qa-cmd-header {
padding-bottom: 14px;
border-bottom: 1px solid rgba(100, 181, 246, 0.15);
}
.qa-cmd-title {
margin: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--qcp-accent);
line-height: 1.25;
}
.qa-cmd-sub {
margin: 8px 0 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--qcp-muted);
}
.qa-cmd-id {
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(100, 181, 246, 0.22);
background: rgba(15, 23, 42, 0.45);
}
.qa-cmd-name {
margin: 0;
font-size: 0.9375rem;
font-weight: 700;
color: var(--qcp-text);
}
.qa-cmd-role {
margin: 4px 0 0;
font-size: 0.8125rem;
color: var(--qcp-eyebrow);
}
.qa-cmd-id-skills {
margin: 8px 0 0;
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--qcp-muted);
line-height: 1.45;
}
.qa-cmd-section-label {
margin: 0 0 10px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
color: rgba(148, 163, 184, 0.85);
text-transform: uppercase;
}
.qa-cmd-actions {
display: flex;
flex-direction: column;
gap: 11px;
}
.qa-cmd-action {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
color: var(--qcp-text);
border: 1px solid var(--qcp-border);
background: rgba(15, 23, 42, 0.55);
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, background 0.22s ease;
}
.qa-cmd-action:hover {
border-color: var(--qcp-accent);
box-shadow: 0 0 22px var(--qcp-hover-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
.qa-cmd-action:focus-visible {
outline: 2px solid var(--qcp-accent);
outline-offset: 2px;
}
.qa-cmd-action-ico {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 9px;
background: linear-gradient(135deg, rgba(25, 118, 210, 0.35), rgba(13, 71, 161, 0.45));
color: var(--qcp-eyebrow);
font-size: 1rem;
}
body:not(.dark) #side-panel.qa-cmd-panel .qa-cmd-action-ico {
background: linear-gradient(135deg, rgba(3, 105, 161, 0.35), rgba(14, 165, 233, 0.4));
}
.qa-cmd-action-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.qa-cmd-action-label {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
}
.qa-cmd-action-hint {
font-size: 0.6875rem;
color: var(--qcp-muted);
line-height: 1.2;
}
.qa-cmd-action-arr {
flex: 0 0 auto;
color: var(--qcp-eyebrow);
font-size: 0.85rem;
opacity: 0.85;
}
.qa-cmd-quick {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.qa-cmd-quick a {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 10px;
font-size: 0.72rem;
font-weight: 600;
text-align: center;
line-height: 1.25;
text-decoration: none;
color: var(--qcp-text);
border-radius: 9px;
border: 1px solid rgba(100, 181, 246, 0.28);
background: rgba(15, 23, 42, 0.4);
transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.qa-cmd-quick a:hover {
border-color: var(--qcp-accent);
box-shadow: 0 0 14px var(--qcp-hover-glow);
color: var(--qcp-accent);
}
.qa-cmd-quick a:focus-visible {
outline: 2px solid var(--qcp-accent);
outline-offset: 2px;
}
.qa-cmd-stack-section {
margin-top: 0;
}
.qa-cmd-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.qa-cmd-tag {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.2;
border-radius: 999px;
border: 1px solid;
background: rgba(15, 23, 42, 0.72);
transition: box-shadow 0.2s ease, transform 0.18s ease, border-color 0.2s ease;
}
.qa-cmd-tag:focus-visible {
outline: 2px solid var(--qcp-accent);
outline-offset: 2px;
}
/* Blue — portfolio accent family */
.qa-cmd-tag--blue {
color: #7dd3fc;
border-color: rgba(125, 211, 252, 0.55);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);
}
body:not(.dark) #side-panel.qa-cmd-panel .qa-cmd-tag--blue {
color: #38bdf8;
border-color: rgba(14, 165, 233, 0.55);
box-shadow: 0 0 12px rgba(14, 165, 233, 0.12);
}
.qa-cmd-tag--orange {
color: #fdba74;
border-color: rgba(251, 146, 60, 0.55);
box-shadow: 0 0 10px rgba(251, 146, 60, 0.08);
}
/* Green — tooling / pipeline (semantic, not primary accent) */
.qa-cmd-tag--green {
color: #86efac;
border-color: rgba(74, 222, 128, 0.48);
box-shadow: 0 0 10px rgba(74, 222, 128, 0.1);
}
.qa-cmd-tag--purple {
color: #c4b5fd;
border-color: rgba(167, 139, 250, 0.55);
box-shadow: 0 0 10px rgba(167, 139, 250, 0.1);
}
.qa-cmd-tag--gray {
color: #cbd5e1;
border-color: rgba(148, 163, 184, 0.52);
box-shadow: 0 0 8px rgba(148, 163, 184, 0.06);
}
.qa-cmd-connect-label {
margin: 0 0 12px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.75);
}
.qa-cmd-soc-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
column-gap: 10px;
row-gap: 10px;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon {
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
border: 1px solid rgba(100, 181, 246, 0.35) !important;
background: rgba(15, 23, 42, 0.65) !important;
margin: 0 !important;
position: relative;
overflow: visible;
transform: translateY(0);
transition: transform .18s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon:before,
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon:after {
display: none !important;
content: none !important;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon i {
font-size: 16px !important;
line-height: 1;
color: #e2e8f0 !important;
opacity: 1 !important;
position: static !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon i+i {
display: none !important;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon:hover {
transform: translateY(-2px);
box-shadow: 0 0 16px var(--qcp-hover-glow);
border-color: var(--qcp-accent) !important;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon img.istqb-logo {
width: 28px;
height: auto;
max-height: 18px;
object-fit: contain;
display: block;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .si-linkedin:hover { background: #0077B5 !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-medium:hover { background: #F24E1E !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-github:hover { background: #000000 !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-x:hover { background: #111111 !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-instagram:hover { background: #E1306C !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-email:hover { background: #ca8a04 !important; }
#side-panel.qa-cmd-panel .qa-cmd-connect .si-lab:hover {
background: #dc2626 !important;
border-color: #f87171 !important;
box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);
}
#side-panel.qa-cmd-panel .qa-cmd-connect .si-istqb:hover {
background: #003764 !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
#side-panel.qa-cmd-panel .qa-cmd-connect .social-icon:hover i {
color: #ffffff !important;
}
.qa-cmd-foot {
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid rgba(100, 181, 246, 0.12);
text-align: center;
}
.qa-cmd-foot-brand {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.28em;
color: rgba(148, 163, 184, 0.55);
text-transform: uppercase;
}
@media (max-width: 479px) {
.qa-cmd-quick {
grid-template-columns: 1fr;
}
}
/* FOOTER FOLLOW ME icons: center align and keep icon visible on hover */
#footer .social-icon {
width: 52px !important;
height: 52px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
border: 2px solid #ffffff !important;
background: #3a3a3a !important;
margin: 0 6px 10px 6px;
transform: translateY(0) scale(1);
transition: transform .22s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
/* Remove Canvas default pseudo layers in footer */
#footer .social-icon:before,
#footer .social-icon:after {
display: none !important;
content: none !important;
}
#footer .social-icon i {
font-size: 22px;
line-height: 1;
color: #ffffff !important;
opacity: 1 !important;
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
transition: color .25s ease !important;
}
#footer .social-icon:hover i {
color: #ffffff !important;
/* keep icons white on hover */
}
/* Footer ISTQB logo image */
#footer .social-icon img.istqb-logo {
width: 44px;
height: 28px;
object-fit: contain;
display: block;
/* color/filter is handled by theme rules */
}
#footer .social-icon .bug-lab-icon,
#side-panel .social-icon .bug-lab-icon,
.si-sticky .social-icon .bug-lab-icon {
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
/* Remove Canvas default hover background in footer */
#footer .social-icon:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.85) !important;
}
#footer .social-icon:hover i {
transform: none !important;
/* icon stays static */
top: auto !important;
left: auto !important;
}
#footer .si-linkedin:hover {
background: #0077B5 !important;
}
#footer .si-medium:hover {
background: #F24E1E !important;
}
#footer .si-github:hover {
background: #000000 !important;
}
#footer .si-github:hover i {
color: #ffffff !important;
}
#footer .si-x:hover {
background: #111111 !important;
}
#footer .si-x:hover i {
color: #ffffff !important;
}
#footer .si-instagram:hover {
background: #E1306C !important;
}
#footer .si-email:hover {
background: #FFD700 !important;
}
#footer .si-istqb {
background: #3a3a3a !important;
}
#footer .si-istqb:hover {
background: #003764 !important;
/* ISTQB brand blue */
border-color: #ffffff !important;
box-shadow: 0 8px 22px rgba(0, 55, 100, 0.45);
}
#footer .si-lab:hover,
#side-panel .si-lab:hover,
.si-sticky .si-lab:hover {
background: #dc2626 !important;
border-color: #f87171 !important;
box-shadow: 0 8px 22px rgba(220, 38, 38, 0.4);
}
body:not(.dark) #footer .social-icon.si-lab:hover,
body:not(.dark) .si-sticky .social-icon.si-lab:hover {
background: #dc2626 !important;
border-color: #f87171 !important;
}
body.dark #footer .si-istqb:hover {
background: #003764 !important;
/* ISTQB brand blue - dark theme */
box-shadow: 0 8px 22px rgba(0, 55, 100, 0.55);
}
#footer .si-istqb i {
color: #ffffff !important;
/* keep icon white */
}
#footer .si-istqb:hover i {
color: #ffffff !important;
/* keep icon white on hover */
}
/* Keep icon colors stable on hover */
#footer .social-icon:hover i {
color: #ffffff !important;
}
#footer .si-istqb i,
#footer .si-istqb:hover i {
color: #ffffff !important;
/* lock ISTQB icon to white */
}
/* Light theme styles for footer icons */
body:not(.dark) #footer .social-icon {
background: #f5f5f5 !important;
border: 2px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
body:not(.dark) #footer .social-icon i {
color: #333 !important;
}
body:not(.dark) #footer .social-icon:hover {
border-color: rgba(0, 0, 0, 0.4) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
background: inherit !important;
}
body:not(.dark) #footer .social-icon:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .si-istqb {
background: #f5f5f5 !important;
}
body:not(.dark) #footer .si-istqb i {
color: #333 !important;
}
body:not(.dark) #footer .si-istqb:hover {
background: #003764 !important;
/* ISTQB brand blue */
}
body:not(.dark) #footer .si-istqb:hover i {
color: #ffffff !important;
}
/* Brand hover backgrounds for light theme (footer) - higher specificity */
body:not(.dark) #footer .social-icon.si-istqb:hover {
background: #003764 !important;
border-color: #003764 !important;
}
body:not(.dark) #footer .social-icon.si-linkedin:hover {
background: #0077B5 !important;
border-color: #0077B5 !important;
}
body:not(.dark) #footer .social-icon.si-linkedin:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .social-icon.si-medium:hover {
background: #F24E1E !important;
border-color: #F24E1E !important;
}
body:not(.dark) #footer .social-icon.si-medium:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .social-icon.si-github:hover {
background: #000000 !important;
border-color: #000000 !important;
}
body:not(.dark) #footer .social-icon.si-github:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .social-icon.si-x:hover {
background: #111111 !important;
border-color: #111111 !important;
}
body:not(.dark) #footer .social-icon.si-x:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .social-icon.si-instagram:hover {
background: #E1306C !important;
border-color: #E1306C !important;
}
body:not(.dark) #footer .social-icon.si-instagram:hover i {
color: #ffffff !important;
}
body:not(.dark) #footer .social-icon.si-email:hover {
background: #FFD700 !important;
border-color: #FFD700 !important;
}
body:not(.dark) #footer .social-icon.si-email:hover i {
color: #ffffff !important;
}
/* Make sure Canvas' own background colors don't override ours in footer */
#footer .si-linkedin,
#footer .si-medium,
#footer .si-github,
#footer .si-x,
#footer .si-instagram,
#footer .si-email,
#footer .si-istqb {
background: transparent !important;
}
/* Tools section - make titles clickable links */
.team-title h4 a {
color: inherit;
text-decoration: none;
transition: opacity 0.3s ease;
display: inline-block;
}
.team-title h4 a:hover {
opacity: 0.8;
}
/* Make team images clickable */
.team-image a {
display: block;
width: 100%;
height: 100%;
}
.team-image a img {
display: block;
width: 100%;
}
/* Hide social icons on Java card */
.team-image a[href*="java.com"]~.team-overlay .team-social-icons {
display: none !important;
}
/* Alternative - target by image alt */
img[alt="JAVA"] {
position: relative;
}
img[alt="JAVA"]~.team-overlay .team-social-icons,
.team-image:has(img[alt="JAVA"]) .team-overlay .team-social-icons {
display: none !important;
}
/*
* Desktop-only FAB positions/sizes. Must stay in min-width 1200px so rules do not
* override @media (max-width: 1199px) (later source order was forcing right: 90px on tablet).
*/
@media (min-width: 1200px) {
.chatbot-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
font-family: 'Source Sans Pro', sans-serif;
}
#gotoTop {
bottom: 20px !important;
right: 90px !important;
z-index: 9998 !important;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
border: none;
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
cursor: pointer;
color: white;
font-size: 24px;
}
#gotoTop:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
#gotoTop i {
color: #FFFFFF;
font-size: 24px;
}
.chatbot-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 24px;
}
.chatbot-toggle:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
body.dark .chatbot-toggle {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.15);
}
body.dark .chatbot-toggle:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%);
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.25);
}
}
/* Dark Theme Go To Top - Chatbot ile uyumlu */
body.dark #gotoTop {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.15);
}
body.dark #gotoTop:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%);
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.25);
}
.chatbot-window {
position: absolute;
bottom: 80px;
right: 0;
width: 380px;
height: 600px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
display: none;
flex-direction: column;
overflow: hidden;
}
body.dark .chatbot-window {
background: #1a1a1a;
color: #e0e0e0;
}
.chatbot-window.active {
display: flex;
}
.chatbot-header {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chatbot-header-content {
display: flex;
align-items: center;
gap: 12px;
}
.chatbot-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.chatbot-info h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.chatbot-info p {
margin: 2px 0 0 0;
font-size: 12px;
opacity: 0.9;
}
.chatbot-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.chatbot-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.chatbot-message {
display: flex;
align-items: flex-start;
gap: 10px;
}
.chatbot-message.user-message {
flex-direction: row-reverse;
}
.message-content {
max-width: 75%;
padding: 12px 16px;
border-radius: 18px;
line-height: 1.5;
font-size: 14px;
position: relative;
}
/* ChatGPT-like formatting: inline + fenced code blocks */
.message-content code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.95em;
background: rgba(0, 0, 0, 0.06);
padding: 2px 6px;
border-radius: 8px;
word-break: break-word;
}
.message-content pre.chatbot-code {
margin: 10px 0 0 0;
padding: 10px 12px;
border-radius: 12px;
overflow: auto;
background: #0f172a;
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.message-content pre.chatbot-code code {
background: transparent;
padding: 0;
border-radius: 0;
color: inherit;
white-space: pre;
}
body.dark .message-content code {
background: rgba(255, 255, 255, 0.10);
}
.message-timestamp {
font-size: 10px;
opacity: 0.6;
margin-top: 4px;
text-align: right;
font-weight: 400;
}
.user-message .message-timestamp {
text-align: left;
}
.bot-message .message-timestamp {
color: #666;
}
body.dark .bot-message .message-timestamp {
color: #999;
}
.user-message .message-timestamp {
color: rgba(255, 255, 255, 0.7);
}
.bot-message .message-content {
background: #f0f0f0;
color: #333;
}
body.dark .bot-message .message-content {
background: #2a2a2a;
color: #e0e0e0;
}
.user-message .message-content {
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
color: white;
}
body.dark .user-message .message-content {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
}
body.dark .chatbot-header {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
}
.chatbot-input-container {
display: flex;
padding: 15px;
border-top: 1px solid #e0e0e0;
gap: 10px;
}
body.dark .chatbot-input-container {
border-top-color: #333;
}
.chatbot-input {
flex: 1;
padding: 12px 15px;
border: 1px solid #e0e0e0;
border-radius: 25px;
outline: none;
font-size: 14px;
}
body.dark .chatbot-input {
background: #2a2a2a;
border-color: #444;
color: #e0e0e0;
}
.chatbot-send {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(129, 212, 250, 0.3), 0 2px 6px rgba(79, 195, 247, 0.2);
}
.chatbot-send:hover {
background: linear-gradient(135deg, #90DDFB 0%, #5BC5F7 100%);
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(129, 212, 250, 0.5), 0 4px 12px rgba(79, 195, 247, 0.4);
}
/* Dark theme chatbot send button */
body.dark .chatbot-send {
background: linear-gradient(135deg, #4FC3F7 0%, #2A4A6F 100%);
box-shadow: 0 4px 20px rgba(79, 195, 247, 0.5), 0 2px 8px rgba(42, 74, 111, 0.4), 0 0 0 1px rgba(79, 195, 247, 0.15);
}
body.dark .chatbot-send:hover {
background: linear-gradient(135deg, #5BC5F7 0%, #3A5A7F 100%);
box-shadow: 0 8px 32px rgba(79, 195, 247, 0.6), 0 4px 16px rgba(42, 74, 111, 0.5), 0 0 0 1px rgba(79, 195, 247, 0.25);
}
.chatbot-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 768px) {
.chatbot-container {
bottom: 20px !important;
right: 15px !important;
}
.chatbot-toggle {
width: 50px !important;
height: 50px !important;
font-size: 20px !important;
}
#gotoTop {
bottom: 20px !important;
right: calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap)) !important;
width: 50px !important;
height: 50px !important;
}
#gotoTop i {
font-size: 20px !important;
}
.chatbot-window {
width: calc(100vw - 30px);
max-width: 350px;
height: calc(100vh - 150px);
max-height: 500px;
bottom: 75px;
right: 20px;
}
}
/* Client images frame/padding in lightbox - show frame instead of fullscreen */
.mfp-wrap:not(.mfp-no-margins) .mfp-content {
max-width: 90%;
padding: 20px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.mfp-wrap:not(.mfp-no-margins) .mfp-figure {
padding: 0;
}
.mfp-wrap:not(.mfp-no-margins) img.mfp-img {
padding: 0;
border-radius: 8px;
}
/* SEO: name-led hero H1 + digest / timeline (blue theme) */
.hero-h1-block { text-align: center; max-width: 56rem; margin-left: auto; margin-right: auto; }
.emphasis-title .hero-h1-block h1 { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.65rem, 4.2vw, 2.75rem); }
.hero-h1-name { display: block; font-size: 1.12em; }
.hero-h1-tagline { display: block; font-size: clamp(0.92rem, 2vw, 1.2rem); font-weight: 300; color: rgba(255,255,255,0.92); margin-top: 0.35rem; }
.hero-keyword-rotator { margin: 0.35rem 0 0; }
/* Hero: primary gradient CTA + featured Validation Lab platform CTA */
.hero-cta-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 18px;
margin-top: 1.25rem;
}
.hero-cta-wrap .button {
margin: 0 !important;
}
.hero-cta-wrap .hero-vlab-cta {
position: relative;
display: inline-flex !important;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 1.25rem 0.7rem 1.05rem !important;
background: linear-gradient(135deg, #0c4a6e 0%, #075985 38%, #0369a1 70%, #0284c7 100%) !important;
border: 1px solid rgba(186, 230, 253, 0.55) !important;
color: #f0f9ff !important;
letter-spacing: 0.02em;
text-align: left;
line-height: 1.1;
text-transform: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 28px rgba(56, 189, 248, 0.18),
0 0 0 1px rgba(56, 189, 248, 0.18),
0 12px 32px rgba(14, 165, 233, 0.32),
0 0 60px rgba(56, 189, 248, 0.22),
0 0 100px rgba(125, 211, 252, 0.12) !important;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.3s ease;
animation: heroVlabPulse 3.6s ease-in-out infinite;
}
@keyframes heroVlabPulse {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 0 28px rgba(56, 189, 248, 0.18),
0 0 0 1px rgba(56, 189, 248, 0.18),
0 12px 32px rgba(14, 165, 233, 0.32),
0 0 60px rgba(56, 189, 248, 0.22),
0 0 100px rgba(125, 211, 252, 0.12);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 0 36px rgba(56, 189, 248, 0.28),
0 0 0 2px rgba(125, 211, 252, 0.32),
0 14px 38px rgba(14, 165, 233, 0.42),
0 0 80px rgba(56, 189, 248, 0.34),
0 0 130px rgba(125, 211, 252, 0.22);
}
}
.hero-cta-wrap .hero-vlab-cta:hover,
.hero-cta-wrap .hero-vlab-cta:focus-visible {
transform: translateY(-3px);
filter: brightness(1.08);
animation-play-state: paused;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 0 42px rgba(56, 189, 248, 0.32),
0 0 0 2px rgba(125, 211, 252, 0.5),
0 18px 50px rgba(14, 165, 233, 0.5),
0 0 100px rgba(56, 189, 248, 0.42),
0 0 150px rgba(125, 211, 252, 0.3) !important;
}
.hero-vlab-cta__icon,
.hero-vlab-cta__arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
filter: drop-shadow(0 0 6px rgba(186, 230, 253, 0.55));
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.hero-vlab-cta__icon svg,
.hero-vlab-cta__arrow svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.hero-vlab-cta__check {
stroke: #bae6fd;
stroke-width: 1.9;
filter: drop-shadow(0 0 4px rgba(186, 230, 253, 0.7));
}
.hero-vlab-cta__copy {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.18rem;
}
.hero-vlab-cta__title {
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.05em;
color: #ffffff;
text-shadow: 0 0 14px rgba(125, 211, 252, 0.55);
line-height: 1;
}
.hero-vlab-cta__sub {
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.06em;
color: rgba(224, 242, 254, 0.78);
text-transform: none;
line-height: 1.1;
}
.hero-cta-wrap .hero-vlab-cta:hover .hero-vlab-cta__arrow,
.hero-cta-wrap .hero-vlab-cta:focus-visible .hero-vlab-cta__arrow {
transform: translate(2px, -2px);
filter: drop-shadow(0 0 10px rgba(186, 230, 253, 0.85));
}
@media (prefers-reduced-motion: reduce) {
.hero-cta-wrap .hero-vlab-cta { animation: none; }
.hero-cta-wrap .hero-vlab-cta:hover,
.hero-cta-wrap .hero-vlab-cta:focus-visible { transform: none; }
.hero-cta-wrap .hero-vlab-cta:hover .hero-vlab-cta__arrow,
.hero-cta-wrap .hero-vlab-cta:focus-visible .hero-vlab-cta__arrow { transform: none; }
}
@media (max-width: 600px) {
.hero-cta-wrap .hero-vlab-cta { padding: 0.65rem 1rem !important; gap: 0.7rem; }
.hero-vlab-cta__sub { display: none; }
.hero-vlab-cta__icon, .hero-vlab-cta__arrow { width: 20px; height: 20px; }
}
.hero-cta-wrap .hero-watch-demo {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.05rem !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(186, 230, 253, 0.32) !important;
color: rgba(240, 249, 255, 0.92) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.04em;
white-space: nowrap;
text-transform: none !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 4px 14px rgba(14, 165, 233, 0.08) !important;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease,
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease !important;
}
.hero-cta-wrap .hero-watch-demo:hover,
.hero-cta-wrap .hero-watch-demo:focus-visible {
background: rgba(125, 211, 252, 0.1) !important;
border-color: rgba(186, 230, 253, 0.55) !important;
color: #ffffff !important;
transform: translateY(-3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 0 0 1px rgba(125, 211, 252, 0.32),
0 10px 26px rgba(14, 165, 233, 0.18),
0 0 36px rgba(56, 189, 248, 0.18) !important;
}
.hero-watch-demo__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.hero-watch-demo__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
stroke: none;
opacity: 0.85;
}
.hero-cta-wrap .hero-watch-demo:hover .hero-watch-demo__icon,
.hero-cta-wrap .hero-watch-demo:focus-visible .hero-watch-demo__icon {
transform: translateX(2px);
filter: drop-shadow(0 0 6px rgba(186, 230, 253, 0.7));
}
.hero-watch-demo__label {
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-cta-wrap .hero-watch-demo:hover,
.hero-cta-wrap .hero-watch-demo:focus-visible { transform: none; }
.hero-cta-wrap .hero-watch-demo:hover .hero-watch-demo__icon,
.hero-cta-wrap .hero-watch-demo:focus-visible .hero-watch-demo__icon { transform: none; }
}
.hero-watch-intro-label {
font-size: 0.78rem !important;
font-weight: 500;
letter-spacing: 0.12em;
margin-left: 14px !important;
color: rgba(240, 249, 255, 0.78);
vertical-align: middle;
}
/* Validation Lab strip above PROOF OF SKILL (matches neon blue / pw token family) */
#validation-lab-cta {
background: #ffffff;
border-bottom: 1px solid rgba(3, 105, 161, 0.12);
}
body.dark #validation-lab-cta {
background: #2c2c2c;
border-bottom-color: rgba(100, 181, 246, 0.2);
}
#validation-lab-cta .container {
max-width: min(90vw, 1200px) !important;
}
.vl-lab-cta-slab__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0;
padding: 18px 20px 22px;
border-radius: 12px;
text-align: center;
}
@media (min-width: 768px) {
.vl-lab-cta-slab__inner {
flex-direction: row;
text-align: left;
justify-content: space-between;
align-items: center;
gap: 20px;
}
}
body:not(.dark) .vl-lab-cta-slab__inner {
border: 1px solid rgba(3, 105, 161, 0.22);
background: linear-gradient(135deg, rgba(3, 105, 161, 0.07) 0%, rgba(14, 165, 233, 0.1) 50%, rgba(56, 189, 248, 0.06) 100%);
box-shadow:
0 0 0 1px rgba(3, 105, 161, 0.06) inset,
0 8px 28px rgba(3, 105, 161, 0.1);
}
body:not(.dark) .vl-lab-cta-slab__text {
color: #334155;
font-size: clamp(0.9rem, 1.1vw, 0.98rem);
line-height: 1.6;
margin: 0;
flex: 1;
max-width: 52rem;
}
body.dark .vl-lab-cta-slab__inner {
border: 1px solid rgba(100, 181, 246, 0.38);
background: linear-gradient(145deg, rgba(25, 118, 210, 0.14) 0%, rgba(30, 41, 59, 0.5) 50%, rgba(15, 23, 42, 0.35) 100%);
box-shadow:
0 0 0 1px rgba(100, 181, 246, 0.1) inset,
0 4px 28px rgba(0, 0, 0, 0.28),
0 0 40px rgba(25, 118, 210, 0.12);
}
body.dark .vl-lab-cta-slab__text {
color: rgba(226, 232, 240, 0.96);
font-size: clamp(0.9rem, 1.1vw, 0.98rem);
line-height: 1.6;
margin: 0;
flex: 1;
max-width: 52rem;
}
.vl-lab-cta-slab__btn.button {
white-space: nowrap;
padding: 0.5rem 1.25rem !important;
font-size: 0.875rem !important;
}
/* The right command panel has a dark surface in both themes. Keep ISTQB white. */
#side-panel.qa-cmd-panel .si-istqb img.istqb-logo,
#side-panel.qa-cmd-panel .si-istqb:hover img.istqb-logo {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* On light theme, the QA Practice bug must turn white with its red hover tile. */
.si-sticky .si-lab:hover .bug-lab-icon,
#footer .si-lab:hover .bug-lab-icon {
color: #ffffff !important;
}
.si-sticky .si-lab:hover .bug-lab-icon g,
#footer .si-lab:hover .bug-lab-icon g {
stroke: #ffffff !important;
}
.si-sticky .si-lab:hover .bug-lab-icon circle,
#footer .si-lab:hover .bug-lab-icon circle {
fill: #ffffff !important;
}