:root {
--content-max-width: 2000px;
--page-gutter:
clamp(
16px,
0.5rem + 2vw,
56px
);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
body {
min-width: 320px;
min-height: 100vh;
min-height: 100svh;
overflow-x: hidden;
background:
linear-gradient(
45deg,
#03003d 0%,
#010128 35%,
#000809 100%
);
color: white;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}
a {
color: white;
text-decoration: none;
}
.container {
width: 100%;
max-width: var(--content-max-width);
padding-inline: var(--page-gutter);
margin-inline: auto;
}
section {
height: 100vh;
height: 100dvh;
scroll-snap-align: center;
}
@media (hover: none), (pointer: coarse) {
section {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* =========================================================
iOS SAFARI 26+ — LIQUID GLASS SECTION STABILITY
Real-device evidence from iPhone 17 / Safari 26.4 shows two separate
problems:
1) Expanded browser UI:
100dvh = 714px, 100lvh = 754px.
Making the *Hero section* 794px tall hides About, but adds 80px of
document-flow reserve below a 714px Hero and makes the portrait appear
to "float".
Instead, keep every section at 100dvh and move only the *content* of
following sections below the translucent Liquid Glass reveal zone.
Guard = 2 × (100lvh - 100dvh)
= 200lvh - 200dvh
For the measured expanded state:
guard = 2 × (754 - 714) = 80px.
2) Collapsed browser UI:
Safari's snapport can retain the smaller layout-viewport height while
the visible/dynamic viewport grows. With scroll-snap-align:center this
centers a 754px section inside a 714px snapport and overshoots the
section start by 20px. The measured landscape case shows the same
relationship: (402 - 338) / 2 = 32px.
Safari 26+ therefore uses scroll-snap-align:start for ALL portfolio
sections. This keeps About / Projects / Contact boundaries aligned to
their actual section starts as the toolbar expands and collapses.
Chrome and other browsers keep the existing behavior because the special
rules are gated by html.ios-safari-liquid-ui.
========================================================= */
@supports (height: 100lvh) and (height: 100dvh) {
@media (max-width: 440px) and (orientation: portrait) {
/* Keep the proven Hero composition tied to the actual dynamic viewport. */
.container > section:first-child,
.container > section:first-child > .hero {
height: 100dvh;
min-height: 100dvh;
}
html.ios-safari-liquid-ui .container > section {
height: 100dvh;
min-height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/*
* Do not make the Hero itself taller.
*
* Push only the following section CONTENT below Safari's translucent
* bottom reveal zone. Because box-sizing:border-box is global, this
* guard stays inside each 100dvh section and does not create another
* oversized snap target.
*
* When Safari collapses its UI, lvh approaches dvh and this becomes 0.
*/
html.ios-safari-liquid-ui .container > section:not(:first-child) {
/*
* Keep the first meaningful content of every later section out of
* Safari 26's translucent bottom reveal zone in BOTH UI states.
*
* Measured iPhone 17 / Safari 26.5:
* expanded: lvh - dvh = 40px
* collapsed: lvh - dvh = 0px, but the floating pill still
* exposes content beneath it.
*
* Therefore:
* - 88px is the collapsed-state floor;
* - 3 × the measured lvh/dvh delta adapts upward while expanded;
* - 128px caps the reserve so short phones do not lose too much
* usable section space.
*
* This padding stays INSIDE each 100dvh section (global
* box-sizing:border-box), so section snap geometry remains stable.
*/
--ios-liquid-content-guard:
clamp(
88px,
calc(300lvh - 300dvh),
128px
);
padding-block-start: var(--ios-liquid-content-guard);
}
}
}
.hero {
height: 100%;
min-height: 100%;
overflow: hidden;
display: flex;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
overflow: clip;
}
.hImg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 75%;
width: max-content;
}
.hImg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.heroSection {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.heroTitle {
margin-top: 50px;
font-size: 80px;
color: #62acf7;
}
.heroTitle span {
color: white;
}
.certifications {
width: 35%;
}
.certifications h2 {
font-size: 24px;
}
.certifications p {
font-size: 16px;
color: #ddd;
margin: 16px 0px;
}
.certificationsImages {
display: flex;
gap: 10px;
}
.certificationsImages img {
width: 56px;
height: 56px;
padding: 8px;
background-color: white;
border-radius: 100%;
}
.scroll {
margin-bottom: 50px;
width: max-content;
}
.heroSection.right {
align-items: end;
}
.socials {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
background-color: #010134;
border-bottom-right-radius: 10px;
}
.socials img {
width: 28px;
height: 28px;
}
.socialsTextContainer {
width: 28px;
height: 28px;
}
.socialsText {
background-color: #62acf7;
font-size: 16px;
rotate: 90deg;
width: max-content;
height: 100%;
transform-origin: left top;
transform: translateY(-28px);
padding: 0 8px;
display: flex;
align-items: center;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
}
.bubbleContainer {
width: 60%;
display: flex;
align-items: end;
gap: 8px;
justify-content: space-between;
}
.bubble {
width: 100%;
height: 100%;
background-color: white;
color: #555;
padding: 20px;
font-size: 16px;
border-radius: 20px 20px 0px 20px;
}
.bubbleContainer img {
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
}
.contactButton {
position: relative;
}
.contactButtonLink {
margin-bottom: 50px;
}
.circleText {
letter-spacing: 3px;
font-size: 20px;
}
.arrow {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
HERO V2 — PRODUCTION SHORT PHONE LANDSCAPE (V12)
V7 composition + V12 natural-height bubble fix; validated 92/92 PASS.
Scope:
- width <= 1100px
- height <= 355px
- landscape only
Keep the current Hero.jsx DOM unchanged. This production block is the
approved V7 CSS calibration. It is self-contained and no longer depends on
the removed legacy 780x360 golden-viewport sizing block.
========================================================= */
@media (max-width: 1100px) and (max-height: 355px) and (orientation: landscape) {
/*
* Critical below 320px: the global section min-height must not make the Hero
* taller than the browser-visible landscape viewport.
*/
.container > section:first-child {
height: 100dvh !important;
min-height: 100dvh !important;
scroll-snap-align: start !important;
}
.container > section:first-child > .hero,
.hero {
height: 100dvh !important;
min-height: 0 !important;
}
.hero {
position: relative !important;
overflow: hidden !important;
/*
* Self-contained replacements for the only two values that were still
* inherited from the removed legacy 780x360 golden block. The narrow
* short-landscape preservation rule below overrides these defaults only
* in the exact constrained range that previously used those values.
*/
--phone-landscape-right-gap: 0px;
--phone-landscape-bubble-width: 60%;
/*
* 355px -> 70px (matches the approved 356px contact scale)
* 264px -> ~52px
* 200px -> 46px floor
*/
--short-contact-size:
clamp(46px, 19.72svh, 70px);
--short-social-icon:
clamp(13px, 5.92svh, 21px);
--short-social-gap:
clamp(3px, 1.97svh, 7px);
--short-social-pad:
clamp(3px, 1.41svh, 5px);
--short-social-font:
clamp(8px, 2.82svh, 10px);
--short-social-text-pad:
clamp(5px, 2.25svh, 8px);
/*
* Real vertical breathing room after Instagram. This is IN ADDITION to the
* normal flex gap and is intentionally positive; V5 used a negative margin
* here and every one of the 92 short-sweep cases overlapped Instagram.
*/
--short-social-label-extra-gap:
clamp(4px, 1.8svh, 7px);
/*
* The navy icon rail visually continues a short distance behind the top of
* the blue FOLLOW ME tab, matching the supplied reference screenshot. This
* is paint-only overlap; the Instagram-to-label layout gap stays positive.
*/
--short-social-navy-tab-overlap:
clamp(10px, 5svh, 18px);
/*
* At 200-260px heights the 8px FOLLOW ME text + horizontal padding paints
* about 54px tall after rotation. V5's 50px floor caused the remaining 21
* containment failures. Reserve a little real room around that painted box.
*/
--short-social-label-height:
clamp(56px, 20svh, 71px);
}
/* =========================================================
LEFT LANE — preserve the original even flex distribution
========================================================= */
.heroSection.left {
height: 100% !important;
justify-content:
space-between !important;
/*
* This remains only a minimum separation. space-between distributes the
* remaining vertical room evenly between title / certifications / scroll.
*/
gap:
clamp(8px, 4.8svh, 17px) !important;
}
.heroSection.right {
gap: var(--phone-landscape-right-gap) !important;
}
.heroTitle {
margin-top:
clamp(22px, 14svh, 50px) !important;
font-size:
clamp(20px, 7.9svh, 28px) !important;
line-height: 1.14 !important;
}
/*
* Do NOT change .certifications width. Keep the production composition and
* only scale the text/icons vertically.
*/
.certifications h2 {
font-size:
clamp(10px, 3.66svh, 13px) !important;
line-height: 1.16 !important;
}
.certifications p {
margin:
clamp(5px, 4.5svh, 16px)
0 !important;
font-size:
clamp(8px, 2.82svh, 10px) !important;
line-height: 1.18 !important;
}
.certificationsImages {
gap:
clamp(6px, 2.8svh, 10px) !important;
}
.certificationsImages img {
width:
clamp(24px, 9.86svh, 35px) !important;
height:
clamp(24px, 9.86svh, 35px) !important;
/*
* Preserve the original white-circle visual while allowing the icon shell
* to shrink with height.
*/
padding:
clamp(3px, 1.69svh, 6px) !important;
}
/*
* Keep scroll as the third flex child. No absolute positioning: the left
* lane's space-between distribution places it naturally at the bottom.
*/
.scroll {
display: block !important;
margin-bottom:
clamp(16px, 14svh, 50px) !important;
width: max-content !important;
}
.scroll > svg {
display: block !important;
width:
clamp(24px, 9.86svh, 35px) !important;
height:
clamp(24px, 9.86svh, 35px) !important;
/*
* Scale the approved +25px golden offset down instead of replacing the
* scroll with a completely different positioning model.
*/
transform:
translateY(
clamp(8px, 7.04svh, 25px)
) !important;
}
/* =========================================================
SOCIAL RAIL — current DOM, reference visual
CURRENT Hero.jsx (do not change during candidate calibration):
.socials
GitHub
LinkedIn
Instagram
.socialsTextContainer
.socialsText (FOLLOW ME)
V7 keeps the V6 structure without inventing a .socialsContainer wrapper:
- .socials stays the real flex/layout container.
- its production navy background becomes transparent.
- ::before paints ONLY the navy icon rail, plus a short decorative tail
behind the top of the blue tab.
- FOLLOW ME remains a real fourth flex child with positive separation from
Instagram and a container tall enough to hold the rotated painted label.
========================================================= */
.socials {
position: relative !important;
isolation: isolate !important;
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap:
var(--short-social-gap) !important;
padding:
var(--short-social-pad) !important;
margin: 0 !important;
/* Paint the icon rail separately so navy does not fill the full label box. */
background-color: transparent !important;
z-index: 6 !important;
}
.socials::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
/*
* top padding
* + 3 exact icon rows
* + 3 normal flex gaps (including the Instagram -> label-container gap)
* + the label's extra breathing room
* + a short navy tail behind the top of the blue tab.
*/
height: calc(
var(--short-social-pad)
+ var(--short-social-icon)
+ var(--short-social-icon)
+ var(--short-social-icon)
+ var(--short-social-gap)
+ var(--short-social-gap)
+ var(--short-social-gap)
+ var(--short-social-label-extra-gap)
+ var(--short-social-navy-tab-overlap)
) !important;
background-color: #010134 !important;
border-bottom-right-radius: 10px !important;
pointer-events: none !important;
}
.socials > a,
.socialsTextContainer {
position: relative !important;
z-index: 1 !important;
}
/* Remove inline-anchor line-box height so the rail geometry equals the icons. */
.socials > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width:
var(--short-social-icon) !important;
height:
var(--short-social-icon) !important;
line-height: 0 !important;
}
.socials img {
display: block !important;
width:
var(--short-social-icon) !important;
height:
var(--short-social-icon) !important;
}
.socialsTextContainer {
/*
* V7 visual micro-calibration: the blue FOLLOW ME tab reads about 1px left
* of the navy icon rail in the rendered landscape screenshots. Shift the
* real label container (and therefore its text) together by exactly 1px.
* This preserves V6's vertical gap and containment geometry.
*/
transform: translateX(1px) !important;
width:
var(--short-social-icon) !important;
height:
var(--short-social-label-height) !important;
flex:
0 0
var(--short-social-label-height) !important;
/* V5 had a NEGATIVE margin here. V6 deliberately creates real space. */
margin-top:
var(--short-social-label-extra-gap) !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
}
.socialsText {
position: absolute !important;
left: 50% !important;
top: 50% !important;
rotate: none !important;
transform:
translate(-50%, -50%)
rotate(90deg) !important;
transform-origin:
center center !important;
width: max-content !important;
height:
var(--short-social-icon) !important;
padding:
0
var(--short-social-text-pad) !important;
font-size:
var(--short-social-font) !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =========================================================
BUBBLE — explicit self-contained width
========================================================= */
.bubbleContainer {
width: var(--phone-landscape-bubble-width) !important;
align-items: center !important;
/*
* Let the right column's existing justify-content: space-between position
* Bubble naturally. A positive translateY was pushing it below Hero even
* when the screenshot otherwise looked acceptable.
*/
transform: none !important;
}
.bubbleContainer img {
width:
clamp(20px, 8.45svh, 30px) !important;
height:
clamp(20px, 8.45svh, 30px) !important;
align-self: center !important;
}
.bubble {
height: auto !important;
align-self: center !important;
font-size:
clamp(8px, 2.82svh, 10px) !important;
line-height: 1.14 !important;
/*
* Final approved landscape bubble spacing:
* exact 10px top and 10px bottom.
* Keep the short-range horizontal padding scale unchanged.
*/
padding-block: 10px !important;
padding-inline:
clamp(4px, 2.25svh, 8px) !important;
}
/* =========================================================
CONTACT — use the validated portrait centering pattern
Portrait's stable pattern is:
link box
-> contactButton fills box
-> circle SVG fills box
-> .arrow fills box and centers its child
-> arrow SVG has NO positional translation
Keep Contact as the final RIGHT-column flex child. This allows
justify-content: space-between to reserve real layout room for
Socials -> Bubble -> Contact and prevents one control from visually
sitting on top of another.
========================================================= */
.contactButtonLink {
position: relative !important;
flex: 0 0 auto !important;
width:
var(--short-contact-size) !important;
height:
var(--short-contact-size) !important;
margin:
0
0
clamp(4px, 1.4svh, 6px)
0 !important;
padding: 0 !important;
z-index: 5 !important;
}
.contactButton {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.contactButton > svg {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.arrow {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.arrow svg {
width:
clamp(
17px,
calc(
var(--short-contact-size) *
0.357143
),
25px
) !important;
height:
clamp(
17px,
calc(
var(--short-contact-size) *
0.357143
),
25px
) !important;
/*
* Critical difference from the old landscape rule:
* portrait centers the arrow structurally. Do not translate it.
*/
transform: none !important;
}
/* =========================================================
MIDDLE VISUAL — same relationship, smaller short-height canvas
========================================================= */
.bg {
top: auto !important;
bottom: 0 !important;
height:
clamp(
150px,
calc(100svh - 35px),
320px
) !important;
}
/*
* Keep the portrait's existing production positioning and let its percentage
* height naturally shrink with the actual Hero height.
*/
.hImg img {
object-fit: contain !important;
object-position:
center bottom !important;
}
}
/*
* The 200/220/240 synthetic probes demonstrate an environment with too little
* vertical room for all right-column content while the social rail remains
* untouched. Remove only the optional bubble there.
*/
@media (max-width: 1100px) and (max-height: 240px) and (orientation: landscape) {
.bubbleContainer {
display: none !important;
}
}
/* =========================================================
HERO V2 — PRODUCTION PHONE LANDSCAPE 356–500 (NORMAL V6)
Final 10px vertical bubble padding; validated 100/100 full landscape PASS.
Purpose:
- Continue the approved V7 short-landscape composition above 355px.
- Leave the validated <=355px V7 production block unchanged.
- Preserve the current Hero.jsx DOM.
- Scale the same relationships smoothly with svh.
- Center speech text structurally inside the white bubble.
========================================================= */
@media (max-width: 1100px) and (min-height: 356px) and (max-height: 500px) and (orientation: landscape) {
.container > section:first-child {
height: 100dvh !important;
min-height: 100dvh !important;
scroll-snap-align: start !important;
}
.container > section:first-child > .hero,
.hero {
height: 100dvh !important;
min-height: 0 !important;
}
.hero {
position: relative !important;
overflow: hidden !important;
/* Match V7's self-contained right-lane defaults. */
--phone-landscape-right-gap: 0px;
--phone-landscape-bubble-width: 60%;
/* Continuations of the V7 short-height scale at the 355/356 boundary. */
--normal-contact-size: clamp(70px, 19.72svh, 90px);
--normal-social-icon: clamp(21px, 5.92svh, 28px);
--normal-social-gap: clamp(7px, 1.97svh, 10px);
--normal-social-pad: clamp(5px, 1.41svh, 7px);
--normal-social-font: clamp(10px, 2.82svh, 13px);
--normal-social-text-pad: clamp(8px, 2.25svh, 10px);
--normal-social-label-extra-gap: clamp(7px, 1.8svh, 9px);
--normal-social-navy-tab-overlap: clamp(18px, 5svh, 22px);
--normal-social-label-height: clamp(71px, 20svh, 90px);
}
/* =========================================================
LEFT LANE — same structure as V7, larger normal-height scale
========================================================= */
.heroSection.left {
height: 100% !important;
justify-content: space-between !important;
gap: clamp(17px, 4.8svh, 24px) !important;
}
.heroSection.right {
gap: var(--phone-landscape-right-gap) !important;
}
.heroTitle {
margin-top: clamp(50px, 14svh, 58px) !important;
font-size: clamp(28px, 7.9svh, 40px) !important;
line-height: 1.14 !important;
}
.certifications h2 {
font-size: clamp(13px, 3.66svh, 19px) !important;
line-height: 1.16 !important;
}
.certifications p {
margin: clamp(10px, 3.6svh, 16px) 0 !important;
font-size: clamp(10px, 2.82svh, 14px) !important;
line-height: 1.18 !important;
}
.certificationsImages {
gap: clamp(8px, 2.2svh, 10px) !important;
}
.certificationsImages img {
width: clamp(35px, 9.86svh, 48px) !important;
height: clamp(35px, 9.86svh, 48px) !important;
padding: clamp(6px, 1.69svh, 8px) !important;
}
.scroll {
display: block !important;
margin-bottom: clamp(50px, 14svh, 58px) !important;
width: max-content !important;
}
.scroll > svg {
display: block !important;
width: clamp(35px, 9.86svh, 48px) !important;
height: clamp(35px, 9.86svh, 48px) !important;
transform: translateY(clamp(25px, 7.04svh, 34px)) !important;
}
/* =========================================================
SOCIAL RAIL — continue the approved V7 visual/DOM model
========================================================= */
.socials {
position: relative !important;
isolation: isolate !important;
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: var(--normal-social-gap) !important;
padding: var(--normal-social-pad) !important;
margin: 0 !important;
background-color: transparent !important;
z-index: 6 !important;
}
.socials::before {
content: "" !important;
position: absolute !important;
z-index: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: calc(
var(--normal-social-pad)
+ var(--normal-social-icon)
+ var(--normal-social-icon)
+ var(--normal-social-icon)
+ var(--normal-social-gap)
+ var(--normal-social-gap)
+ var(--normal-social-gap)
+ var(--normal-social-label-extra-gap)
+ var(--normal-social-navy-tab-overlap)
) !important;
background-color: #010134 !important;
border-bottom-right-radius: 10px !important;
pointer-events: none !important;
}
.socials > a,
.socialsTextContainer {
position: relative !important;
z-index: 1 !important;
}
.socials > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--normal-social-icon) !important;
height: var(--normal-social-icon) !important;
line-height: 0 !important;
}
.socials img {
display: block !important;
width: var(--normal-social-icon) !important;
height: var(--normal-social-icon) !important;
}
.socialsTextContainer {
/* Preserve the user-approved V7 +1px optical centering. */
transform: translateX(1px) !important;
width: var(--normal-social-icon) !important;
height: var(--normal-social-label-height) !important;
flex: 0 0 var(--normal-social-label-height) !important;
margin-top: var(--normal-social-label-extra-gap) !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
}
.socialsText {
position: absolute !important;
left: 50% !important;
top: 50% !important;
rotate: none !important;
transform: translate(-50%, -50%) rotate(90deg) !important;
transform-origin: center center !important;
width: max-content !important;
height: var(--normal-social-icon) !important;
padding: 0 var(--normal-social-text-pad) !important;
font-size: var(--normal-social-font) !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* =========================================================
BUBBLE — keep it in the right-column flex flow
========================================================= */
.bubbleContainer {
display: flex !important;
width: var(--phone-landscape-bubble-width) !important;
align-items: center !important;
transform: none !important;
}
.bubbleContainer img {
width: clamp(30px, 8.45svh, 40px) !important;
height: clamp(30px, 8.45svh, 40px) !important;
align-self: center !important;
}
.bubble {
/*
* Final approved normal-landscape structure:
* natural bubble height + exact symmetric 10px vertical padding.
*/
height: auto !important;
align-self: center !important;
font-size: clamp(10px, 2.82svh, 13px) !important;
line-height: 1.14 !important;
padding-block: 10px !important;
padding-inline: clamp(8px, 2.25svh, 11px) !important;
/*
* Preserve the exact flex text-centering behavior that was present
* during the validated V6 override run.
*/
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
.bubble > span {
display: block !important;
line-height: inherit !important;
}
/* =========================================================
CONTACT — same structural centering pattern as V7
========================================================= */
.contactButtonLink {
position: relative !important;
flex: 0 0 auto !important;
width: var(--normal-contact-size) !important;
height: var(--normal-contact-size) !important;
margin: 0 0 clamp(6px, 1.4svh, 8px) 0 !important;
padding: 0 !important;
z-index: 5 !important;
}
.contactButton {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.contactButton > svg {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.arrow {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.arrow svg {
width: clamp(25px, calc(var(--normal-contact-size) * 0.357143), 32px) !important;
height: clamp(25px, calc(var(--normal-contact-size) * 0.357143), 32px) !important;
transform: none !important;
}
/* =========================================================
MIDDLE VISUAL — continuous growth above the V7 320px cap
========================================================= */
.bg {
top: auto !important;
bottom: 0 !important;
height: clamp(320px, calc(100svh - 35px), 430px) !important;
}
.hImg img {
object-fit: contain !important;
object-position: center bottom !important;
}
}
/* =========================================================
NARROW SHORT-LANDSCAPE PRESERVATION CONSTRAINT
This replaces the last two behaviors that were still coming from the
removed legacy 780x360 golden-viewport block. It is intentionally tiny:
no typography, icon, contact, scroll, or positioning patches live here.
It preserves the already-approved landscape rendering for the constrained
<=780px by <=360px overlap while V7 / Normal V2 own the actual composition.
========================================================= */
@media (max-width: 780px) and (max-height: 360px) and (orientation: landscape) {
.hero {
--phone-landscape-right-gap: 12px;
--phone-landscape-bubble-width: 71%;
}
}
/* =========================================================
HERO V2 — PRODUCTION PHONE PORTRAIT 360–440
Reference composition: 360×681; width expansion test: 360–440px
Purpose:
- Preserve the 360×681 visual rhythm across heights and 360–440px phone widths.
- Keep bubble -> scroll -> image ordering structural.
- Let the visual row begin immediately after a controlled
scroll-to-image gap instead of using a fixed pixel image-start.
- Severe heights may hide the bubble; the remaining rows collapse
naturally and the portrait receives the reclaimed space.
- Validated against the Hero composition QA matrix before promotion.
========================================================= */
@media (max-width: 500px) and (orientation: portrait) {
.hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
position: relative !important;
/*
* Phone corner anchors.
*
* The visible contact artwork is circular. Rotating its square wrapper
* does not make the painted circle wider, so we do not reserve a diagonal
* square envelope that pushes the button unnecessarily inward.
*
* Both contact and socials anchor against the full-bleed Hero visual edge
* (the same edge used by .bg), not against the inner content gutter.
*/
--hero-contact-size: clamp(78px, 20vw, 86px);
--hero-corner-gap: clamp(6px, 1.7vw, 8px);
/*
* Golden 360×681 rhythm:
* title
* certifications
* bubble
* scroll
* ~27–30px visual breathing room
* portrait + shape (takes ALL remaining height)
*/
grid-template-rows:
auto
auto
auto
auto
clamp(24px, 4.3svh, 30px)
minmax(0, 1fr) !important;
}
.heroSection {
display: contents !important;
}
/* Prevent intrinsic-width children from widening the single grid track. */
.heroTitle,
.certifications,
.bubbleContainer,
.scroll,
.contactButtonLink {
/* Scale the safe inset slightly as the rotating contact control
grows on wider phones, while keeping the 360px golden layout
visually almost unchanged. */
min-width: 0 !important;
}
/* -------------------------
TITLE
------------------------- */
.heroTitle {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: center !important;
margin-top: clamp(24px, 5svh, 40px) !important;
margin-bottom: clamp(16px, 2.4svh, 20px) !important;
position: relative !important;
z-index: 2 !important;
}
/* -------------------------
CERTIFICATIONS
------------------------- */
.certifications {
grid-column: 1 !important;
grid-row: 2 !important;
justify-self: stretch !important;
margin-bottom: clamp(16px, 2.5svh, 20px) !important;
position: relative !important;
z-index: 2 !important;
}
/* -------------------------
SPEECH BUBBLE
------------------------- */
.bubbleContainer {
display: flex !important;
grid-column: 1 !important;
grid-row: 3 !important;
justify-self: center !important;
align-self: start !important;
transform: none !important;
width: min(92%, 330px) !important;
gap: 8px !important;
margin: 0 0 clamp(10px, 1.8svh, 14px) !important;
position: relative !important;
z-index: 2 !important;
}
.bubble {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
white-space: nowrap !important;
font-size: 11px !important;
padding: 8px 10px !important;
}
.bubbleContainer img {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
}
/* -------------------------
SCROLL
------------------------- */
.scroll {
grid-column: 1 !important;
grid-row: 4 !important;
justify-self: center !important;
align-self: start !important;
margin: 0 !important;
position: relative !important;
z-index: 2 !important;
}
.scroll > svg {
transform: none !important;
}
/* -------------------------
PORTRAIT + SHAPE
Key V3 change:
.bg is the sixth grid row instead of an independently positioned
percentage-height layer. Its top therefore follows the scroll row
plus the controlled row-5 gap automatically at every browser height.
The width reconstructs the full visual viewport from the centered
Hero content width + the page gutters, avoiding a 100vw scrollbar
mismatch in desktop responsive emulation.
------------------------- */
.bg {
position: relative !important;
grid-column: 1 !important;
grid-row: 6 !important;
align-self: stretch !important;
justify-self: center !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
width: calc(100% + (2 * var(--page-gutter))) !important;
height: 100% !important;
min-height: 0 !important;
margin-inline: calc(-1 * var(--page-gutter)) !important;
z-index: 0 !important;
}
/* -------------------------
PORTRAIT IMAGE INTEGRITY
The visual row may become wider than the source image's aspect ratio.
Do not use object-fit: cover here: it can crop the top of the portrait
(including hair/head) on wider phones such as 402px-class devices.
Fill the .bg row with the positioning box, but preserve the complete
source portrait inside it and anchor it to the bottom.
------------------------- */
.hImg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: auto !important;
}
.hImg img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
}
/* -------------------------
CONTACT — Hero bottom-right anchor
Contact belongs at the bottom-right of the portrait/image composition,
not at the physical screen edge. Align the click target with hero.right;
the SVG circle's transparent margin keeps the painted circle safely
inside while still looking corner-anchored.
------------------------- */
.contactButtonLink {
position: absolute !important;
right: 0 !important;
bottom:
max(var(--hero-corner-gap), env(safe-area-inset-bottom, 0px)) !important;
width: var(--hero-contact-size) !important;
height: var(--hero-contact-size) !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
margin: 0 !important;
z-index: 3 !important;
}
.contactButton {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.contactButton > svg {
width: 100% !important;
height: 100% !important;
}
.arrow {
width: 100% !important;
height: 100% !important;
}
.arrow svg {
width: clamp(28px, 7vw, 34px) !important;
height: clamp(28px, 7vw, 34px) !important;
}
/* -------------------------
SOCIAL RAIL — portrait invariant
Restore the visually validated Golden V10 placement:
top-right of the portrait Hero's inner content edge.
------------------------- */
.socials {
position: absolute !important;
top: 0 !important;
/*
* Golden portrait corner placement:
* align the rail with the Hero's right edge.
*
* The Hero itself already sits inside the page gutter, so right: 0 keeps
* the rail near the device edge without shoving it into the scrollbar /
* browser chrome and without double-applying --page-gutter.
*/
right: 0 !important;
z-index: 4 !important;
}
}
/* =========================================================
HERO V2 — PRODUCTION PHONE PORTRAIT FLUID SCALE V1
Validated: 156/156 PASS (53 measured + 103 synthetic).
Purpose:
- Restore responsive phone sizing that the portrait grid previously
inherited from removed legacy device-specific queries.
- Keep the validated portrait grid structure/placement unchanged.
- Use one generalized <=500px fluid scale layer.
- No device names and no exact-device viewport patches.
========================================================= */
@media (max-width: 500px) and (orientation: portrait) {
.hero {
--portrait-title-size:
clamp(32px, min(10.25vw, 5.2svh), 42px);
--portrait-cert-title-size:
clamp(20px, min(5.9vw, 3.2svh), 26px);
--portrait-cert-copy-size:
clamp(12.5px, min(3.65vw, 2.2svh), 17px);
--portrait-cert-icon-size:
clamp(36px, 10.6vw, 47px);
--portrait-scroll-size:
clamp(40px, 11.8vw, 50px);
--portrait-social-icon:
clamp(23px, 6.9vw, 30px);
--portrait-social-box:
clamp(17px, 5.4vw, 23px);
--portrait-social-font:
clamp(12px, 3.7vw, 15px);
}
/* Exactly two intentional title lines: the JSX
remains the break. */
.heroTitle {
width: max-content !important;
max-width: calc(100% - 72px) !important;
font-size: var(--portrait-title-size) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
text-align: center !important;
}
/* Legacy phone rules supplied width:100%; the production grid needs to own it. */
.certifications {
width: 100% !important;
text-align: center !important;
}
.certifications h2 {
width: 100% !important;
font-size: var(--portrait-cert-title-size) !important;
line-height: 1.15 !important;
}
.certifications p {
margin: clamp(10px, 1.8svh, 14px) 0 !important;
font-size: var(--portrait-cert-copy-size) !important;
line-height: 1.2 !important;
}
.certificationsImages {
justify-content: center !important;
gap: clamp(8px, 2.5vw, 10px) !important;
}
.certificationsImages img {
width: var(--portrait-cert-icon-size) !important;
height: var(--portrait-cert-icon-size) !important;
padding: clamp(5px, 1.6vw, 8px) !important;
}
/* The portrait grid owns placement; this layer only restores visual scale. */
.scroll > svg {
width: var(--portrait-scroll-size) !important;
height: var(--portrait-scroll-size) !important;
transform: none !important;
}
.socials {
gap: clamp(10px, 2.8vw, 12px) !important;
padding: clamp(5px, 1.4vw, 6px) !important;
}
.socials img {
width: var(--portrait-social-icon) !important;
height: var(--portrait-social-icon) !important;
}
.socialsTextContainer {
width: var(--portrait-social-box) !important;
height: var(--portrait-social-box) !important;
}
.socialsText {
font-size: var(--portrait-social-font) !important;
transform: translateY(clamp(-27px, -6.2vw, -20px)) !important;
}
}
/* =========================================================
SEVERE / EXTREME PHONE PORTRAIT
TestMU-backed pressure state.
Bubble is optional. Because its grid row is auto, hiding it removes
that row's height and automatically gives the reclaimed room to row 6
(portrait + shape), while preserving the same scroll -> visual gap.
========================================================= */
@media (max-width: 500px) and (max-height: 680px) and (orientation: portrait) {
.bubbleContainer {
display: none !important;
}
}
/* =========================================================
HERO V2 — PRODUCTION TABLET PORTRAIT (V5)
Approved tablet portrait layout.
Phone portrait and phone landscape rules remain frozen.
Scope:
- portrait only
- width 501px through 1100px
- covers current measured tablet portrait geometries
and the 1024/1025 synthetic boundary probes
Strategy:
- use the successful phone portrait ordering as a structural model
- give tablets their own fluid scale instead of inheriting desktop sizes
- title -> certifications -> bubble -> scroll -> visual row
- the visual row owns all remaining height
- contact anchors to bottom-right of the Hero
- socials anchor to top-right
V4 spacing refinement:
- keep V3's stronger tablet sizing
- add more breathing room between title / certifications / bubble / scroll
- slightly reduce the visual row to 92% so the overall composition feels
less cramped on tablets
- phone production CSS remains untouched
========================================================= */
@media (min-width: 501px) and (max-width: 1100px) and (orientation: portrait) {
.hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
position: relative !important;
overflow: hidden !important;
/*
* Tablet scale is limited by BOTH width and height.
* This keeps compact 744–820px tablets from inheriting desktop sizing
* while still allowing larger 985–1032px tablets to breathe.
*/
--tablet-title-size:
clamp(54px, min(8.4vw, 6.3svh), 74px);
--tablet-cert-title-size:
clamp(32px, min(4.8vw, 3.6svh), 44px);
--tablet-cert-copy-size:
clamp(18px, min(2.75vw, 2.05svh), 23px);
--tablet-cert-icon-size:
clamp(58px, min(8.2vw, 6.1svh), 76px);
--tablet-bubble-font:
clamp(17px, min(2.4vw, 1.8svh), 21px);
--tablet-bubble-avatar:
clamp(48px, min(6.6vw, 5.05svh), 60px);
--tablet-scroll-size:
clamp(48px, min(7vw, 5.2svh), 62px);
--tablet-contact-size:
clamp(104px, min(15vw, 11svh), 132px);
--tablet-social-icon:
clamp(34px, min(4.9vw, 3.7svh), 42px);
--tablet-social-font:
clamp(17px, min(2.5vw, 1.9svh), 20px);
--tablet-corner-gap:
clamp(10px, 1.5vw, 18px);
/*
* V5: one shared vertical rhythm for the upper tablet stack.
* Title -> Certifications -> Bubble -> Scroll all use this same gap.
*/
--tablet-stack-gap:
clamp(26px, 2.5svh, 36px);
/*
* Structural rhythm.
* The final row receives every remaining pixel, preventing the image
* from independently floating upward through title/cert/bubble content.
*/
grid-template-rows:
auto
auto
auto
auto
clamp(10px, 1.0svh, 16px)
minmax(0, 1fr) !important;
}
/*
* The existing left/right wrappers are desktop layout containers.
* Tablet portrait promotes their children directly into the Hero grid.
*/
.heroSection {
display: contents !important;
}
.heroTitle,
.certifications,
.bubbleContainer,
.scroll,
.contactButtonLink {
min-width: 0 !important;
}
/* =========================================================
TITLE
========================================================= */
.heroTitle {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: center !important;
width: max-content !important;
max-width: calc(100% - 130px) !important;
margin-top:
clamp(34px, 4.4svh, 62px) !important;
margin-bottom:
var(--tablet-stack-gap) !important;
font-size:
var(--tablet-title-size) !important;
line-height: 1.08 !important;
white-space: nowrap !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
}
/* =========================================================
CERTIFICATIONS
========================================================= */
.certifications {
grid-column: 1 !important;
grid-row: 2 !important;
justify-self: stretch !important;
width: 100% !important;
margin: 0 !important;
margin-bottom:
var(--tablet-stack-gap) !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
}
.certifications h2 {
width: 100% !important;
font-size:
var(--tablet-cert-title-size) !important;
line-height: 1.15 !important;
}
.certifications p {
margin:
clamp(8px, 1.1svh, 14px)
0 !important;
font-size:
var(--tablet-cert-copy-size) !important;
line-height: 1.2 !important;
}
.certificationsImages {
justify-content: center !important;
gap:
clamp(10px, 1.6vw, 16px) !important;
}
.certificationsImages img {
width:
var(--tablet-cert-icon-size) !important;
height:
var(--tablet-cert-icon-size) !important;
padding:
clamp(7px, 1.1vw, 10px) !important;
}
/* =========================================================
SPEECH BUBBLE
========================================================= */
.bubbleContainer {
display: flex !important;
grid-column: 1 !important;
grid-row: 3 !important;
justify-self: center !important;
align-self: start !important;
width:
min(76%, 610px) !important;
gap:
clamp(8px, 1.2vw, 12px) !important;
margin:
0
0
var(--tablet-stack-gap) !important;
transform: none !important;
align-items: center !important;
position: relative !important;
z-index: 2 !important;
}
.bubble {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
align-self: center !important;
white-space: nowrap !important;
font-size:
var(--tablet-bubble-font) !important;
line-height: 1.15 !important;
/*
* Symmetric vertical padding, following the final phone-landscape lesson:
* visual bubble height comes from equal top/bottom breathing room.
*/
padding-block:
clamp(11px, 1.15svh, 14px) !important;
padding-inline:
clamp(14px, 2vw, 20px) !important;
}
.bubbleContainer img {
flex:
0 0
var(--tablet-bubble-avatar) !important;
width:
var(--tablet-bubble-avatar) !important;
height:
var(--tablet-bubble-avatar) !important;
align-self: center !important;
}
/* =========================================================
SCROLL
========================================================= */
.scroll {
display: block !important;
grid-column: 1 !important;
grid-row: 4 !important;
justify-self: center !important;
align-self: start !important;
width: max-content !important;
margin: 0 !important;
position: relative !important;
z-index: 2 !important;
}
.scroll > svg {
display: block !important;
width:
var(--tablet-scroll-size) !important;
height:
var(--tablet-scroll-size) !important;
transform: none !important;
}
/* =========================================================
PORTRAIT + SHAPE
The visual becomes the final grid row rather than an independently
positioned 75%-height desktop layer. This is the primary structural fix
for all baseline title/cert/bubble/image collisions.
========================================================= */
.bg {
position: relative !important;
grid-column: 1 !important;
grid-row: 6 !important;
align-self: end !important;
justify-self: center !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
/*
* V2 proportion refinement:
* keep the visual centered/bottom-anchored but make the combined
* Canvas + portrait composition slightly smaller so the upper
* content can carry more visual weight.
*/
width:
min(
90vw,
calc(100% + (2 * var(--page-gutter)))
) !important;
/*
* V3 keeps the visual slightly reduced overall, but restores more of
* the final row height so the scroll-to-image gap stays in the tablet
* QA ideal band rather than leaving a large dead zone.
*/
height: 92% !important;
min-height: 0 !important;
margin-inline:
calc(-1 * var(--page-gutter)) !important;
overflow: hidden !important;
z-index: 0 !important;
}
.hImg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: auto !important;
}
.hImg img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
}
/* =========================================================
CONTACT
========================================================= */
.contactButtonLink {
position: absolute !important;
right:
max(
var(--tablet-corner-gap),
env(safe-area-inset-right, 0px)
) !important;
bottom:
max(
var(--tablet-corner-gap),
env(safe-area-inset-bottom, 0px)
) !important;
width:
var(--tablet-contact-size) !important;
height:
var(--tablet-contact-size) !important;
display: grid !important;
place-items: center !important;
margin: 0 !important;
padding: 0 !important;
z-index: 3 !important;
}
.contactButton {
position: relative !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.contactButton > svg {
width: 100% !important;
height: 100% !important;
}
.arrow {
width: 100% !important;
height: 100% !important;
}
.arrow svg {
width:
clamp(34px, 4.7vw, 46px) !important;
height:
clamp(34px, 4.7vw, 46px) !important;
transform: none !important;
}
/* =========================================================
SOCIAL RAIL
Keep the familiar top-right portrait placement, but give tablets their
own scale rather than inheriting desktop 28px/16px dimensions blindly.
========================================================= */
.socials {
position: absolute !important;
top: 0 !important;
right: 0 !important;
gap:
clamp(11px, 1.5svh, 15px) !important;
padding:
clamp(6px, 0.85vw, 9px) !important;
z-index: 4 !important;
}
.socials img {
width:
var(--tablet-social-icon) !important;
height:
var(--tablet-social-icon) !important;
}
.socialsTextContainer {
width:
var(--tablet-social-icon) !important;
height:
var(--tablet-social-icon) !important;
}
.socialsText {
height: 100% !important;
font-size:
var(--tablet-social-font) !important;
padding:
0
clamp(8px, 1.2vw, 12px) !important;
transform:
translateY(
calc(-1 * var(--tablet-social-icon))
) !important;
}
}
/* =========================================================
TABLET PORTRAIT COMPACT-HEIGHT PRESSURE
This is a behavior-based height pressure state, not a named-device patch.
It applies only when tablet portrait has less vertical room.
========================================================= */
@media (min-width: 501px) and (max-width: 1100px) and (max-height: 1050px) and (orientation: portrait) {
.hero {
--tablet-stack-gap:
clamp(20px, 2.0svh, 24px);
--tablet-title-size:
clamp(50px, min(7.7vw, 5.75svh), 62px);
--tablet-cert-title-size:
clamp(29px, min(4.35vw, 3.25svh), 36px);
--tablet-cert-copy-size:
clamp(17px, min(2.5vw, 1.9svh), 20px);
--tablet-cert-icon-size:
clamp(54px, min(7.6vw, 5.6svh), 64px);
--tablet-bubble-font:
clamp(16px, min(2.25vw, 1.7svh), 18px);
--tablet-bubble-avatar:
clamp(46px, min(6.3vw, 4.8svh), 52px);
--tablet-scroll-size:
clamp(44px, min(6.5vw, 5.0svh), 52px);
--tablet-contact-size:
clamp(96px, min(14vw, 10.5svh), 112px);
grid-template-rows:
auto
auto
auto
auto
clamp(8px, 0.8svh, 10px)
minmax(0, 1fr) !important;
}
.heroTitle {
margin-top:
clamp(30px, 3.8svh, 40px) !important;
margin-bottom:
var(--tablet-stack-gap) !important;
}
.certifications {
margin-bottom:
var(--tablet-stack-gap) !important;
}
.bubbleContainer {
margin-bottom:
var(--tablet-stack-gap) !important;
}
.bubble {
padding-block:
clamp(10px, 1.05svh, 12px) !important;
padding-inline:
clamp(12px, 1.7vw, 16px) !important;
}
}
/* =========================================================
HERO V2 — PRODUCTION TABLET LANDSCAPE (V6)
Approved tablet landscape composition.
Phone portrait / phone landscape / tablet portrait remain frozen and untouched.
Purpose:
- restore a larger portrait while independently shrinking the blue Shape
- enlarge certifications and speech bubble for tablet readability
- use the proven centered FOLLOW ME rotation model
- retain the familiar desktop-style left/right composition
- handle short tablet browser heights with height-fluid scaling
This is the approved behavior-based tablet landscape range.
Desktop/laptop regression should still be included in the final Hero
cross-browser regression because small laptop geometries can overlap
the same CSS range.
========================================================= */
@media
(min-width: 1000px)
and (max-width: 1700px)
and (min-height: 501px)
and (max-height: 1000px)
and (orientation: landscape) {
.hero {
position: relative !important;
--tablet-land-title:
clamp(56px, 8.0svh, 80px);
--tablet-land-cert-title:
clamp(24px, 3.8svh, 32px);
--tablet-land-cert-copy:
clamp(16px, 2.4svh, 20px);
--tablet-land-cert-icon:
clamp(56px, 7.6svh, 68px);
--tablet-land-scroll:
clamp(52px, 6.6svh, 62px);
--tablet-land-bubble-font:
16px;
--tablet-land-bubble-avatar:
clamp(50px, 7.0svh, 58px);
--tablet-land-contact:
clamp(104px, 20svh, 132px);
}
/* -------------------------
LEFT CONTENT
------------------------- */
.heroTitle {
margin-top:
clamp(24px, 5.0svh, 44px) !important;
font-size:
var(--tablet-land-title) !important;
line-height: 1.04 !important;
position: relative !important;
z-index: 2 !important;
}
.certifications {
width:
min(62%, 440px) !important;
position: relative !important;
z-index: 2 !important;
}
.certifications h2 {
font-size:
var(--tablet-land-cert-title) !important;
line-height: 1.15 !important;
}
.certifications p {
/*
* V4: one small, even gap above and below the Credly line.
* This keeps the title -> paragraph -> icons rhythm balanced.
*/
margin-block: 10px !important;
margin-inline: 0 !important;
font-size:
var(--tablet-land-cert-copy) !important;
line-height: 1.2 !important;
}
.certificationsImages {
gap:
clamp(10px, 1.5svh, 14px) !important;
}
.certificationsImages img {
width:
var(--tablet-land-cert-icon) !important;
height:
var(--tablet-land-cert-icon) !important;
padding:
clamp(7px, 1.1svh, 9px) !important;
}
.scroll {
margin-bottom:
clamp(22px, 4.2svh, 40px) !important;
position: relative !important;
z-index: 2 !important;
}
.scroll > svg {
width:
var(--tablet-land-scroll) !important;
height:
var(--tablet-land-scroll) !important;
transform: none !important;
}
/* -------------------------
CENTRAL PORTRAIT / SHAPE
Baseline tablets inherited the desktop 75%-height portrait.
That put visible head/shoulder pixels into title and bubble regions.
Lower the top edge by shrinking the portrait while keeping it
centered and bottom-anchored.
------------------------- */
.bg {
z-index: 0 !important;
}
/*
* V5 — THREE.JS SHAPE SIZE FIX
*
* React Three Fiber's